[PATCH] [Wok 0/3] Multiple UI patches for DataTables redesigned panels
From: Samuel Guimarães <sguimaraes943@gmail.com> This patchtset contains some updates that are required for the new redesigned panels in Ginger Samuel Guimarães (3): Minor change in Wok Drop-Downs to fix text alignment with different icons and locales Fixed minor issue with sortable icons on Datatables.net CSS and with default DOM in JS Added IP Address sorting plugin for Datatables.net configure.ac | 2 + ui/css/datatables.bootstrap.css | 9 ++ ui/css/src/datatables.bootstrap.scss | 8 ++ ui/css/src/modules/_buttons.scss | 9 ++ ui/css/src/modules/_menu-flat.scss | 44 +++++++-- ui/css/wok.css | 102 ++++++++++++++++++-- ui/js/src/wok.datatables.js | 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 + 13 files changed, 327 insertions(+), 15 deletions(-) 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 -- 2.5.5
From: Samuel Guimarães <sguimaraes943@gmail.com> Signed-off-by: Samuel Guimarães <sguimaraes943@gmail.com> --- 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@gmail.com> Signed-off-by: Samuel Guimarães <sguimaraes943@gmail.com> --- ui/css/datatables.bootstrap.css | 9 +++++++++ ui/css/src/datatables.bootstrap.scss | 8 ++++++++ ui/js/src/wok.datatables.js | 2 +- 3 files changed, 18 insertions(+), 1 deletion(-) diff --git a/ui/css/datatables.bootstrap.css b/ui/css/datatables.bootstrap.css index e039ce8..6d4e19d 100644 --- a/ui/css/datatables.bootstrap.css +++ b/ui/css/datatables.bootstrap.css @@ -79,6 +79,10 @@ div.dataTables_wrapper div.dataTables_filter .form-control { height: 34px; } +div.dataTables_wrapper div.datatable-footer { + margin: 15px 0; +} + div.dataTables_wrapper div.dataTables_info { padding-top: 8px; white-space: nowrap; @@ -183,6 +187,10 @@ table.dataTable tfoot { display: none; } +table.dataTable tbody td.tabular-data { + font-feature-settings: "tnum"; +} + div.dataTables_scrollHead table.dataTable { margin-bottom: 0 !important; } @@ -193,6 +201,7 @@ div.dataTables_scrollBody table { margin-bottom: 0 !important; } +div.dataTables_scrollBody table thead .sorting:before, div.dataTables_scrollBody table thead .sorting:after, div.dataTables_scrollBody table thead .sorting_asc:after, div.dataTables_scrollBody table thead .sorting_desc:after { diff --git a/ui/css/src/datatables.bootstrap.scss b/ui/css/src/datatables.bootstrap.scss index 854fbe0..7f0c841 100644 --- a/ui/css/src/datatables.bootstrap.scss +++ b/ui/css/src/datatables.bootstrap.scss @@ -105,6 +105,10 @@ div.dataTables_wrapper { } } + div.datatable-footer { + margin: 15px 0; + } + div.dataTables_info { padding-top: 8px; white-space: nowrap; @@ -204,6 +208,9 @@ table.dataTable tfoot { display: none; // Wok doesn't have tfoot on tables } +table.dataTable tbody td.tabular-data { + font-feature-settings: "tnum"; +} // Scrolling div.dataTables_scrollHead table.dataTable { @@ -217,6 +224,7 @@ div.dataTables_scrollBody { margin-bottom: 0 !important; thead { // Hide sort icons + .sorting:before, .sorting:after, .sorting_asc:after, .sorting_desc:after { diff --git a/ui/js/src/wok.datatables.js b/ui/js/src/wok.datatables.js index 19eda57..663868d 100644 --- a/ui/js/src/wok.datatables.js +++ b/ui/js/src/wok.datatables.js @@ -35,7 +35,7 @@ wok.initCompleteDataTableCallback = function(e) { $.extend( true, $.fn.dataTable.defaults, { "sPaginationType": "full_numbers", - "dom": '<"row"<"col-sm-12 filter"<"pull-right"l><"pull-right"f>>><"row"<"col-sm-12"t>><"row"<"col-sm-6 pages"p><"col-sm-6 info"i>>', + "dom": '<"row"<"col-sm-12 filter"<"pull-right"l><"pull-right"f>>><"row"<"col-sm-12"t>><"row datatable-footer"<"col-sm-6 pages"p><"col-sm-6 info"i>>', "initComplete": function(settings, json) { wok.initCompleteDataTableCallback(settings); } -- 2.5.5
From: Samuel Guimarães <sguimaraes943@gmail.com> Signed-off-by: Samuel Guimarães <sguimaraes943@gmail.com> --- 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
participants (2)
-
Aline Manera -
sguimaraes943＠gmail.com