diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss index dd6287f8e..5338f284b 100644 --- a/data/theme/gnome-shell-sass/_common.scss +++ b/data/theme/gnome-shell-sass/_common.scss @@ -133,6 +133,9 @@ StScrollBar { -barlevel-border-color: $borders_color; //trough border color -barlevel-active-background-color: $selected_bg_color; //active trough fill -barlevel-active-border-color: darken($selected_bg_color,10%); //active trough border + -barlevel-overdrive-color: $destructive_color; + -barlevel-overdrive-border-color: darken($destructive_color,10%); + -barlevel-overdrive-separator-width: 0.2em; -barlevel-border-width: 1px; -slider-handle-radius: 6px; } @@ -588,6 +591,8 @@ StScrollBar { -barlevel-height: 0.6em; -barlevel-background-color: transparentize(darken($osd_bg_color,15%),0.5); -barlevel-active-background-color: $osd_fg_color; + -barlevel-overdrive-color: $destructive_color; + -barlevel-overdrive-separator-width: 0.2em; } } diff --git a/js/ui/barLevel.js b/js/ui/barLevel.js index 1a1cc58eb..408f10dbf 100644 --- a/js/ui/barLevel.js +++ b/js/ui/barLevel.js @@ -16,6 +16,7 @@ var BarLevel = new Lang.Class({ throw TypeError('The bar level value must be a number'); this._maxValue = 1; this._value = Math.max(Math.min(value, this._maxValue), 0); + this._overdriveStart = 1; this._barLevelWidth = 0; if (params == undefined) @@ -54,6 +55,19 @@ var BarLevel = new Lang.Class({ throw TypeError('The bar level max value must be a number'); this._maxValue = Math.max(value, 1); + this._overdriveStart = Math.min(this._overdriveStart, this._maxValue); + this.actor.queue_repaint(); + }, + + setOverdriveStart(value) { + if (isNaN(value)) + throw TypeError('The overdrive limit value must be a number'); + if (value > this._maxValue) + throw new Error(`Tried to set overdrive value to ${value}, ` + + `which is a number greater than the maximum allowed value ${this._maxValue}`); + + this._overdriveStart = value; + this._value = Math.max(Math.min(value, this._maxValue), 0); this.actor.queue_repaint(); }, @@ -68,6 +82,7 @@ var BarLevel = new Lang.Class({ let barLevelColor = themeNode.get_color('-barlevel-background-color'); let barLevelActiveColor = themeNode.get_color('-barlevel-active-background-color'); + let barLevelOverdriveColor = themeNode.get_color('-barlevel-overdrive-color'); let barLevelBorderWidth = Math.min(themeNode.get_length('-barlevel-border-width'), 1); let [hasBorderColor, barLevelBorderColor] = @@ -78,6 +93,10 @@ var BarLevel = new Lang.Class({ themeNode.lookup_color('-barlevel-active-border-color', false); if (!hasActiveBorderColor) barLevelActiveBorderColor = barLevelActiveColor; + let [hasOverdriveBorderColor, barLevelOverdriveBorderColor] = + themeNode.lookup_color('-barlevel-overdrive-border-color', false); + if (!hasOverdriveBorderColor) + barLevelOverdriveBorderColor = barLevelOverdriveColor; const TAU = Math.PI * 2; @@ -85,6 +104,12 @@ var BarLevel = new Lang.Class({ if (this._maxValue > 0) endX = barLevelBorderRadius + (width - 2 * barLevelBorderRadius) * this._value / this._maxValue; + let overdriveSeparatorX = barLevelBorderRadius + (width - 2 * barLevelBorderRadius) * this._overdriveStart / this._maxValue; + let overdriveActive = this._overdriveStart !== this._maxValue; + let overdriveSeparatorWidth = 0; + if (overdriveActive) + overdriveSeparatorWidth = themeNode.get_length('-barlevel-overdrive-separator-width'); + /* background bar */ cr.arc(width - barLevelBorderRadius - barLevelBorderWidth, height / 2, barLevelBorderRadius, TAU * 3 / 4, TAU * 1 / 4); cr.lineTo(endX, (height + barLevelHeight) / 2); @@ -97,9 +122,10 @@ var BarLevel = new Lang.Class({ cr.stroke(); /* normal progress bar */ + let x = Math.min(endX, overdriveSeparatorX - overdriveSeparatorWidth / 2); cr.arc(barLevelBorderRadius + barLevelBorderWidth, height / 2, barLevelBorderRadius, TAU * 1 / 4, TAU * 3 / 4); - cr.lineTo(endX, (height - barLevelHeight) / 2); - cr.lineTo(endX, (height + barLevelHeight) / 2); + cr.lineTo(x, (height - barLevelHeight) / 2); + cr.lineTo(x, (height + barLevelHeight) / 2); cr.lineTo(barLevelBorderRadius + barLevelBorderWidth, (height + barLevelHeight) / 2); Clutter.cairo_set_source_color(cr, barLevelActiveColor); cr.fillPreserve(); @@ -107,8 +133,26 @@ var BarLevel = new Lang.Class({ cr.setLineWidth(barLevelBorderWidth); cr.stroke(); + /* overdrive progress barLevel */ + x = Math.min(endX, overdriveSeparatorX) + overdriveSeparatorWidth / 2; + if (this._value > this._overdriveStart) { + cr.moveTo(x, (height - barLevelHeight) / 2); + cr.lineTo(endX, (height - barLevelHeight) / 2); + cr.lineTo(endX, (height + barLevelHeight) / 2); + cr.lineTo(x, (height + barLevelHeight) / 2); + cr.lineTo(x, (height - barLevelHeight) / 2); + Clutter.cairo_set_source_color(cr, barLevelOverdriveColor); + cr.fillPreserve(); + Clutter.cairo_set_source_color(cr, barLevelOverdriveBorderColor); + cr.setLineWidth(barLevelBorderWidth); + cr.stroke(); + } + /* end progress bar arc */ - Clutter.cairo_set_source_color(cr, barLevelActiveColor); + if (this._value <= this._overdriveStart) + Clutter.cairo_set_source_color(cr, barLevelActiveColor); + else + Clutter.cairo_set_source_color(cr, barLevelOverdriveColor); cr.arc(endX, height / 2, barLevelBorderRadius, TAU * 3 / 4, TAU * 1 / 4); cr.lineTo(Math.floor(endX), (height + barLevelHeight) / 2); cr.lineTo(Math.floor(endX), (height - barLevelHeight) / 2); @@ -117,6 +161,20 @@ var BarLevel = new Lang.Class({ cr.setLineWidth(barLevelBorderWidth); cr.stroke(); + /* draw overdrive separator */ + if (overdriveActive) { + cr.moveTo(overdriveSeparatorX - overdriveSeparatorWidth / 2, (height - barLevelHeight) / 2); + cr.lineTo(overdriveSeparatorX + overdriveSeparatorWidth / 2, (height - barLevelHeight) / 2); + cr.lineTo(overdriveSeparatorX + overdriveSeparatorWidth / 2, (height + barLevelHeight) / 2); + cr.lineTo(overdriveSeparatorX - overdriveSeparatorWidth / 2, (height + barLevelHeight) / 2); + cr.lineTo(overdriveSeparatorX - overdriveSeparatorWidth / 2, (height - barLevelHeight) / 2); + if (this._value <= this._overdriveStart) + Clutter.cairo_set_source_color(cr, fgColor); + else + Clutter.cairo_set_source_color(cr, barLevelColor); + cr.fill(); + } + cr.$dispose(); }, @@ -124,6 +182,10 @@ var BarLevel = new Lang.Class({ return this._value; }, + _getOverdriveStart(actor) { + return this._overdriveStart; + }, + _getMinimumValue(actor) { return 0; },