opacity.rs

  1use std::{fs, path::PathBuf, time::Duration};
  2
  3use gpui::*;
  4
  5struct Assets {
  6    base: PathBuf,
  7}
  8
  9impl AssetSource for Assets {
 10    fn load(&self, path: &str) -> Result<Option<std::borrow::Cow<'static, [u8]>>> {
 11        fs::read(self.base.join(path))
 12            .map(|data| Some(std::borrow::Cow::Owned(data)))
 13            .map_err(|e| e.into())
 14    }
 15
 16    fn list(&self, path: &str) -> Result<Vec<SharedString>> {
 17        fs::read_dir(self.base.join(path))
 18            .map(|entries| {
 19                entries
 20                    .filter_map(|entry| {
 21                        entry
 22                            .ok()
 23                            .and_then(|entry| entry.file_name().into_string().ok())
 24                            .map(SharedString::from)
 25                    })
 26                    .collect()
 27            })
 28            .map_err(|e| e.into())
 29    }
 30}
 31
 32struct HelloWorld {
 33    _task: Option<Task<()>>,
 34    opacity: f32,
 35}
 36
 37impl HelloWorld {
 38    fn new(_: &mut ViewContext<Self>) -> Self {
 39        Self {
 40            _task: None,
 41            opacity: 0.5,
 42        }
 43    }
 44
 45    fn change_opacity(&mut self, _: &ClickEvent, cx: &mut ViewContext<Self>) {
 46        self.opacity = 0.0;
 47        cx.notify();
 48
 49        self._task = Some(cx.spawn(|view, mut cx| async move {
 50            loop {
 51                Timer::after(Duration::from_secs_f32(0.05)).await;
 52                let mut stop = false;
 53                let _ = cx.update(|cx| {
 54                    view.update(cx, |view, cx| {
 55                        if view.opacity >= 1.0 {
 56                            stop = true;
 57                            return;
 58                        }
 59
 60                        view.opacity += 0.1;
 61                        cx.notify();
 62                    })
 63                });
 64
 65                if stop {
 66                    break;
 67                }
 68            }
 69        }));
 70    }
 71}
 72
 73impl Render for HelloWorld {
 74    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
 75        div()
 76            .flex()
 77            .flex_row()
 78            .size_full()
 79            .bg(rgb(0xE0E0E0))
 80            .text_xl()
 81            .child(
 82                div()
 83                    .flex()
 84                    .size_full()
 85                    .justify_center()
 86                    .items_center()
 87                    .border_1()
 88                    .text_color(gpui::blue())
 89                    .child(div().child("This is background text.")),
 90            )
 91            .child(
 92                div()
 93                    .id("panel")
 94                    .on_click(cx.listener(Self::change_opacity))
 95                    .absolute()
 96                    .top_8()
 97                    .left_8()
 98                    .right_8()
 99                    .bottom_8()
100                    .opacity(self.opacity)
101                    .flex()
102                    .justify_center()
103                    .items_center()
104                    .bg(gpui::white())
105                    .border_3()
106                    .border_color(gpui::red())
107                    .text_color(gpui::yellow())
108                    .child(
109                        div()
110                            .flex()
111                            .flex_col()
112                            .gap_2()
113                            .justify_center()
114                            .items_center()
115                            .size(px(300.))
116                            .bg(gpui::blue())
117                            .border_3()
118                            .border_color(gpui::black())
119                            .shadow(smallvec::smallvec![BoxShadow {
120                                color: hsla(0.0, 0.0, 0.0, 0.5),
121                                blur_radius: px(1.0),
122                                spread_radius: px(5.0),
123                                offset: point(px(10.0), px(10.0)),
124                            }])
125                            .child(img("image/app-icon.png").size_8())
126                            .child("Opacity Panel (Click to test)")
127                            .child(
128                                div()
129                                    .id("deep-level-text")
130                                    .flex()
131                                    .justify_center()
132                                    .items_center()
133                                    .p_4()
134                                    .bg(gpui::black())
135                                    .text_color(gpui::white())
136                                    .text_decoration_2()
137                                    .text_decoration_wavy()
138                                    .text_decoration_color(gpui::red())
139                                    .child(format!("opacity: {:.1}", self.opacity)),
140                            )
141                            .child(
142                                svg()
143                                    .path("image/arrow_circle.svg")
144                                    .text_color(gpui::black())
145                                    .text_2xl()
146                                    .size_8(),
147                            )
148                            .child("🎊✈️🎉🎈🎁🎂")
149                            .child(img("image/black-cat-typing.gif").size_12()),
150                    ),
151            )
152    }
153}
154
155fn main() {
156    App::new()
157        .with_assets(Assets {
158            base: PathBuf::from("crates/gpui/examples"),
159        })
160        .run(|cx: &mut AppContext| {
161            let bounds = Bounds::centered(None, size(px(500.0), px(500.0)), cx);
162            cx.open_window(
163                WindowOptions {
164                    window_bounds: Some(WindowBounds::Windowed(bounds)),
165                    ..Default::default()
166                },
167                |cx| cx.new_view(HelloWorld::new),
168            )
169            .unwrap();
170        });
171}