From 0418b68051e0bfec3e1a97344e105fa8c875ec05 Mon Sep 17 00:00:00 2001 From: Carlos Soriano Date: Tue, 18 Feb 2014 13:45:26 +0100 Subject: [PATCH] popupMenu: Use an image for arrows Until now the arrows were the associated arrow character of the font. This cause some problems like different arrows for different fonts, and size can be altered because of the font size. To solve that, use an image for the arrows. https://bugzilla.gnome.org/show_bug.cgi?id=720206 --- data/Makefile.am | 1 + data/theme/gnome-shell.css | 5 +- data/theme/menu-arrow-symbolic.svg | 90 ++++++++++++++++++++++++++++++ js/ui/panel.js | 4 +- js/ui/popupMenu.js | 31 ++++++---- js/ui/status/accessibility.js | 2 +- js/ui/status/keyboard.js | 2 +- 7 files changed, 117 insertions(+), 18 deletions(-) create mode 100644 data/theme/menu-arrow-symbolic.svg diff --git a/data/Makefile.am b/data/Makefile.am index 4f91709d6..a73affd10 100644 --- a/data/Makefile.am +++ b/data/Makefile.am @@ -39,6 +39,7 @@ dist_theme_DATA = \ theme/filter-selected-rtl.svg \ theme/gnome-shell.css \ theme/logged-in-indicator.svg \ + theme/menu-arrow-symbolic.svg \ theme/message-tray-background.png \ theme/more-results.svg \ theme/noise-texture.png \ diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index 61a6284dd..4b0489011 100644 --- a/data/theme/gnome-shell.css +++ b/data/theme/gnome-shell.css @@ -157,8 +157,9 @@ StScrollBar StButton#vhandle:active { min-width: 200px; } -.unicode-arrow { - font-size: 120%; +.popup-menu-arrow { + width: 16px; + height: 16px; } .popup-submenu-menu-item:open { diff --git a/data/theme/menu-arrow-symbolic.svg b/data/theme/menu-arrow-symbolic.svg new file mode 100644 index 000000000..07acaa8e0 --- /dev/null +++ b/data/theme/menu-arrow-symbolic.svg @@ -0,0 +1,90 @@ + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/js/ui/panel.js b/js/ui/panel.js index cfa6fdb4e..e7f8df92a 100644 --- a/js/ui/panel.js +++ b/js/ui/panel.js @@ -213,7 +213,7 @@ const AppMenuButton = new Lang.Class({ this._label = new TextShadower(); this._label.actor.y_align = Clutter.ActorAlign.CENTER; this._hbox.add_actor(this._label.actor); - this._arrow = PopupMenu.unicodeArrow(St.Side.BOTTOM); + this._arrow = PopupMenu.arrowIcon(St.Side.BOTTOM); this._hbox.add_actor(this._arrow); this._iconBottomClip = 0; @@ -842,7 +842,7 @@ const AggregateMenu = new Lang.Class({ this._indicators.add_child(this._rfkill.indicators); this._indicators.add_child(this._volume.indicators); this._indicators.add_child(this._power.indicators); - this._indicators.add_child(PopupMenu.unicodeArrow(St.Side.BOTTOM)); + this._indicators.add_child(PopupMenu.arrowIcon(St.Side.BOTTOM)); this.menu.addMenuItem(this._volume.menu); this.menu.addMenuItem(this._brightness.menu); diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js index b51c7c795..af0d9e19f 100644 --- a/js/ui/popupMenu.js +++ b/js/ui/popupMenu.js @@ -45,28 +45,35 @@ function isPopupMenuItemVisible(child) { /** * @side Side to which the arrow points. */ -function unicodeArrow(side) { - let arrowChar; +function arrowIcon(side) { + let rotation; switch (side) { case St.Side.TOP: - arrowChar = '\u25B4'; + rotation = 180; break; case St.Side.RIGHT: - arrowChar = '\u25B8'; + rotation = - 90; break; case St.Side.BOTTOM: - arrowChar = '\u25BE'; + rotation = 0; break; case St.Side.LEFT: - arrowChar = '\u25C2'; + rotation = 90; break; } - return new St.Label({ text: arrowChar, - style_class: 'unicode-arrow', - accessible_role: Atk.Role.ARROW, - y_expand: true, - y_align: Clutter.ActorAlign.CENTER }); + let gicon = new Gio.FileIcon({ file: Gio.File.new_for_path(global.datadir + + '/theme/menu-arrow-symbolic.svg') }); + + let arrow = new St.Icon({ style_class: 'popup-menu-arrow', + gicon: gicon, + accessible_role: Atk.Role.ARROW, + y_expand: true, + y_align: Clutter.ActorAlign.CENTER }); + + arrow.rotation_angle_z = rotation; + + return arrow; } const PopupBaseMenuItem = new Lang.Class({ @@ -993,7 +1000,7 @@ const PopupSubMenuMenuItem = new Lang.Class({ y_align: Clutter.ActorAlign.CENTER }); this.actor.add_child(this.status); - this._triangle = unicodeArrow(St.Side.RIGHT); + this._triangle = arrowIcon(St.Side.RIGHT); this._triangle.pivot_point = new Clutter.Point({ x: 0.5, y: 0.6 }); this._triangleBin = new St.Widget({ y_expand: true, diff --git a/js/ui/status/accessibility.js b/js/ui/status/accessibility.js index 1ed9bf62b..56f821180 100644 --- a/js/ui/status/accessibility.js +++ b/js/ui/status/accessibility.js @@ -44,7 +44,7 @@ const ATIndicator = new Lang.Class({ this._hbox = new St.BoxLayout({ style_class: 'panel-status-menu-box' }); this._hbox.add_child(new St.Icon({ style_class: 'system-status-icon', icon_name: 'preferences-desktop-accessibility-symbolic' })); - this._hbox.add_child(PopupMenu.unicodeArrow(St.Side.BOTTOM)); + this._hbox.add_child(PopupMenu.arrowIcon(St.Side.BOTTOM)); this.actor.add_child(this._hbox); diff --git a/js/ui/status/keyboard.js b/js/ui/status/keyboard.js index 8d9960ee1..8d6242da2 100644 --- a/js/ui/status/keyboard.js +++ b/js/ui/status/keyboard.js @@ -341,7 +341,7 @@ const InputSourceIndicator = new Lang.Class({ this._hbox = new St.BoxLayout({ style_class: 'panel-status-menu-box' }); this._hbox.add_child(this._container); - this._hbox.add_child(PopupMenu.unicodeArrow(St.Side.BOTTOM)); + this._hbox.add_child(PopupMenu.arrowIcon(St.Side.BOTTOM)); this.actor.add_child(this._hbox); this.actor.add_style_class_name('panel-status-button');