diff --git a/package-lock.json b/package-lock.json index 7b7b87289b..97b48732d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26588,7 +26588,6 @@ "version": "0.40.2", "license": "Apache-2.0", "dependencies": { - "@deephaven/components": "file:../components", "jquery": "^3.6.0" }, "devDependencies": { @@ -28473,7 +28472,6 @@ "@deephaven/golden-layout": { "version": "file:packages/golden-layout", "requires": { - "@deephaven/components": "file:../components", "browserify": "^17.0.0", "esmify": "^2.1.1", "jquery": "^3.6.0", diff --git a/packages/dashboard/src/PanelPlaceholder.scss b/packages/dashboard/src/PanelPlaceholder.scss index 1b77207852..284c222a09 100644 --- a/packages/dashboard/src/PanelPlaceholder.scss +++ b/packages/dashboard/src/PanelPlaceholder.scss @@ -4,13 +4,9 @@ display: flex; flex-direction: column; justify-content: center; + padding: $spacer-3; min-height: 100%; max-height: 100%; text-align: center; overflow: hidden; - - // add padding on an inner wrapper so it is included in max height of parent - div { - padding: $spacer-3; - } } diff --git a/packages/dashboard/src/PanelPlaceholder.tsx b/packages/dashboard/src/PanelPlaceholder.tsx index d0684500aa..b659523ccf 100644 --- a/packages/dashboard/src/PanelPlaceholder.tsx +++ b/packages/dashboard/src/PanelPlaceholder.tsx @@ -11,7 +11,7 @@ const PanelPlaceholder = React.forwardRef( const component = LayoutUtils.getComponentNameFromPanel({ props }); return (
-
Component "{component}" is not registered.
+ Component "{component}" is not registered.
); } diff --git a/packages/dashboard/src/layout/GoldenLayout.module.scss b/packages/dashboard/src/layout/GoldenLayout.module.scss new file mode 100644 index 0000000000..681a0b118a --- /dev/null +++ b/packages/dashboard/src/layout/GoldenLayout.module.scss @@ -0,0 +1,9 @@ +@import '@deephaven/components/scss/custom.scss'; +@import './GoldenLayout.scss'; + +// Exported variables for use in GoldenLayoutThemeExport.js +/* stylelint-disable property-no-unknown */ +:export { + tab-height: $tab-height; + drag-border-width: $drag-border-width; +} diff --git a/packages/dashboard/src/layout/GoldenLayout.scss b/packages/dashboard/src/layout/GoldenLayout.scss index 0392db293d..d3dce8bee2 100644 --- a/packages/dashboard/src/layout/GoldenLayout.scss +++ b/packages/dashboard/src/layout/GoldenLayout.scss @@ -2,22 +2,344 @@ @import '@deephaven/golden-layout/scss/goldenlayout-base.scss'; @import '@deephaven/golden-layout/scss/goldenlayout-dark-theme.scss'; -// Styling for behaviours not part of the default golden layout package +$tab-height: 28px; +$drag-border-width: 5px; +$close-button-height: 8px; +$tab-font-size: 12px; -.lm_tab .editor-unsaved-indicator { +$lm-tab-color: $gray-400; +$lm-tab-hover-color: $gray-300; +$lm-tab-active-color: $white; +$lm-tab-icon-color: $gray-200; + +//make some subtle tab background colors relative to our defined color +$lm-tab-active-background: $content-bg; +$lm-tab-background: darken($lm-tab-active-background, 3.5); +$lm-header-background: darken($lm-tab-active-background, 5); + +$lm-close-button-hover-color: $gray-100; +$lm-close-button-active-color: $gray-400; + +$lm-splitter-hover-color: $gray-400; +$lm-splitter-active-color: $gray-300; + +.lm_goldenlayout { + background: $background; + position: absolute; + + .lm_header { + box-sizing: content-box; // golden-layout sets a js height using a content box model + height: $tab-height; + padding-top: 0; + background: $lm-header-background; + box-shadow: inset 0 -1px 0 0 $background; + // inset box shadows with 0-blur used to draw borders without impacting spacing or GL size calculations. + // golden layout default styling doesnt have the same border styling we want + // this trick is used elsewhere in the header as well for the same purpose + + .lm_controls { + > li { + height: 100%; + width: 24px; + } + } + } +} + +.lm_maximised { + border: 15px solid rgba($black, 0.85); + height: 100% !important; + width: 100% !important; + .lm_items { + box-shadow: $box-shadow-900; + } +} + +.lm_header .lm_controls .lm_tabpreviousbutton { + background-size: 16px; + // vsChevronLeft + background-image: str-replace( + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$lm-tab-icon-color}' d='M5.928 7.976l4.357 4.357-.618.62L5 8.284v-.618L9.667 3l.618.619-4.357 4.357z'/%3E%3C/svg%3E"), + '#', + '%23' + ); +} + +.lm_header .lm_controls .lm_tabnextbutton { + background-size: 16px; + // vsChevronRight + background-image: str-replace( + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$lm-tab-icon-color}' d='M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619 4.357-4.357z'/%3E%3C/svg%3E"), + '#', + '%23' + ); +} + +.lm_header .lm_controls .lm_tabdropdown { + background-size: 16px; + // vsChevronDown + background-image: str-replace( + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$lm-tab-icon-color}' 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"), + '#', + '%23' + ); + + &::before { + display: none; + } +} + +.lm_header .lm_controls .lm_maximise { + background-size: 16px; + // vsChromeMaximize + background-image: str-replace( + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$lm-tab-icon-color}' d='M3 3v10h10V3H3zm9 9H4V4h8v8z'/%3E%3C/svg%3E"), + '#', + '%23' + ); +} + +.lm_tabs:empty + .lm_controls .lm_maximise { display: none; - margin-right: 5px; - width: 8px; - height: 8px; - border-radius: 50%; - background: $primary; +} + +.lm_maximised .lm_header .lm_controls .lm_maximise { + opacity: 0.7; + // vsChromeMinimize + background-image: str-replace( + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$gray-100}' d='M14 8v1H3V8h11z'/%3E%3C/svg%3E"), + '#', + '%23' + ); + + &:hover { + opacity: 1; + } +} + +.lm_header .lm_tab { + display: flex; + align-items: center; + font-family: $font-family-sans-serif; + background-color: $lm-tab-background; + color: $lm-tab-color; + height: $tab-height; + font-size: $tab-font-size; + min-width: 5rem; + margin: 0; + padding: 0 $spacer-1 0 $spacer-2; + box-shadow: inset -1px -1px 0 0 $background; // acting as bottom and right border + transition: color $transition, background-color $transition; + max-width: 12rem; + white-space: nowrap; + overflow: hidden; + + .lm_title { + flex-grow: 1; + padding-right: $spacer-1; + // add equalized spacing for tabs without close buttons + // so that when a tab is longer then min-width it still + // is balanced with equal padding. Extra padding is then + // removed from tabs with close buttons via negative margin + } + + .lm_title_before { + display: flex; + align-items: center; + } + + .editor-unsaved-indicator { + display: none; + margin-right: 5px; + width: 8px; + height: 8px; + border-radius: 50%; + background: $primary; + + &.is-unsaved { + display: inline-block; + } + } +} + +.lm_header .lm_tab.lm_active, +.lm_header .lm_tab.lm_active:hover { + height: $tab-height; + background-color: $lm-tab-active-background; + color: $lm-tab-active-color; + padding-bottom: 0; + box-shadow: inset -1px 0 0 0 $background; // act as right border only when active + // also kills the default shadow, doesn't work well with our design + &.lm_focusin { + box-shadow: inset 0 1px $primary, inset -1px 0 0 0 $background; // top focus indicator, right border + } +} + +.lm_window_blur { + .lm_header .lm_tab.lm_active.lm_focusin { + box-shadow: none; + } +} + +.lm_content { + background: $content-bg; + overflow: visible; +} + +.lm_header .lm_tab .lm_close_tab { + $lm-close-button-padding: 4px; - &.is-unsaved { - display: inline-block; + cursor: pointer; + position: relative; + top: unset; + right: unset; + width: $close-button-height; + height: $close-button-height; + padding: $lm-close-button-padding; + margin-left: -$spacer-1; // undo padding on title + background-image: none; //remove the golden-layout image url + //fa-times-light url svg encoded as a background mask + background-color: $lm-tab-background; //set the backgroun color to nothing + mask-image: 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"); + mask-position: center center; + mask-repeat: no-repeat; + mask-size: $close-button-height; + opacity: 1; //overide the opacity change + transition: background-color $transition; +} + +.lm_splitter, +.lm_splitter:hover { + background: $lm-splitter-hover-color; +} + +.lm_splitter.lm_dragging { + background: $lm-splitter-active-color; +} + +.lm_dragProxy { + .lm_content { + height: 100%; + width: 100%; + box-shadow: $box-shadow; + } + + .lm_header { + height: $tab-height; + + .lm_tab { + border: 0; + } } } +.lm_header .lm_tabdropdown_list { + z-index: $zindex-dropdown; + background: $lm-tab-background; + top: 22px; + right: 24px; + box-shadow: $box-shadow-900; + border-radius: $border-radius; + max-width: 12rem; + + .lm_tabdropdown_search { + padding: $spacer-1; + input { + padding: $input-padding-y $input-padding-x; + line-height: $input-line-height; + color: $input-color; + background-color: $input-bg; + border: $input-border-width solid $input-border-color; + border-radius: $border-radius; + max-width: 100%; + + &::placeholder { + color: $input-placeholder-color; + opacity: 1; + } + + &:focus { + border-color: $input-focus-border-color; + box-shadow: $input-btn-focus-box-shadow; + outline: 0; + } + } + } + + .lm_tab { + background: $lm-tab-background; + color: $lm-tab-hover-color; + box-shadow: none; + + .editor-unsaved-indicator { + width: 10px; + height: 10px; + border: 1px solid $lm-tab-background; + } + + &.lm_keyboard_active { + color: $lm-tab-hover-color; + background-color: $primary-dark; + } + + &:hover { + color: $lm-tab-active-color; + background-color: $primary; + } + } +} + +// disable hover styling during drag (pointer-events still needed) +body:not(.lm_dragging) .lm_header .lm_tab:not(.lm_active):hover { + color: $lm-tab-hover-color; +} + +.lm_header .lm_tab.lm_active .lm_close_tab { + background-color: $lm-tab-active-background; +} + +body:not(.lm_dragging) .lm_header .lm_tab:hover .lm_close_tab { + background-color: $lm-close-button-active-color; +} + +body:not(.lm_dragging) .lm_header .lm_tab .lm_close_tab:hover { + background-color: $lm-close-button-hover-color; +} + +.lm_dropTargetIndicator { + @include ants-base($white, $black); //replace with ants + + box-sizing: border-box; + outline: 0; //clear the normal dotted line + box-shadow: none; //get rid of standard dropshadow as it overlapps ants now, and re-apply to exsising inner element +} + +.lm_dropTargetIndicator .lm_inner { + box-sizing: border-box; + border: $ant-thickness solid transparent; //offset shadow using a transparent border + box-shadow: inset 0 0 1rem 1px rgba(black, 0.45); //true black for this shadow + opacity: 1; //set opacity back to 1, default 0.2 and backroudn was solid. + background: rgba($primary, 0.1); //apply scrim as rgba background now instead +} + +//is added to the body class, prevents overflow in our app context .lm_dragging { + overflow: hidden; +} + +.lm_dragging .app { + pointer-events: none; + + // disable other control buttons during drag + .lm_controls > li { + &.lm_tabpreviousbutton, + &.lm_tabnextbutton { + pointer-events: auto; + } + + pointer-events: none; + } + //disable plotly pointer events while dragging golden layout .js-plotly-plot .plotly { svg, @@ -27,4 +349,9 @@ pointer-events: none !important; } } + + // we still need events on our header for scroll while dragging to work + .lm_header { + pointer-events: auto; + } } diff --git a/packages/golden-layout/src/GoldenLayoutThemeExport.ts b/packages/dashboard/src/layout/GoldenLayoutThemeExport.ts similarity index 77% rename from packages/golden-layout/src/GoldenLayoutThemeExport.ts rename to packages/dashboard/src/layout/GoldenLayoutThemeExport.ts index 624034d821..a0b606d2ea 100644 --- a/packages/golden-layout/src/GoldenLayoutThemeExport.ts +++ b/packages/dashboard/src/layout/GoldenLayoutThemeExport.ts @@ -1,4 +1,4 @@ -import GoldenLayout from '../scss/GoldenLayout.module.scss'; +import GoldenLayout from './GoldenLayout.module.scss'; // parseInt for unitless values, stripping "px" export default Object.freeze({ diff --git a/packages/dashboard/src/layout/LayoutUtils.ts b/packages/dashboard/src/layout/LayoutUtils.ts index baedbc14b4..e1e2d9dfa7 100644 --- a/packages/dashboard/src/layout/LayoutUtils.ts +++ b/packages/dashboard/src/layout/LayoutUtils.ts @@ -1,13 +1,10 @@ import deepEqual from 'deep-equal'; import shortid from 'shortid'; import isMatch from 'lodash.ismatch'; +import { DragEvent } from 'react'; import Log from '@deephaven/log'; -import GoldenLayout, { - isComponent, - isRoot, - isStack, - GoldenLayoutThemeExport, -} from '@deephaven/golden-layout'; +import { isComponent, isRoot, isStack } from '@deephaven/golden-layout'; +import type GoldenLayout from '@deephaven/golden-layout'; import type { ComponentConfig, Config, @@ -19,9 +16,9 @@ import type { Stack, Tab, CloseOptions, - DragSourceEvent, } from '@deephaven/golden-layout'; import { assertNotNull } from '@deephaven/utils'; +import GoldenLayoutThemeExport from './GoldenLayoutThemeExport'; import { DashboardLayoutConfig } from '../DashboardLayout'; import { PanelConfig } from '../DashboardPlugin'; @@ -468,7 +465,7 @@ class LayoutUtils { replaceConfig?: Partial; createNewStack?: boolean; focusElement?: string; - dragEvent?: DragSourceEvent; + dragEvent?: DragEvent; } = {}): void { // attempt to retain focus after dom manipulation, which can break focus const maintainFocusElement = document.activeElement; @@ -478,7 +475,7 @@ class LayoutUtils { config.id = shortid.generate(); } - if (dragEvent !== undefined) { + if (dragEvent) { root?.layoutManager.createDragSourceFromEvent(config, dragEvent); return; } diff --git a/packages/dashboard/src/layout/index.ts b/packages/dashboard/src/layout/index.ts index 3912df26bb..38249a807b 100644 --- a/packages/dashboard/src/layout/index.ts +++ b/packages/dashboard/src/layout/index.ts @@ -1,3 +1,4 @@ +export { default as GoldenLayoutThemeExport } from './GoldenLayoutThemeExport'; export { default as LayoutUtils } from './LayoutUtils'; export { default as GLPropTypes } from './GLPropTypes'; diff --git a/packages/golden-layout/karma.conf.cjs b/packages/golden-layout/karma.conf.cjs index 5e32f6a81c..7a401373f1 100644 --- a/packages/golden-layout/karma.conf.cjs +++ b/packages/golden-layout/karma.conf.cjs @@ -24,14 +24,7 @@ module.exports = function (config) { }, browserify: { - debug: true, plugin: ['esmify'], - // ignored because it doesn't understand the scss import in GoldenLayoutThemeExport - configure: function (bundle) { - bundle.on('prebundle', function () { - bundle.ignore('./dist/GoldenLayoutThemeExport.js'); - }); - }, }, // test results reporter to use diff --git a/packages/golden-layout/package.json b/packages/golden-layout/package.json index 4a95a892b0..924e174b8e 100644 --- a/packages/golden-layout/package.json +++ b/packages/golden-layout/package.json @@ -10,7 +10,6 @@ "source": "src/index.ts", "type": "module", "dependencies": { - "@deephaven/components": "file:../components", "jquery": "^3.6.0" }, "peerDependencies": { @@ -19,7 +18,7 @@ }, "scripts": { "build": "cross-env NODE_ENV=production run-p build:*", - "build:sass": "sass --embed-sources --load-path=../../node_modules --style=compressed ./scss:./css", + "build:sass": "sass --embed-sources --style=compressed ./scss:./css", "build:babel": "babel ./src --out-dir ./dist --extensions \".ts,.js,.tsx,.jsx\" --source-maps --root-mode upward", "pretest": "npm run build", "test": "karma start karma.conf.cjs", diff --git a/packages/golden-layout/scss/GoldenLayout.module.scss b/packages/golden-layout/scss/GoldenLayout.module.scss deleted file mode 100644 index 64149be6ef..0000000000 --- a/packages/golden-layout/scss/GoldenLayout.module.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use './goldenlayout-dark-theme.scss' as theme; - -// Exported variables for use in GoldenLayoutThemeExport.js -/* stylelint-disable property-no-unknown */ -:export { - tab-height: theme.$tab-height; - drag-border-width: theme.$drag-border-width; -} diff --git a/packages/golden-layout/scss/goldenlayout-base.scss b/packages/golden-layout/scss/goldenlayout-base.scss index cbfdcde5fe..52f2e6e4a6 100644 --- a/packages/golden-layout/scss/goldenlayout-base.scss +++ b/packages/golden-layout/scss/goldenlayout-base.scss @@ -259,6 +259,18 @@ $height6: 15px; // Appears 1 time // Dropdown arrow for additional tabs when too many to be displayed .lm_header { + .lm_controls .lm_tabdropdown:before { + content: ''; + width: 0; + height: 0; + vertical-align: middle; + display: inline-block; + border-top: 5px dashed; + border-right: 5px solid transparent; + border-left: 5px solid transparent; + color: white; // Overriden in specific Themes + } + .lm_tabdropdown_list { position: absolute; top: 20px; diff --git a/packages/golden-layout/scss/goldenlayout-dark-theme.scss b/packages/golden-layout/scss/goldenlayout-dark-theme.scss index 3acce7d53a..e993886d53 100644 --- a/packages/golden-layout/scss/goldenlayout-dark-theme.scss +++ b/packages/golden-layout/scss/goldenlayout-dark-theme.scss @@ -1,234 +1,150 @@ -@import '@deephaven/components/scss/custom.scss'; - -$tab-height: 28px; -$drag-border-width: 5px; - -$close-button-height: 8px; -$tab-font-size: 12px; - -$lm-tab-color: $gray-400; -$lm-tab-hover-color: $gray-300; -$lm-tab-active-color: $white; -$lm-tab-icon-color: $gray-200; - -//make some subtle tab background colors relative to our defined color -$lm-tab-active-background: $content-bg; -$lm-tab-background: darken($lm-tab-active-background, 3.5); -$lm-header-background: darken($lm-tab-active-background, 5); - -$lm-close-button-hover-color: $gray-100; -$lm-close-button-active-color: $gray-400; - -$lm-splitter-hover-color: $gray-400; -$lm-splitter-active-color: $gray-300; +// Color variables (appears count calculates by raw css) +$color0: #000000; // Appears 7 times +$color1: #222222; // Appears 3 times +$color2: #eeeeee; // Appears 2 times +$color3: #dddddd; // Appears 2 times + +$color4: #cccccc; // Appears 1 time +$color5: #444444; // Appears 1 time +$color6: #999999; // Appears 1 time +$color7: #111111; // Appears 1 time +$color8: #452500; // Appears 1 time +$color9: #555555; // Appears 1 time +$color10: #ffffff; // Appears 2 time // ".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 { - overflow: hidden; - pointer-events: none; - - // we still need events on our header for scroll while dragging to work - .lm_goldenlayout .lm_header { - pointer-events: auto; - - // disable other control buttons during drag - .lm_controls > li { - pointer-events: none; - - &.lm_tabpreviousbutton, - &.lm_tabnextbutton { - pointer-events: auto; - } - } - } -} - -// disable hover styling during drag (pointer-events still needed) -body:not(.lm_dragging) .lm_header .lm_tab:not(.lm_active):hover { - color: $lm-tab-hover-color; -} - -.lm_header .lm_tab.lm_active .lm_close_tab { - background-color: $lm-tab-active-background; -} - -body:not(.lm_dragging) .lm_header .lm_tab:hover .lm_close_tab { - background-color: $lm-close-button-active-color; -} - -body:not(.lm_dragging) .lm_header .lm_tab .lm_close_tab:hover { - background-color: $lm-close-button-hover-color; -} // Entire GoldenLayout Container, if a background is set, it is visible as color of "pane header" and "splitters" (if these latest has opacity very low) .lm_goldenlayout { - background: $background; - position: absolute; + background: $color0; } // Single Pane content (area in which final dragged content is contained) .lm_content { - background: $content-bg; - overflow: visible; + background: $color1; } // Single Pane content during Drag (style of moving window following mouse) .lm_dragProxy { .lm_content { - height: 100%; - width: 100%; - box-shadow: $box-shadow; - } - .lm_header { - height: $tab-height; - box-shadow: none; - - .lm_tab, - .lm_tab.lm_active { - border: 0; - box-shadow: $box-shadow; - } + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9); } } // Placeholder Container of target position .lm_dropTargetIndicator { - @include ants-base($white, $black); //replace with ants - box-sizing: border-box; - transition: all $transition-mid ease; + box-shadow: inset 0 0 30px $color0; + outline: 1px dashed $color4; + transition: all 200ms ease; // Inner Placeholder .lm_inner { - box-sizing: border-box; - border: $ant-thickness solid transparent; //offset shadow using a transparent border - box-shadow: inset 0 0 1rem 1px rgba(black, 0.45); //true black for this shadow - opacity: 1; //set opacity back to 1, default 0.2 and backroudn was solid. - background: rgba( - $primary, - 0.1 - ); //apply scrim as rgba background now instead + background: $color0; + opacity: 0.2; } } // Separator line (handle to change pane size) .lm_splitter { - background: $lm-splitter-hover-color; + background: $color0; opacity: 0.001; - transition: opacity $transition ease; + transition: opacity 200ms ease; &:hover, // When hovered by mouse... &.lm_dragging { - background: $lm-splitter-active-color; + background: $color5; opacity: 1; } } // Pane Header (container of Tabs for each pane) .lm_header { - box-sizing: content-box; // golden-layout sets a js height using a content box model - height: $tab-height; - padding-top: 0; - background: $lm-header-background; - box-shadow: inset 0 -1px 0 0 $background; - // inset box shadows with 0-blur used to draw borders without impacting spacing or GL size calculations. - // golden layout default styling doesnt have the same border styling we want - // this trick is used elsewhere in the header as well for the same purpose + height: 20px; user-select: none; - .lm_controls { - > li { - height: 100%; - width: 24px; - } - } - &.lm_selectable { cursor: pointer; } // Single Tab container. A single Tab is set for each pane, a group of Tabs are contained in ".lm_header" .lm_tab { - display: flex; - align-items: center; - font-family: $font-family-sans-serif; - background-color: $lm-tab-background; - color: $lm-tab-color; - height: $tab-height; - font-size: $tab-font-size; - min-width: 5rem; - margin: 0; - padding: 0 $spacer-1 0 $spacer-2; - box-shadow: inset -1px -1px 0 0 $background; // acting as bottom and right border - transition: color $transition, background-color $transition; - max-width: 12rem; - white-space: nowrap; - overflow: hidden; - - .lm_title { - flex-grow: 1; - padding-right: $spacer-1; - // add equalized spacing for tabs without close buttons - // so that when a tab is longer then min-width it still - // is balanced with equal padding. Extra padding is then - // removed from tabs with close buttons via negative margin - } - - .lm_title_before { - display: flex; - align-items: center; - } + font-family: Arial, sans-serif; + font-size: 12px; + color: $color6; + background: $color7; + box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.3); + margin-right: 2px; + padding-bottom: 2px; + padding-top: 2px; + + /*.lm_title // Present in LIGHT Theme + { + padding-top:1px; + }*/ // Close Tab Icon .lm_close_tab { - $lm-close-button-padding: 4px; - - 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 - //fa-times-light url svg encoded as a background mask - background-color: $lm-tab-background; //set the backgroun color to nothing - mask-image: 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"); - mask-position: center center; - mask-repeat: no-repeat; - mask-size: $close-button-height; - opacity: 1; - transition: background-color $transition; + width: 11px; + height: 11px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAATElEQVR4nG3OwQ0DMQwDwZGRBtR/j1YJzMc5+IDoR+yCVO29g+pu981MFgqZmRdAfU7+CYWcbF11LwALjpBL0N0qybNx/RPU+gOeiS/+XCRwDlTgkQAAAABJRU5ErkJggg==); + background-position: center center; + background-repeat: no-repeat; + top: 4px; + right: 6px; + opacity: 0.4; &:hover { opacity: 1; } } + + // If Tab is active, so if it's in foreground + &.lm_active { + border-bottom: none; + box-shadow: 0 -2px 2px $color0; + padding-bottom: 3px; + + .lm_close_tab { + opacity: 1; + } + } + } +} + +.lm_dragProxy.lm_bottom, +.lm_stack.lm_bottom { + .lm_header .lm_tab { + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); + &.lm_active { + box-shadow: 0 2px 2px $color0; + } } } // If Pane Header (container of Tabs for each pane) is selected (used only if addition of new Contents is made "by selection" and not "by drag") .lm_selected { .lm_header { - background-color: $lm-tab-active-background; + background-color: $color8; } } -.lm_header .lm_tab.lm_active, -.lm_header .lm_tab.lm_active:hover { - height: $tab-height; - background-color: $lm-tab-active-background; - color: $lm-tab-active-color; - padding-bottom: 0; - box-shadow: inset -1px 0 0 0 $background; // act as right border only when active - // also kills the default shadow, doesn't work well with our design - &.lm_focusin { - box-shadow: inset 0 1px $primary, inset -1px 0 0 0 $background; // top focus indicator, right border +.lm_tab { + &:hover, // If Tab is hovered + &.lm_active // If Tab is active, so if it's in foreground + { + background: $color1; + color: $color3; } } -.lm_window_blur { - .lm_header .lm_tab.lm_active.lm_focusin { - box-shadow: none; - } +.lm_header .lm_tabs .lm_tab.lm_keyboard_active { + color: $color0; + background: $color3; +} + +// Dropdown arrow for additional tabs when too many to be displayed +.lm_header .lm_controls .lm_tabdropdown:before { + color: $color10; } // Pane controls (popout, maximize, minimize, close) @@ -253,23 +169,7 @@ body:not(.lm_dragging) .lm_header .lm_tab .lm_close_tab:hover { // Icon to Maximize Pane, so it will fill the entire GoldenLayout Container .lm_maximise { - background-size: 16px; - // vsChromeMaximize - background-image: str-replace( - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$lm-tab-icon-color}' d='M3 3v10h10V3H3zm9 9H4V4h8v8z'/%3E%3C/svg%3E"), - '#', - '%23' - ); - } - - .lm_tabdropdown { - background-size: 16px; - // vsChevronDown - background-image: str-replace( - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$lm-tab-icon-color}' 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"), - '#', - '%23' - ); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==); } // Icon to Close Pane and so remove it from GoldenLayout Container @@ -278,103 +178,52 @@ body:not(.lm_dragging) .lm_header .lm_tab .lm_close_tab:hover { } .lm_tabnextbutton { - background-size: 16px; - // vsChevronRight - background-image: str-replace( - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$lm-tab-icon-color}' d='M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619 4.357-4.357z'/%3E%3C/svg%3E"), - '#', - '%23' - ); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAABxJREFUCNdjUGBgEGBg4GBgYGFgYAKTHCARoDgABscAe0vtWukAAAAASUVORK5CYII=); } .lm_tabpreviousbutton { - background-size: 16px; - // vsChevronLeft - background-image: str-replace( - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$lm-tab-icon-color}' d='M5.928 7.976l4.357 4.357-.618.62L5 8.284v-.618L9.667 3l.618.619-4.357 4.357z'/%3E%3C/svg%3E"), - '#', - '%23' - ); - } -} - -.lm_header .lm_tabdropdown_list { - z-index: $zindex-dropdown; - background: $lm-tab-background; - top: 22px; - right: 24px; - box-shadow: $box-shadow-900; - border-radius: $border-radius; - max-width: 12rem; - - .lm_tabdropdown_search { - padding: $spacer-1; - input { - padding: $input-padding-y $input-padding-x; - line-height: $input-line-height; - color: $input-color; - background-color: $input-bg; - border: $input-border-width solid $input-border-color; - border-radius: $border-radius; - max-width: 100%; - - &::placeholder { - color: $input-placeholder-color; - opacity: 1; - } - - &:focus { - border-color: $input-focus-border-color; - box-shadow: $input-btn-focus-box-shadow; - outline: 0; - } - } - } - - .lm_tab { - background: $lm-tab-background; - color: $lm-tab-hover-color; - box-shadow: none; - - &.lm_keyboard_active { - color: $lm-tab-hover-color; - background-color: $primary-dark; - } - - &:hover { - color: $lm-tab-active-color; - background-color: $primary; - } + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAABxJREFUCNdjYGJgYGFg4GBgEGBgUACTHCARoDgABSMAXe2fzqEAAAAASUVORK5CYII=); } } // If a specific Pane is maximized .lm_maximised { - border: 15px solid rgba($black, 0.85); - height: 100% !important; - width: 100% !important; - .lm_items { - box-shadow: $box-shadow-900; + // Pane Header (container of Tabs for each pane) can have different style when is Maximized + .lm_header { + background-color: $color0; } // Pane controls are different in Maximized Mode, especially the old Icon "Maximise" that now has a different meaning, so "Minimize" (even if CSS Class did not change) .lm_controls { .lm_maximise { - opacity: 0.7; - // vsChromeMinimize - background-image: str-replace( - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$gray-100}' d='M14 8v1H3V8h11z'/%3E%3C/svg%3E"), - '#', - '%23' - ); - - &:hover { - opacity: 1; - } + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC); } } } -.lm_tabs:empty + .lm_controls .lm_maximise { - display: none; +// If a specific Pane is Popped Out, so move it to a different Browser Window, Icon to restore original position is: +.lm_popin { + cursor: pointer; + + // Background of Icon + .lm_bg { + background: $color10; + opacity: 0.3; + } + + // Icon to Restore original position in Golden Layout Container + .lm_icon { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAWklEQVR4nJWOyw3AIAxDHcQC7L8jbwT3AlJBfNp3SiI7dtRaLSlKKeoA1oEsKSQZCEluexw8Tm3ohk+E7bnOUHUGcNh+HwbBygw4AZ7FN/Lt84p0l+yTflV8AKQyLdcCRJi/AAAAAElFTkSuQmCC); + background-position: center center; + background-repeat: no-repeat; + border-left: 1px solid $color2; + border-top: 1px solid $color2; + opacity: 0.7; + } + + &:hover { + .lm_icon { + opacity: 1; + } + } } diff --git a/packages/golden-layout/src/LayoutManager.ts b/packages/golden-layout/src/LayoutManager.ts index 6386ba7466..af7df0deeb 100644 --- a/packages/golden-layout/src/LayoutManager.ts +++ b/packages/golden-layout/src/LayoutManager.ts @@ -43,8 +43,6 @@ export type ComponentConstructor< new (container: ItemContainer, state: unknown): unknown; }; -export type DragSourceEvent = JQuery.TriggeredEvent; - /** * The main class that will be exposed as GoldenLayout. * diff --git a/packages/golden-layout/src/declaration.d.ts b/packages/golden-layout/src/declaration.d.ts deleted file mode 100644 index a10272fac6..0000000000 --- a/packages/golden-layout/src/declaration.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -declare module '*.module.scss' { - const content: Record; - export default content; -} - -declare module '*.scss'; diff --git a/packages/golden-layout/src/index.ts b/packages/golden-layout/src/index.ts index 6f3d0f26bb..50772dcb89 100644 --- a/packages/golden-layout/src/index.ts +++ b/packages/golden-layout/src/index.ts @@ -7,5 +7,3 @@ export * from './controls'; export * from './errors'; export * from './items'; export * from './utils'; -export { default as GoldenLayoutThemeExport } from './GoldenLayoutThemeExport'; -export type { DragSourceEvent } from './LayoutManager'; diff --git a/tests/golden-layout.spec.ts b/tests/golden-layout.spec.ts index 0bf4079f3b..d4fed1d301 100644 --- a/tests/golden-layout.spec.ts +++ b/tests/golden-layout.spec.ts @@ -10,7 +10,7 @@ test.describe('tests golden-layout operations', () => { page = await browser.newPage(); await page.goto(''); - // load a custom layout for the tests + // reset the layout before each test await page.getByTestId('app-main-panels-button').click(); // start listener before click const fileChooserPromise = page.waitForEvent('filechooser'); diff --git a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-drag-tab-to-left-edge-2-chromium-linux.png b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-drag-tab-to-left-edge-2-chromium-linux.png index 095bd7a4d8..cdb413555e 100644 Binary files a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-drag-tab-to-left-edge-2-chromium-linux.png and b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-drag-tab-to-left-edge-2-chromium-linux.png differ diff --git a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-drag-tab-to-left-edge-2-firefox-linux.png b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-drag-tab-to-left-edge-2-firefox-linux.png index 31fe902c63..e95c068a8d 100644 Binary files a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-drag-tab-to-left-edge-2-firefox-linux.png and b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-drag-tab-to-left-edge-2-firefox-linux.png differ diff --git a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-drag-tab-to-left-edge-2-webkit-linux.png b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-drag-tab-to-left-edge-2-webkit-linux.png index a29cffd8aa..3f555d588a 100644 Binary files a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-drag-tab-to-left-edge-2-webkit-linux.png and b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-drag-tab-to-left-edge-2-webkit-linux.png differ diff --git a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-drag-tab-to-left-edge-3-chromium-linux.png b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-drag-tab-to-left-edge-3-chromium-linux.png index 311331039b..6e661d72e4 100644 Binary files a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-drag-tab-to-left-edge-3-chromium-linux.png and b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-drag-tab-to-left-edge-3-chromium-linux.png differ diff --git a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-drag-tab-to-left-edge-3-firefox-linux.png b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-drag-tab-to-left-edge-3-firefox-linux.png index f45cbb78e3..00c4897e0a 100644 Binary files a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-drag-tab-to-left-edge-3-firefox-linux.png and b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-drag-tab-to-left-edge-3-firefox-linux.png differ diff --git a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-drag-tab-to-left-edge-3-webkit-linux.png b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-drag-tab-to-left-edge-3-webkit-linux.png index ab218a640c..0c2f0d06f1 100644 Binary files a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-drag-tab-to-left-edge-3-webkit-linux.png and b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-drag-tab-to-left-edge-3-webkit-linux.png differ