Simplify the interface

chunibyocola · Nov 23, 2020 · f334ce7 · f334ce7
1 parent f801130
commit f334ce7
Show file tree

Hide file tree

Showing 16 changed files with 130 additions and 140 deletions.
diff --git a/src/components/LanguageSelection/LSelect.js b/src/components/LanguageSelection/LSelect.js
@@ -24,7 +24,6 @@ const LSelect = ({ isFrom, onChange, disableSelect, from, to, options }) => {
 
     return (
         <div className='ts-select-box'>
-            <label className='ts-fromAndTo'>{isFrom? 'from': 'to'}</label>
             <select
                 value={isFrom ? from : to}
                 className='ts-lselect'

diff --git a/src/components/MultipleTranslate/MtPopup/index.js b/src/components/MultipleTranslate/MtPopup/index.js
@@ -57,25 +57,25 @@ const MtPopup = () => {
                     to={to}
                     options={mtLangCode}
                 />
+                <div className='ts-mt-results ts-scrollbar'>
+                    {translations.length === 0 ? 
+                        <div className='ts-mt-result-add-translate-source'>{getI18nMessage('sentenceAddTranslateSource')}</div> :
+                    translations.map(({ source, status, result }) => (
+                        <MtResult
+                            source={source}
+                            status={status}
+                            result={result}
+                            key={source}
+                            text={text}
+                            translate={() => handleTranslate(source)}
+                            remove={() => handleRemoveSource(source)}
+                            readText={(text, from) => sendAudio(text, { source, from })}
+                            retry={() => handleRetry(source)}
+                        />
+                    ))}
+                </div>
+                <MtAddSource translations={translations} />
             </div>
-            <div className='ts-mt-content ts-scrollbar'>
-                {translations.length === 0 ? 
-                    <div className='ts-mt-result-add-translate-source'>{getI18nMessage('sentenceAddTranslateSource')}</div> :
-                translations.map(({ source, status, result }) => (
-                    <MtResult
-                        source={source}
-                        status={status}
-                        result={result}
-                        key={source}
-                        text={text}
-                        translate={() => handleTranslate(source)}
-                        remove={() => handleRemoveSource(source)}
-                        readText={(text, from) => sendAudio(text, { source, from })}
-                        retry={() => handleRetry(source)}
-                    />
-                ))}
-            </div>
-            <MtAddSource translations={translations} />
         </div>
     );
 };

diff --git a/src/components/MultipleTranslate/MtPopup/style.css b/src/components/MultipleTranslate/MtPopup/style.css
@@ -8,14 +8,11 @@
     color: var(--text-normal) !important;
 }
 .content {
-    margin: 0 auto;
-    height: fit-content;
-    width: 240px;
-    color: var(--text-normal);
-}
-.ts-mt-content {
-    width: 246px;
     margin: 2px auto;
+    width: 242px;
+}
+.ts-mt-results {
+    width: 100%;
     max-height: 250px;
     overflow-y: auto;
 }

