* change page close button UI.

docs/css/doc.css

@@ -592,6 +592,7 @@ body {
   padding: 3px 8px;
   color: #fff;
   content: 'Enter';
+  border-radius: 0 3px 0 3px;
   -webkit-transition: right .1s cubic-bezier(.175, .885, .32, 1);
        -o-transition: right .1s cubic-bezier(.175, .885, .32, 1);
           transition: right .1s cubic-bezier(.175, .885, .32, 1);
@@ -1776,9 +1777,10 @@ body.query-enabled[data-query='icons'] #grid .card.open.section-preview-show .se
 #pageCloseBtn {
   position: absolute;
   top: 5px;
-  right: 0;
+  right: 15px;
   width: 48px;
   height: 48px;
+  border-radius: 4px;
 }
 #pageBody {
   position: absolute;
@@ -2390,6 +2392,12 @@ body.page-show[data-page-accent="purple"] #pageTogger:hover:after {
     left: 0;
     display: none;
   }
+  #pageHeader > .container {
+    padding-left: 60px;
+  }
+  #pageHeader > .container > .icon {
+    left: 15px;
+  }
   #pageContent > section:before {
     left: -15px;
   }

docs/js/doc.js

@@ -75,6 +75,7 @@
     var bestPageWidth = 1120;
     var $body, $window, $grid, $sectionTemplate,
         $queryInput, $chapters, $pageAttrs,
+        firstOpenPage = true,
         $choosedSection, $page, $pageHeader, $pageContent, $pageLoader,
         $pageBody, $navbar, $search, lastQueryString,
         $header, $sections, $chapterHeadings; // elements
@@ -1064,7 +1065,6 @@
                 showPageTopic(topic);
                 handlePageLoad();
                 $pageAttrs.show();
-                if(debug) console.log('show data', data);
             }
             if(lastShowDataCall) clearTimeout(lastShowDataCall);
             if($page.hasClass('openning')) {
@@ -1091,6 +1091,17 @@
                 $pageBody.scrollTop(0);
                 setTimeout(function(){
                     $page.removeClass('openning');
+                    if(firstOpenPage) {
+                        firstOpenPage = $.zui.store.get('first_open_page', true);
+                        if(firstOpenPage) {
+                            firstOpenPage = false;
+                            $.zui.store.set('first_open_page', false);
+                            setTimeout(function(){
+                                $('#pageCloseBtn').tooltip('show').addClass('active');
+                                setTimeout(function(){$('#pageCloseBtn').tooltip('hide').removeClass('active');}, 6000);
+                            }, 500);
+                        }
+                    }
                 }, 300);
             }, 10);
         });
@@ -1614,7 +1625,6 @@
                 closePage();
                 stopPropagation(e);
                 e.preventDefault();
-                console.log('close page')
             } else if($body.hasClass('compact-mode-in')) {
                 $window.scrollTop(0);
                 toggleCompactMode(false);

src/js/doc.js

@@ -68,6 +68,7 @@
     var bestPageWidth = 1120;
     var $body, $window, $grid, $sectionTemplate,
         $queryInput, $chapters, $pageAttrs,
+        firstOpenPage = true,
         $choosedSection, $page, $pageHeader, $pageContent, $pageLoader,
         $pageBody, $navbar, $search, lastQueryString,
         $header, $sections, $chapterHeadings; // elements
@@ -1057,7 +1058,6 @@
                 showPageTopic(topic);
                 handlePageLoad();
                 $pageAttrs.show();
-                if(debug) console.log('show data', data);
             }
             if(lastShowDataCall) clearTimeout(lastShowDataCall);
             if($page.hasClass('openning')) {
@@ -1084,6 +1084,17 @@
                 $pageBody.scrollTop(0);
                 setTimeout(function(){
                     $page.removeClass('openning');
+                    if(firstOpenPage) {
+                        firstOpenPage = $.zui.store.get('first_open_page', true);
+                        if(firstOpenPage) {
+                            firstOpenPage = false;
+                            $.zui.store.set('first_open_page', false);
+                            setTimeout(function(){
+                                $('#pageCloseBtn').tooltip('show').addClass('active');
+                                setTimeout(function(){$('#pageCloseBtn').tooltip('hide').removeClass('active');}, 6000);
+                            }, 500);
+                        }
+                    }
                 }, 300);
             }, 10);
         });
@@ -1607,7 +1618,6 @@
                 closePage();
                 stopPropagation(e);
                 e.preventDefault();
-                console.log('close page')
             } else if($body.hasClass('compact-mode-in')) {
                 $window.scrollTop(0);
                 toggleCompactMode(false);

src/less/doc.less

@@ -868,6 +868,7 @@ body {
         top: 0;
         padding: 3px 8px;
         color: #fff;
+        border-radius: 0 3px 0 3px;
       }
     }
 
@@ -1377,10 +1378,11 @@ body.query-enabled {
 }
 #pageCloseBtn {
   position: absolute;
-  right: 0;
+  right: 15px;
   top: 5px;
   width: 48px;
   height: 48px;
+  border-radius: 4px;
 }
 #pageBody {
   padding: 15px 0;
@@ -1854,6 +1856,9 @@ body.page-show {
     }
   }
 
+  #pageHeader > .container {padding-left: 60px;}
+  #pageHeader > .container > .icon {left: 15px;}
+
   #pageContent > section:before {
     left: -15px;
   }