diff --git a/IDEAS.md b/IDEAS.md index 89b52a3..fd83e08 100644 --- a/IDEAS.md +++ b/IDEAS.md @@ -281,6 +281,56 @@ Zu prüfen ist dabei, was sonst noch inline gesetzt wird: die Lage der HoneyBar selbst und der Innenabstand, den sie der Seite verpasst. Über die CSSOM gesetzte Stile (`el.style.x = …`) fallen nicht unter die CSP — was im Markup steht, schon. +### Bild-Widget — Marcs Idee (29.08.2026) + +Ein Widget, das ein Bild zeigt: hochgeladen oder als Adresse eingetragen. Genau +**eines je Nutzer**; ein neues ersetzt das alte, ohne Verwaltung und ohne Liste. + +Reizvoll daran ist, dass es das erste Widget wäre, das nichts abfragt, sondern +etwas *ist* — der Schreibtisch bekommt damit einen persönlichen Zug, den keine +Datenanzeige liefert. + +Zu klären, wenn es soweit ist: + +- **Ablegen.** HoneyOS speichert bisher nur eine JSON-Datei. Ein Bild heisst: + Ordner unter `/data`, Grössengrenze, erlaubte Typen. SVG ist heikel — es kann + Skripte enthalten und darf nicht einfach durchgereicht werden. +- **Ausliefern** mit Versionsanteil in der Adresse, sonst bleibt beim Austausch + das alte im Zwischenspeicher hängen. +- **Adresse statt Upload** ist billiger zu bauen, holt aber eine fremde Anfrage + auf jede Seite mit HoneyBar. Für den Schreibtisch unkritisch; sollte das Bild + je in die HoneyBar wandern, wäre es eine Anfrage aus jeder App. +- **Zuschneiden?** Ein Bild in einem festen Rahmen ist entweder verzerrt oder + beschnitten. `object-fit: cover` und gut — Zuschneiden von Hand ist ein + eigenes Stück Arbeit. +- Passt zum Aufnehmen eigener App-Logos (1.3): dieselbe Ablage, dasselbe + Ausliefern. Zusammen bauen spart die Hälfte. + +### Widgets verschieben, Reihenfolge im Server — Marcs Idee (29.08.2026) + +Widgets per Ziehen umsortieren, die Reihenfolge liegt beim Nutzer auf dem +Server — also auf jedem Gerät gleich. + +**Der Haken ist nicht das Ziehen, sondern die zwei Betriebsarten.** Im +Terminal-Modus stehen die Widgets in einer Spalte (eine Reihenfolge), im +Desktop-Modus als Schilder auf der Fläche (dort wären Koordinaten das +Natürliche). Eine gemeinsame Liste für beides ist die einfachere Zusage: eine +Reihenfolge, in beiden Ansichten dieselbe. Freie Plätze auf dem Schreibtisch +wären das schönere Ziel, aber dann liegen zwei Anordnungen im Server, und beim +Wechsel muss man sich entscheiden, welche gilt. + +→ **Vorschlag: eine Liste, beide Ansichten folgen ihr.** Freie Plätze später, +falls sie je fehlen. + +Am Handy: **Ziehen ist dort kein Standard** — HTML5-Drag löst per Berührung +nicht aus. Entweder Zeigerereignisse selbst behandeln (wie beim Fensterziehen +schon gebaut) oder am Handy Pfeiltasten statt Ziehen anbieten. Nicht vergessen: +Ohne das ist die Funktion am Handy schlicht nicht da. + +Voraussetzung ist ein Widget-Verzeichnis — heute stehen Benutzer und Wetter +fest im HTML. Sinnvoll zusammen mit dem Widget-Rahmen (1.6) zu bauen, nicht +davor. + ### Widgets in der HoneyBar selbst Bisher sind Widgets als Fenster auf dem Schreibtisch gedacht. Der Schreibtisch diff --git a/web/honeybar/honeybar.js b/web/honeybar/honeybar.js index 9c57ebd..82b4962 100644 --- a/web/honeybar/honeybar.js +++ b/web/honeybar/honeybar.js @@ -144,10 +144,24 @@ } .home { letter-spacing: .14em; color: var(--p); padding-left: 2px; } .home b { color: var(--p-mid); font-weight: 400; } + /* Dasselbe Quadrat wie in der Menüleiste des Schreibtischs: dort ist es + klein und leicht angehoben. Ein Zeichen in voller Größe sah daneben + wie ein anderes Logo aus. */ + .home .hex { font-size: 10px; vertical-align: 2px; } .home:hover { border-color: var(--p-dim); } - .apps { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; } + /* Bei vielen Apps schiebt man den Streifen seitwärts. Ohne + flex-shrink:0 an den Knöpfen quetscht das Raster sie stattdessen + zusammen, bis nur noch Buchstabenreste dastehen — am Handy sofort. + Der Schatten rechts zeigt an, dass es weitergeht. */ + .apps { + display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; + overflow-x: auto; scrollbar-width: none; + -webkit-overflow-scrolling: touch; + scroll-snap-type: x proximity; + mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); + } .apps::-webkit-scrollbar { display: none; } - .app { color: var(--p-mid); letter-spacing: .08em; } + .app { color: var(--p-mid); letter-spacing: .08em; flex: 0 0 auto; scroll-snap-align: end; } .app:hover { color: var(--p); border-color: var(--p-dim); } .app[aria-current="page"] { background: var(--p); border-color: var(--p); color: var(--bg); text-shadow: none; @@ -182,7 +196,7 @@
- ■ HONEYOS + ■ HONEYOS
diff --git a/web/style.css b/web/style.css index c9abf21..e9f5f40 100644 --- a/web/style.css +++ b/web/style.css @@ -203,11 +203,18 @@ body { gap: 4px; overflow-x: auto; scrollbar-width: none; - flex: 1; + /* Wie in der HoneyBar: Bei vielen Apps schiebt man seitwärts, statt dass die + Namen zusammengequetscht werden. Der Schatten rechts zeigt, dass es + weitergeht. */ + flex: 1 1 auto; + min-width: 0; + -webkit-overflow-scrolling: touch; + mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); } .mb-apps::-webkit-scrollbar { display: none; } .mb-app { + flex: 0 0 auto; background: none; border: 1px solid transparent; color: var(--p-mid); @@ -426,6 +433,28 @@ body { @media (max-width: 620px) { .statusbar { display: none; } + + /* Am Handy wird aus der Kachelwand eine Liste. Sechs Kacheln zu je 168 px + sind ein Bildschirm Gescrolle, bevor man die dritte App sieht — das Raster + ist für den grossen Schirm gedacht, hier zählt der Überblick. + Symbol links, Name und Zustand rechts, eine Zeile pro App. */ + .tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; } + .tile { + display: grid; + grid-template-columns: 40px minmax(0, 1fr) auto; + grid-template-areas: "symbol name zustand" "symbol unter zustand"; + align-items: center; + column-gap: 12px; + row-gap: 0; + min-height: 0; + padding: 10px 12px; + } + .tile-icon { grid-area: symbol; width: 32px; height: 32px; } + .tile-name { grid-area: name; } + .tile-sub { grid-area: unter; } + .tile-state { grid-area: zustand; margin: 0; white-space: nowrap; } + /* Die Zifferntaste hilft nur mit Tastatur. */ + .tile-key { display: none; } } /* ── Modal ─────────────────────────────────────────────────────────────── */ @@ -912,6 +941,7 @@ body { volle Breite gezogen sähe eine Temperatur nach Bekanntmachung aus. */ .win-weather { max-width: 320px; align-self: start; } + /* Schreibtisch-Modus: schwebendes Schild, rechts unter der Menüleiste. Nicht verschiebbar wie ein Fenster — ein Widget, das man erst suchen muss, ist keins. */ @@ -982,6 +1012,15 @@ body { .uw-host { color: var(--p-dim); font-size: 12px; } .win-user { max-width: 320px; align-self: start; } +/* Einspaltig (Handy, schmales Fenster) sollen die Widgets so breit sein wie das + Systemfenster. Drei verschieden breite Kästen untereinander sehen aus wie ein + Fehler, nicht wie Absicht. Muss hinter den Regeln stehen, die es aufhebt — + eine Medienabfrage erhöht die Spezifität nicht. */ +@media (max-width: 859px) { + .win-weather, + .win-user { max-width: none; } +} + /* Die Schilder auf dem Schreibtisch stapeln sich oben rechts. */ .deskwidgets { position: absolute;