Skip to content

Commit 69f6ea5

Browse files
claremacraeclaremacrae
committed
docs: Add the "Tasks extras" to the Sample HTML in Styling docs.
1 parent b271a03 commit 69f6ea5

File tree

1 file changed

+151
-102
lines changed

1 file changed

+151
-102
lines changed

‎docs/Advanced/Styling.md‎

Lines changed: 151 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -71,135 +71,184 @@ The reason for this additional internal span is that it allows CSS styles that c
7171

7272
### Sample HTML: Full mode
7373

74-
To help visualise the structure above, here is the HTML for a sample task shown in [[Layout#Full Mode|full mode]].
74+
To help visualise the structure above, here is the HTML for a sample Tasks search shown in [[Layout#Full Mode|full mode]].
7575

7676
> [!Note]
77-
> The below does not (yet) show the "Task extras".
77+
> In Reading Mode:
78+
>
79+
> - all the classes and data inside the `li` are available,
80+
> - and none of the "Task extras" content is available.
7881
79-
<!-- snippet: TaskLineRenderer.test.Visualise_HTML_Full_task_-_full_mode.approved.html -->
82+
<!-- snippet: QueryResultsRenderer.test.QueryResultsRenderer_tests_fully_populated_task.approved.html -->
8083
```html
8184
<!--
8285
- [ ] Do exercises #todo #health 🆔 abcdef ⛔ 123456,abc123 🔼 🔁 every day when done 🏁 delete ➕ 2023-07-01 🛫 2023-07-02 ⏳ 2023-07-03 📅 2023-07-04 ❌ 2023-07-06 ✅ 2023-07-05 ^dcf64c
8386
-->
8487

85-
<li
86-
class="task-list-item plugin-tasks-list-item"
87-
data-task-priority="medium"
88-
data-task-created="past-4d"
89-
data-task-start="past-3d"
90-
data-task-scheduled="past-2d"
91-
data-task-due="past-1d"
92-
data-task-cancelled="future-1d"
93-
data-task-done="today"
94-
data-task=""
95-
data-line="0"
96-
data-task-status-name="Todo"
97-
data-task-status-type="TODO">
98-
<input class="task-list-item-checkbox" type="checkbox" title="Right-click for options" data-line="0" />
99-
<span class="tasks-list-text">
100-
<span class="task-description"><span>Do exercises #todo #health</span></span>
101-
<span class="task-id"><span>🆔 abcdef</span></span>
102-
<span class="task-dependsOn"><span>⛔ 123456,abc123</span></span>
103-
<span class="task-priority" data-task-priority="medium"><span>🔼</span></span>
104-
<span class="task-recurring"><span>🔁 every day when done</span></span>
105-
<span class="task-onCompletion"><span>🏁 delete</span></span>
106-
<span
107-
class="task-created"
88+
<div>
89+
<ul class="contains-task-list plugin-tasks-query-result">
90+
<li
91+
class="task-list-item plugin-tasks-list-item"
92+
data-task-priority="medium"
10893
data-task-created="past-4d"
109-
title="Click to edit created date, Right-click for more options">
110-
<span>➕ 2023-07-01</span>
111-
</span>
112-
<span class="task-start" data-task-start="past-3d" title="Click to edit start date, Right-click for more options">
113-
<span>🛫 2023-07-02</span>
114-
</span>
115-
<span
116-
class="task-scheduled"
94+
data-task-start="past-3d"
11795
data-task-scheduled="past-2d"
118-
title="Click to edit scheduled date, Right-click for more options">
119-
<span>⏳ 2023-07-03</span>
120-
</span>
121-
<span class="task-due" data-task-due="past-1d" title="Click to edit due date, Right-click for more options">
122-
<span>📅 2023-07-04</span>
123-
</span>
124-
<span
125-
class="task-cancelled"
96+
data-task-due="past-1d"
12697
data-task-cancelled="future-1d"
127-
title="Click to edit cancelled date, Right-click for more options">
128-
<span>❌ 2023-07-06</span>
129-
</span>
130-
<span class="task-done" data-task-done="today" title="Click to edit done date, Right-click for more options">
131-
<span>✅ 2023-07-05</span>
132-
</span>
133-
<span class="task-block-link"><span>^dcf64c</span></span>
134-
</span>
135-
</li>
98+
data-task-done="today"
99+
data-task=""
100+
data-line="0"
101+
data-task-status-name="Todo"
102+
data-task-status-type="TODO">
103+
<input class="task-list-item-checkbox" type="checkbox" title="Right-click for options" data-line="0" />
104+
<span class="tasks-list-text">
105+
<span class="task-description"><span>Do exercises #todo #health</span></span>
106+
<span class="task-id"><span>🆔 abcdef</span></span>
107+
<span class="task-dependsOn"><span>⛔ 123456,abc123</span></span>
108+
<span class="task-priority" data-task-priority="medium"><span>🔼</span></span>
109+
<span class="task-recurring"><span>🔁 every day when done</span></span>
110+
<span class="task-onCompletion"><span>🏁 delete</span></span>
111+
<span
112+
class="task-created"
113+
data-task-created="past-4d"
114+
title="Click to edit created date, Right-click for more options">
115+
<span>➕ 2023-07-01</span>
116+
</span>
117+
<span
118+
class="task-start"
119+
data-task-start="past-3d"
120+
title="Click to edit start date, Right-click for more options">
121+
<span>🛫 2023-07-02</span>
122+
</span>
123+
<span
124+
class="task-scheduled"
125+
data-task-scheduled="past-2d"
126+
title="Click to edit scheduled date, Right-click for more options">
127+
<span>⏳ 2023-07-03</span>
128+
</span>
129+
<span class="task-due" data-task-due="past-1d" title="Click to edit due date, Right-click for more options">
130+
<span>📅 2023-07-04</span>
131+
</span>
132+
<span
133+
class="task-cancelled"
134+
data-task-cancelled="future-1d"
135+
title="Click to edit cancelled date, Right-click for more options">
136+
<span>❌ 2023-07-06</span>
137+
</span>
138+
<span class="task-done" data-task-done="today" title="Click to edit done date, Right-click for more options">
139+
<span>✅ 2023-07-05</span>
140+
</span>
141+
<span class="task-block-link"><span>^dcf64c</span></span>
142+
</span>
143+
<span class="task-extras">
144+
<span class="tasks-urgency">18.157</span>
145+
<span class="tasks-backlink">
146+
(
147+
<a rel="noopener" target="_blank" class="internal-link">fileName &gt; My Header</a>
148+
)
149+
</span>
150+
<a class="tasks-edit" title="Edit task" href="#"></a>
151+
<a class="tasks-postpone" title="ℹ️ Due tomorrow, on Thu 6th Jul (right-click for more options)"></a>
152+
</span>
153+
</li>
154+
</ul>
155+
<div class="task-count">1 task</div>
156+
</div>
136157
```
137158
<!-- endSnippet -->
138159

139160
### Sample HTML: Short mode
140161

141-
Here is the same task in [[Layout#Short Mode|short mode]]. The only difference is that any text values after Tasks emoji are omitted:
162+
Here is the same Tasks search in [[Layout#Short Mode|short mode]].
163+
164+
The differences from full mode are:
165+
166+
- the `ul` has an extra class `tasks-layout-short-mode`,
167+
- any text values after Tasks emoji are omitted,
168+
- the backlink is shorter and has an extra class `internal-link-short-mode`,
169+
- the postpone button has an extra class `tasks-postpone-short-mode`.
142170

143171
> [!Note]
144-
> The below does not (yet) show the "Task extras".
172+
> In Reading Mode:
145173
>
146-
<!-- snippet: TaskLineRenderer.test.Visualise_HTML_Full_task_-_short_mode.approved.html -->
174+
> - all the classes and data inside the `li` are available,
175+
> - and none of the "Task extras" content is available.
176+
177+
<!-- snippet: QueryResultsRenderer.test.QueryResultsRenderer_tests_fully_populated_task_-_short_mode.approved.html -->
147178
```html
148179
<!--
149180
- [ ] Do exercises #todo #health 🆔 abcdef ⛔ 123456,abc123 🔼 🔁 every day when done 🏁 delete ➕ 2023-07-01 🛫 2023-07-02 ⏳ 2023-07-03 📅 2023-07-04 ❌ 2023-07-06 ✅ 2023-07-05 ^dcf64c
150181
-->
151182

152-
<li
153-
class="task-list-item plugin-tasks-list-item"
154-
data-task-priority="medium"
155-
data-task-created="past-4d"
156-
data-task-start="past-3d"
157-
data-task-scheduled="past-2d"
158-
data-task-due="past-1d"
159-
data-task-cancelled="future-1d"
160-
data-task-done="today"
161-
data-task=""
162-
data-line="0"
163-
data-task-status-name="Todo"
164-
data-task-status-type="TODO">
165-
<input class="task-list-item-checkbox" type="checkbox" title="Right-click for options" data-line="0" />
166-
<span class="tasks-list-text">
167-
<span class="task-description"><span>Do exercises #todo #health</span></span>
168-
<span class="task-id"><span>🆔</span></span>
169-
<span class="task-dependsOn"><span>⛔</span></span>
170-
<span class="task-priority" data-task-priority="medium"><span>🔼</span></span>
171-
<span class="task-recurring"><span>🔁</span></span>
172-
<span class="task-onCompletion"><span>🏁</span></span>
173-
<span
174-
class="task-created"
183+
<div>
184+
<ul class="contains-task-list plugin-tasks-query-result tasks-layout-short-mode">
185+
<li
186+
class="task-list-item plugin-tasks-list-item"
187+
data-task-priority="medium"
175188
data-task-created="past-4d"
176-
title="Click to edit created date, Right-click for more options">
177-
<span>➕</span>
178-
</span>
179-
<span class="task-start" data-task-start="past-3d" title="Click to edit start date, Right-click for more options">
180-
<span>🛫</span>
181-
</span>
182-
<span
183-
class="task-scheduled"
189+
data-task-start="past-3d"
184190
data-task-scheduled="past-2d"
185-
title="Click to edit scheduled date, Right-click for more options">
186-
<span>⏳</span>
187-
</span>
188-
<span class="task-due" data-task-due="past-1d" title="Click to edit due date, Right-click for more options">
189-
<span>📅</span>
190-
</span>
191-
<span
192-
class="task-cancelled"
191+
data-task-due="past-1d"
193192
data-task-cancelled="future-1d"
194-
title="Click to edit cancelled date, Right-click for more options">
195-
<span>❌</span>
196-
</span>
197-
<span class="task-done" data-task-done="today" title="Click to edit done date, Right-click for more options">
198-
<span>✅</span>
199-
</span>
200-
<span class="task-block-link"><span>^dcf64c</span></span>
201-
</span>
202-
</li>
193+
data-task-done="today"
194+
data-task=""
195+
data-line="0"
196+
data-task-status-name="Todo"
197+
data-task-status-type="TODO">
198+
<input class="task-list-item-checkbox" type="checkbox" title="Right-click for options" data-line="0" />
199+
<span class="tasks-list-text">
200+
<span class="task-description"><span>Do exercises #todo #health</span></span>
201+
<span class="task-id"><span>🆔</span></span>
202+
<span class="task-dependsOn"><span>⛔</span></span>
203+
<span class="task-priority" data-task-priority="medium"><span>🔼</span></span>
204+
<span class="task-recurring"><span>🔁</span></span>
205+
<span class="task-onCompletion"><span>🏁</span></span>
206+
<span
207+
class="task-created"
208+
data-task-created="past-4d"
209+
title="Click to edit created date, Right-click for more options">
210+
<span>➕</span>
211+
</span>
212+
<span
213+
class="task-start"
214+
data-task-start="past-3d"
215+
title="Click to edit start date, Right-click for more options">
216+
<span>🛫</span>
217+
</span>
218+
<span
219+
class="task-scheduled"
220+
data-task-scheduled="past-2d"
221+
title="Click to edit scheduled date, Right-click for more options">
222+
<span>⏳</span>
223+
</span>
224+
<span class="task-due" data-task-due="past-1d" title="Click to edit due date, Right-click for more options">
225+
<span>📅</span>
226+
</span>
227+
<span
228+
class="task-cancelled"
229+
data-task-cancelled="future-1d"
230+
title="Click to edit cancelled date, Right-click for more options">
231+
<span>❌</span>
232+
</span>
233+
<span class="task-done" data-task-done="today" title="Click to edit done date, Right-click for more options">
234+
<span>✅</span>
235+
</span>
236+
<span class="task-block-link"><span>^dcf64c</span></span>
237+
</span>
238+
<span class="task-extras">
239+
<span class="tasks-urgency">18.157</span>
240+
<span class="tasks-backlink">
241+
<a rel="noopener" target="_blank" class="internal-link internal-link-short-mode">🔗</a>
242+
</span>
243+
<a class="tasks-edit" title="Edit task" href="#"></a>
244+
<a
245+
class="tasks-postpone tasks-postpone-short-mode"
246+
title="ℹ️ Due tomorrow, on Thu 6th Jul (right-click for more options)"></a>
247+
</span>
248+
</li>
249+
</ul>
250+
<div class="task-count">1 task</div>
251+
</div>
203252
```
204253
<!-- endSnippet -->
205254

0 commit comments

Comments
 (0)