ari-party/rojo
1
0
Fork 0
forked from rojo-rbx/rojo
Code Pull Requests Activity

Improve tree explorer UI

Browse Source
This commit is contained in:
Lucien Greathouse
2019-10-18 16:49:03 -07:00
parent 457ed05174
commit d54a5f647e
2 changed files with 19 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
assets/index.css
View File

@@ -94,10 +94,6 @@ img {
} }
.instance { .instance {
border: 1px solid #666;
border-right-style: none;
border-bottom-style: none;
background-color: #fff;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@@ -106,16 +102,12 @@ img {
padding: 0.5rem; padding: 0.5rem;
} }
.instance-metadata { .expandable-section {
padding: 0.5rem; margin: 0.25rem 0.5rem;
} }
.instance-properties { .expandable-items {
padding: 0.5rem; padding: 0.5rem 1rem;
}
.instance-children {
padding: 0.5rem 0 0.5rem 1rem;
} }
.expandable-input { .expandable-input {
@@ -124,30 +116,36 @@ img {
.expandable-label > label { .expandable-label > label {
cursor: pointer; cursor: pointer;
display: flex;
align-items: center;
align-content: center;
} }
.expandable-input ~ .expandable-label .expandable-visualizer { .expandable-input ~ .expandable-label .expandable-visualizer {
font-family: monospace; font-family: monospace;
display: inline-flex; display: inline-flex;
justify-content: center;
align-items: center; align-items: center;
align-content: center; align-content: center;
text-align: center;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
border: 1px solid #666; font-size: 2rem;
margin: 0 0.5rem; margin: 0 0.5rem;
transition: transform 100ms ease-in-out;
transform-origin: 60% 60%;
} }
.expandable-visualizer::before { .expandable-visualizer::before {
content: ""; content: "›";
font-weight: bold;
} }
.expandable-input:checked ~ .expandable-label .expandable-visualizer::before { .expandable-input:checked ~ .expandable-label {
content: "-"; border-bottom: 1px solid #bbb;
} }
.expandable-input:not(:checked) ~ .expandable-label .expandable-visualizer::before { .expandable-input:checked ~ .expandable-label .expandable-visualizer {
content: "+"; transform: rotate(90deg);
} }
.expandable-input:not(:checked) ~ .expandable-items { .expandable-input:not(:checked) ~ .expandable-items {

3
src/web/ui.rs
View File

@@ -365,6 +365,7 @@ impl<F: VfsFetcher> UiService<F> {
html! { html! {
<html> <html>
<head> <head>
<meta charset="utf8" />
<title>"Rojo Live Server"</title> <title>"Rojo Live Server"</title>
<link rel="icon" type="image/png" sizes="32x32" href="/icon.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
@@ -411,7 +412,7 @@ impl<'a> ExpandableSection<'a> {
} }
html! { html! {
<section class="instance-properties-section"> <section class="expandable-section">
{ input } { input }
<h1 class="expandable-label"> <h1 class="expandable-label">