MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Standardise dropdownmenus in frontend page

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

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

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

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

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