diff --git a/appIcons.js b/appIcons.js index 977bf51..724e871 100644 --- a/appIcons.js +++ b/appIcons.js @@ -240,9 +240,9 @@ var taskbarAppIcon = Utils.defineClass({ this.forcedOverview = false; - this._numberOverlay(); - this._progressIndicator = new Progress.ProgressIndicator(this, panel.progressManager); + + this._numberOverlay(); }, getDragActor: function() { @@ -1145,35 +1145,44 @@ var taskbarAppIcon = Utils.defineClass({ _numberOverlay: function() { // Add label for a Hot-Key visual aid - this._numberOverlayLabel = new St.Label(); + this._numberOverlayLabel = new St.Label({ style_class: 'badge' }); this._numberOverlayBin = new St.Bin({ - child: this._numberOverlayLabel, - x_align: St.Align.START, y_align: St.Align.START, - x_expand: true, y_expand: true + child: this._numberOverlayLabel, y: 2 }); this._numberOverlayLabel.add_style_class_name('number-overlay'); this._numberOverlayOrder = -1; this._numberOverlayBin.hide(); - this._iconContainer.add_child(this._numberOverlayBin); - + this._dtpIconContainer.add_child(this._numberOverlayBin); }, - updateNumberOverlay: function() { + updateHotkeyNumberOverlay: function() { + this.updateNumberOverlay(this._numberOverlayBin, true); + }, + + updateNumberOverlay: function(bin, fixedSize) { // We apply an overall scale factor that might come from a HiDPI monitor. // Clutter dimensions are in physical pixels, but CSS measures are in logical // pixels, so make sure to consider the scale. let scaleFactor = St.ThemeContext.get_for_stage(global.stage).scale_factor; // Set the font size to something smaller than the whole icon so it is // still visible. The border radius is large to make the shape circular - let [minWidth, natWidth] = this._iconContainer.get_preferred_width(-1); - let font_size = Math.round(Math.max(12, 0.3*natWidth) / scaleFactor); - let size = Math.round(font_size*1.2); - this._numberOverlayLabel.set_style( - 'font-size: ' + font_size + 'px;' + - 'border-radius: ' + this.icon.iconSize + 'px;' + - 'width: ' + size + 'px; height: ' + size +'px;' - ); + let [minWidth, natWidth] = this._dtpIconContainer.get_preferred_width(-1); + let font_size = Math.round(Math.max(12, 0.3 * natWidth) / scaleFactor); + let size = Math.round(font_size * 1.3); + let label = bin.child; + let style = 'font-size: ' + font_size + 'px;' + + 'border-radius: ' + this.icon.iconSize + 'px;' + + 'height: ' + size +'px;'; + + if (fixedSize || label.get_text().length == 1) { + style += 'width: ' + size + 'px;'; + } else { + style += 'padding: 0 2px;'; + } + + bin.x = fixedSize ? natWidth - size - 2 : 2; + label.set_style(style); }, setNumberOverlay: function(number) { diff --git a/progress.js b/progress.js index 4cbf2ef..8a74c9a 100644 --- a/progress.js +++ b/progress.js @@ -280,18 +280,16 @@ var ProgressIndicator = Utils.defineClass({ this._signalsHandler.destroy(); }); - this._notificationBadgeLabel = new St.Label(); + this._notificationBadgeLabel = new St.Label({ style_class: 'badge' }); this._notificationBadgeBin = new St.Bin({ - child: this._notificationBadgeLabel, - x_align: St.Align.END, y_align: St.Align.START, - x_expand: true, y_expand: true + child: this._notificationBadgeLabel, y: 2, x: 2 }); this._notificationBadgeLabel.add_style_class_name('notification-badge'); this._notificationBadgeCount = 0; this._notificationBadgeBin.hide(); - this._source._iconContainer.add_child(this._notificationBadgeBin); - this._source._iconContainer.connect('allocation-changed', this.updateNotificationBadge.bind(this)); + this._source._dtpIconContainer.add_child(this._notificationBadgeBin); + this._source._dtpIconContainer.connect('allocation-changed', this.updateNotificationBadge.bind(this)); this._progressManagerEntries = []; this._progressManager.lookupById(this._source.app.id).forEach( @@ -334,18 +332,7 @@ var ProgressIndicator = Utils.defineClass({ }, updateNotificationBadge: function() { - let scaleFactor = St.ThemeContext.get_for_stage(global.stage).scale_factor; - let [minWidth, natWidth] = this._source._iconContainer.get_preferred_width(-1); - let logicalNatWidth = natWidth / scaleFactor; - let font_size = Math.max(10, Math.round(logicalNatWidth / 5)); - let margin_left = Math.round(logicalNatWidth / 4); - - this._notificationBadgeLabel.set_style( - 'font-size: ' + font_size + 'px;' + - 'margin-left: ' + margin_left + 'px;' - ); - - this._notificationBadgeBin.width = Math.round(logicalNatWidth - margin_left); + this._source.updateNumberOverlay(this._notificationBadgeBin); this._notificationBadgeLabel.clutter_text.ellipsize = Pango.EllipsizeMode.MIDDLE; }, diff --git a/stylesheet.css b/stylesheet.css index 3bc0a4e..4a7a6b6 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -59,23 +59,6 @@ margin-bottom: 0; } -#dashtopanelScrollview .notification-badge { - color: rgba(255,255,255,1); - background-color: rgba(255,0,0,1.0); - padding: 0.2em 0.5em; - border-radius: 1em; - font-weight: bold; - text-align: center; - margin: 2px; -} - -#dashtopanelScrollview .progress-bar { - /* Customization of the progress bar style, e.g.: - -progress-bar-background: rgba(0.8, 0.8, 0.8, 1); - -progress-bar-border: rgba(0.9, 0.9, 0.9, 1); - */ -} - #dashtopanelTaskbar .scrollview-fade { background-gradient-end: rgba(0, 0, 0, 0); } @@ -139,9 +122,23 @@ .panel-corner:active, .panel-corner:overview, .panel-corner:focus { -panel-corner-border-color: rgba(0, 0, 0, .001); } - -.number-overlay { - background-color: rgba(0,0,0,0.8); - color: rgba(256, 256, 256, 1); - text-align: center; +#dashtopanelScrollview .badge { + color: rgba(255, 255, 255, 1); + font-weight: bold; + text-align: center; +} + +#dashtopanelScrollview .number-overlay { + background-color: rgba(0,0,0,0.8); +} + +#dashtopanelScrollview .notification-badge { + background-color: rgba(255,0,0,0.8); +} + +#dashtopanelScrollview .progress-bar { + /* Customization of the progress bar style, e.g.: + -progress-bar-background: rgba(0.8, 0.8, 0.8, 1); + -progress-bar-border: rgba(0.9, 0.9, 0.9, 1); + */ } diff --git a/taskbar.js b/taskbar.js index 6833a54..ab339ed 100644 --- a/taskbar.js +++ b/taskbar.js @@ -913,7 +913,7 @@ var taskbar = Utils.defineClass({ icon.setNumberOverlay(-1); } - icon.updateNumberOverlay(); + icon.updateHotkeyNumberOverlay(); }); if (Me.settings.get_boolean('hot-keys') &&