mirror of
https://github.com/Kong/insomnia
synced 2024-11-08 06:39:48 +00:00
Theme preview tile for OS themes (#3387)
Co-authored-by: Opender Singh <opender.singh@konghq.com>
This commit is contained in:
Roger Guasch
GitHub
parent
212ca5d764
commit
3972bb50ab
@ -37,6 +37,63 @@ class Theme extends PureComponent<Props, State> {
|
||||
});
|
||||
}
|
||||
|
||||
renderThemePreview(themeName: string) {
|
||||
return (
|
||||
/* @ts-expect-error -- TSCONVERSION */
|
||||
<svg theme={themeName} width="100%" height="100%" viewBox="0 0 500 300">
|
||||
{/*
|
||||
A WORD TO THE WISE: If you, dear traveler from the future, are here
|
||||
for the purpose of theming things due to changes in the app structure,
|
||||
please remember to add `--sub` to your classes or else the selected class'
|
||||
theme variables will apply to all theme previews. Search your codebase
|
||||
for `--sub` to see more.
|
||||
*/}
|
||||
|
||||
{/* @ts-expect-error -- TSCONVERSION */}
|
||||
<g subtheme={themeName}>
|
||||
{/* App Header */}
|
||||
<g className="theme--app-header--sub">
|
||||
<rect x="0" y="0" width="100%" height="10%" className="bg-fill" />
|
||||
</g>
|
||||
|
||||
{/* Panes */}
|
||||
<g className="theme--pane--sub">
|
||||
{/* Response Area */}
|
||||
<rect x="0" y="10%" width="100%" height="100%" className="bg-fill" />
|
||||
|
||||
{/* URL Bars */}
|
||||
<rect
|
||||
x="25%"
|
||||
y="10%"
|
||||
width="100%"
|
||||
height="10%"
|
||||
className="theme--pane__header--sub bg-fill"
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Sidebar */}
|
||||
<g className="theme--sidebar--sub">
|
||||
<rect x="0" y="10%" width="25%" height="100%" className="bg-fill" />
|
||||
</g>
|
||||
|
||||
{/* Lines */}
|
||||
<line x1="0%" x2="100%" y1="10%" y2="10%" strokeWidth="1" className="hl-stroke" />
|
||||
<line x1="25%" x2="100%" y1="20%" y2="20%" strokeWidth="1" className="hl-stroke" />
|
||||
<line x1="62%" x2="62%" y1="10%" y2="100%" strokeWidth="1" className="hl-stroke" />
|
||||
<line x1="25%" x2="25%" y1="10%" y2="100%" strokeWidth="1" className="hl-stroke" />
|
||||
|
||||
{/* Color Squares */}
|
||||
<rect x="40%" y="85%" width="5%" height="8%" className="success-fill" />
|
||||
<rect x="50%" y="85%" width="5%" height="8%" className="info-fill" />
|
||||
<rect x="60%" y="85%" width="5%" height="8%" className="warning-fill" />
|
||||
<rect x="70%" y="85%" width="5%" height="8%" className="danger-fill" />
|
||||
<rect x="80%" y="85%" width="5%" height="8%" className="surprise-fill" />
|
||||
<rect x="90%" y="85%" width="5%" height="8%" className="info-fill" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
renderTheme(theme: ThemeType) {
|
||||
const { handleChangeTheme, activeTheme, autoDetectColorScheme } = this.props;
|
||||
const isActive = activeTheme === theme.theme.name;
|
||||
@ -53,54 +110,7 @@ class Theme extends PureComponent<Props, State> {
|
||||
disabled={disabled}
|
||||
onClick={() => handleChangeTheme(theme.theme.name, 'default')}
|
||||
className={isActive ? 'active' : ''}>
|
||||
{/* @ts-expect-error -- TSCONVERSION */}
|
||||
<svg theme={theme.theme.name} width="100%" height="100%" viewBox="0 0 500 300">
|
||||
{/*
|
||||
A WORD TO THE WISE: If you, dear traveler from the future, are here for the purpose of theming things due to changes in the app structure, please remember to add `--sub` to your classes or else the selected class' theme variables will apply to all theme previews. Search your codebase for `--sub` to see more.
|
||||
*/}
|
||||
|
||||
{/* @ts-expect-error -- TSCONVERSION */}
|
||||
<g subtheme={theme.theme.name}>
|
||||
{/* App Header */}
|
||||
<g className="theme--app-header--sub">
|
||||
<rect x="0" y="0" width="100%" height="10%" className="bg-fill" />
|
||||
</g>
|
||||
|
||||
{/* Panes */}
|
||||
<g className="theme--pane--sub">
|
||||
{/* Response Area */}
|
||||
<rect x="0" y="10%" width="100%" height="100%" className="bg-fill" />
|
||||
|
||||
{/* URL Bars */}
|
||||
<rect
|
||||
x="25%"
|
||||
y="10%"
|
||||
width="100%"
|
||||
height="10%"
|
||||
className="theme--pane__header--sub bg-fill"
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Sidebar */}
|
||||
<g className="theme--sidebar--sub">
|
||||
<rect x="0" y="10%" width="25%" height="100%" className="bg-fill" />
|
||||
</g>
|
||||
|
||||
{/* Lines */}
|
||||
<line x1="0%" x2="100%" y1="10%" y2="10%" strokeWidth="1" className="hl-stroke" />
|
||||
<line x1="25%" x2="100%" y1="20%" y2="20%" strokeWidth="1" className="hl-stroke" />
|
||||
<line x1="62%" x2="62%" y1="10%" y2="100%" strokeWidth="1" className="hl-stroke" />
|
||||
<line x1="25%" x2="25%" y1="10%" y2="100%" strokeWidth="1" className="hl-stroke" />
|
||||
|
||||
{/* Color Squares */}
|
||||
<rect x="40%" y="85%" width="5%" height="8%" className="success-fill" />
|
||||
<rect x="50%" y="85%" width="5%" height="8%" className="info-fill" />
|
||||
<rect x="60%" y="85%" width="5%" height="8%" className="warning-fill" />
|
||||
<rect x="70%" y="85%" width="5%" height="8%" className="danger-fill" />
|
||||
<rect x="80%" y="85%" width="5%" height="8%" className="surprise-fill" />
|
||||
<rect x="90%" y="85%" width="5%" height="8%" className="info-fill" />
|
||||
</g>
|
||||
</svg>
|
||||
{this.renderThemePreview(theme.theme.name)}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
@ -133,26 +143,42 @@ class Theme extends PureComponent<Props, State> {
|
||||
}
|
||||
|
||||
renderThemeSelect(scheme: 'light' | 'dark') {
|
||||
const { activeLightTheme, activeDarkTheme, handleChangeTheme } = this.props;
|
||||
const {
|
||||
activeLightTheme,
|
||||
activeDarkTheme,
|
||||
handleChangeTheme,
|
||||
autoDetectColorScheme,
|
||||
} = this.props;
|
||||
const { themes } = this.state;
|
||||
const activeColorTheme = scheme === 'light' ? activeLightTheme : activeDarkTheme;
|
||||
const activeColorTheme =
|
||||
scheme === 'light' ? activeLightTheme : activeDarkTheme;
|
||||
return (
|
||||
<div className="form-control form-control--outlined">
|
||||
<label>
|
||||
Preferred {scheme} color scheme
|
||||
<HelpTooltip className="space-left">
|
||||
Lets you choose the color scheme that is used in {scheme} mode.
|
||||
</HelpTooltip>
|
||||
<select
|
||||
value={activeColorTheme}
|
||||
onChange={e => handleChangeTheme(e.target.value, scheme)}>
|
||||
{themes.map(theme => (
|
||||
<option key={theme.theme.name} value={theme.theme.name}>
|
||||
{theme.theme.displayName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<div>
|
||||
<div className="form-control form-control--outlined">
|
||||
<label>
|
||||
Preferred {scheme} color scheme
|
||||
<HelpTooltip className="space-left">
|
||||
Lets you choose the color scheme that is used in {scheme} mode.
|
||||
</HelpTooltip>
|
||||
<select
|
||||
value={activeColorTheme}
|
||||
onChange={(e) => handleChangeTheme(e.target.value, scheme)}
|
||||
>
|
||||
{themes.map((theme) => (
|
||||
<option key={theme.theme.name} value={theme.theme.name}>
|
||||
{theme.theme.displayName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div className="themes select__preview">
|
||||
<div className="themes__theme" style={{ maxWidth: '50%' }}>
|
||||
<Button disabled={!autoDetectColorScheme}>
|
||||
{this.renderThemePreview(activeColorTheme)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -161,7 +187,7 @@ class Theme extends PureComponent<Props, State> {
|
||||
const { autoDetectColorScheme, handleAutoDetectColorSchemeChange } = this.props;
|
||||
return (
|
||||
<>
|
||||
<div className="themes">{this.renderThemeRows()}</div>
|
||||
<div className="themes general__preview">{this.renderThemeRows()}</div>
|
||||
<div className="form-control form-control--thin">
|
||||
<label className="inline-block">
|
||||
Use OS color scheme
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
.themes {
|
||||
padding-top: var(--padding-lg);
|
||||
&.general__preview {
|
||||
padding-top: var(--padding-lg);
|
||||
|
||||
}
|
||||
|
||||
&.select__preview {
|
||||
padding-top: var(--padding-xxs);
|
||||
padding-bottom: var(--padding-xxs);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.themes__row {
|
||||
display: flex;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user