Standardise sizing of all settings and design properties
This commit is contained in:
Andrew Kingston
parent
3b869d2ff4
commit
4e4aa5c525
|
|
@ -48,7 +48,7 @@
|
|||
{/each}
|
||||
{:else}
|
||||
<div class="no-design">
|
||||
This component does not have any design properties.
|
||||
This component doesn't have any design properties.
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -61,13 +61,7 @@
|
|||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
.design-view-container :global(.property-group-name .name) {
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
.design-view-container :global(.property-group-container) {
|
||||
padding: 4px 0;
|
||||
gap: var(--spacing-l);
|
||||
}
|
||||
|
||||
.design-view-state-categories {
|
||||
|
|
@ -85,10 +79,15 @@
|
|||
min-height: 0;
|
||||
margin: 0 -20px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
|
||||
.no-design {
|
||||
font-size: var(--font-size-s);
|
||||
color: var(--grey-6);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--grey-5);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@
|
|||
return [
|
||||
...$store.screens
|
||||
.filter(
|
||||
screen =>
|
||||
(screen) =>
|
||||
screen.props._component.endsWith("/rowdetail") ||
|
||||
screen.route.endsWith(":id")
|
||||
)
|
||||
.map(screen => ({
|
||||
.map((screen) => ({
|
||||
name: screen.props._instanceName,
|
||||
url: screen.route,
|
||||
sort: screen.props._component,
|
||||
|
|
@ -29,7 +29,13 @@
|
|||
</script>
|
||||
|
||||
<div>
|
||||
<DataList editable secondary thin on:blur={handleBlur} on:change bind:value>
|
||||
<DataList
|
||||
editable
|
||||
secondary
|
||||
extraThin
|
||||
on:blur={handleBlur}
|
||||
on:change
|
||||
bind:value>
|
||||
<option value="" />
|
||||
{#each urls as url}
|
||||
<option value={url.url}>{url.name}</option>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
|
||||
function findIconByTerm(term) {
|
||||
const r = new RegExp(`\^${term}`, "i")
|
||||
return icons.filter(i => r.test(i.label))
|
||||
return icons.filter((i) => r.test(i.label))
|
||||
}
|
||||
|
||||
async function switchLetter(letter) {
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
|
||||
async function findIconOnPage() {
|
||||
loading = true
|
||||
const iconIdx = filteredIcons.findIndex(i => i.value === value)
|
||||
const iconIdx = filteredIcons.findIndex((i) => i.value === value)
|
||||
if (iconIdx !== -1) {
|
||||
currentPage = Math.ceil(iconIdx / maxIconsPerPage)
|
||||
}
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
</script>
|
||||
|
||||
<div bind:this={buttonAnchor}>
|
||||
<Button secondary on:click={dropdown.show}>{displayValue}</Button>
|
||||
<Button secondary small on:click={dropdown.show}>{displayValue}</Button>
|
||||
</div>
|
||||
<DropdownMenu
|
||||
bind:this={dropdown}
|
||||
|
|
|
|||
|
|
@ -175,7 +175,7 @@
|
|||
.bb-select-anchor {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: var(--spacing-m);
|
||||
padding: var(--spacing-s) var(--spacing-m);
|
||||
background-color: var(--grey-2);
|
||||
border-radius: var(--border-radius-m);
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -147,7 +147,7 @@
|
|||
height: 90%;
|
||||
width: 2rem;
|
||||
background: var(--grey-2);
|
||||
right: 10px;
|
||||
right: 4px;
|
||||
--spacing-s: 0;
|
||||
border-left: 0.5px solid var(--grey-3);
|
||||
outline-color: var(--blue);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
$: style = componentInstance["_styles"][styleCategory] || {}
|
||||
</script>
|
||||
|
||||
<DetailSummary {name} on:open show={open}>
|
||||
<DetailSummary {name} on:open show={open} thin>
|
||||
<div>
|
||||
{#each properties as props}
|
||||
<PropertyControl
|
||||
|
|
@ -34,6 +34,5 @@
|
|||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-s);
|
||||
margin-top: var(--spacing-m);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,4 +8,4 @@
|
|||
export let name, value, placeholder, type
|
||||
</script>
|
||||
|
||||
<Input {name} {value} {placeholder} {type} thin on:change />
|
||||
<Input {name} {value} {placeholder} {type} extraThin on:change />
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@
|
|||
const getUrls = () => {
|
||||
const urls = [
|
||||
...$store.screens
|
||||
.filter(screen => !screen.props._component.endsWith("/rowdetail"))
|
||||
.map(screen => ({
|
||||
.filter((screen) => !screen.props._component.endsWith("/rowdetail"))
|
||||
.map((screen) => ({
|
||||
name: screen.props._instanceName,
|
||||
url: screen.route,
|
||||
sort: screen.props._component,
|
||||
|
|
@ -33,12 +33,12 @@
|
|||
tables: $backendUiStore.tables,
|
||||
})
|
||||
|
||||
const detailScreens = $store.screens.filter(screen =>
|
||||
const detailScreens = $store.screens.filter((screen) =>
|
||||
screen.props._component.endsWith("/rowdetail")
|
||||
)
|
||||
|
||||
for (let detailScreen of detailScreens) {
|
||||
const idBinding = bindableProperties.find(p => {
|
||||
const idBinding = bindableProperties.find((p) => {
|
||||
if (
|
||||
p.type === "context" &&
|
||||
p.runtimeBinding.endsWith("._id") &&
|
||||
|
|
@ -68,7 +68,13 @@
|
|||
</script>
|
||||
|
||||
<div>
|
||||
<DataList editable secondary thin on:blur={handleBlur} on:change bind:value>
|
||||
<DataList
|
||||
editable
|
||||
secondary
|
||||
extraThin
|
||||
on:blur={handleBlur}
|
||||
on:change
|
||||
bind:value>
|
||||
<option value="" />
|
||||
{#each urls as url}
|
||||
<option value={url.url}>{url.name}</option>
|
||||
|
|
|
|||
|
|
@ -125,7 +125,9 @@
|
|||
{/if}
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="empty">This component does not have any settings.</div>
|
||||
<div class="empty">
|
||||
This component doesn't have any additional settings.
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
|
@ -139,9 +141,9 @@
|
|||
}
|
||||
|
||||
.empty {
|
||||
font-size: var(--font-size-s);
|
||||
font-size: var(--font-size-xs);
|
||||
margin-top: var(--spacing-m);
|
||||
color: var(--grey-6);
|
||||
color: var(--grey-5);
|
||||
}
|
||||
|
||||
.duplicate-name {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
</script>
|
||||
|
||||
<div>
|
||||
<Select thin secondary wide on:change {value}>
|
||||
<Select extraThin secondary wide on:change {value}>
|
||||
<option value="">Choose a table</option>
|
||||
{#each $backendUiStore.tables as table}
|
||||
<option value={table._id}>{table.name}</option>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
dropdownRight.hide()
|
||||
}
|
||||
|
||||
$: tables = $backendUiStore.tables.map(m => ({
|
||||
$: tables = $backendUiStore.tables.map((m) => ({
|
||||
label: m.name,
|
||||
name: `all_${m._id}`,
|
||||
tableId: m._id,
|
||||
|
|
@ -39,8 +39,8 @@
|
|||
})
|
||||
|
||||
$: links = bindableProperties
|
||||
.filter(x => x.fieldSchema.type === "link")
|
||||
.map(property => ({
|
||||
.filter((x) => x.fieldSchema.type === "link")
|
||||
.map((property) => ({
|
||||
label: property.readableBinding,
|
||||
fieldName: property.fieldSchema.name,
|
||||
name: `all_${property.fieldSchema.tableId}`,
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
.dropdownbutton {
|
||||
background-color: var(--grey-2);
|
||||
border: var(--border-transparent);
|
||||
padding: var(--spacing-m);
|
||||
padding: var(--spacing-s) var(--spacing-m);
|
||||
border-radius: var(--border-radius-m);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
|
|||
Loading…
Reference in New Issue