Table component revised plus minor UI changes

Table redesigned to be more flexible and include setting props for better control

packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte

@@ -100,7 +100,7 @@
 
   {#if displayName}
     <div class="instance-name">
-      <strong>{componentInstance._instanceName}</strong>
+      {componentInstance._instanceName}
     </div>
   {/if}
 
@@ -142,13 +142,15 @@
   }
 
   .component-props-container {
-    margin-top: 10px;
+    margin-top: 16px;
     flex: 1 1 auto;
     min-height: 0;
   }
 
   .instance-name {
-    margin-top: 10px;
+    margin-top: 20px;
-    font-size: 12px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--grey-7);
   }
 </style>

packages/builder/src/components/userInterface/PropertyControl.svelte

@@ -52,7 +52,6 @@
   }
 
   .label {
-    flex: 0 0 50px;
     display: flex;
     align-items: center;
     font-size: 12px;

packages/builder/src/components/userInterface/propertyCategories.js

@@ -85,6 +85,8 @@ export const margin = [
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
       { label: "64px", value: "64px" },
+      { label: "128px", value: "128px" },
+      { label: "256px", value: "256px" },
       { label: "Auto", value: "auto" },
       { label: "100%", value: "100%" },
     ],
@@ -101,6 +103,8 @@ export const margin = [
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
       { label: "64px", value: "64px" },
+      { label: "128px", value: "128px" },
+      { label: "256px", value: "256px" },
       { label: "Auto", value: "auto" },
       { label: "100%", value: "100%" },
     ],
@@ -133,6 +137,8 @@ export const margin = [
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
       { label: "64px", value: "64px" },
+      { label: "128px", value: "128px" },
+      { label: "256px", value: "256px" },
       { label: "Auto", value: "auto" },
       { label: "100%", value: "100%" },
     ],
@@ -149,6 +155,8 @@ export const margin = [
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
       { label: "64px", value: "64px" },
+      { label: "128px", value: "128px" },
+      { label: "256px", value: "256px" },
       { label: "Auto", value: "auto" },
       { label: "100%", value: "100%" },
     ],

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -313,7 +313,13 @@ export default {
           icon: "ri-archive-drawer-fill",
           properties: {
             design: { ...all },
-            settings: [{ label: "Model", key: "model", control: ModelSelect }],
+            settings: [
+              { label: "Model", key: "model", control: ModelSelect },
+              { label: "Stripe Color", key: "stripeColor", control: Input },
+              { label: "Border Color", key: "borderColor", control: Input },
+              { label: "TH Color", key: "backgroundColor", control: Input },
+              { label: "TH Font Color", key: "color", control: Input }
+            ],
           },
           children: [],
         },
@@ -330,11 +336,7 @@ export default {
               properties: {
                 design: { ...all },
                 settings: [
-                  {
+                  { label: "Model", key: "model", control: ModelSelect,},
-                    label: "Model",
-                    key: "model",
-                    control: ModelSelect,
-                  },
                 ],
               },
               template: {

packages/standard-components/components.json

@@ -26,6 +26,20 @@
 			"borderStyle": "string"
 		}
 	},
+	"Navigation1": {
+		"name": "Navigation1",
+		"description": "A basic left navigation component",
+		"props": {
+			"logoUrl": "string",
+			"title": "string",
+			"backgroundColor": "string",
+			"color": "string",
+			"borderWidth": "string",
+			"borderColor": "string",
+			"borderStyle": "string"
+		}
+	},
+	
 	"button": {
 		"name": "Button",
 		"description": "an html <button />",
@@ -190,16 +204,22 @@
 	"icon": {
 		"description": "A HTML icon tag",
 		"props": {
-			"icon": "string",
+			"url": "string",
-			"fontSize": "string",
+			"className": "string",
-			"color": "string"
+			"description": "string",
+			"height": "string",
+			"width": "string"
 		}
 	},
 	"datatable": {
 		"description": "an HTML table that fetches data from a model or view and displays it.",
 		"data": true,
 		"props": {
-			"model": "models" 
+			"model": "models",
+			"stripeColor": "string",
+			"borderColor": "string",
+			"backgroundColor": "string",
+			"color": "string"
 		}
 	},
 	"dataform": {

packages/standard-components/src/DataTable.svelte

@@ -1,13 +1,25 @@
 <script>
   import { onMount } from "svelte"
+  import { cssVars, createClasses } from "./cssVars"
 
   export let _bb
   export let onLoad
   export let model
+  export let backgroundColor
+  export let color
+  export let stripeColor
+  export let borderColor
 
   let headers = []
   let store = _bb.store
 
+  $: cssVariables = {
+    backgroundColor,
+    color,
+    stripeColor,
+    borderColor,
+  }
+
   async function fetchData() {
     const FETCH_RECORDS_URL = `/api/views/all_${model}`
 
@@ -34,7 +46,7 @@
   })
 </script>
 
-<table class="uk-table">
+<table use:cssVars={cssVariables}>
   <thead>
     <tr>
       {#each headers as header}
@@ -56,41 +68,71 @@
 </table>
 
 <style>
-  table {
+table { 
-    border: 1px solid #ccc;
+	width: 100%; 
-    background: #fff;
-    border-radius: 3px;
 	border-collapse: collapse; 
 	}
 
-  thead {
+  /* Zebra striping */
-    background: #393c44;
+tr:nth-of-type(odd) { 
-    border: 1px solid #ccc;
+	background: var(--stripeColor); 
-    height: 40px;
-    text-align: left;
-    margin-right: 60px;
 	}
 
-  thead th {
+th { 
-    color: #ffffff;
+	background-color: var(--backgroundColor); 
+	color: var(--color); 
+	font-weight: bold; 
   text-transform: capitalize;
-    font-weight: 500;
-    font-size: 14px;
-    text-rendering: optimizeLegibility;
-    justify-content: left;
-    padding: 16px 20px 16px 8px;
-    margin-right: 20px;
 	}
 
-  tbody tr {
+td, th { 
-    border-bottom: 1px solid #ccc;
+	padding: 16px; 
-    transition: 0.3s background-color;
+	border: 1px solid var(--borderColor); 
-    color: #393c44;
+	text-align: left; 
-    font-size: 14px;
-    height: 40px;
 	}
 
-  tbody tr:hover {
+
-    background: var(--grey-1);
+@media 
+only screen and (max-width: 760px),
+(min-device-width: 768px) and (max-device-width: 1024px)  {
+
+	table { 
+	  	width: 100%; 
 	}
+
+	/* Force table to not be like tables anymore */
+	table, thead, tbody, th, td, tr { 
+		display: block; 
+	}
+	
+	/* Hide table headers (but not display: none;, for accessibility) */
+	thead tr { 
+		position: absolute;
+		top: -9999px;
+		left: -9999px;
+	}
+	
+	tr { border: 1px solid var(--borderColor); }
+	
+	td { 
+		/* Behave  like a "row" */
+		border: none;
+		border-bottom: 1px solid #eee; 
+		position: relative;
+		padding-left: 10%; 
+	}
+
+	td:before { 
+		/* Now like a table header */
+		position: absolute;
+		/* Top/left values mimic padding */
+		top: 6px;
+		left: 6px;
+		width: 45%; 
+		padding-right: 10px; 
+		white-space: nowrap;
+		/* Label the data */
+		content: attr(data-column);
+	}
+}
 </style>