android, desktop: new user picker (#4796)

* user picker as modal * android dirty layout * color mode switcher * close picker on desktop opening modals * cleanup * remote hosts working * icon buttons * profile picker modal for external shares * remove stroke * color changes * add unread badge to users row * chat database settings section * safe remove of you settings section * picker should now open for single user * remove create profile from settings * paddings * handle big names * fonts and align * simple animations and shadow * address messaging * active is grey * padding * hide non active devices from pills * picker positioning * pills order * change view all profiles icon * bigger space between profiles * hosts ordering and fixes * device pill in app bar * simplex address -> public * better switch of opacity bg * create public address * font match * add icon for dark mode * padding * profile name as header * h2 is too big * icon colors * icons * settings as modal * center settings * fix use from desktop * remove logs * bar colors * remove drawer unused code * animate shading * fade in fade out * add system mode toast * shading colors * stop pushing shade up * same button as ios for opening all profiles * simplify nav bar color set * broken transition change * color mix * gradient and horizontal scroll * separate title * align avatars to top * picker should always remain open * use chevron icon to see all profiles * improvements on status and nav color set * best case bars switching working * change bar and shading on theme change * remove unused var * reset navbar colors on navigate * updated icon color * protect android calls * desktop menu matching size of right side modals * remove shading from desktop * close user picker on settings click in desktop * bigger profile image smaller gap to name * fix spacer for row scroll on android * smaller profile name * remove unused code * small refactor * unused * move desktop/mobile connection * close drawer on swipe down 30% * progress dump on new android design * paddings in scroller * gradient * android paddings * split inactive user picker between platforms * move your chat profiles inside android specific * always show your chat profiles in desktop * fix profile creation in desktop * remove unused var * update android space between badges * initial desktop design * center android icons with avatar * centered avatars * unread badge * extra space in the end of user list for android * aligned paddings on desktop * desktop paddings * paddings * remove you * unread badge same style as chatlist * use bedtime moon for dark mode * chevron same size as sun/moon * chevron and gradient * paddings * split android and desktop scaffold for picker * move bars logic to android * remove android check * more android checks * initial version of swipable modal * muted as grey * unused * close drawer on 3/4 * better close control * make all animations match * move shadow with offset * always close pciker on selection * animated float doing nothing * sync animation * animation using single float * fixed warnings * better state update * fix scrim color * better handling of picker closure on desktop * landscape mode * intentation * rename UserPickerScaffold * hide shadow when picker not open * reset inactive user scroll position on pick * unused class * left panel after new menu can be without padding * small changes * make ActiveProfilePicker reusable to reduce code duplication * make picker scrollable * refactor * refactor and fix instant reload of profiles * refactor * icon sizes * returned back ability to scroll to the picker on Android * setting system theme on desktop's right click * box * refactor * picker pill * fix desktop shadow * small change * hiding keyboard when opening picker * state specifying --------- Co-authored-by: Evgeny Poberezkin <evgeny@poberezkin.com> Co-authored-by: Avently <7953703+avently@users.noreply.github.com>
2024-12-17 17:20:21 +01:00 · 2024-09-11 15:51:28 +01:00
parent 1a853d4eea
commit acf2f1fbbe
23 changed files with 945 additions and 501 deletions
@@ -0,0 +1,86 @@
+package chat.simplex.common.views.chatlist
+
+import androidx.compose.animation.*
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import chat.simplex.common.model.User
+import chat.simplex.common.model.UserInfo
+import chat.simplex.common.platform.*
+import chat.simplex.common.ui.theme.*
+import chat.simplex.common.views.helpers.*
+import chat.simplex.res.MR
+import dev.icerock.moko.resources.compose.painterResource
+import dev.icerock.moko.resources.compose.stringResource
+import kotlinx.coroutines.flow.MutableStateFlow
+
+@Composable
+actual fun UserPickerInactiveUsersSection(
+  users: List<UserInfo>,
+  stopped: Boolean,
+  onShowAllProfilesClicked: () -> Unit,
+  onUserClicked: (user: User) -> Unit,
+) {
+  if (users.isNotEmpty()) {
+    val userRows = users.chunked(5)
+    val rowsToDisplay = if (userRows.size > 2) 2 else userRows.size
+    val horizontalPadding = DEFAULT_PADDING_HALF + 8.dp
+
+    Column(Modifier
+      .padding(horizontal = horizontalPadding, vertical = DEFAULT_PADDING_HALF)
+      .height(55.dp * rowsToDisplay + (if (rowsToDisplay > 1) DEFAULT_PADDING else 0.dp))
+    ) {
+      ColumnWithScrollBar(
+        verticalArrangement = Arrangement.spacedBy(DEFAULT_PADDING)
+      ) {
+        val spaceBetween = (((DEFAULT_START_MODAL_WIDTH * fontSizeSqrtMultiplier) - (horizontalPadding)) - (55.dp * 5)) / 5
+
+        userRows.forEach { row ->
+          Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.spacedBy(spaceBetween),
+          ) {
+            row.forEach { u ->
+              UserPickerInactiveUserBadge(u, stopped, size = 55.dp) {
+                onUserClicked(u.user)
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  UserPickerOptionRow(
+    painterResource(MR.images.ic_manage_accounts),
+    stringResource(MR.strings.your_chat_profiles),
+    onShowAllProfilesClicked
+  )
+}
+
+@Composable
+actual fun PlatformUserPicker(modifier: Modifier, pickerState: MutableStateFlow<AnimatedViewState>, content: @Composable () -> Unit) {
+  AnimatedVisibility(
+    visible = pickerState.value.isVisible(),
+    enter = fadeIn(),
+    exit = fadeOut()
+  ) {
+    Box(
+      Modifier
+        .fillMaxSize()
+        .clickable(interactionSource = remember { MutableInteractionSource() }, indication = null, onClick = { pickerState.value = AnimatedViewState.HIDING }),
+      contentAlignment = Alignment.TopStart
+    ) {
+      ColumnWithScrollBar(modifier) {
+        content()
+      }
+    }
+  }
+}