Skip to content

Commit 57ccd6b

Browse files
renemadsenrenemadsen
authored
Merge pull request #1602 from microting/feat/planning-day-cell-presentation
feat(planning): day-cell durations as "X t Y min (Z.ZZ timer)" + outlined icons
2 parents 83e1419 + 1dcffba commit 57ccd6b

36 files changed

Lines changed: 1171 additions & 187 deletions

‎docs/superpowers/mockups/2026-06-09-planning-day-cell-mockup.html‎

Lines changed: 297 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,297 @@
1+
<!DOCTYPE html>
2+
<html lang="da">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Planning day-cell — redesign mockup</title>
7+
8+
<!-- Roboto = the app's Material body font (fidelity over novelty for an in-app component) -->
9+
<link rel="preconnect" href="https://fonts.googleapis.com" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet" />
12+
<!-- Material Symbols Outlined = the thin, outlined icon look from the target image -->
13+
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap" rel="stylesheet" />
14+
15+
<style>
16+
:root {
17+
/* Pulled from the app's styles.scss / theme tokens */
18+
--success-light: #D4EDDA; /* green-background */
19+
--error-light: #F8D7DA; /* red-background */
20+
--border: #EBEFF2; /* grey-background */
21+
--text-dark: #0F1316;
22+
--text-grey: #6b7280;
23+
--red-text: #DB0D0D;
24+
--blue-text: #0D96DB;
25+
--green-text: #2e7d32;
26+
--page-bg: #f4f6f8;
27+
}
28+
29+
* { box-sizing: border-box; }
30+
31+
body {
32+
margin: 0;
33+
padding: 40px 32px 80px;
34+
background: var(--page-bg);
35+
font-family: 'Roboto', system-ui, sans-serif;
36+
color: var(--text-dark);
37+
-webkit-font-smoothing: antialiased;
38+
}
39+
40+
h1 {
41+
font-weight: 500;
42+
font-size: 22px;
43+
margin: 0 0 4px;
44+
}
45+
.sub {
46+
color: var(--text-grey);
47+
font-size: 14px;
48+
margin: 0 0 28px;
49+
max-width: 760px;
50+
line-height: 1.5;
51+
}
52+
.sub code {
53+
background: #fff;
54+
border: 1px solid var(--border);
55+
border-radius: 4px;
56+
padding: 1px 6px;
57+
font-size: 13px;
58+
}
59+
60+
.board {
61+
display: flex;
62+
flex-wrap: wrap;
63+
gap: 36px;
64+
align-items: flex-start;
65+
}
66+
67+
.variant { width: 300px; }
68+
.variant > .label {
69+
font-size: 13px;
70+
font-weight: 500;
71+
color: var(--text-grey);
72+
text-transform: uppercase;
73+
letter-spacing: .04em;
74+
margin-bottom: 10px;
75+
}
76+
.variant > .note {
77+
font-size: 12px;
78+
color: var(--text-grey);
79+
margin-top: 10px;
80+
line-height: 1.5;
81+
}
82+
83+
/* ---- mimic the mtx-grid day column ---- */
84+
.day-col {
85+
background: #fff;
86+
border: 1px solid var(--border);
87+
border-radius: 8px;
88+
overflow: hidden;
89+
box-shadow: 0 1px 2px rgba(16,19,22,.04);
90+
}
91+
.day-head {
92+
padding: 18px 16px;
93+
font-weight: 500;
94+
font-size: 17px;
95+
border-bottom: 1px solid var(--border);
96+
background: #fff;
97+
}
98+
.day-body { padding: 12px; }
99+
100+
/* ---- the cell itself (mirrors .plan-container + color classes) ---- */
101+
.plan {
102+
border-radius: 8px;
103+
padding: 14px 14px;
104+
min-height: 100px;
105+
display: flex;
106+
gap: 8px;
107+
}
108+
.plan.green { background: var(--success-light); color: var(--text-dark); }
109+
.plan.grey { background: var(--border); color: var(--text-dark); }
110+
.plan-content { flex: 1; }
111+
112+
.row {
113+
display: flex;
114+
align-items: center;
115+
gap: 10px;
116+
line-height: 1.7;
117+
font-size: 15px;
118+
}
119+
.row + .row { margin-top: 2px; }
120+
121+
.material-symbols-outlined {
122+
font-size: 20px;
123+
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
124+
flex: 0 0 22px;
125+
text-align: center;
126+
color: var(--text-dark);
127+
}
128+
.row .range { font-weight: 500; letter-spacing: .2px; }
129+
.row .end-ic { margin-left: 4px; }
130+
131+
/* duration text */
132+
.dur { white-space: nowrap; }
133+
.dur .dec { color: var(--text-grey); }
134+
.dur.neg, .dur.neg .dec { color: var(--red-text); }
135+
136+
/* planned row (kept, reformatted) */
137+
.row.planned .material-symbols-outlined { color: var(--text-grey); }
138+
.row.planned .ptext { color: var(--text-grey); font-weight: 400; }
139+
140+
.divider { height: 1px; background: rgba(15,19,22,.08); margin: 8px 0; }
141+
142+
.legend {
143+
margin-top: 48px;
144+
background: #fff;
145+
border: 1px solid var(--border);
146+
border-radius: 8px;
147+
padding: 20px 24px;
148+
max-width: 760px;
149+
}
150+
.legend h2 { font-size: 15px; font-weight: 500; margin: 0 0 12px; }
151+
.legend table { border-collapse: collapse; width: 100%; font-size: 14px; }
152+
.legend td { padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
153+
.legend td:first-child { color: var(--text-grey); white-space: nowrap; width: 150px; }
154+
.legend code { background: var(--page-bg); border-radius: 4px; padding: 1px 6px; }
155+
</style>
156+
</head>
157+
<body>
158+
159+
<h1>Planning day-cell — redesign mockup</h1>
160+
<p class="sub">
161+
Re-style of the existing <code>#dayColumnTemplate</code> cell. All current rows are kept;
162+
only the <strong>presentation</strong> changes: every duration value renders as
163+
<code>X t Y min (Z.ZZ timer)</code>. Time-of-day stamps stay <strong>HH:mm</strong> (no seconds).
164+
Icons shown in the thin Material&nbsp;Symbols Outlined style to match your image.
165+
</p>
166+
167+
<div class="board">
168+
169+
<!-- A — matches the target image (a day with no plan, just actuals) -->
170+
<div class="variant">
171+
<div class="label">A · matches your image</div>
172+
<div class="day-col">
173+
<div class="day-head">I dag</div>
174+
<div class="day-body">
175+
<div class="plan green">
176+
<div class="plan-content">
177+
<div class="row">
178+
<span class="material-symbols-outlined">login</span>
179+
<span class="range">09:19&nbsp;-&nbsp;09:28</span>
180+
<span class="material-symbols-outlined end-ic">logout</span>
181+
</div>
182+
<div class="row">
183+
<span class="material-symbols-outlined">login</span>
184+
<span class="range">09:31&nbsp;-&nbsp;09:39</span>
185+
<span class="material-symbols-outlined end-ic">logout</span>
186+
</div>
187+
<div class="row">
188+
<span class="material-symbols-outlined">pause</span>
189+
<span class="dur">0 t 3 min <span class="dec">(0.05 timer)</span></span>
190+
</div>
191+
<div class="row">
192+
<span class="material-symbols-outlined">schedule</span>
193+
<span class="dur">0 t 9 min <span class="dec">(0.22 timer)</span></span>
194+
</div>
195+
<div class="row">
196+
<span class="material-symbols-outlined">swap_vert</span>
197+
<span class="dur">0 t 9 min <span class="dec">(0.22 timer)</span></span>
198+
</div>
199+
</div>
200+
</div>
201+
</div>
202+
</div>
203+
<div class="note">Same content as your screenshot, but times shown as HH:mm per your choice
204+
(image had seconds).</div>
205+
</div>
206+
207+
<!-- B — a fuller day: planned + actual + all duration rows + paid-out flex -->
208+
<div class="variant">
209+
<div class="label">B · full cell (all rows kept)</div>
210+
<div class="day-col">
211+
<div class="day-head">Man. 8. jun.</div>
212+
<div class="day-body">
213+
<div class="plan green">
214+
<div class="plan-content">
215+
<div class="row planned">
216+
<span class="material-symbols-outlined">calendar_month</span>
217+
<span class="ptext">07:00&nbsp;-&nbsp;15:00 · 0 t 30 min</span>
218+
</div>
219+
<div class="divider"></div>
220+
<div class="row">
221+
<span class="material-symbols-outlined">login</span>
222+
<span class="range">06:58&nbsp;-&nbsp;15:03</span>
223+
<span class="material-symbols-outlined end-ic">logout</span>
224+
</div>
225+
<div class="row">
226+
<span class="material-symbols-outlined">pause</span>
227+
<span class="dur">0 t 30 min <span class="dec">(0.50 timer)</span></span>
228+
</div>
229+
<div class="row">
230+
<span class="material-symbols-outlined">schedule</span>
231+
<span class="dur">7 t 35 min <span class="dec">(7.58 timer)</span></span>
232+
</div>
233+
<div class="row">
234+
<span class="material-symbols-outlined">payments</span>
235+
<span class="dur">2 t 0 min <span class="dec">(2.00 timer)</span></span>
236+
</div>
237+
<div class="row">
238+
<span class="material-symbols-outlined">swap_vert</span>
239+
<span class="dur">1 t 5 min <span class="dec">(1.08 timer)</span></span>
240+
</div>
241+
</div>
242+
</div>
243+
</div>
244+
</div>
245+
<div class="note">Planned row keeps its time range (HH:mm) and reformats the break duration.
246+
Paid-out flex (<code>payments</code>) and flex balance both use the new format.</div>
247+
</div>
248+
249+
<!-- C — negative flex + future/grey for completeness -->
250+
<div class="variant">
251+
<div class="label">C · negative flex</div>
252+
<div class="day-col">
253+
<div class="day-head">Fre. 5. jun.</div>
254+
<div class="day-body">
255+
<div class="plan green">
256+
<div class="plan-content">
257+
<div class="row">
258+
<span class="material-symbols-outlined">login</span>
259+
<span class="range">07:02&nbsp;-&nbsp;14:30</span>
260+
<span class="material-symbols-outlined end-ic">logout</span>
261+
</div>
262+
<div class="row">
263+
<span class="material-symbols-outlined">pause</span>
264+
<span class="dur">0 t 30 min <span class="dec">(0.50 timer)</span></span>
265+
</div>
266+
<div class="row">
267+
<span class="material-symbols-outlined">schedule</span>
268+
<span class="dur">6 t 58 min <span class="dec">(6.97 timer)</span></span>
269+
</div>
270+
<div class="row">
271+
<span class="material-symbols-outlined">swap_vert</span>
272+
<span class="dur neg">-0 t 32 min <span class="dec">(-0.53 timer)</span></span>
273+
</div>
274+
</div>
275+
</div>
276+
</div>
277+
</div>
278+
<div class="note">Open question: how to render a negative duration — shown here as
279+
<code>-0 t 32 min (-0.53 timer)</code> in red.</div>
280+
</div>
281+
282+
</div>
283+
284+
<div class="legend">
285+
<h2>Format rules in this mockup</h2>
286+
<table>
287+
<tr><td>Duration rows</td><td><code>X t Y min (Z.ZZ timer)</code> — hours part always shown, decimal hours to 2 places. Labels <code>t</code> / <code>min</code> / <code>timer</code> are translatable.</td></tr>
288+
<tr><td>Full format</td><td>actual pause, worked/net hours, flex balance, paid-out flex.</td></tr>
289+
<tr><td><code>X t Y min</code> only (no decimal)</td><td>planned pause/break &amp; planned plan-hours.</td></tr>
290+
<tr><td>Time stamps</td><td>Actual start/stop and planned start/end stay <code>HH:mm</code> (no seconds).</td></tr>
291+
<tr><td>Icons</td><td><code>login</code> / <code>logout</code> (shift), <code>pause</code>, <code>schedule</code> (worked), <code>swap_vert</code> (flex), <code>calendar_month</code> (planned), <code>payments</code> (paid-out flex) — Material Symbols Outlined, thin.</td></tr>
292+
<tr><td>Cell colour</td><td>Existing <code>green-background</code> (#D4EDDA) for completed days — unchanged logic.</td></tr>
293+
</table>
294+
</div>
295+
296+
</body>
297+
</html>

0 commit comments

Comments
 (0)