feat: add hover titles to some icons

tboevil · May 13, 2021 · c298ad3 · c298ad3
1 parent 0d7d2ba
commit c298ad3
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 44 deletions.
diff --git a/config/webpack.base.config.js b/config/webpack.base.config.js
@@ -29,7 +29,10 @@ module.exports = {
             },
             {
                 test: [/\.svg$/],
-                use: "@svgr/webpack",
+                loader: "@svgr/webpack",
+                options: {
+                    titleProp: true,
+                },
             },
         ],
     },

diff --git a/src/content/display/DrawerBlock.jsx b/src/content/display/DrawerBlock.jsx
@@ -48,7 +48,11 @@ export default function DrawerBlock(props) {
             <Content ref={contentElRef}>{props.children}</Content>
             {useDrawer && (
                 <Handle fold={fold} onClick={() => setFold(!fold)}>
-                    {fold ? <StyledArrowDownIcon /> : <StyledArrowUpIcon />}
+                    {fold ? (
+                        <StyledArrowDownIcon title={chrome.i18n.getMessage("ClickToExpand")} />
+                    ) : (
+                        <StyledArrowUpIcon title={chrome.i18n.getMessage("ClickToFold")} />
+                    )}
                 </Handle>
             )}
         </Drawer>

diff --git a/src/content/display/Panel.jsx b/src/content/display/Panel.jsx
@@ -597,7 +597,7 @@ export default function ResultPanel() {
                         </SourceOption>
                         <HeadIcons>
                             <HeadIcon onClick={() => channel.emit("open_options_page")}>
-                                <SettingIcon />
+                                <SettingIcon title={chrome.i18n.getMessage("Settings")} />
                             </HeadIcon>
                             {panelFix ? (
                                 <HeadIcon
@@ -608,7 +608,7 @@ export default function ResultPanel() {
                                         });
                                     }}
                                 >
-                                    <PinIcon />
+                                    <PinIcon title={chrome.i18n.getMessage("UnfixResultFrame")} />
                                 </HeadIcon>
                             ) : (
                                 <HeadIcon
@@ -619,11 +619,11 @@ export default function ResultPanel() {
                                         });
                                     }}
                                 >
-                                    <UnpinIcon />
+                                    <UnpinIcon title={chrome.i18n.getMessage("FixResultFrame")} />
                                 </HeadIcon>
                             )}
                             <HeadIcon onClick={() => setOpen(false)}>
-                                <CloseIcon />
+                                <CloseIcon title={chrome.i18n.getMessage("CloseResultFrame")} />
                             </HeadIcon>
                         </HeadIcons>
                     </Head>

diff --git a/src/content/display/Result.jsx b/src/content/display/Result.jsx
@@ -105,6 +105,7 @@ export default function Result(props) {
                                     element: translateResultElRef.current,
                                 })
                             }
