Welcome to Beta screen: Colors, Typhography, Locale

Stefterv · Stefterv · commit ed49b65c48b3 · 2025-02-06T20:17:55.000+01:00
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
@@ -38,6 +38,9 @@ sourceSets{
         kotlin{
             srcDirs("src")
         }
+        resources{
+            srcDirs("resources", listOf("languages", "fonts", "theme").map { "../build/shared/lib/$it" })
+        }
     }
 }
 
diff --git a/app/src/processing/app/ui/WelcomeToBeta.kt b/app/src/processing/app/ui/WelcomeToBeta.kt
@@ -5,6 +5,8 @@ import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.MaterialTheme.colors
 import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.runtime.*
@@ -27,23 +29,24 @@ import androidx.compose.ui.window.WindowPosition
 import androidx.compose.ui.window.application
 import androidx.compose.ui.window.rememberWindowState
 import com.formdev.flatlaf.util.SystemInfo
+import processing.app.ui.theme.LocalLocale
+import processing.app.ui.theme.LocalTheme
+import processing.app.ui.theme.Locale
+import processing.app.ui.theme.ProcessingTheme
 import java.awt.Cursor
 import java.awt.Dimension
 import java.awt.event.KeyAdapter
 import java.awt.event.KeyEvent
+import java.io.InputStream
+import java.util.Properties
 import javax.swing.JFrame
 import javax.swing.SwingUtilities
 
 
 class WelcomeToBeta {
     companion object{
         val windowSize = Dimension(400, 200)
-        val windowTitle = "Welcome to Beta"
-        val title = "Welcome to the Processing Beta"
-        val message = """Thank you for trying out the new version of Processing. We’re very grateful!
-
-Please report any bugs on the forums."""
-        val buttonText = "Thank you"
+        val windowTitle = Locale()["beta.window.title"]
 
         @JvmStatic
         fun showWelcomeToBeta() {
@@ -57,8 +60,10 @@ Please report any bugs on the forums."""
                     contentPane.add(ComposePanel().apply {
                         size = windowSize
                         setContent {
-                            Box(modifier = Modifier.padding(top = if(mac) 22.dp else 0.dp)) {
-                                welcomeToBeta(close)
+                            ProcessingTheme {
+                                Box(modifier = Modifier.padding(top = if (mac) 22.dp else 0.dp)) {
+                                    welcomeToBeta(close)
+                                }
                             }
                         }
                     })
@@ -79,14 +84,12 @@ Please report any bugs on the forums."""
 
         @Composable
         fun welcomeToBeta(close: () -> Unit = {}) {
-            // TODO: Add fonts and colors
-
             Row(
                 modifier = Modifier
                     .padding(20.dp, 10.dp)
-                    .size(windowSize.width.dp, windowSize.height.dp)
-                ,
-                horizontalArrangement = Arrangement.spacedBy(20.dp)
+                    .size(windowSize.width.dp, windowSize.height.dp),
+                horizontalArrangement = Arrangement
+                    .spacedBy(20.dp)
             ){
                 Image(
                     painter = painterResource("logo.svg"),
@@ -97,24 +100,30 @@ Please report any bugs on the forums."""
                 )
                 Column(
                     modifier = Modifier
-                            .fillMaxHeight(),
-                    verticalArrangement = Arrangement.spacedBy(20.dp, alignment = Alignment.CenterVertically)
+                        .fillMaxHeight(),
+                    verticalArrangement = Arrangement
+                        .spacedBy(
+                            MaterialTheme.typography.subtitle1.lineHeight.value.dp,
+                            alignment = Alignment.CenterVertically
+                        )
                 ) {
+                    val locale = LocalLocale.current
                     Text(
-                        title,
-                        fontSize = 17.sp,
-                        fontWeight = FontWeight.SemiBold
+                        text = locale["beta.title"],
+                        style = MaterialTheme.typography.subtitle1,
                     )
                     Text(
-                        message,
-                        fontSize = 13.sp
+                        text = locale["beta.message"]
                     )
                     Row {
                         Spacer(modifier = Modifier.weight(1f))
                         PDEButton(onClick = {
                             close()
                         }) {
-                            Text(buttonText, color = Color.White)
+                            Text(
+                                text = locale["beta.button"],
+                                color = Color.White
+                            )
                         }
                     }
                 }
@@ -123,16 +132,18 @@ Please report any bugs on the forums."""
         @OptIn(ExperimentalComposeUiApi::class)
         @Composable
         fun PDEButton(onClick: () -> Unit, content: @Composable BoxScope.() -> Unit) {
+            val theme = LocalTheme.current
+
             var hover by remember { mutableStateOf(false) }
             var clicked by remember { mutableStateOf(false) }
             val offset by animateFloatAsState(if (hover) -5f else 5f)
-            val color by animateColorAsState(if(clicked) Color.Black else Color.Blue)
+            val color by animateColorAsState(if(clicked) colors.primaryVariant else colors.primary)
 
             Box(modifier = Modifier.padding(end = 5.dp, top = 5.dp)) {
                 Box(
                     modifier = Modifier
                         .offset((-offset).dp, (offset).dp)
-                        .background(Color.Gray)
+                        .background(theme.getColor("toolbar.button.pressed.field"))
                         .matchParentSize()
                 )
                 Box(
@@ -170,12 +181,13 @@ Please report any bugs on the forums."""
                 )
 
                 Window(onCloseRequest = ::exitApplication, state = windowState, title = windowTitle) {
-                    Surface(color = Color.White) {
-                        welcomeToBeta{
-                            exitApplication()
+                    ProcessingTheme {
+                        Surface(color = colors.background) {
+                            welcomeToBeta {
+                                exitApplication()
+                            }
                         }
                     }
-
                 }
             }
         }
diff --git a/app/src/processing/app/ui/theme/Locale.kt b/app/src/processing/app/ui/theme/Locale.kt
@@ -0,0 +1,31 @@
+package processing.app.ui.theme
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.compositionLocalOf
+import java.io.InputStream
+import java.util.*
+
+class Locale : Properties() {
+    init {
+        val locale = java.util.Locale.getDefault()
+        load(ClassLoader.getSystemResourceAsStream("PDE.properties"))
+        load(ClassLoader.getSystemResourceAsStream("PDE_${locale.language}.properties") ?: InputStream.nullInputStream())
+        load(ClassLoader.getSystemResourceAsStream("PDE_${locale.toLanguageTag()}.properties") ?: InputStream.nullInputStream())
+    }
+
+    @Deprecated("Use get instead", ReplaceWith("get(key)"))
+    override fun getProperty(key: String?): String {
+        return super.getProperty(key)
+    }
+    operator fun get(key: String): String = getProperty(key)
+}
+val LocalLocale = compositionLocalOf { Locale() }
+@Composable
+fun LocaleProvider(content: @Composable () -> Unit) {
+    val locale = Locale()
+    // TODO: Listen for languages changes
+    CompositionLocalProvider(LocalLocale provides locale) {
+        content()
+    }
+}
diff --git a/app/src/processing/app/ui/theme/Theme.kt b/app/src/processing/app/ui/theme/Theme.kt
@@ -0,0 +1,71 @@
+package processing.app.ui.theme
+
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material.Colors
+import androidx.compose.material.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.ui.graphics.Color
+import java.io.InputStream
+import java.util.Properties
+
+
+class Theme(themeFile: String? = "") : Properties() {
+    init {
+        load(ClassLoader.getSystemResourceAsStream("theme.txt"))
+        load(ClassLoader.getSystemResourceAsStream(themeFile) ?: InputStream.nullInputStream())
+    }
+    fun getColor(key: String): Color {
+        return Color(getProperty(key).toColorInt())
+    }
+}
+
+val LocalTheme = compositionLocalOf<Theme> { error("No theme provided") }
+
+@Composable
+fun ProcessingTheme(
+    darkTheme: Boolean = isSystemInDarkTheme(),
+    content: @Composable() () -> Unit
+) {
+
+    val theme = Theme()
+    val colors = Colors(
+        primary = theme.getColor("editor.gradient.top"),
+        primaryVariant = theme.getColor("toolbar.button.pressed.field"),
+        secondary =  theme.getColor("editor.gradient.bottom"),
+        secondaryVariant =  theme.getColor("editor.scrollbar.thumb.pressed.color"),
+        background =  theme.getColor("editor.bgcolor"),
+        surface =  theme.getColor("editor.bgcolor"),
+        error =  theme.getColor("status.error.bgcolor"),
+        onPrimary =  theme.getColor("toolbar.button.pressed.field"),
+        onSecondary =  theme.getColor("toolbar.button.pressed.field"),
+        onBackground =  theme.getColor("editor.fgcolor"),
+        onSurface =  theme.getColor("editor.fgcolor"),
+        onError =  theme.getColor("status.error.fgcolor"),
+        isLight = theme.getProperty("laf.mode").equals("light")
+    )
+
+    CompositionLocalProvider(LocalTheme provides theme) {
+        LocaleProvider {
+            MaterialTheme(
+                colors = colors,
+                typography = Typography,
+                content = content
+            )
+        }
+    }
+}
+
+fun String.toColorInt(): Int {
+    if (this[0] == '#') {
+        var color = substring(1).toLong(16)
+        if (length == 7) {
+            color = color or 0x00000000ff000000L
+        } else if (length != 9) {
+            throw IllegalArgumentException("Unknown color")
+        }
+        return color.toInt()
+    }
+    throw IllegalArgumentException("Unknown color")
+}
diff --git a/app/src/processing/app/ui/theme/Typography.kt b/app/src/processing/app/ui/theme/Typography.kt
@@ -0,0 +1,38 @@
+package processing.app.ui.theme
+
+import androidx.compose.material.MaterialTheme.typography
+import androidx.compose.material.Typography
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.platform.Font
+import androidx.compose.ui.unit.sp
+
+val processingFont = FontFamily(
+    Font(
+        resource = "ProcessingSans-Regular.ttf",
+        weight = FontWeight.Normal,
+        style = FontStyle.Normal
+    ),
+    Font(
+        resource = "ProcessingSans-Bold.ttf",
+        weight = FontWeight.Bold,
+        style = FontStyle.Normal
+    )
+)
+
+val Typography = Typography(
+    body1 = TextStyle(
+        fontFamily = processingFont,
+        fontWeight = FontWeight.Normal,
+        fontSize = 13.sp,
+        lineHeight = 16.sp
+    ),
+    subtitle1 = TextStyle(
+        fontFamily = processingFont,
+        fontWeight = FontWeight.Bold,
+        fontSize = 16.sp,
+        lineHeight = 20.sp
+    )
+)
diff --git a/build/shared/lib/languages/PDE.properties b/build/shared/lib/languages/PDE.properties
@@ -614,6 +614,13 @@ update_check.updates_available.core = A new version of Processing is available,\
 update_check.updates_available.contributions = There are updates available for some of the installed contributions,\nwould you like to open the the Contribution Manager now?
 
 
+# ---------------------------------------
+# Beta
+beta.window.title = Welcome to Beta
+beta.title = Welcome to the Processing Beta
+beta.message = Thank you for trying out the new version of Processing. We?re very grateful!\n\nPlease report any bugs on the forums.
+beta.button = Got it!
+
 # ---------------------------------------
 # Color Chooser
 
diff --git a/build/shared/lib/languages/PDE_nl.properties b/build/shared/lib/languages/PDE_nl.properties
@@ -315,6 +315,13 @@ update_check = Update
 update_check.updates_available.core = Een nieuwe versie van Processing is beschikbaar,\nwilt u de Processing download pagina bezoeken?
 update_check.updates_available.contributions = Er zijn updates beschikbaar voor sommige van de door u geïnstalleerde bijdragen,\nwilt u nu de Bijdragen Manager openen?
 
+# ---------------------------------------
+# Beta
+beta.window.title = Welkom bij Beta
+beta.title = Welkom bij de Processing Beta
+beta.message = Bedankt dat je de nieuwe versie van Processing uitprobeert. We zijn je zeer dankbaar!\n\nMeld eventuele bugs alsjeblieft op de forums.
+beta.button = Okee!
+
 
 # ---------------------------------------
 # Color Chooser

Original file line number	Diff line number	Diff line change
`@@ -38,6 +38,9 @@ sourceSets{`
`38`	`38`	`kotlin{`
`39`	`39`	`srcDirs("src")`
`40`	`40`	`}`
	`41`	`+ resources{`
	`42`	`+ srcDirs("resources", listOf("languages", "fonts", "theme").map { "../build/shared/lib/$it" })`
	`43`	`+ }`
`41`	`44`	`}`
`42`	`45`	`}`
`43`	`46`