refactor: implements navigation header in compose

Author: kelsos

app/src/main/java/com/kelsos/mbrc/NavigationActivity.kt

@@ -78,15 +78,15 @@ class NavigationActivity : AppCompatActivity() {
     @ColorRes val colorId: Int
     when (connectionStatus) {
       ConnectionStatus.Off -> {
-        resId = R.string.drawer_connection_status_off
+        resId = R.string.drawer__connection__off
         colorId = R.color.black
       }
       ConnectionStatus.On -> {
-        resId = R.string.drawer_connection_status_on
+        resId = R.string.drawer__connection__on
         colorId = R.color.accent
       }
       ConnectionStatus.Active -> {
-        resId = R.string.drawer_connection_status_active
+        resId = R.string.drawer__connection__active
         colorId = R.color.power_on
       }
     }

app/src/main/java/com/kelsos/mbrc/app/AppDrawer.kt

@@ -1,15 +1,22 @@
 package com.kelsos.mbrc.app
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 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.shape.CircleShape
 import androidx.compose.material.Divider
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Surface
 import androidx.compose.material.Text
@@ -19,6 +26,7 @@ import androidx.compose.material.icons.filled.Close
 import androidx.compose.material.icons.filled.Help
 import androidx.compose.material.icons.filled.Home
 import androidx.compose.material.icons.filled.LibraryMusic
+import androidx.compose.material.icons.filled.PowerSettingsNew
 import androidx.compose.material.icons.filled.QueueMusic
 import androidx.compose.material.icons.filled.Radio
 import androidx.compose.material.icons.filled.Settings
@@ -28,22 +36,32 @@ import androidx.compose.material.icons.filled.ViewList
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.kelsos.mbrc.R
+import com.kelsos.mbrc.networking.connections.ConnectionStatus
+import com.kelsos.mbrc.theme.Accent
+import com.kelsos.mbrc.theme.Connected
+import com.kelsos.mbrc.theme.Primary
 import com.kelsos.mbrc.theme.RemoteTheme
 
 @Composable
 fun AppDrawer(
   currentRoute: String,
   navigateTo: (destination: Destination) -> Unit,
-  closeDrawer: () -> Unit
+  connection: ConnectionStatus,
+  onConnect: () -> Unit,
+  exitApp: () -> Unit
 ) {
   Column(modifier = Modifier.fillMaxSize()) {
+    AppHeader(connection, onConnect)
     DrawerButton(
       icon = Icons.Filled.Home,
       label = stringResource(id = R.string.nav_home),
@@ -115,7 +133,7 @@ fun AppDrawer(
       icon = Icons.Filled.Close,
       label = stringResource(id = R.string.nav_exit),
       isSelected = false,
-      action = { TODO("implement exit") }
+      action = { exitApp() }
     )
   }
 }
@@ -179,10 +197,82 @@ private fun DrawerButton(
   }
 }
 
+@Composable
+fun AppHeader(connection: ConnectionStatus, onConnect: () -> Unit) {
+  Surface(
+    color = Color.Transparent,
+    modifier = Modifier
+      .fillMaxWidth()
+      .height(128.dp)
+      .background(Primary)
+      .padding(16.dp)
+  ) {
+    Row(
+      horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+      Column(
+        modifier = Modifier
+          .align(Alignment.CenterVertically)
+      ) {
+        Image(
+          painter = painterResource(id = R.mipmap.ic_launcher),
+          contentDescription = null,
+          contentScale = ContentScale.Inside,
+          modifier = Modifier
+            .size(56.dp)
+            .clip(CircleShape)
+            .background(Color.White)
+            .border(1.dp, Color.Black, CircleShape)
+        )
+      }
+      Column(
+        modifier = Modifier
+          .align(Alignment.CenterVertically)
+      ) {
+        val color = when (connection) {
+          ConnectionStatus.Active -> Connected
+          ConnectionStatus.Off -> Color.Black
+          ConnectionStatus.On -> Accent
+        }
+
+        IconButton(
+          onClick = { onConnect() },
+          modifier = Modifier
+            .clip(CircleShape)
+            .background(Color.LightGray)
+            .border(1.dp, Color.DarkGray, CircleShape)
+        ) {
+          Icon(
+            imageVector = Icons.Filled.PowerSettingsNew,
+            tint = color,
+            contentDescription = stringResource(id = R.string.drawer__connect__content)
+          )
+        }
+      }
+    }
+    Row(
+      horizontalArrangement = Arrangement.End,
+      verticalAlignment = Alignment.Bottom
+    ) {
+      ConnectionLabel(connection = connection)
+    }
+  }
+}
+
+@Composable
+fun ConnectionLabel(connection: ConnectionStatus) {
+  val textId = when (connection) {
+    ConnectionStatus.Active -> R.string.drawer__connection__active
+    ConnectionStatus.Off -> R.string.drawer__connection__off
+    ConnectionStatus.On -> R.string.drawer__connection__on
+  }
+  Text(text = stringResource(id = textId), style = MaterialTheme.typography.subtitle2)
+}
+
 @Preview
 @Composable
 fun RemoteDrawerPreview() {
   RemoteTheme {
-    AppDrawer(Destination.Home.route, {}, {})
+    AppDrawer(Destination.Home.route, {}, ConnectionStatus.Active, {}, {})
   }
 }

app/src/main/java/com/kelsos/mbrc/theme/Color.kt

@@ -5,3 +5,6 @@ import androidx.compose.ui.graphics.Color
 val Primary = Color(0xffff9800)
 val PrimaryDark = Color(0xffe65100)
 val Accent = Color(0xffff5722)
+val PrimaryLight = Color(0xffffecb3)
+val LightGray = Color(0xffbdbdbd)
+val Connected = Color(0xff33a328)

app/src/main/res/values/strings.xml

@@ -22,9 +22,9 @@
   <string name="alert_invalid_port_number">The valid port range is from 1 to 65535</string>
   <string name="now_playing_search">Search</string>
   <string name="preferences_open_source">open_source</string>
-  <string name="drawer_connection_status_off">Offline</string>
-  <string name="drawer_connection_status_on">Authenticating</string>
-  <string name="drawer_connection_status_active">Connected</string>
+  <string name="drawer__connection__off">Offline</string>
+  <string name="drawer__connection__on">Authenticating</string>
+  <string name="drawer__connection__active">Connected</string>
   <string name="settings_dialog_hint_name">Computer name</string>
   <string name="settings_dialog_hint_host">Hostname / IP</string>
   <string name="settings_dialog_hint_port">Port number</string>
@@ -193,4 +193,5 @@
   <string name="library_album_tracks__title">%1$s by %2$s</string>
   <string name="library__action_only_album_artists">Display only album artists</string>
   <string name="library_details__empty_content">Placeholder image for an empty list</string>
+  <string name="drawer__connect__content">Connect to the plugin</string>
 </resources>