Merge pull request #465 from yusdacra/tooltip-widget

Tooltip widget

Cargo.toml

@@ -83,6 +83,7 @@ members = [
     "examples/svg",
     "examples/todos",
     "examples/tour",
+    "examples/tooltip",
 ]
 
 [dependencies]

examples/tooltip/Cargo.toml

@@ -0,0 +1,9 @@
+[package]
+name = "tooltip"
+version = "0.1.0"
+authors = ["Yusuf Bera Ertan <y.bera003.06@protonmail.com>"]
+edition = "2018"
+publish = false
+
+[dependencies]
+iced = { path = "../..", features = ["debug"] }

examples/tooltip/README.md

@@ -0,0 +1,14 @@
+## Tooltip
+
+A tooltip.
+
+It displays and positions a widget on another based on cursor position.
+
+The __[`main`]__ file contains all the code of the example.
+
+You can run it with `cargo run`:
+```
+cargo run --package tooltip
+```
+
+[`main`]: src/main.rs

examples/tooltip/src/main.rs

@@ -0,0 +1,138 @@
+use iced::tooltip::{self, Tooltip};
+use iced::{
+    button, Button, Column, Container, Element, HorizontalAlignment, Length,
+    Row, Sandbox, Settings, Text, VerticalAlignment,
+};
+
+pub fn main() {
+    Example::run(Settings::default()).unwrap()
+}
+
+#[derive(Default)]
+struct Example {
+    top: button::State,
+    bottom: button::State,
+    right: button::State,
+    left: button::State,
+    follow_cursor: button::State,
+}
+
+#[derive(Debug, Clone, Copy)]
+struct Message;
+
+impl Sandbox for Example {
+    type Message = Message;
+
+    fn new() -> Self {
+        Self::default()
+    }
+
+    fn title(&self) -> String {
+        String::from("Tooltip - Iced")
+    }
+
+    fn update(&mut self, _message: Message) {}
+
+    fn view(&mut self) -> Element<Message> {
+        let top =
+            tooltip("Tooltip at top", &mut self.top, tooltip::Position::Top);
+
+        let bottom = tooltip(
+            "Tooltip at bottom",
+            &mut self.bottom,
+            tooltip::Position::Bottom,
+        );
+
+        let left =
+            tooltip("Tooltip at left", &mut self.left, tooltip::Position::Left);
+
+        let right = tooltip(
+            "Tooltip at right",
+            &mut self.right,
+            tooltip::Position::Right,
+        );
+
+        let fixed_tooltips = Row::with_children(vec![
+            top.into(),
+            bottom.into(),
+            left.into(),
+            right.into(),
+        ])
+        .width(Length::Fill)
+        .height(Length::Fill)
+        .align_items(iced::Align::Center)
+        .spacing(50);
+
+        let follow_cursor = tooltip(
+            "Tooltip follows cursor",
+            &mut self.follow_cursor,
+            tooltip::Position::FollowCursor,
+        );
+
+        let content = Column::with_children(vec![
+            Container::new(fixed_tooltips)
+                .width(Length::Fill)
+                .height(Length::Fill)
+                .center_x()
+                .center_y()
+                .into(),
+            follow_cursor.into(),
+        ])
+        .width(Length::Fill)
+        .height(Length::Fill)
+        .spacing(50);
+
+        Container::new(content)
+            .width(Length::Fill)
+            .height(Length::Fill)
+            .center_x()
+            .center_y()
+            .padding(50)
+            .into()
+    }
+}
+
+fn tooltip<'a>(
+    label: &str,
+    button_state: &'a mut button::State,
+    position: tooltip::Position,
+) -> Element<'a, Message> {
+    Tooltip::new(
+        Button::new(
+            button_state,
+            Text::new(label)
+                .size(40)
+                .width(Length::Fill)
+                .height(Length::Fill)
+                .horizontal_alignment(HorizontalAlignment::Center)
+                .vertical_alignment(VerticalAlignment::Center),
+        )
+        .on_press(Message)
+        .width(Length::Fill)
+        .height(Length::Fill),
+        "Tooltip",
+        position,
+    )
+    .gap(5)
+    .padding(10)
+    .style(style::Tooltip)
+    .into()
+}
+
+mod style {
+    use iced::container;
+    use iced::Color;
+
+    pub struct Tooltip;
+
+    impl container::StyleSheet for Tooltip {
+        fn style(&self) -> container::Style {
+            container::Style {
+                text_color: Some(Color::from_rgb8(0xEE, 0xEE, 0xEE)),
+                background: Some(Color::from_rgb(0.11, 0.42, 0.87).into()),
+                border_radius: 12.0,
+                ..container::Style::default()
+            }
+        }
+    }
+}

glow/src/widget.rs

@@ -20,6 +20,7 @@ pub mod rule;
 pub mod scrollable;
 pub mod slider;
 pub mod text_input;
+pub mod tooltip;
 
 #[doc(no_inline)]
 pub use button::Button;
