Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add filename to SmallFileItem for LARGE size #192

Merged
merged 3 commits into from
Nov 19, 2024
Merged

Add filename to SmallFileItem for LARGE size #192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e0934f7
Add filename to SmallFileItem for LARGE size
LunarX Nov 18, 2024
c1f6ef3
Apply suggestions from code review
LunarX Nov 19, 2024
ae106ef
Rename shouldLeaveSpaceForFileName into showFileName for better clarity
LunarX Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions app/src/main/java/com/infomaniak/swisstransfer/ui/components/FileItem.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ fun FileItem(
file = file,
circleColor = SwissTransferTheme.materialColors.surface,
circleSize = 64.dp,
showFileName = false,
)
},
)
Expand Down
79 changes: 72 additions & 7 deletions app/src/main/java/com/infomaniak/swisstransfer/ui/components/FilePreview.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@
package com.infomaniak.swisstransfer.ui.components

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Icon
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
Expand All @@ -32,13 +32,19 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage
import coil3.request.ImageRequest
import coil3.request.crossfade
import com.infomaniak.library.filetypes.FileType
import com.infomaniak.multiplatform_swisstransfer.common.interfaces.ui.FileUi
import com.infomaniak.swisstransfer.ui.previewparameter.FileUiListPreviewParameter
import com.infomaniak.swisstransfer.ui.theme.LocalIsDarkMode
import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme
import com.infomaniak.swisstransfer.ui.utils.PreviewLightAndDark
import com.infomaniak.swisstransfer.ui.utils.fileType
import com.infomaniak.swisstransfer.ui.utils.hasPreview

Expand All @@ -47,14 +53,16 @@ fun FilePreview(
file: FileUi,
circleColor: Color,
circleSize: Dp,
showFileName: Boolean,
fileIconContentPadding: PaddingValues = PaddingValues(),
) {
var displayPreview by rememberSaveable { mutableStateOf(file.hasPreview) }
val previewUri = file.localPath

if (displayPreview && previewUri != null) {
FileThumbnail(previewUri, onError = { displayPreview = false })
} else {
FileIcon(file.fileType, circleColor, circleSize)
FileIcon(file.fileType, circleColor, circleSize, file.fileName, showFileName, fileIconContentPadding)
}
}

Expand All @@ -73,17 +81,74 @@ private fun FileThumbnail(uri: String, onError: () -> Unit) {
}

@Composable
private fun FileIcon(fileType: FileType, color: Color, circleSize: Dp) {
Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()) {
private fun FileIcon(
fileType: FileType,
color: Color,
circleSize: Dp,
fileName: String,
showFileName: Boolean,
iconContentPadding: PaddingValues,
) {
Box(
contentAlignment = if (showFileName) Alignment.TopCenter else Alignment.Center,
modifier = Modifier
.fillMaxSize()
.padding(if (showFileName) iconContentPadding else PaddingValues()),
) {
Canvas(modifier = Modifier.size(circleSize)) {
drawCircle(color = color)
}

Icon(
modifier = Modifier.size(circleSize / 2),
modifier = Modifier
.size(circleSize)
.padding(circleSize / 4),
imageVector = fileType.icon,
contentDescription = null,
tint = fileType.color(LocalIsDarkMode.current),
)

if (showFileName) {
Text(
fileName,
modifier = Modifier.align(Alignment.BottomCenter),
style = SwissTransferTheme.typography.labelRegular,
color = SwissTransferTheme.colors.secondaryTextColor,
overflow = TextOverflow.Ellipsis,
maxLines = 1,
)
}
}
}

@PreviewLightAndDark
@Composable
private fun FileNamePreview(@PreviewParameter(FileUiListPreviewParameter::class) files: List<FileUi>) {
SwissTransferTheme {
Surface(modifier = Modifier.size(140.dp)) {
FilePreview(
file = files.first(),
circleColor = SwissTransferTheme.materialColors.surfaceContainerHighest,
circleSize = 40.dp,
showFileName = true,
fileIconContentPadding = PaddingValues(8.dp),
)
}
}
}

@PreviewLightAndDark
@Composable
private fun NoFileNamePreview(@PreviewParameter(FileUiListPreviewParameter::class) files: List<FileUi>) {
SwissTransferTheme {
Surface(modifier = Modifier.size(140.dp)) {
FilePreview(
file = files.first(),
circleColor = SwissTransferTheme.materialColors.surfaceContainerHighest,
circleSize = 40.dp,
showFileName = false,
fileIconContentPadding = PaddingValues(8.dp),
)
}
}
}
15 changes: 9 additions & 6 deletions app/src/main/java/com/infomaniak/swisstransfer/ui/components/SmallFileItem.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.times
import com.infomaniak.multiplatform_swisstransfer.common.interfaces.ui.FileUi
import com.infomaniak.swisstransfer.ui.previewparameter.FileUiListPreviewParameter
import com.infomaniak.swisstransfer.ui.theme.CustomShapes
Expand All @@ -51,18 +50,22 @@ fun SmallFileItem(
FilePreview(
file = file,
circleColor = SwissTransferTheme.materialColors.surfaceContainerHighest,
circleSize = smallFileTileSize.iconCircleSize(),
circleSize = smallFileTileSize.iconCircleSize,
showFileName = smallFileTileSize.showFileName,
fileIconContentPadding = PaddingValues(SmallFileTileSize.fileNameIconPadding),
)

onRemove?.let { CrossCircleButton(onClick = it, size = 40.dp) }
}
}

enum class SmallFileTileSize(val size: Dp, val shape: Shape) {
SMALL(48.dp, CustomShapes.SMALL),
LARGE(80.dp, CustomShapes.MEDIUM);
enum class SmallFileTileSize(val size: Dp, val shape: Shape, val iconCircleSize: Dp, val showFileName: Boolean) {
SMALL(48.dp, CustomShapes.SMALL, 32.dp, false),
LARGE(80.dp, CustomShapes.MEDIUM, 40.dp, true);

fun iconCircleSize(): Dp = 2f / 3 * size
companion object {
val fileNameIconPadding = Margin.Mini
}
}

@PreviewLightAndDark
Expand Down
Loading