diff --git a/mosogepsch/src/jsMain/kotlin/Main.kt b/mosogepsch/src/jsMain/kotlin/Main.kt
index be10abf2e4c145f7be516c12522010abb6d1af10..81161f936458879e230e28976760685541618959 100644
--- a/mosogepsch/src/jsMain/kotlin/Main.kt
+++ b/mosogepsch/src/jsMain/kotlin/Main.kt
@@ -19,15 +19,11 @@ external object JsJodaTimeZoneModule
private val jsJodaTz: dynamic = JsJodaTimeZoneModule
fun main() {
- val alma: dynamic = window
- alma.alma = jsJodaTz
-
val dark = localStorage["darkMode"]?.equals("true")
?: window.matchMedia("(prefers-color-scheme: dark)").matches
- var darkTheme by mutableStateOf(dark)
+ var mosogepStyle by mutableStateOf(Style(dark))
renderComposable(rootElementId = "root") {
- val mosogepStyle = Style(darkTheme)
Style(mosogepStyle)
Style(CardStyle)
Style(FloorStyle)
@@ -36,7 +32,9 @@ fun main() {
Navbar(
attrs = {
style {
- backgroundColor(mosogepStyle.colors.appBarColor)
+ backgroundColor(mosogepStyle.colors.surface)
+ color(mosogepStyle.colors.onSurface)
+ property("box-shadow", "0 0 .7em #00000033")
}
},
placement = NavbarPlacement.StickyTop,
@@ -44,24 +42,29 @@ fun main() {
colorScheme = Color.Dark,
) {
DomSideEffect {
- it.setImportantBg(mosogepStyle.colors.appBarColor)
+ it.setImportantBg(mosogepStyle.colors.surface)
}
- Brand { Text("MosógépSCH") }
+ Text("MosógépSCH")
switch(
label = "Sötét téma",
- value = darkTheme,
+ value = mosogepStyle.dark,
onSet = {
- darkTheme = it
+ mosogepStyle = Style(it)
localStorage["darkMode"] = "$it"
}
)
}
}
- Main(attrs = { classes(mosogepStyle.content, if (darkTheme) "bg-dark" else "bg-light") }) {
+ Main(attrs = {
+ classes(mosogepStyle.content)
+ style {
+ backgroundColor(mosogepStyle.colors.background)
+ }
+ }) {
content()
}
Footer(
- attrs = { classes("footer", "mt-auto", mosogepStyle.footer) }
+ attrs = { classes("mt-auto", mosogepStyle.footer) }
) {
Container { credits() }
}
diff --git a/mosogepsch/src/jsMain/kotlin/api/Types.kt b/mosogepsch/src/jsMain/kotlin/api/Types.kt
index 5fe877e25852d21725b05f3777e73745dfb29a5f..a8dae54dcb3b345b7e837695fd3ad2cbf7e563dc 100644
--- a/mosogepsch/src/jsMain/kotlin/api/Types.kt
+++ b/mosogepsch/src/jsMain/kotlin/api/Types.kt
@@ -1,5 +1,6 @@
package api
+import androidx.compose.runtime.Stable
import kotlinx.datetime.Instant
import kotlinx.serialization.KSerializer
import kotlinx.serialization.SerialName
diff --git a/mosogepsch/src/jsMain/kotlin/components/Card.kt b/mosogepsch/src/jsMain/kotlin/components/Card.kt
index 0bd53f1ba068e654265c89b47c99bfd71e4a8b25..4517ab58d171cef58a13eac573d649c73522775f 100644
--- a/mosogepsch/src/jsMain/kotlin/components/Card.kt
+++ b/mosogepsch/src/jsMain/kotlin/components/Card.kt
@@ -5,6 +5,7 @@ import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.AttrBuilderContext
import org.jetbrains.compose.web.dom.Div
import org.w3c.dom.HTMLDivElement
+import styles.LocalStyle
object CardStyle: StyleSheet() {
val cardStyle by style {
diff --git a/mosogepsch/src/jsMain/kotlin/components/Content.kt b/mosogepsch/src/jsMain/kotlin/components/Content.kt
index cb91f97dc74f6991a85c676b4b6506cc6ca9576b..fdb03083b44fa631d400642a1675825884fb6eb4 100644
--- a/mosogepsch/src/jsMain/kotlin/components/Content.kt
+++ b/mosogepsch/src/jsMain/kotlin/components/Content.kt
@@ -2,6 +2,7 @@ package components
import androidx.compose.runtime.*
import api.Api
+import api.Machine
import app.softwork.bootstrapcompose.Container
import org.jetbrains.compose.web.css.*
@@ -18,8 +19,12 @@ fun content() {
paddingTop(1.em)
}
}) {
+ var machine by remember { mutableStateOf<Machine?>(null) }
+
data.floors.forEach {
- floor(it)
+ floor(it, machine) { m ->
+ machine = m
+ }
}
}
}
\ No newline at end of file
diff --git a/mosogepsch/src/jsMain/kotlin/components/Credits.kt b/mosogepsch/src/jsMain/kotlin/components/Credits.kt
index 1ecf55db0f096175e0297ff25811f0d2a9e06d59..20e524ce2f29e9f5948c661c543122c3faacc368 100644
--- a/mosogepsch/src/jsMain/kotlin/components/Credits.kt
+++ b/mosogepsch/src/jsMain/kotlin/components/Credits.kt
@@ -4,6 +4,7 @@ import androidx.compose.runtime.Composable
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.P
import org.jetbrains.compose.web.dom.Text
+import styles.LocalStyle
@Suppress("NAME_CONTAINS_ILLEGAL_CHARS")
private object CSSVariables {
@@ -16,7 +17,6 @@ fun credits() {
P(attrs = {
style {
textAlign("center")
- color(CSSVariables.`bs-gray-200`.value())
}
}) {
Text("Made by KSZK and SEM")
diff --git a/mosogepsch/src/jsMain/kotlin/components/Floor.kt b/mosogepsch/src/jsMain/kotlin/components/Floor.kt
index 2afb63a5ca63ed98930aaf5ec4b0eeb1b7f24108..f29c3202b81856b4875d6357218f62a0376b71d2 100644
--- a/mosogepsch/src/jsMain/kotlin/components/Floor.kt
+++ b/mosogepsch/src/jsMain/kotlin/components/Floor.kt
@@ -8,6 +8,8 @@ import api.MachineKind
import api.MachineStatus
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.*
+import styles.ColorPair
+import styles.applyColorPair
object FloorStyle: StyleSheet() {
val container by style {
@@ -23,6 +25,7 @@ object FloorStyle: StyleSheet() {
width(20.em)
flexDirection(FlexDirection.Row)
justifyContent(JustifyContent.SpaceAround)
+ property("box-shadow", "0 0 .7em #00000033")
}
val floorNum by style {
@@ -49,26 +52,33 @@ object FloorStyle: StyleSheet() {
}
val underflowCnt by style {
margin(0.px)
- padding(0.px)
- marginLeft(1.em)
- width(20.em)
- property("transition", "max-height 0.75s")
+ padding(1.em)
+ paddingTop(0.em)
+ width(22.em)
overflow("hidden")
+ property("transition", "${styles.Style.baseTransition}, max-height 0.75s")
}
val underflowCard by style {
flexDirection(FlexDirection.Column)
margin(0.px)
width(100.percent)
paddingTop(5.em)
+ property("transition", "${styles.Style.baseTransition}, box-shadow 0.5s")
+ property("box-shadow", "0 0 1em #00000044")
}
}
@Composable
-fun floor(floor: Floor) {
+fun floor(floor: Floor, selectedMachine: Machine?, setMachine: (Machine?)->Unit) {
+
val colors = LocalStyle.current.colors
- fun MachineStatus.toColor(): CSSColorValue = when (this) {
- MachineStatus.Available -> colors.offColor
- MachineStatus.NotAvailable -> colors.onColor
+ fun MachineStatus.toColor(): ColorPair = when (this) {
+ MachineStatus.Available -> ColorPair(colors.primary, colors.onPrimary)
+ MachineStatus.NotAvailable -> ColorPair(colors.error, colors.onError)
+ }
+ fun MachineStatus.toUnderColor(): ColorPair = when (this) {
+ MachineStatus.Available -> ColorPair(colors.primaryContainer, colors.onPrimaryContainer)
+ MachineStatus.NotAvailable -> ColorPair(colors.errorContainer, colors.onErrorContainer)
}
fun MachineKind.toIcon(): String { return "${this.name[0]}" }
@@ -80,13 +90,11 @@ fun floor(floor: Floor) {
property("z-index", zIndex)
}
}) {
- var selectedMachine by remember { mutableStateOf<Machine>(floor.machines[0]) }
- var machineSelected by remember { mutableStateOf(false) }
-
card(attrs = {
classes(FloorStyle.card)
style {
- backgroundColor(colors.cardBg)
+ backgroundColor(colors.surfaceVariant)
+ color(colors.onSurfaceVariant)
}
}) {
H3(attrs = {
@@ -96,15 +104,14 @@ fun floor(floor: Floor) {
card(attrs = {
classes(FloorStyle.machine)
style {
- backgroundColor(machine.status.toColor())
+ applyColorPair(machine.status.toColor())
}
onClick {
if (selectedMachine == machine) {
- machineSelected = !machineSelected
+ setMachine(null)
} else {
- machineSelected = true
+ setMachine(machine)
}
- selectedMachine = machine
}
}) { H3 { Text(machine.kindOf.toIcon()) } }
}
@@ -120,7 +127,7 @@ fun floor(floor: Floor) {
Div(attrs = {
classes(FloorStyle.underflowCnt)
style {
- if (machineSelected && selectedMachine == it) {
+ if (selectedMachine == it) {
maxHeight(20.em)
} else {
maxHeight(0.px)
@@ -130,7 +137,10 @@ fun floor(floor: Floor) {
card(attrs = {
classes(FloorStyle.underflowCard)
style {
- backgroundColor(it.status.toColor())
+ applyColorPair(it.status.toUnderColor())
+ if (selectedMachine != it) {
+ property("box-shadow", "none")
+ }
}
}) {
P { Text(it.status.name) }
diff --git a/mosogepsch/src/jsMain/kotlin/components/Switch.kt b/mosogepsch/src/jsMain/kotlin/components/Switch.kt
index b98967ba5fed7358ae63edb330868574f612f712..7dbd297cf84bca04587dbbfedf62cbc94afb2c6e 100644
--- a/mosogepsch/src/jsMain/kotlin/components/Switch.kt
+++ b/mosogepsch/src/jsMain/kotlin/components/Switch.kt
@@ -34,7 +34,7 @@ fun switch(label: String, value: Boolean = false, onSet: (Boolean) -> Unit) {
Label(
forId = id,
attrs = {
- classes("form-check-label", "text-white")
+ classes("form-check-label")
id("label-$id")
}
) {
diff --git a/mosogepsch/src/jsMain/kotlin/styles/Color.kt b/mosogepsch/src/jsMain/kotlin/styles/Color.kt
new file mode 100644
index 0000000000000000000000000000000000000000..27fbe0d6482e2175488740b99b83bd733a53b0ac
--- /dev/null
+++ b/mosogepsch/src/jsMain/kotlin/styles/Color.kt
@@ -0,0 +1,65 @@
+package styles
+
+import org.jetbrains.compose.web.css.CSSColorValue
+import org.jetbrains.compose.web.css.Color
+
+fun color(hex: Long): CSSColorValue {
+ println(hex.toString())
+ val hexStr = hex.toString(16).padStart(6, '0')
+ return Color("#$hexStr")
+}
+
+val md_theme_light_primary = color(0x006397)
+val md_theme_light_onPrimary = color(0xffffff)
+val md_theme_light_primaryContainer = color(0xcbe6ff)
+val md_theme_light_onPrimaryContainer = color(0x001d31)
+val md_theme_light_secondary = color(0x3555c3)
+val md_theme_light_onSecondary = color(0xffffff)
+val md_theme_light_secondaryContainer = color(0xdbe1ff)
+val md_theme_light_onSecondaryContainer = color(0x001355)
+val md_theme_light_tertiary = color(0x4459a9)
+val md_theme_light_onTertiary = color(0xffffff)
+val md_theme_light_tertiaryContainer = color(0xdbe1ff)
+val md_theme_light_onTertiaryContainer = color(0x001355)
+val md_theme_light_error = color(0xba1b1b)
+val md_theme_light_errorContainer = color(0xffdad4)
+val md_theme_light_onError = color(0xffffff)
+val md_theme_light_onErrorContainer = color(0x410001)
+val md_theme_light_background = color(0xfcfcff)
+val md_theme_light_onBackground = color(0x1a1c1e)
+val md_theme_light_surface = color(0xfcfcff)
+val md_theme_light_onSurface = color(0x1a1c1e)
+val md_theme_light_surfaceVariant = color(0xdee3ea)
+val md_theme_light_onSurfaceVariant = color(0x41474d)
+val md_theme_light_outline = color(0x72777e)
+val md_theme_light_inverseOnSurface = color(0xf0f0f3)
+val md_theme_light_inverseSurface = color(0x2f3032)
+
+val md_theme_dark_primary = color(0x8fcdff)
+val md_theme_dark_onPrimary = color(0x003351)
+val md_theme_dark_primaryContainer = color(0x004b74)
+val md_theme_dark_onPrimaryContainer = color(0xcbe6ff)
+val md_theme_dark_secondary = color(0xb5c4ff)
+val md_theme_dark_onSecondary = color(0x002585)
+val md_theme_dark_secondaryContainer = color(0x133baa)
+val md_theme_dark_onSecondaryContainer = color(0xdbe1ff)
+val md_theme_dark_tertiary = color(0xb6c4ff)
+val md_theme_dark_onTertiary = color(0x0c2878)
+val md_theme_dark_tertiaryContainer = color(0x2a4190)
+val md_theme_dark_onTertiaryContainer = color(0xdbe1ff)
+val md_theme_dark_error = color(0xffb4a9)
+val md_theme_dark_errorContainer = color(0x930006)
+val md_theme_dark_onError = color(0x680003)
+val md_theme_dark_onErrorContainer = color(0xffdad4)
+val md_theme_dark_background = color(0x1a1c1e)
+val md_theme_dark_onBackground = color(0xe2e2e5)
+val md_theme_dark_surface = color(0x1a1c1e)
+val md_theme_dark_onSurface = color(0xe2e2e5)
+val md_theme_dark_surfaceVariant = color(0x41474d)
+val md_theme_dark_onSurfaceVariant = color(0xc2c7ce)
+val md_theme_dark_outline = color(0x8b9198)
+val md_theme_dark_inverseOnSurface = color(0x1a1c1e)
+val md_theme_dark_inverseSurface = color(0xe2e2e5)
+
+val seed = color(0x3faef7)
+val error = color(0xba1b1b)
\ No newline at end of file
diff --git a/mosogepsch/src/jsMain/kotlin/styles/ColorPair.kt b/mosogepsch/src/jsMain/kotlin/styles/ColorPair.kt
new file mode 100644
index 0000000000000000000000000000000000000000..e9f701f66b8a6ee299ed932337f9416ef8875d61
--- /dev/null
+++ b/mosogepsch/src/jsMain/kotlin/styles/ColorPair.kt
@@ -0,0 +1,16 @@
+package styles
+
+import org.jetbrains.compose.web.css.CSSColorValue
+import org.jetbrains.compose.web.css.StyleBuilder
+import org.jetbrains.compose.web.css.backgroundColor
+import org.jetbrains.compose.web.css.color
+
+data class ColorPair(
+ val bg: CSSColorValue,
+ val fg: CSSColorValue,
+)
+
+fun StyleBuilder.applyColorPair(pair: ColorPair) {
+ backgroundColor(pair.bg)
+ color(pair.fg)
+}
\ No newline at end of file
diff --git a/mosogepsch/src/jsMain/kotlin/styles/Style.kt b/mosogepsch/src/jsMain/kotlin/styles/Style.kt
index bf32c50bafdf6ba8bdfedcdc5392117a9405a831..f18c646d3ea8f761887a5dc287920ac2eda04f55 100644
--- a/mosogepsch/src/jsMain/kotlin/styles/Style.kt
+++ b/mosogepsch/src/jsMain/kotlin/styles/Style.kt
@@ -4,37 +4,25 @@ package styles
import androidx.compose.runtime.compositionLocalOf
import org.jetbrains.compose.web.css.*
-
-
-private val kszkék = Color("#3051bf")
-private val vilagosKszkék = Color("#3faef7")
-
-
-class Colors(val dark: Boolean) {
- val appBarColor = kszkék
- val cardBg = if (dark) kszkék else vilagosKszkék
- val onColor = Color(if (dark) "#bd5b40" else "#DB6748")
- val offColor = Color(if (dark) "#57af00" else "#94DB40")
-}
-
class Style(val dark: Boolean = false): StyleSheet() {
- private val footHeight = 4.em
+ val colors = if (dark) DarkThemeColors else LightThemeColors
- val colors = Colors(dark)
+ companion object {
+ val baseTransition = "background-color 0.75s, color 0.75s"
+ private val footHeight = 4.em
+ }
init {
- "html, body, #root" style {
+ "html, body, #root" {
position(Position.Relative)
height(100.percent)
overflowY("hidden")
}
- "h1, h2, h3, h4, h5, h6" style {
+ "h1, h2, h3, h4, h5, h6" {
marginBottom(0.px)
}
- ".footer" style {
- }
"*" {
- property("transition", "background-color 0.75s")
+ property("transition", baseTransition)
}
}
@@ -49,7 +37,8 @@ class Style(val dark: Boolean = false): StyleSheet() {
width(100.percent)
height(footHeight)
lineHeight(footHeight)
- backgroundColor(Color("#0000007f"))
+ backgroundColor(colors.surface)
+ color(colors.onSurface)
property("z-index", 2000)
}
}
diff --git a/mosogepsch/src/jsMain/kotlin/styles/Theme.kt b/mosogepsch/src/jsMain/kotlin/styles/Theme.kt
new file mode 100644
index 0000000000000000000000000000000000000000..3985b55987e9dc7e380590c3839ec0bc3b8b3e9a
--- /dev/null
+++ b/mosogepsch/src/jsMain/kotlin/styles/Theme.kt
@@ -0,0 +1,88 @@
+package styles
+
+import org.jetbrains.compose.web.css.CSSColorValue
+
+
+val LightThemeColors = ColorScheme(
+ primary = md_theme_light_primary,
+ onPrimary = md_theme_light_onPrimary,
+ primaryContainer = md_theme_light_primaryContainer,
+ onPrimaryContainer = md_theme_light_onPrimaryContainer,
+ secondary = md_theme_light_secondary,
+ onSecondary = md_theme_light_onSecondary,
+ secondaryContainer = md_theme_light_secondaryContainer,
+ onSecondaryContainer = md_theme_light_onSecondaryContainer,
+ tertiary = md_theme_light_tertiary,
+ onTertiary = md_theme_light_onTertiary,
+ tertiaryContainer = md_theme_light_tertiaryContainer,
+ onTertiaryContainer = md_theme_light_onTertiaryContainer,
+ error = md_theme_light_error,
+ errorContainer = md_theme_light_errorContainer,
+ onError = md_theme_light_onError,
+ onErrorContainer = md_theme_light_onErrorContainer,
+ background = md_theme_light_background,
+ onBackground = md_theme_light_onBackground,
+ surface = md_theme_light_surface,
+ onSurface = md_theme_light_onSurface,
+ surfaceVariant = md_theme_light_surfaceVariant,
+ onSurfaceVariant = md_theme_light_onSurfaceVariant,
+ outline = md_theme_light_outline,
+ inverseOnSurface = md_theme_light_inverseOnSurface,
+ inverseSurface = md_theme_light_inverseSurface,
+)
+
+val DarkThemeColors = ColorScheme(
+ primary = md_theme_dark_primary,
+ onPrimary = md_theme_dark_onPrimary,
+ primaryContainer = md_theme_dark_primaryContainer,
+ onPrimaryContainer = md_theme_dark_onPrimaryContainer,
+ secondary = md_theme_dark_secondary,
+ onSecondary = md_theme_dark_onSecondary,
+ secondaryContainer = md_theme_dark_secondaryContainer,
+ onSecondaryContainer = md_theme_dark_onSecondaryContainer,
+ tertiary = md_theme_dark_tertiary,
+ onTertiary = md_theme_dark_onTertiary,
+ tertiaryContainer = md_theme_dark_tertiaryContainer,
+ onTertiaryContainer = md_theme_dark_onTertiaryContainer,
+ error = md_theme_dark_error,
+ errorContainer = md_theme_dark_errorContainer,
+ onError = md_theme_dark_onError,
+ onErrorContainer = md_theme_dark_onErrorContainer,
+ background = md_theme_dark_background,
+ onBackground = md_theme_dark_onBackground,
+ surface = md_theme_dark_surface,
+ onSurface = md_theme_dark_onSurface,
+ surfaceVariant = md_theme_dark_surfaceVariant,
+ onSurfaceVariant = md_theme_dark_onSurfaceVariant,
+ outline = md_theme_dark_outline,
+ inverseOnSurface = md_theme_dark_inverseOnSurface,
+ inverseSurface = md_theme_dark_inverseSurface,
+)
+
+data class ColorScheme(
+ val primary: CSSColorValue,
+ val onPrimary: CSSColorValue,
+ val primaryContainer: CSSColorValue,
+ val onPrimaryContainer: CSSColorValue,
+ val secondary: CSSColorValue,
+ val onSecondary: CSSColorValue,
+ val secondaryContainer: CSSColorValue,
+ val onSecondaryContainer: CSSColorValue,
+ val tertiary: CSSColorValue,
+ val onTertiary: CSSColorValue,
+ val tertiaryContainer: CSSColorValue,
+ val onTertiaryContainer: CSSColorValue,
+ val background: CSSColorValue,
+ val onBackground: CSSColorValue,
+ val surface: CSSColorValue,
+ val onSurface: CSSColorValue,
+ val surfaceVariant: CSSColorValue,
+ val onSurfaceVariant: CSSColorValue,
+ val inverseSurface: CSSColorValue,
+ val inverseOnSurface: CSSColorValue,
+ val error: CSSColorValue,
+ val onError: CSSColorValue,
+ val errorContainer: CSSColorValue,
+ val onErrorContainer: CSSColorValue,
+ val outline: CSSColorValue,
+)
\ No newline at end of file