Split out a mixin for image mask

#1634
deephaven · Nov 17, 2023 · 6f21060 · 6f21060
1 parent 60cb966
commit 6f21060
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 26 deletions.
diff --git a/packages/components/src/theme/ThemeInlineSVGs.ts b/packages/components/src/theme/ThemeInlineSVGs.ts
@@ -1,16 +1,11 @@
-export const INLINE_SVG_LM_MAXIMISE = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3v10h10V3H3zm9 9H4V4h8v8z'/%3E%3C/svg%3E")`;
 export const INLINE_SVG_LM_CLOSE_TAB = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z'/%3E%3C/svg%3E")`;
+export const INLINE_SVG_LM_DROPDOWN = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.976 10.072l4.357-4.357.62.618L8.284 11h-.618L3 6.333l.619-.618 4.357 4.357z'/%3E%3C/svg%3E")`;
+export const INLINE_SVG_LM_MAXIMISE = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3v10h10V3H3zm9 9H4V4h8v8z'/%3E%3C/svg%3E")`;
 
 export function escapeSvg(svgContent: string): string {
   return svgContent.replace('#', '%23');
 }
 
-export function lmTabDropdownSVG(iconColor: string): string {
-  return `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='${escapeSvg(
-    iconColor
-  )}' d='M7.976 10.072l4.357-4.357.62.618L8.284 11h-.618L3 6.333l.619-.618 4.357 4.357z'/%3E%3C/svg%3E")`;
-}
-
 export function searchInputCancelSVG(iconColor: string): string {
   return `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='${escapeSvg(
     iconColor

diff --git a/packages/components/src/theme/ThemeUtils.ts b/packages/components/src/theme/ThemeUtils.ts
@@ -16,8 +16,8 @@ import { themeDark } from './theme-dark';
 import { themeLight } from './theme-light';
 import {
   INLINE_SVG_LM_CLOSE_TAB,
+  INLINE_SVG_LM_DROPDOWN,
   INLINE_SVG_LM_MAXIMISE,
-  lmTabDropdownSVG,
   searchInputCancelSVG,
   selectIndicatorSVG,
 } from './ThemeInlineSVGs';
@@ -51,7 +51,7 @@ export function calculateInlineSVGStyleContent(): CssVariableStyleContent {
   const varMap: Record<ThemeIconVariable, string> = {
     '--dh-svg-icon-close-tab': INLINE_SVG_LM_CLOSE_TAB,
     '--dh-svg-icon-maximise': INLINE_SVG_LM_MAXIMISE,
-    '--dh-svg-icon-tab-dropdown': lmTabDropdownSVG(lmIconColor),
+    '--dh-svg-icon-tab-dropdown': INLINE_SVG_LM_DROPDOWN,
     '--dh-svg-icon-search-cancel': searchInputCancelSVG(lmIconColor), // TODO: create a semantic variable source
     '--dh-svg-icon-select-indicator': selectIndicatorSVG(lmIconColor), // TODO: change to --dh-color-gray-600
   };

diff --git a/packages/golden-layout/scss/goldenlayout-dark-theme.scss b/packages/golden-layout/scss/goldenlayout-dark-theme.scss
@@ -19,6 +19,16 @@ $lm-header-background: darken($lm-tab-active-background, 5);
 $lm-splitter-hover-color: $gray-400;
 $lm-splitter-active-color: $gray-300;
 
+// Setup a mask-image for a golden layout svg
+@mixin icon-image-mask($mask-image, $size: 16px) {
+  background-size: $size;
+  background-color: var(--dh-color-foreground);
+  mask-image: $mask-image;
+  mask-position: center center;
+  mask-repeat: no-repeat;
+  mask-size: $size;
+}
+
 // ".lm_dragging" is applied to BODY tag during Drag and is also directly applied to the root of the object being dragged
 //is added to the body class, prevents overflow in our app context
 .lm_dragging {
@@ -180,21 +190,19 @@ body:not(.lm_dragging) .lm_header .lm_tab:hover .lm_close_tab {
     .lm_close_tab {
       $lm-close-button-padding: 4px;
 
+      @include icon-image-mask(
+        var(--dh-svg-icon-close-tab),
+        $close-button-height
+      );
+
       cursor: pointer;
       position: relative;
       width: $close-button-height;
       height: $close-button-height;
       padding: $lm-close-button-padding;
       margin-left: -$spacer-1; // undo padding on title
-      background-color: var(--dh-color-foreground);
-      //fa-times-light url svg encoded as a background mask
-      mask-image: var(--dh-svg-icon-close-tab);
-      mask-position: center center;
-      mask-repeat: no-repeat;
-      mask-size: $close-button-height;
       opacity: 0;
       transition: opacity 300ms ease;
-      transition: background-color $transition;
     }
   }
 }
@@ -249,19 +257,11 @@ body:not(.lm_dragging) .lm_header .lm_tab:hover .lm_close_tab {
 
   // Icon to Maximize Pane, so it will fill the entire GoldenLayout Container
   .lm_maximise {
-    background-size: 16px;
-    background-color: var(--dh-color-foreground);
-    // vsChromeMaximize
-    mask-image: var(--dh-svg-icon-maximise);
-    mask-position: center center;
-    mask-repeat: no-repeat;
-    mask-size: 16px;
+    @include icon-image-mask(var(--dh-svg-icon-maximise));
   }
 
   .lm_tabdropdown {
-    background-size: 16px;
-    // vsChevronDown
-    background-image: var(--dh-svg-icon-tab-dropdown);
+    @include icon-image-mask(var(--dh-svg-icon-tab-dropdown));
   }
 
   // Icon to Close Pane and so remove it from GoldenLayout Container