From: Samuel Guimarães <sguimaraes943(a)gmail.com&gt; Signed-off-by: Samuel Guimarães <sguimaraes943(a)gmail.com&gt; --- ui/css/src/modules/_buttons.scss | 9 ++++ ui/css/src/modules/_menu-flat.scss | 44 +++++++++++++--- ui/css/wok.css | 102 ++++++++++++++++++++++++++++++++++--- 3 files changed, 141 insertions(+), 14 deletions(-) diff --git a/ui/css/src/modules/_buttons.scss b/ui/css/src/modules/_buttons.scss index a8f9efa..34cee31 100644 --- a/ui/css/src/modules/_buttons.scss +++ b/ui/css/src/modules/_buttons.scss @@ -42,4 +42,13 @@ .btn-login { @include button-variant($btn-login-color, $btn-login-bg, $btn-login-border); +} + +.btn-group > span > .btn { + @include button-variant($btn-primary-color, $kimchi-dropdown, $kimchi-dropdown); + font-weight: 700; + font-size: $font-size-btn; + background: $kimchi-dropdown; + height: 40px; + padding: 4px 12px; } \ 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 ba9016b..0b0fa90 100644 --- a/ui/css/src/modules/_menu-flat.scss +++ b/ui/css/src/modules/_menu-flat.scss @@ -21,6 +21,30 @@ // Menu-Flat Drop-Down // -------------------------------------------------- // Dropdown arrow/caret + +.btn-group > .menu-flat.dropdown, +.btn-group > .menu-flat.dropup { + display: inline-block; + &.hidden { + display: none; + } +} + +.btn-group > .menu-flat { + .btn, + .dropdown-menu { + min-width: 130px !important; + } +} + +.btn-group > .menu-flat[class*="action"], +.btn-group > .menu-flat[class*="actions"] { + .btn, + .dropdown-menu { + min-width: 160px !important; + } +} + .menu-flat { .btn { background: $kimchi-dropdown !important; @@ -29,9 +53,10 @@ font-family: $font-family-bold; font-weight: 700; font-size: $font-size-btn; + text-align: left; position: relative; height: 40px; - padding: 4px 45px 5px 38px; + padding: 4px 45px 5px 45px; & > i { font-size: 22px; vertical-align: bottom; @@ -43,10 +68,15 @@ top: 0; left: 6px; } + // This rule will allow to use different icons for the drop-down button instead of the default .edit-alt class + & > i:first-child { + left: 12px; + text-align: center; + } & > i:before { line-height: 40px; } - .edit-alt { + span.edit-alt { background: transparent url('#{$wok-icon-path}/edit-alt.svg') no-repeat 50% 50%; background-size: 100%; vertical-align: bottom; @@ -79,7 +109,7 @@ text-decoration: inherit; width: 1.2em; height: 1.2em; - margin: .5em; + margin: .5em .85em; text-align: center; font-variant: normal; text-transform: none; @@ -237,8 +267,8 @@ // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown // menu with the parent. .dropdown-menu-right { - left: auto; // Reset the default from `.dropdown-menu` - right: 0; + left: auto !important; // Reset the default from `.dropdown-menu` + right: 0 !important; } // With v3, we enabled auto-flipping if you have a dropdown within a right @@ -248,8 +278,8 @@ // This is only for left-aligning a dropdown menu within a `.navbar-right` or // `.pull-right` nav component. .dropdown-menu-left { - left: 0; - right: auto; + left: 0 !important; + right: auto !important; } // Dropdown section headers diff --git a/ui/css/wok.css b/ui/css/wok.css index 7411ffd..1774514 100644 --- a/ui/css/wok.css +++ b/ui/css/wok.css @@ -477,6 +477,88 @@ fieldset[disabled] .btn-login.active { background-color: #fff; } +.btn-group > span > .btn { + color: #fff; + background-color: #4d4c4e; + border-color: #4d4c4e; + font-weight: 700; + font-size: 13.5pt; + background: #4d4c4e; + height: 40px; + padding: 4px 12px; +} + +.btn-group > span > .btn:focus, .btn-group > span > .btn.focus { + color: #fff; + background-color: #343334; + border-color: #0d0d0d; +} + +.btn-group > span > .btn:hover { + color: #fff; + background-color: #343334; + border-color: #2e2e2f; +} + +.btn-group > span > .btn:active, .btn-group > span > .btn.active, +.open > .btn-group > span > .btn.dropdown-toggle { + color: #fff; + background-color: #343334; + border-color: #2e2e2f; +} + +.btn-group > span > .btn:active:hover, .btn-group > span > .btn:active:focus, .btn-group > span > .btn:active.focus, .btn-group > span > .btn.active:hover, .btn-group > span > .btn.active:focus, .btn-group > span > .btn.active.focus, +.open > .btn-group > span > .btn.dropdown-toggle:hover, +.open > .btn-group > span > .btn.dropdown-toggle:focus, +.open > .btn-group > span > .btn.dropdown-toggle.focus { + color: #fff; + background-color: #222122; + border-color: #0d0d0d; +} + +.btn-group > span > .btn:active, .btn-group > span > .btn.active, +.open > .btn-group > span > .btn.dropdown-toggle { + background-image: none; +} + +.btn-group > span > .btn.disabled, .btn-group > span > .btn.disabled:hover, .btn-group > span > .btn.disabled:focus, .btn-group > span > .btn.disabled.focus, .btn-group > span > .btn.disabled:active, .btn-group > span > .btn.disabled.active, .btn-group > span > .btn[disabled], .btn-group > span > .btn[disabled]:hover, .btn-group > span > .btn[disabled]:focus, .btn-group > span > .btn[disabled].focus, .btn-group > span > .btn[disabled]:active, .btn-group > span > .btn[disabled].active, +fieldset[disabled] .btn-group > span > .btn, +fieldset[disabled] .btn-group > span > .btn:hover, +fieldset[disabled] .btn-group > span > .btn:focus, +fieldset[disabled] .btn-group > span > .btn.focus, +fieldset[disabled] .btn-group > span > .btn:active, +fieldset[disabled] .btn-group > span > .btn.active { + background-color: #4d4c4e; + border-color: #4d4c4e; +} + +.btn-group > span > .btn .badge { + color: #4d4c4e; + background-color: #fff; +} + +.btn-group > .menu-flat.dropdown, +.btn-group > .menu-flat.dropup { + display: inline-block; +} + +.btn-group > .menu-flat.dropdown.hidden, +.btn-group > .menu-flat.dropup.hidden { + display: none; +} + +.btn-group > .menu-flat .btn, +.btn-group > .menu-flat .dropdown-menu { + min-width: 130px !important; +} + +.btn-group > .menu-flat[class*="action"] .btn, +.btn-group > .menu-flat[class*="action"] .dropdown-menu, +.btn-group > .menu-flat[class*="actions"] .btn, +.btn-group > .menu-flat[class*="actions"] .dropdown-menu { + min-width: 160px !important; +} + .menu-flat .btn { background: #4d4c4e !important; min-width: 160px; @@ -484,9 +566,10 @@ fieldset[disabled] .btn-login.active { font-family: "Open Sans", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 700; font-size: 13.5pt; + text-align: left; position: relative; height: 40px; - padding: 4px 45px 5px 38px; + padding: 4px 45px 5px 45px; } .menu-flat .btn > i { @@ -501,11 +584,16 @@ fieldset[disabled] .btn-login.active { left: 6px; } +.menu-flat .btn > i:first-child { + left: 12px; + text-align: center; +} + .menu-flat .btn > i:before { line-height: 40px; } -.menu-flat .btn .edit-alt { +.menu-flat .btn span.edit-alt { background: transparent url("/images/theme-default/edit-alt.svg") no-repeat 50% 50%; background-size: 100%; vertical-align: bottom; @@ -540,7 +628,7 @@ fieldset[disabled] .btn-login.active { text-decoration: inherit; width: 1.2em; height: 1.2em; - margin: .5em; + margin: .5em .85em; text-align: center; font-variant: normal; text-transform: none; @@ -686,13 +774,13 @@ fieldset[disabled] .btn-login.active { } .dropdown-menu-right { - left: auto; - right: 0; + left: auto !important; + right: 0 !important; } .dropdown-menu-left { - left: 0; - right: auto; + left: 0 !important; + right: auto !important; } .dropdown-header { -- 2.5.5

