Skip to content

Add tabs & table #982

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Sep 5, 2023
Merged

Add tabs & table #982

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
292ebab
Add tabs & table
levkk Sep 5, 2023
79fe8a4
no js
levkk Sep 5, 2023
e527f5f
remove comment
levkk Sep 5, 2023
73dbaf8
allow to show active tab
levkk Sep 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion pgml-dashboard/.editorconfig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,4 @@ indent_size = 4

[*.html]
ident_style = space
indent_size = 4
indent_size = 2
1 change: 0 additions & 1 deletion pgml-dashboard/build.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ use std::process::Command;

fn main() {
println!("cargo:rerun-if-changed=migrations");
println!("cargo:rerun-if-changed=src");
Copy link
Contributor Author

@levkk levkk Sep 5, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@chillenberger This rebuilt the app every time we changed css which was kinda slow. Instead, I'm running:

cargo watch \
 --exec 'pgml-components bundle' \
 --watch src/  \
--watch static/  \
--ignore bundle.*.*

in a separate terminal.


let output = Command::new("git")
.args(&["rev-parse", "HEAD"])
Expand Down
7 changes: 6 additions & 1 deletion pgml-dashboard/src/components/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
mod component;
pub(crate) use component::{component, Component};


// src/components/breadcrumbs
pub mod breadcrumbs;
pub use breadcrumbs::Breadcrumbs;
Expand Down Expand Up @@ -49,6 +48,9 @@ pub use navbar::Navbar;
pub mod navbar_web_app;
pub use navbar_web_app::NavbarWebApp;

// src/components/navigation
pub mod navigation;

// src/components/postgres_logo
pub mod postgres_logo;
pub use postgres_logo::PostgresLogo;
Expand All @@ -65,6 +67,9 @@ pub use static_nav::StaticNav;
pub mod static_nav_link;
pub use static_nav_link::StaticNavLink;

// src/components/tables
pub mod tables;

// src/components/test_component
pub mod test_component;
pub use test_component::TestComponent;
5 changes: 5 additions & 0 deletions pgml-dashboard/src/components/navigation/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
// This file is automatically generated.
// You shouldn't modify it manually.

// src/components/navigation/tabs
pub mod tabs;
10 changes: 10 additions & 0 deletions pgml-dashboard/src/components/navigation/tabs/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
// This file is automatically generated.
// You shouldn't modify it manually.

// src/components/navigation/tabs/tab
pub mod tab;
pub use tab::Tab;

// src/components/navigation/tabs/tabs
pub mod tabs;
pub use tabs::Tabs;
70 changes: 70 additions & 0 deletions pgml-dashboard/src/components/navigation/tabs/tab/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
#![allow(unused_variables)]
use crate::components::component;
use crate::components::component::Component;
use sailfish::TemplateOnce;

#[derive(TemplateOnce, Default, Clone)]
#[template(path = "navigation/tabs/tab/template.html")]
pub struct Tab {
content: Component,
active: bool,
name: String,
}

impl Tab {
pub fn new(name: impl ToString, content: Component) -> Tab {
Tab {
content,
active: false,
name: name.to_string(),
}
}

pub fn button_classes(&self) -> String {
if self.active {
"nav-link active btn btn-tertiary rounded-0".to_string()
} else {
"nav-link btn btn-tertiary rounded-0".to_string()
}
}

pub fn content_classes(&self) -> String {
if self.active {
"tab-pane my-4 show active".to_string()
} else {
"tab-pane my-4".to_string()
}
}

pub fn id(&self) -> String {
format!("tab-{}", self.name.to_lowercase().replace(" ", "-"))
}

pub fn selected(&self) -> String {
if self.active {
"selected".to_string()
} else {
"".to_string()
}
}

pub fn name(&self) -> String {
self.name.clone()
}

pub fn active(mut self) -> Self {
self.active = true;
self
}

pub fn inactive(mut self) -> Self {
self.active = false;
self
}

pub fn is_active(&self) -> bool {
self.active
}
}

component!(Tab);
Empty file added pgml-dashboard/src/components/navigation/tabs/tab/tab.scss
View file
Open in desktop
Empty file.
3 changes: 3 additions & 0 deletions pgml-dashboard/src/components/navigation/tabs/tab/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<div>
<%+ content %>
</div>
44 changes: 44 additions & 0 deletions pgml-dashboard/src/components/navigation/tabs/tabs/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
use crate::components::component;
use crate::components::navigation::tabs::Tab;
use sailfish::TemplateOnce;

#[derive(TemplateOnce, Default)]
#[template(path = "navigation/tabs/tabs/template.html")]
pub struct Tabs {
tabs: Vec<Tab>,
}

impl Tabs {
pub fn new(tabs: &[Tab]) -> Tabs {
// Set the first tab to active if none are.
let mut tabs = tabs.to_vec();
if tabs.iter().all(|t| !t.is_active()) {
tabs = tabs
.into_iter()
.enumerate()
.map(|(i, tab)| if i == 0 { tab.active() } else { tab })
.collect();
}

Tabs { tabs }
}

pub fn active_tab(mut self, name: impl ToString) -> Self {
let tabs = self
.tabs
.into_iter()
.map(|tab| {
if tab.name() == name.to_string() {
tab.active()
} else {
tab.inactive()
}
})
.collect();

self.tabs = tabs;
self
}
}

component!(Tabs);
21 changes: 21 additions & 0 deletions pgml-dashboard/src/components/navigation/tabs/tabs/tabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
.nav-tabs {
// These tabs are used in docs as well, where they are
// generated using Bootstrap. It wasn't obvious to me
// how to replace those with this component yet, so I'm just
// enforcing the font-family here so they look the same. Docs use Roboto by default.
font-family: 'silka', 'Roboto', 'sans-serif';

--bs-nav-tabs-border-width: 4px;

.nav-link {
border: none;

&.active, &:focus, &:active {
border-bottom: 4px solid #{$slate-tint-700};
color: #{$slate-tint-700};
text-shadow: none;
}

color: #{$slate-tint-100};
}
}
30 changes: 30 additions & 0 deletions pgml-dashboard/src/components/navigation/tabs/tabs/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<ul class="nav nav-tabs" role="tablist">
<% for tab in &tabs { %>
<li class="nav-item" role="presentation">
<button
class="<%= tab.button_classes() %>"
data-bs-toggle="tab"
data-bs-target="#<%= tab.id() %>"
type="button"
role="tab"
aria-controls="<%= tab.id() %>"
aria-selected="<%= tab.selected() %>"
>
<%= tab.name() %>
</button>
</li>
<% } %>
</ul>
<div class="tab-content">
<% for (i, tab) in tabs.into_iter().enumerate() { %>
<div
class="<%= tab.content_classes() %>"
id="<%= tab.id() %>"
role="tabpanel"
aria-labelledby="tab-<%= tab.id() %>"
tabindex="<%= i %>"
>
<%+ tab %>
</div>
<% } %>
</div>
10 changes: 10 additions & 0 deletions pgml-dashboard/src/components/tables/large/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
// This file is automatically generated.
// You shouldn't modify it manually.

// src/components/tables/large/row
pub mod row;
pub use row::Row;

// src/components/tables/large/table
pub mod table;
pub use table::Table;
19 changes: 19 additions & 0 deletions pgml-dashboard/src/components/tables/large/row/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
use crate::components::component;
use crate::components::component::Component;
use sailfish::TemplateOnce;

#[derive(TemplateOnce, Default, Clone)]
#[template(path = "tables/large/row/template.html")]
pub struct Row {
columns: Vec<Component>,
}

impl Row {
pub fn new(columns: &[Component]) -> Row {
Row {
columns: columns.to_vec(),
}
}
}

component!(Row);
37 changes: 37 additions & 0 deletions pgml-dashboard/src/components/tables/large/row/row.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
table.table.table-lg {
tr {
&:first-of-type {
td {
padding-top: 16px;
}
}

&:hover {
div.table-cell-content {
background: #{$gray-800};
}
}

td {
vertical-align: middle;
padding: 8px 0;

div.table-cell-content {
background: #{$gray-600};
padding: 20px 0;
}

&:first-of-type {
div.table-cell-content {
padding-left: 67px;
}
}

&:last-of-type {
div.table-cell-content {
padding-right: 67px;
}
}
}
}
}
9 changes: 9 additions & 0 deletions pgml-dashboard/src/components/tables/large/row/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<tr>
<% for column in columns { %>
<td>
<div class="table-cell-content">
<%+ column %>
</div>
</td>
<% } %>
</tr>
21 changes: 21 additions & 0 deletions pgml-dashboard/src/components/tables/large/table/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
use crate::components::component;
use crate::components::tables::large::Row;
use sailfish::TemplateOnce;

#[derive(TemplateOnce, Default)]
#[template(path = "tables/large/table/template.html")]
pub struct Table {
rows: Vec<Row>,
headers: Vec<String>,
}

impl Table {
pub fn new(headers: &[impl ToString], rows: &[Row]) -> Table {
Table {
headers: headers.iter().map(|h| h.to_string()).collect(),
rows: rows.to_vec(),
}
}
}

component!(Table);
19 changes: 19 additions & 0 deletions pgml-dashboard/src/components/tables/large/table/table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
table.table.table-lg {
* {
border-width: 0;
}

thead {
th {
color: #{$slate-shade-100};
background: #{$gray-800};
text-transform: uppercase;
font-size: 0.75rem;
padding: 16px 0;

&:first-of-type {
padding-left: 67px;
}
}
}
}
14 changes: 14 additions & 0 deletions pgml-dashboard/src/components/tables/large/table/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<table class="table table-lg">
<thead>
<tr>
<% for header in headers { %>
<th><%= header %></th>
<% } %>
</tr>
</thead>
<tbody>
<% for row in rows { %>
<%+ row %>
<% } %>
</tbody>
</div>
5 changes: 5 additions & 0 deletions pgml-dashboard/src/components/tables/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
// This file is automatically generated.
// You shouldn't modify it manually.

// src/components/tables/large
pub mod large;
2 changes: 1 addition & 1 deletion pgml-dashboard/src/utils/markdown.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -669,7 +669,7 @@ impl<'a> Tab<'a> {
"
<li class=\"nav-item\" role=\"presentation\">
<button
class=\"nav-link {active}\"
class=\"nav-link btn btn-tertiary rounded-0 {active}\"
data-bs-toggle=\"tab\"
data-bs-target=\"#tab-{id}\"
type=\"button\"
Expand Down
4 changes: 4 additions & 0 deletions pgml-dashboard/static/css/modules.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,9 @@
@import "../../src/components/left_nav_web_app/left_nav_web_app.scss";
@import "../../src/components/modal/modal.scss";
@import "../../src/components/navbar/navbar.scss";
@import "../../src/components/navigation/tabs/tab/tab.scss";
@import "../../src/components/navigation/tabs/tabs/tabs.scss";
@import "../../src/components/postgres_logo/postgres_logo.scss";
@import "../../src/components/static_nav/static_nav.scss";
@import "../../src/components/tables/large/row/row.scss";
@import "../../src/components/tables/large/table/table.scss";
Loading
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