add toggle details button

rolandtoth · Aug 23, 2019 · 2bfd659 · 2bfd659
1 parent d1fc588
commit 2bfd659
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 14 deletions.
diff --git a/bin/app.js b/bin/app.js
diff --git a/src/components/buttons/ViewToggleBtn.js b/src/components/buttons/ViewToggleBtn.js
@@ -0,0 +1,16 @@
+module.exports = {
+    collapsed: false,
+    getCollapsedState: () => {
+        return this.collapsed
+    },
+    view: () => {
+        return m("button.btnViewToggle.button-transparent", {
+            title: "Toggle details",
+            class: this.collapsed ? "active" : "",
+            onclick: e => {
+                e.preventDefault()
+                this.collapsed = !this.collapsed
+            }
+        }, m.trust("&#9636;"))
+    }
+}
diff --git a/src/views/Layout.js b/src/views/Layout.js
@@ -10,6 +10,7 @@ var CopyBtn = require("../components/buttons/CopyBtn")
 var ImportBtn = require("../components/buttons/ImportBtn")
 var ExportBtn = require("../components/buttons/ExportBtn")
 var UndeleteBtn = require("../components/buttons/UndeleteBtn")
+var ViewToggleBtn = require("../components/buttons/ViewToggleBtn")
 
 module.exports = {
     oninit: () => {
@@ -20,7 +21,7 @@ module.exports = {
             m("header", m(".header-controls", [
                 m(ImportBtn), m(ExportBtn)
             ]), m("h1", "TWS Model Generator")),
-            m(".head-1", m(AddBtn), m(UndeleteBtn), m("h3", "Source data"), m(Namespace)),
+            m(".head-1", m(AddBtn), m(UndeleteBtn), m(ViewToggleBtn), m("h3", "Source data"), m(Namespace)),
             m(".head-2", m("h3", "Model output"), m(ModelClassName)),
             m(".head-3", m("h3", "Custom DB Entity output"), m(CustomDbEntityClassName)),
             m(".body-1"),
@@ -30,15 +31,15 @@ module.exports = {
             m(".body-3", m(DBEntityOutput), m(CopyBtn, {
                 target: document.getElementById("ModelOutputDBEntity")
             })),
-            m(".property-rows", 
-            	{
+            m(".property-rows", {
 					"data-count": Entry.all().length,
+					"data-collapsed": ViewToggleBtn.getCollapsedState()
 	            },
             	Entry.all().map(entry => {
-                return m(PropertyForm, {
-                    key: entry.id, // to delete the proper row!
-                    entry: entry
-                })
+                    return m(PropertyForm, {
+                        key: entry.id, // to delete the proper row!
+                        entry: entry
+                    })
             }))
         ])
     }

diff --git a/styles/style.css b/styles/style.css
@@ -61,6 +61,7 @@ body {
     --color-default: #333;
     --link-color: #016A9C;
     --link-hover-color: rgb(0, 139, 204);
+    --color-error: #c62828;
 }
 
 *:focus {
@@ -78,6 +79,22 @@ pre {
     overflow: overlay;
 }
 
+.property-rows[data-collapsed] .property-row .block:first-child ~ .block {
+    display: none;
+}
+
+.property-rows[data-collapsed] .property-row .block:first-child input {
+    border: none;
+    padding: 0.5rem;
+    margin: -0.5rem 0 -0.5rem -0.5rem;
+    background: linear-gradient(45deg, #eee, transparent);
+}
+
+.btnViewToggle.active:not(:hover) {
+    background: #e8e8e8;
+    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.12);
+}
+
 .head-1,
 .head-2,
 .head-3 {
@@ -168,6 +185,10 @@ form.property-row {
     margin-left: 0 !important;
 }
 
+.property-rows[data-collapsed] .property-row.gu-mirror {
+    height: 1rem !important;
+}
+
 .property-rows.gu-unselectable .property-row,
 .property-rows[style],
 .property-row.gu-transit {
@@ -182,7 +203,7 @@ form.property-row {
     position: absolute;
     right: 3rem;
     cursor: grab;
-    top: 0.52rem;
+    top: 0.61rem;
     padding: 0.25rem 0.5rem;
     transform: scaleX(1.25);
 }
@@ -202,7 +223,7 @@ form.property-row .block:nth-child(1) {
 
 form.property-row .block:nth-child(1) input {
     font-size: 100% !important;
-    padding-top: 0.125rem;
+    padding-top: 0;
 }
 
 form.property-row .block:nth-child(1)~.block input,
@@ -227,7 +248,7 @@ form.property-row button {
     border: none;
     font-size: 125%;
     position: absolute;
-    top: -0.84rem;
+    top: -0.7rem;
     right: 0.25rem;
     cursor: pointer;
 }
@@ -268,14 +289,19 @@ form[data-duplicate] .block:first-child::after {
     content: "Duplicate property name";
     display: block;
     font-size: 11px;
-    color: crimson;
+    color: var(--color-error);
     margin-top: 1px;
     position: absolute;
 }
 
+.property-rows[data-collapsed] form[data-duplicate] .block:first-child::after {
+    position: relative;
+    top: 10px;
+}
+
 form[data-duplicate] .block:first-child input {
-    color: crimson;
-    border-bottom-color: crimson !important;
+    color: var(--color-error);
+    border-bottom-color: var(--color-error) !important;
 }
 
 .language-csharp {
@@ -307,6 +333,11 @@ button[disabled] {
     cursor: default;
 }
 
+.button-transparent:not(:hover) {
+    background: transparent;
+    color: var(--color-default);
+}
+
 .head-1 button {
     float: right;
     margin: 0 -0.33rem 0 1rem;