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

@@ -20,7 +20,7 @@ let MagicLayout = {
 
     TermWidthBuffer: 15,
 
-    TabWidth: 154,
+    TabWidth: 155,
 
     ScreenSidebarWidthPadding: 5,
     ScreenSidebarMinWidth: 200,

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;

src/app/workspace/screen/tab.tsx

@@ -85,17 +85,21 @@ class ScreenTab extends React.Component<
                 onContextMenu={(event) => this.openScreenSettings(event, screen)}
                 onDragEnd={this.handleDragEnd}
             >
-                <CenteredIcon className="front-icon">
+                <div className="background"></div>
-                    <TabIcon icon={screen.getTabIcon()} color={screen.getTabColor()} />
+                <div className="screen-tab-inner">
-                </CenteredIcon>
+                    <CenteredIcon className="front-icon">
-                <div className="tab-name truncate">
+                        <TabIcon icon={screen.getTabIcon()} color={screen.getTabColor()} />
-                    {archived}
+                    </CenteredIcon>
-                    {screen.name.get()}
+                    <div className="tab-name truncate">
-                </div>
+                        {archived}
-                <div className="end-icons">
+                        {screen.name.get()}
-                    <StatusIndicator level={statusIndicatorLevel} runningCommands={runningCommands} />
+                    </div>
-                    <ActionsIcon onClick={(e) => this.openScreenSettings(e, screen)} />
+                    <div className="end-icons">
+                        <StatusIndicator level={statusIndicatorLevel} runningCommands={runningCommands} />
+                        <ActionsIcon onClick={(e) => this.openScreenSettings(e, screen)} />
+                    </div>
                 </div>
+                <div className="vertical-line"></div>
             </Reorder.Item>
         );
     }

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 {
+    &.is-active {
-        .status-indicator-visible;
+        .background {
-    }
+            border-top: 1px solid var(--tab-color);
-
+            background-color: var(--tab-color);
-    &:hover {
-        .actions {
-            .positional-icon-visible;
         }
     }
 
@@ -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;
+            position: relative;
-            max-width: 13.6em;
+            .background {
-            align-items: center;
+                // 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.
-            cursor: pointer;
+                z-index: 1;
-            padding: 8px 8px 4px 8px; // extra 4px of tab padding to account for horizontal scrollbar (to make tab text look centered)
+                width: var(--screen-tab-width);
-
+                mask-image: linear-gradient(
-            .front-icon {
+                    rgba(0, 0, 0, 1),
-                .positional-icon-visible;
+                    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 {
+                .tab-name {
-                flex-grow: 1;
+                    flex-grow: 1;
-            }
+                }
 
-            &.is-active {
+                &.is-active {
-                border-top: none;
+                    border-top: none;
-                opacity: 1;
+                    opacity: 1;
-                font-weight: var(--screentabs-selected-font-weight);
+                    font-weight: var(--screentabs-selected-font-weight);
-            }
+                }
 
-            &.is-archived {
+                &.is-archived {
-                .fa.fa-archive {
+                    .fa.fa-archive {
-                    margin-right: 4px;
+                        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
+            &:not(:hover) .status-indicator {
-            .end-icons {
+                .status-indicator-visible;
-                // 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;
+            &:hover {
-                .tab-index {
+                .actions {
-                    font-size: 12.5px;
+                    .positional-icon-visible;
                 }
             }
         }