[epiphany/wip/exalm/elementary-downloads: 3/3] Style downloads button for elementary

[Alexander Mikhaylenko <alexm src gnome org>]

commit aa03c7c5f2908626eb1caed3cadbb6deb1efe559
Author: Alexander Mikhaylenko <exalm7659 gmail com>
Date:   Thu Dec 26 02:30:15 2019 +0500

    Style downloads button for elementary
    
    Fixes https://gitlab.gnome.org/GNOME/epiphany/issues/947

 src/ephy-action-bar-end.c            |  9 ++++++++
 src/resources/gtk/action-bar-end.ui  |  5 ++++-
 src/resources/themes/elementary.css  | 14 +++++++++++++
 src/resources/themes/elementary.scss | 40 ++++++++++++++++++++++++++++++++++++
 4 files changed, 67 insertions(+), 1 deletion(-)
---
diff --git a/src/ephy-action-bar-end.c b/src/ephy-action-bar-end.c
index 65752be10..2362a4539 100644
--- a/src/ephy-action-bar-end.c
+++ b/src/ephy-action-bar-end.c
@@ -37,6 +37,7 @@ struct _EphyActionBarEnd {
   GtkWidget *downloads_revealer;
   GtkWidget *downloads_button;
   GtkWidget *downloads_popover;
+  GtkWidget *downloads_icon;
   GtkWidget *downloads_progress;
 
   guint downloads_button_attention_timeout_id;
@@ -237,6 +238,9 @@ ephy_action_bar_end_class_init (EphyActionBarEndClass *klass)
   gtk_widget_class_bind_template_child (widget_class,
                                         EphyActionBarEnd,
                                         downloads_progress);
+  gtk_widget_class_bind_template_child (widget_class,
+                                        EphyActionBarEnd,
+                                        downloads_icon);
 }
 
 static void
@@ -265,6 +269,11 @@ ephy_action_bar_end_init (EphyActionBarEnd *action_bar_end)
     gtk_button_set_image (GTK_BUTTON (action_bar_end->bookmarks_button),
                           gtk_image_new_from_icon_name ("user-bookmarks",
                                                         GTK_ICON_SIZE_LARGE_TOOLBAR));
+    gtk_image_set_from_icon_name (GTK_IMAGE (action_bar_end->downloads_icon),
+                                  "browser-download",
+                                  GTK_ICON_SIZE_LARGE_TOOLBAR);
+    gtk_style_context_add_class (gtk_widget_get_style_context (action_bar_end->downloads_button),
+                                 "flat");
   }
 
   g_signal_connect_object (downloads_manager, "download-added",
diff --git a/src/resources/gtk/action-bar-end.ui b/src/resources/gtk/action-bar-end.ui
index ddb6ea3e3..6e03dbfc6 100644
--- a/src/resources/gtk/action-bar-end.ui
+++ b/src/resources/gtk/action-bar-end.ui
@@ -42,10 +42,13 @@
                 <property name="can_focus">False</property>
                 <property name="valign">center</property>
                 <child>
-                  <object class="GtkImage">
+                  <object class="GtkImage" id="downloads_icon">
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
                     <property name="icon_name">ephy-download-symbolic</property>
+                    <style>
+                      <class name="download_icon"/>
+                    </style>
                   </object>
                 </child>
                 <child type="overlay">
diff --git a/src/resources/themes/elementary.css b/src/resources/themes/elementary.css
index 1308186be..29442b414 100644
--- a/src/resources/themes/elementary.css
+++ b/src/resources/themes/elementary.css
@@ -107,3 +107,17 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 .bookmark-tag-widget-selected { background-color: @colorAccent; }
 
 .navigation-box button:not(:last-child) { margin-right: 6px; }
+
+.download_progress { margin: 1px; }
+
+.download_progress progress, .download_progress trough { border-radius: 999px; min-height: 3px; }
+
+.download_progress progress { background: alpha(#fff,0.8); border: none; box-shadow: inset 1px 1px 
alpha(#000,0.1), inset -1px -1px alpha(#000,0.1); margin: 0px; }
+
+.download_progress progress:backdrop { background: alpha(#fff,0.75); }
+
+.download_progress trough { background: linear-gradient(to bottom, alpha(#222,0.85), alpha(#222,0.75)); 
border: 1px solid alpha(#222,0.95); box-shadow: none; }
+
+.download_progress trough:backdrop { background: alpha(#333,0.4); border: 1px solid alpha(#333,0.45); }
+
+.download_icon { -gtk-icon-transform: translateY(-2px); }
diff --git a/src/resources/themes/elementary.scss b/src/resources/themes/elementary.scss
index c05756df6..80f66cf65 100644
--- a/src/resources/themes/elementary.scss
+++ b/src/resources/themes/elementary.scss
@@ -128,3 +128,43 @@ dzlsuggestionpopover > revealer > box {
 .navigation-box button:not(:last-child) {
   margin-right: 6px;
 }
+
+// Style the progress bar similarly to plank ones
+.download_progress {
+  margin: 1px;
+
+  progress, trough {
+    border-radius: 999px;
+    min-height: 3px;
+  }
+
+  progress {
+    background: gtkalpha(#fff, 0.8);
+    border: none;
+    box-shadow: inset 1px 1px gtkalpha(#000, 0.1),
+                inset -1px -1px gtkalpha(#000, 0.1);
+    margin: 0px;
+
+    &:backdrop {
+      background: gtkalpha(#fff, 0.75);
+    }
+  }
+
+  trough {
+    background: linear-gradient(to bottom,
+                                gtkalpha(#222, 0.85),
+                                gtkalpha(#222, 0.75));
+    border: 1px solid gtkalpha(#222, 0.95);
+    box-shadow: none;
+
+    &:backdrop {
+      background: gtkalpha(#333, 0.4);
+      border: 1px solid gtkalpha(#333, 0.45);
+    }
+  }
+}
+
+.download_icon {
+  // Shift the icon up a bit
+  -gtk-icon-transform: translateY(-2px);
+}