diff --git a/src/extensions/default/Git/src/Panel.js b/src/extensions/default/Git/src/Panel.js index d86d19692b..d39f7ffae4 100644 --- a/src/extensions/default/Git/src/Panel.js +++ b/src/extensions/default/Git/src/Panel.js @@ -1528,14 +1528,14 @@ define(function (require, exports) { } }); - // When any bottom panel is shown (container is visible), - // re-select the git icon if git panel is still open. WorkspaceManager.on(WorkspaceManager.EVENT_WORKSPACE_PANEL_SHOWN, function (event, panelID) { - if (Main.$icon && Preferences.get("panelEnabled")) { - Main.$icon.toggleClass("on", true); - Main.$icon.toggleClass("selected-button", true); - CommandManager.get(Constants.CMD_GIT_TOGGLE_PANEL).setChecked(true); + if (!Main.$icon) { + return; } + const isGitActive = (panelID === "main-git.panel"); + Main.$icon.toggleClass("on", isGitActive); + Main.$icon.toggleClass("selected-button", isGitActive); + CommandManager.get(Constants.CMD_GIT_TOGGLE_PANEL).setChecked(isGitActive); }); exports.init = init; diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css index 5b24056f2a..f2228a9c31 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css +++ b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css @@ -375,14 +375,49 @@ color: rgba(100, 180, 255, 0.8); } -.lp-mode-btn-group { +.lp-toolbar-left { + width: 20%; display: flex; align-items: center; + gap: 6px; + padding-left: 6px; + box-sizing: border-box; flex-shrink: 0; - margin: 0 4px 0 3px; +} + +#reloadLivePreviewButton, +#designModeToggleLivePreviewButton { + width: 28px; + height: 24px; + margin: 0; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + background: transparent; + color: #a0a0a0; + border: 1px solid transparent; + border-radius: 3px; + box-sizing: border-box; + flex-shrink: 0; +} + +#live-preview-plugin-toolbar #reloadLivePreviewButton:hover, +#live-preview-plugin-toolbar #designModeToggleLivePreviewButton:hover { + border-color: rgba(255, 255, 255, 0.1) !important; + background: transparent !important; + box-shadow: none !important; +} + +.lp-mode-btn-group { + display: flex; + align-items: stretch; + height: 24px; + margin: 0; border: 1px solid transparent; border-radius: 3px; box-sizing: border-box; + flex-shrink: 0; } .lp-mode-btn-group:hover { @@ -393,8 +428,8 @@ display: flex; align-items: center; justify-content: center; - width: 22px; - height: 22px; + width: 24px; + height: 100%; cursor: pointer; background: transparent; box-shadow: none !important; @@ -420,16 +455,17 @@ display: flex; align-items: center; justify-content: center; + width: 14px; + height: 100%; cursor: pointer; background: transparent; box-shadow: none !important; border: none; border-left: 1px solid transparent; - border-radius: 0 3px 3px 0; + border-radius: 0; color: #a0a0a0; - padding: 0 4px; + padding: 0; margin: 0; - height: 22px; font-size: 10px; } @@ -446,24 +482,6 @@ box-shadow: none !important; } -#reloadLivePreviewButton { - color: #a0a0a0; - margin-left: 3px; - margin-top: 0; - width: 30px; - height: 22px; - flex-shrink: 0; -} - -#designModeToggleLivePreviewButton { - color: #a0a0a0; - margin-left: 3px; - margin-top: 0; - width: 30px; - height: 22px; - flex-shrink: 0; -} - .live-preview-status-overlay { display: flex; flex-direction: row; diff --git a/src/extensionsIntegrated/Phoenix-live-preview/panel.html b/src/extensionsIntegrated/Phoenix-live-preview/panel.html index f6c33b3e34..d521be14e9 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/panel.html +++ b/src/extensionsIntegrated/Phoenix-live-preview/panel.html @@ -1,6 +1,6 @@
-
+
diff --git a/src/extensionsIntegrated/Terminal/main.js b/src/extensionsIntegrated/Terminal/main.js index f020033aee..eaca77eb33 100644 --- a/src/extensionsIntegrated/Terminal/main.js +++ b/src/extensionsIntegrated/Terminal/main.js @@ -879,6 +879,34 @@ define(function (require, exports, module) { CommandManager.get(CMD_TERMINAL_CLEAR).setEnabled(!!active); }); + function _createToolbarButton() { + const $btn = $("") + .attr({ + id: "terminal-toolbar-button", + href: "#", + title: Strings.CMD_VIEW_TERMINAL + }) + .insertBefore("#app-drawer-button"); + + $btn.on("click", function () { + if (panel && panel.isVisible()) { + panel.hide(); + } else { + CommandManager.execute(CMD_VIEW_TERMINAL); + } + }); + + const PanelView = require("view/PanelView"); + PanelView.on(PanelView.EVENT_PANEL_SHOWN, function (_event, panelId) { + $btn.toggleClass("selected-button", panelId === PANEL_ID); + }); + PanelView.on(PanelView.EVENT_PANEL_HIDDEN, function (_event, panelId) { + if (panelId === PANEL_ID || panelId === WorkspaceManager.DEFAULT_PANEL_ID) { + $btn.removeClass("selected-button"); + } + }); + } + // Initialize on app ready AppInit.appReady(function () { if (Phoenix.isSpecRunnerWindow) { @@ -887,6 +915,7 @@ define(function (require, exports, module) { _initNodeConnector(); _createPanel(); + _createToolbarButton(); // Gate user-initiated panel close (X button): confirm if needed, then // dispose all terminals. Programmatic hide() just collapses the panel diff --git a/src/styles/Extn-SidebarTabs.less b/src/styles/Extn-SidebarTabs.less index 634a59bccf..29a5e4b9e3 100644 --- a/src/styles/Extn-SidebarTabs.less +++ b/src/styles/Extn-SidebarTabs.less @@ -69,10 +69,6 @@ &.active { color: @project-panel-text-1; background-color: rgba(255, 255, 255, 0.09); - // Heavier weight on the active tab so the selected state - // doesn't rely on color alone — strengthens the affordance - // without changing the silhouette. - font-weight: 600; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 1px 2px rgba(0, 0, 0, 0.2); diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 78891cc4c8..14c5192767 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -1200,6 +1200,12 @@ a, img { background-size: 16px; } +#terminal-toolbar-button { + background-image: url("images/toolbar-terminal.svg"); + background-position: center; + background-size: 16px; +} + /* Project panel */ #working-set-list-container { diff --git a/src/styles/images/toolbar-terminal.svg b/src/styles/images/toolbar-terminal.svg new file mode 100644 index 0000000000..bb6b14c378 --- /dev/null +++ b/src/styles/images/toolbar-terminal.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js index 691d014102..fb22bce770 100644 --- a/src/utils/Resizer.js +++ b/src/utils/Resizer.js @@ -570,7 +570,14 @@ define(function (require, exports, module) { if (_isPercentage(maxSize)) { maxSize = _percentageToPixels(maxSize, _sideBarMaxSize()); } - newSize = Math.min(newSize, maxSize); + // Ignore a non-positive computed cap: it can only come from a + // pathological layout (e.g. design mode + hidden sidebar makes + // _sideBarMaxSize negative, so 1000% becomes a negative px cap + // and pins every drag below zero). CSS max-width still enforces + // the real visible limit in that mode. + if (maxSize > 0) { + newSize = Math.min(newSize, maxSize); + } } e.preventDefault();