Skip to content

Commit

Permalink
Ui moves
Browse files Browse the repository at this point in the history
  • Loading branch information
@reosfire
reosfire committed Aug 30, 2024
1 parent bcd8d4c commit f822747
Show file tree
Hide file tree
Showing 17 changed files with 297 additions and 182 deletions.
78 changes: 40 additions & 38 deletions App/src/main/kotlin/ru/reosfire/pixorio/app/LauncherWindow.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@ package ru.reosfire.pixorio.app
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.material.TextFieldDefaults
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
Expand All @@ -15,7 +18,8 @@ import androidx.compose.ui.window.ApplicationScope
import androidx.compose.ui.window.Window
import androidx.compose.ui.window.WindowPosition
import androidx.compose.ui.window.rememberWindowState
import ru.reosfire.pixorio.app.filepicker.FilePickerDialog
import ru.reosfire.pixorio.app.extensions.compose.rememberDerived
import ru.reosfire.pixorio.designsystem.componentes.CommonButton
import ru.reosfire.pixorio.designsystem.theme.MainTheme

@Composable
Expand All @@ -27,60 +31,58 @@ fun ApplicationScope.LauncherWindow(
onCloseRequest = ::exitApplication,
title = APP_NAME,
) {
var opened by remember { mutableStateOf(true) }
if (opened) {
FilePickerDialog(
onCancelled = { opened = false },
onSelected = { opened = false; println(it) },
)
}

val widthState = remember { SizeComponentInputFieldState(64) }
val heightState = remember { SizeComponentInputFieldState(64) }

val size by remember {
derivedStateOf { IntSize(widthState.value, heightState.value) }
}

val correct by remember {
derivedStateOf { widthState.isCorrect && heightState.isCorrect }
}
val correct by rememberDerived { widthState.isCorrect && heightState.isCorrect }

MainTheme {
Box(Modifier.fillMaxSize().background(MaterialTheme.colors.background)) {
Column(
verticalArrangement = Arrangement.spacedBy(8.dp),
modifier = Modifier
.align(Alignment.Center)
.clip(RoundedCornerShape(4.dp))
.background(MaterialTheme.colors.surface)
.padding(8.dp)
.requiredWidth(IntrinsicSize.Max)
.requiredWidth(IntrinsicSize.Min)
) {
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier,
horizontalArrangement = Arrangement.spacedBy(4.dp),
modifier = Modifier
.fillMaxWidth()
.height(IntrinsicSize.Min)
) {
Text("Width: ", color = MaterialTheme.colors.onSurface)
SizeTextField(
state = widthState,
modifier = Modifier.fillMaxWidth(),
)
Column(
verticalArrangement = Arrangement.SpaceAround,
modifier = Modifier
.fillMaxHeight()
.width(IntrinsicSize.Min)
) {
Text("Width: ", color = MaterialTheme.colors.onSurface)
Text("Height: ", color = MaterialTheme.colors.onSurface)
}
Column(
verticalArrangement = Arrangement.SpaceAround,
modifier = Modifier
.fillMaxHeight()
.width(IntrinsicSize.Min)
) {
SizeTextField(
state = widthState,
modifier = Modifier.fillMaxWidth(),
)
SizeTextField(
state = heightState,
modifier = Modifier.fillMaxWidth(),
)
}
}
Spacer(Modifier.height(8.dp).fillMaxWidth())
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier,
) {
Text("Height: ", color = MaterialTheme.colors.onSurface)
SizeTextField(
state = heightState,
modifier = Modifier.fillMaxWidth(),
)
}
Button(

CommonButton(
onClick = {
if (correct) {
onContinue(size)
onContinue(IntSize(widthState.value, heightState.value))
}
},
enabled = correct,
Expand Down
9 changes: 9 additions & 0 deletions App/src/main/kotlin/ru/reosfire/pixorio/app/extensions/compose/State.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
package ru.reosfire.pixorio.app.extensions.compose

import androidx.compose.runtime.Composable
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.remember

@Composable
fun <T> rememberDerived(calculation: () -> T) =
remember { derivedStateOf(calculation) }
20 changes: 17 additions & 3 deletions App/src/main/kotlin/ru/reosfire/pixorio/app/filepicker/FileNodeView.kt
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
package ru.reosfire.pixorio.app.filepicker

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import ru.reosfire.pixorio.designsystem.modifiers.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
Expand All @@ -21,9 +22,12 @@ import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import ru.reosfire.pixorio.designsystem.componentes.PixelImage

private val DOWN_ARROW_BITMAP = useResource("icons/filepicker/down_arrow.png") { loadImageBitmap(it) }
private val DOWN_ARROW_BITMAP = useResource("icons/down_arrow.png") { loadImageBitmap(it) }
private val RIGHT_ARROW_BITMAP = useResource("icons/filepicker/right_arrow.png") { loadImageBitmap(it) }

private val FILE_BITMAP = useResource("icons/filepicker/file.png") { loadImageBitmap(it) }
private val FOLDER_BITMAP = useResource("icons/filepicker/folder.png") { loadImageBitmap(it) }

@Composable
fun FileNodeView(
state: FileNode,
Expand Down Expand Up @@ -73,6 +77,7 @@ private fun DirectoryView(

Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(4.dp, Alignment.Start),
modifier = modifier
.clip(RoundedCornerShape(2.dp))
.then(if (isSelected) Modifier.background(MaterialTheme.colors.surface) else Modifier)
Expand All @@ -83,9 +88,13 @@ private fun DirectoryView(
bitmap = if (opened.value) DOWN_ARROW_BITMAP else RIGHT_ARROW_BITMAP,
colorFilter = ColorFilter.tint(contentColor),
modifier = Modifier
.padding(end = 4.dp)
.size(8.dp)
)
PixelImage(
bitmap = FOLDER_BITMAP,
colorFilter = ColorFilter.tint(contentColor),
modifier = Modifier.size(16.dp),
)
Text(
text = name,
color = contentColor,
Expand Down Expand Up @@ -115,6 +124,11 @@ private fun FileView(
.clickable(onClick = onClick)
.padding(horizontal = 4.dp)
) {
PixelImage(
bitmap = FILE_BITMAP,
colorFilter = ColorFilter.tint(contentColor),
modifier = Modifier.size(16.dp),
)
Text(
text = name,
color = contentColor,
Expand Down
72 changes: 15 additions & 57 deletions App/src/main/kotlin/ru/reosfire/pixorio/app/filepicker/FilePicker.kt
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,12 @@
package ru.reosfire.pixorio.app.filepicker

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.res.loadImageBitmap
import androidx.compose.ui.res.useResource
import androidx.compose.ui.unit.DpSize
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.DialogWindow
Expand All @@ -31,17 +24,17 @@ fun FilePickerDialog(
) {
val selectedFileState = remember { mutableStateOf<File?>(null) }
var selectedFile by selectedFileState
val fileRoot = remember {
FileRoot(filesFilter = { !it.isHidden && it.isDirectory })
val fileTreeModel = remember {
FileTreeModel(filesFilter = { !it.isHidden && it.isDirectory })
}

val fileTreeState = rememberFileTreeState()
val coroutineScope = rememberCoroutineScope()

fun update() {
fun updateTree() {
coroutineScope.launch {
selectedFile?.let { selectedFile ->
fileRoot.tryOpenPath(selectedFile)
fileTreeModel.tryOpenPath(selectedFile)

fileTreeState.scrollToItem(selectedFile)
}
Expand All @@ -67,27 +60,31 @@ fun FilePickerDialog(
.background(MaterialTheme.colors.background)
.padding(8.dp)
) {
Row(Modifier.fillMaxWidth()) {
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.fillMaxWidth().height(IntrinsicSize.Min)
) {
CommonTextField(
value = fileName,
onValueChange = {
fileName = it
},
singleLine = true,
modifier = Modifier
.fillMaxHeight()
.padding(end = 8.dp)
.weight(1f)
)

DropdownSelector(extensionSelectorState)
DropdownSelector(extensionSelectorState, Modifier.fillMaxHeight())
}

SpecialLocations(
locations = specialLocations,
locations = SPECIAL_LOCATIONS,
selectedFileState = selectedFileState,
onSelected = {
selectedFile = it
update()
updateTree()
},
modifier = Modifier.fillMaxWidth(),
)
Expand All @@ -96,15 +93,15 @@ fun FilePickerDialog(
state = selectedFileState,
onSelected = {
selectedFile = it
update()
updateTree()
},
modifier = Modifier.fillMaxWidth(),
)

FileTree(
model = fileTreeModel,
state = fileTreeState,
selectedFileState = selectedFileState,
fileRoot = fileRoot,
modifier = Modifier
.weight(1f)
.fillMaxWidth()
Expand All @@ -128,7 +125,6 @@ fun FilePickerDialog(
onSelected(File("$resultFile${File.separator}$fileName.${extensionSelectorState.selectedOption.payload}"))
}
},
contentPadding = PaddingValues(4.dp),
modifier = Modifier
.weight(1f)
) {
Expand All @@ -139,41 +135,3 @@ fun FilePickerDialog(
}
}
}

data class SpecialLocationUIData(
val file: File,
val icon: ImageBitmap,
val id: Int,
)

@Composable
fun SpecialLocations(
locations: List<SpecialLocationUIData>,
selectedFileState: State<File?>,
onSelected: (File) -> Unit,
modifier: Modifier = Modifier,
) {
remember { }
LazyRow(modifier = modifier) {
items(locations, key = { it.id }) {
PixelImage(
bitmap = it.icon,
modifier = Modifier
.padding(4.dp)
.clip(RoundedCornerShape(4.dp))
.clickable {
onSelected(it.file)
}
.then(if (it.file == selectedFileState.value) Modifier.background(MaterialTheme.colors.surface) else Modifier)
.padding(4.dp)
.size(16.dp)
)
}
}
}

private val DESKTOP_BITMAP = useResource("icons/filepicker/desktop.png") { loadImageBitmap(it) }

val specialLocations = listOf(
SpecialLocationUIData(File(System.getProperty("user.home")), DESKTOP_BITMAP, 0),
)
Loading

0 comments on commit f822747

Please sign in to comment.