Skip to content

Commit aeac3af

Browse files
c0rydorasc0rydoras
committed
draft: WIP changes
TODO: properly split/rebase this
1 parent 86f2d8b commit aeac3af

File tree

24 files changed

+313
-220
lines changed

24 files changed

+313
-220
lines changed

‎frontend/app/analysis/index/template.hbs

Lines changed: 60 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -281,6 +281,7 @@
281281
</button>
282282
</div>
283283

284+
{{!-- template-lint-disable table-groups --}}
284285
<table class="table table--striped table--analysis">
285286
<colgroup>
286287
<col class="w-[7%]" />
@@ -297,8 +298,8 @@
297298
<col class="w-[5%]" />
298299
<col class="w-[5%]" />
299300
</colgroup>
300-
<thead class="shadow shadow-foreground/5">
301-
<tr>
301+
<Table::Thead>
302+
<Table::Tr>
302303
<SortHeader
303304
@update={{fn this.updateParam "ordering"}}
304305
@current={{this.ordering}}
@@ -339,13 +340,12 @@
339340
@current={{this.ordering}}
340341
@by="verified_by__username"
341342
>Verified by</SortHeader>
342-
{{! TODO: clean this up (same styles as sort-header minus [cursor-pointer, whitespace-nowrap]) }}
343-
<th class="align-bottom text-left py-1 px-2 font-thin text-foreground-mid">Rejected</th>
344-
<th class="align-bottom text-left py-1 px-2 font-thin text-foreground-mid">Review</th>
345-
<th class="align-bottom text-left py-1 px-2 font-thin text-foreground-mid">Not billable</th>
346-
<th class="align-bottom text-left py-1 px-2 font-thin text-foreground-mid">Billed</th>
347-
</tr>
348-
</thead>
343+
<Table::Th @light={{true}}>Rejected</Table::Th>
344+
<Table::Th @light={{true}}>Review</Table::Th>
345+
<Table::Th @light={{true}}>Not billable</Table::Th>
346+
<Table::Th @light={{true}}>Billed</Table::Th>
347+
</Table::Tr>
348+
</Table::Thead>
349349
</table>
350350
<ScrollContainer class="analysis-scrollable-container">
351351
<table class="table table--striped table--analysis table-fixed">
@@ -367,7 +367,7 @@
367367
<tbody>
368368
{{#each reports as |report|}}
369369
{{! template-lint-disable}}
370-
<tr
370+
<Table::Tr
371371
class="{{if
372372
(includes report.id this.selectedReportIds)
373373
'selected bg-primary text-foreground-primary'
@@ -377,39 +377,46 @@
377377
(or this.canBill (can 'edit report' report))
378378
'cursor-pointer'
379379
}}
380-
[&>*]:py-1 [&>*]:px-2 align-top shadow shadow-foreground/5"
380+
align-top shadow shadow-foreground/5"
381381
{{on "click" (fn this.selectRow report)}}
382382
>
383-
<td>{{report.user.username}}</td>
384-
<td>{{moment-format report.date "DD.MM.YYYY"}}</td>
385-
<td>{{format-duration report.duration false}}</td>
386-
<td>{{report.task.project.customer.name}}</td>
387-
<td>{{report.task.project.name}}</td>
388-
<td>{{report.task.name}}</td>
389-
<td><span
383+
<Table::Td>{{report.user.username}}</Table::Td>
384+
<Table::Td>{{moment-format
385+
report.date
386+
"DD.MM.YYYY"
387+
}}</Table::Td>
388+
<Table::Td>{{format-duration
389+
report.duration
390+
false
391+
}}</Table::Td>
392+
<Table::Td
393+
>{{report.task.project.customer.name}}</Table::Td>
394+
<Table::Td>{{report.task.project.name}}</Table::Td>
395+
<Table::Td>{{report.task.name}}</Table::Td>
396+
<Table::Td><span
390397
title="{{report.comment}}"
391-
>{{report.comment}}</span></td>
392-
<td>{{if
398+
>{{report.comment}}</span></Table::Td>
399+
<Table::Td>{{if
393400
report.verifiedBy
394401
report.verifiedBy.username
395-
}}</td>
396-
<td><SyCheckmark
402+
}}</Table::Td>
403+
<Table::Td><SyCheckmark
397404
@checked={{report.rejected}}
398405
@highlight={{true}}
399-
/></td>
400-
<td><SyCheckmark
406+
/></Table::Td>
407+
<Table::Td><SyCheckmark
401408
@checked={{report.review}}
402409
@highlight={{true}}
403-
/></td>
404-
<td><SyCheckmark
410+
/></Table::Td>
411+
<Table::Td><SyCheckmark
405412
@checked={{report.notBillable}}
406413
@highlight={{true}}
407-
/></td>
408-
<td><SyCheckmark
414+
/></Table::Td>
415+
<Table::Td><SyCheckmark
409416
@checked={{report.billed}}
410417
@highlight={{true}}
411-
/></td>
412-
</tr>
418+
/></Table::Td>
419+
</Table::Tr>
413420
{{/each}}
414421
{{#if this._canLoadMore}}
415422
<tr
@@ -428,28 +435,35 @@
428435
</tbody>
429436
</table>
430437
</ScrollContainer>
431-
<table class="table table--striped table--analysis">
438+
<table class="table table--striped table--analysis table-fixed">
432439
<colgroup>
433-
<col />
434-
<col />
435-
<col />
440+
<col class="w-[7%]" />
441+
<col class="w-[7%]" />
442+
<col class="w-[7%]" />
436443
</colgroup>
437-
</table>
438-
<div class="grid grid-cols-[auto,minmax(0,1fr)]">
439-
<strong class="mr-2">Total:</strong>
440-
<div class="grid grid-cols-2 justify-between">
441-
{{#unless this.data.isRunning}}
442-
<span><strong
443-
class="total border-double border-b-4"
444-
>{{format-duration this.totalTime false}}</strong></span>
444+
<Table::Tfoot>
445+
<Table::Tr>
446+
<Table::Td colspan="2">Total:</Table::Td>
445447

446-
<span class="text-right"><em>Displaying
448+
<Table::Td colspan="2" class="font-semibold"><strong
449+
class="total"
450+
>{{format-duration
451+
this.totalTime
452+
false
453+
}}</strong></Table::Td><Table::Td
454+
colspan="6"
455+
class="text-right"
456+
>
457+
<em>Displaying
447458
{{reports.length}}
448459
of
449460
{{this.totalItems}}
450-
reports</em></span>
451-
{{/unless}}</div>
452-
</div>
461+
reports</em>
462+
463+
</Table::Td>
464+
</Table::Tr>
465+
</Table::Tfoot>
466+
</table>
453467
<div class="export-buttons mt-4 flex justify-end gap-x-2">
454468
{{#each this.exportLinks as |link|}}
455469
<button

‎frontend/app/components/async-list/template.hbs

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,21 @@
11
{{#if @data.isRunning}}
2-
<div class="empty">
2+
<Empty>
33
<LoadingIcon />
4-
</div>
4+
</Empty>
55
{{else if @data.isError}}
6-
<div class="empty">
7-
<div>
6+
<Empty>
87
<FaIcon @icon="bolt" @prefix="fas" />
98
<h3>Oops... Something went wrong</h3>
109
<p>
1110
Have you tried turning it off and on again?
1211
<br />
1312
Please try refreshing the page.
1413
</p>
15-
</div>
16-
</div>
14+
</Empty>
1715
{{else if (not @data.value.length)}}
18-
<div class="empty">
16+
<Empty>
1917
{{yield "empty" @data.value}}
20-
</div>
18+
</Empty>
2119
{{else}}
2220
{{yield "body" @data.value}}
2321
{{/if}}

‎frontend/app/components/balance-donut/component.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,20 @@ class BalanceDonutComponent extends Component {
1313
return abs(this.args.balance.usedDays / this.args.balance.credit);
1414
}
1515

16-
get color() {
16+
get strokeClass() {
1717
if (this.args.balance.usedDuration) {
18-
return "primary";
18+
return "stroke-primary";
1919
}
2020

2121
if (this.value > 1 || this.value < 0) {
22-
return "danger";
22+
return "stroke-danger";
2323
}
2424

2525
if (this.value === 1) {
26-
return "warning";
26+
return "stroke-warning";
2727
}
2828

29-
return "success";
29+
return "stroke-success";
3030
}
3131

3232
radius = 100 / (2 * PI);

‎frontend/app/components/balance-donut/template.hbs

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
<div {{style this.style}} class="{{@class}} balance-donut {{this.color}}">
2-
<div class="donut-title">{{@title}}</div>
1+
<div {{style this.style}} class="{{@class}} balance-donut {{this.strokeClass}} relative translate-y-[calc(var(--max-offset)*var(--offset-multiplicator))] md:basis-32 text-foreground/85 lg:[--max-offset:-6rem]">
2+
<div class="donut-title text-center text-2xl">{{@title}}</div>
33

4-
<div class="donut">
4+
<div class="donut relative">
55
<svg width="100%" height="100%" viewBox="0 0 40 40">
66
<circle
7-
class="donut-ring"
7+
class="donut-ring stroke-background-muted"
88
cx="20"
99
cy="20"
1010
r={{this.radius}}
@@ -19,17 +19,20 @@
1919
r={{this.radius}}
2020
fill="transparent"
2121
stroke-width="2"
22-
stroke-dasharray="{{mult (min this.value 1) 100}} {{mult (sub 1 (min this.value 1)) 100}}"
22+
stroke-dasharray="{{mult (min this.value 1) 100}} {{mult
23+
(sub 1 (min this.value 1))
24+
100
25+
}}"
2326
stroke-dashoffset="25"
2427
></circle>
2528
</svg>
2629

27-
<div class="donut-content">
30+
<div class="donut-content absolute flex justify-center items-center text-center p-4 inset-0 w-full h-full flex-col text-xl">
2831
{{#if @balance.usedDuration}}
2932
{{format-duration @balance.usedDuration false}}
3033
{{else}}
3134
{{#if @balance.credit}}
32-
<div>{{@balance.usedDays}} of {{@balance.credit}}</div>
35+
<div class="text-sm text-foreground-muted">{{@balance.usedDays}} of {{@balance.credit}}</div>
3336
{{#if (gte @balance.credit 1)}}
3437
<div>{{round (mult this.value 100)}}%</div>
3538
{{/if}}

‎frontend/app/components/card.hbs

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="card border rounded bg-background" ...attributes>
2+
{{yield}}
3+
</div>

‎frontend/app/components/card/block.hbs

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="card-block p-4" ...attributes>
2+
{{yield}}
3+
</div>

‎frontend/app/components/card/footer.hbs

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="card-footer py-2 px-4 bg-background-muted border-t last:rounded-b" ...attributes>
2+
{{yield}}
3+
</div>

‎frontend/app/components/sort-header/template.hbs

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
{{! template-lint-disable}}
2-
<th class="sort-header align-bottom text-left whitespace-nowrap cursor-pointer py-1 px-2 font-thin text-foreground-mid" {{on "click" this.click}}>
2+
<Table::Th
3+
@light={{true}}
4+
class="sort-header align-bottom whitespace-nowrap cursor-pointer"
5+
{{on "click" this.click}}
6+
...attributes
7+
>
38
{{yield}}
49
{{#if this.active}}
510
<FaIcon @prefix="fas" @icon="sort-{{this.direction}}" />
611
{{else}}
712
<FaIcon @prefix="fas" @icon="sort" />
813
{{/if}}
9-
</th>
14+
</Table::Th>

‎frontend/app/components/statistic-list/column/template.hbs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
<td ...attributes>
1+
<Table::Td ...attributes>
22
{{#if (eq @layout "DURATION")}}
33
{{humanize-duration @value false}}
44
{{else if (eq @layout "MONTH")}}
55
{{moment-format (moment @value "M") "MMMM"}}
66
{{else}}
77
{{@value}}
88
{{/if}}
9-
</td>
9+
</Table::Td>

‎frontend/app/components/statistic-list/template.hbs

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,11 @@
2828
<p>Maybe try loosening your filters</p>
2929
</Empty>
3030
{{else}}
31-
<table
32-
class="table table-striped table--statistics w-full table-collapse"
31+
<Table
32+
class="table table-striped table--statistics"
3333
>
34-
<thead>
35-
<tr>
34+
<Table::Thead>
35+
<Table::Tr>
3636
{{#each this.columns as |column|}}
3737
{{#if column.ordering}}
3838
<SortHeader
@@ -43,12 +43,12 @@
4343
{{column.title}}
4444
</SortHeader>
4545
{{else}}
46-
<th>{{column.title}}</th>
46+
<Table::Th @light={{true}}>{{column.title}}</Table::Th>
4747
{{/if}}
4848
{{/each}}
4949
<th></th>
50-
</tr>
51-
</thead>
50+
</Table::Tr>
51+
</Table::Thead>
5252
<VerticalCollection
5353
@items={{slice @data.last.value}}
5454
@tagName="tbody"
@@ -57,9 +57,10 @@
5757
@containerSelector=".page-content--scroll"
5858
as |row|
5959
>
60-
<tr
60+
<Table::Tr
61+
@striped={{true}}
6162
data-test-statistic-list-row
62-
class="striped [&>*]:p-2 [&>*]:align-top [&>*]:leading-5"
63+
class="[&>*]:leading-5"
6364
>
6465
{{#each this.columns as |column|}}
6566
<StatisticList::Column
@@ -68,7 +69,7 @@
6869
@value={{get row column.path}}
6970
/>
7071
{{/each}}
71-
<td class="w-1/2">
72+
<Table::Td class="w-1/2">
7273
{{#let
7374
(or row.totalRemainingEffort row.mostRecentRemainingEffort)
7475
as |remainingEffort|
@@ -85,13 +86,13 @@
8586
/>
8687
{{/let}}
8788
{{/let}}
88-
</td>
89-
</tr>
89+
</Table::Td>
90+
</Table::Tr>
9091
</VerticalCollection>
91-
<tfoot>
92-
<tr>
92+
<Table::Tfoot>
93+
<Table::Tr>
9394
{{#each this.columns as |column index|}}
94-
<td class="p-2">
95+
<Table::Td>
9596
<strong>
9697
{{#if (not index)}}
9798
Total:
@@ -101,11 +102,11 @@
101102
>{{humanize-duration this.total false}}</span>
102103
{{/if}}
103104
</strong>
104-
</td>
105+
</Table::Td>
105106
{{/each}}
106-
<td></td>
107-
</tr>
108-
</tfoot>
109-
</table>
107+
<Table::Td />
108+
</Table::Tr>
109+
</Table::Tfoot>
110+
</Table>
110111
{{/if}}
111112
</div>

0 commit comments

Comments
 (0)