isa/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

osdWindow: Reuse BarLevel drawing functionality

Browse Source 
Reuse the BarLevel class to get similar drawing behavior as Slider.
Rename theme css impacted properties and ensure that the osdWindow
remains accessible.
Ensure we don't force setting a custom border color like on the OSD.

https://bugzilla.gnome.org/show_bug.cgi?id=790280.
This commit is contained in:
Didier Roche 2018-02-08 19:22:29 +01:00 committed by Florian Müllner
parent c90a4e4849
commit ed8e89bc19
3 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
data/theme/gnome-shell-sass/_common.scss
View File

@ -585,13 +585,9 @@ StScrollBar {
.osd-monitor-label { font-size: 3em; } .osd-monitor-label { font-size: 3em; }
.level { .level {
height: 0.6em; height: 0.6em;
border-radius: 0.3em; -barlevel-height: 0.6em;
background-color: transparentize(darken($osd_bg_color,15%),0.5); -barlevel-background-color: transparentize(darken($osd_bg_color,15%),0.5);
color: $osd_fg_color; -barlevel-active-background-color: $osd_fg_color;
}
.level-bar {
background-color: $osd_fg_color;
border-radius: 0.3em;
} }
} }

12
js/ui/barLevel.js
View File

@ -60,9 +60,15 @@ var BarLevel = new Lang.Class({
let barLevelColor = themeNode.get_color('-barlevel-background-color'); let barLevelColor = themeNode.get_color('-barlevel-background-color');
let barLevelActiveColor = themeNode.get_color('-barlevel-active-background-color'); let barLevelActiveColor = themeNode.get_color('-barlevel-active-background-color');
let barLevelBorderWidth = themeNode.get_length('-barlevel-border-width'); let barLevelBorderWidth = Math.min(themeNode.get_length('-barlevel-border-width'), 1);
let barLevelBorderColor = themeNode.get_color('-barlevel-border-color'); let [hasBorderColor, barLevelBorderColor] =
let barLevelActiveBorderColor = themeNode.get_color('-barlevel-active-border-color'); themeNode.lookup_color('-barlevel-border-color', false);
if (!hasBorderColor)
barLevelBorderColor = barLevelColor;
let [hasActiveBorderColor, barLevelActiveBorderColor] =
themeNode.lookup_color('-barlevel-active-border-color', false);
if (!hasActiveBorderColor)
barLevelActiveBorderColor = barLevelActiveColor;
const TAU = Math.PI * 2; const TAU = Math.PI * 2;

17
js/ui/osdWindow.js
View File

@ -4,6 +4,7 @@ const Clutter = imports.gi.Clutter;
const GLib = imports.gi.GLib; const GLib = imports.gi.GLib;
const St = imports.gi.St; const St = imports.gi.St;
const BarLevel = imports.ui.barLevel;
const Lang = imports.lang; const Lang = imports.lang;
const Layout = imports.ui.layout; const Layout = imports.ui.layout;
const Main = imports.ui.main; const Main = imports.ui.main;
@ -17,16 +18,17 @@ var LEVEL_ANIMATION_TIME = 0.1;
var LevelBar = new Lang.Class({ var LevelBar = new Lang.Class({
Name: 'LevelBar', Name: 'LevelBar',
Extends: BarLevel.BarLevel,
_init() { _init() {
this._level = 0; this._level = 0;
this.actor = new St.Bin({ style_class: 'level', let params = {
x_align: St.Align.START, styleClass: 'level',
y_fill: true }); }
this._bar = new St.Widget({ style_class: 'level-bar' }); this.parent(this._level, params);
this.actor.set_child(this._bar); this.actor.accessible_name = _("Volume");
this.actor.connect('notify::width', () => { this.level = this.level; }); this.actor.connect('notify::width', () => { this.level = this.level; });
}, },
@ -38,10 +40,7 @@ var LevelBar = new Lang.Class({
set level(value) { set level(value) {
this._level = Math.max(0, Math.min(value, 100)); this._level = Math.max(0, Math.min(value, 100));
let alloc = this.actor.get_allocation_box(); this.setValue(this._level / 100);
let newWidth = Math.round((alloc.x2 - alloc.x1) * this._level / 100);
if (newWidth != this._bar.width)
this._bar.width = newWidth;
} }
}); });