Skip to content

Commit 70e1d4c

Browse files
ca-dca-d
committed
wip: make ui more usable
1 parent bc81d9e commit 70e1d4c

File tree

1 file changed

+110
-72
lines changed

1 file changed

+110
-72
lines changed

‎diff-tree.ts‎

Lines changed: 110 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,11 @@ export class DiffTree extends LitElement {
8080
XMLDocument,
8181
ReturnType<typeof newHasher>
8282
>();
83+
@property({ type: Number }) depth = 0;
84+
@property({ type: Boolean, reflect: true })
85+
get odd(): boolean {
86+
return this.depth % 2 === 1;
87+
}
8388
@query("md-icon-button") expandButton!: HTMLElement;
8489

8590
@property({ type: Boolean })
@@ -151,6 +156,7 @@ export class DiffTree extends LitElement {
151156
.theirs=${theirs}
152157
.hashers=${this.hashers}
153158
.expanded=${expanded}
159+
.depth=${this.depth + 1}
154160
></diff-tree>`;
155161
});
156162
})}
@@ -167,23 +173,25 @@ export class DiffTree extends LitElement {
167173
return html`<table>
168174
${Object.entries(attrDiff).map(
169175
([name, { ours, theirs }]) =>
170-
html`<tr>
171-
<td></td>
172-
<td>${name}</td>
173-
<td>${ours}</td>
174-
<td class="arrow">→</td>
175-
<td>${theirs}</td>
176+
html`<tr tabindex="0">
177+
<th></th>
178+
<th>${name}</th>
179+
<td><span>${ours}</span></td>
180+
<td><span>${theirs}</span></td>
176181
</tr>`,
177182
)}
178183
${Object.entries(eNSDiff ?? {}).map(([ns, ks]) =>
179-
Object.entries(ks).map(
180-
([k, d]) =>
181-
html`<tr>
182-
<td>${ns}</td>
183-
<td>${k}</td>
184-
<td>${(d as { ours: string }).ours}</td>
185-
<td class="arrow">→</td>
186-
<td>${(d as { theirs: string }).theirs}</td>
184+
(
185+
Object.entries(ks) as [string, { ours: string; theirs: string }][]
186+
).map(
187+
([k, { ours, theirs }]) =>
188+
html`<tr tabindex="0">
189+
<th>${ns}</th>
190+
<th>${k}</th>
191+
<td><span>${ours}</span></td>
192+
<td>
193+
<span>${theirs}</span>
194+
</td>
187195
</tr>`,
188196
),
189197
)}
@@ -194,109 +202,117 @@ export class DiffTree extends LitElement {
194202
return html`${this.renderAttributeDiff()}${this.renderChildDiffs()}`;
195203
}
196204

197-
renderElement() {
198-
const element = this.ours ?? this.theirs;
199-
if (!element) return nothing;
200-
const id = identity(element) || element.tagName;
201-
const tag = element.tagName;
202-
const description = this.ourDescription ?? this.theirDescription;
203-
const hash = this.ourHash ?? this.theirHash;
204-
return html`<a @click=${() => (this.expanded = !this.expanded)}
205-
><md-icon>${this.expanded ? "arrow_drop_down" : "arrow_right"}</md-icon>
206-
${this.ours ? "-" : "+"} ${id}</a
207-
>
208-
${this.expanded ? this.renderDiff() : ""} `;
209-
}
210-
211205
render() {
212-
if (!this.ours && !this.theirs)
213-
return html`<p>missing ${this.ours ? "their" : "our"} element</p>`;
214-
if (!this.ours || !this.theirs) return this.renderElement();
215-
if (!this.ourHasher || !this.theirHasher)
216-
return html`<p>missing ${this.ourHasher ? "their" : "our"} hasher</p>`;
217-
if (!this.ourDescription || !this.theirDescription)
218-
return html`<p>
219-
missing ${this.ourDescription ? "their" : "our"} description
220-
</p>`;
221206
if (this.ourHash === this.theirHash) return nothing;
222207

223-
Object.keys(this.ourDescription ?? {}).forEach((key) => {});
208+
const element = this.ours ?? this.theirs;
209+
if (!element) return nothing;
210+
let id = (<string>(identity(element) || element.tagName)).split(">").pop();
211+
let style = `top: ${this.depth * 24}px; z-index: ${10000 - this.depth};`;
212+
if (!this.ours) style += "color: var(--oscd-primary);";
213+
if (!this.theirs) style += "color: var(--oscd-error);";
214+
let desc = element.getAttribute("desc") || "";
215+
if (desc) desc = `: ${desc}`;
216+
if (id !== element.tagName) desc = `${element.tagName}${desc}`;
224217

225-
return html`<a @click=${() => (this.expanded = !this.expanded)}
218+
return html`<a
219+
style="${style}"
220+
@click=${() => (this.expanded = !this.expanded)}
226221
><md-icon>${this.expanded ? "arrow_drop_down" : "arrow_right"}</md-icon>
227-
${identity(this.ours) || this.ours.tagName}</a
222+
${id} <small>${desc}</small></a
228223
>
229224
${this.expanded ? this.renderDiff() : ""} `;
230225
}
231226

232227
static styles = css`
228+
small {
229+
font-size: 0.8em;
230+
font-weight: 300;
231+
color: var(--oscd-base0);
232+
}
233+
:host([odd]) small {
234+
color: var(--oscd-base1);
235+
}
233236
md-icon {
234237
position: relative;
235238
top: 6px;
236239
}
237240
div {
238241
margin-left: 1em;
239-
}
240-
pre {
241-
max-width: 100%;
242-
overflow-x: auto;
243-
}
244-
* {
245-
margin-top: 0px;
246-
}
247-
248-
i {
249-
color: #555a;
242+
margin-right: 1em;
250243
}
251244
th {
252245
font-weight: 300;
253-
opacity: 0.8;
254-
width: 1%;
255-
white-space: nowrap;
246+
}
247+
td {
248+
font-weight: 400;
256249
}
257250
th:first-child {
258251
text-align: right;
259252
color: var(--oscd-base1);
260-
padding-right: 0.5em;
261-
}
262-
td.arrow {
263-
width: 2em;
264-
text-align: center;
265-
color: var(--oscd-base1);
266-
}
267-
.odd > table > tr > th:first-child,
268-
td.arrow {
269-
color: var(--oscd-base0);
270253
}
271254
th:nth-child(2) {
272255
text-align: left;
273256
color: var(--oscd-base0);
274-
background: var(--oscd-base2);
275-
padding-right: 1em;
257+
padding-left: 0.5em;
276258
}
277259
table td:nth-child(3) {
278260
text-align: right;
261+
color: var(--oscd-error);
262+
padding-left: 1em;
279263
}
280-
td:nth-child(5) {
264+
td:nth-child(4) {
281265
text-align: left;
266+
color: var(--oscd-primary);
267+
padding-left: 1em;
268+
}
269+
td:nth-child(4) {
270+
text-align: left;
271+
color: var(--oscd-primary);
272+
}
273+
span {
274+
display: block;
275+
transition: max-height 0.5s ease-in-out;
276+
}
277+
tr:not(:focus) span {
278+
max-height: 60px;
279+
overflow: hidden;
280+
}
281+
tr:not(:focus):hover span {
282+
max-height: 120px;
283+
}
284+
tr:focus {
285+
outline: 2px solid var(--oscd-secondary);
286+
outline-offset: -2px;
282287
}
283288
tr:nth-child(2n) td,
284289
tr:nth-child(2n) th {
285-
background: var(--oscd-base2);
290+
background: var(--oscd-base3);
286291
}
287292
tr:nth-child(2n + 1) td,
288293
tr:nth-child(2n + 1) th {
294+
background: var(--oscd-base2);
295+
}
296+
:host([odd]) tr:nth-child(2n) td,
297+
:host([odd]) tr:nth-child(2n) th {
298+
background: var(--oscd-base2);
299+
}
300+
:host([odd]) tr:nth-child(2n + 1) td,
301+
:host([odd]) tr:nth-child(2n + 1) th {
289302
background: var(--oscd-base3);
290303
}
291304
table {
292-
border: 0.25em solid var(--oscd-base2);
305+
border: 0.25em solid var(--oscd-base3);
293306
table-layout: auto;
294307
border-collapse: collapse;
295308
max-width: 100%;
296-
margin-left: 1.2em;
297-
margin-bottom: 0.3em;
309+
margin-left: 1em;
310+
margin-right: 1em;
298311
background: none;
299312
}
313+
:host([odd]) table {
314+
border: 0.25em solid var(--oscd-base2);
315+
}
300316
* {
301317
cursor: default;
302318
--oscd-primary: var(--oscd-theme-primary, #2aa198);
@@ -315,7 +331,29 @@ export class DiffTree extends LitElement {
315331
:host {
316332
font-family: var(--oscd-text-font);
317333
display: block;
318-
padding: 0.5rem;
334+
background: var(--oscd-base2);
335+
color: var(--oscd-base01);
336+
}
337+
:host(:last-child) {
338+
border-bottom: 0.25em solid var(--oscd-base3);
339+
}
340+
:host([odd]:last-child) {
341+
border-bottom: 0.25em solid var(--oscd-base2);
342+
}
343+
:host([odd]) {
344+
background: var(--oscd-base3);
345+
color: var(--oscd-base00);
346+
}
347+
a {
348+
display: block;
349+
text-decoration: none;
350+
position: sticky;
351+
background: var(--oscd-base2);
352+
font-weight: 400;
353+
padding-bottom: 4px;
354+
}
355+
:host([odd]) a {
356+
background: var(--oscd-base3);
319357
}
320358
`;
321359
}

0 commit comments

Comments
 (0)