CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-03 13:30:46 +12:00
Code Issues Projects Releases Wiki Activity

edit/delete record dropdown update

Browse source 
During the onboarding of Nile, he reported the dropdown was too small and hard to use.

I have increased the size of the dropdown, text, improved spacing, added icons, and hover.
This commit is contained in:
Joe 2020-07-14 15:41:46 +01:00
parent 18bd05070b
commit a205e3e7e8
1 changed files with 35 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
View file

@ -113,15 +113,15 @@
on:click={() => { on:click={() => {
editRecord(row) editRecord(row)
}}> }}>
<div>Edit</div> <i class="ri-edit-line" />
<div class="label">Edit</div>
</li> </li>
<li> <li
<div on:click={() => {
on:click={() => { deleteRecord(row)
deleteRecord(row) }}>
}}> <i class="ri-delete-bin-2-line" />
Delete <div class="label">Delete</div>
</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -146,6 +146,9 @@
</section> </section>
<style> <style>
section {
margin-bottom: 20px;
}
.title { .title {
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;
@ -204,4 +207,28 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
li {
display: flex;
align-items: center;
border-radius: 5px;
}
i {
color: var(--grey-7);
margin-right: 8px;
font-size: 20px;
}
.label {
color: var(--grey-7);
font-size: 14px;
font-family: inter;
font-weight: 400;
margin: 12px 0px;
}
.label:hover {
color: var(--ink);
cursor: pointer;
}
</style> </style>