Skip to content

Use @mui/material's Tooltip instead of title attributes. #593

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lkiesow merged 1 commit into from
Jun 7, 2024
Merged

Use @mui/material's Tooltip instead of title attributes. #593

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 64 additions & 56 deletions src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import { useHotkeys } from "react-hotkeys-hook";
import { useAppDispatch, useAppSelector } from "../store";
import { HealthStatus, fetchHealthStatus } from "../slices/healthSlice";
import { UserInfoState } from "../slices/userInfoSlice";
import { Tooltip } from "./shared/Tooltip";

// Get code, flag and name of the current language
const currentLanguage = getCurrentLanguageInformation();
Expand Down Expand Up @@ -161,13 +162,14 @@ const Header = ({
<nav className="header-nav nav-dd-container" id="nav-dd-container">
{/* Select language */}
<div className="nav-dd lang-dd" id="lang-dd" ref={containerLang}>
<Tooltip title={t("LANGUAGE")}>
<div
className="lang"
title={t("LANGUAGE")}
onClick={() => setMenuLang(!displayMenuLang)}
>
<img src={currentLanguage?.flag} alt={currentLanguage?.code} />
</div>
</Tooltip>
{/* Click on the flag icon, a dropdown menu with all available languages opens */}
{displayMenuLang && <MenuLang />}
</div>
Expand All @@ -178,51 +180,56 @@ const Header = ({
otherwise the app crashes */}
{!!orgProperties &&
!!orgProperties["org.opencastproject.admin.mediamodule.url"] && (
<div className="nav-dd" title={t("MEDIAMODULE")}>
<a
href={
orgProperties["org.opencastproject.admin.mediamodule.url"]
}
target="_blank" rel="noreferrer"
>
<span className="fa fa-play-circle" />
</a>
</div>
<Tooltip title={t("MEDIAMODULE")}>
<div className="nav-dd">
<a
href={
orgProperties["org.opencastproject.admin.mediamodule.url"]
}
target="_blank" rel="noreferrer"
>
<span className="fa fa-play-circle" />
</a>
</div>
</Tooltip>
)}

{/* Opencast Studio */}
{hasAccess("ROLE_STUDIO", user) && (
<div className="nav-dd" title="Studio">
<a href={studioURL} target="_blank" rel="noreferrer">
<span className="fa fa-video-camera" />
</a>
</div>
<Tooltip title="Studio">
<div className="nav-dd">
<a href={studioURL} target="_blank" rel="noreferrer">
<span className="fa fa-video-camera" />
</a>
</div>
</Tooltip>
)}

{/* System warnings and notifications */}
{hasAccess("ROLE_ADMIN", user) && (
<div
className="nav-dd info-dd"
id="info-dd"
title={t("SYSTEM_NOTIFICATIONS")}
ref={containerNotify}
>
<div onClick={() => setMenuNotify(!displayMenuNotify)}>
<i className="fa fa-bell" aria-hidden="true" />
{errorCounter !== 0 && (
<span id="error-count" className="badge">
{errorCounter}
</span>
)}
{/* Click on the bell icon, a dropdown menu with all services in serviceList and their status opens */}
{displayMenuNotify && (
<MenuNotify
healthStatus={healthStatus}
redirectToServices={redirectToServices}
/>
)}
<Tooltip title={t("SYSTEM_NOTIFICATIONS")}>
<div
className="nav-dd info-dd"
id="info-dd"
ref={containerNotify}
>
<div onClick={() => setMenuNotify(!displayMenuNotify)}>
<i className="fa fa-bell" aria-hidden="true" />
{errorCounter !== 0 && (
<span id="error-count" className="badge">
{errorCounter}
</span>
)}
{/* Click on the bell icon, a dropdown menu with all services in serviceList and their status opens */}
{displayMenuNotify && (
<MenuNotify
healthStatus={healthStatus}
redirectToServices={redirectToServices}
/>
)}
</div>
</div>
</div>
</Tooltip>
)}

{/* Help */}
Expand All @@ -236,27 +243,28 @@ const Header = ({
!!orgProperties[
"org.opencastproject.admin.help.restdocs.url"
]) && (
<div
title="Help"
className="nav-dd"
id="help-dd"
ref={containerHelp}
>
<Tooltip title="Help">
<div
className="fa fa-question-circle"
onClick={() => setMenuHelp(!displayMenuHelp)}
/>
{/* Click on the help icon, a dropdown menu with documentation, REST-docs and shortcuts (if available) opens */}
{displayMenuHelp && (
<MenuHelp
hideMenuHelp={hideMenuHelp}
showRegistrationModal={showRegistrationModal}
showHotKeyCheatSheet={showHotKeyCheatSheet}
orgProperties={orgProperties}
user={user}
className="nav-dd"
id="help-dd"
ref={containerHelp}
>
<div
className="fa fa-question-circle"
onClick={() => setMenuHelp(!displayMenuHelp)}
/>
)}
</div>
{/* Click on the help icon, a dropdown menu with documentation, REST-docs and shortcuts (if available) opens */}
{displayMenuHelp && (
<MenuHelp
hideMenuHelp={hideMenuHelp}
showRegistrationModal={showRegistrationModal}
showHotKeyCheatSheet={showHotKeyCheatSheet}
orgProperties={orgProperties}
user={user}
/>
)}
</div>
</Tooltip>
)}

{/* Username */}
Expand Down
23 changes: 13 additions & 10 deletions src/components/configuration/partials/ThemesActionsCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { getUserInformation } from "../../../selectors/userInfoSelectors";
import { hasAccess } from "../../../utils/utils";
import { useAppDispatch, useAppSelector } from "../../../store";
import { deleteTheme } from "../../../slices/themeSlice";
import { Tooltip } from "../../shared/Tooltip";

/**
* This component renders the action cells of themes in the table view
Expand Down Expand Up @@ -49,11 +50,12 @@ const ThemesActionsCell = ({
<>
{/* edit themes */}
{hasAccess("ROLE_UI_THEMES_EDIT", user) && (
<button
onClick={() => showThemeDetails()}
className="button-like-anchor more"
title={t("CONFIGURATION.THEMES.TABLE.TOOLTIP.DETAILS")}
/>
<Tooltip title={t("CONFIGURATION.THEMES.TABLE.TOOLTIP.DETAILS")}>
<button
onClick={() => showThemeDetails()}
className="button-like-anchor more"
/>
</Tooltip>
)}

{displayThemeDetails && (
Expand All @@ -66,11 +68,12 @@ const ThemesActionsCell = ({

{/* delete themes */}
{hasAccess("ROLE_UI_THEMES_DELETE", user) && (
<button
onClick={() => setDeleteConfirmation(true)}
className="button-like-anchor remove ng-scope ng-isolate-scope"
title={t("CONFIGURATION.THEMES.TABLE.TOOLTIP.DELETE")}
/>
<Tooltip title={t("CONFIGURATION.THEMES.TABLE.TOOLTIP.DELETE")}>
<button
onClick={() => setDeleteConfirmation(true)}
className="button-like-anchor remove ng-scope ng-isolate-scope"
/>
</Tooltip>
)}

{displayDeleteConfirmation && (
Expand Down
104 changes: 58 additions & 46 deletions src/components/events/partials/EventActionCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
fetchSeriesDetailsTheme,
} from "../../../slices/seriesDetailsSlice";
import { deleteEvent } from "../../../slices/eventSlice";
import { Tooltip } from "../../shared/Tooltip";

/**
* This component renders the action cells of events in the table view
Expand Down Expand Up @@ -119,30 +120,33 @@ const EventActionCell = ({

{/* Open event details */}
{hasAccess("ROLE_UI_EVENTS_DETAILS_VIEW", user) && (
<button
onClick={() => onClickEventDetails()}
className="button-like-anchor more"
title={t("EVENTS.EVENTS.TABLE.TOOLTIP.DETAILS")}
/>
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.DETAILS")}>
<button
onClick={() => onClickEventDetails()}
className="button-like-anchor more"
/>
</Tooltip>
)}

{/* If event belongs to a series then the corresponding series details can be opened */}
{!!row.series && hasAccess("ROLE_UI_SERIES_DETAILS_VIEW", user) && (
<button
onClick={() => onClickSeriesDetails()}
className="button-like-anchor more-series"
title={t("EVENTS.SERIES.TABLE.TOOLTIP.DETAILS")}
/>
<Tooltip title={t("EVENTS.SERIES.TABLE.TOOLTIP.DETAILS")}>
<button
onClick={() => onClickSeriesDetails()}
className="button-like-anchor more-series"
/>
</Tooltip>
)}

{/* Delete an event */}
{/*TODO: needs to be checked if event is published */}
{hasAccess("ROLE_UI_EVENTS_DELETE", user) && (
<button
onClick={() => setDeleteConfirmation(true)}
className="button-like-anchor remove"
title={t("EVENTS.EVENTS.TABLE.TOOLTIP.DELETE")}
/>
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.DELETE")}>
<button
onClick={() => setDeleteConfirmation(true)}
className="button-like-anchor remove"
/>
</Tooltip>
)}

{/* Confirmation for deleting an event*/}
Expand All @@ -158,64 +162,72 @@ const EventActionCell = ({

{/* If the event has an preview then the editor can be opened and status if it needs to be cut is shown */}
{!!row.has_preview && hasAccess("ROLE_UI_EVENTS_EDITOR_VIEW", user) && (
<a
href={`/editor-ui/index.html?id=${row.id}`}
className="cut"
<Tooltip
title={
row.needs_cutting
? t("EVENTS.EVENTS.TABLE.TOOLTIP.EDITOR_NEEDS_CUTTING")
: t("EVENTS.EVENTS.TABLE.TOOLTIP.EDITOR")
}
target="_blank" rel="noreferrer"
>
{row.needs_cutting && <span id="badge" className="badge" />}
</a>
<a
href={`/editor-ui/index.html?id=${row.id}`}
className="cut"
target="_blank" rel="noreferrer"
>
{row.needs_cutting && <span id="badge" className="badge" />}
</a>
</Tooltip>
)}

{/* If the event has comments and no open comments then the comment tab of event details can be opened directly */}
{row.has_comments && !row.has_open_comments && (
<button
onClick={() => onClickComments()}
title={t("EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS")}
className="button-like-anchor comments"
/>
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS")}>
<button
onClick={() => onClickComments()}
className="button-like-anchor comments"
/>
</Tooltip>
)}

{/* If the event has comments and open comments then the comment tab of event details can be opened directly */}
{row.has_comments && row.has_open_comments && (
<button
onClick={() => onClickComments()}
title={t("EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS")}
className="button-like-anchor comments-open"
/>
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS")}>
<button
onClick={() => onClickComments()}
className="button-like-anchor comments-open"
/>
</Tooltip>
)}

{/*If the event is in in a paused workflow state then a warning icon is shown and workflow tab of event
details can be opened directly */}
{row.workflow_state === "PAUSED" &&
hasAccess("ROLE_UI_EVENTS_DETAILS_WORKFLOWS_EDIT", user) && (
<button
title={t("EVENTS.EVENTS.TABLE.TOOLTIP.PAUSED_WORKFLOW")}
onClick={() => onClickWorkflow()}
className="button-like-anchor fa fa-warning"
/>
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.PAUSED_WORKFLOW")}>
<button
onClick={() => onClickWorkflow()}
className="button-like-anchor fa fa-warning"
/>
</Tooltip>
)}

{/* Open assets tab of event details directly*/}
{hasAccess("ROLE_UI_EVENTS_DETAILS_ASSETS_VIEW", user) && (
<button
onClick={() => onClickAssets()}
title={t("EVENTS.EVENTS.TABLE.TOOLTIP.ASSETS")}
className="button-like-anchor fa fa-folder-open"
/>
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.ASSETS")}>
<button
onClick={() => onClickAssets()}
className="button-like-anchor fa fa-folder-open"
/>
</Tooltip>
)}
{/* Open dialog for embedded code*/}
{hasAccess("ROLE_UI_EVENTS_EMBEDDING_CODE_VIEW", user) && (
<button
onClick={() => showEmbeddingCodeModal()}
title={t("EVENTS.EVENTS.TABLE.TOOLTIP.EMBEDDING_CODE")}
className="button-like-anchor fa fa-link"
/>
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.EMBEDDING_CODE")}>
<button
onClick={() => showEmbeddingCodeModal()}
className="button-like-anchor fa fa-link"
/>
</Tooltip>
)}

{displayEmbeddingCodeModal && (
Expand Down
16 changes: 9 additions & 7 deletions src/components/events/partials/EventsDateCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { connect } from "react-redux";
import { useAppDispatch, useAppSelector } from "../../../store";
import { fetchEvents } from "../../../slices/eventSlice";
import { renderValidDate } from "../../../utils/dateUtils";
import { Tooltip } from "../../shared/Tooltip";

/**
* This component renders the start date cells of events in the table view
Expand Down Expand Up @@ -35,13 +36,14 @@ const EventsDateCell = ({

return (
// Link template for start date of event
<button
className="button-like-anchor crosslink"
title={t("EVENTS.EVENTS.TABLE.TOOLTIP.START")}
onClick={() => addFilter(row.date)}
>
{t("dateFormats.date.short", { date: renderValidDate(row.date) })}
</button>
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.START")}>
<button
className="button-like-anchor crosslink"
onClick={() => addFilter(row.date)}
>
{t("dateFormats.date.short", { date: renderValidDate(row.date) })}
</button>
</Tooltip>
);
};

Expand Down
Loading