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

Use remix icons for consistency. Styling tweaks.

This commit is contained in:
pngwn 2020-02-21 11:09:37 +00:00
parent f0ed967c87
commit f29de61dde
5 changed files with 63 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/builder/src/common/Icons/ChevronDown.svelte
View File

@ -1,8 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
<style>
svg {
height: 100%;
width: 100%;
}
</style>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="100%"
height="100%">
<path fill="none" d="M0 0h24v24H0z" />
<path
fill="currentColor"
d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 330 B

After

Width:  |  Height:  |  Size: 250 B

18
packages/builder/src/common/Icons/ChevronUp.svelte
View File

@ -1,8 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>
<style>
svg {
height: 100%;
width: 100%;
}
</style>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="100%"
height="100%">
<path fill="none" d="M0 0h24v24H0z" />
<path
fill="currentColor"
d="M12 10.828l-4.95 4.95-1.414-1.414L12 8l6.364 6.364-1.414 1.414z" />
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 329 B

After

Width:  |  Height:  |  Size: 251 B

20
packages/builder/src/common/Icons/Copy.svelte
View File

@ -1,8 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
<style>
svg {
height: 100%;
width: 100%;
}
</style>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="100%"
height="100%">
<path fill="none" d="M0 0h24v24H0z" />
<path
fill="currentColor"
d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45
1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003
8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z" />
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 412 B

After

Width:  |  Height:  |  Size: 379 B

32
packages/builder/src/common/Icons/XCircle.svelte
View File

@ -1,23 +1,11 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-x-circle">
<circle cx="12" cy="12" r="10"/>
<line x1="15" y1="9" x2="9" y2="15"/>
<line x1="9" y1="9" x2="15" y2="15"/>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="100%"
height="100%">
<path fill="none" d="M0 0h24v24H0z" />
<path
fill="currentColor"
d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414
1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
</svg>
<style>
svg {
height: 100%;
width: 100%;
}
</style>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 454 B

After

Width:  |  Height:  |  Size: 320 B

29
packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte
View File

@ -40,22 +40,27 @@
<div
class="item"
class:selected={currentComponent === component}
style="padding-left: {level * 20 + 15}px">
style="padding-left: {level * 20 + 53}px">
<div>{get_capitalised_name(component._component)}</div>
<div class="reorder-buttons">
{#if index > 0}
<button
class:solo={index === components.length - 1}
on:click|stopPropagation={() => onMoveUpComponent(component)}>
<ChevronUpIcon />
</button>
{/if}
{#if index < components.length - 1}
<button on:click|stopPropagation={moveDownComponent(component)}>
<button
class:solo={index === 0}
on:click|stopPropagation={moveDownComponent(component)}>
<ChevronDownIcon />
</button>
{/if}
</div>
<button on:click|stopPropagation={() => onCopyComponent(component)}>
<button
class="copy"
on:click|stopPropagation={() => onCopyComponent(component)}>
<CopyIcon />
</button>
<button on:click|stopPropagation={() => onDeleteComponent(component)}>
@ -100,9 +105,16 @@
.item button {
display: none;
height: 20px;
width: 30px;
width: 28px;
color: var(--slate);
padding: 0px 5px;
border-style: none;
background: rgba(0, 0, 0, 0);
cursor: pointer;
}
.item button.copy {
width: 26px;
}
.item:hover {
@ -110,10 +122,7 @@
cursor: pointer;
}
.item:hover button {
border-style: none;
background: rgba(0, 0, 0, 0);
display: block;
cursor: pointer;
}
.item:hover button:hover {
@ -134,7 +143,11 @@
.reorder-buttons > button {
flex: 1 1 auto;
height: 17px;
width: 30px;
height: 15px;
}
.reorder-buttons > button.solo {
padding-top: 2px;
}
</style>