fix(top-bar): resolve issue when top bar can't be disabled && refactor top bar visibility functionally (#971)

close #971

src/_locales/cmn-CN.yml

@@ -194,6 +194,8 @@ settings:
 
   # Compatibility
   # Common
+  topbar_visibility: 顶栏可见性
+  topbar_visibility_desc: 如果您正在使用 Bilibili Evolved 的顶栏，您可以在这里关闭 BewlyBewly 的顶栏。
   use_original_bilibili_homepage: 使用原版 Bilibili 首页
   use_original_bilibili_homepage_desc: 在您更改此设置后，如果在首页上，页面将自动刷新！
   use_original_bilibili_topbar: 使用原版 Bilibili 顶栏
@@ -202,8 +204,6 @@ settings:
   # Bilibili Evolved
   follow_bilibili_evolved_color: 使用 Bilibili Evolved 主题色
   follow_bilibili_evolved_color_desc: 每次选完 Bilibili Evolved 主题色时，记得重新选中这一选项以更新配置
-  topbar_visibility: 顶栏可见性
-  topbar_visibility_desc: 用于兼容 Bilibili Evolved 自定义顶栏
 
   # About
   links: 链接

src/_locales/cmn-TW.yml

@@ -197,14 +197,14 @@ settings:
 
   # Compatibility
   # Common
+  topbar_visibility: 頂欄可視性
+  topbar_visibility_desc: 如果你正在使用 Bilibili Evolved 的頂欄，你可以在這裡關閉 BewlyBewly 的頂欄。
   use_original_bilibili_homepage: 使用原版 Bilibili 首頁
   use_original_bilibili_homepage_desc: 當您變更此設定後，如果在首頁上，頁面將自動重新整理！
   use_original_bilibili_topbar: 使用原版 Bilibili 頂欄
   adapt_to_other_page_styles: 適應其他頁面風格
   adapt_to_other_page_styles_desc: 適應一些常見頁面，以配合 BewlyBewly 主題
   # Bilibili Evolved
-  topbar_visibility: 頂欄可視性
-  topbar_visibility_desc: 用於與 Bilibili Evolved 客製化頂欄相容
   follow_bilibili_evolved_color: 使用 Bilibili Evolved 主題色
   follow_bilibili_evolved_color_desc: 每次變更 Bilibili Evolved 主題色後，記得重新選取此選項以更新配置
 

src/_locales/en.yml

@@ -197,6 +197,8 @@ settings:
 
   # Compatibility
   # Common
+  topbar_visibility: BewlyBewly's top bar visibility
+  topbar_visibility_desc: If you are using Bilibili Evolved's top bar, you can turn BewlyBewly's top bar off here.
   use_original_bilibili_homepage: Use the original Bilibili homepage
   use_original_bilibili_homepage_desc: After you change it, the page will automatically refresh if you are on the homepage!
   use_original_bilibili_topbar: Use the original Bilibili top bar
@@ -205,8 +207,6 @@ settings:
   # Bilibili Evolved
   follow_bilibili_evolved_color: Follow the Bilibili Evolved theme color
   follow_bilibili_evolved_color_desc: After changing the theme color in Bilibili Evolved, you will need to re-select this option in order to update the theme color.
-  topbar_visibility: Top bar visibility
-  topbar_visibility_desc: Compatible with Bilibili Evolved customize top bar
 
   # About
   links: Links

src/_locales/jyut.yml

@@ -56,7 +56,7 @@ settings:
   group_common: 通用
   group_video_card: 影片卡片
   group_performance: 毛玻璃同效能
-  group_topbar: 頂欄
+  group_topbar: 頂部欄
   group_dock: Dock
   group_color: 顏色
   group_wallpaper: 背景圖片
@@ -94,8 +94,8 @@ settings:
   block_ads: 封鎖廣告
   disable_frosted_glass: 閂咗毛玻璃效果
   reduce_frosted_glass_blur: 降低毛玻璃模糊強度
-  use_old_topbar: 用返舊版頂欄
-  auto_hide_topbar: 自動收埋頂欄
+  use_old_topbar: 用返舊版頂部欄
+  auto_hide_topbar: 自動收埋頂部欄
   topbar_icon_badges: 圖示邊位標記
   topbar_icon_badges_opt:
     number: 數字
