GNOME.org
 

[epiphany] Redesign downloads arrow

commit 496a3be990f0874a8df8d262f3667319170b7ce6
Author: Jan-Michael Brummer <jan brummer tabos org>
Date:   Sat Nov 30 20:37:35 2019 +0100

    Redesign downloads arrow
    
    Add internal progress bar instead of filling the arrow.
    
    Fixes: https://gitlab.gnome.org/GNOME/epiphany/issues/1005

 src/ephy-action-bar-end.c                |  9 +++--
 src/resources/ephy-download-symbolic.svg | 63 ++++++++++++++++++++++++++++++++
 src/resources/epiphany.gresource.xml     |  1 +
 src/resources/gtk/action-bar-end.ui      | 35 ++++++++++++++----
 src/resources/themes/Adwaita-dark.css    |  4 ++
 src/resources/themes/Adwaita.css         |  4 ++
 src/resources/themes/_shared-base.scss   | 10 +++++
 src/resources/themes/elementary.css      |  4 ++
 src/resources/themes/shared.css          |  4 ++
 9 files changed, 123 insertions(+), 11 deletions(-)
---
diff --git a/src/ephy-action-bar-end.c b/src/ephy-action-bar-end.c
index d5113c63c..65752be10 100644
--- a/src/ephy-action-bar-end.c
+++ b/src/ephy-action-bar-end.c
@@ -37,7 +37,7 @@ struct _EphyActionBarEnd {
   GtkWidget *downloads_revealer;
   GtkWidget *downloads_button;
   GtkWidget *downloads_popover;
-  GtkWidget *downloads_image;
+  GtkWidget *downloads_progress;
 
   guint downloads_button_attention_timeout_id;
 };
@@ -96,7 +96,6 @@ download_added_cb (EphyDownloadsManager *manager,
 
   add_attention (action_bar_end);
   gtk_revealer_set_reveal_child (GTK_REVEALER (action_bar_end->downloads_revealer), TRUE);
-  gtk_widget_queue_draw (action_bar_end->downloads_image);
 
   if (gtk_widget_is_visible (GTK_WIDGET (action_bar_end))) {
     gtk_widget_get_allocation (GTK_WIDGET (action_bar_end->downloads_button), &rect);
@@ -205,7 +204,9 @@ static void
 downloads_estimated_progress_cb (EphyDownloadsManager *manager,
                                  EphyActionBarEnd     *action_bar_end)
 {
-  gtk_widget_queue_draw (gtk_button_get_image (GTK_BUTTON (action_bar_end->downloads_button)));
+  gdouble fraction = ephy_downloads_manager_get_estimated_progress (manager);
+
+  gtk_progress_bar_set_fraction (GTK_PROGRESS_BAR (action_bar_end->downloads_progress), fraction);
 }
 
 static void
@@ -235,7 +236,7 @@ ephy_action_bar_end_class_init (EphyActionBarEndClass *klass)
                                         downloads_button);
   gtk_widget_class_bind_template_child (widget_class,
                                         EphyActionBarEnd,
-                                        downloads_image);
+                                        downloads_progress);
 }
 
 static void
diff --git a/src/resources/ephy-download-symbolic.svg b/src/resources/ephy-download-symbolic.svg
new file mode 100644
index 000000000..51f306025
--- /dev/null
+++ b/src/resources/ephy-download-symbolic.svg
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/";
+   xmlns:cc="http://creativecommons.org/ns#";
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+   xmlns:svg="http://www.w3.org/2000/svg";
+   xmlns="http://www.w3.org/2000/svg";
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+   inkscape:version="1.0beta1 (fe3e306978, 2019-09-17)"
+   sodipodi:docname="ephy-download-symbolic.svg"
+   id="svg8"
+   version="1.1"
+   height="16"
+   width="16">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     inkscape:current-layer="svg8"
+     inkscape:window-maximized="1"
+     inkscape:window-y="27"
+     inkscape:window-x="0"
+     inkscape:cy="8"
+     inkscape:cx="8"
+     inkscape:zoom="43.6875"
+     showgrid="false"
+     id="namedview10"
+     inkscape:window-height="1016"
+     inkscape:window-width="1920"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0"
+     guidetolerance="10"
+     gridtolerance="10"
+     objecttolerance="10"
+     borderopacity="1"
+     inkscape:document-rotation="0"
+     bordercolor="#666666"
+     pagecolor="#ffffff" />
+  <g
+     id="g6"
+     fill="#2e3436"
+     color="#000">
+    <path
+       id="path2"
+       overflow="visible"
+       font-family="Bitstream Vera Sans"
+       font-weight="400"
+       style="line-height:normal;-inkscape-font-specification:'Bitstream Vera 
Sans';text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none"
+       d="M7 1v7.563L5.719 7.28A1.015 1.015 0 0 0 5 7H4v1c0 .265.093.53.281.719l3 3 .282.281h.875l.28-.281 
3-3C11.908 8.53 12 8.265 12 8V7h-1c-.265 0-.53.093-.719.281L9 8.563V1z" />
+  </g>
+</svg>
diff --git a/src/resources/epiphany.gresource.xml b/src/resources/epiphany.gresource.xml
index 6bab92cd0..b0ead00fc 100644
--- a/src/resources/epiphany.gresource.xml
+++ b/src/resources/epiphany.gresource.xml
@@ -55,6 +55,7 @@
     <file compressed="true">fonts/SourceCodePro-BoldIt.otf</file>
   </gresource>
   <gresource prefix="/org/gnome/Epiphany/icons">
+    <file compressed="true" alias="scalable/actions/ephy-download-symbolic.svg" 
preprocess="xml-stripblanks">ephy-download-symbolic.svg</file>
     <file compressed="true" 
