Abstract modal into Portal.

src/app.rs

@@ -9,7 +9,7 @@ use crate::shared::actions::{ChatAction, DownloadAction};
 use crate::shared::download_notification_popup::{
     DownloadNotificationPopupWidgetRefExt, DownloadResult, PopupAction,
 };
-use crate::shared::modal::ModalWidgetRefExt;
+use crate::shared::portal::PortalWidgetRefExt;
 use makepad_widgets::*;
 
 live_design! {
@@ -18,6 +18,7 @@ live_design! {
     import makepad_draw::shader::std::*;
 
     import crate::shared::styles::*;
+    import crate::shared::portal::*;
     import crate::shared::modal::*;
     import crate::shared::widgets::SidebarMenuButton;
     import crate::shared::download_notification_popup::DownloadNotificationPopup;
@@ -98,40 +99,34 @@ live_design! {
                     }
                 }
 
-                modal_root = <Modal> {
-                    model_card_view_all_modal_view = <ModalView> {
-                        content = {
-                            model_card_view_all_modal = <ModelCardViewAllModal> {}
+                portal_root = <Portal> {
+                    modal_model_card_view_all_portal_view = <PortalView> {
+                        modal = <Modal> {
+                            content = {
+                                model_card_view_all_modal = <ModelCardViewAllModal> {}
+                            }
                         }
                     }
 
-                    delete_model_modal_view = <ModalView> {
-                        content = {
-                            delete_model_modal = <DeleteModelModal> {}
+                    modal_delete_model_portal_view = <PortalView> {
+                        modal = <Modal> {
+                            content = {
+                                delete_model_modal = <DeleteModelModal> {}
+                            }
                         }
                     }
 
-                    model_info_modal_view = <ModalView> {
-                        content = {
-                            model_info_modal = <ModelInfoModal> {}
+                    modal_model_info_portal_view = <PortalView> {
+                        modal = <Modal> {
+                            content = {
+                                model_info_modal = <ModelInfoModal> {}
+                            }
                         }
                     }
 
-                    popup_download_success_modal_view = <ModalView> {
+                    popup_download_success_portal_view = <PortalView> {
                         align: {x: 1, y: 0}
-
-                        // TODO: By setting this on Fit we dissable the closing on click outside of modal
-                        // functionallity. We need to rethink the Modal widget so its more generic,
-                        // kinda like a portal that lets you render stuff from anywhere, for now
-                        // we use it as is, with this little hack.
-                        bg_view = {
-                            width: Fit
-                            height: Fit
-                            show_bg: false
-                        }
-                        content = {
-                            popup_download_success = <DownloadNotificationPopup> {}
-                        }
+                        popup_download_success = <DownloadNotificationPopup> {}
                     }
                 }
             }
@@ -187,7 +182,7 @@ impl MatchEvent for App {
             .selected_to_visible(
                 cx,
                 &self.ui,
-                &actions,
+                actions,
                 ids!(
                     application_pages.discover_frame,
                     application_pages.chat_frame,
@@ -302,8 +297,8 @@ impl App {
                 }
             }
 
-            let mut modal = self.ui.modal(id!(modal_root));
-            let _ = modal.show_modal_view_by_id(cx, live_id!(popup_download_success_modal_view));
+            let mut portal = self.ui.portal(id!(portal_root));
+            let _ = portal.show_portal_view_by_id(cx, live_id!(popup_download_success_portal_view));
         }
     }
 }

src/landing/model_card.rs

@@ -1,6 +1,6 @@
 use crate::data::store::{ModelWithDownloadInfo, Store};
 use crate::shared::external_link::ExternalLinkWidgetExt;
-use crate::shared::modal::ModalAction;
+use crate::shared::portal::PortalAction;
 use crate::shared::utils::hugging_face_model_url;
 use chrono::Utc;
 use makepad_widgets::*;
@@ -410,7 +410,7 @@ impl WidgetMatchEvent for ModelCard {
             cx.widget_action(
                 widget_uid,
                 &scope.path,
-                ModalAction::ShowModalView(live_id!(model_card_view_all_modal_view)),
+                PortalAction::ShowPortalView(live_id!(modal_model_card_view_all_portal_view)),
             );
 
             cx.widget_action(
@@ -446,7 +446,11 @@ impl Widget for ModelCardViewAllModal {
 
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
         let store = scope.data.get::<Store>().unwrap();
-        let model = store.search.models.iter().find(|model| model.id == self.model_id);
+        let model = store
+            .search
+            .models
+            .iter()
+            .find(|model| model.id == self.model_id);
 
         if let Some(model) = model {
             let name = &model.name;
@@ -467,7 +471,7 @@ impl WidgetMatchEvent for ModelCardViewAllModal {
 
         if let Some(fe) = self.view(id!(close_button)).finger_up(actions) {
             if fe.was_tap() {
-                cx.widget_action(widget_uid, &scope.path, ModalAction::CloseModal);
+                cx.widget_action(widget_uid, &scope.path, PortalAction::Close);
             }
         }
     }

src/my_models/delete_model_modal.rs

@@ -1,7 +1,7 @@
 use makepad_widgets::*;
 use moxin_protocol::data::FileID;
 
-use crate::{chat::chat_panel::ChatPanelAction, data::store::Store, shared::modal::ModalAction};
+use crate::{chat::chat_panel::ChatPanelAction, data::store::Store, shared::portal::PortalAction};
 
 live_design! {
     import makepad_widgets::base::*;
@@ -158,7 +158,12 @@ impl Widget for DeleteModelModal {
     }
 
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
-        let downloaded_files = &scope.data.get::<Store>().unwrap().downloads.downloaded_files;
+        let downloaded_files = &scope
+            .data
+            .get::<Store>()
+            .unwrap()
+            .downloads
+            .downloaded_files;
 
         let downloaded_file = downloaded_files
             .iter()
@@ -183,7 +188,7 @@ impl WidgetMatchEvent for DeleteModelModal {
 
         if let Some(fe) = self.view(id!(close_button)).finger_up(actions) {
             if fe.was_tap() {
-                cx.widget_action(widget_uid, &scope.path, ModalAction::CloseModal);
+                cx.widget_action(widget_uid, &scope.path, PortalAction::Close);
             }
         }
 
@@ -201,7 +206,7 @@ impl WidgetMatchEvent for DeleteModelModal {
                 store
                     .delete_file(self.file_id.clone())
                     .expect("Failed to delete file");
-                cx.widget_action(widget_uid, &scope.path, ModalAction::CloseModal);
+                cx.widget_action(widget_uid, &scope.path, PortalAction::Close);
             }
         }
 
@@ -210,7 +215,7 @@ impl WidgetMatchEvent for DeleteModelModal {
             .finger_up(actions)
         {
             if fe.was_tap() {
-                cx.widget_action(widget_uid, &scope.path, ModalAction::CloseModal);
+                cx.widget_action(widget_uid, &scope.path, PortalAction::Close);
             }
         }
     }

src/my_models/downloaded_files_row.rs

@@ -2,8 +2,8 @@ use makepad_widgets::*;
 use moxin_protocol::data::{DownloadedFile, FileID};
 
 use crate::my_models::{delete_model_modal::DeleteModelAction, model_info_modal::ModelInfoAction};
-use crate::shared::{actions::ChatAction, modal::ModalAction};
 use crate::shared::utils::format_model_size;
+use crate::shared::{actions::ChatAction, portal::PortalAction};
 
 live_design! {
     import makepad_widgets::base::*;
@@ -230,13 +230,15 @@ impl Widget for DownloadedFilesRow {
             .set_text(&parameters);
 
         // Version tag
-        let filename = format!("{}/{}", downloaded_file.model.name, downloaded_file.file.name);
+        let filename = format!(
+            "{}/{}",
+            downloaded_file.model.name, downloaded_file.file.name
+        );
         self.label(id!(h_wrapper.model_file.model_version_tag.version))
             .set_text(&filename);
 
         // File size tag
-        let file_size =
-            format_model_size(&downloaded_file.file.size).unwrap_or("-".to_string());
+        let file_size = format_model_size(&downloaded_file.file.size).unwrap_or("-".to_string());
         self.label(id!(h_wrapper.file_size_tag.file_size))
             .set_text(&file_size);
 
@@ -245,8 +247,10 @@ impl Widget for DownloadedFilesRow {
         self.label(id!(h_wrapper.date_added_tag.date_added))
             .set_text(&formatted_date);
 
-        self.button(id!(start_chat_button)).set_visible(!props.show_resume);
-        self.button(id!(resume_chat_button)).set_visible(props.show_resume);
+        self.button(id!(start_chat_button))
+            .set_visible(!props.show_resume);
+        self.button(id!(resume_chat_button))
+            .set_visible(props.show_resume);
 
         self.view.draw_walk(cx, scope, walk)
     }
@@ -258,21 +262,13 @@ impl WidgetMatchEvent for DownloadedFilesRow {
 
         if self.button(id!(start_chat_button)).clicked(actions) {
             if let Some(file_id) = &self.file_id {
-                cx.widget_action(
-                    widget_uid,
-                    &scope.path,
-                    ChatAction::Start(file_id.clone()),
-                );
+                cx.widget_action(widget_uid, &scope.path, ChatAction::Start(file_id.clone()));
             }
         }
 
         if self.button(id!(resume_chat_button)).clicked(actions) {
             if let Some(file_id) = &self.file_id {
-                cx.widget_action(
-                    widget_uid,
-                    &scope.path,
-                    ChatAction::Resume(file_id.clone()),
-                );
+                cx.widget_action(widget_uid, &scope.path, ChatAction::Resume(file_id.clone()));
             }
         }
 
@@ -286,7 +282,7 @@ impl WidgetMatchEvent for DownloadedFilesRow {
                 cx.widget_action(
                     widget_uid,
                     &scope.path,
-                    ModalAction::ShowModalView(live_id!(model_info_modal_view)),
+                    PortalAction::ShowPortalView(live_id!(modal_model_info_portal_view)),
                 );
             }
         }
@@ -301,7 +297,7 @@ impl WidgetMatchEvent for DownloadedFilesRow {
                 cx.widget_action(
                     widget_uid,
                     &scope.path,
-                    ModalAction::ShowModalView(live_id!(delete_model_modal_view)),
+                    PortalAction::ShowPortalView(live_id!(modal_delete_model_portal_view)),
                 );
             }
         }

src/my_models/model_info_modal.rs

@@ -1,6 +1,6 @@
 use crate::{
     data::store::Store,
-    shared::{modal::ModalAction, utils::hugging_face_model_url},
+    shared::{portal::PortalAction, utils::hugging_face_model_url},
 };
 use makepad_widgets::*;
 use moxin_protocol::data::{FileID, ModelID};
@@ -234,7 +234,7 @@ impl WidgetMatchEvent for ModelInfoModal {
 
         if let Some(fe) = self.view(id!(close_button)).finger_up(actions) {
             if fe.was_tap() {
-                cx.widget_action(widget_uid, &scope.path, ModalAction::CloseModal);
+                cx.widget_action(widget_uid, &scope.path, PortalAction::Close);
             }
         }
 

src/shared/download_notification_popup.rs

@@ -3,7 +3,7 @@ use moxin_protocol::data::{File, FileID};
 
 use crate::shared::actions::DownloadAction;
 
-use super::modal::ModalAction;
+use super::portal::PortalAction;
 
 live_design! {
     import makepad_widgets::base::*;
@@ -243,7 +243,7 @@ impl WidgetMatchEvent for DownloadNotificationPopup {
 
         if let Some(fe) = self.view(id!(close_button)).finger_up(actions) {
             if fe.was_tap() {
-                cx.widget_action(widget_uid, &scope.path, ModalAction::CloseModal);
+                cx.widget_action(widget_uid, &scope.path, PortalAction::Close);
             }
         }
 
@@ -253,7 +253,7 @@ impl WidgetMatchEvent for DownloadNotificationPopup {
         {
             // TODO: Abstract the navigation actions on a single enum for the whole app.
             cx.widget_action(widget_uid, &scope.path, PopupAction::NavigateToMyModels);
-            cx.widget_action(widget_uid, &scope.path, ModalAction::CloseModal);
+            cx.widget_action(widget_uid, &scope.path, PortalAction::Close);
         }
 
         if self.link_label(id!(retry_link)).clicked(actions) {
@@ -263,7 +263,7 @@ impl WidgetMatchEvent for DownloadNotificationPopup {
                 &scope.path,
                 DownloadAction::Play(file_id.clone()),
             );
-            cx.widget_action(widget_uid, &scope.path, ModalAction::CloseModal);
+            cx.widget_action(widget_uid, &scope.path, PortalAction::Close);
         }
 
         if self.link_label(id!(cancel_link)).clicked(actions) {
@@ -273,7 +273,7 @@ impl WidgetMatchEvent for DownloadNotificationPopup {
                 &scope.path,
                 DownloadAction::Cancel(file_id.clone()),
             );
-            cx.widget_action(widget_uid, &scope.path, ModalAction::CloseModal);
+            cx.widget_action(widget_uid, &scope.path, PortalAction::Close);
         }
     }
 }

src/shared/mod.rs

@@ -1,10 +1,11 @@
 use makepad_widgets::Cx;
 
 pub mod actions;
+pub mod download_notification_popup;
 pub mod external_link;
 pub mod icon;
+pub mod portal;
 pub mod modal;
-pub mod download_notification_popup;
 pub mod resource_imports;
 pub mod styles;
 pub mod utils;
@@ -15,6 +16,7 @@ pub fn live_design(cx: &mut Cx) {
     resource_imports::live_design(cx);
     widgets::live_design(cx);
     icon::live_design(cx);
+    portal::live_design(cx);
     modal::live_design(cx);
     external_link::live_design(cx);
     download_notification_popup::live_design(cx);