Merge pull request #69 from TimPushkin/ui

UI improvements

app/src/main/java/ru/spbu/depnav/ui/map/FloorSwitch.kt

@@ -38,7 +38,9 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import ru.spbu.depnav.R
 import ru.spbu.depnav.ui.theme.DepNavTheme
 
 /** Two buttons to switch the current map one floor up or down. */
@@ -60,7 +62,10 @@ fun FloorSwitch(
                 onClick = { onClick(floor + 1) },
                 enabled = floor < maxFloor
             ) {
-                Icon(Icons.Rounded.KeyboardArrowUp, contentDescription = "Up arrow")
+                Icon(
+                    Icons.Rounded.KeyboardArrowUp,
+                    contentDescription = stringResource(R.string.label_to_floor_above)
+                )
             }
 
             AnimatedContent(
@@ -82,7 +87,10 @@ fun FloorSwitch(
                 onClick = { onClick(floor - 1) },
                 enabled = floor > minFloor
             ) {
-                Icon(Icons.Rounded.KeyboardArrowDown, contentDescription = "Down arrow")
+                Icon(
+                    Icons.Rounded.KeyboardArrowDown,
+                    contentDescription = stringResource(R.string.label_to_floor_below)
+                )
             }
         }
     }

app/src/main/java/ru/spbu/depnav/ui/map/MapLegendDialog.kt

@@ -0,0 +1,88 @@
+/**
+ * DepNav -- department navigator.
+ * Copyright (C) 2023  Timofey Pushkin
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+package ru.spbu.depnav.ui.map
+
+import androidx.annotation.StringRes
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.text.InlineTextContent
+import androidx.compose.foundation.text.appendInlineContent
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.LocalTextStyle
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.Placeholder
+import androidx.compose.ui.text.PlaceholderVerticalAlign
+import androidx.compose.ui.text.buildAnnotatedString
+import ru.spbu.depnav.R
+import ru.spbu.depnav.data.model.Marker
+import ru.spbu.depnav.ui.theme.DEFAULT_PADDING
+
+/** Dialog with the map legend. **/
+@Composable
+fun MapLegendDialog(onDismiss: () -> Unit) {
+    AlertDialog(
+        onDismissRequest = onDismiss,
+        confirmButton = {
+            TextButton(onClick = onDismiss) {
+                Text(stringResource(R.string.ok))
+            }
+        },
+        title = { Text(stringResource(R.string.map_legend)) },
+        text = {
+            LazyColumn(verticalArrangement = Arrangement.spacedBy(DEFAULT_PADDING)) {
+                item { LegendItem(Marker.MarkerType.ENTRANCE, R.string.entrance_descr) }
+                item { LegendItem(Marker.MarkerType.STAIRS_UP, R.string.stairs_up_descr) }
+                item { LegendItem(Marker.MarkerType.STAIRS_DOWN, R.string.stairs_down_descr) }
+                item { LegendItem(Marker.MarkerType.STAIRS_BOTH, R.string.stairs_both_descr) }
+                item { LegendItem(Marker.MarkerType.ELEVATOR, R.string.elevator_descr) }
+                item { LegendItem(Marker.MarkerType.WC_MAN, R.string.wc_man_descr) }
+                item { LegendItem(Marker.MarkerType.WC_WOMAN, R.string.wc_woman_descr) }
+                item { LegendItem(Marker.MarkerType.WC, R.string.wc_descr) }
+                item { LegendItem(Marker.MarkerType.OTHER, R.string.other_descr) }
+            }
+        }
+    )
+}
+
+private const val INLINE_ICON_ID = "icon"
+
+@Composable
+private fun LegendItem(markerType: Marker.MarkerType, @StringRes descriptionId: Int) {
+    Text(
+        text = buildAnnotatedString {
+            appendInlineContent(INLINE_ICON_ID)
+            append(" — ${stringResource(descriptionId)}")
+        },
+        inlineContent = mapOf(INLINE_ICON_ID to getInlineMarkerView(markerType))
+    )
+}
+
+@Composable
+private fun getInlineMarkerView(type: Marker.MarkerType) = InlineTextContent(
+    Placeholder(
+        width = LocalTextStyle.current.lineHeight,
+        height = LocalTextStyle.current.lineHeight,
+        PlaceholderVerticalAlign.TextCenter
+    )
+) {
+    MarkerView(title = type.name, type = type, isClosed = false)
+}

