wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-20 23:32:14 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Fix warnings. Update Scroller. (#965)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2022-02-08 16:07:26 +07:00 committed by GitHub
parent b9808cf4ea
commit f4c5e84db1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 71 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/presentation/src/components/PDFViewer.svelte
View File

@ -76,17 +76,17 @@
height: 4.5rem; height: 4.5rem;
min-height: 4.5rem; min-height: 4.5rem;
.arrow-back { // .arrow-back {
margin-right: 1rem; // margin-right: 1rem;
width: 1.5rem; // width: 1.5rem;
height: 1.5rem; // height: 1.5rem;
cursor: pointer; // cursor: pointer;
.icon { // .icon {
color: #1F212B; // color: #1F212B;
opacity: .4; // opacity: .4;
} // }
&:hover .icon { opacity: 1; } // &:hover .icon { opacity: 1; }
} // }
.user { margin-left: .75rem; } .user { margin-left: .75rem; }
.name { .name {

77
packages/ui/src/components/Scroller.svelte
View File

@ -24,6 +24,7 @@
let divScroll: HTMLElement let divScroll: HTMLElement
let divBox: HTMLElement let divBox: HTMLElement
let divBack: HTMLElement let divBack: HTMLElement
let divBar: HTMLElement
let divEl: HTMLElement let divEl: HTMLElement
const checkBack = (): void => { const checkBack = (): void => {
@ -45,6 +46,17 @@
} else divBack.style.visibility = 'hidden' } else divBack.style.visibility = 'hidden'
} }
const checkBar = (): void => {
if (divBar && divScroll) {
const proc = divScroll.clientHeight / divScroll.scrollHeight * 100
const procScroll = (divScroll.clientHeight - 8) / 100
const procTop = divScroll.scrollTop / divScroll.scrollHeight
divBar.style.height = procScroll * proc + 'px'
divBar.style.top = procTop * (divScroll.clientHeight - 8) + 4 + 'px'
divBar.style.visibility = 'visible'
}
}
let observer = new IntersectionObserver(changes => { let observer = new IntersectionObserver(changes => {
for (const change of changes) { for (const change of changes) {
if (divBack) { if (divBack) {
@ -71,6 +83,7 @@
else if (b > 0) mask = 'top' else if (b > 0) mask = 'top'
else mask = 'none' else mask = 'none'
if (isBack) checkBack() if (isBack) checkBack()
if (mask !== 'none') checkBar()
} }
onMount(() => { onMount(() => {
@ -89,22 +102,35 @@
afterUpdate(() => { if (divScroll) checkFade() }) afterUpdate(() => { if (divScroll) checkFade() })
</script> </script>
<svelte:window on:resize={checkFade} /> <svelte:window on:resize={checkFade} />
<div <div class="scroller-container">
bind:this={divScroll} <div
class="scroll relative" bind:this={divScroll}
class:antiNav-topFade={mask === 'top'} class="scroll relative"
class:antiNav-bottomFade={mask === 'bottom'} class:antiNav-topFade={mask === 'top'}
class:antiNav-bothFade={mask === 'both'} class:antiNav-bottomFade={mask === 'bottom'}
class:antiNav-noneFade={mask === 'none'} class:antiNav-bothFade={mask === 'both'}
> class:antiNav-noneFade={mask === 'none'}
<div bind:this={divBox} class="box" class:p-10={padding}> >
<slot /> <div bind:this={divBox} class="box" class:p-10={padding}>
<slot />
</div>
</div> </div>
<div bind:this={divBack} class="back" />
<div
bind:this={divBar}
class="bar"
/>
</div> </div>
<div bind:this={divBack} class="back" />
<style lang="scss"> <style lang="scss">
.scroller-container {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.scroll { .scroll {
flex-grow: 1; flex-grow: 1;
min-height: 0; min-height: 0;
@ -113,17 +139,34 @@
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
&::-webkit-scrollbar-track { margin: 0; } &::-webkit-scrollbar:vertical { width: 0; }
&::-webkit-scrollbar-thumb {
background-color: var(--theme-bg-accent-color);
&:hover { background-color: var(--theme-menu-divider); }
}
} }
.box { .box {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
} }
.bar {
visibility: hidden;
position: absolute;
top: 4px;
right: 4px;
width: 4px;
min-height: 2rem;
max-height: calc(100% - 8px);
background-color: var(--theme-button-bg-focused);
border-radius: .25rem;
opacity: .5;
cursor: pointer;
transition: width .1s, opacity .1s;
&:hover {
background-color: var(--theme-button-bg-focused);
width: 8px;
opacity: 1;
}
}
.back { .back {
visibility: hidden; visibility: hidden;
position: fixed; position: fixed;