ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add missing tooltips (#444)

Browse Source
This commit is contained in:
schroda
2023-11-05 17:22:29 +01:00
committed by GitHub
parent d9d92a75fa
commit 4ab61723e7
16 changed files with 240 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/library/LibraryToolbarMenu.tsx
View File

@@ -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)} />
</>
);

9
src/components/library/UpdateChecker.tsx
View File

@@ -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';
@@ -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
src/components/manga/ChapterCard.tsx
View File

@@ -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';
@@ -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>

13
src/components/manga/ChaptersToolbarMenu.tsx
View File

@@ -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';
@@ -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)}

144
src/components/navbar/ReaderNavBar.tsx
View File

@@ -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';
@@ -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"
@@ -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"
@@ -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>
</>

22
src/components/navbar/action/LangSelect.tsx
View File

@@ -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';
@@ -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': {

24
src/components/source/GridLayouts.tsx
View File

@@ -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';
@@ -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}

13
src/components/util/AppbarSearch.tsx
View File

@@ -8,9 +8,10 @@
import React, { useState, useEffect } from 'react';
import SearchIcon from '@mui/icons-material/Search';
import { IconButton, Input } from '@mui/material';
import { IconButton, Input, Tooltip } from '@mui/material';
import CancelIcon from '@mui/icons-material/Cancel';
import { useQueryParam, StringParam } from 'use-query-params';
import { useTranslation } from 'react-i18next';
interface IProps {
autoOpen?: boolean;
@@ -21,6 +22,8 @@ const defaultProps = {
};
export const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
const { t } = useTranslation();
const { autoOpen } = props;
const [query, setQuery] = useQueryParam('query', StringParam);
const [searchOpen, setSearchOpen] = useState(!!query);
@@ -83,9 +86,11 @@ export const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
}
return (
<IconButton onClick={openSearch}>
<SearchIcon />
</IconButton>
<Tooltip title={t('search.title.search')}>
<IconButton onClick={openSearch}>
<SearchIcon />
</IconButton>
</Tooltip>
);
};