app/src/main/java/ru/spbu/depnav/ui/map/MapScreen.kt

@@ -80,11 +80,16 @@ fun MapScreen(vm: MapScreenViewModel = hiltViewModel(), onStartSearch: () -> Uni
         return
     }
 
-    var openMenu by rememberSaveable { mutableStateOf(false) }
-    if (openMenu) {
+    var openMapLegend by rememberSaveable { mutableStateOf(false) }
+    if (openMapLegend) {
+        MapLegendDialog(onDismiss = { openMapLegend = false })
+    }
+
+    var openSettings by rememberSaveable { mutableStateOf(false) }
+    if (openSettings) {
         SettingsDialog(
             prefs = vm.prefs,
-            onDismiss = { openMenu = false }
+            onDismiss = { openSettings = false }
         )
     }
 
@@ -97,7 +102,8 @@ fun MapScreen(vm: MapScreenViewModel = hiltViewModel(), onStartSearch: () -> Uni
                     visible = vm.showUI,
                     currentFloor = vm.currentFloor,
                     maxFloor = vm.floorsNum,
-                    onOpenMenuClick = { openMenu = true },
+                    onOpenMapLegendClick = { openMapLegend = true },
+                    onOpenSettingsClick = { openSettings = true },
                     onStartSearchClick = onStartSearch,
                     onSwitchFloorClick = { vm.viewModelScope.launch { vm.setFloor(it) } }
                 )
@@ -127,7 +133,8 @@ private fun BoxScope.TopUi(
     visible: Boolean,
     currentFloor: Int,
     maxFloor: Int,
-    onOpenMenuClick: () -> Unit,
+    onOpenMapLegendClick: () -> Unit,
+    onOpenSettingsClick: () -> Unit,
     onStartSearchClick: () -> Unit,
     onSwitchFloorClick: (Int) -> Unit
 ) {
@@ -149,7 +156,8 @@ private fun BoxScope.TopUi(
         ) {
             TopButton(
                 text = stringResource(R.string.search_markers),
-                onSettingsClick = onOpenMenuClick,
+                onInfoClick = onOpenMapLegendClick,
+                onSettingsClick = onOpenSettingsClick,
                 onSurfaceClick = onStartSearchClick,
                 modifier = Modifier.fillMaxWidth(0.9f)
             )

app/src/main/java/ru/spbu/depnav/ui/map/MarkerView.kt

@@ -18,18 +18,18 @@
 
 package ru.spbu.depnav.ui.map
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Icon
 import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.ColorFilter
-import androidx.compose.ui.graphics.ColorMatrix
+import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.graphics.Shadow
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -51,9 +51,9 @@ fun MarkerView(
 ) = when (type) {
     MarkerType.ROOM -> if (simplified) {
         MarkerIcon(
-            painter = painterResource(R.drawable.key_emoji),
+            painter = painterResource(R.drawable.mrk_room),
             faded = isClosed,
-            contentDescription = "Room",
+            contentDescription = stringResource(R.string.label_room_icon),
             modifier = modifier
         )
     } else {
@@ -64,57 +64,57 @@ fun MarkerView(
         )
     }
     MarkerType.ENTRANCE -> MarkerIcon(
-        painter = painterResource(R.drawable.door_emoji),
+        painter = painterResource(R.drawable.mrk_entrance),
         faded = isClosed,
-        contentDescription = "Entrance",
+        contentDescription = stringResource(R.string.label_entrance_icon),
         modifier = modifier
     )
     MarkerType.STAIRS_UP -> MarkerIcon(
-        painter = painterResource(R.drawable.up_arrow_emoji),
+        painter = painterResource(R.drawable.mrk_stairs_up),
         faded = isClosed,
-        contentDescription = "Stairs up",
+        contentDescription = stringResource(R.string.label_stairs_up_icon),
         modifier = modifier
     )
     MarkerType.STAIRS_DOWN -> MarkerIcon(
-        painter = painterResource(R.drawable.down_arrow_emoji),
+        painter = painterResource(R.drawable.mrk_stairs_down),
         faded = isClosed,
-        contentDescription = "Stairs down",
+        contentDescription = stringResource(R.string.label_stairs_down_icon),
         modifier = modifier
     )
     MarkerType.STAIRS_BOTH -> MarkerIcon(
-        painter = painterResource(R.drawable.up_down_arrow_emoji),
+        painter = painterResource(R.drawable.mrk_stairs),
         faded = isClosed,
-        contentDescription = "Stairs up and down",
+        contentDescription = stringResource(R.string.label_stairs_both_icon),
         modifier = modifier
     )
     MarkerType.ELEVATOR -> MarkerIcon(
-        painter = painterResource(R.drawable.elevator_emoji),
+        painter = painterResource(R.drawable.mrk_elevator),
         faded = isClosed,
-        contentDescription = "Elevator",
+        contentDescription = stringResource(R.string.label_elevator_icon),
         modifier = modifier
     )
     MarkerType.WC_MAN -> MarkerIcon(
-        painter = painterResource(R.drawable.mens_room_emoji),
+        painter = painterResource(R.drawable.mrk_wc_man),
         faded = isClosed,
-        contentDescription = "Men's room",
+        contentDescription = stringResource(R.string.label_wc_man_icon),
         modifier = modifier
     )
     MarkerType.WC_WOMAN -> MarkerIcon(
-        painter = painterResource(R.drawable.womens_room_emoji),
+        painter = painterResource(R.drawable.mrk_wc_woman),
         faded = isClosed,
-        contentDescription = "Women's room",
+        contentDescription = stringResource(R.string.label_wc_woman_icon),
         modifier = modifier
     )
     MarkerType.WC -> MarkerIcon(
-        painter = painterResource(R.drawable.restroom_emoji),
+        painter = painterResource(R.drawable.mrk_wc),
         faded = isClosed,
-        contentDescription = "Restroom",
+        contentDescription = stringResource(R.string.label_wc_icon),
         modifier = modifier
     )
     MarkerType.OTHER -> MarkerIcon(
-        painter = painterResource(R.drawable.keycap_asterisk_emoji),
+        painter = painterResource(R.drawable.mrk_other),
         faded = isClosed,
-        contentDescription = "Other marker",
+        contentDescription = stringResource(R.string.label_other_icon),
         modifier = modifier
     )
 }
@@ -126,15 +126,13 @@ private fun MarkerIcon(
     contentDescription: String?,
     modifier: Modifier = Modifier
 ) {
-    Image(
+    Icon(
         painter = painter,
         contentDescription = contentDescription,
         modifier = Modifier
             .size(ICON_SIZE)
-            .then(modifier),
-        alpha = if (faded) 0.38f else 1f,
-        colorFilter = ColorFilter.colorMatrix(ColorMatrix().apply { setToSaturation(0f) })
-            .takeIf { faded }
+            .alpha(if (faded) 0.38f else 1f)
+            .then(modifier)
     )
 }
 

app/src/main/java/ru/spbu/depnav/ui/map/Pin.kt

@@ -18,12 +18,14 @@
 
 package ru.spbu.depnav.ui.map
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import ru.spbu.depnav.R
 
@@ -32,12 +34,13 @@ private val SIZE = 30.dp
 /** Pin for highlighting map markers. */
 @Composable
 fun Pin(modifier: Modifier = Modifier) {
-    Image(
-        painter = painterResource(id = R.drawable.round_pushpin_emoji),
-        contentDescription = "Pin",
+    Icon(
+        painter = painterResource(R.drawable.pin),
+        contentDescription = stringResource(R.string.label_selected_place),
         modifier = Modifier
             .size(SIZE)
             .offset(y = -SIZE / 2)
-            .then(modifier)
+            .then(modifier),
+        tint = MaterialTheme.colorScheme.primary
     )
 }

app/src/main/java/ru/spbu/depnav/ui/map/SettingsDialog.kt

@@ -33,6 +33,7 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.RadioButton
 import androidx.compose.material3.Switch
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -50,10 +51,13 @@ private val ADDITIONAL_START_PADDING = 4.dp
 /** Dialog with app settings. */
 @Composable
 fun SettingsDialog(prefs: PreferencesManager, onDismiss: () -> Unit) {
-    // TODO: replace with a custom dialog
     AlertDialog(
         onDismissRequest = onDismiss,
-        confirmButton = {},
+        confirmButton = {
+            TextButton(onClick = onDismiss) {
+                Text(stringResource(R.string.ok))
+            }
+        },
         title = { Text(stringResource(R.string.settings)) },
         text = {
             LazyColumn(