app/menu: clone channel.rs header across screens, to match designs

bin/app/src/app/schema/chat.rs

@@ -54,8 +54,9 @@ use super::{ColorScheme, COLOR_SCHEME};
 mod android_ui_consts {
     pub const CHANNEL_LABEL_Y: f32 = 30.;
     pub const BACKARROW_SCALE: f32 = 30.;
-    pub const BACKARROW_X: f32 = 50.;
+    pub const BACKARROW_X: f32 = 70.;
     pub const BACKARROW_Y: f32 = 70.;
+    pub const BACKARROW_BG_W: f32 = 140.;
     pub const CHATEDIT_MIN_HEIGHT: f32 = 160.;
     pub const CHATEDIT_MAX_HEIGHT: f32 = 500.;
     pub const CHATEDIT_HEIGHT: f32 = 140.;
@@ -97,6 +98,7 @@ mod android_ui_consts {
     // Action menu
     pub const ACTION_PADDING: f32 = 32.;
     pub const ACTION_SPACING: f32 = 8.;
+    pub const BACK_SEP_W: f32 = 1.;
 }
 
 #[cfg(target_os = "android")]
@@ -118,7 +120,8 @@ mod ui_consts {
     pub const CHANNEL_LABEL_Y: f32 = 12.;
     pub const BACKARROW_SCALE: f32 = 15.;
     pub const BACKARROW_X: f32 = 38.;
-    pub const BACKARROW_Y: f32 = 26.;
+    pub const BACKARROW_Y: f32 = 30.;
+    pub const BACKARROW_BG_W: f32 = 80.;
     pub const CHATEDIT_MIN_HEIGHT: f32 = 60.;
     pub const CHATEDIT_MAX_HEIGHT: f32 = 600.;
     pub const CHATEDIT_HEIGHT: f32 = 60.;
@@ -160,6 +163,7 @@ mod ui_consts {
     // Action menu
     pub const ACTION_PADDING: f32 = 8.;
     pub const ACTION_SPACING: f32 = 4.;
+    pub const BACK_SEP_W: f32 = 0.5;
 }
 
 use super::EMOJI_PICKER_ICON_SIZE;
@@ -255,21 +259,28 @@ pub async fn make(
     node.set_property_u32(atom, Role::App, "z_index", 2).unwrap();
 
     let (bg_color, sep_color) = match COLOR_SCHEME {
-        ColorScheme::DarkMode => ([0., 0.11, 0.11, 1.], [0.41, 0.6, 0.65, 1.]),
+        ColorScheme::DarkMode => ([0., 0., 0., 1.], [0.41, 0.6, 0.65, 1.]),
         ColorScheme::PaperLight => ([1., 1., 1., 1.], [0., 0.6, 0.65, 1.]),
     };
     let mut shape = VectorShape::new();
     shape.add_filled_box(
         expr::const_f32(0.),
         expr::const_f32(0.),
-        expr::const_f32(EMOJI_BG_W),
+        expr::load_var("w"),
         expr::load_var("h"),
         bg_color,
     );
     shape.add_filled_box(
-        expr::const_f32(EMOJI_BG_W),
         expr::const_f32(0.),
-        expr::const_f32(EMOJI_BG_W + 1.),
+        expr::const_f32(0.),
+        expr::const_f32(BACKARROW_BG_W),
+        expr::load_var("h"),
+        [0.0, 0.106, 0.114, 1.0],
+    );
+    shape.add_filled_box(
+        expr::const_f32(BACKARROW_BG_W),
+        expr::const_f32(0.),
+        expr::const_f32(BACKARROW_BG_W + BACK_SEP_W),
         expr::load_var("h"),
         sep_color,
     );
@@ -277,13 +288,13 @@ pub async fn make(
         expr::const_f32(0.),
         expr::load_var("h"),
         expr::load_var("w"),
-        cc.compile("h + 1").unwrap(),
+        cc.compile("h + 0.5").unwrap(),
         sep_color,
     );
-    let color1 = [0., 0.17, 0.18, 0.3];
+    let color1 = [0., 0.17, 0.18, 0.5];
     let color2 = [0., 0.88, 1., 0.];
     shape.add_smooth_vertical_gradient(
-        expr::const_f32(EMOJI_BG_W + 1.),
+        expr::const_f32(BACKARROW_BG_W + 1.),
         expr::const_f32(0.),
         expr::load_var("w"),
         cc.compile("h / 2").unwrap(),
@@ -301,8 +312,8 @@ pub async fn make(
     let prop = node.get_property("rect").unwrap();
     prop.set_f32(atom, Role::App, 0, BACKARROW_X).unwrap();
     prop.set_f32(atom, Role::App, 1, BACKARROW_Y).unwrap();
-    prop.set_f32(atom, Role::App, 2, 500.).unwrap();
-    prop.set_f32(atom, Role::App, 3, 500.).unwrap();
+    prop.set_f32(atom, Role::App, 2, BACKARROW_SCALE).unwrap();
+    prop.set_f32(atom, Role::App, 3, BACKARROW_SCALE).unwrap();
     node.set_property_u32(atom, Role::App, "z_index", 3).unwrap();
 
     let shape = shape::create_back_arrow().scaled(BACKARROW_SCALE);
@@ -316,7 +327,7 @@ pub async fn make(
     let prop = node.get_property("rect").unwrap();
     prop.set_f32(atom, Role::App, 0, 0.).unwrap();
     prop.set_f32(atom, Role::App, 1, 0.).unwrap();
-    prop.set_f32(atom, Role::App, 2, EMOJI_BG_W).unwrap();
+    prop.set_f32(atom, Role::App, 2, BACKARROW_BG_W).unwrap();
     prop.set_f32(atom, Role::App, 3, CHATEDIT_HEIGHT).unwrap();
 
     // Menu doesn't exist yet ;)

bin/app/src/app/schema/menu/channel.rs

@@ -93,6 +93,7 @@ mod android_ui_consts {
     pub const COPY_SCALE: f32 = 35.;
     pub const COPY_BTN_SIZE: f32 = CHATEDIT_HEIGHT;
     pub const CONTENT_OUTLINE_SIZE: f32 = 0.5;
+    pub const BACK_SEP_W: f32 = 1.;
     pub const TAB_LABEL_X: f32 = 90.;
     pub const CHANNELS_TAB_ICON_GAP: f32 = 12.;
     pub const CONTACTS_TAB_ICON_GAP: f32 = 8.5;
@@ -140,12 +141,13 @@ mod ui_consts {
     pub const CONTENT_MARGIN: f32 = 15.;
     pub const BACKARROW_SCALE: f32 = 15.;
     pub const BACKARROW_X: f32 = 38.;
-    pub const BACKARROW_Y: f32 = 26.;
+    pub const BACKARROW_Y: f32 = 30.;
     pub const BACKARROW_BG_W: f32 = 80.;
     pub const COPY_WIDTH: f32 = 100.;
     pub const COPY_SCALE: f32 = 15.;
     pub const COPY_BTN_SIZE: f32 = CHATEDIT_HEIGHT;
     pub const CONTENT_OUTLINE_SIZE: f32 = 0.3;
+    pub const BACK_SEP_W: f32 = 0.5;
     pub const TAB_LABEL_X: f32 = 45.;
     pub const CHANNELS_TAB_ICON_GAP: f32 = 6.;
     pub const CONTACTS_TAB_ICON_GAP: f32 = 4.25;
@@ -224,19 +226,18 @@ pub async fn make(
     shape.add_filled_box(
         expr::const_f32(BACKARROW_BG_W),
         expr::const_f32(0.),
-        expr::const_f32(BACKARROW_BG_W + 1.),
+        expr::const_f32(BACKARROW_BG_W + BACK_SEP_W),
         expr::load_var("h"),
         sep_color,
     );
-    shape.add_outline(
+    shape.add_filled_box(
         expr::const_f32(0.),
         expr::load_var("h"),
         expr::load_var("w"),
-        cc.compile("h + 1").unwrap(),
-        CONTENT_OUTLINE_SIZE,
+        cc.compile("h + 0.5").unwrap(),
         sep_color,
     );
-    let color1 = [0., 0.17, 0.18, 0.3];
+    let color1 = [0., 0.17, 0.18, 0.5];
     let color2 = [0., 0.88, 1., 0.];
     shape.add_smooth_vertical_gradient(
         expr::const_f32(BACKARROW_BG_W + 1.),

bin/app/src/app/schema/menu/contact.rs

@@ -94,6 +94,7 @@ mod android_ui_consts {
     pub const COPY_SCALE: f32 = 35.;
     pub const COPY_BTN_SIZE: f32 = CHATEDIT_HEIGHT;
     pub const CONTENT_OUTLINE_SIZE: f32 = 0.5;
+    pub const BACK_SEP_W: f32 = 1.;
     pub const TAB_LABEL_X: f32 = 90.;
     pub const CHANNELS_TAB_ICON_GAP: f32 = 12.;
     pub const CONTACTS_TAB_ICON_GAP: f32 = 8.5;
@@ -141,12 +142,13 @@ mod ui_consts {
     pub const CONTENT_MARGIN: f32 = 15.;
     pub const BACKARROW_SCALE: f32 = 15.;
     pub const BACKARROW_X: f32 = 38.;
-    pub const BACKARROW_Y: f32 = 26.;
+    pub const BACKARROW_Y: f32 = 30.;
     pub const BACKARROW_BG_W: f32 = 80.;
     pub const COPY_WIDTH: f32 = 100.;
     pub const COPY_SCALE: f32 = 15.;
     pub const COPY_BTN_SIZE: f32 = CHATEDIT_HEIGHT;
     pub const CONTENT_OUTLINE_SIZE: f32 = 0.3;
+    pub const BACK_SEP_W: f32 = 0.5;
     pub const TAB_LABEL_X: f32 = 45.;
     pub const CHANNELS_TAB_ICON_GAP: f32 = 6.;
     pub const CONTACTS_TAB_ICON_GAP: f32 = 4.25;
@@ -225,19 +227,18 @@ pub async fn make(
     shape.add_filled_box(
         expr::const_f32(BACKARROW_BG_W),
         expr::const_f32(0.),
-        expr::const_f32(BACKARROW_BG_W + 1.),
+        expr::const_f32(BACKARROW_BG_W + BACK_SEP_W),
         expr::load_var("h"),
         sep_color,
     );
-    shape.add_outline(
+    shape.add_filled_box(
         expr::const_f32(0.),
         expr::load_var("h"),
         expr::load_var("w"),
-        cc.compile("h + 1").unwrap(),
-        CONTENT_OUTLINE_SIZE,
+        cc.compile("h + 0.5").unwrap(),
         sep_color,
     );
-    let color1 = [0., 0.17, 0.18, 0.3];
+    let color1 = [0., 0.17, 0.18, 0.5];
     let color2 = [0., 0.88, 1., 0.];
     shape.add_smooth_vertical_gradient(
         expr::const_f32(BACKARROW_BG_W + 1.),

bin/app/src/app/schema/menu/mod.rs

@@ -240,29 +240,35 @@ pub async fn make(
     node.set_property_u32(atom, Role::App, "z_index", 0).unwrap();
 
     let mut shape = VectorShape::new();
-    let x1 = expr::const_f32(0.);
-    let y1 = expr::const_f32(0.);
-    let x2 = expr::load_var("w");
-    let y2 = expr::const_f32(CHANNEL_HEADER_HEIGHT);
-    let (color1, color2) = match COLOR_SCHEME {
-        ColorScheme::DarkMode => ([0., 0.11, 0.11, 1.], [0., 0., 0., 1.]),
-        ColorScheme::PaperLight => ([1., 1., 1., 1.], [1., 1., 1., 1.]),
+    let (bg_color, sep_color) = match COLOR_SCHEME {
+        ColorScheme::DarkMode => ([0., 0., 0., 1.], [0.41, 0.6, 0.65, 1.]),
+        ColorScheme::PaperLight => ([1., 1., 1., 1.], [0., 0.6, 0.65, 1.]),
     };
-    let mut verts = vec![
-        ShapeVertex::new(x1.clone(), y1.clone(), color1),
-        ShapeVertex::new(x2.clone(), y1.clone(), color1),
-        ShapeVertex::new(x1.clone(), y2.clone(), color2),
-        ShapeVertex::new(x2, y2, color2),
-    ];
-    let mut indices = vec![0, 2, 1, 1, 2, 3];
-    shape.verts.append(&mut verts);
-    shape.indices.append(&mut indices);
     shape.add_filled_box(
         expr::const_f32(0.),
-        expr::const_f32(CHANNEL_HEADER_HEIGHT - 1.),
+        expr::const_f32(0.),
+        expr::load_var("w"),
+        expr::load_var("h"),
+        bg_color,
+    );
+    shape.add_filled_box(
+        expr::const_f32(0.),
+        expr::load_var("h"),
+        expr::load_var("w"),
+        cc.compile("h + 0.5").unwrap(),
+        sep_color,
+    );
+    let color1 = [0., 0.17, 0.18, 0.5];
+    let color2 = [0., 0.88, 1., 0.];
+    shape.add_smooth_vertical_gradient(
+        expr::const_f32(0.),
+        expr::const_f32(0.),
         expr::load_var("w"),
-        expr::const_f32(CHANNEL_HEADER_HEIGHT),
-        [0.15, 0.2, 0.19, 1.],
+        cc.compile("h / 2").unwrap(),
+        color1,
+        color2,
+        8,
+        0.2,
     );
 
     let node = node

bin/app/src/app/schema/wallet/data.rs

@@ -23,8 +23,9 @@ use darkfi_sdk::crypto::keypair::Address;
 #[cfg(any(target_os = "android", feature = "emulate-android"))]
 mod android_ui_consts {
     pub const BACKARROW_SCALE: f32 = 30.;
-    pub const BACKARROW_X: f32 = 50.;
+    pub const BACKARROW_X: f32 = 70.;
     pub const BACKARROW_Y: f32 = 70.;
+    pub const BACKARROW_BG_W: f32 = 140.;
     pub const TITLE_FONTSIZE: f32 = 56.;
     pub const BUTTON_FONTSIZE: f32 = 48.;
     pub const BASE_FONTSIZE: f32 = 48.;
@@ -43,6 +44,7 @@ mod android_ui_consts {
     pub const RECIPIENT_INPUT_HEIGHT: f32 = 120.;
     pub const RECIPIENT_INPUT_FONTSIZE: f32 = 48.;
     pub const HEADER_HEIGHT: f32 = 140.;
+    pub const BACK_SEP_W: f32 = 1.;
     pub const ROW_HEIGHT: f32 = 80.;
     pub const WALLET_BTN_SIZE: f32 = 50.;
     pub const COPY_WIDTH: f32 = 200.;
@@ -78,7 +80,8 @@ mod ui_consts {
 mod ui_consts {
     pub const BACKARROW_SCALE: f32 = 15.;
     pub const BACKARROW_X: f32 = 38.;
-    pub const BACKARROW_Y: f32 = 26.;
+    pub const BACKARROW_Y: f32 = 30.;
+    pub const BACKARROW_BG_W: f32 = 80.;
     pub const TITLE_FONTSIZE: f32 = 20.;
     pub const BUTTON_FONTSIZE: f32 = 20.;
     pub const BASE_FONTSIZE: f32 = 20.;
@@ -97,6 +100,7 @@ mod ui_consts {
     pub const RECIPIENT_INPUT_HEIGHT: f32 = 60.;
     pub const RECIPIENT_INPUT_FONTSIZE: f32 = 20.;
     pub const HEADER_HEIGHT: f32 = 60.;
+    pub const BACK_SEP_W: f32 = 0.5;
     pub const ROW_HEIGHT: f32 = 80.;
     pub const WALLET_BTN_SIZE: f32 = 50.;
     pub const COPY_WIDTH: f32 = 100.;

bin/app/src/app/schema/wallet/main.rs

@@ -74,6 +74,32 @@ pub async fn make(
 
     create_bg_mesh(app, atom, &main_layer, "wallet_bg").await;
     create_header_bg(app, atom, &main_layer, "wallet_header_bg").await;
+
+    // Back arrow
+    let node = create_vector_art("wallet_back_btn_bg");
+    let prop = node.get_property("rect").unwrap();
+    prop.set_f32(atom, Role::App, 0, BACKARROW_X).unwrap();
+    prop.set_f32(atom, Role::App, 1, BACKARROW_Y).unwrap();
+    prop.set_f32(atom, Role::App, 2, BACKARROW_SCALE).unwrap();
+    prop.set_f32(atom, Role::App, 3, BACKARROW_SCALE).unwrap();
+    node.set_property_u32(atom, Role::App, "z_index", 3).unwrap();
+    let arrow_shape = shape::create_back_arrow().scaled(BACKARROW_SCALE);
+    let node = node.setup(|me| VectorArt::new(me, arrow_shape, app.renderer.clone(), app.redraw_trigger.clone())).await;
+    main_layer.link(node);
+
+    // Back button
+    let node = create_button("wallet_back_btn");
+    node.set_property_bool(atom, Role::App, "is_active", true).unwrap();
+    node.set_property_u32(atom, Role::App, "z_index", 10).unwrap();
+    node.set_property_u32(atom, Role::App, "priority", 10).unwrap();
+    let prop = node.get_property("rect").unwrap();
+    prop.set_f32(atom, Role::App, 0, 0.).unwrap();
+    prop.set_f32(atom, Role::App, 1, 0.).unwrap();
+    prop.set_f32(atom, Role::App, 2, BACKARROW_BG_W).unwrap();
+    prop.set_f32(atom, Role::App, 3, HEADER_HEIGHT).unwrap();
+    let node = node.setup(|me| Button::new(me, app.renderer.clone(), app.redraw_trigger.clone())).await;
+    main_layer.link(node);
+
     create_chat_btn(app, atom, &cc, &main_layer).await;
 
     let mut y = HEADER_HEIGHT;

bin/app/src/app/schema/wallet/util.rs

@@ -281,25 +281,52 @@ pub async fn create_header_bg(
     node.set_property_u32(atom, Role::App, "z_index", 1).unwrap();
 
     let (bg_color, sep_color) = match COLOR_SCHEME {
-        ColorScheme::DarkMode => ([0., 0.11, 0.11, 1.], [0.2, 0.2745, 0.2784, 1.]),
+        ColorScheme::DarkMode => ([0., 0., 0., 1.], [0.41, 0.6, 0.65, 1.]),
         ColorScheme::PaperLight => ([1., 1., 1., 1.], [0., 0.6, 0.65, 1.]),
     };
 
+    let cc = Compiler::new();
     let mut shape = VectorShape::new();
     shape.add_filled_box(
         expr::const_f32(0.),
         expr::const_f32(0.),
         expr::load_var("w"),
-        expr::const_f32(HEADER_HEIGHT),
+        expr::load_var("h"),
         bg_color,
     );
     shape.add_filled_box(
         expr::const_f32(0.),
-        expr::const_f32(HEADER_HEIGHT - 1.),
+        expr::const_f32(0.),
+        expr::const_f32(BACKARROW_BG_W),
+        expr::load_var("h"),
+        [0.0, 0.106, 0.114, 1.0],
+    );
+    shape.add_filled_box(
+        expr::const_f32(BACKARROW_BG_W),
+        expr::const_f32(0.),
+        expr::const_f32(BACKARROW_BG_W + BACK_SEP_W),
+        expr::load_var("h"),
+        sep_color,
+    );
+    shape.add_filled_box(
+        expr::const_f32(0.),
+        expr::load_var("h"),
         expr::load_var("w"),
-        expr::const_f32(HEADER_HEIGHT),
+        cc.compile("h + 0.5").unwrap(),
         sep_color,
     );
+    let color1 = [0., 0.17, 0.18, 0.5];
+    let color2 = [0., 0.88, 1., 0.];
+    shape.add_smooth_vertical_gradient(
+        expr::const_f32(BACKARROW_BG_W + 1.),
+        expr::const_f32(0.),
+        expr::load_var("w"),
+        cc.compile("h / 2").unwrap(),
+        color1,
+        color2,
+        8,
+        0.2,
+    );
     let node = node
         .setup(|me| VectorArt::new(me, shape, app.renderer.clone(), app.redraw_trigger.clone()))
         .await;