From d54a5f647e08a47b52cb30c021412a9d9d34a226 Mon Sep 17 00:00:00 2001 From: Lucien Greathouse Date: Fri, 18 Oct 2019 16:49:03 -0700 Subject: [PATCH] Improve tree explorer UI --- assets/index.css | 36 +++++++++++++++++------------------- src/web/ui.rs | 3 ++- 2 files changed, 19 insertions(+), 20 deletions(-) diff --git a/assets/index.css b/assets/index.css index 1dc6ea39..bbec79cb 100644 --- a/assets/index.css +++ b/assets/index.css @@ -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 { diff --git a/src/web/ui.rs b/src/web/ui.rs index e7e69380..0f59b9e8 100644 --- a/src/web/ui.rs +++ b/src/web/ui.rs @@ -365,6 +365,7 @@ impl UiService { html! { + "Rojo Live Server" @@ -411,7 +412,7 @@ impl<'a> ExpandableSection<'a> { } html! { -
+
{ input }