rojo-rbx/rojo
1
0
Fork 1
mirror of https://github.com/rojo-rbx/rojo.git synced 2026-04-20 20:55:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Better expandables for the instance debugger

Browse Source
This commit is contained in:
Lucien Greathouse
2019-09-25 14:47:07 -07:00
parent 24b9f552eb
commit b3f132201b
2 changed files with 68 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
assets/index.css
View File

@@ -14,17 +14,9 @@ html {
font-family: sans-serif;
font-size: 18px;
text-decoration: none;
height: 100%;
line-height: 1.4;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
img {
max-width:100%;
max-height:100%;
@@ -37,7 +29,6 @@ img {
}
.root {
flex: 0 0;
display: flex;
flex-direction: column;
margin: 0.5rem auto;
@@ -112,7 +103,7 @@ img {
}
.instance-title {
font-size: 1.5rem;
font-size: 1.2rem;
padding: 0.5rem;
}
@@ -124,6 +115,38 @@ img {
padding: 0.5rem 0 0.5rem 1rem;
}
.expandable-input {
display: none;
}
.expandable-input ~ .expandable-label .expandable-visualizer {
font-family: monospace;
display: inline-flex;
justify-content: center;
align-items: center;
align-content: center;
width: 1rem;
height: 1rem;
border: 1px solid #666;
margin: 0 0.5rem;
}
.expandable-visualizer::before {
content: "";
}
.expandable-input:checked ~ .expandable-label .expandable-visualizer::before {
content: "-";
}
.expandable-input:not(:checked) ~ .expandable-label .expandable-visualizer::before {
content: "+";
}
.expandable-input:not(:checked) ~ .expandable-items {
display: none;
}
.imfs-entry {
}

43
src/web/ui.rs
View File

@@ -202,9 +202,23 @@ impl<F: ImfsFetcher> UiService<F> {
HtmlContent::None
} else {
html! {
<div class="instance-children">
{ Fragment::new(children_list) }
</div>
<section class="instance-children-section">
<input
class="expandable-input"
id={ format!("instance-{}-children", id) }
type="checkbox"
checked="checked" />
<h1 class="expandable-label">
<label for={ format!("instance-{}-children", id) }>
<span class="expandable-visualizer"></span>
"Children"
</label>
</h1>
<div class="instance-children expandable-items">
{ Fragment::new(children_list) }
</div>
</section>
}
};
@@ -226,9 +240,22 @@ impl<F: ImfsFetcher> UiService<F> {
HtmlContent::None
} else {
html! {
<div class="instance-properties">
{ Fragment::new(property_list) }
</div>
<section class="instance-properties-section">
<input
class="expandable-input"
id={ format!("instance-{}-properties", id) }
type="checkbox" />
<h1 class="expandable-label">
<label for={ format!("instance-{}-properties", id) }>
<span class="expandable-visualizer"></span>
"Properties"
</label>
</h1>
<div class="instance-properties expandable-items">
{ Fragment::new(property_list) }
</div>
</section>
}
};
@@ -244,10 +271,10 @@ impl<F: ImfsFetcher> UiService<F> {
html! {
<div class="instance">
<div class="instance-title">
<label class="instance-title" for={ format!("instance-{}", id) }>
{ instance.name().to_owned() }
{ class_name_specifier }
</div>
</label>
{ property_container }
{ children_container }
</div>