nosklo
/
DrawOnYourScreen
mirror of https://codeberg.org/som/DrawOnYourScreen
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

improve menu icons 

use Gio FileIcon instead of Pixbuf because St.Icons made with Pixbuf are
not themable
replace 'stroke' icons with 'fill' icons
bind fill and dashedLine icons with properties
This commit is contained in:
abakkk 2019-03-29 16:35:18 +01:00
parent c30af6260f
commit 7a1fc3acff
7 changed files with 42 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
draw.js
View File

@ -22,7 +22,7 @@
const Cairo = imports.cairo; const Cairo = imports.cairo;
const Clutter = imports.gi.Clutter; const Clutter = imports.gi.Clutter;
const GdkPixbuf = imports.gi.GdkPixbuf; const Gio = imports.gi.Gio;
const GLib = imports.gi.GLib; const GLib = imports.gi.GLib;
const GObject = imports.gi.GObject; const GObject = imports.gi.GObject;
const Gtk = imports.gi.Gtk; const Gtk = imports.gi.Gtk;
@ -47,9 +47,11 @@ const Prefs = Extension.imports.prefs;
const _ = imports.gettext.domain(Extension.metadata["gettext-domain"]).gettext; const _ = imports.gettext.domain(Extension.metadata["gettext-domain"]).gettext;
const FILL_ICON_PATH = Extension.dir.get_child('icons').get_child('fill-symbolic.svg').get_path(); const FILL_ICON_PATH = Extension.dir.get_child('icons').get_child('fill-symbolic.svg').get_path();
const STROKE_ICON_PATH = Extension.dir.get_child('icons').get_child('stroke-symbolic.svg').get_path();
const LINEJOIN_ICON_PATH = Extension.dir.get_child('icons').get_child('linejoin-symbolic.svg').get_path(); const LINEJOIN_ICON_PATH = Extension.dir.get_child('icons').get_child('linejoin-symbolic.svg').get_path();
const LINECAP_ICON_PATH = Extension.dir.get_child('icons').get_child('linecap-symbolic.svg').get_path(); const LINECAP_ICON_PATH = Extension.dir.get_child('icons').get_child('linecap-symbolic.svg').get_path();
const DASHED_LINE_ICON_PATH = Extension.dir.get_child('icons').get_child('dashed-line-symbolic.svg').get_path(); const DASHED_LINE_ICON_PATH = Extension.dir.get_child('icons').get_child('dashed-line-symbolic.svg').get_path();
const FULL_LINE_ICON_PATH = Extension.dir.get_child('icons').get_child('full-line-symbolic.svg').get_path();
var Shapes = { NONE: 0, LINE: 1, ELLIPSE: 2, RECTANGLE: 3, TEXT: 4 }; var Shapes = { NONE: 0, LINE: 1, ELLIPSE: 2, RECTANGLE: 3, TEXT: 4 };
var TextState = { DRAWING: 0, WRITING: 1 }; var TextState = { DRAWING: 0, WRITING: 1 };
@ -1005,6 +1007,14 @@ var DrawingMenu = new Lang.Class({
// do not close the menu on item activated // do not close the menu on item activated
this.menu.itemActivated = () => {}; this.menu.itemActivated = () => {};
this.menu.connect('open-state-changed', this._onMenuOpenStateChanged.bind(this)); this.menu.connect('open-state-changed', this._onMenuOpenStateChanged.bind(this));
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.linejoinIcon = new Gio.FileIcon({ file: Gio.File.new_for_path(LINEJOIN_ICON_PATH) });
this.linecapIcon = new Gio.FileIcon({ file: Gio.File.new_for_path(LINECAP_ICON_PATH) });
this.fullLineIcon = new Gio.FileIcon({ file: Gio.File.new_for_path(FULL_LINE_ICON_PATH) });
this.dashedLineIcon = new Gio.FileIcon({ file: Gio.File.new_for_path(DASHED_LINE_ICON_PATH) });
}, },
disable: function() { disable: function() {
@ -1057,18 +1067,14 @@ var DrawingMenu = new Lang.Class({
this._addSubMenuItem(this.menu, null, ShapeNames, this.area, 'currentShape', this.updateSectionVisibility.bind(this)); this._addSubMenuItem(this.menu, null, ShapeNames, this.area, 'currentShape', this.updateSectionVisibility.bind(this));
this._addColorSubMenuItem(this.menu); this._addColorSubMenuItem(this.menu);
let fillIcon = GdkPixbuf.Pixbuf.new_from_file_at_size(FILL_ICON_PATH, 24, 24); this.fillItem = this._addSwitchItem(this.menu, _("Fill"), this.strokeIcon, this.fillIcon, this.area, 'fill', this.updateSectionVisibility.bind(this));
this._addSwitchItem(this.menu, _("Fill"), fillIcon, this.area, 'fill', this.updateSectionVisibility.bind(this));
this._addSeparator(this.menu); this._addSeparator(this.menu);
let lineSection = new PopupMenu.PopupMenuSection(); let lineSection = new PopupMenu.PopupMenuSection();
this._addSliderItem(lineSection, this.area, 'currentLineWidth'); this._addSliderItem(lineSection, this.area, 'currentLineWidth');
let linejoinIcon = GdkPixbuf.Pixbuf.new_from_file_at_size(LINEJOIN_ICON_PATH, 24, 24); this._addSubMenuItem(lineSection, this.linejoinIcon, LineJoinNames, this.area, 'currentLineJoin');
this._addSubMenuItem(lineSection, linejoinIcon, LineJoinNames, this.area, 'currentLineJoin'); this._addSubMenuItem(lineSection, this.linecapIcon, LineCapNames, this.area, 'currentLineCap');
let linecapIcon = GdkPixbuf.Pixbuf.new_from_file_at_size(LINECAP_ICON_PATH, 24, 24); this._addSwitchItem(lineSection, _("Dashed"), this.fullLineIcon, this.dashedLineIcon, this.area, 'dashedLine');
this._addSubMenuItem(lineSection, linecapIcon, LineCapNames, this.area, 'currentLineCap');
let dashedLineIcon = GdkPixbuf.Pixbuf.new_from_file_at_size(DASHED_LINE_ICON_PATH, 24, 24);
this._addSwitchItem(lineSection, _("Dashed"), dashedLineIcon, this.area, 'dashedLine');
this._addSeparator(lineSection); this._addSeparator(lineSection);
this.menu.addMenuItem(lineSection); this.menu.addMenuItem(lineSection);
lineSection.itemActivated = () => {}; lineSection.itemActivated = () => {};
@ -1103,30 +1109,30 @@ var DrawingMenu = new Lang.Class({
else else
this.lineSection.actor.show(); this.lineSection.actor.show();
if (this.area.currentShape != Shapes.TEXT) if (this.area.currentShape != Shapes.TEXT) {
this.fontSection.actor.hide(); this.fontSection.actor.hide();
else this.fillItem.setSensitive(true);
} else {
this.fontSection.actor.show(); this.fontSection.actor.show();
this.fillItem.setSensitive(false);
}
}, },
_addSwitchItem: function(menu, label, icon, target, targetProperty, callback) { _addSwitchItem: function(menu, label, iconFalse, iconTrue, target, targetProperty, callback) {
let item = new PopupMenu.PopupSwitchMenuItem(label, target[targetProperty]); let item = new PopupMenu.PopupSwitchMenuItem(label, target[targetProperty]);
if (icon) { item.icon = new St.Icon({ style_class: 'popup-menu-icon blabla' });
item.icon = new St.Icon({ style_class: 'popup-menu-icon' }); item.actor.insert_child_at_index(item.icon, 1);
item.actor.insert_child_at_index(item.icon, 1); item.icon.set_gicon(target[targetProperty] ? iconTrue : iconFalse);
if (icon instanceof GObject.Object && GObject.type_is_a(icon, GdkPixbuf.Pixbuf))
item.icon.set_gicon(icon);
else
item.icon.set_icon_name(icon);
}
item.connect('toggled', (item, state) => { item.connect('toggled', (item, state) => {
target[targetProperty] = state; target[targetProperty] = state;
item.icon.set_gicon(target[targetProperty] ? iconTrue : iconFalse);
if (callback) if (callback)
callback(); callback();
}); });
menu.addMenuItem(item); menu.addMenuItem(item);
return item;
}, },
_addSwitchItemWithCallback: function(menu, label, active, onToggled) { _addSwitchItemWithCallback: function(menu, label, active, onToggled) {
@ -1153,7 +1159,7 @@ var DrawingMenu = new Lang.Class({
_addSubMenuItem: function(menu, icon, obj, target, targetProperty, callback) { _addSubMenuItem: function(menu, icon, obj, target, targetProperty, callback) {
let item = new PopupMenu.PopupSubMenuMenuItem(_(obj[target[targetProperty]]), icon ? true : false); let item = new PopupMenu.PopupSubMenuMenuItem(_(obj[target[targetProperty]]), icon ? true : false);
if (icon && icon instanceof GObject.Object && GObject.type_is_a(icon, GdkPixbuf.Pixbuf)) if (icon && icon instanceof GObject.Object && GObject.type_is_a(icon, Gio.Icon))
item.icon.set_gicon(icon); item.icon.set_gicon(icon);
else if (icon) else if (icon)
item.icon.set_icon_name(icon); item.icon.set_icon_name(icon);

4
icons/dashed-line-symbolic.svg
View File

@ -1,3 +1,5 @@
<svg viewBox="0 0 576 576" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 576 576" xmlns="http://www.w3.org/2000/svg">
<path fill="transparent" stroke="#eeeeec" stroke-width="110" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="25 150.5" stroke-dashoffset="0" d="M100 288 L 476 288"/> <rect fill="#555" stroke="transparent" x="228" y="228" width="120" height="120"/>
<rect fill="#555" stroke="transparent" x="50" y="228" width="120" height="120"/>
<rect fill="#555" stroke="transparent" x="406" y="228" width="120" height="120"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 255 B

After

Width:  |  Height:  |  Size: 321 B

4
icons/fill-symbolic.svg
View File

@ -1,3 +1,3 @@
<svg viewBox="0 0 576 576" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="-50 -130 740 740" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<ellipse fill="#eeeeec" stroke="transparent" cx="288" cy="288" rx="260" ry="180"/> <ellipse fill="#555" stroke="transparent" cx="320" cy="240" rx="320" ry="240"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 155 B

After

Width:  |  Height:  |  Size: 196 B

3
icons/full-line-symbolic.svg Normal file
View File

@ -0,0 +1,3 @@
<svg viewBox="0 0 576 576" xmlns="http://www.w3.org/2000/svg">
<rect fill="#555" stroke="transparent" x="50" y="228" width="476" height="120"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 153 B

4
icons/linecap-symbolic.svg
View File

@ -1,4 +1,4 @@
<svg viewBox="0 0 576 576" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 576 576" xmlns="http://www.w3.org/2000/svg">
<path fill="transparent" stroke="#eeeeec" stroke-width="250" stroke-linecap="butt" stroke-linejoin="round" d="M50 288 L 350 288"/> <rect fill="#555" stroke="transparent" x="50" y="178" width="350" height="220"/>
<path fill="transparent" stroke="#eeeeec" stroke-width="250" stroke-linecap="round" stroke-linejoin="round" d="M300 288 L 400 288"/> <ellipse fill="#555" stroke="transparent" cx="400" cy="288" rx="130" ry="110"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 338 B

After

Width:  |  Height:  |  Size: 235 B

5
icons/linejoin-symbolic.svg
View File

@ -1,4 +1,3 @@
<svg viewBox="0 0 576 576" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="-50 -50 676 676" xmlns="http://www.w3.org/2000/svg">
<path fill="transparent" stroke="#eeeeec" stroke-width="110" stroke-linecap="round" stroke-linejoin="round" d="M288 90 L 55 512"/> <path fill="#555" stroke="transparent" d="M -13 518 L288 0 L589 518 L500 576 L288 217 L76 576z"/>
<path fill="transparent" stroke="#eeeeec" stroke-width="110" stroke-linecap="round" stroke-linejoin="round" d="M288 90 L 514 512"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 337 B

After

Width:  |  Height:  |  Size: 174 B

3
icons/stroke-symbolic.svg Normal file
View File

@ -0,0 +1,3 @@
<svg viewBox="-50 -130 740 740" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<path stroke="transparent" fill="#555" d="m4,239.99861l0,0c0,-130.70635 141.47749,-236.66527 315.99786,-236.66527l0,0c83.80939,0 164.18481,24.93385 223.44586,69.31971c59.2608,44.38261 92.55627,104.57763 92.55627,167.34556l0,0c0,130.70897 -141.47833,236.66808 -316.00214,236.66808l0,0c-174.52037,0 -315.99786,-105.95911 -315.99786,-236.66808zm158.00044,0l0,0c0,65.35454 70.73923,118.33434 157.99742,118.33434c87.26294,0 158.00085,-52.9798 158.00085,-118.33434c0,-65.35178 -70.73792,-118.33152 -158.00085,-118.33152l0,0c-87.25819,0 -157.99742,52.97974 -157.99742,118.33152z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 691 B