🚧 First design template for ConversationOptionsMenu

src/ui/components/conversations.rs

@@ -436,7 +436,60 @@ pub fn Search() -> Element {
     }
 }
 
+#[component]
+fn ConversationOptionsMenu(room_id: RoomId, on_close: EventHandler) -> Element {
+    rsx! {
+        div {
+            class: ClassName::CONVERSATION_OPTIONS_MENU,
+
+            div {
+                class: ClassName::CONVERSATION_OPTIONS_MENU_INNER,
+
+                div {
+                    class: ClassName::CONVERSATION_OPTIONS_MENU_INNER_AVATAR,
+                }
+
+                div {
+                    class: ClassName::CONVERSATION_OPTIONS_MENU_INNER_NAME,
+                }
+
+                div {
+                    class: ClassName::CONVERSATION_OPTIONS_MENU_INNER_TOPIC,
+                }
+
+                div {
+                    class: ClassName::CONVERSATION_OPTIONS_MENU_INNER_CONFIG,
+                }
+
+                div {
+                    class: ClassName::CONVERSATION_OPTIONS_MENU_INNER_CLOSE_BUTTON,
+                    RejectButton {
+                        onclick: move |_| on_close(()),
+                    }
+                }
+
+                div {
+                    class: ClassName::CONVERSATION_OPTIONS_MENU_INNER_JOIN_BUTTON,
+                    JoinButton {
+                        onclick: move |_| on_close(()),
+                    }
+                }
+            }
+        }
+    }
+}
+
 pub fn Conversations() -> Element {
+    let mut conversation_options_menu = use_signal(|| None::<Element>);
+
+    let on_conversation_options_menu_close = move |_| {
+        conversation_options_menu.set(None);
+    };
+
+    let on_pressed_conversation = move |room_id: RoomId| {
+        conversation_options_menu.set(Some(rsx! { ConversationOptionsMenu { room_id, on_close: on_conversation_options_menu_close } }));
+    };
+
     rsx! {
         style { {STYLE_SHEET} },
 
@@ -450,13 +503,14 @@ pub fn Conversations() -> Element {
 
             div {
                 class: ClassName::CONVERSATIONS_SPACES,
-                Spaces {},
+                Spaces { on_pressed_conversation },
             },
 
             div {
                 class: ClassName::CONVERSATIONS_SEARCH,
                 Search {},
             },
-        }
+        },
+        {conversation_options_menu}
     }
 }

src/ui/components/conversations.scss

@@ -10,6 +10,10 @@
     }
 }
 
+@mixin extra-marged-button() {
+    @include button-class();
+}
+
 .account {
     $colum-spacing: 5%;
     $col-width: 8.75%;
@@ -89,10 +93,6 @@
         grid-area: status;
     }
 
-    @mixin extra-marged-button() {
-        @include button-class();
-    }
-
     &__spaces {
         grid-area: spaces;
 
@@ -284,22 +284,107 @@
     $account-height: 15%;
     $search-height: 5%;
 
-    display: flex;
+    display: grid;
-    flex-direction: column;
+    grid-template-columns: auto;
-    justify-content: space-between;
+    grid-template-rows: min($account-height, 384px) $gap auto $gap min($search-height, 128px);
-    gap: $gap;
+    grid-template-areas:
+        "account"
+        "."
+        "spaces"
+        "."
+        "search"
+    ;
 
     &__account {
-        height: $account-height;
+        grid-area: account;
-        max-height: 384px;
     }
 
     &__spaces {
-        min-height: calc(100% - $account-height - $search-height - (2 * $gap));
+        grid-area: spaces;
     }
 
     &__search {
-        height: $search-height;
+        grid-area: search;
-        max-height: 128px;
+    }
+
+    &__menu {
+        grid-area: spaces;
+        z-index: 1;
+    }
+}
+
+.conversation-options-menu {
+    width: 100%;
+    height: 100%;
+
+    position: relative;
+    top: -100%;
+    margin-bottom: calc(-100% / $aspect-ratio);
+
+    border-radius: $border-radius;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background: rgba(0, 0, 0, 0.5);
+
+    &__inner {
+        $padding: 5%;
+        // TODO: Thin border
+        @include panel($padding, $padding);
+
+        width: 95%;
+        height: 60%;
+
+        display: grid;
+        grid-template-columns: 10% 10% 5% 15% 20% 10% 20% 10%;
+        grid-template-rows: 7.5% 7.5% 5% 5% auto 5% 10%;
+        grid-template-areas:
+            "avatar avatar . name name name name name"
+            "avatar avatar . topic topic topic topic topic"
+            "avatar avatar . . . . . ."
+            ". . . . . . . ."
+            "config config config config config config config config"
+            ". . . . . . . ."
+            ". close close close . join join ."
+        ;
+
+        &__avatar {
+            grid-area: avatar;
+
+            width: 100%;
+            aspect-ratio: 1;
+
+            background-color: green;
+        }
+
+        &__name {
+            grid-area: name;
+            background-color: orange;
+        }
+
+        &__topic {
+            grid-area: topic;
+            background-color: aqua;
+        }
+
+        &__config {
+            grid-area: config;
+            background-color: purple;
+        }
+
+        button {
+            height: 100%;
+            width: 100%;
+        }
+
+        &__close-button {
+            grid-area: close;
+         }
+
+        &__join-button {
+            grid-area: join;
+        }
     }
 }