From 75be66bada1189353dbb0282f73d72a5d1a7f190 Mon Sep 17 00:00:00 2001 From: Evan Simkowitz Date: Wed, 28 Feb 2024 18:25:37 -0800 Subject: [PATCH] Add delimiters to screen tab, make active gradient a translucent mask (#356) * Add delimiters to screen tab, make active gradient a translucent mask * make delimiter slightly shorter * move end icon a bit to provide more separation * fix zindex for tab contents * fix magic layout * make the tabs closer to the width they used to be --- src/app/magiclayout.ts | 2 +- src/app/root.less | 1 + src/app/workspace/screen/tab.tsx | 24 +++--- src/app/workspace/screen/tabs.less | 118 ++++++++++++++++------------- 4 files changed, 80 insertions(+), 65 deletions(-) diff --git a/src/app/magiclayout.ts b/src/app/magiclayout.ts index 76d73dc92..81528911b 100644 --- a/src/app/magiclayout.ts +++ b/src/app/magiclayout.ts @@ -20,7 +20,7 @@ let MagicLayout = { TermWidthBuffer: 15, - TabWidth: 154, + TabWidth: 155, ScreenSidebarWidthPadding: 5, ScreenSidebarMinWidth: 200, diff --git a/src/app/root.less b/src/app/root.less index 9295a7c6d..3c43c934c 100644 --- a/src/app/root.less +++ b/src/app/root.less @@ -27,6 +27,7 @@ --screentabs-font-size: 12.5px; --screentabs-font-weight: 300; --screentabs-selected-font-weight: 300; + --screen-tab-width: 11.4em; // floating logo settings --floating-logo-width-darwin: 110px; diff --git a/src/app/workspace/screen/tab.tsx b/src/app/workspace/screen/tab.tsx index 1b65cfb75..0dacc3af6 100644 --- a/src/app/workspace/screen/tab.tsx +++ b/src/app/workspace/screen/tab.tsx @@ -85,17 +85,21 @@ class ScreenTab extends React.Component< onContextMenu={(event) => this.openScreenSettings(event, screen)} onDragEnd={this.handleDragEnd} > - - - -
- {archived} - {screen.name.get()} -
-
- - this.openScreenSettings(e, screen)} /> +
+
+ + + +
+ {archived} + {screen.name.get()} +
+
+ + this.openScreenSettings(e, screen)} /> +
+
); } diff --git a/src/app/workspace/screen/tabs.less b/src/app/workspace/screen/tabs.less index 236ccf7f9..4b05c3f74 100644 --- a/src/app/workspace/screen/tabs.less +++ b/src/app/workspace/screen/tabs.less @@ -1,19 +1,16 @@ @import "@/common/icons/icons.less"; +// Theming values #main .screen-tabs .screen-tab { - border-top: 1px solid transparent; font-size: var(--screentabs-font-size); line-height: var(--screentabs-line-height); font-family: var(--label-font-family); font-weight: var(--screentabs-font-weight); - &:not(:hover) .status-indicator { - .status-indicator-visible; - } - - &:hover { - .actions { - .positional-icon-visible; + &.is-active { + .background { + border-top: 1px solid var(--tab-color); + background-color: var(--tab-color); } } @@ -25,17 +22,6 @@ color: var(--tab-color); } - &.is-active { - border-top: 1px solid var(--tab-color); - background-color: var(--tab-color); - background-image: linear-gradient( - rgba(0, 0, 0, 0), - rgba(0, 0, 0, 0.5) 15%, - rgba(0, 0, 0, 0.7) 30%, - rgba(0, 0, 0, 1) 100% - ); - } - &.color-green, &.color-default { --tab-color: var(--tab-green); @@ -76,15 +62,9 @@ &.color-pink { --tab-color: var(--tab-pink); } - - .web-share-icon { - position: relative; - top: 1px; - margin-right: 3px; - } } -// #main for selectivity +// Layout values #main .screen-tabs-container { display: flex; position: relative; @@ -113,44 +93,74 @@ .screen-tabs { display: flex; flex-direction: row; - align-items: center; - + height: 100%; .screen-tab { display: flex; flex-direction: row; - min-width: 13.6em; - max-width: 13.6em; - align-items: center; - cursor: pointer; - padding: 8px 8px 4px 8px; // extra 4px of tab padding to account for horizontal scrollbar (to make tab text look centered) - - .front-icon { - .positional-icon-visible; + position: relative; + .background { + // This applies a transparency mask to the background color, as set above, so that it will blend with whatever the theme's background color is. + z-index: 1; + width: var(--screen-tab-width); + mask-image: linear-gradient( + rgba(0, 0, 0, 1), + rgba(0, 0, 0, 0.7) 15%, + rgba(0, 0, 0, 0.5) 30%, + rgba(0, 0, 0, 0) 100% + ); } + .screen-tab-inner { + display: flex; + flex-direction: row; + position: absolute; + z-index: 2; + min-width: var(--screen-tab-width); + max-width: var(--screen-tab-width); + align-items: center; + cursor: pointer; + padding: 8px 8px 4px 8px; // extra 4px of tab padding to account for horizontal scrollbar (to make tab text look centered) + .front-icon { + .positional-icon-visible; + } - .tab-name { - flex-grow: 1; - } + .tab-name { + flex-grow: 1; + } - &.is-active { - border-top: none; - opacity: 1; - font-weight: var(--screentabs-selected-font-weight); - } + &.is-active { + border-top: none; + opacity: 1; + font-weight: var(--screentabs-selected-font-weight); + } - &.is-archived { - .fa.fa-archive { - margin-right: 4px; + &.is-archived { + .fa.fa-archive { + margin-right: 4px; + } + } + + // Only one of these will be visible at a time + .end-icons { + // This adjusts the position of the icon to account for the default 8px margin on the parent. We want the positional calculations for this icon to assume it is flush with the edge of the screen tab. + margin: 0 -5px 0 0; + line-height: normal; + .tab-index { + font-size: 12.5px; + } } } + .vertical-line { + border-left: 1px solid var(--app-border-color); + margin: 10px 0 8px 0; + } - // Only one of these will be visible at a time - .end-icons { - // This adjusts the position of the icon to account for the default 8px margin on the parent. We want the positional calculations for this icon to assume it is flush with the edge of the screen tab. - margin: 0 -8px 0 0; - line-height: normal; - .tab-index { - font-size: 12.5px; + &:not(:hover) .status-indicator { + .status-indicator-visible; + } + + &:hover { + .actions { + .positional-icon-visible; } } }