+                            title={chrome.i18n.getMessage("CopyResult")}
                         />
                     </TextLine>
                     {(displayTPronunciationIcon || displayTPronunciation) && (
@@ -146,6 +147,7 @@ export default function Result(props) {
                         </div>
                         {editing ? (
                             <StyledEditDoneIcon
+                                title={chrome.i18n.getMessage("Retranslate")}
                                 onClick={() =>
                                     setEditing({
                                         edit: false,
@@ -155,6 +157,7 @@ export default function Result(props) {
                             />
                         ) : (
                             <StyledEditIcon
+                                title={chrome.i18n.getMessage("EditText")}
                                 onClick={() =>
                                     setEditing({
                                         edit: true,

diff --git a/static/_locales/ja/messages.json b/static/_locales/ja/messages.json
@@ -16,12 +16,12 @@
         "description": "選択したテキストを翻訳するためのショートカット"
     },
     "FixResultFrame": {
-        "message": "結果フレームを修正",
-        "description": "翻訳結果のフレームを修正する。"
+        "message": "結果ボックスを修正しました",
+        "description": "結果ボックスを修正しました。"
     },
     "UnfixResultFrame": {
-        "message": "Unfix the result frame",
-        "description": "Unfix the translating result frame."
+        "message": "翻訳結果表示ボックスの修正を解除します",
+        "description": "翻訳結果表示ボックスの修正を解除します。"
     },
     "CloseResultFrame": {
         "message": "結果フレームを閉じる",
@@ -84,40 +84,40 @@
         "description": "原文を読み上げる"
     },
     "SourcePronunciation": {
-        "message": "Source Pronunciation",
-        "description": "Source Pronunciation"
+        "message": "ソース発音",
+        "description": "ソース発音"
     },
     "TargetPronunciation": {
-        "message": "Target Pronunciation",
-        "description": "Target Pronunciation"
+        "message": "ターゲットの発音",
+        "description": "ターゲットの発音"
     },
     "SourcePronunciationIcon": {
-        "message": "Source Pronunciation Icon",
-        "description": "Source Pronunciation Icon"
+        "message": "ソース発音アイコン",
+        "description": "ソース発音アイコン。"
     },
     "TargetPronunciationIcon": {
-        "message": "Target Pronunciation Icon",
-        "description": "Target Pronunciation Icon"
+        "message": "ターゲット発音アイコン",
+        "description": "ターゲット発音アイコン。"
     },
     "PronounceTranslated": {
         "message": "翻訳されたテキストを読み上げる",
         "description": "翻訳されたテキストを読み上げる"
     },
     "ClickToExpand": {
-        "message": "Click to expand",
-        "description": "Click to expand."
+        "message": "クリックして展開",
+        "description": "クリックして展開。"
     },
     "ClickToFold": {
-        "message": "Click to fold",
-        "description": "Click to fold."
+        "message": "クリックして折りたたむ",
+        "description": "クリックして折りたたむ。"
     },
     "EditText": {
-        "message": "Edit text",
-        "description": "Edit selected text."
+        "message": "テキストを編集するt",
+        "description": "テキストを編集する。"
     },
     "Retranslate": {
-        "message": "Re-translate",
-        "description": "Re-translate the edited text."
+        "message": "再翻訳",
+        "description": "編集したテキストを再翻訳します。"
     },
     "CopyResult": {
         "message": "結果をコピー",

diff --git a/static/_locales/ru/messages.json b/static/_locales/ru/messages.json
@@ -20,8 +20,8 @@
         "description": "Фиксация рамки результата перевода."
     },
     "UnfixResultFrame": {
-        "message": "Unfix the result frame",
-        "description": "Unfix the translating result frame."
+        "message": "Отключить окно отображения результатов перевода",
+        "description": "Отключить окно отображения результатов перевода."
     },
     "CloseResultFrame": {
         "message": "Закрыть рамку результата",
@@ -72,20 +72,20 @@
         "description": "Фонетический символ"
     },
     "SourcePronunciation": {
-        "message": "Source Pronunciation",
-        "description": "Source Pronunciation"
+        "message": "Источник Произношение",
+        "description": "Источник Произношение"
     },
     "TargetPronunciation": {
-        "message": "Target Pronunciation",
-        "description": "Target Pronunciation"
+        "message": "Целевое произношение",
+        "description": "Целевое произношение"
     },
     "SourcePronunciationIcon": {
-        "message": "Source Pronunciation Icon",
-        "description": "Source Pronunciation Icon"
+        "message": "Источник Произношение Иконка",
+        "description": "Источник Произношение Иконка."
     },
     "TargetPronunciationIcon": {
-        "message": "Target Pronunciation Icon",
-        "description": "Target Pronunciation Icon"
+        "message": "Значок целевого произношения",
+        "description": "Значок целевого произношения."
     },
     "Pronounce": {
         "message": "произнести",
@@ -104,20 +104,20 @@
         "description": "Читать переведённый текст."
     },
     "ClickToExpand": {
-        "message": "Click to expand",
-        "description": "Click to expand."
+        "message": "Нажмите, чтобы развернуть",
+        "description": "Нажмите, чтобы развернуть."
     },
     "ClickToFold": {
-        "message": "Click to fold",
-        "description": "Click to fold."
+        "message": "Нажмите, чтобы сложить",
+        "description": "Нажмите, чтобы сложить."
     },
     "EditText": {
-        "message": "Edit text",
-        "description": "Edit selected text."
+        "message": "Редактировать текст",
+        "description": "Редактировать выделенный текст."
     },
     "Retranslate": {
-        "message": "Re-translate",
-        "description": "Re-translate the edited text."
+        "message": "Перевести",
+        "description": "Перевести отредактированный текст заново."
     },
     "CopyResult": {
         "message": "Скопировать результат",