Merge branch 'frontend/globaluiconstants' into 'main'

Frontend - add global constants to generally style components in a same manner

See merge request EmmaVandewalle/writand!44

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
+}

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
     ) {
 

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))
             )
         }
 

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"
                         )

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) {

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)
+                    .padding(start = 10.dp * depth)
-                    .size(iconSize)
+                    .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
                 )
             )

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(

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(
+        WPopup(
-            onDismissRequest = { openDialog.value = false },
+            width = 800.dp,
-            properties = DialogProperties(usePlatformDefaultWidth = false)
+            height = 600.dp,
-        ) {
+            modifier = Modifier
-            Box(
+                .clip(shape = RoundedCornerShape(WUIGlobals.cornerRadius))
-                modifier = Modifier
+                .border(
-                    .height(600.dp)
+                    width = 1.dp,
-                    .width(800.dp),
+                    color = MaterialTheme.colorScheme.tertiary,
-                contentAlignment = Alignment.Center
+                    shape = RoundedCornerShape(WUIGlobals.cornerRadius)
-            ) {
+                ),
-                Scaffold(
+            onDismiss = { openDialog.value = false },
+            titleBar = {
+                Row(
                     modifier = Modifier
-                        .fillMaxSize()
+                        .fillMaxWidth()
-                        .clip(shape = RoundedCornerShape(10.dp))
+                        .background(color = MaterialTheme.colorScheme.tertiary),
-                        .border(
+                    verticalAlignment = Alignment.CenterVertically,
-                            width = 1.dp,
+                    horizontalArrangement = Arrangement.SpaceBetween
-                            color = MaterialTheme.colorScheme.tertiary,
+                ) {
-                            shape = RoundedCornerShape(10.dp)
+                    // spacer to divide the row in 3 parts and spread them over the width
-                        ),
+                    Spacer(modifier = Modifier.size(0.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))
 
-                            WText(text = "Settings", fontSize = 25.sp)
+                    WText(text = "Settings", fontSize = 25.sp)
 
-                            IconButton(
+                    IconButton(
-                                onClick = { openDialog.value = false },
+                        onClick = { openDialog.value = false },
-                                modifier = Modifier.padding(start = 10.dp),
+                        modifier = Modifier.padding(start = 10.dp),
-                            ) {
+                    ) {
-                                Icon(
+                        Icon(
-                                    modifier = Modifier.size(35.dp),
+                            modifier = Modifier.size(35.dp),
-                                    imageVector = Icons.Default.Close,
+                            imageVector = Icons.Default.Close,
-                                    contentDescription = "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(
+                // cancel the last changes to the other tab first to the ones not
-                        modifier = Modifier
+                // applied yet, otherwise it looks like there are applied
-                            .padding(it)
+                if (selectedItem.value == items[0]) {
-                            .fillMaxSize(),
+                    if (vM.changedAdvanced.value) {
-                        drawerContent = {
+                        vM.onCancelAdvanced()
-                            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)
-                        }
                     }
+                    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"
             )

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(

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(

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(