From 1c6fa54d69c4b7afa2a3e745e557d383ddc2d5ae Mon Sep 17 00:00:00 2001
From: abakkk <abakkk@netcourrier.com>
Date: Sun, 29 Dec 2019 15:26:20 +0100
Subject: [PATCH] drawing menu style improvement

* Set 'max-height' property to menu actor.
* Reduce size of menu items.
* Rename 'draw-on-your-screen-menu-separator' style class to 'draw-on-your-screen-menu-separator-item' because it is relative to the item actor, not the item._separator actor.
* Rename 'draw-on-your-screen-separator' style class to 'draw-on-your-screen-helper-separator' not to confuse with menu separator.
---
 draw.js        | 19 ++++++++++---------
 stylesheet.css | 20 +++++++++++++-------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/draw.js b/draw.js
index be908ec..ae5d198 100644
--- a/draw.js
+++ b/draw.js
@@ -99,7 +99,7 @@ var DrawingArea = new Lang.Class({
     
     get menu() {
         if (!this._menu)
-            this._menu = new DrawingMenu(this);
+            this._menu = new DrawingMenu(this, this.monitor);
         return this._menu;
     },
     
@@ -953,7 +953,7 @@ var DrawingHelper = new Lang.Class({
         
         for (let i = 0; i < Prefs.OTHER_SHORTCUTS.length; i++) {
             if (Prefs.OTHER_SHORTCUTS[i].desc.indexOf('-separator-') != -1) {
-                this.vbox.add(new St.BoxLayout({ vertical: false, style_class: 'draw-on-your-screen-separator' }));
+                this.vbox.add(new St.BoxLayout({ vertical: false, style_class: 'draw-on-your-screen-helper-separator' }));
                 continue;
             }
             let hbox = new St.BoxLayout({ vertical: false });
@@ -962,11 +962,11 @@ var DrawingHelper = new Lang.Class({
             this.vbox.add(hbox);
         }
         
-        this.vbox.add(new St.BoxLayout({ vertical: false, style_class: 'draw-on-your-screen-separator' }));
+        this.vbox.add(new St.BoxLayout({ vertical: false, style_class: 'draw-on-your-screen-helper-separator' }));
         
         for (let settingKey in Prefs.INTERNAL_KEYBINDINGS) {
             if (settingKey.indexOf('-separator-') != -1) {
-                this.vbox.add(new St.BoxLayout({ vertical: false, style_class: 'draw-on-your-screen-separator' }));
+                this.vbox.add(new St.BoxLayout({ vertical: false, style_class: 'draw-on-your-screen-helper-separator' }));
                 continue;
             }
             let hbox = new St.BoxLayout({ vertical: false });
@@ -1028,7 +1028,7 @@ var DrawingHelper = new Lang.Class({
 var DrawingMenu = new Lang.Class({
     Name: 'DrawOnYourScreenDrawingMenu',
     
-    _init: function(area) {
+    _init: function(area, monitor) {
         this.area = area;
         let side = Clutter.get_default_text_direction() == Clutter.TextDirection.RTL ? St.Side.RIGHT : St.Side.LEFT;
         this.menu = new PopupMenu.PopupMenu(Main.layoutManager.dummyCursor, 0.25, side);
@@ -1037,6 +1037,7 @@ var DrawingMenu = new Lang.Class({
         
         Main.layoutManager.uiGroup.add_actor(this.menu.actor);
         this.menu.actor.add_style_class_name('background-menu draw-on-your-screen-menu');
+        this.menu.actor.set_style('max-height:' + monitor.height + 'px;');
         this.menu.actor.hide();
         
         // do not close the menu on item activated
@@ -1271,10 +1272,10 @@ var DrawingMenu = new Lang.Class({
     },
     
     _addSeparator: function(menu) {
-        let separator = new PopupMenu.PopupSeparatorMenuItem(' ');
-        let separatorActor = GS_VERSION < '3.33.0' ? separator.actor : separator;
-        separatorActor.add_style_class_name('draw-on-your-screen-menu-separator');
-        menu.addMenuItem(separator);
+        let separatorItem = new PopupMenu.PopupSeparatorMenuItem(' ');
+        let separatorItemActor = GS_VERSION < '3.33.0' ? separatorItem.actor : separatorItem;
+        separatorItemActor.add_style_class_name('draw-on-your-screen-menu-separator-item');
+        menu.addMenuItem(separatorItem);
     }
 });
 
diff --git a/stylesheet.css b/stylesheet.css
index 862879a..c68b599 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -73,28 +73,34 @@
     font-weight: normal;
 }
 
-.draw-on-your-screen-separator {
+.draw-on-your-screen-helper-separator {
     min-height: 0.6em;
 }
 
 /* context menu */
 
 .draw-on-your-screen-menu {
-   font-size: 0.98em; /* default: 1em */
+   font-size: 0.97em; /* default: 1em */
 }
 
 .draw-on-your-screen-menu .popup-menu-item {
-    padding-top: .37em; /* default: .4em */
-    padding-bottom: .37em;
+    padding-top: .32em; /* default: .4em */
+    padding-bottom: .32em;
 }
 
 .draw-on-your-screen-menu .popup-menu-icon {
-    icon-size: 1.04em; /* default: 1.09 */
+    icon-size: 1em; /* default: 1.09 */
+    padding-top: 0.03em;
 }
 
 .draw-on-your-screen-menu .toggle-switch {
-    height: 20px; /* default: 22px */
-} 
+    height: 1.4em; /* default: 22px */
+}
+
+.draw-on-your-screen-menu .popup-menu-item.draw-on-your-screen-menu-separator-item {
+    padding-top: 0.14em;
+    padding-bottom: 0.14em;
+}
 
 .draw-on-your-screen-menu-separator StLabel {
     font-size: 0;