mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-16 20:43:01 +03:00
153f76aa7c
Closes #3254, closes #3138, closes #3245 ### Settings Routing and View refactoring - Refactored `SettingsView` to handle transitions between mobile and desktop layouts - `SettingsRoute` will only transition to `settings.general` if the screen is large enough to show both the menu and the content - Added `SettingsIndexView` to handle showing the settings menu on mobile screens - Added `SettingsContentBaseView` to be inherited by any settings view that is not index. - Updated Settings templates appropriately to work with new views - Removed extraneous `active` class from `settings-content` - Changed settings menu to use `gh-activating-list-item` - Retooled settings tests ### Mobile Utils - Renamed file to `mobile.js`, since it's inside of `utils/` - Added `mobileQuery` MediaQueryList to help detect layout changes - Removed unused `hasTouchScreen`, `device.js` should be used instead. - Removed unused `smallScreen` function - Moved FastClickInit to codemirror-mobile
45 lines
1.7 KiB
JavaScript
45 lines
1.7 KiB
JavaScript
import {mobileQuery} from 'ghost/utils/mobile';
|
|
|
|
var SettingsView = Ember.View.extend({
|
|
classNames: ['wrapper'],
|
|
// used by SettingsContentBaseView and on resize to mobile from desktop
|
|
showSettingsContent: function () {
|
|
if (mobileQuery.matches) {
|
|
$('.settings-sidebar').animate({right: '100%', left: '-110%', 'margin-right': '15px'}, 300);
|
|
$('.settings-content').animate({right: '0', left: '0', 'margin-left': '0'}, 300);
|
|
$('.settings-header-inner').css('display', 'block');
|
|
}
|
|
},
|
|
// used by SettingsIndexView
|
|
showSettingsMenu: function () {
|
|
if (mobileQuery.matches) {
|
|
$('.settings-header-inner').css('display', 'none');
|
|
$('.settings-sidebar').animate({right: '0', left: '0', 'margin-right': '0'}, 300);
|
|
$('.settings-content').animate({right: '-100%', left: '100%', 'margin-left': '15'}, 300);
|
|
}
|
|
},
|
|
showAll: function () {
|
|
//Remove any styles applied by jQuery#animate
|
|
$('.settings-sidebar, .settings-content').removeAttr('style');
|
|
},
|
|
|
|
mobileInteractions: function () {
|
|
this.set('changeLayout', _.bind(function changeLayout(mq) {
|
|
if (mq.matches) {
|
|
//transitioned to mobile layout, so show content
|
|
this.showSettingsContent();
|
|
} else {
|
|
//went from mobile to desktop
|
|
this.showAll();
|
|
}
|
|
}, this));
|
|
mobileQuery.addListener(this.changeLayout);
|
|
}.on('didInsertElement'),
|
|
|
|
removeMobileInteractions: function () {
|
|
mobileQuery.removeListener(this.changeLayout);
|
|
}.on('willDestroyElement')
|
|
});
|
|
|
|
export default SettingsView;
|