From 8aa02da02cf2c435d04f7715bb081e5aac2e902f Mon Sep 17 00:00:00 2001 From: John O'Nolan Date: Wed, 8 Mar 2017 21:08:20 +0800 Subject: [PATCH] Editor card-menu and toolbar style updates --- .../addons/gh-koenig/koenig-toolbar.css | 16 ++ .../styles/addons/ghost-editor/cardmenu.css | 40 ++++- ghost/admin/app/styles/patterns/buttons.css | 15 +- ghost/admin/app/templates/settings/labs.hbs | 159 +++--------------- .../gh-koenig/addon/options/default-tools.js | 2 +- .../components/koenig-toolbar-button.hbs | 2 +- ghost/admin/public/assets/icons/line.svg | 10 ++ ghost/admin/public/assets/icons/link.svg | 1 + .../admin/public/assets/icons/list-bullet.svg | 1 + .../admin/public/assets/icons/list-number.svg | 1 + ghost/admin/public/assets/icons/markdown.svg | 12 ++ ghost/admin/public/assets/icons/text.svg | 1 + 12 files changed, 100 insertions(+), 160 deletions(-) create mode 100644 ghost/admin/public/assets/icons/line.svg create mode 100644 ghost/admin/public/assets/icons/link.svg create mode 100644 ghost/admin/public/assets/icons/list-bullet.svg create mode 100644 ghost/admin/public/assets/icons/list-number.svg create mode 100644 ghost/admin/public/assets/icons/markdown.svg create mode 100644 ghost/admin/public/assets/icons/text.svg diff --git a/ghost/admin/app/styles/addons/gh-koenig/koenig-toolbar.css b/ghost/admin/app/styles/addons/gh-koenig/koenig-toolbar.css index fb5eee3171..e713ce8773 100644 --- a/ghost/admin/app/styles/addons/gh-koenig/koenig-toolbar.css +++ b/ghost/admin/app/styles/addons/gh-koenig/koenig-toolbar.css @@ -30,6 +30,9 @@ } .gh-toolbar-btn { + display: flex; + justify-content: center; + align-items: center; height: 40px; width: 32px; font-size: 1.6rem; @@ -46,12 +49,25 @@ padding-right: 8px; } +.gh-toolbar-btn svg { + height: 1.4rem; +} + +.gh-toolbar-btn svg g { + stroke-width: 2px; + stroke: color(var(--lightgrey) l(-10%)); +} + .gh-toolbar-btn:hover { color: #fff; cursor: pointer; text-shadow: #000 0 1px 6px; } +.gh-toolbar-btn:hover svg g { + stroke: #fff; +} + .gh-toolbar-btn-bold { font-weight: 700; } diff --git a/ghost/admin/app/styles/addons/ghost-editor/cardmenu.css b/ghost/admin/app/styles/addons/ghost-editor/cardmenu.css index a58f905c70..7b8c7ff403 100644 --- a/ghost/admin/app/styles/addons/ghost-editor/cardmenu.css +++ b/ghost/admin/app/styles/addons/ghost-editor/cardmenu.css @@ -20,7 +20,16 @@ position: relative; width: 350px; height: 40px; - margin: -12px 0 -12px -15px; + margin: -12px -15px; +} + +.gh-cardmenu-search svg { + position: absolute; + top: 11px; + left: 10px; + z-index: 100; + width: 20px; + height: 19px; } .gh-cardmenu-search-input { @@ -32,7 +41,7 @@ height: 40px; font-size: 1.4rem; line-height: 40px; - padding: 10px 0 10px 15px; + padding: 10px 0 10px 40px; border: none; border-radius: 4px 4px 0 0; } @@ -47,17 +56,34 @@ border-radius: 4px; } -.gh-cardmenu-card:hover { - cursor: pointer; - background: color(var(--lightgrey) l(+5%)); +.gh-cardmenu-icon { + display: flex; + align-items: center; +} +.gh-cardmenu-icon svg { + width: 27px; + height: 27px; + fill: var(--darkgrey); } .gh-cardmenu-label { - font-size: 1.2rem; + margin: 7px 0 0 0; + font-size: 1.1rem; + color: var(--midgrey); + letter-spacing: 0.2px; + font-weight: 200; +} + +.gh-cardmenu-card:hover { + cursor: pointer; + background: color(var(--lightgrey) l(+3%) s(-10%)); +} +.gh-cardmenu-card:hover .gh-cardmenu-label { + color: var(--darkgrey); + font-weight: 300; } .gh-cardmenu-divider { - position: sticky; top: -12px; width: 350px; padding: 5px 0; diff --git a/ghost/admin/app/styles/patterns/buttons.css b/ghost/admin/app/styles/patterns/buttons.css index 38689d4021..87beaa0d58 100644 --- a/ghost/admin/app/styles/patterns/buttons.css +++ b/ghost/admin/app/styles/patterns/buttons.css @@ -389,24 +389,11 @@ Usage: CTA buttons grouped together horizontally. margin-top: 5px; } -.gh-btn-lg { - padding: 12px 18px; - border-radius: 4px; - font-size: 1.4rem; - line-height: 1.33; -} - -.gh-btn-sm { - padding: 7px 10px; - border-radius: 2px; - font-size: 1rem; - line-height: 1.5; -} - .gh-btn-link { border: 0; } + /* Spin Buttons! /* ---------------------------------------------------------- */ .spinner { diff --git a/ghost/admin/app/templates/settings/labs.hbs b/ghost/admin/app/templates/settings/labs.hbs index 89b8fd7ab4..7b08fe572d 100644 --- a/ghost/admin/app/templates/settings/labs.hbs +++ b/ghost/admin/app/templates/settings/labs.hbs @@ -7,164 +7,49 @@

