[gnome-shell] popupMenu: Use an image for arrows



commit 0418b68051e0bfec3e1a97344e105fa8c875ec05
Author: Carlos Soriano <carlos soriano89 gmail com>
Date:   Tue Feb 18 13:45:26 2014 +0100

    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(-)
---
diff --git a/data/Makefile.am b/data/Makefile.am
index 4f91709..a73affd 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 61a6284..4b04890 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 0000000..07acaa8
--- /dev/null
+++ b/data/theme/menu-arrow-symbolic.svg
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/";
+   xmlns:cc="http://creativecommons.org/ns#";
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+   xmlns:svg="http://www.w3.org/2000/svg";
+   xmlns="http://www.w3.org/2000/svg";
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+   width="16"
+   height="16"
+   id="svg3863"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="menu-arrow.svg">
+  <defs
+     id="defs3865" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="15.836083"
+     inkscape:cx="-3.1641676"
+     inkscape:cy="11.823817"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1366"
+     inkscape:window-height="702"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-bbox="true">
+    <sodipodi:guide
+       orientation="1,0"
+       position="15.996443,16.922964"
+       id="guide3873" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="28.041217,3.1256134"
+       id="guide3875" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-0.80372916,24.469088"
+       id="guide3877" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="3.0363102,34.649657"
+       id="guide3879" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="29.023553,28.577037"
+       id="guide3881" />
+    <inkscape:grid
+       type="xygrid"
+       id="grid2988" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata3868">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     transform="translate(0,-16)">
+    <path
+       style="fill:#ffffff;fill-opacity:1;stroke:none"
+       d="m 4,23 8,0 -4,5 z"
+       id="path3883"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccc" />
+  </g>
+</svg>
diff --git a/js/ui/panel.js b/js/ui/panel.js
index cfa6fdb..e7f8df9 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 b51c7c7..af0d9e1 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 1ed9bf6..56f8211 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 8d9960e..8d6242d 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');


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]