Added: Option to control visibility of close button of tab

(#217)

Author: mbnuqw

src/_locales/dict.setup-page.ts

@@ -1136,11 +1136,21 @@ export const setupPageTranslations: Translations = {
     de: 'Überspringe leere Panels beim Wechseln',
     zh_CN: '切换时跳过空面板',
   },
-  'settings.show_tab_rm_btn': {
-    en: 'Show close button on mouse hover',
-    ru: 'Показывать кнопку закрытия вкладки при наведении курсора',
-    de: 'Zeige "Schließen"-Knopf bei Maus-Hover',
-    zh_CN: '在鼠标悬停时显示关闭按钮',
+  'settings.tab_rm_btn': {
+    en: 'Show close button',
+    ru: 'Показывать кнопку закрытия вкладки',
+  },
+  'settings.tab_rm_btn_always': {
+    en: 'always',
+    ru: 'всегда',
+  },
+  'settings.tab_rm_btn_hover': {
+    en: 'on mouse hover',
+    ru: 'при наведении курсора',
+  },
+  'settings.tab_rm_btn_none': {
+    en: 'no',
+    ru: 'нет',
   },
   'settings.hide_inactive_panel_tabs': {
     en: 'Hide native tabs of inactive panels',

src/defaults/settings.ts

@@ -52,7 +52,7 @@ export const DEFAULT_SETTINGS: SettingsState = {
   warnOnMultiTabClose: 'collapsed',
   activateLastTabOnPanelSwitching: true,
   activateLastTabOnPanelSwitchingLoadedOnly: true,
-  showTabRmBtn: true,
+  tabRmBtn: 'hover',
   hideInact: false,
   activateAfterClosing: 'next',
   activateAfterClosingFallbackToHistory: true,
@@ -211,6 +211,7 @@ export const SETTINGS_OPTIONS = {
   bookmarksLeftClickAction: ['open_in_act', 'open_in_new'],
   bookmarksNewTabPos: ['default', 'after'],
   bookmarksMidClickAction: ['open_in_new', 'edit', 'delete'],
+  tabRmBtn: ['always', 'hover', 'none'],
   activateAfterClosing: ['prev_act', 'next', 'prev', 'none'],
   tabsUpdateMark: ['all', 'pin', 'norm', 'none'],
   pinnedTabsPosition: ['panel', 'top', 'left', 'right'],

src/page.setup/components/settings.tabs.vue

@@ -20,9 +20,12 @@ section(ref="el")
       label="settings.activate_last_tab_on_panel_switching_loaded_only"
       v-model:value="Settings.state.activateLastTabOnPanelSwitchingLoadedOnly"
       @update:value="Settings.saveDebounced(150)")
-  ToggleField(
-    label="settings.show_tab_rm_btn"
-    v-model:value="Settings.state.showTabRmBtn"
+  SelectField(
+    label="settings.tab_rm_btn"
+    optLabel="settings.tab_rm_btn_"
+    v-model:value="Settings.state.tabRmBtn"
+    :folded="true"
+    :opts="Settings.getOpts('tabRmBtn')"
     @update:value="Settings.saveDebounced(150)")
   ToggleField(
     label="settings.hide_inactive_panel_tabs"

src/sidebar/components/tab.vue

@@ -52,7 +52,7 @@
       .progress-spinner(v-if="loading === true")
       .child-count(v-if="tab.folded && tab.branchLen") {{tab.branchLen}}
     .close(
-      v-if="Settings.state.showTabRmBtn && !isPinned"
+      v-if="!isPinned && Settings.state.tabRmBtn !== 'none'"
       @mousedown.stop="onMouseDownClose"
       @mouseup.stop="onMouseUpClose"
       @contextmenu.stop.prevent)

src/sidebar/sidebar.vue

@@ -14,7 +14,7 @@
   :data-pinned-tabs-position="pinnedTabsPosition"
   :data-pinned-tabs-list="Settings.state.pinnedTabsList"
   :data-tabs-tree-lvl-marks="Settings.state.tabsLvlDots"
-  :data-tabs-close-btn="Settings.state.showTabRmBtn"
+  :data-tabs-close-btn="Settings.state.tabRmBtn"
   :data-drag="DnD.reactive.isStarted"
   :data-nav-inline="Settings.state.navBarInline"
   :data-nav-layout="navBarLayout"

src/styles/themes/proton/sidebar/tab.styl

@@ -506,17 +506,21 @@
   z-index: 1
   mask: linear-gradient(-90deg, transparent, #000000 12px, #000000)
 
-#root[data-tabs-close-btn="true"] .Tab:hover .t-box
+#root[data-tabs-close-btn="always"] .Tab .t-box
+#root[data-tabs-close-btn="hover"] .Tab:hover .t-box
   mask: linear-gradient(
     -90deg,
     transparent,
     transparent var(--close-btn-offset),
     #000000 calc(var(--close-btn-offset) + 12px),
     #000000)
 
-#root[data-tabs-close-btn="true"] .Tab[data-audible="true"]:hover .t-box
-#root[data-tabs-close-btn="true"] .Tab[data-muted="true"]:hover .t-box
-#root[data-tabs-close-btn="true"] .Tab[data-paused="true"]:hover .t-box
+#root[data-tabs-close-btn="always"] .Tab[data-audible="true"] .t-box
+#root[data-tabs-close-btn="always"] .Tab[data-muted="true"] .t-box
+#root[data-tabs-close-btn="always"] .Tab[data-paused="true"] .t-box
+#root[data-tabs-close-btn="hover"] .Tab[data-audible="true"]:hover .t-box
+#root[data-tabs-close-btn="hover"] .Tab[data-muted="true"]:hover .t-box
+#root[data-tabs-close-btn="hover"] .Tab[data-paused="true"]:hover .t-box
   mask: linear-gradient(
     -90deg,
     transparent,
@@ -638,7 +642,8 @@
   &:active
     background-color: var(--active-el-overlay-clicked-bg)
 
-.Tab:hover .close
+#root[data-tabs-close-btn="always"] .Tab .close
+#root[data-tabs-close-btn="hover"] .Tab:hover .close
   opacity: 1
 
 // ---

src/types/settings.ts

@@ -52,7 +52,7 @@ export interface SettingsState {
   warnOnMultiTabClose: (typeof SETTINGS_OPTIONS.warnOnMultiTabClose)[number]
   activateLastTabOnPanelSwitching: boolean
   activateLastTabOnPanelSwitchingLoadedOnly: boolean
-  showTabRmBtn: boolean
+  tabRmBtn: (typeof SETTINGS_OPTIONS.tabRmBtn)[number]
   hideInact: boolean
   activateAfterClosing: (typeof SETTINGS_OPTIONS.activateAfterClosing)[number]
   activateAfterClosingFallbackToHistory: boolean