Skip to content

Commit 53a7533

Browse files
committed
feat: open quick access panel when on other panel is opened
1 parent 1dc06c3 commit 53a7533

5 files changed

Lines changed: 273 additions & 42 deletions

File tree

src/brackets.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,7 @@ define(function (require, exports, module) {
135135
require("utils/NodeUtils");
136136
require("utils/ColorUtils");
137137
require("view/ThemeManager");
138+
require("view/DefaultPanelView");
138139
require("thirdparty/lodash");
139140
require("language/XMLUtils");
140141
require("language/JSONUtils");

src/nls/root/strings.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1254,6 +1254,9 @@ define({
12541254
"BOTTOM_PANEL_HIDE": "Hide Panel",
12551255
"BOTTOM_PANEL_SHOW": "Show Bottom Panel",
12561256
"BOTTOM_PANEL_HIDE_TOGGLE": "Hide Bottom Panel",
1257+
"BOTTOM_PANEL_DEFAULT_TITLE": "Quick Access",
1258+
"BOTTOM_PANEL_DEFAULT_HEADING": "Open a Panel",
1259+
"BOTTOM_PANEL_DEFAULT_READ_MORE": "Read More",
12571260

12581261
"CMD_FIND_DOCUMENT_SYMBOLS": "Find Document Symbols",
12591262
"CMD_FIND_PROJECT_SYMBOLS": "Find Project Symbols",

src/styles/Extn-BottomPanelTabs.less

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -232,3 +232,97 @@
232232
}
233233
}
234234
}
235+
236+
.default-panel-content {
237+
display: flex;
238+
flex-direction: column;
239+
align-items: center;
240+
justify-content: center;
241+
height: 100%;
242+
padding: 16px;
243+
gap: 12px;
244+
user-select: none;
245+
}
246+
247+
.default-panel-heading {
248+
font-size: 13px;
249+
font-weight: 600;
250+
color: #555;
251+
margin-bottom: 4px;
252+
253+
.dark & {
254+
color: #bbb;
255+
}
256+
}
257+
258+
.default-panel-buttons {
259+
display: flex;
260+
flex-wrap: wrap;
261+
justify-content: center;
262+
gap: 8px;
263+
}
264+
265+
.default-panel-btn {
266+
display: flex;
267+
flex-direction: column;
268+
align-items: center;
269+
justify-content: center;
270+
gap: 6px;
271+
width: 120px;
272+
height: 72px;
273+
border: 1px solid rgba(0, 0, 0, 0.12);
274+
border-radius: 6px;
275+
background: rgba(0, 0, 0, 0.03);
276+
color: #444;
277+
cursor: pointer;
278+
transition: background-color 0.15s, border-color 0.15s;
279+
280+
i {
281+
font-size: 20px;
282+
}
283+
284+
.default-panel-btn-label {
285+
font-size: 11px;
286+
text-align: center;
287+
line-height: 1.2;
288+
max-width: 110px;
289+
overflow: hidden;
290+
text-overflow: ellipsis;
291+
white-space: nowrap;
292+
}
293+
294+
&:hover {
295+
background: rgba(0, 0, 0, 0.07);
296+
border-color: rgba(0, 0, 0, 0.25);
297+
}
298+
299+
&:active {
300+
background: rgba(0, 0, 0, 0.12);
301+
}
302+
303+
.dark & {
304+
border-color: rgba(255, 255, 255, 0.15);
305+
background: rgba(255, 255, 255, 0.05);
306+
color: #ccc;
307+
308+
&:hover {
309+
background: rgba(255, 255, 255, 0.1);
310+
border-color: rgba(255, 255, 255, 0.3);
311+
}
312+
313+
&:active {
314+
background: rgba(255, 255, 255, 0.15);
315+
}
316+
}
317+
}
318+
319+
.default-panel-read-more {
320+
font-size: 12px;
321+
color: @bc-text-link;
322+
text-decoration: none;
323+
margin-top: 4px;
324+
325+
&:hover {
326+
text-decoration: underline;
327+
}
328+
}

src/view/DefaultPanelView.js

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
/*
2+
* GNU AGPL-3.0 License
3+
*
4+
* Copyright (c) 2021 - present core.ai . All rights reserved.
5+
*
6+
* This program is free software: you can redistribute it and/or modify it under
7+
* the terms of the GNU Affero General Public License as published by the Free
8+
* Software Foundation, either version 3 of the License, or (at your option) any later version.
9+
*
10+
* This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
11+
* without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
12+
* See the GNU Affero General Public License for more details.
13+
*
14+
* You should have received a copy of the GNU Affero General Public License along
15+
* with this program. If not, see https://opensource.org/licenses/AGPL-3.0.
16+
*
17+
*/
18+
19+
/**
20+
* DefaultPanelView - A launcher panel shown in the bottom panel area when no
21+
* other panels are open. Provides quick-access buttons for common panels
22+
* (Problems, Find in Files, Git, Custom Snippets, Keyboard Shortcuts) and a
23+
* link to the documentation.
24+
*
25+
* @module view/DefaultPanelView
26+
*/
27+
define(function (require, exports, module) {
28+
29+
const AppInit = require("utils/AppInit"),
30+
Commands = require("command/Commands"),
31+
CommandManager = require("command/CommandManager"),
32+
Strings = require("strings"),
33+
WorkspaceManager = require("view/WorkspaceManager"),
34+
PanelView = require("view/PanelView");
35+
36+
const DOCS_URL = "https://docs.phcode.dev";
37+
38+
/**
39+
* Descriptors for each launcher button.
40+
* `commandID` may be undefined if the command is registered later (e.g. Git).
41+
*/
42+
const _panelButtons = [
43+
{
44+
id: "problems",
45+
icon: "fa-solid fa-triangle-exclamation",
46+
label: Strings.CMD_VIEW_TOGGLE_PROBLEMS || "Problems",
47+
commandID: Commands.VIEW_TOGGLE_PROBLEMS
48+
},
49+
{
50+
id: "search",
51+
icon: "fa-solid fa-magnifying-glass",
52+
label: Strings.CMD_FIND_IN_FILES || "Find in Files",
53+
commandID: Commands.CMD_FIND_IN_FILES
54+
},
55+
{
56+
id: "git",
57+
icon: "fa-solid fa-code-branch",
58+
label: Strings.GIT_PANEL_TITLE || "Git",
59+
commandID: Commands.CMD_GIT_TOGGLE_PANEL
60+
},
61+
{
62+
id: "snippets",
63+
icon: "fa-solid fa-code",
64+
label: Strings.CUSTOM_SNIPPETS_PANEL_TITLE || "Custom Snippets",
65+
commandID: "custom_snippets"
66+
},
67+
{
68+
id: "shortcuts",
69+
icon: "fa-solid fa-keyboard",
70+
label: Strings.KEYBOARD_SHORTCUT_PANEL_TITLE || "Keyboard Shortcuts",
71+
commandID: Commands.HELP_TOGGLE_SHORTCUTS_PANEL
72+
}
73+
];
74+
75+
/** @type {Panel} The default panel instance */
76+
let _panel;
77+
78+
/**
79+
* Build the panel DOM.
80+
* @return {jQueryObject}
81+
* @private
82+
*/
83+
function _buildPanelHTML() {
84+
let $panel = $('<div id="default-panel" class="bottom-panel"></div>');
85+
let $content = $('<div class="default-panel-content"></div>');
86+
let $heading = $('<div class="default-panel-heading"></div>')
87+
.text(Strings.BOTTOM_PANEL_DEFAULT_HEADING);
88+
$content.append($heading);
89+
90+
let $buttonsRow = $('<div class="default-panel-buttons"></div>');
91+
92+
_panelButtons.forEach(function (btn) {
93+
let $button = $('<button class="default-panel-btn"></button>')
94+
.attr("data-command", btn.commandID)
95+
.attr("title", btn.label);
96+
let $icon = $('<i></i>').addClass(btn.icon);
97+
let $label = $('<span class="default-panel-btn-label"></span>').text(btn.label);
98+
$button.append($icon).append($label);
99+
$buttonsRow.append($button);
100+
});
101+
102+
$content.append($buttonsRow);
103+
104+
let $readMore = $('<a class="default-panel-read-more" target="_blank"></a>')
105+
.attr("href", DOCS_URL)
106+
.text(Strings.BOTTOM_PANEL_DEFAULT_READ_MORE + " \u2192");
107+
$content.append($readMore);
108+
109+
$panel.append($content);
110+
return $panel;
111+
}
112+
113+
/**
114+
* Initialise the default panel. Called once at appReady.
115+
* @private
116+
*/
117+
function _init() {
118+
let $panel = _buildPanelHTML();
119+
_panel = WorkspaceManager.createBottomPanel(
120+
WorkspaceManager.DEFAULT_PANEL_ID,
121+
$panel,
122+
undefined,
123+
Strings.BOTTOM_PANEL_DEFAULT_TITLE
124+
);
125+
126+
// Button click handler: execute the command to open the target panel.
127+
// The auto-hide listener (EVENT_PANEL_SHOWN) will close the default panel.
128+
$panel.on("click", ".default-panel-btn", function () {
129+
let commandID = $(this).attr("data-command");
130+
if (commandID) {
131+
CommandManager.execute(commandID);
132+
}
133+
});
134+
135+
// Auto-hide when any other panel is shown.
136+
// hide() is a no-op if the panel is already closed, so no guard needed.
137+
PanelView.on(PanelView.EVENT_PANEL_SHOWN, function (event, panelID) {
138+
if (panelID !== WorkspaceManager.DEFAULT_PANEL_ID) {
139+
_panel.hide();
140+
}
141+
});
142+
}
143+
144+
AppInit.appReady(_init);
145+
});

0 commit comments

Comments
 (0)