Skip to content

Commit

Permalink
move info modal away from using friz2 modal and just use overlay dire…
Browse files Browse the repository at this point in the history 
…ctly so we can control z-level
  • Loading branch information
@jillesvangurp
jillesvangurp committed Sep 13, 2023
1 parent a735c7c commit 376332f
Show file tree
Hide file tree
Showing 12 changed files with 299 additions and 232 deletions.
120 changes: 64 additions & 56 deletions src/jsMain/kotlin/components/form.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,25 +20,29 @@ fun RenderContext.textField(
scope: (ScopeContext.() -> Unit) = {},
initialize: InputField<HTMLDivElement>.() -> Unit
) {
inputField("flex flex-col border p-2 items-center w-full", id = id, scope = scope) {
initialize(this)
div("flex flex-row items-center w-full") {
label?.let { l ->
inputLabel("italic mr-5 w-2/6 text-right") {
+l
border {
inputField("flex flex-col items-center w-full", id = id, scope = scope) {
initialize(this)
div("flex flex-row items-center w-full") {
label?.let { l ->
inputLabel("italic mr-5 w-2/6 text-right") {
+l
}
}
}
inputTextfield("""w-4/6 basis-160 bg-blueBright-100 border border-blueBright-300 text-blueBright-900
|text-sm rounded-lg focus:ring-blueBright-500 focus:border-blueBright-500 p-2.5""".trimMargin()) {
placeHolder?.let { pl ->
placeholder(pl)
inputTextfield(
"""w-4/6 basis-160 bg-blueBright-100 border border-blueBright-300 text-blueBright-900
|text-sm rounded-lg focus:ring-blueBright-500 focus:border-blueBright-500 p-2.5""".trimMargin()
) {
placeHolder?.let { pl ->
placeholder(pl)
}
}
}
}
description?.let {
inputDescription("block w-full") {
div {
+description
description?.let {
inputDescription("block w-full") {
div {
+description
}
}
}
}
Expand All @@ -53,28 +57,30 @@ fun RenderContext.textAreaField(
scope: (ScopeContext.() -> Unit) = {},
initialize: TextArea<HTMLDivElement>.() -> Unit
) {
textArea("flex flex-col border p-2 items-center w-full", id = id, scope = scope) {
initialize(this)
div("flex flex-row items-center w-full") {
label?.let { l ->
textareaLabel("italic mr-5 w-2/6 text-right") {
+l
border {
textArea("flex flex-col items-center w-full", id = id, scope = scope) {
initialize(this)
div("flex flex-row items-center w-full") {
label?.let { l ->
textareaLabel("italic mr-5 w-2/6 text-right") {
+l
}
}
}
textareaTextfield(
"""w-4/6 basis-160 bg-blueBright-100 border border-blueBright-300
textareaTextfield(
"""w-4/6 basis-160 bg-blueBright-100 border border-blueBright-300
|text-blueBright-900 text-sm rounded-lg focus:ring-blueBright-500
|focus:border-blueBright-500 p-2""".trimMargin()
) {
placeHolder?.let { pl ->
placeholder(pl)
) {
placeHolder?.let { pl ->
placeholder(pl)
}
}
}
}
description?.let {
textareaDescription("block w-full") {
div {
+description
description?.let {
textareaDescription("block w-full") {
div {
+description
}
}
}
}
Expand All @@ -88,42 +94,44 @@ fun RenderContext.switchField(
scope: (ScopeContext.() -> Unit) = {},
initialize: SwitchWithLabel<HTMLDivElement>.() -> Unit
) {
switchWithLabel("flex flex-col items-center w-full", id = id, scope = scope) {
initialize(this)
border {
switchWithLabel("flex flex-col place-items-center w-full", id = id, scope = scope) {
initialize(this)

div("flex flex-row items-center w-full") {
label?.let {
switchLabel("italic mr-5 w-2/6 text-right") {
+label
div("flex flex-row items-center w-full") {
label?.let {
switchLabel("italic mr-5 w-2/6 text-right") {
+label
}
}
}
div("w-4/6") {
switchToggle(
"""relative inline-flex flex-shrink-0 h-6 w-11
div("w-4/6") {
switchToggle(
"""relative inline-flex flex-shrink-0 h-6 w-11
| cursor-pointer rounded-full
| border-2 border-transparent ring-1 ring-blueBright-400
| transition-colors ease-in-out duration-200
| focus:outline-none focus:ring-4 focus:ring-blueBright-600""".trimMargin()
) {
) {

span("sr-only") { +"Use setting" }
className(enabled.map { if (it) "bg-blueBright-800" else "bg-blueBright-200" })
span(
"""inline-block h-5 w-5
span("sr-only") { +"Use setting" }
className(enabled.map { if (it) "bg-blueBright-800" else "bg-blueBright-200" })
span(
"""inline-block h-5 w-5
| rounded-full bg-white shadow pointer-events-none
| ring-0
| transform transition ease-in-out duration-200""".trimMargin()
) {
className(enabled.map { if (it) "translate-x-5" else "translate-x-0" })
attr(Aria.hidden, "true")
) {
className(enabled.map { if (it) "translate-x-5" else "translate-x-0" })
attr(Aria.hidden, "true")
}
}
}
}
}
description?.let {
switchDescription("block w-full") {
div {
+description
description?.let {
switchDescription("block w-full") {
div {
+description
}
}
}
}
Expand Down
7 changes: 7 additions & 0 deletions src/jsMain/kotlin/components/layout.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,13 @@ fun RenderContext.row(content: HtmlTag<HTMLDivElement>.() -> Unit) {
fun RenderContext.rowCemtered(content: HtmlTag<HTMLDivElement>.() -> Unit) {
div("flex flex-row gap-2 align-middle place-items-center mx-auto w-fit", content = content)
}
fun RenderContext.leftRightRow(content: HtmlTag<HTMLDivElement>.() -> Unit) {
div("flex flex-row w-full place-items-center justify-between", content = content)
}

fun RenderContext.border(content: HtmlTag<HTMLDivElement>.() -> Unit) {
div("rounded-lg border-2 border-blueBright-100 my-2 p-2 w-full", content = content)
}

fun RenderContext.centeredMainPanel(content: HtmlTag<HTMLDivElement>.() -> Unit) =
div("""flex flex-col grow items-left space-y-1 w-5/6 m-auto
Expand Down
6 changes: 6 additions & 0 deletions src/jsMain/kotlin/components/markdown.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,10 @@ fun RenderContext.markdownFile(file:String, baseClass: String?=null) {
// make sure we render lists with bullets, tailwind seems to not like this; so use css
}.domNode.innerHTML = renderMarkdown(it)
}
}

fun RenderContext.markdownDiv(markdown:String, baseClass: String?=null) {
div(baseClass) {
// make sure we render lists with bullets, tailwind seems to not like this; so use css
}.domNode.innerHTML = renderMarkdown(markdown)
}
89 changes: 19 additions & 70 deletions src/jsMain/kotlin/components/modals.kt
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
package components

import dev.fritz2.core.HtmlTag
import dev.fritz2.core.RenderContext
import dev.fritz2.core.storeOf
import dev.fritz2.core.transition
import dev.fritz2.core.*
import dev.fritz2.headless.components.modal
import dev.fritz2.headless.foundation.setInitialFocus
import koin
Expand All @@ -12,19 +9,19 @@ import org.w3c.dom.HTMLDivElement


fun RenderContext.overlay(
baseClass: String? = "absolute top-48 left-1/2 z-50 bg-white min-h-48 w-96 p-5 flex flex-col justify-between over-flow-auto",
baseClass: String? = "absolute top-48 left-1/2 bg-white min-h-48 w-96 p-5 flex flex-col justify-between over-flow-auto",
content: HtmlTag<HTMLDivElement>.() -> Unit
) {
div("absolute h-screen w-screen top-0 left-0 bg-gray-300 bg-opacity-90 z-40") {
div("absolute h-screen w-screen top-0 left-0 bg-gray-300 bg-opacity-90 z-20") {
div(baseClass, content = content)
}
}

fun RenderContext.overlayLarge(
baseClass: String? = "mx-auto z-50 bg-white h-screen w-5/6 p-5 flex flex-col overflow-y-auto",
baseClass: String? = "mx-auto bg-white h-screen w-5/6 p-5 flex flex-col overflow-y-auto",
content: HtmlTag<HTMLDivElement>.() -> Unit
) {
div("absolute h-screen w-screen top-0 left-0 bg-gray-300 bg-opacity-90 z-40") {
div("absolute h-screen w-screen top-0 left-0 bg-gray-300 bg-opacity-90 z-20") {
div(baseClass, content = content)
}
}
Expand All @@ -39,7 +36,7 @@ suspend fun confirm(
val openStateStore = storeOf(true)
modal {
openState(openStateStore)
modalPanel("w-full fixed z-10 inset-0 overflow-y-auto") {
modalPanel("w-full fixed inset-0 overflow-y-auto") {
div("flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0") {
modalOverlay("fixed inset-0 bg-blueMuted-300 bg-opacity-75 transition-opacity") {
transition(
Expand Down Expand Up @@ -105,68 +102,20 @@ suspend fun confirm(
}


fun RenderContext.infoModal(title: String = "Title TODO", markdown: String, close: String = "Close") {
val openStateStore = storeOf(false)
fun RenderContext.infoPopup(title: String = "Title TODO", markdown: String) {
val infoPopoverOpenStore = storeOf(false)
secondaryButton {
+"?"
clicks.map { true } handledBy openStateStore.update
+"???"
clicks.map { true } handledBy infoPopoverOpenStore.update
}
modal {
openState(openStateStore)
modalPanel("w-full fixed z-10 inset-0 overflow-y-auto") {
div("flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0") {
modalOverlay("fixed inset-0 bg-blueMuted-300 bg-opacity-75 transition-opacity") {
transition(
"ease-out duration-300",
"opacity-0",
"opacity-100",
"ease-in duration-200",
"opacity-100",
"opacity-0"
)
clicks.map { false } handledBy openStateStore.update
}
/* <!-- This element is to trick the browser into centering the modal contents. --> */
span("hidden sm:inline-block sm:align-middle sm:h-screen") {
attr("aria-hidden", "true")
+" "
}
div(
"""inline-block align-bottom sm:align-middle w-full sm:max-w-4xl px-6 py-5 sm:p-14
| bg-white rounded-lg
| shadow-xl transform transition-all
| text-left overflow-hidden""".trimMargin()
) {
transition(
"ease-out duration-300",
"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
"opacity-100 translate-y-0 sm:scale-100",
"ease-in duration-200",
"opacity-100 translate-y-0 sm:scale-100",
"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
)
div("mt-3 text-center sm:mt-0 sm:text-left") {
modalTitle("text-white bg-blueBright-700 p-2 items-center") {
paraCentered {
+title
setInitialFocus()
}
}
div("mt-2") {

div {

}.domNode.innerHTML = renderMarkdown(markdown)
div("flex flex-row place-items-center mx-auto w-fit overflow-y-auto") {
primaryButton {
+close
clicks handledBy {
openStateStore.update(false)
}
}
}
}
}
infoPopoverOpenStore.data.render {opened ->
if(opened) {
overlayLarge {
h1 { +title }
markdownDiv(markdown)
primaryButton {
+"Close"
clicks.map { false } handledBy infoPopoverOpenStore.update
}
}
}
Expand All @@ -177,7 +126,7 @@ fun busyPopupMountPoint() {
val busyStore = koin.get<BusyStore>()
modal {
openState(busyStore)
modalPanel("w-full fixed z-10 inset-0 overflow-y-auto") {
modalPanel("w-full fixed z-50 inset-0 overflow-y-auto") {
div("flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0") {
modalOverlay("fixed inset-0 bg-blueMuted-300 bg-opacity-75 transition-opacity") {
transition(
Expand Down
8 changes: 5 additions & 3 deletions src/jsMain/kotlin/metrics/metrics.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,8 @@ fun RenderContext.metrics() {
jsonFileImport(ListSerializer(MetricsOutput.serializer())) { decoded ->
metricsOutputStore.update(decoded)
}
infoModal("Exploring Metrics","""
infoPopup(
"Exploring Metrics", """
The metrics screen is of course the whole point of this application. After you've configured your
search plugin and created your test cases, you can run and explore metrics in this screen.
Expand Down Expand Up @@ -121,7 +122,8 @@ fun RenderContext.metrics() {
You can download results in json format and re-import it to explore the metrics later.
Note, future versions of this tool may add the ability to compare metrics as well.
""".trimIndent())
""".trimIndent()
)

}

Expand Down Expand Up @@ -155,7 +157,7 @@ private fun RenderContext.metricResult(
h2 {
+metricConfiguration.name
}
infoModal(metricConfiguration.metric.title, metricConfiguration.metric.explanation)
infoPopup(metricConfiguration.metric.title, metricConfiguration.metric.explanation)
}

div { +"Metric: ${+metricResult.metric}" }
Expand Down
6 changes: 4 additions & 2 deletions src/jsMain/kotlin/search/search.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,8 @@ fun RenderContext.searchScreen() {
stores.map { (f, s) -> f to s.current }.toMap()
} handledBy activeSearchPluginConfigurationStore.search
}
infoModal("The Search Tool","""
infoPopup(
"The Search Tool", """
You can use the search tool to explore your search service and convert
the searches you do into test cases.
Expand All @@ -121,7 +122,8 @@ fun RenderContext.searchScreen() {
that means you already have a test case with the same search context. If so, you can
modify it in the test cases screen. The id of each test case is a content hash of the
search context.
""".trimIndent())
""".trimIndent()
)

}
searchResults()
Expand Down
Loading

0 comments on commit 376332f

Please sign in to comment.