Skip to content

Commit 8b83461

Browse files
siddharthkpSaraVieira
siddharthkp
and
SaraVieira
authored
Sidebar enhacements (codesandbox#3571)
* adjust colors if list.hover is the same as sidebar.back * ensure enough contrast for active activity bar selectin * fix bug oops + reduce big icon contrast required * fix experiemnts Co-authored-by: Sara Vieira <hey@iamsaravieira.com>
1 parent b1dc80a commit 8b83461

File tree

5 files changed

+89
-69
lines changed

5 files changed

+89
-69
lines changed

‎packages/app/src/app/overmind/namespaces/preferences/actions.ts

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -131,30 +131,3 @@ export const zenModeToggled: Action = ({ state }) => {
131131
export const codeMirrorForced: Action = ({ state }) => {
132132
state.preferences.settings.codeMirror = true;
133133
};
134-
135-
export const toggleContainerLspExperiment: AsyncAction = async ({
136-
state,
137-
effects,
138-
}) => {
139-
if (!state.user) {
140-
return;
141-
}
142-
try {
143-
await effects.api.updateExperiments({
144-
container_lsp: !state.user.experiments.containerLsp,
145-
});
146-
state.user.experiments.containerLsp = !state.user.experiments.containerLsp;
147-
// Allow the flush to go through and flip button
148-
requestAnimationFrame(() => {
149-
if (
150-
effects.browser.confirm(
151-
'We need to refresh for this to take effect, or you can refresh later'
152-
)
153-
) {
154-
effects.browser.reload();
155-
}
156-
});
157-
} catch (error) {
158-
effects.notificationToast.error('Unable to toggl LSP experiment');
159-
}
160-
};

‎packages/app/src/app/pages/Sandbox/Editor/Navigation/elements.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export const IconContainer = styled(Stack)<{
5151
5252
${props.selected &&
5353
css`
54-
color: ${props.theme.colors.activityBar.selected};
54+
color: ${props.theme.colors.activityBar.selectedForeground};
5555
`};
5656
5757
${props.isDisabled &&

‎packages/app/src/app/pages/common/Modals/PreferencesModal/Experiments/ContainerLSP.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React, { useState, useEffect } from 'react';
2+
import { useOvermind } from 'app/overmind';
3+
import { SubDescription, PaddedPreference } from '../elements';
4+
5+
export const ContainerLSP: React.FunctionComponent = () => {
6+
const { state } = useOvermind();
7+
const [containerLSP, setContainerLSP] = useState(false);
8+
useEffect(() => {
9+
const value = window.localStorage.getItem('CONTAINER_LSP');
10+
11+
if (value === 'true') {
12+
return setContainerLSP(true);
13+
}
14+
return setContainerLSP(false);
15+
}, []);
16+
17+
const setValue = (val: boolean) => {
18+
setContainerLSP(val);
19+
window.localStorage.setItem('CONTAINER_LSP', val.toString());
20+
location.reload();
21+
};
22+
23+
return state.user ? (
24+
<>
25+
<PaddedPreference
26+
title="Use container language server"
27+
type="boolean"
28+
value={containerLSP}
29+
setValue={val => setValue(val)}
30+
tooltip="Language server"
31+
/>
32+
<SubDescription>
33+
As part of making containers more powerful we now allow the language
34+
server to run there. Please help us test it :-)
35+
</SubDescription>
36+
</>
37+
) : null;
38+
};

‎packages/app/src/app/pages/common/Modals/PreferencesModal/Experiments/index.tsx

Lines changed: 14 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,18 @@
1-
import { useOvermind } from 'app/overmind';
21
import React from 'react';
32

4-
import {
5-
PaddedPreference,
6-
PreferenceContainer,
7-
Rule,
8-
SubContainer,
9-
SubDescription,
10-
Title,
11-
} from '../elements';
3+
import { PreferenceContainer, Rule, SubContainer, Title } from '../elements';
124
import { NewSidebar } from './NewSidebar';
5+
import { ContainerLSP } from './ContainerLSP';
136

14-
export const Experiments: React.FunctionComponent = () => {
15-
const { state, actions } = useOvermind();
16-
17-
return (
18-
<div>
19-
<Title>Experiments</Title>
20-
<SubContainer>
21-
<PreferenceContainer>
22-
<NewSidebar />
23-
<Rule />
24-
<PaddedPreference
25-
title="Use container language server"
26-
type="boolean"
27-
value={state.user.experiments.containerLsp}
28-
setValue={() => {
29-
actions.preferences.toggleContainerLspExperiment();
30-
}}
31-
tooltip="Language server"
32-
/>
33-
<SubDescription>
34-
As part of making containers more powerful we now allow the language
35-
server to run there. Please help us test it :-)
36-
</SubDescription>
37-
</PreferenceContainer>
38-
</SubContainer>
39-
</div>
40-
);
41-
};
7+
export const Experiments: React.FunctionComponent = () => (
8+
<div>
9+
<Title>Experiments</Title>
10+
<SubContainer>
11+
<PreferenceContainer>
12+
<NewSidebar />
13+
<Rule />
14+
<ContainerLSP />
15+
</PreferenceContainer>
16+
</SubContainer>
17+
</div>
18+
);

‎packages/components/src/utils/polyfill-theme.ts

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,22 @@ const polyfillTheme = vsCodeTheme => {
121121
);
122122
}
123123

124+
if (uiColors.list.hoverBackground === uiColors.sideBar.background) {
125+
if (
126+
uiColors.list.inactiveSelectionBackground &&
127+
uiColors.list.hoverBackground !==
128+
uiColors.list.inactiveSelectionBackground
129+
) {
130+
uiColors.list.hoverBackground = uiColors.list.inactiveSelectionBackground;
131+
} else {
132+
// if that didnt work, its math time
133+
uiColors.list.hoverBackground = decreaseContrast(
134+
uiColors.sideBar.background,
135+
0.25
136+
);
137+
}
138+
}
139+
124140
uiColors.list.foreground = uiColors.list.foreground || mutedForeground;
125141
uiColors.list.hoverForeground =
126142
uiColors.list.hoverForeground || uiColors.sideBar.foreground;
@@ -143,7 +159,7 @@ const polyfillTheme = vsCodeTheme => {
143159
const addedColors = {
144160
mutedForeground,
145161
activityBar: {
146-
selected: uiColors.sideBar.foreground,
162+
selectedForeground: uiColors.sideBar.foreground,
147163
inactiveForeground: mutedForeground,
148164
hoverBackground: uiColors.sideBar.border,
149165
},
@@ -183,6 +199,14 @@ const polyfillTheme = vsCodeTheme => {
183199
uiColors.switch.toggle = designLanguage.colors.grays[200];
184200
}
185201

202+
// ensure enough contrast from inactive state
203+
uiColors.activityBar.selectedForeground = withContrast(
204+
uiColors.activityBar.selectedForeground,
205+
uiColors.activityBar.inactiveForeground,
206+
type,
207+
'icon'
208+
);
209+
186210
return uiColors;
187211
};
188212

@@ -203,13 +227,21 @@ const darken = (color, value) =>
203227
.darken(value)
204228
.hex();
205229

206-
const withContrast = (color, background, type) => {
207-
if (Color(color).contrast(Color(background)) > 4.5) return color;
230+
const withContrast = (color, background, type, contrastType = 'text') => {
231+
const contrastRatio = { text: 4.5, icon: 1.6 };
232+
const contrast = contrastRatio[contrastType];
233+
234+
if (Color(color).contrast(Color(background)) > contrast) return color;
208235

209236
// can't fix that
210237
if (color === '#FFFFFF' || color === '#000000') return color;
211238

212239
// recursively increase contrast
213240
const increaseContrast = type === 'dark' ? lighten : darken;
214-
return withContrast(increaseContrast(color, 0.1), background, type);
241+
return withContrast(
242+
increaseContrast(color, 0.1),
243+
background,
244+
type,
245+
contrastType
246+
);
215247
};

0 commit comments

Comments
 (0)