Skip to content

Commit ebfd61f

Browse files
CalebGermanCalebGerman
authored
🐛 Fix styling and layout issues in NamedVersionSelector components (#256)
Current : <img width="886" height="908" alt="image" src="https://github.com/user-attachments/assets/dd0cf935-5984-4f71-954a-5e05fdd04e0f" /> Fixed : <img width="962" height="1804" alt="image" src="https://github.com/user-attachments/assets/232e6804-7562-494b-bdbd-24cd989e57ea" /> The statuses were miss aligned for each named version entry. Now they have the proper alignment.
1 parent 8282727 commit ebfd61f

3 files changed

Lines changed: 76 additions & 85 deletions

File tree

‎.changeset/nine-birds-pay.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@itwin/changed-elements-react": patch
3+
---
4+
5+
Fixed miss-alignment issue in named versions entries

‎packages/changed-elements-react/src/NamedVersionSelector/NamedVersionSelector.scss‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888
._cer_v1_named-version-list-header {
8989
grid-column: 1 / 4;
9090
padding-block: var(--iui-size-m);
91-
91+
padding-inline: var(--iui-size-xs);
9292
display: flex;
9393
gap: var(--iui-size-s);
9494
justify-content: space-between;
@@ -106,34 +106,24 @@
106106

107107
._cer_v1_named-version-list {
108108
margin: 0;
109-
min-width: min-content;
110109
overflow: auto;
111-
112110
display: grid;
113111
grid: 1fr / minmax(min-content, 1fr) minmax(min-content, auto) minmax(min-content, auto);
114112
height: 100%;
115113
width: 100%;
116114

117-
> * {
118-
padding-inline: var(--_cer_v1_container-margin-internal);
119-
}
120115
}
121116

122117
._cer_v1_named-version-entry {
123118
min-height: var(--iui-size-3xl);
124119
padding-block: var(--iui-size-m);
125120
border: 1px solid var(--iui-color-border-subtle);
126121
border-radius: 0;
127-
display: grid;
128-
gap: unset;
129-
grid-template-columns: subgrid;
130-
grid-column: 1 / 4;
131-
align-items: center;
132-
133-
> :nth-child(2):last-child {
134-
grid-column: 2 / 4;
135-
}
122+
width:100%;
123+
}
136124

125+
._cer_v1_named-version-entry > :first-child {
126+
width: 100%;
137127
}
138128

139129
._cer_v1_action-button {

‎packages/changed-elements-react/src/NamedVersionSelector/NamedVersionSelector.tsx‎

Lines changed: 66 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*---------------------------------------------------------------------------------------------
2-
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3-
* See LICENSE.md in the project root for license terms and full copyright notice.
4-
*--------------------------------------------------------------------------------------------*/
2+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3+
* See LICENSE.md in the project root for license terms and full copyright notice.
4+
*--------------------------------------------------------------------------------------------*/
55
import { IModelApp, type IModelConnection } from "@itwin/core-frontend";
66
import {
77
SvgChevronLeft, SvgChevronRight, SvgStatusError, SvgStatusSuccess
@@ -69,23 +69,23 @@ export function NamedVersionSelectorWidget(props: Readonly<NamedVersionSelectorW
6969
const [disableStartComparison, setDisableStartComparison] = useState(false);
7070
useEffect(
7171
() => {
72-
const cleanup = [
73-
manager.versionCompareStarting.addListener(() => {
74-
setIsComparing(true);
75-
}),
76-
manager.versionCompareStopped.addListener(() => {
77-
setIsComparing(false);
78-
setIsComparisonStarted(false);
79-
}),
80-
manager.versionCompareStarted.addListener(() => {
81-
setIsComparisonStarted(true);
82-
}),
83-
manager.versionCompareStartFailed.addListener(() => {
84-
setIsComparing(false);
85-
setIsComparisonStarted(false);
86-
}),
87-
];
88-
return () => cleanup.forEach((cb) => cb());
72+
const cleanup = [
73+
manager.versionCompareStarting.addListener(() => {
74+
setIsComparing(true);
75+
}),
76+
manager.versionCompareStopped.addListener(() => {
77+
setIsComparing(false);
78+
setIsComparisonStarted(false);
79+
}),
80+
manager.versionCompareStarted.addListener(() => {
81+
setIsComparisonStarted(true);
82+
}),
83+
manager.versionCompareStartFailed.addListener(() => {
84+
setIsComparing(false);
85+
setIsComparisonStarted(false);
86+
}),
87+
];
88+
return () => cleanup.forEach((cb) => cb());
8989
},
9090
[manager],
9191
);
@@ -158,7 +158,7 @@ export function NamedVersionSelectorWidget(props: Readonly<NamedVersionSelectorW
158158
<Widget>
159159
<Widget.Header>
160160
{isComparisonStarted && <NavigationButton backward onClick={stopComparisonCallback}>
161-
{t("VersionCompare:versionCompare.versionsList")}
161+
{t("VersionCompare:versionCompare.versionsList")}
162162
</NavigationButton>}
163163
<TextEx variant="title">
164164
{t("VersionCompare:versionCompare.versionPickerTitle")}
@@ -281,7 +281,7 @@ interface WidgetProps {
281281
const Widget = Object.assign(
282282
WidgetMain,
283283
{
284-
Header: WidgetHeader,
284+
Header: WidgetHeader,
285285
},
286286
);
287287

@@ -440,20 +440,20 @@ function NamedVersionSelectorLoaded(props: LoadedStateProps): ReactElement {
440440
);
441441

442442
const processResults = useCallback(async (target: VersionCompareEntry) => {
443-
try {
444-
await getComparison(target);
445-
} catch (error) {
446-
if (!isAbortError(error)) {
447-
// eslint-disable-next-line no-console
448-
console.error(error);
449-
updateJobStatus.failed(target.namedVersion);
443+
try {
444+
await getComparison(target);
445+
} catch (error) {
446+
if (!isAbortError(error)) {
447+
// eslint-disable-next-line no-console
448+
console.error(error);
449+
updateJobStatus.failed(target.namedVersion);
450+
}
450451
}
451-
}
452452
}, [getComparison, updateJobStatus]);
453453

454454
const viewResults = useCallback(async (entry: VersionCompareEntry) => {
455-
setSelectedRunningChangesetIndex(entry.namedVersion.changesetIndex);
456-
onNamedVersionOpened(entry);
455+
setSelectedRunningChangesetIndex(entry.namedVersion.changesetIndex);
456+
onNamedVersionOpened(entry);
457457
}, [onNamedVersionOpened, setSelectedRunningChangesetIndex]);
458458

459459
const queryStatus = useCallback(
@@ -491,11 +491,11 @@ function NamedVersionSelectorLoaded(props: LoadedStateProps): ReactElement {
491491
);
492492

493493
const contextValue = useMemo(() => ({
494-
processResults,
495-
viewResults,
496-
initialLoad,
497-
checkStatus,
498-
selectedRunningChangesetIndex,
494+
processResults,
495+
viewResults,
496+
initialLoad,
497+
checkStatus,
498+
selectedRunningChangesetIndex,
499499
}), [processResults, viewResults, initialLoad, checkStatus, selectedRunningChangesetIndex]);
500500

501501
return (
@@ -608,7 +608,6 @@ export function NamedVersionInfiniteList({
608608
itemCount={itemCount}
609609
itemSize={itemHeight}
610610
onItemsRendered={onItemsRendered}
611-
className="_cer_v1_infinite-list"
612611
>
613612
{Item}
614613
</FixedSizeList>
@@ -622,19 +621,16 @@ export function NamedVersionInfiniteList({
622621
interface NamedVersionEntryProps {
623622
entry: VersionCompareEntry;
624623
style?: React.CSSProperties;
625-
containerWidth?: number;
624+
containerWidth: number;
626625
disableStartComparison?: boolean;
627626
}
628627

629628
function NamedVersionListEntry(props: Readonly<NamedVersionEntryProps>): ReactElement {
630629
const { processResults, viewResults, selectedRunningChangesetIndex } = useContext(namedVersionSelectorContext);
631630
const { namedVersion, job } = props.entry;
632-
const { containerWidth = 400 } = props;
633-
const widthBreakpointInPx = 400;
634-
const dateString = useMemo(
635-
() => new Date(namedVersion.createdDateTime).toLocaleDateString(),
636-
[namedVersion.createdDateTime],
637-
);
631+
const { containerWidth } = props;
632+
const widthBreakpointInPx = 459;
633+
const dateString = useMemo(() => new Date(namedVersion.createdDateTime).toLocaleDateString(), [namedVersion.createdDateTime]);
638634

639635
let stateInfo: { status: ReactNode; action: ReactNode; };
640636
switch (job?.status) {
@@ -650,12 +646,12 @@ function NamedVersionListEntry(props: Readonly<NamedVersionEntryProps>): ReactEl
650646
status: (
651647
<Flex>
652648
<IconEx className="_cer_v1_not-processed" size="m" fill="currentColor">
653-
<svg viewBox="0 0 16 16">
654-
<circle cx="8" cy="8" r="8" />
649+
<svg viewBox="0 0 18 18">
650+
<circle cx="9" cy="9" r="9" />
655651
</svg>
656652
</IconEx>
657653
{containerWidth >= widthBreakpointInPx && <TextEx weight="normal" variant="body">
658-
{t("VersionCompare:versionCompare.notProcessed")}
654+
{t("VersionCompare:versionCompare.notProcessed")}
659655
</TextEx>}
660656
</Flex>
661657
),
@@ -741,25 +737,25 @@ function NamedVersionListEntry(props: Readonly<NamedVersionEntryProps>): ReactEl
741737
}
742738

743739
return (
744-
<ListItem className="_cer_v1_named-version-entry" style={props.style}>
745-
<Flex gap="var(--iui-size-m)" alignItems="center" justifyContent="space-between">
746-
<div className="_cer_v1_version-content">
747-
<div className="_cer_v1_version-details">
748-
<TextEx variant="small" overflow="nowrap" oblique>
749-
{dateString}
750-
</TextEx>
751-
<TextEx variant="body" weight="semibold" overflow="ellipsis">
752-
{namedVersion.displayName}
753-
</TextEx>
754-
<TextEx variant="small" overflow="ellipsis">
755-
{namedVersion.description ?? ""}
756-
</TextEx>
740+
<ListItem className="_cer_v1_named-version-entry">
741+
<Flex justifyContent="left" >
742+
<Flex.Item flex='2'>
743+
<div>
744+
<div style={{ display: "grid", gap: "1px" }}>
745+
<TextEx variant="small" overflow="nowrap" oblique>
746+
{dateString}
747+
</TextEx>
748+
<TextEx variant="body" weight="semibold" overflow="ellipsis">
749+
{namedVersion.displayName}
750+
</TextEx>
751+
<TextEx variant="small" overflow="ellipsis">
752+
{namedVersion.description ?? ""}
753+
</TextEx>
754+
</div>
757755
</div>
758-
</div>
759-
<Flex alignItems="center" gap="var(--iui-size-s)">
760-
{stateInfo.status}
761-
{stateInfo.action}
762-
</Flex>
756+
</Flex.Item>
757+
<Flex.Item flex='1' alignSelf="center">{stateInfo.status}</Flex.Item>
758+
<Flex.Item flex='1' alignSelf="center">{stateInfo.action}</Flex.Item>
763759
</Flex>
764760
</ListItem>
765761
);
@@ -773,8 +769,8 @@ function LoadingEntryStatus(props: Readonly<LoadingEntryStatusProps>): ReactElem
773769
const { initialLoad } = useContext(namedVersionSelectorContext);
774770
useEffect(
775771
() => {
776-
const { cancel } = initialLoad(props.entry);
777-
return () => cancel();
772+
const { cancel } = initialLoad(props.entry);
773+
return () => cancel();
778774
},
779775
[initialLoad, props.entry],
780776
);
@@ -801,8 +797,8 @@ function ProcessingEntryStatus(props: Readonly<ProcessingEntryStatusProps>): Rea
801797
const { checkStatus } = useContext(namedVersionSelectorContext);
802798
useEffect(
803799
() => {
804-
const { cancel } = checkStatus(props.entry);
805-
return () => cancel();
800+
const { cancel } = checkStatus(props.entry);
801+
return () => cancel();
806802
},
807803
[checkStatus, props.entry],
808804
);

0 commit comments

Comments
 (0)