CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-08 21:51:58 +12:00
Code Issues Projects Releases Wiki Activity

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

Browse source 
Side panel tweaks
This commit is contained in:
Andrew Kingston 2022-12-06 12:23:46 +00:00 committed by GitHub
commit e612545072
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;
} }
} }

4
packages/client/src/components/app/SidePanel.svelte
View file

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

15
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 = () => {
store.update(state => { timeout = setTimeout(() => {
state.contentId = null store.update(state => {
return state state.contentId = null
}) return state
})
}, 50)
} }
return { return {