@@ -43,6 +44,8 @@ pub use scrollable::Scrollable;
 pub use slider::Slider;
 #[doc(no_inline)]
 pub use text_input::TextInput;
+#[doc(no_inline)]
+pub use tooltip::Tooltip;
 
 #[cfg(feature = "canvas")]
 #[cfg_attr(docsrs, doc(cfg(feature = "canvas")))]

glow/src/widget/tooltip.rs

@@ -0,0 +1,6 @@
+//! Display a widget over another.
+/// A widget allowing the selection of a single value from a list of options.
+pub type Tooltip<'a, Message> =
+    iced_native::Tooltip<'a, Message, crate::Renderer>;
+
+pub use iced_native::tooltip::Position;

graphics/src/layer.rs

@@ -82,7 +82,12 @@ impl<'a> Layer<'a> {
 
         let mut layers = vec![first_layer];
 
-        Self::process_primitive(&mut layers, Vector::new(0.0, 0.0), primitive);
+        Self::process_primitive(
+            &mut layers,
+            Vector::new(0.0, 0.0),
+            primitive,
+            0,
+        );
 
         layers
     }
@@ -91,13 +96,19 @@ impl<'a> Layer<'a> {
         layers: &mut Vec<Self>,
         translation: Vector,
         primitive: &'a Primitive,
+        current_layer: usize,
     ) {
         match primitive {
             Primitive::None => {}
             Primitive::Group { primitives } => {
                 // TODO: Inspect a bit and regroup (?)
                 for primitive in primitives {
-                    Self::process_primitive(layers, translation, primitive)
+                    Self::process_primitive(
+                        layers,
+                        translation,
+                        primitive,
+                        current_layer,
+                    )
                 }
             }
             Primitive::Text {
@@ -109,7 +120,7 @@ impl<'a> Layer<'a> {
                 horizontal_alignment,
                 vertical_alignment,
             } => {
-                let layer = layers.last_mut().unwrap();
+                let layer = &mut layers[current_layer];
 
                 layer.text.push(Text {
                     content,
@@ -128,7 +139,7 @@ impl<'a> Layer<'a> {
                 border_width,
                 border_color,
             } => {
-                let layer = layers.last_mut().unwrap();
+                let layer = &mut layers[current_layer];
 
                 // TODO: Move some of these computations to the GPU (?)
                 layer.quads.push(Quad {
@@ -146,7 +157,7 @@ impl<'a> Layer<'a> {
                 });
             }
             Primitive::Mesh2D { buffers, size } => {
-                let layer = layers.last_mut().unwrap();
+                let layer = &mut layers[current_layer];
 
                 let bounds = Rectangle::new(
                     Point::new(translation.x, translation.y),
@@ -167,24 +178,23 @@ impl<'a> Layer<'a> {
                 offset,
                 content,
             } => {
-                let layer = layers.last_mut().unwrap();
+                let layer = &mut layers[current_layer];
                 let translated_bounds = *bounds + translation;
 
                 // Only draw visible content
                 if let Some(clip_bounds) =
                     layer.bounds.intersection(&translated_bounds)
                 {
                     let clip_layer = Layer::new(clip_bounds);
-                    let new_layer = Layer::new(layer.bounds);
-
                     layers.push(clip_layer);
+
                     Self::process_primitive(
                         layers,
                         translation
                             - Vector::new(offset.x as f32, offset.y as f32),
                         content,
+                        layers.len() - 1,
                     );
-                    layers.push(new_layer);
                 }
             }
             Primitive::Translate {
@@ -195,21 +205,27 @@ impl<'a> Layer<'a> {
                     layers,
                     translation + *new_translation,
                     &content,
+                    current_layer,
                 );
             }
             Primitive::Cached { cache } => {
-                Self::process_primitive(layers, translation, &cache);
+                Self::process_primitive(
+                    layers,
+                    translation,
+                    &cache,
+                    current_layer,
+                );
             }
             Primitive::Image { handle, bounds } => {
-                let layer = layers.last_mut().unwrap();
+                let layer = &mut layers[current_layer];
 
                 layer.images.push(Image::Raster {
                     handle: handle.clone(),
                     bounds: *bounds + translation,
                 });
             }
             Primitive::Svg { handle, bounds } => {
-                let layer = layers.last_mut().unwrap();
+                let layer = &mut layers[current_layer];
 
                 layer.images.push(Image::Vector {
                     handle: handle.clone(),

graphics/src/widget.rs

@@ -20,6 +20,7 @@ pub mod scrollable;
 pub mod slider;
 pub mod svg;
 pub mod text_input;
+pub mod tooltip;
 
 mod column;
 mod row;
@@ -48,6 +49,8 @@ pub use scrollable::Scrollable;
 pub use slider::Slider;
 #[doc(no_inline)]
 pub use text_input::TextInput;
+#[doc(no_inline)]
+pub use tooltip::Tooltip;
 
 pub use column::Column;
 pub use image::Image;