N

src/app.rs

@@ -292,6 +292,7 @@ impl App {
 pub struct AppState {
     pub rooms_panel: RoomsPanelState,
     pub logged_in: bool,
+    pub verification_state: VerificationState,
 }
 
 #[derive(Default, Debug)]
@@ -305,3 +306,11 @@ pub struct SelectedRoom {
     pub name: Option<String>,
 }
 
+#[derive(Debug)]
+pub struct VerificationState(pub matrix_sdk::encryption::VerificationState);
+
+impl Default for VerificationState {
+    fn default() -> Self {
+        Self(matrix_sdk::encryption::VerificationState::Unknown)
+    }
+}

src/home/spaces_dock.rs

@@ -1,4 +1,8 @@
 use makepad_widgets::*;
+use matrix_sdk::encryption::VerificationState;
+
+use crate::verification::VerificationStateAction;
+use crate::app::AppState;
 
 live_design! {
     import makepad_widgets::base::*;
@@ -8,6 +12,7 @@ live_design! {
     import crate::shared::styles::*;
     import crate::shared::helpers::*;
     import crate::shared::adaptive_view::AdaptiveView;
+    import crate::shared::verification_icon::*;
 
     ICON_HOME = dep("crate://self/resources/icons/home.svg")
     ICON_SETTINGS = dep("crate://self/resources/icons/settings.svg")
@@ -16,37 +21,81 @@ live_design! {
         height: Fill, width: Fill
     }
 
-    Profile = <View> {
-        width: Fit, height: Fit
-        align: { x: 0.5, y: 0.5 }
-
-        text_view = <View> {
-            width: 45., height: 45.,
+    Profile = {{Profile}} {
+            flow: Overlay
+            width: Fit, height: Fit
             align: { x: 0.5, y: 0.5 }
-            show_bg: true,
 
-            draw_bg: {
-                instance background_color: (COLOR_AVATAR_BG_IDLE),
-                fn pixel(self) -> vec4 {
-                    let sdf = Sdf2d::viewport(self.pos * self.rect_size);
-                    let c = self.rect_size * 0.5;
-                    sdf.circle(c.x, c.x, c.x)
-                    sdf.fill_keep(self.background_color);
-                    return sdf.result
+            text_view = <View> {
+                flow: Overlay
+                width: 60, height: 60,
+                align: { x: 0.5, y: 0.5 }
+                show_bg: true,
+                draw_bg: {
+                    instance background_color: (COLOR_AVATAR_BG_IDLE),
+                    fn pixel(self) -> vec4 {
+                        let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+
+                        //The center of the circle we are going to draw.
+                        let c = self.rect_size * 0.5;
+
+                        //The radius of the circle
+                        let r = self.rect_size * 0.38;
+
+                        //We just keeping the center position of sdf fixed, which is equal to center of the cisrcle,
+                        //while reducing the circle's radius.
+                        sdf.circle(c.x, c.x, r.x);
+                        sdf.fill_keep(self.background_color);
+                        return sdf.result
+                    }
+                }
+
+                text = <Label> {
+                    width: Fit, height: Fit,
+                    padding: { top: 1.0 } // for better vertical alignment
+                    draw_text: {
+                        text_style: { font_size: 13. }
+                        color: #f,
+                    }
+                    text: "U"
+                }
+            }
+            <View> {
+                align: {x: 0.999, y: 0.001}
+                flow: Overlay
+
+                verification_icon = <View> {
+                    align:{x: 0.5, y: 0.5}
+                    width: 31, height: 31
+                    icon_yes = <IconYes> {
+                        visible: false
+                    }
+                    icon_no = <IconNo> {
+                        visible: false
+                    }
+                    icon_unk = <IconUnk> {
+                        visible: false
+                    }
                 }
             }
+            verification_notice = <View> {
+                visible: false
+                align: { x: 0.5, y: 0.5 }
+                width: Fit, height: Fit
+                show_bg: true
+                draw_bg: {
+                    color: #0000008F
+                }
 
-            text = <Label> {
-                width: Fit, height: Fit,
-                padding: { top: 1.0 } // for better vertical alignment
-                draw_text: {
-                    text_style: { font_size: 13. }
-                    color: #f,
+                txt = <Label> {
+                    draw_text: {
+                        color: #FFFFFF
+                        text_style:  { font_size: (SMALL_STATE_FONT_SIZE) }
+                    }
+                    text: ""
                 }
-                text: "U"
             }
         }
-    }
 
     Separator = <LineH> {
         margin: {left: 15, right: 15}
@@ -118,7 +167,7 @@ live_design! {
             <Separator> {}
 
             <Home> {}
-            
+
             <Filler> {}
 
             <Settings> {}
@@ -137,16 +186,79 @@ live_design! {
             <Filler> {}
 
             <Profile> {}
-    
+
             <Filler> {}
-    
+
             <Home> {}
-            
+
             <Filler> {}
-    
+
             <Settings> {}
-    
+
             <Filler> {}
         }
     }
 }
+
+#[derive(Live, LiveHook, Widget)]
+pub struct Profile {
+    #[deref]
+    view: View,
+    #[rust(VerificationState::Unknown)]
+    verification_state: VerificationState,
+}
+
+impl Widget for Profile {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        if let Event::MouseMove(e) = event {
+            if self.view(id!(verification_icon)).area().rect(cx).contains(e.abs) {
+                let text = match self.verification_state {
+                    VerificationState::Unknown => {"Unknown"},
+                    VerificationState::Unverified => {"Unverified"},
+                    VerificationState::Verified => {"Verified"}
+                };
+                log!("7777{}", text);
+                self.view(id!(verification_notice)).set_visible_and_redraw(cx, true);
+                self.label(id!(verification_notice.txt)).set_text_and_redraw(cx, text);
+            } else {
+                self.view(id!(verification_notice)).set_visible_and_redraw(cx, false)
+            }
+        } else {
+        }
+        self.view.handle_event(cx, event, scope)
+    }
+
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        let app_state = scope.data.get_mut::<AppState>().unwrap();
+
+        if self.verification_state == app_state.verification_state.0 {
+            log!("8888{:?}", app_state.verification_state.0);
+        }
+        else {
+            self.verification_state = app_state.verification_state.0;
+
+            // Update visibility states
+            let (yes_visible, no_visible, unk_visible) = match app_state.verification_state.0 {
+                VerificationState::Unknown => (false, false, true),
+                VerificationState::Unverified => (false, true, false),
+                VerificationState::Verified => (true, false, false),
+           };
+
+
+            self.view(id!(icon_yes)).set_visible(yes_visible);
+            self.view(id!(icon_no)).set_visible(no_visible);
+            self.view(id!(icon_unk)).set_visible(unk_visible);
+
+            self.redraw(cx);
+        }
+
+        self.view.draw_walk(cx, scope, walk)
+    }
+}
+impl MatchEvent for Profile {
+    fn handle_action(&mut self, _cx: &mut Cx, action:&Action) {
+        if let Some(VerificationStateAction::Update(state)) = action.downcast_ref() {
+            self.verification_state = *state
+        }
+    }
+}

src/shared/mod.rs

@@ -12,6 +12,7 @@ pub mod search_bar;
 pub mod styles;
 pub mod text_or_image;
 pub mod typing_animation;
+pub mod verification_icon;
 
 pub fn live_design(cx: &mut Cx) {
     // Order matters here, as some widget definitions depend on others.
@@ -27,4 +28,5 @@ pub fn live_design(cx: &mut Cx) {
     cached_widget::live_design(cx);
     typing_animation::live_design(cx);
     jump_to_bottom_button::live_design(cx);
+    verification_icon::live_design(cx);
 }

src/shared/verification_icon.rs

@@ -0,0 +1,42 @@
+use makepad_widgets::*;
+
+live_design! {
+    import makepad_widgets::base::*;
+    import makepad_widgets::theme_desktop_dark::*;
+    import makepad_draw::shader::std::*;
+
+    import crate::shared::styles::*;
+
+    VERIFICATION_YES = dep("crate://self/resources/icons/verification_yes.svg")
+    VERIFICATION_NO = dep("crate://self/resources/icons/verification_no.svg")
+    VERIFICATION_UNK = dep("crate://self/resources/icons/verification_unk.svg")
+
+    VerificationIcon = <Icon> {
+        icon_walk: {width: 23}
+    }
+
+    IconYES = <VerificationIcon> {
+            draw_icon: {
+                svg_file: (VERIFICATION_YES),
+                fn get_color(self) -> vec4 {
+                    return #x00BF00;
+                }
+            }
+    }
+    IconNo = <VerificationIcon> {
+            draw_icon: {
+                svg_file: (VERIFICATION_NO),
+                fn get_color(self) -> vec4 {
+                    return #xBF0000;
+                }
+            }
+    }
+    IconUnk = <VerificationIcon> {
+            draw_icon: {
+                svg_file: (VERIFICATION_UNK),
+                fn get_color(self) -> vec4 {
+                    return #x333333;
+                }
+            }
+    }
+}