mirror of
https://github.com/hcengineering/platform.git
synced 2024-11-23 05:53:09 +03:00
Update StatesBar (Safari fix)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
parent
aca81cedb0
commit
2307ab5eb5
@ -200,3 +200,66 @@
|
||||
}
|
||||
}
|
||||
.ac-column__list-item + .ac-column__list-item { margin-top: .75rem; }
|
||||
|
||||
/* StatesBar */
|
||||
.antiStatesBar {
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1 0;
|
||||
padding: 0.125rem 0;
|
||||
min-width: 0;
|
||||
// width: auto;
|
||||
|
||||
&::-webkit-scrollbar:horizontal { height: 0.125rem; }
|
||||
&::-webkit-scrollbar-track { margin: 0.25rem; }
|
||||
&::-webkit-scrollbar-thumb { background-color: var(--theme-bg-accent-color); }
|
||||
|
||||
&.mask-none { mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 1); }
|
||||
&.mask-left { mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1rem); }
|
||||
&.mask-right { mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1rem); }
|
||||
&.mask-both {
|
||||
mask-image: linear-gradient(
|
||||
to right,
|
||||
rgba(0, 0, 0, 0) 0,
|
||||
rgba(0, 0, 0, 1) 1rem,
|
||||
rgba(0, 0, 0, 1) calc(100% - 1rem),
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.asb-bar {
|
||||
flex: 1 0 auto;
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
// max-width: 100%;
|
||||
width: auto;
|
||||
// height: auto;
|
||||
|
||||
&__back {
|
||||
width: auto;
|
||||
height: 2.25rem;
|
||||
}
|
||||
&__element {
|
||||
fill: var(--theme-button-bg-enabled);
|
||||
stroke: var(--theme-bg-accent-color);
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
&__selected { fill: red; }
|
||||
|
||||
.asb-label__container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
min-width: 0;
|
||||
width: calc(100% - 2rem);
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
let maskLeft: boolean = false
|
||||
let maskRight: boolean = false
|
||||
let mask: 'left' | 'right' | 'both' | 'none' = 'none'
|
||||
let stepStyle = (gap === 'small') ? 'step-lr25' : 'step-lr75'
|
||||
let stepStyle = (gap === 'small') ? 'safari-gap-1' : 'safari-gap-2'
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
@ -87,9 +87,12 @@
|
||||
}
|
||||
})
|
||||
onDestroy(() => { if (div) div.removeEventListener('scroll', checkMask) })
|
||||
afterUpdate(() => {
|
||||
console.log('!!!!!!!!!!!!!!!!!!!!!!! UPDATED')
|
||||
})
|
||||
</script>
|
||||
|
||||
<div bind:this={div} class="flex-row-center statusesbar-container mask-{mask} {stepStyle}">
|
||||
<div bind:this={div} class="antiStatesBar mask-{mask} {stepStyle}">
|
||||
{#each states as item, i (item._id)}
|
||||
<StatesBarElement
|
||||
label={item.title}
|
||||
@ -102,40 +105,3 @@
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.statusesbar-container {
|
||||
overflow-x: auto;
|
||||
padding: 0.125rem 0;
|
||||
width: auto;
|
||||
|
||||
&::-webkit-scrollbar:horizontal {
|
||||
height: 0.125rem;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
margin: 0.25rem;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--theme-bg-accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
.mask-left {
|
||||
mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1rem);
|
||||
}
|
||||
.mask-right {
|
||||
mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1rem);
|
||||
}
|
||||
.mask-both {
|
||||
mask-image: linear-gradient(
|
||||
to right,
|
||||
rgba(0, 0, 0, 0) 0,
|
||||
rgba(0, 0, 0, 1) 1rem,
|
||||
rgba(0, 0, 0, 1) calc(100% - 1rem),
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
}
|
||||
.mask-none {
|
||||
mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -25,79 +25,66 @@
|
||||
|
||||
let lenght: number = 0
|
||||
let text: HTMLElement
|
||||
let divBar: HTMLElement
|
||||
let svgBack: SVGElement
|
||||
|
||||
// $: if (text) lenght = (text.clientWidth + 20 > 300) ? 300 : text.clientWidth + 20
|
||||
// $: if (lenght) {
|
||||
// if (position === 'start') d = `M0,8c0-4.4,3.6-8,8-8h2h${lenght}h1.8c0.8,0,1.6,0.5,1.9,1.3l6.1,16c0.2,0.5,0.2,1,0,1.4l-6.1,16c-0.3,0.8-1,1.3-1.9,1.3L${lenght + 10},36H10 l-2,0c-4.4,0-8-3.6-8-8V8z`
|
||||
// else if (position === 'middle') d = `M6.1,17.3l-6-15.9C-0.2,0.7,0.3,0,1,0h9h${lenght}h1.8c0.8,0,1.6,0.5,1.9,1.3l6.1,16c0.2,0.5,0.2,1,0,1.4l-6.1,16 c-0.3,0.8-1,1.3-1.9,1.3H${lenght + 10}H10H1c-0.7,0-1.2-0.7-0.9-1.4l6-15.9C6.3,18.3,6.3,17.7,6.1,17.3z`
|
||||
// else if (position === 'end') d = `M6.1,17.3l-6-15.9C-0.2,0.7,0.3,0,1,0h9h${lenght}h2c4.4,0,8,3.6,8,8v20c0,4.4-3.6,8-8,8h-2H10H1 c-0.7,0-1.2-0.7-0.9-1.4l6-15.9C6.3,18.3,6.3,17.7,6.1,17.3z`
|
||||
// else d = `M0,8c0-4.4,3.6-8,8-8l2,0h${lenght}l2,0c4.4,0,8,3.6,8,8v20c0,4.4-3.6,8-8,8h-2H10H8c-4.4,0-8-3.6-8-8V8z`
|
||||
// }
|
||||
|
||||
afterUpdate(() => {
|
||||
if (text) lenght = (text.clientWidth + 20 > 300) ? 300 : text.clientWidth + 20
|
||||
if (divBar) divBar.style.width = lenght + 20 + 'px'
|
||||
if (svgBack) svgBack.style.width = lenght + 20 + 'px'
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="hidden-text" bind:this={text}>{label}</div>
|
||||
{#if lenght > 0}
|
||||
<div
|
||||
class="statuses-bar"
|
||||
bind:this={divBar}
|
||||
class="asb-bar"
|
||||
class:cursor-pointer={!selected}
|
||||
class:cursor-default={selected}
|
||||
on:click|stopPropagation
|
||||
>
|
||||
<div class="label-container"><div class="overflow-label">{label}</div></div>
|
||||
<svg class="statuses-bar__back" viewBox="0 0 {lenght + 20} 36" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
{#if position === 'start'}
|
||||
<svg
|
||||
bind:this={svgBack}
|
||||
class="asb-bar__back"
|
||||
viewBox="0 0 {lenght + 20} 36"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
{#if (position === 'start') }
|
||||
<path
|
||||
class="statuses-bar__{selected ? 'selected' : 'element'}"
|
||||
class="asb-bar__{selected ? 'selected' : 'element'}"
|
||||
style={selected ? `fill: ${color};` : ''}
|
||||
d="M0,8c0-4.4,3.6-8,8-8h2h{lenght}h1.8c0.8,0,1.6,0.5,1.9,1.3l6.1,16c0.2,0.5,0.2,1,0,1.4l-6.1,16c-0.3,0.8-1,1.3-1.9,1.3L{lenght + 10},36H10 l-2,0c-4.4,0-8-3.6-8-8V8z"
|
||||
/>
|
||||
{:else if position === 'middle'}
|
||||
{:else if (position === 'middle') }
|
||||
<path
|
||||
class="statuses-bar__{selected ? 'selected' : 'element'}"
|
||||
class="asb-bar__{selected ? 'selected' : 'element'}"
|
||||
style={selected ? `fill: ${color};` : ''}
|
||||
d="M6.1,17.3l-6-15.9C-0.2,0.7,0.3,0,1,0h9h{lenght}h1.8c0.8,0,1.6,0.5,1.9,1.3l6.1,16c0.2,0.5,0.2,1,0,1.4l-6.1,16 c-0.3,0.8-1,1.3-1.9,1.3H{lenght + 10}H10H1c-0.7,0-1.2-0.7-0.9-1.4l6-15.9C6.3,18.3,6.3,17.7,6.1,17.3z"
|
||||
/>
|
||||
{:else if position === 'end'}
|
||||
{:else if (position === 'end') }
|
||||
<path
|
||||
class="statuses-bar__{selected ? 'selected' : 'element'}"
|
||||
class="asb-bar__{selected ? 'selected' : 'element'}"
|
||||
style={selected ? `fill: ${color};` : ''}
|
||||
d="M6.1,17.3l-6-15.9C-0.2,0.7,0.3,0,1,0h9h{lenght}h2c4.4,0,8,3.6,8,8v20c0,4.4-3.6,8-8,8h-2H10H1 c-0.7,0-1.2-0.7-0.9-1.4l6-15.9C6.3,18.3,6.3,17.7,6.1,17.3z"
|
||||
/>
|
||||
{:else}
|
||||
<path
|
||||
class="statuses-bar__{selected ? 'selected' : 'element'}"
|
||||
class="asb-bar__{selected ? 'selected' : 'element'}"
|
||||
style={selected ? `fill: ${color};` : ''}
|
||||
d="M0,8c0-4.4,3.6-8,8-8l2,0h{lenght}l2,0c4.4,0,8,3.6,8,8v20c0,4.4-3.6,8-8,8h-2H10H8c-4.4,0-8-3.6-8-8V8z"
|
||||
/>
|
||||
{/if}
|
||||
</svg>
|
||||
<div class="asb-label__container"><div class="overflow-label">{label}</div></div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.statuses-bar {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
height: min-content;
|
||||
|
||||
&__back {
|
||||
height: 2.25rem;
|
||||
}
|
||||
&__element {
|
||||
fill: var(--theme-button-bg-enabled);
|
||||
stroke: var(--theme-bg-accent-color);
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
&__selected { fill: red; }
|
||||
|
||||
.label-container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
min-width: 0;
|
||||
width: calc(100% - 2rem);
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user