Add tree controls

src/styles/global.css

@@ -172,29 +172,43 @@ body {
 .source textarea::selection {
   background-color: var(--selection);
 }
+
+.tree,
+.source {
+  position: relative;
+}
+
+.tree-controls,
 .source-controls {
   display: flex;
   flex-direction: row-reverse;
   position: absolute;
-  right: 17px;
-  top: 56px;
+  right: 0;
+  top: 0;
   padding: 5px;
 }
 
+.tree-controls .btn:not(:first-child),
 .source-controls .btn:not(:first-child) {
   margin-right: 5px;
 }
 
+.tree-controls-menu,
 .source-controls-menu {
   display: flex;
   visibility: hidden;
   flex-direction: column;
   position: absolute;
-  right: 17px;
-  top: 93px;
+  right: 0;
+  top: 37px;
   padding: 5px;
 }
 
+.source-controls,
+.source-controls-menu {
+  right: 17px
+}
+
 .gutter.gutter-horizontal {
   border-left: 2px solid;
   float: left;

src/styles/images/plus.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"></path></svg>

src/styles/images/trash.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.5 1.75a.25.25 0 01.25-.25h2.5a.25.25 0 01.25.25V3h-3V1.75zm4.5 0V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0 10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681 1.741-1.576l.66-6.6a.75.75 0 00-1.492-.149l-.66 6.6a.25.25 0 01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z"></path></svg>

src/styles/nodes.css

@@ -34,7 +34,7 @@
   --category-function-border: #6b6b6b;
 }
 
-.tree > .object-node > .node-body,
+.tree > div > .object-node > .node-body,
 .choice-node > .object-node > .node-body {
   border-left: none;
   padding-left: 0;
@@ -136,6 +136,17 @@ button.selected {
   border-color: var(--node-selected-border);
 }
 
+label.collapse {
+  display: inline-flex;
+  align-items: center;
+}
+
+label.collapse svg {
+  margin-right: 5px;
+  fill: var(--node-text);
+  transition: fill var(--style-transition);
+}
+
 label.collapse.closed,
 button.add {
   background-color: var(--node-add);
@@ -148,22 +159,13 @@ button.remove {
   border-color: var(--node-remove-border);
 }
 
-label.collapse::before,
-button.remove::before {
-  padding-right: 5px;
-  position: relative;
-  top: 3px;
-}
-
-button.remove::before,
-button.add::after {
+button.remove svg,
+button.add svg {
   display: inline-block;
   position: relative;
   top: 2px;
-}
-
-button.remove::before {
-  padding-right: 5px;
+  fill: var(--node-text);
+  transition: fill var(--style-transition);
 }
 
 .node-header > button.add:last-child {
@@ -171,16 +173,6 @@ button.remove::before {
   border-bottom-right-radius: 6px;
 }
 
-label.collapse.closed::before,
-button.add::after {
-  content: url('./images/plus.svg');
-}
-
-label.collapse.open::before,
-button.remove::before {
-  content: url('./images/trash.svg');
-}
-
 .node-header[data-error] > svg {
   border: none;
   height: 34px;