From: Samuel Guimarães <sguimaraes943(a)gmail.com&gt; Signed-off-by: Samuel Guimarães <sguimaraes943(a)gmail.com&gt; --- configure.ac | 2 + ui/libs/datatables/js/Makefile.am | 2 + ui/libs/datatables/js/plugins/Makefile.am | 19 ++++ ui/libs/datatables/js/plugins/ip-address/LICENSE | 20 ++++ .../datatables/js/plugins/ip-address/Makefile.am | 21 +++++ .../datatables/js/plugins/ip-address/ip-address.js | 103 +++++++++++++++++++++ ui/pages/wok-ui.html.tmpl | 1 + 7 files changed, 168 insertions(+) create mode 100644 ui/libs/datatables/js/plugins/Makefile.am create mode 100644 ui/libs/datatables/js/plugins/ip-address/LICENSE create mode 100644 ui/libs/datatables/js/plugins/ip-address/Makefile.am create mode 100644 ui/libs/datatables/js/plugins/ip-address/ip-address.js diff --git a/configure.ac b/configure.ac index c7a2787..ff41c84 100644 --- a/configure.ac +++ b/configure.ac @@ -145,6 +145,8 @@ AC_CONFIG_FILES([ ui/libs/moment/Makefile ui/libs/datatables/Makefile ui/libs/datatables/js/Makefile + ui/libs/datatables/js/plugins/Makefile + ui/libs/datatables/js/plugins/ip-address/Makefile ui/libs/datatables/css/Makefile ui/libs/typeahead/Makefile ui/pages/Makefile diff --git a/ui/libs/datatables/js/Makefile.am b/ui/libs/datatables/js/Makefile.am index d50991c..2222ab0 100644 --- a/ui/libs/datatables/js/Makefile.am +++ b/ui/libs/datatables/js/Makefile.am @@ -16,6 +16,8 @@ # See the License for the specific language governing permissions and # limitations under the License. +SUBDIRS = plugins + datatablesjsdir = $(datadir)/wok/ui/libs/datatables/js dist_datatablesjs_DATA = $(wildcard *.js) $(NULL) diff --git a/ui/libs/datatables/js/plugins/Makefile.am b/ui/libs/datatables/js/plugins/Makefile.am new file mode 100644 index 0000000..05cb35f --- /dev/null +++ b/ui/libs/datatables/js/plugins/Makefile.am @@ -0,0 +1,19 @@ +# +# Project Wok +# +# Copyright IBM Corp, 2016 +# +# +# 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. + +SUBDIRS = ip-address diff --git a/ui/libs/datatables/js/plugins/ip-address/LICENSE b/ui/libs/datatables/js/plugins/ip-address/LICENSE new file mode 100644 index 0000000..9ade2f1 --- /dev/null +++ b/ui/libs/datatables/js/plugins/ip-address/LICENSE @@ -0,0 +1,20 @@ +Copyright (c) 2010-2015 SpryMedia Limited +http://datatables.net + +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/datatables/js/plugins/ip-address/Makefile.am b/ui/libs/datatables/js/plugins/ip-address/Makefile.am new file mode 100644 index 0000000..f823bae --- /dev/null +++ b/ui/libs/datatables/js/plugins/ip-address/Makefile.am @@ -0,0 +1,21 @@ +# +# Project Wok +# +# Copyright IBM Corp, 2016 +# +# +# 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. + +datatablesipaddressjsdir = $(datadir)/wok/ui/libs/datatables/js/plugins/ip-address/ip-address.js + +dist_datatablesipaddressjs_DATA = $(wildcard *.js) $(NULL) diff --git a/ui/libs/datatables/js/plugins/ip-address/ip-address.js b/ui/libs/datatables/js/plugins/ip-address/ip-address.js new file mode 100644 index 0000000..28ff323 --- /dev/null +++ b/ui/libs/datatables/js/plugins/ip-address/ip-address.js @@ -0,0 +1,103 @@ +/** + * Sorts a column containing IP addresses (IPv4 and IPv6) in typical dot + * notation / colon. This can be most useful when using DataTables for a + * networking application, and reporting information containing IP address. + * + * @name IP addresses + * @summary Sort IP addresses numerically + * @author Dominique Fournier + * @author Brad Wasson + * + * @example + * $('#example').dataTable( { + * columnDefs: [ + * { type: 'ip-address', targets: 0 } + * ] + * } ); + */ + +jQuery.extend( jQuery.fn.dataTableExt.oSort, { + "ip-address-pre": function ( a ) { + var i, item; + var m = a.split("."), + n = a.split(":"), + x = "", + xa = ""; + + if (m.length == 4) { + // IPV4 + for(i = 0; i < m.length; i++) { + item = m[i]; + + if(item.length == 1) { + x += "00" + item; + } + else if(item.length == 2) { + x += "0" + item; + } + else { + x += item; + } + } + } + else if (n.length > 0) { + // IPV6 + var count = 0; + for(i = 0; i < n.length; i++) { + item = n[i]; + + if (i > 0) { + xa += ":"; + } + + if(item.length === 0) { + count += 0; + } + else if(item.length == 1) { + xa += "000" + item; + count += 4; + } + else if(item.length == 2) { + xa += "00" + item; + count += 4; + } + else if(item.length == 3) { + xa += "0" + item; + count += 4; + } + else { + xa += item; + count += 4; + } + } + + // Padding the :: + n = xa.split(":"); + var paddDone = 0; + + for (i = 0; i < n.length; i++) { + item = n[i]; + + if (item.length === 0 && paddDone === 0) { + for (var padding = 0 ; padding < (32-count) ; padding++) { + x += "0"; + paddDone = 1; + } + } + else { + x += item; + } + } + } + + return x; + }, + + "ip-address-asc": function ( a, b ) { + return ((a < b) ? -1 : ((a > b) ? 1 : 0)); + }, + + "ip-address-desc": function ( a, b ) { + return ((a < b) ? 1 : ((a > b) ? -1 : 0)); + } +}); \ No newline at end of file diff --git a/ui/pages/wok-ui.html.tmpl b/ui/pages/wok-ui.html.tmpl index e238a34..e49b602 100644 --- a/ui/pages/wok-ui.html.tmpl +++ b/ui/pages/wok-ui.html.tmpl @@ -87,6 +87,7 @@ <script src="$href('libs/lodash/lodash.js')"></script> <script src="$href('libs/moment/moment-with-locales.min.js')"></script> <script src="$href('libs/datatables/js/datatables.min.js')"></script> + <script src="$href('libs/datatables/js/plugins/ip-address/ip-address.js')"></script> <script src="$href('base64/jquery.base64.js')"></script> <script src="$href('js/wok.min.js')"></script> <!-- This is used for detecting if the UI needs to be built --> -- 2.5.5