From 2a8eea1ff5dea03ef5a9c8eb2a7e3c90ef3de3a7 Mon Sep 17 00:00:00 2001 From: Carlos Garnacho Date: Thu, 28 May 2020 13:34:57 +0200 Subject: [PATCH 01/12] padOsd: Fix .allocate() call This was not updated to the API change in commit 9a8ced9f5b6. https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1290 --- js/ui/padOsd.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/ui/padOsd.js b/js/ui/padOsd.js index f696533357..ddeb28e7d0 100644 --- a/js/ui/padOsd.js +++ b/js/ui/padOsd.js @@ -415,7 +415,7 @@ var PadDiagram = GObject.registerClass({ childBox.y1 = y - natHeight / 2; childBox.y2 = y + natHeight / 2; - child.allocate(childBox, 0); + child.allocate(childBox); } vfunc_allocate(box) { -- GitLab From 989ee6593be206638fe2ef0ffa03c427a2814ebf Mon Sep 17 00:00:00 2001 From: Carlos Garnacho Date: Thu, 28 May 2020 13:36:25 +0200 Subject: [PATCH 02/12] padOsd: Disable ellipsizing in title label We make the label text large and let it ellipsize. It ends up doing so instead of allowing the label to expand. This title is important and we don't want it to be ellipsized, so ensure that won't happen. Fixes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/2845 https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1290 --- js/ui/padOsd.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/ui/padOsd.js b/js/ui/padOsd.js index ddeb28e7d0..d898c3560c 100644 --- a/js/ui/padOsd.js +++ b/js/ui/padOsd.js @@ -2,7 +2,7 @@ /* exported PadOsd, PadOsdService */ const { Atk, Clutter, GDesktopEnums, Gio, - GLib, GObject, Gtk, Meta, Rsvg, St } = imports.gi; + GLib, GObject, Gtk, Meta, Pango, Rsvg, St } = imports.gi; const Signals = imports.signals; const Main = imports.ui.main; @@ -693,6 +693,7 @@ var PadOsd = GObject.registerClass({ this._titleLabel = new St.Label({ style: 'font-side: larger; font-weight: bold;', x_align: Clutter.ActorAlign.CENTER }); + this._titleLabel.clutter_text.set_ellipsize(Pango.EllipsizeMode.NONE); this._titleLabel.clutter_text.set_text(padDevice.get_device_name()); labelBox.add_actor(this._titleLabel); -- GitLab From 963f96292deb4907eead60c5e2c7326574c1f8d6 Mon Sep 17 00:00:00 2001 From: Carlos Garnacho Date: Thu, 28 May 2020 13:38:36 +0200 Subject: [PATCH 03/12] padOsd: Fix double styling We set the StLabel style property, there's no need to re-apply the large/bold text style via markup. Makes the StLabel text size consistent across editable state changes. https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1290 --- js/ui/padOsd.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/js/ui/padOsd.js b/js/ui/padOsd.js index d898c3560c..221c8ddd6d 100644 --- a/js/ui/padOsd.js +++ b/js/ui/padOsd.js @@ -868,8 +868,7 @@ var PadOsd = GObject.registerClass({ this._tipLabel.set_text(_("Press any key to exit")); } - this._titleLabel.clutter_text.set_markup( - '%s'.format(title)); + this._titleLabel.set_text(title); } _isEditedAction(type, number, dir) { -- GitLab From c90e7ce25814f6dcd0e52c00961fe936649811b0 Mon Sep 17 00:00:00 2001 From: Carlos Garnacho Date: Thu, 28 May 2020 14:03:13 +0200 Subject: [PATCH 04/12] padOsd: Move button/ring/strip label creation to PadDiagram It's the natural container of those. We can create all those labels internally, and only expose the updateLabels() method to update them wholesome. https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1290 --- js/ui/padOsd.js | 62 ++++++++++++++++++++++++------------------------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/js/ui/padOsd.js b/js/ui/padOsd.js index 221c8ddd6d..d874f000e2 100644 --- a/js/ui/padOsd.js +++ b/js/ui/padOsd.js @@ -329,6 +329,7 @@ var PadDiagram = GObject.registerClass({ this._imagePath = imagePath; this._handle = this._composeStyledDiagram(); + this._initLabels(); } // eslint-disable-next-line camelcase @@ -343,6 +344,33 @@ var PadDiagram = GObject.registerClass({ this.add_actor(actor); } + _initLabels() { + // FIXME: Fix num buttons. + let i = 0; + for (i = 0; i < 50; i++) { + let [found] = this.getButtonLabelCoords(i); + if (!found) + break; + this._addLabel(Meta.PadActionType.BUTTON, i); + } + + for (i = 0; i < 2; i++) { + let [found] = this.getRingLabelCoords(i, CW); + if (!found) + break; + this._addLabel(Meta.PadActionType.RING, i, CW); + this._addLabel(Meta.PadActionType.RING, i, CCW); + } + + for (i = 0; i < 2; i++) { + let [found] = this.getStripLabelCoords(i, UP); + if (!found) + break; + this._addLabel(Meta.PadActionType.STRIP, i, UP); + this._addLabel(Meta.PadActionType.STRIP, i, DOWN); + } + } + _wrappingSvgHeader() { return '' + ' Date: Thu, 28 May 2020 19:54:25 +0200 Subject: [PATCH 05/12] padOsd: Make label coordinates API "private" This is only called internally, and only needed there. https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1290 --- js/ui/padOsd.js | 37 +++++++++++++++++-------------------- 1 file changed, 17 insertions(+), 20 deletions(-) diff --git a/js/ui/padOsd.js b/js/ui/padOsd.js index d874f000e2..4a28126f39 100644 --- a/js/ui/padOsd.js +++ b/js/ui/padOsd.js @@ -348,14 +348,14 @@ var PadDiagram = GObject.registerClass({ // FIXME: Fix num buttons. let i = 0; for (i = 0; i < 50; i++) { - let [found] = this.getButtonLabelCoords(i); + let [found] = this._getLabelCoords(Meta.PadActionType.BUTTON, i); if (!found) break; this._addLabel(Meta.PadActionType.BUTTON, i); } for (i = 0; i < 2; i++) { - let [found] = this.getRingLabelCoords(i, CW); + let [found] = this._getLabelCoords(Meta.PadActionType.RING, i, CW); if (!found) break; this._addLabel(Meta.PadActionType.RING, i, CW); @@ -363,7 +363,7 @@ var PadDiagram = GObject.registerClass({ } for (i = 0; i < 2; i++) { - let [found] = this.getStripLabelCoords(i, UP); + let [found] = this._getLabelCoords(Meta.PadActionType.STRIP, i, UP); if (!found) break; this._addLabel(Meta.PadActionType.STRIP, i, UP); @@ -452,13 +452,13 @@ var PadDiagram = GObject.registerClass({ for (let i = 0; i < this._labels.length; i++) { let [label, action, idx, dir] = this._labels[i]; - let [found_, x, y, arrangement] = this.getLabelCoords(action, idx, dir); + let [found_, x, y, arrangement] = this._getLabelCoords(action, idx, dir); this._allocateChild(label, x, y, arrangement); } if (this._editorActor && this._curEdited) { let [label_, action, idx, dir] = this._curEdited; - let [found_, x, y, arrangement] = this.getLabelCoords(action, idx, dir); + let [found_, x, y, arrangement] = this._getLabelCoords(action, idx, dir); this._allocateChild(this._editorActor, x, y, arrangement); } } @@ -528,39 +528,36 @@ var PadDiagram = GObject.registerClass({ return [true, x, y, direction]; } - getButtonLabelCoords(button) { + _getButtonLabels(button) { let ch = String.fromCharCode('A'.charCodeAt() + button); let labelName = 'Label%s'.format(ch); let leaderName = 'Leader%s'.format(ch); - - return this._getItemLabelCoords(labelName, leaderName); + return [labelName, leaderName]; } - getRingLabelCoords(number, dir) { + _getRingLabels(number, dir) { let numStr = number > 0 ? (number + 1).toString() : ''; let dirStr = dir == CW ? 'CW' : 'CCW'; let labelName = 'LabelRing%s%s'.format(numStr, dirStr); let leaderName = 'LeaderRing%s%s'.format(numStr, dirStr); - - return this._getItemLabelCoords(labelName, leaderName); + return [labelName, leaderName]; } - getStripLabelCoords(number, dir) { + _getStripLabels(number, dir) { let numStr = number > 0 ? (number + 1).toString() : ''; let dirStr = dir == UP ? 'Up' : 'Down'; let labelName = 'LabelStrip%s%s'.format(numStr, dirStr); let leaderName = 'LeaderStrip%s%s'.format(numStr, dirStr); - - return this._getItemLabelCoords(labelName, leaderName); + return [labelName, leaderName]; } - getLabelCoords(action, idx, dir) { + _getLabelCoords(action, idx, dir) { if (action == Meta.PadActionType.BUTTON) - return this.getButtonLabelCoords(idx); + return this._getItemLabelCoords(...this._getButtonLabels(idx)); else if (action == Meta.PadActionType.RING) - return this.getRingLabelCoords(idx, dir); + return this._getItemLabelCoords(...this._getRingLabels(idx, dir)); else if (action == Meta.PadActionType.STRIP) - return this.getStripLabelCoords(idx, dir); + return this._getItemLabelCoords(...this._getStripLabels(idx, dir)); return [false]; } @@ -603,7 +600,7 @@ var PadDiagram = GObject.registerClass({ if (str != null) { label.set_text(str); - let [found_, x, y, arrangement] = this.getLabelCoords(action, idx, dir); + let [found_, x, y, arrangement] = this._getLabelCoords(action, idx, dir); this._allocateChild(label, x, y, arrangement); } label.show(); @@ -644,7 +641,7 @@ var PadDiagram = GObject.registerClass({ if (this._curEdited == null) return; - let [found] = this.getLabelCoords(action, idx, dir); + let [found] = this._getLabelCoords(action, idx, dir); if (!found) return; this._editorActor.show(); -- GitLab From c511c469fe9826de896a1adb97a0069b87273ef6 Mon Sep 17 00:00:00 2001 From: Carlos Garnacho Date: Fri, 29 May 2020 15:43:55 +0200 Subject: [PATCH 06/12] padOsd: Move all coord/existence checks to _addLabel() Drops some repetitive code. Also rely completely on the label/leader elements being found in order to find buttons/rings/strips. https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1290 --- js/ui/padOsd.js | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/js/ui/padOsd.js b/js/ui/padOsd.js index 4a28126f39..500f74ccfd 100644 --- a/js/ui/padOsd.js +++ b/js/ui/padOsd.js @@ -345,29 +345,22 @@ var PadDiagram = GObject.registerClass({ } _initLabels() { - // FIXME: Fix num buttons. let i = 0; - for (i = 0; i < 50; i++) { - let [found] = this._getLabelCoords(Meta.PadActionType.BUTTON, i); - if (!found) + for (i = 0; ; i++) { + if (!this._addLabel(Meta.PadActionType.BUTTON, i)) break; - this._addLabel(Meta.PadActionType.BUTTON, i); } - for (i = 0; i < 2; i++) { - let [found] = this._getLabelCoords(Meta.PadActionType.RING, i, CW); - if (!found) + for (i = 0; ; i++) { + if (!this._addLabel(Meta.PadActionType.RING, i, CW) || + !this._addLabel(Meta.PadActionType.RING, i, CCW)) break; - this._addLabel(Meta.PadActionType.RING, i, CW); - this._addLabel(Meta.PadActionType.RING, i, CCW); } - for (i = 0; i < 2; i++) { - let [found] = this._getLabelCoords(Meta.PadActionType.STRIP, i, UP); - if (!found) + for (i = 0; ; i++) { + if (!this._addLabel(Meta.PadActionType.STRIP, i, UP) || + !this._addLabel(Meta.PadActionType.STRIP, i, DOWN)) break; - this._addLabel(Meta.PadActionType.STRIP, i, UP); - this._addLabel(Meta.PadActionType.STRIP, i, DOWN); } } @@ -583,9 +576,14 @@ var PadDiagram = GObject.registerClass({ } _addLabel(type, idx, dir) { + let [found] = this._getLabelCoords(type, idx, dir); + if (!found) + return false; + let label = new St.Label(); this._labels.push([label, type, idx, dir]); this.add_actor(label); + return true; } updateLabels(getText) { -- GitLab From 989118981bf30ecae246e5894a7c4de397e316c9 Mon Sep 17 00:00:00 2001 From: Carlos Garnacho Date: Fri, 29 May 2020 15:53:33 +0200 Subject: [PATCH 07/12] padOsd: Use map to store misc action label data We'll be adding more stuff here, so it's a bit inconvenient to keep it an array. https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1290 --- js/ui/padOsd.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/js/ui/padOsd.js b/js/ui/padOsd.js index 500f74ccfd..8f84effd55 100644 --- a/js/ui/padOsd.js +++ b/js/ui/padOsd.js @@ -444,13 +444,13 @@ var PadDiagram = GObject.registerClass({ this._updateDiagramScale(); for (let i = 0; i < this._labels.length; i++) { - let [label, action, idx, dir] = this._labels[i]; + const { label, action, idx, dir } = this._labels[i]; let [found_, x, y, arrangement] = this._getLabelCoords(action, idx, dir); this._allocateChild(label, x, y, arrangement); } if (this._editorActor && this._curEdited) { - let [label_, action, idx, dir] = this._curEdited; + const { action, idx, dir } = this._curEdited; let [found_, x, y, arrangement] = this._getLabelCoords(action, idx, dir); this._allocateChild(this._editorActor, x, y, arrangement); } @@ -575,20 +575,20 @@ var PadDiagram = GObject.registerClass({ this._invalidateSvg(); } - _addLabel(type, idx, dir) { - let [found] = this._getLabelCoords(type, idx, dir); + _addLabel(action, idx, dir) { + let [found] = this._getLabelCoords(action, idx, dir); if (!found) return false; let label = new St.Label(); - this._labels.push([label, type, idx, dir]); + this._labels.push({ label, action, idx, dir }); this.add_actor(label); return true; } updateLabels(getText) { for (let i = 0; i < this._labels.length; i++) { - let [label, action, idx, dir] = this._labels[i]; + const { label, action, idx, dir } = this._labels[i]; let str = getText(action, idx, dir); label.set_text(str); } @@ -608,13 +608,13 @@ var PadDiagram = GObject.registerClass({ this._editorActor.hide(); if (this._prevEdited) { - let [label, action, idx, dir] = this._prevEdited; + const { label, action, idx, dir } = this._prevEdited; this._applyLabel(label, action, idx, dir, str); this._prevEdited = null; } if (this._curEdited) { - let [label, action, idx, dir] = this._curEdited; + const { label, action, idx, dir } = this._curEdited; this._applyLabel(label, action, idx, dir, str); if (continues) this._prevEdited = this._curEdited; @@ -629,10 +629,10 @@ var PadDiagram = GObject.registerClass({ return; for (let i = 0; i < this._labels.length; i++) { - let [label, itemAction, itemIdx, itemDir] = this._labels[i]; - if (action == itemAction && idx == itemIdx && dir == itemDir) { + if (action == this._labels[i].action && + idx == this._labels[i].idx && dir == this._labels[i].dir) { this._curEdited = this._labels[i]; - editedLabel = label; + editedLabel = this._curEdited.label; break; } } -- GitLab From ece13291453b83d81b32602b25554ea9e1382d8b Mon Sep 17 00:00:00 2001 From: Carlos Garnacho Date: Fri, 29 May 2020 15:59:32 +0200 Subject: [PATCH 08/12] padOsd: Drop needless call If we got this far, we are dealing with an already known label. There's no need for this check. https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1290 --- js/ui/padOsd.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/js/ui/padOsd.js b/js/ui/padOsd.js index 8f84effd55..32b0584dda 100644 --- a/js/ui/padOsd.js +++ b/js/ui/padOsd.js @@ -639,9 +639,6 @@ var PadDiagram = GObject.registerClass({ if (this._curEdited == null) return; - let [found] = this._getLabelCoords(action, idx, dir); - if (!found) - return; this._editorActor.show(); editedLabel.hide(); } -- GitLab From f58cb3406571ffba104a8436c7a32bf4e2da0a52 Mon Sep 17 00:00:00 2001 From: Carlos Garnacho Date: Fri, 29 May 2020 16:05:57 +0200 Subject: [PATCH 09/12] padOsd: Only allocate child labels within allocate vfunc Make both start/stop edition and label updates queue a relayout, and only deal with child allocations in the allocate method. https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1290 --- js/ui/padOsd.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/js/ui/padOsd.js b/js/ui/padOsd.js index 32b0584dda..3e7b7beac0 100644 --- a/js/ui/padOsd.js +++ b/js/ui/padOsd.js @@ -592,15 +592,13 @@ var PadDiagram = GObject.registerClass({ let str = getText(action, idx, dir); label.set_text(str); } + + this.queue_relayout(); } _applyLabel(label, action, idx, dir, str) { - if (str != null) { + if (str !== null) label.set_text(str); - - let [found_, x, y, arrangement] = this._getLabelCoords(action, idx, dir); - this._allocateChild(label, x, y, arrangement); - } label.show(); } @@ -620,6 +618,8 @@ var PadDiagram = GObject.registerClass({ this._prevEdited = this._curEdited; this._curEdited = null; } + + this.queue_relayout(); } startEdition(action, idx, dir) { @@ -641,6 +641,7 @@ var PadDiagram = GObject.registerClass({ return; this._editorActor.show(); editedLabel.hide(); + this.queue_relayout(); } }); -- GitLab From 63abfc163d90275fb18fa3f449786d13a95cdf02 Mon Sep 17 00:00:00 2001 From: Carlos Garnacho Date: Fri, 29 May 2020 16:07:28 +0200 Subject: [PATCH 10/12] padOsd: Cache label coordinates/arrangements This is actually static for a given PadDiagram, as it always represents a single device. Fixes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/2570 https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1290 --- js/ui/padOsd.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/js/ui/padOsd.js b/js/ui/padOsd.js index 3e7b7beac0..8aadf5114a 100644 --- a/js/ui/padOsd.js +++ b/js/ui/padOsd.js @@ -444,14 +444,12 @@ var PadDiagram = GObject.registerClass({ this._updateDiagramScale(); for (let i = 0; i < this._labels.length; i++) { - const { label, action, idx, dir } = this._labels[i]; - let [found_, x, y, arrangement] = this._getLabelCoords(action, idx, dir); + const { label, x, y, arrangement } = this._labels[i]; this._allocateChild(label, x, y, arrangement); } if (this._editorActor && this._curEdited) { - const { action, idx, dir } = this._curEdited; - let [found_, x, y, arrangement] = this._getLabelCoords(action, idx, dir); + const { x, y, arrangement } = this._curEdited; this._allocateChild(this._editorActor, x, y, arrangement); } } @@ -576,12 +574,12 @@ var PadDiagram = GObject.registerClass({ } _addLabel(action, idx, dir) { - let [found] = this._getLabelCoords(action, idx, dir); + let [found, x, y, arrangement] = this._getLabelCoords(action, idx, dir); if (!found) return false; let label = new St.Label(); - this._labels.push({ label, action, idx, dir }); + this._labels.push({ label, action, idx, dir, x, y, arrangement }); this.add_actor(label); return true; } -- GitLab From 8a89de04a236a645e3460d023a6b1822f46d7567 Mon Sep 17 00:00:00 2001 From: Carlos Garnacho Date: Fri, 29 May 2020 16:59:46 +0200 Subject: [PATCH 11/12] padOsd: Keep label coordinates in image coordinates Apply the necessary transforms to map those coordinates to actor positions in the allocate phase. This all fits since it's the place where we do know the size the actor will have. https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1290 --- js/ui/padOsd.js | 26 +++++++++----------------- 1 file changed, 9 insertions(+), 17 deletions(-) diff --git a/js/ui/padOsd.js b/js/ui/padOsd.js index 8aadf5114a..3d825f9ed7 100644 --- a/js/ui/padOsd.js +++ b/js/ui/padOsd.js @@ -411,9 +411,6 @@ var PadDiagram = GObject.registerClass({ } _updateDiagramScale() { - if (this._handle == null) - return; - [this._actorWidth, this._actorHeight] = this.get_size(); let dimensions = this._handle.get_dimensions(); let scaleX = this._actorWidth / dimensions.width; @@ -426,6 +423,11 @@ var PadDiagram = GObject.registerClass({ let [, natWidth] = child.get_preferred_width(natHeight); let childBox = new Clutter.ActorBox(); + // I miss Cairo.Matrix + let dimensions = this._handle.get_dimensions(); + x = x * this._scale + this._actorWidth / 2 - dimensions.width / 2 * this._scale; + y = y * this._scale + this._actorHeight / 2 - dimensions.height / 2 * this._scale; + if (direction == LTR) { childBox.x1 = x; childBox.x2 = x + natWidth; @@ -441,6 +443,9 @@ var PadDiagram = GObject.registerClass({ vfunc_allocate(box) { super.vfunc_allocate(box); + if (this._handle === null) + return; + this._updateDiagramScale(); for (let i = 0; i < this._labels.length; i++) { @@ -476,17 +481,6 @@ var PadDiagram = GObject.registerClass({ cr.$dispose(); } - _transformPoint(x, y) { - if (this._handle == null || this._scale == null) - return [x, y]; - - // I miss Cairo.Matrix - let dimensions = this._handle.get_dimensions(); - x = x * this._scale + this._actorWidth / 2 - dimensions.width / 2 * this._scale; - y = y * this._scale + this._actorHeight / 2 - dimensions.height / 2 * this._scale; - return [Math.round(x), Math.round(y)]; - } - _getItemLabelCoords(labelName, leaderName) { if (this._handle == null) return [false]; @@ -514,9 +508,7 @@ var PadDiagram = GObject.registerClass({ pos.y = this._imageHeight - pos.y; } - let [x, y] = this._transformPoint(pos.x, pos.y); - - return [true, x, y, direction]; + return [true, pos.x, pos.y, direction]; } _getButtonLabels(button) { -- GitLab From 315c8820ca3f77f5a7d52c2edfb9835bfcd1064c Mon Sep 17 00:00:00 2001 From: Carlos Garnacho Date: Fri, 29 May 2020 17:12:09 +0200 Subject: [PATCH 12/12] padOsd: Apply specific CSS to Button/Leader SVG classes Applying a fill operation on the Leader line path seems to close it, resulting in filled polygon. Bug or not this is not the intended result here, we can do less ambiguously by not specifying the fill CSS property to the Leader class. Fixes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/2570 https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1290 --- js/ui/padOsd.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/js/ui/padOsd.js b/js/ui/padOsd.js index 3d825f9ed7..115b72be2e 100644 --- a/js/ui/padOsd.js +++ b/js/ui/padOsd.js @@ -383,10 +383,8 @@ var PadDiagram = GObject.registerClass({ for (let i = 0; i < this._activeButtons.length; i++) { let ch = String.fromCharCode('A'.charCodeAt() + this._activeButtons[i]); - css += '.%s {'.format(ch); - css += ' stroke: %s !important;'.format(ACTIVE_COLOR); - css += ' fill: %s !important;'.format(ACTIVE_COLOR); - css += '}'; + css += '.%s.Leader { stroke: %s !important; }'.format(ch, ACTIVE_COLOR); + css += '.%s.Button { stroke: %s !important; fill: %s !important; }'.format(ch, ACTIVE_COLOR, ACTIVE_COLOR); } return css; -- GitLab