Merge pull request #8944 from Budibase/side-panel-tweaks
Side panel tweaks
This commit is contained in:
commit
e612545072
3 changed files with 18 additions and 9 deletions
|
@ -9,7 +9,7 @@
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
background-color: var(--spectrum-global-color-gray-300) !important;
|
||||
background-color: var(--spectrum-global-color-gray-200) !important;
|
||||
border-radius: 7px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
@ -31,8 +31,8 @@
|
|||
background-image: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 255, 255, 0) 0,
|
||||
rgba(255, 255, 255, 0.2) 20%,
|
||||
rgba(255, 255, 255, 0.5) 60%,
|
||||
rgba(255, 255, 255, 0.15) 20%,
|
||||
rgba(255, 255, 255, 0.3) 60%,
|
||||
rgba(255, 255, 255, 0)
|
||||
);
|
||||
animation: shimmer 2s infinite;
|
||||
|
@ -44,7 +44,7 @@
|
|||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -57,7 +57,9 @@
|
|||
class="side-panel"
|
||||
class:open
|
||||
>
|
||||
{#if $sidePanelStore.open}
|
||||
<slot />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
|
@ -11,18 +11,25 @@ export const createSidePanelStore = () => {
|
|||
open: $store.contentId != null,
|
||||
}
|
||||
})
|
||||
let timeout
|
||||
|
||||
const open = id => {
|
||||
clearTimeout(timeout)
|
||||
store.update(state => {
|
||||
state.contentId = id
|
||||
return state
|
||||
})
|
||||
}
|
||||
|
||||
// Delay closing by 50ms to avoid toggling visibility when cycling though
|
||||
// records
|
||||
const close = () => {
|
||||
timeout = setTimeout(() => {
|
||||
store.update(state => {
|
||||
state.contentId = null
|
||||
return state
|
||||
})
|
||||
}, 50)
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
Loading…
Reference in a new issue