Improve full dragboard support

Wirecloud · May 21, 2019 · e4d2eae · e4d2eae
1 parent 61f8a86
commit e4d2eae
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 38 deletions.
diff --git a/src/wirecloud/defaulttheme/static/css/_defaults.scss b/src/wirecloud/defaulttheme/static/css/_defaults.scss
@@ -35,8 +35,10 @@ $line-height-large:        floor($font-size-large * $line-height-factor-large) !
 $line-height-small:        floor($font-size-small * $line-height-factor-small) !default; // ~18px
 $line-height-xs:           floor($font-size-xs * $line-height-factor-xs) !default;       // ~16px
 
-$margin-vertical-base: 10px !default;
-$margin-horizontal-small: 5px !default;
+$margin-vertical-base:     10px !default;
+$margin-vertical-small:     3px !default;
+$margin-horizontal-base:   12px !default;
+$margin-horizontal-small:   5px !default;
 
 $padding-vertical-base:     6px !default;
 $padding-horizontal-base:  12px !default;

diff --git a/src/wirecloud/defaulttheme/static/css/styledelements/styled_notebook.scss b/src/wirecloud/defaulttheme/static/css/styledelements/styled_notebook.scss
@@ -200,9 +200,14 @@ $tabs-wrapper-height: $line-height-base + ($nav-link-padding-vertical * 2) + 2;
     overflow: hidden;
 }
 
