diff --git a/demo/Views/ControlsView.vala b/demo/Views/ControlsView.vala index d93040173..7e7c2d233 100644 --- a/demo/Views/ControlsView.vala +++ b/demo/Views/ControlsView.vala @@ -189,26 +189,46 @@ 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, @@ -216,11 +236,36 @@ public class ControlsView : DemoPage { }; 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; diff --git a/lib/Styles/Gtk/Index.scss b/lib/Styles/Gtk/Index.scss index 2e5946501..07ec8ac19 100644 --- a/lib/Styles/Gtk/Index.scss +++ b/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'; diff --git a/lib/Styles/Gtk/LevelBar.scss b/lib/Styles/Gtk/LevelBar.scss new file mode 100644 index 000000000..9a0c7bbe2 --- /dev/null +++ b/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; + } + } +}