mirror of
https://github.com/hcengineering/platform.git
synced 2024-11-23 05:53:09 +03:00
Update UI, light theme. (#564)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
cee5bbf9b7
commit
f7dad3b0b4
@ -57,9 +57,7 @@
|
||||
{:else}
|
||||
<div class="unionSection">
|
||||
<div class="flex-row-center header">
|
||||
<div class="content-color">
|
||||
<Icon {icon} size={'large'} />
|
||||
</div>
|
||||
<div class="flex-grow ml-4 flex-col">
|
||||
<div class="fs-title">{title}</div>
|
||||
<div class="small-text content-dark-color">Candidate pool name</div>
|
||||
@ -92,7 +90,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 32px - 1.25rem);
|
||||
background: var(--theme-dialog-bg);
|
||||
background: var(--theme-bg-color);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: 0px 44px 154px rgba(0, 0, 0, .75);
|
||||
backdrop-filter: blur(15px);
|
||||
@ -102,14 +100,14 @@
|
||||
padding: 0 2rem 0 2.5rem;
|
||||
height: 4rem;
|
||||
color: var(--theme-content-accent-color);
|
||||
border-bottom: 1px solid var(--theme-dialog-divider);
|
||||
border-bottom: 1px solid var(--theme-zone-bg);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
flex-shrink: 0;
|
||||
padding: 0 2rem;
|
||||
height: 3.5rem;
|
||||
border-bottom: 1px solid var(--theme-dialog-divider);
|
||||
border-bottom: 1px solid var(--theme-zone-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -134,19 +132,19 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
.leftSection {
|
||||
border-right: 1px solid var(--theme-dialog-divider);
|
||||
border-right: 1px solid var(--theme-card-divider);
|
||||
.scroll-container {
|
||||
overflow: auto;
|
||||
margin: 2rem 2rem 1.5rem;
|
||||
margin: 2.5rem 2rem 1.5rem;
|
||||
.content {
|
||||
flex-shrink: 0;
|
||||
margin: .5rem .5rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.rightSection {
|
||||
background-color: transparent;
|
||||
}
|
||||
// .rightSection {
|
||||
// background-color: transparent;
|
||||
// }
|
||||
|
||||
.tools {
|
||||
position: absolute;
|
||||
|
||||
@ -36,31 +36,19 @@
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../../../packages/theme/styles/mixins.scss';
|
||||
|
||||
.avatar-container {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: rgba(196, 196, 204, .2);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
|
||||
img { object-fit: cover; }
|
||||
|
||||
&.no-img {
|
||||
img {
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--theme-avatar-border);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
@include bg-layer(var(--theme-avatar-hover), .5);
|
||||
border-radius: 50%;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
@include bg-layer(var(--theme-avatar-bg), .1);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
&.no-img { border-color: transparent; }
|
||||
}
|
||||
|
||||
.ava-x-small {
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
<form class="card-container" on:submit|preventDefault={ () => {} }>
|
||||
<div class="card-bg" />
|
||||
<div class="flex-between header">
|
||||
<div class="overflow-label label"><Label {label} /></div>
|
||||
<div class="overflow-label fs-title"><Label {label} /></div>
|
||||
{#if $$slots.error}
|
||||
<div class="flex-grow error">
|
||||
<slot name="error" />
|
||||
@ -62,9 +62,9 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 20rem;
|
||||
min-width: 20rem;
|
||||
max-width: 20rem;
|
||||
width: 21.25rem;
|
||||
min-width: 21.25rem;
|
||||
max-width: 21.25rem;
|
||||
border-radius: 1.25rem;
|
||||
|
||||
.header {
|
||||
@ -72,12 +72,6 @@
|
||||
flex-shrink: 0;
|
||||
padding: 1.75rem;
|
||||
|
||||
.label {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
|
||||
.error {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
@ -118,7 +112,6 @@
|
||||
column-gap: .75rem;
|
||||
padding: 1rem 1.75rem 1.75rem;
|
||||
height: 5.25rem;
|
||||
mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem);
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 1.25rem 1.25rem;
|
||||
}
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
import type { Channel, ChannelProvider } from '@anticrm/contact'
|
||||
import { getClient } from '..'
|
||||
|
||||
import type { AnyComponent } from '@anticrm/ui'
|
||||
import { Tooltip, CircleButton } from '@anticrm/ui'
|
||||
import ChannelsPopup from './ChannelsPopup.svelte'
|
||||
|
||||
|
||||
@ -49,9 +49,9 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 20rem;
|
||||
min-width: 20rem;
|
||||
max-width: 20rem;
|
||||
width: 21.25rem;
|
||||
min-width: 21.25rem;
|
||||
max-width: 21.25rem;
|
||||
border-radius: 1.25rem;
|
||||
|
||||
.header {
|
||||
@ -95,7 +95,6 @@
|
||||
column-gap: .75rem;
|
||||
padding: 1rem 1.75rem 1.75rem;
|
||||
height: 5.25rem;
|
||||
mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem);
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 1.25rem 1.25rem;
|
||||
}
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="flex-col spaceselect-container"
|
||||
<div class="flex-col cursor-pointer"
|
||||
bind:this={btn}
|
||||
on:click|preventDefault={() => {
|
||||
showPopup(SpacesPopup, { _class }, btn, (result) => {
|
||||
@ -58,9 +58,9 @@
|
||||
}}
|
||||
>
|
||||
<div class="overflow-label label"><Label {label} /></div>
|
||||
<div class="flex-row-center space" class:selected={selected}>
|
||||
<span class="icon"><IconFolder size={'small'} /></span>
|
||||
<span class="overflow-label">
|
||||
<div class="flex-row-center space">
|
||||
<span class="scale-75 mr-1"><IconFolder size={'small'} /></span>
|
||||
<span class="overflow-label" class:caption-color={selected} class:content-dark-color={!selected}>
|
||||
{#if selected}
|
||||
{selected.name}
|
||||
{:else}
|
||||
@ -71,23 +71,10 @@
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.spaceselect-container {
|
||||
cursor: pointer;
|
||||
.label {
|
||||
margin-bottom: .125rem;
|
||||
font-weight: 500;
|
||||
font-size: .75rem;
|
||||
color: var(--theme-content-accent-color);
|
||||
}
|
||||
.space {
|
||||
opacity: .3;
|
||||
|
||||
.icon {
|
||||
transform-origin: center center;
|
||||
transform: scale(.75);
|
||||
margin-right: .25rem;
|
||||
}
|
||||
&.selected { opacity: 1; }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -95,7 +95,7 @@
|
||||
|
||||
<div class="selectUser">
|
||||
<div class="title"><Label label={title} /></div>
|
||||
<div class="caption-color">
|
||||
<div class:caption-color={selected} class:content-dark-color={!selected}>
|
||||
{#if selected}{getName(selected)}{:else}<Label label={'Not selected'} />{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -28,7 +28,6 @@
|
||||
|
||||
<style lang="scss">
|
||||
.svg-avatar {
|
||||
fill: var(--theme-caption-color);
|
||||
.op { opacity: .05; }
|
||||
}
|
||||
.x-small {
|
||||
|
||||
@ -27,18 +27,6 @@
|
||||
|
||||
--duotone-color: rgba(126, 134, 158, .25);
|
||||
|
||||
--trans-primary-button-color: #fff;
|
||||
--trans-primary-button-bg: #4474F6;
|
||||
--trans-primary-button-border: transparent;
|
||||
--trans-primary-button-bg-hovered: #2A5FF6;
|
||||
--trans-primary-button-border-hovered: transparent;
|
||||
|
||||
--trans-button-color: #fff;
|
||||
--trans-button-bg: transparent;
|
||||
--trans-button-border: rgba(255, 255, 255, .2);
|
||||
--trans-button-bg-hovered: rgba(255, 255, 255, .05);
|
||||
--trans-button-border-hovered: rgba(255, 255, 255, .25);
|
||||
|
||||
--system-error-color: #EE7A7A;
|
||||
--system-error-60-color: rgba(238, 122, 122, .6); // #EE7A7A / 60%
|
||||
|
||||
@ -47,6 +35,8 @@
|
||||
--activity-status-busy: #FCC500;
|
||||
--activity-status-away: #9099A2;
|
||||
|
||||
--grayscale-grey-03: #77818E;
|
||||
|
||||
--primary-color-purple-01: #4B38BD;
|
||||
--primary-color-purple-02: #6552DB;
|
||||
--primary-color-purple-03: #9D92C4;
|
||||
@ -66,12 +56,12 @@
|
||||
--theme-menu-selection: #1D1D23;
|
||||
--theme-menu-divider: rgba(255, 255, 255, .05);
|
||||
--theme-scroll-bar: #2C2C34;
|
||||
--theme-dialog-bg: rgba(31, 31, 37, .8);
|
||||
// --theme-dialog-bg: rgba(31, 31, 37, .8);
|
||||
--theme-dialog-accent: rgba(255, 255, 255, .03);
|
||||
--theme-dialog-divider: rgba(255, 255, 255, .1);
|
||||
--theme-dialog-spec: rgba(47, 47, 53, .6);
|
||||
--theme-dialog-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75);
|
||||
--theme-border-modal: rgba(0, 0, 0, 0.2);
|
||||
--theme-border-modal: rgba(0, 0, 0, .2);
|
||||
--theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
|
||||
--theme-chat-divider: rgb(36, 36, 41);
|
||||
--theme-incoming-msg: rgba(67, 67, 72, .3);
|
||||
@ -79,14 +69,13 @@
|
||||
|
||||
--theme-card-bg: rgba(222, 222, 240, .2);
|
||||
--theme-card-bg-dark: rgba(222, 222, 240, .1);
|
||||
--theme-card-bg-accent: rgba(255, 255, 255, .04);
|
||||
--theme-card-divider: rgba(255, 255, 255, .1);
|
||||
--theme-card-shadow: 0px 34px 74px rgba(0, 0, 0, 0.55);
|
||||
--theme-avatar-bg: #E0DAD5;
|
||||
--theme-avatar-hover: rgba(195, 195, 204, .2);
|
||||
--theme-card-shadow: 0px 15px 60px rgba(24, 25, 28, .2);
|
||||
--theme-avatar-border: rgba(255, 255, 255, .1);
|
||||
--theme-avatar-shadow: drop-shadow(0px 14px 44px rgba(74, 67, 64, .8));
|
||||
--theme-msgbox-bg: rgba(170, 170, 191, .25);
|
||||
--theme-zone-bg: rgba(255, 255, 255, .05);
|
||||
--theme-zone-border: rgba(255, 255, 255, .2);
|
||||
--theme-zone-border-lite: rgba(255, 255, 255, .16);
|
||||
|
||||
--theme-bg-accent-color: rgba(255, 255, 255, .03);
|
||||
--theme-bg-accent-hover: rgba(255, 255, 255, .06);
|
||||
@ -95,7 +84,7 @@
|
||||
--theme-bg-focused-border: rgba(255, 255, 255, .4);
|
||||
--theme-bg-accent-error: rgba(251, 158, 158, .06);
|
||||
--theme-on-color: #4474F6;
|
||||
--theme-off-color: #77818E;
|
||||
--theme-off-color: #2A2A30;
|
||||
--theme-bg-check: #F2F2F2;
|
||||
--theme-tooltip-color: #2F2F34;
|
||||
--theme-showmore-color: #484850;
|
||||
@ -112,6 +101,10 @@
|
||||
--theme-button-border-disabled: rgba(255, 255, 255, .06);
|
||||
--theme-button-border-focused: rgba(255, 255, 255, .4);
|
||||
--theme-button-border-error: rgba(205, 104, 104, .1);
|
||||
--theme-button-trans-primary-disabled: rgba(255, 255, 255, .1);
|
||||
--theme-circle-select: #1F1F25;
|
||||
--theme-circle-trans: rgba(31, 31, 37, .3);
|
||||
--theme-circle-border: rgba(255, 255, 255, .2);
|
||||
|
||||
--theme-table-bg-color: rgba(255, 255, 255, .02);
|
||||
--theme-table-bg-hover: rgba(255, 255, 255, .04);
|
||||
@ -144,12 +137,12 @@
|
||||
--theme-menu-selection: #37363F;
|
||||
--theme-menu-divider: rgba(255, 255, 255, .05);
|
||||
--theme-scroll-bar: #494852;
|
||||
--theme-dialog-bg: rgba(31, 31, 37, .8);
|
||||
// --theme-dialog-bg: rgba(31, 31, 37, .8);
|
||||
--theme-dialog-accent: rgba(255, 255, 255, .03);
|
||||
--theme-dialog-divider: rgba(255, 255, 255, .1);
|
||||
--theme-dialog-spec: rgba(47, 47, 53, .6);
|
||||
--theme-dialog-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75);
|
||||
--theme-border-modal: rgba(0, 0, 0, 0.2);
|
||||
--theme-border-modal: rgba(0, 0, 0, .2);
|
||||
--theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
|
||||
--theme-chat-divider: rgb(66, 65, 76);
|
||||
--theme-incoming-msg: rgba(67, 67, 72, .3);
|
||||
@ -157,14 +150,13 @@
|
||||
|
||||
--theme-card-bg: rgba(222, 222, 240, .2);
|
||||
--theme-card-bg-dark: rgba(222, 222, 240, .1);
|
||||
--theme-card-bg-accent: rgba(255, 255, 255, .04);
|
||||
--theme-card-divider: rgba(255, 255, 255, .1);
|
||||
--theme-card-shadow: 0px 34px 74px rgba(0, 0, 0, 0.55);
|
||||
--theme-avatar-bg: #E0DAD5;
|
||||
--theme-avatar-hover: radial-gradient(86.62% 86.62% at 50% 13.38%, rgba(196, 196, 204, 0.4) 0%, rgba(137, 140, 150, 0.4) 100%);
|
||||
--theme-avatar-border: rgba(255, 255, 255, .1);
|
||||
--theme-avatar-shadow: drop-shadow(0px 14px 44px rgba(74, 67, 64, .8));
|
||||
--theme-msgbox-bg: rgba(170, 170, 191, .25);
|
||||
--theme-zone-bg: rgba(255, 255, 255, .05);
|
||||
--theme-zone-border: rgba(255, 255, 255, .2);
|
||||
--theme-zone-border-lite: rgba(255, 255, 255, .16);
|
||||
|
||||
--theme-bg-accent-color: rgba(255, 255, 255, .03);
|
||||
--theme-bg-accent-hover: rgba(255, 255, 255, .06);
|
||||
@ -173,7 +165,7 @@
|
||||
--theme-bg-focused-border: rgba(255, 255, 255, .4);
|
||||
--theme-bg-accent-error: rgba(251, 158, 158, .06);
|
||||
--theme-on-color: #4474F6;
|
||||
--theme-off-color: #77818E;
|
||||
--theme-off-color: #494853;
|
||||
--theme-bg-check: #F2F2F2;
|
||||
--theme-tooltip-color: #4D4C58;
|
||||
--theme-showmore-color: #484850;
|
||||
@ -190,6 +182,10 @@
|
||||
--theme-button-border-disabled: rgba(255, 255, 255, .06);
|
||||
--theme-button-border-focused: rgba(255, 255, 255, .4);
|
||||
--theme-button-border-error: rgba(205, 104, 104, .1);
|
||||
--theme-button-trans-primary-disabled: rgba(255, 255, 255, .1);
|
||||
--theme-circle-select: #3F3E4A;
|
||||
--theme-circle-trans: rgba(31, 31, 37, .3);
|
||||
--theme-circle-border: rgba(255, 255, 255, .2);
|
||||
|
||||
--theme-table-bg-color: rgba(255, 255, 255, .02);
|
||||
--theme-table-bg-hover: rgba(255, 255, 255, .04);
|
||||
@ -221,27 +217,26 @@
|
||||
--theme-menu-selection: #DBDBDB;
|
||||
--theme-menu-divider: rgba(0, 0, 0, .08);
|
||||
--theme-scroll-bar: #CBCBCB;
|
||||
--theme-dialog-bg: rgba(255, 255, 255, .4);
|
||||
// --theme-dialog-bg: rgba(255, 255, 255, .4);
|
||||
--theme-dialog-accent: rgba(31, 33, 43, .03);
|
||||
--theme-dialog-divider: rgba(31, 33, 43, .06);
|
||||
--theme-dialog-spec: rgba(47, 47, 53, .6);
|
||||
--theme-dialog-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75);
|
||||
--theme-border-modal: rgba(0, 0, 0, 0.2);
|
||||
--theme-border-modal: rgba(0, 0, 0, .2);
|
||||
--theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
|
||||
--theme-chat-divider: rgb(233, 233, 233);
|
||||
--theme-incoming-msg: rgba(67, 67, 72, .3);
|
||||
--theme-outcoming-msg: rgba(67, 67, 72, .6);
|
||||
|
||||
--theme-card-bg: rgba(255, 255, 255, .6);
|
||||
--theme-card-bg: #FFF;
|
||||
--theme-card-bg-dark: rgba(255, 255, 255, .3);
|
||||
--theme-card-bg-accent: rgba(0, 0, 0, .04);
|
||||
--theme-card-divider: rgba(0, 0, 0, .1);
|
||||
--theme-card-shadow: 0px 24px 74px rgba(100, 89, 89, .5);
|
||||
--theme-avatar-bg: #C4C4C4;
|
||||
--theme-avatar-hover: #EEEDED;
|
||||
--theme-avatar-border: rgba(255, 255, 255, .7);
|
||||
--theme-avatar-shadow: drop-shadow(0px 14px 44px rgba(74, 67, 64, .8));
|
||||
--theme-avatar-border: transparent;
|
||||
--theme-msgbox-bg: rgba(170, 170, 191, .25);
|
||||
--theme-zone-bg: rgba(0, 0, 0, .05);
|
||||
--theme-zone-border: rgba(0, 0, 0, .2);
|
||||
--theme-zone-border-lite: rgba(0, 0, 0, .16);
|
||||
|
||||
--theme-bg-accent-color: rgba(0, 0, 0, .03);
|
||||
--theme-bg-accent-hover: rgba(0, 0, 0, .05);
|
||||
@ -250,7 +245,7 @@
|
||||
--theme-bg-focused-border: rgba(0, 0, 0, .4);
|
||||
--theme-bg-accent-error: rgba(251, 158, 158, .06);
|
||||
--theme-on-color: #4474F6;
|
||||
--theme-off-color: #ECEEF5;
|
||||
--theme-off-color: #DBDBDB;
|
||||
--theme-bg-check: #45444F;
|
||||
--theme-tooltip-color: #F1F1F4;
|
||||
--theme-showmore-color: #484850;
|
||||
@ -267,6 +262,10 @@
|
||||
--theme-button-border-disabled: rgba(255, 255, 255, .06);
|
||||
--theme-button-border-focused: rgba(255, 255, 255, .4);
|
||||
--theme-button-border-error: rgba(205, 104, 104, .1);
|
||||
--theme-button-trans-primary-disabled: #E7E7E7;
|
||||
--theme-circle-select: #F7F7F7;
|
||||
--theme-circle-trans: #F7F7F7;
|
||||
--theme-circle-border: rgba(31, 33, 43, .2);
|
||||
|
||||
--theme-table-bg-color: rgba(0, 0, 0, .02);
|
||||
--theme-table-bg-hover: rgba(0, 0, 0, .04);
|
||||
@ -276,10 +275,10 @@
|
||||
--theme-popup-border: 1px solid rgba(0, 0, 0, .06);
|
||||
--theme-popup-shadow: 0px 10px 20px rgba(0, 0, 0, .2);
|
||||
|
||||
--theme-caption-color: #272121;
|
||||
--theme-content-accent-color: rgba(39, 33, 33, 0.8);
|
||||
--theme-content-color: rgba(39, 33, 33, 0.6);
|
||||
--theme-content-dark-color: rgba(39, 33, 33, 0.4);
|
||||
--theme-caption-color: #1F212B;
|
||||
--theme-content-accent-color: rgba(31, 33, 43, .8);
|
||||
--theme-content-color: rgba(31, 33, 43, .6);
|
||||
--theme-content-dark-color: rgba(31, 33, 43, .4);
|
||||
--theme-content-trans-color: rgba(31, 33, 43, 0.3);
|
||||
|
||||
--theme-userlink-color: #b92d52;
|
||||
|
||||
@ -19,6 +19,7 @@ a {
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
color: var(--theme-content-accent-color);
|
||||
outline: none;
|
||||
&:hover {
|
||||
color: var(--theme-caption-color);
|
||||
text-decoration: underline;
|
||||
|
||||
@ -29,14 +29,10 @@
|
||||
export let width: string | undefined = undefined
|
||||
</script>
|
||||
|
||||
<button class="button {size}" class:primary class:transparent disabled={disabled || loading} style={width ? 'width: ' + width : ''} on:click>
|
||||
<button class="button {size}" class:transparent class:primary disabled={disabled || loading} style={width ? 'width: ' + width : ''} on:click>
|
||||
{#if icon && !loading}
|
||||
<div class="icon">
|
||||
{#if typeof (icon) === 'string'}
|
||||
<div class="scale-75 icon">
|
||||
<Icon {icon} size={'small'}/>
|
||||
{:else}
|
||||
<svelte:component this={icon} size={'small'} />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{#if loading}
|
||||
@ -55,13 +51,9 @@
|
||||
background-color: var(--theme-button-bg-enabled);
|
||||
color: var(--theme-caption-color);
|
||||
border: 1px solid var(--theme-button-border-enabled);
|
||||
border-radius: 0.75rem;
|
||||
border-radius: .75rem;
|
||||
|
||||
.icon {
|
||||
margin-right: .375rem;
|
||||
transform-origin: center center;
|
||||
transform: scale(.75);
|
||||
}
|
||||
.icon { margin-right: .375rem; }
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-button-bg-hovered);
|
||||
@ -83,6 +75,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
.transparent {
|
||||
padding: 0 1.25rem;
|
||||
border-radius: .5rem;
|
||||
color: var(--theme-caption-color);
|
||||
background-color: transparent;
|
||||
border-color: var(--theme-card-divider);
|
||||
backdrop-filter: blur(20px);
|
||||
|
||||
&:hover, &:focus, &:active, &:disabled {
|
||||
background-color: transparent;
|
||||
border-color: var(--theme-card-divider);
|
||||
}
|
||||
&:disabled { color: var(--theme-content-dark-color); }
|
||||
}
|
||||
|
||||
.primary {
|
||||
color: var(--primary-button-color);
|
||||
background-color: var(--primary-button-enabled);
|
||||
@ -103,66 +110,14 @@
|
||||
box-shadow: none;
|
||||
}
|
||||
&:disabled {
|
||||
color: var(--theme-content-dark-color);
|
||||
background-color: var(--primary-button-disabled);
|
||||
border-color: var(--primary-button-border);
|
||||
color: rgb(var(--theme-caption-color) / 60%);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.transparent {
|
||||
padding: 0 1.25rem;
|
||||
font-weight: 500;
|
||||
border-radius: .5rem;
|
||||
color: var(--theme-caption-color);
|
||||
background-color: var(--trans-button-bg);
|
||||
border-color: var(--theme-bg-accent-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--trans-button-bg-hovered);
|
||||
border-color: var(--trans-button-border-hovered);
|
||||
box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
|
||||
}
|
||||
&:focus {
|
||||
background-color: var(--trans-button-bg-hovered);
|
||||
border-color: var(--primary-button-focused-border);
|
||||
box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
|
||||
}
|
||||
&:active {
|
||||
background-color: var(--trans-button-bg);
|
||||
border-color: var(--trans-button-border);
|
||||
box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
|
||||
}
|
||||
&:disabled {
|
||||
background-color: var(--trans-button-bg);
|
||||
border-color: var(--trans-button-border);
|
||||
}
|
||||
|
||||
&.primary {
|
||||
color: var(--trans-primary-button-color);
|
||||
background-color: var(--trans-primary-button-bg);
|
||||
border-color: var(--trans-primary-button-border);
|
||||
backdrop-filter: blur(3px);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--trans-primary-button-bg-hovered);
|
||||
border-color: var(--trans-primary-button-border-hovered);
|
||||
box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
|
||||
}
|
||||
&:focus {
|
||||
background-color: var(--trans-primary-button-bg-hovered);
|
||||
border-color: var(--primary-button-focused-border);
|
||||
box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
|
||||
}
|
||||
&:active {
|
||||
background-color: var(--trans-primary-button-bg);
|
||||
border-color: var(--trans-primary-button-border);
|
||||
box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
|
||||
}
|
||||
&:disabled {
|
||||
background-color: var(--primary-button-disabled);
|
||||
border-color: var(--trans-primary-button-border);
|
||||
}
|
||||
}
|
||||
.transparent.primary:disabled {
|
||||
background-color: var(--theme-button-trans-primary-disabled);
|
||||
border-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -25,24 +25,17 @@
|
||||
export let primary: boolean = false
|
||||
</script>
|
||||
|
||||
<div class="icon-button icon-{size}" class:selected class:transparent class:primary on:click on:mousemove>
|
||||
<div class="flex-center icon-button icon-{size}" class:selected class:transparent class:primary on:click on:mousemove>
|
||||
<div class="content">
|
||||
{#if typeof (icon) === 'string'}
|
||||
<Icon {icon} size={'small'} />
|
||||
{:else}
|
||||
<svelte:component this={icon} size={'small'} />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.icon-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid var(--theme-card-divider);
|
||||
color: var(--theme-caption-color);
|
||||
border: 1px solid var(--theme-circle-border);
|
||||
border-radius: 50%;
|
||||
backdrop-filter: blur(3px);
|
||||
cursor: pointer;
|
||||
|
||||
.content {
|
||||
@ -50,16 +43,9 @@
|
||||
transform: scale(.75);
|
||||
pointer-events: none;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--theme-caption-color);
|
||||
border-color: var(--theme-bg-focused-border);
|
||||
}
|
||||
&:active {
|
||||
color: var(--theme-content-accent-color);
|
||||
background-color: var(--theme-bg-accent-color);
|
||||
}
|
||||
&.selected { background-color: var(--theme-button-bg-hovered); }
|
||||
&.transparent { background-color: rgba(31, 31, 37, .3); }
|
||||
|
||||
&.selected { background-color: var(--theme-circle-select); }
|
||||
&.transparent { background-color: var(--theme-circle-trans); }
|
||||
&.primary {
|
||||
color: var(--primary-button-color);
|
||||
background-color: var(--primary-button-enabled);
|
||||
|
||||
@ -21,8 +21,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path d="M12 0v1c6.1 0 11 4.9 11 11s-4.9 11-11 11v1c6.6 0 12-5.4 12-12S18.6 0 12 0z" fill="#fff" />
|
||||
<linearGradient id="a" gradientUnits="userSpaceOnUse" x1="0" y1="22" x2="0" y2="2">
|
||||
<stop offset="0" stop-color="#fff"/>
|
||||
<stop offset="1" stop-color="#fff" stop-opacity="0"/>
|
||||
<stop offset="0" stop-color={'var(--theme-caption-color)'} />
|
||||
<stop offset="1" stop-color={'var(--theme-caption-color)'} stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<path d="M12 23C5.9 23 1 18.1 1 12S5.9 1 12 1V0C5.4 0 0 5.4 0 12s5.4 12 12 12v-1z" fill="url(#a)" />
|
||||
</svg>
|
||||
|
||||
@ -25,6 +25,8 @@
|
||||
<style lang="scss">
|
||||
.toggle {
|
||||
display: inline-block;
|
||||
width: 3.25rem;
|
||||
min-width: 3.25rem;
|
||||
height: 1.75rem;
|
||||
line-height: 1.75rem;
|
||||
vertical-align: middle;
|
||||
@ -42,43 +44,31 @@
|
||||
|
||||
&:checked + .toggle-switch {
|
||||
background-color: var(--theme-on-color);
|
||||
&:before {
|
||||
left: 1.625rem;
|
||||
}
|
||||
}
|
||||
&:not(:disabled) + .toggle-switch {
|
||||
cursor: pointer;
|
||||
&:before { left: calc(3.5rem - 1.625rem); }
|
||||
}
|
||||
&:not(:disabled) + .toggle-switch { cursor: pointer; }
|
||||
&:disabled + .toggle-switch {
|
||||
filter: grayscale(70%);
|
||||
&:before {
|
||||
background: #eee;
|
||||
&:before { background: #eee; }
|
||||
}
|
||||
// &:focus-within + .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
|
||||
}
|
||||
&:focus-within + .toggle-switch {
|
||||
border: 1px solid var(--primary-button-focused-border);
|
||||
box-shadow: 0 0 0 2px var(--primary-button-outline);
|
||||
}
|
||||
}
|
||||
&:active > .toggle-switch {
|
||||
border: 1px solid var(--primary-button-focused-border);
|
||||
box-shadow: 0 0 0 2px var(--primary-button-outline);
|
||||
}
|
||||
// &:active > .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 3.5rem;
|
||||
height: 1.875rem;
|
||||
height: 1.75rem;
|
||||
border-radius: 3.125rem;
|
||||
// vertical-align: top;
|
||||
background-color: var(--theme-off-color);
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
transition: left .2s;
|
||||
box-shadow: 1px 2px 7px rgba(119, 129, 142, 0.1);
|
||||
transition: left .2s, background-color .2s;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: .125rem;
|
||||
left: .25rem;
|
||||
left: .125rem;
|
||||
display: inline-block;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
const fill: string = 'var(--theme-caption-color)'
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
|
||||
@ -4,5 +4,5 @@
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<path d="M14,7.5H8.5V2c0-0.3-0.2-0.5-0.5-0.5S7.5,1.7,7.5,2v5.5H2C1.7,7.5,1.5,7.7,1.5,8S1.7,8.5,2,8.5h5.5V14 c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V8.5H14c0.3,0,0.5-0.2,0.5-0.5S14.3,7.5,14,7.5z"/>
|
||||
<path d="M15.4,7.4H8.6V0.6C8.6,0.3,8.3,0,8,0S7.4,0.3,7.4,0.6v6.8H0.6C0.3,7.4,0,7.7,0,8s0.3,0.6,0.6,0.6h6.8v6.8 C7.4,15.7,7.7,16,8,16s0.6-0.3,0.6-0.6V8.6h6.8C15.7,8.6,16,8.3,16,8S15.7,7.4,15.4,7.4z"/>
|
||||
</svg>
|
||||
|
||||
@ -100,13 +100,13 @@
|
||||
flex-shrink: 0;
|
||||
padding: 0 2.5rem;
|
||||
height: 4rem;
|
||||
border-bottom: 1px solid var(--theme-card-divider);
|
||||
border-bottom: 1px solid var(--theme-zone-bg);
|
||||
|
||||
.icon {
|
||||
margin-right: 1rem;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
color: var(--theme-caption-color);
|
||||
color: var(--primary-button-color);
|
||||
background-color: var(--primary-button-enabled);
|
||||
border-radius: 50%;
|
||||
}
|
||||
@ -145,7 +145,7 @@
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1.5rem 2.5rem;
|
||||
padding: 3rem 2.5rem;
|
||||
height: max-content;
|
||||
}
|
||||
}
|
||||
|
||||
@ -89,6 +89,7 @@
|
||||
<CircleButton
|
||||
icon={IconAdd}
|
||||
size={'small'}
|
||||
selected
|
||||
on:click={() => {
|
||||
inputFile.click()
|
||||
}}
|
||||
@ -141,7 +142,7 @@
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
margin-right: 0.75rem;
|
||||
margin-right: .75rem;
|
||||
font-weight: 500;
|
||||
font-size: 1.25rem;
|
||||
color: var(--theme-caption-color);
|
||||
@ -151,8 +152,8 @@
|
||||
.zone-container {
|
||||
padding: 1rem;
|
||||
color: var(--theme-caption-color);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px dashed rgba(255, 255, 255, 0.16);
|
||||
border-radius: 0.75rem;
|
||||
background: var(--theme-bg-accent-color);
|
||||
border: 1px dashed var(--theme-zone-border-lite);
|
||||
border-radius: .75rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
<div class="applications-container">
|
||||
<div class="flex-row-center">
|
||||
<div class="title">Applications</div>
|
||||
<CircleButton icon={IconAdd} size={'small'} on:click={createApp} />
|
||||
<CircleButton icon={IconAdd} size={'small'} selected on:click={createApp} />
|
||||
</div>
|
||||
{#if applications.length > 0}
|
||||
<Table
|
||||
|
||||
@ -157,7 +157,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex-center resume" class:solid={dragover}
|
||||
<div class="flex-center resume" class:solid={dragover || resume.uuid}
|
||||
on:dragover|preventDefault={ () => { dragover = true } }
|
||||
on:dragleave={ () => { dragover = false } }
|
||||
on:drop|preventDefault|stopPropagation={drop}>
|
||||
@ -213,15 +213,10 @@
|
||||
.resume {
|
||||
margin-top: 1rem;
|
||||
padding: .75rem;
|
||||
background: rgba(255, 255, 255, .05);
|
||||
border: 1px dashed rgba(255, 255, 255, .2);
|
||||
background: var(--theme-zone-bg);
|
||||
border: 1px dashed var(--theme-zone-border);
|
||||
border-radius: .5rem;
|
||||
backdrop-filter: blur(10px);
|
||||
&.solid { border-style: solid; }
|
||||
}
|
||||
// .resume a {
|
||||
// font-size: .75rem;
|
||||
// color: var(--theme-content-dark-color);
|
||||
// &:hover { color: var(--theme-content-color); }
|
||||
// }
|
||||
</style>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import type { Ref } from '@anticrm/core'
|
||||
import { CircleButton, EditBox, showPopup, IconAdd, Label, AnyComponent } from '@anticrm/ui'
|
||||
import { CircleButton, EditBox, showPopup, IconAdd, Label, AnyComponent, IconActivity } from '@anticrm/ui'
|
||||
import { getClient, createQuery, Channels, AttributeEditor, AttributesBar, Avatar } from '@anticrm/presentation'
|
||||
import { Panel } from '@anticrm/panel'
|
||||
import type { Candidate } from '@anticrm/recruit'
|
||||
@ -57,6 +57,11 @@
|
||||
function lastNameChange() {
|
||||
client.updateDoc(recruit.class.Candidate, object.space, object._id, { name: combineName(getFirstName(object.name), lastName) })
|
||||
}
|
||||
|
||||
const openActivity = (): void => {
|
||||
rightSection = undefined
|
||||
fullSize = true
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if object !== undefined}
|
||||
@ -67,15 +72,20 @@
|
||||
<div class="mr-8">
|
||||
<Avatar avatar={object.avatar} size={'x-large'} />
|
||||
</div>
|
||||
<div class="flex-col">
|
||||
<div class="flex-grow flex-col">
|
||||
|
||||
<div class="name"><EditBox placeholder="John" maxWidth="20rem" bind:value={firstName} on:change={ firstNameChange }/></div>
|
||||
<div class="name"><EditBox placeholder="Appleseed" maxWidth="20rem" bind:value={lastName} on:change={ lastNameChange }/></div>
|
||||
<div class="title"><AttributeEditor maxWidth="20rem" _class={recruit.class.Candidate} {object} key="title"/></div>
|
||||
<!-- <div class="city"><AttributeEditor maxWidth="20rem" _class={recruit.class.Candidate} {object} key="city"/></div> -->
|
||||
<div class="flex-row-center channels">
|
||||
|
||||
<div class="separator" />
|
||||
|
||||
<div class="flex-between">
|
||||
<div class="flex-row-center">
|
||||
{#if !object.channels || object.channels.length === 0}
|
||||
<CircleButton icon={IconAdd} size={'small'} selected on:click={(ev) => showPopup(contact.component.SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { saveChannels(result) })} />
|
||||
<span><Label label={'Add social links'} /></span>
|
||||
<span class="ml-2"><Label label={'Add social links'} /></span>
|
||||
{:else}
|
||||
<Channels value={object.channels} size={'small'} on:click={(ev) => {
|
||||
if (ev.detail.presenter) {
|
||||
@ -84,10 +94,18 @@
|
||||
}
|
||||
}} />
|
||||
<div class="ml-1">
|
||||
<CircleButton icon={Edit} size={'small'} selected on:click={(ev) => showPopup(contact.component.SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { saveChannels(result) })} />
|
||||
<CircleButton icon={Edit} size={'small'} on:click={(ev) => showPopup(contact.component.SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { saveChannels(result) })} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex-row-center">
|
||||
<a href={'#'} class="flex-row-center" on:click={openActivity}>
|
||||
<CircleButton icon={IconActivity} size={'small'} primary on:click={openActivity} />
|
||||
<span class="ml-2 small-text">View activity</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -112,8 +130,9 @@
|
||||
margin-top: .25rem;
|
||||
font-size: .75rem;
|
||||
}
|
||||
.channels {
|
||||
margin-top: .75rem;
|
||||
span { margin-left: .5rem; }
|
||||
.separator {
|
||||
margin: 1rem 0;
|
||||
height: 1px;
|
||||
background-color: var(--theme-card-divider);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
else if (value === false) value = undefined
|
||||
else value = true
|
||||
}}>
|
||||
<svg class="svg-small" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<svg class="yesno-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<circle fill="#fff" cx="8" cy="8" r="6"/>
|
||||
{#if value === true}
|
||||
<polygon fill="#60B96E" points="7.4,10.9 4.9,8.4 5.7,7.6 7.3,9.1 10.2,5.6 11.1,6.4 "/>
|
||||
@ -40,28 +40,32 @@
|
||||
<path fill="#77818E" d="M7.3,9.3h1.3V9c0.1-0.5,0.6-0.9,1.1-1.4c0.4-0.4,0.8-0.9,0.8-1.6c0-1.1-0.8-1.8-2.2-1.8c-1.4,0-2.4,0.8-2.5,2.2 h1.4c0.1-0.6,0.4-1,1-1C8.8,5.4,9,5.7,9,6.2c0,0.4-0.3,0.7-0.7,1.1c-0.5,0.5-1,0.9-1,1.7V9.3z M8,11.6c0.5,0,0.9-0.4,0.9-0.9 c0-0.5-0.4-0.9-0.9-0.9c-0.5,0-0.9,0.4-0.9,0.9C7.1,11.2,7.5,11.6,8,11.6z"/>
|
||||
{/if}
|
||||
</svg>
|
||||
<span><Label label={getLabel(value)} /></span>
|
||||
<div class="label"><Label label={getLabel(value)} /></div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.yesno-container {
|
||||
padding: .25rem .5rem .25rem .25rem;
|
||||
padding: .25rem .5rem .25rem .4rem;
|
||||
max-width: fit-content;
|
||||
border-radius: 1.25rem;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
background-color: #77818E;
|
||||
background-color: var(--grayscale-grey-03);
|
||||
&.yes { background-color: #60B96E; }
|
||||
&.no { background-color: #F06C63; }
|
||||
|
||||
span {
|
||||
width: 1.6rem;
|
||||
.label {
|
||||
width: 1.4rem;
|
||||
margin-left: .25rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
font-size: .625rem;
|
||||
color: var(--theme-caption-color);
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
.yesno-svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
onChange(value)
|
||||
}}
|
||||
>
|
||||
<svg class="svg-small" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<svg class="yesno-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<circle class:yes={value === true} class:no={value === false} cx="8" cy="8" r="6"/>
|
||||
{#if value === true}
|
||||
<polygon fill="#fff" points="7.4,10.9 4.9,8.4 5.7,7.6 7.3,9.1 10.2,5.6 11.1,6.4 "/>
|
||||
@ -73,4 +73,8 @@
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
}
|
||||
.yesno-svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user