mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-25 09:03:12 +03:00
🎨 Removed auto hide/show navigation toggle (#1094)
no issue - the autonav behaviour has outlasted it's usefulness - it was mostly useful for editing but the editor screen is now always fullscreen and the number of low-resolution screens has dropped significantly - dropped the components and all supporting code associated with autonav behaviour
This commit is contained in:
Kevin Ansfield
GitHub
parent
18b6596cd1
commit
5e3de1c333
@ -18,13 +18,7 @@ export default Component.extend({
|
||||
|
||||
classNames: ['content-cover'],
|
||||
|
||||
onMouseEnter: null,
|
||||
|
||||
click() {
|
||||
this.get('ui').closeMenus();
|
||||
},
|
||||
|
||||
mouseEnter() {
|
||||
this.get('ui').closeAutoNav();
|
||||
}
|
||||
});
|
||||
|
||||
@ -15,9 +15,6 @@ export default Component.extend({
|
||||
'isPreview:gh-editor-preview'
|
||||
],
|
||||
|
||||
// Public attributes
|
||||
navIsClosed: false,
|
||||
|
||||
// Internal attributes
|
||||
droppedFiles: null,
|
||||
headerClass: '',
|
||||
@ -31,7 +28,6 @@ export default Component.extend({
|
||||
|
||||
// Private
|
||||
_dragCounter: 0,
|
||||
_navIsClosed: false,
|
||||
_onResizeHandler: null,
|
||||
_viewActionsWidth: 190,
|
||||
|
||||
@ -42,16 +38,6 @@ export default Component.extend({
|
||||
};
|
||||
},
|
||||
|
||||
didReceiveAttrs() {
|
||||
let navIsClosed = this.get('navIsClosed');
|
||||
|
||||
if (navIsClosed !== this._navIsClosed) {
|
||||
run.scheduleOnce('afterRender', this, this._setHeaderClass);
|
||||
}
|
||||
|
||||
this._navIsClosed = navIsClosed;
|
||||
},
|
||||
|
||||
didInsertElement() {
|
||||
this._super(...arguments);
|
||||
window.addEventListener('resize', this._onResizeHandler);
|
||||
|
||||
@ -1,44 +0,0 @@
|
||||
import Component from '@ember/component';
|
||||
import {computed} from '@ember/object';
|
||||
import {reads} from '@ember/object/computed';
|
||||
import {inject as service} from '@ember/service';
|
||||
|
||||
/*
|
||||
This cute little component has two jobs.
|
||||
|
||||
On desktop, it toggles autoNav behaviour. It tracks
|
||||
that state via the maximise property, and uses the
|
||||
state to render the appropriate icon.
|
||||
|
||||
On mobile, it renders a closing icon, and clicking it
|
||||
closes the mobile menu
|
||||
*/
|
||||
export default Component.extend({
|
||||
mediaQueries: service(),
|
||||
|
||||
classNames: ['gh-menu-toggle'],
|
||||
maximise: false,
|
||||
|
||||
// closure actions
|
||||
desktopAction() {},
|
||||
mobileAction() {},
|
||||
|
||||
isMobile: reads('mediaQueries.isMobile'),
|
||||
|
||||
iconClass: computed('maximise', 'isMobile', function () {
|
||||
if (this.get('maximise') && !this.get('isMobile')) {
|
||||
return 'icon-maximise';
|
||||
} else {
|
||||
return 'icon-minimise';
|
||||
}
|
||||
}),
|
||||
|
||||
click() {
|
||||
if (this.get('isMobile')) {
|
||||
this.mobileAction();
|
||||
} else {
|
||||
this.toggleProperty('maximise');
|
||||
this.desktopAction();
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -14,9 +14,7 @@ export default Component.extend({
|
||||
|
||||
tagName: 'nav',
|
||||
classNames: ['gh-nav'],
|
||||
classNameBindings: ['open'],
|
||||
|
||||
open: false,
|
||||
iconStyle: '',
|
||||
|
||||
showMenuExtension: computed('config.clientExtensions.menu', 'session.user.isOwner', function () {
|
||||
|
||||
@ -22,7 +22,7 @@ export default Component.extend(ShortcutsMixin, {
|
||||
close() {},
|
||||
select() {},
|
||||
|
||||
sideNavHidden: or('ui.{autoNav,isFullScreen,showMobileMenu}'),
|
||||
sideNavHidden: or('ui.{isFullScreen,showMobileMenu}'),
|
||||
|
||||
init() {
|
||||
this._super(...arguments);
|
||||
|
||||
@ -3,7 +3,7 @@ import PostModel from 'ghost-admin/models/post';
|
||||
import boundOneWay from 'ghost-admin/utils/bound-one-way';
|
||||
import config from 'ghost-admin/config/environment';
|
||||
import isNumber from 'ghost-admin/utils/isNumber';
|
||||
import {alias, mapBy, reads} from '@ember/object/computed';
|
||||
import {alias, mapBy} from '@ember/object/computed';
|
||||
import {computed} from '@ember/object';
|
||||
import {inject as controller} from '@ember/controller';
|
||||
import {copy} from '@ember/object/internals';
|
||||
@ -112,9 +112,6 @@ export default Controller.extend({
|
||||
|
||||
post: alias('model'),
|
||||
|
||||
// used within {{gh-editor}} as a trigger for responsive css changes
|
||||
navIsClosed: reads('application.autoNav'),
|
||||
|
||||
// store the desired post status locally without updating the model,
|
||||
// the model will only be updated when a save occurs
|
||||
willPublish: boundOneWay('post.isPublished'),
|
||||
|
||||
@ -1,31 +1,17 @@
|
||||
import Service, {inject as service} from '@ember/service';
|
||||
import {computed} from '@ember/object';
|
||||
import {not, or, reads} from '@ember/object/computed';
|
||||
|
||||
export default Service.extend({
|
||||
dropdown: service(),
|
||||
mediaQueries: service(),
|
||||
|
||||
autoNav: false,
|
||||
isFullScreen: false,
|
||||
showMobileMenu: false,
|
||||
showSettingsMenu: false,
|
||||
|
||||
hasSideNav: not('isSideNavHidden'),
|
||||
isMobile: reads('mediaQueries.isMobile'),
|
||||
isSideNavHidden: or('autoNav', 'isFullScreen', 'isMobile'),
|
||||
|
||||
autoNavOpen: computed('autoNav', {
|
||||
get() {
|
||||
return false;
|
||||
},
|
||||
set(key, value) {
|
||||
if (this.get('autoNav')) {
|
||||
return value;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}),
|
||||
isSideNavHidden: or('isFullScreen', 'isMobile'),
|
||||
|
||||
closeMenus() {
|
||||
this.get('dropdown').closeDropdowns();
|
||||
@ -35,17 +21,6 @@ export default Service.extend({
|
||||
});
|
||||
},
|
||||
|
||||
openAutoNav() {
|
||||
this.set('autoNavOpen', true);
|
||||
},
|
||||
|
||||
closeAutoNav() {
|
||||
if (this.get('autoNavOpen')) {
|
||||
this.get('dropdown').closeDropdowns();
|
||||
}
|
||||
this.set('autoNavOpen', false);
|
||||
},
|
||||
|
||||
closeMobileMenu() {
|
||||
this.set('showMobileMenu', false);
|
||||
},
|
||||
@ -58,23 +33,11 @@ export default Service.extend({
|
||||
this.set('showSettingsMenu', true);
|
||||
},
|
||||
|
||||
toggleAutoNav() {
|
||||
this.toggleProperty('autoNav');
|
||||
},
|
||||
|
||||
actions: {
|
||||
closeMenus() {
|
||||
this.closeMenus();
|
||||
},
|
||||
|
||||
openAutoNav() {
|
||||
this.openAutoNav();
|
||||
},
|
||||
|
||||
closeAutoNav() {
|
||||
this.closeAutoNav();
|
||||
},
|
||||
|
||||
closeMobileMenu() {
|
||||
this.closeMobileMenu();
|
||||
},
|
||||
@ -85,10 +48,6 @@ export default Service.extend({
|
||||
|
||||
openSettingsMenu() {
|
||||
this.openSettingsMenu();
|
||||
},
|
||||
|
||||
toggleAutoNav() {
|
||||
this.toggleAutoNav();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -96,10 +96,6 @@ input,
|
||||
}
|
||||
}
|
||||
|
||||
.gh-menu-toggle {
|
||||
border-color: #212A2E;
|
||||
}
|
||||
|
||||
.gh-nav-search .ember-power-select-trigger {
|
||||
border-color: color-mod(var(--lightgrey));
|
||||
background: color-mod(var(--lightgrey));
|
||||
|
||||
@ -340,114 +340,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Auto Nav - Opens and closes like OSX dock
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-menu-toggle {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: -8px;
|
||||
height: 36px;
|
||||
width: 25px;
|
||||
border: color-mod(var(--lightgrey) l(+4%)) 5px solid;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gh-menu-toggle:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gh-menu-toggle svg {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.gh-menu-toggle:hover svg {
|
||||
fill: var(--blue);
|
||||
}
|
||||
|
||||
.gh-menu-toggle-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.gh-menu-toggle {
|
||||
position: static;
|
||||
height: auto;
|
||||
width: auto;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.gh-menu-toggle-content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Autonav is tricky, because hit areas of translated elements aren't in sync
|
||||
with the visible element we need to add the hover behaviour to a small,
|
||||
non-moving element. The following code positions our hit area and transitions
|
||||
it in-sync with it's container so it always sticks to the left of the viewport
|
||||
then hides off-canvas when required as display:none breaks transitions. */
|
||||
|
||||
.gh-autonav-toggle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: none;
|
||||
width: 15px;
|
||||
height: 100%;
|
||||
transition: transform 0.20s;
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
|
||||
.gh-autonav .gh-autonav-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.gh-nav.open .gh-autonav-toggle {
|
||||
transition: transform 0.15s;
|
||||
transform: translate3d(-240px,0,0);
|
||||
}
|
||||
|
||||
@media (min-width: 801px) {
|
||||
/* Hide the nav */
|
||||
.gh-autonav .gh-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
transition: transform 0.20s;
|
||||
/* translate3d for GPU accelerated animation - http://bit.ly/1EY1Xhx */
|
||||
transform: translate3d(-240px,0,0);
|
||||
}
|
||||
|
||||
/* THE FUTURE: Super sexy background blur for Webkit - http://cl.ly/b1rG */
|
||||
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
|
||||
.gh-autonav .gh-nav {
|
||||
background: rgba(246,246,246, 0.7);
|
||||
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Bring it back on hover */
|
||||
.gh-autonav .gh-nav.open {
|
||||
transition: transform 0.15s;
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
|
||||
/* Move main content over for the closed-nav trigger bar */
|
||||
.gh-autonav .gh-main {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Mobile Nav Bar (Sits at bottom of screen)
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
|
||||
@ -3,20 +3,16 @@
|
||||
|
||||
{{gh-alerts}}
|
||||
|
||||
<div class="gh-viewport {{if ui.autoNav 'gh-autonav'}} {{if ui.showSettingsMenu 'settings-menu-expanded'}} {{if ui.showMobileMenu 'mobile-menu-expanded'}}">
|
||||
<div class="gh-viewport {{if ui.showSettingsMenu 'settings-menu-expanded'}} {{if ui.showMobileMenu 'mobile-menu-expanded'}}">
|
||||
{{#if showNavMenu}}
|
||||
{{gh-nav-menu
|
||||
open=ui.autoNavOpen
|
||||
icon=settings.settledIcon
|
||||
}}
|
||||
{{/if}}
|
||||
|
||||
{{!-- {{#gh-main onMouseEnter=(action "closeAutoNav" target=ui)}} --}}
|
||||
<main class="gh-main" role="main">
|
||||
{{outlet}}
|
||||
</main>
|
||||
{{!-- {{/gh-main}} --}}
|
||||
|
||||
|
||||
{{gh-notifications}}
|
||||
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
{{gh-menu-toggle desktopAction=(action "toggleAutoNav" target=ui) mobileAction=(action "closeMobileMenu" target=ui)}}
|
||||
{{#gh-basic-dropdown horizontalPosition="right" calculatePosition=userDropdownPosition as |dropdown|}}
|
||||
{{#dropdown.trigger tagName="header" class="gh-nav-menu"}}
|
||||
<div class="gh-nav-menu-icon" style={{iconStyle}}></div>
|
||||
@ -89,11 +88,9 @@
|
||||
<footer class="gh-nav-foot">
|
||||
<a class="gh-nav-foot-sitelink" href="{{config.blogUrl}}/" target="_blank">View site {{svg-jar "external"}}</a>
|
||||
</footer>
|
||||
<div class="gh-autonav-toggle" {{action "openAutoNav" on="mouseEnter" target=ui}}></div>
|
||||
|
||||
{{gh-tour-item "getting-started"
|
||||
target=".gh-menu-toggle"
|
||||
throbberAttachment="bottom middle"
|
||||
throbberOffset="0 4px"
|
||||
target=".gh-nav header"
|
||||
throbberAttachment="middle right"
|
||||
popoverTriangleClass="left-top"
|
||||
}}
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
{{#gh-editor
|
||||
tagName="section"
|
||||
class="gh-editor gh-view"
|
||||
navIsClosed=navIsClosed
|
||||
as |editor|
|
||||
}}
|
||||
<header class="gh-editor-header br2 pe-none {{editor.headerClass}} {{if infoMessage "bg-white"}}">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user