alias="scalable/actions/ephy-bookmarks-symbolic.svg">ephy-bookmarks-symbolic.svg</file>
     <file compressed="true" 
alias="scalable/actions/ephy-bookmark-tag-symbolic.svg">ephy-bookmark-tag-symbolic.svg</file>
     <file compressed="true" 
alias="scalable/actions/ephy-missing-favicon-symbolic.svg">ephy-missing-favicon-symbolic.svg</file>
diff --git a/src/resources/gtk/action-bar-end.ui b/src/resources/gtk/action-bar-end.ui
index 35f269a45..2667e7466 100644
--- a/src/resources/gtk/action-bar-end.ui
+++ b/src/resources/gtk/action-bar-end.ui
@@ -30,17 +30,38 @@
         <property name="transition-type">crossfade</property>
         <child>
           <object class="GtkMenuButton" id="downloads_button">
-            <property name="visible">True</property>
-            <property name="valign">center</property>
             <!-- Translators: tooltip for the downloads button -->
             <property name="tooltip_text" translatable="yes">View downloads</property>
-            <property name="image">downloads_image</property>
-            <style>
-              <class name="image-button"/>
-            </style>
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="valign">center</property>
             <child>
-              <object class="EphyDownloadsProgressIcon" id="downloads_image">
+              <object class="GtkOverlay">
                 <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="valign">center</property>
+                <child>
+                  <object class="GtkImage">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="icon_name">ephy-download-symbolic</property>
+                    <property name="margin_bottom">1</property>
+                  </object>
+                  <packing>
+                    <property name="index">-1</property>
+                  </packing>
+                </child>
+                <child type="overlay">
+                  <object class="GtkProgressBar" id="downloads_progress">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="valign">end</property>
+                    <style>
+                      <class name="download_progress"/>
+                    </style>
+                  </object>
+                </child>
               </object>
             </child>
           </object>
diff --git a/src/resources/themes/Adwaita-dark.css b/src/resources/themes/Adwaita-dark.css
index 3e3be6ad7..c40d717ea 100644
--- a/src/resources/themes/Adwaita-dark.css
+++ b/src/resources/themes/Adwaita-dark.css
@@ -60,6 +60,10 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row > grid .title, 
dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row > grid .subtitle { 
margin-left: 6px; }
 
+.download_progress progress { min-height: 2px; }
+
+.download_progress trough { min-width: 14px; }
+
 .incognito-mode headerbar { background: #141927 -gtk-icontheme("user-not-tracked-symbolic") 180px 0/64px 
64px no-repeat, linear-gradient(to top, #1a2235, #1e263b); box-shadow: inset 0 1px rgba(238, 238, 236, 0.07); 
border-color: #0b0e16; color: rgba(238, 238, 236, 0.2); }
 
 .incognito-mode headerbar:backdrop { background-image: -gtk-icontheme("user-not-tracked-symbolic"), 
image(#252f49); box-shadow: inset 0 1px rgba(238, 238, 236, 0.07); color: rgba(137, 142, 155, 0.1); }
diff --git a/src/resources/themes/Adwaita.css b/src/resources/themes/Adwaita.css
index a5e61a70a..7adcaa33a 100644
--- a/src/resources/themes/Adwaita.css
+++ b/src/resources/themes/Adwaita.css
@@ -60,6 +60,10 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row > grid .title, 
dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row > grid .subtitle { 
margin-left: 6px; }
 
+.download_progress progress { min-height: 2px; }
+
+.download_progress trough { min-width: 14px; }
+
 .incognito-mode headerbar { background: #c4d6e9 -gtk-icontheme("user-not-tracked-symbolic") 180px 0/64px 
64px no-repeat, linear-gradient(to top, #bdd1e6, #c8d9ea); box-shadow: inset 0 1px rgba(255, 255, 255, 0.8); 
border-color: #9cb9da; color: rgba(46, 52, 54, 0.2); }
 
 .incognito-mode headerbar:backdrop { background-image: -gtk-icontheme("user-not-tracked-symbolic"), 
image(#eaf0f7); box-shadow: inset 0 1px rgba(255, 255, 255, 0.8); color: rgba(140, 146, 150, 0.1); }
diff --git a/src/resources/themes/_shared-base.scss b/src/resources/themes/_shared-base.scss
index 77573bf9c..87c7a3be3 100644
--- a/src/resources/themes/_shared-base.scss
+++ b/src/resources/themes/_shared-base.scss
@@ -185,3 +185,13 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
     margin-left: 6px;
   }
 }
+
+.download_progress {
+  progress {
+    min-height: 2px;
+  }
+
+  trough {
+    min-width: 14px;
+  }
+}
diff --git a/src/resources/themes/elementary.css b/src/resources/themes/elementary.css
index b6a188cb7..1308186be 100644
--- a/src/resources/themes/elementary.css
+++ b/src/resources/themes/elementary.css
@@ -60,6 +60,10 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row > grid .title, 
dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row > grid .subtitle { 
margin-left: 6px; }
 
+.download_progress progress { min-height: 2px; }
+
+.download_progress trough { min-width: 14px; }
+
 .page-menu-contents { margin-left: 0px; margin-right: 0px; margin-bottom: 6px; }
 
 .page-menu-zoom-box { margin-bottom: 6px; }
diff --git a/src/resources/themes/shared.css b/src/resources/themes/shared.css
index d2ba214ad..db007fda3 100644
--- a/src/resources/themes/shared.css
+++ b/src/resources/themes/shared.css
@@ -59,3 +59,7 @@
 dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row > grid { 
margin-left: 3px; }
 
 dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row > grid .title, 
dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row > grid .subtitle { 
margin-left: 6px; }
+
+.download_progress progress { min-height: 2px; }
+
+.download_progress trough { min-width: 14px; }
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]