Merge pull request #940 from kevinaboos/file_upload_improvements

Improve File Upload Modal to look quite a bit nicer

Author: kevinaboos

Cargo.lock

@@ -17,8 +17,8 @@ metadata.makepad-auto-version = "zqpv-Yj-K7WNVK2I8h5Okhho46Q="
 # makepad-widgets = { git = "https://github.com/makepad/makepad", branch = "dev", features = ["serde"] }
 # makepad-code-editor = { git = "https://github.com/makepad/makepad", branch = "dev" }
 
-makepad-widgets = { git = "https://github.com/kevinaboos/makepad", branch = "ime_composition_preview", features = ["serde"] }
-makepad-code-editor = { git = "https://github.com/kevinaboos/makepad", branch = "ime_composition_preview" }
+makepad-widgets = { git = "https://github.com/kevinaboos/makepad", branch = "code_editor_fix", features = ["serde"] }
+makepad-code-editor = { git = "https://github.com/kevinaboos/makepad", branch = "code_editor_fix" }
 
 
 ## Including this crate automatically configures all `robius-*` crates to work with Makepad.

Cargo.toml

@@ -21,7 +21,7 @@ use crate::{
         VerificationModalWidgetRefExt,
     }
 };
-use crate::shared::file_upload_modal::{FileUploadModalWidgetRefExt, FilePreviewerAction};
+use crate::shared::file_upload_modal::{FileUploadModalWidgetRefExt, FileUploadModalAction};
 
 script_mod! {
     use mod.prelude.widgets.*
@@ -298,19 +298,12 @@ impl MatchEvent for App {
                 // which will open the login_status_modal to show the failure message.
             }
 
-            // Handle file upload modal actions
-            match action.downcast_ref() {
-                Some(FilePreviewerAction::Show { upload }) => {
-                    self.ui.file_upload_modal(cx, ids!(file_upload_modal.content))
-                        .set_upload(cx, upload.clone());
-                    self.ui.modal(cx, ids!(file_upload_modal)).open(cx);
-                    continue;
-                }
-                Some(FilePreviewerAction::Hide) => {
-                    self.ui.modal(cx, ids!(file_upload_modal)).close(cx);
-                    continue;
-                }
-                _ => {}
+            // Handle actions for the file upload modal.
+            if let Some(action) = action.downcast_ref::<FileUploadModalAction>() {
+                let outer_modal = self.ui.modal(cx, ids!(file_upload_modal));
+                self.ui.file_upload_modal(cx, ids!(file_upload_modal.content))
+                    .handle_file_previewer_action(cx, outer_modal, action);
+                continue;
             }
 
             // Handle an action requesting to open the new message context menu.

src/app.rs

@@ -179,37 +179,14 @@ script_mod! {
             // align the left side of the border frame with the left side of the room id / event id rows
             padding: 6
 
-            // The code editor content (drawn first, behind the overlay)
-            code_view := mod.widgets.CodeView {
+            // The code editor content (drawn first, behind the overlay).
+            code_view := mod.widgets.LightCodeView {
                 editor +: {
                     margin: 12,
                     width: Fill,
-                    height: Fit,
+                    height: Fit { max: 1500 }
                     word_wrap: true
-                    draw_bg +: { color: (COLOR_TRANSPARENT) }
                     draw_text +: { text_style +: { font_size: 11 } }
-
-                    // Light mode syntax highlighting (inspired by GitHub Light / VS Code Light+)
-                    token_colors +: {
-                        whitespace: #x6a737d,         // Gray for whitespace markers
-                        delimiter: #x24292e,          // Dark gray for punctuation
-                        delimiter_highlight: #x005cc5, // Blue for highlighted delimiters
-                        error_decoration: #xcb2431,   // Red for errors
-                        warning_decoration: #xb08800, // Dark yellow/amber for warnings
-
-                        unknown: #x24292e,            // Default dark text
-                        branch_keyword: #xd73a49,     // Red/pink for keywords (if, else, match)
-                        constant: #x005cc5,           // Blue for constants
-                        identifier: #x24292e,         // Dark gray for variables
-                        loop_keyword: #xd73a49,       // Red/pink for loop keywords
-                        number: #x005cc5,             // Blue for numbers
-                        other_keyword: #xd73a49,      // Red/pink for other keywords
-                        punctuator: #x24292e,         // Dark gray for punctuation
-                        string: #x22863a,             // Green for strings
-                        function: #x6f42c1,           // Purple for functions
-                        typename: #xe36209,           // Orange for types
-                        comment: #x6a737d,            // Gray for comments
-                    }
                 }
                 text: "<Unknown Event Source>"
             }

src/home/event_source_modal.rs

@@ -22,7 +22,7 @@ use matrix_sdk::room::reply::{EnforceThread, Reply};
 use ruma::events::room::message::AddMentions;
 use matrix_sdk_ui::timeline::{EmbeddedEvent, EventTimelineItem, TimelineEventItemId};
 use ruma::{events::room::message::{LocationMessageEventContent, MessageType, ReplyWithinThread, RoomMessageEventContent}, OwnedEventId, OwnedRoomId};
-use crate::{home::{editing_pane::{EditingPaneState, EditingPaneWidgetExt, EditingPaneWidgetRefExt}, location_preview::{LocationPreviewWidgetExt, LocationPreviewWidgetRefExt}, room_screen::{MessageAction, RoomScreenProps, populate_preview_of_timeline_item}, tombstone_footer::{SuccessorRoomDetails, TombstoneFooterWidgetExt}, upload_progress::UploadProgressViewWidgetRefExt}, location::init_location_subscriber, settings::app_preferences::{AppPreferencesAction, AppPreferencesGlobal}, shared::{avatar::AvatarWidgetRefExt, file_upload_modal::{AttachmentUpload, FilePreviewerAction, FileUploadAttemptId, load_selected_file}, html_or_plaintext::HtmlOrPlaintextWidgetRefExt, mentionable_text_input::MentionableTextInputWidgetExt, popup_list::{PopupKind, enqueue_popup_notification}, room_input_popup_menu::RoomInputPopupMenuAction, styles::*}, sliding_sync::{MatrixRequest, TimelineKind, UserPowerLevels, submit_async_request}, utils};
+use crate::{home::{editing_pane::{EditingPaneState, EditingPaneWidgetExt, EditingPaneWidgetRefExt}, location_preview::{LocationPreviewWidgetExt, LocationPreviewWidgetRefExt}, room_screen::{MessageAction, RoomScreenProps, populate_preview_of_timeline_item}, tombstone_footer::{SuccessorRoomDetails, TombstoneFooterWidgetExt}, upload_progress::UploadProgressViewWidgetRefExt}, location::init_location_subscriber, settings::app_preferences::{AppPreferencesAction, AppPreferencesGlobal}, shared::{avatar::AvatarWidgetRefExt, file_upload_modal::{AttachmentUpload, FileUploadModalAction, FileUploadAttemptId, PreviewPayload, load_file_metadata}, html_or_plaintext::HtmlOrPlaintextWidgetRefExt, mentionable_text_input::MentionableTextInputWidgetExt, popup_list::{PopupKind, enqueue_popup_notification}, room_input_popup_menu::RoomInputPopupMenuAction, styles::*}, sliding_sync::{MatrixRequest, TimelineKind, UserPowerLevels, submit_async_request}, utils};
 
 script_mod! {
     use mod.prelude.widgets.*
@@ -694,15 +694,23 @@ impl RoomInputBar {
             match result {
                 Ok(Some(picked)) => match picked.into_local_file() {
                     Ok(local_file) => {
-                        let loaded = load_selected_file(
+                        match load_file_metadata(
                             local_file,
                             timeline_kind,
                             in_reply_to,
                             #[cfg(feature = "tsp")]
                             sign_with_tsp,
-                        );
-                        match loaded {
-                            Ok(upload) => Cx::post_action(FilePreviewerAction::Show { upload }),
+                        ) {
+                            Ok((upload, preview_source, preview_id)) => {
+                                // Show the preview modal instantly, and then re-use this bg thread
+                                // to read the file and generate the preview.
+                                Cx::post_action(FileUploadModalAction::Show { upload, preview_id });
+                                let preview = preview_source.build();
+                                Cx::post_action(FileUploadModalAction::PreviewReady {
+                                    preview_id,
+                                    preview: PreviewPayload::new(preview),
+                                });
+                            }
                             Err(e) => enqueue_popup_notification(e, PopupKind::Error, None),
                         }
                     }