Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Refined sidebar view icons

Browse source 
no refs.
- replaced icons for custom views for circles so it's more scannable
This commit is contained in:
Peter Zimon 2020-02-03 14:45:18 +01:00
parent 1adae0d041
commit 2c137f0b38
2 changed files with 41 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
ghost/admin/app/styles/layouts/main.css
View file

@ -480,85 +480,58 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.gh-nav-view-list a .svg-blue svg { .gh-nav-view-list .circle {
fill: var(--blue); display: block;
border-radius: 999px;
border: 3px solid var(--midgrey);
width: 12px;
height: 12px;
margin: 0 10px 0 2px;
} }
.gh-nav-view-list a:hover .svg-blue svg, .gh-nav-view-list .svg-midgrey .circle {
.gh-nav-view-list .active .svg-blue svg { border-color: var(--midgrey);
fill: color-mod(var(--blue) l(-8%)); background: var(--midgrey);
} }
.gh-nav-view-list a .svg-green svg { .gh-nav-view-list .svg-blue .circle {
fill: var(--green); border-color: var(--blue);
background: var(--blue);
} }
.gh-nav-view-list a:hover .svg-green svg, .gh-nav-view-list .svg-green .circle {
.gh-nav-view-list .active .svg-green svg { border-color: var(--green);
fill: color-mod(var(--green) l(-8%)); background: var(--green);
} }
.gh-nav-view-list a .svg-purple svg { .gh-nav-view-list .svg-red .circle {
fill: var(--purple); border-color: var(--red);
background: var(--red);
} }
.gh-nav-view-list a:hover .svg-purple svg, .gh-nav-view-list .svg-teal .circle {
.gh-nav-view-list .active .svg-purple svg { border-color: #4dcddc;
fill: color-mod(var(--purple) l(-8%)); background: #4dcddc;
} }
.gh-nav-view-list a .svg-yellow svg { .gh-nav-view-list .svg-purple .circle {
fill: color-mod(var(--yellow) l(-5%)); border-color: var(--purple);
background: var(--purple);
} }
.gh-nav-view-list a:hover .svg-yellow svg, .gh-nav-view-list .svg-yellow .circle {
.gh-nav-view-list .active .svg-yellow svg { border-color: var(--yellow);
fill: color-mod(var(--yellow) l(-12%)); background: var(--yellow);
} }
.gh-nav-view-list a .svg-red svg { .gh-nav-view-list .svg-orange .circle {
fill: var(--red); border-color: #fe8b05;
background: #fe8b05;
} }
.gh-nav-view-list a:hover .svg-red svg, .gh-nav-view-list .svg-pink .circle {
.gh-nav-view-list .active .svg-red svg { border-color: var(--pink);
fill: color-mod(var(--red) l(-8%)); background: var(--pink);
}
.gh-nav-view-list a .svg-pink svg {
fill: var(--pink);
}
.gh-nav-view-list a:hover .svg-pink svg,
.gh-nav-view-list .active .svg-pink svg {
fill: color-mod(var(--pink) l(-8%));
}
.gh-nav-view-list a .svg-midgrey svg {
fill: var(--midgrey);
}
.gh-nav-view-list a:hover .svg-midgrey svg,
.gh-nav-view-list .active .svg-midgrey svg {
fill: var(--darkgrey);
}
.gh-nav-view-list a .svg-teal svg {
fill: #4dcddc;
}
.gh-nav-view-list a:hover .svg-teal svg,
.gh-nav-view-list .active .svg-teal svg {
fill: color-mod(#4dcddc l(-8%));
}
.gh-nav-view-list a .svg-orange svg {
fill: #fe8b05;
}
.gh-nav-view-list a:hover .svg-orange svg,
.gh-nav-view-list .active .svg-orange svg {
fill: color-mod(#fe8b05 l(-8%));
} }
/* Mobile Nav Menu (Slides out) /* Mobile Nav Menu (Slides out)

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

@ -43,7 +43,13 @@
<li> <li>
<LinkTo @route="posts" @query={{reset-posts-query view.filter}} data-test-nav-custom="{{view.route}}-{{view.name}}" title="{{view.name}}"> <LinkTo @route="posts" @query={{reset-posts-query view.filter}} data-test-nav-custom="{{view.route}}-{{view.name}}" title="{{view.name}}">
{{!-- <div class="dib w4 h4 mr2 bg-{{view.color}} br-100"></div> --}} {{!-- <div class="dib w4 h4 mr2 bg-{{view.color}} br-100"></div> --}}
<span class="flex items-center svg-{{view.color}}">{{svg-jar (or view.icon "post")}}</span> <span class="flex items-center svg-{{view.color}}">
{{#if view.icon}}
{{svg-jar (or view.icon "post")}}
{{else}}
<span class="circle"></span>
{{/if}}
</span>
<span class="gh-nav-viewname">{{view.name}}</span> <span class="gh-nav-viewname">{{view.name}}</span>
</LinkTo> </LinkTo>
</li> </li>