wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-15 04:49:00 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Merge branch 'main' of github.com:hcengineering/anticrm into main

Browse Source
This commit is contained in:
Andrey Platov 2021-08-17 16:47:41 +02:00
commit d02a06fcfa
No known key found for this signature in database
GPG Key ID: C8787EFEB4B64AF0
61 changed files with 729 additions and 1102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,15 +17,35 @@
import chen from '../../img/chen.png'
export let avatar: any = chen
export let size: 16 | 24 | 32 | 34 | 36 | 88 = 24
export let size: 'x-small' | 'small' | 'medium' | 'large' | 'x-large'
</script>
<div class="avatar-container" style="width: {size}px; height: {size}px;">
<img style="width: {size}px; height: {size}px;" src={avatar} alt={''}/>
<div class="{size} container">
<img class={size} src={avatar} alt={''}/>
</div>
<style lang="scss">
.avatar-container {
.x-small {
width: 1.5rem;
height: 1.5rem;
}
.small {
width: 2rem;
height: 2rem;
}
.medium {
width: 2.25rem;
height: 2.25rem;
}
.large {
width: 5rem;
height: 5rem;
}
.x-large {
width: 10rem;
height: 10rem;
}
.container {
overflow: hidden;
border: 50%;
pointer-events: none;

59
packages/presentation/src/components/Backlink.svelte
View File

@ -23,50 +23,39 @@
</script>
<div class="comment-message">
<div class="avatar"><Avatar size={36} /></div>
<div class="message">
<div class="flex-nowrap">
<div class="avatar"><Avatar size={'medium'} /></div>
<div class="flex-col-stretch message">
<div class="header">Rosamund Chen<span>July 28th</span></div>
<div class="text"><MessageViewer message={backlink.message} /></div>
</div>
</div>
<style lang="scss">
.comment-message {
display: flex;
flex-wrap: nowrap;
.avatar {
margin-right: 1rem;
}
.message {
margin-right: 1.25rem;
.avatar {
width: 36px;
height: 36px;
margin-right: 16px;
.header {
margin-bottom: .25rem;
font-weight: 500;
font-size: 1rem;
line-height: 150%;
color: var(--theme-caption-color);
span {
margin-left: .5rem;
font-weight: 400;
font-size: .875rem;
color: var(--theme-content-dark-color);
}
}
.message {
display: flex;
flex-direction: column;
align-items: stretch;
margin-right: 20px;
.header {
margin-bottom: 4px;
font-weight: 500;
font-size: 16px;
line-height: 150%;
color: var(--theme-caption-color);
span {
margin-left: 8px;
font-weight: 400;
font-size: 14px;
color: var(--theme-content-dark-color);
}
}
.text {
font-size: 14px;
line-height: 150%;
color: var(--theme-content-color);
}
.text {
line-height: 150%;
color: var(--theme-content-color);
}
}
</style>

59
packages/presentation/src/components/Comment.svelte
View File

@ -34,50 +34,39 @@
</script>
<div class="comment-message">
<div class="avatar"><Avatar size={36} /></div>
<div class="message">
<div class="flex-nowrap">
<div class="avatar"><Avatar size={'medium'} /></div>
<div class="flex-col-stretch message">
<div class="header">{user.firstName} {user.lastName}<span>{message.createDate}</span></div>
<div class="text">{message.text}</div>
</div>
</div>
<style lang="scss">
.comment-message {
display: flex;
flex-wrap: nowrap;
.avatar {
margin-right: 1rem;
}
.message {
margin-right: 1.25rem;
.avatar {
width: 36px;
height: 36px;
margin-right: 16px;
.header {
margin-bottom: .25rem;
font-weight: 500;
font-size: 1rem;
line-height: 150%;
color: var(--theme-caption-color);
span {
margin-left: .5rem;
font-weight: 400;
font-size: .875rem;
color: var(--theme-content-dark-color);
}
}
.message {
display: flex;
flex-direction: column;
align-items: stretch;
margin-right: 20px;
.header {
margin-bottom: 4px;
font-weight: 500;
font-size: 16px;
line-height: 150%;
color: var(--theme-caption-color);
span {
margin-left: 8px;
font-weight: 400;
font-size: 14px;
color: var(--theme-content-dark-color);
}
}
.text {
font-size: 14px;
line-height: 150%;
color: var(--theme-content-color);
}
.text {
line-height: 150%;
color: var(--theme-content-color);
}
}
</style>

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

@ -19,7 +19,7 @@
import Comment from './Comment.svelte'
</script>
<Grid column={1} rowGap={24}>
<Grid column={1} rowGap={1.5}>
<Comment user={{firstName: 'Tim', lastName: 'Ferris'}}
message={{createDate: Date.now(), text: 'The Dark Lord has Nine. But we have One, mightier than they: the White Rider. Hero has passed through the fire and the abyss, and they shall fear him. mightier than they: the White Rider. Hero has passed through the fire and the abyss, and they shall fear him.'}}
/>

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

@ -15,7 +15,7 @@
<script lang="ts">
import type { IntlString } from '@anticrm/platform'
import { PopupMenu, Label } from '@anticrm/ui'
import { PopupMenu, Label, EditWithIcon, IconSearch } from '@anticrm/ui'
import Avatar from './Avatar.svelte'
import UserInfo from './UserInfo.svelte'
import Add from './icons/Add.svelte'
@ -40,18 +40,18 @@
$: query.query(_class, {}, result => { objects = result })
</script>
<div class="userBox">
<div class="flex-row-center">
<PopupMenu bind:show={show}>
<button
slot="trigger"
class="btn"
class="focused-button btn"
class:selected={show}
on:click|preventDefault={() => {
show = !show
}}
>
{#if selected}
<Avatar size={34} />
<Avatar size={'medium'} />
{:else}
<div class="icon">
{#if show}<Close size={'small'} />{:else}<Add size={'small'} />{/if}
@ -61,7 +61,7 @@
<div class="header">
<div class="title"><Label label={title} /></div>
<input class="searchBox" type="text" bind:value={search} placeholder="Search..." />
<EditWithIcon icon={IconSearch} bind:value={search} placeholder={'Search...'} />
<div class="caption"><Label label={caption} /></div>
</div>
@ -70,138 +70,64 @@
selected = person
value = person._id
show = !show
}}><UserInfo value={person}/></button>
}}><UserInfo size={'medium'} value={person} /></button>
{/each}
</PopupMenu>
<div class="selectUser">
<div class="title"><Label label={title} /></div>
<div class="user">
<div class="caption-color">
{#if selected}{selected.firstName + ' ' + selected.lastName}{:else}<Label label={'Not selected'} />{/if}
</div>
</div>
</div>
<style lang="scss">
.userBox {
display: flex;
flex-wrap: nowrap;
.btn {
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
border: none;
}
.btn {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
width: 36px;
height: 36px;
background-color: var(--theme-button-bg-focused);
border: 1px solid transparent;
border-radius: 50%;
outline: none;
cursor: pointer;
.icon {
width: 16px;
height: 16px;
opacity: 0.3;
}
&.selected {
background-color: var(--theme-button-bg-focused);
border: 1px solid var(--theme-bg-accent-color);
}
&:hover {
background-color: var(--theme-button-bg-pressed);
border: 1px solid var(--theme-bg-accent-color);
.icon {
opacity: 1;
}
}
&:focus {
border: 1px solid var(--primary-button-focused-border);
box-shadow: 0 0 0 3px var(--primary-button-outline);
.icon {
opacity: 1;
}
}
.header {
text-align: left;
.title {
margin-bottom: 1rem;
font-weight: 500;
color: var(--theme-caption-color);
}
.header {
text-align: left;
.title {
margin-bottom: 16px;
font-size: 14px;
font-weight: 500;
color: var(--theme-caption-color);
}
.searchBox {
position: relative;
display: flex;
flex-direction: column;
margin: 0;
padding: 12px 16px;
min-width: 220px;
height: 40px;
font-family: inherit;
font-size: 14px;
line-height: 17px;
color: var(--theme-caption-color);
background-color: var(--theme-bg-accent-color);
border: 1px solid var(--theme-bg-accent-hover);
border-radius: 12px;
outline: none;
&::placeholder {
color: var(--theme-content-trans-color);
}
&:focus {
background-color: var(--theme-bg-focused-color);
border-color: var(--theme-bg-focused-border);
}
}
.caption {
margin: 16px 0 10px 6px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
color: var(--theme-content-dark-color);
}
.caption {
margin: 1rem 0 .625rem .375rem;
font-size: .75rem;
font-weight: 600;
text-transform: uppercase;
color: var(--theme-content-dark-color);
}
}
.menu-item {
margin: 0;
padding: 6px;
font-family: inherit;
background-color: transparent;
border: 1px solid transparent;
border-radius: 8px;
outline: none;
cursor: pointer;
.menu-item {
justify-content: start;
padding: .375rem;
border-radius: .5rem;
&:hover {
background-color: var(--theme-button-bg-pressed);
border: 1px solid var(--theme-bg-accent-color);
}
&:focus {
border: 1px solid var(--primary-button-focused-border);
box-shadow: 0 0 0 3px var(--primary-button-outline);
z-index: 1;
}
&:hover {
background-color: var(--theme-button-bg-pressed);
border: 1px solid var(--theme-bg-accent-color);
}
&:focus {
border: 1px solid var(--primary-button-focused-border);
box-shadow: 0 0 0 3px var(--primary-button-outline);
z-index: 1;
}
}
.selectUser {
margin-left: 12px;
.title {
font-size: 12px;
font-weight: 500;
color: var(--theme-content-accent-color);
}
.user {
font-size: 14px;
color: var(--theme-caption-color);
}
.selectUser {
margin-left: .75rem;
.title {
font-size: .75rem;
font-weight: 500;
color: var(--theme-content-accent-color);
}
}
</style>

42
packages/presentation/src/components/UserInfo.svelte
View File

@ -20,42 +20,32 @@
export let value: Person
export let subtitle: string | undefined = undefined
export let size: 24 | 28 | 32 | 34 | 36 = 24
export let size: 'x-small' | 'small' | 'medium' | 'large' | 'x-large'
</script>
<div class="user-container">
<div class="flex-row-center">
<Avatar {size} />
<div class="user-info">
<div class="flex-col user-info">
{#if subtitle}<div class="subtitle">{subtitle}</div>{/if}
<div class="title">{value.firstName + ' ' + value.lastName}</div>
</div>
</div>
<style lang="scss">
.user-container {
display: flex;
align-items: center;
flex-wrap: nowrap;
.user-info {
margin-left: .5rem;
color: var(--theme-content-accent-color);
.user-info {
display: flex;
flex-direction: column;
margin-left: 8px;
font-family: inherit;
color: var(--theme-content-accent-color);
.subtitle {
font-size: 12px;
color: var(--theme-content-dark-color);
}
.title {
max-width: 150px;
font-weight: 500;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.subtitle {
font-size: .75rem;
color: var(--theme-content-dark-color);
}
.title {
font-weight: 500;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
</style>

11
packages/presentation/src/components/icons/Add.svelte
View File

@ -1,8 +1,11 @@
<script lang="ts">
export let size: number = 16
import { IconSize } from '@anticrm/ui'
export let size: 'small' | 'medium' | 'large'
const fill: string = 'var(--theme-caption-color)'
</script>
<svg width={size} height={size} {fill} xmlns="http://www.w3.org/2000/svg">
<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"/>
</svg>
<IconSize {size}>
<svg {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<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"/>
</svg>
</IconSize>

11
packages/presentation/src/components/icons/Close.svelte
View File

@ -1,8 +1,11 @@
<script lang="ts">
export let size: number = 16
import { IconSize } from '@anticrm/ui'
export let size: 'small' | 'medium' | 'large'
const fill: string = 'var(--theme-caption-color)'
</script>
<svg width={size} height={size} {fill} xmlns="http://www.w3.org/2000/svg">
<path d="M8.7,8l5.6-5.6c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0L8,7.3L2.4,1.6c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7L7.3,8l-5.6,5.6 c-0.2,0.2-0.2,0.5,0,0.7c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1L8,8.7l5.6,5.6c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1 c0.2-0.2,0.2-0.5,0-0.7L8.7,8z"/>
</svg>
<IconSize {size}>
<svg {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M8.7,8l5.6-5.6c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0L8,7.3L2.4,1.6c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7L7.3,8l-5.6,5.6 c-0.2,0.2-0.2,0.5,0,0.7c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1L8,8.7l5.6,5.6c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1 c0.2-0.2,0.2-0.5,0-0.7L8.7,8z"/>
</svg>
</IconSize>

4
packages/text-editor/src/components/MentionList.svelte
View File

@ -81,7 +81,7 @@ $: {
<div class="scroll">
{#each items as item, i}
<div class:selected={i === selected}>
<UserInfo size={36} value={item} />
<UserInfo size={'medium'} value={item} />
</div>
{/each}
</div>
@ -100,7 +100,7 @@ $: {
padding: 16px;
background-color: var(--theme-button-bg-hovered);
border: 1px solid var(--theme-bg-accent-hover);
border-radius: 12px;
border-radius: .75rem;
box-shadow: 0 20px 20px 0 rgba(0, 0, 0, .1);
.caption {

4
packages/text-editor/src/components/ReferenceInput.svelte
View File

@ -55,7 +55,7 @@
padding: 8px 16px;
background-color: var(--theme-bg-accent-color);
border: 1px solid var(--theme-bg-accent-color);
border-radius: 12px;
border-radius: .75rem;
.inputMsg {
display: flex;
@ -105,7 +105,7 @@
height: 20px;
background-color: transparent;
border: 1px solid transparent;
border-radius: 4px;
border-radius: .25rem;
outline: none;
cursor: pointer;

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

@ -18,6 +18,7 @@ button {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
font-size: inherit;
background-color: transparent;
@ -25,6 +26,13 @@ button {
outline: none;
cursor: pointer;
}
input {
font-family: inherit;
font-size: inherit;
background-color: transparent;
outline: none;
color: var(--theme-caption-color);
}
audio, canvas, embed, iframe, img, object, svg, video {
display: block;
vertical-align: middle;
@ -44,8 +52,26 @@ select:-webkit-autofill:focus {
background: transparent;
}
// input:-webkit-autofill,
// input:-webkit-autofill:hover,
// input:-webkit-autofill:focus,
// input:-webkit-autofill:active {
// -webkit-animation: autofill 0s forwards;
// }
// @-webkit-keyframes autofill {
// 100% {
// background: transparent;
// color: inherit;
// }
// }
/* Common */
.flex { display: flex; }
.flex-nowrap {
display: flex;
flex-wrap: nowrap;
}
.flex-center {
display: flex;
justify-content: center;
@ -56,9 +82,14 @@ select:-webkit-autofill:focus {
justify-content: space-between;
align-items: center;
}
.flex-stretch {
display: flex;
align-items: stretch;
}
.flex-row-center {
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.flex-row-reverse {
display: flex;
@ -74,9 +105,43 @@ select:-webkit-autofill:focus {
flex-direction: column;
align-items: center;
}
.flex-col-stretch {
display: flex;
flex-direction: column;
align-items: stretch;
}
.h-full { height: 100%; }
.square-36 { width: 2.25rem; height: 2.25rem; }
/* --------- */
.hidden-text {
position: absolute;
visibility: hidden;
overflow: hidden;
white-space: pre-wrap;
}
.focused-button {
background-color: var(--theme-button-bg-focused);
border: 1px solid transparent;
& > .icon { opacity: .3; }
&.selected {
background-color: var(--theme-button-bg-focused);
border: 1px solid var(--theme-bg-accent-color);
}
&:hover {
background-color: var(--theme-button-bg-pressed);
border: 1px solid var(--theme-bg-accent-color);
& > .icon { opacity: 1; }
}
&:focus {
border: 1px solid var(--primary-button-focused-border);
box-shadow: 0 0 0 3px var(--primary-button-outline);
& > .icon { opacity: 1; }
}
}
/* Backgrounds & Colors */
.background-theme-bg-color { background-color: var(--theme-bg-color); }
.background-highlight-red { background-color: var(--highlight-red); }

112
packages/theme/styles/_tailwind.scss
View File

@ -1,112 +0,0 @@
//
// Copyright © 2021 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.
//
/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.top-3 { top: .75rem }
.right-3 { right: .75rem }
/* Width & Height */
.w-0 { width: 0; }
.w-2 { width: .5rem; }
.w-9 { width: 2.25rem; }
.w-10 { width: 2.5rem; }
.w-13 { width: 3.25rem; } // our
.w-20 { width: 5rem; }
.w-72 { width: 18rem; }
.w-full { width: 100%; }
.h-0 { height: 0; }
.h-2 { height: .5rem; }
.h-9 { height: 2.25rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-13 { height: 3.25rem; } // our
.h-18 { height: 4.5rem; } // our
.h-auto { height: auto; }
.h-px { height: 1px; }
.h-screen { height: 100vh; }
/* Spacing */
.mr-2 { margin-right: .5rem; }
.mb-2 { margin-bottom: .5rem; }
.mx-3 { margin-left: .75rem; margin-right: .75rem; }
.mr-3 { margin-right: .75rem; }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
.mr-4 { margin-right: 1rem; }
.my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mx-10 { margin-left: 2.5rem; margin-right: 2.5rem; }
.ml-11 { margin-left: 2.75rem; }
.p-0 { padding: 0; }
.pb-5 { padding-bottom: 1.25rem; }
.pr-8 { padding-right: 2rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.pl-10 { padding-left: 2.5rem; }
/* Flex */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row-reverse { flex-direction: row-reverse; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.items-center { align-items: center; }
.flex-grow { flex-grow: 1; }
/* Grid */
.grid { display: grid; }
.grid-flow-col { grid-auto-flow: column; }
.auto-cols-min { grid-auto-columns: min-content; }
.gap-3 { gap: .75rem; }
/* Typography */
.text-xs { font-size: .75rem; }
.text-sm { font-size: .875rem; }
.text-base { font-size: 1rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.text-center { text-align: center; }
.whitespace-nowrap { white-space: nowrap; }
.overflow-ellipsis { text-overflow: ellipsis; }
/* Borders */
.rounded { border-radius: .25rem; }
.rounded-lg { border-radius: .5rem; }
.rounded-xl { border-radius: .75rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 100%; }
.border { border-width: 1px; }
.border-solid { border-style: solid; }
.border-transparent { border-color: transparent; }
.outline-none { outline: none; }
/* Backgrounds & Colors */
.bg-transparent { background-color: transparent; }
.opacity-30 { opacity: .3; }
.opacity-60 { opacity: .6; }
/* Others */
.border-box { box-sizing: border-box; }
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.overflow-hidden { overflow: hidden; }
.select-none { user-select: none; }
.visible { visibility: visible; }
.invisible { visibility: hidden; }

7
packages/theme/styles/global.scss
View File

@ -14,7 +14,6 @@
//
@import "./_colors.scss";
@import "./_tailwind.scss";
@import "./_layouts.scss";
@font-face {
@ -72,15 +71,15 @@
}
::-webkit-scrollbar-thumb {
background-color: var(--theme-scroll-bar);
border-radius: 4px;
border-radius: .25rem;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--theme-scroll-bar);
border-radius: 4px;
border-radius: .25rem;
}
::-webkit-scrollbar-corner {
background-color: var(--theme-scroll-bar);
border-radius: 4px;
border-radius: .25rem;
}
.normal-font { font-size: 16px; }

2
packages/ui/src/components/ActionIcon.svelte
View File

@ -42,7 +42,7 @@
<style lang="scss">
.button {
border-radius: 4px;
border-radius: .125rem;
.icon {
opacity: .3;

10
packages/ui/src/components/CheckBox.svelte
View File

@ -29,8 +29,8 @@
<style lang="scss">
.checkbox {
display: inline-block;
width: 16px;
height: 16px;
width: 1rem;
height: 1rem;
.chBox {
position: absolute;
@ -66,9 +66,9 @@
}
}
.checkSVG {
width: 16px;
height: 16px;
border-radius: 4px;
width: 1rem;
height: 1rem;
border-radius: .25rem;
.back {
fill: var(--theme-button-bg-hovered);

63
packages/ui/src/components/CheckBoxList.svelte
View File

@ -12,36 +12,49 @@
// See the License for the specific language governing permissions and
// limitations under the License.
-->
<script lang="ts">
import { createEventDispatcher } from 'svelte'
import type { IntlString } from '@anticrm/platform'
import CheckBoxWithLabel from './CheckBoxWithLabel.svelte'
import Label from './Label.svelte'
import Add from './icons/Add.svelte'
export let label: IntlString
export let items: Array<Object> = [
{ id: 0, label: '15 minute phone call', done: true },
{ id: 1, label: 'Follow up email', done: false },
{ id: 2, label: 'First round interview', done: false },
{ id: 3, label: 'Follow up email', done: false },
{ id: 4, label: 'Second round interview', done: false },
{ id: 5, label: 'Third round interview', done: false },
export let items: Array<Object>
= [
{ description: '15 minute phone call', done: true },
{ description: 'Follow up email', done: false },
{ description: 'First round interview', done: false },
{ description: 'Follow up email', done: false },
{ description: 'Second round interview', done: false },
{ description: 'Third round interview', done: false },
]
export let editable: boolean = false
const dispatch = createEventDispatcher()
</script>
<div class="checkbox-list">
{#each items as item}
<div class="list-item"><CheckBoxWithLabel bind:label={item.label} bind:checked={item.done} {editable} /></div>
<div class="list-item">
<CheckBoxWithLabel
bind:label={item.description}
bind:checked={item.done}
{editable}
on:change={() => {
dispatch('change', item)
}}
/>
</div>
{/each}
<div class="add-item"
<div
class="add-item"
on:click={() => {
items.push({ id: Date.now(), label: 'New item', done: false })
items.push({ description: 'New item', done: false })
items = items
}}
>
<div class="icon"><Add /></div>
<div class="icon"><Add size={'small'} /></div>
<div class="label"><Label {label} /></div>
</div>
</div>
@ -51,34 +64,24 @@
display: flex;
flex-direction: column;
align-items: stretch;
margin: 0 16px;
.list-item + .list-item {
margin-top: 20px;
}
margin: 0 1rem;
.list-item + .list-item { margin-top: 1.25rem; }
.add-item {
display: flex;
align-items: center;
margin-top: 20px;
margin-top: 1.25rem;
cursor: pointer;
.icon {
width: 16px;
height: 16px;
opacity: .6;
}
.icon { opacity: .6; }
.label {
margin-left: 16px;
margin-left: 1rem;
color: var(--theme-content-color);
}
&:hover {
.icon {
opacity: 1;
}
.label {
color: var(--theme-caption-color);
}
.icon { opacity: 1; }
.label { color: var(--theme-caption-color); }
}
}
}

117
packages/ui/src/components/CheckBoxWithLabel.svelte
View File

@ -12,8 +12,8 @@
// See the License for the specific language governing permissions and
// limitations under the License.
-->
<script lang="ts">
import { createEventDispatcher } from 'svelte'
import { onMount } from 'svelte'
import type { IntlString } from '@anticrm/platform'
import CheckBox from './CheckBox.svelte'
@ -25,7 +25,6 @@
let text: HTMLElement
let input: HTMLInputElement
let onEdit: boolean = false
let goOut: boolean = false
$: {
if (text && input) {
@ -53,83 +52,99 @@
}
}
function computeSize(t: EventTarget | null) {
function convertRemToPx(rem: number) {
return rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
}
function computeSize (t: EventTarget | null) {
const target = t as HTMLInputElement
const value = target.value
const value = target.value.charCodeAt(target.value.length - 1) === 10 ? convertRemToPx(1.125) : 0
text.innerHTML = label.replaceAll(' ', '&nbsp;')
target.style.width = text.clientWidth + 12 + 'px'
target.style.height = text.clientHeight + value + convertRemToPx(.5) + 'px'
}
onMount(() => {
computeSize(input)
})
const dispatch = createEventDispatcher()
function changeItem () {
dispatch('change', { checked, label })
}
</script>
<svelte:window on:mousedown={waitClick} />
<div class="checkBox-container">
<CheckBox bind:checked={checked} />
<div class="label"
<div class="flex-stretch">
<div style="margin-top: 1px;">
<CheckBox bind:checked on:change={changeItem} />
</div>
<div
class="label"
on:click={() => {
if (editable) {
onEdit = true
}
}}
>
<input bind:this={input} type="text" bind:value={label}
<textarea
bind:this={input}
type="text"
bind:value={label}
class="edit-item"
on:input={(ev) => ev.target && computeSize(ev.target)}
on:change={changeItem}
/>
<div class="text" class:checked bind:this={text}>{label}</div>
<div class="hidden-text text" class:checked bind:this={text}>{label}</div>
</div>
</div>
<style lang="scss">
.checkBox-container {
display: flex;
align-items: center;
.label {
position: relative;
margin-left: 1rem;
width: 100%;
color: var(--theme-caption-color);
.label {
position: relative;
margin-left: 16px;
.edit-item {
width: 100%;
min-height: 1.25rem;
height: minmax(1.25rem, auto);
margin: -.25rem;
padding: .125rem;
font-family: inherit;
font-size: inherit;
color: var(--theme-caption-color);
background-color: transparent;
border: .125rem solid transparent;
border-radius: .125rem;
outline: none;
overflow-y: scroll;
resize: none;
overflow-wrap: break-word;
.edit-item {
max-width: 100%;
height: 21px;
margin: -3px;
padding: 2px;
font-family: inherit;
font-size: 14px;
line-height: 150%;
color: var(--theme-caption-color);
background-color: transparent;
border: 1px solid transparent;
border-radius: 2px;
outline: none;
&:focus {
border-color: var(--primary-button-enabled);
}
&::-webkit-contacts-auto-fill-button,
&::-webkit-credentials-auto-fill-button {
visibility: hidden;
display: none !important;
pointer-events: none;
height: 0;
width: 0;
margin: 0;
}
&:focus {
border-color: var(--primary-button-enabled);
}
.text {
position: absolute;
top: 0;
left: 0;
&.checked {
text-decoration: line-through;
color: var(--theme-content-dark-color);
}
&::-webkit-contacts-auto-fill-button,
&::-webkit-credentials-auto-fill-button {
visibility: hidden;
display: none !important;
pointer-events: none;
height: 0;
width: 0;
margin: 0;
}
}
.text {
top: 0;
width: 100%;
text-overflow: ellipsis;
overflow-wrap: break-word;
&.checked {
text-decoration: line-through;
color: var(--theme-content-dark-color);
}
}
}

192
packages/ui/src/components/DatePicker.svelte
View File

@ -56,11 +56,11 @@
}
</script>
<div class="dataPicker">
<div class="flex-row-center">
<PopupMenu bind:show={show}>
<button
slot="trigger"
class="btn"
class="focused-button btn"
class:selected={show}
on:click|preventDefault={() => {
show = !show
@ -71,11 +71,11 @@
</div>
</button>
<div class="header">
<div class="flex-col caption-color">
<div class="title"><Label label={title} /></div>
<div class="nav">
<div class="flex-between nav">
<button
class="btn arrow"
class="focused-button arrow"
on:click|preventDefault={() => {
view.setMonth(view.getMonth() - 1)
view = view
@ -84,7 +84,7 @@
{monthYear}
</div>
<button
class="btn arrow"
class="focused-button arrow"
on:click|preventDefault={() => {
view.setMonth(view.getMonth() + 1)
view = view
@ -118,7 +118,7 @@
</div>
</PopupMenu>
<div class="selectDate">
<div class="title"><Label label={title} /></div>
<div class="label"><Label label={title} /></div>
<div class="date">
{selected.getMonth() + 1} / {selected.getDate()} / {selected.getFullYear()}
</div>
@ -126,139 +126,73 @@
</div>
<style lang="scss">
.dataPicker {
display: flex;
flex-wrap: nowrap;
.btn {
width: 2.25rem;
height: 2.25rem;
border-radius: .5rem;
border: none;
}
.btn {
.arrow {
width: 2rem;
height: 2rem;
border: 1px solid var(--theme-bg-accent-color);
border-radius: .25rem;
}
.title {
margin-bottom: .75rem;
font-weight: 500;
text-align: left;
}
.nav {
min-width: 16.5rem;
.monthYear {
margin: 0 1rem;
line-height: 150%;
white-space: nowrap;
}
}
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: .125rem;
margin-top: .5rem;
.caption, .day {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
width: 36px;
height: 36px;
background-color: var(--theme-button-bg-focused);
border: 1px solid transparent;
border-radius: 8px;
outline: none;
width: 2.25rem;
height: 2.25rem;
color: var(--theme-content-dark-color);
}
.caption {
font-size: .75rem;
}
.day {
border-radius: .5rem;
cursor: pointer;
.icon {
display: flex;
justify-content: center;
align-items: center;
width: 20px;
height: 20px;
opacity: 0.3;
}
&.arrow {
width: 32px;
height: 32px;
border: 1px solid var(--theme-bg-accent-color);
border-radius: 4px;
.icon {
width: 16px;
height: 16px;
}
}
&.selected {
background-color: var(--theme-button-bg-focused);
border: 1px solid var(--theme-bg-accent-color);
.icon {
opacity: 0.6;
}
}
&:hover {
background-color: var(--theme-button-bg-pressed);
border: 1px solid var(--theme-bg-accent-color);
.icon {
opacity: 1;
}
}
&:focus {
border: 1px solid var(--primary-button-focused-border);
box-shadow: 0 0 0 3px var(--primary-button-outline);
.icon {
opacity: 1;
}
}
}
.header {
display: flex;
flex-direction: column;
color: var(--theme-caption-color);
.title {
margin-bottom: 12px;
font-size: 14px;
font-weight: 500;
text-align: left;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
min-width: 264px;
.monthYear {
margin: 0 16px;
line-height: 150%;
white-space: nowrap;
}
}
}
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
margin-top: 8px;
.caption {
display: flex;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
font-size: 12px;
color: var(--theme-content-dark-color);
}
.day {
display: flex;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
font-family: inherit;
color: var(--theme-content-dark-color);
border-radius: 8px;
cursor: pointer;
&.selected {
background-color: var(--theme-button-bg-focused);
border: 1px solid var(--theme-bg-accent-color);
color: var(--theme-caption-color);
}
}
}
.selectDate {
margin-left: 12px;
.title {
font-size: 12px;
font-weight: 500;
color: var(--theme-content-accent-color);
}
.date {
font-size: 14px;
color: var(--theme-caption-color);
}
}
}
.selectDate {
margin-left: .75rem;
.label {
font-size: .75rem;
font-weight: 500;
color: var(--theme-content-accent-color);
}
.date {
color: var(--theme-caption-color);
}
}
</style>

41
packages/ui/src/components/Dialog.svelte
View File

@ -33,7 +33,7 @@
<div class="dialog-container">
<form class="dialog" on:submit|preventDefault={() => { okAction(); dispatch('close') }}>
<div class="header">
<div class="flex-between header">
<div class="title"><Label {label}/></div>
<div class="tool" on:click={() => { dispatch('close') }}><Close size={'small'}/></div>
</div>
@ -54,7 +54,7 @@
justify-content: space-between;
flex-direction: row-reverse;
width: 100vw;
max-height: 100vh;
min-height: 100vh;
height: 100vh;
.dialog {
@ -63,45 +63,38 @@
min-width: 40%;
max-width: 80%;
width: auto;
max-height: 100vh;
min-height: 100vh;
height: 100vh;
background-color: var(--theme-bg-color);
border-radius: 30px 0 0 30px;
box-shadow: 0px 50px 120px rgba(0, 0, 0, 0.4);
border-radius: 1.875rem 0 0 1.875rem;
box-shadow: 0px 3.125rem 7.5rem rgba(0, 0, 0, .4);
.header {
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
padding: 0 32px 0 40px;
height: 72px;
padding: 0 2rem 0 2.5rem;
height: 4.5rem;
.title {
flex-grow: 1;
font-weight: 500;
font-size: 18px;
font-size: 1.125rem;
color: var(--theme-caption-color);
user-select: none;
}
.tool {
width: 16px;
height: 16px;
margin-left: 12px;
margin-left: .75rem;
opacity: .4;
cursor: pointer;
&:hover {
opacity: 1;
}
&:hover { opacity: 1; }
}
}
.content {
flex-shrink: 0;
width: 640px;
margin: 0 40px;
height: calc(100vh - 168px);
width: 40rem;
margin: 0 2.5rem;
height: calc(100vh - 10.5rem);
}
.footer {
@ -110,10 +103,10 @@
flex-direction: row-reverse;
align-items: center;
flex-shrink: 0;
gap: 12px;
padding: 0 40px;
height: 96px;
mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 1) 40px);
gap: .75rem;
padding: 0 2.5rem;
height: 6rem;
mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem);
}
}
}

40
packages/ui/src/components/EditBox.svelte
View File

@ -32,7 +32,7 @@
const target = t as HTMLInputElement
const value = target.value
text.innerHTML = (value === '' ? placeholder : value).replaceAll(' ', '&nbsp;')
target.style.width = text.clientWidth + 8 + 'px'
target.style.width = text.clientWidth + (parseFloat(getComputedStyle(document.documentElement).fontSize) * .5) + 'px'
}
onMount(() => {
@ -44,10 +44,10 @@
})
</script>
<div class="editbox" style="min-width: ; {width ? 'width: ' + width : ''}"
<div class="flex-col" style="{width ? 'width: ' + width : ''}"
on:click={() => { input.focus() }}
>
<div class="text" bind:this={text}></div>
<div class="hidden-text" bind:this={text}></div>
{#if label}<div class="label"><Label label={label}/></div>{/if}
{#if password}
<input bind:this={input} type="password" bind:value {placeholder} on:input={(ev) => ev.target && computeSize(ev.target)} />
@ -57,22 +57,9 @@
</div>
<style lang="scss">
.editbox {
display: flex;
flex-direction: column;
min-width: 50px;
height: auto;
.text {
position: absolute;
visibility: hidden;
overflow: hidden;
white-space: pre-wrap;
}
.label {
margin-bottom: 4px;
font-size: 12px;
margin-bottom: .25rem;
font-size: .75rem;
font-weight: 500;
color: var(--theme-caption-color);
opacity: .8;
@ -81,17 +68,11 @@
}
input {
max-width: 100%;
height: 21px;
margin: -4px;
padding: 2px;
font-family: inherit;
font-size: inherit;
color: var(--theme-caption-color);
background-color: transparent;
border: 2px solid transparent;
border-radius: 2px;
outline: none;
height: 1.25rem;
margin: -.25rem;
padding: .125rem;
border: .125rem solid transparent;
border-radius: .125rem;
&:focus {
border-color: var(--primary-button-enabled);
@ -110,5 +91,4 @@
margin: 0;
}
}
}
</style>

22
packages/ui/src/components/EditWithIcon.svelte
View File

@ -39,27 +39,21 @@
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
min-width: 268px;
height: 40px;
min-width: 16.75rem;
height: 2.5rem;
background-color: var(--theme-bg-focused-color);
border: 1px solid var(--theme-bg-accent-color);
border-radius: 8px;
border-radius: .5rem;
&:focus-within {
border-color: var(--theme-bg-focused-border);
}
input {
width: 100%;
height: 40px;
margin: 0;
padding: 10px 12px;
font-family: inherit;
color: var(--theme-caption-color);
background-color: transparent;
outline: none;
height: 2.5rem;
padding-left: .75rem;
border: none;
border-radius: 8px;
border-radius: .5rem;
&::placeholder {
color: var(--theme-content-trans-color);
@ -67,9 +61,7 @@
}
.icon {
margin: 12px;
width: 16px;
height: 16px;
margin: .75rem;
opacity: .3;
}
}

10
packages/ui/src/components/Grid.svelte
View File

@ -14,10 +14,10 @@
-->
<script lang="ts">
export let column: number = 2
export let rowGap: number = 40
export let columnGap: number = 24
export let rowGap: number = 2.5
export let columnGap: number = 1.5
const style = `grid-template-columns: repeat(${column}, 1fr); row-gap: ${rowGap}px; column-gap: ${columnGap}px;`
const style = `grid-template-columns: repeat(${column}, 1fr); row-gap: ${rowGap}rem; column-gap: ${columnGap}rem;`
</script>
<div class="grid" {style}>
@ -28,7 +28,7 @@
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 40px;
column-gap: 24px;
row-gap: 2.5rem;
column-gap: 1.5rem;
}
</style>

40
packages/ui/src/components/PopupItem.svelte
View File

@ -47,63 +47,41 @@
<style lang="scss">
.popup-item {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
padding: 8px 12px;
height: 40px;
background-color: transparent;
border: 1px solid transparent;
border-radius: 8px;
outline: none;
cursor: pointer;
padding: .5rem .75rem;
height: 2.5rem;
border-radius: .5rem;
.title {
flex-grow: 1;
font-size: 14px;
line-height: 18px;
text-align: left;
color: var(--theme-content-accent-color);
}
.check {
margin-left: 12px;
width: 20px;
height: 20px;
margin-left: .75rem;
border-radius: 50%;
opacity: 0;
&.selected {
opacity: .8;
}
&.selected { opacity: .8; }
}
&:hover {
background-color: var(--theme-button-bg-pressed);
border: 1px solid var(--theme-bg-accent-color);
.title {
color: var(--theme-caption-color);
}
.title { color: var(--theme-caption-color); }
.check {
opacity: .2;
&.selected {
opacity: 1;
}
&.selected { opacity: 1; }
}
}
&:focus {
border: 1px solid var(--primary-button-focused-border);
box-shadow: 0 0 0 3px var(--primary-button-outline);
z-index: 1;
.title {
color: var(--theme-caption-color);
}
.title { color: var(--theme-caption-color); }
.check {
opacity: .2;
&.selected {
opacity: .8;
}
&.selected { opacity: .8; }
}
}
}

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

@ -48,21 +48,21 @@
scrolling = false
if (rectT.top > document.body.clientHeight - rectT.bottom) {
// Up
if (rectT.top - 20 - margin < rectP.height) {
if (rectT.top - 10 - margin < rectP.height) {
scrolling = true
popup.style.maxHeight = `${rectT.top - margin - 20}px`
popup.style.top = '20px'
popup.style.maxHeight = `${rectT.top - margin - 10}px`
popup.style.top = '10px'
} else popup.style.top = `${rectT.top - rectP.height - margin}px`
} else {
// Down
if (rectT.bottom + rectP.height + 20 + margin > document.body.clientHeight) {
if (rectT.bottom + rectP.height + 10 + margin > document.body.clientHeight) {
scrolling = true
popup.style.maxHeight = `${document.body.clientHeight - rectT.bottom - margin - 20}px`
popup.style.maxHeight = `${document.body.clientHeight - rectT.bottom - margin - 10}px`
}
popup.style.top = `${rectT.bottom + margin}px`
}
if (rectT.left + rectP.width + 20 > document.body.clientWidth) {
popup.style.left = `${document.body.clientWidth - rectP.width - 20}px`
if (rectT.left + rectP.width + 10 > document.body.clientWidth) {
popup.style.left = `${document.body.clientWidth - rectP.width - 10}px`
} else popup.style.left = `${rectT.left}px`
}
@ -93,7 +93,7 @@
</div>
<div class="popup" bind:this={popup}>
{#if show}
<div class="content" class:scrolling><slot /></div>
<div class="flex-col" class:scrolling><slot /></div>
{/if}
</div>
</div>
@ -104,22 +104,14 @@
visibility: hidden;
display: flex;
flex-direction: column;
padding: 16px;
padding: 1rem;
color: var(--theme-caption-color);
background-color: var(--theme-button-bg-hovered);
border: 1px solid var(--theme-button-border-enabled);
border-radius: 12px;
box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.6);
border-radius: .75rem;
box-shadow: 0px 1.25rem 3.75rem rgba(0, 0, 0, .6);
user-select: none;
z-index: 10;
.content {
display: flex;
flex-direction: column;
&.scrolling {
overflow-y: auto;
}
}
}
.scrolling { overflow-y: auto; }
</style>

10
packages/ui/src/components/Progress.svelte
View File

@ -24,24 +24,24 @@
if (value < min) value = min
</script>
<div class="progress-container">
<div class="container">
<div class="bar" style="background-color: {color}; width: calc(100% * {Math.round((value - min) / proc)} / 100);"/>
</div>
<style lang="scss">
.progress-container {
.container {
position: relative;
width: 100%;
height: 4px;
height: .25rem;
background-color: var(--theme-button-bg-hovered);
border-radius: 2px;
border-radius: .125rem;
.bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
border-radius: 2px;
border-radius: .125rem;
}
}
</style>

4
packages/ui/src/components/Row.svelte
View File

@ -15,9 +15,7 @@
<script lang="ts">
</script>
<div class="row">
<slot />
</div>
<div class="row"><slot /></div>
<style lang="scss">
.row {

18
packages/ui/src/components/ScrollBox.svelte
View File

@ -14,14 +14,14 @@
-->
<script lang="ts">
export let gap: number = 12
export let gap: number = .75
export let vertical: boolean = false
export let stretch: boolean = false
export let bothScroll: boolean = false
</script>
<div class="scroll" class:vertical={vertical} class:bothScroll={bothScroll}>
<div class="box" class:stretch={stretch} style="gap: {gap}px">
<div class="box" class:stretch={stretch} style="gap: {gap}rem">
<slot/>
</div>
</div>
@ -34,14 +34,14 @@
overflow-x: auto;
overflow-y: hidden;
margin-right: 0;
margin-bottom: -5px;
margin-bottom: -.75rem;
.box {
position: absolute;
display: grid;
grid-auto-flow: column;
padding: 0 0 5px 0;
gap: 24px;
padding: 0 0 .375rem 0;
gap: 1.5rem;
top: 0;
left: 0;
width: auto;
@ -52,12 +52,12 @@
}
&.vertical {
margin: 0 -10px 0 -10px;
margin: 0 -.5rem 0 -.5rem;
overflow-x: hidden;
overflow-y: auto;
.box {
grid-auto-flow: row;
padding: 0 10px 0 10px;
padding: 0 .5rem 0 .5rem;
width: 100%;
height: auto;
&.stretch {
@ -67,10 +67,10 @@
}
&.bothScroll {
margin: 0 -5px -5px 0;
margin: 0 -.375rem -.375rem 0;
overflow: auto;
.box {
padding: 0 5px 5px 0;
padding: 0 .375rem .375rem 0;
}
}
}

24
packages/ui/src/components/Section.svelte
View File

@ -25,7 +25,7 @@
export let closed: boolean = false
</script>
<div class="section-container"
<div class="flex-row-center section-container"
on:click|preventDefault={() => {
closed = !closed
}}
@ -34,39 +34,29 @@
<div class="title"><Label {label} /></div>
<div class="arrow">{#if closed}<ArrowUp size={'small'} />{:else}<ArrowDown size={'small'} />{/if}</div>
</div>
<div class="section-content" class:hidden={closed}><slot/></div>
{#if !closed }<div class="section-content"><slot/></div>{/if}
<style lang="scss">
.section-container {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
width: 100%;
height: 80px;
min-height: 80px;
height: 5rem;
min-height: 5rem;
cursor: pointer;
user-select: none;
.title {
flex-grow: 1;
margin-left: 12px;
margin-left: .75rem;
font-weight: 500;
color: var(--theme-caption-color);
}
.arrow {
margin: 8px;
margin: .5rem;
}
}
.section-content {
margin: 16px 0 54px;
margin: 1rem 0 3.5rem;
height: auto;
visibility: visible;
&.hidden {
margin: 0;
height: 0;
visibility: hidden;
}
}
:global(.section-container + .section-container),
:global(.section-content + .section-container) {

18
packages/ui/src/components/SelectBox.svelte
View File

@ -13,14 +13,14 @@
// limitations under the License.
-->
<script lang="ts">
export let gap: number = 12
export let gap: number = .75
export let vertical: boolean = false
export let stretch: boolean = false
export let bothScroll: boolean = false
</script>
<div class="scrollBox" class:vertical class:bothScroll>
<div class="box" class:stretch style="gap: {gap}px">
<div class="box" class:stretch style="gap: {gap}rem">
<slot />
</div>
</div>
@ -33,14 +33,14 @@
overflow-x: auto;
overflow-y: hidden;
margin-right: 0;
margin-bottom: -5px;
margin-bottom: -.375rem;
.box {
position: absolute;
display: grid;
grid-auto-flow: column;
padding: 0 0 5px 0;
gap: 24px;
padding: 0 0 .375rem 0;
gap: 1.5rem;
top: 0;
left: 0;
width: auto;
@ -51,11 +51,11 @@
}
&.vertical {
margin: 0 -10px 0 -10px;
margin: 0 -.75rem 0 -.75rem;
overflow-x: hidden;
overflow-y: auto;
.box {
padding: 0 10px 0 10px;
padding: 0 .75rem 0 .75rem;
width: 100%;
height: auto;
grid-auto-flow: row;
@ -66,10 +66,10 @@
}
&.bothScroll {
margin: 0 -5px -5px 0;
margin: 0 -.375rem -.375rem 0;
overflow: auto;
.box {
padding: 0 5px 5px 0;
padding: 0 .375rem .375rem 0;
}
}
}

35
packages/ui/src/components/SelectItem.svelte
View File

@ -26,8 +26,8 @@
export let item: IPopupItem
export let vAlign: 'top' | 'middle' | 'bottom' = 'bottom'
export let hAlign: 'left' | 'center' | 'right' = 'left'
export let margin: number = 16
export let gap: number = 8
export let margin: number = 1
export let gap: number = .5
let byTitle: boolean = (component) ? false : true
let pressed: boolean = false
@ -72,19 +72,13 @@
<style lang="scss">
.btn {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
margin: 0;
padding: 8px 12px;
padding: .5rem .75rem;
width: auto;
height: 40px;
height: 2.5rem;
background-color: var(--theme-button-bg-pressed);
border: 1px solid var(--theme-bg-accent-color);
border-radius: 12px;
outline: none;
cursor: pointer;
border-radius: .75rem;
.title {
flex-grow: 1;
@ -93,25 +87,8 @@
}
.icon {
width: 16px;
height: 16px;
margin-left: 12px;
margin-left: .75rem;
opacity: .8;
}
&:hover {
background-color: var(--theme-button-bg-pressed);
border: 1px solid var(--theme-bg-accent-color);
.icon {
opacity: 1;
}
}
&:focus {
border: 1px solid var(--primary-button-focused-border);
box-shadow: 0 0 0 3px var(--primary-button-outline);
.icon {
opacity: 1;
}
}
}
</style>

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

@ -12,8 +12,8 @@
<style lang="scss">
.spinner {
width: 24px;
height: 24px;
width: 1.5rem;
height: 1.5rem;
-webkit-animation: spinCircle 1s infinite linear;
animation: spinCircle 1s infinite linear;
}

11
packages/ui/src/components/StatusControl.svelte
View File

@ -23,20 +23,17 @@
</script>
{#if status.severity !== Severity.OK}
<div class="message-container" class:error={status.severity === Severity.ERROR}>
<div class="flex-row-center container" class:error={status.severity === Severity.ERROR}>
<StatusControl {status} />
</div>
{/if}
<style lang="scss">
.message-container {
display: flex;
flex-direction: row;
align-items: center;
padding: 12px 16px;
.container {
padding: .75rem 1rem;
background-color: var(--theme-bg-accent-color);
border: 1px solid var(--theme-bg-accent-hover);
border-radius: 8px;
border-radius: .5rem;
}
.error {

34
packages/ui/src/components/StylishEdit.svelte
View File

@ -26,9 +26,9 @@
<div class="editbox{error ? ' error' : ''}" style={width ? 'width: ' + width : ''}>
{#if password}
<input type="password" class:nolabel={!label} {id} bind:value on:change on:keyup placeholder=" " />
<input type="password" class:nolabel={!label} {id} bind:value on:change on:keyup autocomplete="off" placeholder=" " />
{:else}
<input type="text" class:nolabel={!label} {id} bind:value on:change on:keyup placeholder=" " />
<input type="text" class:nolabel={!label} {id} bind:value on:change on:keyup autocomplete="off" placeholder=" " />
{/if}
{#if label}
<div class="label"><Label {label} /></div>
@ -41,27 +41,22 @@
display: flex;
flex-direction: column;
padding: 0;
min-width: 50px;
height: 52px;
min-width: 3rem;
height: 3.25rem;
background-color: var(--theme-bg-accent-color);
border: 1px solid var(--theme-bg-accent-hover);
border-radius: 12px;
border-radius: .75rem;
&:focus-within {
background-color: var(--theme-bg-focused-color);
border-color: var(--theme-bg-focused-border);
}
input {
height: 52px;
height: 3.25rem;
margin: 0;
padding: 14px 20px 0px;
font-family: inherit;
color: var(--theme-caption-color);
padding: .875rem 1.25rem 0px;
background-color: transparent;
outline: none;
border: none;
border-radius: 12px;
font-size: 14px;
line-height: 17px;
border-radius: .75rem;
}
.nolabel {
padding-top: 0;
@ -69,19 +64,18 @@
.label {
position: absolute;
top: 18px;
left: 20px;
font-size: 12px;
line-height: 14px;
top: 1rem;
left: 1.25rem;
font-size: .75rem;
color: var(--theme-caption-color);
pointer-events: none;
opacity: 0.3;
opacity: .3;
transition: top 200ms;
pointer-events: none;
user-select: none;
}
input:focus + .label,
input:not(:placeholder-shown) + .label {
top: 10px;
top: .5rem;
}
}
.error {

27
packages/ui/src/components/Tabs.svelte
View File

@ -25,9 +25,9 @@
export let selected: IntlString = 'General'
</script>
<div class="tabs-container">
<div class="flex-stretch container">
{#each tabs as tab}
<div class="tab" class:selected={tab.title === selected}
<div class="flex-row-center tab" class:selected={tab.title === selected}
on:click={() => { selected = tab.title }}>
<Label label={tab.title}/>
</div>
@ -36,37 +36,32 @@
</div>
<style lang="scss">
.tabs-container {
display: flex;
flex-direction: row;
align-items: stretch;
.container {
flex-wrap: nowrap;
margin-bottom: 16px;
margin-bottom: 1rem;
width: 100%;
height: 72px;
min-height: 72px;
height: 4.5rem;
min-height: 4.5rem;
border-bottom: 1px solid var(--theme-menu-divider);
.tab {
display: flex;
align-items: center;
height: 72px;
height: 4.5rem;
color: var(--theme-content-trans-color);
cursor: pointer;
user-select: none;
&.selected {
border-top: 2px solid transparent;
border-bottom: 2px solid var(--theme-caption-color);
border-top: .125rem solid transparent;
border-bottom: .125rem solid var(--theme-caption-color);
color: var(--theme-caption-color);
cursor: default;
}
}
.tab + .tab {
margin-left: 40px;
margin-left: 2.5rem;
}
.grow {
min-width: 40px;
min-width: 2.5rem;
flex-grow: 1;
}
}

23
packages/ui/src/components/TextArea.svelte
View File

@ -33,31 +33,30 @@
.textarea {
display: flex;
flex-direction: column;
min-width: 50px;
min-height: 36px;
min-width: 3.125rem;
min-height: 2.25rem;
.label {
margin-bottom: 4px;
font-size: 12px;
margin-bottom: .25rem;
font-size: .75rem;
font-weight: 500;
color: var(--theme-caption-color);
opacity: .8;
color: var(--theme-content-accent-color);
pointer-events: none;
user-select: none;
}
textarea {
width: auto;
min-height: 70px;
margin: -3px;
padding: 2px;
min-height: 4.5rem;
margin: -.25rem;
padding: .125rem;
font-family: inherit;
font-size: 14px;
font-size: inherit;
line-height: 150%;
color: var(--theme-caption-color);
background-color: transparent;
border: 1px solid transparent;
border-radius: 2px;
border: .125rem solid transparent;
border-radius: .125rem;
outline: none;
overflow-y: scroll;
resize: none;

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

@ -25,10 +25,10 @@
<style lang="scss">
.toggle {
display: inline-block;
height: 28px;
line-height: 28px;
height: 1.75rem;
line-height: 1.75rem;
vertical-align: middle;
font-size: 14px;
font-size: inherit;
user-select: none;
.chBox {
position: absolute;
@ -43,7 +43,7 @@
&:checked + .toggle-switch {
background-color: var(--theme-on-color);
&:before {
transform: translateX(22px);
left: 1.625rem;
}
}
&:not(:disabled) + .toggle-switch {
@ -60,25 +60,28 @@
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 {
position: relative;
display: inline-block;
box-sizing: border-box;
width: 54px;
height: 30px;
border-radius: 50px;
vertical-align: top;
width: 3.5rem;
height: 1.875rem;
border-radius: 3.125rem;
// vertical-align: top;
background-color: var(--theme-off-color);
border: 1px solid transparent;
transition: .2s;
transition: left .2s;
&:before {
content: '';
position: absolute;
top: 2px;
left: 3px;
top: .125rem;
left: .25rem;
display: inline-block;
width: 24px;
height: 24px;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background: #fff;
box-shadow: 1px 2px 7px rgba(119, 129, 142, 0.1);

25
packages/ui/src/components/ToggleWithLabel.svelte
View File

@ -25,7 +25,7 @@
export let on: boolean = false
</script>
<div class="toggleWithLabel">
<div class="flex-between">
<div class="caption">
<Label {label} />
{#if description}
@ -36,21 +36,14 @@
</div>
<style lang="scss">
.toggleWithLabel {
display: flex;
justify-content: space-between;
align-items: center;
.caption {
margin-right: 16px;
font-size: 14px;
font-weight: 400;
color: var(--theme-caption-color);
user-select: none;
span {
display: block;
font-size: 12px;
opacity: .3;
}
.caption {
margin-right: 1rem;
color: var(--theme-caption-color);
user-select: none;
span {
display: block;
font-size: .75rem;
color: var(--theme-caption-trans-color);
}
}
</style>

51
packages/ui/src/components/Tooltip.svelte
View File

@ -18,10 +18,10 @@
import Label from './Label.svelte'
export let label: IntlString
export let direction: string = 'top'
export let direction: 'top' | 'bottom' | 'left' | 'right' = 'top'
</script>
<div class="tooltip-container">
<div class="flex-center container">
<div class="trigger"><slot/></div>
<div class="tooltip {direction}">
<Label label={label}/>
@ -29,37 +29,34 @@
</div>
<style lang="scss">
.tooltip-container {
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
.trigger:hover + .tooltip {
opacity: 1;
&.top {
transform: translateY(-10px);
transform: translateY(-.625rem);
}
&.bottom {
transform: translateY(10px);
transform: translateY(.625rem);
}
&.right {
transform: translateX(10px);
transform: translateX(.625rem);
}
&.left {
transform: translateX(-10px);
transform: translateX(-.625rem);
}
}
.tooltip {
box-sizing: border-box;
position: absolute;
padding: 8px;
padding: .5rem;
color: var(--theme-caption-color);
background-color: var(--theme-tooltip-color);
border: 1px solid var(--theme-bg-accent-color);
border-radius: 8px;
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.25);
border-radius: .5rem;
box-shadow: 0px .5rem 1.25rem rgba(0, 0, 0, .25);
opacity: 0;
transition: transform .3s ease, opacity .2s ease-in-out;
pointer-events: none;
@ -71,52 +68,52 @@
&::after {
content: "";
position: absolute;
width: 14px;
height: 14px;
width: .875rem;
height: .875rem;
background-color: var(--theme-tooltip-color);
border: 1px solid var(--theme-bg-accent-color);
border-radius: 0 0 3px;
mask-image: linear-gradient(-45deg, rgba(0, 0, 0, 1) 9px, rgba(0, 0, 0, 0) 9.1px);
border-radius: 0 0 .25rem;
mask-image: linear-gradient(-45deg, rgba(0, 0, 0, 1) .655rem, rgba(0, 0, 0, 0) .656rem);
}
&.top::after, &.bottom::after {
left: 50%;
margin-left: -8px;
margin-left: -.5rem;
}
&.top {
bottom: 100%;
box-shadow: 0px -8px 20px rgba(0, 0, 0, 0.25);
box-shadow: 0px -.5rem 1.25rem rgba(0, 0, 0, .25);
&::after {
bottom: -5px;
bottom: -.5rem;
transform: rotate(45deg);
}
}
&.bottom {
top: 100%;
box-shadow: 0px -8px 20px rgba(0, 0, 0, 0.25);
box-shadow: 0px -.5rem 1.25rem rgba(0, 0, 0, .25);
&::after {
top: -5px;
top: -.5rem;
transform: rotate(-135deg);
}
}
&.right::after, &.left::after {
top: 50%;
margin-top: -8px;
margin-top: -.5rem;
}
&.right {
left: 100%;
box-shadow: -8px 0px 20px rgba(0, 0, 0, 0.25);
box-shadow: -.5rem 0px 1.25rem rgba(0, 0, 0, .25);
&::after {
left: -5px;
left: -.4rem;
transform: rotate(135deg);
}
}
&.left {
right: 100%;
box-shadow: 8px 0px 20px rgba(0, 0, 0, 0.25);
box-shadow: .5rem 0px 1.25rem rgba(0, 0, 0, .25);
&::after {
right: -5px;
right: -.4rem;
transform: rotate(-45deg);
}
}

1
packages/ui/src/index.ts
View File

@ -38,7 +38,6 @@ export { default as Tabs } from './components/Tabs.svelte'
export { default as ScrollBox } from './components/ScrollBox.svelte'
export { default as PopupMenu } from './components/PopupMenu.svelte'
export { default as PopupItem } from './components/PopupItem.svelte'
export { default as SelectBox } from './components/SelectBox.svelte'
export { default as SelectItem } from './components/SelectItem.svelte'
export { default as TextArea } from './components/TextArea.svelte'
export { default as Section } from './components/Section.svelte'

6
plugins/chunter-resources/src/components/Channel.svelte
View File

@ -29,7 +29,7 @@
$: query.query(chunter.class.Message, { space }, result => { messages = result })
</script>
<div class="channel-container">
<div class="flex-col container">
{#if messages}
{#each messages as message}
<MessageComponent {message}/>
@ -38,9 +38,7 @@
</div>
<style lang="scss">
.channel-container {
display: flex;
flex-direction: column;
.container {
flex-shrink: 0;
}
</style>

19
plugins/chunter-resources/src/components/ChannelSeparator.svelte
View File

@ -20,25 +20,22 @@
export let line: boolean = false
</script>
<div class="separator-container" class:line={line}>
<div class="flex-center container" class:line={line}>
<div class="title">{title}</div>
</div>
<style lang="scss">
.separator-container {
display: flex;
justify-content: center;
align-items: center;
.container {
width: 100%;
height: 28px;
margin-bottom: 32px;
height: 1.75rem;
margin-bottom: 2rem;
.title {
position: relative;
padding: 6px 12px;
padding: .375rem .75rem;
font-weight: 600;
font-size: 12px;
letter-spacing: .5px;
font-size: .75rem;
letter-spacing: .5;
text-transform: uppercase;
color: var(--theme-content-trans-color);
z-index: 1;
@ -50,7 +47,7 @@
left: 0;
width: 100%;
height: 100%;
border-radius: 20px;
border-radius: 1.25rem;
background-color: var(--theme-chat-divider);
z-index: -1;
}

6
plugins/chunter-resources/src/components/ChannelView.svelte
View File

@ -45,11 +45,11 @@
display: flex;
flex-direction: column;
flex-grow: 1;
margin: 15px 15px 0px;
padding: 25px 25px 0px;
margin: 1rem 1rem 0;
padding: 1.5rem 1.5rem 0px;
overflow: auto;
}
.reference {
margin: 20px 40px;
margin: 1.25rem 2.5rem;
}
</style>

61
plugins/chunter-resources/src/components/Message.svelte
View File

@ -14,6 +14,7 @@
-->
<script lang="ts">
import { Avatar } from '@anticrm/presentation'
import type { Message } from '@anticrm/chunter'
import { ActionIcon } from '@anticrm/ui'
import Emoji from './icons/Emoji.svelte'
@ -22,7 +23,6 @@
import MoreH from './icons/MoreH.svelte'
import Reactions from './Reactions.svelte'
import Replies from './Replies.svelte'
import avatar from '../../img/avatar.png'
import { MessageViewer } from '@anticrm/presentation'
@ -35,8 +35,8 @@
let thread: boolean = false
</script>
<div class="message-container">
<div class="avatar"><img src={avatar} alt="Avatar"></div>
<div class="container">
<div class="avatar"><Avatar size={'medium'} /></div>
<div class="message">
<div class="header">{name}<span>{time}</span></div>
<div class="text"><MessageViewer message={message.content}/></div>
@ -58,39 +58,32 @@
</div>
<style lang="scss">
.message-container {
.container {
position: relative;
display: flex;
margin-bottom: 32px;
margin-bottom: 2rem;
z-index: 1;
.avatar {
min-width: 36px;
width: 36px;
height: 36px;
background-color: var(--theme-bg-accent-color);
border-radius: 50%;
user-select: none;
}
.avatar { min-width: 2.25rem; }
.message {
display: flex;
flex-direction: column;
width: 100%;
margin-left: 16px;
margin-left: 1rem;
.header {
font-weight: 500;
font-size: 16px;
font-size: 1rem;
line-height: 150%;
color: var(--theme-caption-color);
margin-bottom: 4px;
margin-bottom: .25rem;
span {
margin-left: 8px;
margin-left: .5rem;
font-weight: 400;
font-size: 14px;
line-height: 18px;
font-size: .875rem;
line-height: 1.125rem;
opacity: .4;
}
}
@ -101,12 +94,12 @@
display: flex;
justify-content: space-between;
align-items: center;
height: 32px;
margin-top: 8px;
height: 2rem;
margin-top: .5rem;
user-select: none;
div + div {
margin-left: 16px;
margin-left: 1rem;
}
}
}
@ -114,22 +107,14 @@
.buttons {
position: absolute;
visibility: hidden;
top: -8px;
right: -8px;
top: -.5rem;
right: -.5rem;
display: flex;
flex-direction: row-reverse;
user-select: none;
.tool {
display: flex;
justify-content: center;
align-items: center;
width: 20px;
height: 20px;
}
.tool + .tool {
margin-right: 8px;
margin-right: .5rem;
}
}
@ -142,13 +127,13 @@
&::before {
position: absolute;
top: -20px;
left: -20px;
width: calc(100% + 40px);
height: calc(100% + 40px);
top: -1.25rem;
left: -1.25rem;
width: calc(100% + 2.5rem);
height: calc(100% + 2.5rem);
background-color: var(--theme-button-bg-enabled);
border: 1px solid var(--theme-bg-accent-color);
border-radius: 12px;
border-radius: .75rem;
z-index: -1;
}
}

31
plugins/chunter-resources/src/components/Reactions.svelte
View File

@ -26,38 +26,21 @@
export let reactions: Reaction[] = [{ icon: Check, count: 3}, { icon: Heart, count: 10}]
</script>
<div class="reactions-container">
<div class="container">
{#each reactions as reaction}
<div class="reaction">
<div class="icon"><svelte:component this={reaction.icon} size={'medium'}/></div>
<div class="counter">{reaction.count}</div>
<div class="flex-row-center reaction">
<svelte:component this={reaction.icon} size={'medium'}/>
<div class="caption-color counter">{reaction.count}</div>
</div>
{/each}
</div>
<style lang="scss">
.reactions-container {
.container {
display: flex;
user-select: none;
.reaction {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
.icon {
width: 20px;
height: 20px;
}
.counter {
margin-left: 4px;
color: var(--theme-caption-color);
}
}
.reaction + .reaction {
margin-left: 16px;
}
.counter { margin-left: .25rem; }
.reaction + .reaction { margin-left: 1rem; }
}
</style>

63
plugins/chunter-resources/src/components/Replies.svelte
View File

@ -14,7 +14,7 @@
-->
<script lang="ts">
import avatar from '../../img/avatar.png'
import { Avatar } from '@anticrm/presentation'
export let replies: string[] = ['Chen', 'Elon', 'Tim', 'Elon', 'Tim', 'Chen']
@ -25,11 +25,11 @@
}
</script>
<div class="replies-container">
<div class="flex-row-center container">
<div class="counter">{replies.length} Replies</div>
<div class="replies">
<div class="flex-row-center">
{#each showReplies as reply}
<div class="reply"><img class="circle" src={avatar} alt={reply}></div>
<div class="reply"><Avatar size={'x-small'} /></div>
{/each}
{#if replies.length > shown}
<div class="reply"><span>+{replies.length - shown}</span></div>
@ -38,57 +38,42 @@
</div>
<style lang="scss">
.replies-container {
display: flex;
flex-wrap: nowrap;
align-items: center;
.container {
user-select: none;
.counter {
margin-right: 12px;
margin-right: .75rem;
line-height: 150%;
color: var(--theme-content-color);
white-space: nowrap;
}
.replies {
.reply {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
width: 1rem;
height: 1rem;
background-color: var(--theme-bg-color);
border-radius: 50%;
margin-right: -.625rem;
.reply {
span {
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
background-color: var(--theme-bg-color);
width: 1.5rem;
height: 1.5rem;
font-size: .75rem;
font-weight: 500;
line-height: .5;
color: var(--theme-caption-color);
background-color: var(--theme-bg-selection);
border-radius: 50%;
margin-right: -10px;
}
.circle {
width: 28px;
height: 28px;
border-radius: 50%;
}
span {
display: flex;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
font-size: 12px;
font-weight: 500;
line-height: .5;
color: var(--theme-caption-color);
background-color: var(--theme-bg-selection);
border-radius: 50%;
}
&:last-child {
margin-right: 0;
}
&:last-child {
margin-right: 0;
}
}
}

2
plugins/contact-resources/src/components/PersonPresenter.svelte
View File

@ -23,6 +23,6 @@ export let value: Person
</script>
<UserInfo {value}/>
<UserInfo size={'x-small'} {value}/>

43
plugins/login-resources/src/components/Form.svelte
View File

@ -65,7 +65,7 @@
</script>
<form class="form-container">
<form class="container">
<div class="grow-separator"/>
<div class="title"><Label label={caption}/></div>
<div class="status">
@ -75,7 +75,7 @@
{#each fields as field (field.name)}
<div class={field.short ? 'form-col' : 'form-row'}>
<StylishEdit label={field.i18n} password={field.password} bind:value={object[field.name]} on:keyup={validate} on:focus={validate}/>
<StylishEdit label={field.i18n} password={field.password} bind:value={object[field.name]} on:keyup={validate} on:focus={validate} />
</div>
{/each}
@ -106,59 +106,54 @@
</div> -->
<style lang="scss">
.form-container {
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
height: 100%;
padding: 80px 80px;
padding: 5rem;
.title {
font-weight: 600;
font-size: 24px;
line-height: 29px;
color: #FFFFFF;
font-size: 1.5rem;
color: var(--theme-caption-color);
}
.status {
min-height: 120px;
max-height: 120px;
padding-top: 20px;
min-height: 7.5rem;
max-height: 7.5rem;
padding-top: 1.25rem;
}
.form {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 12px;
row-gap: 24px;
column-gap: .75rem;
row-gap: 1.5rem;
.form-row {
grid-column-start: 1;
grid-column-end: 3;
}
.send {
margin-top: 36px;
margin-top: 2.25rem;
}
}
.grow-separator {
flex-grow: 1;
}
.footer {
margin-top: 56px;
font-size: 13px;
line-height: 16px;
color: #FFFFFF;
margin-top: 3.5rem;
font-size: .8rem;
color: var(--theme-caption-color);
span {
opacity: 0.3;
opacity: .3;
}
a {
color: #fff;
opacity: 0.8;
text-decoration: none;
:hover {
opacity: 1;
}
color: var(--theme-caption-color);
opacity: .8;
&:hover { opacity: 1; }
}
}
}

33
plugins/login-resources/src/components/LoginApp.svelte
View File

@ -20,7 +20,7 @@
let page = 'login'
</script>
<div class="panel-container">
<div class="container">
<div class="panel">
{#if page === 'login'}
<LoginForm on:switch={(event) => page = event.detail}/>
@ -40,19 +40,17 @@
</div>
<style lang="scss">
// @import "@anticrm/theme/styles/mixins.scss";
.panel-container {
.container {
display: flex;
flex-direction: row;
height: 100%;
padding: 0px 20px 20px 20px;
padding: 0px 1.25rem 1.25rem 1.25rem;
.panel {
margin-right: 20px;
width: 668px;
margin-right: 1.25rem;
width: 41.75rem;
height: 100%;
border-radius: 20px;
border-radius: 1.25rem;
background-color: var(--theme-menu-selection);
}
@ -61,14 +59,14 @@
flex-direction: column;
flex-grow: 1;
overflow: hidden;
min-width: 320px;
min-width: 20rem;
.content {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: center;
align-items: center;
flex-grow: 1;
.logo {
position: relative;
&:after {
@ -83,11 +81,11 @@
position: absolute;
content: "";
transform: translate(-50%, -50%);
width: 255px;
height: 255px;
border: 1.8px solid #FFFFFF;
width: 16rem;
height: 16rem;
border: 1.8px solid var(--theme-caption-color);
border-radius: 50%;
opacity: 0.08;
opacity: .08;
}
}
}
@ -96,11 +94,10 @@
p {
margin: 0;
font-weight: 400;
font-size: 13px;
line-height: 19px;
font-size: .8rem;
text-align: center;
color: #FFFFFF;
opacity: 0.8;
color: var(--theme-caption-color);
opacity: .8;
}
}
}

24
plugins/recruit-resources/src/components/Card.svelte
View File

@ -32,9 +32,9 @@
</script>
<div class="card-container">
<div class="container">
<div class="status"><LabelStatus label={user.state} color={'var(--primary-button-enabled)'} /></div>
<div class="avatar"><Avatar size={88} /></div>
<div class="avatar"><Avatar size={'large'} /></div>
<div class="name">{user.lastName} {user.firstName}</div>
<div class="description">{user.description}</div>
<div class="city">{user.city}</div>
@ -42,42 +42,42 @@
</div>
<style lang="scss">
.card-container {
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 24px;
padding: 1.25rem 1.5rem;
background-color: var(--theme-button-bg-enabled);
border: 1px solid var(--theme-bg-accent-color);
border-radius: 12px;
border-radius: .75rem;
.status {
display: flex;
flex-direction: row-reverse;
width: 100%;
margin-bottom: 16px;
margin-bottom: 1rem;
}
.avatar {
height: 88px;
height: 5rem;
}
.name {
margin: 16px 0 4px;
margin: 1rem 0 .25rem;
font-weight: 500;
font-size: 16px;
font-size: 1rem;
line-height: 150%;
color: var(--theme-caption-color);
}
.description, .city {
font-size: 12px;
font-size: .75rem;
color: var(--theme-content-dark-color);
}
.city {
margin-bottom: 16px;
margin-bottom: 1rem;
}
&:hover {
background-color: var(--theme-bg-accent-hover);
box-shadow: 0px 12px 40px rgba(0, 0, 0, .15);
box-shadow: 0px .75rem 2.5rem rgba(0, 0, 0, .15);
}
}
</style>

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

@ -42,7 +42,7 @@
color: var(--theme-caption-color);
background-color: var(--theme-button-bg-enabled);
border: 1px solid var(--theme-bg-accent-color);
border-radius: 12px;
border-radius: .75rem;
cursor: pointer;
.circle {

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

@ -17,6 +17,7 @@
import { createEventDispatcher } from 'svelte'
import type { Ref, Space } from '@anticrm/core'
import { TextArea, EditBox, Dialog, Tabs, Section, Grid } from '@anticrm/ui'
import DialogHeader from './DialogHeader.svelte'
import File from './icons/File.svelte'
import Address from './icons/Address.svelte'
import Attachment from './icons/Attachment.svelte'

64
plugins/recruit-resources/src/components/DialogHeader.svelte
View File

@ -47,13 +47,11 @@
on:dragover|preventDefault={ ()=>{} }
on:dragleave={ () => { dragover = false } }
on:drop|preventDefault|stopPropagation={drop}>
<div class="user-container">
<div class="flex-col-center">
<div class="avatar"></div>
<div class="info">
<div class="name">Candidate Name</div>
<div class="title">Candidate title</div>
<!-- <input type="file" name="file" id="file"/> -->
</div>
<div class="name">Candidate Name</div>
<div class="title">Candidate title</div>
<!-- <input type="file" name="file" id="file"/> -->
</div>
</div>
@ -63,49 +61,35 @@
display: flex;
justify-content: center;
align-items: center;
width: 640px;
min-height: 240px;
width: 40rem;
min-height: 15rem;
background-image: url(../../img/header-green.png);
background-repeat: no-repeat;
background-clip: border-box;
background-size: cover;
border-radius: 20px;
border-radius: 1.25rem;
&.dragover {
border: 1px solid red;
}
.user-container {
display: flex;
flex-direction: column;
align-items: center;
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #C4C4C4;
}
.info {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 10px;
.name {
font-size: 16px;
font-weight: 500;
line-height: 150%;
color: var(--theme-caption-color);
}
.title {
font-size: 12px;
font-weight: 500;
color: var(--theme-caption-color);
opacity: .6;
}
}
.avatar {
width: 5rem;
height: 5rem;
border-radius: 50%;
background-color: #C4C4C4;
}
.name {
margin-top: .625rem;
font-size: 1rem;
font-weight: 500;
line-height: 150%;
color: var(--theme-caption-color);
}
.title {
font-size: .75rem;
font-weight: 500;
color: var(--theme-content-color);
}
}

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

@ -22,6 +22,7 @@
import type { Candidate } from '@anticrm/recruit'
import type { Backlink } from '@anticrm/chunter'
import { Backlink as BacklinkComponent } from '@anticrm/presentation'
import DialogHeader from './DialogHeader.svelte'
import File from './icons/File.svelte'
import Address from './icons/Address.svelte'
import Attachment from './icons/Attachment.svelte'

4
plugins/recruit-resources/src/components/KanbanCard.svelte
View File

@ -36,7 +36,7 @@
<div class="card-container" {draggable} class:draggable on:dragstart on:dragend>
<div class="header">
<UserInfo value={{firstName: card.firstName, lastName: card.lastName }} subtitle={'Candidate'} size={28} />
<UserInfo value={{firstName: card.firstName, lastName: card.lastName }} subtitle={'Candidate'} size={'small'} />
<ActionIcon icon={MoreH} label={'More..'} direction={'left'} />
</div>
<div class="content">
@ -55,7 +55,7 @@
align-items: stretch;
background-color: var(--theme-button-bg-hovered);
border: 1px solid var(--theme-bg-accent-color);
border-radius: 12px;
border-radius: .75rem;
user-select: none;
.header {

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

@ -39,7 +39,7 @@
color: var(--theme-content-dark-color);
background-color: var(--theme-button-bg-hovered);
border: 1px dotted var(--theme-bg-accent-color);
border-radius: 12px;
border-radius: .75rem;
cursor: pointer;
.icon {

4
plugins/recruit-resources/src/components/KanbanPanel.svelte
View File

@ -43,7 +43,7 @@
height: 100%;
background-color: var(--theme-button-bg-enabled);
border: 1px solid var(--theme-bg-accent-color);
border-radius: 12px;
border-radius: .75rem;
.header {
display: flex;
@ -54,7 +54,7 @@
min-height: 44px;
font-weight: 500;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 8px;
border-radius: .5rem;
.title {
padding-left: 8px;

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

@ -44,7 +44,7 @@
color: var(--theme-caption-color);
background-color: var(--theme-button-bg-enabled);
border: 1px dotted var(--theme-bg-accent-color);
border-radius: 12px;
border-radius: .75rem;
cursor: pointer;
.circle {

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

@ -42,6 +42,6 @@
text-align: center;
color: #fff;
border: 1px solid var(--theme-bg-accent-hover);
border-radius: 8px;
border-radius: .5rem;
}
</style>

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

@ -43,7 +43,7 @@
text-align: center;
background-color: var(--theme-bg-accent-color);
color: var(--theme-caption-color);
border-radius: 8px;
border-radius: .5rem;
.icon {
margin-right: .3em;

2
plugins/workbench-resources/src/components/AsideHeader.svelte
View File

@ -44,7 +44,7 @@
align-items: center;
height: 28px;
padding: 6px 8px;
border-radius: 8px;
border-radius: .5rem;
background-color: var(--theme-menu-divider);
span {
font-weight: 600;

4
plugins/workbench-resources/src/components/Workbench.svelte
View File

@ -23,7 +23,7 @@
import type { Ref, Space, Client } from '@anticrm/core'
import type { Application, NavigatorModel, ViewConfiguration } from '@anticrm/workbench'
import { setClient } from '@anticrm/presentation'
import { setClient, Avatar } from '@anticrm/presentation'
import workbench from '@anticrm/workbench'
import Navigator from './Navigator.svelte'
@ -75,7 +75,7 @@
<ActivityStatus status="active"/>
<Applications active={currentApp}/>
<div class="flex-center" style="min-height: 6.25rem;">
<img class="square-36" src={avatar} alt="Profile"/>
<Avatar size={'medium'} />
</div>
</div>
{#if navigator}