draft: WIP changes

TODO: properly split/rebase this
adfinis · Oct 28, 2024 · aeac3af · aeac3af
1 parent 86f2d8b
commit aeac3af
Show file tree

Hide file tree

Showing 24 changed files with 313 additions and 220 deletions.
diff --git a/frontend/app/analysis/index/template.hbs b/frontend/app/analysis/index/template.hbs
@@ -281,6 +281,7 @@
               </button>
             </div>
 
+            {{!-- template-lint-disable table-groups --}}
             <table class="table table--striped table--analysis">
               <colgroup>
                 <col class="w-[7%]" />
@@ -297,8 +298,8 @@
                 <col class="w-[5%]" />
                 <col class="w-[5%]" />
               </colgroup>
-              <thead class="shadow shadow-foreground/5">
-                <tr>
+              <Table::Thead>
+                <Table::Tr>
                   <SortHeader
                     @update={{fn this.updateParam "ordering"}}
                     @current={{this.ordering}}
@@ -339,13 +340,12 @@
                     @current={{this.ordering}}
                     @by="verified_by__username"
                   >Verified by</SortHeader>
-                  {{! TODO: clean this up (same styles as sort-header minus [cursor-pointer, whitespace-nowrap]) }}
-                  <th class="align-bottom text-left py-1 px-2 font-thin text-foreground-mid">Rejected</th>
-                  <th class="align-bottom text-left py-1 px-2 font-thin text-foreground-mid">Review</th>
-                  <th class="align-bottom text-left py-1 px-2 font-thin text-foreground-mid">Not billable</th>
-                  <th class="align-bottom text-left py-1 px-2 font-thin text-foreground-mid">Billed</th>
-                </tr>
-              </thead>
+                  <Table::Th @light={{true}}>Rejected</Table::Th>
+                  <Table::Th @light={{true}}>Review</Table::Th>
+                  <Table::Th @light={{true}}>Not billable</Table::Th>
+                  <Table::Th @light={{true}}>Billed</Table::Th>
+                </Table::Tr>
+              </Table::Thead>
             </table>
             <ScrollContainer class="analysis-scrollable-container">
               <table class="table table--striped table--analysis table-fixed">
@@ -367,7 +367,7 @@
                 <tbody>
                   {{#each reports as |report|}}
                     {{! template-lint-disable}}
-                    <tr
+                    <Table::Tr
                       class="{{if
                           (includes report.id this.selectedReportIds)
                           'selected bg-primary text-foreground-primary'
@@ -377,39 +377,46 @@
                           (or this.canBill (can 'edit report' report))
                           'cursor-pointer'
                         }}
-                        [&>*]:py-1 [&>*]:px-2 align-top shadow shadow-foreground/5"
+                        align-top shadow shadow-foreground/5"
                       {{on "click" (fn this.selectRow report)}}
                     >
-                      <td>{{report.user.username}}</td>
-                      <td>{{moment-format report.date "DD.MM.YYYY"}}</td>
-                      <td>{{format-duration report.duration false}}</td>
-                      <td>{{report.task.project.customer.name}}</td>
-                      <td>{{report.task.project.name}}</td>
-                      <td>{{report.task.name}}</td>
-                      <td><span
+                      <Table::Td>{{report.user.username}}</Table::Td>
+                      <Table::Td>{{moment-format
+                          report.date
+                          "DD.MM.YYYY"
+                        }}</Table::Td>
+                      <Table::Td>{{format-duration
+                          report.duration
+                          false
+                        }}</Table::Td>
+                      <Table::Td
+                      >{{report.task.project.customer.name}}</Table::Td>
+                      <Table::Td>{{report.task.project.name}}</Table::Td>
+                      <Table::Td>{{report.task.name}}</Table::Td>
+                      <Table::Td><span
                           title="{{report.comment}}"
-                        >{{report.comment}}</span></td>
-                      <td>{{if
+                        >{{report.comment}}</span></Table::Td>
+                      <Table::Td>{{if
                           report.verifiedBy
                           report.verifiedBy.username
-                        }}</td>
-                      <td><SyCheckmark
+                        }}</Table::Td>
+                      <Table::Td><SyCheckmark
                           @checked={{report.rejected}}
                           @highlight={{true}}
-                        /></td>
-                      <td><SyCheckmark
+                        /></Table::Td>
+                      <Table::Td><SyCheckmark
                           @checked={{report.review}}
                           @highlight={{true}}
-                        /></td>
-                      <td><SyCheckmark
+                        /></Table::Td>
+                      <Table::Td><SyCheckmark
                           @checked={{report.notBillable}}
                           @highlight={{true}}
-                        /></td>
-                      <td><SyCheckmark
+                        /></Table::Td>
+                      <Table::Td><SyCheckmark
                           @checked={{report.billed}}
                           @highlight={{true}}
