regroup first menu items

Like old GS system menu.

data/icons/smooth-symbolic.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 576 576" xmlns="http://www.w3.org/2000/svg">
+  <rect fill="#555" stroke="none" x="99.06" y="116.46" width="426.79" height="88.9" transform="translate(-1.13,-26.30) translate(297.56,177.87) rotate(-17.00) translate(-297.56,-177.87) translate(-14.89,16.96)"/>
+  <rect fill="#555" stroke="none" x="382.92" y="219.17" width="137.39" height="55" transform="translate(-7.43,-27.23) translate(449.62,218.30) rotate(-16.48) translate(-449.62,-218.30) translate(-2,-19.20)"/>
+  <rect fill="#555" stroke="none" x="99.06" y="116.46" width="426.79" height="88.9" transform="translate(0, 284.75) rotate(180) scale(1, -1) rotate(-180) translate(0, -284.75) translate(-1.13,-26.30) translate(297.56,177.87) rotate(-17.00) translate(-297.56,-177.87) translate(-14.89,16.96)"/>
+  <rect fill="#555" stroke="none" x="382.92" y="219.17" width="137.39" height="55" transform="translate(0, 284.02) rotate(180) scale(1, -1) rotate(-180) translate(0, -284.02) translate(-7.43,-27.23) translate(449.62,218.30) rotate(-16.48) translate(-449.62,-218.30) translate(-2,-19.20)"/>
+</svg>

menu.js

@@ -44,6 +44,7 @@ const _ = imports.gettext.domain(Me.metadata['gettext-domain']).gettext;
 const GS_VERSION = Config.PACKAGE_VERSION;
 
 const ICON_DIR = Me.dir.get_child('data').get_child('icons');
+const SMOOTH_ICON_PATH = ICON_DIR.get_child('smooth-symbolic.svg').get_path();
 const COLOR_ICON_PATH = ICON_DIR.get_child('color-symbolic.svg').get_path();
 const FILL_ICON_PATH = ICON_DIR.get_child('fill-symbolic.svg').get_path();
 const STROKE_ICON_PATH = ICON_DIR.get_child('stroke-symbolic.svg').get_path();
@@ -91,6 +92,7 @@ var DrawingMenu = new Lang.Class({
         };
         
         this.colorIcon = new Gio.FileIcon({ file: Gio.File.new_for_path(COLOR_ICON_PATH) });
+        this.smoothIcon = new Gio.FileIcon({ file: Gio.File.new_for_path(SMOOTH_ICON_PATH) });
         this.strokeIcon = new Gio.FileIcon({ file: Gio.File.new_for_path(STROKE_ICON_PATH) });
         this.fillIcon = new Gio.FileIcon({ file: Gio.File.new_for_path(FILL_ICON_PATH) });
         this.fillRuleNonzeroIcon = new Gio.FileIcon({ file: Gio.File.new_for_path(FILLRULE_NONZERO_ICON_PATH) });
@@ -148,11 +150,13 @@ var DrawingMenu = new Lang.Class({
     _redisplay: function() {
         this.menu.removeAll();
         
-        this.menu.addAction(_("Undo"), this.area.undo.bind(this.area), 'edit-undo-symbolic');
+        let groupItem = new PopupMenu.PopupBaseMenuItem({ reactive: false, can_focus: false, style_class: "draw-on-your-screen-menu-group-item" });
-        this.menu.addAction(_("Redo"), this.area.redo.bind(this.area), 'edit-redo-symbolic');
+        groupItem.add_child(this._createActionButton(_("Undo"), this.area.undo.bind(this.area), 'edit-undo-symbolic'));
-        this.menu.addAction(_("Erase"), this.area.deleteLastElement.bind(this.area), 'edit-clear-all-symbolic');
+        groupItem.add_child(this._createActionButton(_("Redo"), this.area.redo.bind(this.area), 'edit-redo-symbolic'));
-        this.menu.addAction(_("Smooth"), this.area.smoothLastElement.bind(this.area), 'format-text-strikethrough-symbolic');
+        groupItem.add_child(this._createActionButton(_("Erase"), this.area.deleteLastElement.bind(this.area), 'edit-clear-all-symbolic'));
-        this._addSeparator(this.menu);
+        groupItem.add_child(this._createActionButton(_("Smooth"), this.area.smoothLastElement.bind(this.area), this.smoothIcon)/*, { expand: true, x_fill: false }*/);
+        this.menu.addMenuItem(groupItem);
+        this._addSeparator(this.menu, true);
         
         this._addSubMenuItem(this.menu, 'document-edit-symbolic', Area.ToolNames, this.area, 'currentTool', this._updateSectionVisibility.bind(this));
         this._addColorSubMenuItem(this.menu);
@@ -203,6 +207,19 @@ var DrawingMenu = new Lang.Class({
         this._updateSectionVisibility();
     },
     
+    // from system.js (GS 3.34-)
+    _createActionButton: function(accessibleName, callback, icon) {
+        let button = new St.Button({ reactive: true,
+                                     can_focus: true,
+                                     track_hover: true,
+                                     x_align: Clutter.ActorAlign.CENTER,
+                                     accessible_name: accessibleName,
+                                     style_class: 'system-menu-action' });
+        button.child = new St.Icon(typeof icon == 'string' ? { icon_name: icon } : { gicon: icon });
+        button.connect('clicked', callback);
+        return new St.Bin({ child: button, x_expand: true });
+    },
+    
     _updateSectionVisibility: function() {
         if (this.area.currentTool != Area.Tools.TEXT) {
             this.lineSection.actor.show();
@@ -461,10 +478,12 @@ var DrawingMenu = new Lang.Class({
         this.saveDrawingSubMenu.addMenuItem(saveEntry.item);
     },
     
-    _addSeparator: function(menu) {
+    _addSeparator: function(menu, thin) {
         if (this.hasSeparators) {
             let separatorItem = new PopupMenu.PopupSeparatorMenuItem(' ');
             getActor(separatorItem).add_style_class_name('draw-on-your-screen-menu-separator-item');
+            if (thin)
+                getActor(separatorItem).add_style_class_name('draw-on-your-screen-menu-thin-separator-item');
             menu.addMenuItem(separatorItem);
         }
     }

stylesheet.css

@@ -58,6 +58,7 @@
 }
 
 .draw-on-your-screen-menu-separator-item {
+    margin-top: 0;
     padding-top: 0.14em;
     padding-bottom: 0.14em;
 }
@@ -71,6 +72,40 @@
     margin-bottom: 0.2em; /* default 6px */
 }
 
+.draw-on-your-screen-menu-separator-item .popup-separator-menu-item-separator {
+    background-color: transparent;
+}
+
+.draw-on-your-screen-menu-thin-separator-item .popup-separator-menu-item-separator {
+    margin-top: 0;
+}
+
+/* system-menu-action: from GS 3.34- */
+.draw-on-your-screen-menu .system-menu-action {
+  background-color: #353535;
+  color: #eeeeec;
+  border-radius: 32px;
+  padding: 12px;
+  border: none;
+}
+
+.draw-on-your-screen-menu .system-menu-action:hover,
+.draw-on-your-screen-menu .system-menu-action:focus {
+    background-color: #484848;
+    color: #eeeeec;
+    border: none;
+    padding: 12px;
+}
+
+.draw-on-your-screen-menu .system-menu-action:active {
+    background-color: #1b6acb;
+    color: #ffffff;
+}
+
+.draw-on-your-screen-menu .system-menu-action > StIcon {
+    icon-size: 16px;
+}
+
 .draw-on-your-screen-menu-slider-label {
     min-width: 3em;
     text-align: right;