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

Merge pull request #8944 from Budibase/side-panel-tweaks 

Side panel tweaks
This commit is contained in:
Andrew Kingston 2022-12-06 12:23:46 +00:00 committed by GitHub
parent f1082c638d e02c8cd466
commit 00594e723e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/bbui/src/Skeleton/Skeleton.svelte
View File

@ -9,7 +9,7 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
opacity: 0; opacity: 0;
background-color: var(--spectrum-global-color-gray-300) !important; background-color: var(--spectrum-global-color-gray-200) !important;
border-radius: 7px; border-radius: 7px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -31,8 +31,8 @@
background-image: linear-gradient( background-image: linear-gradient(
90deg, 90deg,
rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.15) 20%,
rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0) rgba(255, 255, 255, 0)
); );
animation: shimmer 2s infinite; animation: shimmer 2s infinite;
@ -44,7 +44,7 @@
opacity: 0; opacity: 0;
} }
100% { 100% {
opacity: 1; opacity: 0.75;
} }
} }

2
packages/client/src/components/app/SidePanel.svelte
View File

@ -57,7 +57,9 @@
class="side-panel" class="side-panel"
class:open class:open
> >
{#if $sidePanelStore.open}
<slot /> <slot />
{/if}
</div> </div>
<style> <style>

7
packages/client/src/stores/sidePanel.js
View File

@ -11,18 +11,25 @@ export const createSidePanelStore = () => {
open: $store.contentId != null, open: $store.contentId != null,
} }
}) })
let timeout
const open = id => { const open = id => {
clearTimeout(timeout)
store.update(state => { store.update(state => {
state.contentId = id state.contentId = id
return state return state
}) })
} }
// Delay closing by 50ms to avoid toggling visibility when cycling though
// records
const close = () => { const close = () => {
timeout = setTimeout(() => {
store.update(state => { store.update(state => {
state.contentId = null state.contentId = null
return state return state
}) })
}, 50)
} }
return { return {