@openfin/core-web 0.46.56 → 0.46.58

package/out/styles.css

@@ -566,9 +566,11 @@ div.placeholder_image img {
 
 .lm_header {
     -webkit-app-region: no-drag;
+    /* Match GL1 jQuery .height() under host border-box resets (MTP / Core-Web). */
+    box-sizing: content-box !important;
     box-shadow: none;
     border-bottom: var(--header-border-bottom-height) solid var(--tab-background-color);
-    height: 25px;
+    height: 27px;
     user-select: none;
 }
 
@@ -652,7 +654,35 @@ div.placeholder_image img {
     opacity: 1;
 }
 
+/* HTML5 desktop drag uses display:none on the proxy; keep opacity for Core-Web pointer drag. */
+.lm_dragProxy {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 30;
+}
+
+.lm_dragProxy .lm_header {
+    background: transparent;
+}
+
+.lm_dragProxy .lm_content {
+    border-top: none;
+    overflow: hidden;
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
+}
+
+.lm_drop_tab_placeholder {
+    float: left;
+    width: 100px;
+    height: 100%;
+    visibility: hidden;
+}
+
 .lm_dropTargetIndicator {
+    display: none;
+    position: absolute;
+    z-index: 35;
     box-shadow: none;
     outline: none;
     transition: all 200ms ease;
@@ -660,7 +690,6 @@ div.placeholder_image img {
     border: 1px solid var(--drop-target-border-color);
     box-sizing: border-box;
     border-radius: 2px;
-    margin-top: 1px;
 }
 
 .lm_dropTargetIndicator .lm_inner {
@@ -671,7 +700,7 @@ div.placeholder_image img {
 .lm_tabdropdown_list {
     z-index: 101 !important;
 }
- 
+
 .lm_header .lm_tabdropdown_list .lm_tab {
     background-color: var(--secondary-background-color);
 }
@@ -680,7 +709,7 @@ div.placeholder_image img {
     background-color: var(--main-background-color);
 }
 
-.lm_header .lm_controls li.lm_tabdropdown:before{
+.lm_header .lm_controls .lm_tabdropdown:before {
     color: var(--tab-font-color)
 }
 
@@ -688,33 +717,37 @@ div.placeholder_image img {
     height: 100%;
 }
 
-.lm_controls li {
-	position: relative;
-	background-position: center center;
-	background-repeat: no-repeat;
-	opacity: .4;
-	transition: opacity 300ms ease;
-  height: 100% !important;
+/* GL2 HeaderButton creates <div> elements; GL1 used <li>. Also styles renderCustomHeaderControls kids. */
+.lm_controls > * {
+    cursor: pointer;
+    position: relative;
+    background-position: center center;
+    background-repeat: no-repeat;
+    opacity: .4;
+    transition: opacity 300ms ease;
+    width: 18px;
+    height: 100% !important;
+    text-align: center;
 }
 
-.lm_controls li:hover {
-	opacity: 1
+.lm_controls > *:hover {
+    opacity: 1
 }
 
 .lm_controls .lm_popout {
-	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=)
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=)
 }
 
 .lm_controls .lm_maximise {
-	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==)
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==)
 }
 
 .lm_controls .lm_close {
-	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=)
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=)
 }
 
 .lm_maximised .lm_controls .lm_maximise {
-	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC)
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC)
 }
 
 .lm_header>.lm_tabs>.focused_tab {
@@ -730,17 +763,18 @@ div.placeholder_image img {
     width: 12px;
     vertical-align: baseline;
     margin-right: 7px;
+    pointer-events: none;
 }
 
 .lm_header .newTabButton {
     background-image: var(--new-tab-button-url);
-	filter: invert(.3);
-	background-size: cover;
-	width: 12px;
-	height: 12px;
-	float: left;
-	margin: 6px 5px 0 8px;
-	cursor: pointer;
+    filter: invert(.3);
+    background-size: cover;
+    width: 12px;
+    height: 12px;
+    float: left;
+    margin: 6px 5px 0 8px;
+    cursor: pointer;
 }
 
 .lm_header .newTabButton:hover {
@@ -750,6 +784,7 @@ div.placeholder_image img {
 :root.light-theme .newTabButton {
     filter: invert(.7);
 }
+
 :root.light-theme .newTabButton:hover {
     filter: invert(1);
 }
@@ -757,7 +792,7 @@ div.placeholder_image img {
 .lm_header .lm_tabdropdown_list {
     overflow-y: auto;
 }
- 
+
 .lm_tabdropdown_list::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
     border-radius: 8px;
@@ -890,10 +925,10 @@ div.placeholder_image img {
             display: flex;
 
             mask-image: linear-gradient(to right,
-                        rgba(0, 0, 0, calc(1 - var(--layout-tab-overflow-fade-left))) 0,
-                        rgba(0, 0, 0, 1) var(--layout-tab-overflow-fade-size),
-                        rgba(0, 0, 0, 1) calc(100% - var(--layout-tab-overflow-fade-size)),
-                        rgba(0, 0, 0, calc(1 - var(--layout-tab-overflow-fade-right))) 100%);
+                    rgba(0, 0, 0, calc(1 - var(--layout-tab-overflow-fade-left))) 0,
+                    rgba(0, 0, 0, 1) var(--layout-tab-overflow-fade-size),
+                    rgba(0, 0, 0, 1) calc(100% - var(--layout-tab-overflow-fade-size)),
+                    rgba(0, 0, 0, calc(1 - var(--layout-tab-overflow-fade-right))) 100%);
             mask-mode: alpha;
         }
     }
@@ -920,6 +955,52 @@ div.placeholder_image img {
         flex: 0 0 auto;
     }
 }
+
+/**
+ * GL2 DROPDOWN OVERFLOW — CSS-first flex layout
+ *
+ * Mirrors the scroll mode's flex structure but uses overflow:hidden instead of
+ * overflow-x:auto. A ResizeObserver in tabs-container.ts moves overflowing tabs
+ * into/out of the dropdown list by checking scrollWidth > clientWidth.
+ */
+.lm_goldenlayout[data-settings-tab-overflow="dropdown"] {
+    --_internal-tab-width: var(--layout-tab-width, fit-content);
+    --_internal-tab-min-width: var(--layout-tab-min-width, var(--_internal-tab-width));
+
+    .lm_tab {
+        width: var(--_internal-tab-width);
+        min-width: var(--_internal-tab-min-width);
+    }
+
+    .lm_header {
+        display: flex;
+    }
+
+    .lm_tabs {
+        position: unset;
+        display: flex;
+        flex: 0 1 auto;
+        width: auto;
+        min-width: 0;
+        overflow: hidden;
+    }
+
+    .lm_header .lm_controls {
+        position: unset;
+        flex: 0 0 auto;
+        margin-left: auto;
+    }
+
+    .lm_drop_tab_placeholder {
+        width: var(--layout-tab-width, 100px);
+        min-width: var(--layout-tab-min-width, 100px);
+        float: unset;
+    }
+
+    .lm_header .newTabButton {
+        flex: 0 0 auto;
+    }
+}
 .lm_close {
      display: none;
  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openfin/core-web",
-  "version": "0.46.56",
+  "version": "0.46.58",
   "description": "",
   "private": false,
   "publishConfig": {
@@ -38,7 +38,7 @@
     "tslib": "2.8.1"
   },
   "peerDependencies": {
-    "@openfin/core": "46.100.59"
+    "@openfin/core": "46.100.61"
   },
   "scripts": {
     "prebuild": "rimraf out",