diff --git a/core/client/assets/fonts/icons.svg b/core/client/assets/fonts/icons.svg index 7ff67a6e8c..638f0cee2f 100755 --- a/core/client/assets/fonts/icons.svg +++ b/core/client/assets/fonts/icons.svg @@ -31,7 +31,7 @@ - + @@ -70,8 +70,11 @@ + + + + + - - \ No newline at end of file diff --git a/core/client/assets/fonts/icons.woff b/core/client/assets/fonts/icons.woff index 798fd156fb..179ecfdc24 100755 Binary files a/core/client/assets/fonts/icons.woff and b/core/client/assets/fonts/icons.woff differ diff --git a/core/client/assets/sass/components/navigation.scss b/core/client/assets/sass/components/navigation.scss index b740b0197f..41b784d829 100644 --- 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,6 +106,58 @@ } } +// +// 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 @@ -109,9 +165,7 @@ // 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) \ No newline at end of file +}//@media (max-width: 900px) diff --git a/core/client/assets/sass/layouts/editor.scss b/core/client/assets/sass/layouts/editor.scss index 79a59ca02c..b3a7584651 100644 --- 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 index e8cd498e14..5faafa3493 100755 --- 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; -} \ No newline at end of file +} diff --git a/core/client/assets/sass/modules/icons.scss b/core/client/assets/sass/modules/icons.scss index 6c85c2dc3e..777dccc270 100755 --- 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); -} \ No newline at end of file +} diff --git a/core/client/components/gh-dropdown-button.js b/core/client/components/gh-dropdown-button.js index c0b3acc36e..245907b036 100644 --- 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 index 54cdb4a3ec..f890c7879e 100644 --- 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"}} {{/gh-dropdown}} {{! .user-menu }} +
+ {{#gh-dropdown-button dropdownName="help-menu" tagName="div" classNames="nav-label clearfix"}} +
+ +
+ {{/gh-dropdown-button}} + {{#gh-dropdown tagName="div" classNames="dropdown" name="help-menu" closeOnClick="true"}} + + {{/gh-dropdown}} +
{{! .help-menu }} + {{! .global-nav }}
diff --git a/core/client/templates/modals/markdown.hbs b/core/client/templates/modals/markdown.hbs index 65c1cdafa5..a287f8b239 100644 --- a/core/client/templates/modals/markdown.hbs +++ b/core/client/templates/modals/markdown.hbs @@ -72,6 +72,6 @@ - For further Markdown syntax reference: Markdown Documentation + For further Markdown syntax reference: Markdown Documentation {{/gh-modal-dialog}} diff --git a/core/test/functional/client/app_test.js b/core/test/functional/client/app_test.js index 223a0f4d11..656dd16efb 100644 --- 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');