Styles: support levelbar

demo/Views/ControlsView.vala

@@ -189,38 +189,83 @@ public class ControlsView : DemoPage {
         mode_switch.secondary_icon_tooltip_text = ("Dark background");
         mode_switch.valign = Gtk.Align.CENTER;
 
-        var scale_header = new Granite.HeaderLabel ("Scale");
-
         var hscale = new Gtk.Scale.with_range (HORIZONTAL, 0, 1, 0.01) {
             draw_value = true,
             hexpand = true
         };
-        hscale.adjustment.value = 0.5;
+        hscale.adjustment.value = 0.8;
 
         var hprogressbar = new Gtk.ProgressBar ();
         hscale.adjustment.bind_property ("value", hprogressbar, "fraction", SYNC_CREATE);
 
-        var hcontrol_box = new Granite.Box (VERTICAL, DOUBLE);
+        var hcontinuous_levelbar = new Gtk.LevelBar () {
+            mode = CONTINUOUS
+        };
+        hscale.adjustment.bind_property ("value", hcontinuous_levelbar, "value", SYNC_CREATE);
+
+        var hdiscrete_levelbar = new Gtk.LevelBar.for_interval (0, 4) {
+            mode = DISCRETE
+        };
+        hdiscrete_levelbar.add_offset_value (Granite.CssClass.ERROR, 1);
+        hdiscrete_levelbar.add_offset_value (Granite.CssClass.WARNING, 3);
+        hdiscrete_levelbar.add_offset_value (Granite.CssClass.SUCCESS, 4);
+        hscale.adjustment.bind_property ("value", hdiscrete_levelbar, "value", SYNC_CREATE,
+            (binding, from_value, ref to_value) => {
+            to_value.set_double ((double) from_value * 4);
+            return true;
+        });
+
+        var hcontrol_box = new Granite.Box (VERTICAL, HALF);
+        hcontrol_box.append (new Granite.HeaderLabel ("Scale"));
         hcontrol_box.append (hscale);
+        hcontrol_box.append (new Granite.HeaderLabel ("ProgressBar"));
         hcontrol_box.append (hprogressbar);
+        hcontrol_box.append (new Granite.HeaderLabel ("LevelBar"));
+        hcontrol_box.append (hcontinuous_levelbar);
+        hcontrol_box.append (hdiscrete_levelbar);
 
         var vscale = new Gtk.Scale.with_range (VERTICAL, 0, 1, 0.01) {
             height_request = 128,
             has_origin = false
         };
-        vscale.adjustment.value = 0.5;
+        vscale.adjustment.value = 0.1;
 
         var vprogressbar = new Gtk.ProgressBar () {
             inverted = true,
             orientation = VERTICAL
         };
         vscale.adjustment.bind_property ("value", vprogressbar, "fraction", SYNC_CREATE);
 
+        var vcontinuous_levelbar = new Gtk.LevelBar () {
+            inverted = true,
+            mode = CONTINUOUS,
+            orientation = VERTICAL
+        };
+        vscale.adjustment.bind_property ("value", vcontinuous_levelbar, "value", SYNC_CREATE);
+
+        var vdiscrete_levelbar = new Gtk.LevelBar.for_interval (0, 25) {
+            inverted = true,
+            mode = DISCRETE,
+            orientation = VERTICAL
+        };
+        vdiscrete_levelbar.add_offset_value (Granite.CssClass.ERROR, 25);
+        vdiscrete_levelbar.add_offset_value (Granite.CssClass.WARNING, 23);
+        vdiscrete_levelbar.add_offset_value (Granite.CssClass.SUCCESS, 20);
+        vscale.adjustment.bind_property ("value", vdiscrete_levelbar, "value", SYNC_CREATE,
+            (binding, from_value, ref to_value) => {
+            to_value.set_double ((double) from_value * 25);
+            return true;
+        });
+
         var vcontrol_box = new Granite.Box (HORIZONTAL, DOUBLE);
         vcontrol_box.append (vscale);
         vcontrol_box.append (vprogressbar);
+        vcontrol_box.append (vcontinuous_levelbar);
+        vcontrol_box.append (vdiscrete_levelbar);
 
-        var scale_box = new Granite.Box (HORIZONTAL, DOUBLE);
+        var scale_box = new Granite.Box (HORIZONTAL, DOUBLE) {
+            margin_top = 24
+        };
         scale_box.append (hcontrol_box);
         scale_box.append (vcontrol_box);
 
@@ -236,7 +281,6 @@ public class ControlsView : DemoPage {
         box.append (checkradio_box);
         box.append (mode_switch_label);
         box.append (mode_switch);
-        box.append (scale_header);
         box.append (scale_box);
 
         child = box;

lib/Styles/Gtk/Index.scss

@@ -8,6 +8,7 @@
 @import 'GridView.scss';
 @import 'HeaderBar.scss';
 @import 'Image.scss';
+@import 'LevelBar.scss';
 @import 'ListBox.scss';
 @import 'ListView.scss';
 @import 'MenuButton.scss';

lib/Styles/Gtk/LevelBar.scss

@@ -0,0 +1,110 @@
+levelbar {
+    --trough-width: 2rem;
+    --trough-height: 0.5rem;
+
+    block {
+        @include trough;
+        transition: background-color duration("in-place") easing();
+
+        &.filled {
+            background-color: var(--accent-color);
+
+            &.error,
+            &.low {
+                background-color: var(--error-color);
+            }
+
+            &.high,
+            &.middle,
+            &.warning{
+                background-color: var(--warning-icon-color);
+            }
+
+            &.full,
+            &.success {
+                background-color: var(--success-color);
+            }
+
+            &:backdrop,
+            &:disabled {
+                filter: grayscale(100%);
+            }
+        }
+    }
+
+    &.inverted {
+        block.filled {
+            &.low,
+            &.success {
+                background-color: var(--success-color);
+            }
+
+            &.high,
+            &.middle,
+            &.warning {
+                background-color: var(--warning-icon-color);
+            }
+
+            &.error,
+            &.full {
+                background-color: var(--error-color);
+            }
+        }
+    }
+
+    &.horizontal block {
+        min-height: var(--trough-height);
+        min-width: var(--trough-width);
+    }
+
+    &.vertical block {
+        min-height: var(--trough-width);
+        min-width: var(--trough-height);
+    }
+}
+
+levelbar.discrete {
+    --trough-width: 0.25rem;
+
+    block {
+        border-radius: 0;
+    }
+
+    &.horizontal {
+        block {
+            margin-right: 1px;
+            min-width: var(--trough-width);
+        }
+
+        block:last-child {
+            border-top-right-radius: var(--trough-width);
+            border-bottom-right-radius: var(--trough-width);
+            margin-right: 0;
+        }
+
+        block:first-child {
+            border-top-left-radius: var(--trough-width);
+            border-bottom-left-radius: var(--trough-width);
+        }
+    }
+
+    &.vertical {
+        --trough-height: 0.75rem;
+
+        block {
+            margin-top: 1px;
+            min-height: var(--trough-width);
+        }
+
+        block:last-child {
+            border-bottom-right-radius: var(--trough-width);
+            border-bottom-left-radius: var(--trough-width);
+        }
+
+        block:first-child {
+            border-top-right-radius: var(--trough-width);
+            border-top-left-radius: var(--trough-width);
+            margin-top: 0;
+        }
+    }
+}