Skip to content

Commit 70e5109

Browse files
aboseabose
committed
chore: wirkspace manager panel resize apis
1 parent 1e78804 commit 70e5109

4 files changed

Lines changed: 173 additions & 1 deletion

File tree

‎docs/API-Reference/view/WorkspaceManager.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,20 @@ Returns true if visible else false.
121121
| --- |
122122
| panelID |
123123

124+
<a name="setPluginPanelWidth"></a>
125+
126+
## setPluginPanelWidth(width)
127+
Programmatically sets the plugin panel content width to the given value in pixels.
128+
The total toolbar width is adjusted to account for the plugin icons bar.
129+
Width is clamped to respect panel minWidth and max size (75% of window).
130+
No-op if no panel is currently visible.
131+
132+
**Kind**: global function
133+
134+
| Param | Type | Description |
135+
| --- | --- | --- |
136+
| width | <code>number</code> | Desired content width in pixels |
137+
124138
<a name="addEscapeKeyEventHandler"></a>
125139

126140
## addEscapeKeyEventHandler(consumerName, eventHandler) ⇒ <code>boolean</code>

‎src/extensionsIntegrated/Phoenix-live-preview/live-preview.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,36 @@
105105
padding-left: 7.5px;
106106
}
107107

108+
.lp-device-size-icon {
109+
color: #a0a0a0;
110+
display: flex;
111+
align-items: center;
112+
padding-left: 7.5px;
113+
margin-right: 7.5px;
114+
}
115+
116+
#deviceSizeBtn.btn-dropdown::after {
117+
position: static;
118+
margin-top: 2px;
119+
margin-left: 3px;
120+
}
121+
122+
.device-size-item-icon {
123+
margin-right: 6px;
124+
width: 12px;
125+
text-align: center;
126+
font-size: inherit;
127+
}
128+
129+
.device-size-item-width {
130+
margin-left: 10px;
131+
opacity: 0.5;
132+
}
133+
134+
.device-size-item-disabled {
135+
opacity: 0.35;
136+
}
137+
108138
#livePreviewModeBtn {
109139
min-width: fit-content;
110140
display: flex;