-                        /></td>
-                    </tr>
+                        /></Table::Td>
+                    </Table::Tr>
                   {{/each}}
                   {{#if this._canLoadMore}}
                     <tr
@@ -428,28 +435,35 @@
                 </tbody>
               </table>
             </ScrollContainer>
-            <table class="table table--striped table--analysis">
+            <table class="table table--striped table--analysis table-fixed">
               <colgroup>
-                <col />
-                <col />
-                <col />
+                <col class="w-[7%]" />
+                <col class="w-[7%]" />
+                <col class="w-[7%]" />
               </colgroup>
-            </table>
-            <div class="grid grid-cols-[auto,minmax(0,1fr)]">
-              <strong class="mr-2">Total:</strong>
-              <div class="grid grid-cols-2 justify-between">
-                {{#unless this.data.isRunning}}
-                  <span><strong
-                      class="total border-double border-b-4"
-                    >{{format-duration this.totalTime false}}</strong></span>
+              <Table::Tfoot>
+                <Table::Tr>
+                  <Table::Td colspan="2">Total:</Table::Td>
 
-                  <span class="text-right"><em>Displaying
+                  <Table::Td colspan="2" class="font-semibold"><strong
+                      class="total"
+                    >{{format-duration
+                        this.totalTime
+                        false
+                      }}</strong></Table::Td><Table::Td
+                    colspan="6"
+                    class="text-right"
+                  >
+                    <em>Displaying
                       {{reports.length}}
                       of
                       {{this.totalItems}}
-                      reports</em></span>
-                {{/unless}}</div>
-            </div>
+                      reports</em>
+
+                  </Table::Td>
+                </Table::Tr>
+              </Table::Tfoot>
+            </table>
             <div class="export-buttons mt-4 flex justify-end gap-x-2">
               {{#each this.exportLinks as |link|}}
                 <button

diff --git a/frontend/app/components/async-list/template.hbs b/frontend/app/components/async-list/template.hbs
@@ -1,23 +1,21 @@
 {{#if @data.isRunning}}
-  <div class="empty">
+  <Empty>
     <LoadingIcon />
-  </div>
+  </Empty>
 {{else if @data.isError}}
-  <div class="empty">
-    <div>
+  <Empty>
       <FaIcon @icon="bolt" @prefix="fas" />
       <h3>Oops... Something went wrong</h3>
       <p>
         Have you tried turning it off and on again?
         <br />
         Please try refreshing the page.
       </p>
-    </div>
-  </div>
+  </Empty>
 {{else if (not @data.value.length)}}
-  <div class="empty">
+  <Empty>
     {{yield "empty" @data.value}}
-  </div>
+  </Empty>
 {{else}}
   {{yield "body" @data.value}}
 {{/if}}
diff --git a/frontend/app/components/balance-donut/component.js b/frontend/app/components/balance-donut/component.js
@@ -13,20 +13,20 @@ class BalanceDonutComponent extends Component {
     return abs(this.args.balance.usedDays / this.args.balance.credit);
   }
 
-  get color() {
+  get strokeClass() {
     if (this.args.balance.usedDuration) {
-      return "primary";
+      return "stroke-primary";
     }
 
     if (this.value > 1 || this.value < 0) {
-      return "danger";
+      return "stroke-danger";
     }
 
     if (this.value === 1) {
-      return "warning";
+      return "stroke-warning";
     }
 
-    return "success";
+    return "stroke-success";
   }
 
   radius = 100 / (2 * PI);

diff --git a/frontend/app/components/balance-donut/template.hbs b/frontend/app/components/balance-donut/template.hbs
@@ -1,10 +1,10 @@
-<div {{style this.style}} class="{{@class}} balance-donut {{this.color}}">
-  <div class="donut-title">{{@title}}</div>
+<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]">
+  <div class="donut-title text-center text-2xl">{{@title}}</div>
 
-  <div class="donut">
+  <div class="donut relative">
     <svg width="100%" height="100%" viewBox="0 0 40 40">
       <circle
-        class="donut-ring"
+        class="donut-ring stroke-background-muted"
         cx="20"
         cy="20"
         r={{this.radius}}
@@ -19,17 +19,20 @@
         r={{this.radius}}
         fill="transparent"
         stroke-width="2"
-        stroke-dasharray="{{mult (min this.value 1) 100}} {{mult (sub 1 (min this.value 1)) 100}}"
+        stroke-dasharray="{{mult (min this.value 1) 100}} {{mult
+          (sub 1 (min this.value 1))
+          100
+        }}"
         stroke-dashoffset="25"
       ></circle>
     </svg>
 
-    <div class="donut-content">
+    <div class="donut-content absolute flex justify-center items-center text-center p-4 inset-0 w-full h-full flex-col text-xl">
       {{#if @balance.usedDuration}}
         {{format-duration @balance.usedDuration false}}
       {{else}}
         {{#if @balance.credit}}
-          <div>{{@balance.usedDays}} of {{@balance.credit}}</div>
+          <div class="text-sm text-foreground-muted">{{@balance.usedDays}} of {{@balance.credit}}</div>
           {{#if (gte @balance.credit 1)}}
             <div>{{round (mult this.value 100)}}%</div>
           {{/if}}

diff --git a/frontend/app/components/card.hbs b/frontend/app/components/card.hbs
@@ -0,0 +1,3 @@
+<div class="card border rounded bg-background" ...attributes>
+  {{yield}}
+</div>
diff --git a/frontend/app/components/card/block.hbs b/frontend/app/components/card/block.hbs
@@ -0,0 +1,3 @@
+<div class="card-block p-4" ...attributes>
+  {{yield}}
+</div>
diff --git a/frontend/app/components/card/footer.hbs b/frontend/app/components/card/footer.hbs
@@ -0,0 +1,3 @@
+<div class="card-footer py-2 px-4 bg-background-muted border-t last:rounded-b" ...attributes>
+  {{yield}}
+</div>
diff --git a/frontend/app/components/sort-header/template.hbs b/frontend/app/components/sort-header/template.hbs
@@ -1,9 +1,14 @@
 {{! template-lint-disable}}
-<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}}>
+<Table::Th
+  @light={{true}}
+  class="sort-header align-bottom whitespace-nowrap cursor-pointer"
+  {{on "click" this.click}}
+  ...attributes
+>
   {{yield}}
   {{#if this.active}}
     <FaIcon @prefix="fas" @icon="sort-{{this.direction}}" />
   {{else}}
     <FaIcon @prefix="fas" @icon="sort" />
   {{/if}}
-</th>
+</Table::Th>
diff --git a/frontend/app/components/statistic-list/column/template.hbs b/frontend/app/components/statistic-list/column/template.hbs
@@ -1,9 +1,9 @@
-<td ...attributes>
+<Table::Td ...attributes>
   {{#if (eq @layout "DURATION")}}
     {{humanize-duration @value false}}
   {{else if (eq @layout "MONTH")}}
     {{moment-format (moment @value "M") "MMMM"}}
   {{else}}
     {{@value}}
   {{/if}}
-</td>
+</Table::Td>
diff --git a/frontend/app/components/statistic-list/template.hbs b/frontend/app/components/statistic-list/template.hbs
@@ -28,11 +28,11 @@
       <p>Maybe try loosening your filters</p>
     </Empty>
   {{else}}
-    <table
-      class="table table-striped table--statistics w-full table-collapse"
+    <Table
+      class="table table-striped table--statistics"
     >
-      <thead>
-        <tr>
+      <Table::Thead>
+        <Table::Tr>
           {{#each this.columns as |column|}}
             {{#if column.ordering}}
               <SortHeader
@@ -43,12 +43,12 @@
                 {{column.title}}
               </SortHeader>
             {{else}}
-              <th>{{column.title}}</th>
+              <Table::Th @light={{true}}>{{column.title}}</Table::Th>
             {{/if}}
           {{/each}}
           <th></th>
-        </tr>
-      </thead>
+        </Table::Tr>
+      </Table::Thead>
       <VerticalCollection
         @items={{slice @data.last.value}}
         @tagName="tbody"
@@ -57,9 +57,10 @@
         @containerSelector=".page-content--scroll"
         as |row|
       >
-        <tr
+        <Table::Tr
+          @striped={{true}}
           data-test-statistic-list-row
-          class="striped [&>*]:p-2 [&>*]:align-top [&>*]:leading-5"
+          class="[&>*]:leading-5"
         >
           {{#each this.columns as |column|}}
             <StatisticList::Column
@@ -68,7 +69,7 @@
               @value={{get row column.path}}
             />
           {{/each}}
-          <td class="w-1/2">
+          <Table::Td class="w-1/2">
             {{#let
               (or row.totalRemainingEffort row.mostRecentRemainingEffort)
               as |remainingEffort|
@@ -85,13 +86,13 @@
                 />
               {{/let}}
             {{/let}}
-          </td>
-        </tr>
+          </Table::Td>
+        </Table::Tr>
       </VerticalCollection>
-      <tfoot>
-        <tr>
+      <Table::Tfoot>
+        <Table::Tr>
           {{#each this.columns as |column index|}}
-            <td class="p-2">
+            <Table::Td>
               <strong>
                 {{#if (not index)}}
                   Total:
@@ -101,11 +102,11 @@
                   >{{humanize-duration this.total false}}</span>
                 {{/if}}
               </strong>
-            </td>
+            </Table::Td>
           {{/each}}
-          <td></td>
-        </tr>
-      </tfoot>
-    </table>
+          <Table::Td />
+        </Table::Tr>
+      </Table::Tfoot>
+    </Table>
   {{/if}}
 </div>