add some

frame.js

@@ -419,7 +419,10 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) {
 			}
 			input.onkeyup = item.onkeyup||function(event) { if (item.name == html.FILTER) {
 				can.onmotion.filter(can, event.target.value)
-			} }, _icon.push({icon: mdb.DELETE, onclick: function(event) { _input.value = "", input.onkeyup({target: event.target.previousSibling}) }})
+			} }, _icon.push({icon: mdb.DELETE, onclick: function(event) {
+				_input.value = "", input.onkeyup({target: event.target.previousSibling})
+				can.core.CallFunc([event.target.previousSibling, "_clear"], {})
+			}})
 			if (item.name == html.FILTER) { item.icon = item.icon||icon.search }
 			item.icon = item.icon||icon[item.name]
 		} if (item.range) { input._init = function(target) { can.onappend.figure(can, item, target, function(sub, value, old) { target.value = value, can.core.CallFunc([can.onaction, item.name], [event, can, item.name]) }) } }

index.css

@@ -228,6 +228,10 @@ fieldset.input.key div.output table.content td:first-child { cursor:pointer; }
 fieldset.input.key div.output table.content td:not(:first-child) { background-color:unset !important; color:var(--disable-fg-color); cursor:default; }
 fieldset.input.key>div.output>div.item:not(.hide) { display:flex; align-items:center; }
 fieldset.input.key>div.output>div.item img { height:var(--header-height); width:var(--header-height); }
+fieldset.input.key>div.output>div.item img[src*=".jpg"] { padding:5px; }
+fieldset.input.key>div.output>div.item div.title { padding:var(--input-padding) 0; }
+fieldset.input.key>div.output>div.item div.status div.item { color:var(--disable-fg-color); font-size:var(--status-font-size); float:left; }
+fieldset.input.key>div.output>div.item div.status div.item span { padding:0 var(--input-padding); }
 fieldset.input.key div.status:not(.hide) { background-color:var(--plugin-bg-color); display:block; position:sticky; bottom:0; }
 fieldset.input.key.simple th { display:none; }
 fieldset.input.key.simple td { min-width:var(--button-width); }
@@ -305,7 +309,7 @@ body>div.input tr.icon td:last-child { position:relative; }
 body>div.input tr.icon td:last-child img:first-child { height:28px; width:28px; position:absolute; left:12px; top:12px; }
 body>div.input tr.icon td:last-child input { padding-left:var(--action-height); }
 body>div.input tr.icons td:last-child img { height:28px; width:28px; position:absolute; left:2px; top:2px; }
-body>div.input tr.icons td:last-child span:not(.icon) { position:absolute; left:32px; }
+body>div.input tr.icons td:last-child span:not(.icon) { font-family:monospace; position:absolute; left:33px; }
 body>div.input tr.icons td:last-child input { padding-left:var(--action-height); }
 body>div.input td span.icon { margin-left:-20px; visibility:hidden; }
 body>div.input td span.icons { margin-left:-20px; visibility:hidden; }

plugin/input/key.js

@@ -18,13 +18,27 @@ Volcanos(chat.ONFIGURE, {key: {
 			}}
 		}), can.onappend._status(can, [mdb.TOTAL, mdb.INDEX]), can.Status(mdb.TOTAL, msg.Length()), can.Status("index", "-1")
 		can.onmotion.toggle(can, can._status, msg.Length() > 5), can.onmotion.toggle(can, can._target, can.Status("total") > 0)
+		can.showIcons = function(value, icons, title) { can.ui = can.ui||{}
+			if (!can.ui.img) {
+				can.ui.img = can.page.insertBefore(can, [{type: html.IMG}], target)
+				can.ui.span = can.page.insertBefore(can, [{type: html.SPAN}], target)
+				can.onappend.style(can, mdb.ICONS, can.page.parentNode(can, target, html.TR))
+				can.page.style(can, target, html.COLOR, html.TRANSPARENT)
+				target._clear = function() { can.ui.img.src = can.misc.Resource(can, "usr/icons/icebergs.png"), can.ui.span.innerHTML = "" }
+			}
+			can.ui.img.src = can.misc.Resource(can, icons), can.ui.span.innerText = title||value
+			target.value = value, can.onmotion.hidden(can, can._target)
+		}
 		can.core.CallFunc([can.oninputs, "_show"], {event: event, can: can, msg: msg, target: target, name: name})
+		can.core.CallFunc([can.sup.sub, "oninputs", name], {event: event, can: can, msg: msg, target: target, name: name})
+		// can.core.CallFunc([can.sup.sub, "oninputs", "_show"], {event: event, can: can, msg: msg, target: target, name: name})
 		can.page.style(can, can._output, html.MAX_HEIGHT, can.page.height()/2, html.MIN_WIDTH, target.offsetWidth, html.MAX_WIDTH, can.Conf("style.width")||can.page.width()/2)
 		msg.append.length == 1 && can.page.ClassList.add(can, can._target, chat.SIMPLE)
 		can.onlayout.figure({target: target}, can, can._target, false, 200)
 	},
 	onfocus: function(event, can, meta, target, cbs, mod) { meta._force && mod.onclick(event, can, meta, target, cbs) },
 	onclick: function(event, can, meta, target, cbs) { (target.value == "" || meta._force) && cbs(function(sub, cb) { if (sub.Status(mdb.TOTAL) > 0) { return }
+		sub.sup = can._fields? can.sup: can
 		meta.msg && meta.msg.Length() > 0? sub._show(sub, meta.msg, cb, target, meta.name): sub._load(event, sub, cb, target, meta.name, target.value)
 	}) },
 	onblur: function(event, can, sub, cb) { sub && can.onmotion.delay(can, sub.close, 300) },

plugin/table.js

@@ -263,6 +263,17 @@ Volcanos(chat.ONACTION, {
 		can._keylist = can.onkeymap._parse(event, can, mdb.PLUGIN, can._keylist||[], can._output)
 	},
 })
+Volcanos(chat.ONINPUTS, {
+	dream: function(event, can, msg, target, name) {
+		can.page.Appends(can, can._output, msg.Table(function(value) {
+			return {view: html.ITEM, list: [{img: can.misc.Resource(can, value.icons)},
+				{view: html.CONTAINER, list: [{view: [html.TITLE, "", value[name]]},
+					can.onappend.label(can, value, {version: icon.version, time: icon.compile}),
+				]},
+			], onclick: function(event) { can.showIcons(value[name], value.icons) }}
+		}))
+	},
+})
 Volcanos(chat.ONKEYMAP, {
 	escape: function(event, can) {}, enter: function(event, can) {},
 	ctrln: function(event, can) { can.onkeymap.selectCtrlN(event, can, can._action, html.DIV_TABS) },