mirror of
https://github.com/hcengineering/platform.git
synced 2025-04-13 03:40:48 +00:00
Add StatusesBar (#691)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
2bbf7fb2ed
commit
602ac23c26
@ -45,6 +45,8 @@
|
||||
--primary-color-skyblue: #93CAF3;
|
||||
--primary-color-pink: #FA8DA1;
|
||||
|
||||
--dark-turquoise-01: #45AEA3;
|
||||
|
||||
--highlight-red: #F96E50;
|
||||
}
|
||||
|
||||
|
||||
@ -183,6 +183,7 @@ p:last-child { margin-block-end: 0; }
|
||||
}
|
||||
|
||||
/* Margins & Paddings */
|
||||
.step-lr25 + .step-lr25 { margin-left: .25rem; }
|
||||
.step-lr75 + .step-lr75 { margin-left: .75rem; }
|
||||
.step-tb75 + .step-tb75 { margin-top: .75rem; }
|
||||
|
||||
@ -397,33 +398,3 @@ a.no-line {
|
||||
.border-primary-button { border-color: var(--primary-button-border); }
|
||||
.border-button-enabled { border: 1px solid var(--theme-button-border-enabled); }
|
||||
.bottom-divider { border-bottom: 1px solid var(--theme-menu-divider); }
|
||||
|
||||
/* Popups */
|
||||
// .popup-top-right::after, .popup-top-right::before, .popup-top-left::after, .popup-top-left::before, .popup-bottom-right::after, .popup-bottom-right::before, .popup-bottom-left::after, .popup-bottom-left::before {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// width: .625rem;
|
||||
// height: 1.75rem;
|
||||
// clip-path: path('M0.6,8.3l2.7,2.4C4.4,11.8,5,12.8,5,14C5,13.1,5,0.9,5,0c0,1.2-0.6,2.2-1.7,3.2L0.6,5.7 c-0.7,0.6-0.8,1.7-0.2,2.5C0.5,8.2,0.5,8.3,0.6,8.3z');
|
||||
// }
|
||||
|
||||
// .popup-top-right::after, .popup-top-right::before, .popup-top-left::after, .popup-top-left::before
|
||||
// { transform: rotate(-90deg); }
|
||||
// .popup-bottom-right::after, .popup-bottom-right::before, .popup-bottom-left::after, .popup-bottom-left::before
|
||||
// { transform: rotate(90deg); }
|
||||
// .popup-top-right::after, .popup-top-left::after, .popup-bottom-right::after, .popup-bottom-left::after
|
||||
// { background-color: var(--theme-button-bg-hovered); }
|
||||
// .popup-top-right::before, .popup-top-left::before, .popup-bottom-right::before, .popup-bottom-left::before
|
||||
// { background-color: var(--theme-button-bg-hovered); box-shadow: inset 0 0 0 2rem var(--theme-button-border-enabled); }
|
||||
// .popup-top-right::after, .popup-top-left::after
|
||||
// { bottom: -.875rem; }
|
||||
// .popup-top-right::before, .popup-top-left::before
|
||||
// { bottom: -.9375rem; }
|
||||
// .popup-bottom-right::after, .popup-bottom-left::after
|
||||
// { top: -.875rem; }
|
||||
// .popup-bottom-right::before, .popup-bottom-left::before
|
||||
// { top: -.9375rem; }
|
||||
// .popup-top-left::after, .popup-top-left::before, .popup-bottom-left::after, .popup-bottom-left::before
|
||||
// { right: 1.5rem; }
|
||||
// .popup-top-right::after, .popup-top-right::before, .popup-bottom-right::after, .popup-bottom-right::before
|
||||
// { left: 1.5rem; }
|
||||
|
||||
70
packages/ui/src/components/StatusesBar.svelte
Normal file
70
packages/ui/src/components/StatusesBar.svelte
Normal file
@ -0,0 +1,70 @@
|
||||
<!--
|
||||
// Copyright © 2020 Anticrm Platform Contributors.
|
||||
//
|
||||
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License. You may
|
||||
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
//
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import { IntlString } from '@anticrm/platform'
|
||||
import Label from './Label.svelte'
|
||||
import StatusesBarElement from './StatusesBarElement.svelte'
|
||||
|
||||
export let items: IntlString[]
|
||||
= ['New' as IntlString, 'In progress' as IntlString, 'Interview' as IntlString, 'Interview' as IntlString, 'Final' as IntlString]
|
||||
export let selected: IntlString | undefined = undefined
|
||||
</script>
|
||||
|
||||
<div class="flex-row-center statusesbar-container">
|
||||
{#each items as item, i}
|
||||
<div
|
||||
class="flex-row-center cursor-pointer step-lr25"
|
||||
class:selected={item === selected}
|
||||
on:click={() => {
|
||||
if (item !== selected) selected = item
|
||||
}}
|
||||
>
|
||||
<StatusesBarElement side={'left'} kind={i ? 'arrow' : 'round'} selected={item === selected} />
|
||||
<div class="flex-row-center overflow-label label">
|
||||
<Label label={item} />
|
||||
</div>
|
||||
<StatusesBarElement side={'right'} kind={i < items.length - 1 ? 'arrow' : 'round'} selected={item === selected} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.statusesbar-container {
|
||||
overflow-x: auto;
|
||||
padding: .125rem 0;
|
||||
&::-webkit-scrollbar:horizontal { height: .125rem; }
|
||||
&::-webkit-scrollbar-track { margin: .25rem; }
|
||||
&::-webkit-scrollbar-thumb { background-color: var(--theme-bg-accent-color); }
|
||||
}
|
||||
.label {
|
||||
padding: .5rem 2rem;
|
||||
height: 2.25rem;
|
||||
max-height: 2.25rem;
|
||||
color: var(--theme-caption-color);
|
||||
background-color: var(--theme-button-bg-enabled);
|
||||
border-top: 1px solid var(--theme-button-border-enabled);
|
||||
border-bottom: 1px solid var(--theme-button-border-enabled);
|
||||
}
|
||||
|
||||
.selected {
|
||||
cursor: auto;
|
||||
|
||||
.label {
|
||||
background-color: var(--dark-turquoise-01);
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
52
packages/ui/src/components/StatusesBarElement.svelte
Normal file
52
packages/ui/src/components/StatusesBarElement.svelte
Normal file
@ -0,0 +1,52 @@
|
||||
<!--
|
||||
// Copyright © 2020, 2021 Anticrm Platform Contributors.
|
||||
// Copyright © 2021 Hardcore Engineering Inc.
|
||||
//
|
||||
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License. You may
|
||||
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
//
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
export let side: 'left' | 'right'
|
||||
export let kind: 'round' | 'arrow'
|
||||
export let selected: boolean = false
|
||||
</script>
|
||||
|
||||
<svg
|
||||
width=".5rem" height="2.25rem" viewBox="0 0 8 36"
|
||||
class:selected
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
{#if side === 'left' && kind === 'arrow'}
|
||||
<path class="bg" d="M1,0C0.3,0-0.2,0.7,0.1,1.4l6,15.9c0.2,0.5,0.2,1,0,1.4l-6,15.9C-0.2,35.3,0.3,36,1,36h7V0H1z"/>
|
||||
<path class="border" d="M1,35l6-15.9c0.3-0.7,0.3-1.4,0-2.1L1,1h7V0H1C0.7,0,0.4,0.2,0.2,0.4C0,0.7-0.1,1,0.1,1.4 l6,15.9c0.2,0.5,0.2,1,0,1.4l-6,15.9C-0.1,35,0,35.3,0.2,35.6S0.7,36,1,36h7v-1H1z"/>
|
||||
{:else if side === 'left' && kind === 'round'}
|
||||
<path class="bg" d="M0,8v10v10c0,4.4,3.6,8,8,8V0C3.6,0,0,3.6,0,8z"/>
|
||||
<path class="border" d="M1,28V8c0-3.9,3.1-7,7-7V0C3.6,0,0,3.6,0,8v20c0,4.4,3.6,8,8,8v-1C4.1,35,1,31.9,1,28z"/>
|
||||
{:else if side === 'right' && kind === 'arrow'}
|
||||
<path class="bg" d="M1.8,1.3C1.5,0.5,0.8,0,0,0v36c0.8,0,1.5-0.5,1.8-1.3l6.1-16c0.2-0.5,0.2-1,0-1.4L1.8,1.3z"/>
|
||||
<path class="border" d="M1.8,1.3L1.8,1.3L1.8,1.3c0,0-0.1-0.2-0.1-0.3L1.6,0.8C1.2,0.3,0.6,0,0,0v1 c0.4,0,0.7,0.3,0.9,0.6l6.1,16c0.1,0.2,0.1,0.5,0,0.7l-6.1,16C0.7,34.7,0.4,35,0,35v1c0.8,0,1.5-0.5,1.8-1.3l6.1-16 c0.2-0.5,0.2-1,0-1.4L1.8,1.3z"/>
|
||||
{:else if side === 'right' && kind === 'round'}
|
||||
<path class="bg" d="M0,0v36c4.4,0,8-3.6,8-8V8C8,3.6,4.4,0,0,0z"/>
|
||||
<path class="border" d="M0,0v1c3.9,0,7,3.1,7,7v20c0,3.9-3.1,7-7,7v1c4.4,0,8-3.6,8-8V8C8,3.6,4.4,0,0,0z"/>
|
||||
{:else}
|
||||
<rect x={0} y={0} width={'100%'} height={'100%'} fill={'red'} opacity={.5} />
|
||||
{/if}
|
||||
</svg>
|
||||
|
||||
<style lang="scss">
|
||||
.bg { fill: var(--theme-button-bg-enabled); }
|
||||
.border { fill: var(--theme-button-border-enabled); }
|
||||
.selected {
|
||||
.bg { fill: var(--dark-turquoise-01); }
|
||||
.border { fill: transparent; }
|
||||
}
|
||||
</style>
|
||||
@ -61,6 +61,7 @@ export { default as Link } from './components/Link.svelte'
|
||||
export { default as TimeSince } from './components/TimeSince.svelte'
|
||||
export { default as Dropdown } from './components/Dropdown.svelte'
|
||||
export { default as DumbDropdown } from './components/DumbDropdown.svelte'
|
||||
export { default as StatusesBar } from './components/StatusesBar.svelte'
|
||||
|
||||
export { default as IconAdd } from './components/icons/Add.svelte'
|
||||
export { default as IconClose } from './components/icons/Close.svelte'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user