-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add
TextOrImage widget that can be used to display an image or text (…
…#47) * Use this widget to display "fetching image..." while an image is being fetched, and also for displaying an error if the image fails to load. * This allows us to use the same DSL widget view for image messages regardless of whether they can be successfully displayed or not. * This simplifies caching of widgets both internal and external to a timeline's portallist, which will be implemented in an upcoming PR. * Change `MediaCache` functions to always return a `MediaCacheEntry`, which allows callers to distinguish between all three states of an image having been requested, having been fully fetched, and having failed to fetch.
- Loading branch information
1 parent
daa5063
commit 38cdef9
Showing
7 changed files
with
188 additions
and
76 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,3 +6,4 @@ pub mod popup_menu; | |
| pub mod search_bar; | ||
| pub mod styles; | ||
| pub mod avatar; | ||
| pub mod text_or_image; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| //! A `TextOrImage` view displays a loading message while waiting for an image to be fetched. | ||
| //! | ||
| //! Once the image is fetched and loaded, it displays the image as normal. | ||
| //! If the image fails to load, it displays an error message permanently. | ||
|
|
||
| use makepad_widgets::*; | ||
|
|
||
| live_design! { | ||
| import makepad_draw::shader::std::*; | ||
| import makepad_widgets::view::*; | ||
| import makepad_widgets::base::*; | ||
| import makepad_widgets::theme_desktop_dark::*; | ||
| import crate::shared::styles::*; | ||
|
|
||
| TextOrImage = {{TextOrImage}} { | ||
| width: Fit, height: Fit, | ||
| flow: Overlay | ||
|
|
||
| text_view = <View> { | ||
| visible: true, | ||
| text = <Label> { | ||
| width: Fit, height: Fit, | ||
| draw_text: { | ||
| text_style: <REGULAR_TEXT>{ font_size: 12. } | ||
| } | ||
| text: "Loading..." | ||
| } | ||
| } | ||
|
|
||
| img_view = <View> { | ||
| visible: false, | ||
| img = <Image> { | ||
| fit: Smallest, | ||
| width: Fill, height: Fill, | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| #[derive(LiveHook, Live, Widget)] | ||
| pub struct TextOrImage { | ||
| #[deref] view: View, | ||
| } | ||
|
|
||
| impl Widget for TextOrImage { | ||
| fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) { | ||
| self.view.handle_event(cx, event, scope) | ||
| } | ||
|
|
||
| fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep { | ||
| self.view.draw_walk(cx, scope, walk) | ||
| } | ||
| } | ||
|
|
||
| impl TextOrImageRef { | ||
| /// Sets the text content, makin the text visible and the image invisible. | ||
| /// | ||
| /// ## Arguments | ||
| /// * `text`: the text that will be displayed in this `TextOrImage`, e.g., | ||
| /// a message like "Loading..." or an error message. | ||
| pub fn set_text<T: AsRef<str>>(&self, text: T) { | ||
| if let Some(mut inner) = self.borrow_mut() { | ||
| inner.label(id!(text_view.text)).set_text(text.as_ref()); | ||
| inner.view(id!(img_view)).set_visible(false); | ||
| inner.view(id!(text_view)).set_visible(true); | ||
| } | ||
| } | ||
|
|
||
| /// Sets the image content, making the image visible and the text invisible. | ||
| /// | ||
| /// ## Arguments | ||
| /// * `image_set_function`: this function will be called with an [ImageRef] argument, | ||
| /// which refers to the image that will be displayed within this `TextOrImage`. | ||
| /// This allows the caller to set the image contents in any way they want. | ||
| /// If `image_set_function` returns an error, no change is made to this `TextOrImage`. | ||
| pub fn set_image<F, E>(&self, image_set_function: F) -> Result<(), E> | ||
| where F: FnOnce(ImageRef) -> Result<(), E> | ||
| { | ||
| if let Some(mut inner) = self.borrow_mut() { | ||
| let img_ref = inner.image(id!(img_view.img)); | ||
| let res = image_set_function(img_ref); | ||
| if res.is_ok() { | ||
| inner.view(id!(img_view)).set_visible(true); | ||
| inner.view(id!(text_view)).set_visible(false); | ||
| } | ||
| res | ||
| } else { | ||
| Ok(()) | ||
| } | ||
| } | ||
|
|
||
| /// Returns whether this `TextOrImage` is currently displaying an image or text. | ||
| pub fn status(&self) -> DisplayStatus { | ||
| if let Some(mut inner) = self.borrow_mut() { | ||
| if inner.view(id!(img_view)).is_visible() { | ||
| return DisplayStatus::Image; | ||
| } | ||
| } | ||
| DisplayStatus::Text | ||
| } | ||
| } | ||
|
|
||
| /// Whether a `TextOrImage` instance is currently displaying text or an image. | ||
| pub enum DisplayStatus { | ||
| Text, | ||
| Image, | ||
| } |
Oops, something went wrong.