[PATCH v2] [Wok] Changes in wok.list.js widget to allow multiple selection
From: Samuel Guimarães <sguimaraes943@gmail.com> This patch updates wok.list.js widget to allow multiple selection in Debug Reports and Repositories in Gingerbase. Another patch was sent to Ginger Dev List covering the changes necessary. This patch also includes changes in Wok SCSS and CSS aiming accessibility and responsive design. v2 - Displays checkbox on all screen sizes and platforms. Fixed spinner icon position when generating a new log. No need to update patch sent to Gingerbase mailing list for now. Samuel Guimarães (1): Changes in wok.list.js widget to allow multiple selection 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(-) -- 1.9.3
From: Samuel Guimarães <sguimaraes943@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@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 + +@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; +} + +@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
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@gmail.com wrote:
From: Samuel Guimarães <sguimaraes943@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@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 + +@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; +} + +@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
From: kimchi-devel-bounces@ovirt.org [mailto:kimchi-devel-bounces@ovirt.org] On Behalf Of Aline Manera Sent: quarta-feira, 27 de abril de 2016 22:46 To: sguimaraes943@gmail.com; Kimchi Devel <kimchi-devel@ovirt.org> Subject: Re: [Kimchi-devel] [PATCH v2] [Wok] Changes in wok.list.js widget to allow multiple selection 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: [cid:image001.jpg@01D1A139.C47932A0] As you can see the loading icon is not aligned with the report name and is overloading a little bit the check box area. Fixed in v3. Should this issue be fixed by this patch or by the Ginger Base patch? No, just this one. Regards, Aline Manera On 04/27/2016 04:03 PM, sguimaraes943@gmail.com<mailto:sguimaraes943@gmail.com> wrote: From: Samuel Guimarães <sguimaraes943@gmail.com><mailto:sguimaraes943@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@gmail.com><mailto:sguimaraes943@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 + +@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; +} + +@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
participants (3)
-
Aline Manera -
Samuel Henrique De Oliveira Guimaraes -
sguimaraes943＠gmail.com