[Kimchi-devel] [PATCH v3] [Wok] Changes in wok.list.js widget to allow multiple selection

sguimaraes943 at gmail.com sguimaraes943 at gmail.com
Thu Apr 28 13:33:49 UTC 2016


From: Samuel Guimarães <sguimaraes943 at gmail.com>

This commit enables multiple selection with wok.list.js widget. It also features some enhancements for mobile and keyboard navigation.

Signed-off-by: Samuel Guimarães <sguimaraes943 at gmail.com>
---
 ui/css/bootstrap.custom.css            |   8 +-
 ui/css/src/modules/_buttons.scss       |   8 ++
 ui/css/src/modules/_wok-forms.scss     |   1 +
 ui/css/src/modules/_wok-grid.scss      | 250 +++++++++++++++++++++++++++-----
 ui/css/src/modules/_wok-variables.scss |   4 +-
 ui/css/wok.css                         | 254 ++++++++++++++++++++++++++++-----
 ui/js/src/wok.list.js                  | 174 +++++++++++-----------
 7 files changed, 531 insertions(+), 168 deletions(-)

diff --git a/ui/css/bootstrap.custom.css b/ui/css/bootstrap.custom.css
index 13869da..c69939c 100644
--- a/ui/css/bootstrap.custom.css
+++ b/ui/css/bootstrap.custom.css
@@ -2996,7 +2996,7 @@ fieldset[disabled] .btn-link:focus {
 }
 
 .btn-xs, .btn-group-xs > .btn {
-  padding: 1px 5px;
+  padding: 2px 10px;
   font-size: 12px;
   line-height: 1.5;
   border-radius: 3px;
@@ -3460,9 +3460,9 @@ tbody.collapse.in {
   display: table-cell;
 }
 
-.input-group-addon:not(:first-child):not(:last-child),
-.input-group-btn:not(:first-child):not(:last-child),
-.input-group .form-control:not(:first-child):not(:last-child) {
+.input-group-addon:not(:first-child, :first-child, :first-child):not(:last-child, :last-child, :last-child),
+.input-group-btn:not(:first-child, :first-child, :first-child):not(:last-child, :last-child, :last-child),
+.input-group .form-control:not(:first-child, :first-child, :first-child):not(:last-child, :last-child, :last-child) {
   border-radius: 0;
 }
 
diff --git a/ui/css/src/modules/_buttons.scss b/ui/css/src/modules/_buttons.scss
index 85d9531..077a21f 100644
--- a/ui/css/src/modules/_buttons.scss
+++ b/ui/css/src/modules/_buttons.scss
@@ -23,6 +23,14 @@
     font-size: 13pt;
 }
 
+.btn-xs, .btn-group-xs > .btn {
+    font-size: 10.5pt;
+}
+
+.btn-sm, .btn-group-sm > .btn  {
+    font-size: 11.5pt;
+}
+
 .btn-login {
   @include button-variant($btn-login-color, $btn-login-bg, $btn-login-border);
 }
\ No newline at end of file
diff --git a/ui/css/src/modules/_wok-forms.scss b/ui/css/src/modules/_wok-forms.scss
index d426a60..c3f722a 100644
--- a/ui/css/src/modules/_wok-forms.scss
+++ b/ui/css/src/modules/_wok-forms.scss
@@ -75,6 +75,7 @@ input[type=checkbox].wok-checkbox + label:before {
 input[type=checkbox].wok-checkbox:checked + label:before {
     content: "\f14a";
     letter-spacing: 8px;
+    margin-right: 0.9px // Sub-pixel unit for Chrome and Firefox anti-alias
 }
 
 input[type=radio].wok-radio + label:before {
diff --git a/ui/css/src/modules/_wok-grid.scss b/ui/css/src/modules/_wok-grid.scss
index 730d224..152811d 100644
--- a/ui/css/src/modules/_wok-grid.scss
+++ b/ui/css/src/modules/_wok-grid.scss
@@ -36,23 +36,17 @@
     top: 37px !important;
 }
 
-.wok-list-cell {
-    position: relative;
-    padding-left: 45px;
+.wok-list-content {
+    border-top: 1px solid $table-first-row-border-color;
 }
 
-.wok-repository-status {
-    position: absolute;
-    left: 6px;
-    top: 0;
-}
-
-.wok-repository-status .fa {
-    font-size: 23px;
-    color: $fa-green;
+.wok-list-cell {
+    position: relative;
+    padding-left: 10px;
 }
 
-.wok-list-name, .wok-list-description {
+.wok-list-name,
+.wok-list-description {
     display: block;
 }
 
@@ -67,47 +61,231 @@
     overflow: hidden;
 }
 
-.wok-list-content tbody tr,  .wok-list-content tbody tr * {
+.wok-list-item-status {
+    float: left;
+    margin-top: 12px;
+    margin-right: 8px;
+    margin-bottom: 6px;
+    height: 25px;
+}
+
+.wok-list-item-status > .fa {
+    font-size: 23px;
+    color: $fa-green;
+}
+
+.wok-list-item-status.disabled > .fa:before {
+    display: block;
+    width: 19px;
+    height: 23px;
+    padding: 0;
+    border: 0;
+    content: "";
+}
+
+.wok-list-cell.disabled span {
+    color: $gray-light;
+}
+
+.wok-list-action-button-container {
+    padding-bottom: 16px;
+}
+
+.wok-list-loading-icon-inline {
+    background: transparent url('#{$wok-icon-path}/spin5.svg') no-repeat 50% 50%;
+    @include animation(spin 3s infinite linear);
+    height: 16px;
+    width: 16px;
+    background-size: 100%;
+    display: none;
+    position: absolute;
+}
+
+.generating .wok-list-description {
+    padding-left: 24px;
+}
+
+.generating .wok-list-loading-icon-inline {
+    display: block;
+    position: absolute;
+    top: 27px;
+    left: 14px;
+}
+
+.wok-list > ul {
+    list-style: none;
+    padding: 0;
+}
+
+.wok-list > ul > li,
+.wok-list > ul > li * {
     @include user-select(none);
 }
 
-.wok-list-content tbody tr:hover {
+.wok-list > ul > li,
+.wok-list > ul > li > label {
+    width: 100%;
+}
+
+.wok-list > ul > li {
+    border-top: 1px solid $table-border-color;
+    background: $table-bg;
+    position: relative;
+    @include transition(background .1s ease-in-out);
+}
+
+.wok-list > ul > li:first-child {
+    border: 0;
+}
+
+.wok-list > ul > li:nth-of-type(even) {
+    background: $table-bg-accent;
+}
+
+.wok-list  > ul > li.selected {
+    background: $table-bg-hover;
+}
+
+.wok-list > ul > li > label {
+    cursor: pointer !important;
+    text-decoration: none;
+    margin-bottom: 0;
+    padding-bottom: 5px;
+}
+
+.wok-list > ul > li > label:hover {
     text-decoration: underline;
-    cursor: pointer;
 }
 
-.wok-list-content tbody tr.generating:hover {
+.wok-list > ul > li.generating > label:hover {
     text-decoration: none;
     cursor: default;
 }
 
-.wok-list-content tbody tr.selected {
-    background: #ddd;
+.wok-list > ul > li > input[type=checkbox] {
+    left: -15px;
 }
 
-span.wok-repository-status.disabled {
-    display: none;
+.wok-list > ul > li > input[type=checkbox].wok-checkbox + label:before {
+    float: left;
+    height: 30px;
+    margin-top: 13px;
 }
 
-.wok-list-cell.disabled span {
-    color: #999;
+// Mobile first
+
+.wok-list-action-button-container {
+    background: $body-bg;
+    z-index: 1;
+    position: relative;
+    @include box-shadow(0 20px 20px -20px rgba(0,0,0,.4));
 }
 
-.wok-single-button {
-    padding-bottom: 16px;
-    margin-top: -11px;
+.mobile-action {
+    width: 100%;
 }
 
-.generating .wok-list-description {
-    padding-left: 24px;
+.mobile-action .btn {
+    width: 100%;
+    height: 40px;
+    border-radius: 0;
 }
 
-.generating .wok-list-loading-icon-inline {
-    background: transparent url('#{$wok-icon-path}/spin5.svg') no-repeat 50% 50%;
-    @include animation(spin 3s infinite linear);
-    height: 16px;
-    width: 16px;
-    background-size: 100%;
-    display: block;
-    position: absolute;
+.mobile-action > .btn {
+    border-radius: $border-radius-base;
 }
+
+.mobile-action.open > .btn {
+    border-radius: $border-radius-base $border-radius-base 0 0;
+}
+
+.mobile-action .btn span.mobile-action-label {
+    font-weight: 600;
+}
+
+.mobile-action .btn span.mobile-action-count {
+    font-weight: 300;
+}
+
+.mobile-action .btn span.mobile-action-count strong {
+    font-weight: 600;
+    font-size: 11pt;
+}
+
+.mobile-action .dropdown-menu {
+    width: 100%;
+    border: 0;
+    box-shadow: none;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    border-radius: 0;
+}
+
+.mobile-action.open .dropdown-menu .btn {
+    border-radius: 0;
+}
+
+.mobile-action.open .dropdown-menu li:last-child .btn {
+    border-radius: 0 0 $border-radius-base $border-radius-base;
+}
+
+.mobile-action .dropdown-menu li > .btn.disabled,
+.mobile-action .dropdown-menu li > .btn[disabled] {
+    opacity: 1;
+    background: #585758;
+    border-color: #585758;
+    color: #ddd;
+}
+
+// Reset Mobile styles to mimic desktop when min-width is bigger than 768px wide
+
+ at media (min-width: $screen-md-min) {
+
+    .wok-list-action-button-container {
+        @include box-shadow(none);
+    }
+
+    .wok-list-action-button-container .dropdown-toggle {
+        display: none;
+    }
+
+    .wok-list-action-button-container .mobile-action {
+        position: static;
+        height: 40px;
+    }
+
+    .wok-list-action-button-container .mobile-action .btn {
+        width: auto;
+    }
+
+    .wok-list-action-button-container .mobile-action li:first-child .btn {
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+    }
+
+
+    .wok-list-action-button-container .mobile-action li:last-child .btn {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0 !important;
+        border-top-right-radius: $border-radius-base !important;
+        border-bottom-right-radius: $border-radius-base;
+    }
+
+    .wok-list-action-button-container > .dropdown.mobile-action > .dropdown-menu {
+        display: block;
+        vertical-align: middle;
+        position: absolute;
+        top: 0;
+    }
+
+    .wok-list-action-button-container > .dropdown.mobile-action > .dropdown-menu > li {
+        display: inline-block;
+    }
+
+    .wok-list > ul > li > input[type=checkbox].wok-checkbox:focus + label {
+        outline: auto 5px $input-border-focus; // Accessibility
+        outline: auto 5px -webkit-focus-ring-color; // Set default webkit focus ring color for webkit browsers
+    }
+
+}
\ No newline at end of file
diff --git a/ui/css/src/modules/_wok-variables.scss b/ui/css/src/modules/_wok-variables.scss
index 9f53cb2..c58feba 100644
--- a/ui/css/src/modules/_wok-variables.scss
+++ b/ui/css/src/modules/_wok-variables.scss
@@ -164,8 +164,8 @@ $padding-large-horizontal:  16px !default;
 $padding-small-vertical:    5px !default;
 $padding-small-horizontal:  10px !default;
 
-$padding-xs-vertical:       1px !default;
-$padding-xs-horizontal:     5px !default;
+$padding-xs-vertical:       2px !default;
+$padding-xs-horizontal:     10px !default;
 
 $line-height-large:         1.3333333 !default; // extra decimals for Win 8.1 Chrome
 $line-height-small:         1.5 !default;
diff --git a/ui/css/wok.css b/ui/css/wok.css
index 615cdea..d296167 100644
--- a/ui/css/wok.css
+++ b/ui/css/wok.css
@@ -336,6 +336,14 @@ body {
   font-size: 13pt;
 }
 
+.btn-xs, .btn-group-xs > .btn {
+  font-size: 10.5pt;
+}
+
+.btn-sm, .btn-group-sm > .btn {
+  font-size: 11.5pt;
+}
+
 .btn-login {
   color: #fff;
   background-color: #008abf;
@@ -676,23 +684,17 @@ fieldset[disabled] .btn-login.active {
   top: 37px !important;
 }
 
-.wok-list-cell {
-  position: relative;
-  padding-left: 45px;
+.wok-list-content {
+  border-top: 1px solid #e3e3e3;
 }
 
-.wok-repository-status {
-  position: absolute;
-  left: 6px;
-  top: 0;
-}
-
-.wok-repository-status .fa {
-  font-size: 23px;
-  color: #a8d46f;
+.wok-list-cell {
+  position: relative;
+  padding-left: 10px;
 }
 
-.wok-list-name, .wok-list-description {
+.wok-list-name,
+.wok-list-description {
   display: block;
 }
 
@@ -707,54 +709,227 @@ fieldset[disabled] .btn-login.active {
   overflow: hidden;
 }
 
-.wok-list-content tbody tr, .wok-list-content tbody tr * {
+.wok-list-item-status {
+  float: left;
+  margin-top: 12px;
+  margin-right: 8px;
+  margin-bottom: 6px;
+  height: 25px;
+}
+
+.wok-list-item-status > .fa {
+  font-size: 23px;
+  color: #a8d46f;
+}
+
+.wok-list-item-status.disabled > .fa:before {
+  display: block;
+  width: 19px;
+  height: 23px;
+  padding: 0;
+  border: 0;
+  content: "";
+}
+
+.wok-list-cell.disabled span {
+  color: #999;
+}
+
+.wok-list-action-button-container {
+  padding-bottom: 16px;
+}
+
+.wok-list-loading-icon-inline {
+  background: transparent url("/images/theme-default/spin5.svg") no-repeat 50% 50%;
+  -webkit-animation: spin 3s infinite linear;
+  -o-animation: spin 3s infinite linear;
+  animation: spin 3s infinite linear;
+  height: 16px;
+  width: 16px;
+  background-size: 100%;
+  display: none;
+  position: absolute;
+}
+
+.generating .wok-list-description {
+  padding-left: 24px;
+}
+
+.generating .wok-list-loading-icon-inline {
+  display: block;
+  position: absolute;
+  top: 27px;
+  left: 14px;
+}
+
+.wok-list > ul {
+  list-style: none;
+  padding: 0;
+}
+
+.wok-list > ul > li,
+.wok-list > ul > li * {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
-.wok-list-content tbody tr:hover {
+.wok-list > ul > li,
+.wok-list > ul > li > label {
+  width: 100%;
+}
+
+.wok-list > ul > li {
+  border-top: 1px solid #eee;
+  background: #fff;
+  position: relative;
+  -webkit-transition: background 0.1s ease-in-out;
+  -o-transition: background 0.1s ease-in-out;
+  transition: background 0.1s ease-in-out;
+}
+
+.wok-list > ul > li:first-child {
+  border: 0;
+}
+
+.wok-list > ul > li:nth-of-type(even) {
+  background: #fcfcfc;
+}
+
+.wok-list > ul > li.selected {
+  background: #ddd;
+}
+
+.wok-list > ul > li > label {
+  cursor: pointer !important;
+  text-decoration: none;
+  margin-bottom: 0;
+  padding-bottom: 5px;
+}
+
+.wok-list > ul > li > label:hover {
   text-decoration: underline;
-  cursor: pointer;
 }
 
-.wok-list-content tbody tr.generating:hover {
+.wok-list > ul > li.generating > label:hover {
   text-decoration: none;
   cursor: default;
 }
 
-.wok-list-content tbody tr.selected {
-  background: #ddd;
+.wok-list > ul > li > input[type=checkbox] {
+  left: -15px;
 }
 
-span.wok-repository-status.disabled {
-  display: none;
+.wok-list > ul > li > input[type=checkbox].wok-checkbox + label:before {
+  float: left;
+  height: 30px;
+  margin-top: 13px;
 }
 
-.wok-list-cell.disabled span {
-  color: #999;
+.wok-list-action-button-container {
+  background: #fff;
+  z-index: 1;
+  position: relative;
+  -webkit-box-shadow: 0 20px 20px -20px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 20px 20px -20px rgba(0, 0, 0, 0.4);
 }
 
-.wok-single-button {
-  padding-bottom: 16px;
-  margin-top: -11px;
+.mobile-action {
+  width: 100%;
 }
 
-.generating .wok-list-description {
-  padding-left: 24px;
+.mobile-action .btn {
+  width: 100%;
+  height: 40px;
+  border-radius: 0;
 }
 
-.generating .wok-list-loading-icon-inline {
-  background: transparent url("/images/theme-default/spin5.svg") no-repeat 50% 50%;
-  -webkit-animation: spin 3s infinite linear;
-  -o-animation: spin 3s infinite linear;
-  animation: spin 3s infinite linear;
-  height: 16px;
-  width: 16px;
-  background-size: 100%;
-  display: block;
-  position: absolute;
+.mobile-action > .btn {
+  border-radius: 3px;
+}
+
+.mobile-action.open > .btn {
+  border-radius: 3px 3px 0 0;
+}
+
+.mobile-action .btn span.mobile-action-label {
+  font-weight: 600;
+}
+
+.mobile-action .btn span.mobile-action-count {
+  font-weight: 300;
+}
+
+.mobile-action .btn span.mobile-action-count strong {
+  font-weight: 600;
+  font-size: 11pt;
+}
+
+.mobile-action .dropdown-menu {
+  width: 100%;
+  border: 0;
+  box-shadow: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  border-radius: 0;
+}
+
+.mobile-action.open .dropdown-menu .btn {
+  border-radius: 0;
+}
+
+.mobile-action.open .dropdown-menu li:last-child .btn {
+  border-radius: 0 0 3px 3px;
+}
+
+.mobile-action .dropdown-menu li > .btn.disabled,
+.mobile-action .dropdown-menu li > .btn[disabled] {
+  opacity: 1;
+  background: #585758;
+  border-color: #585758;
+  color: #ddd;
+}
+
+ at media (min-width: 992px) {
+  .wok-list-action-button-container {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+  .wok-list-action-button-container .dropdown-toggle {
+    display: none;
+  }
+  .wok-list-action-button-container .mobile-action {
+    position: static;
+    height: 40px;
+  }
+  .wok-list-action-button-container .mobile-action .btn {
+    width: auto;
+  }
+  .wok-list-action-button-container .mobile-action li:first-child .btn {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .wok-list-action-button-container .mobile-action li:last-child .btn {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0 !important;
+    border-top-right-radius: 3px !important;
+    border-bottom-right-radius: 3px;
+  }
+  .wok-list-action-button-container > .dropdown.mobile-action > .dropdown-menu {
+    display: block;
+    vertical-align: middle;
+    position: absolute;
+    top: 0;
+  }
+  .wok-list-action-button-container > .dropdown.mobile-action > .dropdown-menu > li {
+    display: inline-block;
+  }
+  .wok-list > ul > li > input[type=checkbox].wok-checkbox:focus + label {
+    outline: auto 5px #66afe9;
+    outline: auto 5px -webkit-focus-ring-color;
+  }
 }
 
 .grid-control {
@@ -948,6 +1123,7 @@ input[type=checkbox].wok-checkbox + label:before {
 input[type=checkbox].wok-checkbox:checked + label:before {
   content: "\f14a";
   letter-spacing: 8px;
+  margin-right: 0.9px;
 }
 
 input[type=radio].wok-radio + label:before {
@@ -1105,7 +1281,7 @@ input[type=radio].wok-radio + label {
 /*
 * Project Wok
 *
-* Copyright IBM Corp, 2015-2016
+* Copyright IBM Corp, 2016
 *
 * Code derived from Project Kimchi
 *
diff --git a/ui/js/src/wok.list.js b/ui/js/src/wok.list.js
index 7d8e27c..f40b2e2 100644
--- a/ui/js/src/wok.list.js
+++ b/ui/js/src/wok.list.js
@@ -24,6 +24,7 @@ wok.widget.List = function(opts) {
 
 wok.widget.List.prototype = (function() {
     "use strict";
+
     var htmlStr = [
         '<div id="{id}-section" class="panel panel-default">',
             '<div class="panel-heading">',
@@ -39,13 +40,19 @@ wok.widget.List.prototype = (function() {
                             '</button></p>',
                         '</div>',
                     '</div>',
-                    '<div id="{id}-btn-group" class="btn-group wok-single-button hidden">',
-
+                    '<div id="{id}-action-group" class="wok-list-action-button-container">',
+                        '<div class="dropdown mobile-action">',
+                            '<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">',
+                                '<span class="mobile-action-label">Actions</span>', // TODO: Replace with i18n string
+                            '</button>',
+                            '<ul class="dropdown-menu" role="menu">',
+                            '</ul>',
+                        '</div>',
                     '</div>',
                     '<div id="{id}" class="row clearfix">',
                         '<div class="wok-list-content">',
-                            '<table class="wok-list-table table table-striped" id="list">',
-                            '</table>',
+                            '<div class="wok-list" id="list">',
+                            '</div>',
                         '</div>',
                     '</div>',
                     '<div class="wok-list-mask hidden">',
@@ -80,112 +87,95 @@ wok.widget.List.prototype = (function() {
         return (result);
     };
 
-
-    var fillButton = function(btnContainer){
-        var addOrGenerateBtn = this.opts.toolbarButtons[0];
-        var singleBtnHTML = [
-                '<a class="btn btn-primary" href="#"', (addOrGenerateBtn.id ? (' id="' + addOrGenerateBtn.id + '"') : ''),' role="button">',
-                    addOrGenerateBtn.class ? ('<i class="' + addOrGenerateBtn.class) + '"></i> ' : '',
-                    addOrGenerateBtn.label,
-                '</a>'
-            ].join('');
-            var singleBtn = $(singleBtnHTML).appendTo(btnContainer);
-            $(singleBtn).click(function(e) {
-              e.preventDefault();
-            });
-            addOrGenerateBtn.onClick && singleBtn.on('click', addOrGenerateBtn.onClick);
+    var fillButtons = function(btnContainer){
+        var toolbarButtons = this.opts.toolbarButtons;
+        $.each(toolbarButtons, function(i, button) {
+                var btnHTML = [
+                    '<li class="',
+                    (button.critical === true ? 'critical' : ''),
+                    ,'">',
+                        '<btn data-dismiss="modal"',
+                        (button.id ? (' id="' + button.id + '"') : ''),
+                        ' class="btn btn-primary"',
+                        (button.disabled === true ? ' disabled="disabled"' : ''),
+                        '">',
+                            button.class ? ('<i class="' + button.class) + '"></i> ' : ' ',
+                            button.label,
+                        '</btn>',
+                    '</li>'
+                ].join('');
+                var btnNode = $(btnHTML).appendTo(btnContainer);
+                button.onClick && btnNode.on('click', button.onClick);
+        });
     };
 
     var fillBody = function(container, fields) {
-
-        var toolbarButtons = this.opts.toolbarButtons;
-        var actionDropdownHtml;
         var data = this.data;
-        var tbody = ($('tbody', container).length && $('tbody', container)) || $('<tbody></tbody>').appendTo(container);
+        var tbody = ($('ul', container).length && $('ul', container)) || $('<ul></ul>').appendTo(container);
         tbody.empty();
         if (typeof data !== 'undefined' && data.length > 0) {
             $.each(data, function(i, row) {
-                var rowNode = $('<tr></tr>').appendTo(tbody);
+                var rowNode = $('<li></li>').appendTo(tbody);
                 var columnNodeHTML;
                 var columnData = '';
                 var state = '';
                 var styleClass = '';
-                if (toolbarButtons) {
-                    actionDropdownHtml = [
-                        '<td>',
-                            '<div class="dropdown menu-flat">',
-                                '<button id="wok-dropdown-button-', i, '" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">',
-                                    '<span class="edit-alt"></span>Actions<span class="caret"></span>',
-                                '</button>',
-                                '<ul class="dropdown-menu" role="menu" aria-labelledby="action-dropdown-menu-', i, '">',
-                                '</ul>',
-                            '</div>',
-                        '</td>'
-                    ].join('');
-                }
+                var checkboxName = $('ul', container).parent().parent().parent().attr('id') + '-check' || $(container).parent().parent().parent().attr('id') + '-check';
                 $.each(fields, function(fi, field) {
                     var value = getValue(field.name, row);
                     if (field.type === 'status' && field.name === 'enabled') {
                         styleClass = (value === true ? '' : ' disabled');
                         state = [
-                            '<span class="wok-repository-status ',
+                            '<span class="wok-list-item-status ',
                             value === true ? 'enabled' : 'disabled',
-                            '"><i class="fa fa-power-off"></i></span>'
+                            '"><i class="fa fa-power-off"></i><span class="sr-only">',
+                            value === true ? 'Enabled' : 'Disabled',
+                            '</span></span>'
                         ].join('');
                     }
-                    columnData += (field.type === 'name') ? ('<span class="wok-list-name">' + value.toString() + '</span>') : (field.type !== 'status' ? '<span class="wok-list-loading-icon-inline"></span><span class="wok-list-description">' + value.toString() + '</span>' : '');
-
-                });
-                columnNodeHTML = [
-                    '<td>',
-                        '<div class="wok-list-cell', styleClass, '">', state,
-                            columnData,
-                        '</div>',
-                    '</td>'
-                ].join('');
-                $(columnNodeHTML).appendTo(rowNode);
-
-                var actionMenuNode = $(actionDropdownHtml).appendTo(rowNode);
-
-                $.each(toolbarButtons, function(i, button) {
-                    var btnHTML = [
-                        '<li role="presentation"', button.critical === true ? ' class="critical"' : '', '>',
-                        '<a role="menuitem" tabindex="-1" data-dismiss="modal"', (button.id ? (' id="' + button.id + '"') : ''), (button.disabled === true ? ' class="disabled"' : ''),
-                        '>',
-                        button.class ? ('<i class="' + button.class) + '"></i>' : '',
-                        button.label,
-                        '</a></li>'
+                    columnData += (field.type === 'name') ? ('<span role="status" class="wok-list-loading-icon-inline"></span><span class="wok-list-name '+field.cssClass+'" title="'+field.label+'">'+value.toString()+'</span>') : (field.type !== 'status' ? '<span class="wok-list-description '+field.cssClass+'" title="'+field.label+'">' + value.toString() + '</span>' : '');
+                    columnNodeHTML = [
+                        '<input class="wok-checkbox" type="checkbox" name="'+checkboxName+'" id="wok-list-',i+1,'-check" />',
+                            '<label for="wok-list-',i+1,'-check" class="wok-list-cell', styleClass, '">',
+                                state,
+                                columnData,
+                            '</div>',
+                        '</label>'
                     ].join('');
-                    var btnNode = $(btnHTML).appendTo($('.dropdown-menu', rowNode));
-                    button.onClick && btnNode.on('click', button.onClick);
                 });
+                $(columnNodeHTML).appendTo(rowNode);
             });
         }
     };
 
-    var stylingRow = function(row, className, add) {
-        var index = $(row).index() + 1;
-        $('tr', this.bodyContainer)
-            .removeClass(className);
-        if (add === false) {
-            return;
-        }
-        $('tr:nth-child(' + index + ')', this.bodyContainer)
-            .addClass(className);
+    var stylingRow = function(grid, className) {
+        $('li',grid.bodyContainer).removeClass(className);
+        $.each(grid.selectedIndex, function(){
+            var nth = this + 1;
+            $('li:nth-child('+nth+')',grid.bodyContainer).addClass(className);
+        });
     };
 
     var setBodyListeners = function() {
-        if (this['opts']['rowSelection'] != 'disabled') {
-
-            $('tr', this.bodyContainer).on('click', {
+        if (this['opts']['rowSelection'] !== 'disabled') {
+            $('li:not(.generating) input[type="checkbox"]', this.bodyContainer).on('change', {
                 grid: this
-            }, function(event) {
+            },function(event) {
                 var grid = event.data.grid;
-                if (!$(this).hasClass('generating')) {
-                    grid.selectedIndex = $(this).index();
-                    stylingRow.call(grid, this, 'selected');
-                    grid['opts']['onRowSelected'] && grid['opts']['onRowSelected']();
+                grid.selectedIndex = [];
+                $("li :checkbox:checked", this.bodyContainer).map(function() {
+                    return $(this).parent().index();
+                }).each(function() {
+                    grid.selectedIndex.push(this);
+                });
+                if ($('.mobile-action-count',grid.buttonActionContainer).length) {
+                    $('.mobile-action-count',grid.buttonActionContainer).remove();
                 }
+                if(grid.selectedIndex.length){
+                    $(grid.buttonActionContainer).append('<span class="mobile-action-count"> ( <strong>'+grid.selectedIndex.length+' item(s)</strong> selected )</span>');
+                }
+                stylingRow.call(grid, grid, 'selected');
+                grid['opts']['onRowSelected'] && grid['opts']['onRowSelected']();
             });
         }
     };
@@ -197,7 +187,13 @@ wok.widget.List.prototype = (function() {
     };
 
     var getSelected = function() {
-        return this.selectedIndex >= 0 ? this.data[this.selectedIndex] : null;
+        var selectedItems = [];
+        for (var i = 0; i < this.selectedIndex.length; i++ ){
+            var value = this.selectedIndex[i];
+            selectedItems.push(this.data[value]);
+        }
+        // return this.selectedIndex >= 0 ? this.data[this.selectedIndex] : null;
+        return selectedItems;
     };
 
     var showMessage = function(msg) {
@@ -255,11 +251,17 @@ wok.widget.List.prototype = (function() {
             titleNode = $('<h3 class="panel-title">' + title + '</h3>').appendTo(titleContainer);
         }
 
-        var bodyContainer = $('.wok-list-table.table.table-striped', domNode);
+        var bodyContainer = $('.wok-list', domNode);
         this.bodyContainer = bodyContainer;
 
-        var singleButtonContainer = $('.wok-single-button', domNode);
-        this.singleButtonContainer = singleButtonContainer;
+        var selectButtonContainer = $('.wok-list-action-button-container', domNode);
+        this.selectButtonContainer = selectButtonContainer;
+
+        var buttonActionGroupContainer = $('.wok-list-action-button-container .dropdown-menu', domNode);
+        this.buttonActionGroupContainer = buttonActionGroupContainer;
+
+        var buttonActionContainer = $('.mobile-action .dropdown-toggle.btn', domNode);
+        this.buttonActionContainer = buttonActionContainer;
 
         var gridBody = $('.wok-list-content', domNode);
         this.gridBody = gridBody;
@@ -270,8 +272,7 @@ wok.widget.List.prototype = (function() {
         var messageNode = $('.wok-list-message', domNode);
         this.messageNode = messageNode;
 
-
-        fillButton.call(this,this.singleButtonContainer);
+        fillButtons.call(this,this.buttonActionGroupContainer);
 
         $('.retry-button', domNode).on('click', {
             grid: this
@@ -279,7 +280,6 @@ wok.widget.List.prototype = (function() {
             event.data.grid.reload();
         });
 
-
     };
 
     return {
@@ -299,4 +299,4 @@ wok.widget.List.prototype = (function() {
         reload: reload,
         showMessage: showMessage
     };
-})();
+})();
\ No newline at end of file
-- 
1.9.3




More information about the Kimchi-devel mailing list