Skip to content

feat: replace bottom panel + button with Tools label and icon #2790

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
abose merged 1 commit into from
Apr 5, 2026
+19 −18
Merged

feat: replace bottom panel + button with Tools label and icon #2790

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/styles/Extn-BottomPanelTabs.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,12 +200,15 @@
display: flex;
align-items: center;
justify-content: center;
width: 1.9rem;
padding: 0 8px;
height: 2rem;
line-height: 2rem;
overflow: hidden;
cursor: pointer;
color: #888;
font-size: 0.82rem;
flex: 0 0 auto;
white-space: nowrap;
transition: color 0.12s ease, background-color 0.12s ease;

.dark & {
Expand Down
13 changes: 4 additions & 9 deletions src/view/DefaultPanelView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,7 @@ define(function (require, exports, module) {
CommandManager = require("command/CommandManager"),
Strings = require("strings"),
WorkspaceManager = require("view/WorkspaceManager"),
PanelView = require("view/PanelView"),
ExtensionUtils = require("utils/ExtensionUtils");
PanelView = require("view/PanelView");

/**
* Descriptors for each launcher button.
Expand Down Expand Up @@ -178,7 +177,8 @@ define(function (require, exports, module) {
}
});

const iconURL = ExtensionUtils.getModulePath(module, "../styles/images/app-drawer.svg");
const iconHTML = '<img class="app-drawer-tab-icon" src="styles/images/app-drawer.svg"'
+ ' style="width:12px;height:12px;vertical-align:middle;margin-right:4px">';

/**
* Inject the app-drawer icon into the Quick Access tab title.
Expand All @@ -188,12 +188,7 @@ define(function (require, exports, module) {
const $tabTitle = $('#bottom-panel-tab-bar .bottom-panel-tab[data-panel-id="'
+ WorkspaceManager.DEFAULT_PANEL_ID + '"] .bottom-panel-tab-title');
if ($tabTitle.length && !$tabTitle.find(".app-drawer-tab-icon").length) {
$tabTitle.prepend($('<img class="app-drawer-tab-icon">').attr("src", iconURL).css({
"width": "12px",
"height": "12px",
"vertical-align": "middle",
"margin-right": "4px"
}));
$tabTitle.prepend(iconHTML);
}
}

Expand Down
9 changes: 6 additions & 3 deletions src/view/PanelView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -512,9 +512,12 @@ define(function (require, exports, module) {
_recomputeLayout = recomputeLayoutFn;
_defaultPanelId = defaultPanelId;

// Create the "+" button inside the tabs overflow area (after all tabs)
_$addBtn = $('<span class="bottom-panel-add-btn"><i class="fa-solid fa-plus"></i></span>')
.attr('title', Strings.BOTTOM_PANEL_OPEN_PANEL);
// Create the "Tools" button inside the tabs overflow area (after all tabs)
// This opens the default/quick-access panel when clicked.
_$addBtn = $('<span class="bottom-panel-add-btn" title="' + Strings.BOTTOM_PANEL_DEFAULT_TITLE + '">'
+ '<img class="app-drawer-tab-icon" src="styles/images/app-drawer.svg"'
+ ' style="width:12px;height:12px;vertical-align:middle;margin-right:4px">'
+ Strings.BOTTOM_PANEL_DEFAULT_TITLE + '</span>');
_$tabsOverflow.append(_$addBtn);

// Tab bar click handlers
Expand Down
10 changes: 5 additions & 5 deletions src/view/WorkspaceManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -389,7 +389,7 @@ define(function (require, exports, module) {
$editorHolder, recomputeLayout, DEFAULT_PANEL_ID);

// Create status bar chevron toggle for bottom panel
$statusBarPanelToggle = $('<div id="status-panel-toggle" class="indicator global-indicator"><i class="fa-solid fa-chevron-up"></i></div>')
$statusBarPanelToggle = $('<div id="status-panel-toggle" class="indicator global-indicator"><i class="fa-solid fa-angles-up"></i></div>')
.attr('title', Strings.BOTTOM_PANEL_SHOW);
$("#status-indicators").prepend($statusBarPanelToggle);

Expand Down Expand Up @@ -419,8 +419,8 @@ define(function (require, exports, module) {

$bottomPanelContainer.on("panelCollapsed", function () {
$statusBarPanelToggle.find("i")
.removeClass("fa-chevron-down")
.addClass("fa-chevron-up");
.removeClass("fa-angles-down")
.addClass("fa-angles-up");
$statusBarPanelToggle.attr("title", Strings.BOTTOM_PANEL_SHOW);
if (!_statusBarToggleInProgress) {
AnimationUtils.animateUsingClass($statusBarPanelToggle[0], "flash", 800);
Expand All @@ -436,8 +436,8 @@ define(function (require, exports, module) {

$bottomPanelContainer.on("panelExpanded", function () {
$statusBarPanelToggle.find("i")
.removeClass("fa-chevron-up")
.addClass("fa-chevron-down");
.removeClass("fa-angles-up")
.addClass("fa-angles-down");
$statusBarPanelToggle.attr("title", Strings.BOTTOM_PANEL_HIDE_TOGGLE);
if (!_statusBarToggleInProgress) {
AnimationUtils.animateUsingClass($statusBarPanelToggle[0], "flash", 800);
Expand Down
Loading