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

Koenig - Style refinements for card menu, toolbar, and link input

Browse source 
refs https://github.com/TryGhost/Ghost/issues/9505
- Card menu style refinements
- Toolbar style refinements
- Unifying toolbar, link tooltip and link toolbar size and position
- Making link input the same size as text toolbar
- Fix single element position in toolbar
- Making toolbars darker
This commit is contained in:
Zimo 2018-05-08 13:16:26 +02:00 • committed by Kevin Ansfield
parent e56337a2f4
commit b4b85fba99
5 changed files with 16 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card.hbs
View file

@ -7,7 +7,7 @@
{{yield}}
{{#if toolbar}}
<ul data-toolbar="true" class="kg-action-bar bg-lgr-darkgrey inline-flex pa0 ma0 pl1 pr1 nl1 list br3 shadow-2 items-center absolute white sans-serif f8 fw6 tracked-2 anim-fast-bezier z-999 {{if showToolbar "" "o-0 drop-down"}}" style={{toolbarStyle}}>
<ul data-toolbar="true" class="kg-action-bar bg-darkgrey-d1 inline-flex pa0 ma0 pl1 pr1 nl1 list br3 shadow-2 items-center absolute white sans-serif f8 fw6 tracked-2 anim-fast-bezier z-999 {{if showToolbar "" "o-0 drop-down"}}" style={{toolbarStyle}}>
{{#each toolbar.items as |item|}}
{{#if item.divider}}
<li class="ma0 kg-action-bar-divider bg-darkgrey-d2 h5"></li>
@ -16,7 +16,7 @@
<button
type="button"
title={{item.title}}
class="dib dim-lite pa2 link h8 {{item.buttonClass}}"
class="dib dim-lite link h10 w9 nudge-top--1 justify-center {{item.buttonClass}}"
onmousedown={{action item.action}}
>
{{#if item.icon}}{{svg-jar item.icon class=(concat item.iconClass (if item.text " mr2") " w4 h4")}} {{/if}}{{item.text}}

2
ghost/admin/lib/koenig-editor/addon/templates/components/koenig-link-input.hbs
View file

@ -1,7 +1,7 @@
<input
placeholder="Enter url"
value={{href}}
class="miw-100 pa2 pr6 mih-100 ba br3 shadow-2 f8 lh-heading tracked-2 outline-0 b--blue"
class="kg-link-input pa2 pr6 mih-100 ba br3 shadow-2 f8 lh-heading tracked-2 outline-0 b--blue h10 nudge-top--8"
autofocus="true"
oninput={{action (mut href) value="target.value"}}
onkeydown={{action "inputKeydown"}}

8
ghost/admin/lib/koenig-editor/addon/templates/components/koenig-link-toolbar.hbs
View file

@ -1,13 +1,13 @@
{{#if showToolbar}}
<ul class="bg-darkgrey inline-flex pa0 ma0 list br3 shadow-2 items-center relative white f-small fw3 tracked-2">
<ul class="bg-darkgrey-d1 inline-flex pa0 ma0 list br3 shadow-2 items-center relative white f-small fw3 tracked-2 nudge-top--1">
<li class="mw70 ma0 truncate">
<a href="{{url}}" class="dib dim-lite pa2 pr1 link white" target="_blank" rel="noopener noreferrer">{{url}}</a>
<a href="{{url}}" class="dib dim-lite pa3 pr1 link white" target="_blank" rel="noopener noreferrer">{{url}}</a>
</li>
<li class="ma0">
<button
type="button"
title="Edit"
class="dib dim-lite pa1 link"
class="dib dim-lite pa2 pl1 pr1 link"
{{action "edit"}}
>
{{!-- TODO: get correct icon --}}
@ -18,7 +18,7 @@
<button
type="button"
title="Remove"
class="dib dim-lite pa1 pr2 link"
class="dib dim-lite pa2 pl1 pr1 link mr2"
{{action "remove"}}
>
{{!-- TODO: get correct icon --}}

2
ghost/admin/lib/koenig-editor/addon/templates/components/koenig-plus-menu.hbs
View file

@ -3,7 +3,7 @@
{{/if}}
{{#if showMenu}}
<div class="koenig-cardmenu {{kg-style "cardmenu"}}">
<div class="{{kg-style "cardmenu"}}">
{{!-- <div class="koenig-cardmenu-search">
{{svg-jar "koenig/search"}}
<input type="text" placeholder="Search for a card..." class="gh-input koenig-cardmenu-search-input">

39
ghost/admin/lib/koenig-editor/addon/templates/components/koenig-toolbar.hbs
View file

@ -1,9 +1,9 @@
<ul class="kg-action-bar bg-lgr-darkgrey inline-flex pa0 ma0 pl1 pr1 nl1 list br3 shadow-2 items-center relative white f8 fw6 tracked-2 {{if showToolbar "anim-fast-bezier" "o-0 pop-down"}}">
<ul class="kg-action-bar bg-darkgrey-d1 inline-flex pa0 ma0 pl1 pr1 nl1 list br3 shadow-2 items-center relative white f8 fw6 tracked-2 {{if showToolbar "anim-fast-bezier" "o-0 pop-down"}}">
<li class="ma0 lh-solid">
<button
type="button"
title="Bold"
class="dib dim-lite pa2 link h8"
class="dib dim-lite link h10 w9 nudge-top--1"
{{action "toggleMarkup" "strong"}}
>
{{svg-jar "koenig/kg-bold" class=(concat (if activeMarkupTagNames.isStrong "stroke-blue-l2" "stroke-white") " w4 h4")}}
@ -13,7 +13,7 @@
<button
type="button"
title="Italic"
class="dib dim-lite pa2 link h8"
class="dib dim-lite link h10 w9 nudge-top--1"
{{action "toggleMarkup" "em"}}
>
{{svg-jar "koenig/kg-italic" class=(concat (if (or activeMarkupTagNames.isEm activeMarkupTagNames.isI) "stroke-blue-l2" "stroke-white") " w4 h4")}}
@ -23,7 +23,7 @@
<button
type="button"
title="Heading One"
class="dib dim-lite pa2 link h8"
class="dib dim-lite link h10 w9 nudge-top--1"
{{action "toggleSection" "h1"}}
>
{{svg-jar "koenig/kg-heading-1" class=(concat (if activeSectionTagNames.isH1 "stroke-blue-l2" "stroke-white") " w4 h4")}}
@ -33,53 +33,30 @@
<button
type="button"
title="Heading Two"
class="dib dim-lite pa2 link h8"
class="dib dim-lite link h10 w9 nudge-top--1"
{{action "toggleSection" "h2"}}
>
{{svg-jar "koenig/kg-heading-2" class=(concat (if activeSectionTagNames.isH2 "stroke-blue-l2" "stroke-white") " w4 h4")}}
</button>
</li>
<li class="ma0 lh-solid kg-action-bar-divider bg-darkgrey-d2 h5"></li>
<li class="ma0 lh-solid kg-action-bar-divider bg-darkgrey-l2 h5"></li>
<li class="ma0 lh-solid">
<button
type="button"
title="Quote"
class="dib dim-lite pa2 link h8"
class="dib dim-lite link h10 w9 nudge-top--1"
{{action "toggleSection" "blockquote"}}
>
{{svg-jar "koenig/kg-quote" class=(concat (if activeSectionTagNames.isBlockquote "stroke-blue-l2" "stroke-white") " w4 h4")}}
</button>
</li>
<li class="ma0 lh-solid">
<button
type="button"
title="Unordered List"
class="dib dim-lite pa2 link h8"
{{action "toggleSection" "ul"}}
>
{{svg-jar "koenig/kg-bullet-list" class=(concat (if activeSectionTagNames.isUl "stroke-blue-l2" "stroke-white") " w4 h4")}}
</button>
</li>
<li class="ma0 lh-solid">
<button
type="button"
title="Ordered List"
class="dib dim-lite pa2 link h8"
{{action "toggleSection" "ol"}}
>
{{svg-jar "koenig/kg-numbered-list" class=(concat (if activeSectionTagNames.isOl "stroke-blue-l2" "stroke-white") " w4 h4")}}
</button>
</li>
<li class="ma0 lh-solid kg-action-bar-divider bg-darkgrey-d2 h5"></li>
<li class="ma0 lh-solid">
<button
type="button"
title="Link"
class="dib dim-lite pa2 link h8"
class="dib dim-lite link h10 w9 nudge-top--1"
{{action "editLink"}}
>
{{svg-jar "koenig/kg-link" class=(concat (if activeMarkupTagNames.isA "stroke-blue-l2" "stroke-white") " w4 h4")}}