diff --git a/xP/public/xP.css b/xP/public/xP.css index 96d6525..041eb63 100644 --- a/xP/public/xP.css +++ b/xP/public/xP.css @@ -186,16 +186,30 @@ button { column-gap: .6em; overflow-x: auto; } - +.input { + flex-shrink: 0; + border: 2px inset #eee; + overflow: hidden; + resize: vertical; + display: flex; +} +.input:focus-within { + border-color: #ff5f00; +} +.prompt { + padding: .05em .3em; + border-right: 1px solid #ccc; + background: #f8f8f8; + font-weight: bold; +} textarea { font: inherit; padding: .05em .3em; margin: 0; - border: 2px inset #eee; - flex-shrink: 0; - resize: vertical; + border: 0; + flex-grow: 1; + resize: none; } textarea:focus { outline: none; - border-color: #ff5f00; } diff --git a/xP/public/xP.js b/xP/public/xP.js index dbba7e2..93fe642 100644 --- a/xP/public/xP.js +++ b/xP/public/xP.js @@ -687,21 +687,27 @@ let Status = { let status = `${bufferCurrent}` if (b.hideUnimportant) status += `` - - // This should be handled differently, so don't mind the lookup. - if (b.server !== undefined) { - let state = b.server.state - for (const s in Relay.ServerState) - if (Relay.ServerState[s] == b.server.state) { - state = s - break - } - status += ` (${state})` - } return m('.status', {}, status) }, } +let Prompt = { + view: vnode => { + // This should be handled differently, so don't mind the lookup. + let b = buffers.get(bufferCurrent) + if (b === undefined || b.server === undefined) + return + + let state = b.server.state + for (const s in Relay.ServerState) + if (Relay.ServerState[s] == b.server.state) { + state = s + break + } + return m('.prompt', {}, `(${state})`) + }, +} + let Input = { counter: 0, stamp: textarea => { @@ -934,7 +940,7 @@ let Main = { m('.title', {}, [`xP`, m(Toolbar)]), m('.middle', {}, [m(BufferList), m(BufferContainer)]), m(Status), - m(Input), + m('.input', {}, [m(Prompt), m(Input)]), ]) }, }