[Front-end] WIP Updates to widget styles

Fixes #1644
Fixes #1668
Getting main layout in order;
Renamed *-wrapper classes to *-w;
Drag and re-order of rules is broken :(

platform/commonUI/general/res/sass/_mixins.scss

@@ -20,8 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-@mixin absPosDefault($offset: 0px, $overflowHidden: hidden) {
-    overflow: $overflowHidden;
+@mixin absPosDefault($offset: 0px, $overflow: hidden) {
+    overflow: $overflow;
     position: absolute;
     top: $offset;
     right: $offset;

platform/commonUI/general/res/sass/_widgets.scss

@@ -21,6 +21,13 @@
  *****************************************************************************/
 
 /************************************************************* WIDGET OBJECT */
+.l-summary-widget {
+    // Widget layout classes here
+    @include ellipsize();
+    display: inline-block;
+    text-align: center;
+}
+
 .s-summary-widget {
     // Widget style classes here
     border-radius: $basicCr;
@@ -30,11 +37,16 @@
     padding: $interiorMarginLg $interiorMarginLg * 2;
 }
 
-.l-summary-widget {
-    // Widget layout classes here
-    @include ellipsize();
-    text-align: center;
+.l-widget-outer-w,
+.widget-holder,
+.widget-edit-holder {
+    // In browse mode, all these things should be at .abs default
+    @extend .abs;
+}
 
+.widget-edit-holder {
+    // Hide edit area when in browse mode
+    display: none;
 }
 
 .widget-rule-header {
@@ -60,7 +72,7 @@
     }
 }
 
-.l-widget-thumb-wrapper,
+.l-widget-thumb-w,
 .l-compact-form label {
     $ruleLabelW: 40%;
     $ruleLabelMaxW: 150px;
@@ -70,19 +82,15 @@
 }
 
 /********************************************************** EDITING A WIDGET */
-.l-edit-widget {
-    // Classes for editor layout while editing a widget
-    @include absPosDefault();
-    @extend .l-flex-col;
-
-    > .holder {
-        @extend .flex-elem;
-        //@include test();
-    }
+.s-status-editing .l-widget-outer-w {
+    $widgetHolderH: 100px;
+    @extend .abs;
+    //overflow: hidden; // Overflow scroll is handled by internal elements
 
     .widget-holder {
-        height: 100px;
-        .s-summary-widget {
+        bottom: auto;
+        height: $widgetHolderH;
+        .l-summary-widget {
             display: inline-block;
             position: absolute;
             top: 50%; left: 50%;
@@ -90,13 +98,30 @@
         }
     }
 
-    .widget-rules-wrapper {
+    .widget-edit-holder {
+        @extend .l-flex-col;
+        display: block; // Needed to counteract display: none while browsing
+        overflow-y: scroll;
+        padding-right: $interiorMargin;
+        top: $widgetHolderH + $interiorMargin;
+    }
+
+
+    
+    .widget-test-data,
+    .widget-rules-w {
+        @include test(blue, 0.1);
+    }
+    
+    .widget-test-data {
+
+    }
+
+    .widget-rules-w {
         // Wrapper area that holds n rules
+        @extend .flex-elem;
         box-sizing: border-box;
         font-size: 0.8em;
-        overflow-x: hidden;
-        overflow-y: auto;
-        padding-right: $interiorMargin;
     }
 
     .l-widget-rule {
@@ -105,7 +130,7 @@
         padding: $interiorMarginLg;
     }
 
-    .l-widget-thumb-wrapper {
+    .l-widget-thumb-w {
         @extend .l-flex-row;
         @include align-items(center);
         > span { display: block; }
@@ -144,21 +169,21 @@
         padding: $interiorMarginSm $interiorMargin;
         .widget-icon {
             font-size: 0.8em;
-        }
+            }
     }
 
     // Hide and show elements in the rule-header on hover
     .l-widget-rule {
         .grippy,
-        .l-rule-action-buttons-wrapper,
-        .l-condition-action-buttons-wrapper {
+        .l-rule-action-buttons-w,
+        .l-condition-action-buttons-w {
             @include trans-prop-nice($props: opacity, $dur: 500ms);
             opacity: 0;
         }
         &:hover {
             .grippy,
-            .l-rule-action-buttons-wrapper,
-            .l-condition-action-buttons-wrapper {
+            .l-rule-action-buttons-w,
+            .l-condition-action-buttons-w {
                 @include trans-prop-nice($props: opacity, $dur: 0);
                 opacity: 1;
             }

platform/commonUI/general/res/sass/forms/_elems.scss

@@ -20,6 +20,12 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .section-header {
+    border-radius: $basicCr;
+    background: $colorFormSectionHeader;
+    color: lighten($colorBodyFg, 20%);
+    font-size: 0.8em;
+    margin: $interiorMargin 0;
+    padding: $formTBPad $formLRPad;
     text-transform: uppercase;
 }
 
@@ -41,15 +47,6 @@
         }
     }
 
-    .section-header {
-        border-radius: $basicCr;
-        background: $colorFormSectionHeader;
-        $c: lighten($colorBodyFg, 20%);
-        color: $c;
-        font-size: 0.8em;
-        padding: $formTBPad $formLRPad;
-    }
-
 	.form-row {
 		$m: $interiorMargin;
 		box-sizing: border-box;

src/plugins/summaryWidget/res/conditionTemplate.html

@@ -4,7 +4,7 @@
         <span class="t-configuration"> </span>
         <span class="t-value-inputs"> </span>
     </span>
-    <span class="flex-elem l-condition-action-buttons-wrapper">
+    <span class="flex-elem l-condition-action-buttons-w">
         <a class="s-icon-button icon-duplicate t-duplicate"></a>
         <a class="s-icon-button icon-trash t-delete"></a>
     </span>

src/plugins/summaryWidget/res/ruleImageTemplate.html

@@ -1,5 +1,5 @@
 <div class="l-edit-widget">
-    <div class="holder widget-rules-wrapper grows">
+    <div class="holder widget-rules-w grows">
         <div class="t-drag-rule-image l-widget-rule s-widget-rule l-compact-form"> </div>
     </div>
 </div>

src/plugins/summaryWidget/res/ruleTemplate.html

@@ -1,7 +1,7 @@
 <div>
     <div class="l-widget-rule s-widget-rule l-compact-form">
         <div class="widget-rule-header">
-            <span class="flex-elem l-widget-thumb-wrapper">
+            <span class="flex-elem l-widget-thumb-w">
                 <span class="grippy-holder">
                     <span class="t-grippy grippy"></span>
                 </span>
@@ -13,7 +13,7 @@
             </span>
             <span class="flex-elem rule-title">Default Title</span>
             <span class="flex-elem rule-description grows">Rule description goes here</span>
-            <span class="flex-elem l-rule-action-buttons-wrapper">
+            <span class="flex-elem l-rule-action-buttons-w">
                 <a class="s-icon-button icon-duplicate t-duplicate"></a>
                 <a class="s-icon-button icon-trash t-delete"></a>
             </span>

src/plugins/summaryWidget/res/testDataItemTemplate.html

@@ -5,7 +5,7 @@
         <span> equal </span>
         <span class="t-value-inputs"> </span>
     </span>
-    <span class="flex-elem l-condition-action-buttons-wrapper">
+    <span class="flex-elem l-condition-action-buttons-w">
         <a class="s-icon-button icon-duplicate t-duplicate"></a>
         <a class="s-icon-button icon-trash t-delete"></a>
     </span>

src/plugins/summaryWidget/res/testDataTemplate.html

@@ -1,6 +1,6 @@
 <div class="l-widget-rule s-widget-rule l-compact-form l-widget-test-data">
     <div class="widget-rule-header widget-test-data-header">
-        <span class="flex-elem l-widget-thumb-wrapper">
+        <span class="flex-elem l-widget-thumb-w">
             <span class="view-control"></span>
         </span>
         <span class="flex-elem rule-title">Test Data</span>

src/plugins/summaryWidget/res/widgetTemplate.html

@@ -1,15 +1,19 @@
-<div class="l-edit-widget">
+<div class="l-widget-outer-w">
     <div class="holder widget-holder">
         <a id="widget" class="widget t-summary-widget l-summary-widget s-summary-widget labeled">
             <span id="widgetIcon" class="widget-icon"></span>
             <span id="widgetLabel" class="widget-label">Default Name</span>
         </a>
     </div>
-    <div class="widget-test-data"> </div>
-    <div class="holder widget-rules-wrapper grows">
-        <div id="ruleArea" class="widget-rules"></div>
-        <div class="holder add-rule-button-wrapper align-right">
-            <a id="addRule" class="s-button major labeled add-rule-button icon-plus">Add Rule</a>
+    <div class="widget-edit-holder grows">
+        <div class="section-header flex-elem">Test Data</div>
+        <div class="widget-test-data flex-elem grows"></div>
+        <div class="section-header flex-elem">Rules</div>
+        <div class="holder widget-rules-w flex-elem grows">
+            <div class="t-widget-rules"></div>
+            <div class="holder add-rule-button-wrapper align-right">
+                <a id="addRule" class="s-button major labeled add-rule-button icon-plus">Add Rule</a>
+            </div>
         </div>
     </div>
 </div>

src/plugins/summaryWidget/src/SummaryWidget.js

@@ -51,7 +51,7 @@ define([
         this.container = '';
         this.editListenerUnsubscribe = $.noop;
 
-        this.ruleArea = $('#ruleArea', this.domElement);
+        this.ruleArea = $('.t-widget-rules', this.domElement);
         this.testDataArea = $('.widget-test-data', this.domElement);
         this.addRuleButton = $('#addRule', this.domElement);
 
@@ -135,22 +135,6 @@ define([
         this.updateView();
     };
 
-    /**
-     * If this view is currently in edit mode, show all rule configuration interfaces.
-     * Otherwise, hide them.
-     */
-    SummaryWidget.prototype.updateView = function () {
-        if (this.editing) {
-            this.ruleArea.show();
-            this.testDataArea.show();
-            this.addRuleButton.show();
-        } else {
-            this.ruleArea.hide();
-            this.testDataArea.hide();
-            this.addRuleButton.hide();
-        }
-    };
-
     /**
      * Update the view from the current rule configuration and order
      */
@@ -210,33 +194,33 @@ define([
     };
 
 
-    /**
-     * Duplicate an existing widget rule from its configuration and splice it in
-     * after the rule it duplicates
-     * @param {Object} sourceConfig The configuration properties of the rule to be
-     *                              instantiated
-     */
-    SummaryWidget.prototype.duplicateRule = function (sourceConfig) {
-        var ruleCount = 0,
-            ruleId,
-            sourceRuleId = sourceConfig.id,
-            ruleOrder = this.domainObject.configuration.ruleOrder,
-            ruleIds = Object.keys(this.rulesById);
-
-        while (ruleIds.includes('rule' + ruleCount)) {
-            ruleCount = ++ruleCount;
-        }
-
-        ruleId = 'rule' + ruleCount;
-        sourceConfig.id = ruleId;
-        sourceConfig.name += ' Copy';
-        ruleOrder.splice(ruleOrder.indexOf(sourceRuleId) + 1, 0, ruleId);
-        this.domainObject.configuration.ruleOrder = ruleOrder;
-        this.domainObject.configuration.ruleConfigById[ruleId] = sourceConfig;
-        this.updateDomainObject();
-        this.initRule(ruleId, sourceConfig.name);
-        this.refreshRules();
-    };
+    /**
+     * Duplicate an existing widget rule from its configuration and splice it in
+     * after the rule it duplicates
+     * @param {Object} sourceConfig The configuration properties of the rule to be
+     *                              instantiated
+     */
+    SummaryWidget.prototype.duplicateRule = function (sourceConfig) {
+        var ruleCount = 0,
+            ruleId,
+            sourceRuleId = sourceConfig.id,
+            ruleOrder = this.domainObject.configuration.ruleOrder,
+            ruleIds = Object.keys(this.rulesById);
+
+        while (ruleIds.includes('rule' + ruleCount)) {
+            ruleCount = ++ruleCount;
+        }
+
+        ruleId = 'rule' + ruleCount;
+        sourceConfig.id = ruleId;
+        sourceConfig.name += ' Copy';
+        ruleOrder.splice(ruleOrder.indexOf(sourceRuleId) + 1, 0, ruleId);
+        this.domainObject.configuration.ruleOrder = ruleOrder;
+        this.domainObject.configuration.ruleConfigById[ruleId] = sourceConfig;
+        this.updateDomainObject();
+        this.initRule(ruleId, sourceConfig.name);
+        this.refreshRules();
+    };
 
     /**
      * Initialze a new rule from a default configuration, or build a {Rule} object