Restore Projection bars (eclipse-glsp#298)

Relates to eclipse-glsp/glsp#1122
holkerveen · Dec 21, 2024 · b9c4a29 · b9c4a29
1 parent 27591b9
commit b9c4a29
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 18 deletions.
diff --git a/examples/workflow-standalone/css/diagram.css b/examples/workflow-standalone/css/diagram.css
@@ -62,3 +62,24 @@ polygon.sprotty-node {
 .sprotty-node.selected {
     stroke: rgb(87, 87, 214);
 }
+
+.bordered-projection-bar {
+    border-color: #a1a1a1;
+}
+
+.sprotty-viewport {
+    border-width: 1px;
+    border-color: #555555;
+}
+
+.sprotty-projection-bar.horizontal.bordered-projection-bar {
+    height: 15px;
+}
+
+.sprotty-projection-bar.vertical.bordered-projection-bar {
+    width: 15px;
+}
+
+.projection-scroll-bar {
+    background-color: #555555;
+}
diff --git a/packages/client/css/glsp-sprotty.css b/packages/client/css/glsp-sprotty.css
@@ -230,37 +230,63 @@
 }
 
 .sprotty-projection-bar.vertical.bordered-projection-bar {
-    width: var(--theia-scrollbar-rail-width);
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 20px;
+    height: 100%;
 }
 
 .sprotty-projection-bar.horizontal.bordered-projection-bar {
-    height: var(--theia-scrollbar-rail-width);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 20px;
+    width: 100%;
+}
+
+.sprotty-projection-bar.horizontal .sprotty-projection,
+.sprotty-projection-bar.horizontal .sprotty-viewport {
+    position: absolute;
+    height: 100%;
+    top: 0;
+}
+
+.sprotty-projection-bar.vertical .sprotty-projection,
+.sprotty-projection-bar.vertical .sprotty-viewport {
+    position: absolute;
+    width: 100%;
+    left: 0;
 }
 
 .projection-scroll-bar {
+    position: absolute;
+    background: transparent;
+    background-color: #aaa;
+    z-index: 1;
+    opacity: 0.3;
     transition: opacity 0.8s linear;
 }
 
+.sprotty-viewport {
+    z-index: 1;
+    border-style: solid;
+    border-width: 2px;
+}
+
 .mouse-enter .projection-scroll-bar {
     opacity: 0.3;
-    background: transparent;
-    background-color: #aaa;
-    z-index: 1;
 }
 
 .mouse-leave .projection-scroll-bar {
     opacity: 0;
     pointer-events: none;
-    background: transparent;
-    background-color: #aaa;
-    z-index: 1;
 }
 
 .bordered-projection-bar {
     border-left: 1px solid rgba(212, 212, 212, 0.2);
     border-top: 1px solid rgba(212, 212, 212, 0.2);
     fill: transparent;
-    width: var(--theia-scrollbar-rail-width);
 }
 
 .search-hidden {

diff --git a/packages/client/css/toast.css b/packages/client/css/toast.css
@@ -15,12 +15,11 @@
  ********************************************************************************/
 .toast {
     position: absolute;
-    bottom: 1rem;
-    width: 100%;
+    bottom: 48px; /* same as top of toolbar by default */
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-column-gap: 1rem;
-    margin: 0 1rem;
+    left: 40px; /* same as right of toolbar by default */
 }
 
 .toast-column-left {

diff --git a/packages/client/src/views/glsp-projection-view.tsx b/packages/client/src/views/glsp-projection-view.tsx
@@ -14,8 +14,6 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { inject, injectable } from 'inversify';
-import { VNode, VNodeStyle, h } from 'snabbdom';
 import {
     Bounds,
     EdgeRouterRegistry,
@@ -29,6 +27,8 @@ import {
     setAttr,
     setClass
 } from '@eclipse-glsp/sprotty';
+import { inject, injectable } from 'inversify';
+import { VNode, VNodeStyle, h } from 'snabbdom';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const JSX = { createElement: html };
@@ -123,13 +123,11 @@ export class GLSPProjectionView extends ProjectedViewportView {
             params.orientation === 'horizontal'
                 ? {
                       left: `${viewportPos}px`,
-                      width: `${viewportSize}px`,
-                      border: 'none'
+                      width: `${viewportSize}px`
                   }
                 : {
                       top: `${viewportPos}px`,
-                      height: `${viewportSize}px`,
-                      border: 'none'
+                      height: `${viewportSize}px`
                   };
         return <div class-sprotty-viewport={viewportSize !== 0} class-projection-scroll-bar={true} style={style} />;
     }