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 FilterList from '@mui/icons-material/FilterList';
import { IconButton } from '@mui/material'; import { IconButton, Tooltip } from '@mui/material';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext'; import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
import { LibraryOptionsPanel } from '@/components/library/LibraryOptionsPanel'; import { LibraryOptionsPanel } from '@/components/library/LibraryOptionsPanel';
export const LibraryToolbarMenu: React.FC = () => { export const LibraryToolbarMenu: React.FC = () => {
const { t } = useTranslation();
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const { options } = useLibraryOptionsContext(); const { options } = useLibraryOptionsContext();
const active = options.downloaded != null || options.unread != null; const active = options.downloaded != null || options.unread != null;
return ( return (
<> <>
<IconButton onClick={() => setOpen(!open)} color={active ? 'warning' : 'default'}> <Tooltip title={t('settings.title')}>
<FilterList /> <IconButton onClick={() => setOpen(!open)} color={active ? 'warning' : 'default'}>
</IconButton> <FilterList />
</IconButton>
</Tooltip>
<LibraryOptionsPanel open={open} onClose={() => setOpen(false)} /> <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 IconButton from '@mui/material/IconButton';
import RefreshIcon from '@mui/icons-material/Refresh'; import RefreshIcon from '@mui/icons-material/Refresh';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Tooltip } from '@mui/material';
import { requestManager } from '@/lib/requests/RequestManager.ts'; import { requestManager } from '@/lib/requests/RequestManager.ts';
import { makeToast } from '@/components/util/Toast'; import { makeToast } from '@/components/util/Toast';
import { UpdaterSubscription } from '@/lib/graphql/generated/graphql.ts'; import { UpdaterSubscription } from '@/lib/graphql/generated/graphql.ts';
@@ -59,8 +60,10 @@ export function UpdateChecker({ handleFinishedUpdate }: { handleFinishedUpdate:
}; };
return ( return (
<IconButton onClick={onClick} disabled={loading}> <Tooltip title={t('library.settings.global_update.title')}>
{loading ? <Progress progress={progress} /> : <RefreshIcon />} <IconButton onClick={onClick} disabled={loading}>
</IconButton> {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 Download from '@mui/icons-material/Download';
import MoreVertIcon from '@mui/icons-material/MoreVert'; import MoreVertIcon from '@mui/icons-material/MoreVert';
import RemoveDone from '@mui/icons-material/RemoveDone'; 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 Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent'; import CardContent from '@mui/material/CardContent';
import IconButton from '@mui/material/IconButton'; import IconButton from '@mui/material/IconButton';
@@ -150,11 +150,15 @@ export const ChapterCard: React.FC<IProps> = (props: IProps) => {
{dc && <DownloadStateIndicator download={dc} />} {dc && <DownloadStateIndicator download={dc} />}
{selected === null ? ( {selected === null ? (
<IconButton aria-label="more" onClick={handleMenuClick} size="large"> <Tooltip title={t('global.button.options')}>
<MoreVertIcon /> <IconButton aria-label="more" onClick={handleMenuClick} size="large">
</IconButton> <MoreVertIcon />
</IconButton>
</Tooltip>
) : ( ) : (
<Checkbox checked={selected} /> <Tooltip title={t(selected ? 'global.button.deselect' : 'global.button.select')}>
<Checkbox checked={selected} />
</Tooltip>
)} )}
</CardContent> </CardContent>
</CardActionArea> </CardActionArea>

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

@@ -7,8 +7,9 @@
*/ */
import FilterList from '@mui/icons-material/FilterList'; import FilterList from '@mui/icons-material/FilterList';
import { IconButton } from '@mui/material'; import { IconButton, Tooltip } from '@mui/material';
import * as React from 'react'; import * as React from 'react';
import { useTranslation } from 'react-i18next';
import { ChapterListOptions, ChapterOptionsReducerAction } from '@/typings'; import { ChapterListOptions, ChapterOptionsReducerAction } from '@/typings';
import { ChapterOptions } from '@/components/manga/ChapterOptions'; import { ChapterOptions } from '@/components/manga/ChapterOptions';
import { isFilterActive } from '@/components/manga/util'; import { isFilterActive } from '@/components/manga/util';
@@ -19,14 +20,18 @@ interface IProps {
} }
export const ChaptersToolbarMenu = ({ options, optionsDispatch }: IProps) => { export const ChaptersToolbarMenu = ({ options, optionsDispatch }: IProps) => {
const { t } = useTranslation();
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
const isFiltered = isFilterActive(options); const isFiltered = isFilterActive(options);
return ( return (
<> <>
<IconButton onClick={() => setOpen(true)}> <Tooltip title={t('settings.title')}>
<FilterList color={isFiltered ? 'warning' : undefined} /> <IconButton onClick={() => setOpen(true)}>
</IconButton> <FilterList color={isFiltered ? 'warning' : undefined} />
</IconButton>
</Tooltip>
<ChapterOptions <ChapterOptions
open={open} open={open}
onClose={() => setOpen(false)} 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 Slide from '@mui/material/Slide';
import Fade from '@mui/material/Fade'; import Fade from '@mui/material/Fade';
import Zoom from '@mui/material/Zoom'; 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 ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText'; import ListItemText from '@mui/material/ListItemText';
import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
@@ -208,31 +208,35 @@ export function ReaderNavBar(props: IProps) {
> >
<header> <header>
{!settings.staticNav && ( {!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 <IconButton
edge="start" edge="start"
color="inherit" color="inherit"
aria-label="menu" aria-label="menu"
disableRipple disableRipple
onClick={() => updateDrawer(false)} onClick={handleClose}
size="large" size="large"
sx={{ mr: -1 }}
> >
<KeyboardArrowLeftIcon /> <CloseIcon />
</IconButton> </IconButton>
)} </Tooltip>
<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>
</header> </header>
<ListItem <ListItem
ContainerComponent="div" ContainerComponent="div"
@@ -300,24 +304,25 @@ export function ReaderNavBar(props: IProps) {
<span>{t('reader.page_info.label.of_max_pages', { maxPages: chapter.pageCount })}</span> <span>{t('reader.page_info.label.of_max_pages', { maxPages: chapter.pageCount })}</span>
</PageNavigation> </PageNavigation>
<ChapterNavigation> <ChapterNavigation>
<IconButton <Tooltip title={t('reader.button.previous_chapter')}>
title={t('reader.button.previous_chapter')} <IconButton
sx={{ gridArea: 'pre' }} sx={{ gridArea: 'pre' }}
disabled={disableChapterNavButtons || chapter.sourceOrder <= 1} disabled={disableChapterNavButtons || chapter.sourceOrder <= 1}
onClick={() => onClick={() =>
openNextChapter(ChapterOffset.PREV, (prevChapterIndex) => { openNextChapter(ChapterOffset.PREV, (prevChapterIndex) => {
navigate(`/manga/${manga.id}/chapter/${prevChapterIndex}`, { navigate(`/manga/${manga.id}/chapter/${prevChapterIndex}`, {
replace: true, replace: true,
state: { state: {
prevDrawerOpen: drawerOpen, prevDrawerOpen: drawerOpen,
prevSettingsCollapseOpen: settingsCollapseOpen, prevSettingsCollapseOpen: settingsCollapseOpen,
}, },
}); });
}) })
} }
> >
<KeyboardArrowLeftIcon /> <KeyboardArrowLeftIcon />
</IconButton> </IconButton>
</Tooltip>
<FormControl <FormControl
sx={{ gridArea: 'current' }} sx={{ gridArea: 'current' }}
size="small" size="small"
@@ -346,44 +351,47 @@ export function ReaderNavBar(props: IProps) {
))} ))}
</Select> </Select>
</FormControl> </FormControl>
<IconButton <Tooltip title={t('reader.button.next_chapter')}>
title={t('reader.button.next_chapter')} <IconButton
sx={{ gridArea: 'next' }} sx={{ gridArea: 'next' }}
disabled={ disabled={
disableChapterNavButtons || disableChapterNavButtons ||
chapter.sourceOrder < 1 || chapter.sourceOrder < 1 ||
chapter.sourceOrder >= manga.chapters.totalCount chapter.sourceOrder >= manga.chapters.totalCount
} }
onClick={() => { onClick={() => {
openNextChapter(ChapterOffset.NEXT, (nextChapterIndex) => openNextChapter(ChapterOffset.NEXT, (nextChapterIndex) =>
navigate(`/manga/${manga.id}/chapter/${nextChapterIndex}`, { navigate(`/manga/${manga.id}/chapter/${nextChapterIndex}`, {
replace: true, replace: true,
state: { state: {
prevDrawerOpen: drawerOpen, prevDrawerOpen: drawerOpen,
prevSettingsCollapseOpen: settingsCollapseOpen, prevSettingsCollapseOpen: settingsCollapseOpen,
}, },
}), }),
); );
}} }}
> >
<KeyboardArrowRightIcon /> <KeyboardArrowRightIcon />
</IconButton> </IconButton>
</Tooltip>
</ChapterNavigation> </ChapterNavigation>
</Navigation> </Navigation>
</Root> </Root>
</Slide> </Slide>
<Zoom in={!drawerOpen}> <Zoom in={!drawerOpen}>
<Fade in={!hideOpenButton}> <Fade in={!hideOpenButton}>
<OpenDrawerButton <Tooltip title={t('reader.button.open_menu')}>
edge="start" <OpenDrawerButton
aria-label="menu" edge="start"
disableRipple aria-label="menu"
disableFocusRipple disableRipple
onClick={() => updateDrawer(true)} disableFocusRipple
size="large" onClick={() => updateDrawer(true)}
> size="large"
<KeyboardArrowRightIcon /> >
</OpenDrawerButton> <KeyboardArrowRightIcon />
</OpenDrawerButton>
</Tooltip>
</Fade> </Fade>
</Zoom> </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 Switch from '@mui/material/Switch';
import IconButton from '@mui/material/IconButton'; import IconButton from '@mui/material/IconButton';
import FilterListIcon from '@mui/icons-material/FilterList'; 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 ListItem from '@mui/material/ListItem';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { cloneObject } from '@/util/cloneObject'; import { cloneObject } from '@/util/cloneObject';
@@ -70,15 +70,17 @@ export function LangSelect(props: IProps) {
return ( return (
<> <>
<IconButton <Tooltip title={t('settings.title')}>
onClick={() => setOpen(true)} <IconButton
aria-label="display more actions" onClick={() => setOpen(true)}
edge="end" aria-label="display more actions"
color="inherit" edge="end"
size="large" color="inherit"
> size="large"
<FilterListIcon /> >
</IconButton> <FilterListIcon />
</IconButton>
</Tooltip>
<Dialog <Dialog
sx={{ sx={{
'.MuiDialog-paper': { '.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/. * 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 React from 'react';
import ViewModuleIcon from '@mui/icons-material/ViewModule'; import ViewModuleIcon from '@mui/icons-material/ViewModule';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@@ -38,16 +38,18 @@ export function SourceGridLayout() {
return ( return (
<> <>
<IconButton <Tooltip title={t('global.label.display')}>
onClick={handleClick} <IconButton
size="small" onClick={handleClick}
sx={{ ml: 2 }} size="small"
aria-controls={open ? 'account-menu' : undefined} sx={{ ml: 2 }}
aria-haspopup="true" aria-controls={open ? 'account-menu' : undefined}
aria-expanded={open ? 'true' : undefined} aria-haspopup="true"
> aria-expanded={open ? 'true' : undefined}
<ViewModuleIcon /> >
</IconButton> <ViewModuleIcon />
</IconButton>
</Tooltip>
<Menu <Menu
id="basic-menu" id="basic-menu"
anchorEl={anchorEl} anchorEl={anchorEl}

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

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

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

@@ -192,6 +192,7 @@
"action": { "action": {
"label": { "label": {
"install": "Install", "install": "Install",
"install_external": "Install external extension",
"uninstall": "Uninstall", "uninstall": "Uninstall",
"update": "Update" "update": "Update"
} }
@@ -222,17 +223,22 @@
"browse": "Browse", "browse": "Browse",
"cancel": "Cancel", "cancel": "Cancel",
"clear": "Clear", "clear": "Clear",
"deselect": "Deselect",
"edit": "Edit",
"filter": "Filter", "filter": "Filter",
"latest": "Latest", "latest": "Latest",
"ok": "Ok", "ok": "Ok",
"open_site": "Open Site", "open_site": "Open Site",
"options": "Options",
"popular": "Popular", "popular": "Popular",
"reset": "Reset", "reset": "Reset",
"reset_to_default": "Reset to Default", "reset_to_default": "Reset to Default",
"resume": "Resume", "resume": "Resume",
"select": "Select",
"select_all": "Select all", "select_all": "Select all",
"set": "Set", "set": "Set",
"start": "Start", "start": "Start",
"stop": "Stop",
"submit": "Submit" "submit": "Submit"
}, },
"date": { "date": {
@@ -399,7 +405,10 @@
}, },
"reader": { "reader": {
"button": { "button": {
"close_menu": "Close menu",
"exit": "Exit reader",
"next_chapter": "Next Chapter", "next_chapter": "Next Chapter",
"open_menu": "Open menu",
"previous_chapter": "Previous Chapter" "previous_chapter": "Previous Chapter"
}, },
"error": { "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 DragHandle from '@mui/icons-material/DragHandle';
import PauseIcon from '@mui/icons-material/Pause'; import PauseIcon from '@mui/icons-material/Pause';
import PlayArrowIcon from '@mui/icons-material/PlayArrow'; 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 IconButton from '@mui/material/IconButton';
import React, { useContext, useEffect } from 'react'; import React, { useContext, useEffect } from 'react';
import { DragDropContext, Draggable } from 'react-beautiful-dnd'; import { DragDropContext, Draggable } from 'react-beautiful-dnd';
@@ -86,9 +86,11 @@ export const DownloadQueue: React.FC = () => {
return ( return (
<> <>
<NavbarToolbar> <NavbarToolbar>
<IconButton onClick={toggleQueueStatus} size="large"> <Tooltip title={t(status === 'STOPPED' ? 'global.button.start' : 'global.button.stop')}>
{status === 'STOPPED' ? <PlayArrowIcon /> : <PauseIcon />} <IconButton onClick={toggleQueueStatus} size="large">
</IconButton> {status === 'STOPPED' ? <PlayArrowIcon /> : <PauseIcon />}
</IconButton>
</Tooltip>
</NavbarToolbar> </NavbarToolbar>
<DragDropContext onDragEnd={onDragEnd}> <DragDropContext onDragEnd={onDragEnd}>
<StrictModeDroppable droppableId="droppable"> <StrictModeDroppable droppableId="droppable">
@@ -131,16 +133,18 @@ export const DownloadQueue: React.FC = () => {
</Typography> </Typography>
</Stack> </Stack>
<DownloadStateIndicator download={item} /> <DownloadStateIndicator download={item} />
<IconButton <Tooltip title={t('chapter.action.download.delete.label.action')}>
onClick={(e) => { <IconButton
e.preventDefault(); onClick={(e) => {
e.stopPropagation(); e.preventDefault();
handleDelete(item.chapter); e.stopPropagation();
}} handleDelete(item.chapter);
size="large" }}
> size="large"
<DeleteIcon /> >
</IconButton> <DeleteIcon />
</IconButton>
</Tooltip>
</CardActionArea> </CardActionArea>
</Card> </Card>
</Box> </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 AddIcon from '@mui/icons-material/Add';
import { StringParam, useQueryParam } from 'use-query-params'; import { StringParam, useQueryParam } from 'use-query-params';
import { Virtuoso } from 'react-virtuoso'; 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 { useTranslation } from 'react-i18next';
import { requestManager } from '@/lib/requests/RequestManager.ts'; import { requestManager } from '@/lib/requests/RequestManager.ts';
import { extensionDefaultLangs, DefaultLanguage, langSortCmp } from '@/util/language'; import { extensionDefaultLangs, DefaultLanguage, langSortCmp } from '@/util/language';
@@ -154,9 +154,12 @@ export function Extensions() {
setAction( setAction(
<> <>
<AppbarSearch /> <AppbarSearch />
<IconButton onClick={() => inputRef.current?.click()} size="large"> <Tooltip title={t('extension.action.label.install_external')}>
<AddIcon /> <IconButton onClick={() => inputRef.current?.click()} size="large">
</IconButton> <AddIcon />
</IconButton>
</Tooltip>
<LangSelect shownLangs={shownLangs} setShownLangs={setShownLangs} allLangs={allLangs} /> <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 DialogContentText from '@mui/material/DialogContentText';
import TextField from '@mui/material/TextField'; import TextField from '@mui/material/TextField';
import FavoriteIcon from '@mui/icons-material/Favorite'; 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 { useTranslation } from 'react-i18next';
import LanguageIcon from '@mui/icons-material/Language'; import LanguageIcon from '@mui/icons-material/Language';
import CollectionsOutlinedBookmarkIcon from '@mui/icons-material/CollectionsBookmarkOutlined'; import CollectionsOutlinedBookmarkIcon from '@mui/icons-material/CollectionsBookmarkOutlined';
@@ -194,14 +194,16 @@ export function Settings() {
</ListItemIcon> </ListItemIcon>
<ListItemText primary={t('settings.about.label.server_address')} secondary={serverAddress} /> <ListItemText primary={t('settings.about.label.server_address')} secondary={serverAddress} />
<ListItemSecondaryAction> <ListItemSecondaryAction>
<IconButton <Tooltip title={t('global.button.edit')}>
onClick={() => { <IconButton
handleDialogOpen(); onClick={() => {
}} handleDialogOpen();
size="large" }}
> size="large"
<EditIcon /> >
</IconButton> <EditIcon />
</IconButton>
</Tooltip>
</ListItemSecondaryAction> </ListItemSecondaryAction>
</ListItem> </ListItem>
<ListItemLink to="/settings/about"> <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 { useQueryParam, StringParam } from 'use-query-params';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import Link from '@mui/material/Link'; 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 FavoriteIcon from '@mui/icons-material/Favorite';
import NewReleasesIcon from '@mui/icons-material/NewReleases'; import NewReleasesIcon from '@mui/icons-material/NewReleases';
import FilterListIcon from '@mui/icons-material/FilterList'; import FilterListIcon from '@mui/icons-material/FilterList';
@@ -310,15 +310,17 @@ export function SourceMangas() {
<AppbarSearch /> <AppbarSearch />
<SourceGridLayout /> <SourceGridLayout />
{source?.isConfigurable && ( {source?.isConfigurable && (
<IconButton <Tooltip title={t('settings.title')}>
onClick={() => navigate(`/sources/${sourceId}/configure/`)} <IconButton
aria-label="display more actions" onClick={() => navigate(`/sources/${sourceId}/configure/`)}
edge="end" aria-label="display more actions"
color="inherit" edge="end"
size="large" color="inherit"
> size="large"
<SettingsIcon /> >
</IconButton> <SettingsIcon />
</IconButton>
</Tooltip>
)} )}
</>, </>,
); );

10
src/screens/Sources.tsx
View File

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

24
src/screens/Updates.tsx
View File

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

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

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