Introduce new help menu

TryGhost · Mar 9, 2015 · 461834f · 461834f
1 parent 7383820
commit 461834f
Show file tree

Hide file tree

Showing 10 changed files with 168 additions and 25 deletions.
diff --git a/core/client/assets/fonts/icons.svg b/core/client/assets/fonts/icons.svg
diff --git a/core/client/assets/fonts/icons.woff b/core/client/assets/fonts/icons.woff
diff --git a/core/client/assets/sass/components/navigation.scss b/core/client/assets/sass/components/navigation.scss
@@ -34,6 +34,10 @@
     body.settings-menu-expanded & {
         transform: translate3d(-350px, 0px, 0px);
     }
+
+    ::selection {
+        background: none;
+    }
 }
 
 
@@ -102,16 +106,66 @@
     }
 }
 
+//
+// Help Menu
+// --------------------------------------------------
+
+.help-menu {
+    padding-right: 0;
+    float: right;
+    cursor: pointer;
+
+    .nav-label {
+        margin: 0;
+        padding: 0 6px 0 12px;
+        background: none !important;
+    }
+}
+
+.help-button {
+    height: 30px;
+    width: 30px;
+    border: $midgrey 1px solid;
+    margin-top: 15px;
+    text-align: center;
+    font-size: 1.6rem;
+    line-height: 30px;
+    border-radius: 100%;
+    transition: border 0.5s;
+}
+
+.help-menu:hover {
+    .help-button {
+        border: $lightgrey 1px solid;
+        transition: border 0.3s;
+    }
+}
+
+.help-menu .dropdown {
+    right: 77px;
+    left: auto;
+
+    .dropdown-menu {
+        min-width: 200px;
+    }
+
+    &.fade-in-scale {
+        animation-duration: 0.1s;
+    }
+
+    &.fade-out {
+        animation-duration: 0.01s;
+    }
+}
+
 
 //
 // User Menu
 // --------------------------------------------------
 
 // Right hand dropdown
 .user-menu {
-    position: absolute;
-    top: 0;
-    right: 0;
+    float: right;
     padding: 0;
     margin: 0;
     cursor: pointer;
@@ -127,7 +181,7 @@
     .image {
         @include circular-image(30px) {
             float: left;
-            margin: 15px 14px 0 0;
+            margin: 15px 10px 0 0;
         }
     }
 
@@ -176,6 +230,7 @@
         }
 
         .dropdown-menu {
+            min-width: 180px;
             position: absolute;
             top: 0;
             right: 0;
@@ -254,6 +309,10 @@
         }
     }
 
+    .help-menu {
+        display: none;
+    }
+
     // Drop it to the bottom of the menu
     .user-menu {
         position: absolute;
@@ -335,4 +394,4 @@
         }//.nav-cover
     }//body.global-nav-expanded
 
-}//@media (max-width: 900px)
+}//@media (max-width: 900px)
diff --git a/core/client/assets/sass/layouts/editor.scss b/core/client/assets/sass/layouts/editor.scss
@@ -344,14 +344,14 @@
 
 .markdown-help {
     position: relative;
-    top: -5px;
+    top: -3px;
     right: -5px;
-    @include icon('question', '', lighten($brown, 15%));
+    @include icon('markdown', '16px', lighten($brown, 15%));
     float: right;
     padding: 5px;
 
     &:hover {
-        @include icon('question', '', $brown);
+        @include icon('markdown', '', $brown);
     }
 }
 

