[PATCH] [Wok 00/10] Media Queries v2 and Bug fixes
From: samhenri <samuel.guimaraes@eldorado.org.br> The following patchesfixes some minor issues with CSS and JS, including CSS Media Queries support on desktops for Wok and Kimchi (supported screen width: 1024, 1280, 1366, 1440, 1680 and 1920). Bugfixes: *wok.message.js - Increased fade-out timing *Moved Loader classes to a new SCSS module and created classes to support loading screen (Kimchi Issue: #784) *Edit Guests - Snapshots grid when generating a new Snapshot *Moved wok-checkbox and wok-radio to a new SCSS module *Added List.JS library to enable Filtering and Sorting in Templates and Guests *Updated Templates styles to support Filters *Removed unused SCSS files *Prevented all Bootstrap modal windows from closing when clicking on the backdrop (Ginger Issue: #59) *About Window (Wok Issue: #5 / Kimchi Issue: #706) samhenri (10): Adding Media Queries for different screen sizes Fixed wok.message.js fade-out timing 'Loading' mask and backdrop SCSS Fix Snapshots grid in Edit Guests modal Moved .wok-radio and .wok-checkbox to a new SCSS module Adding List.js lib for Filters in Templates and Guests Updated Templates styles to support filter Removed unused files Prevented modals from closing when clicking on the backdrop About Window configure.ac | 1 + ui/css/src/bootstrap.custom.scss | 1 - ui/css/src/modules/_about.scss | 32 +++++ ui/css/src/modules/_datagrid.scss | 9 +- ui/css/src/modules/_edit-guests.scss | 5 + ui/css/src/modules/_guests.scss | 67 ++++++++--- ui/css/src/modules/_jqueryui.scss | 0 ui/css/src/modules/_loaders.scss | 55 +++++++++ ui/css/src/modules/_menu-flat.scss | 3 +- ui/css/src/modules/_navbar-flat.scss | 132 ++++++++++----------- ui/css/src/modules/_network.scss | 6 +- ui/css/src/modules/_templates.scss | 39 +++--- ui/css/src/modules/_toolbar.scss | 25 +++- ui/css/src/modules/_wok-forms.scss | 55 +++++++++ ui/css/src/modules/_wok-grid.scss | 31 ----- ui/css/src/modules/_wok-variables.scss | 17 +-- .../vendor/bootstrap-sass/bootstrap/_alerts.scss | 17 ++- .../src/vendor/bootstrap-sass/bootstrap/_grid.scss | 2 + ui/css/src/wok.scss | 101 +++------------- ui/js/src/wok.main.js | 5 +- ui/js/src/wok.message.js | 6 +- ui/js/src/wok.window.js | 5 + ui/libs/Makefile.am | 2 +- ui/libs/list-js/LICENSE | 21 ++++ ui/libs/list-js/Makefile.am | 22 ++++ ui/libs/list-js/list.min.js | 1 + ui/pages/wok-ui.html.tmpl | 41 ++++--- 27 files changed, 433 insertions(+), 268 deletions(-) create mode 100644 ui/css/src/modules/_about.scss delete mode 100644 ui/css/src/modules/_jqueryui.scss create mode 100644 ui/css/src/modules/_loaders.scss create mode 100644 ui/css/src/modules/_wok-forms.scss create mode 100644 ui/libs/list-js/LICENSE create mode 100644 ui/libs/list-js/Makefile.am create mode 100644 ui/libs/list-js/list.min.js -- 1.9.3
From: samhenri <samuel.guimaraes@eldorado.org.br>
Signed-off-by: samhenri <samuel.guimaraes@eldorado.org.br>
---
ui/css/src/bootstrap.custom.scss | 1 -
ui/css/src/modules/_datagrid.scss | 9 +-
ui/css/src/modules/_guests.scss | 67 ++++++++---
ui/css/src/modules/_menu-flat.scss | 3 +-
ui/css/src/modules/_navbar-flat.scss | 132 ++++++++++-----------
ui/css/src/modules/_network.scss | 6 +-
ui/css/src/modules/_toolbar.scss | 25 +++-
ui/css/src/modules/_wok-variables.scss | 17 +--
.../vendor/bootstrap-sass/bootstrap/_alerts.scss | 17 ++-
.../src/vendor/bootstrap-sass/bootstrap/_grid.scss | 2 +
ui/css/src/wok.scss | 83 +++++++------
11 files changed, 213 insertions(+), 149 deletions(-)
diff --git a/ui/css/src/bootstrap.custom.scss b/ui/css/src/bootstrap.custom.scss
index f04f3b8..f17f11c 100644
--- a/ui/css/src/bootstrap.custom.scss
+++ b/ui/css/src/bootstrap.custom.scss
@@ -73,7 +73,6 @@
@import "modules/modal-flat";
@import "vendor/bootstrap-sass/bootstrap/tooltip";
@import "vendor/bootstrap-sass/bootstrap/popovers";
-@import "vendor/bootstrap-sass/bootstrap/carousel";
// Utility classes
@import "vendor/bootstrap-sass/bootstrap/utilities";
diff --git a/ui/css/src/modules/_datagrid.scss b/ui/css/src/modules/_datagrid.scss
index fe2f7dc..389b8b6 100644
--- a/ui/css/src/modules/_datagrid.scss
+++ b/ui/css/src/modules/_datagrid.scss
@@ -18,11 +18,11 @@
.grid-control {
padding: 5px;
}
-
+
.grid-control input[type="text"] {
width: 514px;
}
-
+
.wok-datagrid {
background: $table-bg;
.wok-datagrid-header,
@@ -37,7 +37,7 @@
}
> .wok-datagrid-header > span {
font-family: $font-family-light;
- font-weight: 400;
+ font-weight: 300;
font-size: 12.5pt;
vertical-align: bottom;
border-bottom: none;
@@ -48,12 +48,13 @@
> .wok-datagrid-body > .wok-datagrid-row{
border-top: 1px solid $table-border-color;
-
+
> span {
font-family: $font-family-sans-serif;
line-height: (1 + $line-height-base);
vertical-align: top;
font-size: 12.5pt;
+ font-weight: 400;
}
}
diff --git a/ui/css/src/modules/_guests.scss b/ui/css/src/modules/_guests.scss
index 24b36c6..f6b7a60 100644
--- a/ui/css/src/modules/_guests.scss
+++ b/ui/css/src/modules/_guests.scss
@@ -95,6 +95,7 @@
.wok-guest-list {
display: block;
width: 100%;
+ padding: 0;
list-style-type: none;
> li:nth-child(even) {
background-color: $table-bg-accent;
@@ -114,15 +115,19 @@
display: inline-block;
vertical-align: middle;
font-family: $font-family-sans-serif;
- font-weight: 400;
+ font-weight: 300;
font-size: 12.5pt;
line-height: 1.42857;
border-bottom: none;
border-top: 0;
- }
- > span.column-state {
- width: 2.9272%;
- text-align: center;
+ overflow: hidden;
+ > span {
+ width: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ display: block;
+ }
}
}
.wok-guest-list-body {
@@ -134,7 +139,7 @@
font-family: $font-family-sans-serif;
font-size: 12.5pt;
line-height: 2.42857;
- font-weight: bold;
+ font-weight: 400;
}
.progress {
display: inline-block;
@@ -177,7 +182,7 @@
.wok-guest-list .wok-guest-list-header,
.wok-guest-list .wok-guest-list-body {
> span.column-state {
- width: 2.9272%;
+ width: 40px;
text-align: center;
> span.guest-state {
font-size: 22px;
@@ -236,16 +241,29 @@
}
}
> span.column-name {
- width: 13.6867%;
+ width: 13.7%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
+ @media (min-width: $screen-lg + 130) {
+ width: 9.7%;
+ }
+ @media (min-width: $screen-xlg) {
+ width: 14.15%;
+ }
}
> span.column-type {
- width: 9.9683%;
+ width: 11.74%;
+ background-position: 0 50%;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ @media (min-width: $screen-lg + 130) {
+ width: 10.74%;
+ }
}
> span.column-vnc {
- width: 11.8670%;
+ display: none;
> a {
font-weight: normal;
color: $vnc-blue !important;
@@ -259,33 +277,39 @@
font-size: 22px;
color: $vnc-blue !important;
}
+ @media (min-width: $screen-lg + 130) {
+ width: 10.84%;
+ display: inline-block;
+ }
+ }
+ > span.column-processors,
+ > span.column-memory,
+ > span.column-storage,
+ > span.column-network {
+ width: 12.5%;
}
> span.column-processors {
- width: 12.1838%;
> div > div.progress-bar.cpu-progress-bar {
background-color: map-get($colors, administration);
}
}
> span.column-memory {
- width: 12.1838%;
> div > div.progress-bar.memory-progress-bar {
background-color: map-get($colors, host);
}
}
> span.column-storage {
- width: 12.9746%;
> div > div.progress-bar.storage-progress-bar {
background-color: $state-warning-border;
}
}
> span.column-network {
- width: 12.9746%;
> div > div.progress-bar.network-progress-bar {
background-color: map-get($colors, network);
}
}
> span.column-action {
- width: 10.9968%;
+ width: 165px;
}
> span.item-hidden {
display: none !important;
@@ -300,7 +324,7 @@
.wok-guest-list .distro-icon.inactive {
-webkit-filter: grayscale(100%) contrast(0.8) brightness(110%);
-moz-filter: grayscale(100%) contrast(0.8) brightness(110%);
- filter: grayscale(100%) contrast(0.8) brightness(110%);
+ filter: grayscale(100%) contrast(0.8) brightness(110%);
}
.wok-guest-list .distro-icon.icon-centos {
background-image: url('#{$wok-icon-path}/icon-centos.png');
@@ -327,3 +351,14 @@
color: $disabled-color !important;
}
}
+
+// #guests-root-container .container {
+// @media (min-width: $screen-lg-min) {
+// padding-left: 0;
+// padding-right: 0;
+// }
+// @media (min-width: 1600px) {
+// padding-left: 80px;
+// padding-right: 60px;
+// }
+// }
\ No newline at end of file
diff --git a/ui/css/src/modules/_menu-flat.scss b/ui/css/src/modules/_menu-flat.scss
index 0802c75..179010c 100644
--- a/ui/css/src/modules/_menu-flat.scss
+++ b/ui/css/src/modules/_menu-flat.scss
@@ -14,7 +14,8 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
-//
+//
+
@import '../vendor/bootstrap-sass/bootstrap/mixins';
//
// Menu-Flat Drop-Down
diff --git a/ui/css/src/modules/_navbar-flat.scss b/ui/css/src/modules/_navbar-flat.scss
index 384e755..0e11269 100644
--- a/ui/css/src/modules/_navbar-flat.scss
+++ b/ui/css/src/modules/_navbar-flat.scss
@@ -71,8 +71,8 @@
overflow-x: visible;
padding-right: $navbar-padding-horizontal;
padding-left: $navbar-padding-horizontal;
- border-top: 1px solid transparent;
- box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
+ border-top: 0;
+ box-shadow: none;
@include clearfix;
-webkit-overflow-scrolling: touch;
@@ -182,12 +182,11 @@
.navbar-brand {
display: block;
- margin: 0 0 0 -80px;
- padding: 0 0 0 80px;
+ padding: 0 0 0 60px;
height: 55px;
- background: transparent url($kimchi-logo) no-repeat 24px 3px;
+ background: transparent url($kimchi-logo) no-repeat 5px 3px;
color: $highlights-color;
- font-family: $font-family-bold;
+ font-family: $font-family-bold;
font-weight: 700;
font-size: 1.571em;
line-height: 55px;
@@ -203,12 +202,6 @@
display: block;
}
- @media (min-width: $grid-float-breakpoint) {
- .navbar > .container &,
- .navbar > .container-fluid & {
- margin-left: -80px;
- }
- }
}
@@ -259,17 +252,8 @@
.navbar-nav {
margin: ($navbar-padding-vertical / 2) (-$navbar-padding-horizontal);
- > li > a {
- padding-left: 40px;
- padding-right: 40px;
- line-height: $line-height-computed;
- font-family: $font-family-alternate;
- font-size: 13pt;
-
- > .fa {
+ > li > a > .fa {
font-size: 26px;
- }
-
}
> li > a.dropdown-toggle {
@@ -422,7 +406,7 @@
background-clip: padding-box;
height: auto;
max-height: 400px;
- overflow-x: hidden;
+ overflow-x: hidden;
margin-right: 22px;
> li {
@@ -438,7 +422,7 @@
font-family: $font-family-sans-serif;
font-size: 13pt;
font-weight: normal;
- line-height: 24px;
+ line-height: 24px;
padding: 7px 30px;
height: 40px;
border-top: 1px solid $menu-flat-dropdown-border;
@@ -471,11 +455,11 @@
.navbar-nav > li > .dropdown-menu::-webkit-scrollbar {
width: 12px;
}
-
+
.navbar-nav > li > .dropdown-menu::-webkit-scrollbar-track {
@include box-shadow(inset 0 0 6px rgba(0,0,0,0.3));
}
-
+
.navbar-nav > li > .dropdown-menu::-webkit-scrollbar-thumb {
border-radius: 4px;
background: #797979;
@@ -541,7 +525,7 @@
}
.navbar-right {
float: right !important;
- margin-right: -$navbar-padding-horizontal;
+ margin-right: $navbar-right-padding-horizontal;
~ .navbar-right {
margin-right: 0;
@@ -567,44 +551,57 @@
}
}
+ .container {
+ @include container-fixed;
+
+ @media (min-width: $screen-sm-min) {
+ width: $container-sm;
+ }
+ @media (min-width: $screen-md-min) {
+ width: $container-md;
+ }
+ @media (min-width: $screen-lg-min) {
+ width: $container-lg;
+ padding-left: 80px;
+ padding-right: 60px;
+
+ #tabPanel {
+ margin-left: -80px;
+ margin-right: -60px;
+ padding-left: 80px;
+ padding-right: 60px;
+ }
+
+ }
+ }
+
.navbar-text {
color: $navbar-default-color;
}
.navbar-nav {
> li > a {
- margin: 0 !important;
- font-size: 13pt;
- font-family: $font-family-bold;
+ padding-left: 10px;
+ padding-right: 10px;
+ margin: 0;
+ font-size: 12pt;
+ font-family: $font-family-base;
font-weight: 700;
color: $navbar-default-link-color;
text-decoration: none;
outline: none;
- min-width: 210px;
+ min-width: 156px;
text-align: center;
height: $navbar-height;
-
+ @media (min-width: $screen-lg-min) {
+ min-width: 190px;
+ font-size: 13pt;
+ }
&:hover,
&:focus {
color: $navbar-default-link-hover-color;
background-color: $navbar-default-link-hover-bg;
}
-
- .digit-container {
- display: inline-block;
- margin-left: 10px;
- margin-top: -2px;
- border-radius: 16px;
- height: 20px;
- line-height: 16px;
- background: #555;
- border: 2px solid #555;
- color: #fff;
- font-family: $font-family-base;
- font-size: 14px;
- padding: 0 8px;
- }
-
}
> .active > a {
&,
@@ -613,12 +610,6 @@
color: $navbar-default-link-active-color;
background-color: $navbar-default-link-active-bg;
}
-
- .digit-container {
- border-color: #fff;
- background: transparent;
- }
-
}
> .disabled > a {
&,
@@ -629,10 +620,6 @@
background-color: $navbar-default-link-disabled-bg;
}
- .digit-container {
- display: none;
- }
-
}
@each $page, $bgcolor in $colors {
@@ -652,23 +639,32 @@
> .hostname {
margin: 0;
- padding: 8px 0;
+ padding: 8px 10px;
vertical-align: top;
- width:210px;
- padding-right: 24px;
- @include box-sizing(border-box);
+ width:156px;
+ padding-left: 60px;
+ height: 40px;
+ @media (min-width: $screen-lg-min) {
+ width: 190px;
+ }
.host-location {
- display: block;
- font-family: $font-family-alternate;
+ display: inline-block;
+ font-family: $font-family-base;
color: $highlights-color;
- font-size: 13pt;
- font-weight: 400;
+ font-size: 8.5pt;
+ font-weight: 300;
width: 100%;
overflow: hidden;
white-space: nowrap;
- text-overflow: ellipsis;
- margin-left:80px;
+ text-align: left;
+ @media (min-width: $screen-sm-min) {
+ margin-top: 8px;
+ }
+ @media (min-width: $screen-md-min) {
+ margin-top: 4px;
+ font-size: 11pt;
+ }
}
}
diff --git a/ui/css/src/modules/_network.scss b/ui/css/src/modules/_network.scss
index 0a30b09..0f7a617 100644
--- a/ui/css/src/modules/_network.scss
+++ b/ui/css/src/modules/_network.scss
@@ -54,7 +54,7 @@
left: 50%;
margin-left: -8px;
}
-
+
.up .wok-nw-loading-icon,
.down .wok-nw-loading-icon {
display: none;
@@ -91,7 +91,7 @@
}
> span.column-type {
- width: 10.3896%;
+ width: 11.3896%;
}
> span.column-interface {
@@ -99,7 +99,7 @@
}
> span.column-space {
- width: 31.169%;
+ width: 30%;
}
> span.column-action {
diff --git a/ui/css/src/modules/_toolbar.scss b/ui/css/src/modules/_toolbar.scss
index 6e74f4e..9301a9a 100644
--- a/ui/css/src/modules/_toolbar.scss
+++ b/ui/css/src/modules/_toolbar.scss
@@ -34,14 +34,14 @@
margin-left: 0;
}
.navbar-right.tools > li > a {
- font-family: $font-family-alternate;
+ font-family: $font-family-base;
display: inline-block;
color: $highlights-color;
text-decoration: none;
font-size: 13pt;
vertical-align: middle;
- padding: 6px 0 !important;
- margin-left: 50px !important;
+ padding: 6px 0;
+ margin-left: 20px;
font-weight: 600;
width: auto;
min-width: auto;
@@ -75,3 +75,22 @@ $bgcolor in $colors {
background-color: map-get($colors, $tab) !important;
}
}
+
+
+
+@media (min-width: $screen-sm-max) and (max-width: $screen-md-min) {
+
+ .host-dashboard .container {
+ padding-right: 10px;
+ padding-left: 10px;
+ }
+
+}
+
+@media (min-width: $screen-md-max) and (max-width: $screen-lg) {
+
+ .navbar-default.toolbar .navbar-right.tools > li > a {
+ margin-left: 50px;
+ }
+
+}
diff --git a/ui/css/src/modules/_wok-variables.scss b/ui/css/src/modules/_wok-variables.scss
index 0f15d2d..52f4b3f 100644
--- a/ui/css/src/modules/_wok-variables.scss
+++ b/ui/css/src/modules/_wok-variables.scss
@@ -384,25 +384,27 @@ $screen-phone: $screen-xs-min !default;
// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
-$screen-sm: 992px !default;
+$screen-sm: 768px !default;
$screen-sm-min: $screen-sm !default;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet: $screen-sm-min !default;
// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
-$screen-md: 1200px !default;
+$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop: $screen-md-min !default;
// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
-$screen-lg: 1680 !default;
+$screen-lg: 1200px !default;
$screen-lg-min: $screen-lg !default;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop: $screen-lg-min !default;
+$screen-xlg: 1540px !default;
+
// So media queries don't overlap when required, provide a maximum
$screen-xs-max: ($screen-sm-min - 1) !default;
$screen-sm-max: ($screen-md-min - 1) !default;
@@ -429,17 +431,17 @@ $grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
//## Define the maximum width of `.container` for different screen sizes.
// Small screen / tablet
-$container-tablet: (940px + $grid-gutter-width) !default;
+$container-tablet: 100% !default;
//** For `$screen-sm-min` and up.
$container-sm: $container-tablet !default;
// Medium screen / desktop
-$container-desktop: (1140px + $grid-gutter-width) !default;
+$container-desktop: 100% !default;
//** For `$screen-md-min` and up.
$container-md: $container-desktop !default;
// Large screen / wide desktop
-$container-large-desktop: (1540px + $grid-gutter-width) !default;
+$container-large-desktop: 100% !default;
//** For `$screen-lg-min` and up.
$container-lg: $container-large-desktop !default;
@@ -452,7 +454,8 @@ $container-lg: $container-large-desktop !default;
$navbar-height: 40px !default;
$navbar-margin-bottom: 0 !default;
$navbar-border-radius: 0 !default;
-$navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default;
+$navbar-padding-horizontal: 0 !default;
+$navbar-right-padding-horizontal: 10px !default;
$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default;
$navbar-collapse-max-height: 340px !default;
diff --git a/ui/css/src/vendor/bootstrap-sass/bootstrap/_alerts.scss b/ui/css/src/vendor/bootstrap-sass/bootstrap/_alerts.scss
index 7d1e1fd..79c6c12 100644
--- a/ui/css/src/vendor/bootstrap-sass/bootstrap/_alerts.scss
+++ b/ui/css/src/vendor/bootstrap-sass/bootstrap/_alerts.scss
@@ -6,11 +6,19 @@
// Base styles
// -------------------------
+#alert-fields {
+ @media (min-width: $screen-lg-min) {
+ padding-top: 10px;
+ }
+}
+
.alert {
padding: $alert-padding;
- margin-bottom: $line-height-computed;
+ margin-bottom: ($line-height-computed / 2);
border: 1px solid transparent;
border-radius: $alert-border-radius;
+ border-width: $alert-border-width;
+ position: relative;
// Headings for larger alerts
h4 {
@@ -45,9 +53,10 @@
// Adjust close link position
.close {
- position: relative;
- top: -2px;
- right: -21px;
+ opacity: 1;
+ position: absolute;
+ top: 6px;
+ right: 15px;
color: inherit;
}
}
diff --git a/ui/css/src/vendor/bootstrap-sass/bootstrap/_grid.scss b/ui/css/src/vendor/bootstrap-sass/bootstrap/_grid.scss
index b15ca27..575abd6 100644
--- a/ui/css/src/vendor/bootstrap-sass/bootstrap/_grid.scss
+++ b/ui/css/src/vendor/bootstrap-sass/bootstrap/_grid.scss
@@ -18,6 +18,8 @@
}
@media (min-width: $screen-lg-min) {
width: $container-lg;
+ padding-left: 80px;
+ padding-right: 60px;
}
}
diff --git a/ui/css/src/wok.scss b/ui/css/src/wok.scss
index 3d182be..5d4f515 100755
--- a/ui/css/src/wok.scss
+++ b/ui/css/src/wok.scss
@@ -26,35 +26,6 @@
.container {
margin-right: auto;
margin-left: auto;
- padding-left: 80px !important;
- padding-right: 60px !important;
-}
-
-#navigation-bar {
- padding-left: 0 !important;
- padding-right:0 !important;
- width:100%;
-}
-
-// Override alert
-.alert {
- border-width: $alert-border-width;
- margin-bottom: 10px;
-}
-
-.alert-fields {
- margin-top: -20px;
- padding-bottom: 10px;
-}
-
-.alert-dismissable .close,
-.alert-dismissible .close {
- right: 15px !important;
- top: 0 !important;
-}
-
-.close {
- opacity: 1 !important;
}
.hide-content {
@@ -76,8 +47,6 @@
}
// Override forms
-
-
.form-control.invalid-field {
border-color: $brand-danger;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(217, 83, 79, 0.6);
@@ -176,15 +145,45 @@ pre {
margin-top: 20px;
}
-// Media queries
-@media screen and (min-width: 768px) {
- .container {
- width: 1540px;
- }
-}
+// @media screen and (max-width: 63.75em) {
+// .container {
+// width: 100%;
+// }
+// }
+
+// @media screen and (max-width: 76.25em) {
+// .container {
+// width: 100%;
+// }
+// }
+
+// @media screen and (max-width: 84.375em) {
+// .container {
+// width: 100%;
+// }
+// }
+
+// @media screen and (max-width: 89em) {
+// .container {
+// width: 100%;
+// }
+// }
+
+// @media screen and (max-width: 99em) {
+// .container {
+// width: 100%;
+// }
+// }
+
+// @media screen and (max-width: 104em) {
+// .container {
+// width: 100%;
+// }
+// }
+
+// @media screen (min-width: 104em) and (max-width: 120em) {
+// .container {
+// width: 100%;
+// }
+// }
-@media screen and (min-width: 1680px) {
- .container {
- width: 1680px;
- }
-}
--
1.9.3
From: samhenri <samuel.guimaraes@eldorado.org.br> Signed-off-by: samhenri <samuel.guimaraes@eldorado.org.br> --- ui/js/src/wok.message.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/js/src/wok.message.js b/ui/js/src/wok.message.js index a4d6596..c74101e 100644 --- a/ui/js/src/wok.message.js +++ b/ui/js/src/wok.message.js @@ -37,19 +37,19 @@ wok.message = function(msg, level, node) { $message.fadeIn(100); var timeout = setTimeout(function() { - $message.delay(2000).fadeOut(100, function() { + $message.delay(4000).fadeOut(100, function() { $message.alert('close'); $(this).remove(); if ($(container).children().length < 1) { $(container).hide(); } }); - }, 4000); + }, 10000); }; wok.message.warn = function(msg, node) { "use strict"; - wok.message(msg, 'alert-warning', node); + wok.message(msg, 'alert-warning', node); }; wok.message.error = function(msg, node) { "use strict"; -- 1.9.3
From: samhenri <samuel.guimaraes@eldorado.org.br> Adding .wok-mask to display a "Loading..." message and .wok-loading-icon when loading pages or panels Signed-off-by: samhenri <samuel.guimaraes@eldorado.org.br> --- ui/css/src/modules/_loaders.scss | 55 +++++++++++++++++++++++++++++++++++++++ ui/css/src/modules/_wok-grid.scss | 31 ---------------------- ui/css/src/wok.scss | 48 +++------------------------------- 3 files changed, 59 insertions(+), 75 deletions(-) create mode 100644 ui/css/src/modules/_loaders.scss diff --git a/ui/css/src/modules/_loaders.scss b/ui/css/src/modules/_loaders.scss new file mode 100644 index 0000000..49a14ce --- /dev/null +++ b/ui/css/src/modules/_loaders.scss @@ -0,0 +1,55 @@ +// +// Project Wok +// +// Copyright IBM, Corp. 2015 +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// + +.wok-mask, .wok-grid-mask, .wok-list-mask { + @extend .absolute-middle; + background: rgba(255,255,255,.7); +} + +.wok-mask { + top: 180px !important; + @media (max-width: $screen-sm - 1) { + top: 0 !important; + } +} + +.wok-mask-loading, .wok-grid-loading, .wok-list-loading { + width: 100%; + white-space: nowrap; + @extend .absolute-middle; +} + +.wok-mask-loader-container, .wok-grid-loader-container, .wok-list-loader-container { + width: 120px; + height: 40px; + @extend .absolute-middle; +} + +.wok-mask-loading-icon, .wok-grid-loading-icon, .wok-list-loading-icon{ + background: transparent url('#{$wok-icon-path}/spin5.svg') no-repeat 50% 50%; + @include animation(spin 2s infinite linear); + height: 20px; + width: 20px; + @extend .absolute-middle; +} + +.wok-mask-loading-text, .wok-grid-loading-text, .wok-list-loading-text { + color: $gray; + padding-top: 40px; + text-shadow: 0px 0px 10px #fff; +} \ No newline at end of file diff --git a/ui/css/src/modules/_wok-grid.scss b/ui/css/src/modules/_wok-grid.scss index ec870b7..23fc0fd 100644 --- a/ui/css/src/modules/_wok-grid.scss +++ b/ui/css/src/modules/_wok-grid.scss @@ -36,37 +36,6 @@ top: 37px !important; } -.wok-grid-mask, .wok-list-mask { - @extend .absolute-middle; - background: rgba(255,255,255,.7); -} - -.wok-grid-loading, .wok-list-loading { - width: 100%; - white-space: nowrap; - @extend .absolute-middle; -} - -.wok-grid-loader-container, .wok-list-loader-container { - width: 120px; - height: 40px; - @extend .absolute-middle; -} - -.wok-grid-loading-icon, .wok-list-loading-icon{ - background: transparent url('#{$wok-icon-path}/spin5.svg') no-repeat 50% 50%; - @include animation(spin 2s infinite linear); - height: 20px; - width: 20px; - @extend .absolute-middle; -} - -.wok-grid-loading-text, .wok-list-loading-text { - color: $gray; - padding-top: 40px; - text-shadow: 0px 0px 10px #fff; -} - .wok-list-cell { position: relative; padding-left: 45px; diff --git a/ui/css/src/wok.scss b/ui/css/src/wok.scss index 5d4f515..9a934d5 100755 --- a/ui/css/src/wok.scss +++ b/ui/css/src/wok.scss @@ -66,6 +66,8 @@ @import "modules/wok-grid"; // Wok Datagrid @import "modules/datagrid"; +// Wok Loaders +@import "modules/loaders"; // Wok Confirm Dialog @import "modules/wok-confirm"; // Form validation classes @@ -140,50 +142,8 @@ input[type=radio].wok-radio:checked + label:before { // Animation @import "modules/animation"; + // Documentation pre { margin-top: 20px; -} - -// @media screen and (max-width: 63.75em) { -// .container { -// width: 100%; -// } -// } - -// @media screen and (max-width: 76.25em) { -// .container { -// width: 100%; -// } -// } - -// @media screen and (max-width: 84.375em) { -// .container { -// width: 100%; -// } -// } - -// @media screen and (max-width: 89em) { -// .container { -// width: 100%; -// } -// } - -// @media screen and (max-width: 99em) { -// .container { -// width: 100%; -// } -// } - -// @media screen and (max-width: 104em) { -// .container { -// width: 100%; -// } -// } - -// @media screen (min-width: 104em) and (max-width: 120em) { -// .container { -// width: 100%; -// } -// } - +} \ No newline at end of file -- 1.9.3
From: samhenri <samuel.guimaraes@eldorado.org.br> Removed double input fields when generated a new snapshot. Signed-off-by: samhenri <samuel.guimaraes@eldorado.org.br> --- ui/css/src/modules/_edit-guests.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/ui/css/src/modules/_edit-guests.scss b/ui/css/src/modules/_edit-guests.scss index 085141a..8566c49 100644 --- a/ui/css/src/modules/_edit-guests.scss +++ b/ui/css/src/modules/_edit-guests.scss @@ -29,6 +29,7 @@ form { margin: 15px 0 0; .header, + .task, .body { .column-actions { text-align: right; @@ -111,6 +112,9 @@ overflow-y: auto; overflow-x: hidden; height: 471px; + } + .body, + .task { .item { border-top: 1px solid $table-border-color; height: 53px; @@ -337,6 +341,7 @@ display: none; } + /* * Project Kimchi * -- 1.9.3
From: samhenri <samuel.guimaraes@eldorado.org.br> Signed-off-by: samhenri <samuel.guimaraes@eldorado.org.br> --- ui/css/src/modules/_wok-forms.scss | 55 ++++++++++++++++++++++++++++++++++++++ ui/css/src/wok.scss | 34 ++--------------------- 2 files changed, 57 insertions(+), 32 deletions(-) create mode 100644 ui/css/src/modules/_wok-forms.scss diff --git a/ui/css/src/modules/_wok-forms.scss b/ui/css/src/modules/_wok-forms.scss new file mode 100644 index 0000000..3f6f99a --- /dev/null +++ b/ui/css/src/modules/_wok-forms.scss @@ -0,0 +1,55 @@ +// +// Project Wok +// +// Copyright IBM, Corp. 2015 +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// + +// Custom check-boxes and radios +input[type=checkbox].wok-checkbox, +input[type=radio].wok-radio { + display: none; +} + +input[type=checkbox].wok-checkbox + label:before, +input[type=radio].wok-radio + label:before { + font-family: FontAwesome; + display: inline-block; +} + +input[type=checkbox].wok-checkbox + label:before { + content: "\f096"; + letter-spacing: 10px; +} + +input[type=checkbox].wok-checkbox:checked + label:before { + content: "\f14a"; + letter-spacing: 8px; +} + +input[type=radio].wok-radio + label:before { + content: "\f10c"; + letter-spacing: 5px; +} + +input[type=radio].wok-radio:checked + label:before { + content: "\f192"; + letter-spacing: 5px; +} + +input[type=radio].wok-checkbox + label, +input[type=radio].wok-radio + label { + cursor: pointer; + margin-right: 10px; +} diff --git a/ui/css/src/wok.scss b/ui/css/src/wok.scss index 9a934d5..db31c57 100755 --- a/ui/css/src/wok.scss +++ b/ui/css/src/wok.scss @@ -68,6 +68,8 @@ @import "modules/datagrid"; // Wok Loaders @import "modules/loaders"; +// Wok Forms +@import "modules/wok-forms"; // Wok Confirm Dialog @import "modules/wok-confirm"; // Form validation classes @@ -108,38 +110,6 @@ margin-right: 5px; } -// Custom check-boxes and radios -input[type=checkbox].wok-checkbox, -input[type=radio].wok-radio { - display: none; -} - -input[type=checkbox].wok-checkbox + label:before, -input[type=radio].wok-radio + label:before { - font-family: FontAwesome; - display: inline-block; -} - -input[type=checkbox].wok-checkbox + label:before { - content: "\f096"; - letter-spacing: 10px; -} - -input[type=checkbox].wok-checkbox:checked + label:before { - content: "\f14a"; - letter-spacing: 8px; -} - -input[type=radio].wok-radio + label:before { - content: "\f10c"; - letter-spacing: 5px; -} - -input[type=radio].wok-radio:checked + label:before { - content: "\f192"; - letter-spacing: 5px; -} - // Animation @import "modules/animation"; -- 1.9.3
From: samhenri <samuel.guimaraes@eldorado.org.br> Signed-off-by: Andre Teodoro <andreteodoro.work@gmail.com> --- configure.ac | 1 + ui/libs/Makefile.am | 2 +- ui/libs/list-js/LICENSE | 21 +++++++++++++++++++++ ui/libs/list-js/Makefile.am | 22 ++++++++++++++++++++++ ui/libs/list-js/list.min.js | 1 + ui/pages/wok-ui.html.tmpl | 1 + 6 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 ui/libs/list-js/LICENSE create mode 100644 ui/libs/list-js/Makefile.am create mode 100644 ui/libs/list-js/list.min.js diff --git a/configure.ac b/configure.ac index dd3955e..f87de14 100644 --- a/configure.ac +++ b/configure.ac @@ -132,6 +132,7 @@ AC_CONFIG_FILES([ ui/libs/jquery-ui/themes/Makefile ui/libs/jquery-ui/themes/base/Makefile ui/libs/jquery-ui/themes/base/images/Makefile + ui/libs/list-js/Makefile ui/pages/Makefile ui/pages/websockify/Makefile contrib/Makefile diff --git a/ui/libs/Makefile.am b/ui/libs/Makefile.am index d746df4..4433622 100644 --- a/ui/libs/Makefile.am +++ b/ui/libs/Makefile.am @@ -17,4 +17,4 @@ # See the License for the specific language governing permissions and # limitations under the License. -SUBDIRS = bootstrap jquery jquery-ui bootstrap-select es5-shim jquery-i18n +SUBDIRS = bootstrap jquery jquery-ui bootstrap-select es5-shim jquery-i18n list-js diff --git a/ui/libs/list-js/LICENSE b/ui/libs/list-js/LICENSE new file mode 100644 index 0000000..20b618d --- /dev/null +++ b/ui/libs/list-js/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2011-2014 Jonny Strömberg, jonnystromberg.com + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/ui/libs/list-js/Makefile.am b/ui/libs/list-js/Makefile.am new file mode 100644 index 0000000..5ac3b51 --- /dev/null +++ b/ui/libs/list-js/Makefile.am @@ -0,0 +1,22 @@ +# +# Project Wok +# +# Copyright IBM, Corp. 2013-2015 +# +# Code derived from Project Kimchi +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. + +listjsdir = $(datadir)/wok/ui/libs/list-js + +dist_listjs_DATA = $(wildcard *.js) $(NULL) diff --git a/ui/libs/list-js/list.min.js b/ui/libs/list-js/list.min.js new file mode 100644 index 0000000..56c17e3 --- /dev/null +++ b/ui/libs/list-js/list.min.js @@ -0,0 +1 @@ +!function(){function a(b,c,d){var e=a.resolve(b);if(null==e){d=d||b,c=c||"root";var f=new Error('Failed to require "'+d+'" from "'+c+'"');throw f.path=d,f.parent=c,f.require=!0,f}var g=a.modules[e];if(!g._resolving&&!g.exports){var h={};h.exports={},h.client=h.component=!0,g._resolving=!0,g.call(this,h.exports,a.relative(e),h),delete g._resolving,g.exports=h.exports}return g.exports}a.modules={},a.aliases={},a.resolve=function(b){"/"===b.charAt(0)&&(b=b.slice(1));for(var c=[b,b+".js",b+".json",b+"/index.js",b+"/index.json"],d=0;d<c.length;d++){var b=c[d];if(a.modules.hasOwnProperty(b))return b;if(a.aliases.hasOwnProperty(b))return a.aliases[b]}},a.normalize=function(a,b){var c=[];if("."!=b.charAt(0))return b;a=a.split("/"),b=b.split("/");for(var d=0;d<b.length;++d)".."==b[d]?a.pop():"."!=b[d]&&""!=b[d]&&c.push(b[d]);return a.concat(c).join("/")},a.register=function(b,c){a.modules[b]=c},a.alias=function(b,c){if(!a.modules.hasOwnProperty(b))throw new Error('Failed to alias "'+b+'", it does not exist');a.aliases[c]=b},a.relative=function(b){function c(a,b){for(var c=a.length;c--;)if(a[c]===b)return c;return-1}function d(c){var e=d.resolve(c);return a(e,b,c)}var e=a.normalize(b,"..");return d.resolve=function(d){var f=d.charAt(0);if("/"==f)return d.slice(1);if("."==f)return a.normalize(e,d);var g=b.split("/"),h=c(g,"deps")+1;return h||(h=0),d=g.slice(0,h+1).join("/")+"/deps/"+d},d.exists=function(b){return a.modules.hasOwnProperty(d.resolve(b))},d},a.register("component-classes/index.js",function(a,b,c){function d(a){if(!a)throw new Error("A DOM element reference is required");this.el=a,this.list=a.classList}var e=b("indexof"),f=/\s+/,g=Object.prototype.toString;c.exports=function(a){return new d(a)},d.prototype.add=function(a){if(this.list)return this.list.add(a),this;var b=this.array(),c=e(b,a);return~c||b.push(a),this.el.className=b.join(" "),this},d.prototype.remove=function(a){if("[object RegExp]"==g.call(a))return this.removeMatching(a);if(this.list)return this.list.remove(a),this;var b=this.array(),c=e(b,a);return~c&&b.splice(c,1),this.el.className=b.join(" "),this},d.prototype.removeMatching=function(a){for(var b=this.array(),c=0;c<b.length;c++)a.test(b[c])&&this.remove(b[c]);return this},d.prototype.toggle=function(a,b){return this.list?("undefined"!=typeof b?b!==this.list.toggle(a,b)&&this.list.toggle(a):this.list.toggle(a),this):("undefined"!=typeof b?b?this.add(a):this.remove(a):this.has(a)?this.remove(a):this.add(a),this)},d.prototype.array=function(){var a=this.el.className.replace(/^\s+|\s+$/g,""),b=a.split(f);return""===b[0]&&b.shift(),b},d.prototype.has=d.prototype.contains=function(a){return this.list?this.list.contains(a):!!~e(this.array(),a)}}),a.register("segmentio-extend/index.js",function(a,b,c){c.exports=function(a){for(var b,c=Array.prototype.slice.call(arguments,1),d=0;b=c[d];d++)if(b)for(var e in b)a[e]=b[e];return a}}),a.register("component-indexof/index.js",function(a,b,c){c.exports=function(a,b){if(a.indexOf)return a.indexOf(b);for(var c=0;c<a.length;++c)if(a[c]===b)return c;return-1}}),a.register("component-event/index.js",function(a){var b=window.addEventListener?"addEventListener":"attachEvent",c=window.removeEventListener?"removeEventListener":"detachEvent",d="addEventListener"!==b?"on":"";a.bind=function(a,c,e,f){return a[b](d+c,e,f||!1),e},a.unbind=function(a,b,e,f){return a[c](d+b,e,f||!1),e}}),a.register("timoxley-to-array/index.js",function(a,b,c){function d(a){return"[object Array]"===Object.prototype.toString.call(a)}c.exports=function(a){if("undefined"==typeof a)return[];if(null===a)return[null];if(a===window)return[window];if("string"==typeof a)return[a];if(d(a))return a;if("number"!=typeof a.length)return[a];if("function"==typeof a&&a instanceof Function)return[a];for(var b=[],c=0;c<a.length;c++)(Object.prototype.hasOwnProperty.call(a,c)||c in a)&&b.push(a[c]);return b.length?b:[]}}),a.register("javve-events/index.js",function(a,b){var c=b("event"),d=b("to-array");a.bind=function(a,b,e,f){a=d(a);for(var g=0;g<a.length;g++)c.bind(a[g],b,e,f)},a.unbind=function(a,b,e,f){a=d(a);for(var g=0;g<a.length;g++)c.unbind(a[g],b,e,f)}}),a.register("javve-get-by-class/index.js",function(a,b,c){c.exports=function(){return document.getElementsByClassName?function(a,b,c){return c?a.getElementsByClassName(b)[0]:a.getElementsByClassName(b)}:document.querySelector?function(a,b,c){return b="."+b,c?a.querySelector(b):a.querySelectorAll(b)}:function(a,b,c){var d=[],e="*";null==a&&(a=document);for(var f=a.getElementsByTagName(e),g=f.length,h=new RegExp("(^|\\s)"+b+"(\\s|$)"),i=0,j=0;g>i;i++)if(h.test(f[i].className)){if(c)return f[i];d[j]=f[i],j++}return d}}()}),a.register("javve-get-attribute/index.js",function(a,b,c){c.exports=function(a,b){var c=a.getAttribute&&a.getAttribute(b)||null;if(!c)for(var d=a.attributes,e=d.length,f=0;e>f;f++)void 0!==b[f]&&b[f].nodeName===b&&(c=b[f].nodeValue);return c}}),a.register("javve-natural-sort/index.js",function(a,b,c){c.exports=function(a,b,c){var d,e,f=/(^-?[0-9]+(\.?[0-9]*)[df]?e?[0-9]?$|^0x[0-9a-f]+$|[0-9]+)/gi,g=/(^[ ]*|[ ]*$)/g,h=/(^([\w ]+,?[\w ]+)?[\w ]+,?[\w ]+\d+:\d+(:\d+)?[\w ]?|^\d{1,4}[\/\-]\d{1,4}[\/\-]\d{1,4}|^\w+, \w+ \d+, \d{4})/,i=/^0x[0-9a-f]+$/i,j=/^0/,c=c||{},k=function(a){return c.insensitive&&(""+a).toLowerCase()||""+a},l=k(a).replace(g,"")||"",m=k(b).replace(g,"")||"",n=l.replace(f,"\x00$1\x00").replace(/\0$/,"").replace(/^\0/,"").split("\x00"),o=m.replace(f,"\x00$1\x00").replace(/\0$/,"").replace(/^\0/,"").split("\x00"),p=parseInt(l.match(i))||1!=n.length&&l.match(h)&&Date.parse(l),q=parseInt(m.match(i))||p&&m.match(h)&&Date.parse(m)||null,r=c.desc?-1:1;if(q){if(q>p)return-1*r;if(p>q)return 1*r}for(var s=0,t=Math.max(n.length,o.length);t>s;s++){if(d=!(n[s]||"").match(j)&&parseFloat(n[s])||n[s]||0,e=!(o[s]||"").match(j)&&parseFloat(o[s])||o[s]||0,isNaN(d)!==isNaN(e))return isNaN(d)?1:-1;if(typeof d!=typeof e&&(d+="",e+=""),e>d)return-1*r;if(d>e)return 1*r}return 0}}),a.register("javve-to-string/index.js",function(a,b,c){c.exports=function(a){return a=void 0===a?"":a,a=null===a?"":a,a=a.toString()}}),a.register("component-type/index.js",function(a,b,c){var d=Object.prototype.toString;c.exports=function(a){switch(d.call(a)){case"[object Date]":return"date";case"[object RegExp]":return"regexp";case"[object Arguments]":return"arguments";case"[object Array]":return"array";case"[object Error]":return"error"}return null===a?"null":void 0===a?"undefined":a!==a?"nan":a&&1===a.nodeType?"element":typeof a.valueOf()}}),a.register("list.js/index.js",function(a,b,c){!function(a,d){"use strict";var e=a.document,f=b("get-by-class"),g=b("extend"),h=b("indexof"),i=function(a,c,i){var j,k=this,l=b("./src/item")(k),m=b("./src/add-async")(k),n=b("./src/parse")(k);j={start:function(){k.listClass="list",k.searchClass="search",k.sortClass="sort",k.page=200,k.i=1,k.items=[],k.visibleItems=[],k.matchingItems=[],k.searched=!1,k.filtered=!1,k.handlers={updated:[]},k.plugins={},k.helpers={getByClass:f,extend:g,indexOf:h},g(k,c),k.listContainer="string"==typeof a?e.getElementById(a):a,k.listContainer&&(k.list=f(k.listContainer,k.listClass,!0),k.templater=b("./src/templater")(k),k.search=b("./src/search")(k),k.filter=b("./src/filter")(k),k.sort=b("./src/sort")(k),this.items(),k.update(),this.plugins())},items:function(){n(k.list),i!==d&&k.add(i)},plugins:function(){for(var a=0;a<k.plugins.length;a++){var b=k.plugins[a];k[b.name]=b,b.init(k)}}},this.add=function(a,b){if(b)return m(a,b),void 0;var c=[],e=!1;a[0]===d&&(a=[a]);for(var f=0,g=a.length;g>f;f++){var h=null;a[f]instanceof l?(h=a[f],h.reload()):(e=k.items.length>k.page?!0:!1,h=new l(a[f],d,e)),k.items.push(h),c.push(h)}return k.update(),c},this.show=function(a,b){return this.i=a,this.page=b,k.update(),k},this.remove=function(a,b,c){for(var d=0,e=0,f=k.items.length;f>e;e++)k.items[e].values()[a]==b&&(k.templater.remove(k.items[e],c),k.items.splice(e,1),f--,e--,d++);return k.update(),d},this.get=function(a,b){for(var c=[],d=0,e=k.items.length;e>d;d++){var f=k.items[d];f.values()[a]==b&&c.push(f)}return c},this.size=function(){return k.items.length},this.clear=function(){return k.templater.clear(),k.items=[],k},this.on=function(a,b){return k.handlers[a].push(b),k},this.off=function(a,b){var c=k.handlers[a],d=h(c,b);return d>-1&&c.splice(d,1),k},this.trigger=function(a){for(var b=k.handlers[a].length;b--;)k.handlers[a][b](k);return k},this.reset={filter:function(){for(var a=k.items,b=a.length;b--;)a[b].filtered=!1;return k},search:function(){for(var a=k.items,b=a.length;b--;)a[b].found=!1;return k}},this.update=function(){var a=k.items,b=a.length;k.visibleItems=[],k.matchingItems=[],k.templater.clear();for(var c=0;b>c;c++)a[c].matching()&&k.matchingItems.length+1>=k.i&&k.visibleItems.length<k.page?(a[c].show(),k.visibleItems.push(a[c]),k.matchingItems.push(a[c])):a[c].matching()?(k.matchingItems.push(a[c]),a[c].hide()):a[c].hide();return k.trigger("updated"),k},j.start()};c.exports=i}(window)}),a.register("list.js/src/search.js",function(a,b,c){var d=b("events"),e=b("get-by-class"),f=b("to-string");c.exports=function(a){var b,c,g,h,i={resetList:function(){a.i=1,a.templater.clear(),h=void 0},setOptions:function(a){2==a.length&&a[1]instanceof Array?c=a[1]:2==a.length&&"function"==typeof a[1]?h=a[1]:3==a.length&&(c=a[1],h=a[2])},setColumns:function(){c=void 0===c?i.toArray(a.items[0].values()):c},setSearchString:function(a){a=f(a).toLowerCase(),a=a.replace(/[-[\]{}()*+?.,\\^$|#]/g,"\\$&"),g=a},toArray:function(a){var b=[];for(var c in a)b.push(c);return b}},j={list:function(){for(var b=0,c=a.items.length;c>b;b++)j.item(a.items[b])},item:function(a){a.found=!1;for(var b=0,d=c.length;d>b;b++)if(j.values(a.values(),c[b]))return a.found=!0,void 0},values:function(a,c){return a.hasOwnProperty(c)&&(b=f(a[c]).toLowerCase(),""!==g&&b.search(g)>-1)?!0:!1},reset:function(){a.reset.search(),a.searched=!1}},k=function(b){return a.trigger("searchStart"),i.resetList(),i.setSearchString(b),i.setOptions(arguments),i.setColumns(),""===g?j.reset():(a.searched=!0,h?h(g,c):j.list()),a.update(),a.trigger("searchComplete"),a.visibleItems};return a.handlers.searchStart=a.handlers.searchStart||[],a.handlers.searchComplete=a.handlers.searchComplete||[],d.bind(e(a.listContainer,a.searchClass),"keyup",function(b){var c=b.target||b.srcElement,d=""===c.value&&!a.searched;d||k(c.value)}),d.bind(e(a.listContainer,a.searchClass),"input",function(a){var b=a.target||a.srcElement;""===b.value&&k("")}),a.helpers.toString=f,k}}),a.register("list.js/src/sort.js",function(a,b,c){var d=b("natural-sort"),e=b("classes"),f=b("events"),g=b("get-by-class"),h=b("get-attribute");c.exports=function(a){a.sortFunction=a.sortFunction||function(a,b,c){return c.desc="desc"==c.order?!0:!1,d(a.values()[c.valueName],b.values()[c.valueName],c)};var b={els:void 0,clear:function(){for(var a=0,c=b.els.length;c>a;a++)e(b.els[a]).remove("asc"),e(b.els[a]).remove("desc")},getOrder:function(a){var b=h(a,"data-order");return"asc"==b||"desc"==b?b:e(a).has("desc")?"asc":e(a).has("asc")?"desc":"asc"},getInSensitive:function(a,b){var c=h(a,"data-insensitive");b.insensitive="true"===c?!0:!1},setOrder:function(a){for(var c=0,d=b.els.length;d>c;c++){var f=b.els[c];if(h(f,"data-sort")===a.valueName){var g=h(f,"data-order");"asc"==g||"desc"==g?g==a.order&&e(f).add(a.order):e(f).add(a.order)}}}},c=function(){a.trigger("sortStart"),options={};var c=arguments[0].currentTarget||arguments[0].srcElement||void 0;c?(options.valueName=h(c,"data-sort"),b.getInSensitive(c,options),options.order=b.getOrder(c)):(options=arguments[1]||options,options.valueName=arguments[0],options.order=options.order||"asc",options.insensitive="undefined"==typeof options.insensitive?!0:options.insensitive),b.clear(),b.setOrder(options),options.sortFunction=options.sortFunction||a.sortFunction,a.items.sort(function(a,b){return options.sortFunction(a,b,options)}),a.update(),a.trigger("sortComplete")};return a.handlers.sortStart=a.handlers.sortStart||[],a.handlers.sortComplete=a.handlers.sortComplete||[],b.els=g(a.listContainer,a.sortClass),f.bind(b.els,"click",c),a.on("searchStart",b.clear),a.on("filterStart",b.clear),a.helpers.classes=e,a.helpers.naturalSort=d,a.helpers.events=f,a.helpers.getAttribute=h,c}}),a.register("list.js/src/item.js",function(a,b,c){c.exports=function(a){return function(b,c,d){var e=this;this._values={},this.found=!1,this.filtered=!1;var f=function(b,c,d){if(void 0===c)d?e.values(b,d):e.values(b);else{e.elm=c;var f=a.templater.get(e,b);e.values(f)}};this.values=function(b,c){if(void 0===b)return e._values;for(var d in b)e._values[d]=b[d];c!==!0&&a.templater.set(e,e.values())},this.show=function(){a.templater.show(e)},this.hide=function(){a.templater.hide(e)},this.matching=function(){return a.filtered&&a.searched&&e.found&&e.filtered||a.filtered&&!a.searched&&e.filtered||!a.filtered&&a.searched&&e.found||!a.filtered&&!a.searched},this.visible=function(){return e.elm.parentNode==a.list?!0:!1},f(b,c,d)}}}),a.register("list.js/src/templater.js",function(a,b,c){var d=b("get-by-class"),e=function(a){function b(b){if(void 0===b){for(var c=a.list.childNodes,d=0,e=c.length;e>d;d++)if(void 0===c[d].data)return c[d];return null}if(-1!==b.indexOf("<")){var f=document.createElement("div");return f.innerHTML=b,f.firstChild}return document.getElementById(a.item)}var c=b(a.item),e=this;this.get=function(a,b){e.create(a);for(var c={},f=0,g=b.length;g>f;f++){var h=d(a.elm,b[f],!0);c[b[f]]=h?h.innerHTML:""}return c},this.set=function(a,b){if(!e.create(a))for(var c in b)if(b.hasOwnProperty(c)){var f=d(a.elm,c,!0);f&&("IMG"===f.tagName&&""!==b[c]?f.src=b[c]:f.innerHTML=b[c])}},this.create=function(a){if(void 0!==a.elm)return!1;var b=c.cloneNode(!0);return b.removeAttribute("id"),a.elm=b,e.set(a,a.values()),!0},this.remove=function(b){a.list.removeChild(b.elm)},this.show=function(b){e.create(b),a.list.appendChild(b.elm)},this.hide=function(b){void 0!==b.elm&&b.elm.parentNode===a.list&&a.list.removeChild(b.elm)},this.clear=function(){if(a.list.hasChildNodes())for(;a.list.childNodes.length>=1;)a.list.removeChild(a.list.firstChild)}};c.exports=function(a){return new e(a)}}),a.register("list.js/src/filter.js",function(a,b,c){c.exports=function(a){return a.handlers.filterStart=a.handlers.filterStart||[],a.handlers.filterComplete=a.handlers.filterComplete||[],function(b){if(a.trigger("filterStart"),a.i=1,a.reset.filter(),void 0===b)a.filtered=!1;else{a.filtered=!0;for(var c=a.items,d=0,e=c.length;e>d;d++){var f=c[d];f.filtered=b(f)?!0:!1}}return a.update(),a.trigger("filterComplete"),a.visibleItems}}}),a.register("list.js/src/add-async.js",function(a,b,c){c.exports=function(a){return function(b,c,d){var e=b.splice(0,100);d=d||[],d=d.concat(a.add(e)),b.length>0?setTimeout(function(){addAsync(b,c,d)},10):(a.update(),c(d))}}}),a.register("list.js/src/parse.js",function(a,b,c){c.exports=function(a){var c=b("./item")(a),d=function(a){for(var b=a.childNodes,c=[],d=0,e=b.length;e>d;d++)void 0===b[d].data&&c.push(b[d]);return c},e=function(b,d){for(var e=0,f=b.length;f>e;e++)a.items.push(new c(d,b[e]))},f=function(b,c){var d=b.splice(0,100);e(d,c),b.length>0?setTimeout(function(){init.items.indexAsync(b,c)},10):a.update()};return function(){var b=d(a.list),c=a.valueNames;a.indexAsync?f(b,c):e(b,c)}}}),a.alias("component-classes/index.js","list.js/deps/classes/index.js"),a.alias("component-classes/index.js","classes/index.js"),a.alias("component-indexof/index.js","component-classes/deps/indexof/index.js"),a.alias("segmentio-extend/index.js","list.js/deps/extend/index.js"),a.alias("segmentio-extend/index.js","extend/index.js"),a.alias("component-indexof/index.js","list.js/deps/indexof/index.js"),a.alias("component-indexof/index.js","indexof/index.js"),a.alias("javve-events/index.js","list.js/deps/events/index.js"),a.alias("javve-events/index.js","events/index.js"),a.alias("component-event/index.js","javve-events/deps/event/index.js"),a.alias("timoxley-to-array/index.js","javve-events/deps/to-array/index.js"),a.alias("javve-get-by-class/index.js","list.js/deps/get-by-class/index.js"),a.alias("javve-get-by-class/index.js","get-by-class/index.js"),a.alias("javve-get-attribute/index.js","list.js/deps/get-attribute/index.js"),a.alias("javve-get-attribute/index.js","get-attribute/index.js"),a.alias("javve-natural-sort/index.js","list.js/deps/natural-sort/index.js"),a.alias("javve-natural-sort/index.js","natural-sort/index.js"),a.alias("javve-to-string/index.js","list.js/deps/to-string/index.js"),a.alias("javve-to-string/index.js","list.js/deps/to-string/index.js"),a.alias("javve-to-string/index.js","to-string/index.js"),a.alias("javve-to-string/index.js","javve-to-string/index.js"),a.alias("component-type/index.js","list.js/deps/type/index.js"),a.alias("component-type/index.js","type/index.js"),"object"==typeof exports?module.exports=a("list.js"):"function"==typeof define&&define.amd?define(function(){return a("list.js")}):this.List=a("list.js")}(); \ No newline at end of file diff --git a/ui/pages/wok-ui.html.tmpl b/ui/pages/wok-ui.html.tmpl index 6d77060..2e7e94f 100644 --- a/ui/pages/wok-ui.html.tmpl +++ b/ui/pages/wok-ui.html.tmpl @@ -63,6 +63,7 @@ <script src="$href('libs/jquery-ui/jquery-ui.min.js')"></script> <script src="$href('libs/jquery-ui/jquery-ui-i18n.min.js')"></script> <script src="$href('libs/jquery-i18n/jquery.i18n.min.js')"></script> + <script src="$href('libs/list-js/list.min.js')"></script> <script src="$href('libs/bootstrap/bootstrap.min.js')"></script> <script src="$href('libs/bootstrap-select/dist/js/bootstrap-select.min.js')"></script> <script src="$href('base64/jquery.base64.js')"></script> -- 1.9.3
From: samhenri <samuel.guimaraes@eldorado.org.br> Signed-off-by: samhenri <samuel.guimaraes@eldorado.org.br> --- ui/css/src/modules/_templates.scss | 39 +++++++++++++++++++++----------------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss index bc5b3be..5f4675f 100644 --- a/ui/css/src/modules/_templates.scss +++ b/ui/css/src/modules/_templates.scss @@ -41,9 +41,6 @@ } #template-edit-window { - .tab-content { - overflow: hidden; - } .tab-content .tab-pane { position: relative; } @@ -83,10 +80,10 @@ font-family: $font-family-light; font-weight: 400; font-size: 12.5pt; - vertical-align: bottom; + vertical-align: baseline; border-bottom: none; border-top: 0; - line-height: $line-height-base; + line-height: 42px; height: 42px; } } @@ -107,11 +104,9 @@ padding: $table-cell-padding; display: inline-block; vertical-align: middle; - input[type="text"].form-control { height: 40px; } - } } } @@ -203,7 +198,6 @@ } } - /* VM List View classes*/ #templates-root-container { @@ -211,22 +205,18 @@ display: block; width: 100%; list-style-type: none; + margin: 0; + padding-left: 0; background: $table-bg; - > li:nth-child(2n+2) { - background-color: $table-bg-accent; - } - > li:nth-child(2n+3) { - background-color: $table-bg; - } .wok-vm-header { - border-top: 0 none; + border-bottom: 1px solid $table-first-row-border-color; > span { padding: $table-cell-padding; display: inline-block; vertical-align: bottom; height: 36px; font-family: $font-family-light; - font-weight: 400; + font-weight: 300; font-size: 12.5pt; line-height: $line-height-base; border-bottom: none; @@ -238,7 +228,7 @@ clear: both; border-top: 1px solid $table-border-color; &:first-child { - border-color: $table-first-row-border-color; + border-top: 0; } > span { padding: $table-cell-padding; @@ -247,11 +237,26 @@ font-family: $font-family-sans-serif; font-size: 12.5pt; line-height: (1 + $line-height-base); + font-weight: 400; } .column-type { padding-left: 40px !important; } } + .ul-body { + display: block; + width: 100%; + clear: both; + padding: 0; + margin: 0; + list-style: none; + > li:nth-child(even) { + background-color: $table-bg-accent; + } + > li:nth-child(odd) { + background-color: $table-bg; + } + } .column-name { width: 17.4900%; font-weight: bold; -- 1.9.3
From: samhenri <samuel.guimaraes@eldorado.org.br> Signed-off-by: samhenri <samuel.guimaraes@eldorado.org.br> --- ui/css/src/modules/_jqueryui.scss | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 ui/css/src/modules/_jqueryui.scss diff --git a/ui/css/src/modules/_jqueryui.scss b/ui/css/src/modules/_jqueryui.scss deleted file mode 100644 index e69de29..0000000 -- 1.9.3
From: samhenri <samuel.guimaraes@eldorado.org.br> Signed-off-by: samhenri <samuel.guimaraes@eldorado.org.br> --- ui/js/src/wok.window.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/ui/js/src/wok.window.js b/ui/js/src/wok.window.js index d50fc6d..4edf25e 100644 --- a/ui/js/src/wok.window.js +++ b/ui/js/src/wok.window.js @@ -38,6 +38,11 @@ wok.window = (function() { _listeners[windowID] = settings['close']; var windowNode = $('<div id="' + windowID + '" class="modal-dialog"></div>'); + $('#' + target).modal({ + backdrop: 'static', + keyboard: false + }); + $('#' + target).modal('show'); $('#' + target).on('hidden.bs.modal', function() { -- 1.9.3
From: samhenri <samuel.guimaraes@eldorado.org.br> Signed-off-by: Andre Teodoro <andreteodoro.work@gmail.com> --- ui/css/src/modules/_about.scss | 32 ++++++++++++++++++++++++++++++++ ui/css/src/wok.scss | 18 +++++++++--------- ui/js/src/wok.main.js | 5 +++-- ui/pages/wok-ui.html.tmpl | 40 +++++++++++++++++++--------------------- 4 files changed, 63 insertions(+), 32 deletions(-) create mode 100644 ui/css/src/modules/_about.scss diff --git a/ui/css/src/modules/_about.scss b/ui/css/src/modules/_about.scss new file mode 100644 index 0000000..4d9cdae --- /dev/null +++ b/ui/css/src/modules/_about.scss @@ -0,0 +1,32 @@ +// +// Project Wok +// +// Copyright IBM, Corp. 2015 +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// + +#aboutModal .modal-body > .content { + text-align: center; + margin: 0 auto; + + > img { + width: 225px; + } + + h2 { + border-top: 1px solid $gray-light; + padding-top: 15px; + } + +} \ No newline at end of file diff --git a/ui/css/src/wok.scss b/ui/css/src/wok.scss index db31c57..184606a 100755 --- a/ui/css/src/wok.scss +++ b/ui/css/src/wok.scss @@ -74,21 +74,21 @@ @import "modules/wok-confirm"; // Form validation classes @import "modules/validation"; -// Wok jQuery-UI Accordion -@import "modules/jqueryui"; -// Wok ISO / VM / Template list + @import "modules/iso-list"; -// To do - Group into Kimchi -// Templates - To do: move to Kimchi + +@import "modules/about"; + @import "modules/guests"; -// Templates - To do: move to Kimchi + @import "modules/edit-guests"; -// Templates - To do: move to Kimchi + @import "modules/templates"; -// Networks - To do: move to Kimchi + @import "modules/network"; -// Networks - To do: move to Kimchi + @import "modules/storage"; + // Utils .absolute-middle { margin: auto; diff --git a/ui/js/src/wok.main.js b/ui/js/src/wok.main.js index e672259..b7b13a2 100644 --- a/ui/js/src/wok.main.js +++ b/ui/js/src/wok.main.js @@ -335,9 +335,10 @@ wok.main = function() { // Set handler for about button $('#btn-about').on('click', function(event) { - wok.window.open({"content": $('#about-tmpl').html()}); event.preventDefault(); - }); + }); + + $("#aboutModal").append($("#about-tmpl").html()); // Set handler for help button $('#btn-help').on('click', wok.openHelp); diff --git a/ui/pages/wok-ui.html.tmpl b/ui/pages/wok-ui.html.tmpl index 2e7e94f..e315b91 100644 --- a/ui/pages/wok-ui.html.tmpl +++ b/ui/pages/wok-ui.html.tmpl @@ -120,7 +120,7 @@ <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-question-circle"></i><span class="topbar-text">$_("Help")</span><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a id="btn-help" href="javascript: void(0);">$_("Help")</a></li> - <li><a id="btn-about" href="javascript:void(0);">$_("About")</a></li> + <li><a id="btn-about" href="#" data-toggle="modal" data-target="#aboutModal">$_("About")</a></li> </ul> </li> </ul> @@ -159,27 +159,25 @@ </div> </div> -<script id="about-tmpl" type="wok/template"> - <div class="window about-window"> - <header> - <h1 class="title"><img alt="Kimchi logo" src="images/logo.ico"/> $_("About")</h1> - <div class="close">X</div> - </header> - <div class="content" align="center"> - <center> - <div> - <br/> - <br/> - <img src="images/theme-default/logo-plain.gif"/> - <br/> - <br/> - <h2>Kimchi</h2> - <p>$_("Version:") $get_version()</p> - </div> - </center> - </div> + <div class="modal fade host-modal" id="aboutModal" tabindex="-1" role="dialog" labelledby="aboutModalLabel" aria-hidden="true"> </div> -</script> + <script id="about-tmpl" type="wok/template"> + <div class="modal-dialog modal-sm" role="document"> + <div class="modal-content" > + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> + <h4 class="modal-title">$_("About")</h4> + </div> + <div class="modal-body"> + <div class="content"> + <img src="images/theme-default/logo-flat.svg" /> + <h2>Kimchi</h2> + <p>$_("Version:") $get_version()</p> + </div> + </div> + </div> + </div> + </script> </body> </html> -- 1.9.3
participants (2)
-
Aline Manera -
sguimaraes943＠gmail.com