[UI] Terminal #120
Comments
Terminallatestv2CompactExpanded off Expanded on ComfortableExpanded off Expanded on Adjust type to fit longest width that it would be easier to trace and align into same vertical line for view. Previous designv1One row message(have any good name for it)
Two rows message (have any good name for it)
v0Demo A
Demo B
|
|
@serapath For types, I make one line and counts for them, it is able to scroll when the content is overflow as same as STATUS. |
|
cool. i like both. 1. 2. 3. 4. function str2hashint (str) {
var hash = 0
for (var i = 0; i < str.length; i++) hash = str.charCodeAt(i) + ((hash << 5) - hash)
return hash
}
function int2hsla (i) { return `hsla(${i % 360}, 100%, 70%, 1)` }
// ------------------------------------------------
// TEST
// ------------------------------------------------
// 1. some example message types:
const types = ['foo', 'bar', 'baz', 'info', 'data', 'fail', 'request', 'response']
// 2. generate colors and compare them:
for (var i = types.length; i--;) {
const type = types[i] // string
const integer1 = str2hashint(type)
const integer2 = str2hashint(type)
const color1 = int2hsla(integer1)
const color2 = int2hsla(integer2)
const same = color1 === color2
if (same) console.log({ color: color1 })
else console.error({ color1, color2 })
} |
|
|
I think we definitely should do one And then ...but yeah, generally, i think your demos above, A and B are ok i think. |
Becoz you was asking me to reference Gmail, there is a timestamp. XD |
|
@serapath function str2hashint (str) {
var hash = 0
for (var i = 0; i < str.length; i++) hash = str.charCodeAt(i) + ((hash << 5) - hash)
return hash
}
function int2hsla (i) { return `hsla(${i % 360}, 100%, 70%, 1)` }
// ------------------------------------------------
// TEST
// ------------------------------------------------
// 1. some example message types:
const types = ['foo', 'bar', 'baz', 'info', 'data', 'fail', 'request', 'response']
// 2. generate colors and compare them:
for (var i = types.length; i--;) {
const type = types[i] // string
const integer1 = str2hashint(type)
const integer2 = str2hashint(type)
const color1 = int2hsla(integer1)
const color2 = int2hsla(integer2)
const same = color1 === color2
if (same) console.log({ color: color1 })
else console.error({ color1, color2 })
} |
|
not sure what you mean, but maybe something like this? const statusbar = document.querySelector('#statusbar')
const types = { }
socket.on(message => { store_types(message.type) })
function store_types (type) {
if (types[type]) types[type].count += 1
else types[type] = { count: 1, color: int2hsla(str2hashint(type)) }
updateStatusBar(types[type])
}
function update_statusbar (type, { count, color }) {
var el = statusbar.querySelector(`[data-type="${type}"]`)
if (!el) {
el = document.createElement('div')
statusbar.append(el)
}
el.setAttribute('data-type', type)
el.style = `background-color: ${color}`
el.innerHTML = `${type}:${count}`
console.log(list_types())
} |
|
Where's socket.on(message => { store_types(message.type) }) |
|
Notes:
Results:v0.0.1-alpha (using new comm proto) |
@todopnpm link --global(to make them available)pnpm link --global <./package.json#name>@output📦repositoryv0.0.0-alpha@input📦repository@output📦v0.0.0-alphav0.0.1.-alpha@input📦v0.0.0-alpha@output📦v0.0.1-alphav0.0.2-alpha@input📦v0.0.1-alphamessagesandstatusand update documentation@input❓wireframes action barsoptsrolesincoming message typesoutgoing message typesstatusthe component instance can be in@output❓repository#v0.0.2-alpha@infoRepo 📂
https://github.com/datdotorg/datdot-terminal
The text was updated successfully, but these errors were encountered: