feature(user-menu) add ability to run in mobile devices

client/modules/user-menu/index.js

@@ -5,6 +5,7 @@
 require('../../../css/user-menu.css');
 
 const currify = require('currify/legacy');
+const wraptile = require('wraptile/legacy');
 const {promisify} = require('es6-promisify');
 const load = require('load.js');
 const createElement = require('@cloudcmd/create-element');
@@ -50,7 +51,12 @@ async function show() {
     
     const options = Object.keys(userMenu);
     
-    const el = createElement('select', {
+    const button = createElement('button', {
+        className: 'cloudcmd-user-menu-button',
+        innerText: 'User Menu',
+    });
+    
+    const select = createElement('select', {
         className: 'cloudcmd-user-menu',
         innerHTML: fillTemplate(options),
         size: 10,
@@ -58,15 +64,16 @@ async function show() {
     
     const keys = options.map(getKey);
     
-    el.addEventListener('keydown', onKeyDown(keys, options, userMenu));
-    el.addEventListener('dblclick', onDblClick(options, userMenu));
+    button.addEventListener('click', onButtonClick(options, userMenu, select));
+    select.addEventListener('keydown', onKeyDown(keys, options, userMenu));
+    select.addEventListener('dblclick', onDblClick(options, userMenu));
     
-    const afterShow = () => el.focus();
+    const afterShow = () => select.focus();
     const autoSize = true;
     
     Images.hide();
     
-    CloudCmd.View.show(el, {
+    CloudCmd.View.show([button, select], {
         autoSize,
         afterShow,
     });
@@ -90,6 +97,10 @@ const onDblClick = currify(async (options, userMenu, e) => {
     await runUserMenu(value, options, userMenu);
 });
 
+const onButtonClick = wraptile(async (options, userMenu, {value}) => {
+    await runUserMenu(value, options, userMenu);
+});
+
 const onKeyDown = currify(async (keys, options, userMenu, e) => {
     const {
         keyCode,

client/modules/view.js

@@ -24,6 +24,7 @@ const Images = require('../dom/images');
 
 const {encode} = require('../../common/entity');
 
+const {isArray} = Array;
 const testRegExp = currify((name, reg) => reg.test(name));
 const lifo = currify((fn, el, cb, name) => fn(name, el, cb));
 
@@ -99,7 +100,11 @@ async function show(data, options) {
     El.tabIndex = 0;
     
     if (data) {
-        El.append(data);
+        if (isArray(data))
+            El.append(...data);
+       else
+            El.append(data);
+       
         modal.open(El, initConfig(Config, options));
         return;
     }

css/user-menu.css

@@ -1,7 +1,6 @@
 .cloudcmd-user-menu {
     font-size: 16px;
     font-family: 'Droid Sans Mono', 'Ubuntu Mono', 'Consolas', monospace;
-    width: 400px;
 }
 
 .cloudcmd-user-menu:focus {
@@ -12,3 +11,12 @@
     box-shadow: 20px -20px 0 2px rgba(49, 123, 249) inset;
 }
 
+.cloudcmd-user-menu-button {
+    display: block;
+    width: 100%;
+    font-size: 16px;
+    padding: 2px;
+     -webkit-appearance: none;
+     border: 0;
+}
+