diff --git a/src/components/MultipleTranslate/index.js b/src/components/MultipleTranslate/index.js
@@ -96,7 +96,7 @@ const MultipleTranslate = () => {
                 onMouseDown={e => drag(e, pinPos, changePinPos, handlePosChange)}
             >
                 <span className='ts-mt-header-title'>
-                    <span>{getI18nMessage('contentResult')}</span>
+                    <span>Sc</span>
                 </span>
                 <span className='ts-mt-header-icons'>
                     <IconFont
@@ -113,37 +113,39 @@ const MultipleTranslate = () => {
                     />
                 </span>
             </div>
-            <div style={{display: showRtAndLs ? 'block' : 'none', width: '246px', margin: '0px auto'}}>
-                <RawText
-                    defaultValue={text}
-                    rawTextTranslate={handleRawTextChange}
-                    focusDependency={focusRawText}
-                />
-                <LanguageSelection
-                    selectionChange={handleSelectionChange}
-                    from={from}
-                    to={to}
-                    options={mtLangCode}
-                />
-            </div>
-            <div className='ts-mt-content ts-scrollbar'>
-                {translations.length === 0 ? 
-                    <div className='ts-mt-result-add-translate-source'>{getI18nMessage('sentenceAddTranslateSource')}</div> :
-                translations.map(({ source, status, result }) => (
-                    <MtResult
-                        source={source}
-                        status={status}
-                        result={result}
-                        key={source}
-                        text={text}
-                        translate={() => handleTranslate(source)}
-                        remove={() => handleRemoveSource(source)}
-                        readText={(text, from) => sendAudio(text, { source, from })}
-                        retry={() => handleRetry(source)}
+            <div className='ts-mt-content'>
+                <div style={{display: showRtAndLs ? 'block' : 'none'}}>
+                    <RawText
+                        defaultValue={text}
+                        rawTextTranslate={handleRawTextChange}
+                        focusDependency={focusRawText}
+                    />
+                    <LanguageSelection
+                        selectionChange={handleSelectionChange}
+                        from={from}
+                        to={to}
+                        options={mtLangCode}
                     />
-                ))}
+                </div>
+                <div className='ts-mt-results ts-scrollbar'>
+                    {translations.length === 0 ? 
+                        <div className='ts-mt-result-add-translate-source'>{getI18nMessage('sentenceAddTranslateSource')}</div> :
+                    translations.map(({ source, status, result }) => (
+                        <MtResult
+                            source={source}
+                            status={status}
+                            result={result}
+                            key={source}
+                            text={text}
+                            translate={() => handleTranslate(source)}
+                            remove={() => handleRemoveSource(source)}
+                            readText={(text, from) => sendAudio(text, { source, from })}
+                            retry={() => handleRetry(source)}
+                        />
+                    ))}
+                </div>
+                <MtAddSource translations={translations} />
             </div>
-            <MtAddSource translations={translations} />
         </div>
     );
 };

diff --git a/src/components/MultipleTranslate/style.css b/src/components/MultipleTranslate/style.css
@@ -7,19 +7,21 @@
     left: 0px;
     width: 250px;
     background-color: var(--bg-total);
+    box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 10px 0px;
 }
 .ts-mt-content {
-    width: 246px;
-    margin: 2px auto;
+    width: 242px;
+    margin: 0 auto 4px;
+}
+.ts-mt-results {
+    width: 100%;
     max-height: 250px;
     overflow-y: auto;
 }
 .ts-mt-header {
     cursor: move;
     user-select: none;
     width: 100%;
-    color: var(--text-title);
-    background-color: var(--bg-title);
     padding: 5px;
     box-sizing: border-box;
     overflow: hidden;
@@ -35,6 +37,8 @@
     white-space: nowrap;
     max-width: 100px;
     overflow: hidden;
+    font-weight: bold;
+    color: var(--text-icon);
 }
 .ts-mt-header-icons {
     float: right;

diff --git a/src/components/Options/CustomizeTheme/CustomizeBoardDisplay/index.js b/src/components/Options/CustomizeTheme/CustomizeBoardDisplay/index.js
@@ -29,24 +29,22 @@ const CustomizeBoardDisplay = ({ styleVars }) => {
                 <div
                     class="ts-rb-head"
                     style={{
-                        color: styleVars['--text-title'],
-                        background: styleVars['--bg-title']
+                        color: styleVars['--text-icon']
                     }}
                 >
-                    <div class="tsrbh-title">Result</div>
+                    <div class="tsrbh-title">Sc</div>
                     <span class="tsrbh-icons">
                         <IconFont iconName='#icon-GoChevronDown' style={{transform: 'rotate(180deg)', opacity: '1', color: styleVars['--text-icon']}} />
                         <IconFont iconName='#icon-GoPin' style={{color: styleVars['--text-icon']}} />
                     </span>
                 </div>
                 <div class="ts-rb-content">
-                    <div class="tsrbc-rtandls tsrbc-rtandls-show">
+                    <div style={{color: styleVars['--text-normal']}}>
                         <div class="ts-raw-text">
                             <textarea placeholder="Input here" class="ts-rt-text">welcome</textarea>
                         </div>
                         <div class="ts-language-selection">
                             <div class="ts-select-box">
-                                <label class="ts-fromAndTo">from</label>
                                 <select class="ts-lselect" disabled style={{color: styleVars['--text-normal'], opacity: '1'}}>
                                     <option value="">自动选择</option>
                                 </select>
@@ -55,7 +53,6 @@ const CustomizeBoardDisplay = ({ styleVars }) => {
                                 <IconFont iconName='#icon-MdSwap' />
                             </span>
                             <div class="ts-select-box">
-                                <label class="ts-fromAndTo">to</label>
                                 <select class="ts-lselect" disabled style={{color: styleVars['--text-normal'], opacity: '1', background: styleVars['--bg-select-focus']}}>
                                     <option value="">自动选择</option>
                                 </select>
@@ -98,11 +95,10 @@ const CustomizeBoardDisplay = ({ styleVars }) => {
                 <div
                     class="title"
                     style={{
-                        color: styleVars['--text-title'],
-                        background: styleVars['--bg-title']
+                        color: styleVars['--text-icon']
                     }}
                 >
-                    <div class="title-logo">ScTranslator</div>
+                    <div class="title-logo">Sc</div>
                     <div class="title-icons">
                         <IconFont iconName='#icon-theme' className='title-icons-enable' style={{color: styleVars['--text-icon']}} />
                         <IconFont iconName='#icon-MdTranslate' className='title-icons-enable' style={{color: styleVars['--text-icon']}} />
@@ -116,7 +112,6 @@ const CustomizeBoardDisplay = ({ styleVars }) => {
                     </div>
                     <div class="ts-language-selection">
                         <div class="ts-select-box">
-                            <label class="ts-fromAndTo">from</label>
                             <select class="ts-lselect" disabled style={{color: styleVars['--text-normal'], opacity: '1', background: styleVars['--bg-select-focus']}}>
                                 <option value="">自动选择</option>
                             </select>
@@ -125,56 +120,55 @@ const CustomizeBoardDisplay = ({ styleVars }) => {
                             <IconFont iconName='#icon-MdSwap' />
                         </span>
                         <div class="ts-select-box">
-                            <label class="ts-fromAndTo">to</label>
                             <select class="ts-lselect" disabled style={{color: styleVars['--text-normal'], opacity: '1'}}>
                                 <option value="ja">日语</option>
                             </select>
                         </div>
                     </div>
-                </div>
-                <div class="ts-mt-content ts-scrollbar">
-                    <div class="ts-mt-result" style={{background: styleVars['--bg-content']}}>
-                        <div class="ts-mt-result-head ts-button" style={{color: styleVars['--text-normal']}}>
-                            <span class="ts-mt-result-head-source">
-                                <SourceFavicon source='google.com' />
-                                <IconFont iconName='#icon-GoUnmute' style={{marginLeft: '5px'}} />
-                            </span>
-                            <span class="ts-mt-result-head-icons">
-                                <IconFont iconName='#icon-GoChevronDown' style={{transform: 'rotate(180deg)'}} />
-                                <IconFont iconName='#icon-GoX' />
-                            </span>
-                        </div>
-                        <div class="ts-mt-result-result">
-                            <div style={{marginBottom: '10px'}}>[ˈwelkəm]</div>
-                            <div>
-                                <span style={{marginRight: '5px'}}>ようこそ</span>
-                                <IconFont iconName='#icon-GoUnmute' />
+                    <div class="ts-mt-results ts-scrollbar">
+                        <div class="ts-mt-result" style={{background: styleVars['--bg-content']}}>
+                            <div class="ts-mt-result-head ts-button" style={{color: styleVars['--text-normal']}}>
+                                <span class="ts-mt-result-head-source">
+                                    <SourceFavicon source='google.com' />
+                                    <IconFont iconName='#icon-GoUnmute' style={{marginLeft: '5px'}} />
+                                </span>
+                                <span class="ts-mt-result-head-icons">
+                                    <IconFont iconName='#icon-GoChevronDown' style={{transform: 'rotate(180deg)'}} />
+                                    <IconFont iconName='#icon-GoX' />
+                                </span>
+                            </div>
+                            <div class="ts-mt-result-result">
+                                <div style={{marginBottom: '10px'}}>[ˈwelkəm]</div>
+                                <div>
+                                    <span style={{marginRight: '5px'}}>ようこそ</span>
+                                    <IconFont iconName='#icon-GoUnmute' />
+                                </div>
+                                <div style={{marginTop: '10px'}}>名词: 歓迎, ウエルカム, 優待, 奉迎, 遠見, 接待</div>
+                                <div>动词: 歓迎する</div>
                             </div>
-                            <div style={{marginTop: '10px'}}>名词: 歓迎, ウエルカム, 優待, 奉迎, 遠見, 接待</div>
-                            <div>动词: 歓迎する</div>
-                        </div>
-                    </div>
-                    <div class="ts-mt-result" style={{background: styleVars['--bg-content']}}>
-                        <div class="ts-mt-result-head ts-button" style={{color: styleVars['--text-normal']}}>
-                            <span class="ts-mt-result-head-source">
-                                <SourceFavicon source='bing.com' />
-                                <IconFont iconName='#icon-GoUnmute' style={{marginLeft: '5px'}} />
-                            </span>
-                            <span class="ts-mt-result-head-icons">
-                                <IconFont iconName='#icon-GoChevronDown' style={{transform: 'rotate(180deg)'}} />
-                                <IconFont iconName='#icon-GoX' />
-                            </span>
                         </div>
-                        <div class="ts-mt-result-result">
-                            <div>
-                                <span style={{marginRight: '5px'}}>ようこそ</span>
-                                <IconFont iconName='#icon-GoUnmute' />
+                        <div class="ts-mt-result" style={{background: styleVars['--bg-content']}}>
+                            <div class="ts-mt-result-head ts-button" style={{color: styleVars['--text-normal']}}>
+                                <span class="ts-mt-result-head-source">
+                                    <SourceFavicon source='bing.com' />
+                                    <IconFont iconName='#icon-GoUnmute' style={{marginLeft: '5px'}} />
+                                </span>
+                                <span class="ts-mt-result-head-icons">
+                                    <IconFont iconName='#icon-GoChevronDown' style={{transform: 'rotate(180deg)'}} />
+                                    <IconFont iconName='#icon-GoX' />
+                                </span>
+                            </div>
+                            <div class="ts-mt-result-result">
+                                <div>
+                                    <span style={{marginRight: '5px'}}>ようこそ</span>
+                                    <IconFont iconName='#icon-GoUnmute' />
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-                <div class="ts-mt-add-source">
-                    <IconFont iconName='#icon-plus' />
+                    <div class="ts-mt-add-source">
+                        <IconFont iconName='#icon-plus' />
+                    </div>
                 </div>
             </div>
             {/* SourceSelector */}

diff --git a/src/components/Options/CustomizeTheme/CustomizeBoardOptions/index.js b/src/components/Options/CustomizeTheme/CustomizeBoardOptions/index.js
@@ -4,14 +4,12 @@ import ColorSelector from './ColorSelector';
 import './style.css';
 
 const initChanging = { targetColor: '', saved: false, offsetColor: '' };
-const textKeyList = ['--text-normal', '--text-title', '--text-icon'];
-const bgKeyList = ['--bg-content', '--bg-title', '--bg-total', '--bg-item-hover', '--bg-select-focus'];
+const textKeyList = ['--text-normal', '--text-icon'];
+const bgKeyList = ['--bg-content', '--bg-total', '--bg-item-hover', '--bg-select-focus'];
 const i18nMessage = {
     '--text-normal': 'Normal',
-    '--text-title': 'Title',
     '--text-icon': 'Icon',
     '--bg-content': 'Content',
-    '--bg-title': 'Title',
     '--bg-total': 'Total',
     '--bg-item-hover': 'Item hover',
     '--bg-select-focus': 'Select focus'

diff --git a/src/components/Popup/style.css b/src/components/Popup/style.css
@@ -5,10 +5,9 @@
   height: fit-content;
   background: var(--bg-total);
   padding-bottom: 2px;
+  color: var(--text-normal) !important;
 }
 .content {
-  margin: 0 auto;
-  height: fit-content;
-  width: 240px;
-  color: var(--text-normal);
+  margin: 4px;
+  width: 242px;
 }
diff --git a/src/components/PopupHeader/index.js b/src/components/PopupHeader/index.js
@@ -59,7 +59,7 @@ const PopupHeader = () => {
 
     return (
         <div className="title">
-            <div className='title-logo'>{getI18nMessage('extName')}</div>
+            <div className='title-logo'>Sc</div>
             <div className='title-icons'>
                 <IconFont
                     iconName='#icon-theme'

diff --git a/src/components/PopupHeader/style.css b/src/components/PopupHeader/style.css
@@ -1,11 +1,11 @@
 .title {
     position: relative;
-    background: var(--bg-title);
+    color: var(--text-icon);
     height: 30px;
     line-height: 30px;
-    color: var(--text-title);
 }
 .title-logo {
+    font-weight: bold;
     font-size: 16px;
     margin-left: 5px;
 }

diff --git a/src/components/RawText/style.css b/src/components/RawText/style.css
@@ -1,6 +1,3 @@
-.ts-raw-text {
-    margin: 5px auto;
-}
 .ts-rt-text {
     border: none;
     font-size: 16px;