Merge pull request #295 from magento-webdev/UI

[UI] Sprint 37 + Bugs
magento · May 16, 2015 · 9db84b2 · 9db84b2
2 parents 7b66d72 + 6336192
commit 9db84b2
Show file tree

Hide file tree

Showing 184 changed files with 2,764 additions and 2,389 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -23,17 +23,17 @@ module.exports = function (grunt) {
     require('load-grunt-config')(grunt, {
         configPath: path.join(__dirname, configDir),
         init: true,
-        loadGruntTasks: {
-            pattern: [
-                'grunt-*'
-            ]
+        jitGrunt: {
+            staticMappings: {
+                usebanner: 'grunt-banner'
+            }
         }
     });
 
     _.each({
         /**
          * Assembling tasks.
-         * ToDo UI: define default tasks.
+         * ToDo: define default tasks.
          */
         default: function () {
             grunt.log.subhead('I\'m default task and at the moment I\'m empty, sorry :/');
@@ -43,17 +43,19 @@ module.exports = function (grunt) {
          * Production preparation task.
          */
         prod: function (component) {
-            if (component === 'setup') {
-                grunt.task.run([
-                    'less:' + component,
-                    'autoprefixer:' + component,
-                    'cssmin:' + component,
-                    'usebanner:' + component
-                ]);
-            }
+            var tasks = [
+                'less',
+                'autoprefixer',
+                'cssmin',
+                'usebanner'
+            ].map(function(task){
+                return task + ':' + component;
+            });
 
             if (typeof component === 'undefined') {
                 grunt.log.subhead('Tip: Please make sure that u specify prod subtask. By default prod task do nothing');
+            } else {
+                grunt.task.run(tasks);
             }
         },
 

diff --git a/app/code/Magento/AdminNotification/Block/System/Messages.php b/app/code/Magento/AdminNotification/Block/System/Messages.php
@@ -123,6 +123,7 @@ public function getSystemMessageDialogJson()
                     'autoOpen' => false,
                     'width' => '75%',
                     'modal' => true,
+                    'minHeight' => '0',
                     'dialogClass' => 'ui-dialog-active ui-popup-message',
                     'ajaxUrl' => $this->_getMessagesUrl()
                 ],

diff --git a/app/code/Magento/AdminNotification/view/adminhtml/templates/system/messages/popup.phtml b/app/code/Magento/AdminNotification/view/adminhtml/templates/system/messages/popup.phtml
@@ -31,6 +31,7 @@ require([
             resizable: false,
             width: '75%',
             modal: true,
+            minHeight: '0',
             dialogClass: 'ui-popup-message',
             position: {
                 my: 'left+12.5% top',

diff --git a/app/code/Magento/Backend/Block/Widget/Grid.php b/app/code/Magento/Backend/Block/Widget/Grid.php
@@ -436,12 +436,12 @@ protected function _prepareFilterButtons()
             $this->getLayout()->createBlock(
                 'Magento\Backend\Block\Widget\Button'
             )->setData(
-                ['label' => __('Reset Filter'), 'onclick' => $this->getJsObjectName() . '.resetFilter()', 'class' => 'action-reset']
-            )->setDataAttribute(
                 [
-                    'action' => 'grid-filter-reset'
+                    'label' => __('Reset Filter'),
+                    'onclick' => $this->getJsObjectName() . '.resetFilter()',
+                    'class' => 'action-reset action-tertiary'
                 ]
-            )
+            )->setDataAttribute(['action' => 'grid-filter-reset'])
         );
         $this->setChild(
             'search_button',
@@ -451,13 +451,9 @@ protected function _prepareFilterButtons()
                 [
                     'label' => __('Search'),
                     'onclick' => $this->getJsObjectName() . '.doFilter()',
-                    'class' => 'task',
+                    'class' => 'action-secondary',
                 ]
-            )->setDataAttribute(
-                [
-                    'action' => 'grid-filter-apply'
-                ]
-            )
+            )->setDataAttribute(['action' => 'grid-filter-apply'])
         );
     }
 
@@ -820,8 +816,8 @@ public function getMainButtonsHtml()
     {
         $html = '';
         if ($this->getColumnSet()->isFilterVisible()) {
-            $html .= $this->getResetFilterButtonHtml();
             $html .= $this->getSearchButtonHtml();
+            $html .= $this->getResetFilterButtonHtml();
         }
         return $html;
     }

diff --git a/app/code/Magento/Backend/Block/Widget/Grid/Column/Filter/Date.php b/app/code/Magento/Backend/Block/Widget/Grid/Column/Filter/Date.php
@@ -58,7 +58,7 @@ public function getHtml()
             ' value="' .
             $this->getEscapedValue(
                 'from'
-            ) . '" class="input-text no-changes" placeholder="' . __(
+            ) . '" class="admin__control-text input-text no-changes" placeholder="' . __(
                 'From'
             ) . '" ' . $this->getUiId(
                 'filter',
@@ -74,7 +74,7 @@ public function getHtml()
             ' value="' .
             $this->getEscapedValue(
                 'to'
-            ) . '" class="input-text no-changes" placeholder="' . __(
+            ) . '" class="input-text admin__control-text no-changes" placeholder="' . __(
                 'To'
             ) . '" ' . $this->getUiId(
                 'filter',

diff --git a/app/code/Magento/Backend/Block/Widget/Grid/Column/Filter/Select.php b/app/code/Magento/Backend/Block/Widget/Grid/Column/Filter/Select.php
@@ -66,7 +66,7 @@ public function getHtml()
         $html = '<select name="' . $this->_getHtmlName() . '" id="' . $this->_getHtmlId() . '"' . $this->getUiId(
             'filter',
             $this->_getHtmlName()
-        ) . 'class="admin__control-select no-changes">';
+        ) . 'class="no-changes admin__control-select">';
         $value = $this->getValue();
         foreach ($this->_getOptions() as $option) {
             if (is_array($option['value'])) {

diff --git a/app/code/Magento/Backend/Block/Widget/Grid/Column/Filter/Text.php b/app/code/Magento/Backend/Block/Widget/Grid/Column/Filter/Text.php
@@ -17,7 +17,7 @@ class Text extends \Magento\Backend\Block\Widget\Grid\Column\Filter\AbstractFilt
      */
     public function getHtml()
     {
-        $html = '<div class="field-100"><input type="text" name="' .
+        $html = '<input type="text" name="' .
             $this->_getHtmlName() .
             '" id="' .
             $this->_getHtmlId() .
@@ -27,7 +27,7 @@ public function getHtml()
             $this->getUiId(
                 'filter',
                 $this->_getHtmlName()
-            ) . ' /></div>';
+            ) . ' />';
         return $html;
     }
 }
diff --git a/app/code/Magento/Backend/Block/Widget/Grid/Column/Renderer/AbstractRenderer.php b/app/code/Magento/Backend/Block/Widget/Grid/Column/Renderer/AbstractRenderer.php
@@ -52,10 +52,9 @@ public function render(Object $row)
     {
         if ($this->getColumn()->getEditable()) {
             $value = $this->_getValue($row);
-            return $value . ($this->getColumn()->getEditOnly() ? '' : ($value !=
-                '' ? '' : '&nbsp;')) . $this->_getInputValueElement(
-                    $row
-                );
+            return '<div class="admin__grid-control">' .
+            '<span class="admin__grid-control-value">' . $value . '</span>' .
+            $this->_getInputValueElement($row) . '</div>' ;
         }
         return $this->_getValue($row);
     }
@@ -123,26 +122,23 @@ public function renderHeader()
             $dir = strtolower($this->getColumn()->getDir());
             $nDir = $dir == 'asc' ? 'desc' : 'asc';
             if ($this->getColumn()->getDir()) {
-                $className = 'sort-arrow-' . $dir;
+                $className = '_' . $dir . 'end';
             }
-            $out = '<a href="#" name="' .
+            $out = '<th data-sort="' .
                 $this->getColumn()->getId() .
-                '" title="' .
+                '" data-direction="' .
                 $nDir .
-                '" class="' .
-                $className .
-                '">' .
-                '<label class="sort-title" for=' .
-                $this->getColumn()->getHtmlId() .
-                '>' .
+                '" class="data-grid-th _sortable ' .
+                $className . ' ' .
+                $this->getColumn()->getHeaderCssClass() .
+                '"><span>' .
                 $this->getColumn()->getHeader() .
-                '</label></a>';
+                '</span></th>';
         } else {
-            $out = '<label for=' .
-                $this->getColumn()->getHtmlId() .
-                '>' .
+            $out = '<th class="data-grid-th ' .
+                $this->getColumn()->getHeaderCssClass() . '"><span>' .
                 $this->getColumn()->getHeader() .
-                '</label>';
+                '</span></th>';
         }
         return $out;
     }

diff --git a/app/code/Magento/Backend/Block/Widget/Grid/Column/Renderer/Action.php b/app/code/Magento/Backend/Block/Widget/Grid/Column/Renderer/Action.php
@@ -55,7 +55,7 @@ public function render(\Magento\Framework\Object $row)
             }
         }
 
