@perspective-dev/workspace 4.0.0

package/src/less/tabbar.less

@@ -0,0 +1,366 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+.lm-TabBar-tabLabel {
+    background-color: transparent;
+    border: none;
+    color: var(--icon--color, #666);
+    cursor: pointer;
+    padding: 0px 6px;
+    margin: 0;
+    margin-left: 15.5px;
+    margin-right: auto;
+    flex: 0 1 auto;
+    border-radius: 3px;
+    &:hover {
+        background-color: var(--icon--color);
+        color: var(--plugin--background);
+    }
+}
+
+// .p-TabBar-tabLabel[value="[untitled]"] {
+//     color: #ddd !important;
+// }
+
+.lm-TabBar-tabLabel:focus {
+    outline: none;
+    color: var(--workspace-secondary--color, #666) !important;
+    cursor: text;
+}
+
+.lm-TabBar-tab.lm-mod-closable > .lm-TabBar-tabCloseIcon:before {
+    content: var(--close-button--content, "\2715");
+}
+
+.lm-TabBar-tab > .lm-TabBar-tabConfigIcon:before {
+    content: var(--open-settings-button--content, "\1F527");
+    font-family: var(--settings--font-family, "Arial");
+    transition: color 0.5s ease;
+}
+
+.lm-TabBar-tab.lm-mod-current.settings_open > .lm-TabBar-tabConfigIcon:before {
+    content: var(--close-settings-button--content, "\1F527");
+}
+
+.lm-TabBar-tab.lm-mod-current.linked > .lm-TabBar-tabConfigIcon:before {
+    color: #22a0ce;
+}
+
+.lm-TabBar-tab > .lm-TabBar-tabConfigIcon {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.lm-TabBar-tab.lm-mod-current > .lm-TabBar-tabConfigIcon {
+    opacity: 1;
+    pointer-events: all;
+}
+
+.lm-mod-current {
+    .lm-TabBar-tabConfigIcon,
+    .lm-TabBar-tabCloseIcon {
+        color: inherit;
+        transition: color 0.2s ease-out;
+    }
+
+    .lm-TabBar-tabConfigIcon:hover,
+    .lm-TabBar-tabCloseIcon:hover {
+        color: #1a7da1;
+        transition: color 0.2s ease-out;
+    }
+}
+
+.lm-BoxPanel {
+    overflow: scroll !important;
+}
+
+.lm-TabBar,
+.lm-TabBar-tab {
+    position: relative;
+
+    overflow: visible !important;
+}
+
+.lm-TabBar-tabLabel:empty::after {
+    content: "untitled";
+    color: #aaa;
+}
+
+.lm-mod-current .lm-TabBar-tabLabel:empty::after {
+    color: #ddd;
+}
+
+.lm-TabBar-tabLabel:empty::after {
+    content: "untitled";
+}
+
+.divider {
+    left: 32px;
+    bottom: 0;
+    position: absolute;
+    right: 32px;
+
+    height: 1px;
+    background-color: var(--workspace-tabbar--border-color);
+    margin-bottom: 0px;
+}
+
+.lm-TabBar-tab .drag-handle {
+    height: 12px;
+    width: 5px;
+    -webkit-mask-image: var(--column-drag-handle--mask-image);
+    mask-image: var(--column-drag-handle--mask-image);
+    margin: 0px 0 0 21.5px;
+    background-repeat: no-repeat;
+    background-color: var(--inactive--color, red);
+    content: "";
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+}
+
+.lm-TabBar-tab.lm-mod-hidden {
+    display: flex !important;
+    opacity: 0.5;
+}
+
+.lm-TabBar-tab.lm-mod-current .divider {
+    display: block;
+}
+
+// .lm-TabBar-tabLabel input {
+//     height: 18px;
+// }
+
+.lm-TabBar {
+    min-height: 40px !important;
+}
+
+@border-color: 1px solid #eaeaea;
+@night-border-color: 1px solid #ddd;
+
+.pfm-button-base {
+    background: white !important;
+}
+
+.pfm-button-base:active {
+    background: #016bc6 !important;
+}
+
+.lm-TabBar-content {
+    padding: 0px;
+    border-bottom: 0px solid #fff !important;
+    border-left: #eaeaea;
+    border-right: #eaeaea;
+}
+
+.lm-TabBar-tab.lm-mod-current {
+    .shadow {
+        margin: -1px;
+        position: absolute;
+        width: calc(100% + 2px);
+        height: 200%;
+        pointer-events: none;
+        left: 0px;
+    }
+
+    &.settings_open .shadow {
+        box-shadow: none;
+    }
+}
+
+.lm-TabBar-tab {
+    // margin: 0px 4px;
+    border-color: #eaeaea;
+    align-items: center;
+}
+
+.lm-TabBar-content.inactive-blur > .lm-TabBar-tab {
+    background-color: var(
+        --workspace-inactive-blur--background-color,
+        transparent
+    );
+}
+
+.condensed .lm-TabBar-content {
+    & > .lm-TabBar-tab.lm-mod-current .lm-TabBar-tabConfigIcon {
+        display: block;
+    }
+
+    & > .lm-TabBar-tab.lm-mod-current.settings_open {
+        .lm-TabBar-tabLabel {
+            margin-left: 0px;
+        }
+    }
+}
+
+.lm-TabBar-content > .lm-TabBar-tab.lm-mod-current.settings_open {
+    border-width: 1px 1px 0px 1px !important;
+    border-color: var(--workspace-tabbar--border-color, #ddd);
+
+    .lm-TabBar-tabToolbar {
+        display: flex;
+    }
+
+    .divider {
+        height: 1px;
+        margin-bottom: 0px;
+        background-color: var(--workspace-tabbar--border-color, #ddd);
+    }
+
+    &:last-child:first-child .divider {
+        transition: none;
+    }
+}
+
+.lm-TabBar-content > .lm-TabBar-tab.lm-mod-current.perspective_updating {
+    .lm-TabBar-tabConfigIcon {
+        display: none;
+    }
+
+    .lm-TabBar-tabLoadingIcon {
+        display: block;
+    }
+}
+
+.lm-TabBar-content > .lm-TabBar-tab {
+    max-width: 100000px !important;
+    flex: 0 1 100000px !important;
+    background: none;
+    color: #737373;
+    height: 40px !important;
+    max-height: 40px !important;
+    transform: none !important;
+    transition: color 0.2s ease-out;
+}
+
+.lm-TabBar-content > .lm-TabBar-tab {
+    color: #ccc;
+}
+
+.lm-TabBar-content > .lm-TabBar-tab {
+    color: #ccc;
+}
+
+.lm-TabBar-content > .lm-TabBar-tab:hover {
+    color: #ccc;
+}
+
+.lm-TabBar-content > .lm-TabBar-tab.lm-mod-current {
+    color: var(--workspace-secondary--color, #666);
+}
+
+.lm-TabBar-tab.lm-mod-current .lm-TabBar-tabLabel {
+    white-space: nowrap !important;
+}
+
+.lm-TabBar-tabLabel {
+    font-family: inherit;
+    font-size: 12px;
+    line-height: 22px;
+    text-align: start;
+    white-space: normal !important;
+    word-break: break-all;
+}
+
+.lm-TabBar-tabCloseIcon,
+.lm-TabBar-tabConfigIcon {
+    cursor: pointer !important;
+    line-height: 22px !important;
+    padding-right: 16.5px !important;
+}
+
+.lm-TabBar-tabConfigIcon {
+    padding-left: 8px;
+    padding-right: 8px !important;
+}
+
+.lm-TabBar-tabLoadingIcon {
+    padding-left: 11px;
+    padding-right: 12px;
+}
+
+.bottom .lm-TabBar-tab {
+    flex-basis: 10000px !important;
+    max-width: 10000px !important;
+}
+
+.lm-TabBar-content > .lm-TabBar-tab.lm-mod-current {
+    color: var(--workspace-tabbar--color, #666) !important;
+    border: var(--workspace-tabbar--border, 1px solid #ddd);
+    border-width: var(--workspace-tabbar-tab--border-width);
+    box-shadow: 0 13px 0 -12px var(--inactive--border-color);
+    border-radius: var(--workspace-tabbar--border-radius, 6px)
+        var(--workspace-tabbar--border-radius, 6px) 0 0;
+    background-color: var(--workspace-tabbar--background-color, white);
+    height: 40px !important;
+    max-height: 40px !important;
+}
+
+.bottom .lm-TabBar-tab.lm-mod-current {
+    border: none;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #ccc;
+}
+
+.perspective-workspace.context-menu * .lm-TabBar.context-focus {
+    opacity: 1;
+}
+
+.perspective-workspace.context-menu * .lm-TabBar,
+.perspective-workspace.context-menu
+    .lm-Widget.workspace-widget:not(.context-focus)
+    .viewer-container {
+    opacity: 0.2;
+}
+
+@mixin icon {
+    background-repeat: no-repeat;
+    background-color: var(--icon--color);
+    content: "";
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+}
+
+.bookmarks-button {
+    margin-left: 11px;
+    margin-right: -13px;
+    border-radius: 3px;
+    height: 22px;
+
+    &:hover {
+        background-color: var(--icon--color);
+    }
+}
+
+.bookmarks {
+    cursor: pointer;
+    @include icon;
+    width: 26px;
+    height: 12px;
+    -webkit-mask-image: var(--bookmarks--mask-image);
+    mask-image: var(--bookmarks--mask-image);
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-size: auto;
+    mask-size: auto;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    padding: 5px;
+
+    &:hover {
+        background-color: var(--plugin--background);
+    }
+}

package/src/less/viewer.less

@@ -0,0 +1,86 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+@border-color: 1px solid #eaeaea;
+
+.workspace-master-widget {
+    --config-button-icon--content: var(
+        --open-settings-button--content,
+        "\1F527"
+    ) !important;
+}
+
+.workspace-master-widget[settings] {
+    --config-button-icon--content: var(
+        --close-settings-button--content,
+        "\1F527"
+    ) !important;
+}
+
+:not(.workspace-master-widget).widget-maximize {
+    --config-button-icon--content: var(
+        --open-settings-button--content,
+        "\1F527"
+    ) !important;
+}
+
+:not(.workspace-master-widget).widget-maximize[settings] {
+    --config-button-icon--content: var(
+        --close-settings-button--content,
+        "\1F527"
+    ) !important;
+}
+
+.lm-DockPanel-widget {
+    border: @border-color;
+    border-width: 0px !important;
+    min-width: 300px;
+    min-height: 200px;
+}
+
+:not.workspace-master-widget {
+    --config-button-icon--content: "" !important;
+}
+
+.context-menu > perspective-viewer.context-focus {
+    opacity: 1;
+    filter: none;
+}
+
+.context-menu > perspective-viewer {
+    filter: saturate(0);
+
+    & > * {
+        pointer-events: none;
+    }
+}
+
+::slotted(perspective-viewer) {
+    flex: 1;
+    position: relative;
+    display: block;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    overflow: visible !important;
+}
+
+:host-context(.lm-mod-override-cursor) {
+    cursor: grabbing !important;
+}
+
+:host-context(.lm-mod-override-cursor) ::slotted(perspective-viewer),
+.context-menu ::slotted(perspective-viewer) {
+    --override-content-pointer-events: none;
+}

package/src/less/widget.less

@@ -0,0 +1,40 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+@border-color: 1px solid #eaedef;
+
+.lm-DockPanel:not([data-mode="single-document"]) .viewer-container {
+    border: var(--workspace-tabbar--border, 1px solid var(--inactive--color));
+    border-width: var(--workspace-tabbar--border-width);
+    border-radius: 0 0 var(--workspace-tabbar--border-radius, 6px)
+        var(--workspace-tabbar--border-radius, 6px);
+}
+
+.viewer-container {
+    flex: 1;
+    height: 100%;
+    overflow: hidden;
+}
+
+.perspective-scroll-panel {
+    .workspace-widget {
+        min-width: 300px;
+        min-height: 200px;
+    }
+}
+
+.workspace-widget {
+    display: flex;
+    flex-direction: column;
+    border: @border-color;
+    border-width: 0px !important;
+}

package/src/less/workspace.less

@@ -0,0 +1,70 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+@import "@lumino/widgets/style/widget.css";
+@import "@lumino/widgets/style/accordionpanel.css";
+@import "@lumino/widgets/style/commandpalette.css";
+@import "@lumino/widgets/style/dockpanel.css";
+@import "@lumino/widgets/style/menu.css";
+@import "@lumino/widgets/style/menubar.css";
+@import "@lumino/widgets/style/scrollbar.css";
+@import "@lumino/widgets/style/splitpanel.css";
+@import "@lumino/widgets/style/tabbar.css";
+@import "@lumino/widgets/style/tabpanel.css";
+
+@import "./injected.less";
+
+:host {
+    @import "./tabbar.less";
+    @import "./dockpanel.less";
+    @import "./widget.less";
+
+    background-color: hsl(210deg 18% 90%);
+
+    // width: 100%;
+    // height: 100%;
+
+    .workspace {
+        width: 100%;
+        height: 100%;
+    }
+
+    .lm-SplitPanel {
+        height: 100%;
+        width: 100%;
+    }
+
+    div.lm-SplitPanel-handle {
+        background-color: var(--workspace-split-panel-handle--background-color);
+    }
+
+    .master-panel {
+        background-color: var(--workspace-master--background-color, inherit);
+        padding: 0px 0px 0px 0px;
+
+        .viewer-container {
+            border-width: 0px;
+        }
+    }
+
+    .perspective-workspace.context-menu * .lm-SplitPanel-handle {
+        opacity: 0.2;
+    }
+
+    .perspective-workspace.context-menu > .lm-SplitPanel-handle {
+        opacity: 0.2;
+    }
+
+    .context-menu .lm-TabBar:not(.context-focus) {
+        pointer-events: none;
+    }
+}

package/src/svg/bookmark-icon.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="11" viewBox="0 0 24 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.66214 6.96476L0.5 9.86338V0.5H7.5V9.86338L4.33786 6.96476L4 6.65505L3.66214 6.96476Z" stroke="#042121"/>
+    <path d="M19 4L21 6L23 4" stroke="#042121" stroke-linecap="round"/>
+</svg>

package/src/svg/drag-handle.svg

@@ -0,0 +1,10 @@
+<svg width="5" height="12" viewBox="0 0 5 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="3.49996" cy="11.0001" r="0.833333" fill="#6E6E6E"/>
+<circle cx="0.833333" cy="11.0001" r="0.833333" fill="#6E6E6E"/>
+<circle cx="3.49996" cy="7.66683" r="0.833333" fill="#6E6E6E"/>
+<circle cx="0.833333" cy="7.66683" r="0.833333" fill="#6E6E6E"/>
+<circle cx="3.49996" cy="4.33333" r="0.833333" fill="#6E6E6E"/>
+<circle cx="0.833333" cy="4.33333" r="0.833333" fill="#6E6E6E"/>
+<circle cx="3.49996" cy="1.00008" r="0.833333" fill="#6E6E6E"/>
+<circle cx="0.833333" cy="1.00008" r="0.833333" fill="#6E6E6E"/>
+</svg>