From 89ee30becde32bfd4cbc4c6b40aa9e1d85e17556 Mon Sep 17 00:00:00 2001 From: Paul Adam Davis Date: Thu, 16 Oct 2014 10:34:27 +0100 Subject: [PATCH 1/4] Tag input UX improvements Closes #4105 - Turns the tag icon white when input is focused. - Focuses on the tag inout after deleting a tag. Credit to @novaugust for a PR to this which is rebased into one single commit --- core/client/assets/sass/layouts/editor.scss | 5 +++++ core/client/templates/post-tags-input.hbs | 8 +++---- core/client/views/post-tags-input.js | 25 +++++++++------------ 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/core/client/assets/sass/layouts/editor.scss b/core/client/assets/sass/layouts/editor.scss index eb890de09ab..5d7d4ac64c7 100644 --- a/core/client/assets/sass/layouts/editor.scss +++ b/core/client/assets/sass/layouts/editor.scss @@ -616,6 +616,11 @@ body.zen { color: #fff; } }//.tag-label +#entry-tags.focused { + .tag-label:before { + color: #fff; + } +} .publish-bar-inner { display: flex; diff --git a/core/client/templates/post-tags-input.hbs b/core/client/templates/post-tags-input.hbs index e30e4fc73d2..630d7d43109 100644 --- a/core/client/templates/post-tags-input.hbs +++ b/core/client/templates/post-tags-input.hbs @@ -6,15 +6,13 @@
{{#each controller.tags}} - {{#view view.tagView tag=this}} - {{view.tag.name}} - {{/view}} + {{name}} {{/each}}
- {{view view.tagInputView class="tag-input" id="tags" value=newTagText}} + {{view view.tagInputView class="tag-input js-tag-input" id="tags" value=newTagText}} -
\ No newline at end of file + diff --git a/core/client/views/post-tags-input.js b/core/client/views/post-tags-input.js index 1ddbfcffe33..1b9b88dceb9 100644 --- a/core/client/views/post-tags-input.js +++ b/core/client/views/post-tags-input.js @@ -2,6 +2,7 @@ var PostTagsInputView = Ember.View.extend({ tagName: 'section', elementId: 'entry-tags', classNames: 'publish-bar-inner', + classNameBindings: ['hasFocus:focused'], templateName: 'post-tags-input', @@ -108,19 +109,6 @@ var PostTagsInputView = Ember.View.extend({ } }), - - tagView: Ember.View.extend({ - tagName: 'span', - classNames: 'tag', - - tag: null, - - click: function () { - this.get('parentView.controller').send('deleteTag', this.get('tag')); - } - }), - - suggestionView: Ember.View.extend({ tagName: 'li', classNameBindings: 'suggestion.selected', @@ -139,7 +127,16 @@ var PostTagsInputView = Ember.View.extend({ this.get('parentView.controller').send('addTag', this.get('suggestion.tag')); }, - }) + }), + + actions: { + deleteTag: function (tag) { + //The view wants to keep focus on the input after a click on a tag + Ember.$('.js-tag-input').focus(); + //Make the controller do the actual work + this.get('controller').send('deleteTag', tag); + } + } }); export default PostTagsInputView; From 6fd27796f41f974c53238fcfb34da2a0565f6327 Mon Sep 17 00:00:00 2001 From: Paul Adam Davis Date: Mon, 29 Sep 2014 12:17:27 +0100 Subject: [PATCH 2/4] Implement popovers --- .gitignore | 3 +- Gruntfile.js | 6 +- .../assets/sass/components/dropdowns.scss | 24 +- .../assets/sass/components/popovers.scss | 265 ++++++++++++++++++ core/client/assets/sass/helpers/mixins.scss | 16 +- .../client/assets/sass/helpers/variables.scss | 2 + core/client/assets/sass/screen.scss | 1 + core/client/components/gh-dropdown.js | 2 +- core/client/components/gh-popover-button.js | 15 + core/client/components/gh-popover.js | 7 + core/client/docs/popovers.html | 75 +++++ core/client/initializers/dropdown.js | 23 +- core/client/templates/debug.hbs | 3 +- core/client/utils/dropdown-service.js | 17 ++ 14 files changed, 421 insertions(+), 38 deletions(-) create mode 100644 core/client/assets/sass/components/popovers.scss create mode 100644 core/client/components/gh-popover-button.js create mode 100644 core/client/components/gh-popover.js create mode 100644 core/client/docs/popovers.html create mode 100644 core/client/utils/dropdown-service.js diff --git a/.gitignore b/.gitignore index 8e32e654eb8..36741c35e9b 100644 --- a/.gitignore +++ b/.gitignore @@ -43,8 +43,7 @@ Session.vim .tmp /core/server/data/export/exported* -/docs -/_site +/core/client/docs/_site /content/tmp/* /content/data/* /content/apps/**/* diff --git a/Gruntfile.js b/Gruntfile.js index 85b2aeda90b..bb87bd5b5b2 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -336,9 +336,13 @@ var _ = require('lodash'), map: true, // Use and update the sourcemap browsers: ['last 2 versions', '> 1%', 'Explorer 10'] }, - single_file: { + ghost: { src: 'core/client/assets/css/<%= pkg.name %>.min.css', dest: 'core/client/assets/css/<%= pkg.name %>.min.css' + }, + docs: { + src: 'core/client/docs/dist/css/<%= pkg.name %>.min.css', + dest: 'core/client/docs/dist/css/<%= pkg.name %>.min.css' } }, diff --git a/core/client/assets/sass/components/dropdowns.scss b/core/client/assets/sass/components/dropdowns.scss index 85b9275cb0e..20bef83f8e3 100644 --- a/core/client/assets/sass/components/dropdowns.scss +++ b/core/client/assets/sass/components/dropdowns.scss @@ -258,52 +258,52 @@ %dropdown-triangle-top { &:before { - @include triangle(($dropdown_triangle * 2), #fff, up); + @include triangle($dropdown_triangle, #fff, up); top: -$dropdown_triangle; } &:after { - @include triangle(($dropdown_triangle * 2) + 2, darken($lightgrey, 15%), up); - top: -($dropdown_triangle + 1); + @include triangle($dropdown_triangle + 2, darken($lightgrey, 15%), up); + top: -($dropdown_triangle + 2); } } %dropdown-triangle-bottom { &:before { - @include triangle(($dropdown_triangle * 2), #fff, down); + @include triangle($dropdown_triangle, #fff, down); bottom: -$dropdown_triangle; } &:after { - @include triangle(($dropdown_triangle * 2) + 2, darken($lightgrey, 15%), down); - bottom: -($dropdown_triangle + 1); + @include triangle($dropdown_triangle + 2, darken($lightgrey, 15%), down); + bottom: -($dropdown_triangle + 2); } } %dropdown-triangle-center { &:before { left: 50%; - margin-left: (-$dropdown_triangle); + margin-left: -($dropdown_triangle / 2); } &:after { left: 50%; - margin-left: -($dropdown_triangle + 1); + margin-left: -($dropdown_triangle / 2 + 2); } } // TODO: Make the values here use the $dropdown_triangle var %dropdown-triangle-left { &:before { - left: ($dropdown_triangle + 2); + left: ($dropdown_triangle / 2 + 2); } &:after { - left: ($dropdown_triangle + 1); + left: ($dropdown_triangle / 2); } } %dropdown-triangle-right { &:before { left: auto; - right: ($dropdown_triangle + 2); + right: ($dropdown_triangle / 2 + 2); } &:after { left: auto; - right: ($dropdown_triangle + 1); + right: ($dropdown_triangle / 2); } } diff --git a/core/client/assets/sass/components/popovers.scss b/core/client/assets/sass/components/popovers.scss new file mode 100644 index 00000000000..41642a854a2 --- /dev/null +++ b/core/client/assets/sass/components/popovers.scss @@ -0,0 +1,265 @@ +// +// Popovers +// -------------------------------------------------- + +.popover-item { + position: relative; + display: inline-block; + padding: 11px 26px 13px 16px; + background: $darkgrey; + min-width: 300px; + max-width: 400px; + border-radius: 6px; + font-size: 1.2rem; + color: $midgrey; +} +.popover-title { + font-size: 1.4rem; + font-weight: 300; + color: #fff; +} +.popover-desc { + margin-top: -4px; +} +.popover-body { + margin-top: 11px; + line-height: 1.7; + b { + color: #fff; + } + > *:last-child { + margin: 0; + } +} + +// +// Popover triangles +// -------------------------------------------------- + +// Placeholders +%popover-triangle { + &:before { + content: ''; + position: absolute; + display: block; + } // :before +} + +// The triangle itself +%popover-triangle-vertical-top { + &:before { + @include triangle($popover_triangle, $darkgrey, up, shallow); + top: -(floor($popover_triangle * $popover_triangle_shallow_multiplier)); + } +} +%popover-triangle-vertical-bottom { + &:before { + @include triangle($popover_triangle, $darkgrey, down, shallow); + bottom: -(floor($popover_triangle * $popover_triangle_shallow_multiplier)); + } +} +%popover-triangle-horizontal-left { + &:before { + @include triangle($popover_triangle, $darkgrey, left, shallow); + left: -(floor($popover_triangle * $popover_triangle_shallow_multiplier)); + } +} +%popover-triangle-horizontal-right { + &:before { + @include triangle($popover_triangle, $darkgrey, right, shallow); + right: -(floor($popover_triangle * $popover_triangle_shallow_multiplier)); + } +} + +// Triangle positions +%popover-triangle-vertical-center { + &:before { + left: 50%; + margin-left: -($popover_triangle / 2); + } +} +%popover-triangle-vertical-left { + &:before { + left: $popover_triangle; + } +} +%popover-triangle-vertical-right { + &:before { + left: auto; + right: $popover_triangle; + } +} +%popover-triangle-horizontal-center { + &:before { + top: 50%; + margin-top: -$popover_triangle; + } +} +%popover-triangle-horizontal-top { + &:before { + top: $popover_triangle; + } +} +%popover-triangle-horizontal-bottom { + &:before { + top: auto; + bottom: $popover_triangle; + } +} + +// Usable classes +.popover-triangle-top { + transform-origin: top center; + @extend %popover-triangle; + @extend %popover-triangle-vertical-top; + @extend %popover-triangle-vertical-center; +} +.popover-triangle-top-left { + transform-origin: top left; + @extend %popover-triangle; + @extend %popover-triangle-vertical-top; + @extend %popover-triangle-vertical-left; +} +.popover-triangle-top-right { + transform-origin: top right; + @extend %popover-triangle; + @extend %popover-triangle-vertical-top; + @extend %popover-triangle-vertical-right; +} +.popover-triangle-bottom { + transform-origin: bottom center; + @extend %popover-triangle; + @extend %popover-triangle-vertical-bottom; + @extend %popover-triangle-vertical-center; +} +.popover-triangle-bottom-left { + transform-origin: bottom left; + @extend %popover-triangle; + @extend %popover-triangle-vertical-bottom; + @extend %popover-triangle-vertical-left; +} +.popover-triangle-bottom-right { + transform-origin: bottom right; + @extend %popover-triangle; + @extend %popover-triangle-vertical-bottom; + @extend %popover-triangle-vertical-right; +} +.popover-triangle-left { + transform-origin: left center; + @extend %popover-triangle; + @extend %popover-triangle-horizontal-left; + @extend %popover-triangle-horizontal-center; +} +.popover-triangle-left-top { + transform-origin: left top; + @extend %popover-triangle; + @extend %popover-triangle-horizontal-left; + @extend %popover-triangle-horizontal-top; +} +.popover-triangle-left-bottom { + transform-origin: left bottom; + @extend %popover-triangle; + @extend %popover-triangle-horizontal-left; + @extend %popover-triangle-horizontal-bottom; +} +.popover-triangle-right { + transform-origin: right center; + @extend %popover-triangle; + @extend %popover-triangle-horizontal-right; + @extend %popover-triangle-horizontal-center; +} +.popover-triangle-right-top { + transform-origin: right top; + @extend %popover-triangle; + @extend %popover-triangle-horizontal-right; + @extend %popover-triangle-horizontal-top; +} +.popover-triangle-right-bottom { + transform-origin: right bottom; + @extend %popover-triangle; + @extend %popover-triangle-horizontal-right; + @extend %popover-triangle-horizontal-bottom; +} + +// Show/hide popover +// Position relative to the position of the triangle +// So... `popover-triangle-left-top` opens on the right of the button +// because the triangle is on the top left, poitning to the top right of the button +// +// |------| |-----------------| +// |Button| < Popover content | +// |------| | Lorem ipsum dol | +// |-----------------| +.popover { + position: relative; + display: inline-block; + + .popover-item { + position: absolute; + z-index: 20; + + &.open { + display: block; + } + &.closed { + display: none; + } + } + + .popover-item.popover-triangle-bottom { + bottom: calc(100% + 16px); + left: 50%; + transform: translateX(-50%); + } + .popover-item.popover-triangle-bottom-left { + bottom: calc(100% + 16px); + left: 0; + } + .popover-item.popover-triangle-bottom-right { + bottom: calc(100% + 16px); + right: 0; + } + .popover-item.popover-triangle-top { + top: calc(100% + 16px); + left: 50%; + transform: translateX(-50%); + } + .popover-item.popover-triangle-top-left { + top: calc(100% + 16px); + left: 0; + } + .popover-item.popover-triangle-top-right { + top: calc(100% + 16px); + right: 0; + } + .popover-item.popover-triangle-left { + left: calc(100% + 16px); + top: 50%; + transform: translateY(-50%); + } + .popover-item.popover-triangle-left-top { + left: calc(100% + 16px); + top: 50%; + transform: translateY(-($popover_triangle * 2)); + } + .popover-item.popover-triangle-left-bottom { + left: calc(100% + 16px); + top: 50%; + transform: translateY(calc(-100% + #{($popover_triangle * 2)})); + } + .popover-item.popover-triangle-right { + right: calc(100% + 16px); + top: 50%; + transform: translateY(-50%); + } + .popover-item.popover-triangle-right-top { + right: calc(100% + 16px); + top: 50%; + transform: translateY(-($popover_triangle * 2)); + } + .popover-item.popover-triangle-right-bottom { + right: calc(100% + 16px); + top: 50%; + transform: translateY(calc(-100% + #{($popover_triangle * 2)})); + } +}//.popover \ No newline at end of file diff --git a/core/client/assets/sass/helpers/mixins.scss b/core/client/assets/sass/helpers/mixins.scss index 98830fe8ead..4b587573599 100644 --- a/core/client/assets/sass/helpers/mixins.scss +++ b/core/client/assets/sass/helpers/mixins.scss @@ -103,31 +103,35 @@ //==== Simple SCSS mixin to create CSS triangles //==== Example: @include css-triangle (10px, #fff, "up"); -@mixin triangle ($size: 20px, $color: #000, $direction: "down") { - $size: $size / 2; +@mixin triangle ($size: 20px, $color: #000, $direction: "down", $type: "normal") { + $verticalSize: $size; width: 0; height: 0; + @if $type == "shallow" { + $verticalSize: floor($size * $popover_triangle_shallow_multiplier); + } + @if $direction == "down" { border-left: $size solid #{setTriangleColor($direction, "left", $color)}; border-right: $size solid #{setTriangleColor($direction, "right", $color)}; - border-top: $size solid #{setTriangleColor($direction, "top", $color)}; + border-top: $verticalSize solid #{setTriangleColor($direction, "top", $color)}; } @if $direction == "up" { border-left: $size solid #{setTriangleColor($direction, "left", $color)}; border-right: $size solid #{setTriangleColor($direction, "right", $color)}; - border-bottom: $size solid #{setTriangleColor($direction, "bottom", $color)}; + border-bottom: $verticalSize solid #{setTriangleColor($direction, "bottom", $color)}; } @if $direction == "left" { - border-right: $size solid #{setTriangleColor($direction, "right", $color)}; + border-right: $verticalSize solid #{setTriangleColor($direction, "right", $color)}; border-top: $size solid #{setTriangleColor($direction, "top", $color)}; border-bottom: $size solid #{setTriangleColor($direction, "bottom", $color)}; } @if $direction == "right" { - border-left: $size solid #{setTriangleColor($direction, "left", $color)}; + border-left: $verticalSize solid #{setTriangleColor($direction, "left", $color)}; border-bottom: $size solid #{setTriangleColor($direction, "bottom", $color)}; border-top: $size solid #{setTriangleColor($direction, "top", $color)}; } diff --git a/core/client/assets/sass/helpers/variables.scss b/core/client/assets/sass/helpers/variables.scss index 4123e0a3d64..42dc6232c1c 100644 --- a/core/client/assets/sass/helpers/variables.scss +++ b/core/client/assets/sass/helpers/variables.scss @@ -45,6 +45,8 @@ $at2x: 2 device-pixel-ratio; $dropdown_triangle: 8px; +$popover_triangle: 14px; +$popover_triangle_shallow_multiplier: 0.8; diff --git a/core/client/assets/sass/screen.scss b/core/client/assets/sass/screen.scss index 1bd769f7143..568eafab099 100644 --- a/core/client/assets/sass/screen.scss +++ b/core/client/assets/sass/screen.scss @@ -43,6 +43,7 @@ @import "components/dropdowns"; @import "components/pagination"; @import "components/badges"; +@import "components/popovers"; // diff --git a/core/client/components/gh-dropdown.js b/core/client/components/gh-dropdown.js index 3d4c55862e1..e825e2960ec 100644 --- a/core/client/components/gh-dropdown.js +++ b/core/client/components/gh-dropdown.js @@ -42,7 +42,7 @@ var GhostDropdown = Ember.Component.extend(DropdownMixin, { name = this.get('name'), button = this.get('button'), targetDropdownName = options.target; - + if (name === targetDropdownName && (!isOpen || isClosing)) { if (!button) { button = options.button; diff --git a/core/client/components/gh-popover-button.js b/core/client/components/gh-popover-button.js new file mode 100644 index 00000000000..598cd473bca --- /dev/null +++ b/core/client/components/gh-popover-button.js @@ -0,0 +1,15 @@ +import DropdownButton from 'ghost/components/gh-dropdown-button'; + +var PopoverButton = DropdownButton.extend({ + click: Ember.K, // We don't want clicks on popovers, but dropdowns have them. So `K`ill them here. + mouseEnter: function (event) { + this._super(event); + this.get('dropdown').toggleDropdown(this.get('popoverName'), this); + }, + mouseLeave: function (event) { + this._super(event); + this.get('dropdown').toggleDropdown(this.get('popoverName'), this); + } +}); + +export default PopoverButton; \ No newline at end of file diff --git a/core/client/components/gh-popover.js b/core/client/components/gh-popover.js new file mode 100644 index 00000000000..bc437b16dc4 --- /dev/null +++ b/core/client/components/gh-popover.js @@ -0,0 +1,7 @@ +import GhostDropdown from 'ghost/components/gh-dropdown'; + +var GhostPopover = GhostDropdown.extend({ + classNames: 'ghost-popover' +}); + +export default GhostPopover; \ No newline at end of file diff --git a/core/client/docs/popovers.html b/core/client/docs/popovers.html new file mode 100644 index 00000000000..83822c16f55 --- /dev/null +++ b/core/client/docs/popovers.html @@ -0,0 +1,75 @@ +--- +layout: default +title: Popovers · Ghost UI +--- + +
+ Menu +

Popovers

+
+ +
+ +

Popovers

+ +
+ +
+
URL Structure Formatting
+
You can use dynamic variables in this field.
+
+

+ %t - The title of your post (or page)
+ %c - The tag which your post is categorised in
+ %y - The year your post was published
+ %m - The month your post was published
+ %d - The day your post was published +

+
+
+ +
+ + {% assign popover_classes = "popover-triangle-top|popover-triangle-top-left|popover-triangle-top-right|popover-triangle-bottom|popover-triangle-bottom-left|popover-triangle-bottom-right|popover-triangle-right|popover-triangle-right-top|popover-triangle-right-bottom|popover-triangle-left|popover-triangle-left-top|popover-triangle-left-bottom" | split: "|" %} + {% for item in popover_classes %} +
+ {{item}} +
+
URL Structure Formatting
+
You can use dynamic variables in this field.
+
+

+ %t - The title of your post (or page)
+ %c - The tag which your post is categorised in
+ %y - The year your post was published
+ %m - The month your post was published
+ %d - The day your post was published +

+
+
+
+

+ {% endfor %} +
+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/core/client/initializers/dropdown.js b/core/client/initializers/dropdown.js index 034691b9967..7e850d10a94 100644 --- a/core/client/initializers/dropdown.js +++ b/core/client/initializers/dropdown.js @@ -1,17 +1,4 @@ -import BodyEventListener from 'ghost/mixins/body-event-listener'; - -var DropdownService = Ember.Object.extend(Ember.Evented, BodyEventListener, { - bodyClick: function (event) { - /*jshint unused:false */ - this.closeDropdowns(); - }, - closeDropdowns: function () { - this.trigger('close'); - }, - toggleDropdown: function (dropdownName, dropdownButton) { - this.trigger('toggle', {target: dropdownName, button: dropdownButton}); - } -}); +import DropdownService from 'ghost/utils/dropdown-service'; var dropdownInitializer = { name: 'dropdown', @@ -19,12 +6,18 @@ var dropdownInitializer = { initialize: function (container, application) { application.register('dropdown:service', DropdownService); + // Inject dropdowns application.inject('component:gh-dropdown', 'dropdown', 'dropdown:service'); application.inject('component:gh-dropdown-button', 'dropdown', 'dropdown:service'); application.inject('controller:modals.delete-post', 'dropdown', 'dropdown:service'); application.inject('controller:modals.transfer-owner', 'dropdown', 'dropdown:service'); application.inject('route:application', 'dropdown', 'dropdown:service'); + + // Inject popovers + application.inject('component:gh-popover', 'dropdown', 'dropdown:service'); + application.inject('component:gh-popover-button', 'dropdown', 'dropdown:service'); + application.inject('route:application', 'dropdown', 'dropdown:service'); } }; -export default dropdownInitializer; +export default dropdownInitializer; \ No newline at end of file diff --git a/core/client/templates/debug.hbs b/core/client/templates/debug.hbs index 65783153690..25936f04be7 100644 --- a/core/client/templates/debug.hbs +++ b/core/client/templates/debug.hbs @@ -6,7 +6,7 @@
- +

Ugly Debug Tools

@@ -15,6 +15,7 @@
+
diff --git a/core/client/utils/dropdown-service.js b/core/client/utils/dropdown-service.js new file mode 100644 index 00000000000..95a6cb68442 --- /dev/null +++ b/core/client/utils/dropdown-service.js @@ -0,0 +1,17 @@ +// This is used by the dropdown initializer (and subsequently popovers) to manage closing & toggeling +import BodyEventListener from 'ghost/mixins/body-event-listener'; + +var DropdownService = Ember.Object.extend(Ember.Evented, BodyEventListener, { + bodyClick: function (event) { + /*jshint unused:false */ + this.closeDropdowns(); + }, + closeDropdowns: function () { + this.trigger('close'); + }, + toggleDropdown: function (dropdownName, dropdownButton) { + this.trigger('toggle', {target: dropdownName, button: dropdownButton}); + } +}); + +export default DropdownService; \ No newline at end of file From a32e5a713568fd597226c6d90d50683623fe655b Mon Sep 17 00:00:00 2001 From: Paul Adam Davis Date: Mon, 13 Oct 2014 16:23:06 +0100 Subject: [PATCH 3/4] Move unrelated editor cover code to the right place Closes #4106 Moved the `.editor-close` styles to `post-settings-menu.scss` --- .../assets/sass/components/navigation.scss | 3 +- .../assets/sass/components/notifications.scss | 8 +- .../assets/sass/components/settings-menu.scss | 171 ++++++++++++++++++ core/client/assets/sass/layouts/default.scss | 45 +---- core/client/assets/sass/layouts/editor.scss | 53 ++++-- .../sass/layouts/post-settings-menu.scss | 127 ------------- core/client/assets/sass/layouts/settings.scss | 6 +- core/client/assets/sass/screen.scss | 2 +- core/client/controllers/application.js | 2 +- core/client/controllers/post-settings-menu.js | 4 +- core/client/routes/application.js | 10 +- core/client/routes/editor/edit.js | 2 +- core/client/routes/editor/new.js | 2 +- core/client/templates/-publish-bar.hbs | 2 +- core/client/templates/post-settings-menu.hbs | 33 ++-- core/client/templates/settings.hbs | 8 +- core/client/views/application.js | 6 +- core/test/functional/base.js | 6 +- core/test/functional/client/editor_test.js | 4 +- core/test/functional/client/psm_test.js | 16 +- core/test/functional/client/settings_test.js | 22 +-- 21 files changed, 278 insertions(+), 254 deletions(-) create mode 100644 core/client/assets/sass/components/settings-menu.scss delete mode 100644 core/client/assets/sass/layouts/post-settings-menu.scss diff --git a/core/client/assets/sass/components/navigation.scss b/core/client/assets/sass/components/navigation.scss index 66525c551da..82260a5eb17 100644 --- a/core/client/assets/sass/components/navigation.scss +++ b/core/client/assets/sass/components/navigation.scss @@ -19,7 +19,8 @@ width: 16px; } - body.right-outlet-expanded & { + // This selector ends up being `body.settings-menu-expanded .global-nav` + body.settings-menu-expanded & { transform: translate3d(-350px, 0px, 0px); } diff --git a/core/client/assets/sass/components/notifications.scss b/core/client/assets/sass/components/notifications.scss index 08fceef6034..1d4de59d08a 100644 --- a/core/client/assets/sass/components/notifications.scss +++ b/core/client/assets/sass/components/notifications.scss @@ -12,7 +12,9 @@ z-index: 980; width: 300px; transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1); - body.right-outlet-expanded & { + + // This selector ends up being `body.settings-menu-expanded .notifications` + body.settings-menu-expanded & { transform: translate3d(350px, 0px, 0px); } } @@ -24,7 +26,9 @@ right: 0; z-index: 9999; transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1); - body.right-outlet-expanded & { + + // This selector ends up being `body.settings-menu-expanded .notifications` + body.settings-menu-expanded & { transform: translate3d(100%, 0px, 0px); } } diff --git a/core/client/assets/sass/components/settings-menu.scss b/core/client/assets/sass/components/settings-menu.scss new file mode 100644 index 00000000000..f738a0df6b8 --- /dev/null +++ b/core/client/assets/sass/components/settings-menu.scss @@ -0,0 +1,171 @@ +// +// Settings Menu +// -------------------------------------------------- + + +// Wrapper +.settings-menu-container { + background: $lightestgrey; + width: 100%; + max-width: 350px; + position: fixed; + top: 0; + right: 0; + bottom: 0; + overflow: hidden; + transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1); + transform: translate3d(60px, 0px, 0px); + + // This selector ends up being `body.settings-menu-expanded .settings-menu-container` + body.settings-menu-expanded & { + transform: translate3d(0, 0px, 0px); + } + .settings-menu-pane { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + transform: translate3d(0, 0px, 0px); + opacity: 1; + overflow: auto; + -webkit-overflow-scrolling: touch; + + @media (min-width: 901px) { + transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1); + } + + &.settings-menu-pane-out-left { + transform: translate3d(-100%, 0px, 0px); + } + &.settings-menu-pane-out-right { + transform: translate3d(100%, 0px, 0px); + } + &.settings-menu-pane-in { + transform: translate3d(0, 0px, 0px); + } + } +} + +// Header +.settings-menu-header { + position: relative; + padding: 19px 24px; + + h4 { + font-weight: normal; + font-size: 1.6rem; + line-height: 1.375; + margin: 0; + } + + .close { + right: 0; + + &:before { + right: 22px; + } + + } + +} + +.settings-menu-header.subview { + + h4 { + text-align: center; + } + + .back { + left: 0; + + &:before { + left: 19px; + } + + } + +} + +.settings-menu-header-action { + position: absolute; + top: 0; + bottom: 7px; + width: 45px; + padding: 0; + + &:before { + position: absolute; + top: 50%; + transform: translateY(-50%); + color: $midbrown; + font-size: 2rem; + } + + &:hover { + + &:before { + color: $midgrey; + } + + } + +} + +// Content +.settings-menu-content { + padding: 0 24px 24px; + + .image-uploader { + padding-top: 35px; + padding-bottom: 35px; + margin: 0 0 1.6rem 0; + + input { + width: auto; + } + + } + + textarea { + height: 108px; + } + + .nav-list { + margin-top: 3rem; + } + + .pre-image-uploader { + width: auto; + min-height: 50px; + max-height: 250px; + margin-top: 0; + } + + .word-count { + font-weight: bold; + } + +}//.settings-menu-content + + +// +// Content Cover +// -------------------------------------------------- +// A transparent div that goes over the content, used +// to listen for clicks to close the right outlet + +body.settings-menu-expanded { + + .content-cover { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 600; + transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1); + transform: translate3d(-350px, 0px, 0px); // Not off the screen, to give a parallax effect + }//.editor-cover + +}//body.settings-menu-expanded \ No newline at end of file diff --git a/core/client/assets/sass/layouts/default.scss b/core/client/assets/sass/layouts/default.scss index c97807d2386..44c7af92dba 100644 --- a/core/client/assets/sass/layouts/default.scss +++ b/core/client/assets/sass/layouts/default.scss @@ -30,11 +30,13 @@ transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1); } + // This selector ends up being `body.settings-menu-expanded .viewport` body.global-nav-expanded & { transform: translate3d(260px, 0px, 0px); } - body.right-outlet-expanded & { + // This selector ends up being `body.settings-menu-expanded .viewport` + body.settings-menu-expanded & { @media (max-width: 350px) { transform: translate3d(-100%, 0px, 0px); } @@ -54,47 +56,6 @@ } } -.right-outlet { - background: $lightestgrey; - width: 100%; - max-width: 350px; - position: fixed; - top: 0; - right: 0; - bottom: 0; - overflow: hidden; - transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1); - transform: translate3d(60px, 0px, 0px); - body.right-outlet-expanded & { - transform: translate3d(0, 0px, 0px); - } - .outlet-pane { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - transform: translate3d(0, 0px, 0px); - opacity: 1; - - overflow: auto; - -webkit-overflow-scrolling: touch; - - @media (min-width: 901px) { - transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1); - } - - &.outlet-pane-out-left { - transform: translate3d(-100%, 0px, 0px); - } - &.outlet-pane-out-right { - transform: translate3d(100%, 0px, 0px); - } - &.outlet-pane-in { - transform: translate3d(0, 0px, 0px); - } - } -} // // The header bar - visible below 900px diff --git a/core/client/assets/sass/layouts/editor.scss b/core/client/assets/sass/layouts/editor.scss index 5d7d4ac64c7..fccdcfd53b7 100644 --- a/core/client/assets/sass/layouts/editor.scss +++ b/core/client/assets/sass/layouts/editor.scss @@ -673,25 +673,6 @@ body.zen { text-align: right; } - -// -// Post Settings Menu -// -------------------------------------------------- - - body.right-outlet-expanded { - - .editor-cover { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 600; - transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1); - transform: translate3d(-350px, 0px, 0px); // Not off the screen, to give a parallax effect - }//.editor-cover -}//body.right-outlet-expanded - .post-settings { @include icon($i-settings, 14px); display: inline-block; @@ -718,6 +699,40 @@ body.zen { } // .post-settings-menu +// +// Post Settings Menu eta Data +// -------------------------------------------------- + +// These styles are copied from Google.com +.seo-preview { + font-family: Arial, sans-serif; +} + +.seo-preview-title { + font-size: 1.8rem; + line-height: 2.16rem; + color: #1E0FBE; + text-overflow: ellipses; + -webkit-text-overflow: ellipsis; + word-wrap: break-word; +} + +.seo-preview-link { + margin: 1px 0 2px 0; + font-size: 1.3rem; + line-height: 1.6rem; + color: #006621; + word-wrap: break-word; +} + +.seo-preview-description { + font-size: 1.3rem; + line-height: 1.4; + color: #545454; + word-wrap: break-word; +} + + // // Markdown Help Modal // -------------------------------------------------- diff --git a/core/client/assets/sass/layouts/post-settings-menu.scss b/core/client/assets/sass/layouts/post-settings-menu.scss deleted file mode 100644 index 52f7fb55861..00000000000 --- a/core/client/assets/sass/layouts/post-settings-menu.scss +++ /dev/null @@ -1,127 +0,0 @@ -// -// Post Settings Menu -// -------------------------------------------------- - -// Wrapper -.post-settings-menu {} - -// Header -.post-settings-header { - position: relative; - padding: 19px 24px; - h4 { - font-weight: normal; - font-size: 1.6rem; - line-height: 1.375; - margin: 0; - } - .close { - right: 0; - &:before { - right: 22px; - } - } -} - -.post-settings-header.subview { - h4 { - text-align: center; - } - .back { - left: 0; - &:before { - left: 19px; - } - } -} - -.post-settings-header-action { - position: absolute; - top: 0; - bottom: 7px; - width: 45px; - padding: 0; - &:before { - position: absolute; - top: 50%; - transform: translateY(-50%); - color: $midbrown; - font-size: 2rem; - } - &:hover { - &:before { - color: $midgrey; - } - } -} - -// Content -.post-settings-content { - padding: 0 24px 24px; - - .image-uploader { - padding-top: 35px; - padding-bottom: 35px; - margin: 0 0 1.6rem 0; - - input { - width: auto; - } - } - - .form-group { - // margin-bottom: 1.5rem; - } // .form-group - - textarea { - height: 108px; - } - - .nav-list { - margin-top: 3rem; - } - - .pre-image-uploader { - width: auto; - min-height: 50px; - max-height: 250px; - } - - .word-count { - font-weight: bold; - } -} - - -// -// Meta Data -// -------------------------------------------------- - -// These styles are copied from Google.com -.seo-preview { - font-family: Arial, sans-serif; -} - -.seo-preview-title { - font-size: 1.8rem; - line-height: 2.16rem; - color: #1E0FBE; - text-overflow: ellipses; - -webkit-text-overflow: ellipsis; - word-wrap: break-word; -} - -.seo-preview-link { - margin: 1px 0 2px 0; - font-size: 1.3rem; - line-height: 1.6rem; - color: #006621; - word-wrap: break-word; -} - -.seo-preview-description { - font-size: 1.3rem; - line-height: 1.4; - color: #545454; - word-wrap: break-word; -} diff --git a/core/client/assets/sass/layouts/settings.scss b/core/client/assets/sass/layouts/settings.scss index 744da6ae25c..627adf91f3b 100644 --- a/core/client/assets/sass/layouts/settings.scss +++ b/core/client/assets/sass/layouts/settings.scss @@ -9,8 +9,8 @@ // Sidebar // -------------------------------------------------- -// Main settings-menu styles, apply to every item -.settings-menu { +// Settings navigation +.settings-nav { width: 25%; position: absolute; top: 0; @@ -129,7 +129,7 @@ } // li -} // .settings-menu +} // .settings-nav // diff --git a/core/client/assets/sass/screen.scss b/core/client/assets/sass/screen.scss index 568eafab099..c1dac669882 100644 --- a/core/client/assets/sass/screen.scss +++ b/core/client/assets/sass/screen.scss @@ -44,6 +44,7 @@ @import "components/pagination"; @import "components/badges"; @import "components/popovers"; +@import "components/settings-menu"; // @@ -55,7 +56,6 @@ @import "layouts/auth"; @import "layouts/content"; @import "layouts/editor"; -@import "layouts/post-settings-menu"; @import "layouts/settings"; @import "layouts/users"; @import "layouts/user"; diff --git a/core/client/controllers/application.js b/core/client/controllers/application.js index fa1c6471bd3..6c46d0866fb 100644 --- a/core/client/controllers/application.js +++ b/core/client/controllers/application.js @@ -3,7 +3,7 @@ var ApplicationController = Ember.Controller.extend({ topNotificationCount: 0, showGlobalMobileNav: false, - showRightOutlet: false, + showSettingsMenu: false, actions: { topNotificationChange: function (count) { diff --git a/core/client/controllers/post-settings-menu.js b/core/client/controllers/post-settings-menu.js index fa1f784e652..b2493df7828 100644 --- a/core/client/controllers/post-settings-menu.js +++ b/core/client/controllers/post-settings-menu.js @@ -9,9 +9,9 @@ var PostSettingsMenuController = Ember.ObjectController.extend({ lastPromise: null, - isViewingSubview: Ember.computed('controllers.application.showRightOutlet', function (key, value) { + isViewingSubview: Ember.computed('controllers.application.showSettingsMenu', function (key, value) { // Not viewing a subview if we can't even see the PSM - if (!this.get('controllers.application.showRightOutlet')) { + if (!this.get('controllers.application.showSettingsMenu')) { return false; } if (arguments.length > 1) { diff --git a/core/client/routes/application.js b/core/client/routes/application.js index a1240ded722..b0c9618f943 100644 --- a/core/client/routes/application.js +++ b/core/client/routes/application.js @@ -31,11 +31,11 @@ var ApplicationRoute = Ember.Route.extend(SimpleAuth.ApplicationRouteMixin, Shor this.toggleProperty('controller.showGlobalMobileNav'); }, - toggleRightOutlet: function () { - this.toggleProperty('controller.showRightOutlet'); + toggleSettingsMenu: function () { + this.toggleProperty('controller.showSettingsMenu'); }, - closeRightOutlet: function () { - this.set('controller.showRightOutlet', false); + closeSettingsMenu: function () { + this.set('controller.showSettingsMenu', false); }, closePopups: function () { @@ -43,7 +43,7 @@ var ApplicationRoute = Ember.Route.extend(SimpleAuth.ApplicationRouteMixin, Shor this.get('notifications').closeAll(); // Close right outlet if open - this.send('closeRightOutlet'); + this.send('closeSettingsMenu'); this.send('closeModal'); }, diff --git a/core/client/routes/editor/edit.js b/core/client/routes/editor/edit.js index b3e9e8d0f5f..208714259b5 100644 --- a/core/client/routes/editor/edit.js +++ b/core/client/routes/editor/edit.js @@ -77,7 +77,7 @@ var EditorEditRoute = Ember.Route.extend(SimpleAuth.AuthenticatedRouteMixin, bas isDeleted = model.get('isDeleted'), modelIsDirty = model.get('isDirty'); - this.send('closeRightOutlet'); + this.send('closeSettingsMenu'); // when `isDeleted && isSaving`, model is in-flight, being saved // to the server. when `isDeleted && !isSaving && !modelIsDirty`, diff --git a/core/client/routes/editor/new.js b/core/client/routes/editor/new.js index 7f0e765854c..fe4e2cda9c7 100644 --- a/core/client/routes/editor/new.js +++ b/core/client/routes/editor/new.js @@ -35,7 +35,7 @@ var EditorNewRoute = Ember.Route.extend(SimpleAuth.AuthenticatedRouteMixin, base isDeleted = model.get('isDeleted'), modelIsDirty = model.get('isDirty'); - this.send('closeRightOutlet'); + this.send('closeSettingsMenu'); // when `isDeleted && isSaving`, model is in-flight, being saved // to the server. when `isDeleted && !isSaving && !modelIsDirty`, diff --git a/core/client/templates/-publish-bar.hbs b/core/client/templates/-publish-bar.hbs index ca8fbe605c2..79a0407a92d 100644 --- a/core/client/templates/-publish-bar.hbs +++ b/core/client/templates/-publish-bar.hbs @@ -3,7 +3,7 @@ {{render 'post-tags-input'}}
- + {{view "editor-save-button" id="entry-actions" classNameBindings="isNew:unsaved"}}
diff --git a/core/client/templates/post-settings-menu.hbs b/core/client/templates/post-settings-menu.hbs index ee30de1facc..e4c5eb6fd90 100644 --- a/core/client/templates/post-settings-menu.hbs +++ b/core/client/templates/post-settings-menu.hbs @@ -1,12 +1,12 @@ -
-{{#gh-tabs-manager selected="showSubview" id="entry-controls" class="right-outlet"}} -
-
-
+
+{{#gh-tabs-manager selected="showSubview" id="entry-controls" class="settings-menu-container"}} +
+
+

Post Settings

- +
-
+
{{gh-uploader uploaded="setCoverImage" canceled="clearCoverImage" image=image tagName="section"}}
@@ -62,19 +62,19 @@

Feature this post

- + -
-
-
+
{{! .settings-menu-content }} +
{{! .post-settings-menu }} + +
{{#gh-tab-pane}} -
- +
+

Meta Data

- -
+
@@ -95,9 +95,8 @@
{{seoURL}}
{{seoDescription}}
-
-
+
{{! .settings-menu-content }} {{/gh-tab-pane}}
diff --git a/core/client/templates/settings.hbs b/core/client/templates/settings.hbs index 0a14a5d514a..5928075cdf3 100644 --- a/core/client/templates/settings.hbs +++ b/core/client/templates/settings.hbs @@ -4,18 +4,18 @@
-