Add missing tooltips (#444)
This commit is contained in:
schroda
@@ -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>
|
||||
|
||||
@@ -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} />
|
||||
</>,
|
||||
);
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
</>,
|
||||
);
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user