Add fake GUI elements

yvt · yvt · commit f843bcd85b34 · 2020-01-01T17:08:20.000+09:00
diff --git a/stella2/meta/lib.tcwdl b/stella2/meta/lib.tcwdl
@@ -41,6 +41,8 @@ comp crate::view::MainView {
         zoom = [Some(1), None][get!(&wnd_state).sidebar_visible as usize],
     };
 
+    // Sidebar
+    // -----------------------------------------------------------------------
     const sidebar_view_wrap = StyledBox::new! {
         style_manager,
         class_set = elem_id::SIDEBAR,
@@ -52,6 +54,8 @@ comp crate::view::MainView {
         text = "sidebar: todo!".to_string(),
     };
 
+    // The main area
+    // -----------------------------------------------------------------------
     const split_editor = Split::new! {
         style_manager,
         vertical = true,
@@ -61,6 +65,8 @@ comp crate::view::MainView {
         class_set = ClassSet::SPLITTER | ClassSet::VERTICAL | elem_id::EDITOR_SPLIT,
     };
 
+    // Chat log
+    // -----------------------------------------------------------------------
     const log_view_wrap = StyledBox::new! {
         style_manager,
         class_set = elem_id::LOG_VIEW,
@@ -72,15 +78,58 @@ comp crate::view::MainView {
         text = "log: todo!".to_string(),
     };
 
+    // Composing area
+    // -----------------------------------------------------------------------
     const editor_view_wrap = StyledBox::new! {
         style_manager,
         class_set = elem_id::EDITOR,
-        subview_generic = get!(editor_view.view),
+        subview_generic = get!(editor_view),
     };
-    const editor_view = PlaceholderView::new! {
-        wm,
+    const editor_view = HView::new! {
+        layout = TableLayout::stack_horz(
+            [
+                (get!(&editor_field.view), AlignFlags::JUSTIFY),
+                (get!(&spacer1.view), AlignFlags::HORZ_JUSTIFY),
+                (get!(&send_button.view), AlignFlags::HORZ_JUSTIFY | AlignFlags::TOP),
+            ]
+                .iter()
+                .map(|&(view, align)| (view.clone(), align))
+        ),
+    };
+
+    const editor_field = StyledBox::new! {
+        style_manager,
+        view_flags = {
+            // Make `set_cursor_shape` work
+            use tcw3::uicore::ViewFlags;
+            ViewFlags::default() | ViewFlags::ACCEPT_MOUSE_OVER
+        },
+        class_set = elem_id::EDITOR_FIELD,
+        subview_generic = HView::new! {
+            // Align the text to the upper-left corner
+            layout = TableLayout::stack_horz(
+                Some((get!(editor_placeholder.view), AlignFlags::TOP | AlignFlags::LEFT))
+            ),
+        },
+    };
+    const editor_placeholder = Label::new! {
         style_manager,
-        text = "editor: todo!".to_string(),
+        text = "Message #random",
+    };
+    on (init) {
+        // TODO: find a prettier way
+        get!(&editor_field).set_subelement(
+            tcw3::ui::theming::Role::Generic,
+            Some(get!(editor_placeholder.style_elem))
+        );
+        get!(&editor_field.view).set_cursor_shape(Some(tcw3::uicore::CursorShape::Text));
+    }
+
+    const spacer1 = FixedSpacer::new! { wm, size = [5.0, 0.0].into() };
+
+    const send_button = Button::new! {
+        style_manager,
+        caption = "Send",
     };
 
     on (init) get!(&this).init();
@@ -149,10 +198,28 @@ pub(crate) comp ToolbarView {
     on (go_forward_button.activated) dbg!();
 
     // TODO
-    const search_bar = PlaceholderView::new! {
-        wm,
+    const search_bar = StyledBox::new! {
+        style_manager,
+        view_flags = {
+            // Make `set_cursor_shape` work
+            use tcw3::uicore::ViewFlags;
+            ViewFlags::default() | ViewFlags::ACCEPT_MOUSE_OVER
+        },
+        class_set = elem_id::SEARCH_FIELD,
+        subview_generic = get!(search_bar_placeholder.view),
+    };
+    on (init) {
+        // TODO: find a prettier way
+        get!(&search_bar).set_subelement(
+            tcw3::ui::theming::Role::Generic,
+            Some(get!(search_bar_placeholder.style_elem))
+        );
+        get!(&search_bar.view).set_cursor_shape(Some(tcw3::uicore::CursorShape::Text));
+    }
+
+    const search_bar_placeholder = Label::new! {
         style_manager,
-        text = "search: todo!".to_string(),
+        text = "Search",
     };
 }
 
diff --git a/stella2/src/stylesheet.rs b/stella2/src/stylesheet.rs
@@ -1,7 +1,9 @@
+use cggeom::box2;
 use cgmath::Vector2;
 use stella2_assets as assets;
 use stvg_tcw3::StvgImg;
 use tcw3::{
+    images::himg_from_rounded_rect,
     stylesheet,
     ui::theming::{Manager, Metrics, Role, Stylesheet},
 };
@@ -16,24 +18,29 @@ pub mod elem_id {
                 , SIDEBAR_SHOW
                 , SIDEBAR_HIDE
 
+                , SEARCH_FIELD
+
                 , TOOLBAR
                 , SIDEBAR
                 , LOG_VIEW
                 , EDITOR
                 , EDITOR_SPLIT
+                , EDITOR_FIELD
     }
 }
 
 fn new_custom_stylesheet() -> impl Stylesheet {
+    use std::f32::NAN;
+
     // Import IDs (e.g., `#GO_BACK`) into the scope
     use self::elem_id::*;
 
     const TOOLBAR_IMG_SIZE: Vector2<f32> = Vector2::new(24.0, 16.0);
     const TOOLBAR_IMG_METRICS: Metrics = Metrics {
-        margin: [std::f32::NAN; 4],
+        margin: [NAN; 4],
         size: TOOLBAR_IMG_SIZE,
     };
-    const TOOLBAR_BTN_MIN_SIZE: Vector2<f32> = Vector2::new(30.0, 20.0);
+    const TOOLBAR_BTN_MIN_SIZE: Vector2<f32> = Vector2::new(30.0, 22.0);
 
     let himg_from_stvg = |data| StvgImg::new(data).into_himg();
 
@@ -116,6 +123,50 @@ fn new_custom_stylesheet() -> impl Stylesheet {
             layer_metrics[1]: TOOLBAR_IMG_METRICS,
             min_size: TOOLBAR_BTN_MIN_SIZE,
         },
+
+        // Toolbar elements
+        ([#SEARCH_FIELD]) (priority = 10000) {
+            num_layers: 2,
+
+            layer_img[0]: Some(
+                himg_from_rounded_rect([0.0, 0.0, 0.0, 0.2].into(), [[3.0; 2]; 4])
+            ),
+            layer_center[0]: box2! { point: [0.5, 0.5] },
+
+            layer_img[1]: Some(himg_from_stvg(assets::SEARCH)),
+            layer_metrics[1]: Metrics {
+                margin: [NAN, NAN, NAN, 4.0],
+                size: [16.0, 16.0].into(),
+            },
+
+            min_size: [150.0, TOOLBAR_BTN_MIN_SIZE.y].into(),
+
+            subview_metrics[Role::Generic]: Metrics {
+                margin: [2.0, 2.0, 2.0, 22.0],
+                ..Default::default()
+            },
+        },
+        ([.LABEL] < [#SEARCH_FIELD]) (priority = 10000) {
+            fg_color: [1.0, 1.0, 1.0, 0.6].into(),
+        },
+
+        // Composing area
+        ([#EDITOR_FIELD]) (priority = 10000) {
+            num_layers: 1,
+
+            layer_img[0]: Some(
+                himg_from_rounded_rect([1.0; 4].into(), [[3.0; 2]; 4])
+            ),
+            layer_center[0]: box2! { point: [0.5, 0.5] },
+
+            subview_metrics[Role::Generic]: Metrics {
+                margin: [3.0; 4],
+                ..Default::default()
+            },
+        },
+        ([.LABEL] < [#EDITOR_FIELD]) (priority = 10000) {
+            fg_color: [0.0, 0.0, 0.0, 0.4].into(),
+        },
     }
 }
 
diff --git a/stella2/src/view.rs b/stella2/src/view.rs
@@ -107,6 +107,7 @@ impl WndView {
         hwnd.content_view()
             .set_layout(FillLayout::new(main_view.view().clone()));
 
+        hwnd.set_caption("Stella 2");
         hwnd.set_listener(WndViewWndListener);
         hwnd.set_visibility(true);
 
diff --git a/stella2_assets/src/lib.rs b/stella2_assets/src/lib.rs
@@ -9,6 +9,8 @@ macro_rules! stvg {
     };
 }
 
+pub static SEARCH: Stvg = stvg!("src/search.svg");
+
 pub mod toolbar {
     use super::*;
 
diff --git a/stella2_assets/src/search.svg b/stella2_assets/src/search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.21 14.21"><title>search</title><circle cx="5.75" cy="5.75" r="5.25" style="fill:none;stroke:#fff;stroke-miterlimit:10"/><line x1="10" y1="10" x2="13.5" y2="13.5" style="fill:none;stroke:#fff;stroke-linecap:square;stroke-miterlimit:10"/></svg>

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,8 @@ macro_rules! stvg {`
`9`	`9`	`};`
`10`	`10`	`}`
`11`	`11`
	`12`	`+pub static SEARCH: Stvg = stvg!("src/search.svg");`
	`13`	`+`
`12`	`14`	`pub mod toolbar {`
`13`	`15`	`use super::*;`
`14`	`16`