From 5f7186106e4b5d6ca50f63c42fc6c2d7b1f582e4 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Mon, 29 Jun 2020 19:54:30 +0100
Subject: [PATCH] Updated the basic form with boolean and select fix

---
 .../standard-components/src/DataForm.svelte   | 70 ++++++++++++++++---
 .../src/DataFormWide.svelte                   | 57 +++++++++++----
 2 files changed, 103 insertions(+), 24 deletions(-)

diff --git a/packages/standard-components/src/DataForm.svelte b/packages/standard-components/src/DataForm.svelte
index 1510110ba9..938077371b 100644
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@@ -4,6 +4,12 @@
   export let _bb
   export let model
 
+  const TYPE_MAP = {
+    string: "text",
+    boolean: "checkbox",
+    number: "number"
+  }
+
   let username
   let password
   let newModel = {
@@ -59,15 +65,23 @@
 
 <form class="form" on:submit|preventDefault>
   <h1>{modelDef.name} Form</h1>
+  <hr />
   <div class="form-content">
     {#each fields as field}
       <div class="form-item">
         <label class="form-label" for="form-stacked-text">{field}</label>
-        <input
-          class="input"
-          placeholder={field}
-          type={schema[field].type === 'string' ? 'text' : schema[field].type}
-          on:change={handleInput(field)} />
+        {#if schema[field].type === "string" && schema[field].constraints.inclusion}
+          <select on:blur={handleInput(field)}>
+            {#each schema[field].constraints.inclusion as opt}
+            <option>{opt}</option>
+            {/each}
+          </select>
+        {:else}
+          <input
+            class="input"
+            type={TYPE_MAP[schema[field].type]}
+            on:change={handleInput(field)} />
+        {/if}
       </div>
       <hr />
     {/each}
@@ -142,9 +156,45 @@
     text-align: center;
   }
 
-  button:hover {
-    background-color: white;
-    border-color: #393c44;
-    color: #393c44;
-  }
+  
+button:hover {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
+}
+
+input[type=checkbox] {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  margin: 0;
+  vertical-align: bottom;
+  position: relative;
+  top: -1px;
+  *overflow: hidden;
+
+}
+
+select::-ms-expand {
+  display: none;
+}
+select {
+  display: inline-block;
+  cursor: pointer;
+  align-items: baseline;
+  box-sizing: border-box;
+  padding: 1em 1em;
+  border: 1px solid #eaeaea;
+  border-radius: 5px;
+  font: inherit;
+  line-height: inherit;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  background-repeat: no-repeat;
+  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position: right 17px top 1.5em, right 10px top 1.5em;
+  background-size: 7px 7px, 7px 7px;
+}
+
+
 </style>
diff --git a/packages/standard-components/src/DataFormWide.svelte b/packages/standard-components/src/DataFormWide.svelte
index 44c7aef4e2..78cc1f4dc2 100644
--- a/packages/standard-components/src/DataFormWide.svelte
+++ b/packages/standard-components/src/DataFormWide.svelte
@@ -59,11 +59,18 @@
     {#each fields as field}
       <div class="form-item">
         <label class="form-label" for="form-stacked-text">{field}</label>
-        <input
-          class="input"
-          placeholder={field}
-          type={TYPE_MAP[schema[field].type]}
-          on:change={handleInput(field)} />
+        {#if schema[field].type === "string" && schema[field].constraints.inclusion}
+          <select on:blur={handleInput(field)}>
+            {#each schema[field].constraints.inclusion as opt}
+            <option>{opt}</option>
+            {/each}
+          </select>
+        {:else}
+          <input
+            class="input"
+            type={TYPE_MAP[schema[field].type]}
+            on:change={handleInput(field)} />
+        {/if}
       </div>
       <hr />
     {/each}
@@ -84,15 +91,12 @@
     margin-bottom: 20px;
   }
   .input {
-    height: 40px;
     border-radius: 5px;
     border: 1px solid #e6e6e6;
-    padding: 6px 12px 6px 12px;
+    padding: 1em;
     font-size: 16px;
   }
-    .input::placeholder {
-      color: #cccccc;
-    }
+
   .form-item {
     display: grid;
     grid-template-columns: 30% 1fr;
@@ -119,7 +123,7 @@
     box-sizing: border-box;
     border-radius: 4px;
     color: white;
-    background-color: #393c44;
+    background-color: black;
     outline: none;
     height: 40px;
     cursor: pointer;
@@ -130,13 +134,38 @@
     white-space: nowrap;
     text-align: center;
   }
-  button:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
-  }
+
+button:hover {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
+}
 
 input[type=checkbox] {
     transform: scale(2);
     cursor: pointer;
 }
 
+select::-ms-expand {
+  display: none;
+}
+select {
+  cursor: pointer;
+  display: inline-block;
+  align-items: baseline;
+  box-sizing: border-box;
+  padding: 1em 1em;
+  border: 1px solid #eaeaea;
+  border-radius: 5px;
+  font: inherit;
+  line-height: inherit;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  background-repeat: no-repeat;
+  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position: right 17px top 1.5em, right 10px top 1.5em;
+  background-size: 7px 7px, 7px 7px;
+}
+
+
 </style> 
\ No newline at end of file