-        $out = '<select class="action-select" onchange="varienGridAction.execute(this);">' .
+        $out = '<select class="admin__control-select" onchange="varienGridAction.execute(this);">' .
             '<option value=""></option>';
         $i = 0;
         foreach ($actions as $action) {

diff --git a/app/code/Magento/Backend/Block/Widget/Grid/Column/Renderer/Checkbox.php b/app/code/Magento/Backend/Block/Widget/Grid/Column/Renderer/Checkbox.php
@@ -141,11 +141,11 @@ public function renderHeader()
         if ($this->getColumn()->getDisabled()) {
             $disabled = ' disabled="disabled"';
         }
-        $html = '<input type="checkbox" ';
+        $html = '<th class="data-grid-th data-grid-actions-cell"><input type="checkbox" ';
         $html .= 'name="' . $this->getColumn()->getFieldName() . '" ';
         $html .= 'onclick="' . $this->getColumn()->getGrid()->getJsObjectName() . '.checkCheckboxes(this)" ';
-        $html .= 'class="checkbox"' . $checked . $disabled . ' ';
-        $html .= 'title="' . __('Select All') . '"/>';
+        $html .= 'class="admin__control-checkbox"' . $checked . $disabled . ' ';
+        $html .= 'title="' . __('Select All') . '"/><label></label></th>';
         return $html;
     }
 }
