forked/topola-viewer
1
0
Fork 0
mirror of https://github.com/PeWu/topola-viewer.git synced 2026-07-30 07:31:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Sidebar improvements (Collapse/Expand, Mobile view) (#215)

Browse Source 
* Extract sidebar to new component

* Add sidebar toggle

* Fix scrollbars sometimes appearing even at maximum zoom-out
This commit is contained in:
czifumasa
2025-09-09 10:41:45 +02:00
committed by GitHub
parent 0f0a75a5ec
commit 2a0c963789
15 changed files with 272 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
src/sidepanel/config/config.tsx Normal file
View File

@@ -0,0 +1,234 @@
import {ParsedQuery} from 'query-string';
import {FormattedMessage} from 'react-intl';
import {Checkbox, Form, Header, Item} from 'semantic-ui-react';
export enum ChartColors {
NO_COLOR,
COLOR_BY_SEX,
COLOR_BY_GENERATION,
}
export enum Ids {
HIDE,
SHOW,
}
export enum Sex {
HIDE,
SHOW,
}
export interface Config {
color: ChartColors;
id: Ids;
sex: Sex;
}
export const DEFALUT_CONFIG: Config = {
color: ChartColors.COLOR_BY_GENERATION,
id: Ids.SHOW,
sex: Sex.SHOW,
};
const COLOR_ARG = new Map<string, ChartColors>([
['n', ChartColors.NO_COLOR],
['g', ChartColors.COLOR_BY_GENERATION],
['s', ChartColors.COLOR_BY_SEX],
]);
const COLOR_ARG_INVERSE = new Map<ChartColors, string>();
COLOR_ARG.forEach((v, k) => COLOR_ARG_INVERSE.set(v, k));
const ID_ARG = new Map<string, Ids>([
['h', Ids.HIDE],
['s', Ids.SHOW],
]);
const ID_ARG_INVERSE = new Map<Ids, string>();
ID_ARG.forEach((v, k) => ID_ARG_INVERSE.set(v, k));
const SEX_ARG = new Map<string, Sex>([
['h', Sex.HIDE],
['s', Sex.SHOW],
]);
const SEX_ARG_INVERSE = new Map<Sex, string>();
SEX_ARG.forEach((v, k) => SEX_ARG_INVERSE.set(v, k));
export function argsToConfig(args: ParsedQuery<any>): Config {
const getParam = (name: string) => {
const value = args[name];
return typeof value === 'string' ? value : undefined;
};
return {
color: COLOR_ARG.get(getParam('c') ?? '') ?? DEFALUT_CONFIG.color,
id: ID_ARG.get(getParam('i') ?? '') ?? DEFALUT_CONFIG.id,
sex: SEX_ARG.get(getParam('s') ?? '') ?? DEFALUT_CONFIG.sex,
};
}
export function configToArgs(config: Config): ParsedQuery<any> {
return {
c: COLOR_ARG_INVERSE.get(config.color),
i: ID_ARG_INVERSE.get(config.id),
s: SEX_ARG_INVERSE.get(config.sex),
};
}
export function ConfigPanel(props: {
config: Config;
onChange: (config: Config) => void;
}) {
return (
<Form className="details">
<Item.Group>
<Item>
<Item.Content>
<Header sub>
<FormattedMessage id="config.colors" defaultMessage="Colors" />
</Header>
<Form.Field className="no-margin">
<Checkbox
radio
label={
<FormattedMessage
tagName="label"
id="config.colors.NO_COLOR"
defaultMessage="none"
/>
}
name="checkboxRadioGroup"
value="none"
checked={props.config.color === ChartColors.NO_COLOR}
onClick={() =>
props.onChange({
...props.config,
color: ChartColors.NO_COLOR,
})
}
/>
</Form.Field>
<Form.Field className="no-margin">
<Checkbox
radio
label={
<FormattedMessage
tagName="label"
id="config.colors.COLOR_BY_GENERATION"
defaultMessage="by generation"
/>
}
name="checkboxRadioGroup"
value="generation"
checked={props.config.color === ChartColors.COLOR_BY_GENERATION}
onClick={() =>
props.onChange({
...props.config,
color: ChartColors.COLOR_BY_GENERATION,
})
}
/>
</Form.Field>
<Form.Field className="no-margin">
<Checkbox
radio
label={
<FormattedMessage
tagName="label"
id="config.colors.COLOR_BY_SEX"
defaultMessage="by sex"
/>
}
name="checkboxRadioGroup"
value="gender"
checked={props.config.color === ChartColors.COLOR_BY_SEX}
onClick={() =>
props.onChange({
...props.config,
color: ChartColors.COLOR_BY_SEX,
})
}
/>
</Form.Field>
</Item.Content>
</Item>
<Item>
<Item.Content>
<Header sub>
<FormattedMessage id="config.ids" defaultMessage="IDs" />
</Header>
<Form.Field className="no-margin">
<Checkbox
radio
label={
<FormattedMessage
tagName="label"
id="config.ids.HIDE"
defaultMessage="hide"
/>
}
name="checkboxRadioGroup"
value="hide"
checked={props.config.id === Ids.HIDE}
onClick={() => props.onChange({...props.config, id: Ids.HIDE})}
/>
</Form.Field>
<Form.Field className="no-margin">
<Checkbox
radio
label={
<FormattedMessage
tagName="label"
id="config.ids.SHOW"
defaultMessage="show"
/>
}
name="checkboxRadioGroup"
value="show"
checked={props.config.id === Ids.SHOW}
onClick={() => props.onChange({...props.config, id: Ids.SHOW})}
/>
</Form.Field>
</Item.Content>
</Item>
<Item>
<Item.Content>
<Header sub>
<FormattedMessage id="config.sex" defaultMessage="Sex" />
</Header>
<Form.Field className="no-margin">
<Checkbox
radio
label={
<FormattedMessage
tagName="label"
id="config.sex.HIDE"
defaultMessage="hide"
/>
}
name="checkboxRadioGroup"
value="hide"
checked={props.config.sex === Sex.HIDE}
onClick={() => props.onChange({...props.config, sex: Sex.HIDE})}
/>
</Form.Field>
<Form.Field className="no-margin">
<Checkbox
radio
label={
<FormattedMessage
tagName="label"
id="config.sex.SHOW"
defaultMessage="show"
/>
}
name="checkboxRadioGroup"
value="show"
checked={props.config.sex === Sex.SHOW}
onClick={() => props.onChange({...props.config, sex: Sex.SHOW})}
/>
</Form.Field>
</Item.Content>
</Item>
</Item.Group>
</Form>
);
}