Skip to content

Commit 9cc5817

Browse files
lovasoalovasoa
committed
new component: timeline
1 parent b0050f6 commit 9cc5817

File tree

4 files changed

+137
-2
lines changed

4 files changed

+137
-2
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
# CHANGELOG.md
22

3-
## 0.13.0 (unreleased)
3+
## 0.13.0 (2023-10-16)
4+
- New [timeline](https://sql.ophir.dev/documentation.sql?component=timeline#component) component to display a timeline of events.
45
- Add support for scatter and bubble plots in the chart component. See [the chart documentation](https://sql.ophir.dev/documentation.sql?component=chart#component).
56
- further improve debuggability with more precise error messages. In particular, it usd to be hard to debug errors in long migration scripts, because the line number and position was not displayed. This is now fixed.
7+
- Better logs on 404 errors. SQLPage used to log a message without the path of the file that was not found. This made it hard to debug 404 errors. This is now fixed.
68
- Add a new `top_image` attribute to the [card](https://sql.ophir.dev/documentation.sql?component=card#component) component to display an image at the top of the card. This makes it possible to create beautiful image galleries with SQLPage.
79
- Updated dependencies, for bug fixes and performance improvements.
810
- New icons (see https://tabler-icons.io/changelog)

‎examples/official-site/sqlpage/migrations/13_tab.sql‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ VALUES (
55
'row-insert-bottom',
66
'0.9.5'
77
);
8-
-- Insert the parameters for the http_header component into the parameter table
98
INSERT INTO parameter (
109
component,
1110
name,

‎examples/official-site/sqlpage/migrations/16_timeline.sql‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
INSERT INTO component (name, description, icon, introduced_in_version)
2+
VALUES (
3+
'timeline',
4+
'A list of events with a vertical line connecting them.',
5+
'git-commit',
6+
'0.13.0'
7+
);
8+
INSERT INTO parameter (
9+
component,
10+
name,
11+
description,
12+
type,
13+
top_level,
14+
optional
15+
)
16+
VALUES (
17+
'timeline',
18+
'simple',
19+
'If set to true, the timeline will be displayed in a condensed format without icons.',
20+
'BOOLEAN',
21+
TRUE,
22+
TRUE
23+
),
24+
(
25+
'timeline',
26+
'title',
27+
'Name of the event.',
28+
'TEXT',
29+
FALSE,
30+
FALSE
31+
),
32+
(
33+
'timeline',
34+
'date',
35+
'Date of the event.',
36+
'TEXT',
37+
FALSE,
38+
FALSE
39+
),
40+
(
41+
'timeline',
42+
'icon',
43+
'Name of the icon to display next to the event. See tabler-icons.io for a list of available icons.',
44+
'TEXT',
45+
FALSE,
46+
TRUE
47+
),
48+
(
49+
'timeline',
50+
'color',
51+
'Color of the icon. See preview.tabler.io/colors.html for a list of available colors.',
52+
'TEXT',
53+
FALSE,
54+
TRUE
55+
),
56+
(
57+
'timeline',
58+
'description',
59+
'Textual description of the event.',
60+
'TEXT',
61+
FALSE,
62+
TRUE
63+
),
64+
(
65+
'timeline',
66+
'description_md',
67+
'Description of the event in Markdown.',
68+
'TEXT',
69+
FALSE,
70+
TRUE
71+
),
72+
(
73+
'timeline',
74+
'link',
75+
'Link to a page with more information about the event.',
76+
'TEXT',
77+
FALSE,
78+
TRUE
79+
);
80+
INSERT INTO example (component, description, properties)
81+
VALUES (
82+
'timeline',
83+
'A basic timeline with just names and dates.',
84+
JSON(
85+
'[
86+
{ "component": "timeline", "simple": true },
87+
{ "title": "New message from Elon Musk", "date": "13:00" },
88+
{ "title": "Jeff Bezos assigned task \"work more\" to you.", "date": "yesterday, 16:35" }
89+
]'
90+
)
91+
),
92+
(
93+
'timeline',
94+
'A full-fledged timeline with icons, colors, and rich text descriptions.',
95+
JSON(
96+
'[
97+
{ "component": "timeline" },
98+
{ "title": "v0.13.0 was just released !", "link": "https://github.com/lovasoa/SQLpage/releases/", "date": "2023-10-16", "icon": "brand-github", "color": "green", "description_md": "This version introduces the `timeline` component." },
99+
{ "title": "They are talking about us...", "description_md": "[This article](https://www.postgresql.org/about/news/announcing-sqlpage-build-dynamic-web-applications-in-sql-2672/) on the official PostgreSQL website mentions SQLPage.", "date": "2023-07-12", "icon": "database", "color": "blue" }
100+
]'
101+
)
102+
)
103+
;

‎sqlpage/templates/timeline.handlebars‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<ul class="timeline {{#if simple}}timeline-simple{{/if}}">
2+
{{#each_row}}
3+
<li class="timeline-event">
4+
<div class="timeline-event-icon {{#if color}}bg-{{color}}-lt{{/if}}">
5+
{{~icon_img (default icon 'git-commit')~}}
6+
</div>
7+
{{~#if link~}}
8+
<a class="card timeline-event-card" href="{{link}}">
9+
{{~else~}}
10+
<div class="card timeline-event-card">
11+
{{~/if~}}
12+
<div class="card-body">
13+
<div class="text-secondary float-end">{{date}}</div>
14+
{{~#if title}}<h4>{{title}}</h4>{{~/if~}}
15+
{{~#if (or description description_md)~}}
16+
<p class="text-secondary">
17+
{{~description~}}
18+
{{~#if description_md~}}
19+
{{{markdown description_md}}}
20+
{{~/if~}}
21+
</p>
22+
{{~/if~}}
23+
</div>
24+
{{~#if link~}}
25+
</a>
26+
{{~else~}}
27+
</div>
28+
{{~/if~}}
29+
</li>
30+
{{/each_row}}
31+
</ul>

0 commit comments

Comments
 (0)