@@ -197,16 +197,16 @@ settings:
 
   # Compatibility
   # Common
+  topbar_visibility: BewlyBewly 頂部欄可視性
+  topbar_visibility_desc: 若然你係用緊 Bilibili Evolved 嘅頂部欄，你可以喺度閂咗 BewlyBewly 嘅頂部欄去。
   use_original_bilibili_homepage: 用返原本嘅 Bilibili 主頁
   use_original_bilibili_homepage_desc: 改咗之後，如果你喺主頁，個頁面就會自動重新整理！
-  use_original_bilibili_topbar: 用返原本嘅 Bilibili 頂欄
+  use_original_bilibili_topbar: 用返原本嘅 Bilibili 頂部欄
   adapt_to_other_page_styles: 適應其他版面風格
   adapt_to_other_page_styles_desc: 執執啲常用嘅版面，襯返 BewlyBewly 主題風格
   # Bilibili Evolved
-  follow_bilibili_evolved_color: 跟返 Bilibili Evolved 佈景色
-  follow_bilibili_evolved_color_desc: 每次換完 Bilibili Evolved 佈景色嗰陣，記得揀多一次呢個選項愛嚟更新佈置
-  topbar_visibility: 頂欄可視性
-  topbar_visibility_desc: 用於兼容 Bilibili Evolved 客製化頂欄
+  follow_bilibili_evolved_color: 跟返 Bilibili Evolved 主題色
+  follow_bilibili_evolved_color_desc: 每次換完 Bilibili Evolved 主題色嗰陣，記得揀多一次呢個選項愛嚟更新佈置
 
   # About
   links: 拎
@@ -270,7 +270,7 @@ topbar:
   user_dropdown:
     money: 銀仔：
     b_coins: B銀：
-    exp_desc: '當前經驗 {current_exp}，升到 LV {level} 仲要 {need_exp}'
+    exp_desc: '而家經驗 {current_exp}，升到 LV {level} 仲要 {need_exp}'
     following: 追緊
     followers: 擁躉
     posts: 動向

src/components/Settings/Compatibility/Compatibility.vue

@@ -22,6 +22,9 @@ function changeThemeColor(color: string) {
 <template>
   <div>
     <SettingsItemGroup :title="$t('settings.group_common')">
+      <SettingsItem :title="$t('settings.topbar_visibility')" :desc="$t('settings.topbar_visibility_desc')">
+        <Radio v-model="settings.showTopBar" :label="settings.showTopBar ? $t('settings.chk_box.show') : $t('settings.chk_box.hidden')" />
+      </SettingsItem>
       <SettingsItem :title="$t('settings.use_original_bilibili_topbar')">
         <Radio v-model="settings.useOriginalBilibiliTopBar" />
       </SettingsItem>
@@ -50,10 +53,6 @@ function changeThemeColor(color: string) {
           @click="changeThemeColor(bilibiliEvolvedThemeColor)"
         />
       </SettingsItem>
-
-      <SettingsItem :title="$t('settings.topbar_visibility')" :desc="$t('settings.topbar_visibility_desc')">
-        <Radio v-model="settings.showTopBar" :label="settings.showTopBar ? $t('settings.chk_box.show') : $t('settings.chk_box.hidden')" />
-      </SettingsItem>
     </SettingsItemGroup>
   </div>
 </template>

src/contentScripts/views/App.vue

@@ -74,8 +74,9 @@ watch(() => settings.value.reduceFrostedGlassBlur, () => {
   handleReduceFrostedGlassBlur()
 })
 
-watch(() => settings.value.useOriginalBilibiliTopBar, () => {
-  settings.value.showTopBar = !settings.value.useOriginalBilibiliTopBar
+watch(() => settings.value.useOriginalBilibiliTopBar, (newVal) => {
+  if (newVal)
+    settings.value.showTopBar = !settings.value.useOriginalBilibiliTopBar
   document.documentElement.classList.toggle('remove-bili-top-bar', !settings.value.useOriginalBilibiliTopBar)
 }, { immediate: true })