This is an automated email from the ASF dual-hosted git repository. joergrade pushed a commit to branch spring6-kroviz in repository https://gitbox.apache.org/repos/asf/causeway.git
commit b4e5c735a05e379e2208c6ea865ccb003a0d1735 Author: Jörg Rade <[email protected]> AuthorDate: Thu May 23 15:02:56 2024 +0200 CAUSEWAY-3044 Round, floating buttons in dialog bar. Distance to dialog content initially not as desired (yet). --- .../modules/kroviz/pages/DevelopmentGuide.adoc | 2 +- incubator/clients/kroviz/dialog_sample.html | 78 ++++++++++++++++++++++ .../client/kroviz/ui/core/FormPanelFactory.kt | 2 - .../causeway/client/kroviz/ui/core/RoDialog.kt | 32 +++++---- .../causeway/client/kroviz/ui/core/RoMenuBar.kt | 4 +- .../kroviz/src/jsMain/resources/css/kroviz.css | 45 ++++++++++--- 6 files changed, 135 insertions(+), 28 deletions(-) diff --git a/incubator/clients/kroviz/adoc/modules/kroviz/pages/DevelopmentGuide.adoc b/incubator/clients/kroviz/adoc/modules/kroviz/pages/DevelopmentGuide.adoc index 0d84a5efac..01d3b5aee6 100644 --- a/incubator/clients/kroviz/adoc/modules/kroviz/pages/DevelopmentGuide.adoc +++ b/incubator/clients/kroviz/adoc/modules/kroviz/pages/DevelopmentGuide.adoc @@ -115,7 +115,7 @@ TO's are created from JSON responses ==== Event Sourcing (EAA) -Requests, reponses, and resulting TO's are logged. +Requests, responses, and resulting TO's are logged. Before requests are sent out to the server this log is consulted and used as a cache. ==== Proxy (GOF) diff --git a/incubator/clients/kroviz/dialog_sample.html b/incubator/clients/kroviz/dialog_sample.html new file mode 100644 index 0000000000..772c4a2334 --- /dev/null +++ b/incubator/clients/kroviz/dialog_sample.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Resizable Dialog</title> + <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css";> + <style> + .dialog { + display: flex; + flex-direction: column; + height: 100%; + position: relative; + } + .content { + flex-grow: 1; + overflow-y: auto; + } + .button-bar { + position: absolute; + bottom: 0; + background-color: transparent; + padding-bottom: 10px; + } + .round-button-red { + width: 30px; + height: 30px; + border-radius: 50%; + border: none; + background-color: rgb(255, 0, 0, 0.7); + color: black; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); + } + .round-button-green { + width: 30px; + height: 30px; + border-radius: 50%; + border: none; + background-color: rgb(0, 128, 0, 0.7); + color: black; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); + } + i.fas { + display: inline-block; + border-radius: 60px; + } + </style> +</head> +<body> +<div id="dialog" title="Resizable Dialog"> + <div class="dialog-content"> + <!-- Your content goes here. --> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p> + <!-- More content... --> + </div> + <div class="button-bar"> + <button class="round-button-green" title="OK"> + <i class="fas fa-check"></i> + </button> + <button class="round-button-red" title="Cancel"> + <i class="fas fa-times"></i> + </button> + </div> +</div> + +<script src="https://code.jquery.com/jquery-1.12.4.js";></script> +<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js";></script> +<script> + $( function() { + $( "#dialog" ).dialog({ + width: 400, + height: 300, + resizable: true + }); + } ); +</script> +</body> +</html> \ No newline at end of file diff --git a/incubator/clients/kroviz/src/jsMain/kotlin/org/apache/causeway/client/kroviz/ui/core/FormPanelFactory.kt b/incubator/clients/kroviz/src/jsMain/kotlin/org/apache/causeway/client/kroviz/ui/core/FormPanelFactory.kt index 27402f9095..86f467cdd3 100644 --- a/incubator/clients/kroviz/src/jsMain/kotlin/org/apache/causeway/client/kroviz/ui/core/FormPanelFactory.kt +++ b/incubator/clients/kroviz/src/jsMain/kotlin/org/apache/causeway/client/kroviz/ui/core/FormPanelFactory.kt @@ -77,8 +77,6 @@ class FormPanelFactory(items: List<FormItem>) : VPanel() { ValueType.SVG_MAPPED -> add(createSvgMap(fi)) ValueType.BUTTON -> add(createButton(fi)) ValueType.CANVAS -> add(createVega(fi)) - else -> { - } } } } diff --git a/incubator/clients/kroviz/src/jsMain/kotlin/org/apache/causeway/client/kroviz/ui/core/RoDialog.kt b/incubator/clients/kroviz/src/jsMain/kotlin/org/apache/causeway/client/kroviz/ui/core/RoDialog.kt index 4c9aa02227..50f9b46ae4 100644 --- a/incubator/clients/kroviz/src/jsMain/kotlin/org/apache/causeway/client/kroviz/ui/core/RoDialog.kt +++ b/incubator/clients/kroviz/src/jsMain/kotlin/org/apache/causeway/client/kroviz/ui/core/RoDialog.kt @@ -48,27 +48,32 @@ class RoDialog( ) : Displayable, RoWindow(caption = caption, closeButton = true, menu = menu) { - private val okButton:Button; - private val cancelButton:Button; + private var okButton: Button + private var cancelButton: Button init { - okButton = Button( - text = defaultAction, - icon = IconManager.find(defaultAction), - style = ButtonStyle.SUCCESS - ) + val iconName = IconManager.find(defaultAction) + okButton = initButton(defaultAction, iconName, "round-button-green") okButton.onClick { execute() } - cancelButton = Button( - "Cancel", - "fas fa-times", - ButtonStyle.OUTLINEINFO - ) + cancelButton = initButton("Cancel", "fas fa-times", "round-button-red") cancelButton.onClick { close() } } + + private fun initButton( title:String, iconName:String, cssClass:String) : Button { + val button = Button( + "", + iconName, + ) + button.title = title + button.addCssClass(cssClass) + button.addCssClass("fas") + return button + } + @Deprecated("remove once leaflet/svg is fully operational") private val scaleUpButton = Button( "", @@ -100,7 +105,6 @@ class RoDialog( contentHeight = CssSize(heightPerc, UNIT.perc) vPanel { - height = CssSize(heightPerc, UNIT.vh) this.addCssClass("dialog") formPanel = FormPanelFactory(items).panel @@ -109,7 +113,7 @@ class RoDialog( val buttonBar = buildButtonBar(customButtons) buttonBar.addCssClass("button-bar") - add(buttonBar) + this.add(buttonBar) } } diff --git a/incubator/clients/kroviz/src/jsMain/kotlin/org/apache/causeway/client/kroviz/ui/core/RoMenuBar.kt b/incubator/clients/kroviz/src/jsMain/kotlin/org/apache/causeway/client/kroviz/ui/core/RoMenuBar.kt index 879533a408..7513da84c9 100644 --- a/incubator/clients/kroviz/src/jsMain/kotlin/org/apache/causeway/client/kroviz/ui/core/RoMenuBar.kt +++ b/incubator/clients/kroviz/src/jsMain/kotlin/org/apache/causeway/client/kroviz/ui/core/RoMenuBar.kt @@ -40,7 +40,7 @@ import org.apache.causeway.client.kroviz.ui.menu.DropDownMenuBuilder import org.apache.causeway.client.kroviz.ui.panel.GeoMap import org.apache.causeway.client.kroviz.ui.panel.ImageSample import org.apache.causeway.client.kroviz.ui.panel.SvgMap -import org.apache.causeway.client.kroviz.ui.samples.VEGA_LITE_SAMPLE +import org.apache.causeway.client.kroviz.ui.samples.VEGA_SAMPLE import org.apache.causeway.client.kroviz.utils.IconManager import org.apache.causeway.client.kroviz.utils.Point @@ -204,7 +204,7 @@ class RoMenuBar : SimplePanel() { ) val vegaTitle = "Vega Sample" - val vegaPanel = VegaPanel(VEGA_LITE_SAMPLE.str) + val vegaPanel = VegaPanel(VEGA_SAMPLE.str) subMenu.add( buildMenuEntry(vegaTitle, "Image", { ViewManager.add(vegaTitle, vegaPanel) }) ) diff --git a/incubator/clients/kroviz/src/jsMain/resources/css/kroviz.css b/incubator/clients/kroviz/src/jsMain/resources/css/kroviz.css index 835cec20a4..43ee811a5b 100644 --- a/incubator/clients/kroviz/src/jsMain/resources/css/kroviz.css +++ b/incubator/clients/kroviz/src/jsMain/resources/css/kroviz.css @@ -126,6 +126,8 @@ pre.highlight { border-left: 1px solid #ecf0f1; border-bottom: 1px solid #ecf0f1; border-right: 1px solid #ecf0f1; + flex-grow: 1; + overflow-y: auto; } textarea { @@ -135,24 +137,49 @@ textarea { .button-bar { margin-top: 10px; margin-left: 10px; - margin-bottom: 10px; - position:absolute; - bottom:0; + margin-bottom: 10px; /* due to 10px for resize corner */ + position: absolute; + bottom: 0; + background-color: transparent; +} + +.round-button-red { + width: 30px; + height: 30px; + border-radius: 50%; + border: none; + background-color: rgb(255, 0, 0, 0.7); + color: black; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); +} +.round-button-green { + width: 30px; + height: 30px; + border-radius: 50%; + border: none; + background-color: rgb(0, 128, 0, 0.7); + color: black; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); +} +i.fas { + display: inline-block; + border-radius: 60px; } .tabulator-in-dialog { max-height: calc(70vh - 60px); } -.dialog-content { +.dialog { display: flex; flex-direction: column; - overflow-y: auto; + height: 100%; + position: relative; } - -.dialog { - display: flex; - height: 100vh; +.dialog-content { + height: 100%; + flex-grow: 1; + overflow-y: auto; } @font-face {
