Sidebar refinements and view site in new tab button (#1192)

no refs.

- added view site in new tab button to sidebar
- show secondary actions on sidebar only on mouseover
- replaced labs icon
- refined spacing for view site
- unified colors of secondary icons

ghost/admin/app/styles/layouts/main.css

@@ -152,7 +152,7 @@
 .gh-nav-search-button svg {
     width: 13px;
     height: 13px;
-    fill: color-mod(var(--midlightgrey) l(+10%));
+    fill: color-mod(var(--midlightgrey) l(-5%));
     line-height: 13px;
     transition: color 0.2s ease;
     transform: rotate(90deg);
@@ -275,35 +275,42 @@
     stroke: var(--white);
 }
 
-.gh-nav-list .gh-nav-nightshift {
+.gh-nav-list .gh-secondary-action {
     position: absolute;
     z-index: 999;
-    padding: 6px;
+    padding: 4px;
     margin: 0;
-    right: 20px;
+    right: 24px;
+    top: 1px;
+    opacity: 0;
+    transition: opacity ease 0.2s;
 }
 
-.gh-nav-list .gh-nav-nightshift span svg {
+.gh-nav-list:hover .gh-secondary-action {
+    opacity: 1.0;
+}
+
+.gh-nav-list .gh-secondary-action span svg {
     margin-right: 0;
-    width: 20px;
-    height: 20px;
+    width: 22px;
+    height: 22px;
 }
 
-.gh-nav-list .gh-nav-nightshift span svg path {
-    fill: color-mod(var(--midgrey) l(+5%));
+.gh-nav-list .gh-secondary-action span svg path {
+    fill: color-mod(var(--midlightgrey) l(-5%));
 }
 
-.gh-nav-list a.gh-nav-nightshift:hover,
-.gh-nav-list a.gh-nav-nightshift.active {
+.gh-nav-list a.gh-secondary-action:hover,
+.gh-nav-list a.gh-secondary-action.active {
     background: none;
 }
 
-.gh-nav-list .gh-nav-nightshift:hover span svg path {
-    fill: color-mod(var(--blue) l(-3%) s(+5%));
+.gh-nav-list .gh-secondary-action:hover span svg path {
+    fill: var(--darkgrey);
 }
 
 .gh-nav-main {
-    margin-top: -10px;
+    margin-top: -1px;
 }
 
 .gh-nav-manage .gh-nav-list-h {

ghost/admin/app/templates/components/gh-nav-menu.hbs

@@ -42,8 +42,11 @@
             {{gh-search-input class="gh-nav-search-input"}}
         </section>
         <ul class="gh-nav-list gh-nav-main">
-            <li {{action "transitionToOrRefreshSite" on="click"}}>
-                {{#link-to "site" data-test-nav="site" current-when=isOnSite preventDefault=false}}{{svg-jar "view-site-embed"}}View site{{/link-to}}
+            <li class="relative">
+                <a href="{{config.blogUrl}}/" class="gh-secondary-action" title="Open site in new tab" target="_blank">
+                    <span>{{svg-jar "expand"}}</span>
+                </a>
+                <span {{action "transitionToOrRefreshSite" on="click"}}>{{#link-to "site" data-test-nav="site" current-when=isOnSite preventDefault=false}}{{svg-jar "view-site-embed"}}View site{{/link-to}}</span>
             </li>
         </ul>
         <ul class="gh-nav-list gh-nav-manage">
@@ -104,7 +107,7 @@
     <div class="gh-nav-bottom">
         <ul class="gh-nav-list gh-nav-labs">
             <li class="relative">
-                <button class="gh-nav-nightshift" title="Toggle Night shift" {{action (toggle "nightShift" this.feature)}}>
+                <button class="gh-secondary-action" title="Toggle Night shift" {{action (toggle "nightShift" this.feature)}}>
                     <span>{{svg-jar "nightshift"}}</span>
                 </button>
                 {{#link-to "settings.labs" data-test-nav="labs"}}{{svg-jar "labs"}}Labs{{/link-to}}</li>

ghost/admin/public/assets/icons/expand.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.5 20c-.827 0-1.5-.673-1.5-1.5v-10C4 7.673 4.673 7 5.5 7h5c.276 0 .5.224.5.5s-.224.5-.5.5h-5c-.276 0-.5.224-.5.5v10c0 .275.224.5.5.5h10c.276 0 .5-.224.5-.5v-4.97c0-.276.224-.5.5-.5s.5.224.5.5v4.97c0 .827-.673 1.5-1.5 1.5h-10z"/><path d="M7.5 17.014c-.134 0-.259-.052-.354-.146S7 16.647 7 16.514s.052-.259.146-.354L18.293 5.014H13.5c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h6c.066 0 .13.013.191.038.123.051.219.147.27.27.026.062.039.126.039.192v6c0 .276-.224.5-.5.5s-.5-.224-.5-.5V5.721L7.854 16.867c-.095.095-.22.147-.354.147z"/></svg>

ghost/admin/public/assets/icons/nightshift.svg

@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M16.921 23.66c2.905 0 5.474-1.849 6.393-4.602 1.175-3.522-.734-7.344-4.256-8.52-.077-.026-.157-.038-.237-.038-.2 0-.395.082-.535.224-.2.203-.267.508-.172.776.19.537.29 1.099.296 1.668 0 2.887-2.354 5.24-5.248 5.241-.565-.007-1.126-.107-1.663-.296-.08-.028-.164-.043-.249-.043-.198 0-.385.076-.526.215-.203.2-.276.503-.186.773.667 1.997 2.257 3.588 4.255 4.255.69.23 1.406.347 2.128.347zm2.96-11.056c1.898 1.298 2.756 3.742 2.01 5.978-.714 2.14-2.711 3.577-4.969 3.577-.561 0-1.117-.091-1.653-.27-1.078-.36-2.016-1.075-2.659-2.009.18.017.361.026.541.029 3.731 0 6.759-3.028 6.759-6.75-.002-.186-.012-.371-.029-.555zM4.63 3.57c.826-.637 1.822-1.063 2.908-1.198V.75c0-.414.336-.75.75-.75s.75.336.75.75v1.622c1.086.135 2.082.561 2.908 1.197l1.141-1.142c.293-.292.768-.292 1.061 0 .293.293.293.768 0 1.061l-1.137 1.137c.647.825 1.083 1.823 1.225 2.913h1.59c.414 0 .75.336.75.75s-.336.75-.75.75h-1.58c-.13 1.1-.559 2.11-1.202 2.945l1.104 1.104c.293.293.293.768 0 1.061-.293.293-.768.293-1.06 0l-1.1-1.1c-.834.655-1.845 1.093-2.95 1.231v1.546c0 .415-.336.75-.75.75s-.75-.335-.75-.75V14.28c-1.105-.138-2.117-.576-2.95-1.23l-1.1 1.099c-.293.293-.768.293-1.06 0-.293-.293-.293-.768 0-1.06l1.103-1.105c-.643-.835-1.071-1.844-1.201-2.945H.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h1.589c.143-1.09.579-2.088 1.225-2.913L2.427 3.488c-.292-.293-.292-.768 0-1.06.293-.293.768-.293 1.061 0L4.63 3.568zm3.658 9.255c2.485 0 4.5-2.014 4.5-4.5 0-2.485-2.015-4.5-4.5-4.5-2.486 0-4.5 2.015-4.5 4.5 0 2.486 2.014 4.5 4.5 4.5z" fill="#000"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>light-mode-dark-light</title><path d="M12 23.5c-.276 0-.5-.224-.5-.5v-4.521c-1.372-.106-2.679-.648-3.726-1.546l-3.198 3.198c-.094.094-.22.146-.354.146s-.259-.052-.354-.146c-.195-.195-.195-.512 0-.707l3.198-3.198c-.898-1.047-1.44-2.354-1.546-3.726H1c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h4.521c.106-1.372.648-2.679 1.546-3.726L3.869 4.576c-.195-.195-.195-.512 0-.707.094-.094.22-.146.354-.146s.259.052.354.146l3.198 3.198c.73-.625 1.595-1.086 2.518-1.337l.017-.004c.399-.107.794-.174 1.191-.205V1c0-.276.224-.5.5-.5s.5.224.5.5v4.521c1.372.106 2.679.648 3.726 1.546l3.198-3.198c.094-.094.22-.146.354-.146s.259.052.354.146c.195.195.195.512 0 .707l-3.198 3.198c.898 1.047 1.44 2.354 1.546 3.726H23c.276 0 .5.224.5.5s-.224.5-.5.5h-4.521c-.106 1.372-.648 2.679-1.546 3.726l3.198 3.198c.195.195.195.512 0 .707-.094.094-.22.146-.354.146s-.259-.052-.354-.146l-3.198-3.198c-1.047.898-2.354 1.44-3.726 1.546V23c.001.276-.223.5-.499.5zM9.67 7.019C7.755 7.918 6.5 9.86 6.5 12c0 3.033 2.467 5.5 5.5 5.5 1.887 0 3.617-.958 4.626-2.531-.21.021-.419.031-.624.031-.867 0-1.707-.167-2.499-.496-1.603-.666-2.851-1.917-3.514-3.522-.519-1.259-.629-2.648-.319-3.963zm1.163-.393c-.472 1.296-.444 2.702.081 3.975.561 1.358 1.617 2.416 2.973 2.98.665.277 1.374.417 2.106.417.396 0 .792-.042 1.177-.126.219-.602.33-1.231.33-1.872 0-3.033-2.467-5.5-5.5-5.5-.39 0-.783.042-1.167.126z"/></svg>