More consistent positioning of menu.

This is done by wrapping panel item content with a <div> and clamping
the context menu to it.

Author: corwin-of-amber

src/_panel.scss

@@ -55,6 +55,10 @@
     position: relative;
     box-sizing: border-box;
     padding: $base-margin / 1.5;
+
+    & > div {
+      display: inherit;
+    }
   }
 
   .osjs-panel-item--icon {

src/items/_menu.scss

@@ -33,7 +33,7 @@
   align-items: center;
   padding: 0;
 
-  & > div {
+  & > .osjs-panel-item-content > div {
     padding: $base-margin / 1.5;
   }
 }

src/items/_tray.scss

@@ -32,7 +32,7 @@
   display: flex;
   padding: 0;
 
-  & > div {
+  & > .osjs-panel-item-content > div {
     flex: 1 1;
     padding: $base-margin / 1.5 $base-margin / 3;
 
@@ -44,7 +44,7 @@
 }
 
 .osjs-root[data-dir="rtl"] {
-  .osjs-panel-item[data-name=tray] > div:not(:last-child) {
+  .osjs-panel-item[data-name=tray] > .osjs-panel-item-content > div:not(:last-child) {
     margin-right: 0;
     margin-left: $base-margin;
   }

src/items/_windows.scss

@@ -34,7 +34,7 @@
   overflow: hidden;
   padding: 0;
 
-  & > div {
+  & > .osjs-panel-item-content > div {
     cursor: pointer;
     flex: initial;
     padding: $base-margin / 1.5;

src/items/menu.js

@@ -126,7 +126,7 @@ export default class MenuPanelItem extends PanelItem {
 
       this.core.make('osjs/contextmenu').show({
         menu: makeTree(this.core, icon, __, [].concat(packages)),
-        position: ev.target,
+        position: this.$element,
         callback: (item) => {
           const {name, action} = item.data || {};
 

src/panel-item.js

@@ -53,6 +53,7 @@ export default class PanelItem extends EventEmitter {
     this.state = {};
     this.actions = {};
     this.inited = false;
+    this.$element = null;
   }
 
   /**
@@ -76,9 +77,13 @@ export default class PanelItem extends EventEmitter {
     this.inited = true;
     this.emit('init', this);
 
+    this.$element = document.createElement('div');
+    this.$element.classList.add('osjs-panel-item');
+    this.panel.$element.appendChild(this.$element);
+
     return app(state, actions, (state, actions) => {
       return this.render(state, actions);
-    }, this.panel.$element);
+    }, this.$element);
   }
 
   /**
@@ -88,9 +93,9 @@ export default class PanelItem extends EventEmitter {
    * @return {Node} A *virtual* node
    */
   render(name, children = []) {
+    this.$element.setAttribute('data-name', name);
     return h('div', {
-      className: 'osjs-panel-item',
-      'data-name': name
+      className: 'osjs-panel-item-content'
     }, children);
   }