wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-16 13:21:57 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

Merge pull request #1001 from hcengineering/fix-statesbar-ok

Browse Source 
Update StatesBar (Safari fix). CSS optimize.
This commit is contained in:
Andrey Sobolev 2022-02-14 16:19:43 +07:00 committed by GitHub
commit 0df891154a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 89 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/theme/styles/_layouts.scss
View File

@ -198,7 +198,7 @@ p:last-child { margin-block-end: 0; }
.icon { transform: translateY(.2rem); }
}
.safari-gap-1 {
.gap-1 {
& > * { margin-right: .25rem; }
& > *:last-child { margin-right: 0; }
&.reverse {
@ -207,7 +207,7 @@ p:last-child { margin-block-end: 0; }
& > :first-child { margin-right: 0; }
}
}
.safari-gap-2 {
.gap-2 {
& > * { margin-right: .5rem; }
& > *:last-child { margin-right: 0; }
&.reverse {

60
packages/theme/styles/components.scss
View File

@ -200,3 +200,63 @@
}
}
.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;
&::-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;
width: 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%;
}
}
}

2
plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte
View File

@ -47,7 +47,7 @@
<div class:editing>
{#if edit}
<ReferenceInput bind:this={refInput} content={value.message} on:message={onMessage} showSend={false}/>
<div class='flex-row-reverse safari-gap-2 reverse'>
<div class='flex-row-reverse gap-2 reverse'>
<Button label={chunter.string.EditCancel} on:click={() => {
dispatch('close', false)
}}/>

4
plugins/contact-resources/src/components/ChannelsView.svelte
View File

@ -100,8 +100,8 @@
<div
bind:this={divHTML}
class="flex-row-center"
class:safari-gap-1={size === 'small'}
class:safari-gap-2={size !== 'small'}
class:gap-1={size === 'small'}
class:gap-2={size !== 'small'}
class:reverse
>
{#each displayItems as item}

43
plugins/task-resources/src/components/state/StatesBar.svelte
View File

@ -19,7 +19,7 @@
import { createQuery } from '@anticrm/presentation'
import task, { SpaceWithStates, State } from '@anticrm/task'
import { getPlatformColor } from '@anticrm/ui'
import { createEventDispatcher, onDestroy, onMount, afterUpdate } from 'svelte'
import { createEventDispatcher, onDestroy, onMount } from 'svelte'
import StatesBarElement from './StatesBarElement.svelte'
import type { StatesBarPosition } from '../..'
@ -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') ? 'gap-1' : 'gap-2'
const dispatch = createEventDispatcher()
@ -89,7 +89,7 @@
onDestroy(() => { if (div) div.removeEventListener('scroll', checkMask) })
</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 +102,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>

63
plugins/task-resources/src/components/state/StatesBarElement.svelte
View File

@ -25,79 +25,58 @@
let lenght: number = 0
let text: HTMLElement
let divBar: HTMLElement
let svgBack: SVGElement
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>