Skip to content

Commit 7750ed2

Browse files
levkklevkk
authored
Add tabs & table (#982)
1 parent 334bdc5 commit 7750ed2

File tree

24 files changed

+353
-16
lines changed

24 files changed

+353
-16
lines changed

‎pgml-dashboard/.editorconfig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,4 @@ indent_size = 4
1313

1414
[*.html]
1515
ident_style = space
16-
indent_size = 4
16+
indent_size = 2

‎pgml-dashboard/build.rs

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ use std::process::Command;
33

44
fn main() {
55
println!("cargo:rerun-if-changed=migrations");
6-
println!("cargo:rerun-if-changed=src");
76

87
let output = Command::new("git")
98
.args(&["rev-parse", "HEAD"])

‎pgml-dashboard/src/components/mod.rs

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
mod component;
55
pub(crate) use component::{component, Component};
66

7-
87
// src/components/breadcrumbs
98
pub mod breadcrumbs;
109
pub use breadcrumbs::Breadcrumbs;
@@ -49,6 +48,9 @@ pub use navbar::Navbar;
4948
pub mod navbar_web_app;
5049
pub use navbar_web_app::NavbarWebApp;
5150

51+
// src/components/navigation
52+
pub mod navigation;
53+
5254
// src/components/postgres_logo
5355
pub mod postgres_logo;
5456
pub use postgres_logo::PostgresLogo;
@@ -65,6 +67,9 @@ pub use static_nav::StaticNav;
6567
pub mod static_nav_link;
6668
pub use static_nav_link::StaticNavLink;
6769

70+
// src/components/tables
71+
pub mod tables;
72+
6873
// src/components/test_component
6974
pub mod test_component;
7075
pub use test_component::TestComponent;

‎pgml-dashboard/src/components/navigation/mod.rs

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// This file is automatically generated.
2+
// You shouldn't modify it manually.
3+
4+
// src/components/navigation/tabs
5+
pub mod tabs;

‎pgml-dashboard/src/components/navigation/tabs/mod.rs

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// This file is automatically generated.
2+
// You shouldn't modify it manually.
3+
4+
// src/components/navigation/tabs/tab
5+
pub mod tab;
6+
pub use tab::Tab;
7+
8+
// src/components/navigation/tabs/tabs
9+
pub mod tabs;
10+
pub use tabs::Tabs;

‎pgml-dashboard/src/components/navigation/tabs/tab/mod.rs

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
#![allow(unused_variables)]
2+
use crate::components::component;
3+
use crate::components::component::Component;
4+
use sailfish::TemplateOnce;
5+
6+
#[derive(TemplateOnce, Default, Clone)]
7+
#[template(path = "navigation/tabs/tab/template.html")]
8+
pub struct Tab {
9+
content: Component,
10+
active: bool,
11+
name: String,
12+
}
13+
14+
impl Tab {
15+
pub fn new(name: impl ToString, content: Component) -> Tab {
16+
Tab {
17+
content,
18+
active: false,
19+
name: name.to_string(),
20+
}
21+
}
22+
23+
pub fn button_classes(&self) -> String {
24+
if self.active {
25+
"nav-link active btn btn-tertiary rounded-0".to_string()
26+
} else {
27+
"nav-link btn btn-tertiary rounded-0".to_string()
28+
}
29+
}
30+
31+
pub fn content_classes(&self) -> String {
32+
if self.active {
33+
"tab-pane my-4 show active".to_string()
34+
} else {
35+
"tab-pane my-4".to_string()
36+
}
37+
}
38+
39+
pub fn id(&self) -> String {
40+
format!("tab-{}", self.name.to_lowercase().replace(" ", "-"))
41+
}
42+
43+
pub fn selected(&self) -> String {
44+
if self.active {
45+
"selected".to_string()
46+
} else {
47+
"".to_string()
48+
}
49+
}
50+
51+
pub fn name(&self) -> String {
52+
self.name.clone()
53+
}
54+
55+
pub fn active(mut self) -> Self {
56+
self.active = true;
57+
self
58+
}
59+
60+
pub fn inactive(mut self) -> Self {
61+
self.active = false;
62+
self
63+
}
64+
65+
pub fn is_active(&self) -> bool {
66+
self.active
67+
}
68+
}
69+
70+
component!(Tab);

‎pgml-dashboard/src/components/navigation/tabs/tab/tab.scss

Whitespace-only changes.

‎pgml-dashboard/src/components/navigation/tabs/tab/template.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div>
2+
<%+ content %>
3+
</div>

‎pgml-dashboard/src/components/navigation/tabs/tabs/mod.rs

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
use crate::components::component;
2+
use crate::components::navigation::tabs::Tab;
3+
use sailfish::TemplateOnce;
4+
5+
#[derive(TemplateOnce, Default)]
6+
#[template(path = "navigation/tabs/tabs/template.html")]
7+
pub struct Tabs {
8+
tabs: Vec<Tab>,
9+
}
10+
11+
impl Tabs {
12+
pub fn new(tabs: &[Tab]) -> Tabs {
13+
// Set the first tab to active if none are.
14+
let mut tabs = tabs.to_vec();
15+
if tabs.iter().all(|t| !t.is_active()) {
16+
tabs = tabs
17+
.into_iter()
18+
.enumerate()
19+
.map(|(i, tab)| if i == 0 { tab.active() } else { tab })
20+
.collect();
21+
}
22+
23+
Tabs { tabs }
24+
}
25+
26+
pub fn active_tab(mut self, name: impl ToString) -> Self {
27+
let tabs = self
28+
.tabs
29+
.into_iter()
30+
.map(|tab| {
31+
if tab.name() == name.to_string() {
32+
tab.active()
33+
} else {
34+
tab.inactive()
35+
}
36+
})
37+
.collect();
38+
39+
self.tabs = tabs;
40+
self
41+
}
42+
}
43+
44+
component!(Tabs);

‎pgml-dashboard/src/components/navigation/tabs/tabs/tabs.scss

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.nav-tabs {
2+
// These tabs are used in docs as well, where they are
3+
// generated using Bootstrap. It wasn't obvious to me
4+
// how to replace those with this component yet, so I'm just
5+
// enforcing the font-family here so they look the same. Docs use Roboto by default.
6+
font-family: 'silka', 'Roboto', 'sans-serif';
7+
8+
--bs-nav-tabs-border-width: 4px;
9+
10+
.nav-link {
11+
border: none;
12+
13+
&.active, &:focus, &:active {
14+
border-bottom: 4px solid #{$slate-tint-700};
15+
color: #{$slate-tint-700};
16+
text-shadow: none;
17+
}
18+
19+
color: #{$slate-tint-100};
20+
}
21+
}

‎pgml-dashboard/src/components/navigation/tabs/tabs/template.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<ul class="nav nav-tabs" role="tablist">
2+
<% for tab in &tabs { %>
3+
<li class="nav-item" role="presentation">
4+
<button
5+
class="<%= tab.button_classes() %>"
6+
data-bs-toggle="tab"
7+
data-bs-target="#<%= tab.id() %>"
8+
type="button"
9+
role="tab"
10+
aria-controls="<%= tab.id() %>"
11+
aria-selected="<%= tab.selected() %>"
12+
>
13+
<%= tab.name() %>
14+
</button>
15+
</li>
16+
<% } %>
17+
</ul>
18+
<div class="tab-content">
19+
<% for (i, tab) in tabs.into_iter().enumerate() { %>
20+
<div
21+
class="<%= tab.content_classes() %>"
22+
id="<%= tab.id() %>"
23+
role="tabpanel"
24+
aria-labelledby="tab-<%= tab.id() %>"
25+
tabindex="<%= i %>"
26+
>
27+
<%+ tab %>
28+
</div>
29+
<% } %>
30+
</div>

‎pgml-dashboard/src/components/tables/large/mod.rs

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// This file is automatically generated.
2+
// You shouldn't modify it manually.
3+
4+
// src/components/tables/large/row
5+
pub mod row;
6+
pub use row::Row;
7+
8+
// src/components/tables/large/table
9+
pub mod table;
10+
pub use table::Table;

‎pgml-dashboard/src/components/tables/large/row/mod.rs

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
use crate::components::component;
2+
use crate::components::component::Component;
3+
use sailfish::TemplateOnce;
4+
5+
#[derive(TemplateOnce, Default, Clone)]
6+
#[template(path = "tables/large/row/template.html")]
7+
pub struct Row {
8+
columns: Vec<Component>,
9+
}
10+
11+
impl Row {
12+
pub fn new(columns: &[Component]) -> Row {
13+
Row {
14+
columns: columns.to_vec(),
15+
}
16+
}
17+
}
18+
19+
component!(Row);

‎pgml-dashboard/src/components/tables/large/row/row.scss

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
table.table.table-lg {
2+
tr {
3+
&:first-of-type {
4+
td {
5+
padding-top: 16px;
6+
}
7+
}
8+
9+
&:hover {
10+
div.table-cell-content {
11+
background: #{$gray-800};
12+
}
13+
}
14+
15+
td {
16+
vertical-align: middle;
17+
padding: 8px 0;
18+
19+
div.table-cell-content {
20+
background: #{$gray-600};
21+
padding: 20px 0;
22+
}
23+
24+
&:first-of-type {
25+
div.table-cell-content {
26+
padding-left: 67px;
27+
}
28+
}
29+
30+
&:last-of-type {
31+
div.table-cell-content {
32+
padding-right: 67px;
33+
}
34+
}
35+
}
36+
}
37+
}

‎pgml-dashboard/src/components/tables/large/row/template.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<tr>
2+
<% for column in columns { %>
3+
<td>
4+
<div class="table-cell-content">
5+
<%+ column %>
6+
</div>
7+
</td>
8+
<% } %>
9+
</tr>

‎pgml-dashboard/src/components/tables/large/table/mod.rs

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
use crate::components::component;
2+
use crate::components::tables::large::Row;
3+
use sailfish::TemplateOnce;
4+
5+
#[derive(TemplateOnce, Default)]
6+
#[template(path = "tables/large/table/template.html")]
7+
pub struct Table {
8+
rows: Vec<Row>,
9+
headers: Vec<String>,
10+
}
11+
12+
impl Table {
13+
pub fn new(headers: &[impl ToString], rows: &[Row]) -> Table {
14+
Table {
15+
headers: headers.iter().map(|h| h.to_string()).collect(),
16+
rows: rows.to_vec(),
17+
}
18+
}
19+
}
20+
21+
component!(Table);

‎pgml-dashboard/src/components/tables/large/table/table.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
table.table.table-lg {
2+
* {
3+
border-width: 0;
4+
}
5+
6+
thead {
7+
th {
8+
color: #{$slate-shade-100};
9+
background: #{$gray-800};
10+
text-transform: uppercase;
11+
font-size: 0.75rem;
12+
padding: 16px 0;
13+
14+
&:first-of-type {
15+
padding-left: 67px;
16+
}
17+
}
18+
}
19+
}

‎pgml-dashboard/src/components/tables/large/table/template.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<table class="table table-lg">
2+
<thead>
3+
<tr>
4+
<% for header in headers { %>
5+
<th><%= header %></th>
6+
<% } %>
7+
</tr>
8+
</thead>
9+
<tbody>
10+
<% for row in rows { %>
11+
<%+ row %>
12+
<% } %>
13+
</tbody>
14+
</div>

‎pgml-dashboard/src/components/tables/mod.rs

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// This file is automatically generated.
2+
// You shouldn't modify it manually.
3+
4+
// src/components/tables/large
5+
pub mod large;

‎pgml-dashboard/src/utils/markdown.rs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -669,7 +669,7 @@ impl<'a> Tab<'a> {
669669
"
670670
<li class=\"nav-item\" role=\"presentation\">
671671
<button
672-
class=\"nav-link {active}\"
672+
class=\"nav-link btn btn-tertiary rounded-0 {active}\"
673673
data-bs-toggle=\"tab\"
674674
data-bs-target=\"#tab-{id}\"
675675
type=\"button\"

‎pgml-dashboard/static/css/modules.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,9 @@
66
@import "../../src/components/left_nav_web_app/left_nav_web_app.scss";
77
@import "../../src/components/modal/modal.scss";
88
@import "../../src/components/navbar/navbar.scss";
9+
@import "../../src/components/navigation/tabs/tab/tab.scss";
10+
@import "../../src/components/navigation/tabs/tabs/tabs.scss";
911
@import "../../src/components/postgres_logo/postgres_logo.scss";
1012
@import "../../src/components/static_nav/static_nav.scss";
13+
@import "../../src/components/tables/large/row/row.scss";
14+
@import "../../src/components/tables/large/table/table.scss";

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy