UI: popup ui modified

components/Collapse.svelte

@@ -6,9 +6,9 @@
 
 
 <div tabindex="0"
-     class="collapse collapse-arrow border border-base-300 bg-base-100 rounded-box">
+     class="collapse collapse-arrow border bg-base-100">
   <input type="checkbox" bind:checked={default_open} />
-  <div class="collapse-title text-xl font-medium">
+  <div class="collapse-title text-lg font-medium">
     {title}
   </div>
   <div class="collapse-content">

components/LinkButton.svelte

@@ -15,7 +15,7 @@
   };
 </script>
 
-<button class="btn {handleClassByType(type)}" on:click={() => {
+<button class="btn btn-sm {handleClassByType(type)}" on:click={() => {
         chrome.tabs.create({
           url: url
         })

components/PromiseWaiting.svelte

@@ -1,13 +1,15 @@
 <script>
-  import { popupPageI18nValue } from "~utils/constants";
-
   export let promises;
+  export let hidden = false;
 </script>
 
-{#await Promise.all(promises)}
-  <p>{popupPageI18nValue.WAITING}</p>
-{:then _}
-  <slot></slot>
-{:catch err}
-  <p>{err}</p>
-{/await}
+<div class:hidden={hidden}>
+  {#await Promise.all(promises)}
+    <progress class="progress w-56"></progress>
+  {:then _}
+    <slot></slot>
+  {:catch err}
+    <p>{err}</p>
+  {/await}
+</div>
+

components/SimpleCheckbox.svelte

@@ -7,7 +7,7 @@
 
 <div class="input-group">
   <label class="label cursor-pointer">
-    <input type="checkbox" bind:checked={$isChecked} class="checkbox checkbox-primary" />
+    <input type="checkbox" bind:checked={$isChecked} class="checkbox checkbox-primary checkbox-xs" />
   </label>
   <span class="label-text bg-base-100">{text}</span>
 </div>

components/SimpleSelect.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <select
-  class="select"
+  class="select select-sm"
   bind:value="{bind_value}">
   {#each Object.keys(keys) as key}
     <option value={keys[key]}>

components/popup/ExportSettings.svelte

@@ -1,53 +1,35 @@
 <script>
-  import Collapse from "~components/Collapse.svelte";
-  import { exportSettingsI18nValue, exportTypes, exportWidthTemplateKeys, popupPageI18nValue } from "~utils/constants";
+  import { exportSettingsI18nValue, exportTypes, exportWidthTemplateKeys } from "~utils/constants";
   import { exportSettings } from "~utils/store/stores";
   import PromiseWaiting from "~components/PromiseWaiting.svelte";
+  import SimpleSelect from "~components/SimpleSelect.svelte";
+  export let hidden = false;
 
   let promises = [
     exportSettings.init(),
   ];
 
 </script>
 
-<PromiseWaiting {promises}>
-<Collapse
-  title={popupPageI18nValue.EXPORT_SETTINGS_TITLE}
-  default_open={true}
->
+<PromiseWaiting {promises} {hidden}>
   {#each $exportSettings as message, i}
     <div class="form-control">
       <div class="input-group">
         <label class="label cursor-pointer">
-          <input type="checkbox" bind:checked={message.on} class="checkbox checkbox-primary" />
+          <input type="checkbox" bind:checked={message.on} class="checkbox checkbox-primary checkbox-xs" />
         </label>
-        <select
-          class="select"
-          bind:value="{message.type}">
-          {#each Object.keys(exportTypes) as key}
-            <option value={exportTypes[key]}>
-              {exportTypes[key]}
-            </option>
-          {/each}
-        </select>
-        <select
-          class="select"
-          bind:value="{message.size_template}">
-          {#each Object.keys(exportWidthTemplateKeys) as key}
-            <option value={exportWidthTemplateKeys[key]}>
-              {exportSettingsI18nValue[key]}
-            </option>
-          {/each}
-        </select>
-
-        <!--        <SimpleSelect-->
-<!--          bind:bind_value="{message.size_template}"-->
-<!--          keys={exportWidthTemplateKeys}-->
-<!--          values={exportSettingsI18nValue}-->
-<!--        />-->
+        <SimpleSelect
+          bind:bind_value="{message.type}"
+          keys={exportTypes}
+          values={exportSettingsI18nValue}
+        />
+        <SimpleSelect
+          bind:bind_value="{message.size_template}"
+          keys={exportWidthTemplateKeys}
+          values={exportSettingsI18nValue}
+        />
       </div>
     </div>
   {/each}
-</Collapse>
 </PromiseWaiting>
 

components/popup/RequestSettings.svelte

@@ -1,20 +1,16 @@
 <script>
-  import Collapse from "~components/Collapse.svelte";
   import SimpleCheckbox from "~components/SimpleCheckbox.svelte";
   import { popupPageI18nValue } from "~utils/constants";
   import { requestIpSetting, requestUserAgentSetting } from "~utils/store/stores";
   import PromiseWaiting from "~components/PromiseWaiting.svelte";
+  export let hidden = false;
   let promises = [
     requestIpSetting.init(),
     requestUserAgentSetting.init(),
   ];
 </script>
 
-<PromiseWaiting {promises}>
-<Collapse
-  title={popupPageI18nValue.REQUEST_SETTING}
-  default_open={true}
->
+<PromiseWaiting {promises} {hidden}>
   <div class="form-control">
     <SimpleCheckbox
       isChecked={requestUserAgentSetting}
@@ -26,5 +22,4 @@
       text={popupPageI18nValue.REQUEST_IP}
     />
   </div>
-</Collapse>
 </PromiseWaiting>

components/popup/UISettings.svelte

@@ -1,21 +1,17 @@
 <script>
-  import Collapse from "~components/Collapse.svelte";
   import { popupPageI18nValue } from "~utils/constants";
   import SimpleCheckbox from "~components/SimpleCheckbox.svelte";
   import { feedbackHiddenSetting, welcomeHiddenSetting } from "~utils/store/stores";
   import PromiseWaiting from "~components/PromiseWaiting.svelte";
+  export let hidden = false;
 
   let promises = [
     welcomeHiddenSetting.init(),
     feedbackHiddenSetting.init(),
   ];
 </script>
 
-<PromiseWaiting {promises}>
-<Collapse
-  title={popupPageI18nValue.UI_SETTINGS_TITLE}
-  default_open={true}
->
+<PromiseWaiting {promises} {hidden}>
   <div class="form-control">
     <SimpleCheckbox
       isChecked={welcomeHiddenSetting}
@@ -26,5 +22,4 @@
       text={popupPageI18nValue.HIDDEN_FEEDBACK}
     />
   </div>
-</Collapse>
 </PromiseWaiting>

locales/en/messages.json

@@ -20,11 +20,11 @@
     "description": "Record button"
   },
   "popup_bing_chat_website_button": {
-    "message": "Bing Chat Website",
+    "message": "Bing Chat",
     "description": "Bing Website button"
   },
   "popup_bing_new_website_button": {
-    "message": "Bing Chat Demo",
+    "message": "Chat Demo",
     "description": "Bing New Website button"
   },
   "popup_bing_demo_website_button": {
@@ -36,11 +36,11 @@
     "description": "Link title"
   },
   "popup_export_settings_title": {
-    "message": "Export Settings",
+    "message": "Export",
     "description": "Export title"
   },
   "popup_ui_settings_title": {
-    "message": "UI Settings",
+    "message": "UI",
     "description": "UI title"
   },
   "popup_hidden_welcome": {
@@ -72,7 +72,7 @@
     "description": "Export JSON button"
   },
   "popup_request_setting": {
-    "message": "Request Settings",
+    "message": "Request",
     "description": "Request Setting"
   },
   "popup_export_type_as_seen": {
@@ -91,6 +91,10 @@
     "message": "Not jump to cn.bing.com",
     "description": "Request IP"
   },
+  "popup_settings": {
+    "message": "Settings",
+    "description": "Settings"
+  },
   "end": {
     "message": "End",
     "description": "Just for end"

locales/zh_CN/messages.json

@@ -36,11 +36,11 @@
     "description": "Link title"
   },
   "popup_export_settings_title": {
-    "message": "导出设置",
+    "message": "导出",
     "description": "Export title"
   },
   "popup_ui_settings_title": {
-    "message": "界面设置",
+    "message": "界面",
     "description": "UI title"
   },
   "popup_hidden_welcome": {
@@ -80,7 +80,7 @@
     "description": "Export mobile button"
   },
   "popup_request_setting": {
-    "message": "请求设置",
+    "message": "请求",
     "description": "Request setting"
   },
   "popup_request_browser": {
@@ -91,6 +91,10 @@
     "message": "避免跳转到cn.bing.com",
     "description": "Request IP"
   },
+  "popup_settings": {
+    "message": "设置",
+    "description": "Settings"
+  },
   "end": {
     "message": "End",
     "description": "结尾的占位符"

popup.svelte

@@ -4,8 +4,18 @@
   import ExportSettings from "~components/popup/ExportSettings.svelte";
   import UISettings from "~components/popup/UISettings.svelte";
   import RequestSettings from "~components/popup/RequestSettings.svelte";
+  import Collapse from "~components/Collapse.svelte";
+  import { popupPageI18nValue } from "~utils/constants";
 
   let debug = false;
+  let activeTab = "export-setting-tab";
+
+  const tabOnClick = (e) => {
+    const tab_group = document.querySelector("#setting-tabs");
+    tab_group.querySelector(".tab-active").classList.remove("tab-active");
+    e.target.classList.add("tab-active");
+    activeTab = e.target.id;
+  };
 </script>
 
 <style>
@@ -16,17 +26,29 @@
         min-width: 300px;
     }
 </style>
-<!--collapse all Collepse by changing default_open to false-->
-<!--TODO: font_size-- ?-->
-<!--TODO: 大小自适应-->
 <div class="main">
   {#if debug}
     <DebugQuickButtons />
   {/if}
   <TopLinks />
-  <ExportSettings />
-  <UISettings />
-  <RequestSettings />
+  <Collapse
+    title={popupPageI18nValue.SETTINGS}
+  >
+    <div class="bg-base-200 border border-b-base-200 rounded-md">
+      <div id="setting-tabs" class="tabs">
+        <a class="tab tab-lifted tab-active" id="export-setting-tab"
+           on:click={tabOnClick}>{popupPageI18nValue.EXPORT_SETTINGS_TITLE}</a>
+        <a class="tab tab-lifted" id="ui-setting-tab" on:click={tabOnClick}>{popupPageI18nValue.UI_SETTINGS_TITLE}</a>
+        <a class="tab tab-lifted" id="request-setting-tab" on:click={tabOnClick}>{popupPageI18nValue.REQUEST_SETTING}</a>
+      </div>
+      <div id="setting-tab-content" class="bg-base-100">
+        <ExportSettings hidden={activeTab !== "export-setting-tab"} />
+        <UISettings hidden={activeTab !== "ui-setting-tab"} />
+        <RequestSettings hidden={activeTab !== "request-setting-tab"} />
+      </div>
+    </div>
+  </Collapse>
+
 </div>
 
 

todo.md

@@ -33,6 +33,7 @@
 ## others
 
 - [ ] logger
+- [ ] popup: page resize
 - [ ] make some function appear only in dev mode
 - [ ] how to add unittest for shadow-roots?
 - [ ] 改英文文档

utils/constants.ts

@@ -75,6 +75,7 @@ const popupPageI18nKey = {
   HIDDEN_FEEDBACK: "popup_hidden_feedback",
   REQUEST_BROWSER: "popup_request_browser",
   REQUEST_IP: "popup_request_ip",
+  SETTINGS: "popup_settings",
   WAITING: "popup_waiting"
 };