Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

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.

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

Already on GitHub?Sign in to your account

Merged
levkk merged 4 commits intomasterfromlevkk-manage-components
Sep 5, 2023
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
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 deletionpgml-dashboard/.editorconfig
View file
Open in desktop
Original file line numberDiff line numberDiff 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 deletionpgml-dashboard/build.rs
View file
Open in desktop
Original file line numberDiff line numberDiff 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
ContributorAuthor

@levkklevkkSep 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.

chillenberger reacted with thumbs up emoji

let output = Command::new("git")
.args(&["rev-parse", "HEAD"])
Expand Down
7 changes: 6 additions & 1 deletionpgml-dashboard/src/components/mod.rs
View file
Open in desktop
Original file line numberDiff line numberDiff 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 DownExpand 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 deletionspgml-dashboard/src/components/navigation/mod.rs
View file
Open in desktop
Original file line numberDiff line numberDiff 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 deletionspgml-dashboard/src/components/navigation/tabs/mod.rs
View file
Open in desktop
Original file line numberDiff line numberDiff 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 deletionspgml-dashboard/src/components/navigation/tabs/tab/mod.rs
View file
Open in desktop
Original file line numberDiff line numberDiff 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.
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
<div>
<%+ content %>
</div>
44 changes: 44 additions & 0 deletionspgml-dashboard/src/components/navigation/tabs/tabs/mod.rs
View file
Open in desktop
Original file line numberDiff line numberDiff 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 deletionspgml-dashboard/src/components/navigation/tabs/tabs/tabs.scss
View file
Open in desktop
Original file line numberDiff line numberDiff 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};
}
}
View file
Open in desktop
Original file line numberDiff line numberDiff 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 deletionspgml-dashboard/src/components/tables/large/mod.rs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
// This file is automatically generated.
// You shouldn't modify it manually.

// src/components/tables/large/row
pubmod row;
pubuse row::Row;

// src/components/tables/large/table
pubmod table;
pubuse table::Table;
19 changes: 19 additions & 0 deletionspgml-dashboard/src/components/tables/large/row/mod.rs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
usecrate::components::component;
usecrate::components::component::Component;
use sailfish::TemplateOnce;

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

implRow{
pubfnnew(columns:&[Component]) ->Row{
Row{
columns: columns.to_vec(),
}
}
}

component!(Row);
37 changes: 37 additions & 0 deletionspgml-dashboard/src/components/tables/large/row/row.scss
View file
Open in desktop
Original file line numberDiff line numberDiff 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;
}
}
}
}
}
View file
Open in desktop
Original file line numberDiff line numberDiff 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 deletionspgml-dashboard/src/components/tables/large/table/mod.rs
View file
Open in desktop
Original file line numberDiff line numberDiff 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 deletionspgml-dashboard/src/components/tables/large/table/table.scss
View file
Open in desktop
Original file line numberDiff line numberDiff 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;
}
}
}
}
View file
Open in desktop
Original file line numberDiff line numberDiff 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 deletionspgml-dashboard/src/components/tables/mod.rs
View file
Open in desktop
Original file line numberDiff line numberDiff 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 deletionpgml-dashboard/src/utils/markdown.rs
View file
Open in desktop
Original file line numberDiff line numberDiff 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-linkbtn btn-tertiary rounded-0{active}\"
data-bs-toggle=\"tab\"
data-bs-target=\"#tab-{id}\"
type=\"button\"
Expand Down
4 changes: 4 additions & 0 deletionspgml-dashboard/static/css/modules.scss
View file
Open in desktop
Original file line numberDiff line numberDiff 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
[8]ページ先頭
©2009-2025 Movatter.jp