CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-29 08:41:16 +13:00
Code Issues Projects Releases Wiki Activity

Standardise dropdownmenus in frontend page

Browse source
This commit is contained in:
Andrew Kingston 2020-10-04 17:10:32 +01:00
parent f19e60dcb1
commit 36cf5d5631
3 changed files with 61 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
View file

@ -1,5 +1,4 @@
<script>
import { MoreIcon } from "components/common/Icons"
import { store } from "builderStore"
import { getComponentDefinition } from "builderStore/storeUtils"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
@ -109,9 +108,9 @@
</script>
<div bind:this={anchor} on:click|stopPropagation={() => {}}>
<button on:click={dropdown.show}>
<MoreIcon />
</button>
<div class="icon" on:click={dropdown.show}>
<i class="ri-more-line" />
</div>
</div>
<DropdownMenu
class="menu"
@ -122,27 +121,27 @@
align="left">
<ul>
<li class="item" on:click={() => confirmDeleteDialog.show()}>
<i class="icon ri-delete-bin-2-line" />
<i class="ri-delete-bin-2-line" />
Delete
</li>
<li class="item" on:click={moveUpComponent}>
<i class="icon ri-arrow-up-line" />
<i class="ri-arrow-up-line" />
Move up
</li>
<li class="item" on:click={moveDownComponent}>
<i class="icon ri-arrow-down-line" />
<i class="ri-arrow-down-line" />
Move down
</li>
<li class="item" on:click={copyComponent}>
<i class="icon ri-repeat-one-line" />
<i class="ri-repeat-one-line" />
Duplicate
</li>
<li class="item" on:click={() => storeComponentForCopy(true)}>
<i class="icon ri-scissors-cut-line" />
<i class="ri-scissors-cut-line" />
Cut
</li>
<li class="item" on:click={() => storeComponentForCopy(false)}>
<i class="icon ri-file-copy-line" />
<i class="ri-file-copy-line" />
Copy
</li>
<hr class="hr-style" />
@ -150,21 +149,21 @@
class="item"
class:disabled={noPaste}
on:click={() => pasteComponent('above')}>
<i class="icon ri-insert-row-top" />
<i class="ri-insert-row-top" />
Paste above
</li>
<li
class="item"
class:disabled={noPaste}
on:click={() => pasteComponent('below')}>
<i class="icon ri-insert-row-bottom" />
<i class="ri-insert-row-bottom" />
Paste below
</li>
<li
class="item"
class:disabled={noPaste || noChildrenAllowed}
on:click={() => pasteComponent('inside')}>
<i class="icon ri-insert-column-right" />
<i class="ri-insert-column-right" />
Paste inside
</li>
</ul>
@ -181,7 +180,7 @@
ul {
list-style: none;
padding: 0;
margin: var(--spacing-xs) 0;
margin: var(--spacing-s) 0;
}
li {
@ -190,44 +189,29 @@
font-size: var(--font-size-xs);
color: var(--ink);
padding: var(--spacing-s) var(--spacing-m);
margin: auto 0px;
margin: auto 0;
align-items: center;
cursor: pointer;
}
button {
border-style: none;
border-radius: 2px;
padding: 0;
background: transparent;
cursor: pointer;
color: var(--ink);
outline: none;
}
li:hover {
li:not(.disabled):hover {
background-color: var(--grey-2);
}
li:active {
color: var(--blue);
}
.item {
display: flex;
align-items: center;
font-size: 14px;
}
.icon {
li i {
margin-right: 8px;
font-size: var(--font-size-s);
}
.disabled {
li.disabled {
color: var(--grey-4);
cursor: default;
}
.icon i {
font-size: 16px;
}
.hr-style {
margin: 8px 0;
color: var(--grey-4);

9
packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
View file

@ -190,9 +190,9 @@
.item {
display: grid;
grid-template-columns: 1fr auto auto auto;
padding: 0px 5px 0px 15px;
margin: auto 0px;
border-radius: 5px;
padding: 0 var(--spacing-m);
margin: 0;
border-radius: var(--border-radius-m);
height: 36px;
align-items: center;
}
@ -205,9 +205,6 @@
.actions {
display: none;
color: var(--ink);
padding: 0 5px;
width: 24px;
height: 24px;
border-style: none;
background: rgba(0, 0, 0, 0);
cursor: pointer;

70
packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
View file

@ -1,5 +1,4 @@
<script>
import { MoreIcon } from "components/common/Icons"
import { store } from "builderStore"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import api from "builderStore/api"
@ -10,7 +9,7 @@
let confirmDeleteDialog
let dropdown
let buttonForDropdown
let anchor
const hideDropdown = () => {
dropdown.hide()
@ -34,14 +33,17 @@
}
</script>
<div class="root boundary" on:click|stopPropagation={() => {}}>
<button on:click={() => dropdown.show()} bind:this={buttonForDropdown}>
<MoreIcon />
</button>
<DropdownMenu bind:this={dropdown} anchor={buttonForDropdown}>
<ul class="menu" on:click={hideDropdown}>
<li class="item" on:click={() => confirmDeleteDialog.show()}>
<i class="icon ri-delete-bin-2-line" />
<div
bind:this={anchor}
class="root boundary"
on:click|stopPropagation={() => {}}>
<div class="icon" on:click={() => dropdown.show()}>
<i class="ri-more-line" />
</div>
<DropdownMenu bind:this={dropdown} {anchor} align="left">
<ul on:click={hideDropdown}>
<li on:click={() => confirmDeleteDialog.show()}>
<i class="ri-delete-bin-2-line" />
Delete
</li>
</ul>
@ -71,40 +73,40 @@
outline: none;
}
.menu {
ul {
z-index: 100000;
overflow: visible;
padding: var(--spacing-xs) 0;
margin: var(--spacing-s) 0;
border-radius: var(--border-radius-s);
padding: 0;
}
.menu li {
border-style: none;
background-color: transparent;
list-style-type: none;
padding: 4px 16px;
margin: 0;
width: 100%;
box-sizing: border-box;
}
.item {
li {
display: flex;
font-family: var(--font-sans);
font-size: var(--font-size-xs);
color: var(--ink);
padding: var(--spacing-s) var(--spacing-m);
margin: auto 0;
align-items: center;
cursor: pointer;
}
li:not(.disabled):hover {
background-color: var(--grey-2);
}
li:active {
color: var(--blue);
}
li i {
margin-right: 8px;
font-size: var(--font-size-s);
}
.icon {
margin-right: 8px;
li.disabled {
color: var(--grey-4);
cursor: default;
}
.menu li:not(.disabled) {
cursor: pointer;
color: var(--ink);
}
.menu li:not(.disabled):hover {
color: var(--ink);
background-color: var(--grey-1);
.icon i {
font-size: 16px;
}
</style>