feat: transparent button style

examples/cosmic-sctk/src/window.rs

@@ -1,4 +1,4 @@
-use cosmic::widget::{expander, nav_bar, nav_bar_page, nav_bar_section, image_icon};
+use cosmic::widget::{expander, image_icon, nav_bar, nav_bar_page, nav_bar_section};
 use cosmic::{
     iced::widget::{
         checkbox, column, container, horizontal_space, pick_list, progress_bar, radio, row, slider,
@@ -8,7 +8,7 @@ use cosmic::{
     iced_lazy::responsive,
     iced_native::window,
     list_view, list_view_item, list_view_row, list_view_section, scrollable,
-    theme::{self, Theme},
+    theme::{self, Button, Theme},
     widget::{button, header_bar, list_box, list_row, list_view::*, toggler},
     Element,
 };
@@ -314,7 +314,10 @@ impl Application for Window {
                         ])
                         .render()
                 ),
-                list_view_section!("image", image_icon("firefox", 64).unwrap())
+                list_view_section!(
+                    "image",
+                    button!(image_icon("firefox", 64).unwrap()).style(Button::Transparent)
+                )
             )
             .into();
 

src/applet/mod.rs

@@ -14,7 +14,10 @@ use crate::{
     widget::icon,
 };
 
-pub fn icon_button<'a, M: 'a, Renderer>(name: &str, icon_style: <Renderer::Theme as iced_native::svg::StyleSheet>::Style) -> Button<'a, M, Renderer>
+pub fn icon_button<'a, M: 'a, Renderer>(
+    name: &str,
+    icon_style: <Renderer::Theme as iced_native::svg::StyleSheet>::Style,
+) -> Button<'a, M, Renderer>
 where
     Renderer::Theme: iced_native::svg::StyleSheet + iced_style::button::StyleSheet,
     Renderer: iced_native::Renderer + iced_native::svg::Renderer + 'a,

src/theme/mod.rs

@@ -3,6 +3,7 @@ pub mod palette;
 
 pub use self::palette::Palette;
 
+use cosmic_theme::Component;
 use iced_style::application;
 use iced_style::button;
 use iced_style::checkbox;
@@ -30,6 +31,18 @@ type CosmicThemeCss = cosmic_theme::Theme<cosmic_theme::util::CssColor>;
 lazy_static::lazy_static! {
     pub static ref COSMIC_DARK: CosmicTheme = CosmicThemeCss::dark_default().into_srgba();
     pub static ref COSMIC_LIGHT: CosmicTheme = CosmicThemeCss::light_default().into_srgba();
+    pub static ref TRANSPARENT_COMPONENT: Component<CosmicColor> = Component {
+        base: CosmicColor::new(0.0, 0.0, 0.0, 0.0),
+        hover: CosmicColor::new(0.0, 0.0, 0.0, 0.0),
+        pressed: CosmicColor::new(0.0, 0.0, 0.0, 0.0),
+        selected: CosmicColor::new(0.0, 0.0, 0.0, 0.0),
+        selected_text: CosmicColor::new(0.0, 0.0, 0.0, 0.0),
+        focus: CosmicColor::new(0.0, 0.0, 0.0, 0.0),
+        divider: CosmicColor::new(0.0, 0.0, 0.0, 0.0),
+        on: CosmicColor::new(0.0, 0.0, 0.0, 0.0),
+        disabled: CosmicColor::new(0.0, 0.0, 0.0, 0.0),
+        on_disabled: CosmicColor::new(0.0, 0.0, 0.0, 0.0),
+    };
 }
 
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
@@ -105,6 +118,7 @@ pub enum Button {
     Positive,
     Destructive,
     Text,
+    Transparent,
 }
 
 impl Default for Button {
@@ -122,6 +136,7 @@ impl Button {
             Button::Positive => &cosmic.success,
             Button::Destructive => &cosmic.destructive,
             Button::Text => &cosmic.secondary.component,
+            Button::Transparent => &TRANSPARENT_COMPONENT,
         }
     }
 }

src/widget/icon.rs

@@ -1,4 +1,7 @@
-use iced::{widget::{svg, Image}, Length};
+use iced::{
+    widget::{svg, Image},
+    Length,
+};
 
 pub fn icon<Renderer>(name: &str, size: u16) -> svg::Svg<Renderer>
 where
@@ -23,11 +26,14 @@ where
         .height(Length::Units(size))
 }
 
-pub fn image_icon(name: &str, size: u16) -> Option<Image>
-{
+pub fn image_icon(name: &str, size: u16) -> Option<Image> {
     freedesktop_icons::lookup(name)
         .with_size(size)
         .with_cache()
-        .find().map(|path| Image::new(path).width(Length::Units(size))
-        .height(Length::Units(size)))
+        .find()
+        .map(|path| {
+            Image::new(path)
+                .width(Length::Units(size))
+                .height(Length::Units(size))
+        })
 }