Skip to content

Commit

Permalink
ui: remove added actions section in new toolbar config
Browse files Browse the repository at this point in the history
  • Loading branch information
@plateaukao
plateaukao committed Oct 23, 2024
1 parent 77f78f0 commit b26e038
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 100 deletions.
87 changes: 20 additions & 67 deletions app/src/main/java/info/plateaukao/einkbro/activity/ToolbarConfigActivity.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
Expand Down Expand Up @@ -50,6 +49,8 @@ import info.plateaukao.einkbro.view.toolbaricons.ToolbarActionInfo
import org.koin.android.ext.android.inject
import sh.calvin.reorderable.ReorderableItem
import sh.calvin.reorderable.rememberReorderableLazyGridState
import info.plateaukao.einkbro.R
import info.plateaukao.einkbro.view.compose.ReorderableComposedIconBar

class ToolbarConfigActivity : ComponentActivity() {
private val config: ConfigManager by inject()
Expand All @@ -67,7 +68,7 @@ class ToolbarConfigActivity : ComponentActivity() {
topBar = {
TopAppBar(
title = {
Text(text = "123")
Text(text = stringResource(id = R.string.toolbars))
},
navigationIcon = {
IconButton(onClick = { finish() }) {
Expand Down Expand Up @@ -115,94 +116,46 @@ fun ToolbarConfigPanel(list: MutableState<List<ToolbarActionInfo>>) {
}

Column(
modifier = Modifier.padding(8.dp),
modifier = Modifier.padding(vertical = 8.dp, horizontal = 1.dp),
) {
Text(
modifier = Modifier.padding(vertical = 10.dp),
modifier = Modifier.padding(10.dp),
text = "Preview",
style = MaterialTheme.typography.h6
)
Text(
modifier = Modifier.padding(bottom = 10.dp),
text = "no interaction here",
modifier = Modifier.padding(start = 10.dp, bottom = 10.dp),
text = "tap to remove; drag to reorder",
style = MaterialTheme.typography.caption
)
Box(
modifier = Modifier.fillMaxWidth()
.border(1.dp, MaterialTheme.colors.onBackground),
contentAlignment = Alignment.CenterEnd
) {
ComposedIconBar(
toolbarActionInfos = list.value,
ReorderableComposedIconBar(
list = list,
title = "Toolbar Configuration",
tabCount = "7",
pageInfo = "1",
isIncognito = false,
onClick = {},
onLongClick = {},
)
}
Text(
modifier = Modifier.padding(top = 10.dp, bottom = 5.dp),
text = "Added Actions",
style = MaterialTheme.typography.h6
)
Text(
modifier = Modifier.padding(bottom = 10.dp),
text = "click to remove; drag to reorder",
style = MaterialTheme.typography.caption
)
LazyVerticalGrid(
modifier = Modifier
.fillMaxWidth(),
state = lazyGridState,
columns = GridCells.Adaptive(64.dp),
) {
val actionList = list.value.map { it.toolbarAction }
itemsIndexed(actionList, key = { _, item -> item.ordinal }) { index, action ->
ReorderableItem(reorderableLazyGridState, key = action.ordinal) { isDragging ->
val borderWidth = if (isDragging) 1.5.dp else (-1).dp
Box(
modifier = Modifier
.border(
borderWidth,
MaterialTheme.colors.onBackground,
RoundedCornerShape(3.dp)
)
.padding(horizontal = 6.dp)
.longPressDraggableHandle()
.clickable {
if (action == ToolbarAction.Settings) {
// do nothing
return@clickable
}

list.value = actionList.toMutableList().apply {
remove(action)
}.toToolbarActionInfoList()
},
) {
Icon(
modifier = Modifier
.size(64.dp)
.padding(horizontal = 6.dp),
imageVector = action.imageVector
?: ImageVector.vectorResource(id = action.iconResId),
contentDescription = null,
tint = MaterialTheme.colors.onBackground
)
onClick = { action ->
if (action != ToolbarAction.Settings) {
list.value = list.value.toMutableList().apply {
val info = find { it.toolbarAction == action }
remove(info)
}
}
}
}
},
)
}
Text(
modifier = Modifier.padding(top = 10.dp, bottom = 5.dp),
modifier = Modifier.padding(start = 10.dp, top = 10.dp, bottom = 5.dp),
text = "Other Actions",
style = MaterialTheme.typography.h6
)
Text(
modifier = Modifier.padding(bottom = 10.dp),
text = "click to add",
modifier = Modifier.padding(start = 10.dp, bottom = 10.dp),
text = "tap to add",
style = MaterialTheme.typography.caption
)
LazyVerticalGrid(
Expand Down
134 changes: 101 additions & 33 deletions app/src/main/java/info/plateaukao/einkbro/view/compose/Toolbar.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.rememberScrollState
Expand All @@ -31,6 +32,7 @@ import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.key
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
Expand Down Expand Up @@ -62,6 +64,7 @@ import info.plateaukao.einkbro.view.toolbaricons.ToolbarAction.Time
import info.plateaukao.einkbro.view.toolbaricons.ToolbarAction.Title
import info.plateaukao.einkbro.view.toolbaricons.ToolbarActionInfo
import kotlinx.coroutines.delay
import sh.calvin.reorderable.ReorderableRow
import java.text.SimpleDateFormat
import java.util.Date
import java.util.Locale
Expand Down Expand Up @@ -155,40 +158,11 @@ fun ComposedIconBar(
) {
toolbarActionInfos.forEach { toolbarActionInfo ->
when (val toolbarAction = toolbarActionInfo.toolbarAction) {
Title -> {
val titleModifier = Modifier
.padding(start = 2.dp, top = 6.dp, bottom = 6.dp)
.fillMaxHeight()
.defaultMinSize(minWidth = 100.dp)
.border(
0.5.dp,
MaterialTheme.colors.onBackground,
RoundedCornerShape(16.dp)
)
.padding(start = 3.dp, end = 1.dp)
.clickable { onClick(toolbarAction) }
Row(
modifier = titleModifier,
verticalAlignment = Alignment.CenterVertically,
) {
Text(
text = title,
color = MaterialTheme.colors.onBackground,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
}
}

// show a current time (hour:minute) in the toolbar
Title -> ToolbarTitle(onClick, toolbarAction, title)
Time -> CurrentTimeText()

TabCount -> TabCountIcon(isIncognito, tabCount, onClick, onLongClick)

PageInfo -> PageInfoIcon(pageInfo, onClick, onLongClick)

Spacer1, Spacer2 -> Spacer(modifier = Modifier.weight(1F))

else -> ToolbarIcon(
toolbarAction,
toolbarActionInfo.getCurrentResId(),
Expand All @@ -200,6 +174,100 @@ fun ComposedIconBar(
}
}

@Composable
fun ReorderableComposedIconBar(
list: MutableState<List<ToolbarActionInfo>>,
title: String,
tabCount: String,
pageInfo: String,
onClick: (ToolbarAction) -> Unit,
) {
val shouldRowFixed = list.value.map { it.toolbarAction }.contains(Spacer1) ||
list.value.map { it.toolbarAction }.contains(Spacer2)

ReorderableRow(
modifier = Modifier
.height(50.dp)
.background(MaterialTheme.colors.background)
.conditional(!shouldRowFixed) {
horizontalScroll(
rememberScrollState(),
reverseScrolling = true
)
},
list = list.value,
onSettle = { fromIndex, toIndex ->
list.value = list.value.toMutableList().apply {
add(toIndex, removeAt(fromIndex))
}
},
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.End
) { _, toolbarActionInfo, isDragging ->
key(toolbarActionInfo) {
val toolbarAction = toolbarActionInfo.toolbarAction
Box(
modifier = Modifier
.longPressDraggableHandle()
.border(
if (isDragging) 1.5.dp else (-1).dp,
MaterialTheme.colors.onBackground,
RoundedCornerShape(3.dp)
)
) {
when (toolbarAction) {
Title -> ToolbarTitle(onClick, toolbarAction, title)
Time -> CurrentTimeText()
TabCount -> TabCountIcon(false, tabCount, onClick)
PageInfo -> PageInfoIcon(pageInfo, onClick)
Spacer1, Spacer2 -> Spacer(
modifier = Modifier
.size(50.dp)
.clickable(onClick = { onClick(toolbarAction) })
)

else -> ToolbarIcon(
toolbarAction,
toolbarActionInfo.getCurrentResId(),
onClick,
null
)
}
}
}
}
}

@Composable
private fun ToolbarTitle(
onClick: (ToolbarAction) -> Unit,
toolbarAction: ToolbarAction,
title: String,
) {
val titleModifier = Modifier
.padding(start = 2.dp, top = 6.dp, bottom = 6.dp)
.fillMaxHeight()
.defaultMinSize(minWidth = 100.dp)
.border(
0.5.dp,
MaterialTheme.colors.onBackground,
RoundedCornerShape(16.dp)
)
.padding(start = 3.dp, end = 1.dp)
.clickable { onClick(toolbarAction) }
Row(
modifier = titleModifier,
verticalAlignment = Alignment.CenterVertically,
) {
Text(
text = title,
color = MaterialTheme.colors.onBackground,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
}
}

// pageInfo
@Composable
fun PageInfoIcon(
Expand All @@ -218,7 +286,7 @@ fun PageInfoIcon(
.wrapContentWidth()
.combinedClickable(
onClick = { onClick(PageInfo) },
onLongClick = { onLongClick?.invoke(PageInfo) }
onLongClick = onLongClick?.let { { it.invoke(PageInfo) } },
)
)
}
Expand All @@ -244,7 +312,7 @@ fun ToolbarIcon(
indication = null,
interactionSource = interactionSource,
onClick = { onClick(toolbarAction) },
onLongClick = { onLongClick?.invoke(toolbarAction) }
onLongClick = onLongClick?.let { { it.invoke(toolbarAction) } },
)
.padding(6.dp)
.testTag(toolbarAction.name.lowercase())
Expand Down Expand Up @@ -285,7 +353,7 @@ private fun TabCountIcon(
.width(toolbarIconWidth)
.combinedClickable(
onClick = { onClick(TabCount) },
onLongClick = { onLongClick?.invoke(TabCount) }
onLongClick = onLongClick?.let { { it.invoke(TabCount) } },
),
contentAlignment = Alignment.Center
) {
Expand Down

0 comments on commit b26e038

Please sign in to comment.