[Kimchi-devel] [PATCH v2] [Wok] Changes in wok.list.js widget to allow multiple selection
Aline Manera
alinefm at linux.vnet.ibm.com
Thu Apr 28 01:45:48 UTC 2016
Hi Samuel,
I applied this patch and the Ginger Base patch to be able to really test
it and I got the following when generating a new debug report:
As you can see the loading icon is not aligned with the report name and
is overloading a little bit the check box area.
Should this issue be fixed by this patch or by the Ginger Base patch?
Regards,
Aline Manera
On 04/27/2016 04:03 PM, sguimaraes943 at gmail.com wrote:
> 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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20160427/e3b6e15a/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: ejdebibg.
Type: image/jpeg
Size: 3253 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20160427/e3b6e15a/attachment.jpe>
More information about the Kimchi-devel
mailing list