Styles/Gtk: add ProgressBar (#842)

Author: danirabbit

demo/Views/ControlsView.vala

@@ -126,20 +126,37 @@ public class ControlsView : DemoPage {
 
         var scale_header = new Granite.HeaderLabel ("Scale");
 
-        var hscale = new Gtk.Scale.with_range (HORIZONTAL, 0, 100, 1) {
+        var hscale = new Gtk.Scale.with_range (HORIZONTAL, 0, 1, 0.01) {
             hexpand = true
         };
-        hscale.adjustment.value = 50;
+        hscale.adjustment.value = 0.5;
 
-        var vscale = new Gtk.Scale.with_range (VERTICAL, 0, 100, 1) {
+        var hprogressbar = new Gtk.ProgressBar ();
+        hscale.adjustment.bind_property ("value", hprogressbar, "fraction", SYNC_CREATE);
+
+        var hcontrol_box = new Granite.Box (VERTICAL, DOUBLE);
+        hcontrol_box.append (hscale);
+        hcontrol_box.append (hprogressbar);
+
+        var vscale = new Gtk.Scale.with_range (VERTICAL, 0, 1, 0.01) {
             height_request = 128,
             has_origin = false
         };
-        vscale.adjustment.value = 50;
+        vscale.adjustment.value = 0.5;
+
+        var vprogressbar = new Gtk.ProgressBar () {
+            inverted = true,
+            orientation = VERTICAL
+        };
+        vscale.adjustment.bind_property ("value", vprogressbar, "fraction", SYNC_CREATE);
+
+        var vcontrol_box = new Granite.Box (HORIZONTAL, DOUBLE);
+        vcontrol_box.append (vscale);
+        vcontrol_box.append (vprogressbar);
 
-        var scale_box = new Granite.Box (HORIZONTAL);
-        scale_box.append (hscale);
-        scale_box.append (vscale);
+        var scale_box = new Granite.Box (HORIZONTAL, DOUBLE);
+        scale_box.append (hcontrol_box);
+        scale_box.append (vcontrol_box);
 
         var box = new Granite.Box (VERTICAL, NONE) {
             halign = CENTER,

lib/Styles/Gtk/Index.scss

@@ -8,6 +8,7 @@
 @import 'ListBox.scss';
 @import 'ListView.scss';
 @import 'Popover.scss';
+@import 'ProgressBar.scss';
 @import 'Scale.scss';
 @import 'ScrolledWindow.scss';
 @import 'Scrollbar.scss';

lib/Styles/Gtk/ProgressBar.scss

@@ -0,0 +1,64 @@
+progressbar {
+    $trough-width: rem(9px);
+
+    progress {
+        background-color: #{'@accent_color'};
+        @include border-interactive-roundrect;
+
+        &:backdrop {
+            filter: grayscale(100%);
+        }
+    }
+
+    trough {
+        @include trough;
+        @include border-interactive-roundrect;
+
+        min-height: $trough-width;
+        min-width: $trough-width;
+    }
+
+    &.horizontal {
+        progress {
+            min-height: $trough-width;
+
+            &:not(.pulse) {
+                animation: progress 1.5s easing() infinite;
+                background-image:
+                    linear-gradient(
+                        to right,
+                        rgba(white, 0),
+                        rgba(white, 0.25) 60%,
+                        rgba(white, 0)
+                    );
+                background-repeat: no-repeat;
+                background-size: 48px 100%;
+
+                &.right {
+                    animation-direction: reverse;
+                }
+
+                &:backdrop {
+                    animation: none;
+                    background-image: none;
+                }
+            }
+        }
+    }
+
+    &.vertical {
+        progress {
+            min-width: $trough-width;
+        }
+    }
+
+    @keyframes progress {
+        from {
+            background-position: calc(0% - 48px), 0%;
+        }
+
+        to {
+            background-position: calc(100% + 48px), 0%;
+        }
+    }
+}