diff --git a/data/icons/smooth-symbolic.svg b/data/icons/smooth-symbolic.svg new file mode 100644 index 0000000..903a0f5 --- /dev/null +++ b/data/icons/smooth-symbolic.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/menu.js b/menu.js index 8adea81..1e63b86 100644 --- a/menu.js +++ b/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'); - this.menu.addAction(_("Redo"), this.area.redo.bind(this.area), 'edit-redo-symbolic'); - this.menu.addAction(_("Erase"), this.area.deleteLastElement.bind(this.area), 'edit-clear-all-symbolic'); - this.menu.addAction(_("Smooth"), this.area.smoothLastElement.bind(this.area), 'format-text-strikethrough-symbolic'); - this._addSeparator(this.menu); + let groupItem = new PopupMenu.PopupBaseMenuItem({ reactive: false, can_focus: false, style_class: "draw-on-your-screen-menu-group-item" }); + groupItem.add_child(this._createActionButton(_("Undo"), this.area.undo.bind(this.area), 'edit-undo-symbolic')); + groupItem.add_child(this._createActionButton(_("Redo"), this.area.redo.bind(this.area), 'edit-redo-symbolic')); + groupItem.add_child(this._createActionButton(_("Erase"), this.area.deleteLastElement.bind(this.area), 'edit-clear-all-symbolic')); + 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); } } diff --git a/stylesheet.css b/stylesheet.css index 4d7e94f..0419322 100644 --- a/stylesheet.css +++ b/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;