tdpeuter/writand
1
Fork 0
forked from Writand/writand
Code Pull requests Activity Actions

Merge branch 'frontend/globaluiconstants' into 'main'

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

See merge request EmmaVandewalle/writand!44
This commit is contained in:
Robin Meersman 2024-09-06 09:11:50 +00:00
commit 295aac3c9d
11 changed files with 139 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
app/src/main/java/be/re/writand/screens/WUIGlobals.kt Normal file
View file

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

9
app/src/main/java/be/re/writand/screens/components/Buttons.kt
View file

@ -10,6 +10,7 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import be.re.writand.screens.WUIGlobals
import be.re.writand.ui.theme.MainGreen import be.re.writand.ui.theme.MainGreen
/** /**
@ -30,7 +31,7 @@ fun WButton(
onClick = onClick, onClick = onClick,
modifier = modifier, modifier = modifier,
colors = ButtonDefaults.buttonColors(containerColor = MainGreen), colors = ButtonDefaults.buttonColors(containerColor = MainGreen),
shape = RoundedCornerShape(10.dp), shape = RoundedCornerShape(WUIGlobals.cornerRadius),
enabled = enabled enabled = enabled
) { ) {
WText(text = text, color = Color.Black, modifier = Modifier.padding(5.dp)) WText(text = text, color = Color.Black, modifier = Modifier.padding(5.dp))
@ -56,7 +57,7 @@ fun WDangerButton(
onClick = onClick, onClick = onClick,
modifier = modifier, modifier = modifier,
colors = ButtonDefaults.buttonColors(containerColor = Color.Red), colors = ButtonDefaults.buttonColors(containerColor = Color.Red),
shape = RoundedCornerShape(10.dp), shape = RoundedCornerShape(WUIGlobals.cornerRadius),
enabled = enabled enabled = enabled
) { ) {
WText(text = text, color = Color.White, modifier = Modifier.padding(5.dp)) WText(text = text, color = Color.White, modifier = Modifier.padding(5.dp))
@ -82,10 +83,10 @@ fun WBorderButton(
modifier = modifier.border( modifier = modifier.border(
width = 2.dp, width = 2.dp,
color = MainGreen, color = MainGreen,
shape = RoundedCornerShape(10.dp) shape = RoundedCornerShape(WUIGlobals.cornerRadius)
), ),
colors = ButtonDefaults.buttonColors(containerColor = Color.Transparent), colors = ButtonDefaults.buttonColors(containerColor = Color.Transparent),
shape = RoundedCornerShape(10.dp), shape = RoundedCornerShape(WUIGlobals.cornerRadius),
enabled = enabled enabled = enabled
) { ) {

5
app/src/main/java/be/re/writand/screens/components/WPopup.kt
View file

@ -19,6 +19,7 @@ import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties import androidx.compose.ui.window.DialogProperties
import be.re.writand.screens.WUIGlobals
import be.re.writand.ui.theme.MainGreen import be.re.writand.ui.theme.MainGreen
/** /**
@ -60,9 +61,9 @@ fun WPopup(
.border( .border(
width = 1.dp, width = 1.dp,
color = MainGreen, color = MainGreen,
shape = RoundedCornerShape(10.dp) shape = RoundedCornerShape(WUIGlobals.cornerRadius)
) )
.clip(RoundedCornerShape(10.dp)) .clip(RoundedCornerShape(WUIGlobals.cornerRadius))
) )
} }

9
app/src/main/java/be/re/writand/screens/editor/top/TopEditorBar.kt
View file

@ -23,6 +23,7 @@ import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel import androidx.hilt.navigation.compose.hiltViewModel
import be.re.writand.R import be.re.writand.R
import be.re.writand.screens.WUIGlobals
import be.re.writand.screens.components.WText import be.re.writand.screens.components.WText
import java.nio.file.Path import java.nio.file.Path
@ -46,9 +47,9 @@ fun TopEditorBar(
.border( .border(
1.dp, 1.dp,
color = MaterialTheme.colorScheme.primary, 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), .background(color = MaterialTheme.colorScheme.tertiary),
horizontalArrangement = Arrangement.SpaceBetween, horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically verticalAlignment = Alignment.CenterVertically
@ -72,13 +73,13 @@ fun TopEditorBar(
IconButton(onClick = { vM.onSaveFile() }) { IconButton(onClick = { vM.onSaveFile() }) {
if (isSaved.value) { if (isSaved.value) {
Icon( Icon(
modifier = Modifier.size(25.dp), modifier = Modifier.size(WUIGlobals.iconSize),
painter = painterResource(id = R.drawable.saved), painter = painterResource(id = R.drawable.saved),
contentDescription = "Save" contentDescription = "Save"
) )
} else { } else {
Icon( Icon(
modifier = Modifier.size(25.dp), modifier = Modifier.size(WUIGlobals.iconSize),
painter = painterResource(id = R.drawable.not_saved), painter = painterResource(id = R.drawable.not_saved),
contentDescription = "Save" contentDescription = "Save"
) )

13
app/src/main/java/be/re/writand/screens/filetree/Filetree.kt
View file

@ -26,6 +26,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel 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.WLoadingIndicator
import be.re.writand.screens.components.WText import be.re.writand.screens.components.WText
import be.re.writand.ui.theme.MainGreen import be.re.writand.ui.theme.MainGreen
@ -53,7 +54,7 @@ fun TopScaffoldBar(title: String) {
width = 1.dp, width = 1.dp,
color = MainGreen, color = MainGreen,
shape = RoundedCornerShape( shape = RoundedCornerShape(
topStart = 10.dp, topEnd = 10.dp, topStart = WUIGlobals.cornerRadius, topEnd = WUIGlobals.cornerRadius,
bottomStart = 0.dp, bottomEnd = 0.dp bottomStart = 0.dp, bottomEnd = 0.dp
) )
) )
@ -80,7 +81,7 @@ fun BottomScaffoldBar() {
color = MainGreen, color = MainGreen,
shape = RoundedCornerShape( shape = RoundedCornerShape(
topStart = 0.dp, topEnd = 0.dp, topStart = 0.dp, topEnd = 0.dp,
bottomStart = 10.dp, bottomEnd = 10.dp bottomStart = WUIGlobals.cornerRadius, bottomEnd = WUIGlobals.cornerRadius
) )
) )
.padding(horizontal = 10.dp) .padding(horizontal = 10.dp)
@ -88,12 +89,12 @@ fun BottomScaffoldBar() {
Icon( Icon(
imageVector = Icons.Default.Settings, imageVector = Icons.Default.Settings,
contentDescription = "Open 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( Icon(
imageVector = Icons.Default.Info, imageVector = Icons.Default.Info,
contentDescription = "More information", 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( .border(
width = 1.dp, width = 1.dp,
color = MainGreen, color = MainGreen,
shape = RoundedCornerShape(10.dp) shape = RoundedCornerShape(WUIGlobals.cornerRadius)
) )
.clip(RoundedCornerShape(10.dp)) .clip(RoundedCornerShape(WUIGlobals.cornerRadius))
) { ) {
when (val s = uiState) { when (val s = uiState) {

19
app/src/main/java/be/re/writand/screens/filetree/WTreeComponent.kt
View file

@ -34,6 +34,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.Role import androidx.compose.ui.semantics.Role
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import be.re.writand.data.local.filemanager.FileType 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.WBorderButton
import be.re.writand.screens.components.WButton import be.re.writand.screens.components.WButton
import be.re.writand.screens.components.WCheckbox import be.re.writand.screens.components.WCheckbox
@ -49,12 +50,6 @@ import java.nio.file.Path
// based on: https://stackoverflow.com/a/71709816 // 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. * The main component of the filetree itself.
* @param[root] the root node of the filetree. * @param[root] the root node of the filetree.
@ -176,7 +171,7 @@ fun LazyListScope.WTreeItem(
imageVector = Icons.Default.Add, imageVector = Icons.Default.Add,
contentDescription = "Add a file or directory", contentDescription = "Add a file or directory",
modifier = Modifier modifier = Modifier
.size(iconSize) .size(WUIGlobals.treeIconSize)
.clickable { .clickable {
setShowAddPopUp(true) setShowAddPopUp(true)
} }
@ -186,7 +181,7 @@ fun LazyListScope.WTreeItem(
imageVector = Icons.Default.Delete, imageVector = Icons.Default.Delete,
contentDescription = "Delete the current file or directory", contentDescription = "Delete the current file or directory",
modifier = Modifier modifier = Modifier
.size(iconSize) .size(WUIGlobals.treeIconSize)
.clickable { .clickable {
setShowRemovePopUp(true) setShowRemovePopUp(true)
} }
@ -247,8 +242,8 @@ fun Filename(
Icons.AutoMirrored.Default.KeyboardArrowRight Icons.AutoMirrored.Default.KeyboardArrowRight
}, },
modifier = Modifier modifier = Modifier
.padding(start = defaultSpacing * depth) .padding(start = 10.dp * depth)
.size(iconSize) .size(WUIGlobals.treeIconSize)
.clickable( .clickable(
onClick = { toggleIsOpened(root.item) }, onClick = { toggleIsOpened(root.item) },
role = Role.Switch role = Role.Switch
@ -260,7 +255,7 @@ fun Filename(
Text( Text(
text = filename, text = filename,
modifier = Modifier modifier = Modifier
.padding(start = defaultSpacing * depth + iconSize) .padding(start = 10.dp * depth + WUIGlobals.treeIconSize)
.clickable { .clickable {
onSelect(getPath(root.item)) onSelect(getPath(root.item))
} }
@ -398,7 +393,7 @@ private fun TopPopUpBar(title: String, showExit: Boolean = true, onDismiss: () -
width = 1.dp, width = 1.dp,
color = MainGreen, color = MainGreen,
shape = RoundedCornerShape( shape = RoundedCornerShape(
topStart = 10.dp, topEnd = 10.dp, topStart = WUIGlobals.cornerRadius, topEnd = WUIGlobals.cornerRadius,
bottomStart = 0.dp, bottomEnd = 0.dp bottomStart = 0.dp, bottomEnd = 0.dp
) )
) )

5
app/src/main/java/be/re/writand/screens/info/InfoPopup.kt
View file

@ -40,6 +40,7 @@ import androidx.compose.ui.unit.sp
import androidx.compose.ui.window.Dialog import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties import androidx.compose.ui.window.DialogProperties
import androidx.hilt.navigation.compose.hiltViewModel 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.WLoadingIndicator
import be.re.writand.screens.components.WLogoImage import be.re.writand.screens.components.WLogoImage
import be.re.writand.screens.components.WText import be.re.writand.screens.components.WText
@ -88,11 +89,11 @@ fun InfoPopup(
Scaffold( Scaffold(
modifier = Modifier modifier = Modifier
.fillMaxSize() .fillMaxSize()
.clip(shape = RoundedCornerShape(10.dp)) .clip(shape = RoundedCornerShape(WUIGlobals.cornerRadius))
.border( .border(
width = 1.dp, width = 1.dp,
color = MaterialTheme.colorScheme.tertiary, color = MaterialTheme.colorScheme.tertiary,
shape = RoundedCornerShape(10.dp) shape = RoundedCornerShape(WUIGlobals.cornerRadius)
), ),
topBar = { topBar = {
Row( Row(

34
app/src/main/java/be/re/writand/screens/settings/SettingsPopup.kt
View file

@ -46,8 +46,10 @@ import androidx.hilt.navigation.compose.hiltViewModel
import be.re.writand.R import be.re.writand.R
import be.re.writand.data.local.models.UserLanguage import be.re.writand.data.local.models.UserLanguage
import be.re.writand.data.local.models.UserTheme 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.WButton
import be.re.writand.screens.components.WLabelAndTextField 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.WRadioButtonsSelectorRowWise
import be.re.writand.screens.components.WText import be.re.writand.screens.components.WText
@ -88,26 +90,18 @@ fun SettingsPopup(
if (openDialog.value) { if (openDialog.value) {
buttonTitle.value = "Hide Pop Up" buttonTitle.value = "Hide Pop Up"
Dialog( WPopup(
onDismissRequest = { openDialog.value = false }, width = 800.dp,
properties = DialogProperties(usePlatformDefaultWidth = false) height = 600.dp,
) {
Box(
modifier = Modifier modifier = Modifier
.height(600.dp) .clip(shape = RoundedCornerShape(WUIGlobals.cornerRadius))
.width(800.dp),
contentAlignment = Alignment.Center
) {
Scaffold(
modifier = Modifier
.fillMaxSize()
.clip(shape = RoundedCornerShape(10.dp))
.border( .border(
width = 1.dp, width = 1.dp,
color = MaterialTheme.colorScheme.tertiary, color = MaterialTheme.colorScheme.tertiary,
shape = RoundedCornerShape(10.dp) shape = RoundedCornerShape(WUIGlobals.cornerRadius)
), ),
topBar = { onDismiss = { openDialog.value = false },
titleBar = {
Row( Row(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
@ -171,8 +165,6 @@ fun SettingsPopup(
} }
} }
} }
}
}
} }
@Composable @Composable
@ -318,14 +310,14 @@ fun ArrowAmountChooser(
WText(text = text) WText(text = text)
IconButton(onClick = onMinValue) { IconButton(onClick = onMinValue) {
Icon( Icon(
modifier = Modifier.size(25.dp), modifier = Modifier.size(WUIGlobals.iconSize),
painter = painterResource(R.drawable.baseline_keyboard_double_arrow_left_24), painter = painterResource(R.drawable.baseline_keyboard_double_arrow_left_24),
contentDescription = "Min" contentDescription = "Min"
) )
} }
IconButton(onClick = onDecrementValue) { IconButton(onClick = onDecrementValue) {
Icon( Icon(
modifier = Modifier.size(25.dp), modifier = Modifier.size(WUIGlobals.iconSize),
imageVector = Icons.AutoMirrored.Filled.KeyboardArrowLeft, imageVector = Icons.AutoMirrored.Filled.KeyboardArrowLeft,
contentDescription = "Less" contentDescription = "Less"
) )
@ -333,14 +325,14 @@ fun ArrowAmountChooser(
WText(text = amountInt.toString()) WText(text = amountInt.toString())
IconButton(onClick = onIncrementValue) { IconButton(onClick = onIncrementValue) {
Icon( Icon(
modifier = Modifier.size(25.dp), modifier = Modifier.size(WUIGlobals.iconSize),
imageVector = Icons.AutoMirrored.Filled.KeyboardArrowRight, imageVector = Icons.AutoMirrored.Filled.KeyboardArrowRight,
contentDescription = "More" contentDescription = "More"
) )
} }
IconButton(onClick = onMaxValue) { IconButton(onClick = onMaxValue) {
Icon( Icon(
modifier = Modifier.size(25.dp), modifier = Modifier.size(WUIGlobals.iconSize),
painter = painterResource(R.drawable.baseline_keyboard_double_arrow_right_24), painter = painterResource(R.drawable.baseline_keyboard_double_arrow_right_24),
contentDescription = "Max" contentDescription = "Max"
) )

5
app/src/main/java/be/re/writand/screens/welcome/WelcomeSettingsScreen.kt
View file

@ -30,6 +30,7 @@ import androidx.navigation.NavHostController
import be.re.writand.data.local.models.UserLanguage import be.re.writand.data.local.models.UserLanguage
import be.re.writand.data.local.models.UserTheme import be.re.writand.data.local.models.UserTheme
import be.re.writand.navigation.WAppDestinations 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.WButton
import be.re.writand.screens.components.WLabelAndTextField import be.re.writand.screens.components.WLabelAndTextField
import be.re.writand.screens.components.WLogoImage import be.re.writand.screens.components.WLogoImage
@ -66,9 +67,9 @@ fun WelcomeSettingsScreen(
.border( .border(
1.dp, 1.dp,
color = MaterialTheme.colorScheme.tertiary, color = MaterialTheme.colorScheme.tertiary,
shape = RoundedCornerShape(10.dp) shape = RoundedCornerShape(WUIGlobals.cornerRadius)
) )
.clip(shape = RoundedCornerShape(10.dp)), .clip(shape = RoundedCornerShape(WUIGlobals.cornerRadius)),
topBar = { topBar = {
Box(modifier = Modifier.height(75.dp)) { Box(modifier = Modifier.height(75.dp)) {
WLogoImage( WLogoImage(

5
app/src/main/java/be/re/writand/screens/welcome/WelcomeStartScreen.kt
View file

@ -23,6 +23,7 @@ import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController import androidx.navigation.NavHostController
import be.re.writand.navigation.WAppDestinations 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.WButton
import be.re.writand.screens.components.WLogoImage import be.re.writand.screens.components.WLogoImage
import be.re.writand.screens.components.WText import be.re.writand.screens.components.WText
@ -45,9 +46,9 @@ fun WelcomeStartScreen(
.border( .border(
1.dp, 1.dp,
color = MaterialTheme.colorScheme.tertiary, color = MaterialTheme.colorScheme.tertiary,
shape = RoundedCornerShape(10.dp) shape = RoundedCornerShape(WUIGlobals.cornerRadius)
) )
.clip(shape = RoundedCornerShape(10.dp)), .clip(shape = RoundedCornerShape(WUIGlobals.cornerRadius)),
topBar = { topBar = {
Box(modifier = Modifier.height(75.dp)) { Box(modifier = Modifier.height(75.dp)) {
WLogoImage( WLogoImage(

5
app/src/main/java/be/re/writand/screens/welcome/WelcomeTOSScreen.kt
View file

@ -31,6 +31,7 @@ import androidx.compose.ui.unit.sp
import androidx.hilt.navigation.compose.hiltViewModel import androidx.hilt.navigation.compose.hiltViewModel
import androidx.navigation.NavHostController import androidx.navigation.NavHostController
import be.re.writand.navigation.WAppDestinations 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.WButton
import be.re.writand.screens.components.WCheckbox import be.re.writand.screens.components.WCheckbox
import be.re.writand.screens.components.WLoadingIndicator import be.re.writand.screens.components.WLoadingIndicator
@ -60,9 +61,9 @@ fun WelcomeTOSScreen(
.border( .border(
1.dp, 1.dp,
color = MaterialTheme.colorScheme.tertiary, color = MaterialTheme.colorScheme.tertiary,
shape = RoundedCornerShape(10.dp) shape = RoundedCornerShape(WUIGlobals.cornerRadius)
) )
.clip(shape = RoundedCornerShape(10.dp)), .clip(shape = RoundedCornerShape(WUIGlobals.cornerRadius)),
topBar = { topBar = {
Box(modifier = Modifier.height(75.dp)) { Box(modifier = Modifier.height(75.dp)) {
WLogoImage( WLogoImage(