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

Align and standardize settings data source list layout

Browse Source 
Aligns the "Data source" list items in the side panel by resolving a
browser-specific layout discrepancy where icons with different intrinsic
widths (e.g., "edit" vs "calendar") caused uneven text indentation and
vertical misalignment.

- Refactored `SourceHead` in `head.tsx` to wrap all list icons in a
  `list-icon-wrapper` container instead of using `<List.Icon>` directly.
- Added CSS rules in `index.css` to format `.list-icon-wrapper` and its
  sibling `.content` as table cells aligned at the top, with a fixed
  width of `20px` for the icon column.
- Converted relative sizing (`em`) to absolute pixels (`px`) for
  pixel-perfect cross-browser precision.
- Updated Playwright visual regression snapshots to match the newly
  aligned and corrected UI layout.
This commit is contained in:
Przemek Więch
2026-06-25 14:31:25 +02:00
parent 9cb57d1f49
commit 3effe501b7
9 changed files with 335 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/index.css
View File

@@ -154,6 +154,28 @@ div.zoom {
padding: 0 15px 0 25px;
}
.details .ui.list .item > .list-icon-wrapper {
display: table-cell;
width: 20px;
text-align: center;
vertical-align: top;
padding-right: 4px;
}
.details .ui.list .item > .list-icon-wrapper > i.icon {
margin: 0;
}
.details .ui.list .item > .list-icon-wrapper + .content {
display: table-cell;
vertical-align: top;
padding-left: 8px;
}
.details .item-header {
justify-content: space-between;
display: flex;

478
src/sidepanel/config/config.tsx
View File

@@ -118,247 +118,245 @@ export function ConfigPanel(props: {
onChange: (config: Config) => void;
}) {
return (
<>
{SourceHead(props.gedcom)}
<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>
<Item.Content>
<Header sub>
<FormattedMessage id="config.places" defaultMessage="Places" />
</Header>
<Form.Field className="no-margin">
<Checkbox
radio
label={
<FormattedMessage
tagName="label"
id="config.places.HIDE"
defaultMessage="hide"
/>
}
name="checkboxRadioGroup"
value="hide"
checked={props.config.place === PlaceDisplay.HIDE}
onClick={() =>
props.onChange({...props.config, place: PlaceDisplay.HIDE})
}
/>
</Form.Field>
<Form.Field className="no-margin">
<Checkbox
radio
label={
<FormattedMessage
tagName="label"
id="config.places.SHORT"
defaultMessage="short"
/>
}
name="checkboxRadioGroup"
value="short"
checked={props.config.place === PlaceDisplay.SHORT}
onClick={() =>
props.onChange({...props.config, place: PlaceDisplay.SHORT})
}
/>
{props.config.place === PlaceDisplay.SHORT && (
<Input
type="number"
min={1}
max={10}
size="mini"
style={{width: '4em', marginLeft: '1.5em'}}
value={props.config.placeCount}
onChange={(_e, {value}) => {
const n = parseInt(value, 10);
if (n >= 1) {
props.onChange({...props.config, placeCount: n});
}
}}
<Form className="details">
<Item.Group>
{SourceHead(props.gedcom)}
<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"
/>
)}
</Form.Field>
<Form.Field className="no-margin">
<Checkbox
radio
label={
<FormattedMessage
tagName="label"
id="config.places.FULL"
defaultMessage="full"
/>
}
name="checkboxRadioGroup"
value="full"
checked={props.config.place === PlaceDisplay.FULL}
onClick={() =>
props.onChange({...props.config, place: PlaceDisplay.FULL})
}
}
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>
<Item.Content>
<Header sub>
<FormattedMessage id="config.places" defaultMessage="Places" />
</Header>
<Form.Field className="no-margin">
<Checkbox
radio
label={
<FormattedMessage
tagName="label"
id="config.places.HIDE"
defaultMessage="hide"
/>
}
name="checkboxRadioGroup"
value="hide"
checked={props.config.place === PlaceDisplay.HIDE}
onClick={() =>
props.onChange({...props.config, place: PlaceDisplay.HIDE})
}
/>
</Form.Field>
<Form.Field className="no-margin">
<Checkbox
radio
label={
<FormattedMessage
tagName="label"
id="config.places.SHORT"
defaultMessage="short"
/>
}
name="checkboxRadioGroup"
value="short"
checked={props.config.place === PlaceDisplay.SHORT}
onClick={() =>
props.onChange({...props.config, place: PlaceDisplay.SHORT})
}
/>
{props.config.place === PlaceDisplay.SHORT && (
<Input
type="number"
min={1}
max={10}
size="mini"
style={{width: '4em', marginLeft: '1.5em'}}
value={props.config.placeCount}
onChange={(_e, {value}) => {
const n = parseInt(value, 10);
if (n >= 1) {
props.onChange({...props.config, placeCount: n});
}
}}
/>
</Form.Field>
</Item.Content>
</Item>
</Item.Group>
</Form>
</>
)}
</Form.Field>
<Form.Field className="no-margin">
<Checkbox
radio
label={
<FormattedMessage
tagName="label"
id="config.places.FULL"
defaultMessage="full"
/>
}
name="checkboxRadioGroup"
value="full"
checked={props.config.place === PlaceDisplay.FULL}
onClick={() =>
props.onChange({...props.config, place: PlaceDisplay.FULL})
}
/>
</Form.Field>
</Item.Content>
</Item>
</Item.Group>
</Form>
);
}

