Sancaros/phantasmal-world
1
0
Fork 0
mirror of https://github.com/DaanVandenBosch/phantasmal-world.git synced 2025-04-05 15:28:29 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improved look and feel of DockWidget.

Browse Source
This commit is contained in:
Daan Vanden Bosch 2020-10-13 21:20:26 +02:00
parent 3114f69429
commit 9a3821085d
8 changed files with 42 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/main/kotlin/world/phantasmal/web/Main.kt
View File

@ -18,6 +18,7 @@ import world.phantasmal.web.core.HttpAssetLoader
import world.phantasmal.web.core.UiDispatcher import world.phantasmal.web.core.UiDispatcher
import world.phantasmal.web.core.stores.ApplicationUrl import world.phantasmal.web.core.stores.ApplicationUrl
import world.phantasmal.webui.dom.disposableListener import world.phantasmal.webui.dom.disposableListener
import world.phantasmal.webui.dom.root
fun main() { fun main() {
if (document.body != null) { if (document.body != null) {
@ -34,7 +35,7 @@ private fun init(): Disposable {
disposer.add(disposable { scope.cancel() }) disposer.add(disposable { scope.cancel() })
val rootNode = document.body!! val rootElement = document.body!!.root()
val httpClient = HttpClient { val httpClient = HttpClient {
install(JsonFeature) { install(JsonFeature) {
@ -52,7 +53,7 @@ private fun init(): Disposable {
disposer.add(Application( disposer.add(Application(
scope, scope,
rootNode, rootElement,
HttpAssetLoader(httpClient, basePath), HttpAssetLoader(httpClient, basePath),
disposer.add(HistoryApplicationUrl()) disposer.add(HistoryApplicationUrl())
)) ))

6
web/src/main/kotlin/world/phantasmal/web/application/Application.kt
View File

@ -3,7 +3,7 @@ package world.phantasmal.web.application
import kotlinx.browser.document import kotlinx.browser.document
import kotlinx.coroutines.CoroutineScope import kotlinx.coroutines.CoroutineScope
import org.w3c.dom.DragEvent import org.w3c.dom.DragEvent
import org.w3c.dom.Node import org.w3c.dom.HTMLElement
import org.w3c.dom.events.Event import org.w3c.dom.events.Event
import org.w3c.dom.events.KeyboardEvent import org.w3c.dom.events.KeyboardEvent
import world.phantasmal.core.disposable.DisposableContainer import world.phantasmal.core.disposable.DisposableContainer
@ -22,7 +22,7 @@ import world.phantasmal.webui.dom.disposableListener
class Application( class Application(
scope: CoroutineScope, scope: CoroutineScope,
rootNode: Node, rootElement: HTMLElement,
assetLoader: AssetLoader, assetLoader: AssetLoader,
applicationUrl: ApplicationUrl, applicationUrl: ApplicationUrl,
) : DisposableContainer() { ) : DisposableContainer() {
@ -62,7 +62,7 @@ class Application(
), ),
) )
rootNode.appendChild(applicationWidget.element) rootElement.appendChild(applicationWidget.element)
} }
private fun beforeInput(e: Event) { private fun beforeInput(e: Event) {

4
web/src/main/kotlin/world/phantasmal/web/application/widgets/ApplicationWidget.kt
View File

@ -1,7 +1,7 @@
package world.phantasmal.web.application.widgets package world.phantasmal.web.application.widgets
import org.w3c.dom.Node import org.w3c.dom.Node
import world.phantasmal.webui.dom.root import world.phantasmal.webui.dom.div
import world.phantasmal.webui.widgets.Widget import world.phantasmal.webui.widgets.Widget
class ApplicationWidget( class ApplicationWidget(
@ -9,7 +9,7 @@ class ApplicationWidget(
private val mainContentWidget: MainContentWidget, private val mainContentWidget: MainContentWidget,
) : Widget(::style) { ) : Widget(::style) {
override fun Node.createElement() = override fun Node.createElement() =
root(className = "pw-application-application") { div(className = "pw-application-application") {
addChild(navigationWidget) addChild(navigationWidget)
addChild(mainContentWidget) addChild(mainContentWidget)
} }

2
web/src/main/kotlin/world/phantasmal/web/core/Js.kt
View File

@ -1,4 +1,4 @@
package golden_layout.world.phantasmal.web.core package world.phantasmal.web.core
fun <T> newJsObject(block: T.() -> Unit): T = fun <T> newJsObject(block: T.() -> Unit): T =
js("{}").unsafeCast<T>().apply(block) js("{}").unsafeCast<T>().apply(block)

45
web/src/main/kotlin/world/phantasmal/web/core/widgets/DockWidget.kt
View File

@ -1,7 +1,7 @@
package golden_layout.world.phantasmal.web.core.widgets package world.phantasmal.web.core.widgets
import golden_layout.GoldenLayout import world.phantasmal.web.externals.GoldenLayout
import golden_layout.world.phantasmal.web.core.newJsObject import world.phantasmal.web.core.newJsObject
import org.w3c.dom.Node import org.w3c.dom.Node
import world.phantasmal.observable.value.Val import world.phantasmal.observable.value.Val
import world.phantasmal.observable.value.falseVal import world.phantasmal.observable.value.falseVal
@ -134,21 +134,22 @@ class DockWidget(
} }
} }
// Use div.pw-core-dock for higher specificity than the default GoldenLayout CSS. // Use #pw-root for higher specificity than the default GoldenLayout CSS.
@Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty") @Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty")
// language=css // language=css
private fun style() = """ private fun style() = """
div.pw-core-dock .lm_header { #pw-root .lm_header {
box-sizing: border-box; box-sizing: border-box;
height: ${HEADER_HEIGHT + 4}px;
padding: 3px 0 0 0; padding: 3px 0 0 0;
border-bottom: var(--pw-border); border-bottom: var(--pw-border);
} }
div.pw-core-dock .lm_tabs { #pw-root .lm_header .lm_tabs {
padding: 0 3px; padding: 0 3px;
} }
div.pw-core-dock .lm_tab { #pw-root .lm_header .lm_tabs .lm_tab {
cursor: default; cursor: default;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -161,22 +162,22 @@ div.pw-core-dock .lm_tab {
font-size: 13px; font-size: 13px;
} }
div.pw-core-dock .lm_tab:hover { #pw-root .lm_header .lm_tabs .lm_tab:hover {
background-color: hsl(0, 0%, 18%); background-color: hsl(0, 0%, 18%);
color: hsl(0, 0%, 85%); color: hsl(0, 0%, 85%);
} }
div.pw-core-dock .lm_tab.lm_active { #pw-root .lm_header .lm_tabs .lm_tab.lm_active {
background-color: var(--pw-bg-color); background-color: var(--pw-bg-color);
color: hsl(0, 0%, 90%); color: hsl(0, 0%, 90%);
border-bottom-color: var(--pw-bg-color); border-bottom-color: var(--pw-bg-color);
} }
div.pw-core-dock .lm_header .lm_controls > li { #pw-root .lm_header .lm_controls > li {
cursor: default; cursor: default;
} }
div.pw-core-dock .lm_header .lm_controls .lm_close { #pw-root .lm_header .lm_controls .lm_close {
/* a white 9x9 X shape */ /* a white 9x9 X shape */
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=);
background-position: center center; background-position: center center;
@ -186,33 +187,41 @@ div.pw-core-dock .lm_header .lm_controls .lm_close {
transition: opacity 300ms ease; transition: opacity 300ms ease;
} }
div.pw-core-dock .lm_header .lm_controls .lm_close:hover { #pw-root .lm_header .lm_controls .lm_close:hover {
opacity: 1; opacity: 1;
} }
div.pw-core-dock .lm_content > * { #pw-root .lm_content > * {
width: 100%; width: 100%;
/* Subtract HEADER_HEIGHT_DIFF px as workaround for bug related to headerHeight. */ /* Subtract HEADER_HEIGHT_DIFF px as workaround for bug related to headerHeight. */
height: calc(100% - ${HEADER_HEIGHT_DIFF}px); height: calc(100% - ${HEADER_HEIGHT_DIFF}px);
} }
div.pw-core-dock .lm_splitter { #pw-root .lm_splitter {
box-sizing: border-box; box-sizing: border-box;
background-color: hsl(0, 0%, 20%); background-color: hsl(0, 0%, 20%);
} }
div.pw-core-dock .lm_splitter.lm_vertical { #pw-root .lm_splitter.lm_vertical {
border-top: var(--pw-border); border-top: var(--pw-border);
border-bottom: var(--pw-border); border-bottom: var(--pw-border);
} }
div.pw-core-dock .lm_splitter.lm_horizontal { #pw-root .lm_splitter.lm_horizontal {
border-left: var(--pw-border); border-left: var(--pw-border);
border-right: var(--pw-border); border-right: var(--pw-border);
} }
body .lm_dropTargetIndicator { #pw-root .lm_dragProxy > .lm_content {
box-sizing: border-box; box-sizing: border-box;
background-color: hsla(0, 0%, 100%, 0.2); background-color: var(--pw-bg-color);
border-left: var(--pw-border);
border-right: var(--pw-border);
border-bottom: var(--pw-border);
}
#pw-root .lm_dropTargetIndicator {
box-sizing: border-box;
background-color: hsla(0, 0%, 50%, 0.2);
} }
""" """

