mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
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
This commit is contained in:
Peter Zimon
GitHub
parent
d0c2caec9e
commit
ccbc26d6bc
4 changed files with 29 additions and 18 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
1
ghost/admin/public/assets/icons/expand.svg
Normal file
1
ghost/admin/public/assets/icons/expand.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 600 B |
|
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.4 KiB |
Loading…
Add table
Reference in a new issue