This is a testing ground for experimental features which aren't quite ready for primetime. They may change, break or inexplicably disappear at any time.

{{!-- START: Card Menu Template --}} - {{!--
Card menu
+

This is the intended output of the Ghost 1.0 editor card menu

+
+ {{inline-svg "search.svg"}}
- Section + Primary
-
Icon
+
{{inline-svg "text.svg"}}
+
Text
+
+
+
{{inline-svg "markdown.svg"}}
+
Markdown
+
+
+
{{inline-svg "photos.svg"}}
Image
-
Icon
-
Image
+
{{inline-svg "brackets.svg"}}
+
Embed
-
Icon
-
Image
+
{{inline-svg "line.svg"}}
+
Divider
-
Icon
-
Image
-
-
- Section +
{{inline-svg "list-bullet.svg"}}
+
Bullet list
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
- Section -
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
- Section -
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
-
Icon
-
Image
-
-
-
Icon
-
Image
+
{{inline-svg "list-number.svg"}}
+
Number list
+
- --}} {{!-- END: Card Menu Template --}}
Migration options
diff --git a/ghost/admin/lib/gh-koenig/addon/options/default-tools.js b/ghost/admin/lib/gh-koenig/addon/options/default-tools.js index 2cc38e9ccf..0ccc03fdc5 100644 --- a/ghost/admin/lib/gh-koenig/addon/options/default-tools.js +++ b/ghost/admin/lib/gh-koenig/addon/options/default-tools.js @@ -167,7 +167,7 @@ export default function (editor, toolbar) { } }, { - name: 'L', + name: '', label: 'Link', class: 'link', icon: 'link.svg', diff --git a/ghost/admin/lib/gh-koenig/addon/templates/components/koenig-toolbar-button.hbs b/ghost/admin/lib/gh-koenig/addon/templates/components/koenig-toolbar-button.hbs index 4c5b2e7dd7..f9638e99e0 100644 --- a/ghost/admin/lib/gh-koenig/addon/templates/components/koenig-toolbar-button.hbs +++ b/ghost/admin/lib/gh-koenig/addon/templates/components/koenig-toolbar-button.hbs @@ -1 +1 @@ -{{{tool.name}}} \ No newline at end of file +{{{tool.name}}} diff --git a/ghost/admin/public/assets/icons/line.svg b/ghost/admin/public/assets/icons/line.svg new file mode 100644 index 0000000000..9c69ede9b4 --- /dev/null +++ b/ghost/admin/public/assets/icons/line.svg @@ -0,0 +1,10 @@ + + + + Untitled + Created with Sketch. + + + + + \ No newline at end of file diff --git a/ghost/admin/public/assets/icons/link.svg b/ghost/admin/public/assets/icons/link.svg new file mode 100644 index 0000000000..448c1c33bf --- /dev/null +++ b/ghost/admin/public/assets/icons/link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ghost/admin/public/assets/icons/list-bullet.svg b/ghost/admin/public/assets/icons/list-bullet.svg new file mode 100644 index 0000000000..bd85a204ba --- /dev/null +++ b/ghost/admin/public/assets/icons/list-bullet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ghost/admin/public/assets/icons/list-number.svg b/ghost/admin/public/assets/icons/list-number.svg new file mode 100644 index 0000000000..fba43a18b0 --- /dev/null +++ b/ghost/admin/public/assets/icons/list-number.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ghost/admin/public/assets/icons/markdown.svg b/ghost/admin/public/assets/icons/markdown.svg new file mode 100644 index 0000000000..ade5b97117 --- /dev/null +++ b/ghost/admin/public/assets/icons/markdown.svg @@ -0,0 +1,12 @@ + + + + markdown + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/ghost/admin/public/assets/icons/text.svg b/ghost/admin/public/assets/icons/text.svg new file mode 100644 index 0000000000..9d8f80a115 --- /dev/null +++ b/ghost/admin/public/assets/icons/text.svg @@ -0,0 +1 @@ + \ No newline at end of file