2
web/src/main/kotlin/golden-layout.kt → web/src/main/kotlin/world/phantasmal/web/externals/golden-layout.kt vendored
View File

@ -1,4 +1,4 @@
package golden_layout package world.phantasmal.web.externals
import org.w3c.dom.Element import org.w3c.dom.Element

2
web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestEditorWidget.kt
View File

@ -1,6 +1,6 @@
package world.phantasmal.web.questEditor.widgets package world.phantasmal.web.questEditor.widgets
import golden_layout.world.phantasmal.web.core.widgets.* import world.phantasmal.web.core.widgets.*
import org.w3c.dom.Node import org.w3c.dom.Node
import world.phantasmal.webui.dom.div import world.phantasmal.webui.dom.div
import world.phantasmal.webui.widgets.Widget import world.phantasmal.webui.widgets.Widget

7
webui/src/main/kotlin/world/phantasmal/webui/dom/Dom.kt
View File

@ -25,18 +25,19 @@ fun <E : Event> disposableListener(
} }
} }
fun Node.root(className: String? = null, block: HTMLElement.() -> Unit): HTMLElement { fun HTMLElement.root(): HTMLElement {
val styleEl = document.createElement("style") as HTMLStyleElement val styleEl = document.createElement("style") as HTMLStyleElement
styleEl.id = "pw-root-styles" styleEl.id = "pw-root-styles"
styleEl.appendText(DEFAULT_STYLE) styleEl.appendText(DEFAULT_STYLE)
document.head!!.append(styleEl) document.head!!.append(styleEl)
return div(id = "pw-root", className, block = block) id = "pw-root"
return this
} }
fun <T> Node.bindChildrenTo( fun <T> Node.bindChildrenTo(
list: ListVal<T>, list: ListVal<T>,
createChild: (T, Int) -> Node createChild: (T, Int) -> Node,
): Disposable { ): Disposable {
fun spliceChildren(index: Int, removedCount: Int, inserted: List<T>) { fun spliceChildren(index: Int, removedCount: Int, inserted: List<T>) {
for (i in 1..removedCount) { for (i in 1..removedCount) {