Skip to content

Commit 8ea0ca0

Browse files
committed
feat(terminal): show shift+escape focus hint toast on first terminal open
- Add one-time toast notification showing Shift+Esc shortcut hint - Internationalize toast text via TERMINAL_FOCUS_HINT string - Add theme-aware toast styles for light and dark themes
1 parent 99f1532 commit 8ea0ca0

3 files changed

Lines changed: 78 additions & 0 deletions

File tree

src/extensionsIntegrated/Terminal/main.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ define(function (require, exports, module) {
8181
let activeTerminalId = null; // Currently visible terminal
8282
let processInfo = {}; // id -> processName from PTY
8383
let originalDefaultShellName = null; // System-detected default shell name
84+
let _focusToastShown = false; // Show focus hint toast only once per session
8485
let $panel, $contentArea, $shellDropdown, $flyoutList;
8586

8687
/**
@@ -145,6 +146,7 @@ define(function (require, exports, module) {
145146
active.handleResize();
146147
active.focus();
147148
}
149+
_showFocusHintToast();
148150
}
149151
});
150152

@@ -533,6 +535,35 @@ define(function (require, exports, module) {
533535
}
534536
}
535537

538+
/**
539+
* Show a one-time toast hint about Shift+Escape to switch focus
540+
*/
541+
function _showFocusHintToast() {
542+
if (_focusToastShown) {
543+
return;
544+
}
545+
_focusToastShown = true;
546+
547+
const shortcutKey = '<kbd>Shift+Esc</kbd>';
548+
const message = StringUtils.format(Strings.TERMINAL_FOCUS_HINT, shortcutKey);
549+
const $toast = $('<div class="terminal-focus-toast"></div>')
550+
.html('<span class="terminal-toast-text">' + message + '</span>');
551+
$contentArea.append($toast);
552+
553+
// Fade in
554+
setTimeout(function () {
555+
$toast.addClass("visible");
556+
}, 100);
557+
558+
// Auto-dismiss after 5 seconds
559+
setTimeout(function () {
560+
$toast.removeClass("visible");
561+
setTimeout(function () {
562+
$toast.remove();
563+
}, 300);
564+
}, 5000);
565+
}
566+
536567
/**
537568
* Escape HTML special characters
538569
*/

src/nls/root/strings.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1488,6 +1488,7 @@ define({
14881488
"ERROR_TERMINAL_NOT_FOUND": "Terminal was not found for your OS, you can define a custom Terminal command in the settings",
14891489
"TERMINAL_CLOSE_CONFIRM_TITLE": "Active Process Running",
14901490
"TERMINAL_CLOSE_CONFIRM_MSG": "Terminal has an active process running: <b>{0}</b>.<br>Are you sure you want to close it?",
1491+
"TERMINAL_FOCUS_HINT": "Press {0} to switch between editor and terminal",
14911492
"EXTENDED_COMMIT_MESSAGE": "EXTENDED",
14921493
"GETTING_STAGED_DIFF_PROGRESS": "Getting diff of staged files\u2026",
14931494
"GIT_COMMIT": "Git commit\u2026",

src/styles/Extn-Terminal.less

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -399,3 +399,49 @@
399399
color: var(--terminal-tab-text);
400400
font-size: 13px;
401401
}
402+
403+
/* Focus hint toast */
404+
.terminal-focus-toast {
405+
position: absolute;
406+
bottom: 12px;
407+
left: 50%;
408+
transform: translateX(-50%);
409+
padding: 6px 14px;
410+
border-radius: 6px;
411+
font-size: 12px;
412+
line-height: 1.4;
413+
opacity: 0;
414+
transition: opacity 0.3s ease;
415+
pointer-events: none;
416+
z-index: 10;
417+
background: rgba(0, 0, 0, 0.75);
418+
color: #e0e0e0;
419+
}
420+
421+
.terminal-focus-toast.visible {
422+
opacity: 1;
423+
}
424+
425+
.terminal-focus-toast kbd {
426+
display: inline-block;
427+
padding: 1px 5px;
428+
margin: 0 2px;
429+
border-radius: 3px;
430+
font-family: inherit;
431+
font-size: 11px;
432+
background: rgba(255, 255, 255, 0.15);
433+
border: 1px solid rgba(255, 255, 255, 0.2);
434+
color: #fff;
435+
}
436+
437+
/* Light theme toast */
438+
.terminal-panel-container .terminal-focus-toast {
439+
background: rgba(0, 0, 0, 0.7);
440+
color: #f0f0f0;
441+
}
442+
443+
.terminal-panel-container .terminal-focus-toast kbd {
444+
background: rgba(255, 255, 255, 0.2);
445+
border-color: rgba(255, 255, 255, 0.25);
446+
color: #fff;
447+
}

0 commit comments

Comments
 (0)