From 737a44303dfe3b366e631bdd303cd12b4efa42f9 Mon Sep 17 00:00:00 2001 From: Daan Vanden Bosch Date: Sun, 11 Oct 2020 11:53:17 +0200 Subject: [PATCH] Made widget styles more reusable and customizable. --- .../kotlin/world/phantasmal/core/PwResult.kt | 6 +- .../core/disposable/DisposableContainer.kt | 4 +- .../observable/value/list/ListVal.kt | 1 - .../main/kotlin/world/phantasmal/web/Main.kt | 2 +- .../application/widgets/ApplicationWidget.kt | 9 +- .../application/widgets/MainContentWidget.kt | 15 ++- .../application/widgets/NavigationWidget.kt | 8 +- .../web/application/widgets/PwToolButton.kt | 3 +- .../controllers/PathAwareTabController.kt | 2 + .../web/huntoptimizer/widgets/HelpWidget.kt | 6 ++ .../widgets/HuntOptimizerWidget.kt | 17 +++- .../huntoptimizer/widgets/MethodsWidget.kt | 2 +- web/src/main/resources/index.css | 83 ---------------- web/src/main/resources/index.html | 8 +- .../webui}/controllers/TabController.kt | 3 +- .../phantasmal/webui/dom/DefaultStyle.kt | 95 +++++++++++++++++++ .../kotlin/world/phantasmal/webui/dom/Dom.kt | 14 +++ .../webui/dom/{Creation.kt => DomCreation.kt} | 0 .../phantasmal/webui/widgets/LazyLoader.kt | 15 ++- .../phantasmal/webui}/widgets/TabContainer.kt | 41 +++++--- .../world/phantasmal/webui/widgets/Widget.kt | 3 + 21 files changed, 217 insertions(+), 120 deletions(-) delete mode 100644 web/src/main/resources/index.css rename {web/src/main/kotlin/world/phantasmal/web/core => webui/src/main/kotlin/world/phantasmal/webui}/controllers/TabController.kt (84%) create mode 100644 webui/src/main/kotlin/world/phantasmal/webui/dom/DefaultStyle.kt rename webui/src/main/kotlin/world/phantasmal/webui/dom/{Creation.kt => DomCreation.kt} (100%) rename {web/src/main/kotlin/world/phantasmal/web/core => webui/src/main/kotlin/world/phantasmal/webui}/widgets/TabContainer.kt (73%) diff --git a/core/src/commonMain/kotlin/world/phantasmal/core/PwResult.kt b/core/src/commonMain/kotlin/world/phantasmal/core/PwResult.kt index 8976bf3c..1f4de0c2 100644 --- a/core/src/commonMain/kotlin/world/phantasmal/core/PwResult.kt +++ b/core/src/commonMain/kotlin/world/phantasmal/core/PwResult.kt @@ -53,8 +53,8 @@ class PwResultBuilder(private val logger: KLogger) { Severity.Error -> logger.error(cause) { message ?: uiMessage } } - problems.add(Problem(severity, uiMessage)); - return this; + problems.add(Problem(severity, uiMessage)) + return this } /** @@ -62,7 +62,7 @@ class PwResultBuilder(private val logger: KLogger) { */ fun addResult(result: PwResult<*>): PwResultBuilder { problems.addAll(result.problems) - return this; + return this } fun success(value: T): Success = diff --git a/core/src/commonMain/kotlin/world/phantasmal/core/disposable/DisposableContainer.kt b/core/src/commonMain/kotlin/world/phantasmal/core/disposable/DisposableContainer.kt index f52f4e9e..cf8028df 100644 --- a/core/src/commonMain/kotlin/world/phantasmal/core/disposable/DisposableContainer.kt +++ b/core/src/commonMain/kotlin/world/phantasmal/core/disposable/DisposableContainer.kt @@ -11,11 +11,11 @@ abstract class DisposableContainer : TrackedDisposable() { } protected fun addDisposable(disposable: T): T { - return disposer.add(disposable); + return disposer.add(disposable) } protected fun addDisposables(vararg disposables: Disposable) { - disposer.addAll(*disposables); + disposer.addAll(*disposables) } protected fun removeDisposable(disposable: Disposable) = diff --git a/observable/src/commonMain/kotlin/world/phantasmal/observable/value/list/ListVal.kt b/observable/src/commonMain/kotlin/world/phantasmal/observable/value/list/ListVal.kt index fe320f88..4eb58d03 100644 --- a/observable/src/commonMain/kotlin/world/phantasmal/observable/value/list/ListVal.kt +++ b/observable/src/commonMain/kotlin/world/phantasmal/observable/value/list/ListVal.kt @@ -2,7 +2,6 @@ package world.phantasmal.observable.value.list import world.phantasmal.core.disposable.Disposable import world.phantasmal.observable.value.Val -import kotlin.reflect.KProperty interface ListVal : Val>, List { val sizeVal: Val diff --git a/web/src/main/kotlin/world/phantasmal/web/Main.kt b/web/src/main/kotlin/world/phantasmal/web/Main.kt index 8eeaac1d..32f9b77a 100644 --- a/web/src/main/kotlin/world/phantasmal/web/Main.kt +++ b/web/src/main/kotlin/world/phantasmal/web/Main.kt @@ -24,7 +24,7 @@ private fun init(): Disposable { val rootNode = document.body!! - disposer.add(Application(rootNode, HistoryApplicationUrl())) + disposer.add(Application(rootNode, disposer.add(HistoryApplicationUrl()))) return disposer } diff --git a/web/src/main/kotlin/world/phantasmal/web/application/widgets/ApplicationWidget.kt b/web/src/main/kotlin/world/phantasmal/web/application/widgets/ApplicationWidget.kt index c475dfa6..c9e62822 100644 --- a/web/src/main/kotlin/world/phantasmal/web/application/widgets/ApplicationWidget.kt +++ b/web/src/main/kotlin/world/phantasmal/web/application/widgets/ApplicationWidget.kt @@ -1,7 +1,7 @@ package world.phantasmal.web.application.widgets import org.w3c.dom.Node -import world.phantasmal.webui.dom.div +import world.phantasmal.webui.dom.root import world.phantasmal.webui.widgets.Widget class ApplicationWidget( @@ -9,7 +9,7 @@ class ApplicationWidget( private val mainContentWidget: MainContentWidget, ) : Widget(::style) { override fun Node.createElement() = - div(className = "pw-application-application") { + root(className = "pw-application-application") { addChild(navigationWidget) addChild(mainContentWidget) } @@ -24,5 +24,10 @@ private fun style() = """ bottom: 0; left: 0; right: 0; + display: flex; + flex-direction: column; +} +.pw-application-application .pw-application-main-content { + flex: 1; } """ diff --git a/web/src/main/kotlin/world/phantasmal/web/application/widgets/MainContentWidget.kt b/web/src/main/kotlin/world/phantasmal/web/application/widgets/MainContentWidget.kt index 6d253f3c..dc8e833a 100644 --- a/web/src/main/kotlin/world/phantasmal/web/application/widgets/MainContentWidget.kt +++ b/web/src/main/kotlin/world/phantasmal/web/application/widgets/MainContentWidget.kt @@ -11,7 +11,7 @@ import world.phantasmal.webui.widgets.Widget class MainContentWidget( private val ctrl: MainContentController, private val toolViews: Map Widget>, -) : Widget() { +) : Widget(::style) { override fun Node.createElement() = div(className = "pw-application-main-content") { ctrl.tools.forEach { (tool, active) -> toolViews[tool]?.let { createWidget -> @@ -20,3 +20,16 @@ class MainContentWidget( } } } + +@Suppress("CssUnusedSymbol") +// language=css +private fun style() = """ +.pw-application-main-content { + display: flex; + flex-direction: column; +} + +.pw-application-main-content > * { + flex: 1; +} +""" diff --git a/web/src/main/kotlin/world/phantasmal/web/application/widgets/NavigationWidget.kt b/web/src/main/kotlin/world/phantasmal/web/application/widgets/NavigationWidget.kt index 4698a5aa..fc080b1d 100644 --- a/web/src/main/kotlin/world/phantasmal/web/application/widgets/NavigationWidget.kt +++ b/web/src/main/kotlin/world/phantasmal/web/application/widgets/NavigationWidget.kt @@ -14,7 +14,7 @@ class NavigationWidget(private val ctrl: NavigationController) : Widget(::style) } } -@Suppress("CssUnusedSymbol") +@Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty") // language=css private fun style() = """ .pw-application-navigation { @@ -23,7 +23,7 @@ private fun style() = """ flex-direction: row; align-items: stretch; background-color: hsl(0, 0%, 10%); - border-bottom: solid 2px var(--bg-color); + border-bottom: solid 2px var(--pw-bg-color); } .pw-application-navigation-spacer { @@ -51,10 +51,10 @@ private fun style() = """ justify-content: center; width: 30px; font-size: 16px; - color: var(--control-text-color); + color: var(--pw-control-text-color); } .pw-application-navigation-github:hover { - color: var(--control-text-color-hover); + color: var(--pw-control-text-color-hover); } """ diff --git a/web/src/main/kotlin/world/phantasmal/web/application/widgets/PwToolButton.kt b/web/src/main/kotlin/world/phantasmal/web/application/widgets/PwToolButton.kt index 28740444..b1e64760 100644 --- a/web/src/main/kotlin/world/phantasmal/web/application/widgets/PwToolButton.kt +++ b/web/src/main/kotlin/world/phantasmal/web/application/widgets/PwToolButton.kt @@ -28,6 +28,7 @@ class PwToolButton( } } +@Suppress("CssUnresolvedCustomProperty") // language=css private fun style() = """ .pw-application-pw-tool-button input { @@ -52,6 +53,6 @@ private fun style() = """ .pw-application-pw-tool-button input:checked + label { color: hsl(0, 0%, 85%); - background-color: var(--bg-color); + background-color: var(--pw-bg-color); } """ diff --git a/web/src/main/kotlin/world/phantasmal/web/core/controllers/PathAwareTabController.kt b/web/src/main/kotlin/world/phantasmal/web/core/controllers/PathAwareTabController.kt index 4b3d4c54..e3019899 100644 --- a/web/src/main/kotlin/world/phantasmal/web/core/controllers/PathAwareTabController.kt +++ b/web/src/main/kotlin/world/phantasmal/web/core/controllers/PathAwareTabController.kt @@ -2,6 +2,8 @@ package world.phantasmal.web.core.controllers import world.phantasmal.web.core.stores.PwTool import world.phantasmal.web.core.stores.UiStore +import world.phantasmal.webui.controllers.Tab +import world.phantasmal.webui.controllers.TabController open class PathAwareTab(override val title: String, val path: String) : Tab diff --git a/web/src/main/kotlin/world/phantasmal/web/huntoptimizer/widgets/HelpWidget.kt b/web/src/main/kotlin/world/phantasmal/web/huntoptimizer/widgets/HelpWidget.kt index 50e6456c..54e01f67 100644 --- a/web/src/main/kotlin/world/phantasmal/web/huntoptimizer/widgets/HelpWidget.kt +++ b/web/src/main/kotlin/world/phantasmal/web/huntoptimizer/widgets/HelpWidget.kt @@ -25,8 +25,14 @@ class HelpWidget : Widget(::style) { } } +@Suppress("CssUnusedSymbol") // language=css private fun style() = """ +.pw-huntoptimizer-help { + cursor: initial; + user-select: text; +} + .pw-huntoptimizer-help p { margin: 1em; max-width: 600px; diff --git a/web/src/main/kotlin/world/phantasmal/web/huntoptimizer/widgets/HuntOptimizerWidget.kt b/web/src/main/kotlin/world/phantasmal/web/huntoptimizer/widgets/HuntOptimizerWidget.kt index d6e63ab0..f24ca74f 100644 --- a/web/src/main/kotlin/world/phantasmal/web/huntoptimizer/widgets/HuntOptimizerWidget.kt +++ b/web/src/main/kotlin/world/phantasmal/web/huntoptimizer/widgets/HuntOptimizerWidget.kt @@ -1,7 +1,7 @@ package world.phantasmal.web.huntoptimizer.widgets import org.w3c.dom.Node -import world.phantasmal.web.core.widgets.TabContainer +import world.phantasmal.webui.widgets.TabContainer import world.phantasmal.web.huntoptimizer.HuntOptimizerUrls import world.phantasmal.web.huntoptimizer.controllers.HuntOptimizerController import world.phantasmal.webui.dom.div @@ -10,7 +10,7 @@ import world.phantasmal.webui.widgets.Widget class HuntOptimizerWidget( private val ctrl: HuntOptimizerController, private val createMethodsWidget: () -> MethodsWidget, -) : Widget() { +) : Widget(::style) { override fun Node.createElement() = div(className = "pw-huntoptimizer-hunt-optimizer") { addChild(TabContainer( ctrl = ctrl, @@ -29,3 +29,16 @@ class HuntOptimizerWidget( )) } } + +@Suppress("CssUnusedSymbol") +// language=css +private fun style() = """ +.pw-huntoptimizer-hunt-optimizer { + display: flex; + flex-direction: column; +} + +.pw-huntoptimizer-hunt-optimizer > * { + flex: 1; +} +""" diff --git a/web/src/main/kotlin/world/phantasmal/web/huntoptimizer/widgets/MethodsWidget.kt b/web/src/main/kotlin/world/phantasmal/web/huntoptimizer/widgets/MethodsWidget.kt index e67f3b87..25df69eb 100644 --- a/web/src/main/kotlin/world/phantasmal/web/huntoptimizer/widgets/MethodsWidget.kt +++ b/web/src/main/kotlin/world/phantasmal/web/huntoptimizer/widgets/MethodsWidget.kt @@ -1,7 +1,7 @@ package world.phantasmal.web.huntoptimizer.widgets import org.w3c.dom.Node -import world.phantasmal.web.core.widgets.TabContainer +import world.phantasmal.webui.widgets.TabContainer import world.phantasmal.web.huntoptimizer.controllers.MethodsController import world.phantasmal.webui.dom.div import world.phantasmal.webui.widgets.Widget diff --git a/web/src/main/resources/index.css b/web/src/main/resources/index.css deleted file mode 100644 index 53d91820..00000000 --- a/web/src/main/resources/index.css +++ /dev/null @@ -1,83 +0,0 @@ -/* Defaults */ - -:root { - /* Basic Widget variables */ - - --bg-color: hsl(0, 0%, 15%); - --text-color: hsl(0, 0%, 80%); - --text-color-disabled: hsl(0, 0%, 55%); - --font-family: Verdana, Geneva, sans-serif; - --border-color: hsl(0, 0%, 25%); - --border-color-focus: hsl(0, 0%, 35%); - --border: solid 1px var(--border-color); - --border-focus: solid 1px var(--border-color-focus); - - /* Scrollbars */ - - --scrollbar-color: hsl(0, 0%, 13%); - --scrollbar-thumb-color: hsl(0, 0%, 17%); - - /* Controls */ - - --control-bg-color: hsl(0, 0%, 20%); - --control-bg-color-hover: hsl(0, 0%, 25%); - --control-text-color: hsl(0, 0%, 80%); - --control-text-color-hover: hsl(0, 0%, 90%); - --control-border: solid 1px hsl(0, 0%, 10%); - - --control-inner-border: solid 1px hsl(0, 0%, 35%); - --control-inner-border-focus: solid 1px hsl(0, 0%, 50%); - - /* Inputs */ - - --input-bg-color: hsl(0, 0%, 12%); - --input-bg-color-disabled: hsl(0, 0%, 15%); - --input-text-color: hsl(0, 0%, 75%); - --input-text-color-disabled: var(--text-color-disabled); - --input-border: solid 1px hsl(0, 0%, 25%); - --input-border-hover: solid 1px hsl(0, 0%, 30%); - --input-border-focus: solid 1px hsl(0, 0%, 40%); - --input-border-disabled: solid 1px hsl(0, 0%, 20%); - - --input-inner-border: solid 1px hsl(0, 0%, 5%); -} - -* { - scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-color); -} - -::-webkit-scrollbar { - background-color: var(--scrollbar-color); -} - -::-webkit-scrollbar-track { - background-color: var(--scrollbar-color); -} - -::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-thumb-color); -} - -::-webkit-scrollbar-corner { - background-color: var(--scrollbar-color); -} - -body { - cursor: default; - user-select: none; - overflow: hidden; - margin: 0; - font-size: 13px; - background-color: var(--bg-color); - color: var(--text-color); - font-family: var(--font-family); -} - -h2 { - font-size: 1.1em; - margin: 0.5em 0; -} - -#root *[hidden] { - display: none; -} diff --git a/web/src/main/resources/index.html b/web/src/main/resources/index.html index 1d97854a..20fc6d45 100644 --- a/web/src/main/resources/index.html +++ b/web/src/main/resources/index.html @@ -5,9 +5,13 @@ Phantasmal World - + -
diff --git a/web/src/main/kotlin/world/phantasmal/web/core/controllers/TabController.kt b/webui/src/main/kotlin/world/phantasmal/webui/controllers/TabController.kt similarity index 84% rename from web/src/main/kotlin/world/phantasmal/web/core/controllers/TabController.kt rename to webui/src/main/kotlin/world/phantasmal/webui/controllers/TabController.kt index d954457c..5f572b25 100644 --- a/web/src/main/kotlin/world/phantasmal/web/core/controllers/TabController.kt +++ b/webui/src/main/kotlin/world/phantasmal/webui/controllers/TabController.kt @@ -1,9 +1,8 @@ -package world.phantasmal.web.core.controllers +package world.phantasmal.webui.controllers import world.phantasmal.observable.value.MutableVal import world.phantasmal.observable.value.Val import world.phantasmal.observable.value.mutableVal -import world.phantasmal.webui.controllers.Controller interface Tab { val title: String diff --git a/webui/src/main/kotlin/world/phantasmal/webui/dom/DefaultStyle.kt b/webui/src/main/kotlin/world/phantasmal/webui/dom/DefaultStyle.kt new file mode 100644 index 00000000..86149095 --- /dev/null +++ b/webui/src/main/kotlin/world/phantasmal/webui/dom/DefaultStyle.kt @@ -0,0 +1,95 @@ +package world.phantasmal.webui.dom + +@Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty") +// language=css +internal const val DEFAULT_STYLE = """ +#pw-root { + /* Basic Widget variables */ + + --pw-bg-color: hsl(0, 0%, 15%); + --pw-text-color: hsl(0, 0%, 80%); + --pw-text-color-disabled: hsl(0, 0%, 55%); + --pw-font-family: Verdana, Geneva, sans-serif; + --pw-border-color: hsl(0, 0%, 25%); + --pw-border-color-focus: hsl(0, 0%, 35%); + --pw-border: solid 1px var(--pw-border-color); + --pw-border-focus: solid 1px var(--pw-border-color-focus); + + /* Scrollbars */ + + --pw-scrollbar-color: hsl(0, 0%, 13%); + --pw-scrollbar-thumb-color: hsl(0, 0%, 17%); + + /* Controls */ + + --pw-control-bg-color: hsl(0, 0%, 20%); + --pw-control-bg-color-hover: hsl(0, 0%, 25%); + --pw-control-text-color: hsl(0, 0%, 80%); + --pw-control-text-color-hover: hsl(0, 0%, 90%); + --pw-control-border: solid 1px hsl(0, 0%, 10%); + + --pw-control-inner-border: solid 1px hsl(0, 0%, 35%); + --pw-control-inner-border-focus: solid 1px hsl(0, 0%, 50%); + + /* Inputs */ + + --pw-input-bg-color: hsl(0, 0%, 12%); + --pw-input-bg-color-disabled: hsl(0, 0%, 15%); + --pw-input-text-color: hsl(0, 0%, 75%); + --pw-input-text-color-disabled: var(--pw-text-color-disabled); + --pw-input-border: solid 1px hsl(0, 0%, 25%); + --pw-input-border-hover: solid 1px hsl(0, 0%, 30%); + --pw-input-border-focus: solid 1px hsl(0, 0%, 40%); + --pw-input-border-disabled: solid 1px hsl(0, 0%, 20%); + + --pw-input-inner-border: solid 1px hsl(0, 0%, 5%); + + /* TabContainer */ + + --pw-tab-bg-color: hsl(0, 0%, 12%); + --pw-tab-bg-color-hover: hsl(0, 0%, 18%); + --pw-tab-bg-color-active: var(--pw-bg-color); + --pw-tab-text-color: hsl(0, 0%, 75%); + --pw-tab-text-color-hover: hsl(0, 0%, 85%); + --pw-tab-text-color-active: hsl(0, 0%, 90%); + + /* Root element styling */ + + cursor: default; + user-select: none; + overflow: hidden; + font-size: 13px; + background-color: var(--pw-bg-color); + color: var(--pw-text-color); + font-family: var(--pw-font-family), sans-serif; +} + +#pw-root * { + scrollbar-color: var(--pw-scrollbar-thumb-color) var(--pw-scrollbar-color); +} + +#pw-root ::-webkit-scrollbar { + background-color: var(--pw-scrollbar-color); +} + +#pw-root ::-webkit-scrollbar-track { + background-color: var(--pw-scrollbar-color); +} + +#pw-root ::-webkit-scrollbar-thumb { + background-color: var(--pw-scrollbar-thumb-color); +} + +#pw-root ::-webkit-scrollbar-corner { + background-color: var(--pw-scrollbar-color); +} + +#pw-root h2 { + font-size: 1.1em; + margin: 0.5em 0; +} + +#pw-root *[hidden] { + display: none; +} +""" diff --git a/webui/src/main/kotlin/world/phantasmal/webui/dom/Dom.kt b/webui/src/main/kotlin/world/phantasmal/webui/dom/Dom.kt index 1f339f3a..206b40e7 100644 --- a/webui/src/main/kotlin/world/phantasmal/webui/dom/Dom.kt +++ b/webui/src/main/kotlin/world/phantasmal/webui/dom/Dom.kt @@ -1,6 +1,11 @@ package world.phantasmal.webui.dom +import kotlinx.browser.document +import kotlinx.dom.appendText import org.w3c.dom.AddEventListenerOptions +import org.w3c.dom.HTMLElement +import org.w3c.dom.HTMLStyleElement +import org.w3c.dom.Node import org.w3c.dom.events.Event import org.w3c.dom.events.EventTarget import world.phantasmal.core.disposable.Disposable @@ -19,3 +24,12 @@ fun disposableListener( target.removeEventListener(type, listener) } } + +fun Node.root(className: String? = null, block: HTMLElement.() -> Unit): HTMLElement { + val styleEl = document.createElement("style") as HTMLStyleElement + styleEl.id = "pw-root-styles" + styleEl.appendText(DEFAULT_STYLE) + document.head!!.append(styleEl) + + return div(id = "pw-root", className, block = block) +} diff --git a/webui/src/main/kotlin/world/phantasmal/webui/dom/Creation.kt b/webui/src/main/kotlin/world/phantasmal/webui/dom/DomCreation.kt similarity index 100% rename from webui/src/main/kotlin/world/phantasmal/webui/dom/Creation.kt rename to webui/src/main/kotlin/world/phantasmal/webui/dom/DomCreation.kt diff --git a/webui/src/main/kotlin/world/phantasmal/webui/widgets/LazyLoader.kt b/webui/src/main/kotlin/world/phantasmal/webui/widgets/LazyLoader.kt index dd608d36..5fedc336 100644 --- a/webui/src/main/kotlin/world/phantasmal/webui/widgets/LazyLoader.kt +++ b/webui/src/main/kotlin/world/phantasmal/webui/widgets/LazyLoader.kt @@ -8,7 +8,7 @@ import world.phantasmal.webui.dom.div class LazyLoader( hidden: Val = falseVal(), private val createWidget: () -> Widget, -) : Widget(NO_STYLE, hidden) { +) : Widget(::style, hidden) { private var initialized = false override fun Node.createElement() = div(className = "pw-lazy-loader") { @@ -20,3 +20,16 @@ class LazyLoader( } } } + +@Suppress("CssUnusedSymbol") +// language=css +private fun style() = """ +.pw-lazy-loader { + display: flex; + flex-direction: column; +} + +.pw-lazy-loader > * { + flex: 1; +} +""" diff --git a/web/src/main/kotlin/world/phantasmal/web/core/widgets/TabContainer.kt b/webui/src/main/kotlin/world/phantasmal/webui/widgets/TabContainer.kt similarity index 73% rename from web/src/main/kotlin/world/phantasmal/web/core/widgets/TabContainer.kt rename to webui/src/main/kotlin/world/phantasmal/webui/widgets/TabContainer.kt index 4c85ffbd..505978f1 100644 --- a/web/src/main/kotlin/world/phantasmal/web/core/widgets/TabContainer.kt +++ b/webui/src/main/kotlin/world/phantasmal/webui/widgets/TabContainer.kt @@ -1,14 +1,12 @@ -package world.phantasmal.web.core.widgets +package world.phantasmal.webui.widgets import org.w3c.dom.Node import world.phantasmal.observable.value.Val import world.phantasmal.observable.value.falseVal -import world.phantasmal.web.core.controllers.Tab -import world.phantasmal.web.core.controllers.TabController +import world.phantasmal.webui.controllers.Tab +import world.phantasmal.webui.controllers.TabController import world.phantasmal.webui.dom.div import world.phantasmal.webui.dom.span -import world.phantasmal.webui.widgets.LazyLoader -import world.phantasmal.webui.widgets.Widget class TabContainer( hidden: Val = falseVal(), @@ -56,11 +54,16 @@ class TabContainer( @Suppress("CssUnresolvedCustomProperty", "CssUnusedSymbol") // language=css private fun style() = """ +.pw-tab-container { + display: flex; + flex-direction: column; +} + .pw-tab-container-bar { box-sizing: border-box; height: 28px; padding: 3px 3px 0 3px; - border-bottom: var(--border); + border-bottom: var(--pw-border); } .pw-tab-container-tab { @@ -69,21 +72,31 @@ private fun style() = """ align-items: center; height: calc(100% + 1px); padding: 0 10px; - border: var(--border); + border: var(--pw-border); margin: 0 1px -1px 1px; - background-color: hsl(0, 0%, 12%); - color: hsl(0, 0%, 75%); + background-color: var(--pw-tab-bg-color); + color: var(--pw-tab-text-color); font-size: 13px; } .pw-tab-container-tab:hover { - background-color: hsl(0, 0%, 18%); - color: hsl(0, 0%, 85%); + background-color: var(--pw-tab-bg-color-hover); + color: var(--pw-tab-text-color-hover); } .pw-tab-container-tab.active { - background-color: var(--bg-color); - color: hsl(0, 0%, 90%); - border-bottom-color: var(--bg-color); + background-color: var(--pw-tab-bg-color-active); + color: var(--pw-tab-text-color-active); + border-bottom-color: var(--pw-tab-bg-color-active); +} + +.pw-tab-container-panes { + flex: 1; + display: flex; + flex-direction: row; +} + +.pw-tab-container-panes > * { + flex: 1; } """ diff --git a/webui/src/main/kotlin/world/phantasmal/webui/widgets/Widget.kt b/webui/src/main/kotlin/world/phantasmal/webui/widgets/Widget.kt index 77b9bcd0..bda132d9 100644 --- a/webui/src/main/kotlin/world/phantasmal/webui/widgets/Widget.kt +++ b/webui/src/main/kotlin/world/phantasmal/webui/widgets/Widget.kt @@ -22,6 +22,8 @@ abstract class Widget( private val _children = mutableListOf() private val elementDelegate = lazy { + // Add CSS declarations to stylesheet if this is the first time we're instantiating this + // widget. if (style !== NO_STYLE && STYLES_ADDED.add(this::class)) { STYLE_EL.appendText(style()) } @@ -157,6 +159,7 @@ abstract class Widget( companion object { private val STYLE_EL by lazy { val el = document.createElement("style") as HTMLStyleElement + el.id = "pw-widget-styles" document.head!!.append(el) el }