Skip to content
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

Jump to bottom

voice - more tweaks to icon animation #195681

Merged
merged 2 commits into from
Oct 16, 2023
Merged

voice - more tweaks to icon animation #195681

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
422e13c
voice - more tweaks to icon animation
bpasero Oct 16, 2023
ed86f14
more tweaks
bpasero Oct 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 4 additions & 2 deletions build/lib/stylelint/vscode-known-variables.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -706,7 +706,9 @@
"--vscode-widget-border",
"--vscode-widget-shadow",
"--vscode-window-activeBorder",
"--vscode-window-inactiveBorder"
"--vscode-window-inactiveBorder",
"--vscode-voiceRecording-background",
"--vscode-voiceRecording-dimmedBackground"
],
"others": [
"--background-dark",
Expand Down Expand Up @@ -780,4 +782,4 @@
"--z-index-notebook-sticky-scroll",
"--zoom-factor"
]
}
}
88 changes: 31 additions & 57 deletions src/vs/workbench/contrib/chat/electron-sandbox/actions/media/voiceChatActions.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,79 +4,53 @@
*--------------------------------------------------------------------------------------------*/

/*
* Stop the running animation, we only use it as a hint to apply CSS rules.
* Show a "microphone" icon when recording is in progress that glows via outline.
*/
.monaco-workbench .interactive-input-part .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled),
.monaco-workbench .inline-chat .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled) {
animation: none;
}

/*
* Clear styles and replace icon to "stop" when hovering over it.
*/
.monaco-workbench .interactive-input-part .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled):hover::before,
.monaco-workbench .inline-chat .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled):hover::before {
content: "\ead7"; /* use `debug-stop` icon unicode for hovering over running voice recording */
background-color: inherit;
border-radius: 0;
color: inherit;
outline: none;
color: var(--vscode-voiceRecording-background);
outline: 1px solid var(--vscode-voiceRecording-background);
outline-offset: -1px;
animation: pulseAnimation 1s infinite;
border-radius: 50%;
}

/*
* Remove ::after element to improve "stop" visuals when hovering over it.
*/
.monaco-workbench .interactive-input-part .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled):hover::after,
.monaco-workbench .inline-chat .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled):hover::after {
display: none;
@keyframes pulseAnimation {
0% {
outline-width: 1px;
}
50% {
outline-width: 3px;
outline-color: var(--vscode-voiceRecording-dimmedBackground);
}
100% {
outline-width: 1px;
}
}

/*
* Show a "microphone" icon when recording is in progress that:
* - uses z-index:1 and applies a background color to draw over the glowing animation (below)
* - emphasizes activity by drawing with badge colors
* Replace with "microphone" icon.
*/
.monaco-workbench .interactive-input-part .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled)::before,
.monaco-workbench .inline-chat .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled)::before {
content: "\ec12";
z-index: 1;
border-radius: 50%;
background-color: var(--vscode-input-background);
color: var(--vscode-activityBarBadge-background);
outline: 1px solid var(--vscode-activityBarBadge-background);
}

/*
* Draw an ::after element for the glowing effect over the "microphone" icon that:
* - uses badge colors to emphasize activity
* - uses a "pulseAnimation" to indicate activity
* Clear animation styles when hovering.
*/
.monaco-workbench .interactive-input-part .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled)::after,
.monaco-workbench .inline-chat .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled)::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
background-color: var(--vscode-activityBarBadge-background);
border-radius: 50%;
animation: pulseAnimation 1s infinite;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
.monaco-workbench .interactive-input-part .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled):hover,
.monaco-workbench .inline-chat .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled):hover {
color: inherit;
outline: none;
animation: none;
border-radius: 5px;
}

@keyframes pulseAnimation {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
50% {
transform: translate(-50%, -50%) scale(1.3);
opacity: 0.5;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
/*
* Replace with "stop" icon when hovering.
*/
.monaco-workbench .interactive-input-part .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled):hover::before,
.monaco-workbench .inline-chat .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled):hover::before {
content: "\ead7"; /* use `debug-stop` icon unicode for hovering over running voice recording */
}
16 changes: 16 additions & 0 deletions src/vs/workbench/contrib/chat/electron-sandbox/actions/voiceChatActions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ import { isExecuteActionContext } from 'vs/workbench/contrib/chat/browser/action
import { IWorkbenchLayoutService, Parts } from 'vs/workbench/services/layout/browser/layoutService';
import { ISpeechService, SpeechToTextStatus } from 'vs/workbench/contrib/speech/common/speechService';
import { RunOnceScheduler } from 'vs/base/common/async';
import { registerColor, transparent } from 'vs/platform/theme/common/colorRegistry';
import { ACTIVITY_BAR_BADGE_BACKGROUND } from 'vs/workbench/common/theme';

const CONTEXT_VOICE_CHAT_GETTING_READY = new RawContextKey<boolean>('voiceChatGettingReady', false, { type: 'boolean', description: localize('voiceChatGettingReady', "True when getting ready for receiving voice input from the microphone for voice chat.") });
const CONTEXT_VOICE_CHAT_IN_PROGRESS = new RawContextKey<boolean>('voiceChatInProgress', false, { type: 'boolean', description: localize('voiceChatInProgress', "True when voice recording from microphone is in progress for voice chat.") });
Expand All @@ -59,6 +61,20 @@ interface IVoiceChatSessionController {
clearInputPlaceholder(): void;
}

export const VOICE_RECORDING_BACKGROUND = registerColor('voiceRecording.background', {
dark: ACTIVITY_BAR_BADGE_BACKGROUND,
light: ACTIVITY_BAR_BADGE_BACKGROUND,
hcDark: ACTIVITY_BAR_BADGE_BACKGROUND,
hcLight: ACTIVITY_BAR_BADGE_BACKGROUND
}, localize('voiceRecording.background', "Background color for voice recording icon when recording."));

export const VOICE_RECORDING_BACKGROUND_DIMMED = registerColor('voiceRecording.dimmedBackground', {
dark: transparent(ACTIVITY_BAR_BADGE_BACKGROUND, 0.4),
light: transparent(ACTIVITY_BAR_BADGE_BACKGROUND, 0.4),
hcDark: ACTIVITY_BAR_BADGE_BACKGROUND,
hcLight: ACTIVITY_BAR_BADGE_BACKGROUND
}, localize('voiceRecording.dimmedBackground', "Dimmed background color for voice recording icon when recording."));

class VoiceChatSessionControllerFactory {

static create(accessor: ServicesAccessor, context: 'inline'): Promise<IVoiceChatSessionController | undefined>;
Expand Down