Merge pull request #55 from magento-troll/MAGETWO-44464

[Troll] UI/grid fixes
magento · Oct 30, 2015 · adc0786 · adc0786
2 parents fd7abdf + 77c35b5
commit adc0786
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 91 deletions.
diff --git a/app/code/Magento/Ui/view/base/web/js/grid/columns/onoff.js b/app/code/Magento/Ui/view/base/web/js/grid/columns/onoff.js
@@ -28,30 +28,13 @@ define([
         },
 
         /**
-         * @param {Integer} id
+         * @param {Number} id
          * @returns {*}
          */
         getLabel: function (id) {
             return this.selected.indexOf(id) !== -1 ? $t('On') : $t('Off');
         },
 
-        /**
-         * Initializes components' static properties.
-         *
-         * @returns {Column} Chainable.
-         */
-        initProperties: function () {
-            this.actions = [{
-                value: 'selectPage',
-                label: $t('Select all on this page')
-            }, {
-                value: 'deselectPage',
-                label: $t('Deselect all on this page')
-            }];
-
-            return this._super();
-        },
-
         /**
          * Sets the ids for preselected elements
          * @returns void
@@ -63,7 +46,7 @@ define([
 
             registry.set('position_cache_valid', true);
 
-            if (this.selected().length === this.selectedData.length || positionCacheValid) {
+            if (this.selectedData.length === 0 || positionCacheValid) {
                 return;
             }
             // Check selected data
@@ -76,12 +59,13 @@ define([
             for (i = 0; i < this.selected().length; i++) {
                 key = this.selected()[i];
                 this.selectedData.hasOwnProperty(key) || this.selected.splice(this.selected().indexOf(key), 1);
+                this.selectedData.hasOwnProperty(key) || i--;
             }
         },
 
         /**
          * Show/hide action in the massaction menu
-         * @param {Integer} actionId
+         * @param {Number} actionId
          * @returns {Boolean}
          */
         isActionRelevant: function (actionId) {
@@ -104,7 +88,7 @@ define([
          * Updates values of the 'allSelected'
          * and 'indetermine' properties.
          *
-         * @returns {Multiselect} Chainable.
+         * @returns {Object} Chainable.
          */
         updateState: function () {
             var totalRecords    = this.totalRecords(),

diff --git a/app/code/Magento/Ui/view/base/web/templates/grid/columns/onoff.html b/app/code/Magento/Ui/view/base/web/templates/grid/columns/onoff.html
@@ -8,31 +8,29 @@
 <th class="data-grid-multicheck-cell">
     <label data-bind="i18n: 'Assign'"></label>
     <div
-            class="action-multicheck-wrap"
-            style="width: 3.3rem"
-            data-bind="css: {'_disabled': !totalRecords()}, collapsible">
+        class="action-multicheck-wrap"
+        data-bind="css: {'_disabled': !totalRecords()},
+                   collapsible">
         <input
-                id="mass-select-checkbox"
-                class="admin__control-checkbox"
-                type="checkbox"
-                data-bind="checked: allSelected(),
+            id="mass-select-checkbox"
+            class="admin__control-checkbox"
+            type="checkbox"
+            data-bind="checked: allSelected(),
                        event: { change: toggleSelectAll },
                        css: { '_indeterminate': indetermine },
                        enable: totalRecords">
-        <label for="mass-select-checkbox" class="data-grid-onoff-label">
-            <span data-bind="i18n: 'Select all'"></span>
-        </label>
+        <label for="mass-select-checkbox"></label>
         <button
-                class="action-multicheck-toggle"
-                data-toggle="dropdown"
-                data-bind="css: { '_active': $collapsible.opened },
-                       enable: totalRecords
+            class="action-multicheck-toggle"
+            data-toggle="dropdown"
+            data-bind="css: { '_active': $collapsible.opened },
+                       enable: totalRecords,
                        toggleCollapsible">
             <span data-bind="i18n: 'Options'"></span>
         </button>
         <ul
-                class="action-menu"
-                data-bind="closeCollapsible, foreach: actions">
+            class="action-menu"
+            data-bind="closeCollapsible, foreach: actions">
             <li data-bind="click: $parent[value].bind($parent),
                            visible: $parent.isActionRelevant(value)">
                 <span class="action-menu-item" data-bind="text: label"></span>

diff --git a/...alMerchandiser/web/css/source/module.less → ...lMerchandiser/web/css/source/_module.less b/...alMerchandiser/web/css/source/module.less → ...lMerchandiser/web/css/source/_module.less
@@ -2,19 +2,14 @@
 //  * Copyright © 2015 Magento. All rights reserved.
 //  * See COPYING.txt for license details.
 //  */
-#merchandiser-app {
-    .merchandiser-toolbar {
-        float: right;
-    }
+
+.merchandiser-app {
+    &:extend(.abs-clearfix all);
 
     ul.tabs {
         float: right;
     }
 
-    .clearfix {
-        clear: both;
-    }
-
     #catalog_category_merchandiser {
         div.grid {
             padding: 0;
@@ -30,6 +25,7 @@
     }
 
     .tabs {
+        &:extend(.abs-clearfix all);
         list-style: none;
         overflow: hidden;
         li {
@@ -59,7 +55,7 @@
             height: 340px;
             float: left;
             border: 1px solid #7d7d7d;
-            margin:0 25px 20px 0;
+            margin: 0 25px 20px 0;
             padding: 10px;
             background-color: #fff;
         }
@@ -74,11 +70,11 @@
             a {
                 text-decoration: none;
                 color: #7d7d7d;
-                float:left;
+                float: left;
                 display: inline-block;
             }
             a:last-child {
-                float:right;
+                float: right;
             }
         }
         .info-block {
@@ -92,7 +88,7 @@
                 input {
                     width: 50px;
                     height: 25px;
-                    float:left;
+                    float: left;
                     margin-right: 5px;
                 }
                 a {
@@ -110,22 +106,17 @@
         }
     }
 
+    .draggable-handle {
+        &:extend(.abs-draggable-handle all);
+    }
+
     table.data-grid {
         th.col-draggable-position {
             width: 10px;
             margin: 0 auto 0 auto;
         }
-        td.col-draggable-position span.draggable-handle {
-            width: 8px;
-            height: 14px;
-            line-height: 14px;
-            background: url(../Magento_Backend/images/draggable-handle-vertical.png) no-repeat 0 0;
-            cursor: ns-resize;
-            color: #b2b0ad;
-            display: block;
-        }
         td.col-position {
-            >* {
+            > * {
                 float: left;
                 margin-right: 5px;
             }
@@ -198,42 +189,18 @@
         display: none;
     }
 
-    .smart_category_table {
-        width: 100%;
-        border-collapse:collapse;
-        margin-bottom: 5px;
-        border-spacing:0 5px;
-        overflow: auto;
-        display:block;
-    }
-
-    .smart_category_table tr:nth-of-type(odd) {
-        background:#eee;
-    }
-
-    .smart_category_table th {
-        background: #333;
-        color: white;
-        font-weight: bold;
-    }
-
-    .smart_category_table td, th {
-        padding: 6px;
-        border: 1px solid #ccc;
-        text-align: left;
-    }
     .smart_category {
-        display:block;
-        clear:both;
+        display: block;
+        clear: both;
         margin-bottom: 5px;
     }
 
     .mode_select {
-        float:right;
+        float: right;
     }
 
     .add_product_sku {
-        float:left;
+        float: left;
         display: block;
         margin: 5px;
     }
@@ -242,6 +209,11 @@
         display: block;
         margin: 5px;
     }
+
+    .automatic_sorting {
+        margin-bottom: 5px;
+        margin-top: 5px;
+    }
 }
 
 #catalog_category_add_product_tabs_content {
@@ -252,8 +224,8 @@
     }
     .data-grid-search-control-wrap {
         .massassign_textarea, .massassign_buttons, .massassign_messages {
-            display:block;
-            margin:5px;
+            display: block;
+            margin: 5px;
         }
     }
 }
@@ -265,7 +237,110 @@
         height: 340px;
         float: left;
         border: 1px solid #7d7d7d;
-        margin:0 15px 15px 0;
+        margin: 0 15px 15px 0;
         padding: 10px;
     }
 }
+
+//
+//  Merchandiser manage rools
+//  ---------------------------------------------
+
+.manage-rules-panel {
+    box-sizing: border-box;
+    margin: @indent__base 0 0;
+    .message {
+        margin: 0 0 @indent__base;
+    }
+    .admin__data-grid-wrap {
+        padding-bottom: 0;
+    }
+    .smart-category-table {
+        .action-delete {
+            .action-icon();
+            &:before {
+                &:extend(.abs-icon all);
+                content: @icon-delete__content;
+            }
+            > span {
+                display: none;
+            }
+        }
+    }
+    .hidden {
+        + .action-secondary {
+            margin-top: @indent__base;
+        }
+    }
+}
+
+//
+//  Merchandiser toolbar
+//  ---------------------------------------------
+
+.regular-category-settings {
+    &:extend(.abs-clearfix all);
+    margin: 0 0 @indent__base;
+    .actions {
+        float: right;
+    }
+}
+
+.merchandiser-toolbar {
+    float: left;
+    width: 80%;
+    .admin__field {
+        display: inline-block;
+        margin-right: @indent__s;
+    }
+}
+
+.merchandiser-toolbar,
+.manage-rules-sorting {
+    .admin__field {
+        > .admin__field-label {
+            margin-right: @indent__xs;
+            text-align: left;
+            span {
+                white-space: nowrap;
+            }
+        }
+    }
+}
+
+//
+//  Match products by rule switcher
+//  ---------------------------------------------
+
+//  ToDo UI: refactor when refactoring yes/no switcher
+.smart-category-switcher {
+    &:extend(.abs-clearfix all);
+    margin: 0 0 @indent__base;
+    .actions-switch {
+        display: inline-block;
+        margin-left: @indent__xs;
+        vertical-align: top;
+        .actions-switch-label {
+            width: 35px;
+        }
+        .actions-switch-checkbox {
+            position: absolute;
+            z-index: -1;
+        }
+    }
+}
+
+//
+//  Merchandiser tabs
+//  ---------------------------------------------
+
+//  ToDo UI: refactor merchant tabs
+.merchandiser-tabs {
+    &:extend(.abs-clearfix all);
+    border-top: 1px solid @color-gray80;
+    padding: @indent__base 0 0;
+    .merchandiser-tab {
+        border-top: 0 !important;
+        clear: both;
+    }
+}
diff --git a/app/design/adminhtml/Magento/backend/web/css/source/_actions.less b/app/design/adminhtml/Magento/backend/web/css/source/_actions.less
@@ -12,6 +12,7 @@
 @import 'actions/_actions-select.less';
 @import 'actions/_actions-multicheck.less';
 @import 'actions/_actions-multiselect.less';
+@import 'actions/_actions-switcher.less';
 
 //
 //  Extends

diff --git a/lib/web/css/source/components/_modals.less b/lib/web/css/source/components/_modals.less
@@ -44,7 +44,6 @@
     bottom: 0;
     left: 0;
     min-width: 0;
-    pointer-events: none;
     position: fixed;
     right: 0;
     top: 0;