rojo-rbx/rojo
1
0
Fork 1
mirror of https://github.com/rojo-rbx/rojo.git synced 2026-04-20 12:45:05 +00:00
Code Issues Packages Projects Releases Wiki 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 {
border: 1px solid #666;
border-right-style: none;
border-bottom-style: none;
background-color: #fff;
margin-bottom: 0.5rem;
}
@@ -106,16 +102,12 @@ img {
padding: 0.5rem;
}
.instance-metadata {
padding: 0.5rem;
.expandable-section {
margin: 0.25rem 0.5rem;
}
.instance-properties {
padding: 0.5rem;
}
.instance-children {
padding: 0.5rem 0 0.5rem 1rem;
.expandable-items {
padding: 0.5rem 1rem;
}
.expandable-input {
@@ -124,30 +116,36 @@ img {
.expandable-label > label {
cursor: pointer;
display: flex;
align-items: center;
align-content: center;
}
.expandable-input ~ .expandable-label .expandable-visualizer {
font-family: monospace;
display: inline-flex;
justify-content: center;
align-items: center;
align-content: center;
text-align: center;
width: 1rem;
height: 1rem;
border: 1px solid #666;
font-size: 2rem;
margin: 0 0.5rem;
transition: transform 100ms ease-in-out;
transform-origin: 60% 60%;
}
.expandable-visualizer::before {
content: "";
content: "›";
font-weight: bold;
}
.expandable-input:checked ~ .expandable-label .expandable-visualizer::before {
content: "-";
.expandable-input:checked ~ .expandable-label {
border-bottom: 1px solid #bbb;
}
.expandable-input:not(:checked) ~ .expandable-label .expandable-visualizer::before {
content: "+";
.expandable-input:checked ~ .expandable-label .expandable-visualizer {
transform: rotate(90deg);
}
.expandable-input:not(:checked) ~ .expandable-items {

3
src/web/ui.rs
View File

@@ -365,6 +365,7 @@ impl<F: VfsFetcher> UiService<F> {
html! {
<html>
<head>
<meta charset="utf8" />
<title>"Rojo Live Server"</title>
<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" />
@@ -411,7 +412,7 @@ impl<'a> ExpandableSection<'a> {
}
html! {
<section class="instance-properties-section">
<section class="expandable-section">
{ input }
<h1 class="expandable-label">