chore: improve the FlashCard UI

nvh0412 · Feb 25, 2024 · 1aa527e · 1aa527e
1 parent dbdf79f
commit 1aa527e
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 56 deletions.
diff --git a/src/components/deck/deck_list.rs b/src/components/deck/deck_list.rs
@@ -1,6 +1,6 @@
 use gpui::{
-    div, AnyView, InteractiveElement, IntoElement, ParentElement, Render, RenderOnce, Styled, View,
-    VisualContext, WindowContext,
+    div, green, yellow, AnyView, InteractiveElement, IntoElement, ParentElement, Render,
+    RenderOnce, Styled, View, VisualContext, WindowContext,
 };
 use rusqlite::Connection;
 
@@ -38,37 +38,41 @@ impl Render for DeckListView {
     fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> impl gpui::prelude::IntoElement {
         let theme = cx.global::<Theme>();
 
-        div().size_full().flex().justify_center().child(
-            div()
-                .mt_20()
-                .border_1()
-                .border_color(theme.crust)
-                .rounded_xl()
-                .text_color(theme.text)
-                .p_3()
-                .child(
-                    div()
-                        .flex()
-                        .flex_row()
-                        .text_sm()
-                        .child(div().px_2().min_w_80().child(format!("Deck")))
-                        .child(div().min_w_20().flex().justify_center().child("New"))
-                        .child(div().min_w_20().flex().justify_center().child("Learn"))
-                        .child(div().min_w_20().flex().justify_center().child("Due"))
-                        .pb_2()
-                        .border_b_1()
-                        .border_color(theme.crust)
-                        .mb_2(),
-                )
-                .children(
-                    self.get_all_decks()
-                        .into_iter()
-                        .map(|deck| {
-                            let deck_id = deck.id.unwrap();
-                            HocListItem::init(cx.new_view(|_| ListItem::new(deck)).into(), deck_id)
-                        })
-                        .collect::<Vec<_>>(),
-                ),
+        div().flex().size_full().justify_center().child(
+            div().mt_20().child(
+                div()
+                    .border_1()
+                    .border_color(theme.crust)
+                    .rounded_xl()
+                    .text_color(theme.text)
+                    .p_3()
+                    .child(
+                        div()
+                            .flex()
+                            .flex_row()
+                            .text_sm()
+                            .child(div().px_2().min_w_80().child(format!("Deck")))
+                            .child(div().min_w_20().flex().justify_center().child("New"))
+                            .child(div().min_w_20().flex().justify_center().child("Learn"))
+                            .child(div().min_w_20().flex().justify_center().child("Due"))
+                            .pb_2()
+                            .border_b_1()
+                            .border_color(theme.crust)
+                            .mb_2(),
+                    )
+                    .children(
+                        self.get_all_decks()
+                            .into_iter()
+                            .map(|deck| {
+                                let deck_id = deck.id.unwrap();
+                                HocListItem::init(
+                                    cx.new_view(|_| ListItem::new(deck)).into(),
+                                    deck_id,
+                                )
+                            })
+                            .collect::<Vec<_>>(),
+                    ),
+            ),
         )
     }
 }

diff --git a/src/components/deck/flash_card.rs b/src/components/deck/flash_card.rs
@@ -1,9 +1,11 @@
 use gpui::{
-    div, green, AnyView, FontWeight, IntoElement, ParentElement, Pixels, Render, Styled,
+    div, green, yellow, AnyView, FontWeight, IntoElement, ParentElement, Pixels, Render, Styled,
     ViewContext, VisualContext, WindowContext,
 };
 
-use crate::{repositories::flash_card, state::StackableView, theme::Theme};
+use crate::{
+    repositories::flash_card, state::StackableView, theme::Theme, ui::button::button::Button,
+};
 
 pub struct FlashCard {
     cards: Vec<flash_card::FlashCard>,
@@ -21,28 +23,42 @@ impl Render for FlashCard {
 
         let card = self.cards.first().unwrap();
 
-        div()
-            .flex()
-            .w_full()
-            .flex_col()
-            .pt_20()
-            .text_color(theme.text)
-            .justify_center()
-            .items_center()
-            .child(
+        div().flex().size_full().justify_center().child(
+            div().mt_20().child(
                 div()
-                    .max_w(Pixels(500.0))
+                    .flex()
+                    .w_full()
+                    .flex_col()
+                    .text_color(theme.text)
+                    .relative()
+                    .h_full()
                     .child(
                         div()
-                            .text_xl()
-                            .font_weight(FontWeight::EXTRA_BOLD)
-                            .pb_5()
-                            .border_b_1()
-                            .border_color(theme.crust)
-                            .child(card.get_question().to_string()),
+                            .w(Pixels(500.0))
+                            .child(
+                                div()
+                                    .text_xl()
+                                    .font_weight(FontWeight::EXTRA_BOLD)
+                                    .pb_5()
+                                    .border_b_1()
+                                    .border_color(theme.crust)
+                                    .child(card.get_question().to_string()),
+                            )
+                            .child(div().pt_5().text_xl().child(card.get_answer().to_string())),
                     )
-                    .child(div().pt_5().text_xl().child(card.get_answer().to_string())),
-            )
+                    .child(
+                        div().absolute().bottom_16().max_w(Pixels(500.0)).child(
+                            div()
+                                .flex()
+                                .justify_between()
+                                .child(div().child(Button::new("again", "Again")))
+                                .child(div().child(Button::new("easy", "Easy")))
+                                .child(div().child(Button::new("good", "Good")))
+                                .child(div().child(Button::new("hard", "Hard"))),
+                        ),
+                    ),
+            ),
+        )
     }
 }
 

diff --git a/src/ngurra.rs b/src/ngurra.rs
@@ -39,10 +39,9 @@ impl Render for Ngurra {
                     .justify_center()
                     .child(
                         div()
-                            .max_w(Pixels(800.0))
+                            .w(Pixels(800.0))
                             .h_full()
-                            .min_w(Pixels(800.0))
-                            .child(div().child(current_view.view.clone())),
+                            .child(current_view.view.clone()),
                     ),
             )
             .child(