From bd1fb7967a467afa0e7356d3c1316561d6cc4043 Mon Sep 17 00:00:00 2001 From: fankesyooni Date: Tue, 16 Jan 2024 12:48:22 +0800 Subject: [PATCH] feat: update demo --- .../highcapable/flexiui/demo/ColorScheme.kt | 134 +++++++++++++++ .../com/highcapable/flexiui/demo/Locales.kt | 156 ++++++++++++++++++ .../highcapable/flexiui/demo/Preferences.kt | 113 +------------ .../com/highcapable/flexiui/demo/Resources.kt | 91 ++++++++++ .../flexiui/demo/screen/LazyListScreen.kt | 21 +-- .../flexiui/demo/screen/MainScreen.kt | 73 +++++--- .../flexiui/demo/screen/SecondaryScreen.kt | 10 +- 7 files changed, 452 insertions(+), 146 deletions(-) create mode 100644 samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/ColorScheme.kt create mode 100644 samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/Locales.kt diff --git a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/ColorScheme.kt b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/ColorScheme.kt new file mode 100644 index 0000000..18bc2d3 --- /dev/null +++ b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/ColorScheme.kt @@ -0,0 +1,134 @@ +/* + * Flexi UI - A flexible and useful UI component library. + * Copyright (C) 2019-2024 HighCapable + * https://github.com/BetterAndroid/FlexiUI + * + * Apache License Version 2.0 + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * This file is created by fankes on 2024/1/16. + */ +package com.highcapable.flexiui.demo + +import androidx.compose.runtime.Composable +import androidx.compose.runtime.Stable +import com.highcapable.flexiui.blueColors +import com.highcapable.flexiui.defaultColors +import com.highcapable.flexiui.greenColors +import com.highcapable.flexiui.isSystemColorAvailable +import com.highcapable.flexiui.orangeColors +import com.highcapable.flexiui.pinkColors +import com.highcapable.flexiui.purpleColors +import com.highcapable.flexiui.redColors +import com.highcapable.flexiui.systemColors +import com.highcapable.flexiui.yellowColors + +// TODO: Include ColorScheme to Flexi UI's Colors.kt + +@Stable +enum class ColorScheme { + Default, + DefaultBlack, + System, + SystemBlack, + Red, + RedBlack, + Pink, + PinkBlack, + Purple, + PurpleBlack, + Orange, + OrangeBlack, + Yellow, + YellowBlack, + Green, + GreenBlack, + Blue, + BlueBlack +} + +@Composable +fun colorSchemes(): Array { + val defaultColors = arrayOf( + ColorScheme.Default, + ColorScheme.DefaultBlack + ) + val systemColors = arrayOf( + ColorScheme.System, + ColorScheme.SystemBlack + ) + val presetColors = arrayOf( + ColorScheme.Red, + ColorScheme.RedBlack, + ColorScheme.Pink, + ColorScheme.PinkBlack, + ColorScheme.Purple, + ColorScheme.PurpleBlack, + ColorScheme.Orange, + ColorScheme.OrangeBlack, + ColorScheme.Yellow, + ColorScheme.YellowBlack, + ColorScheme.Green, + ColorScheme.GreenBlack, + ColorScheme.Blue, + ColorScheme.BlueBlack + ) + return if (isSystemColorAvailable()) + defaultColors + systemColors + presetColors + else defaultColors + presetColors +} + +@Composable +fun ColorScheme.toColors(darkMode: Boolean) = when (this) { + ColorScheme.Default -> defaultColors(darkMode) + ColorScheme.DefaultBlack -> defaultColors(darkMode, blackDarkMode = true) + ColorScheme.System -> systemColors(darkMode) + ColorScheme.SystemBlack -> systemColors(darkMode, blackDarkMode = true) + ColorScheme.Red -> redColors(darkMode) + ColorScheme.RedBlack -> redColors(darkMode, blackDarkMode = true) + ColorScheme.Pink -> pinkColors(darkMode) + ColorScheme.PinkBlack -> pinkColors(darkMode, blackDarkMode = true) + ColorScheme.Purple -> purpleColors(darkMode) + ColorScheme.PurpleBlack -> purpleColors(darkMode, blackDarkMode = true) + ColorScheme.Orange -> orangeColors(darkMode) + ColorScheme.OrangeBlack -> orangeColors(darkMode, blackDarkMode = true) + ColorScheme.Yellow -> yellowColors(darkMode) + ColorScheme.YellowBlack -> yellowColors(darkMode, blackDarkMode = true) + ColorScheme.Green -> greenColors(darkMode) + ColorScheme.GreenBlack -> greenColors(darkMode, blackDarkMode = true) + ColorScheme.Blue -> blueColors(darkMode) + ColorScheme.BlueBlack -> blueColors(darkMode, blackDarkMode = true) +} + +@Stable +fun ColorScheme.toName() = when (this) { + ColorScheme.Default -> "Default" + ColorScheme.DefaultBlack -> "Default (Black)" + ColorScheme.System -> "System" + ColorScheme.SystemBlack -> "System (Black)" + ColorScheme.Red -> "Red" + ColorScheme.RedBlack -> "Red (Black)" + ColorScheme.Pink -> "Pink" + ColorScheme.PinkBlack -> "Pink (Black)" + ColorScheme.Purple -> "Purple" + ColorScheme.PurpleBlack -> "Purple (Black)" + ColorScheme.Orange -> "Orange" + ColorScheme.OrangeBlack -> "Orange (Black)" + ColorScheme.Yellow -> "Yellow" + ColorScheme.YellowBlack -> "Yellow (Black)" + ColorScheme.Green -> "Green" + ColorScheme.GreenBlack -> "Green (Black)" + ColorScheme.Blue -> "Blue" + ColorScheme.BlueBlack -> "Blue (Black)" +} \ No newline at end of file diff --git a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/Locales.kt b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/Locales.kt new file mode 100644 index 0000000..7dc6d2e --- /dev/null +++ b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/Locales.kt @@ -0,0 +1,156 @@ +/* + * Flexi UI - A flexible and useful UI component library. + * Copyright (C) 2019-2024 HighCapable + * https://github.com/BetterAndroid/FlexiUI + * + * Apache License Version 2.0 + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * This file is created by fankes on 2024/1/16. + */ +package com.highcapable.flexiui.demo + +import androidx.compose.runtime.Composable +import androidx.compose.runtime.Immutable +import androidx.compose.runtime.Stable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.remember + +@Stable +enum class Locales { EN, ZH_CN } + +@Stable +fun locales() = Locales.entries.toTypedArray() + +@Stable +fun Locales.toName() = when (this) { + Locales.EN -> "English" + Locales.ZH_CN -> "简体中文" +} + +val strings + @Composable + get(): Strings { + val locale by remember { Preferences.locale } + return when (locale) { + Locales.EN -> EnString + Locales.ZH_CN -> ZhCnString + } + } + +private val EnString = Strings( + appName = "Flexi UI Demo", + appDescription = "Flexi UI is a flexible and useful UI component library.", + uiLanguage = "UI Language", + selectLanguage = "Select a language", + themeStyle = "Theme Style", + enableDarkMode = "Enable night mode", + enableDarkModeDescription = "Manually switch the current theme to night mode.", + followSystemDarkMode = "Follow system night mode", + followSystemDarkModeDescription = "Follow the system theme to switch day and night mode.", + selectTheme = "Select a theme", + home = "Home", + component = "Component", + openLink = "Open Link", + openLinkDescription = "Open the project URL in the browser?", + open = "Open", + comfirm = "OK", + cancel = "Cancel", + singlePageDemo = "Single Page Demo", + singlePageDemoDescription = "Open a single page", + lazyListDemo = "Lazy List Demo", + lazyListDemoDescription = "Open a lazy list page", + singlePageDescription = """ + Now, you open a separate secondary page. + You can click the button below to back to the homepage. + """.trimIndent(), + takeMeHome = "Take Me Home", + itemsListDataCount = { count -> "$count items of list data" }, + listRemoveAll = "Remove All", + listRemoveAllDescription = "Are you sure you want to remove all data?", + linearList = "Linear List", + gridList = "Grid List", + listRemoveSingle = "Remove this data", + listNoData = "No data to show" +) + +private val ZhCnString = Strings( + appName = "Flexi UI 演示", + appDescription = "Flexi UI 是一个灵活且实用的 UI 组件库。", + uiLanguage = "界面语言", + selectLanguage = "选择一个语言", + themeStyle = "主题风格", + enableDarkMode = "启用夜间模式", + enableDarkModeDescription = "手动切换当前主题到夜间模式。", + followSystemDarkMode = "跟随系统夜间模式", + followSystemDarkModeDescription = "跟随系统主题切换日夜模式。", + selectTheme = "选择一个主题", + home = "主页", + component = "组件", + openLink = "打开链接", + openLinkDescription = "在浏览器中打开项目链接？", + open = "打开", + comfirm = "确定", + cancel = "取消", + singlePageDemo = "独立页面演示", + singlePageDemoDescription = "打开一个独立页面", + lazyListDemo = "懒加载列表演示", + lazyListDemoDescription = "打开一个懒加载列表页面", + singlePageDescription = """ + 现在，你打开了一个独立的二级页面。 + 你可以点击下面的按钮回到主页。 + """.trimIndent(), + takeMeHome = "回到主页", + itemsListDataCount = { count -> "当前共有 $count 项列表数据" }, + listRemoveAll = "全部移除", + listRemoveAllDescription = "你确定要移除全部数据吗？", + linearList = "线性列表", + gridList = "九宫格列表", + listRemoveSingle = "移除这条数据", + listNoData = "暂无数据" +) + +@Immutable +data class Strings( + val appName: String, + val appDescription: String, + val uiLanguage: String, + val selectLanguage: String, + val themeStyle: String, + val enableDarkMode: String, + val enableDarkModeDescription: String, + val followSystemDarkMode: String, + val followSystemDarkModeDescription: String, + val selectTheme: String, + val home: String, + val component: String, + val openLink: String, + val openLinkDescription: String, + val open: String, + val comfirm: String, + val cancel: String, + val singlePageDemo: String, + val singlePageDemoDescription: String, + val lazyListDemo: String, + val lazyListDemoDescription: String, + val singlePageDescription: String, + val takeMeHome: String, + val itemsListDataCount: (Number) -> String, + val listRemoveAll: String, + val listRemoveAllDescription: String, + val linearList: String, + val gridList: String, + val listRemoveSingle: String, + val listNoData: String +) \ No newline at end of file diff --git a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/Preferences.kt b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/Preferences.kt index 01916b4..a58cb6a 100644 --- a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/Preferences.kt +++ b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/Preferences.kt @@ -21,126 +21,17 @@ */ package com.highcapable.flexiui.demo -import androidx.compose.runtime.Composable import androidx.compose.runtime.MutableState import androidx.compose.runtime.Stable import androidx.compose.runtime.mutableStateOf -import com.highcapable.flexiui.blueColors -import com.highcapable.flexiui.defaultColors -import com.highcapable.flexiui.greenColors -import com.highcapable.flexiui.isSystemColorAvailable -import com.highcapable.flexiui.orangeColors -import com.highcapable.flexiui.pinkColors -import com.highcapable.flexiui.purpleColors -import com.highcapable.flexiui.redColors -import com.highcapable.flexiui.systemColors -import com.highcapable.flexiui.yellowColors @Stable data class AppPreferences( + var locale: MutableState = mutableStateOf(Locales.EN), var colorScheme: MutableState = mutableStateOf(ColorScheme.Default), var darkMode: MutableState = mutableStateOf(false), var followSystemDarkMode: MutableState = mutableStateOf(false) ) -// TODO: Include ColorScheme to Flexi UI's Colors.kt - @Stable -val Preferences = AppPreferences() - -@Stable -enum class ColorScheme { - Default, - DefaultBlack, - System, - SystemBlack, - Red, - RedBlack, - Pink, - PinkBlack, - Purple, - PurpleBlack, - Orange, - OrangeBlack, - Yellow, - YellowBlack, - Green, - GreenBlack, - Blue, - BlueBlack -} - -@Composable -fun colorSchemes(): Array { - val defaultColors = arrayOf( - ColorScheme.Default, - ColorScheme.DefaultBlack - ) - val systemColors = arrayOf( - ColorScheme.System, - ColorScheme.SystemBlack - ) - val presetColors = arrayOf( - ColorScheme.Red, - ColorScheme.RedBlack, - ColorScheme.Pink, - ColorScheme.PinkBlack, - ColorScheme.Purple, - ColorScheme.PurpleBlack, - ColorScheme.Orange, - ColorScheme.OrangeBlack, - ColorScheme.Yellow, - ColorScheme.YellowBlack, - ColorScheme.Green, - ColorScheme.GreenBlack, - ColorScheme.Blue, - ColorScheme.BlueBlack - ) - return if (isSystemColorAvailable()) - defaultColors + systemColors + presetColors - else defaultColors + presetColors -} - -@Composable -fun ColorScheme.toColors(darkMode: Boolean) = when (this) { - ColorScheme.Default -> defaultColors(darkMode) - ColorScheme.DefaultBlack -> defaultColors(darkMode, blackDarkMode = true) - ColorScheme.System -> systemColors(darkMode) - ColorScheme.SystemBlack -> systemColors(darkMode, blackDarkMode = true) - ColorScheme.Red -> redColors(darkMode) - ColorScheme.RedBlack -> redColors(darkMode, blackDarkMode = true) - ColorScheme.Pink -> pinkColors(darkMode) - ColorScheme.PinkBlack -> pinkColors(darkMode, blackDarkMode = true) - ColorScheme.Purple -> purpleColors(darkMode) - ColorScheme.PurpleBlack -> purpleColors(darkMode, blackDarkMode = true) - ColorScheme.Orange -> orangeColors(darkMode) - ColorScheme.OrangeBlack -> orangeColors(darkMode, blackDarkMode = true) - ColorScheme.Yellow -> yellowColors(darkMode) - ColorScheme.YellowBlack -> yellowColors(darkMode, blackDarkMode = true) - ColorScheme.Green -> greenColors(darkMode) - ColorScheme.GreenBlack -> greenColors(darkMode, blackDarkMode = true) - ColorScheme.Blue -> blueColors(darkMode) - ColorScheme.BlueBlack -> blueColors(darkMode, blackDarkMode = true) -} - -@Stable -fun ColorScheme.toName() = when (this) { - ColorScheme.Default -> "Default" - ColorScheme.DefaultBlack -> "Default (Black)" - ColorScheme.System -> "System" - ColorScheme.SystemBlack -> "System (Black)" - ColorScheme.Red -> "Red" - ColorScheme.RedBlack -> "Red (Black)" - ColorScheme.Pink -> "Pink" - ColorScheme.PinkBlack -> "Pink (Black)" - ColorScheme.Purple -> "Purple" - ColorScheme.PurpleBlack -> "Purple (Black)" - ColorScheme.Orange -> "Orange" - ColorScheme.OrangeBlack -> "Orange (Black)" - ColorScheme.Yellow -> "Yellow" - ColorScheme.YellowBlack -> "Yellow (Black)" - ColorScheme.Green -> "Green" - ColorScheme.GreenBlack -> "Green (Black)" - ColorScheme.Blue -> "Blue" - ColorScheme.BlueBlack -> "Blue (Black)" -} \ No newline at end of file +val Preferences = AppPreferences() \ No newline at end of file diff --git a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/Resources.kt b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/Resources.kt index aa33744..595d312 100644 --- a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/Resources.kt +++ b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/Resources.kt @@ -226,6 +226,97 @@ val FlexiIcons.Component by lazy { } } +val FlexiIcons.Locale by lazy { + ImageVector( + name = "locale", + defaultWidth = 48.dp, + defaultHeight = 48.dp, + viewportWidth = 48f, + viewportHeight = 48f + ) { + path( + fill = null, + fillAlpha = 1.0f, + stroke = SolidColor(Color.White), + strokeAlpha = 1.0f, + strokeLineWidth = 4f, + strokeLineCap = StrokeCap.Round, + strokeLineJoin = StrokeJoin.Round, + strokeLineMiter = 1.0f, + pathFillType = PathFillType.EvenOdd + ) { + moveTo(24f, 44f) + curveTo(35.0457f, 44f, 44f, 35.0457f, 44f, 24f) + curveTo(44f, 12.9543f, 35.0457f, 4f, 24f, 4f) + curveTo(12.9543f, 4f, 4f, 12.9543f, 4f, 24f) + curveTo(4f, 35.0457f, 12.9543f, 44f, 24f, 44f) + close() + } + path( + fill = null, + fillAlpha = 1.0f, + stroke = SolidColor(Color.White), + strokeAlpha = 1.0f, + strokeLineWidth = 4f, + strokeLineCap = StrokeCap.Round, + strokeLineJoin = StrokeJoin.Round, + strokeLineMiter = 1.0f, + pathFillType = PathFillType.NonZero + ) { + moveTo(4f, 24f) + horizontalLineTo(44f) + } + path( + fill = null, + fillAlpha = 1.0f, + stroke = SolidColor(Color.White), + strokeAlpha = 1.0f, + strokeLineWidth = 4f, + strokeLineCap = StrokeCap.Round, + strokeLineJoin = StrokeJoin.Round, + strokeLineMiter = 1.0f, + pathFillType = PathFillType.EvenOdd + ) { + moveTo(24f, 44f) + curveTo(28.4183f, 44f, 32f, 35.0457f, 32f, 24f) + curveTo(32f, 12.9543f, 28.4183f, 4f, 24f, 4f) + curveTo(19.5817f, 4f, 16f, 12.9543f, 16f, 24f) + curveTo(16f, 35.0457f, 19.5817f, 44f, 24f, 44f) + close() + } + path( + fill = null, + fillAlpha = 1.0f, + stroke = SolidColor(Color.White), + strokeAlpha = 1.0f, + strokeLineWidth = 4f, + strokeLineCap = StrokeCap.Round, + strokeLineJoin = StrokeJoin.Round, + strokeLineMiter = 1.0f, + pathFillType = PathFillType.NonZero + ) { + moveTo(9.85791f, 10.1421f) + curveTo(13.4772f, 13.7614f, 18.4772f, 16f, 24f, 16f) + curveTo(29.5229f, 16f, 34.5229f, 13.7614f, 38.1422f, 10.1421f) + } + path( + fill = null, + fillAlpha = 1.0f, + stroke = SolidColor(Color.White), + strokeAlpha = 1.0f, + strokeLineWidth = 4f, + strokeLineCap = StrokeCap.Round, + strokeLineJoin = StrokeJoin.Round, + strokeLineMiter = 1.0f, + pathFillType = PathFillType.NonZero + ) { + moveTo(38.1422f, 37.8579f) + curveTo(34.5229f, 34.2386f, 29.5229f, 32f, 24f, 32f) + curveTo(18.4772f, 32f, 13.4772f, 34.2386f, 9.8579f, 37.8579f) + } + } +} + val FlexiIcons.Style by lazy { ImageVector( name = "style", diff --git a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/LazyListScreen.kt b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/LazyListScreen.kt index 7f5d4b8..79e1b8a 100644 --- a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/LazyListScreen.kt +++ b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/LazyListScreen.kt @@ -64,6 +64,7 @@ import com.highcapable.flexiui.demo.ListAdd import com.highcapable.flexiui.demo.PrimarySpacer import com.highcapable.flexiui.demo.bean.SimpleListBean import com.highcapable.flexiui.demo.rememberRouter +import com.highcapable.flexiui.demo.strings import com.highcapable.flexiui.resources.FlexiIcons import kotlinx.coroutines.launch @@ -86,25 +87,25 @@ fun LazyListScreen() { FlexiDialog( visible = showRemoveAllDialog, onDismissRequest = { showRemoveAllDialog = false }, - title = { Text("Remove All") }, - content = { Text("Are you sure you want to remove all data?") }, + title = { Text(strings.listRemoveAll) }, + content = { Text(strings.listRemoveAllDescription) }, confirmButton = { Button( onClick = { showRemoveAllDialog = false testListData.clear() } - ) { Text("OK") } + ) { Text(strings.comfirm) } }, cancelButton = { Button( onClick = { showRemoveAllDialog = false } - ) { Text("Cancel") } + ) { Text(strings.cancel) } } ) SecondaryAppBar( - title = { Text("Lazy List Demo") }, - subtitle = { Text("${testListData.size} items of list data", singleLine = true) }, + title = { Text(strings.lazyListDemo) }, + subtitle = { Text(strings.itemsListDataCount(testListData.size), singleLine = true) }, navigationIcon = { NavigationIconButton(onClick = { router.goHome() }) }, @@ -138,11 +139,11 @@ fun LazyListScreen() { Tab( selected = pagerState.currentPage == 0, onClick = { scope.launch { pagerState.animateScrollToPage(0) } } - ) { Text("Linear List") } + ) { Text(strings.linearList) } Tab( selected = pagerState.currentPage == 1, onClick = { scope.launch { pagerState.animateScrollToPage(1) } } - ) { Text("Grid List") } + ) { Text(strings.gridList) } } } ) { innerPadding -> @@ -170,7 +171,7 @@ fun LazyListScreen() { ) { Icon(FlexiIcons.Delete) PrimarySpacer() - Text("Remove this data") + Text(strings.listRemoveSingle) } } } @@ -211,7 +212,7 @@ fun LazyListScreen() { } else Box( modifier = Modifier.fillMaxSize().padding(innerPadding), contentAlignment = Alignment.Center - ) { Text("No data to show") } + ) { Text(strings.listNoData) } } } } diff --git a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/MainScreen.kt b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/MainScreen.kt index 0d11c49..36574f4 100644 --- a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/MainScreen.kt +++ b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/MainScreen.kt @@ -65,6 +65,7 @@ import com.highcapable.flexiui.component.window.FlexiDialog import com.highcapable.flexiui.demo.Component import com.highcapable.flexiui.demo.GitHub import com.highcapable.flexiui.demo.Home +import com.highcapable.flexiui.demo.Locale import com.highcapable.flexiui.demo.PROJECT_URL import com.highcapable.flexiui.demo.Preferences import com.highcapable.flexiui.demo.PrimarySpacer @@ -73,7 +74,9 @@ import com.highcapable.flexiui.demo.SecondarySpacer import com.highcapable.flexiui.demo.SecondaryText import com.highcapable.flexiui.demo.Style import com.highcapable.flexiui.demo.colorSchemes +import com.highcapable.flexiui.demo.locales import com.highcapable.flexiui.demo.rememberRouter +import com.highcapable.flexiui.demo.strings import com.highcapable.flexiui.demo.toName import com.highcapable.flexiui.resources.FlexiIcons import kotlinx.coroutines.launch @@ -90,24 +93,24 @@ fun MainScreen() { FlexiDialog( visible = showOpenUriDialog, onDismissRequest = { showOpenUriDialog = false }, - title = { Text("Open Link") }, - content = { Text("Open the project URL in the browser?") }, + title = { Text(strings.openLink) }, + content = { Text(strings.openLinkDescription) }, confirmButton = { Button( onClick = { showOpenUriDialog = false uriHandler.openUri(PROJECT_URL) } - ) { Text("Open") } + ) { Text(strings.open) } }, cancelButton = { Button( onClick = { showOpenUriDialog = false } - ) { Text("Cancel") } + ) { Text(strings.cancel) } } ) PrimaryAppBar( - title = { Text("Flexi UI Demo") }, + title = { Text(strings.appName) }, actions = { ActionIconButton( onClick = { showOpenUriDialog = true } @@ -123,13 +126,13 @@ fun MainScreen() { selected = pagerState.currentPage == 0, onClick = { scope.launch { pagerState.animateScrollToPage(page = 0) } }, icon = { Icon(FlexiIcons.Home, style = IconDefaults.style(size = 24.dp)) }, - text = { Text("Home") } + text = { Text(strings.home) } ) NavigationBarItem( selected = pagerState.currentPage == 1, onClick = { scope.launch { pagerState.animateScrollToPage(page = 1) } }, icon = { Icon(FlexiIcons.Component, style = IconDefaults.style(size = 24.dp)) }, - text = { Text("Component") } + text = { Text(strings.component) } ) } } @@ -151,8 +154,40 @@ fun MainScreen() { fun MainHomePage(modifier: Modifier) { val scrollState = rememberScrollState() Column(modifier = modifier.fillMaxSize().verticalScroll(scrollState)) { - AreaBox(modifier = Modifier.fillMaxWidth()) { - Text("Flexi UI is a flexible and useful UI component library.") + AreaBox(modifier = Modifier.fillMaxWidth()) { Text(strings.appDescription) } + PrimarySpacer() + AreaColumn(modifier = Modifier.fillMaxWidth()) { + var locale by remember { Preferences.locale } + StickyHeaderBar( + modifier = Modifier.fillMaxWidth(), + icon = { Icon(FlexiIcons.Locale) }, + title = { Text(strings.uiLanguage) } + ) + PrimarySpacer() + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically + ) { + var expanded by remember { mutableStateOf(false) } + Text(strings.selectLanguage) + PrimarySpacer() + DropdownList( + modifier = Modifier.fillMaxWidth(), + expanded = expanded, + onExpandedChange = { expanded = it }, + text = { Text(locale.toName()) }, + ) { + locales().forEach { + DropdownMenuItem( + actived = locale == it, + onClick = { + expanded = false + locale = it + } + ) { Text(it.toName()) } + } + } + } } PrimarySpacer() AreaColumn(modifier = Modifier.fillMaxWidth()) { @@ -162,7 +197,7 @@ fun MainHomePage(modifier: Modifier) { StickyHeaderBar( modifier = Modifier.fillMaxWidth(), icon = { Icon(FlexiIcons.Style) }, - title = { Text("Theme Style") } + title = { Text(strings.themeStyle) } ) PrimarySpacer() AnimatedVisibility(visible = !followSystemDarkMode) { @@ -170,25 +205,25 @@ fun MainHomePage(modifier: Modifier) { SwitchItem( checked = darkMode, onCheckedChange = { darkMode = it } - ) { Text("Enable night mode") } + ) { Text(strings.enableDarkMode) } SecondarySpacer() - SecondaryText("Manually switch the current theme to night mode.") + SecondaryText(strings.enableDarkModeDescription) PrimarySpacer() } } SwitchItem( checked = followSystemDarkMode, onCheckedChange = { followSystemDarkMode = it } - ) { Text("Follow system night mode") } + ) { Text(strings.followSystemDarkMode) } SecondarySpacer() - SecondaryText("Follow the system theme to switch day and night mode.") + SecondaryText(strings.followSystemDarkModeDescription) PrimarySpacer() Row( modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically ) { var expanded by remember { mutableStateOf(false) } - Text("Current Theme") + Text(strings.selectTheme) PrimarySpacer() DropdownList( modifier = Modifier.fillMaxWidth(), @@ -212,14 +247,14 @@ fun MainHomePage(modifier: Modifier) { val router = rememberRouter() HorizontalItemBox( onClick = { router.navigate(Screen.Secondary) }, - title = { Text("Single Page Demo") }, - subtitle = { Text("Open a single page") } + title = { Text(strings.singlePageDemo) }, + subtitle = { Text(strings.singlePageDemoDescription) } ) PrimarySpacer() HorizontalItemBox( onClick = { router.navigate(Screen.LazyList) }, - title = { Text("Lazy List Demo") }, - subtitle = { Text("Open a lazy list page") } + title = { Text(strings.lazyListDemo) }, + subtitle = { Text(strings.lazyListDemoDescription) } ) } } diff --git a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/SecondaryScreen.kt b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/SecondaryScreen.kt index eaadd87..b922492 100644 --- a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/SecondaryScreen.kt +++ b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/SecondaryScreen.kt @@ -36,6 +36,7 @@ import com.highcapable.flexiui.component.SecondaryAppBar import com.highcapable.flexiui.component.Text import com.highcapable.flexiui.demo.PrimarySpacer import com.highcapable.flexiui.demo.rememberRouter +import com.highcapable.flexiui.demo.strings @Composable fun SecondaryScreen() { @@ -43,7 +44,7 @@ fun SecondaryScreen() { Scaffold( appBar = { SecondaryAppBar( - title = { Text("Single Page Demo") }, + title = { Text(strings.singlePageDemo) }, navigationIcon = { NavigationIconButton(onClick = { router.goHome() }) } @@ -57,17 +58,14 @@ fun SecondaryScreen() { ) { AreaColumn(modifier = Modifier.fillMaxWidth()) { Text( - """ - Now, you open a separate secondary page. - You can click the button below to back to the homepage. - """.trimIndent(), + text = strings.singlePageDescription, style = FlexiTheme.typography.primary.copy(lineHeight = 2.em) ) PrimarySpacer() Button( modifier = Modifier.fillMaxWidth(), onClick = { router.goHome() } - ) { Text("Take Me Home") } + ) { Text(strings.takeMeHome) } } } }