TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-25 09:03:12 +03:00
Code Issues Projects Releases Wiki Activity

Koenig - Move list creation from card menus to toolbar

Browse Source 
refs https://github.com/TryGhost/Ghost/issues/9505
- remove unordered and bullet list icons from the (+) and / menus
- add unordered and bullet list icons to the formatting toolbar
- reorder toolbar icons to match latest design specs
- remove now-unused `replaceWithListItem` actions
This commit is contained in:
Kevin Ansfield 2018-03-15 14:35:39 +00:00
parent b0ef0409df
commit 3ef3ebfd6b
8 changed files with 40 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ghost/admin/app/styles/components/koenig.css
View File

@ -138,6 +138,9 @@
stroke-width: 2px;
stroke: color(var(--lightgrey) l(-10%));
}
.koenig-toolbar-btn-list svg path {
fill: color(var(--lightgrey) l(-10%));
}
.koenig-toolbar-btn:hover,
.koenig-toolbar-btn.selected {
@ -145,10 +148,16 @@
cursor: pointer;
text-shadow: #000 0 1px 6px;
}
.koenig-toolbar-btn-list.selected svg path {
fill: #fff;
}
.koenig-toolbar-btn:hover svg g {
stroke: #fff;
}
.koenig-toolbar-btn-list:hover svg path {
fill: #fff;
}
.koenig-toolbar-btn-bold {
font-weight: 700;

14
ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js
View File

@ -366,20 +366,6 @@ export default Component.extend({
});
},
replaceWithListSection(listType, range) {
let editor = this.get('editor');
let {head: {section}} = range;
editor.run((postEditor) => {
let {builder} = postEditor;
let item = builder.createListItem();
let listSection = builder.createListSection(listType, [item]);
postEditor.replaceSection(section, listSection);
postEditor.setRange(listSection.headPosition());
});
},
selectCard(card) {
this.selectCard(card);
},

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

