diff --git a/app/src/main/java/com/geeksville/mesh/ui/AppDrawer.kt b/app/src/main/java/com/geeksville/mesh/ui/AppDrawer.kt new file mode 100644 index 000000000..f3f1d36b2 --- /dev/null +++ b/app/src/main/java/com/geeksville/mesh/ui/AppDrawer.kt @@ -0,0 +1,114 @@ +package com.geeksville.mesh.ui + +import androidx.annotation.DrawableRes +import androidx.compose.Composable +import androidx.ui.core.Modifier +import androidx.ui.core.Text +import androidx.ui.foundation.shape.corner.RoundedCornerShape +import androidx.ui.graphics.Color +import androidx.ui.layout.* +import androidx.ui.material.Button +import androidx.ui.material.Divider +import androidx.ui.material.MaterialTheme +import androidx.ui.material.TextButtonStyle +import androidx.ui.material.surface.Surface +import androidx.ui.tooling.preview.Preview +import androidx.ui.unit.dp +import com.geeksville.mesh.R + + +@Composable +fun AppDrawer( + currentScreen: ScreenInfo, + closeDrawer: () -> Unit +) { + Column(modifier = LayoutSize.Fill) { + Spacer(LayoutHeight(24.dp)) + Row(modifier = LayoutPadding(16.dp)) { + VectorImage( + id = R.drawable.ic_launcher_new_foreground, + tint = (MaterialTheme.colors()).primary + ) + Spacer(LayoutWidth(8.dp)) + // VectorImage(id = R.drawable.ic_launcher_new_foreground) + } + Divider(color = Color(0x14333333)) + + @Composable + fun ScreenButton(screen: ScreenInfo) { + DrawerButton( + icon = screen.icon, + label = screen.label, + isSelected = currentScreen == screen + ) { + navigateTo(screen) + closeDrawer() + } + } + + ScreenButton(Screen.messages) + ScreenButton(Screen.users) + ScreenButton(Screen.channel) + ScreenButton(Screen.settings) + } +} + +@Composable +private fun DrawerButton( + modifier: Modifier = Modifier.None, + @DrawableRes icon: Int, + label: String, + isSelected: Boolean, + action: () -> Unit +) { + val colors = MaterialTheme.colors() + val textIconColor = if (isSelected) { + colors.primary + } else { + colors.onSurface.copy(alpha = 0.6f) + } + val backgroundColor = if (isSelected) { + colors.primary.copy(alpha = 0.12f) + } else { + colors.surface + } + + Surface( + modifier = modifier + LayoutPadding( + left = 8.dp, + top = 8.dp, + right = 8.dp, + bottom = 0.dp + ), + color = backgroundColor, + shape = RoundedCornerShape(4.dp) + ) { + Button(onClick = action, style = TextButtonStyle()) { + Row { + VectorImage( + modifier = LayoutGravity.Center, + id = icon, + tint = textIconColor + ) + Spacer(LayoutWidth(16.dp)) + Text( + text = label, + style = (MaterialTheme.typography()).body2.copy( + color = textIconColor + ), + modifier = LayoutWidth.Fill + ) + } + } + } +} + + +@Preview +@Composable +fun previewDrawer() { + AppDrawer( + currentScreen = AppStatus.currentScreen, + closeDrawer = { } + ) +} \ No newline at end of file diff --git a/app/src/main/java/com/geeksville/mesh/ui/MeshApp.kt b/app/src/main/java/com/geeksville/mesh/ui/MeshApp.kt index ae9f30334..1072c4485 100644 --- a/app/src/main/java/com/geeksville/mesh/ui/MeshApp.kt +++ b/app/src/main/java/com/geeksville/mesh/ui/MeshApp.kt @@ -1,11 +1,9 @@ package com.geeksville.mesh.ui -import androidx.annotation.DrawableRes import androidx.compose.Composable import androidx.compose.state import androidx.ui.animation.Crossfade import androidx.ui.core.Clip -import androidx.ui.core.Modifier import androidx.ui.core.Text import androidx.ui.core.TextField import androidx.ui.foundation.VerticalScroller @@ -127,7 +125,7 @@ fun MeshApp() { } } -// @Preview +@Preview @Composable fun previewView() { // It seems modaldrawerlayout not yet supported in preview @@ -136,14 +134,6 @@ fun previewView() { } } -@Preview -@Composable -fun previewDrawer() { - AppDrawer( - currentScreen = AppStatus.currentScreen, - closeDrawer = { } - ) -} @Composable private fun AppContent(openDrawer: () -> Unit) { @@ -173,89 +163,3 @@ private fun AppContent(openDrawer: () -> Unit) { } } } - -@Composable -private fun AppDrawer( - currentScreen: ScreenInfo, - closeDrawer: () -> Unit -) { - Column(modifier = LayoutSize.Fill) { - Spacer(LayoutHeight(24.dp)) - Row(modifier = LayoutPadding(16.dp)) { - VectorImage( - id = R.drawable.ic_launcher_new_foreground, - tint = (MaterialTheme.colors()).primary - ) - Spacer(LayoutWidth(8.dp)) - // VectorImage(id = R.drawable.ic_launcher_new_foreground) - } - Divider(color = Color(0x14333333)) - - @Composable - fun ScreenButton(screen: ScreenInfo) { - DrawerButton( - icon = screen.icon, - label = screen.label, - isSelected = currentScreen == screen - ) { - navigateTo(screen) - closeDrawer() - } - } - - ScreenButton(Screen.messages) - ScreenButton(Screen.users) - ScreenButton(Screen.channel) - ScreenButton(Screen.settings) - } -} - -@Composable -private fun DrawerButton( - modifier: Modifier = Modifier.None, - @DrawableRes icon: Int, - label: String, - isSelected: Boolean, - action: () -> Unit -) { - val colors = MaterialTheme.colors() - val textIconColor = if (isSelected) { - colors.primary - } else { - colors.onSurface.copy(alpha = 0.6f) - } - val backgroundColor = if (isSelected) { - colors.primary.copy(alpha = 0.12f) - } else { - colors.surface - } - - Surface( - modifier = modifier + LayoutPadding( - left = 8.dp, - top = 8.dp, - right = 8.dp, - bottom = 0.dp - ), - color = backgroundColor, - shape = RoundedCornerShape(4.dp) - ) { - Button(onClick = action, style = TextButtonStyle()) { - Row { - VectorImage( - modifier = LayoutGravity.Center, - id = icon, - tint = textIconColor - ) - Spacer(LayoutWidth(16.dp)) - Text( - text = label, - style = (MaterialTheme.typography()).body2.copy( - color = textIconColor - ), - modifier = LayoutWidth.Fill - ) - } - } - } -} diff --git a/app/src/main/java/com/geeksville/mesh/ui/Messages.kt b/app/src/main/java/com/geeksville/mesh/ui/Messages.kt index b38deabb0..d99d01d33 100644 --- a/app/src/main/java/com/geeksville/mesh/ui/Messages.kt +++ b/app/src/main/java/com/geeksville/mesh/ui/Messages.kt @@ -3,15 +3,13 @@ package com.geeksville.mesh.ui import androidx.compose.Composable import androidx.compose.mutableStateOf import androidx.compose.state -import androidx.ui.core.Clip import androidx.ui.core.Text import androidx.ui.core.TextField import androidx.ui.foundation.shape.corner.RoundedCornerShape -import androidx.ui.graphics.Color import androidx.ui.input.ImeAction import androidx.ui.layout.Column -import androidx.ui.layout.Padding -import androidx.ui.layout.Row +import androidx.ui.layout.LayoutPadding +import androidx.ui.layout.LayoutSize import androidx.ui.material.MaterialTheme import androidx.ui.material.darkColorPalette import androidx.ui.material.surface.Surface @@ -23,7 +21,7 @@ import com.geeksville.mesh.ui.MessagesState.messages import java.util.* -data class TextMessage(val date: Date, val from: String, val text: String) +data class TextMessage(val date: Date, val from: String, val text: String, val time: Date? = null) object MessagesState : Logging { @@ -39,33 +37,45 @@ object MessagesState : Logging { @Composable fun MessagesContent() { - Column { + Column(modifier = LayoutSize.Fill) { - Text("hi") + val sidePad = 8.dp + val topPad = 4.dp messages.value.forEach { - Text("Text: ${it.text}") + Text( + text = "Text: ${it.text}", + modifier = LayoutPadding( + left = sidePad, + right = sidePad, + top = topPad, + bottom = topPad + ) + ) } val message = state { "text message" } - Surface(color = Color.Yellow) { - Row { - Clip(shape = RoundedCornerShape(15.dp)) { - Padding(padding = 15.dp) { - TextField( - value = message.value, - onValueChange = { message.value = it }, - textStyle = TextStyle( - color = Color.DarkGray - ), - imeAction = ImeAction.Send, - onImeActionPerformed = { - MessagesState.info("did IME action") - } - ) - } - } - } + + val colors = MaterialTheme.colors() + val backgroundColor = colors.surface.copy(alpha = 0.12f) + + Surface( + modifier = LayoutPadding(8.dp), + color = backgroundColor, + shape = RoundedCornerShape(4.dp) + ) { + TextField( + value = message.value, + onValueChange = { message.value = it }, + textStyle = TextStyle( + color = colors.onSurface.copy(alpha = 0.8f) + ), + imeAction = ImeAction.Send, + onImeActionPerformed = { + MessagesState.info("did IME action") + }, + modifier = LayoutPadding(4.dp) + ) } } }