diff --git a/app/code/Magento/Backend/Block/Widget/Grid/Column/Renderer/Massaction.php b/app/code/Magento/Backend/Block/Widget/Grid/Column/Renderer/Massaction.php
@@ -63,8 +63,12 @@ public function render(\Magento\Framework\Object $row)
      */
     protected function _getCheckboxHtml($value, $checked)
     {
-        $html = '<input type="checkbox" name="' . $this->getColumn()->getName() . '" ';
-        $html .= 'value="' . $this->escapeHtml($value) . '" class="massaction-checkbox"' . $checked . '/>';
+        $id = 'id_' . rand(0, 999);
+        $html = '<label class="data-grid-checkbox-cell-inner" for="'. $id .'">';
+        $html .= '<input type="checkbox" name="' . $this->getColumn()->getName() . '" ';
+        $html .= 'id="' . $id . '" data-role="select-row"';
+        $html .= 'value="' . $this->escapeHtml($value) . '" class="admin__control-checkbox"' . $checked . '/>';
+        $html .= '<label for="'. $id .'"></label></label>';
         return $html;
     }
 }
diff --git a/app/code/Magento/Backend/Block/Widget/Grid/Extended.php b/app/code/Magento/Backend/Block/Widget/Grid/Extended.php
@@ -206,7 +206,7 @@ protected function _prepareLayout()
                 [
                     'label' => __('Reset Filter'),
                     'onclick' => $this->getJsObjectName() . '.resetFilter()',
-                    'class' => 'action-reset'
+                    'class' => 'action-reset action-tertiary'
                 ]
             )->setDataAttribute(
                 [
@@ -220,7 +220,7 @@ protected function _prepareLayout()
                 [
                     'label' => __('Search'),
                     'onclick' => $this->getJsObjectName() . '.doFilter()',
-                    'class' => 'task',
+                    'class' => 'task action-secondary',
                 ]
             )->setDataAttribute(
                 [
@@ -1302,8 +1302,8 @@ public function getMainButtonsHtml()
     {
         $html = '';
         if ($this->getFilterVisibility()) {
-            $html .= $this->getResetFilterButtonHtml();
             $html .= $this->getSearchButtonHtml();
+            $html .= $this->getResetFilterButtonHtml();
         }
         return $html;
     }

diff --git a/app/code/Magento/Backend/view/adminhtml/templates/dashboard/grid.phtml b/app/code/Magento/Backend/view/adminhtml/templates/dashboard/grid.phtml
@@ -25,7 +25,7 @@ $numColumns = sizeof($block->getColumns());
                 <?php if ($block->getHeadersVisibility()): ?>
                     <tr>
                         <?php foreach ($block->getColumns() as $_column): ?>
-                            <th <?php echo $_column->getHeaderHtmlProperty() ?>><?php echo $_column->getHeaderHtml() ?></th>
+                            <?php echo $_column->getHeaderHtml() ?>
                         <?php endforeach; ?>
                     </tr>
                 <?php endif; ?>

diff --git a/app/code/Magento/Backend/view/adminhtml/templates/system/cache/edit.phtml b/app/code/Magento/Backend/view/adminhtml/templates/system/cache/edit.phtml
@@ -37,7 +37,7 @@
             <h4 class="icon-head head-edit-form fieldset-legend"><?php echo __('Catalog') ?></h4>
         </div>
         <fieldset id="catalog">
-            <table cellspacing="0" class="form-list">
+            <table class="form-list">
                 <tbody>
                     <?php foreach ($block->getCatalogData() as $_item): ?>
                     <?php /* disable reindex buttons. functionality moved to index management*/?>
@@ -70,7 +70,7 @@
         </div>
 
         <fieldset id="jscss">
-            <table cellspacing="0" class="form-list">
+            <table class="form-list">
                 <tbody>
                     <tr>
                         <td class="label"><label><?php echo __('JavaScript/CSS Cache') ?></label></td>

diff --git a/app/code/Magento/Backend/view/adminhtml/templates/system/info.phtml b/app/code/Magento/Backend/view/adminhtml/templates/system/info.phtml
@@ -24,7 +24,7 @@
             <dl class="grid accordion">
                 <dt><a href="#">Sales Statistics</a></dt>
                 <dd class="open grid">
-                    <table cellspacing="0" class="data">
+                    <table class="data">
                         <thead>
                             <tr>
                                 <th>Store</th>
@@ -60,7 +60,7 @@
         <dl class="accordion">
             <dt><a href="#">Last 5 Orders</a></dt>
             <dd class="grid open">
-                <table cellspacing="0" class="data">
+                <table class="data">
                     <thead>
                         <tr>
                             <th>Order #</th>

diff --git a/app/code/Magento/Backend/view/adminhtml/templates/widget/form/renderer/fieldset.phtml b/app/code/Magento/Backend/view/adminhtml/templates/widget/form/renderer/fieldset.phtml
@@ -38,11 +38,13 @@ if ($isField) {
 */ ?>
 
 <?php if ($isWrapped): ?>
-    <div class="fieldset-wrapper <?php echo($isCollapsable) ? 'collapsable-wrapper ' : ''; ?>"
+    <div class="fieldset-wrapper <?php echo($isCollapsable) ? 'admin__collapsible-block-wrapper ' : ''; ?>"
         id="<?php echo $containerId ? $containerId : $id . '-wrapper';?>"
         data-role="<?php echo $id ?>-wrapper">
         <div class="fieldset-wrapper-title admin__fieldset-wrapper-title">
-            <strong class="title"<?php echo($isCollapsable) ? ' data-toggle="collapse" data-target="#' . $id . '-content"' : ''; ?>>
+            <strong <?php echo($isCollapsable) ?
+                'class="admin__collapsible-title" data-toggle="collapse" data-target="#' . $id . '-content"' :
+                'class="title"'; ?>>
                 <span><?php echo $element->getLegend() ?></span>
             </strong>
             <?php echo $titleActions; ?>