From 4ab61723e7e3e6ebdc30970572ed81149002b8b9 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Sun, 5 Nov 2023 17:22:29 +0100 Subject: [PATCH] Add missing tooltips (#444) --- src/components/library/LibraryToolbarMenu.tsx | 13 +- src/components/library/UpdateChecker.tsx | 9 +- src/components/manga/ChapterCard.tsx | 14 +- src/components/manga/ChaptersToolbarMenu.tsx | 13 +- src/components/navbar/ReaderNavBar.tsx | 144 +++++++++--------- src/components/navbar/action/LangSelect.tsx | 22 +-- src/components/source/GridLayouts.tsx | 24 +-- src/components/util/AppbarSearch.tsx | 13 +- src/i18n/locale/en.json | 9 ++ src/screens/DownloadQueue.tsx | 32 ++-- src/screens/Extensions.tsx | 11 +- src/screens/Settings.tsx | 20 +-- src/screens/SourceMangas.tsx | 22 +-- src/screens/Sources.tsx | 10 +- src/screens/Updates.tsx | 24 +-- src/screens/settings/Categories.tsx | 38 ++--- 16 files changed, 240 insertions(+), 178 deletions(-) diff --git a/src/components/library/LibraryToolbarMenu.tsx b/src/components/library/LibraryToolbarMenu.tsx index 740d8f2650..97cd315b94 100644 --- a/src/components/library/LibraryToolbarMenu.tsx +++ b/src/components/library/LibraryToolbarMenu.tsx @@ -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 ( <> - setOpen(!open)} color={active ? 'warning' : 'default'}> - - + + setOpen(!open)} color={active ? 'warning' : 'default'}> + + + setOpen(false)} /> ); diff --git a/src/components/library/UpdateChecker.tsx b/src/components/library/UpdateChecker.tsx index 86986f2416..c7a002bfb3 100644 --- a/src/components/library/UpdateChecker.tsx +++ b/src/components/library/UpdateChecker.tsx @@ -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 ( - - {loading ? : } - + + + {loading ? : } + + ); } diff --git a/src/components/manga/ChapterCard.tsx b/src/components/manga/ChapterCard.tsx index a1f6aeaad0..877b294e19 100644 --- a/src/components/manga/ChapterCard.tsx +++ b/src/components/manga/ChapterCard.tsx @@ -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 = (props: IProps) => { {dc && } {selected === null ? ( - - - + + + + + ) : ( - + + + )} diff --git a/src/components/manga/ChaptersToolbarMenu.tsx b/src/components/manga/ChaptersToolbarMenu.tsx index a93af63e12..f7a37701f0 100644 --- a/src/components/manga/ChaptersToolbarMenu.tsx +++ b/src/components/manga/ChaptersToolbarMenu.tsx @@ -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 ( <> - setOpen(true)}> - - + + setOpen(true)}> + + + setOpen(false)} diff --git a/src/components/navbar/ReaderNavBar.tsx b/src/components/navbar/ReaderNavBar.tsx index f17d60c1a3..dae493b0e2 100644 --- a/src/components/navbar/ReaderNavBar.tsx +++ b/src/components/navbar/ReaderNavBar.tsx @@ -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) { >
{!settings.staticNav && ( + + updateDrawer(false)} + size="large" + > + + + + )} + + {chapter.name} + + updateDrawer(false)} + onClick={handleClose} size="large" + sx={{ mr: -1 }} > - + - )} - - {chapter.name} - - - - +
{t('reader.page_info.label.of_max_pages', { maxPages: chapter.pageCount })} - - openNextChapter(ChapterOffset.PREV, (prevChapterIndex) => { - navigate(`/manga/${manga.id}/chapter/${prevChapterIndex}`, { - replace: true, - state: { - prevDrawerOpen: drawerOpen, - prevSettingsCollapseOpen: settingsCollapseOpen, - }, - }); - }) - } - > - - + + + openNextChapter(ChapterOffset.PREV, (prevChapterIndex) => { + navigate(`/manga/${manga.id}/chapter/${prevChapterIndex}`, { + replace: true, + state: { + prevDrawerOpen: drawerOpen, + prevSettingsCollapseOpen: settingsCollapseOpen, + }, + }); + }) + } + > + + + - = manga.chapters.totalCount - } - onClick={() => { - openNextChapter(ChapterOffset.NEXT, (nextChapterIndex) => - navigate(`/manga/${manga.id}/chapter/${nextChapterIndex}`, { - replace: true, - state: { - prevDrawerOpen: drawerOpen, - prevSettingsCollapseOpen: settingsCollapseOpen, - }, - }), - ); - }} - > - - + + = manga.chapters.totalCount + } + onClick={() => { + openNextChapter(ChapterOffset.NEXT, (nextChapterIndex) => + navigate(`/manga/${manga.id}/chapter/${nextChapterIndex}`, { + replace: true, + state: { + prevDrawerOpen: drawerOpen, + prevSettingsCollapseOpen: settingsCollapseOpen, + }, + }), + ); + }} + > + + + - updateDrawer(true)} - size="large" - > - - + + updateDrawer(true)} + size="large" + > + + + diff --git a/src/components/navbar/action/LangSelect.tsx b/src/components/navbar/action/LangSelect.tsx index c591771816..0c659af139 100644 --- a/src/components/navbar/action/LangSelect.tsx +++ b/src/components/navbar/action/LangSelect.tsx @@ -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 ( <> - setOpen(true)} - aria-label="display more actions" - edge="end" - color="inherit" - size="large" - > - - + + setOpen(true)} + aria-label="display more actions" + edge="end" + color="inherit" + size="large" + > + + + - - - + + + + + = (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 = (props) => { } return ( - - - + + + + + ); }; diff --git a/src/i18n/locale/en.json b/src/i18n/locale/en.json index 32d14b638e..b1ac893dd5 100644 --- a/src/i18n/locale/en.json +++ b/src/i18n/locale/en.json @@ -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": { diff --git a/src/screens/DownloadQueue.tsx b/src/screens/DownloadQueue.tsx index 8235d2c627..be829ee4a5 100644 --- a/src/screens/DownloadQueue.tsx +++ b/src/screens/DownloadQueue.tsx @@ -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 ( <> - - {status === 'STOPPED' ? : } - + + + {status === 'STOPPED' ? : } + + @@ -131,16 +133,18 @@ export const DownloadQueue: React.FC = () => { - { - e.preventDefault(); - e.stopPropagation(); - handleDelete(item.chapter); - }} - size="large" - > - - + + { + e.preventDefault(); + e.stopPropagation(); + handleDelete(item.chapter); + }} + size="large" + > + + + diff --git a/src/screens/Extensions.tsx b/src/screens/Extensions.tsx index 6ab210413c..3f45fb558d 100644 --- a/src/screens/Extensions.tsx +++ b/src/screens/Extensions.tsx @@ -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( <> - inputRef.current?.click()} size="large"> - - + + inputRef.current?.click()} size="large"> + + + + , ); diff --git a/src/screens/Settings.tsx b/src/screens/Settings.tsx index aca083fb34..dbe240e8cd 100644 --- a/src/screens/Settings.tsx +++ b/src/screens/Settings.tsx @@ -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() { - { - handleDialogOpen(); - }} - size="large" - > - - + + { + handleDialogOpen(); + }} + size="large" + > + + + diff --git a/src/screens/SourceMangas.tsx b/src/screens/SourceMangas.tsx index 742a247995..49400e63d1 100644 --- a/src/screens/SourceMangas.tsx +++ b/src/screens/SourceMangas.tsx @@ -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() { {source?.isConfigurable && ( - navigate(`/sources/${sourceId}/configure/`)} - aria-label="display more actions" - edge="end" - color="inherit" - size="large" - > - - + + navigate(`/sources/${sourceId}/configure/`)} + aria-label="display more actions" + edge="end" + color="inherit" + size="large" + > + + + )} , ); diff --git a/src/screens/Sources.tsx b/src/screens/Sources.tsx index 78675555a1..04b92ec819 100644 --- a/src/screens/Sources.tsx +++ b/src/screens/Sources.tsx @@ -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( <> - navigate('/sources/all/search/')} size="large"> - - + + navigate('/sources/all/search/')} size="large"> + + + { {download && } {download == null && !chapter.isDownloaded && ( - { - e.stopPropagation(); - e.preventDefault(); - downloadChapter(chapter); - }} - size="large" - > - - + + { + e.stopPropagation(); + e.preventDefault(); + downloadChapter(chapter); + }} + size="large" + > + + + )} diff --git a/src/screens/settings/Categories.tsx b/src/screens/settings/Categories.tsx index f566d12c6a..2c7b332bf9 100644 --- a/src/screens/settings/Categories.tsx +++ b/src/screens/settings/Categories.tsx @@ -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() { - { - handleEditDialogOpen(index); - }} - size="large" - > - - - { - deleteCategory(index); - }} - size="large" - > - - + + { + handleEditDialogOpen(index); + }} + size="large" + > + + + + + { + deleteCategory(index); + }} + size="large" + > + + + )}