modal styling
This commit is contained in:
parent
df100f503d
commit
e58546729d
|
@ -110,7 +110,7 @@
|
||||||
background: #fafafa;
|
background: #fafafa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.budibase__table th {
|
.budibase__table thead > tr > th {
|
||||||
color: var(--button-text);
|
color: var(--button-text);
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
|
@ -41,6 +41,9 @@
|
||||||
{/if}
|
{/if}
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="uk-modal-footer">
|
||||||
|
<slot name="footer" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
@ -52,5 +55,6 @@
|
||||||
height: 80vh;
|
height: 80vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -39,9 +39,12 @@
|
||||||
<style>
|
<style>
|
||||||
.root {
|
.root {
|
||||||
display: flex;
|
display: flex;
|
||||||
background: #fafafa;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-top: 1px solid #ccc;
|
border-top: 1px solid #ccc;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background: #fafafa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-container {
|
.button-container {
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
CreateEditModelModal,
|
CreateEditModelModal,
|
||||||
CreateEditViewModal,
|
CreateEditViewModal,
|
||||||
CreateDatabaseModal,
|
CreateDatabaseModal,
|
||||||
DeleteRecordModal
|
DeleteRecordModal,
|
||||||
} from "./ModelDataTable/modals"
|
} from "./ModelDataTable/modals"
|
||||||
|
|
||||||
let selectedRecord
|
let selectedRecord
|
||||||
|
@ -52,21 +52,20 @@
|
||||||
{/if}
|
{/if}
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
||||||
|
|
||||||
<div class="root">
|
<div class="root">
|
||||||
<div class="node-view">
|
<div class="node-view">
|
||||||
<div class="database-actions">
|
<div class="database-actions">
|
||||||
<div class="budibase__label--big">
|
<div class="budibase__label--big">
|
||||||
{#if $backendUiStore.selectedDatabase.name}
|
{#if $backendUiStore.selectedDatabase.name}
|
||||||
{$backendUiStore.selectedDatabase.name} {breadcrumbs}
|
{$backendUiStore.selectedDatabase.name} {breadcrumbs}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{#if $backendUiStore.selectedDatabase.id}
|
{#if $backendUiStore.selectedDatabase.id}
|
||||||
<ActionButton
|
<ActionButton
|
||||||
primary
|
primary
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
selectedRecord = null
|
selectedRecord = null
|
||||||
backendUiStore.actions.modals.show("RECORD")
|
backendUiStore.actions.modals.show('RECORD')
|
||||||
}}>
|
}}>
|
||||||
Create new record
|
Create new record
|
||||||
</ActionButton>
|
</ActionButton>
|
||||||
|
|
|
@ -81,10 +81,4 @@
|
||||||
</ActionButton>
|
</ActionButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
|
||||||
.actions {
|
|
||||||
/* position: absolute; */
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -166,7 +166,6 @@
|
||||||
<style>
|
<style>
|
||||||
.root {
|
.root {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 2rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.horizontal-stack {
|
.horizontal-stack {
|
||||||
|
|
|
@ -25,7 +25,9 @@
|
||||||
<div class="components-list-container">
|
<div class="components-list-container">
|
||||||
<div class="nav-group-header">
|
<div class="nav-group-header">
|
||||||
<div class="hierarchy-title">Databases</div>
|
<div class="hierarchy-title">Databases</div>
|
||||||
<i class="ri-add-line hoverable" on:click={() => backendUiStore.actions.modals.show("DATABASE")} />
|
<i
|
||||||
|
class="ri-add-line hoverable"
|
||||||
|
on:click={() => backendUiStore.actions.modals.show('DATABASE')} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -34,20 +36,22 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
<div class="hierarchy">
|
{#if $backendUiStore.selectedDatabase.id}
|
||||||
<div class="components-list-container">
|
<div class="hierarchy">
|
||||||
<div class="nav-group-header">
|
<div class="components-list-container">
|
||||||
<div class="hierarchy-title">Users</div>
|
<div class="nav-group-header">
|
||||||
<i class="ri-add-line" />
|
<div class="hierarchy-title">Users</div>
|
||||||
|
<i class="ri-add-line" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hierarchy-items-container">
|
<div class="hierarchy-items-container">
|
||||||
<UsersList />
|
<UsersList />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<NavItem name="ACCESS_LEVELS" label="User Levels" />
|
<NavItem name="ACCESS_LEVELS" label="User Levels" />
|
||||||
</div>
|
</div>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import { store } from "../builderStore"
|
import { onMount } from "svelte"
|
||||||
|
import { store, backendUiStore } from "../builderStore"
|
||||||
|
import api from "../builderStore/api";
|
||||||
import getIcon from "../common/icon"
|
import getIcon from "../common/icon"
|
||||||
import { CheckIcon } from "../common/Icons"
|
import { CheckIcon } from "../common/Icons"
|
||||||
|
|
||||||
|
@ -8,34 +10,28 @@
|
||||||
return { name, props }
|
return { name, props }
|
||||||
}
|
}
|
||||||
|
|
||||||
const pages = [
|
let users = []
|
||||||
{
|
|
||||||
title: "Joe",
|
|
||||||
id: "joe",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Mike",
|
|
||||||
id: "mike",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Martin",
|
|
||||||
id: "martin",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
store.setCurrentPage("main")
|
$: currentAppInfo = {
|
||||||
|
appname: $store.appname,
|
||||||
|
instanceId: $backendUiStore.selectedDatabase.id
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchUsers() {
|
||||||
|
const DELETE_RECORDS_URL = `/_builder/instance/${currentAppInfo.appname}/${currentAppInfo.instanceId}/api/users`
|
||||||
|
const response = await api.get(DELETE_RECORDS_URL);
|
||||||
|
users = await response.json()
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(fetchUsers)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="root">
|
<div class="root">
|
||||||
<ul>
|
<ul>
|
||||||
{#each pages as { title, id }}
|
{#each users as user}
|
||||||
<li>
|
<li>
|
||||||
<i class="ri-user-4-line" />
|
<i class="ri-user-4-line" />
|
||||||
<button
|
<button class:active={user.id === $store.currentUserId}>{user.name}</button>
|
||||||
class:active={id === $store.currentPageName}
|
|
||||||
on:click={() => store.setCurrentPage(id)}>
|
|
||||||
{title}
|
|
||||||
</button>
|
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
Loading…
Reference in New Issue