Skip to content

Commit a2e080b

Browse files
aswallaceaswallace
authored
Merge pull request #616 from AllenInstitute/feature/file-panel-redesign
Feature/file panel redesign
2 parents aecba82 + 9e84586 commit a2e080b

File tree

13 files changed

+462
-118
lines changed

13 files changed

+462
-118
lines changed

‎packages/core/App.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,4 +97,4 @@
9797
left: -100%;
9898
top: -100%;
9999
position: absolute;
100-
}
100+
}

‎packages/core/components/Buttons/TransparentIconButton.module.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.icon-button {
2+
background-color: transparent;
3+
color: var(--primary-text-color);
4+
}
5+
6+
.icon-button:hover {
7+
background-color: unset;
8+
color: var(--highlight-text-color);
9+
}

‎packages/core/components/Buttons/TransparentIconButton.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { IconButton, IContextualMenuProps } from "@fluentui/react";
2+
import classNames from "classnames";
3+
import * as React from "react";
4+
5+
import Tooltip from "../Tooltip";
6+
7+
import styles from "./TransparentIconButton.module.css";
8+
9+
interface Props {
10+
className?: string;
11+
disabled?: boolean;
12+
iconName: string;
13+
id?: string; // For testing purposes
14+
label?: string;
15+
menuProps?: IContextualMenuProps;
16+
onClick?: () => void;
17+
title?: string;
18+
}
19+
20+
/**
21+
* Stylized icon buttons with transparent backgrounds (e.g., close and edit interactions)
22+
*/
23+
export default function TransparentIconButton(props: Props) {
24+
return (
25+
<Tooltip content={props?.title || ""}>
26+
<IconButton
27+
ariaDescription={props?.title}
28+
ariaLabel={props?.label || props.iconName}
29+
className={classNames(styles.iconButton, props?.className)}
30+
disabled={props?.disabled}
31+
onClick={props?.onClick}
32+
iconProps={{ iconName: props.iconName }}
33+
data-testid={props?.id}
34+
menuProps={props?.menuProps}
35+
/>
36+
</Tooltip>
37+
);
38+
}

‎packages/core/components/Buttons/index.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@ import LinkLikeButton from "./LinkLikeButton";
22
import PrimaryButton from "./PrimaryButton";
33
import SecondaryButton from "./SecondaryButton";
44
import TertiaryButton from "./TertiaryButton";
5+
import TransparentIconButton from "./TransparentIconButton";
56
import useButtonMenu from "./useButtonMenu";
67

7-
export { LinkLikeButton, PrimaryButton, SecondaryButton, TertiaryButton, useButtonMenu };
8+
export {
9+
LinkLikeButton,
10+
PrimaryButton,
11+
SecondaryButton,
12+
TertiaryButton,
13+
TransparentIconButton,
14+
useButtonMenu,
15+
};

‎packages/core/components/FileDetails/FileDetails.module.css‎

Lines changed: 48 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
min-width: 175px;
1010
max-width: 95%;
1111
overflow: auto;
12-
width: var(--file-details-width); /* defined in App.module.css under .root{} and used by resize handle */
12+
width: var(--file-details-width); /* defined in global.css and used by resize handle */
1313
}
1414

