chore: 2 big design passes to harmonize and fix stuff
This commit is contained in:
1 parent
67b3ff03d0
commit
5e05b606a7
43 files changed
+2167
-4183
No files matched your search
@@ -7,7 +7,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<div style="display:contents">{{ view }}</div>
|
||||
<dc-import name="AppFrame" s="{{ shell }}" mobile="{{ mob }}" slot-body="{{ main }}" slot-overlays="{{ ov }}" hint-size="100%,100%"></dc-import>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":1440,"height":900},"s":{"editor":null,"tsType":"object"},"mobile":{"editor":null,"tsType":"boolean"}}">
|
||||
class Component extends DCLogic {
|
||||
@@ -50,7 +50,7 @@ class Component extends DCLogic {
|
||||
{ id: 7, day: 'Yesterday', rel: '16:05', ...T('5 Oct', 16, 5, 51), a: KEY('Website sync'), cat: 'media', s: 'Uploaded the image ', em: 'north-wall.jpg', tk: 'Image', ex: 1, ok: 1, tid: 'img_0pk4w', src: 'API key', ip: '192.0.2.18', ua: 'node-fetch 3.3' },
|
||||
{ id: 8, day: 'Yesterday', rel: '14:40', ...T('5 Oct', 14, 40, 13), a: U('Marta Alves'), cat: 'media', s: 'Deleted the image ', em: 'old-banner.png', tk: 'Image', ex: 0, ok: 1, tid: 'img_9zq1c', ...WEB },
|
||||
{ id: 9, day: 'Yesterday', rel: '11:12', ...T('5 Oct', 11, 12, 27), a: U('Inès Duarte'), cat: 'articles', s: 'Failed to publish the article ', em: LONG, tk: 'Article', ex: 1, ok: 0, tid: 'art_5t7yh', why: 'The article has no cover image. Add one, then publish again.', ...WEB, ip: '203.0.113.12' },
|
||||
{ id: 10, day: 'Yesterday', rel: '03:00', ...T('5 Oct', 3, 0, 1), a: SYS, cat: 'users', s: 'Removed 3 expired invites', em: '', ok: 1, src: 'System task', ip: null, ua: null },
|
||||
{ id: 10, day: 'Yesterday', rel: '03:00', ...T('5 Oct', 3, 0, 1), a: SYS, cat: 'users', s: 'Deleted 3 expired invites', em: '', ok: 1, src: 'System task', ip: null, ua: null },
|
||||
{ id: 11, day: '3 Oct 2026', rel: '16:48', ...T('3 Oct', 16, 48, 22), a: U('Inès Duarte'), cat: 'system', s: 'Changed the setting ', em: 'Site description', tk: 'Setting', ex: 1, ok: 1, tid: 'set_site_desc', ...WEB, ip: '203.0.113.12', diff: [{ f: 'Site description', b: 'Renovation notes, project write-ups and practical guides from the Renew studio team in Lisbon, covering timber, lime plaster and stone restoration for older homes.', a: 'Renovation notes, project write-ups and practical guides from the Renew studio team in Lisbon, covering timber, lime plaster and stone restoration for older homes, plus a seasonal maintenance checklist.', long: 1 }, { f: 'Comments', b: 'Off', a: 'On' }] },
|
||||
{ id: 12, day: '3 Oct 2026', rel: '15:02', ...T('3 Oct', 15, 2, 40), a: U('Jonas Weber'), cat: 'keys', s: 'Created API key ', em: 'Mobile app', tk: 'API key', ex: 0, ok: 1, sec: 1, tid: 'key_71ab0', ...WEB, ip: '203.0.113.90' },
|
||||
{ id: 13, day: '3 Oct 2026', rel: '14:20', ...T('3 Oct', 14, 20, 5), a: U('Inès Duarte'), cat: 'users', s: 'Updated the user ', em: 'Sam Rivera', tk: 'User', ex: 1, ok: 1, tid: 'usr_77ea2', ...WEB, ip: '203.0.113.12', diff: [{ f: 'Name', b: 'Sam Rivera', a: 'Samuel Rivera' }, { f: 'Email', b: 'sam@example.com', a: 'samuel@example.com' }] },
|
||||
@@ -79,15 +79,17 @@ class Component extends DCLogic {
|
||||
const Sel = (val, ph, w, icon) => D('height:' + bh + 'px;padding:0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:' + (val ? 'var(--ui-text-highlighted)' : 'var(--ui-text-muted)') + ';' + (w ? 'width:' + w + 'px;flex-shrink:0' : 'width:100%'), icon && I(icon, 14, 'color:var(--ui-text-muted)'), S('flex:1;' + ell, val || ph), I('chevron-down', 14, 'color:var(--ui-text-muted)'))
|
||||
const Seg = (opts, on, fw) => D('display:flex;border:1px solid var(--ui-border-accented);flex-shrink:0;' + (fw ? 'width:100%' : ''), ...opts.map(o => S('height:' + (bh - 2) + 'px;padding:0 ' + (m ? 12 : 10) + 'px;' + (fw ? 'flex:1;justify-content:center;' : '') + 'display:flex;align-items:center;gap:6px;white-space:nowrap;font-weight:' + (o === on ? 500 : 400) + ';background:' + (o === on ? 'var(--rc-sand)' : 'var(--ui-bg)') + ';color:' + (o === on ? 'var(--rc-on-sand)' : 'var(--ui-text-toned)'), o === 'Custom' && I('calendar', 14), o)))
|
||||
const F = { q: '', actor: '', cat: '', out: 'All', range: '7 days', ...(s.f || {}) }
|
||||
if (s.card === 2) F.out = 'Failed'
|
||||
const RANGES = ['Today', '7 days', '30 days', 'Custom']
|
||||
const chips = []
|
||||
if (F.q) chips.push('Search: ' + F.q)
|
||||
if (F.actor && !user) chips.push('Person: ' + F.actor)
|
||||
if (F.cat) chips.push('Category: ' + F.cat)
|
||||
if (s.card === 3) chips.push('Type: Security events')
|
||||
if (F.out !== 'All') chips.push('Outcome: ' + F.out)
|
||||
if (F.range !== '7 days') chips.push('Dates: ' + (F.range === 'Custom' ? (F.custom || '1 – 30 Sep 2026') : F.range))
|
||||
const nF = chips.length
|
||||
const Chips = () => nF > 0 && D('display:flex;flex-wrap:wrap;align-items:center;gap:8px', ...chips.map(c => S('height:' + (m ? 32 : 24) + 'px;padding:0 4px 0 8px;display:inline-flex;align-items:center;gap:4px;background:var(--ui-bg-elevated);border:1px solid var(--ui-border);color:var(--ui-text-highlighted);font-size:12px;font-weight:500', c, S('width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)', I('x', 12)))), S('height:' + (m ? 44 : 24) + 'px;display:flex;align-items:center;padding:0 6px;font-weight:500;font-size:12px;' + link, 'Clear all'))
|
||||
const Chips = () => nF > 0 && D('display:flex;flex-wrap:wrap;align-items:center;gap:8px', ...chips.map((c, ci) => S('height:' + (m ? 32 : 24) + 'px;padding:0 4px 0 8px;display:inline-flex;align-items:center;gap:4px;background:var(--ui-bg-elevated);border:1px solid var(--ui-border);color:var(--ui-text-highlighted);font-size:12px;font-weight:500', c, S('width:20px;height:20px;display:flex;align-items:center;justify-content:center;' + (s.chipHover === ci ? 'background:var(--ui-bg-accented);color:var(--ui-text-highlighted)' : 'color:var(--ui-text-muted)'), I('x', 12)))), S('height:' + (m ? 44 : 24) + 'px;display:flex;align-items:center;padding:0 6px;font-weight:500;font-size:12px;' + link + (s.clearHover ? ';background:var(--ui-bg-elevated)' : '') + (s.focus === 'clear' ? ';outline:2px solid var(--ui-primary);outline-offset:2px' : ''), 'Clear all'))
|
||||
const FilterBar = () => m
|
||||
? D('display:flex;gap:8px', Search(), h('span', { style: P('height:44px;padding:0 12px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-highlighted);font-weight:500;font-size:13px;flex-shrink:0') }, I('sliders-horizontal', 16), 'Filters', nF > 0 && S('min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;background:var(--ui-primary);color:var(--ui-bg);font:500 11px \'IBM Plex Mono\',monospace', String(nF))))
|
||||
: D('display:flex;align-items:center;gap:8px;flex-wrap:wrap', Search(), !user && Sel(F.actor, 'All people', 168, 'user-round'), Sel(F.cat, 'All categories', 176, 'layout-list'), Seg(['All', 'Succeeded', 'Failed'], F.out), D('flex:1;min-width:0'), Seg(RANGES, F.range))
|
||||
@@ -98,18 +100,22 @@ class Component extends DCLogic {
|
||||
: s.sum === 'none' ? [mk('Total actions', '0', 'No data yet', '', 'n', [0, 0, 0, 0, 0, 0, 0]), mk('Active people', '0', 'No data yet', '', 'n', [0, 0, 0, 0, 0, 0, 0]), mk('Failed actions', '0', 'Nothing failed', 'circle-check', 'ok0', [0, 0, 0, 0, 0, 0, 0]), mk('Security events', '0', 'Nothing to flag', 'circle-check', 'ok0', [0, 0, 0, 0, 0, 0, 0])]
|
||||
: [mk('Total actions', '1,284', '12% vs previous 7 days', 'trending-up', 'n', [4, 6, 5, 8, 7, 9, 6]), mk('Active people', '9', '7 people, 2 API keys', '', 'n', [5, 6, 6, 7, 7, 8, 9]), mk('Failed actions', '6', '0.5% of all actions', 'circle-x', 'error', [0, 1, 0, 2, 1, 0, 2]), mk('Security events', '11', '5 failed logins', 'shield-alert', 'warning', [1, 0, 2, 1, 3, 2, 2])]
|
||||
const Bars = (ser, tone, z) => {
|
||||
const mx = Math.max(...ser, 1), col = tone === 'error' ? 'var(--ui-error)' : tone === 'warning' ? 'var(--ui-warning)' : tone === 'ok0' ? 'var(--ui-border-accented)' : 'var(--ui-text-muted)'
|
||||
const mx = Math.max(...ser, 1), col = tone === 'error' ? 'var(--ui-error)' : tone === 'warning' ? 'var(--ui-warning)' : tone === 'on' ? 'var(--rc-on-sand)' : tone === 'ok0' ? 'var(--ui-border-accented)' : 'var(--ui-text-muted)'
|
||||
return D('display:flex;align-items:flex-end;gap:2px;height:' + z + 'px;flex-shrink:0', ...ser.map(v => S('display:block;width:4px;height:' + Math.max(2, Math.round(v / mx * z)) + 'px;background:' + col)))
|
||||
}
|
||||
const StatCard = (c, i) => {
|
||||
const act = s.card === i, tone = c.tone
|
||||
const bg = tone === 'error' ? 'var(--rc-error-soft)' : tone === 'warning' ? 'var(--rc-warning-soft)' : 'var(--ui-bg)'
|
||||
const vc = tone === 'error' ? 'var(--ui-error)' : tone === 'warning' ? 'var(--ui-warning)' : 'var(--ui-text-highlighted)'
|
||||
const sc = tone === 'ok0' ? 'var(--ui-success)' : 'var(--ui-text-muted)'
|
||||
return D('display:flex;flex-direction:column;gap:2px;padding:' + (m ? '10px 12px' : '12px 14px') + ';background:' + bg + ';border:1px solid ' + (act ? 'var(--ui-primary)' : 'var(--ui-border)') + ';' + (act ? 'box-shadow:inset 0 0 0 1px var(--ui-primary);' : '') + (m ? 'flex:0 0 156px;' : 'min-width:0;'),
|
||||
D('display:flex;align-items:center;justify-content:space-between;gap:8px', S('color:var(--ui-text-toned);font-weight:500;' + ell, c.l), Bars(c.ser, tone, m ? 16 : 20)),
|
||||
const tog = i === 2 || i === 3, act = tog && s.card === i, hov = tog && s.hover === i, tone = c.tone
|
||||
let bg = tone === 'error' ? 'var(--rc-error-soft)' : tone === 'warning' ? 'var(--rc-warning-soft)' : 'var(--ui-bg)'
|
||||
let vc = tone === 'error' ? 'var(--ui-error)' : tone === 'warning' ? 'var(--ui-warning)' : 'var(--ui-text-highlighted)'
|
||||
let sc = tone === 'ok0' ? 'var(--ui-success)' : 'var(--ui-text-muted)', lc = 'var(--ui-text-toned)', sub = c.sub, icn = c.ic, bt = tone
|
||||
if (act) { bg = 'var(--rc-sand)'; vc = 'var(--rc-on-sand)'; sc = 'var(--rc-on-sand)'; lc = 'var(--rc-on-sand)'; bt = 'on'; sub = hov ? 'Click to clear this filter' : 'Filtering. Click to clear'; icn = hov ? 'x' : 'filter' }
|
||||
else if (hov) { bg = 'var(--ui-bg-elevated)'; sub = 'Click to filter the list'; icn = 'filter' }
|
||||
const bd = act ? 'var(--ui-primary)' : hov ? 'var(--ui-border-accented)' : 'var(--ui-border)'
|
||||
const st = 'display:flex;flex-direction:column;gap:2px;padding:' + (m ? '10px 12px' : '12px 14px') + ';background:' + bg + ';border:1px solid ' + bd + ';' + (act ? 'box-shadow:inset 0 0 0 1px var(--ui-primary);' : '') + (s.focus === 'card' + i ? 'outline:2px solid var(--ui-primary);outline-offset:2px;' : '') + (m ? 'flex:0 0 156px;' : 'min-width:0;')
|
||||
const kids = [D('display:flex;align-items:center;justify-content:space-between;gap:8px', S('font-weight:500;color:' + lc + ';' + ell, c.l), Bars(c.ser, bt, m ? 16 : 20)),
|
||||
S('font:600 ' + (m ? 22 : 24) + "px/32px 'IBM Plex Sans',sans-serif;color:" + vc, c.v),
|
||||
S('display:flex;align-items:center;gap:4px;font-size:12px;color:' + sc + ';' + ell, c.ic && I(c.ic, 12), c.sub))
|
||||
S('display:flex;align-items:center;gap:4px;font-size:12px;color:' + sc + ';' + ell, icn && I(icn, 12), sub)]
|
||||
return tog ? h('div', { role: 'button', tabIndex: 0, 'aria-pressed': act, style: P(st) }, ...kids) : h('div', { style: P(st) }, ...kids)
|
||||
}
|
||||
const SkelCard = () => D('display:flex;flex-direction:column;gap:8px;padding:' + (m ? '10px 12px' : '14px') + ';background:var(--ui-bg);border:1px solid var(--ui-border);' + (m ? 'flex:0 0 156px' : 'min-width:0'), sk('55%', 12), sk('40%', 22), sk('70%', 10))
|
||||
const Strip = () => {
|
||||
@@ -153,7 +159,48 @@ class Component extends DCLogic {
|
||||
const title = user ? 'My activity' : 'Activity'
|
||||
const sub = user ? 'Everything you\'ve done on this site.' : 'Who did what, and when, across your site.'
|
||||
const noData = s.state === 'none'
|
||||
const Header = () => D('display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;flex-shrink:0', D('flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px', S('font:600 20px/28px \'IBM Plex Sans\',sans-serif;color:var(--ui-text-highlighted)', title), S('color:var(--ui-text-muted)', sub)), !user && s.state !== 'forbidden' && B('Export CSV', { icon: 'download', dis: noData || s.state === 'error' }))
|
||||
const ExportBtn = () => S('height:' + bh + 'px;padding:0 10px 0 12px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);background:' + (s.menu ? 'var(--ui-bg-elevated)' : 'var(--ui-bg)') + ';color:var(--ui-text-highlighted);font-weight:500;white-space:nowrap;flex-shrink:0;opacity:' + (noData || s.state === 'error' ? 0.4 : 1) + ';' + (s.focus === 'export' ? 'outline:2px solid var(--ui-primary);outline-offset:2px;' : ''), I('download', 16), 'Export', I(s.menu ? 'chevron-up' : 'chevron-down', 14, 'color:var(--ui-text-muted)'))
|
||||
const X = s.exp || {}
|
||||
const CUR = s.menuCount || '214'
|
||||
const MItem = (ic, t, d, dis, hov) => D('display:flex;gap:12px;align-items:flex-start;padding:' + (m ? '12px 16px' : '10px 12px') + ';min-height:' + (m ? 64 : 56) + 'px;background:' + (hov ? 'var(--ui-bg-elevated)' : 'transparent') + ';opacity:' + (dis ? 1 : 1) + ';color:' + (dis ? 'var(--ui-text-muted)' : 'var(--ui-text-highlighted)'), S('display:flex;padding-top:2px', I(ic, 16)), D('flex:1;min-width:0;display:flex;flex-direction:column;gap:2px', S('font-weight:500;color:' + (dis ? 'var(--ui-text-muted)' : 'var(--ui-text-highlighted)'), t), S('font-size:12px;line-height:18px;color:var(--ui-text-muted);text-wrap:pretty', d)))
|
||||
const ExportMenu = () => {
|
||||
const items = [MItem('download', 'Export current view', s.menuCount === '0' ? 'Nothing to export. No events match these filters.' : 'CSV · ' + CUR + ' events matching your filters and sort, across all pages.', s.menuCount === '0', s.mHover === 1), D('height:1px;background:var(--ui-border)'), MItem(s.noAll ? 'lock' : 'archive', 'Export all activity…', s.noAll ? 'Only owners and admins can export all activity.' : 'CSV · every event, ignoring filters. Owners and admins only.', !!s.noAll, s.mHover === 2)]
|
||||
return m
|
||||
? D('position:absolute;inset:0;z-index:40;display:flex;align-items:flex-end;background:var(--rc-overlay)', D('width:100%;background:var(--ui-bg);display:flex;flex-direction:column;box-shadow:var(--rc-shadow-modal)', D('display:flex;justify-content:center;padding-top:8px', S('display:block;width:36px;height:4px;background:var(--ui-border-accented)')), D('height:56px;display:flex;align-items:center;padding:0 8px 0 16px;border-bottom:1px solid var(--ui-border)', S('flex:1;font:600 16px/24px \'IBM Plex Sans\',sans-serif;color:var(--ui-text-highlighted)', 'Export'), S('width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)', I('x'))), D('display:flex;flex-direction:column;padding-bottom:16px', ...items)))
|
||||
: D('position:absolute;inset:0;z-index:40', D('position:absolute;right:24px;top:108px;width:360px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);padding:4px;display:flex;flex-direction:column', ...items))
|
||||
}
|
||||
const Prog = () => D('height:4px;background:var(--ui-bg-accented);position:relative;overflow:hidden', S('display:block;position:absolute;top:0;bottom:0;background:var(--ui-primary);left:30%;width:35%'))
|
||||
const Kv = (k, v) => D('display:flex;justify-content:space-between;gap:12px', S('color:var(--ui-text-muted)', k), S('color:var(--ui-text-highlighted);font-weight:500', v))
|
||||
const ExportDlg = () => {
|
||||
const st = X.stage || 'cfg', fmt = X.fmt || 'CSV', rng = X.range || 'All time'
|
||||
const fld = (l, c) => D('display:flex;flex-direction:column;gap:6px', S('font-weight:500;color:var(--ui-text-highlighted)', l), c)
|
||||
let body, foot
|
||||
if (st === 'cfg') {
|
||||
const fmtCtl = X.json ? Seg(['CSV', 'JSON'], fmt, 1) : D('height:32px;display:flex;align-items:center;padding:0 12px;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted)', 'CSV')
|
||||
body = [fld('Format', fmtCtl), fld('Date range', D('display:flex;flex-direction:column;gap:6px', Sel(rng, '', 0, 'calendar'), S('font-size:12px;color:var(--ui-text-muted)', 'Default is all time. Filters on the page are ignored.')))]
|
||||
foot = [B('Cancel', { full: m }), B('Export ' + fmt, { k: 'primary', icon: 'download', full: m })]
|
||||
} else if (st === 'prep') {
|
||||
body = [D('display:flex;flex-direction:column;gap:12px', S('font-weight:500;color:var(--ui-text-highlighted);display:flex;align-items:center;gap:8px', I('loader-circle', 16), 'Preparing download…'), Prog(), S('color:var(--ui-text-muted);text-wrap:pretty', 'The file starts downloading as soon as it is ready. Keep this window open.'))]
|
||||
foot = [B('Cancel', { full: m }), B('Preparing…', { k: 'primary', dis: 1, full: m })]
|
||||
} else if (st === 'ready') {
|
||||
body = [D('display:flex;gap:12px;align-items:flex-start', S('display:flex;color:var(--ui-success);padding-top:2px', I('circle-check', 20)), D('display:flex;flex-direction:column;gap:2px', S('font-weight:600;font-size:15px;color:var(--ui-text-highlighted)', 'Download started'), S('color:var(--ui-text-muted)', 'activity-all-2026-10-06.csv is downloading. Check your browser\'s downloads if nothing appears.')))]
|
||||
foot = [B('Close', { full: m })]
|
||||
} else if (st === 'fail') {
|
||||
body = [Alert('error', 'circle-x', 'Couldn\'t prepare the download', 'Nothing was downloaded. Try again in a moment.')]
|
||||
foot = [B('Cancel', { full: m }), B('Retry', { k: 'primary', icon: 'rotate-cw', full: m })]
|
||||
} else if (st === 'denied') {
|
||||
body = [Alert('error', 'lock', 'You can\'t export all activity', 'Only owners and admins can export all activity. Ask an owner if you need a copy.')]
|
||||
foot = [B('Close', { full: m })]
|
||||
} else {
|
||||
body = [D('display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:12px 0', S('width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--ui-bg-elevated);color:var(--ui-text-toned)', I('file-x', 20)), S('font-weight:600;font-size:15px;color:var(--ui-text-highlighted)', 'Nothing to export'), S('color:var(--ui-text-muted);max-width:300px;text-wrap:pretty', 'There is no activity in this date range. Choose a wider range.'))]
|
||||
foot = [B('Close', { full: m })]
|
||||
}
|
||||
const sheet = D('display:flex;justify-content:center;padding-top:8px', S('display:block;width:36px;height:4px;background:var(--ui-border-accented)'))
|
||||
const head = D('padding:20px 24px 0;display:flex;align-items:flex-start;gap:12px', D('flex:1;display:flex;flex-direction:column;gap:4px', S('font:600 16px/24px \'IBM Plex Sans\',sans-serif;color:var(--ui-text-highlighted)', 'Export all activity'), S('color:var(--ui-text-muted);text-wrap:pretty', 'Downloads every event as a CSV file. Filters on the page are ignored.')), S('width:' + (m ? 44 : 28) + 'px;height:' + (m ? 44 : 28) + 'px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)', I('x')))
|
||||
return D('position:absolute;inset:0;z-index:50;display:flex;align-items:' + (m ? 'flex-end' : 'flex-start') + ';justify-content:center;background:var(--rc-overlay);padding:' + (m ? '0' : '140px 16px 16px'), D('width:' + (m ? '100%' : '460px') + ';background:var(--ui-bg);display:flex;flex-direction:column;box-shadow:var(--rc-shadow-modal)', m && sheet, head, D('padding:20px 24px 0;display:flex;flex-direction:column;gap:16px', ...body), D('padding:20px 24px;display:flex;flex-direction:' + (m ? 'column-reverse' : 'row') + ';justify-content:flex-end;gap:8px', ...foot)))
|
||||
}
|
||||
const ToastX = () => D('position:absolute;z-index:60;' + (m ? 'left:16px;right:16px;bottom:16px' : 'right:24px;bottom:24px;width:356px') + ';display:flex;gap:10px;padding:12px 14px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop)', S('display:flex;padding-top:2px;color:var(--ui-success)', I('circle-check')), D('flex:1;display:flex;flex-direction:column;gap:2px', S('font-weight:600;color:var(--ui-text-highlighted)', s.toast.t), S('color:var(--ui-text-toned)', s.toast.d)))
|
||||
const Header = () => D('display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;flex-shrink:0', D('flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px', S('font:600 20px/28px \'IBM Plex Sans\',sans-serif;color:var(--ui-text-highlighted)', title), S('color:var(--ui-text-muted)', sub)), !user && s.state !== 'forbidden' && ExportBtn())
|
||||
const Page = () => {
|
||||
const k = [Header()]
|
||||
if (s.state === 'forbidden') { k.push(Empty('lock', 'You can\'t view this activity', 'Your role doesn\'t include this page. Ask an owner or admin if you need access.', 'Back to home', false)); return k }
|
||||
@@ -229,22 +276,12 @@ class Component extends DCLogic {
|
||||
}
|
||||
|
||||
// ---------- shell
|
||||
const logo = h('svg', { width: 26, height: 26, viewBox: '0 0 16 16', shapeRendering: 'crispEdges', style: { color: 'var(--ui-text-highlighted)', flexShrink: 0 } }, h('rect', { width: 16, height: 16, fill: 'currentColor' }), h('path', { fill: 'var(--ui-bg)', fillRule: 'evenodd', d: 'M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z' }))
|
||||
const kind = s.kind || 'page'
|
||||
const navKey = kind === 'home' ? 'home' : kind === 'settings' ? 'settings' : 'activity'
|
||||
const nav = (user ? [['home', 'house', 'Home'], ['articles', 'file-text', 'Articles'], ['media', 'images', 'Media'], ['activity', 'history', 'Activity']] : [['home', 'house', 'Home'], ['articles', 'file-text', 'Articles'], ['media', 'images', 'Media'], ['users', 'users', 'Users'], ['activity', 'history', 'Activity'], ['integration', 'plug', 'Integration'], ['settings', 'settings', 'Settings']])
|
||||
const side = D('width:224px;flex-shrink:0;background:var(--ui-bg);border-right:1px solid var(--ui-border);display:flex;flex-direction:column;padding:12px;gap:2px', D('display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;margin-bottom:10px', logo, S('font-weight:600;font-size:14px;color:var(--ui-text-highlighted)', 'RenewCMS')),
|
||||
...nav.map(([k, ic, t]) => D('display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;background:' + (k === navKey ? 'var(--rc-sand)' : 'transparent') + ';color:' + (k === navKey ? 'var(--rc-on-sand)' : 'var(--ui-text-toned)') + ';font-weight:' + (k === navKey ? 500 : 400), I(ic), t)),
|
||||
D('flex:1'), D('display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;color:var(--ui-text-highlighted)', Av(U(ME), 26), S('flex:1;font-weight:500', ME), I('chevrons-up-down', 14)))
|
||||
const crumb = { page: title, home: 'Home', settings: 'Settings' }[kind]
|
||||
const topbar = m
|
||||
? D('height:56px;flex-shrink:0;border-bottom:1px solid var(--ui-border);background:var(--ui-bg);display:flex;align-items:center;padding:0 6px;gap:4px;color:var(--ui-text-highlighted)', S('width:44px;height:44px;display:flex;align-items:center;justify-content:center', I('menu', 20)), S('flex:1;font-weight:600;font-size:16px', crumb))
|
||||
: D('height:48px;flex-shrink:0;border-bottom:1px solid var(--ui-border);background:var(--ui-bg);display:flex;align-items:center;padding:0 24px;gap:8px;color:var(--ui-text-muted)', I('panel-left-close'), S('width:1px;height:16px;background:var(--ui-border);margin:0 6px'), S('color:var(--ui-text-highlighted);font-weight:500', crumb))
|
||||
const kids = kind === 'home' ? HomeBody() : kind === 'settings' ? SettingsBody() : Page()
|
||||
const content = D('flex:1;min-height:0;overflow:hidden;padding:' + (m ? 16 : 24) + 'px;display:flex;flex-direction:column;gap:16px', ...kids)
|
||||
const root = D('width:' + (m ? 390 : 1440) + 'px;height:' + (m ? 844 : 900) + 'px;position:relative;display:flex;flex-direction:' + (m ? 'column' : 'row') + ';background:var(--ui-bg-muted);color:var(--ui-text);font-family:\'IBM Plex Sans\',sans-serif;font-size:13px;line-height:20px;overflow:hidden',
|
||||
!m && side, D('flex:1;min-width:0;min-height:0;display:flex;flex-direction:column', topbar, content), s.panel && Panel(), m && s.drawer && Drawer())
|
||||
return { view: root }
|
||||
const ov = D('display:contents', s.panel && Panel(), m && s.drawer && Drawer(), s.menu && ExportMenu(), s.exp && ExportDlg(), s.toast && ToastX())
|
||||
const shell = { kind: 'slot', role: user ? 'user' : undefined, display: ME, nav: kind === 'home' ? 'home' : kind === 'settings' ? 'settings' : 'activity', crumbs: [kind === 'home' ? 'Home' : kind === 'settings' ? 'Settings' : title], mTitle: kind === 'home' ? 'Home' : kind === 'settings' ? 'Settings' : title }
|
||||
return { shell, mob: m, main: content, ov }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in new issue
Block a user