openvibers/openvibe.actor Commits

Actor Console: phone pass (status dots keep their column), approvals from the Node's tray, your own resources on Services (#67)

OP OpenVibers committed 29 days ago · 44fe0361dd · 2 files, +6 −1

A phone pass on the Console (plan T17 layer 3), checked signed in at 360, 414, 768 and 1280 px (no horizontal overflow at any width):

- **Layout:** a list row with a status dot (agents, computers, robots) keeps the dot in its own column, so a long computer name wraps beside the dot, not under it. The details line up under the name.
- **Copy:** approvals waiting on a computer can be answered in the Node's tray or with a notification's Approve button (Node v0.11.0), as well as `openvibe-node approvals`.
- **Links:** "Across OpenVibe" links what a person owns themselves on OpenVibe.Services, which now stops or resumes a robot, archives a room, suspends a stream and deletes a paste (Services#61).

`console.test.js` passes.

Changes

ddiff --git a/public/css/console.css b/public/css/console.css
iindex 4457570..90899a1 100644
---- a/public/css/console.css
++++ b/public/css/console.css
@@@ -36,6 +36,10 @@
  .cn-meta { color: var(--text-secondary, #96a7c2); font-size: 13px; }
  .cn-list li, .cn-links li { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .55rem; padding: .45rem 0; border-top: 1px solid var(--border-color, rgba(255,255,255,.08)); }
  .cn-list li:first-child, .cn-links li:first-child { border-top: 0; }
++/* A row with a status dot: the dot keeps its own column, so a long name wraps beside it, never under it. */
++.cn-list li:has(> .cn-dot) { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: .55rem; row-gap: .15rem; align-items: center; }
++.cn-list li:has(> .cn-dot) > :not(.cn-dot) { grid-column: 2; justify-self: start; overflow-wrap: anywhere; }
++.cn-list li:has(> .cn-dot) > .cn-dot { grid-row: 1; }
  .cn-list a, .cn-links a { color: var(--text-primary, #e6edf7); }
  .cn-links li { flex-direction: column; align-items: flex-start; }
  .cn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-secondary, #96a7c2); opacity: .5; flex: none; }
ddiff --git a/server/http/console-pages.js b/server/http/console-pages.js
iindex e33d577..cb895e9 100644
---- a/server/http/console-pages.js
++++ b/server/http/console-pages.js
@@@ -136,7 +136,7 @@ ${commandBox()}
  ${live.length ? html`<ul class="cn-tasks">${live.map(taskRow)}</ul><p class="cn-note">This page refreshes every 10 seconds while something runs.</p>` : html`<p class="cn-empty">Nothing is running.</p>`}</section>
  <section class="cn-card${nWaiting ? ' cn-attn' : ''}" aria-labelledby="cn-waiting"><h2 id="cn-waiting">Waiting for you${nWaiting ? html` <span class="cn-count">${String(nWaiting)}</span>` : ''}</h2>
  ${waiting.length ? html`<ul class="cn-list">${waiting.slice(0, 4).map((a) => html`<li><a href="/me/approvals/${a.id}"><b>${clip(a.summary, 80)}</b></a><span class="cn-meta">Asked ${time(a.created_at)}</span></li>`)}</ul>` : ''}
--${onMachines ? html`<p class="cn-note">${String(onMachines)} on your computers: answer them there with <code>openvibe-node approvals</code>.</p>` : ''}
++${onMachines ? html`<p class="cn-note">${String(onMachines)} on your computers: answer them there, in the Node's tray, with a notification's Approve button, or with <code>openvibe-node approvals</code>.</p>` : ''}
  ${nWaiting ? '' : html`<p class="cn-empty">Nothing waits for you.</p>`}
  <p class="cn-more"><a href="/me/approvals">All approvals</a></p></section>
  <section class="cn-card" aria-labelledby="cn-today"><h2 id="cn-today">Today</h2>
@@@ -159,6 +159,7 @@ ${robotsCard(rovers)}
  <section class="cn-card cn-full" aria-labelledby="cn-elsewhere"><h2 id="cn-elsewhere">Across OpenVibe</h2>
  <ul class="cn-links">
  <li><a href="https://openvibe.services/projects">Your projects and resources</a><span class="cn-meta">OpenVibe.Services: stop, delete, suspend or resume what your projects hold</span></li>
++<li><a href="https://openvibe.services/projects/mine">What you own yourself</a><span class="cn-meta">OpenVibe.Services: stop or resume a robot, archive a chat room, suspend a stream, delete a paste</span></li>
  <li><a href="https://openvibe.watch">Your watches</a><span class="cn-meta">OpenVibe.Watch: wake an agent when something changes</span></li>
  <li><a href="https://openvibe.codes/run">Coding on your machine</a><span class="cn-meta">OpenVibe.Codes: tasks on your own computer</span></li>
  </ul></section>