1515
.expandable-transition {
@@ -33,11 +33,6 @@
3333
.pagination {
3434
width: 100%;
3535
height: var(--pagination-height);
36-
37-
/* flex parent */
38-
display: flex;
39-
flex-direction: row;
40-
justify-content: space-between;
4136
}
4237

4338
.pagination-and-content {
@@ -90,17 +85,18 @@
9085
.thumbnail-container {
9186
display: flex;
9287
justify-content: center;
88+
padding-bottom: var(--padding);
9389
}
9490

9591
.thumbnail {
9692
margin: 0 auto 10px; /* --margin defined in App.module.css under .root{} */
97-
height: 200px;
93+
max-height: 250px;
9894
transition: width var(--transition-duration);
9995
}
10096

10197
.thumbnail-skeleton {
10298
width: 100%;
103-
height: 200px;
99+
max-height: 250px;
104100
background-color: var(--primary-background-color);
105101
}
106102

@@ -141,17 +137,58 @@
141137
}
142138

143139
.file-name {
144-
padding: var(--padding) 0;
140+
padding: var(--padding) 0 0;
145141
text-align: center;
146142
user-select: text !important;
147143
word-break: break-all;
148144
}
149145

150-
.primary-button {
146+
.tertiary-button {
147+
padding: 3px;
148+
margin-right: 5px;
149+
}
150+
151+
.open-with-button {
151152
width: fit-content;
152153
}
153154

155+
.open-with-button span {
156+
/* swap text and icon */
157+
flex-direction: row-reverse;
158+
}
159+
160+
.open-with-button i {
161+
/* override primary button defaults */
162+
padding: 0 0 0 6px;
163+
}
164+
154165
.stack {
155166
width: 100%;
156167
align-items: center;
157-
}
168+
}
169+
170+
.header {
171+
border-bottom: 1px solid var(--medium-grey);
172+
display: flex;
173+
flex-wrap: wrap;
174+
width: 100%;
175+
padding-bottom: var(--margin);
176+
}
177+
178+
.left-align {
179+
display: flex;
180+
flex: none;
181+
align-items: center;
182+
}
183+
184+
.gutter {
185+
flex: 1;
186+
}
187+
188+
.right-align {
189+
display: flex;
190+
flex: none;
191+
align-items: center;
192+
position: relative;
193+
padding: 5px 0;
194+
}

‎packages/core/components/FileDetails/Pagination.module.css‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,38 @@
11
.root {
22
max-width: 300px;
33
margin: 0 auto; /* horizontally center */
4+
display: flex;
5+
flex-direction: row;
46
}
57

68
.root > div {
79
display: flex;
810
}
911

10-
.root > div:not(:first-child) {
11-
margin-left: 3px;
12+
.align-center {
13+
display: flex;
14+
align-items: center;
15+
}
16+
17+
.hidden {
18+
display: none !important;
19+
}
20+
21+
.chevron-button i {
22+
font-weight: 600;
23+
font-size: 13px;
1224
}
25+
26+
.svg-icon {
27+
fill: var(--primary-text-color);
28+
}
29+
30+
.svg-icon:hover {
31+
fill: var(--white);
32+
}
33+
34+
.page-count {
35+
display: flex;
36+
align-items: center;
37+
font-size: var(--s-paragraph-size);
38+
}

‎packages/core/components/FileDetails/Pagination.tsx‎

Lines changed: 68 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@ import classNames from "classnames";
22
import * as React from "react";
33
import { useDispatch, useSelector } from "react-redux";
44

5+
import { TransparentIconButton } from "../Buttons";
6+
import SvgIcon from "../SvgIcon";
7+
import Tooltip from "../Tooltip";
58
import { selection } from "../../state";
69
import { FocusDirective } from "../../entity/FileSelection";
10+
import { CHEVRON_END_PATH_DATA, CHEVRON_START_PATH_DATA, CHEVRON_VIEW_BOX } from "../../icons";
711

812
import styles from "./Pagination.module.css";
9-
import { TertiaryButton } from "../Buttons";
1013

1114
interface PaginationProps {
1215
className?: string;
@@ -19,59 +22,78 @@ export default function Pagination(props: PaginationProps) {
1922
const dispatch = useDispatch();
2023
const fileSelection = useSelector(selection.selectors.getFileSelection);
2124

25+
// Allow pagination to "roll over" back to the beginning/end
26+
const onClickPrevious = () => {
27+
if (!fileSelection.hasPreviousFocusableItem()) {
28+
dispatch(selection.actions.setFileSelection(fileSelection.focus(FocusDirective.LAST)));
29+
} else
30+
dispatch(
31+
selection.actions.setFileSelection(fileSelection.focus(FocusDirective.PREVIOUS))
32+
);
33+
};
34+
const onClickNext = () => {
35+
if (!fileSelection.hasNextFocusableItem()) {
36+
dispatch(selection.actions.setFileSelection(fileSelection.focus(FocusDirective.FIRST)));
37+
} else
38+
dispatch(selection.actions.setFileSelection(fileSelection.focus(FocusDirective.NEXT)));
39+
};
40+
2241
return (
23-
<div className={classNames(styles.root, props.className)}>
24-
<div>
25-
<TertiaryButton
26-
disabled={!fileSelection.hasPreviousFocusableItem()}
27-
iconName="ChevronLeftEnd6"
28-
onClick={() =>
29-
dispatch(
30-
selection.actions.setFileSelection(
31-
fileSelection.focus(FocusDirective.FIRST)
32-
)
33-
)
34-
}
35-
title="Jump to first selected file"
36-
/>
37-
<TertiaryButton
38-
disabled={!fileSelection.hasPreviousFocusableItem()}
39-
iconName="ChevronLeftSmall"
40-
onClick={() =>
41-
dispatch(
42-
selection.actions.setFileSelection(
43-
fileSelection.focus(FocusDirective.PREVIOUS)
42+
<div
43+
data-testid="pagination-root"
44+
className={classNames(styles.root, props.className, {
45+
[styles.hidden]: fileSelection.count() <= 1,
46+
})}
47+
>
48+
<div className={styles.alignCenter}>
49+
<Tooltip content="Jump to first selected file">
50+
<SvgIcon
51+
className={classNames(styles.svgIcon, styles.alignCenter)}
52+
height={28}
53+
pathData={CHEVRON_START_PATH_DATA}
54+
viewBox={CHEVRON_VIEW_BOX}
55+
onClick={() =>
56+
dispatch(
57+
selection.actions.setFileSelection(
58+
fileSelection.focus(FocusDirective.FIRST)
59+
)
4460
)
45-
)
46-
}
61+
}
62+
/>
63+
</Tooltip>
64+
<TransparentIconButton
65+
className={styles.chevronButton}
66+
iconName={"ChevronLeftMed"}
67+
onClick={onClickPrevious}
4768
title="View previous selected file"
4869
/>
4970
</div>
50-
<div>
51-
<TertiaryButton
52-
disabled={!fileSelection.hasNextFocusableItem()}
53-
iconName="ChevronRightSmall"
54-
onClick={() =>
55-
dispatch(
56-
selection.actions.setFileSelection(
57-
fileSelection.focus(FocusDirective.NEXT)
58-
)
59-
)
60-
}
71+
<div className={styles.pageCount}>
72+
{(fileSelection.getFocusedItemIndices().indexAcrossAllSelections || 0) + 1}/
73+
{fileSelection.count()}
74+
</div>
75+
<div className={styles.alignCenter}>
76+
<TransparentIconButton
77+
className={styles.chevronButton}
78+
iconName={"ChevronRightMed"}
79+
onClick={onClickNext}
6180
title="View next selected file"
6281
/>
63-
<TertiaryButton
64-
disabled={!fileSelection.hasNextFocusableItem()}
65-
iconName="ChevronRightEnd6"
66-
onClick={() =>
67-
dispatch(
68-
selection.actions.setFileSelection(
69-
fileSelection.focus(FocusDirective.LAST)
82+
<Tooltip content="Jump to last selected file">
83+
<SvgIcon
84+
className={classNames(styles.svgIcon, styles.alignCenter)}
85+
height={28}
86+
pathData={CHEVRON_END_PATH_DATA}
87+
viewBox={CHEVRON_VIEW_BOX}
88+
onClick={() =>
89+
dispatch(
90+
selection.actions.setFileSelection(
91+
fileSelection.focus(FocusDirective.LAST)
92+
)
7093
)
71-
)
72-
}
73-
title="Jump to last selected file"
74-
/>
94+
}
95+
/>
96+
</Tooltip>
7597
</div>
7698
</div>
7799
);

0 commit comments

Comments
 (0)