132
src/sidepanel/head/head.tsx
View File

@@ -1,5 +1,5 @@
import {FormattedMessage, useIntl} from 'react-intl';
import {Divider, Header, List} from 'semantic-ui-react';
import {Divider, Header, Icon, Item, List} from 'semantic-ui-react';
import {getDate} from 'topola';
import {formatDateOrRange} from '../../util/date_util';
import {dereference, GedcomData} from '../../util/gedcom_util';
@@ -66,63 +66,81 @@ export function SourceHead(gedcom: GedcomData) {
// Icons: https://react.semantic-ui.com/elements/icon/
return (
<>
<Header sub>
<FormattedMessage id="head.source" defaultMessage="Data source" />
</Header>
<List>
{sour_name && (
<List.Item>
<List.Icon name="edit" />
<List.Content>{sour_name}</List.Content>
</List.Item>
)}
<Item>
<Item.Content>
<Header sub>
<FormattedMessage id="head.source" defaultMessage="Data source" />
</Header>
<List>
{sour_name && (
<List.Item>
<div className="list-icon-wrapper">
<Icon name="edit" />
</div>
<List.Content>{sour_name}</List.Content>
</List.Item>
)}
{date && (
<List.Item>
<List.Icon name="calendar" />
<List.Content>{dateFormatted}</List.Content>
</List.Item>
)}
{file && (
<List.Item>
<List.Icon name="file" />
<List.Content>{filename}</List.Content>
</List.Item>
)}
{name && (
<List.Item>
<List.Icon name="user" />
<List.Content>{name}</List.Content>
</List.Item>
)}
{adr1 && (
<List.Item>
<List.Icon name="marker" />
<List.Content>{location}</List.Content>
</List.Item>
)}
{phon && (
<List.Item>
<List.Icon name="phone" />
<List.Content>{phon}</List.Content>
</List.Item>
)}
{email && (
<List.Item>
<List.Icon name="mail" />
<List.Content>{email}</List.Content>
</List.Item>
)}
{copr && (
<List.Item>
<List.Icon name="copyright" />
<List.Content>{copr}</List.Content>
</List.Item>
)}
</List>
{date && (
<List.Item>
<div className="list-icon-wrapper">
<Icon name="calendar" />
</div>
<List.Content>{dateFormatted}</List.Content>
</List.Item>
)}
{file && (
<List.Item>
<div className="list-icon-wrapper">
<Icon name="file" />
</div>
<List.Content>{filename}</List.Content>
</List.Item>
)}
{name && (
<List.Item>
<div className="list-icon-wrapper">
<Icon name="user" />
</div>
<List.Content>{name}</List.Content>
</List.Item>
)}
{adr1 && (
<List.Item>
<div className="list-icon-wrapper">
<Icon name="marker" />
</div>
<List.Content>{location}</List.Content>
</List.Item>
)}
{phon && (
<List.Item>
<div className="list-icon-wrapper">
<Icon name="phone" />
</div>
<List.Content>{phon}</List.Content>
</List.Item>
)}
{email && (
<List.Item>
<div className="list-icon-wrapper">
<Icon name="mail" />
</div>
<List.Content>{email}</List.Content>
</List.Item>
)}
{copr && (
<List.Item>
<div className="list-icon-wrapper">
<Icon name="copyright" />
</div>
<List.Content>{copr}</List.Content>
</List.Item>
)}
</List>
<Divider />
</>
<Divider />
</Item.Content>
</Item>
);
}

BIN
tests/config_visual.spec.ts-snapshots/config-state-default-visual-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 75 KiB

After

Width:  |  Height:  |  Size: 75 KiB

BIN
tests/config_visual.spec.ts-snapshots/config-state-gender-no-ids-visual-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 76 KiB

BIN
tests/config_visual.spec.ts-snapshots/config-state-minimalist-visual-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 69 KiB

BIN
tests/config_visual.spec.ts-snapshots/config-state-places-hide-visual-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 70 KiB

BIN
tests/config_visual.spec.ts-snapshots/config-state-places-short-1-visual-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 72 KiB

BIN
tests/config_visual.spec.ts-snapshots/config-state-places-short-default-visual-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 74 KiB