Skip to content

Commit f35cc2d

Browse files
gregorydlogangregorydlogan
committed
Merge branch 'unify-buttons' of Arnei/opencast-admin-interface into r/17.x
Pull request #1355 Unify buttons
2 parents e11a88c + 7a8297d commit f35cc2d

File tree

63 files changed

+337
-341
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+337
-341
lines changed

‎src/components/Header.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import { IconContext } from "react-icons";
2525
import ButtonLikeAnchor from "./shared/ButtonLikeAnchor";
2626
import { ModalHandle } from "./shared/modals/Modal";
2727
import { broadcastLogout } from "../utils/broadcastSync";
28+
import BaseButton from "./shared/BaseButton";
2829

2930
// References for detecting a click outside of the container of the dropdown menus
3031
const containerLang = React.createRef<HTMLDivElement>();
@@ -144,11 +145,11 @@ const Header = () => {
144145
{/* Select language */}
145146
<div className="nav-dd lang-dd" id="lang-dd" ref={containerLang}>
146147
<Tooltip active={!displayMenuLang} title={t("LANGUAGE")}>
147-
<button className="lang" onClick={() => setMenuLang(!displayMenuLang)}>
148+
<BaseButton className="lang" onClick={() => setMenuLang(!displayMenuLang)}>
148149
<IconContext.Provider value={{ style: {fontSize: "20px"} }}>
149150
<HiTranslate />
150151
</IconContext.Provider>
151-
</button>
152+
</BaseButton>
152153
</Tooltip>
153154
{displayMenuLang && <MenuLang handleChangeLanguage={handleChangeLanguage}/>}
154155
</div>
@@ -192,14 +193,14 @@ const Header = () => {
192193
ref={containerNotify}
193194
>
194195
<Tooltip active={!displayMenuNotify} title={t("SYSTEM_NOTIFICATIONS")}>
195-
<button onClick={() => setMenuNotify(!displayMenuNotify)}>
196+
<BaseButton onClick={() => setMenuNotify(!displayMenuNotify)}>
196197
<i className="fa fa-bell" aria-hidden="true" />
197198
{errorCounter !== 0 && (
198199
<span id="error-count" className="badge">
199200
{errorCounter}
200201
</span>
201202
)}
202-
</button>
203+
</BaseButton>
203204
</Tooltip>
204205
{/* Click on the bell icon, a dropdown menu with all services in serviceList and their status opens */}
205206
{displayMenuNotify && (
@@ -227,11 +228,11 @@ const Header = () => {
227228
ref={containerHelp}
228229
>
229230
<Tooltip active={!displayMenuHelp} title={t("HELP.HELP")}>
230-
<button
231+
<BaseButton
231232
onClick={() => setMenuHelp(!displayMenuHelp)}
232233
>
233234
<span className="fa fa-question-circle"></span>
234-
</button>
235+
</BaseButton>
235236
</Tooltip>
236237
{/* Click on the help icon, a dropdown menu with documentation, REST-docs and shortcuts (if available) opens */}
237238
{displayMenuHelp && (
@@ -248,13 +249,13 @@ const Header = () => {
248249

249250
{/* Username */}
250251
<div className="nav-dd user-dd" id="user-dd" ref={containerUser}>
251-
<button
252+
<BaseButton
252253
className="h-nav"
253254
onClick={() => setMenuUser(!displayMenuUser)}
254255
>
255256
{user.user.name || user.user.username}
256257
<span className="dropdown-icon" />
257-
</button>
258+
</BaseButton>
258259
{/* Click on username, a dropdown menu with the option to logout opens */}
259260
{displayMenuUser && <MenuUser />}
260261
</div>
@@ -281,7 +282,7 @@ const MenuLang = ({ handleChangeLanguage }: { handleChangeLanguage: (code: strin
281282
{languages.map((language, key) => (
282283
<li key={key}>
283284
<ButtonLikeAnchor
284-
extraClassName={(i18n.language === language.code ? "selected" : "")}
285+
className={(i18n.language === language.code ? "selected" : "")}
285286
onClick={() => handleChangeLanguage(language.code)}
286287
>
287288
{language.long}
@@ -312,8 +313,7 @@ const MenuNotify = ({
312313
{healthStatus.map((service, key) => (
313314
<li key={key}>
314315
{!!service.status && (
315-
<button
316-
className="button-like-anchor"
316+
<ButtonLikeAnchor
317317
onClick={() => redirectToServices()}
318318
>
319319
<span> {service.name} </span>
@@ -326,7 +326,7 @@ const MenuNotify = ({
326326
{service.status}
327327
</span>
328328
)}
329-
</button>
329+
</ButtonLikeAnchor>
330330
)}
331331
</li>
332332
))}

‎src/components/NavBar.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import NewResourceModal, { NewResource } from "./shared/NewResourceModal";
1010
import { useHotkeys } from "react-hotkeys-hook";
1111
import { ModalHandle } from "./shared/modals/Modal";
1212
import { ParseKeys } from "i18next";
13+
import BaseButton from "./shared/BaseButton";
1314

1415
/**
1516
* Component that renders the nav bar
@@ -105,13 +106,13 @@ const NavBar = ({
105106
{create &&
106107
<div className="btn-group">
107108
{hasAccess(create.accessRole, user) && (
108-
<button
109+
<BaseButton
109110
className="add"
110111
onClick={showNewResourceModal}
111112
>
112113
<i className="fa fa-plus" />
113114
<span>{t(create.text)}</span>
114-
</button>
115+
</BaseButton>
115116
)}
116117
</div>
117118
}

‎src/components/configuration/partials/ThemesActionsCell.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ import { useAppDispatch } from "../../../store";
77
import { deleteTheme, ThemeDetailsType } from "../../../slices/themeSlice";
88
import ThemeDetails from "./wizard/ThemeDetails";
99
import { ActionCellDelete } from "../../shared/ActionCellDelete";
10-
import { IconButton } from "../../shared/IconButton";
1110
import { Modal, ModalHandle } from "../../shared/modals/Modal";
1211
import { useTranslation } from "react-i18next";
12+
import ButtonLikeAnchor from "../../shared/ButtonLikeAnchor";
1313

1414
/**
1515
* This component renders the action cells of themes in the table view
@@ -44,9 +44,9 @@ const ThemesActionsCell = ({
4444
return (
4545
<>
4646
{/* edit themes */}
47-
<IconButton
48-
callback={() => showThemeDetails()}
49-
iconClassname={"more"}
47+
<ButtonLikeAnchor
48+
onClick={() => showThemeDetails()}
49+
className={"more"}
5050
editAccessRole={"ROLE_UI_THEMES_EDIT"}
5151
tooltipText={"CONFIGURATION.THEMES.TABLE.TOOLTIP.DETAILS"}
5252
/>

‎src/components/configuration/partials/wizard/WatermarkPage.tsx

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButt
77
import FileUpload from "../../../shared/wizard/FileUpload";
88
import Notifications from "../../../shared/Notifications";
99
import ModalContentTable from "../../../shared/modals/ModalContentTable";
10+
import BaseButton from "../../../shared/BaseButton";
1011

1112
/**
1213
* This component renders the watermark page for new themes in the new themes wizard
@@ -97,7 +98,7 @@ const WatermarkPage = <T extends RequiredFormProps>({
9798
<div className="video-container">
9899
<div className="watermark-config">
99100
<div className="position-selection">
100-
<button
101+
<BaseButton
101102
className={cn(
102103
"position-button position-top-left",
103104
{
@@ -111,8 +112,8 @@ const WatermarkPage = <T extends RequiredFormProps>({
111112
{t(
112113
"CONFIGURATION.THEMES.DETAILS.WATERMARK.TOP_LEFT"
113114
)}
114-
</button>
115-
<button
115+
</BaseButton>
116+
<BaseButton
116117
className={cn(
117118
"position-button position-top-right",
118119
{
@@ -126,8 +127,8 @@ const WatermarkPage = <T extends RequiredFormProps>({
126127
{t(
127128
"CONFIGURATION.THEMES.DETAILS.WATERMARK.TOP_RIGHT"
128129
)}
129-
</button>
130-
<button
130+
</BaseButton>
131+
<BaseButton
131132
className={cn(
132133
"position-button position-bottom-left",
133134
{
@@ -141,8 +142,8 @@ const WatermarkPage = <T extends RequiredFormProps>({
141142
{t(
142143
"CONFIGURATION.THEMES.DETAILS.WATERMARK.BOTTOM_LEFT"
143144
)}
144-
</button>
145-
<button
145+
</BaseButton>
146+
<BaseButton
146147
className={cn(
147148
"position-button position-bottom-right",
148149
{
@@ -156,7 +157,7 @@ const WatermarkPage = <T extends RequiredFormProps>({
156157
{t(
157158
"CONFIGURATION.THEMES.DETAILS.WATERMARK.BOTTOM_RIGHT"
158159
)}
159-
</button>
160+
</BaseButton>
160161
</div>
161162
</div>
162163
</div>

‎src/components/events/partials/EventActionCell.tsx

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ import { Event, deleteEvent } from "../../../slices/eventSlice";
1616
import { Tooltip } from "../../shared/Tooltip";
1717
import { openModal } from "../../../slices/eventDetailsSlice";
1818
import { ActionCellDelete } from "../../shared/ActionCellDelete";
19-
import { IconButton } from "../../shared/IconButton";
2019
import { Modal, ModalHandle } from "../../shared/modals/Modal";
20+
import ButtonLikeAnchor from "../../shared/ButtonLikeAnchor";
2121

2222
/**
2323
* This component renders the action cells of events in the table view
@@ -91,18 +91,18 @@ const EventActionCell = ({
9191
)}
9292

9393
{/* Open event details */}
94-
<IconButton
95-
callback={onClickEventDetails}
96-
iconClassname={"more"}
94+
<ButtonLikeAnchor
95+
onClick={onClickEventDetails}
96+
className={"more"}
9797
editAccessRole={"ROLE_UI_EVENTS_DETAILS_VIEW"}
9898
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.DETAILS"}
9999
/>
100100

101101
{/* If event belongs to a series then the corresponding series details can be opened */}
102102
{!!row.series && (
103-
<IconButton
104-
callback={onClickSeriesDetails}
105-
iconClassname={"more-series"}
103+
<ButtonLikeAnchor
104+
onClick={onClickSeriesDetails}
105+
className={"more-series"}
106106
editAccessRole={"ROLE_UI_SERIES_DETAILS_VIEW"}
107107
tooltipText={"EVENTS.SERIES.TABLE.TOOLTIP.DETAILS"}
108108
/>
@@ -139,45 +139,45 @@ const EventActionCell = ({
139139

140140
{/* If the event has comments and no open comments then the comment tab of event details can be opened directly */}
141141
{row.has_comments && !row.has_open_comments && (
142-
<IconButton
143-
callback={() => onClickComments()}
144-
iconClassname={"comments"}
142+
<ButtonLikeAnchor
143+
onClick={() => onClickComments()}
144+
className={"comments"}
145145
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS"}
146146
/>
147147
)}
148148

149149
{/* If the event has comments and open comments then the comment tab of event details can be opened directly */}
150150
{row.has_comments && row.has_open_comments && (
151-
<IconButton
152-
callback={() => onClickComments()}
153-
iconClassname={"comments-open"}
151+
<ButtonLikeAnchor
152+
onClick={() => onClickComments()}
153+
className={"comments-open"}
154154
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS"}
155155
/>
156156
)}
157157

158158
{/*If the event is in in a paused workflow state then a warning icon is shown and workflow tab of event
159159
details can be opened directly */}
160160
{row.workflow_state === "PAUSED" &&
161-
<IconButton
162-
callback={() => onClickWorkflow()}
163-
iconClassname={"fa fa-warning"}
161+
<ButtonLikeAnchor
162+
onClick={() => onClickWorkflow()}
163+
className={"fa fa-warning"}
164164
editAccessRole={"ROLE_UI_EVENTS_DETAILS_WORKFLOWS_EDIT"}
165165
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.PAUSED_WORKFLOW"}
166166
/>
167167
}
168168

169169
{/* Open assets tab of event details directly*/}
170-
<IconButton
171-
callback={() => onClickAssets()}
172-
iconClassname={"fa fa-folder-open"}
170+
<ButtonLikeAnchor
171+
onClick={() => onClickAssets()}
172+
className={"fa fa-folder-open"}
173173
editAccessRole={"ROLE_UI_EVENTS_DETAILS_ASSETS_VIEW"}
174174
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.ASSETS"}
175175
/>
176176

177177
{/* Open dialog for embedded code*/}
178-
<IconButton
179-
callback={() => showEmbeddingCodeModal()}
180-
iconClassname={"fa fa-link"}
178+
<ButtonLikeAnchor
179+
onClick={() => showEmbeddingCodeModal()}
180+
className={"fa fa-link"}
181181
editAccessRole={"ROLE_UI_EVENTS_EMBEDDING_CODE_VIEW"}
182182
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.EMBEDDING_CODE"}
183183
/>

‎src/components/events/partials/EventsLocationCell.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { loadEventsIntoTable } from "../../../thunks/tableThunks";
55
import { useAppDispatch, useAppSelector } from "../../../store";
66
import { fetchEvents } from "../../../slices/eventSlice";
77
import { Event } from "../../../slices/eventSlice";
8-
import { IconButton } from "../../shared/IconButton";
8+
import ButtonLikeAnchor from "../../shared/ButtonLikeAnchor";
99

1010
/**
1111
* This component renders the location cells of events in the table view
@@ -31,13 +31,13 @@ const EventsLocationCell = ({
3131

3232
return (
3333
// Link template for location of event
34-
<IconButton
35-
callback={() => addFilter(row.location)}
36-
iconClassname={"crosslink"}
34+
<ButtonLikeAnchor
35+
onClick={() => addFilter(row.location)}
36+
className={"crosslink"}
3737
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.LOCATION"}
3838
>
3939
{row.location}
40-
</IconButton>
40+
</ButtonLikeAnchor>
4141
);
4242
};
4343

‎src/components/events/partials/EventsSeriesCell.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { loadEventsIntoTable } from "../../../thunks/tableThunks";
55
import { useAppDispatch, useAppSelector } from "../../../store";
66
import { fetchEvents } from "../../../slices/eventSlice";
77
import { Event } from "../../../slices/eventSlice";
8-
import { IconButton } from "../../shared/IconButton";
8+
import ButtonLikeAnchor from "../../shared/ButtonLikeAnchor";
99

1010
/**
1111
* This component renders the series cells of events in the table view
@@ -32,16 +32,16 @@ const EventsSeriesCell = ({
3232
return (
3333
!!row.series ? (
3434
// Link template for series of event
35-
<IconButton
36-
callback={() => row.series
35+
<ButtonLikeAnchor
36+
onClick={() => row.series
3737
? addFilter(row.series.id)
3838
: console.error("Tried to sort by a series, but the series did not exist.")
3939
}
40-
iconClassname={"crosslink"}
40+
className={"crosslink"}
4141
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.SERIES"}
4242
>
4343
{row.series.title}
44-
</IconButton>
44+
</ButtonLikeAnchor>
4545
)
4646
: <></>
4747
);

‎src/components/events/partials/EventsStatusCell.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import {
88
} from "../../../slices/eventDetailsSlice";
99
import { EventDetailsPage } from "./modals/EventDetails";
1010
import { hasScheduledStatus } from "../../../utils/eventDetailsUtils";
11-
import { IconButton } from "../../shared/IconButton";
1211
import { ParseKeys } from "i18next";
12+
import ButtonLikeAnchor from "../../shared/ButtonLikeAnchor";
1313

1414
/**
1515
* This component renders the status cells of events in the table view
@@ -42,13 +42,13 @@ const EventsStatusCell = ({
4242
};
4343

4444
return (
45-
<IconButton
46-
callback={() => openStatusModal()}
47-
iconClassname={"crosslink"}
45+
<ButtonLikeAnchor
46+
onClick={() => openStatusModal()}
47+
className={"crosslink"}
4848
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.STATUS"}
4949
>
5050
{t(row.displayable_status as ParseKeys)}
51-
</IconButton>
51+
</ButtonLikeAnchor>
5252
);
5353
};
5454

0 commit comments

Comments
 (0)