diff --git a/src/_locales/dict.setup-page.ts b/src/_locales/dict.setup-page.ts index 0c80ed66..9db30921 100644 --- a/src/_locales/dict.setup-page.ts +++ b/src/_locales/dict.setup-page.ts @@ -2666,6 +2666,10 @@ Przykłady: "*", "ctrl+$", "ctrl+alt+g"`, zh_TW: '分頁切換間的最小延遲(毫秒)', ja: 'タブ切り替え間の最小遅延(ミリ秒)', }, + 'settings.tabs_show_subtitle': { + en: 'Show tab subtitle with URL', + ru: 'Показывать подзаголовок вкладки с URL', + }, // - New tab position 'settings.move_new_tab_pin': { diff --git a/src/defaults/settings.ts b/src/defaults/settings.ts index c9f50026..bab6c870 100644 --- a/src/defaults/settings.ts +++ b/src/defaults/settings.ts @@ -90,6 +90,7 @@ export const DEFAULT_SETTINGS: SettingsState = { tabWarmupOnHover: true, tabSwitchDelay: 0, forceDiscard: true, + showTabSubtitle: false, // New tab position moveNewTabPin: 'start', diff --git a/src/page.setup/components/settings.tabs.vue b/src/page.setup/components/settings.tabs.vue index 5e236e9e..45f6cbe9 100644 --- a/src/page.setup/components/settings.tabs.vue +++ b/src/page.setup/components/settings.tabs.vue @@ -119,6 +119,10 @@ section(ref="el") //- label="settings.tab_warmup_on_hover" //- v-model:value="Settings.state.tabWarmupOnHover" //- @update:value="Settings.saveDebounced(150)") + ToggleField( + label="settings.tabs_show_subtitle" + v-model:value="Settings.state.showTabSubtitle" + @update:value="Settings.saveDebounced(150)") NumField.-inline( label="settings.tabs_switch_delay" v-model:value="Settings.state.tabSwitchDelay" diff --git a/src/sidebar/components/tab.vue b/src/sidebar/components/tab.vue index 3432970e..e8ed01c7 100644 --- a/src/sidebar/components/tab.vue +++ b/src/sidebar/components/tab.vue @@ -69,6 +69,9 @@ @blur="onCustomTitleBlur" @keydown="onCustomTitlteKD") .title(v-else) {{tab.reactive.customTitle ?? tab.reactive.title}} + .subtitle( + v-if="tab.reactive.url && Settings.state.showTabSubtitle" + ) {{ tab.reactive.url.replace(/^https?:\/\//, '') }} .close( v-if="!iconOnly && Settings.state.tabRmBtn !== 'none'" @mousedown.stop="onMouseDownClose" diff --git a/src/styles/themes/proton/sidebar/tab.styl b/src/styles/themes/proton/sidebar/tab.styl index 3619c25c..f415c426 100644 --- a/src/styles/themes/proton/sidebar/tab.styl +++ b/src/styles/themes/proton/sidebar/tab.styl @@ -7,6 +7,7 @@ --tabs-margin: var(--general-margin) --tabs-indent: 10px --tabs-font: rem(15) sans-serif + --tabs-subtitle-font: rem(12) sans-serif --tabs-count-font: rem(9) sans-serif --tabs-border-radius: var(--general-border-radius) --tabs-inner-gap: 5px @@ -576,6 +577,25 @@ .Tab[data-active="true"] .title color: var(--tabs-activated-fg) +// --- +// -- Subtitle +// - +.Tab .subtitle{ + position: relative + color: var(--tabs-normal-fg) + white-space: nowrap + overflow: hidden + transition: transform var(--d-fast) + font: var(--tabs-subtitle-font) + opacity: 0.7 +} + +.Tab[data-audible="true"] .t-box .subtitle, +.Tab[data-muted="true"] .t-box .subtitle, +.Tab[data-paused="true"] .t-box .subtitle{ + transform: translateX(var(--audio-btn-offset)); +} + // --- // -- Container highlight // - diff --git a/src/types/settings.ts b/src/types/settings.ts index 609c5471..be594a44 100644 --- a/src/types/settings.ts +++ b/src/types/settings.ts @@ -89,6 +89,7 @@ export interface SettingsState { tabWarmupOnHover: boolean tabSwitchDelay: number forceDiscard: boolean + showTabSubtitle: boolean // New tab position moveNewTabPin: (typeof SETTINGS_OPTIONS.moveNewTabPin)[number]