From 5d291999f87b24ae546e52d65554191bd258cbde Mon Sep 17 00:00:00 2001 From: Raphael Teyssandier Date: Thu, 4 Sep 2025 09:14:28 +0200 Subject: [PATCH] feature: Rework files screen (#194) * feature: Shared pref * fix: Checkbox * feature: Rework files --------- Co-authored-by: TEYSSANDIER Raphael --- .../features/files/view/FileItemRow.kt | 26 +++---- .../features/files/view/FilesScreen.kt | 51 ++++++++++---- .../features/files/view/FilesTopBar.kt | 70 ++++--------------- 3 files changed, 64 insertions(+), 83 deletions(-) diff --git a/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/files/view/FileItemRow.kt b/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/files/view/FileItemRow.kt index 0d1c298a..4d8dd22a 100644 --- a/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/files/view/FileItemRow.kt +++ b/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/files/view/FileItemRow.kt @@ -16,6 +16,7 @@ import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp import io.github.openflocon.flocondesktop.common.ui.ContextualItem @@ -24,6 +25,7 @@ import io.github.openflocon.flocondesktop.features.files.model.FilePathUiModel import io.github.openflocon.flocondesktop.features.files.model.FileTypeUiModel import io.github.openflocon.flocondesktop.features.files.model.FileUiModel import io.github.openflocon.library.designsystem.FloconTheme +import io.github.openflocon.library.designsystem.components.FloconIcon import org.jetbrains.compose.ui.tooling.preview.Preview @Composable @@ -34,7 +36,7 @@ fun FileItemRow( modifier: Modifier = Modifier, ) { ContextualView( - file.contextualActions.map { action -> + items = file.contextualActions.map { action -> ContextualItem( text = action.text, onClick = { @@ -47,29 +49,27 @@ fun FileItemRow( }, ) { Row( - modifier = - modifier - .clickable { - onClick(file) - }.padding(vertical = 8.dp, horizontal = 16.dp), + modifier = modifier + .clip(FloconTheme.shapes.medium) + .clickable { onClick(file) } + .padding(vertical = 8.dp, horizontal = 16.dp), verticalAlignment = Alignment.CenterVertically, ) { - Icon( + FloconIcon( imageVector = file.icon, - modifier = Modifier.size(24.dp), - tint = FloconTheme.colorPalette.onSurface, - contentDescription = null, + modifier = Modifier.size(24.dp) ) Spacer(modifier = Modifier.width(16.dp)) // Nom du fichier/dossier - Column(modifier = Modifier.weight(1f)) { + Column( + modifier = Modifier.weight(1f) + ) { Text( text = file.name, style = FloconTheme.typography.bodyLarge, maxLines = 1, - color = FloconTheme.colorPalette.onSurface, overflow = TextOverflow.Ellipsis, ) // Informations additionnelles (taille, date de modification) @@ -92,7 +92,7 @@ fun FileItemRow( Icon( imageVector = Icons.Outlined.ChevronRight, modifier = Modifier.size(24.dp), - tint = FloconTheme.colorPalette.onSurface, + tint = FloconTheme.colorPalette.onPrimary, contentDescription = null, ) } diff --git a/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/files/view/FilesScreen.kt b/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/files/view/FilesScreen.kt index 64f9a30e..fb8325db 100644 --- a/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/files/view/FilesScreen.kt +++ b/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/files/view/FilesScreen.kt @@ -1,16 +1,20 @@ package io.github.openflocon.flocondesktop.features.files.view -import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.background import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.itemsIndexed +import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.material3.HorizontalDivider import androidx.compose.runtime.Composable import androidx.compose.runtime.DisposableEffect import androidx.compose.runtime.getValue import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip import androidx.compose.ui.unit.dp import androidx.lifecycle.compose.collectAsStateWithLifecycle import io.github.openflocon.flocondesktop.features.files.FilesViewModel @@ -18,7 +22,9 @@ import io.github.openflocon.flocondesktop.features.files.model.FileUiModel import io.github.openflocon.flocondesktop.features.files.model.FilesStateUiModel import io.github.openflocon.flocondesktop.features.files.model.previewFilesStateUiModel import io.github.openflocon.library.designsystem.FloconTheme -import io.github.openflocon.library.designsystem.components.FloconSurface +import io.github.openflocon.library.designsystem.components.FloconFeature +import io.github.openflocon.library.designsystem.components.FloconVerticalScrollbar +import io.github.openflocon.library.designsystem.components.rememberFloconScrollbarAdapter import org.jetbrains.compose.ui.tooling.preview.Preview import org.koin.compose.viewmodel.koinViewModel @@ -54,20 +60,31 @@ private fun FilesScreen( onContextualAction: (FileUiModel, FileUiModel.ContextualAction.Action) -> Unit, modifier: Modifier = Modifier, ) { - FloconSurface(modifier = modifier) { - Column(modifier = Modifier.fillMaxSize()) { - FilesTopBar( - modifier = Modifier.fillMaxWidth(), - current = state.current, - onBack = onNavigateUp, - onRefresh = onRefresh, - onDeleteContent = onDeleteContent, - ) + val listState = rememberLazyListState() + val scrollAdapter = rememberFloconScrollbarAdapter(listState) + + FloconFeature( + modifier = modifier.fillMaxSize() + ) { + FilesTopBar( + modifier = Modifier.fillMaxWidth(), + current = state.current, + onBack = onNavigateUp, + onRefresh = onRefresh, + onDeleteContent = onDeleteContent, + ) + Row( + modifier = Modifier + .fillMaxSize() + .clip(FloconTheme.shapes.medium) + .background(FloconTheme.colorPalette.primary) + ) { LazyColumn( - modifier = Modifier.fillMaxWidth(), - contentPadding = PaddingValues( - vertical = 12.dp, - ), + state = listState, + modifier = Modifier + .weight(1f) + .fillMaxHeight(), + contentPadding = PaddingValues(8.dp), ) { itemsIndexed(state.files) { index, item -> FileItemRow( @@ -81,6 +98,10 @@ private fun FilesScreen( } } } + FloconVerticalScrollbar( + adapter = scrollAdapter, + modifier = Modifier.fillMaxHeight() + ) } } } diff --git a/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/files/view/FilesTopBar.kt b/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/files/view/FilesTopBar.kt index a46e569c..eee23fc6 100644 --- a/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/files/view/FilesTopBar.kt +++ b/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/files/view/FilesTopBar.kt @@ -1,34 +1,23 @@ package io.github.openflocon.flocondesktop.features.files.view -import androidx.compose.foundation.background -import androidx.compose.foundation.clickable -import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.size -import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.filled.ArrowBack import androidx.compose.material.icons.outlined.Delete import androidx.compose.material.icons.outlined.Folder import androidx.compose.material.icons.outlined.Refresh -import androidx.compose.material3.Icon import androidx.compose.material3.Text import androidx.compose.runtime.Composable -import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip -import androidx.compose.ui.graphics.graphicsLayer -import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.unit.dp import io.github.openflocon.flocondesktop.features.files.model.FilePathUiModel import io.github.openflocon.flocondesktop.features.files.model.FileTypeUiModel import io.github.openflocon.flocondesktop.features.files.model.FileUiModel import io.github.openflocon.library.designsystem.FloconTheme +import io.github.openflocon.library.designsystem.components.FloconIcon import io.github.openflocon.library.designsystem.components.FloconIconButton +import io.github.openflocon.library.designsystem.components.FloconIconTonalButton import io.github.openflocon.library.designsystem.components.FloconPageTopBar import org.jetbrains.compose.ui.tooling.preview.Preview @@ -46,24 +35,24 @@ fun FilesTopBar( FloconPageTopBar( modifier = modifier, filterBar = { - TopBarButton( + FloconIconTonalButton( onClick = onBack, enabled = hasParentFile, - icon = Icons.AutoMirrored.Filled.ArrowBack, - ) - Box( - modifier = Modifier.weight(1f) - .clip(RoundedCornerShape(6.dp)) - .background(FloconTheme.colorPalette.onSurface.copy(alpha = 0.1f)) - .padding(vertical = 4.dp, horizontal = 12.dp), + containerColor = FloconTheme.colorPalette.secondary ) { - Text( - current?.name ?: "", - style = FloconTheme.typography.bodyLarge, - maxLines = 1, - color = FloconTheme.colorPalette.onSurface, + FloconIcon( + imageVector = Icons.AutoMirrored.Filled.ArrowBack ) } + Text( + text = current?.name.orEmpty(), + style = FloconTheme.typography.bodyLarge, + maxLines = 1, + color = FloconTheme.colorPalette.onPrimary, + modifier = Modifier + .weight(1f) + .padding(vertical = 4.dp, horizontal = 12.dp), + ) }, actions = { FloconIconButton( @@ -80,35 +69,6 @@ fun FilesTopBar( ) } -@Composable -private fun TopBarButton( - onClick: () -> Unit, - enabled: Boolean, - icon: ImageVector, -) { - Box( - modifier = Modifier.size(32.dp) - .clip(RoundedCornerShape(6.dp)) - .background(FloconTheme.colorPalette.onSurface.copy(alpha = 0.1f)) - .clickable(onClick = onClick, enabled = enabled) - .padding(6.dp) - .graphicsLayer { - alpha = if (enabled) { - 1f - } else { - 0.5f - } - }, - ) { - Icon( - imageVector = icon, - modifier = Modifier.fillMaxSize(), - tint = FloconTheme.colorPalette.onSurface, - contentDescription = null, - ) - } -} - @Preview @Composable private fun FilesTopBarPreview_noParent() {