hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-11-30 12:42:42 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Update UI, light theme. (#564)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-12-08 12:24:24 +03:00 committed by GitHub
parent cee5bbf9b7
commit f7dad3b0b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 189 additions and 270 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/panel/src/components/Panel.svelte
View File

@ -57,9 +57,7 @@
{:else} {:else}
<div class="unionSection"> <div class="unionSection">
<div class="flex-row-center header"> <div class="flex-row-center header">
<div class="content-color">
<Icon {icon} size={'large'} /> <Icon {icon} size={'large'} />
</div>
<div class="flex-grow ml-4 flex-col"> <div class="flex-grow ml-4 flex-col">
<div class="fs-title">{title}</div> <div class="fs-title">{title}</div>
<div class="small-text content-dark-color">Candidate pool name</div> <div class="small-text content-dark-color">Candidate pool name</div>
@ -92,7 +90,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: calc(100% - 32px - 1.25rem); height: calc(100% - 32px - 1.25rem);
background: var(--theme-dialog-bg); background: var(--theme-bg-color);
border-radius: 1.25rem; border-radius: 1.25rem;
box-shadow: 0px 44px 154px rgba(0, 0, 0, .75); box-shadow: 0px 44px 154px rgba(0, 0, 0, .75);
backdrop-filter: blur(15px); backdrop-filter: blur(15px);
@ -102,14 +100,14 @@
padding: 0 2rem 0 2.5rem; padding: 0 2rem 0 2.5rem;
height: 4rem; height: 4rem;
color: var(--theme-content-accent-color); color: var(--theme-content-accent-color);
border-bottom: 1px solid var(--theme-dialog-divider); border-bottom: 1px solid var(--theme-zone-bg);
} }
.subtitle { .subtitle {
flex-shrink: 0; flex-shrink: 0;
padding: 0 2rem; padding: 0 2rem;
height: 3.5rem; 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; flex-direction: column;
} }
.leftSection { .leftSection {
border-right: 1px solid var(--theme-dialog-divider); border-right: 1px solid var(--theme-card-divider);
.scroll-container { .scroll-container {
overflow: auto; overflow: auto;
margin: 2rem 2rem 1.5rem; margin: 2.5rem 2rem 1.5rem;
.content { .content {
flex-shrink: 0; flex-shrink: 0;
margin: .5rem .5rem 0; margin: .5rem .5rem 0;
} }
} }
} }
.rightSection { // .rightSection {
background-color: transparent; // background-color: transparent;
} // }
.tools { .tools {
position: absolute; position: absolute;

20
packages/presentation/src/components/Avatar.svelte
View File

@ -36,31 +36,19 @@
</div> </div>
<style lang="scss"> <style lang="scss">
@import '../../../../packages/theme/styles/mixins.scss';
.avatar-container { .avatar-container {
flex-shrink: 0; flex-shrink: 0;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background-color: rgba(196, 196, 204, .2);
border-radius: 50%; border-radius: 50%;
pointer-events: none; pointer-events: none;
img { object-fit: cover; } img {
object-fit: cover;
&.no-img {
border: 2px solid var(--theme-avatar-border); 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 { .ava-x-small {

15
packages/presentation/src/components/Card.svelte
View File

@ -39,7 +39,7 @@
<form class="card-container" on:submit|preventDefault={ () => {} }> <form class="card-container" on:submit|preventDefault={ () => {} }>
<div class="card-bg" /> <div class="card-bg" />
<div class="flex-between header"> <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} {#if $$slots.error}
<div class="flex-grow error"> <div class="flex-grow error">
<slot name="error" /> <slot name="error" />
@ -62,9 +62,9 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 20rem; width: 21.25rem;
min-width: 20rem; min-width: 21.25rem;
max-width: 20rem; max-width: 21.25rem;
border-radius: 1.25rem; border-radius: 1.25rem;
.header { .header {
@ -72,12 +72,6 @@
flex-shrink: 0; flex-shrink: 0;
padding: 1.75rem; padding: 1.75rem;
.label {
font-weight: 500;
font-size: 1rem;
color: var(--theme-caption-color);
}
.error { .error {
position: absolute; position: absolute;
display: flex; display: flex;
@ -118,7 +112,6 @@
column-gap: .75rem; column-gap: .75rem;
padding: 1rem 1.75rem 1.75rem; padding: 1rem 1.75rem 1.75rem;
height: 5.25rem; height: 5.25rem;
mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem);
overflow: hidden; overflow: hidden;
border-radius: 0 0 1.25rem 1.25rem; border-radius: 0 0 1.25rem 1.25rem;
} }

1
packages/presentation/src/components/Channels.svelte
View File

@ -20,6 +20,7 @@
import type { Channel, ChannelProvider } from '@anticrm/contact' import type { Channel, ChannelProvider } from '@anticrm/contact'
import { getClient } from '..' import { getClient } from '..'
import type { AnyComponent } from '@anticrm/ui'
import { Tooltip, CircleButton } from '@anticrm/ui' import { Tooltip, CircleButton } from '@anticrm/ui'
import ChannelsPopup from './ChannelsPopup.svelte' import ChannelsPopup from './ChannelsPopup.svelte'

7
packages/presentation/src/components/SpaceCreateCard.svelte
View File

@ -49,9 +49,9 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 20rem; width: 21.25rem;
min-width: 20rem; min-width: 21.25rem;
max-width: 20rem; max-width: 21.25rem;
border-radius: 1.25rem; border-radius: 1.25rem;
.header { .header {
@ -95,7 +95,6 @@
column-gap: .75rem; column-gap: .75rem;
padding: 1rem 1.75rem 1.75rem; padding: 1rem 1.75rem 1.75rem;
height: 5.25rem; height: 5.25rem;
mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem);
overflow: hidden; overflow: hidden;
border-radius: 0 0 1.25rem 1.25rem; border-radius: 0 0 1.25rem 1.25rem;
} }

21
packages/presentation/src/components/SpaceSelect.svelte
View File

@ -47,7 +47,7 @@
}) })
</script> </script>
<div class="flex-col spaceselect-container" <div class="flex-col cursor-pointer"
bind:this={btn} bind:this={btn}
on:click|preventDefault={() => { on:click|preventDefault={() => {
showPopup(SpacesPopup, { _class }, btn, (result) => { showPopup(SpacesPopup, { _class }, btn, (result) => {
@ -58,9 +58,9 @@
}} }}
> >
<div class="overflow-label label"><Label {label} /></div> <div class="overflow-label label"><Label {label} /></div>
<div class="flex-row-center space" class:selected={selected}> <div class="flex-row-center space">
<span class="icon"><IconFolder size={'small'} /></span> <span class="scale-75 mr-1"><IconFolder size={'small'} /></span>
<span class="overflow-label"> <span class="overflow-label" class:caption-color={selected} class:content-dark-color={!selected}>
{#if selected} {#if selected}
{selected.name} {selected.name}
{:else} {:else}
@ -71,23 +71,10 @@
</div> </div>
<style lang="scss"> <style lang="scss">
.spaceselect-container {
cursor: pointer;
.label { .label {
margin-bottom: .125rem; margin-bottom: .125rem;
font-weight: 500; font-weight: 500;
font-size: .75rem; font-size: .75rem;
color: var(--theme-content-accent-color); color: var(--theme-content-accent-color);
} }
.space {
opacity: .3;
.icon {
transform-origin: center center;
transform: scale(.75);
margin-right: .25rem;
}
&.selected { opacity: 1; }
}
}
</style> </style>

2
packages/presentation/src/components/UserBox.svelte
View File

@ -95,7 +95,7 @@
<div class="selectUser"> <div class="selectUser">
<div class="title"><Label label={title} /></div> <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} {#if selected}{getName(selected)}{:else}<Label label={'Not selected'} />{/if}
</div> </div>
</div> </div>

1
packages/presentation/src/components/icons/Avatar.svelte
View File

@ -28,7 +28,6 @@
<style lang="scss"> <style lang="scss">
.svg-avatar { .svg-avatar {
fill: var(--theme-caption-color);
.op { opacity: .05; } .op { opacity: .05; }
} }
.x-small { .x-small {

79
packages/theme/styles/_colors.scss
View File

@ -27,18 +27,6 @@
--duotone-color: rgba(126, 134, 158, .25); --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-color: #EE7A7A;
--system-error-60-color: rgba(238, 122, 122, .6); // #EE7A7A / 60% --system-error-60-color: rgba(238, 122, 122, .6); // #EE7A7A / 60%
@ -47,6 +35,8 @@
--activity-status-busy: #FCC500; --activity-status-busy: #FCC500;
--activity-status-away: #9099A2; --activity-status-away: #9099A2;
--grayscale-grey-03: #77818E;
--primary-color-purple-01: #4B38BD; --primary-color-purple-01: #4B38BD;
--primary-color-purple-02: #6552DB; --primary-color-purple-02: #6552DB;
--primary-color-purple-03: #9D92C4; --primary-color-purple-03: #9D92C4;
@ -66,12 +56,12 @@
--theme-menu-selection: #1D1D23; --theme-menu-selection: #1D1D23;
--theme-menu-divider: rgba(255, 255, 255, .05); --theme-menu-divider: rgba(255, 255, 255, .05);
--theme-scroll-bar: #2C2C34; --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-accent: rgba(255, 255, 255, .03);
--theme-dialog-divider: rgba(255, 255, 255, .1); --theme-dialog-divider: rgba(255, 255, 255, .1);
--theme-dialog-spec: rgba(47, 47, 53, .6); --theme-dialog-spec: rgba(47, 47, 53, .6);
--theme-dialog-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75); --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-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-chat-divider: rgb(36, 36, 41);
--theme-incoming-msg: rgba(67, 67, 72, .3); --theme-incoming-msg: rgba(67, 67, 72, .3);
@ -79,14 +69,13 @@
--theme-card-bg: rgba(222, 222, 240, .2); --theme-card-bg: rgba(222, 222, 240, .2);
--theme-card-bg-dark: rgba(222, 222, 240, .1); --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-divider: rgba(255, 255, 255, .1);
--theme-card-shadow: 0px 34px 74px rgba(0, 0, 0, 0.55); --theme-card-shadow: 0px 15px 60px rgba(24, 25, 28, .2);
--theme-avatar-bg: #E0DAD5;
--theme-avatar-hover: rgba(195, 195, 204, .2);
--theme-avatar-border: rgba(255, 255, 255, .1); --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-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-color: rgba(255, 255, 255, .03);
--theme-bg-accent-hover: rgba(255, 255, 255, .06); --theme-bg-accent-hover: rgba(255, 255, 255, .06);
@ -95,7 +84,7 @@
--theme-bg-focused-border: rgba(255, 255, 255, .4); --theme-bg-focused-border: rgba(255, 255, 255, .4);
--theme-bg-accent-error: rgba(251, 158, 158, .06); --theme-bg-accent-error: rgba(251, 158, 158, .06);
--theme-on-color: #4474F6; --theme-on-color: #4474F6;
--theme-off-color: #77818E; --theme-off-color: #2A2A30;
--theme-bg-check: #F2F2F2; --theme-bg-check: #F2F2F2;
--theme-tooltip-color: #2F2F34; --theme-tooltip-color: #2F2F34;
--theme-showmore-color: #484850; --theme-showmore-color: #484850;
@ -112,6 +101,10 @@
--theme-button-border-disabled: rgba(255, 255, 255, .06); --theme-button-border-disabled: rgba(255, 255, 255, .06);
--theme-button-border-focused: rgba(255, 255, 255, .4); --theme-button-border-focused: rgba(255, 255, 255, .4);
--theme-button-border-error: rgba(205, 104, 104, .1); --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-color: rgba(255, 255, 255, .02);
--theme-table-bg-hover: rgba(255, 255, 255, .04); --theme-table-bg-hover: rgba(255, 255, 255, .04);
@ -144,12 +137,12 @@
--theme-menu-selection: #37363F; --theme-menu-selection: #37363F;
--theme-menu-divider: rgba(255, 255, 255, .05); --theme-menu-divider: rgba(255, 255, 255, .05);
--theme-scroll-bar: #494852; --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-accent: rgba(255, 255, 255, .03);
--theme-dialog-divider: rgba(255, 255, 255, .1); --theme-dialog-divider: rgba(255, 255, 255, .1);
--theme-dialog-spec: rgba(47, 47, 53, .6); --theme-dialog-spec: rgba(47, 47, 53, .6);
--theme-dialog-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75); --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-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-chat-divider: rgb(66, 65, 76);
--theme-incoming-msg: rgba(67, 67, 72, .3); --theme-incoming-msg: rgba(67, 67, 72, .3);
@ -157,14 +150,13 @@
--theme-card-bg: rgba(222, 222, 240, .2); --theme-card-bg: rgba(222, 222, 240, .2);
--theme-card-bg-dark: rgba(222, 222, 240, .1); --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-divider: rgba(255, 255, 255, .1);
--theme-card-shadow: 0px 34px 74px rgba(0, 0, 0, 0.55); --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-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-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-color: rgba(255, 255, 255, .03);
--theme-bg-accent-hover: rgba(255, 255, 255, .06); --theme-bg-accent-hover: rgba(255, 255, 255, .06);
@ -173,7 +165,7 @@
--theme-bg-focused-border: rgba(255, 255, 255, .4); --theme-bg-focused-border: rgba(255, 255, 255, .4);
--theme-bg-accent-error: rgba(251, 158, 158, .06); --theme-bg-accent-error: rgba(251, 158, 158, .06);
--theme-on-color: #4474F6; --theme-on-color: #4474F6;
--theme-off-color: #77818E; --theme-off-color: #494853;
--theme-bg-check: #F2F2F2; --theme-bg-check: #F2F2F2;
--theme-tooltip-color: #4D4C58; --theme-tooltip-color: #4D4C58;
--theme-showmore-color: #484850; --theme-showmore-color: #484850;
@ -190,6 +182,10 @@
--theme-button-border-disabled: rgba(255, 255, 255, .06); --theme-button-border-disabled: rgba(255, 255, 255, .06);
--theme-button-border-focused: rgba(255, 255, 255, .4); --theme-button-border-focused: rgba(255, 255, 255, .4);
--theme-button-border-error: rgba(205, 104, 104, .1); --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-color: rgba(255, 255, 255, .02);
--theme-table-bg-hover: rgba(255, 255, 255, .04); --theme-table-bg-hover: rgba(255, 255, 255, .04);
@ -221,27 +217,26 @@
--theme-menu-selection: #DBDBDB; --theme-menu-selection: #DBDBDB;
--theme-menu-divider: rgba(0, 0, 0, .08); --theme-menu-divider: rgba(0, 0, 0, .08);
--theme-scroll-bar: #CBCBCB; --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-accent: rgba(31, 33, 43, .03);
--theme-dialog-divider: rgba(31, 33, 43, .06); --theme-dialog-divider: rgba(31, 33, 43, .06);
--theme-dialog-spec: rgba(47, 47, 53, .6); --theme-dialog-spec: rgba(47, 47, 53, .6);
--theme-dialog-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75); --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-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-chat-divider: rgb(233, 233, 233);
--theme-incoming-msg: rgba(67, 67, 72, .3); --theme-incoming-msg: rgba(67, 67, 72, .3);
--theme-outcoming-msg: rgba(67, 67, 72, .6); --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-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-divider: rgba(0, 0, 0, .1);
--theme-card-shadow: 0px 24px 74px rgba(100, 89, 89, .5); --theme-card-shadow: 0px 24px 74px rgba(100, 89, 89, .5);
--theme-avatar-bg: #C4C4C4; --theme-avatar-border: transparent;
--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-msgbox-bg: rgba(170, 170, 191, .25); --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-color: rgba(0, 0, 0, .03);
--theme-bg-accent-hover: rgba(0, 0, 0, .05); --theme-bg-accent-hover: rgba(0, 0, 0, .05);
@ -250,7 +245,7 @@
--theme-bg-focused-border: rgba(0, 0, 0, .4); --theme-bg-focused-border: rgba(0, 0, 0, .4);
--theme-bg-accent-error: rgba(251, 158, 158, .06); --theme-bg-accent-error: rgba(251, 158, 158, .06);
--theme-on-color: #4474F6; --theme-on-color: #4474F6;
--theme-off-color: #ECEEF5; --theme-off-color: #DBDBDB;
--theme-bg-check: #45444F; --theme-bg-check: #45444F;
--theme-tooltip-color: #F1F1F4; --theme-tooltip-color: #F1F1F4;
--theme-showmore-color: #484850; --theme-showmore-color: #484850;
@ -267,6 +262,10 @@
--theme-button-border-disabled: rgba(255, 255, 255, .06); --theme-button-border-disabled: rgba(255, 255, 255, .06);
--theme-button-border-focused: rgba(255, 255, 255, .4); --theme-button-border-focused: rgba(255, 255, 255, .4);
--theme-button-border-error: rgba(205, 104, 104, .1); --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-color: rgba(0, 0, 0, .02);
--theme-table-bg-hover: rgba(0, 0, 0, .04); --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-border: 1px solid rgba(0, 0, 0, .06);
--theme-popup-shadow: 0px 10px 20px rgba(0, 0, 0, .2); --theme-popup-shadow: 0px 10px 20px rgba(0, 0, 0, .2);
--theme-caption-color: #272121; --theme-caption-color: #1F212B;
--theme-content-accent-color: rgba(39, 33, 33, 0.8); --theme-content-accent-color: rgba(31, 33, 43, .8);
--theme-content-color: rgba(39, 33, 33, 0.6); --theme-content-color: rgba(31, 33, 43, .6);
--theme-content-dark-color: rgba(39, 33, 33, 0.4); --theme-content-dark-color: rgba(31, 33, 43, .4);
--theme-content-trans-color: rgba(31, 33, 43, 0.3); --theme-content-trans-color: rgba(31, 33, 43, 0.3);
--theme-userlink-color: #b92d52; --theme-userlink-color: #b92d52;

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

@ -19,6 +19,7 @@ a {
font-weight: 500; font-weight: 500;
text-decoration: none; text-decoration: none;
color: var(--theme-content-accent-color); color: var(--theme-content-accent-color);
outline: none;
&:hover { &:hover {
color: var(--theme-caption-color); color: var(--theme-caption-color);
text-decoration: underline; text-decoration: underline;

91
packages/ui/src/components/Button.svelte
View File

@ -29,14 +29,10 @@
export let width: string | undefined = undefined export let width: string | undefined = undefined
</script> </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} {#if icon && !loading}
<div class="icon"> <div class="scale-75 icon">
{#if typeof (icon) === 'string'}
<Icon {icon} size={'small'}/> <Icon {icon} size={'small'}/>
{:else}
<svelte:component this={icon} size={'small'} />
{/if}
</div> </div>
{/if} {/if}
{#if loading} {#if loading}
@ -55,13 +51,9 @@
background-color: var(--theme-button-bg-enabled); background-color: var(--theme-button-bg-enabled);
color: var(--theme-caption-color); color: var(--theme-caption-color);
border: 1px solid var(--theme-button-border-enabled); border: 1px solid var(--theme-button-border-enabled);
border-radius: 0.75rem; border-radius: .75rem;
.icon { .icon { margin-right: .375rem; }
margin-right: .375rem;
transform-origin: center center;
transform: scale(.75);
}
&:hover { &:hover {
background-color: var(--theme-button-bg-hovered); 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 { .primary {
color: var(--primary-button-color); color: var(--primary-button-color);
background-color: var(--primary-button-enabled); background-color: var(--primary-button-enabled);
@ -103,66 +110,14 @@
box-shadow: none; box-shadow: none;
} }
&:disabled { &:disabled {
color: var(--theme-content-dark-color);
background-color: var(--primary-button-disabled); background-color: var(--primary-button-disabled);
border-color: var(--primary-button-border); border-color: var(--primary-button-border);
color: rgb(var(--theme-caption-color) / 60%);
cursor: not-allowed; cursor: not-allowed;
} }
} }
.transparent.primary:disabled {
.transparent { background-color: var(--theme-button-trans-primary-disabled);
padding: 0 1.25rem; border-color: transparent;
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);
}
}
} }
</style> </style>

26
packages/ui/src/components/CircleButton.svelte
View File

@ -25,24 +25,17 @@
export let primary: boolean = false export let primary: boolean = false
</script> </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"> <div class="content">
{#if typeof (icon) === 'string'}
<Icon {icon} size={'small'} /> <Icon {icon} size={'small'} />
{:else}
<svelte:component this={icon} size={'small'} />
{/if}
</div> </div>
</div> </div>
<style lang="scss"> <style lang="scss">
.icon-button { .icon-button {
display: flex; color: var(--theme-caption-color);
justify-content: center; border: 1px solid var(--theme-circle-border);
align-items: center;
border: 1px solid var(--theme-card-divider);
border-radius: 50%; border-radius: 50%;
backdrop-filter: blur(3px);
cursor: pointer; cursor: pointer;
.content { .content {
@ -50,16 +43,9 @@
transform: scale(.75); transform: scale(.75);
pointer-events: none; pointer-events: none;
} }
&:hover {
color: var(--theme-caption-color); &.selected { background-color: var(--theme-circle-select); }
border-color: var(--theme-bg-focused-border); &.transparent { background-color: var(--theme-circle-trans); }
}
&: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); }
&.primary { &.primary {
color: var(--primary-button-color); color: var(--primary-button-color);
background-color: var(--primary-button-enabled); background-color: var(--primary-button-enabled);

8
packages/ui/src/components/Spinner.svelte
View File

@ -19,12 +19,12 @@
<div class="spinner spinner-{size}"> <div class="spinner spinner-{size}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <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"/> <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"> <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="0" y1="22" x2="0" y2="2">
<stop offset="0" stop-color="#fff"/> <stop offset="0" stop-color={'var(--theme-caption-color)'} />
<stop offset="1" stop-color="#fff" stop-opacity="0"/> <stop offset="1" stop-color={'var(--theme-caption-color)'} stop-opacity="0" />
</linearGradient> </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)"/> <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> </svg>
</div> </div>

32
packages/ui/src/components/Toggle.svelte
View File

@ -25,6 +25,8 @@
<style lang="scss"> <style lang="scss">
.toggle { .toggle {
display: inline-block; display: inline-block;
width: 3.25rem;
min-width: 3.25rem;
height: 1.75rem; height: 1.75rem;
line-height: 1.75rem; line-height: 1.75rem;
vertical-align: middle; vertical-align: middle;
@ -42,43 +44,31 @@
&:checked + .toggle-switch { &:checked + .toggle-switch {
background-color: var(--theme-on-color); background-color: var(--theme-on-color);
&:before { &:before { left: calc(3.5rem - 1.625rem); }
left: 1.625rem;
}
}
&:not(:disabled) + .toggle-switch {
cursor: pointer;
} }
&:not(:disabled) + .toggle-switch { cursor: pointer; }
&:disabled + .toggle-switch { &:disabled + .toggle-switch {
filter: grayscale(70%); filter: grayscale(70%);
&:before { &:before { background: #eee; }
background: #eee;
} }
// &:focus-within + .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
} }
&:focus-within + .toggle-switch { // &:active > .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
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);
}
.toggle-switch { .toggle-switch {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 3.5rem; width: 3.5rem;
height: 1.875rem; height: 1.75rem;
border-radius: 3.125rem; border-radius: 3.125rem;
// vertical-align: top; // vertical-align: top;
background-color: var(--theme-off-color); background-color: var(--theme-off-color);
border: 1px solid rgba(0, 0, 0, .1); box-shadow: 1px 2px 7px rgba(119, 129, 142, 0.1);
transition: left .2s; transition: left .2s, background-color .2s;
&:before { &:before {
content: ''; content: '';
position: absolute; position: absolute;
top: .125rem; top: .125rem;
left: .25rem; left: .125rem;
display: inline-block; display: inline-block;
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;

2
packages/ui/src/components/icons/Activity.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
export let size: 'small' | 'medium' | 'large' export let size: 'small' | 'medium' | 'large'
const fill: string = 'var(--theme-caption-color)' const fill: string = 'currentColor'
</script> </script>
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">

2
packages/ui/src/components/icons/Add.svelte
View File

@ -4,5 +4,5 @@
</script> </script>
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> <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> </svg>

6
plugins/activity-resources/src/components/Activity.svelte
View File

@ -100,13 +100,13 @@
flex-shrink: 0; flex-shrink: 0;
padding: 0 2.5rem; padding: 0 2.5rem;
height: 4rem; height: 4rem;
border-bottom: 1px solid var(--theme-card-divider); border-bottom: 1px solid var(--theme-zone-bg);
.icon { .icon {
margin-right: 1rem; margin-right: 1rem;
width: 2.25rem; width: 2.25rem;
height: 2.25rem; height: 2.25rem;
color: var(--theme-caption-color); color: var(--primary-button-color);
background-color: var(--primary-button-enabled); background-color: var(--primary-button-enabled);
border-radius: 50%; border-radius: 50%;
} }
@ -145,7 +145,7 @@
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 1.5rem 2.5rem; padding: 3rem 2.5rem;
height: max-content; height: max-content;
} }
} }

9
plugins/attachment-resources/src/components/Attachments.svelte
View File

@ -89,6 +89,7 @@
<CircleButton <CircleButton
icon={IconAdd} icon={IconAdd}
size={'small'} size={'small'}
selected
on:click={() => { on:click={() => {
inputFile.click() inputFile.click()
}} }}
@ -141,7 +142,7 @@
flex-direction: column; flex-direction: column;
.title { .title {
margin-right: 0.75rem; margin-right: .75rem;
font-weight: 500; font-weight: 500;
font-size: 1.25rem; font-size: 1.25rem;
color: var(--theme-caption-color); color: var(--theme-caption-color);
@ -151,8 +152,8 @@
.zone-container { .zone-container {
padding: 1rem; padding: 1rem;
color: var(--theme-caption-color); color: var(--theme-caption-color);
background: rgba(255, 255, 255, 0.03); background: var(--theme-bg-accent-color);
border: 1px dashed rgba(255, 255, 255, 0.16); border: 1px dashed var(--theme-zone-border-lite);
border-radius: 0.75rem; border-radius: .75rem;
} }
</style> </style>

2
plugins/recruit-resources/src/components/Applications.svelte
View File

@ -41,7 +41,7 @@
<div class="applications-container"> <div class="applications-container">
<div class="flex-row-center"> <div class="flex-row-center">
<div class="title">Applications</div> <div class="title">Applications</div>
<CircleButton icon={IconAdd} size={'small'} on:click={createApp} /> <CircleButton icon={IconAdd} size={'small'} selected on:click={createApp} />
</div> </div>
{#if applications.length > 0} {#if applications.length > 0}
<Table <Table

11
plugins/recruit-resources/src/components/CreateCandidate.svelte
View File

@ -157,7 +157,7 @@
{/if} {/if}
</div> </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:dragover|preventDefault={ () => { dragover = true } }
on:dragleave={ () => { dragover = false } } on:dragleave={ () => { dragover = false } }
on:drop|preventDefault|stopPropagation={drop}> on:drop|preventDefault|stopPropagation={drop}>
@ -213,15 +213,10 @@
.resume { .resume {
margin-top: 1rem; margin-top: 1rem;
padding: .75rem; padding: .75rem;
background: rgba(255, 255, 255, .05); background: var(--theme-zone-bg);
border: 1px dashed rgba(255, 255, 255, .2); border: 1px dashed var(--theme-zone-border);
border-radius: .5rem; border-radius: .5rem;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
&.solid { border-style: solid; } &.solid { border-style: solid; }
} }
// .resume a {
// font-size: .75rem;
// color: var(--theme-content-dark-color);
// &:hover { color: var(--theme-content-color); }
// }
</style> </style>

35
plugins/recruit-resources/src/components/EditCandidate.svelte
View File

@ -16,7 +16,7 @@
<script lang="ts"> <script lang="ts">
import { createEventDispatcher } from 'svelte' import { createEventDispatcher } from 'svelte'
import type { Ref } from '@anticrm/core' 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 { getClient, createQuery, Channels, AttributeEditor, AttributesBar, Avatar } from '@anticrm/presentation'
import { Panel } from '@anticrm/panel' import { Panel } from '@anticrm/panel'
import type { Candidate } from '@anticrm/recruit' import type { Candidate } from '@anticrm/recruit'
@ -57,6 +57,11 @@
function lastNameChange() { function lastNameChange() {
client.updateDoc(recruit.class.Candidate, object.space, object._id, { name: combineName(getFirstName(object.name), lastName) }) client.updateDoc(recruit.class.Candidate, object.space, object._id, { name: combineName(getFirstName(object.name), lastName) })
} }
const openActivity = (): void => {
rightSection = undefined
fullSize = true
}
</script> </script>
{#if object !== undefined} {#if object !== undefined}
@ -67,15 +72,20 @@
<div class="mr-8"> <div class="mr-8">
<Avatar avatar={object.avatar} size={'x-large'} /> <Avatar avatar={object.avatar} size={'x-large'} />
</div> </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="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="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="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="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} {#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) })} /> <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} {:else}
<Channels value={object.channels} size={'small'} on:click={(ev) => { <Channels value={object.channels} size={'small'} on:click={(ev) => {
if (ev.detail.presenter) { if (ev.detail.presenter) {
@ -84,10 +94,18 @@
} }
}} /> }} />
<div class="ml-1"> <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> </div>
{/if} {/if}
</div> </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>
</div> </div>
@ -112,8 +130,9 @@
margin-top: .25rem; margin-top: .25rem;
font-size: .75rem; font-size: .75rem;
} }
.channels { .separator {
margin-top: .75rem; margin: 1rem 0;
span { margin-left: .5rem; } height: 1px;
background-color: var(--theme-card-divider);
} }
</style> </style>

18
plugins/recruit-resources/src/components/YesNo.svelte
View File

@ -30,7 +30,7 @@
else if (value === false) value = undefined else if (value === false) value = undefined
else value = true 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"/> <circle fill="#fff" cx="8" cy="8" r="6"/>
{#if value === true} {#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 "/> <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"/> <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} {/if}
</svg> </svg>
<span><Label label={getLabel(value)} /></span> <div class="label"><Label label={getLabel(value)} /></div>
</div> </div>
<style lang="scss"> <style lang="scss">
.yesno-container { .yesno-container {
padding: .25rem .5rem .25rem .25rem; padding: .25rem .5rem .25rem .4rem;
max-width: fit-content; max-width: fit-content;
border-radius: 1.25rem; border-radius: 1.25rem;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
background-color: #77818E; background-color: var(--grayscale-grey-03);
&.yes { background-color: #60B96E; } &.yes { background-color: #60B96E; }
&.no { background-color: #F06C63; } &.no { background-color: #F06C63; }
span { .label {
width: 1.6rem; width: 1.4rem;
margin-left: .25rem; margin-left: .25rem;
text-transform: uppercase; text-transform: uppercase;
font-weight: 500; font-weight: 500;
font-size: .625rem; font-size: .625rem;
color: var(--theme-caption-color); color: #FFF;
} }
} }
.yesno-svg {
width: 1rem;
height: 1rem;
}
</style> </style>

6
plugins/view-resources/src/components/BooleanEditor.svelte
View File

@ -42,7 +42,7 @@
onChange(value) 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"/> <circle class:yes={value === true} class:no={value === false} cx="8" cy="8" r="6"/>
{#if value === true} {#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 "/> <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); color: var(--theme-caption-color);
} }
} }
.yesno-svg {
width: 1rem;
height: 1rem;
}
</style> </style>