js: Actorize animated objects
We have a couple of places where we don't tween the actor, but a custom property on the delegate object. In order to move those to Clutter animations, we will need an animatable, so turn those objects into widget subclasses. https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/666
This commit is contained in:
parent
928595fe21
commit
3d3dca4aa2
@ -1,37 +1,48 @@
|
|||||||
/* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
|
/* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
|
||||||
/* exported BarLevel */
|
/* exported BarLevel */
|
||||||
|
|
||||||
const { Atk, Clutter, St } = imports.gi;
|
const { Atk, Clutter, GObject, St } = imports.gi;
|
||||||
const Signals = imports.signals;
|
|
||||||
|
|
||||||
var BarLevel = class {
|
var BarLevel = GObject.registerClass({
|
||||||
constructor(value, params = {}) {
|
Properties: {
|
||||||
if (isNaN(value))
|
'value': GObject.ParamSpec.double(
|
||||||
// Avoid spreading NaNs around
|
'value', 'value', 'value',
|
||||||
throw TypeError('The bar level value must be a number');
|
GObject.ParamFlags.READWRITE,
|
||||||
|
0, 1, 0),
|
||||||
|
'maximum-value': GObject.ParamSpec.double(
|
||||||
|
'maximum-value', 'maximum-value', 'maximum-value',
|
||||||
|
GObject.ParamFlags.READWRITE,
|
||||||
|
1, 2, 1),
|
||||||
|
'overdrive-start': GObject.ParamSpec.double(
|
||||||
|
'overdrive-start', 'overdrive-start', 'overdrive-start',
|
||||||
|
GObject.ParamFlags.READWRITE,
|
||||||
|
1, 2, 1)
|
||||||
|
}
|
||||||
|
}, class BarLevel extends St.DrawingArea {
|
||||||
|
_init(params) {
|
||||||
this._maxValue = 1;
|
this._maxValue = 1;
|
||||||
this._value = Math.max(Math.min(value, this._maxValue), 0);
|
this._value = 0;
|
||||||
this._overdriveStart = 1;
|
this._overdriveStart = 1;
|
||||||
this._barLevelWidth = 0;
|
this._barLevelWidth = 0;
|
||||||
|
|
||||||
this.actor = new St.DrawingArea({ styleClass: params['styleClass'] || 'barlevel',
|
let defaultParams = {
|
||||||
can_focus: params['canFocus'] || false,
|
style_class: 'barlevel',
|
||||||
reactive: params['reactive'] || false,
|
accessible_role: Atk.Role.LEVEL_BAR
|
||||||
accessible_role: params['accessibleRole'] || Atk.Role.LEVEL_BAR });
|
};
|
||||||
this.actor.connect('repaint', this._barLevelRepaint.bind(this));
|
super._init(Object.assign(defaultParams, params));
|
||||||
this.actor.connect('allocation-changed', (actor, box) => {
|
this.connect('allocation-changed', (actor, box) => {
|
||||||
this._barLevelWidth = box.get_width();
|
this._barLevelWidth = box.get_width();
|
||||||
});
|
});
|
||||||
|
|
||||||
this._customAccessible = St.GenericAccessible.new_for_actor(this.actor);
|
this._customAccessible = St.GenericAccessible.new_for_actor(this);
|
||||||
this.actor.set_accessible(this._customAccessible);
|
this.set_accessible(this._customAccessible);
|
||||||
|
|
||||||
this._customAccessible.connect('get-current-value', this._getCurrentValue.bind(this));
|
this._customAccessible.connect('get-current-value', this._getCurrentValue.bind(this));
|
||||||
this._customAccessible.connect('get-minimum-value', this._getMinimumValue.bind(this));
|
this._customAccessible.connect('get-minimum-value', this._getMinimumValue.bind(this));
|
||||||
this._customAccessible.connect('get-maximum-value', this._getMaximumValue.bind(this));
|
this._customAccessible.connect('get-maximum-value', this._getMaximumValue.bind(this));
|
||||||
this._customAccessible.connect('set-current-value', this._setCurrentValue.bind(this));
|
this._customAccessible.connect('set-current-value', this._setCurrentValue.bind(this));
|
||||||
|
|
||||||
this.connect('value-changed', this._valueChanged.bind(this));
|
this.connect('notify::value', this._valueChanged.bind(this));
|
||||||
}
|
}
|
||||||
|
|
||||||
get value() {
|
get value() {
|
||||||
@ -39,16 +50,15 @@ var BarLevel = class {
|
|||||||
}
|
}
|
||||||
|
|
||||||
set value(value) {
|
set value(value) {
|
||||||
if (isNaN(value))
|
|
||||||
throw TypeError('The bar level value must be a number');
|
|
||||||
|
|
||||||
value = Math.max(Math.min(value, this._maxValue), 0);
|
value = Math.max(Math.min(value, this._maxValue), 0);
|
||||||
|
|
||||||
if (this._value == value)
|
if (this._value == value)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
this._value = value;
|
this._value = value;
|
||||||
this.actor.queue_repaint();
|
this._value = value;
|
||||||
|
this.notify('value');
|
||||||
|
this.queue_repaint();
|
||||||
}
|
}
|
||||||
|
|
||||||
// eslint-disable-next-line camelcase
|
// eslint-disable-next-line camelcase
|
||||||
@ -58,9 +68,6 @@ var BarLevel = class {
|
|||||||
|
|
||||||
// eslint-disable-next-line camelcase
|
// eslint-disable-next-line camelcase
|
||||||
set maximum_value(value) {
|
set maximum_value(value) {
|
||||||
if (isNaN(value))
|
|
||||||
throw TypeError('The bar level max value must be a number');
|
|
||||||
|
|
||||||
value = Math.max(value, 1);
|
value = Math.max(value, 1);
|
||||||
|
|
||||||
if (this._maxValue == value)
|
if (this._maxValue == value)
|
||||||
@ -68,7 +75,8 @@ var BarLevel = class {
|
|||||||
|
|
||||||
this._maxValue = value;
|
this._maxValue = value;
|
||||||
this._overdriveStart = Math.min(this._overdriveStart, this._maxValue);
|
this._overdriveStart = Math.min(this._overdriveStart, this._maxValue);
|
||||||
this.actor.queue_repaint();
|
this.notify('maximum-value');
|
||||||
|
this.queue_repaint();
|
||||||
}
|
}
|
||||||
|
|
||||||
// eslint-disable-next-line camelcase
|
// eslint-disable-next-line camelcase
|
||||||
@ -78,9 +86,6 @@ var BarLevel = class {
|
|||||||
|
|
||||||
// eslint-disable-next-line camelcase
|
// eslint-disable-next-line camelcase
|
||||||
set overdrive_start(value) {
|
set overdrive_start(value) {
|
||||||
if (isNaN(value))
|
|
||||||
throw TypeError('The overdrive limit value must be a number');
|
|
||||||
|
|
||||||
if (this._overdriveStart == value)
|
if (this._overdriveStart == value)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
@ -89,13 +94,14 @@ var BarLevel = class {
|
|||||||
`which is a number greater than the maximum allowed value ${this._maxValue}`);
|
`which is a number greater than the maximum allowed value ${this._maxValue}`);
|
||||||
|
|
||||||
this._overdriveStart = value;
|
this._overdriveStart = value;
|
||||||
this.actor.queue_repaint();
|
this.notify('overdrive-start');
|
||||||
|
this.queue_repaint();
|
||||||
}
|
}
|
||||||
|
|
||||||
_barLevelRepaint(area) {
|
vfunc_repaint() {
|
||||||
let cr = area.get_context();
|
let cr = this.get_context();
|
||||||
let themeNode = area.get_theme_node();
|
let themeNode = this.get_theme_node();
|
||||||
let [width, height] = area.get_surface_size();
|
let [width, height] = this.get_surface_size();
|
||||||
|
|
||||||
let barLevelHeight = themeNode.get_length('-barlevel-height');
|
let barLevelHeight = themeNode.get_length('-barlevel-height');
|
||||||
let barLevelBorderRadius = Math.min(width, barLevelHeight) / 2;
|
let barLevelBorderRadius = Math.min(width, barLevelHeight) / 2;
|
||||||
@ -225,5 +231,4 @@ var BarLevel = class {
|
|||||||
_valueChanged() {
|
_valueChanged() {
|
||||||
this._customAccessible.notify("accessible-value");
|
this._customAccessible.notify("accessible-value");
|
||||||
}
|
}
|
||||||
};
|
});
|
||||||
Signals.addSignalMethods(BarLevel.prototype);
|
|
||||||
|
@ -570,11 +570,21 @@ var FocusTracker = class {
|
|||||||
};
|
};
|
||||||
Signals.addSignalMethods(FocusTracker.prototype);
|
Signals.addSignalMethods(FocusTracker.prototype);
|
||||||
|
|
||||||
var EmojiPager = class EmojiPager {
|
var EmojiPager = GObject.registerClass({
|
||||||
constructor(sections, nCols, nRows) {
|
Signals: {
|
||||||
this.actor = new St.Widget({ layout_manager: new Clutter.BinLayout(),
|
'emoji': { param_types: [GObject.TYPE_STRING] },
|
||||||
|
'page-changed': {
|
||||||
|
param_types: [GObject.TYPE_INT, GObject.TYPE_INT, GObject.TYPE_INT]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, class EmojiPager extends St.Widget {
|
||||||
|
_init(sections, nCols, nRows) {
|
||||||
|
super._init({
|
||||||
|
layout_manager: new Clutter.BinLayout(),
|
||||||
reactive: true,
|
reactive: true,
|
||||||
clip_to_allocation: true });
|
clip_to_allocation: true
|
||||||
|
});
|
||||||
|
|
||||||
this._sections = sections;
|
this._sections = sections;
|
||||||
this._nCols = nCols;
|
this._nCols = nCols;
|
||||||
this._nRows = nRows;
|
this._nRows = nRows;
|
||||||
@ -596,7 +606,7 @@ var EmojiPager = class EmojiPager {
|
|||||||
panAction.connect('gesture-cancel', this._onPanCancel.bind(this));
|
panAction.connect('gesture-cancel', this._onPanCancel.bind(this));
|
||||||
panAction.connect('gesture-end', this._onPanEnd.bind(this));
|
panAction.connect('gesture-end', this._onPanEnd.bind(this));
|
||||||
this._panAction = panAction;
|
this._panAction = panAction;
|
||||||
this.actor.add_action(panAction);
|
this.add_action(panAction);
|
||||||
}
|
}
|
||||||
|
|
||||||
get delta() {
|
get delta() {
|
||||||
@ -626,8 +636,8 @@ var EmojiPager = class EmojiPager {
|
|||||||
if (followingPage != null) {
|
if (followingPage != null) {
|
||||||
this._followingPanel = this._generatePanel(followingPage);
|
this._followingPanel = this._generatePanel(followingPage);
|
||||||
this._followingPanel.set_pivot_point(0.5, 0.5);
|
this._followingPanel.set_pivot_point(0.5, 0.5);
|
||||||
this.actor.add_child(this._followingPanel);
|
this.add_child(this._followingPanel);
|
||||||
this.actor.set_child_below_sibling(this._followingPanel, this._panel);
|
this.set_child_below_sibling(this._followingPanel, this._panel);
|
||||||
}
|
}
|
||||||
|
|
||||||
this._followingPage = followingPage;
|
this._followingPage = followingPage;
|
||||||
@ -675,12 +685,12 @@ var EmojiPager = class EmojiPager {
|
|||||||
}
|
}
|
||||||
|
|
||||||
_onPanBegin() {
|
_onPanBegin() {
|
||||||
this._width = this.actor.width;
|
this._width = this.width;
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
_onPanEnd() {
|
_onPanEnd() {
|
||||||
if (Math.abs(this._delta) < this.actor.width * PANEL_SWITCH_RELATIVE_DISTANCE) {
|
if (Math.abs(this._delta) < this.width * PANEL_SWITCH_RELATIVE_DISTANCE) {
|
||||||
this._onPanCancel();
|
this._onPanCancel();
|
||||||
} else {
|
} else {
|
||||||
let value;
|
let value;
|
||||||
@ -705,7 +715,7 @@ var EmojiPager = class EmojiPager {
|
|||||||
}
|
}
|
||||||
|
|
||||||
_onPanCancel() {
|
_onPanCancel() {
|
||||||
let relDelta = Math.abs(this._delta) / this.actor.width;
|
let relDelta = Math.abs(this._delta) / this.width;
|
||||||
let time = PANEL_SWITCH_ANIMATION_TIME * Math.abs(relDelta);
|
let time = PANEL_SWITCH_ANIMATION_TIME * Math.abs(relDelta);
|
||||||
|
|
||||||
Tweener.removeTweens(this);
|
Tweener.removeTweens(this);
|
||||||
@ -823,7 +833,7 @@ var EmojiPager = class EmojiPager {
|
|||||||
|
|
||||||
if (!this._panel) {
|
if (!this._panel) {
|
||||||
this._panel = this._generatePanel(nPage);
|
this._panel = this._generatePanel(nPage);
|
||||||
this.actor.add_child(this._panel);
|
this.add_child(this._panel);
|
||||||
}
|
}
|
||||||
|
|
||||||
let page = this._pages[nPage];
|
let page = this._pages[nPage];
|
||||||
@ -840,8 +850,7 @@ var EmojiPager = class EmojiPager {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
});
|
||||||
Signals.addSignalMethods(EmojiPager.prototype);
|
|
||||||
|
|
||||||
var EmojiSelection = class EmojiSelection {
|
var EmojiSelection = class EmojiSelection {
|
||||||
constructor() {
|
constructor() {
|
||||||
|
@ -66,8 +66,11 @@ var OsdWindow = class {
|
|||||||
this._label = new St.Label();
|
this._label = new St.Label();
|
||||||
this._box.add(this._label);
|
this._box.add(this._label);
|
||||||
|
|
||||||
this._level = new BarLevel.BarLevel(0, { styleClass: 'level' });
|
this._level = new BarLevel.BarLevel({
|
||||||
this._box.add(this._level.actor);
|
style_class: 'level',
|
||||||
|
value: 0
|
||||||
|
});
|
||||||
|
this._box.add(this._level);
|
||||||
|
|
||||||
this._hideTimeoutId = 0;
|
this._hideTimeoutId = 0;
|
||||||
this._reset();
|
this._reset();
|
||||||
@ -107,7 +110,7 @@ var OsdWindow = class {
|
|||||||
}
|
}
|
||||||
|
|
||||||
setLevel(value) {
|
setLevel(value) {
|
||||||
this._level.actor.visible = (value != undefined);
|
this._level.visible = (value != undefined);
|
||||||
if (value != undefined) {
|
if (value != undefined) {
|
||||||
if (this.actor.visible)
|
if (this.actor.visible)
|
||||||
Tweener.addTween(this._level,
|
Tweener.addTween(this._level,
|
||||||
|
@ -1,27 +1,31 @@
|
|||||||
/* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
|
/* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
|
||||||
/* exported Slider */
|
/* exported Slider */
|
||||||
|
|
||||||
const { Atk, Clutter } = imports.gi;
|
const { Atk, Clutter, GObject } = imports.gi;
|
||||||
const Signals = imports.signals;
|
|
||||||
|
|
||||||
const BarLevel = imports.ui.barLevel;
|
const BarLevel = imports.ui.barLevel;
|
||||||
|
|
||||||
var SLIDER_SCROLL_STEP = 0.02; /* Slider scrolling step in % */
|
var SLIDER_SCROLL_STEP = 0.02; /* Slider scrolling step in % */
|
||||||
|
|
||||||
var Slider = class extends BarLevel.BarLevel {
|
var Slider = GObject.registerClass({
|
||||||
constructor(value) {
|
Signals: {
|
||||||
let params = {
|
'drag-begin': {},
|
||||||
styleClass: 'slider',
|
'drag-end': {}
|
||||||
canFocus: true,
|
}
|
||||||
|
}, class Slider extends BarLevel.BarLevel {
|
||||||
|
_init(value) {
|
||||||
|
super._init({
|
||||||
|
value,
|
||||||
|
style_class: 'slider',
|
||||||
|
can_focus: true,
|
||||||
reactive: true,
|
reactive: true,
|
||||||
accessibleRole: Atk.Role.SLIDER,
|
accessible_role: Atk.Role.SLIDER
|
||||||
};
|
});
|
||||||
super(value, params);
|
|
||||||
|
|
||||||
this.actor.connect('button-press-event', this._startDragging.bind(this));
|
this.connect('button-press-event', this._startDragging.bind(this));
|
||||||
this.actor.connect('touch-event', this._touchDragging.bind(this));
|
this.connect('touch-event', this._touchDragging.bind(this));
|
||||||
this.actor.connect('scroll-event', this._onScrollEvent.bind(this));
|
this.connect('scroll-event', this._onScrollEvent.bind(this));
|
||||||
this.actor.connect('key-press-event', this.onKeyPressEvent.bind(this));
|
this.connect('key-press-event', this.onKeyPressEvent.bind(this));
|
||||||
|
|
||||||
this._releaseId = this._motionId = 0;
|
this._releaseId = this._motionId = 0;
|
||||||
this._dragging = false;
|
this._dragging = false;
|
||||||
@ -29,13 +33,13 @@ var Slider = class extends BarLevel.BarLevel {
|
|||||||
this._customAccessible.connect('get-minimum-increment', this._getMinimumIncrement.bind(this));
|
this._customAccessible.connect('get-minimum-increment', this._getMinimumIncrement.bind(this));
|
||||||
}
|
}
|
||||||
|
|
||||||
_barLevelRepaint(area) {
|
vfunc_repaint() {
|
||||||
super._barLevelRepaint(area);
|
super.vfunc_repaint();
|
||||||
|
|
||||||
// Add handle
|
// Add handle
|
||||||
let cr = area.get_context();
|
let cr = this.get_context();
|
||||||
let themeNode = area.get_theme_node();
|
let themeNode = this.get_theme_node();
|
||||||
let [width, height] = area.get_surface_size();
|
let [width, height] = this.get_surface_size();
|
||||||
|
|
||||||
let handleRadius = themeNode.get_length('-slider-handle-radius');
|
let handleRadius = themeNode.get_length('-slider-handle-radius');
|
||||||
|
|
||||||
@ -72,20 +76,20 @@ var Slider = class extends BarLevel.BarLevel {
|
|||||||
let sequence = event.get_event_sequence();
|
let sequence = event.get_event_sequence();
|
||||||
|
|
||||||
if (sequence != null)
|
if (sequence != null)
|
||||||
device.sequence_grab(sequence, this.actor);
|
device.sequence_grab(sequence, this);
|
||||||
else
|
else
|
||||||
device.grab(this.actor);
|
device.grab(this);
|
||||||
|
|
||||||
this._grabbedDevice = device;
|
this._grabbedDevice = device;
|
||||||
this._grabbedSequence = sequence;
|
this._grabbedSequence = sequence;
|
||||||
|
|
||||||
if (sequence == null) {
|
if (sequence == null) {
|
||||||
this._releaseId = this.actor.connect('button-release-event', this._endDragging.bind(this));
|
this._releaseId = this.connect('button-release-event', this._endDragging.bind(this));
|
||||||
this._motionId = this.actor.connect('motion-event', this._motionEvent.bind(this));
|
this._motionId = this.connect('motion-event', this._motionEvent.bind(this));
|
||||||
}
|
}
|
||||||
|
|
||||||
// We need to emit 'drag-begin' before moving the handle to make
|
// We need to emit 'drag-begin' before moving the handle to make
|
||||||
// sure that no 'value-changed' signal is emitted before this one.
|
// sure that no 'notify::value' signal is emitted before this one.
|
||||||
this.emit('drag-begin');
|
this.emit('drag-begin');
|
||||||
|
|
||||||
let absX, absY;
|
let absX, absY;
|
||||||
@ -97,9 +101,9 @@ var Slider = class extends BarLevel.BarLevel {
|
|||||||
_endDragging() {
|
_endDragging() {
|
||||||
if (this._dragging) {
|
if (this._dragging) {
|
||||||
if (this._releaseId)
|
if (this._releaseId)
|
||||||
this.actor.disconnect(this._releaseId);
|
this.disconnect(this._releaseId);
|
||||||
if (this._motionId)
|
if (this._motionId)
|
||||||
this.actor.disconnect(this._motionId);
|
this.disconnect(this._motionId);
|
||||||
|
|
||||||
if (this._grabbedSequence != null)
|
if (this._grabbedSequence != null)
|
||||||
this._grabbedDevice.sequence_ungrab(this._grabbedSequence);
|
this._grabbedDevice.sequence_ungrab(this._grabbedSequence);
|
||||||
@ -153,8 +157,8 @@ var Slider = class extends BarLevel.BarLevel {
|
|||||||
|
|
||||||
this._value = Math.min(Math.max(0, this._value + delta), this._maxValue);
|
this._value = Math.min(Math.max(0, this._value + delta), this._maxValue);
|
||||||
|
|
||||||
this.actor.queue_repaint();
|
this.queue_repaint();
|
||||||
this.emit('value-changed', this._value);
|
this.notify('value');
|
||||||
return Clutter.EVENT_STOP;
|
return Clutter.EVENT_STOP;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -174,9 +178,9 @@ var Slider = class extends BarLevel.BarLevel {
|
|||||||
if (key == Clutter.KEY_Right || key == Clutter.KEY_Left) {
|
if (key == Clutter.KEY_Right || key == Clutter.KEY_Left) {
|
||||||
let delta = key == Clutter.KEY_Right ? 0.1 : -0.1;
|
let delta = key == Clutter.KEY_Right ? 0.1 : -0.1;
|
||||||
this._value = Math.max(0, Math.min(this._value + delta, this._maxValue));
|
this._value = Math.max(0, Math.min(this._value + delta, this._maxValue));
|
||||||
this.actor.queue_repaint();
|
this.queue_repaint();
|
||||||
this.emit('drag-begin');
|
this.emit('drag-begin');
|
||||||
this.emit('value-changed', this._value);
|
this.notify('value');
|
||||||
this.emit('drag-end');
|
this.emit('drag-end');
|
||||||
return Clutter.EVENT_STOP;
|
return Clutter.EVENT_STOP;
|
||||||
}
|
}
|
||||||
@ -185,11 +189,11 @@ var Slider = class extends BarLevel.BarLevel {
|
|||||||
|
|
||||||
_moveHandle(absX, _absY) {
|
_moveHandle(absX, _absY) {
|
||||||
let relX, sliderX;
|
let relX, sliderX;
|
||||||
[sliderX] = this.actor.get_transformed_position();
|
[sliderX] = this.get_transformed_position();
|
||||||
relX = absX - sliderX;
|
relX = absX - sliderX;
|
||||||
|
|
||||||
let width = this._barLevelWidth;
|
let width = this._barLevelWidth;
|
||||||
let handleRadius = this.actor.get_theme_node().get_length('-slider-handle-radius');
|
let handleRadius = this.get_theme_node().get_length('-slider-handle-radius');
|
||||||
|
|
||||||
let newvalue;
|
let newvalue;
|
||||||
if (relX < handleRadius)
|
if (relX < handleRadius)
|
||||||
@ -199,12 +203,11 @@ var Slider = class extends BarLevel.BarLevel {
|
|||||||
else
|
else
|
||||||
newvalue = (relX - handleRadius) / (width - 2 * handleRadius);
|
newvalue = (relX - handleRadius) / (width - 2 * handleRadius);
|
||||||
this._value = newvalue * this._maxValue;
|
this._value = newvalue * this._maxValue;
|
||||||
this.actor.queue_repaint();
|
this.queue_repaint();
|
||||||
this.emit('value-changed', this._value);
|
this.notify('value');
|
||||||
}
|
}
|
||||||
|
|
||||||
_getMinimumIncrement() {
|
_getMinimumIncrement() {
|
||||||
return 0.1;
|
return 0.1;
|
||||||
}
|
}
|
||||||
};
|
});
|
||||||
Signals.addSignalMethods(Slider.prototype);
|
|
||||||
|
@ -33,13 +33,13 @@ var Indicator = class extends PanelMenu.SystemIndicator {
|
|||||||
this.menu.addMenuItem(this._item);
|
this.menu.addMenuItem(this._item);
|
||||||
|
|
||||||
this._slider = new Slider.Slider(0);
|
this._slider = new Slider.Slider(0);
|
||||||
this._slider.connect('value-changed', this._sliderChanged.bind(this));
|
this._slider.connect('notify::value', this._sliderChanged.bind(this));
|
||||||
this._slider.actor.accessible_name = _("Brightness");
|
this._slider.accessible_name = _("Brightness");
|
||||||
|
|
||||||
let icon = new St.Icon({ icon_name: 'display-brightness-symbolic',
|
let icon = new St.Icon({ icon_name: 'display-brightness-symbolic',
|
||||||
style_class: 'popup-menu-icon' });
|
style_class: 'popup-menu-icon' });
|
||||||
this._item.add(icon);
|
this._item.add(icon);
|
||||||
this._item.add(this._slider.actor, { expand: true });
|
this._item.add(this._slider, { expand: true });
|
||||||
this._item.connect('button-press-event', (actor, event) => {
|
this._item.connect('button-press-event', (actor, event) => {
|
||||||
return this._slider.startDragging(event);
|
return this._slider.startDragging(event);
|
||||||
});
|
});
|
||||||
@ -49,8 +49,8 @@ var Indicator = class extends PanelMenu.SystemIndicator {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
_sliderChanged(slider, value) {
|
_sliderChanged() {
|
||||||
let percent = value * 100;
|
let percent = this._slider.value * 100;
|
||||||
this._proxy.Brightness = percent;
|
this._proxy.Brightness = percent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -36,12 +36,12 @@ var StreamSlider = class {
|
|||||||
this._soundSettings.connect(`changed::${ALLOW_AMPLIFIED_VOLUME_KEY}`, this._amplifySettingsChanged.bind(this));
|
this._soundSettings.connect(`changed::${ALLOW_AMPLIFIED_VOLUME_KEY}`, this._amplifySettingsChanged.bind(this));
|
||||||
this._amplifySettingsChanged();
|
this._amplifySettingsChanged();
|
||||||
|
|
||||||
this._slider.connect('value-changed', this._sliderChanged.bind(this));
|
this._slider.connect('notify::value', this._sliderChanged.bind(this));
|
||||||
this._slider.connect('drag-end', this._notifyVolumeChange.bind(this));
|
this._slider.connect('drag-end', this._notifyVolumeChange.bind(this));
|
||||||
|
|
||||||
this._icon = new St.Icon({ style_class: 'popup-menu-icon' });
|
this._icon = new St.Icon({ style_class: 'popup-menu-icon' });
|
||||||
this.item.add(this._icon);
|
this.item.add(this._icon);
|
||||||
this.item.add(this._slider.actor, { expand: true });
|
this.item.add(this._slider, { expand: true });
|
||||||
this.item.connect('button-press-event', (actor, event) => {
|
this.item.connect('button-press-event', (actor, event) => {
|
||||||
return this._slider.startDragging(event);
|
return this._slider.startDragging(event);
|
||||||
});
|
});
|
||||||
@ -99,10 +99,11 @@ var StreamSlider = class {
|
|||||||
return this._slider.scroll(event);
|
return this._slider.scroll(event);
|
||||||
}
|
}
|
||||||
|
|
||||||
_sliderChanged(slider, value) {
|
_sliderChanged() {
|
||||||
if (!this._stream)
|
if (!this._stream)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
|
let value = this._slider.value;
|
||||||
let volume = value * this._control.get_vol_max_norm();
|
let volume = value * this._control.get_vol_max_norm();
|
||||||
let prevMuted = this._stream.is_muted;
|
let prevMuted = this._stream.is_muted;
|
||||||
if (volume < 1) {
|
if (volume < 1) {
|
||||||
@ -189,7 +190,7 @@ Signals.addSignalMethods(StreamSlider.prototype);
|
|||||||
var OutputStreamSlider = class extends StreamSlider {
|
var OutputStreamSlider = class extends StreamSlider {
|
||||||
constructor(control) {
|
constructor(control) {
|
||||||
super(control);
|
super(control);
|
||||||
this._slider.actor.accessible_name = _("Volume");
|
this._slider.accessible_name = _("Volume");
|
||||||
}
|
}
|
||||||
|
|
||||||
_connectStream(stream) {
|
_connectStream(stream) {
|
||||||
@ -237,7 +238,7 @@ var OutputStreamSlider = class extends StreamSlider {
|
|||||||
var InputStreamSlider = class extends StreamSlider {
|
var InputStreamSlider = class extends StreamSlider {
|
||||||
constructor(control) {
|
constructor(control) {
|
||||||
super(control);
|
super(control);
|
||||||
this._slider.actor.accessible_name = _("Microphone");
|
this._slider.accessible_name = _("Microphone");
|
||||||
this._control.connect('stream-added', this._maybeShowInput.bind(this));
|
this._control.connect('stream-added', this._maybeShowInput.bind(this));
|
||||||
this._control.connect('stream-removed', this._maybeShowInput.bind(this));
|
this._control.connect('stream-removed', this._maybeShowInput.bind(this));
|
||||||
this._icon.icon_name = 'audio-input-microphone-symbolic';
|
this._icon.icon_name = 'audio-input-microphone-symbolic';
|
||||||
|
@ -244,21 +244,24 @@ var ThumbnailState = {
|
|||||||
/**
|
/**
|
||||||
* @metaWorkspace: a #Meta.Workspace
|
* @metaWorkspace: a #Meta.Workspace
|
||||||
*/
|
*/
|
||||||
var WorkspaceThumbnail = class {
|
var WorkspaceThumbnail = GObject.registerClass(
|
||||||
constructor(metaWorkspace) {
|
class WorkspaceThumbnail extends St.Widget {
|
||||||
|
_init(metaWorkspace) {
|
||||||
|
super._init({
|
||||||
|
clip_to_allocation: true,
|
||||||
|
style_class: 'workspace-thumbnail'
|
||||||
|
});
|
||||||
|
this._delegate = this;
|
||||||
|
|
||||||
this.metaWorkspace = metaWorkspace;
|
this.metaWorkspace = metaWorkspace;
|
||||||
this.monitorIndex = Main.layoutManager.primaryIndex;
|
this.monitorIndex = Main.layoutManager.primaryIndex;
|
||||||
|
|
||||||
this._removed = false;
|
this._removed = false;
|
||||||
|
|
||||||
this.actor = new St.Widget({ clip_to_allocation: true,
|
|
||||||
style_class: 'workspace-thumbnail' });
|
|
||||||
this.actor._delegate = this;
|
|
||||||
|
|
||||||
this._contents = new Clutter.Actor();
|
this._contents = new Clutter.Actor();
|
||||||
this.actor.add_child(this._contents);
|
this.add_child(this._contents);
|
||||||
|
|
||||||
this.actor.connect('destroy', this._onDestroy.bind(this));
|
this.connect('destroy', this._onDestroy.bind(this));
|
||||||
|
|
||||||
this._createBackground();
|
this._createBackground();
|
||||||
|
|
||||||
@ -308,7 +311,7 @@ var WorkspaceThumbnail = class {
|
|||||||
}
|
}
|
||||||
|
|
||||||
setPorthole(x, y, width, height) {
|
setPorthole(x, y, width, height) {
|
||||||
this.actor.set_size(width, height);
|
this.set_size(width, height);
|
||||||
this._contents.set_position(-x, -y);
|
this._contents.set_position(-x, -y);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -336,7 +339,7 @@ var WorkspaceThumbnail = class {
|
|||||||
|
|
||||||
set slidePosition(slidePosition) {
|
set slidePosition(slidePosition) {
|
||||||
this._slidePosition = slidePosition;
|
this._slidePosition = slidePosition;
|
||||||
this.actor.queue_relayout();
|
this.queue_relayout();
|
||||||
}
|
}
|
||||||
|
|
||||||
get slidePosition() {
|
get slidePosition() {
|
||||||
@ -345,7 +348,7 @@ var WorkspaceThumbnail = class {
|
|||||||
|
|
||||||
set collapseFraction(collapseFraction) {
|
set collapseFraction(collapseFraction) {
|
||||||
this._collapseFraction = collapseFraction;
|
this._collapseFraction = collapseFraction;
|
||||||
this.actor.queue_relayout();
|
this.queue_relayout();
|
||||||
}
|
}
|
||||||
|
|
||||||
get collapseFraction() {
|
get collapseFraction() {
|
||||||
@ -446,11 +449,6 @@ var WorkspaceThumbnail = class {
|
|||||||
this._doAddWindow(metaWin);
|
this._doAddWindow(metaWin);
|
||||||
}
|
}
|
||||||
|
|
||||||
destroy() {
|
|
||||||
if (this.actor)
|
|
||||||
this.actor.destroy();
|
|
||||||
}
|
|
||||||
|
|
||||||
workspaceRemoved() {
|
workspaceRemoved() {
|
||||||
if (this._removed)
|
if (this._removed)
|
||||||
return;
|
return;
|
||||||
@ -475,7 +473,6 @@ var WorkspaceThumbnail = class {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this._windows = [];
|
this._windows = [];
|
||||||
this.actor = null;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tests if @actor belongs to this workspace and monitor
|
// Tests if @actor belongs to this workspace and monitor
|
||||||
@ -590,8 +587,7 @@ var WorkspaceThumbnail = class {
|
|||||||
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
};
|
});
|
||||||
Signals.addSignalMethods(WorkspaceThumbnail.prototype);
|
|
||||||
|
|
||||||
|
|
||||||
var ThumbnailsBox = GObject.registerClass(
|
var ThumbnailsBox = GObject.registerClass(
|
||||||
@ -688,8 +684,8 @@ class ThumbnailsBox extends St.Widget {
|
|||||||
|
|
||||||
for (let i = 0; i < this._thumbnails.length; i++) {
|
for (let i = 0; i < this._thumbnails.length; i++) {
|
||||||
let thumbnail = this._thumbnails[i];
|
let thumbnail = this._thumbnails[i];
|
||||||
let [, h] = thumbnail.actor.get_transformed_size();
|
let [, h] = thumbnail.get_transformed_size();
|
||||||
if (y >= thumbnail.actor.y && y <= thumbnail.actor.y + h) {
|
if (y >= thumbnail.y && y <= thumbnail.y + h) {
|
||||||
thumbnail.activate(time);
|
thumbnail.activate(time);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
@ -769,14 +765,14 @@ class ThumbnailsBox extends St.Widget {
|
|||||||
if (this._dropPlaceholderPos == 0)
|
if (this._dropPlaceholderPos == 0)
|
||||||
targetBase = this._dropPlaceholder.y;
|
targetBase = this._dropPlaceholder.y;
|
||||||
else
|
else
|
||||||
targetBase = this._thumbnails[0].actor.y;
|
targetBase = this._thumbnails[0].y;
|
||||||
let targetTop = targetBase - spacing - WORKSPACE_CUT_SIZE;
|
let targetTop = targetBase - spacing - WORKSPACE_CUT_SIZE;
|
||||||
let length = this._thumbnails.length;
|
let length = this._thumbnails.length;
|
||||||
for (let i = 0; i < length; i ++) {
|
for (let i = 0; i < length; i ++) {
|
||||||
// Allow the reorder target to have a 10px "cut" into
|
// Allow the reorder target to have a 10px "cut" into
|
||||||
// each side of the thumbnail, to make dragging onto the
|
// each side of the thumbnail, to make dragging onto the
|
||||||
// placeholder easier
|
// placeholder easier
|
||||||
let [, h] = this._thumbnails[i].actor.get_transformed_size();
|
let [, h] = this._thumbnails[i].get_transformed_size();
|
||||||
let targetBottom = targetBase + WORKSPACE_CUT_SIZE;
|
let targetBottom = targetBase + WORKSPACE_CUT_SIZE;
|
||||||
let nextTargetBase = targetBase + h + spacing;
|
let nextTargetBase = targetBase + h + spacing;
|
||||||
let nextTargetTop = nextTargetBase - spacing - ((i == length - 1) ? 0 : WORKSPACE_CUT_SIZE);
|
let nextTargetTop = nextTargetBase - spacing - ((i == length - 1) ? 0 : WORKSPACE_CUT_SIZE);
|
||||||
@ -955,7 +951,7 @@ class ThumbnailsBox extends St.Widget {
|
|||||||
thumbnail.setPorthole(this._porthole.x, this._porthole.y,
|
thumbnail.setPorthole(this._porthole.x, this._porthole.y,
|
||||||
this._porthole.width, this._porthole.height);
|
this._porthole.width, this._porthole.height);
|
||||||
this._thumbnails.push(thumbnail);
|
this._thumbnails.push(thumbnail);
|
||||||
this.add_actor(thumbnail.actor);
|
this.add_actor(thumbnail);
|
||||||
|
|
||||||
if (start > 0 && this._spliceIndex == -1) {
|
if (start > 0 && this._spliceIndex == -1) {
|
||||||
// not the initial fill, and not splicing via DND
|
// not the initial fill, and not splicing via DND
|
||||||
@ -1289,8 +1285,8 @@ class ThumbnailsBox extends St.Widget {
|
|||||||
childBox.y1 = y1;
|
childBox.y1 = y1;
|
||||||
childBox.y2 = y1 + portholeHeight;
|
childBox.y2 = y1 + portholeHeight;
|
||||||
|
|
||||||
thumbnail.actor.set_scale(roundedHScale, roundedVScale);
|
thumbnail.set_scale(roundedHScale, roundedVScale);
|
||||||
thumbnail.actor.allocate(childBox, flags);
|
thumbnail.allocate(childBox, flags);
|
||||||
|
|
||||||
// We round the collapsing portion so that we don't get thumbnails resizing
|
// We round the collapsing portion so that we don't get thumbnails resizing
|
||||||
// during an animation due to differences in rounded, but leave the uncollapsed
|
// during an animation due to differences in rounded, but leave the uncollapsed
|
||||||
@ -1328,7 +1324,7 @@ class ThumbnailsBox extends St.Widget {
|
|||||||
let indicatorTopFullBorder = indicatorThemeNode.get_padding(St.Side.TOP) + indicatorThemeNode.get_border_width(St.Side.TOP);
|
let indicatorTopFullBorder = indicatorThemeNode.get_padding(St.Side.TOP) + indicatorThemeNode.get_border_width(St.Side.TOP);
|
||||||
this.indicatorY = this._indicator.allocation.y1 + indicatorTopFullBorder;
|
this.indicatorY = this._indicator.allocation.y1 + indicatorTopFullBorder;
|
||||||
Tweener.addTween(this,
|
Tweener.addTween(this,
|
||||||
{ indicatorY: thumbnail.actor.allocation.y1,
|
{ indicatorY: thumbnail.allocation.y1,
|
||||||
time: WorkspacesView.WORKSPACE_SWITCH_TIME / 1000,
|
time: WorkspacesView.WORKSPACE_SWITCH_TIME / 1000,
|
||||||
transition: 'easeOutQuad',
|
transition: 'easeOutQuad',
|
||||||
onComplete: () => {
|
onComplete: () => {
|
||||||
|
Loading…
Reference in New Issue
Block a user