Merge pull request #13 from Budibase/UI-changes-to-actions/triggers/accesslevels

UI changes to actions/triggers/userAccess

packages/builder/src/accessLevels/AccessLevelsRoot.svelte

@@ -100,16 +100,19 @@ const getPermissionsString = perms => {
 <style>
 
 .root {
-    padding:10px;
+    height: 100%;
+    position: relative;
+    padding: 1.5rem;
+
 }
 
-.edit-button {
-    cursor:pointer;
-    color: var(--white);
+.actions-header {
+    flex: 0 1 auto;
 }
 
-tr:hover .edit-button  {
-    color: var(--secondary75);
+.node-view {
+    overflow-y: auto;
+    flex: 1 1 auto;
 }
 
 

packages/builder/src/actionsAndTriggers/ActionView.svelte

@@ -81,8 +81,8 @@ const cancel = () => {
     <div class=" uk-form-stacked" style="margin-bottom: 20px">
         <label class="uk-form-label">Default Options</label>
         <div class="uk-grid-small" uk-grid>
-            <input class="uk-input uk-width-1-4" placeholder="key" bind:value={optKey} >        
-            <input class="uk-input uk-width-1-4" placeholder="value" bind:value={optValue} >        
+            <input class="uk-input uk-width-1-4 uk-margin-right" placeholder="key" bind:value={optKey} >        
+            <input class="uk-input uk-width-1-4 uk-margin-right" placeholder="value" bind:value={optValue} >        
             <Button color="primary-outline uk-width-1-4" on:click={addNewOption}>Add</Button>
         </div>
         <div style="margin-top: 10px">
@@ -93,7 +93,7 @@ const cancel = () => {
     </div>
 
     <ButtonGroup>
-        <Button color="primary" grouped on:click={save}>Save</Button>
+        <Button color="secondary" grouped on:click={save}>Save</Button>
         <Button color="tertiary" grouped on:click={cancel}>Cancel</Button>
     </ButtonGroup>
 
@@ -104,7 +104,12 @@ const cancel = () => {
 <style>
 
 .root {
-    padding: 10px;
+    padding: 2rem;
+    border-radius: 2rem;
+}
+
+.uk-grid-small {
+    padding: 1rem;
 }
 
 .option-container {

packages/builder/src/actionsAndTriggers/Actions.svelte

@@ -45,13 +45,13 @@ let actionEditingFinished = (action) => {
 
 </script>
 
-<h3>Actions</h3>
+<h3 class="title">Actions</h3>
 
 {#if actionsArray}
-<table class="fields-table uk-table uk-table-small">
+<table class="fields-table uk-table uk-table-small uk-table-striped">
     <thead>
         <tr>
-            <th>Description</th>
+            <th >Description</th>
             <th>Behaviour Source</th>
             <th>Behaviour Name</th>
             <th>Default Options</th>
@@ -61,10 +61,10 @@ let actionEditingFinished = (action) => {
     <tbody>
         {#each actionsArray as action}
         <tr>
-            <td >{action.name}</td>
-            <td >{action.behaviourSource}</td>
-            <td >{action.behaviourName}</td>
-            <td >{@html getDefaultOptionsHtml(action.initialOptions)}</td>
+            <td class="table-content">{action.name}</td>
+            <td class="table-content">{action.behaviourSource}</td>
+            <td class="table-content">{action.behaviourName}</td>
+            <td class="table-content">{@html getDefaultOptionsHtml(action.initialOptions)}</td>
             <td class="edit-button">
                 <span on:click={() => onActionEdit(action)}>{@html getIcon("edit")}</span>
                 <span on:click={() => onActionDelete(action)}>{@html getIcon("trash")}</span>
@@ -92,12 +92,21 @@ let actionEditingFinished = (action) => {
 
 .edit-button {
     cursor:pointer;
-    color: var(--white);
+    color: var(--secondary25);
 }
 
 tr:hover .edit-button  {
     color: var(--secondary75);
 }
 
+.title {
+    margin: 3rem 0rem 0rem 0rem;
+    font-weight: 700;
+}
+
+.table-content {
+    font-weight: 500;
+    font-size: .9rem;
+}
 
 </style>

packages/builder/src/actionsAndTriggers/ActionsAndTriggersRoot.svelte

@@ -85,31 +85,45 @@ let onTriggerDelete = (trigger) => {
 </script>
 
 <div class="root">
-
-<ButtonGroup>
-    <Button color="primary" 
-            grouped
-            on:click={newAction}>Create New Action</Button>
-    <Button color="secondary" 
-            grouped
-            on:click={newTrigger}>Create New Trigger</Button>
-</ButtonGroup>
-
-<Actions {editingActionIsNew} {editingAction} 
-         {onActionEdit} {onActionDelete} {onActionSave}
-         {onActionCancel} />
-
-<Triggers {editingTriggerIsNew} {editingTrigger} 
-         {onTriggerEdit} {onTriggerDelete} {onTriggerSave}
-         {onTriggerCancel} />
+    <div class="actions-header">
+        <ButtonGroup>
+            <Button color="secondary" 
+                    grouped
+                    on:click={newAction}>Create New Action</Button>
+            <Button color="tertiary" 
+                    grouped
+                    on:click={newTrigger}>Create New Trigger</Button>
+        </ButtonGroup>
+    </div>
+
+    <div class="node-view">
+        <Actions {editingActionIsNew} {editingAction} 
+                {onActionEdit} {onActionDelete} {onActionSave}
+                {onActionCancel} />
+
+        <Triggers {editingTriggerIsNew} {editingTrigger} 
+                {onTriggerEdit} {onTriggerDelete} {onTriggerSave}
+                {onTriggerCancel} />
+    </div>
 
 </div>
 
 <style>
 
 .root {
-    padding: 10px;
+    height: 100%;
+    position: relative;
+    padding: 1.5rem;
+
 }
 
+.actions-header {
+    flex: 0 1 auto;
+}
+
+.node-view {
+    overflow-y: auto;
+    flex: 1 1 auto;
+}
 
 </style>

packages/builder/src/actionsAndTriggers/Triggers.svelte

@@ -27,10 +27,10 @@ let triggerEditingFinished = (trigger) => {
 
 </script>
 
-<h3>Triggers</h3>
+<h3 class="title">Triggers</h3>
 
 {#if $store.triggers}
-<table class="fields-table uk-table uk-table-small">
+<table class="fields-table uk-table uk-table-small uk-table-striped">
     <thead>
         <tr>
             <th>Event</th>
@@ -43,10 +43,10 @@ let triggerEditingFinished = (trigger) => {
     <tbody>
         {#each $store.triggers as trigger}
         <tr>
-            <td >{trigger.eventName}</td>
-            <td >{trigger.actionName}</td>
-            <td >{trigger.condition}</td>
-            <td >{trigger.optionsCreator}</td>
+            <td class="table-content">{trigger.eventName}</td>
+            <td class="table-content">{trigger.actionName}</td>
+            <td class="table-content">{trigger.condition}</td>
+            <td class="table-content">{trigger.optionsCreator}</td>
             <td class="edit-button">
                 <span on:click={() => onTriggerEdit(trigger)}>{@html getIcon("edit")}</span>
                 <span on:click={() => onTriggerDelete(trigger)}>{@html getIcon("trash")}</span>
@@ -74,7 +74,17 @@ let triggerEditingFinished = (trigger) => {
 
 .edit-button {
     cursor:pointer;
-    color: var(--white);
+    color: var(--secondary25);
+}
+
+.title {
+    margin: 3rem 0rem 0rem 0rem;
+    font-weight: 700;
+}
+
+.table-content {
+    font-weight: 500;
+    font-size: .9rem;
 }
 
 tr:hover .edit-button  {

packages/builder/src/common/Modal.svelte

@@ -34,4 +34,8 @@ $: {
 
 <style>
 
+.uk-modal-dialog {
+    border-radius: .3rem;
+}
+
 </style>

packages/builder/src/database/RecordView.svelte

@@ -185,12 +185,12 @@ let getTypeOptions = typeOptions =>
 }
 
 .settings-title {
-    font-weight: 600;
+    font-weight: 700;
 }
 
 .title {
     margin: 3rem 0rem 0rem 0rem;
-    font-weight: 600;
+    font-weight: 700;
 }
 
 .recordkey {
@@ -210,10 +210,11 @@ let getTypeOptions = typeOptions =>
 
 .edit-button {
     cursor:pointer;
-    color: var(--white);
+    color: var(--secondary25);
 }
 
 .edit-button:hover {
+    cursor:pointer;
     color: var(--secondary75);
 }