Skip to content

Commit

Permalink
Make sure left margin is consistent when expanding/collapsing the tabs (
Browse files Browse the repository at this point in the history 
#16406)

Merge remote-tracking branch 'upstream/pr/16406' into 3.x

* upstream/pr/16406:
  Update modx.layout.js
  • Loading branch information
@Mark-H
Mark-H committed Feb 10, 2024
2 parents bca1927 + 891d40b commit 87a6264
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 75 deletions.
1 change: 1 addition & 0 deletions core/docs/changelog.txt
View file
Expand Up @@ -9,6 +9,7 @@ development release, and is only shown to give an idea of what's currently in th
- Store last opened media browser path in browser history / URL parameters to re-open last path (#16394)
- Fix template picker to avoid errors in certain edge cases (#16400)
- Only show resource types in template picker and context menus if the user has permission to create them (#15893)
- Make sure left margin is consistent when expanding/collapsing the tabs (#16406)

MODX Revolution 3.0.3-pl (January 17, 2023)
====================================
Expand Down
185 changes: 111 additions & 74 deletions manager/assets/modext/core/modx.layout.js
View file
Expand Up @@ -10,19 +10,18 @@ Ext.apply(Ext, {
isFirebug: (window.console && window.console.firebug)
});

MODx.Layout = function(config){
config = config || {};
MODx.Layout = function(config = {}) {
Ext.BLANK_IMAGE_URL = MODx.config.manager_url+'assets/ext3/resources/images/default/s.gif';
Ext.Ajax.defaultHeaders = {
'modAuth': config.auth
modAuth: config.auth
};
Ext.Ajax.extraParams = {
'HTTP_MODAUTH': config.auth
};
MODx.siteId = config.auth;
MODx.expandHelp = !!+MODx.config.inline_help;

var sp = new MODx.HttpProvider();
const sp = new MODx.HttpProvider();
Ext.state.Manager.setProvider(sp);
sp.initState(MODx.defaultState);

Expand Down Expand Up @@ -52,14 +51,32 @@ MODx.Layout = function(config){
this.fireEvent('afterLayout');
};
Ext.extend(MODx.Layout, Ext.Viewport, {
/**
* @property {Number} menuBarWidth - The standard width for main left menu (tablet and larger layout)
*/
menuBarWidth: 70

/**
* @property {Number} splitBarMargin - Standard spacing for the split bar
*/
,splitBarMargin: 8

/**
* @property {Function} getSplitBarMargin - Utility getter for splitBarMargin
* @returns {Number}
*/
,getSplitBarMargin: function() {
return this.splitBarMargin;
}

/**
* Wrapper method to build the layout regions
*
* @param {Object} config
*
* @returns {Array}
*/
buildLayout: function(config) {
,buildLayout: function(config) {
var items = []
,north = this.getNorth(config)
,west = this.getWest(config)
Expand Down Expand Up @@ -108,7 +125,7 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
return false;
}
/**
* Build the west region (trees)
* Build the west region (main menu bar)
*
* @param {Object} config
*
Expand All @@ -125,10 +142,9 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
,id: 'modx-header'
,applyTo: 'modx-header'
,autoScroll: true
,width: 70
,width: this.menuBarWidth
,listeners: {
afterrender: this.initPopper
,scope: this
afterrender: { fn: this.initPopper, scope: this }
}
};
}
Expand All @@ -140,33 +156,49 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
* @returns {Object|void}
*/
,getCenter: function(config) {
var center = {
const center = {
region: 'center',
applyTo: 'modx-content',
padding: '0 1px 0 0',
margins: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
style: 'width:100%',
bodyStyle: 'background-color:transparent;',
id: 'modx-content',
autoScroll: true,
autoScroll: true
};

if (window.innerWidth <= 640) {
return center;
}

var tree = this.getTree(config);
center.margins = {
right: -70,
left: -8,
};
const tree = this.getTree(config);

center.margins.right = -this.menuBarWidth;

tree.margins = {
left: 70
left: this.menuBarWidth
};

return {
region: 'center',
layout: 'border',
id: 'modx-split-wrapper',
items: [tree, center]
items: [tree, center],
listeners: {
render: {
fn: function(cmp) {
if (!cmp.collapsed) {
cmp.items.map['modx-content'].margins.left = -this.getSplitBarMargin();
}
},
scope: this
}
}
};
}
/**
Expand All @@ -189,7 +221,9 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
}

,getTree: function(config) {
var tabs = [];
const tabs = [],
layout = this
;
if (MODx.perm.resource_tree) {
tabs.push({
title: _('resources')
Expand Down Expand Up @@ -243,64 +277,61 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
}
,id: 'modx-leftbar-tabpanel'
,border: false
,anchor: '100%'
,activeTab: activeTab
,stateful: true
,stateEvents: ['tabchange']
,getState:function() {
,getState: function() {
return {
activeTab: this.items.indexOf(this.getActiveTab())
};
}
,items: tabs
,listeners: {
afterrender: function () {
var tabs = this;
afterrender: function() {
const baseTabs = this,
header = Ext.get('modx-leftbar-header')
;
MODx.Ajax.request({
url: MODx.config.connector_url,
params: {
action: 'Resource/GetToolbar',
},
listeners: {
success: {fn: function (res) {
for (var i in res.object) {
if (res.object.hasOwnProperty(i)) {
if (res.object[i].id != undefined && res.object[i].id == 'emptifier') {
var tab = tabs.add({
id: 'modx-trash-link',
title: '<i class="icon icon-trash-o"></i>',
handler: res.object[i].handler,
});
if (!res.object[i].disabled) {
tab.tabEl.classList.add('active');
}
if (res.object[i].tooltip) {
tab.tooltip = new Ext.ToolTip({
target: new Ext.Element(tab.tabEl),
title: res.object[i].tooltip
});
}
break;
}
url: MODx.config.connector_url,
params: {
action: 'Resource/GetToolbar'
},
listeners: {
success: {
fn: function(response) {
const trashTrigger = Object.values(response.object).find(item => item.id === 'emptifier');
if (trashTrigger) {
const trashTab = baseTabs.add({
id: 'modx-trash-link',
title: '<i class="icon icon-trash-o"></i>',
handler: trashTrigger.handler
});
if (!trashTrigger.disabled) {
trashTab.tabEl.classList.add('active');
}
if (trashTrigger.tooltip) {
trashTab.tooltip = new Ext.ToolTip({
target: new Ext.Element(trashTab.tabEl),
title: trashTrigger.tooltip
});
}
}
}, scope: this}
},
scope: this
}
}
);
});

var header = Ext.get('modx-leftbar-header');
if (header) {
var html = '';
let html = '';
const el = document.createElement('a');
if (MODx.config.manager_logo !== '' && MODx.config.manager_logo !== undefined) {
html += '<img src="' + MODx.config.manager_logo + '">';
}
var el = document.createElement('a');
el.href = MODx.config.default_site_url || MODx.config.site_url;
el.title = MODx.config.site_name;
el.innerText = Ext.util.Format.ellipsis(MODx.config.site_name, 45, true);
el.target = '_blank';

html += el.outerHTML;
header.dom.innerHTML = html;
}
Expand All @@ -324,12 +355,17 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
width: this.width
};
}
,collapse: function(animate){
if(this.collapsed || this.el.hasFxBlock() || this.fireEvent('beforecollapse', this, animate) === false){
,collapse: function(animate) {
if (this.collapsed || this.el.hasFxBlock() || this.fireEvent('beforecollapse', this, animate) === false) {
return;
}
const contentRegion = Ext.getCmp('modx-content');
if (contentRegion) {
contentRegion.margins.left = 0;
Ext.getCmp('modx-layout').doLayout();
}
if (animate && window.innerWidth > 960) {
var tree = Ext.getCmp('modx-leftbar-tabpanel').getEl();
const tree = Ext.getCmp('modx-leftbar-tabpanel').getEl();
tree.dom.style.opacity = 0;
this.el.dom.style.left = '-' + this.el.dom.style.width;
} else {
Expand All @@ -340,16 +376,20 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
this.fireEvent('collapse', this);
return this;
}
,expand : function(animate) {
if(!this.collapsed || this.el.hasFxBlock() || this.fireEvent('beforeexpand', this, animate) === false){
,expand: function(animate) {
if (!this.collapsed || this.el.hasFxBlock() || this.fireEvent('beforeexpand', this, animate) === false) {
return;
}
const contentRegion = Ext.getCmp('modx-content');
if (contentRegion) {
contentRegion.margins.left = -layout.getSplitBarMargin();
}
if (animate && window.innerWidth > 960) {
var tree = Ext.getCmp('modx-leftbar-tabpanel').getEl();
window.setTimeout(function() {
const tree = Ext.getCmp('modx-leftbar-tabpanel').getEl();
window.setTimeout(() => {
tree.dom.style.visibility = 'visible';
tree.dom.style.opacity = 1;
}, 100)
}, 100);
} else {
this.el.dom.style.display = '';
}
Expand All @@ -358,28 +398,25 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
this.fireEvent('expand', this);
return this;
}
,listeners:{
beforestatesave: {fn: this.onBeforeSaveState, scope: this}
,afterrender: function() {
var trigger = Ext.get('modx-leftbar-trigger');
,listeners: {
beforestatesave: {
fn: this.onBeforeSaveState,
scope: this
},
afterrender: function() {
const trigger = Ext.get('modx-leftbar-trigger');
if (this.collapsed) {
trigger.addClass('collapsed');
}
trigger.on('click', function() {
if (this.collapsed) {
trigger.removeClass('collapsed');
this.expand(true);
} else {
trigger.addClass('collapsed');
this.collapse(true);
}
}, this);
},
collapse: function() {
var trigger = Ext.get('modx-leftbar-trigger');
trigger.addClass('collapsed');
},
expand: function() {
var trigger = Ext.get('modx-leftbar-trigger');
trigger.removeClass('collapsed');
}
}
};
Expand Down
2 changes: 1 addition & 1 deletion manager/assets/modext/modx.jsgrps-min.js
View file

Large diffs are not rendered by default.

0 comments on commit 87a6264

Please sign in to comment.