<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<!--[if !mso]><style>v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style><![endif]--><style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Consolas;
panose-1:2 11 6 9 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman",serif;
color:black;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
pre
{mso-style-priority:99;
mso-style-link:"HTML Preformatted Char";
margin:0cm;
margin-bottom:.0001pt;
font-size:10.0pt;
font-family:"Courier New";
color:black;}
span.HTMLPreformattedChar
{mso-style-name:"HTML Preformatted Char";
mso-style-priority:99;
mso-style-link:"HTML Preformatted";
font-family:"Consolas",serif;
color:black;}
span.EmailStyle19
{mso-style-type:personal-reply;
font-family:"Calibri",sans-serif;
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page WordSection1
{size:612.0pt 792.0pt;
margin:70.85pt 3.0cm 70.85pt 3.0cm;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body bgcolor="white" lang="PT-BR" link="blue" vlink="purple">
<div class="WordSection1">
<p class="MsoNormal"><b><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:windowtext">From:</span></b><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:windowtext"> kimchi-devel-bounces@ovirt.org
[mailto:kimchi-devel-bounces@ovirt.org] <b>On Behalf Of </b>Aline Manera<br>
<b>Sent:</b> quarta-feira, 27 de abril de 2016 22:46<br>
<b>To:</b> sguimaraes943@gmail.com; Kimchi Devel <kimchi-devel@ovirt.org><br>
<b>Subject:</b> Re: [Kimchi-devel] [PATCH v2] [Wok] Changes in wok.list.js widget to allow multiple selection<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal" style="margin-bottom:12.0pt"><span lang="EN-US"><br>
</span>Hi Samuel,<br>
<br>
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:<br>
<br>
<img width="551" height="56" id="_x0000_i1025" src="cid:image001.jpg@01D1A139.C47932A0"><br>
<br>
As you can see the loading icon is not aligned with the report name and is overloading a little bit the check box area.<br>
<br>
<span lang="EN-US" style="color:#1F497D"><o:p></o:p></span></p>
<p class="MsoNormal" style="margin-bottom:12.0pt"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D">Fixed in v3.<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-bottom:12.0pt"><span lang="EN-US"><br>
Should this issue be fixed by this patch or by the Ginger Base patch?<br>
<br>
</span><span lang="EN-US" style="color:#1F497D"><o:p></o:p></span></p>
<p class="MsoNormal" style="margin-bottom:12.0pt"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D">No, just this one.<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-bottom:12.0pt"><span lang="EN-US"><br>
</span>Regards,<br>
Aline Manera<o:p></o:p></p>
<div>
<p class="MsoNormal">On 04/27/2016 04:03 PM, <a href="mailto:sguimaraes943@gmail.com">
sguimaraes943@gmail.com</a> wrote:<o:p></o:p></p>
</div>
<blockquote style="margin-top:5.0pt;margin-bottom:5.0pt">
<pre>From: Samuel Guimarães <a href="mailto:sguimaraes943@gmail.com"><sguimaraes943@gmail.com></a><o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>This commit enables multiple selection with wok.list.js widget. It also features some enhancements for mobile and keyboard navigation.<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>Signed-off-by: Samuel Guimarães <a href="mailto:sguimaraes943@gmail.com"><sguimaraes943@gmail.com></a><o:p></o:p></pre>
<pre>---<o:p></o:p></pre>
<pre> ui/css/bootstrap.custom.css | 8 +-<o:p></o:p></pre>
<pre> ui/css/src/modules/_buttons.scss | 8 ++<o:p></o:p></pre>
<pre> ui/css/src/modules/_wok-forms.scss | 1 +<o:p></o:p></pre>
<pre> ui/css/src/modules/_wok-grid.scss | 250 +++++++++++++++++++++++++++-----<o:p></o:p></pre>
<pre> ui/css/src/modules/_wok-variables.scss | 4 +-<o:p></o:p></pre>
<pre> ui/css/wok.css | 254 ++++++++++++++++++++++++++++-----<o:p></o:p></pre>
<pre> ui/js/src/wok.list.js | 174 +++++++++++-----------<o:p></o:p></pre>
<pre> 7 files changed, 531 insertions(+), 168 deletions(-)<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>diff --git a/ui/css/bootstrap.custom.css b/ui/css/bootstrap.custom.css<o:p></o:p></pre>
<pre>index 13869da..c69939c 100644<o:p></o:p></pre>
<pre>--- a/ui/css/bootstrap.custom.css<o:p></o:p></pre>
<pre>+++ b/ui/css/bootstrap.custom.css<o:p></o:p></pre>
<pre>@@ -2996,7 +2996,7 @@ fieldset[disabled] .btn-link:focus {<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre> .btn-xs, .btn-group-xs > .btn {<o:p></o:p></pre>
<pre>- padding: 1px 5px;<o:p></o:p></pre>
<pre>+ padding: 2px 10px;<o:p></o:p></pre>
<pre> font-size: 12px;<o:p></o:p></pre>
<pre> line-height: 1.5;<o:p></o:p></pre>
<pre> border-radius: 3px;<o:p></o:p></pre>
<pre>@@ -3460,9 +3460,9 @@ tbody.collapse.in {<o:p></o:p></pre>
<pre> display: table-cell;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-.input-group-addon:not(:first-child):not(:last-child),<o:p></o:p></pre>
<pre>-.input-group-btn:not(:first-child):not(:last-child),<o:p></o:p></pre>
<pre>-.input-group .form-control:not(:first-child):not(:last-child) {<o:p></o:p></pre>
<pre>+.input-group-addon:not(:first-child, :first-child, :first-child):not(:last-child, :last-child, :last-child),<o:p></o:p></pre>
<pre>+.input-group-btn:not(:first-child, :first-child, :first-child):not(:last-child, :last-child, :last-child),<o:p></o:p></pre>
<pre>+.input-group .form-control:not(:first-child, :first-child, :first-child):not(:last-child, :last-child, :last-child) {<o:p></o:p></pre>
<pre> border-radius: 0;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>diff --git a/ui/css/src/modules/_buttons.scss b/ui/css/src/modules/_buttons.scss<o:p></o:p></pre>
<pre>index 85d9531..077a21f 100644<o:p></o:p></pre>
<pre>--- a/ui/css/src/modules/_buttons.scss<o:p></o:p></pre>
<pre>+++ b/ui/css/src/modules/_buttons.scss<o:p></o:p></pre>
<pre>@@ -23,6 +23,14 @@<o:p></o:p></pre>
<pre> font-size: 13pt;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>+.btn-xs, .btn-group-xs > .btn {<o:p></o:p></pre>
<pre>+ font-size: 10.5pt;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.btn-sm, .btn-group-sm > .btn {<o:p></o:p></pre>
<pre>+ font-size: 11.5pt;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre> .btn-login {<o:p></o:p></pre>
<pre> @include button-variant($btn-login-color, $btn-login-bg, $btn-login-border);<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre>\ No newline at end of file<o:p></o:p></pre>
<pre>diff --git a/ui/css/src/modules/_wok-forms.scss b/ui/css/src/modules/_wok-forms.scss<o:p></o:p></pre>
<pre>index d426a60..c3f722a 100644<o:p></o:p></pre>
<pre>--- a/ui/css/src/modules/_wok-forms.scss<o:p></o:p></pre>
<pre>+++ b/ui/css/src/modules/_wok-forms.scss<o:p></o:p></pre>
<pre>@@ -75,6 +75,7 @@ input[type=checkbox].wok-checkbox + label:before {<o:p></o:p></pre>
<pre> input[type=checkbox].wok-checkbox:checked + label:before {<o:p></o:p></pre>
<pre> content: "\f14a";<o:p></o:p></pre>
<pre> letter-spacing: 8px;<o:p></o:p></pre>
<pre>+ margin-right: 0.9px // Sub-pixel unit for Chrome and Firefox anti-alias<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre> input[type=radio].wok-radio + label:before {<o:p></o:p></pre>
<pre>diff --git a/ui/css/src/modules/_wok-grid.scss b/ui/css/src/modules/_wok-grid.scss<o:p></o:p></pre>
<pre>index 730d224..152811d 100644<o:p></o:p></pre>
<pre>--- a/ui/css/src/modules/_wok-grid.scss<o:p></o:p></pre>
<pre>+++ b/ui/css/src/modules/_wok-grid.scss<o:p></o:p></pre>
<pre>@@ -36,23 +36,17 @@<o:p></o:p></pre>
<pre> top: 37px !important;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-.wok-list-cell {<o:p></o:p></pre>
<pre>- position: relative;<o:p></o:p></pre>
<pre>- padding-left: 45px;<o:p></o:p></pre>
<pre>+.wok-list-content {<o:p></o:p></pre>
<pre>+ border-top: 1px solid $table-first-row-border-color;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-.wok-repository-status {<o:p></o:p></pre>
<pre>- position: absolute;<o:p></o:p></pre>
<pre>- left: 6px;<o:p></o:p></pre>
<pre>- top: 0;<o:p></o:p></pre>
<pre>-}<o:p></o:p></pre>
<pre>-<o:p></o:p></pre>
<pre>-.wok-repository-status .fa {<o:p></o:p></pre>
<pre>- font-size: 23px;<o:p></o:p></pre>
<pre>- color: $fa-green;<o:p></o:p></pre>
<pre>+.wok-list-cell {<o:p></o:p></pre>
<pre>+ position: relative;<o:p></o:p></pre>
<pre>+ padding-left: 10px;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-.wok-list-name, .wok-list-description {<o:p></o:p></pre>
<pre>+.wok-list-name,<o:p></o:p></pre>
<pre>+.wok-list-description {<o:p></o:p></pre>
<pre> display: block;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>@@ -67,47 +61,231 @@<o:p></o:p></pre>
<pre> overflow: hidden;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-.wok-list-content tbody tr, .wok-list-content tbody tr * {<o:p></o:p></pre>
<pre>+.wok-list-item-status {<o:p></o:p></pre>
<pre>+ float: left;<o:p></o:p></pre>
<pre>+ margin-top: 12px;<o:p></o:p></pre>
<pre>+ margin-right: 8px;<o:p></o:p></pre>
<pre>+ margin-bottom: 6px;<o:p></o:p></pre>
<pre>+ height: 25px;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list-item-status > .fa {<o:p></o:p></pre>
<pre>+ font-size: 23px;<o:p></o:p></pre>
<pre>+ color: $fa-green;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list-item-status.disabled > .fa:before {<o:p></o:p></pre>
<pre>+ display: block;<o:p></o:p></pre>
<pre>+ width: 19px;<o:p></o:p></pre>
<pre>+ height: 23px;<o:p></o:p></pre>
<pre>+ padding: 0;<o:p></o:p></pre>
<pre>+ border: 0;<o:p></o:p></pre>
<pre>+ content: "";<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list-cell.disabled span {<o:p></o:p></pre>
<pre>+ color: $gray-light;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list-action-button-container {<o:p></o:p></pre>
<pre>+ padding-bottom: 16px;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list-loading-icon-inline {<o:p></o:p></pre>
<pre>+ background: transparent url('#{$wok-icon-path}/spin5.svg') no-repeat 50% 50%;<o:p></o:p></pre>
<pre>+ @include animation(spin 3s infinite linear);<o:p></o:p></pre>
<pre>+ height: 16px;<o:p></o:p></pre>
<pre>+ width: 16px;<o:p></o:p></pre>
<pre>+ background-size: 100%;<o:p></o:p></pre>
<pre>+ display: none;<o:p></o:p></pre>
<pre>+ position: absolute;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.generating .wok-list-description {<o:p></o:p></pre>
<pre>+ padding-left: 24px;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.generating .wok-list-loading-icon-inline {<o:p></o:p></pre>
<pre>+ display: block;<o:p></o:p></pre>
<pre>+ position: absolute;<o:p></o:p></pre>
<pre>+ top: 27px;<o:p></o:p></pre>
<pre>+ left: 14px;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list > ul {<o:p></o:p></pre>
<pre>+ list-style: none;<o:p></o:p></pre>
<pre>+ padding: 0;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list > ul > li,<o:p></o:p></pre>
<pre>+.wok-list > ul > li * {<o:p></o:p></pre>
<pre> @include user-select(none);<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-.wok-list-content tbody tr:hover {<o:p></o:p></pre>
<pre>+.wok-list > ul > li,<o:p></o:p></pre>
<pre>+.wok-list > ul > li > label {<o:p></o:p></pre>
<pre>+ width: 100%;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list > ul > li {<o:p></o:p></pre>
<pre>+ border-top: 1px solid $table-border-color;<o:p></o:p></pre>
<pre>+ background: $table-bg;<o:p></o:p></pre>
<pre>+ position: relative;<o:p></o:p></pre>
<pre>+ @include transition(background .1s ease-in-out);<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list > ul > li:first-child {<o:p></o:p></pre>
<pre>+ border: 0;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list > ul > li:nth-of-type(even) {<o:p></o:p></pre>
<pre>+ background: $table-bg-accent;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list > ul > li.selected {<o:p></o:p></pre>
<pre>+ background: $table-bg-hover;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list > ul > li > label {<o:p></o:p></pre>
<pre>+ cursor: pointer !important;<o:p></o:p></pre>
<pre>+ text-decoration: none;<o:p></o:p></pre>
<pre>+ margin-bottom: 0;<o:p></o:p></pre>
<pre>+ padding-bottom: 5px;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list > ul > li > label:hover {<o:p></o:p></pre>
<pre> text-decoration: underline;<o:p></o:p></pre>
<pre>- cursor: pointer;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-.wok-list-content tbody tr.generating:hover {<o:p></o:p></pre>
<pre>+.wok-list > ul > li.generating > label:hover {<o:p></o:p></pre>
<pre> text-decoration: none;<o:p></o:p></pre>
<pre> cursor: default;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-.wok-list-content tbody tr.selected {<o:p></o:p></pre>
<pre>- background: #ddd;<o:p></o:p></pre>
<pre>+.wok-list > ul > li > input[type=checkbox] {<o:p></o:p></pre>
<pre>+ left: -15px;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-span.wok-repository-status.disabled {<o:p></o:p></pre>
<pre>- display: none;<o:p></o:p></pre>
<pre>+.wok-list > ul > li > input[type=checkbox].wok-checkbox + label:before {<o:p></o:p></pre>
<pre>+ float: left;<o:p></o:p></pre>
<pre>+ height: 30px;<o:p></o:p></pre>
<pre>+ margin-top: 13px;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-.wok-list-cell.disabled span {<o:p></o:p></pre>
<pre>- color: #999;<o:p></o:p></pre>
<pre>+// Mobile first<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list-action-button-container {<o:p></o:p></pre>
<pre>+ background: $body-bg;<o:p></o:p></pre>
<pre>+ z-index: 1;<o:p></o:p></pre>
<pre>+ position: relative;<o:p></o:p></pre>
<pre>+ @include box-shadow(0 20px 20px -20px rgba(0,0,0,.4));<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-.wok-single-button {<o:p></o:p></pre>
<pre>- padding-bottom: 16px;<o:p></o:p></pre>
<pre>- margin-top: -11px;<o:p></o:p></pre>
<pre>+.mobile-action {<o:p></o:p></pre>
<pre>+ width: 100%;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-.generating .wok-list-description {<o:p></o:p></pre>
<pre>- padding-left: 24px;<o:p></o:p></pre>
<pre>+.mobile-action .btn {<o:p></o:p></pre>
<pre>+ width: 100%;<o:p></o:p></pre>
<pre>+ height: 40px;<o:p></o:p></pre>
<pre>+ border-radius: 0;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-.generating .wok-list-loading-icon-inline {<o:p></o:p></pre>
<pre>- background: transparent url('#{$wok-icon-path}/spin5.svg') no-repeat 50% 50%;<o:p></o:p></pre>
<pre>- @include animation(spin 3s infinite linear);<o:p></o:p></pre>
<pre>- height: 16px;<o:p></o:p></pre>
<pre>- width: 16px;<o:p></o:p></pre>
<pre>- background-size: 100%;<o:p></o:p></pre>
<pre>- display: block;<o:p></o:p></pre>
<pre>- position: absolute;<o:p></o:p></pre>
<pre>+.mobile-action > .btn {<o:p></o:p></pre>
<pre>+ border-radius: $border-radius-base;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.mobile-action.open > .btn {<o:p></o:p></pre>
<pre>+ border-radius: $border-radius-base $border-radius-base 0 0;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.mobile-action .btn span.mobile-action-label {<o:p></o:p></pre>
<pre>+ font-weight: 600;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.mobile-action .btn span.mobile-action-count {<o:p></o:p></pre>
<pre>+ font-weight: 300;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.mobile-action .btn span.mobile-action-count strong {<o:p></o:p></pre>
<pre>+ font-weight: 600;<o:p></o:p></pre>
<pre>+ font-size: 11pt;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.mobile-action .dropdown-menu {<o:p></o:p></pre>
<pre>+ width: 100%;<o:p></o:p></pre>
<pre>+ border: 0;<o:p></o:p></pre>
<pre>+ box-shadow: none;<o:p></o:p></pre>
<pre>+ background: transparent;<o:p></o:p></pre>
<pre>+ padding: 0;<o:p></o:p></pre>
<pre>+ margin: 0;<o:p></o:p></pre>
<pre>+ border-radius: 0;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.mobile-action.open .dropdown-menu .btn {<o:p></o:p></pre>
<pre>+ border-radius: 0;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.mobile-action.open .dropdown-menu li:last-child .btn {<o:p></o:p></pre>
<pre>+ border-radius: 0 0 $border-radius-base $border-radius-base;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.mobile-action .dropdown-menu li > .btn.disabled,<o:p></o:p></pre>
<pre>+.mobile-action .dropdown-menu li > .btn[disabled] {<o:p></o:p></pre>
<pre>+ opacity: 1;<o:p></o:p></pre>
<pre>+ background: #585758;<o:p></o:p></pre>
<pre>+ border-color: #585758;<o:p></o:p></pre>
<pre>+ color: #ddd;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+// Reset Mobile styles to mimic desktop when min-width is bigger than 768px wide<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+@media (min-width: $screen-md-min) {<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+ .wok-list-action-button-container {<o:p></o:p></pre>
<pre>+ @include box-shadow(none);<o:p></o:p></pre>
<pre>+ }<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+ .wok-list-action-button-container .dropdown-toggle {<o:p></o:p></pre>
<pre>+ display: none;<o:p></o:p></pre>
<pre>+ }<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+ .wok-list-action-button-container .mobile-action {<o:p></o:p></pre>
<pre>+ position: static;<o:p></o:p></pre>
<pre>+ height: 40px;<o:p></o:p></pre>
<pre>+ }<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+ .wok-list-action-button-container .mobile-action .btn {<o:p></o:p></pre>
<pre>+ width: auto;<o:p></o:p></pre>
<pre>+ }<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+ .wok-list-action-button-container .mobile-action li:first-child .btn {<o:p></o:p></pre>
<pre>+ border-top-left-radius: 4px;<o:p></o:p></pre>
<pre>+ border-bottom-left-radius: 4px;<o:p></o:p></pre>
<pre>+ }<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+ .wok-list-action-button-container .mobile-action li:last-child .btn {<o:p></o:p></pre>
<pre>+ border-top-left-radius: 0;<o:p></o:p></pre>
<pre>+ border-bottom-left-radius: 0 !important;<o:p></o:p></pre>
<pre>+ border-top-right-radius: $border-radius-base !important;<o:p></o:p></pre>
<pre>+ border-bottom-right-radius: $border-radius-base;<o:p></o:p></pre>
<pre>+ }<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+ .wok-list-action-button-container > .dropdown.mobile-action > .dropdown-menu {<o:p></o:p></pre>
<pre>+ display: block;<o:p></o:p></pre>
<pre>+ vertical-align: middle;<o:p></o:p></pre>
<pre>+ position: absolute;<o:p></o:p></pre>
<pre>+ top: 0;<o:p></o:p></pre>
<pre>+ }<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+ .wok-list-action-button-container > .dropdown.mobile-action > .dropdown-menu > li {<o:p></o:p></pre>
<pre>+ display: inline-block;<o:p></o:p></pre>
<pre>+ }<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+ .wok-list > ul > li > input[type=checkbox].wok-checkbox:focus + label {<o:p></o:p></pre>
<pre>+ outline: auto 5px $input-border-focus; // Accessibility<o:p></o:p></pre>
<pre>+ outline: auto 5px -webkit-focus-ring-color; // Set default webkit focus ring color for webkit browsers<o:p></o:p></pre>
<pre>+ }<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>\ No newline at end of file<o:p></o:p></pre>
<pre>diff --git a/ui/css/src/modules/_wok-variables.scss b/ui/css/src/modules/_wok-variables.scss<o:p></o:p></pre>
<pre>index 9f53cb2..c58feba 100644<o:p></o:p></pre>
<pre>--- a/ui/css/src/modules/_wok-variables.scss<o:p></o:p></pre>
<pre>+++ b/ui/css/src/modules/_wok-variables.scss<o:p></o:p></pre>
<pre>@@ -164,8 +164,8 @@ $padding-large-horizontal: 16px !default;<o:p></o:p></pre>
<pre> $padding-small-vertical: 5px !default;<o:p></o:p></pre>
<pre> $padding-small-horizontal: 10px !default;<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-$padding-xs-vertical: 1px !default;<o:p></o:p></pre>
<pre>-$padding-xs-horizontal: 5px !default;<o:p></o:p></pre>
<pre>+$padding-xs-vertical: 2px !default;<o:p></o:p></pre>
<pre>+$padding-xs-horizontal: 10px !default;<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre> $line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome<o:p></o:p></pre>
<pre> $line-height-small: 1.5 !default;<o:p></o:p></pre>
<pre>diff --git a/ui/css/wok.css b/ui/css/wok.css<o:p></o:p></pre>
<pre>index 615cdea..d296167 100644<o:p></o:p></pre>
<pre>--- a/ui/css/wok.css<o:p></o:p></pre>
<pre>+++ b/ui/css/wok.css<o:p></o:p></pre>
<pre>@@ -336,6 +336,14 @@ body {<o:p></o:p></pre>
<pre> font-size: 13pt;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>+.btn-xs, .btn-group-xs > .btn {<o:p></o:p></pre>
<pre>+ font-size: 10.5pt;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.btn-sm, .btn-group-sm > .btn {<o:p></o:p></pre>
<pre>+ font-size: 11.5pt;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre> .btn-login {<o:p></o:p></pre>
<pre> color: #fff;<o:p></o:p></pre>
<pre> background-color: #008abf;<o:p></o:p></pre>
<pre>@@ -676,23 +684,17 @@ fieldset[disabled] .btn-login.active {<o:p></o:p></pre>
<pre> top: 37px !important;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-.wok-list-cell {<o:p></o:p></pre>
<pre>- position: relative;<o:p></o:p></pre>
<pre>- padding-left: 45px;<o:p></o:p></pre>
<pre>+.wok-list-content {<o:p></o:p></pre>
<pre>+ border-top: 1px solid #e3e3e3;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-.wok-repository-status {<o:p></o:p></pre>
<pre>- position: absolute;<o:p></o:p></pre>
<pre>- left: 6px;<o:p></o:p></pre>
<pre>- top: 0;<o:p></o:p></pre>
<pre>-}<o:p></o:p></pre>
<pre>-<o:p></o:p></pre>
<pre>-.wok-repository-status .fa {<o:p></o:p></pre>
<pre>- font-size: 23px;<o:p></o:p></pre>
<pre>- color: #a8d46f;<o:p></o:p></pre>
<pre>+.wok-list-cell {<o:p></o:p></pre>
<pre>+ position: relative;<o:p></o:p></pre>
<pre>+ padding-left: 10px;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-.wok-list-name, .wok-list-description {<o:p></o:p></pre>
<pre>+.wok-list-name,<o:p></o:p></pre>
<pre>+.wok-list-description {<o:p></o:p></pre>
<pre> display: block;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>@@ -707,54 +709,227 @@ fieldset[disabled] .btn-login.active {<o:p></o:p></pre>
<pre> overflow: hidden;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-.wok-list-content tbody tr, .wok-list-content tbody tr * {<o:p></o:p></pre>
<pre>+.wok-list-item-status {<o:p></o:p></pre>
<pre>+ float: left;<o:p></o:p></pre>
<pre>+ margin-top: 12px;<o:p></o:p></pre>
<pre>+ margin-right: 8px;<o:p></o:p></pre>
<pre>+ margin-bottom: 6px;<o:p></o:p></pre>
<pre>+ height: 25px;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list-item-status > .fa {<o:p></o:p></pre>
<pre>+ font-size: 23px;<o:p></o:p></pre>
<pre>+ color: #a8d46f;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list-item-status.disabled > .fa:before {<o:p></o:p></pre>
<pre>+ display: block;<o:p></o:p></pre>
<pre>+ width: 19px;<o:p></o:p></pre>
<pre>+ height: 23px;<o:p></o:p></pre>
<pre>+ padding: 0;<o:p></o:p></pre>
<pre>+ border: 0;<o:p></o:p></pre>
<pre>+ content: "";<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list-cell.disabled span {<o:p></o:p></pre>
<pre>+ color: #999;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list-action-button-container {<o:p></o:p></pre>
<pre>+ padding-bottom: 16px;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list-loading-icon-inline {<o:p></o:p></pre>
<pre>+ background: transparent url("/images/theme-default/spin5.svg") no-repeat 50% 50%;<o:p></o:p></pre>
<pre>+ -webkit-animation: spin 3s infinite linear;<o:p></o:p></pre>
<pre>+ -o-animation: spin 3s infinite linear;<o:p></o:p></pre>
<pre>+ animation: spin 3s infinite linear;<o:p></o:p></pre>
<pre>+ height: 16px;<o:p></o:p></pre>
<pre>+ width: 16px;<o:p></o:p></pre>
<pre>+ background-size: 100%;<o:p></o:p></pre>
<pre>+ display: none;<o:p></o:p></pre>
<pre>+ position: absolute;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.generating .wok-list-description {<o:p></o:p></pre>
<pre>+ padding-left: 24px;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.generating .wok-list-loading-icon-inline {<o:p></o:p></pre>
<pre>+ display: block;<o:p></o:p></pre>
<pre>+ position: absolute;<o:p></o:p></pre>
<pre>+ top: 27px;<o:p></o:p></pre>
<pre>+ left: 14px;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list > ul {<o:p></o:p></pre>
<pre>+ list-style: none;<o:p></o:p></pre>
<pre>+ padding: 0;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list > ul > li,<o:p></o:p></pre>
<pre>+.wok-list > ul > li * {<o:p></o:p></pre>
<pre> -webkit-user-select: none;<o:p></o:p></pre>
<pre> -moz-user-select: none;<o:p></o:p></pre>
<pre> -ms-user-select: none;<o:p></o:p></pre>
<pre> user-select: none;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-.wok-list-content tbody tr:hover {<o:p></o:p></pre>
<pre>+.wok-list > ul > li,<o:p></o:p></pre>
<pre>+.wok-list > ul > li > label {<o:p></o:p></pre>
<pre>+ width: 100%;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list > ul > li {<o:p></o:p></pre>
<pre>+ border-top: 1px solid #eee;<o:p></o:p></pre>
<pre>+ background: #fff;<o:p></o:p></pre>
<pre>+ position: relative;<o:p></o:p></pre>
<pre>+ -webkit-transition: background 0.1s ease-in-out;<o:p></o:p></pre>
<pre>+ -o-transition: background 0.1s ease-in-out;<o:p></o:p></pre>
<pre>+ transition: background 0.1s ease-in-out;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list > ul > li:first-child {<o:p></o:p></pre>
<pre>+ border: 0;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list > ul > li:nth-of-type(even) {<o:p></o:p></pre>
<pre>+ background: #fcfcfc;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list > ul > li.selected {<o:p></o:p></pre>
<pre>+ background: #ddd;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list > ul > li > label {<o:p></o:p></pre>
<pre>+ cursor: pointer !important;<o:p></o:p></pre>
<pre>+ text-decoration: none;<o:p></o:p></pre>
<pre>+ margin-bottom: 0;<o:p></o:p></pre>
<pre>+ padding-bottom: 5px;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.wok-list > ul > li > label:hover {<o:p></o:p></pre>
<pre> text-decoration: underline;<o:p></o:p></pre>
<pre>- cursor: pointer;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-.wok-list-content tbody tr.generating:hover {<o:p></o:p></pre>
<pre>+.wok-list > ul > li.generating > label:hover {<o:p></o:p></pre>
<pre> text-decoration: none;<o:p></o:p></pre>
<pre> cursor: default;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-.wok-list-content tbody tr.selected {<o:p></o:p></pre>
<pre>- background: #ddd;<o:p></o:p></pre>
<pre>+.wok-list > ul > li > input[type=checkbox] {<o:p></o:p></pre>
<pre>+ left: -15px;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-span.wok-repository-status.disabled {<o:p></o:p></pre>
<pre>- display: none;<o:p></o:p></pre>
<pre>+.wok-list > ul > li > input[type=checkbox].wok-checkbox + label:before {<o:p></o:p></pre>
<pre>+ float: left;<o:p></o:p></pre>
<pre>+ height: 30px;<o:p></o:p></pre>
<pre>+ margin-top: 13px;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-.wok-list-cell.disabled span {<o:p></o:p></pre>
<pre>- color: #999;<o:p></o:p></pre>
<pre>+.wok-list-action-button-container {<o:p></o:p></pre>
<pre>+ background: #fff;<o:p></o:p></pre>
<pre>+ z-index: 1;<o:p></o:p></pre>
<pre>+ position: relative;<o:p></o:p></pre>
<pre>+ -webkit-box-shadow: 0 20px 20px -20px rgba(0, 0, 0, 0.4);<o:p></o:p></pre>
<pre>+ box-shadow: 0 20px 20px -20px rgba(0, 0, 0, 0.4);<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-.wok-single-button {<o:p></o:p></pre>
<pre>- padding-bottom: 16px;<o:p></o:p></pre>
<pre>- margin-top: -11px;<o:p></o:p></pre>
<pre>+.mobile-action {<o:p></o:p></pre>
<pre>+ width: 100%;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-.generating .wok-list-description {<o:p></o:p></pre>
<pre>- padding-left: 24px;<o:p></o:p></pre>
<pre>+.mobile-action .btn {<o:p></o:p></pre>
<pre>+ width: 100%;<o:p></o:p></pre>
<pre>+ height: 40px;<o:p></o:p></pre>
<pre>+ border-radius: 0;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-.generating .wok-list-loading-icon-inline {<o:p></o:p></pre>
<pre>- background: transparent url("/images/theme-default/spin5.svg") no-repeat 50% 50%;<o:p></o:p></pre>
<pre>- -webkit-animation: spin 3s infinite linear;<o:p></o:p></pre>
<pre>- -o-animation: spin 3s infinite linear;<o:p></o:p></pre>
<pre>- animation: spin 3s infinite linear;<o:p></o:p></pre>
<pre>- height: 16px;<o:p></o:p></pre>
<pre>- width: 16px;<o:p></o:p></pre>
<pre>- background-size: 100%;<o:p></o:p></pre>
<pre>- display: block;<o:p></o:p></pre>
<pre>- position: absolute;<o:p></o:p></pre>
<pre>+.mobile-action > .btn {<o:p></o:p></pre>
<pre>+ border-radius: 3px;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.mobile-action.open > .btn {<o:p></o:p></pre>
<pre>+ border-radius: 3px 3px 0 0;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.mobile-action .btn span.mobile-action-label {<o:p></o:p></pre>
<pre>+ font-weight: 600;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.mobile-action .btn span.mobile-action-count {<o:p></o:p></pre>
<pre>+ font-weight: 300;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.mobile-action .btn span.mobile-action-count strong {<o:p></o:p></pre>
<pre>+ font-weight: 600;<o:p></o:p></pre>
<pre>+ font-size: 11pt;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.mobile-action .dropdown-menu {<o:p></o:p></pre>
<pre>+ width: 100%;<o:p></o:p></pre>
<pre>+ border: 0;<o:p></o:p></pre>
<pre>+ box-shadow: none;<o:p></o:p></pre>
<pre>+ background: transparent;<o:p></o:p></pre>
<pre>+ padding: 0;<o:p></o:p></pre>
<pre>+ margin: 0;<o:p></o:p></pre>
<pre>+ border-radius: 0;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.mobile-action.open .dropdown-menu .btn {<o:p></o:p></pre>
<pre>+ border-radius: 0;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.mobile-action.open .dropdown-menu li:last-child .btn {<o:p></o:p></pre>
<pre>+ border-radius: 0 0 3px 3px;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+.mobile-action .dropdown-menu li > .btn.disabled,<o:p></o:p></pre>
<pre>+.mobile-action .dropdown-menu li > .btn[disabled] {<o:p></o:p></pre>
<pre>+ opacity: 1;<o:p></o:p></pre>
<pre>+ background: #585758;<o:p></o:p></pre>
<pre>+ border-color: #585758;<o:p></o:p></pre>
<pre>+ color: #ddd;<o:p></o:p></pre>
<pre>+}<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+@media (min-width: 992px) {<o:p></o:p></pre>
<pre>+ .wok-list-action-button-container {<o:p></o:p></pre>
<pre>+ -webkit-box-shadow: none;<o:p></o:p></pre>
<pre>+ box-shadow: none;<o:p></o:p></pre>
<pre>+ }<o:p></o:p></pre>
<pre>+ .wok-list-action-button-container .dropdown-toggle {<o:p></o:p></pre>
<pre>+ display: none;<o:p></o:p></pre>
<pre>+ }<o:p></o:p></pre>
<pre>+ .wok-list-action-button-container .mobile-action {<o:p></o:p></pre>
<pre>+ position: static;<o:p></o:p></pre>
<pre>+ height: 40px;<o:p></o:p></pre>
<pre>+ }<o:p></o:p></pre>
<pre>+ .wok-list-action-button-container .mobile-action .btn {<o:p></o:p></pre>
<pre>+ width: auto;<o:p></o:p></pre>
<pre>+ }<o:p></o:p></pre>
<pre>+ .wok-list-action-button-container .mobile-action li:first-child .btn {<o:p></o:p></pre>
<pre>+ border-top-left-radius: 4px;<o:p></o:p></pre>
<pre>+ border-bottom-left-radius: 4px;<o:p></o:p></pre>
<pre>+ }<o:p></o:p></pre>
<pre>+ .wok-list-action-button-container .mobile-action li:last-child .btn {<o:p></o:p></pre>
<pre>+ border-top-left-radius: 0;<o:p></o:p></pre>
<pre>+ border-bottom-left-radius: 0 !important;<o:p></o:p></pre>
<pre>+ border-top-right-radius: 3px !important;<o:p></o:p></pre>
<pre>+ border-bottom-right-radius: 3px;<o:p></o:p></pre>
<pre>+ }<o:p></o:p></pre>
<pre>+ .wok-list-action-button-container > .dropdown.mobile-action > .dropdown-menu {<o:p></o:p></pre>
<pre>+ display: block;<o:p></o:p></pre>
<pre>+ vertical-align: middle;<o:p></o:p></pre>
<pre>+ position: absolute;<o:p></o:p></pre>
<pre>+ top: 0;<o:p></o:p></pre>
<pre>+ }<o:p></o:p></pre>
<pre>+ .wok-list-action-button-container > .dropdown.mobile-action > .dropdown-menu > li {<o:p></o:p></pre>
<pre>+ display: inline-block;<o:p></o:p></pre>
<pre>+ }<o:p></o:p></pre>
<pre>+ .wok-list > ul > li > input[type=checkbox].wok-checkbox:focus + label {<o:p></o:p></pre>
<pre>+ outline: auto 5px #66afe9;<o:p></o:p></pre>
<pre>+ outline: auto 5px -webkit-focus-ring-color;<o:p></o:p></pre>
<pre>+ }<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre> .grid-control {<o:p></o:p></pre>
<pre>@@ -948,6 +1123,7 @@ input[type=checkbox].wok-checkbox + label:before {<o:p></o:p></pre>
<pre> input[type=checkbox].wok-checkbox:checked + label:before {<o:p></o:p></pre>
<pre> content: "\f14a";<o:p></o:p></pre>
<pre> letter-spacing: 8px;<o:p></o:p></pre>
<pre>+ margin-right: 0.9px;<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre> input[type=radio].wok-radio + label:before {<o:p></o:p></pre>
<pre>@@ -1105,7 +1281,7 @@ input[type=radio].wok-radio + label {<o:p></o:p></pre>
<pre> /*<o:p></o:p></pre>
<pre> * Project Wok<o:p></o:p></pre>
<pre> *<o:p></o:p></pre>
<pre>-* Copyright IBM Corp, 2015-2016<o:p></o:p></pre>
<pre>+* Copyright IBM Corp, 2016<o:p></o:p></pre>
<pre> *<o:p></o:p></pre>
<pre> * Code derived from Project Kimchi<o:p></o:p></pre>
<pre> *<o:p></o:p></pre>
<pre>diff --git a/ui/js/src/wok.list.js b/ui/js/src/wok.list.js<o:p></o:p></pre>
<pre>index 7d8e27c..f40b2e2 100644<o:p></o:p></pre>
<pre>--- a/ui/js/src/wok.list.js<o:p></o:p></pre>
<pre>+++ b/ui/js/src/wok.list.js<o:p></o:p></pre>
<pre>@@ -24,6 +24,7 @@ wok.widget.List = function(opts) {<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre> wok.widget.List.prototype = (function() {<o:p></o:p></pre>
<pre> "use strict";<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre> var htmlStr = [<o:p></o:p></pre>
<pre> '<div id="{id}-section" class="panel panel-default">',<o:p></o:p></pre>
<pre> '<div class="panel-heading">',<o:p></o:p></pre>
<pre>@@ -39,13 +40,19 @@ wok.widget.List.prototype = (function() {<o:p></o:p></pre>
<pre> '</button></p>',<o:p></o:p></pre>
<pre> '</div>',<o:p></o:p></pre>
<pre> '</div>',<o:p></o:p></pre>
<pre>- '<div id="{id}-btn-group" class="btn-group wok-single-button hidden">',<o:p></o:p></pre>
<pre>-<o:p></o:p></pre>
<pre>+ '<div id="{id}-action-group" class="wok-list-action-button-container">',<o:p></o:p></pre>
<pre>+ '<div class="dropdown mobile-action">',<o:p></o:p></pre>
<pre>+ '<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">',<o:p></o:p></pre>
<pre>+ '<span class="mobile-action-label">Actions</span>', // TODO: Replace with i18n string<o:p></o:p></pre>
<pre>+ '</button>',<o:p></o:p></pre>
<pre>+ '<ul class="dropdown-menu" role="menu">',<o:p></o:p></pre>
<pre>+ '</ul>',<o:p></o:p></pre>
<pre>+ '</div>',<o:p></o:p></pre>
<pre> '</div>',<o:p></o:p></pre>
<pre> '<div id="{id}" class="row clearfix">',<o:p></o:p></pre>
<pre> '<div class="wok-list-content">',<o:p></o:p></pre>
<pre>- '<table class="wok-list-table table table-striped" id="list">',<o:p></o:p></pre>
<pre>- '</table>',<o:p></o:p></pre>
<pre>+ '<div class="wok-list" id="list">',<o:p></o:p></pre>
<pre>+ '</div>',<o:p></o:p></pre>
<pre> '</div>',<o:p></o:p></pre>
<pre> '</div>',<o:p></o:p></pre>
<pre> '<div class="wok-list-mask hidden">',<o:p></o:p></pre>
<pre>@@ -80,112 +87,95 @@ wok.widget.List.prototype = (function() {<o:p></o:p></pre>
<pre> return (result);<o:p></o:p></pre>
<pre> };<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-<o:p></o:p></pre>
<pre>- var fillButton = function(btnContainer){<o:p></o:p></pre>
<pre>- var addOrGenerateBtn = this.opts.toolbarButtons[0];<o:p></o:p></pre>
<pre>- var singleBtnHTML = [<o:p></o:p></pre>
<pre>- '<a class="btn btn-primary" href="#"', (addOrGenerateBtn.id ? (' id="' + addOrGenerateBtn.id + '"') : ''),' role="button">',<o:p></o:p></pre>
<pre>- addOrGenerateBtn.class ? ('<i class="' + addOrGenerateBtn.class) + '"></i> ' : '',<o:p></o:p></pre>
<pre>- addOrGenerateBtn.label,<o:p></o:p></pre>
<pre>- '</a>'<o:p></o:p></pre>
<pre>- ].join('');<o:p></o:p></pre>
<pre>- var singleBtn = $(singleBtnHTML).appendTo(btnContainer);<o:p></o:p></pre>
<pre>- $(singleBtn).click(function(e) {<o:p></o:p></pre>
<pre>- e.preventDefault();<o:p></o:p></pre>
<pre>- });<o:p></o:p></pre>
<pre>- addOrGenerateBtn.onClick && singleBtn.on('click', addOrGenerateBtn.onClick);<o:p></o:p></pre>
<pre>+ var fillButtons = function(btnContainer){<o:p></o:p></pre>
<pre>+ var toolbarButtons = this.opts.toolbarButtons;<o:p></o:p></pre>
<pre>+ $.each(toolbarButtons, function(i, button) {<o:p></o:p></pre>
<pre>+ var btnHTML = [<o:p></o:p></pre>
<pre>+ '<li class="',<o:p></o:p></pre>
<pre>+ (button.critical === true ? 'critical' : ''),<o:p></o:p></pre>
<pre>+ ,'">',<o:p></o:p></pre>
<pre>+ '<btn data-dismiss="modal"',<o:p></o:p></pre>
<pre>+ (button.id ? (' id="' + button.id + '"') : ''),<o:p></o:p></pre>
<pre>+ ' class="btn btn-primary"',<o:p></o:p></pre>
<pre>+ (button.disabled === true ? ' disabled="disabled"' : ''),<o:p></o:p></pre>
<pre>+ '">',<o:p></o:p></pre>
<pre>+ button.class ? ('<i class="' + button.class) + '"></i> ' : ' ',<o:p></o:p></pre>
<pre>+ button.label,<o:p></o:p></pre>
<pre>+ '</btn>',<o:p></o:p></pre>
<pre>+ '</li>'<o:p></o:p></pre>
<pre>+ ].join('');<o:p></o:p></pre>
<pre>+ var btnNode = $(btnHTML).appendTo(btnContainer);<o:p></o:p></pre>
<pre>+ button.onClick && btnNode.on('click', button.onClick);<o:p></o:p></pre>
<pre>+ });<o:p></o:p></pre>
<pre> };<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre> var fillBody = function(container, fields) {<o:p></o:p></pre>
<pre>-<o:p></o:p></pre>
<pre>- var toolbarButtons = this.opts.toolbarButtons;<o:p></o:p></pre>
<pre>- var actionDropdownHtml;<o:p></o:p></pre>
<pre> var data = this.data;<o:p></o:p></pre>
<pre>- var tbody = ($('tbody', container).length && $('tbody', container)) || $('<tbody></tbody>').appendTo(container);<o:p></o:p></pre>
<pre>+ var tbody = ($('ul', container).length && $('ul', container)) || $('<ul></ul>').appendTo(container);<o:p></o:p></pre>
<pre> tbody.empty();<o:p></o:p></pre>
<pre> if (typeof data !== 'undefined' && data.length > 0) {<o:p></o:p></pre>
<pre> $.each(data, function(i, row) {<o:p></o:p></pre>
<pre>- var rowNode = $('<tr></tr>').appendTo(tbody);<o:p></o:p></pre>
<pre>+ var rowNode = $('<li></li>').appendTo(tbody);<o:p></o:p></pre>
<pre> var columnNodeHTML;<o:p></o:p></pre>
<pre> var columnData = '';<o:p></o:p></pre>
<pre> var state = '';<o:p></o:p></pre>
<pre> var styleClass = '';<o:p></o:p></pre>
<pre>- if (toolbarButtons) {<o:p></o:p></pre>
<pre>- actionDropdownHtml = [<o:p></o:p></pre>
<pre>- '<td>',<o:p></o:p></pre>
<pre>- '<div class="dropdown menu-flat">',<o:p></o:p></pre>
<pre>- '<button id="wok-dropdown-button-', i, '" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">',<o:p></o:p></pre>
<pre>- '<span class="edit-alt"></span>Actions<span class="caret"></span>',<o:p></o:p></pre>
<pre>- '</button>',<o:p></o:p></pre>
<pre>- '<ul class="dropdown-menu" role="menu" aria-labelledby="action-dropdown-menu-', i, '">',<o:p></o:p></pre>
<pre>- '</ul>',<o:p></o:p></pre>
<pre>- '</div>',<o:p></o:p></pre>
<pre>- '</td>'<o:p></o:p></pre>
<pre>- ].join('');<o:p></o:p></pre>
<pre>- }<o:p></o:p></pre>
<pre>+ var checkboxName = $('ul', container).parent().parent().parent().attr('id') + '-check' || $(container).parent().parent().parent().attr('id') + '-check';<o:p></o:p></pre>
<pre> $.each(fields, function(fi, field) {<o:p></o:p></pre>
<pre> var value = getValue(field.name, row);<o:p></o:p></pre>
<pre> if (field.type === 'status' && field.name === 'enabled') {<o:p></o:p></pre>
<pre> styleClass = (value === true ? '' : ' disabled');<o:p></o:p></pre>
<pre> state = [<o:p></o:p></pre>
<pre>- '<span class="wok-repository-status ',<o:p></o:p></pre>
<pre>+ '<span class="wok-list-item-status ',<o:p></o:p></pre>
<pre> value === true ? 'enabled' : 'disabled',<o:p></o:p></pre>
<pre>- '"><i class="fa fa-power-off"></i></span>'<o:p></o:p></pre>
<pre>+ '"><i class="fa fa-power-off"></i><span class="sr-only">',<o:p></o:p></pre>
<pre>+ value === true ? 'Enabled' : 'Disabled',<o:p></o:p></pre>
<pre>+ '</span></span>'<o:p></o:p></pre>
<pre> ].join('');<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre>- 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>' : '');<o:p></o:p></pre>
<pre>-<o:p></o:p></pre>
<pre>- });<o:p></o:p></pre>
<pre>- columnNodeHTML = [<o:p></o:p></pre>
<pre>- '<td>',<o:p></o:p></pre>
<pre>- '<div class="wok-list-cell', styleClass, '">', state,<o:p></o:p></pre>
<pre>- columnData,<o:p></o:p></pre>
<pre>- '</div>',<o:p></o:p></pre>
<pre>- '</td>'<o:p></o:p></pre>
<pre>- ].join('');<o:p></o:p></pre>
<pre>- $(columnNodeHTML).appendTo(rowNode);<o:p></o:p></pre>
<pre>-<o:p></o:p></pre>
<pre>- var actionMenuNode = $(actionDropdownHtml).appendTo(rowNode);<o:p></o:p></pre>
<pre>-<o:p></o:p></pre>
<pre>- $.each(toolbarButtons, function(i, button) {<o:p></o:p></pre>
<pre>- var btnHTML = [<o:p></o:p></pre>
<pre>- '<li role="presentation"', button.critical === true ? ' class="critical"' : '', '>',<o:p></o:p></pre>
<pre>- '<a role="menuitem" tabindex="-1" data-dismiss="modal"', (button.id ? (' id="' + button.id + '"') : ''), (button.disabled === true ? ' class="disabled"' : ''),<o:p></o:p></pre>
<pre>- '>',<o:p></o:p></pre>
<pre>- button.class ? ('<i class="' + button.class) + '"></i>' : '',<o:p></o:p></pre>
<pre>- button.label,<o:p></o:p></pre>
<pre>- '</a></li>'<o:p></o:p></pre>
<pre>+ 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>' : '');<o:p></o:p></pre>
<pre>+ columnNodeHTML = [<o:p></o:p></pre>
<pre>+ '<input class="wok-checkbox" type="checkbox" name="'+checkboxName+'" id="wok-list-',i+1,'-check" />',<o:p></o:p></pre>
<pre>+ '<label for="wok-list-',i+1,'-check" class="wok-list-cell', styleClass, '">',<o:p></o:p></pre>
<pre>+ state,<o:p></o:p></pre>
<pre>+ columnData,<o:p></o:p></pre>
<pre>+ '</div>',<o:p></o:p></pre>
<pre>+ '</label>'<o:p></o:p></pre>
<pre> ].join('');<o:p></o:p></pre>
<pre>- var btnNode = $(btnHTML).appendTo($('.dropdown-menu', rowNode));<o:p></o:p></pre>
<pre>- button.onClick && btnNode.on('click', button.onClick);<o:p></o:p></pre>
<pre> });<o:p></o:p></pre>
<pre>+ $(columnNodeHTML).appendTo(rowNode);<o:p></o:p></pre>
<pre> });<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre> };<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>- var stylingRow = function(row, className, add) {<o:p></o:p></pre>
<pre>- var index = $(row).index() + 1;<o:p></o:p></pre>
<pre>- $('tr', this.bodyContainer)<o:p></o:p></pre>
<pre>- .removeClass(className);<o:p></o:p></pre>
<pre>- if (add === false) {<o:p></o:p></pre>
<pre>- return;<o:p></o:p></pre>
<pre>- }<o:p></o:p></pre>
<pre>- $('tr:nth-child(' + index + ')', this.bodyContainer)<o:p></o:p></pre>
<pre>- .addClass(className);<o:p></o:p></pre>
<pre>+ var stylingRow = function(grid, className) {<o:p></o:p></pre>
<pre>+ $('li',grid.bodyContainer).removeClass(className);<o:p></o:p></pre>
<pre>+ $.each(grid.selectedIndex, function(){<o:p></o:p></pre>
<pre>+ var nth = this + 1;<o:p></o:p></pre>
<pre>+ $('li:nth-child('+nth+')',grid.bodyContainer).addClass(className);<o:p></o:p></pre>
<pre>+ });<o:p></o:p></pre>
<pre> };<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre> var setBodyListeners = function() {<o:p></o:p></pre>
<pre>- if (this['opts']['rowSelection'] != 'disabled') {<o:p></o:p></pre>
<pre>-<o:p></o:p></pre>
<pre>- $('tr', this.bodyContainer).on('click', {<o:p></o:p></pre>
<pre>+ if (this['opts']['rowSelection'] !== 'disabled') {<o:p></o:p></pre>
<pre>+ $('li:not(.generating) input[type="checkbox"]', this.bodyContainer).on('change', {<o:p></o:p></pre>
<pre> grid: this<o:p></o:p></pre>
<pre>- }, function(event) {<o:p></o:p></pre>
<pre>+ },function(event) {<o:p></o:p></pre>
<pre> var grid = event.data.grid;<o:p></o:p></pre>
<pre>- if (!$(this).hasClass('generating')) {<o:p></o:p></pre>
<pre>- grid.selectedIndex = $(this).index();<o:p></o:p></pre>
<pre>- stylingRow.call(grid, this, 'selected');<o:p></o:p></pre>
<pre>- grid['opts']['onRowSelected'] && grid['opts']['onRowSelected']();<o:p></o:p></pre>
<pre>+ grid.selectedIndex = [];<o:p></o:p></pre>
<pre>+ $("li :checkbox:checked", this.bodyContainer).map(function() {<o:p></o:p></pre>
<pre>+ return $(this).parent().index();<o:p></o:p></pre>
<pre>+ }).each(function() {<o:p></o:p></pre>
<pre>+ grid.selectedIndex.push(this);<o:p></o:p></pre>
<pre>+ });<o:p></o:p></pre>
<pre>+ if ($('.mobile-action-count',grid.buttonActionContainer).length) {<o:p></o:p></pre>
<pre>+ $('.mobile-action-count',grid.buttonActionContainer).remove();<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre>+ if(grid.selectedIndex.length){<o:p></o:p></pre>
<pre>+ $(grid.buttonActionContainer).append('<span class="mobile-action-count"> ( <strong>'+grid.selectedIndex.length+' item(s)</strong> selected )</span>');<o:p></o:p></pre>
<pre>+ }<o:p></o:p></pre>
<pre>+ stylingRow.call(grid, grid, 'selected');<o:p></o:p></pre>
<pre>+ grid['opts']['onRowSelected'] && grid['opts']['onRowSelected']();<o:p></o:p></pre>
<pre> });<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre> };<o:p></o:p></pre>
<pre>@@ -197,7 +187,13 @@ wok.widget.List.prototype = (function() {<o:p></o:p></pre>
<pre> };<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre> var getSelected = function() {<o:p></o:p></pre>
<pre>- return this.selectedIndex >= 0 ? this.data[this.selectedIndex] : null;<o:p></o:p></pre>
<pre>+ var selectedItems = [];<o:p></o:p></pre>
<pre>+ for (var i = 0; i < this.selectedIndex.length; i++ ){<o:p></o:p></pre>
<pre>+ var value = this.selectedIndex[i];<o:p></o:p></pre>
<pre>+ selectedItems.push(this.data[value]);<o:p></o:p></pre>
<pre>+ }<o:p></o:p></pre>
<pre>+ // return this.selectedIndex >= 0 ? this.data[this.selectedIndex] : null;<o:p></o:p></pre>
<pre>+ return selectedItems;<o:p></o:p></pre>
<pre> };<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre> var showMessage = function(msg) {<o:p></o:p></pre>
<pre>@@ -255,11 +251,17 @@ wok.widget.List.prototype = (function() {<o:p></o:p></pre>
<pre> titleNode = $('<h3 class="panel-title">' + title + '</h3>').appendTo(titleContainer);<o:p></o:p></pre>
<pre> }<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>- var bodyContainer = $('.wok-list-table.table.table-striped', domNode);<o:p></o:p></pre>
<pre>+ var bodyContainer = $('.wok-list', domNode);<o:p></o:p></pre>
<pre> this.bodyContainer = bodyContainer;<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>- var singleButtonContainer = $('.wok-single-button', domNode);<o:p></o:p></pre>
<pre>- this.singleButtonContainer = singleButtonContainer;<o:p></o:p></pre>
<pre>+ var selectButtonContainer = $('.wok-list-action-button-container', domNode);<o:p></o:p></pre>
<pre>+ this.selectButtonContainer = selectButtonContainer;<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+ var buttonActionGroupContainer = $('.wok-list-action-button-container .dropdown-menu', domNode);<o:p></o:p></pre>
<pre>+ this.buttonActionGroupContainer = buttonActionGroupContainer;<o:p></o:p></pre>
<pre>+<o:p></o:p></pre>
<pre>+ var buttonActionContainer = $('.mobile-action .dropdown-toggle.btn', domNode);<o:p></o:p></pre>
<pre>+ this.buttonActionContainer = buttonActionContainer;<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre> var gridBody = $('.wok-list-content', domNode);<o:p></o:p></pre>
<pre> this.gridBody = gridBody;<o:p></o:p></pre>
<pre>@@ -270,8 +272,7 @@ wok.widget.List.prototype = (function() {<o:p></o:p></pre>
<pre> var messageNode = $('.wok-list-message', domNode);<o:p></o:p></pre>
<pre> this.messageNode = messageNode;<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-<o:p></o:p></pre>
<pre>- fillButton.call(this,this.singleButtonContainer);<o:p></o:p></pre>
<pre>+ fillButtons.call(this,this.buttonActionGroupContainer);<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre> $('.retry-button', domNode).on('click', {<o:p></o:p></pre>
<pre> grid: this<o:p></o:p></pre>
<pre>@@ -279,7 +280,6 @@ wok.widget.List.prototype = (function() {<o:p></o:p></pre>
<pre> event.data.grid.reload();<o:p></o:p></pre>
<pre> });<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre>-<o:p></o:p></pre>
<pre> };<o:p></o:p></pre>
<pre><o:p> </o:p></pre>
<pre> return {<o:p></o:p></pre>
<pre>@@ -299,4 +299,4 @@ wok.widget.List.prototype = (function() {<o:p></o:p></pre>
<pre> reload: reload,<o:p></o:p></pre>
<pre> showMessage: showMessage<o:p></o:p></pre>
<pre> };<o:p></o:p></pre>
<pre>-})();<o:p></o:p></pre>
<pre>+})();<o:p></o:p></pre>
<pre>\ No newline at end of file<o:p></o:p></pre>
</blockquote>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
</body>
</html>