Skip to content

Commit

Permalink
Add missing tooltips (#444)
Browse files Browse the repository at this point in the history
  • Loading branch information
@schroda
schroda authored Nov 5, 2023
1 parent d9d92a7 commit 4ab6172
Show file tree
Hide file tree
Showing 16 changed files with 240 additions and 178 deletions.
13 changes: 9 additions & 4 deletions src/components/library/LibraryToolbarMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,26 @@
*/

import FilterList from '@mui/icons-material/FilterList';
import { IconButton } from '@mui/material';
import { IconButton, Tooltip } from '@mui/material';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
import { LibraryOptionsPanel } from '@/components/library/LibraryOptionsPanel';

export const LibraryToolbarMenu: React.FC = () => {
const { t } = useTranslation();

const [open, setOpen] = useState(false);
const { options } = useLibraryOptionsContext();
const active = options.downloaded != null || options.unread != null;

return (
<>
<IconButton onClick={() => setOpen(!open)} color={active ? 'warning' : 'default'}>
<FilterList />
</IconButton>
<Tooltip title={t('settings.title')}>
<IconButton onClick={() => setOpen(!open)} color={active ? 'warning' : 'default'}>
<FilterList />
</IconButton>
</Tooltip>
<LibraryOptionsPanel open={open} onClose={() => setOpen(false)} />
</>
);
Expand Down
9 changes: 6 additions & 3 deletions src/components/library/UpdateChecker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { useMemo } from 'react';
import IconButton from '@mui/material/IconButton';
import RefreshIcon from '@mui/icons-material/Refresh';
import { useTranslation } from 'react-i18next';
import { Tooltip } from '@mui/material';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { makeToast } from '@/components/util/Toast';
import { UpdaterSubscription } from '@/lib/graphql/generated/graphql.ts';
Expand Down Expand Up @@ -59,8 +60,10 @@ export function UpdateChecker({ handleFinishedUpdate }: { handleFinishedUpdate:
};

return (
<IconButton onClick={onClick} disabled={loading}>
{loading ? <Progress progress={progress} /> : <RefreshIcon />}
</IconButton>
<Tooltip title={t('library.settings.global_update.title')}>
<IconButton onClick={onClick} disabled={loading}>
{loading ? <Progress progress={progress} /> : <RefreshIcon />}
</IconButton>
</Tooltip>
);
}
14 changes: 9 additions & 5 deletions src/components/manga/ChapterCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import DoneAll from '@mui/icons-material/DoneAll';
import Download from '@mui/icons-material/Download';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import RemoveDone from '@mui/icons-material/RemoveDone';
import { CardActionArea, Checkbox, ListItemIcon, ListItemText, Stack } from '@mui/material';
import { CardActionArea, Checkbox, ListItemIcon, ListItemText, Stack, Tooltip } from '@mui/material';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import IconButton from '@mui/material/IconButton';
Expand Down Expand Up @@ -150,11 +150,15 @@ export const ChapterCard: React.FC<IProps> = (props: IProps) => {
{dc && <DownloadStateIndicator download={dc} />}

{selected === null ? (
<IconButton aria-label="more" onClick={handleMenuClick} size="large">
<MoreVertIcon />
</IconButton>
<Tooltip title={t('global.button.options')}>
<IconButton aria-label="more" onClick={handleMenuClick} size="large">
<MoreVertIcon />
</IconButton>
</Tooltip>
) : (
<Checkbox checked={selected} />
<Tooltip title={t(selected ? 'global.button.deselect' : 'global.button.select')}>
<Checkbox checked={selected} />
</Tooltip>
)}
</CardContent>
</CardActionArea>
Expand Down
13 changes: 9 additions & 4 deletions src/components/manga/ChaptersToolbarMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@
*/

import FilterList from '@mui/icons-material/FilterList';
import { IconButton } from '@mui/material';
import { IconButton, Tooltip } from '@mui/material';
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import { ChapterListOptions, ChapterOptionsReducerAction } from '@/typings';
import { ChapterOptions } from '@/components/manga/ChapterOptions';
import { isFilterActive } from '@/components/manga/util';
Expand All @@ -19,14 +20,18 @@ interface IProps {
}

export const ChaptersToolbarMenu = ({ options, optionsDispatch }: IProps) => {
const { t } = useTranslation();

const [open, setOpen] = React.useState(false);
const isFiltered = isFilterActive(options);

return (
<>
<IconButton onClick={() => setOpen(true)}>
<FilterList color={isFiltered ? 'warning' : undefined} />
</IconButton>
<Tooltip title={t('settings.title')}>
<IconButton onClick={() => setOpen(true)}>
<FilterList color={isFiltered ? 'warning' : undefined} />
</IconButton>
</Tooltip>
<ChapterOptions
open={open}
onClose={() => setOpen(false)}
Expand Down
144 changes: 76 additions & 68 deletions src/components/navbar/ReaderNavBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
import Slide from '@mui/material/Slide';
import Fade from '@mui/material/Fade';
import Zoom from '@mui/material/Zoom';
import { Divider, FormControl, MenuItem, Select, styled } from '@mui/material';
import { Divider, FormControl, MenuItem, Select, styled, Tooltip } from '@mui/material';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
Expand Down Expand Up @@ -208,31 +208,35 @@ export function ReaderNavBar(props: IProps) {
>
<header>
{!settings.staticNav && (
<Tooltip title={t('reader.button.close_menu')}>
<IconButton
edge="start"
color="inherit"
aria-label="menu"
disableRipple
onClick={() => updateDrawer(false)}
size="large"
>
<KeyboardArrowLeftIcon />
</IconButton>
</Tooltip>
)}
<Typography variant="h1" textOverflow="ellipsis" overflow="hidden" sx={{ py: 1 }}>
{chapter.name}
</Typography>
<Tooltip title={t('reader.button.exit')}>
<IconButton
edge="start"
color="inherit"
aria-label="menu"
disableRipple
onClick={() => updateDrawer(false)}
onClick={handleClose}
size="large"
sx={{ mr: -1 }}
>
<KeyboardArrowLeftIcon />
<CloseIcon />
</IconButton>
)}
<Typography variant="h1" textOverflow="ellipsis" overflow="hidden" sx={{ py: 1 }}>
{chapter.name}
</Typography>
<IconButton
edge="start"
color="inherit"
aria-label="menu"
disableRipple
onClick={handleClose}
size="large"
sx={{ mr: -1 }}
>
<CloseIcon />
</IconButton>
</Tooltip>
</header>
<ListItem
ContainerComponent="div"
Expand Down Expand Up @@ -300,24 +304,25 @@ export function ReaderNavBar(props: IProps) {
<span>{t('reader.page_info.label.of_max_pages', { maxPages: chapter.pageCount })}</span>
</PageNavigation>
<ChapterNavigation>
<IconButton
title={t('reader.button.previous_chapter')}
sx={{ gridArea: 'pre' }}
disabled={disableChapterNavButtons || chapter.sourceOrder <= 1}
onClick={() =>
openNextChapter(ChapterOffset.PREV, (prevChapterIndex) => {
navigate(`/manga/${manga.id}/chapter/${prevChapterIndex}`, {
replace: true,
state: {
prevDrawerOpen: drawerOpen,
prevSettingsCollapseOpen: settingsCollapseOpen,
},
});
})
}
>
<KeyboardArrowLeftIcon />
</IconButton>
<Tooltip title={t('reader.button.previous_chapter')}>
<IconButton
sx={{ gridArea: 'pre' }}
disabled={disableChapterNavButtons || chapter.sourceOrder <= 1}
onClick={() =>
openNextChapter(ChapterOffset.PREV, (prevChapterIndex) => {
navigate(`/manga/${manga.id}/chapter/${prevChapterIndex}`, {
replace: true,
state: {
prevDrawerOpen: drawerOpen,
prevSettingsCollapseOpen: settingsCollapseOpen,
},
});
})
}
>
<KeyboardArrowLeftIcon />
</IconButton>
</Tooltip>
<FormControl
sx={{ gridArea: 'current' }}
size="small"
Expand Down Expand Up @@ -346,44 +351,47 @@ export function ReaderNavBar(props: IProps) {
))}
</Select>
</FormControl>
<IconButton
title={t('reader.button.next_chapter')}
sx={{ gridArea: 'next' }}
disabled={
disableChapterNavButtons ||
chapter.sourceOrder < 1 ||
chapter.sourceOrder >= manga.chapters.totalCount
}
onClick={() => {
openNextChapter(ChapterOffset.NEXT, (nextChapterIndex) =>
navigate(`/manga/${manga.id}/chapter/${nextChapterIndex}`, {
replace: true,
state: {
prevDrawerOpen: drawerOpen,
prevSettingsCollapseOpen: settingsCollapseOpen,
},
}),
);
}}
>
<KeyboardArrowRightIcon />
</IconButton>
<Tooltip title={t('reader.button.next_chapter')}>
<IconButton
sx={{ gridArea: 'next' }}
disabled={
disableChapterNavButtons ||
chapter.sourceOrder < 1 ||
chapter.sourceOrder >= manga.chapters.totalCount
}
onClick={() => {
openNextChapter(ChapterOffset.NEXT, (nextChapterIndex) =>
navigate(`/manga/${manga.id}/chapter/${nextChapterIndex}`, {
replace: true,
state: {
prevDrawerOpen: drawerOpen,
prevSettingsCollapseOpen: settingsCollapseOpen,
},
}),
);
}}
>
<KeyboardArrowRightIcon />
</IconButton>
</Tooltip>
</ChapterNavigation>
</Navigation>
</Root>
</Slide>
<Zoom in={!drawerOpen}>
<Fade in={!hideOpenButton}>
<OpenDrawerButton
edge="start"
aria-label="menu"
disableRipple
disableFocusRipple
onClick={() => updateDrawer(true)}
size="large"
>
<KeyboardArrowRightIcon />
</OpenDrawerButton>
<Tooltip title={t('reader.button.open_menu')}>
<OpenDrawerButton
edge="start"
aria-label="menu"
disableRipple
disableFocusRipple
onClick={() => updateDrawer(true)}
size="large"
>
<KeyboardArrowRightIcon />
</OpenDrawerButton>
</Tooltip>
</Fade>
</Zoom>
</>
Expand Down
22 changes: 12 additions & 10 deletions src/components/navbar/action/LangSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import Dialog from '@mui/material/Dialog';
import Switch from '@mui/material/Switch';
import IconButton from '@mui/material/IconButton';
import FilterListIcon from '@mui/icons-material/FilterList';
import { List, ListItemSecondaryAction, ListItemText } from '@mui/material';
import { List, ListItemSecondaryAction, ListItemText, Tooltip } from '@mui/material';
import ListItem from '@mui/material/ListItem';
import { useTranslation } from 'react-i18next';
import { cloneObject } from '@/util/cloneObject';
Expand Down Expand Up @@ -70,15 +70,17 @@ export function LangSelect(props: IProps) {

return (
<>
<IconButton
onClick={() => setOpen(true)}
aria-label="display more actions"
edge="end"
color="inherit"
size="large"
>
<FilterListIcon />
</IconButton>
<Tooltip title={t('settings.title')}>
<IconButton
onClick={() => setOpen(true)}
aria-label="display more actions"
edge="end"
color="inherit"
size="large"
>
<FilterListIcon />
</IconButton>
</Tooltip>
<Dialog
sx={{
'.MuiDialog-paper': {
Expand Down
24 changes: 13 additions & 11 deletions src/components/source/GridLayouts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/

import { IconButton, Menu, MenuItem, FormControlLabel, Radio } from '@mui/material';
import { IconButton, Menu, MenuItem, FormControlLabel, Radio, Tooltip } from '@mui/material';
import React from 'react';
import ViewModuleIcon from '@mui/icons-material/ViewModule';
import { useTranslation } from 'react-i18next';
Expand Down Expand Up @@ -38,16 +38,18 @@ export function SourceGridLayout() {

return (
<>
<IconButton
onClick={handleClick}
size="small"
sx={{ ml: 2 }}
aria-controls={open ? 'account-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
>
<ViewModuleIcon />
</IconButton>
<Tooltip title={t('global.label.display')}>
<IconButton
onClick={handleClick}
size="small"
sx={{ ml: 2 }}
aria-controls={open ? 'account-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
>
<ViewModuleIcon />
</IconButton>
</Tooltip>
<Menu
id="basic-menu"
anchorEl={anchorEl}
Expand Down
Loading

0 comments on commit 4ab6172

Please sign in to comment.