Added the website preview icon

modules/backend/assets/css/october.css

@@ -6718,18 +6718,23 @@ nav#layout-mainmenu.navbar ul li.icon i {
 nav#layout-mainmenu.navbar ul li.icon a {
   padding: 14px;
 }
-nav#layout-mainmenu.navbar ul li.power-off i {
+nav#layout-mainmenu.navbar ul li.power-off i,
+nav#layout-mainmenu.navbar ul li.preview i {
   font-size: 20px;
 }
-nav#layout-mainmenu.navbar ul li.power-off a {
+nav#layout-mainmenu.navbar ul li.power-off a,
+nav#layout-mainmenu.navbar ul li.preview a {
   padding: 20px;
 }
 nav#layout-mainmenu.navbar ul li.account {
   margin-right: 0;
+  line-height: 23px;
 }
 nav#layout-mainmenu.navbar ul li.account img {
   width: 25px;
   margin-right: 7px;
+  position: relative;
+  top: -2px;
 }
 nav#layout-mainmenu.navbar ul.nav {
   display: inline-block;

modules/backend/assets/js/october.navbar.js

@@ -17,6 +17,10 @@
                 nav = $('ul.nav', navbar)
 
             nav.verticalMenu($('a.menu-toggle', navbar))
+
+            $('[data-toggle="tooltip"]', navbar).tooltip({
+                'container': 'body'
+            })
         })
     })
 })(jQuery);

modules/backend/assets/less/layout/mainmenu.less

@@ -54,16 +54,20 @@ nav#layout-mainmenu.navbar {
                 a {padding: 14px;}
             }
 
-            &.power-off {
+            &.power-off, &.preview {
                 i {font-size: 20px;}
                 a {padding: 20px;}
             }
 
             &.account {
                 margin-right: 0;
+                line-height: 23px;
+
                 img {
                     width: 25px;
                     margin-right: 7px;
+                    position: relative;
+                    top: -2px;
                 }
             }
         }

modules/backend/lang/en/lang.php

@@ -168,4 +168,7 @@ return [
         'show_gutter' => 'Show gutter',
         'theme' => 'Color scheme',
     ],
+    'tooltips' => [
+        'preview_website' => 'Preview the website'
+    ]
 ];

modules/backend/layouts/_mainmenu.htm

@@ -18,8 +18,12 @@
     </div>
     <div class="layout-cell width-fix">
         <ul>
-            <?php /* @todo Context help system */ ?>
-            <!-- <li class="icon"><a href="#"><i class="icon-question"></i></a></li> -->
+            <?php 
+                /* @todo Context help system 
+                    <li class="icon"><a href="#"><i class="icon-question"></i></a></li>
+                */
+            ?>
+            <li class="icon preview"><a href="#" data-toggle="tooltip" data-placement="bottom" title="<?= trans('backend::lang.tooltips.preview_website') ?>"><i class="icon-paw"></i></a></li>
             <li class="highlight account">
                 <a href="<?= Backend::url('backend/users/mysettings') ?>">
                     <img src="<?= $this->user->getAvatarThumb() ?>">
@@ -27,7 +31,7 @@
                 </a>
             </li>
             <li class="icon power-off">
-                <a href="<?= Backend::url('backend/auth/signout') ?>" title="<?= trans('backend::lang.account.sign_out') ?>"><i class="icon-power-off"></i></a>
+                <a data-toggle="tooltip" data-placement="left" href="<?= Backend::url('backend/auth/signout') ?>" title="<?= trans('backend::lang.account.sign_out') ?>"><i class="icon-power-off"></i></a>
             </li>
         </ul>
     </div>