+.se-notebook-top > .se-notebook-tabs-wrapper {
+    margin-top: $margin-vertical-small;
+}
+
 .se-notebook-bottom {
 
     > .se-notebook-tabs-wrapper {
+        margin-bottom: $margin-vertical-small;
         margin-top: -1px;
         order: 2;
 
@@ -230,18 +235,6 @@ $tabs-wrapper-height: $line-height-base + ($nav-link-padding-vertical * 2) + 2;
 
 }
 
-.se-notebook-content-wrapper:after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 1000;
-    pointer-events: none;
-    box-shadow: inset 0px 10px 10px -10px $body-bg, inset 0px -10px 10px -10px $body-bg;
-}
-
 $arrow-width: floor(($tabs-wrapper-height - 1) / 2);
 .se-notebook-crumbs .se-notebook-tab {
     margin-left: 1px;

diff --git a/src/wirecloud/defaulttheme/static/css/styledelements/styled_offcanvas_layout.scss b/src/wirecloud/defaulttheme/static/css/styledelements/styled_offcanvas_layout.scss
@@ -23,15 +23,15 @@
 .se-offcanvas-content {
     position: relative;
     height: 100%;
-    margin: 0 $margin-horizontal-small;
+    margin: 0;
     flex-grow: 1;
     flex-shrink: 1;
     overflow: auto;
     box-sizing: border-box;
 }
 
 .se-offcanvas.left-sideway {
-    left: ($offcanvas-sidebar-width + $margin-horizontal-small) * -1;
+    left: ($offcanvas-sidebar-width + (2 * $margin-horizontal-small)) * -1;
     transition: left .2s ease-out;
 
     &.slipped {
@@ -40,11 +40,12 @@
 
     .se-offcanvas-sidebar {
         margin-left: $margin-horizontal-small;
+        margin-right: $margin-horizontal-small;
     }
 }
 
 .se-offcanvas.right-sideway {
-    right: ($offcanvas-sidebar-width + $margin-horizontal-small) * -1;
+    right: ($offcanvas-sidebar-width + (2 * $margin-horizontal-small)) * -1;
     transition: right .2s ease-out;
 
     &.slipped {

diff --git a/src/wirecloud/defaulttheme/static/css/wiring/layout.scss b/src/wirecloud/defaulttheme/static/css/wiring/layout.scss
@@ -1,6 +1,9 @@
 @import "compass/css3/user-interface";
 @import "variables";
 
+.wc-workspace-wiring {
+    padding: 0px $margin-horizontal-small;
+}
 
 .wiring-diagram {
     background-color: $wiring-content-bg;

diff --git a/src/wirecloud/defaulttheme/static/css/workspace/dragboard.scss b/src/wirecloud/defaulttheme/static/css/workspace/dragboard.scss
@@ -11,16 +11,10 @@
     background: white;
 }
 
-.wc-workspace {
-    .se-offcanvas {
-        padding-bottom: ($margin-vertical-base / 2);
-    }
-}
-
 .wc-workspace-tab-content {
-    padding-left: 0px;
-    padding-right: 0px;
-    overflow-x: visible;
+    padding-left: $margin-horizontal-small;
+    padding-right: $margin-horizontal-small;
+    overflow-x: hidden;
     overflow-y: auto;
 
     &.dragging {

diff --git a/src/wirecloud/defaulttheme/static/css/workspace/widget.scss b/src/wirecloud/defaulttheme/static/css/workspace/widget.scss
@@ -7,7 +7,7 @@
 
 .wc-widget {
     position: absolute;
-    transition: opacity 0.35s ease-in, top 0.2s ease-in, left 0.2s ease-in, width 0.2s ease-in, height 0.2s ease-in, box-shadow 0.7s ease-in;
+    transition: opacity 0.35s ease-in, top 0.2s ease-in, left 0.2s ease-in, right 0.2s ease-in, width 0.2s ease-in, height 0.2s ease-in, box-shadow 0.7s ease-in;
     overflow: visible;
     @include z-depth(1);
     box-sizing: border-box;
@@ -149,7 +149,12 @@
 
 .wc-widget-fulldragboard {
 
-    position: fixed;
+    top: 0px;
+    right: 0px;
+    left: 0px;
+    bottom: 0px;
+
+    @include z-depth(0);
     border: 0px none;
 
     & > .wc-widget-footer {

diff --git a/src/wirecloud/platform/static/js/wirecloud/Widget.js b/src/wirecloud/platform/static/js/wirecloud/Widget.js
@@ -177,6 +177,7 @@
                 value: !!data.volatile
             }
         });
+        this.fulldragboard = data.fulldragboard;
 
         this.wrapperElement = document.createElement('iframe');
         this.wrapperElement.className = "wc-widget-content";

diff --git a/src/wirecloud/platform/static/js/wirecloud/ui/DragboardLayout.js b/src/wirecloud/platform/static/js/wirecloud/ui/DragboardLayout.js
@@ -175,6 +175,11 @@
         return new Wirecloud.ui.MultiValuedSize(this.getWidthInPixels(sizeInLU), sizeInLU);
     };
 
+    DragboardLayout.prototype.updatePosition = function updatePosition(widget, element) {
+        element.style.left = this.getColumnOffset(widget.position.x) + "px";
+        element.style.top = this.getRowOffset(widget.position.y) + "px";
+    };
+
     DragboardLayout.prototype.padWidth = function padWidth(width) {
         return width;
     };
@@ -220,6 +225,7 @@
     });
 
     Object.defineProperty(DragboardLayout.prototype, "dragboardLeftMargin", {
+        configurable: true,
         get: function () {
             return this.dragboard.leftMargin;
         }

diff --git a/src/wirecloud/platform/static/js/wirecloud/ui/FullDragboardLayout.js b/src/wirecloud/platform/static/js/wirecloud/ui/FullDragboardLayout.js
@@ -50,11 +50,11 @@
     };
 
     FullDragboardLayout.prototype.getWidthInPixels = function getWidthInPixels(cells) {
-        return this.getWidth();
+        return null;
     };
 
     FullDragboardLayout.prototype.getHeightInPixels = function getHeightInPixels(cells) {
-        return this.getHeight();
+        return null;
     };
 
     FullDragboardLayout.prototype.fromPixelsToHCells = function fromPixelsToHCells(pixels) {
@@ -70,11 +70,11 @@
     };
 
     FullDragboardLayout.prototype.getColumnOffset = function getColumnOffset(column) {
-        return this.dragboard.tab.wrapperElement.getBoundingClientRect().left + this.dragboardLeftMargin;
+        return 0;
     };
 
     FullDragboardLayout.prototype.getRowOffset = function getRowOffset(row) {
-        return this.dragboard.tab.wrapperElement.getBoundingClientRect().top;
+        return 0;
     };
 
     FullDragboardLayout.prototype.adaptColumnOffset = function adaptColumnOffset(size) {

diff --git a/src/wirecloud/platform/static/js/wirecloud/ui/WidgetView.js b/src/wirecloud/platform/static/js/wirecloud/ui/WidgetView.js
@@ -247,7 +247,14 @@
         this.heading = this.wrapperElement.getElementsByClassName('wc-widget-heading')[0];
 
         // TODO: review
-        var layout = model.layout === 0 ? tab.dragboard.baseLayout : tab.dragboard.freeLayout;
+        var layout;
+        if (model.fulldragboard) {
+            layout = tab.dragboard.fulldragboardLayout;
+            this.previousLayout = model.layout === 0 ? tab.dragboard.baseLayout : tab.dragboard.freeLayout;
+            this.previousPosition = model.position;
+        } else {
+            layout = model.layout === 0 ? tab.dragboard.baseLayout : tab.dragboard.freeLayout
+        }
         layout.addWidget(this, true);
 
         this.setMinimizeStatus(model.minimized, false, true);
@@ -555,10 +562,13 @@
                 this.previousPosition = this.position;
 
                 this.moveToLayout(dragboard.fulldragboardLayout);
-                dragboard.raiseToTop(this);
+                dragboard.lowerToBottom(this);
             } else {
                 this.moveToLayout(this.previousLayout);
             }
+            this.model.fulldragboard = enable;
+
+            dragboard.update([this.model.id]);
         },
 
         toggleLayout: function toggleLayout() {
@@ -592,6 +602,11 @@
                 data.height = privates.get(this).shape.height;
                 data.fulldragboard = false;
             } else {
+                data.top = this.previousPosition.y;
+                data.left = this.previousPosition.x;
+                data.zIndex = this.previousPosition.z;
+                data.width = this.previousShape.width;
+                data.height = this.previousShape.height;
                 data.fulldragboard = true;
             }
 
@@ -653,14 +668,24 @@
     };
 
     var update_position = function update_position() {
-        this.wrapperElement.style.left = this.layout.getColumnOffset(this.position.x) + "px";
-        this.wrapperElement.style.top = this.layout.getRowOffset(this.position.y) + "px";
+        this.layout.updatePosition(this, this.wrapperElement);
         this.wrapperElement.style.zIndex = this.position.z + 1;
     };
 
     var update_shape = function update_shape() {
-        this.wrapperElement.style.width = this.layout.getWidthInPixels(this.shape.width) + 'px';
-        this.wrapperElement.style.height = this.minimized ? "" : this.layout.getHeightInPixels(this.shape.height) + 'px';
+        let width = this.layout.getWidthInPixels(this.shape.width);
+        if (width != null) {
+            this.wrapperElement.style.width = width + 'px';
+        } else {
+            this.wrapperElement.style.width = "";
+        }
+
+        let height = this.minimized ? null : this.layout.getHeightInPixels(this.shape.height);
+        if (height != null) {
+            this.wrapperElement.style.height = height + 'px';
+        } else {
+            this.wrapperElement.style.height = "";
+        }
     };
 
     var notify_position = function notify_position() {