TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 05:37:34 +03:00
Code Issues Projects Releases Wiki Activity

Added descriptive line to each menu item in cardmenu

Browse Source
This commit is contained in:
Sanne de Vries 2020-11-16 17:34:32 +01:00
parent 7970917872
commit c71413b0f7
4 changed files with 30 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -800,10 +800,6 @@
background: var(--whitegrey-l1);
}
.kg-cardmenu-card-selected div {
color: var(--darkgrey);
}
.kg-cardmenu-card-hover .kg-cardmenu-action-icon {
display: flex;
align-items: center;
@ -813,6 +809,7 @@
padding: 5px;
margin-top: -2px;
margin-bottom: -2px;
margin-left: auto;
margin-right: 8px;
border-radius: 3px;
}
@ -895,7 +892,7 @@
/* 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: 312px;
max-height: 440px;
max-height: 376px;
padding-top: 0;
background-clip: padding-box;
z-index: 9999999; /* have to compete with codemirror */

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

@ -15,7 +15,10 @@
{{did-update this.scrollIntoView (eq item @selectedItem)}}
>
<div class="{{kg-style "cardmenu-icon"}} {{item.iconClass}}" aria-hidden="true">{{svg-jar item.icon class="w7 h7"}}</div>
<div class="{{kg-style "cardmenu-text"}}">
<div class="{{kg-style "cardmenu-label"}}">{{item.label}}</div>
<div class="{{kg-style "cardmenu-desc"}}">{{item.desc}}</div>
</div>
{{#if item.deleteClicked}}
<span class="kg-cardmenu-action-icon" {{on "click" item.deleteClicked}}>{{svg-jar "trash"}}</span>
{{/if}}

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

@ -20,8 +20,16 @@ export function kgStyle([style], options) {
cssClass = 'flex items-center';
break;
case 'cardmenu-text':
cssClass = 'flex flex-column';
break;
case 'cardmenu-label':
cssClass = 'f-7 tracked-1 fw4 ma0 ml4 flex-grow-1 truncate';
cssClass = 'f8 lh-heading darkgrey tracked-1 fw4 ma0 ml4 flex-grow-1 truncate';
break;
case 'cardmenu-desc':
cssClass = 'f-small lh-heading tracked-1 fw4 ma0 ml4 flex-grow-1 midlightgrey truncate';
break;
// Container cards

15
ghost/admin/lib/koenig-editor/addon/options/cards.js
View File

@ -52,6 +52,7 @@ export const CARD_MENU = [
items: [{
label: 'Image',
icon: 'koenig/kg-card-type-image',
desc: 'Upload, or embed with /image [url]',
iconClass: 'kg-card-type-native',
matches: ['image', 'img'],
type: 'card',
@ -64,6 +65,7 @@ export const CARD_MENU = [
{
label: 'Markdown',
icon: 'koenig/kg-card-type-markdown',
desc: 'Insert a Markdown editor card',
iconClass: 'kg-card-type-native',
matches: ['markdown', 'md'],
type: 'card',
@ -72,6 +74,7 @@ export const CARD_MENU = [
{
label: 'HTML',
icon: 'koenig/kg-card-type-html',
desc: 'Insert a raw HTML card',
iconClass: 'kg-card-type-native',
matches: ['html'],
type: 'card',
@ -80,6 +83,7 @@ export const CARD_MENU = [
{
label: 'Gallery',
icon: 'koenig/kg-card-type-gallery',
desc: 'Create an image gallery',
iconClass: 'kg-card-type-native',
matches: ['gallery'],
type: 'card',
@ -88,6 +92,7 @@ export const CARD_MENU = [
{
label: 'Divider',
icon: 'koenig/kg-card-type-divider',
desc: 'Insert a dividing line',
iconClass: 'kg-card-type-native',
matches: ['divider', 'horizontal-rule', 'hr'],
type: 'card',
@ -96,6 +101,7 @@ export const CARD_MENU = [
{
label: 'Bookmark',
icon: 'koenig/kg-card-type-bookmark',
desc: 'Embed a link as a visual bookmark',
matches: ['bookmark'],
type: 'card',
replaceArg: 'bookmark',
@ -104,6 +110,7 @@ export const CARD_MENU = [
{
label: 'Email',
icon: 'koenig/kg-card-type-email',
desc: 'Only visible when delivered by email',
matches: ['email'],
type: 'card',
replaceArg: 'email'
@ -115,6 +122,7 @@ export const CARD_MENU = [
items: [{
label: 'YouTube',
icon: 'koenig/kg-card-type-youtube',
desc: '/youtube [video url]',
matches: ['youtube'],
type: 'card',
replaceArg: 'embed',
@ -123,6 +131,7 @@ export const CARD_MENU = [
{
label: 'Twitter',
icon: 'koenig/kg-card-type-twitter',
desc: '/twitter [tweet url]',
matches: ['twitter'],
type: 'card',
replaceArg: 'embed',
@ -131,6 +140,7 @@ export const CARD_MENU = [
{
label: 'Unsplash',
icon: 'koenig/kg-card-type-unsplash',
desc: '/unsplash [search-term or url]',
iconClass: 'kg-card-type-unsplash',
matches: ['unsplash'],
type: 'card',
@ -143,6 +153,7 @@ export const CARD_MENU = [
{
label: 'Vimeo',
icon: 'koenig/kg-card-type-vimeo',
desc: '/vimeo [video url]',
matches: ['vimeo'],
type: 'card',
replaceArg: 'embed',
@ -151,6 +162,7 @@ export const CARD_MENU = [
{
label: 'CodePen',
icon: 'koenig/kg-card-type-codepen',
desc: '/codepen [video url]',
iconClass: 'kg-card-type-codepen',
matches: ['codepen'],
type: 'card',
@ -160,6 +172,7 @@ export const CARD_MENU = [
{
label: 'Spotify',
icon: 'koenig/kg-card-type-spotify',
desc: '/spotify [track or playlist url]',
matches: ['spotify'],
type: 'card',
replaceArg: 'embed',
@ -168,6 +181,7 @@ export const CARD_MENU = [
{
label: 'SoundCloud',
icon: 'koenig/kg-card-type-soundcloud',
desc: '/soundcloud [track or playlist url]',
matches: ['soundcloud'],
type: 'card',
replaceArg: 'embed',
@ -176,6 +190,7 @@ export const CARD_MENU = [
{
label: 'Other...',
icon: 'koenig/kg-card-type-other',
desc: '/embed [url]',
iconClass: 'kg-card-type-native',
matches: ['embed'],
type: 'card',