stacking: Roll off tab titles

src/shell/element/stack/tab.rs

@@ -66,26 +66,33 @@ pub(super) enum TabBackgroundTheme {
     Default,
 }
 
+impl TabBackgroundTheme {
+    fn background_color(&self) -> Color {
+        match self {
+            TabBackgroundTheme::ActiveActivated => Color::from_rgba(0.365, 0.365, 0.365, 1.0),
+            TabBackgroundTheme::ActiveDeactivated => Color::from_rgba(0.365, 0.365, 0.365, 1.0),
+            TabBackgroundTheme::Default => Color::from_rgba(0.26, 0.26, 0.26, 1.0),
+        }
+    }
+}
+
 impl Into<theme::Container> for TabBackgroundTheme {
     fn into(self) -> theme::Container {
+        let background_color = cosmic::iced::Background::Color(self.background_color());
         match self {
             Self::ActiveActivated => {
-                theme::Container::custom(|theme| widget::container::Appearance {
+                theme::Container::custom(move |theme| widget::container::Appearance {
                     text_color: Some(Color::from(theme.cosmic().accent_text_color())),
-                    background: Some(cosmic::iced::Background::Color(Color::from_rgba(
+                    background: Some(background_color),
-                        1.0, 1.0, 1.0, 0.1,
-                    ))),
                     border_radius: 0.0.into(),
                     border_width: 0.0,
                     border_color: Color::TRANSPARENT,
                 })
             }
             Self::ActiveDeactivated => {
-                theme::Container::custom(|_theme| widget::container::Appearance {
+                theme::Container::custom(move |_theme| widget::container::Appearance {
                     text_color: None,
-                    background: Some(cosmic::iced::Background::Color(Color::from_rgba(
+                    background: Some(background_color),
-                        1.0, 1.0, 1.0, 0.1,
-                    ))),
                     border_radius: 0.0.into(),
                     border_width: 0.0,
                     border_color: Color::TRANSPARENT,
@@ -199,6 +206,7 @@ impl<'a, Message: TabMessage> Tab<'a, Message> {
                 .horizontal_alignment(alignment::Horizontal::Left)
                 .vertical_alignment(alignment::Vertical::Center)
                 .apply(tab_text)
+                .background(self.background_theme.background_color())
                 .height(Length::Fill)
                 .width(Length::Fill)
                 .into(),

src/shell/element/stack/tab_text.rs

@@ -1,11 +1,12 @@
 use cosmic::{
     iced::Element,
     iced_core::{
+        gradient,
         layout::{Layout, Limits, Node},
         mouse::Cursor,
         renderer,
         widget::{Tree, Widget},
-        Length, Point, Rectangle, Size,
+        Background, Color, Degrees, Gradient, Length, Point, Rectangle, Size,
     },
     iced_widget::text::StyleSheet as TextStyleSheet,
 };
@@ -16,6 +17,7 @@ where
     Renderer::Theme: TextStyleSheet,
 {
     text: Element<'a, Message, Renderer>,
+    background: Color,
     height: Length,
     width: Length,
 }
@@ -27,7 +29,7 @@ where
     Renderer: cosmic::iced_core::Renderer,
     Renderer::Theme: TextStyleSheet,
 {
-    TabText::new(text)
+    TabText::new(text, Color::TRANSPARENT)
 }
 
 impl<'a, Message, Renderer> TabText<'a, Message, Renderer>
@@ -35,14 +37,20 @@ where
     Renderer: cosmic::iced_core::Renderer,
     Renderer::Theme: TextStyleSheet,
 {
-    pub fn new(text: impl Into<Element<'a, Message, Renderer>>) -> Self {
+    pub fn new(text: impl Into<Element<'a, Message, Renderer>>, background: Color) -> Self {
         TabText {
             width: Length::Shrink,
             height: Length::Shrink,
+            background,
             text: text.into(),
         }
     }
 
+    pub fn background(mut self, background: Color) -> Self {
+        self.background = background;
+        self
+    }
+
     pub fn width(mut self, width: impl Into<Length>) -> Self {
         let width = width.into();
         self.width = width;
@@ -113,6 +121,28 @@ where
                 &bounds,
             );
         });
+
+        let gradient_bounds = Rectangle {
+            x: (bounds.x + bounds.width - 24.).max(bounds.x),
+            width: 24.0_f32.min(bounds.width),
+            ..bounds
+        };
+
+        let mut transparent_background = self.background.clone();
+        transparent_background.a = 0.0;
+        renderer.fill_quad(
+            renderer::Quad {
+                bounds: gradient_bounds,
+                border_radius: 0.0.into(),
+                border_width: 0.0,
+                border_color: Color::TRANSPARENT,
+            },
+            Background::Gradient(Gradient::Linear(
+                gradient::Linear::new(Degrees(180.))
+                    .add_stop(0.0, transparent_background)
+                    .add_stop(1.0, self.background),
+            )),
+        );
     }
 }