From 6b53324c97bfc80ed14dfca6a5dbc879950715b9 Mon Sep 17 00:00:00 2001 From: Robert Jaros Date: Thu, 3 Oct 2019 19:03:21 +0200 Subject: Upgrade to Bootstrap 4. Upgrade to Font Awesome 5. Restructure modules. --- src/main/resources/css/style.css | 78 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 src/main/resources/css/style.css (limited to 'src/main/resources') diff --git a/src/main/resources/css/style.css b/src/main/resources/css/style.css new file mode 100644 index 00000000..7323772b --- /dev/null +++ b/src/main/resources/css/style.css @@ -0,0 +1,78 @@ +.splitpanel-vertical { + display: flex; + flex-direction: row; + overflow: auto; +} + +.splitpanel-vertical > *:first-child { + max-width: calc(100% - 9px); +} + +.splitpanel-vertical > * { + flex: 0 0 auto; + overflow: auto; +} + +.splitpanel-vertical > *:last-child { + flex: 1 1 auto; + overflow: auto; +} + +.splitpanel-horizontal { + display: flex; + flex-direction: column; + overflow: auto; +} + +.splitpanel-horizontal > *:first-child { + max-height: calc(100% - 9px); +} + +.splitpanel-horizontal > * { + flex: 0 0 auto; + overflow: auto; +} + +.splitpanel-horizontal > *:last-child { + flex: 1 1 auto; + overflow: auto; +} + + +.splitter-vertical { + flex: 0 0 auto; + width: 9px; + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAhCAQAAABOpSL+AAAAIklEQVR4AWMwbb/PdR+JZDD9f1/oPhI5sgVGBSruc9xHIgGdSQqqQJGkRgAAAABJRU5ErkJggg==') center center no-repeat #cecece; + cursor: col-resize; +} + +.splitter-horizontal { + flex: 0 0 auto; + height: 9px; + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAICAQAAADdTl4aAAAAIElEQVQoz2MwrTD9TxFsZ7jPcV+IIsjFQAUw6hFqegQA+xzRHT2p7pEAAAAASUVORK5CYII=') center center no-repeat #cecece; + cursor: row-resize; +} + +.trix-control { + overflow-y: auto; +} + +trix-toolbar .trix-button-group { + margin-bottom: 3px; +} + +.tabulator-row .tabulator-cell.tabulator-editing input, .tabulator-row .tabulator-cell.tabulator-editing select { + border: 1px solid #ccc; + border-radius: 4px; +} + +.tabulator-row .tabulator-cell.tabulator-editing input:focus, .tabulator-row .tabulator-cell.tabulator-editing select:focus { + border-color: #66afe9; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6); +} + +.tabulator-row .tabulator-cell.tabulator-editing { + border-right: 1px solid #1d68cd !important; + padding: 2px !important; +} -- cgit From 8427632d0ba7e31e7a0802d2eed7f151ef174a4b Mon Sep 17 00:00:00 2001 From: Robert Jaros Date: Sat, 5 Oct 2019 15:28:28 +0200 Subject: Updated Select form control. --- .../kvision-bootstrap-select/build.gradle | 4 +- .../kotlin/pl/treksoft/kvision/KVManagerSelect.kt | 5 + .../ajax-bootstrap-select.cs-CZ.min.js | 23 ++ .../ajax-bootstrap-select.sr-SP.min.js | 23 ++ .../bootstrap-select/bootstrap-select-i18n.min.js | 2 +- .../pl/treksoft/kvision/KVManagerBootstrap.kt | 1 - .../src/main/resources/css/kvbootstrap.css | 295 -------------------- src/main/kotlin/pl/treksoft/kvision/KVManager.kt | 4 +- src/main/resources/css/style.css | 310 ++++++++++++++++++++- 9 files changed, 365 insertions(+), 302 deletions(-) create mode 100644 kvision-modules/kvision-bootstrap-select/src/main/resources/js/locales/ajax-bootstrap-select/ajax-bootstrap-select.cs-CZ.min.js create mode 100644 kvision-modules/kvision-bootstrap-select/src/main/resources/js/locales/ajax-bootstrap-select/ajax-bootstrap-select.sr-SP.min.js delete mode 100644 kvision-modules/kvision-bootstrap/src/main/resources/css/kvbootstrap.css (limited to 'src/main/resources') diff --git a/kvision-modules/kvision-bootstrap-select/build.gradle b/kvision-modules/kvision-bootstrap-select/build.gradle index 83bcd627..7c10515f 100644 --- a/kvision-modules/kvision-bootstrap-select/build.gradle +++ b/kvision-modules/kvision-bootstrap-select/build.gradle @@ -7,8 +7,8 @@ dependencies { kotlinFrontend { npm { - dependency("bootstrap-select", "1.12.4") - dependency("ajax-bootstrap-select", "1.4.3") + dependency("bootstrap-select", "1.13.11") + dependency("ajax-bootstrap-select", "1.4.5") } } diff --git a/kvision-modules/kvision-bootstrap-select/src/main/kotlin/pl/treksoft/kvision/KVManagerSelect.kt b/kvision-modules/kvision-bootstrap-select/src/main/kotlin/pl/treksoft/kvision/KVManagerSelect.kt index 3617c417..09f92a0d 100644 --- a/kvision-modules/kvision-bootstrap-select/src/main/kotlin/pl/treksoft/kvision/KVManagerSelect.kt +++ b/kvision-modules/kvision-bootstrap-select/src/main/kotlin/pl/treksoft/kvision/KVManagerSelect.kt @@ -36,6 +36,7 @@ internal object KVManagerSelect { require("./js/locales/bootstrap-select/bootstrap-select-i18n.min.js") require("ajax-bootstrap-select/dist/css/ajax-bootstrap-select.min.css") require("ajax-bootstrap-select/dist/js/ajax-bootstrap-select.min.js") + require("./js/locales/ajax-bootstrap-select/ajax-bootstrap-select.cs-CZ.min.js") require("./js/locales/ajax-bootstrap-select/ajax-bootstrap-select.de-DE.min.js") require("./js/locales/ajax-bootstrap-select/ajax-bootstrap-select.es-ES.min.js") require("./js/locales/ajax-bootstrap-select/ajax-bootstrap-select.fr-FR.min.js") @@ -46,7 +47,11 @@ internal object KVManagerSelect { require("./js/locales/ajax-bootstrap-select/ajax-bootstrap-select.pl-PL.min.js") require("./js/locales/ajax-bootstrap-select/ajax-bootstrap-select.pt-BR.min.js") require("./js/locales/ajax-bootstrap-select/ajax-bootstrap-select.ru-RU.min.js") + require("./js/locales/ajax-bootstrap-select/ajax-bootstrap-select.sr-SP.min.js") require("./js/locales/ajax-bootstrap-select/ajax-bootstrap-select.tr-TR.min.js") + js("$.fn.selectpicker.Constructor.BootstrapVersion = '4';") + js("$.fn.selectpicker.Constructor.DEFAULTS.styleBase = 'form-control';"); + js("$.fn.selectpicker.Constructor.DEFAULTS.style = '';") } internal fun init() {} diff --git a/kvision-modules/kvision-bootstrap-select/src/main/resources/js/locales/ajax-bootstrap-select/ajax-bootstrap-select.cs-CZ.min.js b/kvision-modules/kvision-bootstrap-select/src/main/resources/js/locales/ajax-bootstrap-select/ajax-bootstrap-select.cs-CZ.min.js new file mode 100644 index 00000000..994014a9 --- /dev/null +++ b/kvision-modules/kvision-bootstrap-select/src/main/resources/js/locales/ajax-bootstrap-select/ajax-bootstrap-select.cs-CZ.min.js @@ -0,0 +1,23 @@ +/*! + * Ajax Bootstrap Select + * + * Extends existing [Bootstrap Select] implementations by adding the ability to search via AJAX requests as you type. Originally for CROSCON. + * + * @version 1.4.5 + * @author Adam Heim - https://github.com/truckingsim + * @link https://github.com/truckingsim/Ajax-Bootstrap-Select + * @copyright 2019 Adam Heim + * @license Released under the MIT license. + * + * Contributors: + * Mark Carver - https://github.com/markcarver + * + * Last build: 2019-04-23 12:18:55 PM EDT + */ +!(function ($) { + +/*! + * Czech translation for the "cs-CZ" and "cs" language codes. + * Martin Brettschneider + */ +$.fn.ajaxSelectPicker.locale["cs-CZ"]={currentlySelected:"Aktuálně vybrané",emptyTitle:"Vyberte a začněte psát",errorText:"Výsledky nelze načíst",searchPlaceholder:"Vyhledat...",statusInitialized:"Začněte psát hledaný výraz",statusNoResults:"Žádné výsledky",statusSearching:"Vyhledávání...",statusTooShort:"Zadejte více znaků"},$.fn.ajaxSelectPicker.locale.cs=$.fn.ajaxSelectPicker.locale["cs-CZ"];})(jQuery); diff --git a/kvision-modules/kvision-bootstrap-select/src/main/resources/js/locales/ajax-bootstrap-select/ajax-bootstrap-select.sr-SP.min.js b/kvision-modules/kvision-bootstrap-select/src/main/resources/js/locales/ajax-bootstrap-select/ajax-bootstrap-select.sr-SP.min.js new file mode 100644 index 00000000..4536c620 --- /dev/null +++ b/kvision-modules/kvision-bootstrap-select/src/main/resources/js/locales/ajax-bootstrap-select/ajax-bootstrap-select.sr-SP.min.js @@ -0,0 +1,23 @@ +/*! + * Ajax Bootstrap Select + * + * Extends existing [Bootstrap Select] implementations by adding the ability to search via AJAX requests as you type. Originally for CROSCON. + * + * @version 1.4.5 + * @author Adam Heim - https://github.com/truckingsim + * @link https://github.com/truckingsim/Ajax-Bootstrap-Select + * @copyright 2019 Adam Heim + * @license Released under the MIT license. + * + * Contributors: + * Mark Carver - https://github.com/markcarver + * + * Last build: 2019-04-23 12:18:55 PM EDT + */ +!(function ($) { + +/*! + * Serbian translation for the "sr-SP" and "sr" language codes. + * Miroslav Maksimovic + */ +$.fn.ajaxSelectPicker.locale["sr-SP"]={currentlySelected:"Trenutno izabrano",emptyTitle:"Izaberite i pocnite kucati",errorText:"Nemoguce dobiti rezultate",searchPlaceholder:"Pretrazi...",statusInitialized:"Pocnite kucati kljucnu rijec",statusNoResults:"Nema rezultata",statusSearching:"Trazim...",statusTooShort:"Molimo unesite vise znakova"},$.fn.ajaxSelectPicker.locale.ru=$.fn.ajaxSelectPicker.locale["sr-SP"];})(jQuery); diff --git a/kvision-modules/kvision-bootstrap-select/src/main/resources/js/locales/bootstrap-select/bootstrap-select-i18n.min.js b/kvision-modules/kvision-bootstrap-select/src/main/resources/js/locales/bootstrap-select/bootstrap-select-i18n.min.js index 4428d3c0..877071ce 100644 --- a/kvision-modules/kvision-bootstrap-select/src/main/resources/js/locales/bootstrap-select/bootstrap-select-i18n.min.js +++ b/kvision-modules/kvision-bootstrap-select/src/main/resources/js/locales/bootstrap-select/bootstrap-select-i18n.min.js @@ -1 +1 @@ -!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],function(a){return b(a)}):"object"==typeof module&&module.exports?module.exports=b(require("jquery")):b(a.jQuery)}(this,function(a){!function(a){a.fn.selectpicker.defaults={noneSelectedText:"",noneResultsText:"",countSelectedText:function(a,b){return 1==a?"... ({n})":"... ({n})"},maxOptionsText:function(a,b){return[1==a?"🛇":"🛇",1==b?"🛇":"🛇"]},selectAllText:"++",deselectAllText:"--",multipleSeparator:", "}}(a)}); \ No newline at end of file +!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],function(a){return b(a)}):"object"==typeof module&&module.exports?module.exports=b(require("jquery")):b(a.jQuery)}(this,function(a){!function(a){a.fn.selectpicker.defaults={noneSelectedText:" ",noneResultsText:"",countSelectedText:function(a,b){return 1==a?"... ({n})":"... ({n})"},maxOptionsText:function(a,b){return[1==a?"🛇":"🛇",1==b?"🛇":"🛇"]},selectAllText:"++",deselectAllText:"--",multipleSeparator:", "}}(a)}); \ No newline at end of file diff --git a/kvision-modules/kvision-bootstrap/src/main/kotlin/pl/treksoft/kvision/KVManagerBootstrap.kt b/kvision-modules/kvision-bootstrap/src/main/kotlin/pl/treksoft/kvision/KVManagerBootstrap.kt index b7a44115..78365281 100644 --- a/kvision-modules/kvision-bootstrap/src/main/kotlin/pl/treksoft/kvision/KVManagerBootstrap.kt +++ b/kvision-modules/kvision-bootstrap/src/main/kotlin/pl/treksoft/kvision/KVManagerBootstrap.kt @@ -33,7 +33,6 @@ internal object KVManagerBootstrap { init { require("bootstrap/dist/js/bootstrap.bundle.min.js") require("awesome-bootstrap-checkbox") - require("./css/kvbootstrap.css") } private val elementResizeEvent = require("element-resize-event") diff --git a/kvision-modules/kvision-bootstrap/src/main/resources/css/kvbootstrap.css b/kvision-modules/kvision-bootstrap/src/main/resources/css/kvbootstrap.css deleted file mode 100644 index 6f99a26c..00000000 --- a/kvision-modules/kvision-bootstrap/src/main/resources/css/kvbootstrap.css +++ /dev/null @@ -1,295 +0,0 @@ -.input-group.date.is-invalid~.invalid-feedback { - display: block; -} - -/* - -.bootstrap-touchspin .input-group-btn-vertical> .input-sm { - padding: 7px 10px; - height: 6px; -} - -.bootstrap-touchspin .input-group-btn-vertical> .input-lg { - height: 24px; -} - -.kv-spinner-btn-none .input-group-btn-vertical { - display: none; -} - -.kv-spinner-btn-none .form-control { - border-radius: 4px !important; -} - -.kv-spinner-btn-vertical .form-control { - border-radius: 4px 0px 0px 4px !important; -}*/ - -.form-check { - padding-left: 0.5rem; -} - -.form-check-input.form-control-sm, .form-check-input.form-control-lg { - height: inherit; -} - -.kv-radiogroup-inline label.control-label { - vertical-align: top; - margin-right: .75rem; - margin-bottom: 0px; -} -.row.kv-radiogroup-inline label.control-label { - margin-right: 0px; -} - -.row.kv-radiogroup-inline .kv-radiogroup-container, .row.kv-radiogroup .kv-radiogroup-container { - margin-left: -15px; -} - -.kv-radiogroup-inline .kv-radiogroup-container { - display: inline-flex; -} - -.kv-radiogroup-container.is-invalid~.invalid-feedback { - display: block; -} - -.form-check-inline { - margin-left: 3px; -} - -.form-check-inline.form-check { - padding-left: 0px; -} - -.form-horizontal.container-fluid { - width: inherit; -} - -.form-inline .form-group { - margin-right: 6px; -} - -.form-inline .form-group .control-label { - margin-right: 6px; -} - -.form-inline .form-check.form-group { - margin-left: 6px; -} - -.kv-form-condensed .form-group { - margin-bottom: 0.5rem; -} - -.kv-window.modal-content { - -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5); - box-shadow: 0 5px 15px rgba(0,0,0,.5); - border-radius: 0px; -} - -.kv-window .modal-header { - height: 40px; - padding: 5px 15px 5px 15px; - align-items: center; -} - -.kv-window .modal-header button.close { - width: 24px; - height: 24px; - margin: 0px; - padding: 0px; -} - -.kv-window .modal-header .modal-title { - white-space: nowrap; -} - -.kv-window .modal-header .window-icon { - margin-right: 6px; -} - -.kv-window .kv-window-icons-container { - display: flex; -} - -.kv-preview-thumb .btn, .kv-zoom-actions .btn, .file-zoom-dialog .floating-buttons .btn { - padding: 5px 8px; -} - -.file-drop-zone.clickable:hover { - border: 1px dashed #999; -} - -.file-drop-zone.clickable:focus { - border: 1px solid #5acde2; -} - -.nav.tabs-top { - flex-wrap: nowrap; -} - -ul.tabs-top { - overflow-x: auto; - overflow-y: hidden; - display: flex; -} - -ul.tabs-top > li { - float:none; - flex-shrink: 0; -} - -.kv-tab-close { - margin-left: 10px; - color: #000; - text-shadow: 0 1px 0 #fff; - filter: alpha(opacity=20); - opacity: 0.2; -} - -.kv-tab-close:hover, .kv-tab-close:focus { - cursor: pointer; - filter: alpha(opacity=50); - opacity: 0.5; -} - -/*select.form-control, .tabulator-row .tabulator-cell.tabulator-editing select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: transparent none no-repeat; - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAKCAYAAABblxXYAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4wUKFyIn4IjqJgAAAENJREFUKM/l0LERACEQQlGsiTa2px1aokGugNNAx8wfMy8AeLoBALYjaTqoKkga2+gKPgF/2Q7JkEx359oftu+C7/UBCUIcVQz0PvcAAAAASUVORK5CYII='); - background-position: right center; - cursor: pointer; -} - -select.form-control:hover { - background-color: #e6e6e6; -} - -select.form-control option { - background-color: white; -} - -select.input-sm { - line-height: inherit; -}*/ - -.abc-checkbox input[type="checkbox"]:checked+label::after, -.abc-checkbox input[type="radio"]:checked+label::after { - font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free"; - content: "\f00c"; - font-weight: 900; -} - -.abc-checkbox label::before { - top: 0px; -} -.abc-checkbox label::after { - top: 0px; -} - -.abc-radio label::before { - top: 0px; -} - -.abc-radio label::after { - top: 3px; -} - -.abc-checkbox.form-check-inline label::before { - top: 2px; -} - -.abc-checkbox.form-check-inline label::after { - top: 2px; -} - -.abc-radio.form-check-inline label::before { - top: 2px; -} - -.abc-radio.form-check-inline label::after { - top: 5px; -} - -.abc-checkbox label.col-form-label-lg::before { - top: 10px; -} -.abc-checkbox label.col-form-label-lg::after { - top: 10px; -} - -.abc-radio label.col-form-label-lg::before { - top: 10px; -} - -.abc-radio label.col-form-label-lg::after { - top: 13px; -} - -.abc-checkbox.form-check-inline label.col-form-label-lg::before { - top: 15px; -} - -.abc-checkbox.form-check-inline label.col-form-label-lg::after { - top: 15px; -} - -.abc-radio.form-check-inline label.col-form-label-lg::before { - top: 15px; -} - -.abc-radio.form-check-inline label.col-form-label-lg::after { - top: 18px; -} - -/*! - * bootstrap-vertical-tabs - v1.2.2 - * https://dbtek.github.io/bootstrap-vertical-tabs - * 2016-12-02 - * Copyright (c) 2016 İsmail Demirbilek - * License: MIT - */ -.nav-tabs.tabs-left, .nav-tabs.tabs-right { - border-bottom: none; - padding-top: 2px; -} -.nav-tabs.tabs-left { - border-right: 1px solid #dee2e6; -} -.nav-tabs.tabs-right { - border-left: 1px solid #dee2e6; -} -.nav-tabs.tabs-left>li.nav-item, .nav-tabs.tabs-right>li.nav-item { - float: none; - margin-bottom: 2px; -} -.nav-tabs.tabs-left>li.nav-item { - margin-right: -1px; -} -.nav-tabs.tabs-right>li.nav-item { - margin-left: -1px; -} -.nav-tabs.tabs-left>li.nav-item>a.nav-link.active, -.nav-tabs.tabs-left>li.nav-item>a.nav-link.active:hover, -.nav-tabs.tabs-left>li.nav-item>a.nav-link.active:focus { - border-bottom-color: #dee2e6; - border-right-color: transparent; -} -.nav-tabs.tabs-right>li.nav-item>a.nav-link.active, -.nav-tabs.tabs-right>li.nav-item>a.nav-link.active:hover, -.nav-tabs.tabs-right>li.nav-item>a.nav-link.active:focus { - border-bottom: 1px solid #dee2e6; - border-left-color: transparent; -} -.nav-tabs.tabs-left>li.nav-item>a.nav-link { - border-radius: 4px 0 0 4px; - margin-right: 0; - display:block; -} -.nav-tabs.tabs-right>li.nav-item>a.nav-link { - border-radius: 0 4px 4px 0; - margin-right: 0; -} diff --git a/src/main/kotlin/pl/treksoft/kvision/KVManager.kt b/src/main/kotlin/pl/treksoft/kvision/KVManager.kt index 9772f808..0ba694eb 100644 --- a/src/main/kotlin/pl/treksoft/kvision/KVManager.kt +++ b/src/main/kotlin/pl/treksoft/kvision/KVManager.kt @@ -46,11 +46,11 @@ external fun require(name: String): dynamic object KVManager { init { try { - require("kvision-bootstrap").pl.treksoft.kvision.KVManagerBootstrap + require("kvision-bootstrap-css").pl.treksoft.kvision.KVManagerBootstrapCss } catch (e: Throwable) { } try { - require("kvision-bootstrap-css").pl.treksoft.kvision.KVManagerBootstrapCss + require("kvision-bootstrap").pl.treksoft.kvision.KVManagerBootstrap } catch (e: Throwable) { } try { diff --git a/src/main/resources/css/style.css b/src/main/resources/css/style.css index 7323772b..ace7da8c 100644 --- a/src/main/resources/css/style.css +++ b/src/main/resources/css/style.css @@ -38,7 +38,6 @@ overflow: auto; } - .splitter-vertical { flex: 0 0 auto; width: 9px; @@ -76,3 +75,312 @@ trix-toolbar .trix-button-group { border-right: 1px solid #1d68cd !important; padding: 2px !important; } + +.input-group.date.is-invalid~.invalid-feedback { + display: block; +} + +.input-group.date { + padding-left: 0px; + padding-right: 0px; +} + +.bootstrap-select .dropdown-toggle.btn-default:focus { + outline: none !important; +} + +.bootstrap-select .dropdown-toggle::after { + margin-left: -1em !important; +} + +.form-inline .bootstrap-select .form-control { + min-width: 200px; +} + +/*.bootstrap-select.form-control { + border: 1px solid #ced4da !important; +} + +.bootstrap-select.form-control:focus { + border-color: #80bdff !important; +}*/ + +/* + +.bootstrap-touchspin .input-group-btn-vertical> .input-sm { + padding: 7px 10px; + height: 6px; +} + +.bootstrap-touchspin .input-group-btn-vertical> .input-lg { + height: 24px; +} + +.kv-spinner-btn-none .input-group-btn-vertical { + display: none; +} + +.kv-spinner-btn-none .form-control { + border-radius: 4px !important; +} + +.kv-spinner-btn-vertical .form-control { + border-radius: 4px 0px 0px 4px !important; +}*/ + +.kv-radiogroup-inline label.control-label { + vertical-align: top; + margin-right: .75rem; + margin-bottom: 0px; +} +.row.kv-radiogroup-inline label.control-label { + margin-right: 0px; +} + +.row.kv-radiogroup-inline .kv-radiogroup-container, .row.kv-radiogroup .kv-radiogroup-container { + margin-left: -15px; +} + +.kv-radiogroup-inline .kv-radiogroup-container { + display: inline-flex; +} + +.kv-radiogroup-container.is-invalid~.invalid-feedback { + display: block; +} + +.form-check { + padding-left: 0.5rem; +} + +.form-check-input.form-control-sm, .form-check-input.form-control-lg { + height: inherit; +} + +.form-check-inline { + margin-left: 3px; +} + +.form-check-inline.form-check { + padding-left: 0px; +} + +.form-horizontal.container-fluid { + width: inherit; +} + +.form-inline .form-group { + margin-right: 6px; +} + +.form-inline .form-group .control-label { + margin-right: 6px; +} + +.form-inline .form-check.form-group { + margin-left: 6px; +} + +.kv-form-condensed .form-group { + margin-bottom: 0.5rem; +} + +.kv-window.modal-content { + -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5); + box-shadow: 0 5px 15px rgba(0,0,0,.5); + border-radius: 0px; +} + +.kv-window .modal-header { + height: 40px; + padding: 5px 15px 5px 15px; + align-items: center; +} + +.kv-window .modal-header button.close { + width: 24px; + height: 24px; + margin: 0px; + padding: 0px; +} + +.kv-window .modal-header .modal-title { + white-space: nowrap; +} + +.kv-window .modal-header .window-icon { + margin-right: 6px; +} + +.kv-window .kv-window-icons-container { + display: flex; +} + +.kv-preview-thumb .btn, .kv-zoom-actions .btn, .file-zoom-dialog .floating-buttons .btn { + padding: 5px 8px; +} + +.file-drop-zone.clickable:hover { + border: 1px dashed #999; +} + +.file-drop-zone.clickable:focus { + border: 1px solid #5acde2; +} + +.nav.tabs-top { + flex-wrap: nowrap; +} + +ul.tabs-top { + overflow-x: auto; + overflow-y: hidden; + display: flex; +} + +ul.tabs-top > li { + float:none; + flex-shrink: 0; +} + +.kv-tab-close { + margin-left: 10px; + color: #000; + text-shadow: 0 1px 0 #fff; + filter: alpha(opacity=20); + opacity: 0.2; +} + +.kv-tab-close:hover, .kv-tab-close:focus { + cursor: pointer; + filter: alpha(opacity=50); + opacity: 0.5; +} + +select.form-control, .tabulator-row .tabulator-cell.tabulator-editing select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: transparent none no-repeat; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAKCAYAAABblxXYAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4wUKFyIn4IjqJgAAAENJREFUKM/l0LERACEQQlGsiTa2px1aokGugNNAx8wfMy8AeLoBALYjaTqoKkga2+gKPgF/2Q7JkEx359oftu+C7/UBCUIcVQz0PvcAAAAASUVORK5CYII='); + background-position: right center; + cursor: pointer; +} + +.abc-checkbox input[type="checkbox"]:checked+label::after, +.abc-checkbox input[type="radio"]:checked+label::after { + font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free"; + content: "\f00c"; + font-weight: 900; +} + +.abc-checkbox label::before { + top: 0px; +} +.abc-checkbox label::after { + top: 0px; +} + +.abc-radio label::before { + top: 0px; +} + +.abc-radio label::after { + top: 3px; +} + +.abc-checkbox.form-check-inline label::before { + top: 2px; +} + +.abc-checkbox.form-check-inline label::after { + top: 2px; +} + +.abc-radio.form-check-inline label::before { + top: 2px; +} + +.abc-radio.form-check-inline label::after { + top: 5px; +} + +.abc-checkbox label.col-form-label-lg::before { + top: 10px; +} +.abc-checkbox label.col-form-label-lg::after { + top: 10px; +} + +.abc-radio label.col-form-label-lg::before { + top: 10px; +} + +.abc-radio label.col-form-label-lg::after { + top: 13px; +} + +.abc-checkbox.form-check-inline label.col-form-label-lg::before { + top: 15px; +} + +.abc-checkbox.form-check-inline label.col-form-label-lg::after { + top: 15px; +} + +.abc-radio.form-check-inline label.col-form-label-lg::before { + top: 15px; +} + +.abc-radio.form-check-inline label.col-form-label-lg::after { + top: 18px; +} + +/*! + * bootstrap-vertical-tabs - v1.2.2 + * https://dbtek.github.io/bootstrap-vertical-tabs + * 2016-12-02 + * Copyright (c) 2016 İsmail Demirbilek + * License: MIT + */ +.nav-tabs.tabs-left, .nav-tabs.tabs-right { + border-bottom: none; + padding-top: 2px; +} +.nav-tabs.tabs-left { + border-right: 1px solid #dee2e6; +} +.nav-tabs.tabs-right { + border-left: 1px solid #dee2e6; +} +.nav-tabs.tabs-left>li.nav-item, .nav-tabs.tabs-right>li.nav-item { + float: none; + margin-bottom: 2px; +} +.nav-tabs.tabs-left>li.nav-item { + margin-right: -1px; +} +.nav-tabs.tabs-right>li.nav-item { + margin-left: -1px; +} +.nav-tabs.tabs-left>li.nav-item>a.nav-link.active, +.nav-tabs.tabs-left>li.nav-item>a.nav-link.active:hover, +.nav-tabs.tabs-left>li.nav-item>a.nav-link.active:focus { + border-bottom-color: #dee2e6; + border-right-color: transparent; +} +.nav-tabs.tabs-right>li.nav-item>a.nav-link.active, +.nav-tabs.tabs-right>li.nav-item>a.nav-link.active:hover, +.nav-tabs.tabs-right>li.nav-item>a.nav-link.active:focus { + border-bottom: 1px solid #dee2e6; + border-left-color: transparent; +} +.nav-tabs.tabs-left>li.nav-item>a.nav-link { + border-radius: 4px 0 0 4px; + margin-right: 0; + display:block; +} +.nav-tabs.tabs-right>li.nav-item>a.nav-link { + border-radius: 0 4px 4px 0; + margin-right: 0; +} -- cgit From de2f1d40df85ad7b2fcdcac93151bf499a391ba9 Mon Sep 17 00:00:00 2001 From: Robert Jaros Date: Sat, 5 Oct 2019 20:13:40 +0200 Subject: Updated Spinner form control. --- .../pl/treksoft/kvision/form/spinner/Spinner.kt | 64 +++++++++++++------ .../treksoft/kvision/form/spinner/SpinnerInput.kt | 74 ++++++++++++---------- src/main/resources/css/style.css | 33 ++++------ 3 files changed, 95 insertions(+), 76 deletions(-) (limited to 'src/main/resources') diff --git a/kvision-modules/kvision-bootstrap-spinner/src/main/kotlin/pl/treksoft/kvision/form/spinner/Spinner.kt b/kvision-modules/kvision-bootstrap-spinner/src/main/kotlin/pl/treksoft/kvision/form/spinner/Spinner.kt index afe085d0..7e3048d1 100644 --- a/kvision-modules/kvision-bootstrap-spinner/src/main/kotlin/pl/treksoft/kvision/form/spinner/Spinner.kt +++ b/kvision-modules/kvision-bootstrap-spinner/src/main/kotlin/pl/treksoft/kvision/form/spinner/Spinner.kt @@ -27,6 +27,7 @@ import pl.treksoft.kvision.core.Widget import pl.treksoft.kvision.form.FieldLabel import pl.treksoft.kvision.form.InvalidFeedback import pl.treksoft.kvision.form.NumberFormControl +import pl.treksoft.kvision.html.ButtonStyle import pl.treksoft.kvision.panel.SimplePanel import pl.treksoft.kvision.utils.SnOn @@ -47,8 +48,8 @@ import pl.treksoft.kvision.utils.SnOn */ open class Spinner( value: Number? = null, name: String? = null, min: Int? = null, max: Int? = null, step: Double = DEFAULT_STEP, - decimals: Int = 0, buttonsType: ButtonsType = ButtonsType.VERTICAL, - forceType: ForceType = ForceType.NONE, label: String? = null, + decimals: Int = 0, val buttonsType: ButtonsType = ButtonsType.VERTICAL, + forceType: ForceType = ForceType.NONE, buttonStyle: ButtonStyle? = null, label: String? = null, rich: Boolean = false ) : SimplePanel(setOf("form-group")), NumberFormControl { @@ -103,14 +104,6 @@ open class Spinner( set(value) { input.decimals = value } - /** - * Spinner buttons type. - */ - var buttonsType - get() = input.buttonsType - set(value) { - input.buttonsType = value - } /** * Spinner force rounding type. */ @@ -119,6 +112,14 @@ open class Spinner( set(value) { input.forceType = value } + /** + * The style of the up/down buttons. + */ + var buttonStyle + get() = input.buttonStyle + set(value) { + input.buttonStyle = value + } /** * The placeholder for the spinner input. */ @@ -160,12 +161,24 @@ open class Spinner( flabel.rich = value } - protected val idc = "kv_form_spinner_$counter" - final override val input: SpinnerInput = SpinnerInput(value, min, max, step, decimals, buttonsType, forceType) - .apply { - this.id = idc - this.name = name + override var validatorError: String? + get() = super.validatorError + set(value) { + super.validatorError = value + if (value != null) { + input.addSurroundingCssClass("is-invalid") + } else { + input.removeSurroundingCssClass("is-invalid") + } } + + protected val idc = "kv_form_spinner_$counter" + final override val input: SpinnerInput = + SpinnerInput(value, min, max, step, decimals, buttonsType, forceType, buttonStyle) + .apply { + this.id = idc + this.name = name + } final override val flabel: FieldLabel = FieldLabel(idc, label, rich) final override val invalidFeedback: InvalidFeedback = InvalidFeedback().apply { visible = false } @@ -230,6 +243,15 @@ open class Spinner( input.blur() } + override fun styleForHorizontalFormPanel() { + addCssClass("row") + flabel.addCssClass("col-sm-2") + flabel.addCssClass("col-form-label") + input.addSurroundingCssClass("col-sm-10") + invalidFeedback.addCssClass("offset-sm-2") + invalidFeedback.addCssClass("col-sm-10") + } + companion object { internal var counter = 0 @@ -247,15 +269,17 @@ open class Spinner( decimals: Int = 0, buttonsType: ButtonsType = ButtonsType.VERTICAL, forceType: ForceType = ForceType.NONE, + buttonStyle: ButtonStyle? = null, label: String? = null, rich: Boolean = false, init: (Spinner.() -> Unit)? = null ): Spinner { - val spinner = Spinner(value, name, min, max, step, decimals, buttonsType, forceType, label, rich).apply { - init?.invoke( - this - ) - } + val spinner = + Spinner(value, name, min, max, step, decimals, buttonsType, forceType, buttonStyle, label, rich).apply { + init?.invoke( + this + ) + } this.add(spinner) return spinner } diff --git a/kvision-modules/kvision-bootstrap-spinner/src/main/kotlin/pl/treksoft/kvision/form/spinner/SpinnerInput.kt b/kvision-modules/kvision-bootstrap-spinner/src/main/kotlin/pl/treksoft/kvision/form/spinner/SpinnerInput.kt index d760f34b..c75bbfc4 100644 --- a/kvision-modules/kvision-bootstrap-spinner/src/main/kotlin/pl/treksoft/kvision/form/spinner/SpinnerInput.kt +++ b/kvision-modules/kvision-bootstrap-spinner/src/main/kotlin/pl/treksoft/kvision/form/spinner/SpinnerInput.kt @@ -30,6 +30,7 @@ import pl.treksoft.kvision.core.Widget import pl.treksoft.kvision.form.FormInput import pl.treksoft.kvision.form.InputSize import pl.treksoft.kvision.form.ValidationStatus +import pl.treksoft.kvision.html.ButtonStyle import pl.treksoft.kvision.utils.obj /** @@ -64,37 +65,17 @@ internal const val DEFAULT_STEP = 1.0 * @param decimals number of decimal digits (default 0) * @param buttonsType spinner buttons type * @param forceType spinner force rounding type + * @param buttonStyle the style of the up/down buttons * @param classes a set of CSS class names */ @Suppress("TooManyFunctions") open class SpinnerInput( value: Number? = null, min: Int? = null, max: Int? = null, step: Double = DEFAULT_STEP, - decimals: Int = 0, buttonsType: ButtonsType = ButtonsType.VERTICAL, - forceType: ForceType = ForceType.NONE, + decimals: Int = 0, val buttonsType: ButtonsType = ButtonsType.VERTICAL, + forceType: ForceType = ForceType.NONE, buttonStyle: ButtonStyle? = null, classes: Set = setOf() ) : Widget(classes + "form-control"), FormInput { - init { - this.addSurroundingCssClass("input-group") - if (buttonsType == ButtonsType.NONE) { - this.addSurroundingCssClass("kv-spinner-btn-none") - } else { - this.removeSurroundingCssClass("kv-spinner-btn-none") - } - if (buttonsType == ButtonsType.VERTICAL) { - this.addSurroundingCssClass("kv-spinner-btn-vertical") - } else { - this.removeSurroundingCssClass("kv-spinner-btn-vertical") - } - this.surroundingSpan = true - this.refreshSpinner() - this.setInternalEventListener { - change = { - self.changeValue() - } - } - } - /** * Spinner value. */ @@ -122,14 +103,14 @@ open class SpinnerInput( * Number of decimal digits value. */ var decimals by refreshOnUpdate(decimals) { refreshSpinner() } - /** - * Spinner buttons type. - */ - var buttonsType by refreshOnUpdate(buttonsType) { refreshSpinner() } /** * Spinner force rounding type. */ var forceType by refreshOnUpdate(forceType) { refreshSpinner() } + /** + * The style of the up/down buttons. + */ + var buttonStyle by refreshOnUpdate(buttonStyle) { refreshSpinner() } /** * The placeholder for the spinner input. */ @@ -161,6 +142,22 @@ open class SpinnerInput( private var siblings: JQuery? = null + init { + this.addSurroundingCssClass("input-group") + this.addSurroundingCssClass("kv-spinner") + when (buttonsType) { + ButtonsType.NONE -> this.addSurroundingCssClass("kv-spinner-btn-none") + ButtonsType.VERTICAL -> this.addSurroundingCssClass("kv-spinner-btn-vertical") + ButtonsType.HORIZONTAL -> this.addSurroundingCssClass("kv-spinner-btn-horizontal") + } + this.surroundingSpan = true + this.setInternalEventListener { + change = { + self.changeValue() + } + } + } + override fun render(): VNode { return render("input") } @@ -281,6 +278,7 @@ open class SpinnerInput( private fun getSettingsObj(): dynamic { val verticalbuttons = buttonsType == ButtonsType.VERTICAL || buttonsType == ButtonsType.NONE + val style = buttonStyle return obj { this.min = min this.max = max @@ -288,12 +286,17 @@ open class SpinnerInput( this.decimals = decimals this.verticalbuttons = verticalbuttons this.forcestepdivisibility = forceType.value + if (style != null) { + this.buttonup_class = "btn ${style.className}" + this.buttondown_class = "btn ${style.className}" + } else { + this.buttonup_class = "btn btn-secondary" + this.buttondown_class = "btn btn-secondary" + } if (verticalbuttons) { this.verticalup = "" this.verticaldown = "" } - this.buttondown_class = "btn btn-default" - this.buttonup_class = "btn btn-default" } } @@ -321,14 +324,15 @@ open class SpinnerInput( fun Container.spinnerInput( value: Number? = null, min: Int? = null, max: Int? = null, step: Double = DEFAULT_STEP, decimals: Int = 0, buttonsType: ButtonsType = ButtonsType.VERTICAL, - forceType: ForceType = ForceType.NONE, classes: Set = setOf(), + forceType: ForceType = ForceType.NONE, buttonStyle: ButtonStyle? = null, classes: Set = setOf(), init: (SpinnerInput.() -> Unit)? = null ): SpinnerInput { - val spinnerInput = SpinnerInput(value, min, max, step, decimals, buttonsType, forceType, classes).apply { - init?.invoke( - this - ) - } + val spinnerInput = + SpinnerInput(value, min, max, step, decimals, buttonsType, forceType, buttonStyle, classes).apply { + init?.invoke( + this + ) + } this.add(spinnerInput) return spinnerInput } diff --git a/src/main/resources/css/style.css b/src/main/resources/css/style.css index ace7da8c..fccaeb2c 100644 --- a/src/main/resources/css/style.css +++ b/src/main/resources/css/style.css @@ -97,37 +97,28 @@ trix-toolbar .trix-button-group { min-width: 200px; } -/*.bootstrap-select.form-control { - border: 1px solid #ced4da !important; +.kv-spinner-btn-none .input-group-btn-vertical { + display: none; } -.bootstrap-select.form-control:focus { - border-color: #80bdff !important; -}*/ - -/* - -.bootstrap-touchspin .input-group-btn-vertical> .input-sm { - padding: 7px 10px; - height: 6px; +.kv-spinner-btn-none .form-control { + border-radius: 4px !important; } -.bootstrap-touchspin .input-group-btn-vertical> .input-lg { - height: 24px; +.kv-spinner > span { + display: inline-block; + width: 100%; } -.kv-spinner-btn-none .input-group-btn-vertical { - display: none; +.input-group.kv-spinner { + padding-left: 0px; + padding-right: 0px; } -.kv-spinner-btn-none .form-control { - border-radius: 4px !important; +.kv-spinner.is-invalid~.invalid-feedback { + display: block; } -.kv-spinner-btn-vertical .form-control { - border-radius: 4px 0px 0px 4px !important; -}*/ - .kv-radiogroup-inline label.control-label { vertical-align: top; margin-right: .75rem; -- cgit