TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-24 19:33:02 +03:00
Code Issues Projects Releases Wiki Activity

Styled new row layout of the cardmenu

Browse Source 
No issue

- Adjusted menu width and height
- Improved spacing cards
- Changed font styling
- Added snippet icons
This commit is contained in:
Sanne de Vries 2020-10-23 10:36:03 +02:00
parent 6ecba355eb
commit 36dbb35eb5
11 changed files with 46 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ghost/admin/app/styles/spirit/_koenig.css
View File

@ -856,8 +856,9 @@
/* Chrome has a bug with its scrollbars on this element which has been reported here: https://bugs.chromium.org/p/chromium/issues/detail?id=697381 */
.koenig-cardmenu {
width: 272px;
max-height: 580px;
width: 312px;
max-height: 440px;
padding-top: 0;
background-clip: padding-box;
z-index: 9999999; /* have to compete with codemirror */
left: -16px;
@ -895,7 +896,6 @@
box-sizing: border-box;
border: 1px solid var(--whitegrey);
background: var(--white);
border-radius: 5px;
}
.koenig-editor__editor .kg-bookmark-container {

4
ghost/admin/lib/koenig-editor/addon/components/koenig-menu-content.hbs
View File

@ -1,13 +1,13 @@
{{#each @itemSections as |section sectionIndex|}}
{{#if section.items}}
{{#if (or (not section.developerExperiment) (enable-developer-experiments))}}
<div class="flex flex-column justify-center h5 {{unless (eq sectionIndex 0) "mt4"}} mb3 nl4 nr4 pl4 pr4 bg-whitegrey midlightgrey ttu f-supersmall fw4 tracked-3" style="min-width: calc(100% + 3.2rem);">
<div class="flex flex-column justify-center {{unless (eq sectionIndex 0) "mt3"}} mb2 pl4 pr4 pt3 midlightgrey ttu f-supersmall fw5 tracked-3" style="min-width: calc(100% - 3.2rem); {{unless (eq sectionIndex 0) "border-top: 1px solid #e5eff5;"}}">
{{section.title}}
</div>
{{#each section.items as |item|}}
{{#if (or (not item.developerExperiment) (enable-developer-experiments))}}
<div class="{{if (eq item @selectedItem) "kg-cardmenu-card-selected"}} {{kg-style "cardmenu-card"}}" {{on "click" (fn @itemClicked item)}} data-kg="cardmenu-card" role="menuitem">
<div class="{{kg-style "cardmenu-icon"}} {{item.iconClass}}" aria-hidden="true">{{svg-jar item.icon class="w6 h6"}}</div>
<div class="{{kg-style "cardmenu-icon"}} {{item.iconClass}}" aria-hidden="true">{{svg-jar item.icon class="w7 h7"}}</div>
<div class="{{kg-style "cardmenu-label"}}">{{item.label}}</div>
</div>
{{/if}}

2
ghost/admin/lib/koenig-editor/addon/components/koenig-plus-menu.js
View File

@ -50,7 +50,7 @@ export default Component.extend({
snippets.forEach((snippet) => {
snippetsSection.items.push({
label: snippet.name,
icon: 'koenig/kg-card-type-bookmark',
icon: 'koenig/kg-card-type-snippet-text',
type: 'snippet',
matches: [snippet.name.toLowerCase()]
});

2
ghost/admin/lib/koenig-editor/addon/components/koenig-slash-menu.js
View File

@ -69,7 +69,7 @@ export default class KoenigSlashMenuComponent extends Component {
snippets.forEach((snippet) => {
snippetsSection.items.push({
label: snippet.name,
icon: 'koenig/kg-card-type-bookmark',
icon: 'koenig/kg-card-type-snippet-text',
type: 'snippet',
matches: [snippet.name.toLowerCase()]
});

6
ghost/admin/lib/koenig-editor/addon/helpers/kg-style.js
View File

@ -9,11 +9,11 @@ export function kgStyle([style], options) {
switch (style) {
// Card menu
case 'cardmenu':
cssClass = 'koenig-cardmenu absolute top-0 flex flex-column mt0 mr0 mb3 ml0 pa4 overflow-y-auto bg-white br3 shadow-3 ttn f7 normal';
cssClass = 'koenig-cardmenu absolute top-0 flex flex-column mt0 mr0 mb3 ml0 pb4 overflow-y-auto bg-white br3 shadow-3 ttn f7 normal';
break;
case 'cardmenu-card':
cssClass = 'flex items-center h19 br3 midgrey ba b--transparent hover-darkgrey kg-cardmenu-card-hover pt1 anim-fast';
cssClass = 'flex items-center middarkgrey ba b--transparent hover-darkgrey kg-cardmenu-card-hover pl4 pr4 pt2 pb2 anim-fast';
break;
case 'cardmenu-icon':
@ -21,7 +21,7 @@ export function kgStyle([style], options) {
break;
case 'cardmenu-label':
cssClass = 'f-supersmall tracked-1 fw3 ma0 ml2';
cssClass = 'f-7 tracked-1 fw4 ma0 ml4';
break;
// Container cards

5
ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-block-hover.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#FFF"/>
<path d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
<rect x="5.25" y="4.5" width="13.5" height="7.5" rx="1" fill="#3EB0EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 307 B

5
ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-block.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#F0F6F9"/>
<path d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
<rect x="5.25" y="4.5" width="13.5" height="7.5" rx="1" fill="#3EB0EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 310 B

6
ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-combination-hover.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#FFF"/>
<rect x="5.25" y="4.5" width="13.5" height="4.5" rx="1" fill="#3EB0EF"/>
<path d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
<rect x="5.25" y="11.25" width="8.25" height="1.5" rx=".75" fill="#738A94"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 388 B

6
ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-combination.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#F0F6F9"/>
<rect x="5.25" y="4.5" width="13.5" height="4.5" rx="1" fill="#3EB0EF"/>
<path d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
<rect x="5.25" y="11.25" width="8.25" height="1.5" rx=".75" fill="#738A94"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 391 B

7
ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-text-hover.svg Normal file
View File

@ -0,0 +1,7 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#FFF"/>
<path d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
<rect x="5.25" y="4.5" width="10.5" height="1.5" rx=".75" fill="#738A94"/>
<rect x="5.25" y="8.25" width="13.5" height="1.5" rx=".75" fill="#738A94"/>
<rect x="5.25" y="12" width="7.5" height="1.5" rx=".75" fill="#738A94"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 446 B

7
ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-text.svg Normal file
View File

@ -0,0 +1,7 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#F0F6F9"/>
<path d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
<rect x="5.25" y="4.5" width="10.5" height="1.5" rx=".75" fill="#738A94"/>
<rect x="5.25" y="8.25" width="13.5" height="1.5" rx=".75" fill="#738A94"/>
<rect x="5.25" y="12" width="7.5" height="1.5" rx=".75" fill="#738A94"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 449 B