bunch of menu optimizations

* A minimum width for the menu, the same as the aggregate menu, in order to prevent the menu with from growing on submenu open.
* A maximum width for uncontrolled content (font, image and drawing names). Same value and same reason.
* Style the font family labels in idle loop to open the submenu fastly.
* Add the drawing gicons in idle loop to open the submenu smoothly.
This commit is contained in:
abakkk 2020-09-20 07:36:23 +02:00
parent 737bc856c4
commit dd18ca3051
3 changed files with 38 additions and 4 deletions

View File

@ -50,7 +50,16 @@ const ThemedIconNames = {
TOOL_IMAGE: 'insert-image', TOOL_TEXT: 'insert-text',
};
var Icons = {};
var Icons = {
get FAKE() {
if (!this._fake) {
let bytes = new GLib.Bytes('<svg/>');
this._fake = Gio.BytesIcon.new(bytes);
}
return this._fake;
}
};
ICON_NAMES.forEach(name => {
Object.defineProperty(Icons, name.toUpperCase().replace(/-/gi, '_'), {

25
menu.js
View File

@ -523,6 +523,7 @@ var DrawingMenu = new Lang.Class({
item.icon.set_gicon(icon);
item.menu.itemActivated = item.menu.close;
item.menu.actor.add_style_class_name('draw-on-your-screen-menu-ellipsized');
item.menu.openOld = item.menu.open;
item.menu.open = (animate) => {
@ -532,8 +533,12 @@ var DrawingMenu = new Lang.Class({
item.label.set_text(DisplayStrings.getFontFamily(family));
this.area.currentFontFamily = family;
});
if (FONT_FAMILY_STYLE)
subItem.label.set_style(`font-family:${family}`);
GLib.idle_add(GLib.PRIORITY_DEFAULT_IDLE, () => {
subItem.label.set_style(`font-family:${family}`);
});
getActor(subItem).connect('key-focus-in', updateSubMenuAdjustment);
});
}
@ -552,6 +557,7 @@ var DrawingMenu = new Lang.Class({
item.update();
item.menu.itemActivated = item.menu.close;
item.menu.actor.add_style_class_name('draw-on-your-screen-menu-ellipsized');
item.menu.openOld = item.menu.open;
item.menu.open = (animate) => {
@ -560,7 +566,13 @@ var DrawingMenu = new Lang.Class({
let subItem = item.menu.addAction(image.toString(), () => {
this.area.currentImage = image;
item.update();
}, image.thumbnailGicon || undefined);
}, Files.Icons.FAKE);
GLib.idle_add(GLib.PRIORITY_DEFAULT_IDLE, () => {
if (subItem.setIcon && image.thumbnailGicon)
subItem.setIcon(image.thumbnailGicon);
});
getActor(subItem).connect('key-focus-in', updateSubMenuAdjustment);
});
}
@ -574,6 +586,7 @@ var DrawingMenu = new Lang.Class({
_addDrawingNameItem: function(menu) {
this.drawingNameMenuItem = new PopupMenu.PopupMenuItem('', { reactive: false, activate: false });
this.drawingNameMenuItem.setSensitive(false);
getActor(this.drawingNameMenuItem).add_style_class_name('draw-on-your-screen-menu-ellipsized');
menu.addMenuItem(this.drawingNameMenuItem);
this._updateDrawingNameMenuItem();
},
@ -595,6 +608,7 @@ var DrawingMenu = new Lang.Class({
item.icon.set_icon_name(icon);
item.menu.itemActivated = item.menu.close;
item.menu.actor.add_style_class_name('draw-on-your-screen-menu-ellipsized');
item.menu.openOld = item.menu.open;
item.menu.open = (animate) => {
@ -616,7 +630,12 @@ var DrawingMenu = new Lang.Class({
this.area.loadJson(json);
this._updateDrawingNameMenuItem();
this._updateActionSensitivity();
}, json.gicon);
}, Files.Icons.FAKE);
GLib.idle_add(GLib.PRIORITY_DEFAULT_IDLE, () => {
if (subItem.setIcon)
subItem.setIcon(json.gicon);
});
subItem.label.get_clutter_text().set_use_markup(true);
getActor(subItem).connect('key-focus-in', updateSubMenuAdjustment);

View File

@ -37,6 +37,7 @@
.draw-on-your-screen-menu {
font-size: 0.97em; /* default: 1em */
min-width: 21em; /* like the aggregate menu */
}
.draw-on-your-screen-menu .popup-menu-item {
@ -49,6 +50,11 @@
padding-top: 0.03em;
}
/* max size for uncontrolled contents (font, image and drawing names) */
.draw-on-your-screen-menu-ellipsized {
max-width: 21em;
}
.draw-on-your-screen-menu .toggle-switch {
height: 1.35em; /* default: 22px */
}