Add Logo

libraries/ui/screens/login/src/main/java/io/element/android/x/ui/screen/login/LoginActivity.kt

@@ -4,14 +4,14 @@ import android.app.Activity
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.Image
-import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.*
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.dp
@@ -38,14 +38,23 @@ class LoginActivity : ComponentActivity() {
                         .padding(16.dp),
                     color = MaterialTheme.colorScheme.background
                 ) {
+                    Box(modifier = Modifier.fillMaxSize()) {
                         Column(
-                        modifier = Modifier.fillMaxSize()
+                            modifier = Modifier.fillMaxSize(),
                         ) {
                             val viewModel: LoginViewModel = mavericksViewModel()
                             val state by viewModel.collectAsState()
                             val isError = state.isLoggedIn is Fail
+                            Image(
+                                painterResource(id = R.drawable.element_logo_green),
+                                contentDescription = null,
+                                modifier = Modifier
+                                    .align(Alignment.CenterHorizontally)
+                                    .padding(40.dp)
+                            )
                             OutlinedTextField(
                                 value = state.homeserver,
+                                modifier = Modifier.fillMaxWidth(),
                                 onValueChange = {
                                     viewModel.handle(LoginActions.SetHomeserver(it))
                                 },
@@ -55,6 +64,9 @@ class LoginActivity : ComponentActivity() {
                             )
                             OutlinedTextField(
                                 value = state.login,
+                                modifier = Modifier
+                                    .fillMaxWidth()
+                                    .padding(top = 8.dp),
                                 onValueChange = {
                                     viewModel.handle(LoginActions.SetLogin(it))
                                 },
@@ -64,6 +76,9 @@ class LoginActivity : ComponentActivity() {
                             )
                             OutlinedTextField(
                                 value = state.password,
+                                modifier = Modifier
+                                    .fillMaxWidth()
+                                    .padding(top = 8.dp),
                                 onValueChange = {
                                     viewModel.handle(LoginActions.SetPassword(it))
                                 },
@@ -87,7 +102,9 @@ class LoginActivity : ComponentActivity() {
                                     viewModel.handle(LoginActions.Submit)
                                 },
                                 enabled = state.submitEnabled,
-                            modifier = Modifier.align(Alignment.End)
+                                modifier = Modifier
+                                    .align(Alignment.End)
+                                    .padding(top = 16.dp)
                             )
                             if (state.isLoggedIn is Loading) {
                                 // FIXME This does not work, we never enter this if block
@@ -103,6 +120,7 @@ class LoginActivity : ComponentActivity() {
                 }
             }
         }
+    }
 
     private fun openRoomList() {
         setResult(Activity.RESULT_OK)

libraries/ui/screens/login/src/main/res/drawable/element_logo_green.xml

@@ -0,0 +1,22 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="64dp"
+    android:height="64dp"
+    android:viewportWidth="64"
+    android:viewportHeight="64">
+  <path
+      android:pathData="M23.04,3.84C23.04,1.7192 24.7593,0 26.88,0C41.0185,0 52.48,11.4615 52.48,25.6C52.48,27.7208 50.7608,29.44 48.64,29.44C46.5193,29.44 44.8,27.7208 44.8,25.6C44.8,15.7031 36.777,7.68 26.88,7.68C24.7593,7.68 23.04,5.9608 23.04,3.84Z"
+      android:fillColor="#0DBD8B"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M40.96,60.16C40.96,62.2808 39.2407,64 37.12,64C22.9815,64 11.52,52.5385 11.52,38.4C11.52,36.2792 13.2392,34.56 15.36,34.56C17.4807,34.56 19.2,36.2792 19.2,38.4C19.2,48.2969 27.223,56.32 37.12,56.32C39.2407,56.32 40.96,58.0392 40.96,60.16Z"
+      android:fillColor="#0DBD8B"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M3.84,40.96C1.7192,40.96 -0,39.2407 -0,37.12C-0,22.9815 11.4615,11.52 25.6,11.52C27.7208,11.52 29.44,13.2392 29.44,15.36C29.44,17.4807 27.7208,19.2 25.6,19.2C15.7031,19.2 7.68,27.223 7.68,37.12C7.68,39.2407 5.9608,40.96 3.84,40.96Z"
+      android:fillColor="#0DBD8B"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M60.16,23.04C62.2808,23.04 64,24.7593 64,26.88C64,41.0185 52.5385,52.48 38.4,52.48C36.2792,52.48 34.56,50.7608 34.56,48.64C34.56,46.5193 36.2792,44.8 38.4,44.8C48.2969,44.8 56.32,36.777 56.32,26.88C56.32,24.7593 58.0392,23.04 60.16,23.04Z"
+      android:fillColor="#0DBD8B"
+      android:fillType="evenOdd"/>
+</vector>

libraries/ui/screens/roomlist/src/main/java/io/element/android/x/ui/screen/roomlist/RoomListActivity.kt

@@ -1,21 +1,29 @@
 package io.element.android.x.ui.screen.roomlist
 
 import android.os.Bundle
+import android.widget.Toast
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ExitToApp
 import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.unit.dp
 import coil.compose.rememberAsyncImagePainter
 import com.airbnb.mvrx.Success
 import com.airbnb.mvrx.compose.collectAsState
 import com.airbnb.mvrx.compose.mavericksViewModel
 import io.element.android.x.ui.theme.ElementXTheme
+import org.matrix.rustcomponents.sdk.Room
 
 class RoomListActivity : ComponentActivity() {
 
@@ -45,8 +53,16 @@ class RoomListActivity : ComponentActivity() {
                         OptionMenu(state.value.user, viewModel)
                         val rooms = state.value.rooms
                         if (rooms is Success) {
-                            rooms().forEach {
+                            LazyColumn {
-                                Text(text = "Room: ${it.name() ?: it.id()}")
+                                items(rooms()) { room ->
+                                    RoomCompose(room) {
+                                        Toast.makeText(
+                                            this@RoomListActivity,
+                                            "Room $it clicked!",
+                                            Toast.LENGTH_SHORT
+                                        ).show()
+                                    }
+                                }
                             }
                         }
                     }
@@ -58,6 +74,31 @@ class RoomListActivity : ComponentActivity() {
         }
     }
 
+    @Composable
+    private fun RoomCompose(room: Room, onClick: (String) -> Unit) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .clickable { onClick.invoke(room.id()) },
+        ) {
+            Image(
+                painter = rememberAsyncImagePainter(model = room.avatarUrl()),
+                contentDescription = null,
+                modifier = Modifier.size(32.dp),
+            )
+            Spacer(modifier = Modifier.width(8.dp))
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(32.dp),
+            ) {
+                Text(text = "Room: ${room.name() ?: room.id()}")
+                Text(text = if (room.isDirect()) "Direct" else "Room")
+            }
+
+        }
+    }
+
     @OptIn(ExperimentalMaterial3Api::class)
     @Composable
     private fun OptionMenu(matrixUser: MatrixUser, viewModel: RoomListViewModel) {
@@ -69,8 +110,12 @@ class RoomListActivity : ComponentActivity() {
                     Image(
                         painter = rememberAsyncImagePainter(matrixUser.avatarUrl),
                         contentDescription = null,
-                        modifier = Modifier.size(48.dp)
+                        modifier = Modifier
+                            .size(48.dp)
+                            .clip(CircleShape)
+                            .border(1.5.dp, MaterialTheme.colorScheme.primary, CircleShape)
                     )
+                    Spacer(modifier = Modifier.width(8.dp))
                     Text("${matrixUser.username}")
                 }
             },