diff --git a/data/Makefile.am b/data/Makefile.am index f36951629..055ad3ae2 100644 --- a/data/Makefile.am +++ b/data/Makefile.am @@ -39,6 +39,7 @@ dist_theme_DATA = \ theme/process-working.svg \ theme/running-indicator.svg \ theme/source-button-border.svg \ + theme/summary-counter.svg \ theme/toggle-off-us.svg \ theme/toggle-off-intl.svg \ theme/toggle-on-us.svg \ diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index dee7e4c77..2337cef46 100644 --- a/data/theme/gnome-shell.css +++ b/data/theme/gnome-shell.css @@ -1438,13 +1438,14 @@ StButton.popup-menu-item:insensitive { } .summary-source-counter { - color: white; - background-color: #3465A4; - text-shadow: black 1px 1px 0; - font-size: 9pt; - border-radius: 1em; - min-height: 1em; - min-width: 1em; + background-image: url("summary-counter.svg"); + background-size: 2.5em; + font-size: 10pt; + font-weight: bold; + height: 2.5em; + width: 2.5em; + -shell-counter-overlap-x: 4px; + -shell-counter-overlap-y: 4px; } /* App Switcher */ diff --git a/data/theme/summary-counter.svg b/data/theme/summary-counter.svg new file mode 100644 index 000000000..c3264fde8 --- /dev/null +++ b/data/theme/summary-counter.svg @@ -0,0 +1,120 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js index 481161a17..1a6036651 100644 --- a/js/ui/messageTray.js +++ b/js/ui/messageTray.js @@ -953,11 +953,22 @@ const SourceActor = new Lang.Class({ })); this._actorDestroyed = false; - this._counterLabel = new St.Label(); + this._counterLabel = new St.Label( {x_align: Clutter.ActorAlign.CENTER, + x_expand: true, + y_align: Clutter.ActorAlign.CENTER, + y_expand: true }); + this._counterBin = new St.Bin({ style_class: 'summary-source-counter', - child: this._counterLabel }); + child: this._counterLabel, + layout_manager: new Clutter.BinLayout() }); this._counterBin.hide(); + this._counterBin.connect('style-changed', Lang.bind(this, function() { + let themeNode = this._counterBin.get_theme_node(); + this._counterBin.translation_x = themeNode.get_length('-shell-counter-overlap-x'); + this._counterBin.translation_y = themeNode.get_length('-shell-counter-overlap-y'); + })); + this._iconBin = new St.Bin({ width: size, height: size, x_fill: true, @@ -1026,7 +1037,14 @@ const SourceActor = new Lang.Class({ return; this._counterBin.visible = this._source.countVisible; - this._counterLabel.set_text(this._source.count.toString()); + + let text; + if (this._source.count < 100) + text = this._source.count.toString(); + else + text = String.fromCharCode(0x22EF); // midline horizontal ellipsis + + this._counterLabel.set_text(text); } });