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%;
|
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -57,7 +57,9 @@
|
||||||
class="side-panel"
|
class="side-panel"
|
||||||
class:open
|
class:open
|
||||||
>
|
>
|
||||||
<slot />
|
{#if $sidePanelStore.open}
|
||||||
|
<slot />
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in a new issue