fix bug

koodo-reader · Sep 15, 2023 · b21c0f7 · b21c0f7
1 parent b8569e9
commit b21c0f7
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 67 deletions.
diff --git a/src/components/popups/popupBox/component.tsx b/src/components/popups/popupBox/component.tsx
@@ -37,7 +37,7 @@ class PopupBox extends React.Component<PopupBoxProps, PopupBoxStates> {
           // style={this.props.isOpenMenu ? {} : { display: "none" }}
         >
           {this.props.menuMode === "note" ? (
-            <PopupNote {...PopupProps} />
+            <PopupDict {...PopupProps} />
           ) : this.props.menuMode === "trans" ? (
             <PopupTrans {...PopupProps} />
           ) : this.props.menuMode === "dict" ? (

diff --git a/src/components/popups/popupDict/component.tsx b/src/components/popups/popupDict/component.tsx
@@ -63,7 +63,7 @@ class PopupDict extends React.Component<PopupDictProps, PopupDictState> {
           .filter((item) => item !== "result")
           .map((item) => {
             if (res[item]) {
-              return `<p><span style="font-weight: bold">[${item}]</span> ${res[item]}</p>`;
+              return `<p><span class="dict-word-type">[${item}]</span> ${res[item]}</p>`;
             } else {
               return "";
             }
@@ -123,13 +123,13 @@ class PopupDict extends React.Component<PopupDictProps, PopupDictState> {
       }
     } else {
       axios
-        .get(`https://api.dictionaryapi.dev/api/v2/entries/en/${text}`)
+        .get(`https://api.dictionaryapi.dev/api/v2/entries/en/${"love"}`)
         .then((res: any) => {
           let dictText = res.data[0].meanings
             .map((item) => {
-              return `<p><span style="font-weight: bold">[${
+              return `<p><p class="dict-word-type">[${
                 item.partOfSpeech
-              }]</span><div>${item.definitions
+              }]</p><div>${item.definitions
                 .map((item, index) => {
                   return (
                     `<span style="font-weight: bold">${index + 1}</span>` +
@@ -155,45 +155,9 @@ class PopupDict extends React.Component<PopupDictProps, PopupDictState> {
     const renderNoteEditor = () => {
       return (
         <div className="dict-container">
-          <div className="dict-text-box">
-            {Parser(
-              DOMPurify.sanitize(this.state.dictText + "<address></address>") ||
-                " ",
-              {
-                replace: (domNode) => {
-                  if (this.state.dictService === "Yandex.Dictionary") {
-                    if (domNode.name === "address") {
-                      delete domNode.attribs.onclick;
-                      return (
-                        <p
-                          onClick={() => {
-                            openExternalUrl(
-                              this.state.dictService
-                                ? dictList.filter(
-                                    (item) =>
-                                      item.name === this.state.dictService
-                                  )[0].url
-                                : dictList[0].url
-                            );
-                          }}
-                          className="dict-url"
-                        >
-                          {"Powered by " +
-                            (this.state.dictService
-                              ? this.state.dictService
-                              : "Free Dictionary API")}
-                        </p>
-                      );
-                    }
-                  }
-                },
-              }
-            )}
-          </div>
-
-          <div className="target-lang-container">
+          <div className="dict-service-container">
             <select
-              className="booklist-shelf-list"
+              className="dict-service-selector"
               style={{ width: "120px", margin: 0 }}
               onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
                 this.setState({ dictService: event.target.value }, () => {
@@ -231,6 +195,47 @@ class PopupDict extends React.Component<PopupDictProps, PopupDictState> {
               })}
             </select>
           </div>
+          <div className="dict-word">Love</div>
+          <div className="dict-original-word">
+            <span>原型:</span>
+            <span>Love</span>
+          </div>
+
+          <div className="dict-text-box">
+            {Parser(
+              DOMPurify.sanitize(this.state.dictText + "<address></address>") ||
+                " ",
+              {
+                replace: (domNode) => {
+                  if (this.state.dictService === "Yandex.Dictionary") {
+                    if (domNode.name === "address") {
+                      delete domNode.attribs.onclick;
+                      return (
+                        <p
+                          onClick={() => {
+                            openExternalUrl(
+                              this.state.dictService
+                                ? dictList.filter(
+                                    (item) =>
+                                      item.name === this.state.dictService
+                                  )[0].url
+                                : dictList[0].url
+                            );
+                          }}
+                          className="dict-url"
+                        >
+                          {"Powered by " +
+                            (this.state.dictService
+                              ? this.state.dictService
+                              : "Free Dictionary API")}
+                        </p>
+                      );
+                    }
+                  }
+                },
+              }
+            )}
+          </div>
         </div>
       );
     };

diff --git a/src/components/popups/popupDict/popupDict.css b/src/components/popups/popupDict/popupDict.css
@@ -1,38 +1,71 @@
 .dict-container {
-  width: 264px;
-  height: 172px;
+  width: calc(100% - 30px);
+  height: calc(100% - 65px);
+  padding: 25px;
+  padding-top: 5px;
+}
+.dict-word {
+  font-size: 30px;
+  /* color: #2084e8; */
+  font-weight: bold;
+  line-height: 30px;
+  display: inline-block;
+  /* border-left: solid 4px #2084e8; */
+  /* padding-left: 5px; */
+  margin-top: 20px;
+  margin-left: 5px;
+}
+.dict-definition {
+  line-height: 30px;
+}
+.dict-original-word {
+  opacity: 0.6;
+  line-height: 20px;
+  margin-top: 10px;
+  margin-left: 5px;
+}
+.dict-word-type {
+  font-weight: bold;
+  color: #2084e8;
+  margin-bottom: 5px;
 }
-
 .dict-text-box {
-  width: 230px;
-  height: 100px;
   opacity: 1;
   border-radius: 5px;
-  position: absolute;
+  margin-top: 5px;
+  height: calc(100% - 45px);
   user-select: text;
   overflow-y: scroll;
   padding: 5px;
   box-sizing: border-box;
   font-size: 15px;
-  line-height: 18px;
+  line-height: 20px;
 }
+
 .dict-button-container {
   position: absolute;
   bottom: 8px;
   right: 20px;
 }
-.dict-text-box {
-  left: 16px;
-  top: 16px;
-}
-.target-lang-container {
+.dict-service-container {
   position: absolute;
-  width: calc(100% - 32px);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  bottom: 16px;
-  left: 16px;
+  /* width: calc(100% - 32px); */
+  top: 30px;
+  right: 25px;
+}
+.dict-service-selector {
+  width: 120px;
+  height: 30px;
+  opacity: 1;
+  font-size: 15px;
+  line-height: 30px;
+  border: none;
+  cursor: pointer;
+  color: #2084e8;
+  background-color: transparent;
+}
+.add-dialog-shelf-list-option {
+  color: black;
 }
 .dict-url {
   font-size: 12px;
@@ -42,6 +75,7 @@
 }
 .dict-container .r0bn4c {
   font-weight: bold;
+  color: #2084e8;
 }
 .dict-container .r0bn4c::before {
   content: "[";

diff --git a/src/components/popups/popupOption/component.tsx b/src/components/popups/popupOption/component.tsx
@@ -216,7 +216,7 @@ class PopupOption extends React.Component<PopupOptionProps> {
                         this.handleDigest();
                         break;
                       case 2:
-                        this.handleDict();
+                        this.handleTrans();
                         break;
                       case 3:
                         this.handleCopy();
@@ -225,7 +225,7 @@ class PopupOption extends React.Component<PopupOptionProps> {
                         this.handleSearchBook();
                         break;
                       case 5:
-                        this.handleTrans();
+                        this.handleDict();
                         break;
                       case 6:
                         this.handleSearchInternet();

diff --git a/src/components/popups/popupOption/popupOption.css b/src/components/popups/popupOption/popupOption.css
@@ -73,11 +73,11 @@
   color: #6867d1;
 }
 .browser-icon {
-  color: #2084e8;
+  color: #01b7bc;
   font-size: 27px;
 }
 .dict-icon {
-  color: #00a89d;
+  color: #2084e8;
   font-size: 25px;
   margin-left: -4px;
 }

diff --git a/src/constants/popupList.tsx b/src/constants/popupList.tsx
@@ -1,10 +1,10 @@
 export const popupList = [
   { name: "note", title: "Take Note", icon: "note" },
   { name: "digest", title: "Highlight", icon: "highlight" },
-  { name: "dict", title: "Dictionary", icon: "dict" },
+  { name: "translation", title: "Translate", icon: "translation" },
   { name: "copy", title: "Copy", icon: "copy" },
   { name: "search-book", title: "Search in the book", icon: "search-book" },
-  { name: "translation", title: "Translate", icon: "translation" },
+  { name: "dict", title: "Dictionary", icon: "dict" },
   { name: "browser", title: "Search on the internet", icon: "browser" },
   { name: "speaker", title: "Speak the text", icon: "Speaker" },
 ];