‎src/view/WorkspaceManager.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -424,6 +424,33 @@ define(function (require, exports, module) {
424424
return false;
425425
}
426426

427+
/**
428+
* Programmatically sets the plugin panel content width to the given value in pixels.
429+
* The total toolbar width is adjusted to account for the plugin icons bar.
430+
* Width is clamped to respect panel minWidth and max size (75% of window).
431+
* No-op if no panel is currently visible.
432+
* @param {number} width Desired content width in pixels
433+
*/
434+
function setPluginPanelWidth(width) {
435+
if (!currentlyShownPanel) {
436+
return;
437+
}
438+
var pluginIconsBarWidth = $pluginIconsBar.outerWidth();
439+
var newToolbarWidth = width + pluginIconsBarWidth;
440+
441+
// Respect min/max constraints
442+
var minSize = currentlyShownPanel.minWidth || 0;
443+
var minToolbarWidth = minSize + pluginIconsBarWidth;
444+
var maxToolbarWidth = window.innerWidth * 0.75;
445+
newToolbarWidth = Math.max(newToolbarWidth, minToolbarWidth);
446+
newToolbarWidth = Math.min(newToolbarWidth, maxToolbarWidth);
447+
448+
$mainToolbar.width(newToolbarWidth);
449+
$windowContent.css("right", newToolbarWidth);
450+
Resizer.resyncSizer($mainToolbar[0]);
451+
recomputeLayout(true);
452+
}
453+
427454
// Escape key and toggle panel special handling
428455
let _escapeKeyConsumers = {};
429456

@@ -540,6 +567,7 @@ define(function (require, exports, module) {
540567
exports.createBottomPanel = createBottomPanel;
541568
exports.createPluginPanel = createPluginPanel;
542569
exports.isPanelVisible = isPanelVisible;
570+
exports.setPluginPanelWidth = setPluginPanelWidth;
543571
exports.recomputeLayout = recomputeLayout;
544572
exports.getAllPanelIDs = getAllPanelIDs;
545573
exports.getPanelForID = getPanelForID;

‎test/spec/MainViewManager-integ-test.js‎

Lines changed: 101 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
*
2020
*/
2121

22-
/*global describe, beforeEach, beforeAll, afterAll, it, expect, awaitsForDone, spyOn, jasmine, awaitsFor */
22+
/*global describe, beforeEach, beforeAll, afterAll, afterEach, it, expect, awaitsForDone, spyOn, jasmine, awaitsFor */
2323

2424
define(function (require, exports, module) {
2525

@@ -1139,5 +1139,105 @@ define(function (require, exports, module) {
11391139
panel2.registerCanBeShownHandler(null);
11401140
});
11411141
});
1142+
1143+
describe("setPluginPanelWidth", function () {
1144+
let pluginPanel, $toolbarIcon;
1145+
const MIN_WIDTH = 200;
1146+
1147+
beforeAll(function () {
1148+
// Create a toolbar icon in #plugin-icons-bar
1149+
$toolbarIcon = _$('<a id="test-plugin-icon" href="#"></a>');
1150+
_$("#plugin-icons-bar").append($toolbarIcon);
1151+
1152+
let panelTemplate = '<div id="test-plugin-panel">Test Panel</div>';
1153+
pluginPanel = WorkspaceManager.createPluginPanel(
1154+
"test-setwidth-panel", _$(panelTemplate), MIN_WIDTH, $toolbarIcon
1155+
);
1156+
});
1157+
1158+
afterAll(function () {
1159+
if (pluginPanel) {
1160+
pluginPanel.hide();
1161+
}
1162+
$toolbarIcon.remove();
1163+
});
1164+
1165+
afterEach(function () {
1166+
pluginPanel.hide();
1167+
});
1168+
1169+
it("should be a no-op when no panel is visible", function () {
1170+
expect(pluginPanel.isVisible()).toBeFalse();
1171+
var toolbarWidthBefore = _$("#main-toolbar").width();
1172+
WorkspaceManager.setPluginPanelWidth(500);
1173+
var toolbarWidthAfter = _$("#main-toolbar").width();
1174+
expect(toolbarWidthAfter).toEqual(toolbarWidthBefore);
1175+
});
1176+
1177+
it("should resize the panel to the specified width", function () {
1178+
pluginPanel.show();
1179+
expect(pluginPanel.isVisible()).toBeTrue();
1180+
1181+
WorkspaceManager.setPluginPanelWidth(500);
1182+
1183+
var $mainToolbar = _$("#main-toolbar");
1184+
var $pluginIconsBar = _$("#plugin-icons-bar");
1185+
var panelContentWidth = $mainToolbar.width() - $pluginIconsBar.outerWidth();
1186+
expect(panelContentWidth).toEqual(500);
1187+
});
1188+
1189+
it("should clamp width to panel minWidth", function () {
1190+
pluginPanel.show();
1191+
1192+
// Request a width smaller than minWidth
1193+
WorkspaceManager.setPluginPanelWidth(50);
1194+
1195+
var $mainToolbar = _$("#main-toolbar");
1196+
var $pluginIconsBar = _$("#plugin-icons-bar");
1197+
var panelContentWidth = $mainToolbar.width() - $pluginIconsBar.outerWidth();
1198+
expect(panelContentWidth).toBeGreaterThanOrEqual(MIN_WIDTH);
1199+
});
1200+
1201+
it("should clamp width to max size (75% of window)", function () {
1202+
pluginPanel.show();
1203+
1204+
var maxContentWidth = (testWindow.innerWidth * 0.75) -
1205+
_$("#plugin-icons-bar").outerWidth();
1206+
1207+
// Request a width larger than max
1208+
WorkspaceManager.setPluginPanelWidth(testWindow.innerWidth);
1209+
1210+
var $mainToolbar = _$("#main-toolbar");
1211+
var $pluginIconsBar = _$("#plugin-icons-bar");
1212+
var panelContentWidth = $mainToolbar.width() - $pluginIconsBar.outerWidth();
1213+
expect(panelContentWidth).toBeLessThanOrEqual(maxContentWidth + 1);
1214+
});
1215+
1216+
it("should update $windowContent right offset to match toolbar width", function () {
1217+
pluginPanel.show();
1218+
1219+
WorkspaceManager.setPluginPanelWidth(600);
1220+
1221+
var $mainToolbar = _$("#main-toolbar");
1222+
var $windowContent = _$(".content");
1223+
var toolbarWidth = $mainToolbar.width();
1224+
var rightOffset = parseInt($windowContent.css("right"), 10);
1225+
expect(rightOffset).toEqual(toolbarWidth);
1226+
});
1227+
1228+
it("should handle multiple successive resizes", function () {
1229+
pluginPanel.show();
1230+
1231+
var widths = [300, 500, 400, 700];
1232+
var $mainToolbar = _$("#main-toolbar");
1233+
var $pluginIconsBar = _$("#plugin-icons-bar");
1234+
1235+
widths.forEach(function (targetWidth) {
1236+
WorkspaceManager.setPluginPanelWidth(targetWidth);
1237+
var panelContentWidth = $mainToolbar.width() - $pluginIconsBar.outerWidth();
1238+
expect(panelContentWidth).toEqual(targetWidth);
1239+
});
1240+
});
1241+
});
11421242
});
11431243
});

0 commit comments

Comments
 (0)