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

9
src/i18n/locale/en.json
View File

@@ -192,6 +192,7 @@
"action": {
"label": {
"install": "Install",
"install_external": "Install external extension",
"uninstall": "Uninstall",
"update": "Update"
}
@@ -222,17 +223,22 @@
"browse": "Browse",
"cancel": "Cancel",
"clear": "Clear",
"deselect": "Deselect",
"edit": "Edit",
"filter": "Filter",
"latest": "Latest",
"ok": "Ok",
"open_site": "Open Site",
"options": "Options",
"popular": "Popular",
"reset": "Reset",
"reset_to_default": "Reset to Default",
"resume": "Resume",
"select": "Select",
"select_all": "Select all",
"set": "Set",
"start": "Start",
"stop": "Stop",
"submit": "Submit"
},
"date": {
@@ -399,7 +405,10 @@
},
"reader": {
"button": {
"close_menu": "Close menu",
"exit": "Exit reader",
"next_chapter": "Next Chapter",
"open_menu": "Open menu",
"previous_chapter": "Previous Chapter"
},
"error": {

32
src/screens/DownloadQueue.tsx
View File

@@ -10,7 +10,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
import DragHandle from '@mui/icons-material/DragHandle';
import PauseIcon from '@mui/icons-material/Pause';
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
import { Card, CardActionArea, Stack, Box } from '@mui/material';
import { Card, CardActionArea, Stack, Box, Tooltip } from '@mui/material';
import IconButton from '@mui/material/IconButton';
import React, { useContext, useEffect } from 'react';
import { DragDropContext, Draggable } from 'react-beautiful-dnd';
@@ -86,9 +86,11 @@ export const DownloadQueue: React.FC = () => {
return (
<>
<NavbarToolbar>
<IconButton onClick={toggleQueueStatus} size="large">
{status === 'STOPPED' ? <PlayArrowIcon /> : <PauseIcon />}
</IconButton>
<Tooltip title={t(status === 'STOPPED' ? 'global.button.start' : 'global.button.stop')}>
<IconButton onClick={toggleQueueStatus} size="large">
{status === 'STOPPED' ? <PlayArrowIcon /> : <PauseIcon />}
</IconButton>
</Tooltip>
</NavbarToolbar>
<DragDropContext onDragEnd={onDragEnd}>
<StrictModeDroppable droppableId="droppable">
@@ -131,16 +133,18 @@ export const DownloadQueue: React.FC = () => {
</Typography>
</Stack>
<DownloadStateIndicator download={item} />
<IconButton
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleDelete(item.chapter);
}}
size="large"
>
<DeleteIcon />
</IconButton>
<Tooltip title={t('chapter.action.download.delete.label.action')}>
<IconButton
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleDelete(item.chapter);
}}
size="large"
>
<DeleteIcon />
</IconButton>
</Tooltip>
</CardActionArea>
</Card>
</Box>

11
src/screens/Extensions.tsx
View File

@@ -12,7 +12,7 @@ import IconButton from '@mui/material/IconButton';
import AddIcon from '@mui/icons-material/Add';
import { StringParam, useQueryParam } from 'use-query-params';
import { Virtuoso } from 'react-virtuoso';
import { Typography, useMediaQuery, useTheme } from '@mui/material';
import { Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { extensionDefaultLangs, DefaultLanguage, langSortCmp } from '@/util/language';
@@ -154,9 +154,12 @@ export function Extensions() {
setAction(
<>
<AppbarSearch />
<IconButton onClick={() => inputRef.current?.click()} size="large">
<AddIcon />
</IconButton>
<Tooltip title={t('extension.action.label.install_external')}>
<IconButton onClick={() => inputRef.current?.click()} size="large">
<AddIcon />
</IconButton>
</Tooltip>
<LangSelect shownLangs={shownLangs} setShownLangs={setShownLangs} allLangs={allLangs} />
</>,
);

20
src/screens/Settings.tsx
View File

@@ -29,7 +29,7 @@ import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import TextField from '@mui/material/TextField';
import FavoriteIcon from '@mui/icons-material/Favorite';
import { Link, MenuItem, Select } from '@mui/material';
import { Link, MenuItem, Select, Tooltip } from '@mui/material';
import { useTranslation } from 'react-i18next';
import LanguageIcon from '@mui/icons-material/Language';
import CollectionsOutlinedBookmarkIcon from '@mui/icons-material/CollectionsBookmarkOutlined';
@@ -194,14 +194,16 @@ export function Settings() {
</ListItemIcon>
<ListItemText primary={t('settings.about.label.server_address')} secondary={serverAddress} />
<ListItemSecondaryAction>
<IconButton
onClick={() => {
handleDialogOpen();
}}
size="large"
>
<EditIcon />
</IconButton>
<Tooltip title={t('global.button.edit')}>
<IconButton
onClick={() => {
handleDialogOpen();
}}
size="large"
>
<EditIcon />
</IconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
<ListItemLink to="/settings/about">

22
src/screens/SourceMangas.tsx
View File

@@ -13,7 +13,7 @@ import SettingsIcon from '@mui/icons-material/Settings';
import { useQueryParam, StringParam } from 'use-query-params';
import { useTranslation } from 'react-i18next';
import Link from '@mui/material/Link';
import { Box, Button, styled, useTheme, useMediaQuery } from '@mui/material';
import { Box, Button, styled, useTheme, useMediaQuery, Tooltip } from '@mui/material';
import FavoriteIcon from '@mui/icons-material/Favorite';
import NewReleasesIcon from '@mui/icons-material/NewReleases';
import FilterListIcon from '@mui/icons-material/FilterList';
@@ -310,15 +310,17 @@ export function SourceMangas() {
<AppbarSearch />
<SourceGridLayout />
{source?.isConfigurable && (
<IconButton
onClick={() => navigate(`/sources/${sourceId}/configure/`)}
aria-label="display more actions"
edge="end"
color="inherit"
size="large"
>
<SettingsIcon />
</IconButton>
<Tooltip title={t('settings.title')}>
<IconButton
onClick={() => navigate(`/sources/${sourceId}/configure/`)}
aria-label="display more actions"
edge="end"
color="inherit"
size="large"
>
<SettingsIcon />
</IconButton>
</Tooltip>
)}
</>,
);

10
src/screens/Sources.tsx
View File

@@ -7,7 +7,7 @@
*/
import { Fragment, useContext, useEffect } from 'react';
import { IconButton } from '@mui/material';
import { IconButton, Tooltip } from '@mui/material';
import TravelExploreIcon from '@mui/icons-material/TravelExplore';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
@@ -78,9 +78,11 @@ export function Sources() {
setTitle(t('source.title'));
setAction(
<>
<IconButton onClick={() => navigate('/sources/all/search/')} size="large">
<TravelExploreIcon />
</IconButton>
<Tooltip title={t('search.title.global_search')}>
<IconButton onClick={() => navigate('/sources/all/search/')} size="large">
<TravelExploreIcon />
</IconButton>
</Tooltip>
<LangSelect
shownLangs={shownLangs}
setShownLangs={setShownLangs}

24
src/screens/Updates.tsx
View File

@@ -7,7 +7,7 @@
*/
import DownloadIcon from '@mui/icons-material/Download';
import { Box, CardActionArea, styled } from '@mui/material';
import { Box, CardActionArea, styled, Tooltip } from '@mui/material';
import Avatar from '@mui/material/Avatar';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
@@ -209,16 +209,18 @@ export const Updates: React.FC = () => {
</Box>
{download && <DownloadStateIndicator download={download} />}
{download == null && !chapter.isDownloaded && (
<IconButton
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
downloadChapter(chapter);
}}
size="large"
>
<DownloadIcon />
</IconButton>
<Tooltip title={t('chapter.action.download.add.label.action')}>
<IconButton
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
downloadChapter(chapter);
}}
size="large"
>
<DownloadIcon />
</IconButton>
</Tooltip>
)}
</CardContent>
</CardActionArea>

38
src/screens/settings/Categories.tsx
View File

@@ -7,7 +7,7 @@
*/
import { useMemo, useState, useContext, useEffect } from 'react';
import { List, ListItem, ListItemText, ListItemIcon, IconButton } from '@mui/material';
import { List, ListItem, ListItemText, ListItemIcon, IconButton, Tooltip } from '@mui/material';
import { DragDropContext, Draggable, DropResult, DraggingStyle, NotDraggingStyle } from 'react-beautiful-dnd';
import DragHandleIcon from '@mui/icons-material/DragHandle';
import EditIcon from '@mui/icons-material/Edit';
@@ -149,22 +149,26 @@ export function Categories() {
<DragHandleIcon />
</ListItemIcon>
<ListItemText primary={item.name} />
<IconButton
onClick={() => {
handleEditDialogOpen(index);
}}
size="large"
>
<EditIcon />
</IconButton>
<IconButton
onClick={() => {
deleteCategory(index);
}}
size="large"
>
<DeleteIcon />
</IconButton>
<Tooltip title={t('global.button.edit')}>
<IconButton
onClick={() => {
handleEditDialogOpen(index);
}}
size="large"
>
<EditIcon />
</IconButton>
</Tooltip>
<Tooltip title={t('chapter.action.download.delete.label.action')}>
<IconButton
onClick={() => {
deleteCategory(index);
}}
size="large"
>
<DeleteIcon />
</IconButton>
</Tooltip>
</ListItem>
)}
</Draggable>