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

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

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

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

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

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.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(

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

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.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(

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.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(

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.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(