diff --git a/core/client/assets/sass/modules/animations.scss b/core/client/assets/sass/modules/animations.scss
@@ -28,7 +28,7 @@
 
 @keyframes fade-in-scale {
     from {
-        transform: scale(0.8);
+        transform: scale(0.95);
         opacity: 0;
     }
     to {
@@ -73,4 +73,4 @@
 .fade-out {
     animation: fade-out 0.5s;
     animation-fill-mode: forwards;
-}
+}
diff --git a/core/client/assets/sass/modules/icons.scss b/core/client/assets/sass/modules/icons.scss
@@ -41,7 +41,7 @@
     font-family: "GhostIcons";
     font-weight: normal;
     font-style: normal;
-    vertical-align: -7%;
+    vertical-align: -3%;
     text-transform:none;
     speak: none;
     line-height: 1;
@@ -111,7 +111,8 @@ $icons: (
     app:             \e00b,
     appearance:      \e021,
     archive:         \e01f,
-    atom:            \e601,
+    atom:            \e03f,
+    book:            \e043,
     calendar:        \e01e,
     camera:          \e036,
     check:           \e033,
@@ -122,7 +123,7 @@ $icons: (
     close:           \e01c,
     code:            \e03e,
     comments:        \e01b,
-    compass:         \e602,
+    compass:         \e040,
     content:         \e02d,
     edit:            \e00f,
     error:           \e01a,
@@ -140,6 +141,7 @@ $icons: (
     list:            \e013,
     lock:            \e02c,
     mail:            \e012,
+    markdown:        \e041,
     menu:            \e005,
     mobile:          \e010,
     notification:    \e031,
@@ -163,6 +165,7 @@ $icons: (
     tablet:          \e004,
     tag:             \e003,
     trash:           \e023,
+    twitter:         \e042,
     unfeatured:      \e027,
     user:            \e02e,
     users:           \e002,
@@ -219,6 +222,18 @@ $icons: (
     }
 }
 
+// Specific icon size adjustments
+.icon-list:before {
+    font-size: 0.9em;
+}
+.icon-markdown:before {
+    font-size: 1.1em;
+    vertical-align: -7%;
+}
+.icon-twitter:before {
+    font-size: 1.1em;
+}
+
 
 //
 // Div-based Icon Classes
@@ -236,4 +251,4 @@ $icons: (
         linear-gradient(90deg, #fff 1px, transparent 1px),
         linear-gradient(#fff 1px, transparent 1px),
         linear-gradient(90deg, #fff 1px, transparent 1px);
-}
+}
diff --git a/core/client/components/gh-dropdown-button.js b/core/client/components/gh-dropdown-button.js
@@ -2,6 +2,8 @@ import DropdownMixin from 'ghost/mixins/dropdown-mixin';
 
 var DropdownButton = Ember.Component.extend(DropdownMixin, {
     tagName: 'button',
+    attributeBindings: 'role',
+    role: 'button',
 
     // matches with the dropdown this button toggles
     dropdownName: null,

diff --git a/core/client/templates/-navbar.hbs b/core/client/templates/-navbar.hbs
@@ -42,13 +42,31 @@
         {{#gh-dropdown tagName="div" classNames="dropdown" name="user-menu" closeOnClick="true"}}
             <ul class="dropdown-menu dropdown-triangle-top-right js-user-menu-dropdown-menu" role="menu">
                 <li role="presentation">{{#link-to "settings.users.user" session.user.slug classNames="dropdown-item user-menu-profile js-nav-item" role="menuitem" tabindex="-1"}}<i class="icon-user"></i> Your Profile{{/link-to}}</li>
-                <li role="presentation"><a class="dropdown-item user-menu-support" role="menuitem" tabindex="-1" href="http://support.ghost.org/"><i class="icon-support"></i> Help / Support</a></li>
                 <li class="divider"></li>
                 <li role="presentation">{{#link-to "signout" classNames="dropdown-item user-menu-signout" role="menuitem" tabindex="-1"}}<i class="icon-power"></i> Sign Out{{/link-to}}</li>
             </ul>
         {{/gh-dropdown}}
     </div>{{! .user-menu }}
 
+    <div class="nav-item help-menu">
+        {{#gh-dropdown-button dropdownName="help-menu" tagName="div" classNames="nav-label clearfix"}}
+            <div class="help-button">
+                <i class="icon-question"><span class="hidden">Help</span></i>
+            </div>
+        {{/gh-dropdown-button}}
+        {{#gh-dropdown tagName="div" classNames="dropdown" name="help-menu" closeOnClick="true"}}
+            <ul class="dropdown-menu dropdown-triangle-top" role="menu">
+                <li role="presentation"><a class="dropdown-item help-menu-support" role="menuitem" tabindex="-1" href="http://support.ghost.org/" target="_blank"><i class="icon-support"></i> Support Center</a></li>
+                <li role="presentation"><a class="dropdown-item help-menu-tweet" role="menuitem" tabindex="-1" href="https://twitter.com/intent/tweet?text=%40TryGhost+Hi%21+Can+you+help+me+with+&related=TryGhost" target="_blank" onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;"><i class="icon-twitter"></i> Tweet @TryGhost!</a></li>
+                <li class="divider"></li>
+                <li role="presentation"><a class="dropdown-item help-menu-how-to" role="menuitem" tabindex="-1" href="http://support.ghost.org/how-to-use-ghost/" target="_blank"><i class="icon-book"></i> How to Use Ghost</a></li>
+                <li role="presentation"><a class="dropdown-item help-menu-markdown" role="menuitem" tabindex="-1" href="" {{action "openModal" "markdown"}}><i class="icon-markdown"></i> Markdown Help</a></li>
+                <li class="divider"></li>
+                <li role="presentation"><a class="dropdown-item help-menu-wishlist" role="menuitem" tabindex="-1" href="http://ideas.ghost.org/" target="_blank"><i class="icon-list"></i> Wishlist</a></li>
+            </ul>
+        {{/gh-dropdown}}
+    </div>{{! .help-menu }}
+
 </nav>{{! .global-nav }}
 
 <div class="nav-cover js-nav-cover"></div>
diff --git a/core/client/templates/modals/markdown.hbs b/core/client/templates/modals/markdown.hbs
@@ -72,6 +72,6 @@
             </tr>
             </tbody>
         </table>
-        For further Markdown syntax reference: <a href="http://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown Documentation</a>
+        For further Markdown syntax reference: <a href="http://support.ghost.org/markdown-guide/" target="_blank">Markdown Documentation</a>
     </section>
 {{/gh-modal-dialog}}
diff --git a/core/test/functional/client/app_test.js b/core/test/functional/client/app_test.js
@@ -3,7 +3,7 @@
 
 /*globals CasperTest, casper, newUser */
 
-CasperTest.begin('Admin navigation bar is correct', 28, function suite(test) {
+CasperTest.begin('Admin navigation bar is correct', 45, function suite(test) {
     casper.thenOpenAndWaitForPageLoad('root', function testTitleAndUrl() {
         test.assertTitle('Content - Test Blog', 'Ghost admin has incorrect title');
         test.assertUrlMatch(/ghost\/\d+\/$/, 'Landed on the correct URL');
@@ -38,6 +38,57 @@ CasperTest.begin('Admin navigation bar is correct', 28, function suite(test) {
         test.assertDoesntExist('.nav-settings.active', 'Settings nav item is marked active');
     });
 
+    casper.then(function testHelpMenuNotVisible() {
+        test.assertExists('.help-menu', 'Help menu nav item exists');
+        test.assertNotExists('.help-menu .dropdown.open', 'Help menu should not be visible');
+    });
+
+    casper.thenClick('.help-menu .nav-label');
+    casper.waitForSelector('.help-menu .dropdown.open', function then() {
+        var supportHref = this.getElementAttribute('.help-menu-support', 'href'),
+            tweetHref = this.getElementAttribute('.help-menu-tweet', 'href'),
+            howtoHref = this.getElementAttribute('.help-menu-how-to', 'href'),
+            wishlistHref = this.getElementAttribute('.help-menu-wishlist', 'href');
+
+        test.assertVisible('.help-menu .dropdown-menu', 'Help menu should be visible');
+
+        test.assertExists('.help-menu-support', 'Support menu item exists');
+        test.assertSelectorHasText('.help-menu-support', 'Support Center', 'Support menu item has correct text');
+        test.assertEquals(supportHref, 'http://support.ghost.org/', 'Support href is correct');
+
+        test.assertExists('.help-menu-tweet', 'Tweet menu item exists');
+        test.assertSelectorHasText('.help-menu-tweet', 'Tweet @TryGhost!', 'Tweet menu item has correct text');
+        test.assertEquals(tweetHref, 'https://twitter.com/intent/tweet?text=%40TryGhost+Hi%21+Can+you+help+me+with+&related=TryGhost', 'Tweet href is correct');
+
+        test.assertExists('.help-menu-how-to', 'How-to menu item exists');
+        test.assertSelectorHasText('.help-menu-how-to', 'How to Use Ghost', 'How-to menu item has correct text');
+        test.assertEquals(howtoHref, 'http://support.ghost.org/how-to-use-ghost/', 'How-to href is correct');
+
+        test.assertExists('.help-menu-wishlist', 'Wishlist menu item exists');
+        test.assertSelectorHasText('.help-menu-wishlist', 'Wishlist', 'Wishlist menu item has correct text');
+        test.assertEquals(wishlistHref, 'http://ideas.ghost.org/', 'Wishlist href is correct');
+
+        test.assertExists('.help-menu-markdown', 'Markdown menu item exists');
+        test.assertSelectorHasText('.help-menu-markdown', 'Markdown Help', 'Markdown menu item has correct text');
+
+        casper.thenClick('.help-menu-markdown');
+
+        casper.waitUntilVisible('.modal-container', function onSuccess() {
+            test.assertSelectorHasText(
+                '.modal-content .modal-header',
+                'Markdown Help',
+                'delete modal has correct text');
+
+            test.assertExists('.modal-content .close');
+        });
+
+        casper.thenClick('.modal-content .close');
+
+        casper.waitWhileVisible('.modal-container', function onSuccess() {
+            test.assert(true, 'clicking close should remove the markdown help modal');
+        });
+    }, casper.failOnTimeout(test, 'WaitForSelector .help-menu .dropdown failed'));
+
     casper.then(function testUserMenuNotVisible() {
         test.assertExists('.user-menu', 'User menu nav item exists');
         test.assertNotExists('.user-menu .dropdown.open', 'User menu should not be visible');
@@ -46,7 +97,6 @@ CasperTest.begin('Admin navigation bar is correct', 28, function suite(test) {
     casper.thenClick('.user-menu .nav-label');
     casper.waitForSelector('.user-menu .dropdown.open', function then() {
         var profileHref = this.getElementAttribute('.user-menu-profile', 'href'),
-            helpHref = this.getElementAttribute('.user-menu-support', 'href'),
             signoutHref = this.getElementAttribute('.user-menu-signout', 'href');
 
         test.assertVisible('.user-menu .dropdown-menu', 'User menu should be visible');
@@ -56,10 +106,6 @@ CasperTest.begin('Admin navigation bar is correct', 28, function suite(test) {
             'Profile menu item has correct text');
         test.assertEquals(profileHref, '/ghost/settings/users/' + newUser.slug + '/', 'Profile href is correct');
 
-        test.assertExists('.user-menu-support', 'Help menu item exists');
-        test.assertSelectorHasText('.user-menu-support', 'Help / Support', 'Help menu item has correct text');
-        test.assertEquals(helpHref, 'http://support.ghost.org/', 'Help href is correct');
-
         test.assertExists('.user-menu-signout', 'Sign Out menu item exists');
         test.assertSelectorHasText('.user-menu-signout', 'Sign Out', 'Signout menu item has correct text');
         test.assertEquals(signoutHref, '/ghost/signout/', 'Sign Out href is correct');