Sancaros/phantasmal-world
1
0
Fork 0
mirror of https://github.com/DaanVandenBosch/phantasmal-world.git synced 2025-04-04 22:58: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.stores.ApplicationUrl
import world.phantasmal.webui.dom.disposableListener
import world.phantasmal.webui.dom.root
fun main() {
if (document.body != null) {
@ -34,7 +35,7 @@ private fun init(): Disposable {
disposer.add(disposable { scope.cancel() })
val rootNode = document.body!!
val rootElement = document.body!!.root()
val httpClient = HttpClient {
install(JsonFeature) {
@ -52,7 +53,7 @@ private fun init(): Disposable {
disposer.add(Application(
scope,
rootNode,
rootElement,
HttpAssetLoader(httpClient, basePath),
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.coroutines.CoroutineScope
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.KeyboardEvent
import world.phantasmal.core.disposable.DisposableContainer
@ -22,7 +22,7 @@ import world.phantasmal.webui.dom.disposableListener
class Application(
scope: CoroutineScope,
rootNode: Node,
rootElement: HTMLElement,
assetLoader: AssetLoader,
applicationUrl: ApplicationUrl,
) : DisposableContainer() {
@ -62,7 +62,7 @@ class Application(
),
)
rootNode.appendChild(applicationWidget.element)
rootElement.appendChild(applicationWidget.element)
}
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
import org.w3c.dom.Node
import world.phantasmal.webui.dom.root
import world.phantasmal.webui.dom.div
import world.phantasmal.webui.widgets.Widget
class ApplicationWidget(
@ -9,7 +9,7 @@ class ApplicationWidget(
private val mainContentWidget: MainContentWidget,
) : Widget(::style) {
override fun Node.createElement() =
root(className = "pw-application-application") {
div(className = "pw-application-application") {
addChild(navigationWidget)
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 =
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 golden_layout.world.phantasmal.web.core.newJsObject
import world.phantasmal.web.externals.GoldenLayout
import world.phantasmal.web.core.newJsObject
import org.w3c.dom.Node
import world.phantasmal.observable.value.Val
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")
// language=css
private fun style() = """
div.pw-core-dock .lm_header {
#pw-root .lm_header {
box-sizing: border-box;
height: ${HEADER_HEIGHT + 4}px;
padding: 3px 0 0 0;
border-bottom: var(--pw-border);
}
div.pw-core-dock .lm_tabs {
#pw-root .lm_header .lm_tabs {
padding: 0 3px;
}
div.pw-core-dock .lm_tab {
#pw-root .lm_header .lm_tabs .lm_tab {
cursor: default;
display: inline-flex;
align-items: center;
@ -161,22 +162,22 @@ div.pw-core-dock .lm_tab {
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%);
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);
color: hsl(0, 0%, 90%);
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;
}
div.pw-core-dock .lm_header .lm_controls .lm_close {
#pw-root .lm_header .lm_controls .lm_close {
/* a white 9x9 X shape */
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=);
background-position: center center;
@ -186,33 +187,41 @@ div.pw-core-dock .lm_header .lm_controls .lm_close {
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;
}
div.pw-core-dock .lm_content > * {
#pw-root .lm_content > * {
width: 100%;
/* Subtract HEADER_HEIGHT_DIFF px as workaround for bug related to headerHeight. */
height: calc(100% - ${HEADER_HEIGHT_DIFF}px);
}
div.pw-core-dock .lm_splitter {
#pw-root .lm_splitter {
box-sizing: border-box;
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-bottom: var(--pw-border);
}
div.pw-core-dock .lm_splitter.lm_horizontal {
#pw-root .lm_splitter.lm_horizontal {
border-left: var(--pw-border);
border-right: var(--pw-border);
}
body .lm_dropTargetIndicator {
#pw-root .lm_dragProxy > .lm_content {
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

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

@ -1,6 +1,6 @@
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 world.phantasmal.webui.dom.div
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
styleEl.id = "pw-root-styles"
styleEl.appendText(DEFAULT_STYLE)
document.head!!.append(styleEl)
return div(id = "pw-root", className, block = block)
id = "pw-root"
return this
}
fun <T> Node.bindChildrenTo(
list: ListVal<T>,
createChild: (T, Int) -> Node
createChild: (T, Int) -> Node,
): Disposable {
fun spliceChildren(index: Int, removedCount: Int, inserted: List<T>) {
for (i in 1..removedCount) {