@ -28,7 +28,6 @@ export default Component.extend({
// closure actions
replaceWithCardSection() {},
replaceWithListSection() {},
style: computed('top', function () {
return htmlSafe(`top: ${this.get('top')}px`);
@ -88,14 +87,6 @@ export default Component.extend({
this.replaceWithCardSection(cardName, range);
this._hideButton();
this._hideMenu();
},
replaceWithListSection(listType) {
let range = this._editorRange;
this.replaceWithListSection(listType, range);
this._hideMenu();
}
},

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

@ -36,20 +36,6 @@ const ITEM_MAP = [
matches: ['divider', 'horizontal-rule', 'hr'],
type: 'card',
replaceArg: 'hr'
},
{
label: 'Bullet list',
icon: 'koenig/list-bullets',
matches: ['list-bullet', 'bullet', 'ul'],
type: 'list',
replaceArg: 'ul'
},
{
label: 'Number list',
icon: 'koenig/list-number',
matches: ['list-number', 'number', 'ol'],
type: 'list',
replaceArg: 'ol'
}
];
@ -74,7 +60,6 @@ export default Component.extend({
// closure actions
replaceWithCardSection() {},
replaceWithListSection() {},
style: computed('top', function () {
return htmlSafe(`top: ${this.get('top')}px`);
@ -116,8 +101,6 @@ export default Component.extend({
if (item.type === 'card') {
this.replaceWithCardSection(item.replaceArg, range);
} else if (item.type === 'list') {
this.replaceWithListSection(item.replaceArg, range);
}
this._hideMenu();

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

@ -104,6 +104,8 @@ export default Component.extend({
}
},
/* private methods ------------------------------------------------------ */
_toggleVisibility: task(function* () {
// debounce for 100ms to account for "click to deselect" otherwise we
// run twice and the fade out animation jumps position

2
ghost/admin/lib/koenig-editor/addon/templates/components/koenig-editor.hbs
View File

@ -16,7 +16,6 @@
editor=editor
editorRange=selectedRange
replaceWithCardSection=(action "replaceWithCardSection")
replaceWithListSection=(action "replaceWithListSection")
}}
{{!-- slash menu popup --}}
@ -24,7 +23,6 @@
editor=editor
editorRange=selectedRange
replaceWithCardSection=(action "replaceWithCardSection")
replaceWithListSection=(action "replaceWithListSection")
}}
{{!-- all component cards wormholed into the editor canvas --}}

8
ghost/admin/lib/koenig-editor/addon/templates/components/koenig-plus-menu.hbs
View File

@ -27,13 +27,5 @@
<div class="koenig-cardmenu-icon">{{inline-svg "koenig/divider"}}</div>
<div class="koenig-cardmenu-label">Divider</div>
</div>
<div class="koenig-cardmenu-card" {{action "replaceWithListSection" "ul" on="click"}}>
<div class="koenig-cardmenu-icon">{{inline-svg "koenig/list-bullets"}}</div>
<div class="koenig-cardmenu-label">Bullet list</div>
</div>
<div class="koenig-cardmenu-card" {{action "replaceWithListSection" "ol" on="click"}}>
<div class="koenig-cardmenu-icon">{{inline-svg "koenig/list-number"}}</div>
<div class="koenig-cardmenu-label">Number list</div>
</div>
</div>
{{/if}}

48
ghost/admin/lib/koenig-editor/addon/templates/components/koenig-toolbar.hbs
View File

@ -15,25 +15,6 @@
>
I
</button>
<button
type="button"
title="Strike"
class="koenig-toolbar-btn koenig-toolbar-btn-strike {{if activeMarkupTagNames.isS "selected"}}"
{{action "toggleMarkup" "s"}}
>
S
</button>
<button
type="button"
title="Link"
class="koenig-toolbar-btn koenig-toolbar-btn-link"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none"><path d="M14.5 12.5l.086.086c.781.781 2.047.781 2.828 0l3.965-3.964c1.166-1.167 1.166-3.075 0-4.243l-1.758-1.757c-1.166-1.167-3.076-1.167-4.242 0l-3.965 3.964c-.781.781-.781 2.047 0 2.829l.086.085M9.5 11.5l-.086-.085c-.781-.781-2.047-.781-2.828 0l-3.965 3.964c-1.166 1.167-1.166 3.076 0 4.243l1.758 1.757c1.166 1.167 3.076 1.167 4.242 0l3.965-3.964c.781-.781.781-2.047 0-2.829l-.086-.086M8.111 15.889l7.778-7.778"/></g></svg>
</button>
<div class="koenig-toolbar-divider" role="presentation"></div>
{{!-- block buttons --}}
<button
type="button"
title="Heading One"
@ -50,6 +31,25 @@
>
H2
</button>
<div class="koenig-toolbar-divider" role="presentation"></div>
<button
type="button"
title="Unordered List"
class="koenig-toolbar-btn koenig-toolbar-btn-list {{if activeSectionTagNames.isUl "selected"}}"
{{action "toggleSection" "ul"}}
>
{{inline-svg "koenig/list-bullets"}}
</button>
<button
type="button"
title="Ordered List"
class="koenig-toolbar-btn koenig-toolbar-btn-list {{if activeSectionTagNames.isOl "selected"}}"
{{action "toggleSection" "ol"}}
>
{{inline-svg "koenig/list-number"}}
</button>
<button
type="button"
title="Quote"
@ -58,3 +58,13 @@
>
&ldquo;
</button>
<div class="koenig-toolbar-divider" role="presentation"></div>
<button
type="button"
title="Link"
class="koenig-toolbar-btn koenig-toolbar-btn-link"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none"><path d="M14.5 12.5l.086.086c.781.781 2.047.781 2.828 0l3.965-3.964c1.166-1.167 1.166-3.075 0-4.243l-1.758-1.757c-1.166-1.167-3.076-1.167-4.242 0l-3.965 3.964c-.781.781-.781 2.047 0 2.829l.086.085M9.5 11.5l-.086-.085c-.781-.781-2.047-.781-2.828 0l-3.965 3.964c-1.166 1.167-1.166 3.076 0 4.243l1.758 1.757c1.166 1.167 3.076 1.167 4.242 0l3.965-3.964c.781-.781.781-2.047 0-2.829l-.086-.086M8.111 15.889l7.778-7.778"/></g></svg>
</button>