Skip to content

Commit a71c63b

Browse files
crhallbergcrhallberg
committed
css: status btn improvements.
1 parent 929a488 commit a71c63b

File tree

8 files changed

+85
-49
lines changed

8 files changed

+85
-49
lines changed

‎client/components/edit/ObjectOrder.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const ObjectOrder = ({ pid }: ObjectOrderProps): React.ReactElement => {
7272
<div>{statusMessage}</div>
7373
) : (
7474
<div>
75-
Current sort: {currentSort}
75+
Current sort: {currentSort}&nbsp;
7676
<button
7777
onClick={() => {
7878
changeSort(otherSort);

‎client/components/edit/ObjectStatus.module.css

Lines changed: 36 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,47 @@
11
.status_btn {
22
min-width: 120px;
3-
text-align: start;
4-
}
53

6-
.active .indicator {
7-
color: var(--object-status-active);
8-
}
9-
.active:is(:hover, :focus) .indicator {
10-
color: var(--object-status-active-hover);
4+
&:is(:hover, &:focus) {
5+
color: white;
6+
}
117
}
128

13-
.inactive .indicator {
14-
color: var(--object-status-inactive);
15-
}
16-
.inactive:is(:hover, :focus) .indicator {
17-
color: var(--object-status-inactive-hover);
18-
}
9+
.status_btn.active {
10+
background-color: var(--object-status-active);
1911

20-
.deleted .indicator {
21-
color: var(--object-status-deleted);
12+
&:hover, &:focus {
13+
color: white;
14+
background-color: var(--object-status-active-text);
15+
border-color: var(--object-status-active-text);
16+
}
2217
}
23-
.deleted:is(:hover, :focus) .indicator {
24-
color: var(--object-status-deleted-hover);
18+
19+
.status_btn.inactive {
20+
background-color: var(--object-status-inactive);
21+
22+
&:hover, &:focus {
23+
color: white;
24+
background-color: var(--object-status-inactive-text);
25+
border-color: var(--object-status-inactive-text);
26+
}
2527
}
2628

27-
.unknown .indicator {
28-
color: var(--object-status-unknown);
29+
.status_btn.deleted {
30+
background-color: var(--object-status-deleted);
31+
32+
&:hover, &:focus {
33+
color: white;
34+
background-color: var(--object-status-deleted-text);
35+
border-color: var(--object-status-deleted-text);
36+
}
2937
}
30-
.unknown:is(:hover, :focus) .indicator {
31-
color: var(--object-status-unknown-hover);
38+
39+
.status_btn.unknown {
40+
background-color: var(--object-status-unknown);
41+
42+
&:hover, &:focus {
43+
color: white;
44+
background-color: var(--object-status-unknown-text);
45+
border-color: var(--object-status-unknown-text);
46+
}
3247
}

‎client/components/edit/ObjectSummary.module.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@
33
padding-block: 1rem;
44
color: var(--info-text);
55
background-color: var(--info);
6-
border: 1px solid var(--sky-500);
6+
border: 1px solid var(--sky-400);
77
}
88

99
.infobox h2 {
1010
margin: 0;
1111
}
1212

1313
.infobox.infobox button {
14-
width: auto;
15-
margin-inline-end: 1rem;
16-
margin-block-end: 1rem;
14+
min-width: unset;
15+
margin-inline-end: 1ch;
16+
font-size: 10pt;
1717
color: var(--button-text);
1818
background-color: var(--button-face);
1919
border-color: var(--info-text);

‎client/components/edit/ObjectSummary.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const ObjectSummary = (): React.ReactElement => {
3939
</div>
4040
<h2>{title}</h2>
4141
<div>{HtmlReactParser(description)}</div>
42-
{loaded ? <ObjectButtonBar pid={currentPid} /> : ""}
42+
{loaded ? <div style={{ marginBlock: "1rem" }}><ObjectButtonBar pid={currentPid} /></div> : ""}
4343
{loaded ? <ObjectOrder pid={currentPid} /> : ""}
4444
{loaded ? <ObjectChildCounts pid={currentPid} /> : ""}
4545
PID: {currentPid} <CopyPidButton pid={currentPid} />

‎client/components/edit/children/ChildList.module.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,11 @@ svg.childlist__expandicon {
3636
color: var(--text-muted);
3737
}
3838

39+
.childlist__toggles {
40+
display: flex;
41+
gap: 1ch;
42+
}
43+
3944
/* Nested */
4045

4146
.childlist__list {

‎client/components/edit/children/ChildList.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -127,25 +127,26 @@ export const ChildList = ({
127127
const endNumber = startNumber + pageSize - 1;
128128
const paginatorLabel =
129129
children.numFound > 1 ? (
130-
<p className={styles.childlist__pagination}>
130+
<p class={styles.childlist__pagination}>
131131
Showing {startNumber} - {children.numFound < endNumber ? children.numFound : endNumber} of{" "}
132132
{children.numFound}
133133
</p>
134134
) : null;
135135
return (
136136
<div className={styles.childlist}>
137137
<Grid container spacing={2} alignItems="center">
138-
<Grid item xs="auto" sx={{ "&:empty": { display: "none" } }}>
139-
{thumbsButton}
140-
{modelsButton}
141-
{childButton}
142-
</Grid>
143138
<Grid item xs="auto">
144139
{paginatorLabel}
145140
</Grid>
146141
<Grid item xs="auto">
147142
{paginator}
148143
</Grid>
144+
<Grid item xs>&nbsp;</Grid>
145+
<Grid item xs="auto" className={styles.childlist__toggles}>
146+
{thumbsButton}
147+
{modelsButton}
148+
{childButton}
149+
</Grid>
149150
</Grid>
150151
<ul className={styles.childlist__list}>{contents.length ? contents : <em>Empty.</em>}</ul>
151152
</div>

‎client/components/edit/datastream/Datastream.module.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,23 @@
22
color: var(--selected-text);
33
background-color: var(--selected);
44
}
5+
6+
div[role="group"] .datastreamControlButton {
7+
font-size: 14pt;
8+
color: inherit;
9+
border-color: var(--mute);
10+
opacity: 0.75;
11+
transition: none;
12+
13+
&:disabled {
14+
opacity: 0.75;
15+
color: var(--mute);
16+
border-color: var(--mute);
17+
}
18+
19+
&:hover,
20+
&:focus {
21+
color: white;
22+
background-color: black;
23+
}
24+
}

‎client/components/edit/datastream/DatastreamControlButton.tsx

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState } from "react";
2-
import LoadingButton from "@mui/lab/LoadingButton";
3-
import Tooltip from "@mui/material/Tooltip";
2+
import styles from "./Datastream.module.css";
3+
import Button from "@mui/material/Button";
44
import DataObject from "@mui/icons-material/DataObject";
55
import Download from "@mui/icons-material/Download";
66
import Delete from "@mui/icons-material/Delete";
@@ -52,20 +52,15 @@ const DatastreamControlButton = ({
5252
};
5353
};
5454
return (
55-
<Tooltip title={modalState}>
56-
<span>
57-
<LoadingButton
58-
className="datastreamControlButton"
59-
loading={isLoading}
60-
aria-label={modalState}
61-
disabled={modalState !== "Upload" && disabled}
62-
onClick={onClick(modalState)}
63-
size="small"
64-
>
65-
{Icons[modalState]}
66-
</LoadingButton>
67-
</span>
68-
</Tooltip>
55+
<Button
56+
className={styles.datastreamControlButton}
57+
disabled={modalState !== "Upload" && disabled}
58+
onClick={onClick(modalState)}
59+
aria-label={modalState}
60+
title={modalState}
61+
>
62+
{Icons[modalState]}
63+
</Button>
6964
);
7065
};
7166

0 commit comments

Comments
 (0)