Options screen improvement

README.md

@@ -138,8 +138,8 @@ This project includes some third-party data:
 
 ### Images
 
-- [bookmark icon, gear icon](https://www.iconfinder.com/iconsets/wpzoom-developer-icon-set) ([CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/))
-- [External, link icon](https://www.iconfinder.com/iconsets/heroicons-ui) ([MIT](https://opensource.org/licenses/MIT))
+- [WPZOOM Developer Icon Set](https://www.iconfinder.com/iconsets/wpzoom-developer-icon-set) ([CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/))
+- [Heroicons UI icon set](https://www.iconfinder.com/iconsets/heroicons-ui) ([MIT](https://opensource.org/licenses/MIT))
 
 ### Build-in PDF viewer
 

src/options/component/atom/ExternalLink.tsx

@@ -20,7 +20,7 @@ export const ExternalLink: React.FC<Props> = (props) => {
       style={{ textDecoration: "underline", fontSize: "small" }}
     >
       {props.children}
-      {props.icon && <img src="external.png" width="12" height="12" style={{ marginLeft: 4 }} />}
+      {props.icon && <img src="external.png" width="12" height="12" style={{ marginLeft: 2 }} />}
     </a>
   );
 };

src/options/component/atom/Launch.tsx

@@ -0,0 +1,62 @@
+/**
+ * Mouse Dictionary (https://github.com/wtetsu/mouse-dictionary/)
+ * Copyright 2018-present wtetsu
+ * Licensed under MIT
+ */
+
+import React, { useState } from "react";
+
+type Props = {
+  text: string;
+  href: string;
+  image: string;
+  style?: React.CSSProperties;
+};
+
+const STYLE_OUTER: React.CSSProperties = {
+  width: 180,
+};
+
+const STYLE_IMAGE: React.CSSProperties = {
+  verticalAlign: "middle",
+};
+
+const STYLE1: React.CSSProperties = {
+  backgroundColor: "#ffffff",
+  boxShadow: "2px 2px 2px 2px #b0b0b0",
+  borderRadius: 10,
+  paddingLeft: 6,
+  paddingTop: 10,
+  paddingBottom: 10,
+  marginTop: 10,
+  width: 180,
+  textAlign: "center",
+  verticalAlign: "middle",
+};
+
+const STYLE2: React.CSSProperties = {
+  ...STYLE1,
+  backgroundColor: "#fff4ff",
+};
+
+export const Launch: React.FC<Props> = (props) => {
+  const [hover, setHover] = useState(false);
+
+  const enter = () => {
+    setHover(true);
+  };
+  const leave = () => {
+    setHover(false);
+  };
+
+  return (
+    <div onMouseEnter={enter} onMouseLeave={leave} style={{ ...STYLE_OUTER, ...props.style }}>
+      <a href={props.href} target="_blank" rel="noopener noreferrer">
+        <div style={hover ? STYLE2 : STYLE1}>
+          <img src={props.image} style={STYLE_IMAGE} />
+          <span>{props.text}</span>
+        </div>
+      </a>
+    </div>
+  );
+};

src/options/component/atom/index.ts

@@ -9,6 +9,7 @@ export * from "./DataUsage";
 export * from "./EditableSpan";
 export * from "./ExternalLink";
 export * from "./HighlightEditor";
+export * from "./Launch";
 export * from "./Overlay";
 export * from "./Panel";
 export * from "./Select";

src/options/component/organism/Tips.tsx

@@ -8,18 +8,35 @@ import React from "react";
 import { res } from "../../logic";
 import { ExternalLink } from "../atom/ExternalLink";
 
-export const Tips: React.FC = () => {
+type TipsProps = {
+  visible: boolean;
+};
+
+const STYLE_OUTER: React.CSSProperties = {
+  position: "relative",
+  bottom: 40,
+};
+
+const STYLE_INNER: React.CSSProperties = {
+  position: "absolute",
+  right: 0,
+};
+
+export const Tips: React.FC<TipsProps> = (props) => {
+  const display = props.visible ? "block" : "none";
   return (
-    <>
-      <ExternalLink href="https://github.com/wtetsu/mouse-dictionary/wiki/Download-dictionary-data" icon={true}>
-        {res.get("downloadDictData")}
-      </ExternalLink>
-      <br />
-      <ExternalLink href="https://github.com/wtetsu/mouse-dictionary/wiki/Keyboard-shortcuts" icon={true}>
-        {res.get("setKeyboardShortcuts")}
-      </ExternalLink>
-      <br />
-      <ExternalLink href="pdf/web/viewer.html">{res.get("openPdfViewer")}</ExternalLink>
-    </>
+    <div style={{ ...STYLE_OUTER, display }}>
+      <div style={STYLE_INNER}>
+        <ExternalLink href="https://github.com/wtetsu/mouse-dictionary/wiki/Download-dictionary-data" icon={true}>
+          <img src="hint.png" width="16" height="16" style={{ position: "relative", top: 3, marginRight: 3 }} />
+          {res.get("downloadDictData")}
+        </ExternalLink>
+        <br />
+        <ExternalLink href="https://github.com/wtetsu/mouse-dictionary/wiki/Keyboard-shortcuts" icon={true}>
+          <img src="hint.png" width="16" height="16" style={{ position: "relative", top: 3, marginRight: 3 }} />
+          {res.get("setKeyboardShortcuts")}
+        </ExternalLink>
+      </div>
+    </div>
   );
 };

src/options/page/Main.tsx

@@ -6,7 +6,7 @@
 
 import React, { useReducer, useEffect, useRef } from "react";
 import immer from "immer";
-import { Button, DataUsage, EditableSpan, ExternalLink, Overlay, Panel, Toggle } from "../component/atom";
+import { Button, DataUsage, EditableSpan, ExternalLink, Launch, Overlay, Panel, Toggle } from "../component/atom";
 import { AdvancedSettings, BasicSettings, LoadDictionary, OperationPanel, Tips, WholeSettings } from "../component/organism";
 import { data, dict, message, Preview, res } from "../logic";
 import { config, defaultSettings, env } from "../extern";
@@ -161,9 +161,18 @@ export const Main: React.FC = () => {
 
         <div style={{ cursor: "pointer", fontSize: "75%" }} onClick={() => updateState({ dictDataUsage: -1 })}></div>
 
+        <Tips visible={state.initialized} />
+
         <Panel active={!state.busy && env.get().enableUserSettings && state.initialized}>
           <hr style={{ marginTop: 15 }} />
-          <Tips />
+
+          <Launch
+            href="pdf/web/viewer.html"
+            text={res.get("openPdfViewer")}
+            image="pdf.png"
+            style={{ position: "absolute", right: 25 }}
+          />
+
           <Toggle
             switch={state.panelLevel >= 1}
             image="settings1.png"
@@ -174,15 +183,13 @@ export const Main: React.FC = () => {
         </Panel>
 
         <Panel active={state.panelLevel >= 1}>
-          <div>
+          <div style={{ marginBottom: 20 }}>
             <span>{res.get("previewText")}: </span>
             <EditableSpan
               value={state.previewText}
               style={{ width: 300 }}
               onChange={(e) => updateState({ previewText: e.target.value })}
             ></EditableSpan>
-            <br />
-            <br />
           </div>
           <OperationPanel
             disable={state.busy}

src/options/resource/en.ts

@@ -84,7 +84,7 @@ const EnglishTextResource: TextResource = {
   loadInitialDict: "Reload default dictionary data",
   downloadDictData: "Download additional dictionary data",
   setKeyboardShortcuts: "Set keyboard shortcuts",
-  openPdfViewer: "Open PDF viewer",
+  openPdfViewer: "PDF viewer",
   openJsonEditor: "Open JSON editor",
   closeJsonEditor: "Cancel",
   importJson: "Apply JSON to settings",

src/options/resource/ja.ts

@@ -79,7 +79,7 @@ const JapaneseTextResource: TextResource = {
   loadInitialDict: "デフォルト辞書データの再ロード",
   downloadDictData: "追加辞書データをダウンロードする",
   setKeyboardShortcuts: "キーボードショートカットを設定する",
-  openPdfViewer: "PDFビューアを起動する",
+  openPdfViewer: "PDFビューア",
   openJsonEditor: "JSONエディタを開く",
   closeJsonEditor: "キャンセル",
   importJson: "JSONを設定に反映",