Skip to content
Snippets Groups Projects
Commit 8a009b1f authored by Tóth Miklós Tibor's avatar Tóth Miklós Tibor :shrug:
Browse files

Material 3

parent 6e53c6d2
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 232 additions and 54 deletions
mosogepsch/src/jsMain/kotlin/Main.kt
+ 15
− 12
View file @ 8a009b1f
......@@ -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() }
}
......
mosogepsch/src/jsMain/kotlin/api/Types.kt
+ 1
− 0
View file @ 8a009b1f
package api
import androidx.compose.runtime.Stable
import kotlinx.datetime.Instant
import kotlinx.serialization.KSerializer
import kotlinx.serialization.SerialName
......
mosogepsch/src/jsMain/kotlin/components/Card.kt
+ 1
− 0
View file @ 8a009b1f
......@@ -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 {
......
mosogepsch/src/jsMain/kotlin/components/Content.kt
+ 6
− 1
View file @ 8a009b1f
......@@ -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
mosogepsch/src/jsMain/kotlin/components/Credits.kt
+ 1
− 1
View file @ 8a009b1f
......@@ -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")
......
mosogepsch/src/jsMain/kotlin/components/Floor.kt
+ 28
− 18
View file @ 8a009b1f
......@@ -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) }
......
mosogepsch/src/jsMain/kotlin/components/Switch.kt
+ 1
− 1
View file @ 8a009b1f
......@@ -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")
}
) {
......
mosogepsch/src/jsMain/kotlin/styles/Color.kt 0 → 100644
+ 65
− 0
View file @ 8a009b1f
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
mosogepsch/src/jsMain/kotlin/styles/ColorPair.kt 0 → 100644
+ 16
− 0
View file @ 8a009b1f
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
mosogepsch/src/jsMain/kotlin/styles/Style.kt
+ 10
− 21
View file @ 8a009b1f
......@@ -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)
}
}
......
mosogepsch/src/jsMain/kotlin/styles/Theme.kt 0 → 100644
+ 88
− 0
View file @ 8a009b1f
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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment

Hosted with :heart: by KSZK