diff --git a/client/modules/user-menu/index.js b/client/modules/user-menu/index.js index 0494b42b..68be5c6a 100644 --- a/client/modules/user-menu/index.js +++ b/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, diff --git a/client/modules/view.js b/client/modules/view.js index e2db1116..0dd6f6dd 100644 --- a/client/modules/view.js +++ b/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; } diff --git a/css/user-menu.css b/css/user-menu.css index 37f07c14..dc65b50c 100644 --- a/css/user-menu.css +++ b/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; +} +