Implemented new toolbar styling and layout.

app/app.js

@@ -1,4 +1,3 @@
-// noinspection JSAnnotator
 import Ember from 'ember';
 import Application from 'ember-application';
 import Resolver from './resolver';

app/styles/addons/ghost-editor/ghost-editor.css

@@ -1,5 +1,4 @@
 @import "ghost-toolbar.css";
-@import "ghost-toolbar-blockitem.css";
 @import "slash-menu.css";
 
 .editor-holder {

app/styles/addons/ghost-editor/ghost-toolbar.css

@@ -1,107 +1,101 @@
-/* Variables
+/* Contextual toolbar
 /* ---------------------------------------------------------- */
 
-:root {
-
-    --button-size-selection: 48px;
-    --button-size-newline:32px;
+.gh-toolbar {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    color: color(var(--lightgrey) l(-10%));
+    background: linear-gradient(
+        color(var(--darkgrey) l(-3%)),
+        color(var(--darkgrey) l(-8%))
+    );
+    border-radius: 5px;
+    box-shadow: 0 0 0 1px color(var(--darkgrey) l(-10%)), 0 8px 16px rgba(26,39,49,0.16), rgba(255,255,255,0.09) 0 1px 0 0 inset;
 }
 
-
-.toolbar {
+.gh-toolbar:after {
+    display: block;
+    content: "";
     position: absolute;
-    margin: 0;
-    padding:5px;
-    -webkit-border-radius:var(--border-radius);
-    -moz-border-radius:var(--border-radius);
-    border-radius:var(--border-radius);
-    background-color: var(--lightgrey);
-    border:1px var(--lightgrey) solid;
+    bottom: -8px;
+    left: 50%;
+    margin-left: -10px;
+    width: 0;
+    height: 0;
+    border-left: transparent 10px solid;
+    border-right: transparent 10px solid;
+    border-top: color(var(--darkgrey) l(-10%)) 8px solid;
 }
 
-
-.toolbar.is-visible {
- /*   animation: toolbar-fadein 111ms;*/
+.gh-toolbar-btn {
+    height: 40px;
+    width: 32px;
+    font-size: 1.6rem;
+    line-height: 40px;
+    transition: text-shadow 0.3s ease;
 }
 
-.toolbar input {
-    height: 64px;
-    width: 180px;
-    outline: none;
+.gh-toolbar-btn:first-child {
+    width: 43px;
+    padding-left: 8px;
 }
-
-.toolbar ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+.gh-toolbar-btn:last-child {
+    width: 43px;
+    padding-right: 8px;
 }
 
-.toolbar ul li {
-    float: left;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-
-    display: block;
-    width: var(--button-size-selection);
+.gh-toolbar-btn:hover {
+    color: #fff;
+    cursor: pointer;
+    text-shadow: #000 0 1px 6px;
 }
 
-
-.toolbar ul li button {
-    border-radius: 2px;
-    font-family: var(--font-family);
-    font-size: 10px;
-    line-height: 15px;
-    text-transform: uppercase;
-    padding:0;
-    margin:0;
-    height:var(--button-size-selection);
-    min-width:var(--button-size-selection);
-    color: var(--darkgrey);
-    background-color: var(--lightgrey);
-    border: none;
+.gh-toolbar-btn-bold {
+    font-weight: 700;
 }
 
-.toolbar ul li button label {
-    display:none;
+.gh-toolbar-btn-italic {
+    width: 31px;
+    font-size: 1.7rem;
+    text-indent: -1px;
+    font-style: italic;
+    font-family: Georgia, Times, serif;
+    font-weight: 500;
 }
 
-.toolbar ul li:hover button, .toolbar ul li.selected button {
-    background-color: var(--darkgrey);
-    color: var(--darkgrey);
-    transition: 300ms;
+.gh-toolbar-btn-strike {
+    text-decoration: line-through;
+    font-weight: 400;
+    -webkit-font-smoothing: antialiased;
 }
 
-.toolbar ul li button img {
-    width:20px;
-    height:20px;
+.gh-toolbar-btn-h1 {
+    font-variant: small-caps;
+    font-weight: 700;
+    -webkit-font-smoothing: antialiased;
 }
 
-
-
-    /* tick */
-
-.toolbar:after {
-    content: "";
-    border-top: 13px solid var(--lightgrey);
-    border-top-color: inherit;
-    border-left: 13px solid transparent;
-    border-right: 13px solid transparent;
-    left: 50px;
-    left: calc(50% - 13px);
-    top:100%;
-    position:absolute;
+.gh-toolbar-btn-h2 {
+    font-weight: 700;
+    font-size: 0.9em;
+    font-variant: small-caps;
+    line-height: 42px;
+    -webkit-font-smoothing: antialiased;
 }
 
+.gh-toolbar-btn-quote {
+    font-size: 4rem;
+    line-height: 62px;
+    font-family: Georgia, Times, serif;
+    -webkit-font-smoothing: antialiased;
+}
 
-
-@keyframes toolbar-fadein {
-    from {
-        opacity: 0;
-        /*transform: translateY(-13px);*/
-    }
-    to   {
-        opacity: 1;
-        /*transform: translateY(0px);*/
-    }
+.gh-toolbar-divider {
+    height: 40px;
+    width: 1px;
+    margin: 0 9px 0 8px;
+    background: color(var(--darkgrey) l(-10%));
+    box-shadow: rgba(255,255,255,0.04) 1px 0 0 0;
 }

lib/ghost-editor/addon/components/ghost-toolbar-button.js

@@ -3,14 +3,21 @@ import layout from '../templates/components/ghost-toolbar-button';
 
 export default Ember.Component.extend({
     layout,
-    tagName: 'li',
-    classNameBindings: ['selected', 'primary', 'secondary'],
-    actions: {
+    tagName: 'button',
+    classNameBindings: ['selected', 'primary', 'secondary',
+        'gh-toolbar-btn-bold', 'gh-toolbar-btn-italic', 'gh-toolbar-btn-strike', 'gh-toolbar-btn-link', 'gh-toolbar-btn-h1', 'gh-toolbar-btn-h2', 'gh-toolbar-btn-quote'],
+    classNames: ['gh-toolbar-btn'],
+    attributesBindings: ['title'],
+    title: 'bold',
+    // todo title="Bold", https://github.com/TryGhost/Ghost-Editor/commit/1133a9a7506f409b1b4fae6639c84c94c74dcebf
+    //actions: {
         click: function () {
-            this.tool.onClick(this.editor);
+             this.tool.onClick(this.editor);
         },
-    },
+   // },
     willRender: function() {
+        console.log('gh-toolbar-btn-' + this.tool.class);
+        this.set('gh-toolbar-btn-' + this.tool.class, true);
         if(this.tool.selected) {
             this.set('selected', true);
         } else {

lib/ghost-editor/addon/components/ghost-toolbar.js

@@ -5,7 +5,7 @@ import Tools from '../options/default-tools';
 
 export default Ember.Component.extend({
     layout,
-    classNames: ['toolbar'],
+    classNames: ['gh-toolbar'],
     classNameBindings: ['isVisible'],
     isVisible: false,
     tools: [],
@@ -29,9 +29,23 @@ export default Ember.Component.extend({
                 visibleTools.push(tool);
             }
         });
+        return visibleTools;
+    }).property('tools.@each.selected'),
+
+    toolbarBlocks: Ember.computed(function () {
+        // TODO if a block section other than a primary section is selected then
+        // the returned list removes one of the primary sections to compensate,
+        // so that there are only ever four primary sections.
+        let visibleTools = [ ];
 
+        this.tools.forEach(tool => {
+            if (tool.toolbar) {
+                visibleTools.push(tool);
+            }
+        });
         return visibleTools;
     }).property('tools.@each.selected'),
+
     init() {
         this._super(...arguments);
         this.tools =new Tools(this.get('editor'), this);
@@ -93,6 +107,7 @@ function updateToolbarToRange(self, $holder, $editor, isMouseDown) {
             return;
         }
         self.propertyWillChange('toolbar');
+        self.propertyWillChange('toolbarBlocks');
 
         if(!editor.range.isCollapsed) {
             // if we have a selection, then the toolbar appears just below said selection:
@@ -131,5 +146,6 @@ function updateToolbarToRange(self, $holder, $editor, isMouseDown) {
         }
 
         self.propertyDidChange('toolbar');
+        self.propertyDidChange('toolbarBlocks');
 }