Feat v0.6.12 css isolation (#47)
All checks were successful
All checks were successful
Co-authored-by: Jeffrey Smith <jasafpro@gmail.com> Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
This commit was merged in pull request #47.
This commit is contained in:
@@ -104,34 +104,34 @@
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="tal-shell">
|
||||
<header class="tal-header">
|
||||
<div class="tal-header__left">
|
||||
<h1 class="tal-title">Activity Log</h1>
|
||||
<span class="tal-subtitle">Team activity tracker</span>
|
||||
<div class="ext-team-activity-log-shell">
|
||||
<header class="ext-team-activity-log-header">
|
||||
<div class="ext-team-activity-log-header__left">
|
||||
<h1 class="ext-team-activity-log-title">Activity Log</h1>
|
||||
<span class="ext-team-activity-log-subtitle">Team activity tracker</span>
|
||||
</div>
|
||||
<div class="tal-header__right">
|
||||
<div class="ext-team-activity-log-header__right">
|
||||
<div ref=${menuRef}></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<${EntryForm} onSubmit=${addEntry} />
|
||||
|
||||
<div class="tal-filters">
|
||||
<button class="tal-filter ${filter === '' ? 'active' : ''}"
|
||||
<div class="ext-team-activity-log-filters">
|
||||
<button class="ext-team-activity-log-filter ${filter === '' ? 'ext-team-activity-log-active' : ''}"
|
||||
onClick=${() => setFilter('')}>All</button>
|
||||
${CATEGORIES.map(c => html`
|
||||
<button key=${c}
|
||||
class="tal-filter ${filter === c ? 'active' : ''}"
|
||||
class="ext-team-activity-log-filter ${filter === c ? 'ext-team-activity-log-active' : ''}"
|
||||
onClick=${() => setFilter(c)}>
|
||||
${c}
|
||||
</button>
|
||||
`)}
|
||||
<span class="tal-count">${entries.length} entries</span>
|
||||
<span class="ext-team-activity-log-count">${entries.length} entries</span>
|
||||
</div>
|
||||
|
||||
${loading
|
||||
? html`<div class="tal-loading">Loading…</div>`
|
||||
? html`<div class="ext-team-activity-log-loading">Loading…</div>`
|
||||
: html`<${EntryList} entries=${entries} onDelete=${deleteEntry} />`
|
||||
}
|
||||
</div>
|
||||
@@ -153,17 +153,17 @@
|
||||
}
|
||||
|
||||
return html`
|
||||
<form class="tal-form" onSubmit=${submit}>
|
||||
<select class="tal-form__select" value=${category}
|
||||
<form class="ext-team-activity-log-form" onSubmit=${submit}>
|
||||
<select class="ext-team-activity-log-form__select" value=${category}
|
||||
onChange=${e => setCategory(e.target.value)}>
|
||||
${CATEGORIES.map(c => html`<option key=${c} value=${c}>${c}</option>`)}
|
||||
</select>
|
||||
<input class="tal-form__input" type="text"
|
||||
<input class="ext-team-activity-log-form__input" type="text"
|
||||
placeholder="What happened?"
|
||||
value=${message}
|
||||
onInput=${e => setMessage(e.target.value)}
|
||||
disabled=${submitting} />
|
||||
<button class="tal-form__btn" type="submit" disabled=${submitting || !message.trim()}>
|
||||
<button class="ext-team-activity-log-form__btn" type="submit" disabled=${submitting || !message.trim()}>
|
||||
${submitting ? '…' : 'Log'}
|
||||
</button>
|
||||
</form>
|
||||
@@ -172,21 +172,21 @@
|
||||
|
||||
function EntryList({ entries, onDelete }) {
|
||||
if (!entries.length) {
|
||||
return html`<div class="tal-empty">No entries yet. Log your first activity above.</div>`;
|
||||
return html`<div class="ext-team-activity-log-empty">No entries yet. Log your first activity above.</div>`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="tal-entries">
|
||||
<div class="ext-team-activity-log-entries">
|
||||
${entries.map(e => html`
|
||||
<div key=${e.id} class="tal-entry">
|
||||
<div class="tal-entry__header">
|
||||
<span class="tal-entry__category badge">${e.category}</span>
|
||||
<span class="tal-entry__user">${esc(e.username || 'unknown')}</span>
|
||||
<span class="tal-entry__time">${timeAgo(e.created_at)}</span>
|
||||
<button class="tal-entry__delete" onClick=${() => onDelete(e.id)}
|
||||
<div key=${e.id} class="ext-team-activity-log-entry">
|
||||
<div class="ext-team-activity-log-entry__header">
|
||||
<span class="ext-team-activity-log-entry__category badge">${e.category}</span>
|
||||
<span class="ext-team-activity-log-entry__user">${esc(e.username || 'unknown')}</span>
|
||||
<span class="ext-team-activity-log-entry__time">${timeAgo(e.created_at)}</span>
|
||||
<button class="ext-team-activity-log-entry__delete" onClick=${() => onDelete(e.id)}
|
||||
title="Delete">×</button>
|
||||
</div>
|
||||
<div class="tal-entry__message">${esc(e.message)}</div>
|
||||
<div class="ext-team-activity-log-entry__message">${esc(e.message)}</div>
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user