From a94a900df21bf4aefcb770f2bb1793b1b422264a Mon Sep 17 00:00:00 2001 From: Robin Meersman Date: Fri, 6 Sep 2024 09:11:50 +0000 Subject: [PATCH] Frontend - add global constants to generally style components in a same manner --- .../java/be/re/writand/screens/WUIGlobals.kt | 31 ++++ .../re/writand/screens/components/Buttons.kt | 9 +- .../re/writand/screens/components/WPopup.kt | 5 +- .../screens/editor/top/TopEditorBar.kt | 9 +- .../re/writand/screens/filetree/Filetree.kt | 13 +- .../screens/filetree/WTreeComponent.kt | 19 +-- .../be/re/writand/screens/info/InfoPopup.kt | 5 +- .../writand/screens/settings/SettingsPopup.kt | 146 +++++++++--------- .../screens/welcome/WelcomeSettingsScreen.kt | 5 +- .../screens/welcome/WelcomeStartScreen.kt | 5 +- .../screens/welcome/WelcomeTOSScreen.kt | 5 +- 11 files changed, 139 insertions(+), 113 deletions(-) create mode 100644 app/src/main/java/be/re/writand/screens/WUIGlobals.kt diff --git a/app/src/main/java/be/re/writand/screens/WUIGlobals.kt b/app/src/main/java/be/re/writand/screens/WUIGlobals.kt new file mode 100644 index 0000000..c5d8de1 --- /dev/null +++ b/app/src/main/java/be/re/writand/screens/WUIGlobals.kt @@ -0,0 +1,31 @@ +package be.re.writand.screens + +import androidx.compose.ui.unit.dp + +object WUIGlobals { + + /** + * Standard value to be added to the font size setting. + */ + val heading = 11.dp + + /** + * Standard title size to be added to the font size setting. + */ + val title = 16.dp + + /** + * Standard corner radius for borders. + */ + val cornerRadius = 10.dp + + /** + * Standard icon size for normal icons. + */ + val iconSize = 25.dp + + /** + * Standard icon size for use in a tree structure (must be a bit smaller). + */ + val treeIconSize = 16.dp +} \ No newline at end of file diff --git a/app/src/main/java/be/re/writand/screens/components/Buttons.kt b/app/src/main/java/be/re/writand/screens/components/Buttons.kt index 8e077da..0e7eeb1 100644 --- a/app/src/main/java/be/re/writand/screens/components/Buttons.kt +++ b/app/src/main/java/be/re/writand/screens/components/Buttons.kt @@ -10,6 +10,7 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp +import be.re.writand.screens.WUIGlobals import be.re.writand.ui.theme.MainGreen /** @@ -30,7 +31,7 @@ fun WButton( onClick = onClick, modifier = modifier, colors = ButtonDefaults.buttonColors(containerColor = MainGreen), - shape = RoundedCornerShape(10.dp), + shape = RoundedCornerShape(WUIGlobals.cornerRadius), enabled = enabled ) { WText(text = text, color = Color.Black, modifier = Modifier.padding(5.dp)) @@ -56,7 +57,7 @@ fun WDangerButton( onClick = onClick, modifier = modifier, colors = ButtonDefaults.buttonColors(containerColor = Color.Red), - shape = RoundedCornerShape(10.dp), + shape = RoundedCornerShape(WUIGlobals.cornerRadius), enabled = enabled ) { WText(text = text, color = Color.White, modifier = Modifier.padding(5.dp)) @@ -82,10 +83,10 @@ fun WBorderButton( modifier = modifier.border( width = 2.dp, color = MainGreen, - shape = RoundedCornerShape(10.dp) + shape = RoundedCornerShape(WUIGlobals.cornerRadius) ), colors = ButtonDefaults.buttonColors(containerColor = Color.Transparent), - shape = RoundedCornerShape(10.dp), + shape = RoundedCornerShape(WUIGlobals.cornerRadius), enabled = enabled ) { diff --git a/app/src/main/java/be/re/writand/screens/components/WPopup.kt b/app/src/main/java/be/re/writand/screens/components/WPopup.kt index 684cd0e..025ff77 100644 --- a/app/src/main/java/be/re/writand/screens/components/WPopup.kt +++ b/app/src/main/java/be/re/writand/screens/components/WPopup.kt @@ -19,6 +19,7 @@ import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import androidx.compose.ui.window.Dialog import androidx.compose.ui.window.DialogProperties +import be.re.writand.screens.WUIGlobals import be.re.writand.ui.theme.MainGreen /** @@ -60,9 +61,9 @@ fun WPopup( .border( width = 1.dp, color = MainGreen, - shape = RoundedCornerShape(10.dp) + shape = RoundedCornerShape(WUIGlobals.cornerRadius) ) - .clip(RoundedCornerShape(10.dp)) + .clip(RoundedCornerShape(WUIGlobals.cornerRadius)) ) } diff --git a/app/src/main/java/be/re/writand/screens/editor/top/TopEditorBar.kt b/app/src/main/java/be/re/writand/screens/editor/top/TopEditorBar.kt index 59b8c82..b6719cb 100644 --- a/app/src/main/java/be/re/writand/screens/editor/top/TopEditorBar.kt +++ b/app/src/main/java/be/re/writand/screens/editor/top/TopEditorBar.kt @@ -23,6 +23,7 @@ import androidx.compose.ui.res.painterResource import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel import be.re.writand.R +import be.re.writand.screens.WUIGlobals import be.re.writand.screens.components.WText import java.nio.file.Path @@ -46,9 +47,9 @@ fun TopEditorBar( .border( 1.dp, color = MaterialTheme.colorScheme.primary, - shape = RoundedCornerShape(10.dp) + shape = RoundedCornerShape(WUIGlobals.cornerRadius) ) - .clip(shape = RoundedCornerShape(10.dp)) + .clip(shape = RoundedCornerShape(WUIGlobals.cornerRadius)) .background(color = MaterialTheme.colorScheme.tertiary), horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically @@ -72,13 +73,13 @@ fun TopEditorBar( IconButton(onClick = { vM.onSaveFile() }) { if (isSaved.value) { Icon( - modifier = Modifier.size(25.dp), + modifier = Modifier.size(WUIGlobals.iconSize), painter = painterResource(id = R.drawable.saved), contentDescription = "Save" ) } else { Icon( - modifier = Modifier.size(25.dp), + modifier = Modifier.size(WUIGlobals.iconSize), painter = painterResource(id = R.drawable.not_saved), contentDescription = "Save" ) diff --git a/app/src/main/java/be/re/writand/screens/filetree/Filetree.kt b/app/src/main/java/be/re/writand/screens/filetree/Filetree.kt index 63211f6..2b395ae 100644 --- a/app/src/main/java/be/re/writand/screens/filetree/Filetree.kt +++ b/app/src/main/java/be/re/writand/screens/filetree/Filetree.kt @@ -26,6 +26,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel +import be.re.writand.screens.WUIGlobals import be.re.writand.screens.components.WLoadingIndicator import be.re.writand.screens.components.WText import be.re.writand.ui.theme.MainGreen @@ -53,7 +54,7 @@ fun TopScaffoldBar(title: String) { width = 1.dp, color = MainGreen, shape = RoundedCornerShape( - topStart = 10.dp, topEnd = 10.dp, + topStart = WUIGlobals.cornerRadius, topEnd = WUIGlobals.cornerRadius, bottomStart = 0.dp, bottomEnd = 0.dp ) ) @@ -80,7 +81,7 @@ fun BottomScaffoldBar() { color = MainGreen, shape = RoundedCornerShape( topStart = 0.dp, topEnd = 0.dp, - bottomStart = 10.dp, bottomEnd = 10.dp + bottomStart = WUIGlobals.cornerRadius, bottomEnd = WUIGlobals.cornerRadius ) ) .padding(horizontal = 10.dp) @@ -88,12 +89,12 @@ fun BottomScaffoldBar() { Icon( imageVector = Icons.Default.Settings, contentDescription = "Open settings", - modifier = Modifier.size(24.dp).clickable { /* TODO: link settings popup */ } + modifier = Modifier.size(WUIGlobals.iconSize).clickable { /* TODO: link settings popup */ } ) Icon( imageVector = Icons.Default.Info, contentDescription = "More information", - modifier = Modifier.size(24.dp).clickable { /* TODO: link about popup */ } + modifier = Modifier.size(WUIGlobals.iconSize).clickable { /* TODO: link about popup */ } ) } } @@ -127,9 +128,9 @@ fun WFiletree( .border( width = 1.dp, color = MainGreen, - shape = RoundedCornerShape(10.dp) + shape = RoundedCornerShape(WUIGlobals.cornerRadius) ) - .clip(RoundedCornerShape(10.dp)) + .clip(RoundedCornerShape(WUIGlobals.cornerRadius)) ) { when (val s = uiState) { diff --git a/app/src/main/java/be/re/writand/screens/filetree/WTreeComponent.kt b/app/src/main/java/be/re/writand/screens/filetree/WTreeComponent.kt index 41a682d..9e54c0a 100644 --- a/app/src/main/java/be/re/writand/screens/filetree/WTreeComponent.kt +++ b/app/src/main/java/be/re/writand/screens/filetree/WTreeComponent.kt @@ -34,6 +34,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.semantics.Role import androidx.compose.ui.unit.dp import be.re.writand.data.local.filemanager.FileType +import be.re.writand.screens.WUIGlobals import be.re.writand.screens.components.WBorderButton import be.re.writand.screens.components.WButton import be.re.writand.screens.components.WCheckbox @@ -49,12 +50,6 @@ import java.nio.file.Path // based on: https://stackoverflow.com/a/71709816 -// constant for standard indentation. -private val defaultSpacing = 10.dp - -// constant to fix the icon size. -private val iconSize = 16.dp - /** * The main component of the filetree itself. * @param[root] the root node of the filetree. @@ -176,7 +171,7 @@ fun LazyListScope.WTreeItem( imageVector = Icons.Default.Add, contentDescription = "Add a file or directory", modifier = Modifier - .size(iconSize) + .size(WUIGlobals.treeIconSize) .clickable { setShowAddPopUp(true) } @@ -186,7 +181,7 @@ fun LazyListScope.WTreeItem( imageVector = Icons.Default.Delete, contentDescription = "Delete the current file or directory", modifier = Modifier - .size(iconSize) + .size(WUIGlobals.treeIconSize) .clickable { setShowRemovePopUp(true) } @@ -247,8 +242,8 @@ fun Filename( Icons.AutoMirrored.Default.KeyboardArrowRight }, modifier = Modifier - .padding(start = defaultSpacing * depth) - .size(iconSize) + .padding(start = 10.dp * depth) + .size(WUIGlobals.treeIconSize) .clickable( onClick = { toggleIsOpened(root.item) }, role = Role.Switch @@ -260,7 +255,7 @@ fun Filename( Text( text = filename, modifier = Modifier - .padding(start = defaultSpacing * depth + iconSize) + .padding(start = 10.dp * depth + WUIGlobals.treeIconSize) .clickable { onSelect(getPath(root.item)) } @@ -398,7 +393,7 @@ private fun TopPopUpBar(title: String, showExit: Boolean = true, onDismiss: () - width = 1.dp, color = MainGreen, shape = RoundedCornerShape( - topStart = 10.dp, topEnd = 10.dp, + topStart = WUIGlobals.cornerRadius, topEnd = WUIGlobals.cornerRadius, bottomStart = 0.dp, bottomEnd = 0.dp ) ) diff --git a/app/src/main/java/be/re/writand/screens/info/InfoPopup.kt b/app/src/main/java/be/re/writand/screens/info/InfoPopup.kt index b7fbc1d..2022c84 100644 --- a/app/src/main/java/be/re/writand/screens/info/InfoPopup.kt +++ b/app/src/main/java/be/re/writand/screens/info/InfoPopup.kt @@ -40,6 +40,7 @@ import androidx.compose.ui.unit.sp import androidx.compose.ui.window.Dialog import androidx.compose.ui.window.DialogProperties import androidx.hilt.navigation.compose.hiltViewModel +import be.re.writand.screens.WUIGlobals import be.re.writand.screens.components.WLoadingIndicator import be.re.writand.screens.components.WLogoImage import be.re.writand.screens.components.WText @@ -88,11 +89,11 @@ fun InfoPopup( Scaffold( modifier = Modifier .fillMaxSize() - .clip(shape = RoundedCornerShape(10.dp)) + .clip(shape = RoundedCornerShape(WUIGlobals.cornerRadius)) .border( width = 1.dp, color = MaterialTheme.colorScheme.tertiary, - shape = RoundedCornerShape(10.dp) + shape = RoundedCornerShape(WUIGlobals.cornerRadius) ), topBar = { Row( diff --git a/app/src/main/java/be/re/writand/screens/settings/SettingsPopup.kt b/app/src/main/java/be/re/writand/screens/settings/SettingsPopup.kt index 45cee72..1b73c1e 100644 --- a/app/src/main/java/be/re/writand/screens/settings/SettingsPopup.kt +++ b/app/src/main/java/be/re/writand/screens/settings/SettingsPopup.kt @@ -46,8 +46,10 @@ import androidx.hilt.navigation.compose.hiltViewModel import be.re.writand.R import be.re.writand.data.local.models.UserLanguage import be.re.writand.data.local.models.UserTheme +import be.re.writand.screens.WUIGlobals import be.re.writand.screens.components.WButton import be.re.writand.screens.components.WLabelAndTextField +import be.re.writand.screens.components.WPopup import be.re.writand.screens.components.WRadioButtonsSelectorRowWise import be.re.writand.screens.components.WText @@ -88,87 +90,77 @@ fun SettingsPopup( if (openDialog.value) { buttonTitle.value = "Hide Pop Up" - Dialog( - onDismissRequest = { openDialog.value = false }, - properties = DialogProperties(usePlatformDefaultWidth = false) - ) { - Box( - modifier = Modifier - .height(600.dp) - .width(800.dp), - contentAlignment = Alignment.Center - ) { - Scaffold( + WPopup( + width = 800.dp, + height = 600.dp, + modifier = Modifier + .clip(shape = RoundedCornerShape(WUIGlobals.cornerRadius)) + .border( + width = 1.dp, + color = MaterialTheme.colorScheme.tertiary, + shape = RoundedCornerShape(WUIGlobals.cornerRadius) + ), + onDismiss = { openDialog.value = false }, + titleBar = { + Row( modifier = Modifier - .fillMaxSize() - .clip(shape = RoundedCornerShape(10.dp)) - .border( - width = 1.dp, - color = MaterialTheme.colorScheme.tertiary, - shape = RoundedCornerShape(10.dp) - ), - topBar = { - Row( - modifier = Modifier - .fillMaxWidth() - .background(color = MaterialTheme.colorScheme.tertiary), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.SpaceBetween - ) { - // spacer to divide the row in 3 parts and spread them over the width - Spacer(modifier = Modifier.size(0.dp)) + .fillMaxWidth() + .background(color = MaterialTheme.colorScheme.tertiary), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween + ) { + // spacer to divide the row in 3 parts and spread them over the width + Spacer(modifier = Modifier.size(0.dp)) - WText(text = "Settings", fontSize = 25.sp) + WText(text = "Settings", fontSize = 25.sp) - IconButton( - onClick = { openDialog.value = false }, - modifier = Modifier.padding(start = 10.dp), - ) { - Icon( - modifier = Modifier.size(35.dp), - imageVector = Icons.Default.Close, - contentDescription = "Close" + IconButton( + onClick = { openDialog.value = false }, + modifier = Modifier.padding(start = 10.dp), + ) { + Icon( + modifier = Modifier.size(35.dp), + imageVector = Icons.Default.Close, + contentDescription = "Close" + ) + } + } + } + ) { + PermanentNavigationDrawer( + modifier = Modifier + .padding(it) + .fillMaxSize(), + drawerContent = { + PermanentDrawerSheet( + modifier = Modifier + .padding(top = 10.dp) + .width(240.dp) + ) { + Column(modifier = Modifier.verticalScroll(rememberScrollState())) { + items.forEach { item -> + NavigationDrawerItem( + label = { Text(text = item) }, + selected = item == selectedItem.value, + onClick = { selectedItem.value = item }, + modifier = Modifier.padding(horizontal = 12.dp) ) } } } - ) { - PermanentNavigationDrawer( - modifier = Modifier - .padding(it) - .fillMaxSize(), - drawerContent = { - PermanentDrawerSheet( - modifier = Modifier - .padding(top = 10.dp) - .width(240.dp) - ) { - Column(modifier = Modifier.verticalScroll(rememberScrollState())) { - items.forEach { item -> - NavigationDrawerItem( - label = { Text(text = item) }, - selected = item == selectedItem.value, - onClick = { selectedItem.value = item }, - modifier = Modifier.padding(horizontal = 12.dp) - ) - } - } - } - }) { - // cancel the last changes to the other tab first to the ones not - // applied yet, otherwise it looks like there are applied - if (selectedItem.value == items[0]) { - if (vM.changedAdvanced.value) { - vM.onCancelAdvanced() - } - AppearanceSettings(editorSettingsVM = vM) - } else { - if (vM.changedAppearance.value) { - vM.onCancelAppearance() - } - AdvancedSettings(editorSettingsVM = vM) - } + }) { + // cancel the last changes to the other tab first to the ones not + // applied yet, otherwise it looks like there are applied + if (selectedItem.value == items[0]) { + if (vM.changedAdvanced.value) { + vM.onCancelAdvanced() } + AppearanceSettings(editorSettingsVM = vM) + } else { + if (vM.changedAppearance.value) { + vM.onCancelAppearance() + } + AdvancedSettings(editorSettingsVM = vM) } } } @@ -318,14 +310,14 @@ fun ArrowAmountChooser( WText(text = text) IconButton(onClick = onMinValue) { Icon( - modifier = Modifier.size(25.dp), + modifier = Modifier.size(WUIGlobals.iconSize), painter = painterResource(R.drawable.baseline_keyboard_double_arrow_left_24), contentDescription = "Min" ) } IconButton(onClick = onDecrementValue) { Icon( - modifier = Modifier.size(25.dp), + modifier = Modifier.size(WUIGlobals.iconSize), imageVector = Icons.AutoMirrored.Filled.KeyboardArrowLeft, contentDescription = "Less" ) @@ -333,14 +325,14 @@ fun ArrowAmountChooser( WText(text = amountInt.toString()) IconButton(onClick = onIncrementValue) { Icon( - modifier = Modifier.size(25.dp), + modifier = Modifier.size(WUIGlobals.iconSize), imageVector = Icons.AutoMirrored.Filled.KeyboardArrowRight, contentDescription = "More" ) } IconButton(onClick = onMaxValue) { Icon( - modifier = Modifier.size(25.dp), + modifier = Modifier.size(WUIGlobals.iconSize), painter = painterResource(R.drawable.baseline_keyboard_double_arrow_right_24), contentDescription = "Max" ) diff --git a/app/src/main/java/be/re/writand/screens/welcome/WelcomeSettingsScreen.kt b/app/src/main/java/be/re/writand/screens/welcome/WelcomeSettingsScreen.kt index d534387..0677624 100644 --- a/app/src/main/java/be/re/writand/screens/welcome/WelcomeSettingsScreen.kt +++ b/app/src/main/java/be/re/writand/screens/welcome/WelcomeSettingsScreen.kt @@ -30,6 +30,7 @@ import androidx.navigation.NavHostController import be.re.writand.data.local.models.UserLanguage import be.re.writand.data.local.models.UserTheme import be.re.writand.navigation.WAppDestinations +import be.re.writand.screens.WUIGlobals import be.re.writand.screens.components.WButton import be.re.writand.screens.components.WLabelAndTextField import be.re.writand.screens.components.WLogoImage @@ -66,9 +67,9 @@ fun WelcomeSettingsScreen( .border( 1.dp, color = MaterialTheme.colorScheme.tertiary, - shape = RoundedCornerShape(10.dp) + shape = RoundedCornerShape(WUIGlobals.cornerRadius) ) - .clip(shape = RoundedCornerShape(10.dp)), + .clip(shape = RoundedCornerShape(WUIGlobals.cornerRadius)), topBar = { Box(modifier = Modifier.height(75.dp)) { WLogoImage( diff --git a/app/src/main/java/be/re/writand/screens/welcome/WelcomeStartScreen.kt b/app/src/main/java/be/re/writand/screens/welcome/WelcomeStartScreen.kt index 48e0e97..3629365 100644 --- a/app/src/main/java/be/re/writand/screens/welcome/WelcomeStartScreen.kt +++ b/app/src/main/java/be/re/writand/screens/welcome/WelcomeStartScreen.kt @@ -23,6 +23,7 @@ import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import androidx.navigation.NavHostController import be.re.writand.navigation.WAppDestinations +import be.re.writand.screens.WUIGlobals import be.re.writand.screens.components.WButton import be.re.writand.screens.components.WLogoImage import be.re.writand.screens.components.WText @@ -45,9 +46,9 @@ fun WelcomeStartScreen( .border( 1.dp, color = MaterialTheme.colorScheme.tertiary, - shape = RoundedCornerShape(10.dp) + shape = RoundedCornerShape(WUIGlobals.cornerRadius) ) - .clip(shape = RoundedCornerShape(10.dp)), + .clip(shape = RoundedCornerShape(WUIGlobals.cornerRadius)), topBar = { Box(modifier = Modifier.height(75.dp)) { WLogoImage( diff --git a/app/src/main/java/be/re/writand/screens/welcome/WelcomeTOSScreen.kt b/app/src/main/java/be/re/writand/screens/welcome/WelcomeTOSScreen.kt index 86fb5d9..a45ef75 100644 --- a/app/src/main/java/be/re/writand/screens/welcome/WelcomeTOSScreen.kt +++ b/app/src/main/java/be/re/writand/screens/welcome/WelcomeTOSScreen.kt @@ -31,6 +31,7 @@ import androidx.compose.ui.unit.sp import androidx.hilt.navigation.compose.hiltViewModel import androidx.navigation.NavHostController import be.re.writand.navigation.WAppDestinations +import be.re.writand.screens.WUIGlobals import be.re.writand.screens.components.WButton import be.re.writand.screens.components.WCheckbox import be.re.writand.screens.components.WLoadingIndicator @@ -60,9 +61,9 @@ fun WelcomeTOSScreen( .border( 1.dp, color = MaterialTheme.colorScheme.tertiary, - shape = RoundedCornerShape(10.dp) + shape = RoundedCornerShape(WUIGlobals.cornerRadius) ) - .clip(shape = RoundedCornerShape(10.dp)), + .clip(shape = RoundedCornerShape(WUIGlobals.cornerRadius)), topBar = { Box(modifier = Modifier.height(75.dp)) { WLogoImage(