jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(rpubs): move format selector from toolbar to write step bottom bar 

Remove "Digest" format dropdown from the editor toolbar header. Move format
selector into the write step bottom bar as a clickable badge with dropdown.
Fix CSS bug where dropdown panels with display:flex overrode the HTML hidden
attribute, causing a visible rectangle artifact.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-31 18:44:09 -07:00
parent 1ee14b7520
commit 0a4ee86976
1 changed files with 31 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
modules/rpubs/components/folk-pubs-editor.ts
View File

@ -411,9 +411,6 @@ export class FolkPubsEditor extends HTMLElement {
private render() { private render() {
if (!this.shadowRoot) return; if (!this.shadowRoot) return;
const currentFormat = this._formats.find(f => f.id === this._selectedFormat);
const formatLabel = currentFormat ? currentFormat.name : this._selectedFormat;
this.shadowRoot.innerHTML = ` this.shadowRoot.innerHTML = `
${this.getStyles()} ${this.getStyles()}
<div class="wizard-layout"> <div class="wizard-layout">
@ -424,22 +421,6 @@ export class FolkPubsEditor extends HTMLElement {
<input type="text" class="author-input" placeholder="Author (optional)" /> <input type="text" class="author-input" placeholder="Author (optional)" />
</div> </div>
<div class="toolbar-right"> <div class="toolbar-right">
<!-- Format dropdown -->
<div class="format-dropdown">
<button class="format-dropdown-btn toolbar-btn" title="Book format">
${this.escapeHtml(formatLabel)}
<span class="dropdown-arrow">&#9662;</span>
</button>
<div class="format-dropdown-panel" hidden>
${this._formats.map(f => `
<button class="format-option ${f.id === this._selectedFormat ? 'active' : ''}" data-format="${f.id}">
<span class="format-option-name">${f.name}</span>
<span class="format-option-desc">${f.widthMm}\u00D7${f.heightMm}mm \u00B7 ${f.minPages}\u2013${f.maxPages}pp</span>
</button>
`).join('')}
</div>
</div>
${this._runtime ? ` ${this._runtime ? `
<!-- Drafts dropdown --> <!-- Drafts dropdown -->
<div class="drafts-dropdown"> <div class="drafts-dropdown">
@ -518,7 +499,20 @@ export class FolkPubsEditor extends HTMLElement {
<div class="write-bottom-bar"> <div class="write-bottom-bar">
<div class="write-meta"> <div class="write-meta">
<span class="word-count"></span> <span class="word-count"></span>
<span class="format-badge">${this.escapeHtml(this._formats.find(f => f.id === this._selectedFormat)?.name || this._selectedFormat)}</span> <div class="format-dropdown">
<button class="format-badge format-dropdown-btn" title="Change book format">
${this.escapeHtml(this._formats.find(f => f.id === this._selectedFormat)?.name || this._selectedFormat)}
<span class="dropdown-arrow">&#9662;</span>
</button>
<div class="format-dropdown-panel" hidden>
${this._formats.map(f => `
<button class="format-option ${f.id === this._selectedFormat ? 'active' : ''}" data-format="${f.id}">
<span class="format-option-name">${f.name}</span>
<span class="format-option-desc">${f.widthMm}\u00D7${f.heightMm}mm \u00B7 ${f.minPages}\u2013${f.maxPages}pp</span>
</button>
`).join('')}
</div>
</div>
</div> </div>
${this._error ? `<div class="inline-error">${this.escapeHtml(this._error)}</div>` : ''} ${this._error ? `<div class="inline-error">${this.escapeHtml(this._error)}</div>` : ''}
<button class="btn-generate" ${this._loading ? "disabled" : ""}> <button class="btn-generate" ${this._loading ? "disabled" : ""}>
@ -913,7 +907,6 @@ export class FolkPubsEditor extends HTMLElement {
.format-dropdown-panel, .drafts-dropdown-panel { .format-dropdown-panel, .drafts-dropdown-panel {
position: absolute; position: absolute;
top: calc(100% + 4px);
right: 0; right: 0;
min-width: 220px; min-width: 220px;
background: var(--rs-bg-surface); background: var(--rs-bg-surface);
@ -927,6 +920,15 @@ export class FolkPubsEditor extends HTMLElement {
max-height: 320px; max-height: 320px;
overflow-y: auto; overflow-y: auto;
} }
.format-dropdown-panel[hidden], .drafts-dropdown-panel[hidden] {
display: none;
}
.format-dropdown-panel {
bottom: calc(100% + 4px);
}
.drafts-dropdown-panel {
top: calc(100% + 4px);
}
.format-option, .draft-option { .format-option, .draft-option {
display: flex; display: flex;
@ -1112,6 +1114,14 @@ export class FolkPubsEditor extends HTMLElement {
color: var(--rs-accent, #14b8a6); color: var(--rs-accent, #14b8a6);
font-size: 0.65rem; font-size: 0.65rem;
font-weight: 500; font-weight: 500;
border: 1px solid transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.format-badge:hover {
border-color: var(--rs-accent, #14b8a6);
} }
.inline-error { .inline-error {