wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-06-09 09:20:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update Setting layouts, popup, icons. (#897)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2022-02-01 16:13:01 +07:00 committed by GitHub
parent f758fd678f
commit 489599539e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
44 changed files with 283 additions and 428 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -45,7 +45,7 @@
<div class="flex-grow ml-4 flex-col">
<div class="fs-title">{title}</div>
{#if subtitle}
<div class="small-text content-dark-color">{subtitle}</div>
<div class="text-sm content-dark-color">{subtitle}</div>
{/if}
</div>
<ActionIcon icon={IconMoreH} size={'medium'} />
@ -72,7 +72,7 @@
<Icon {icon} size={'large'} />
<div class="flex-grow ml-4 flex-col">
<div class="fs-title">{title}</div>
<div class="small-text content-dark-color">Candidate pool name</div>
<div class="text-sm content-dark-color">Candidate pool name</div>
</div>
<ActionIcon icon={IconMoreH} size={'medium'} />
</div>

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

@ -23,7 +23,7 @@
export let keys: (string|KeyedAttribute)[]
</script>
<div class="flex-row-center small-text">
<div class="flex-row-center text-sm">
{#each keys as key}
<div class="column">
<AttributeBarEditor {key} {object} />

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

@ -244,6 +244,7 @@ p:last-child { margin-block-end: 0; }
.mr-6 { margin-right: 1.5rem; }
.mr-8 { margin-right: 2rem; }
.mr-10 { margin-right: 2.5rem; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
@ -260,6 +261,8 @@ p:last-child { margin-block-end: 0; }
.pr-1 { padding-right: .25rem; }
.pr-4 { padding-right: 1rem; }
.p-10 { padding: 2.5rem; }
/* --------- */
.relative { position: relative; }
.abs-lt-content {
@ -355,7 +358,8 @@ a.no-line {
.cursor-pointer { cursor: pointer; }
/* Text */
.small-text { font-size: .75rem; }
.text-sm { font-size: .75rem; }
.text-lg { font-size: 1.125rem; }
.fs-title {
font-weight: 500;
font-size: 1rem;
@ -448,6 +452,7 @@ a.no-line {
.background-button-bg-enabled { background-color: var(--theme-button-bg-enabled); }
.background-menu-divider { background-color: var(--theme-menu-divider); }
.background-primary-color { background-color: var(--primary-button-enabled); }
.background-bg-accent { background-color: var(--theme-bg-accent-color); }
.content-color { color: var(--theme-content-color); }
.content-trans-color { color: var(--theme-content-trans-color); }

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

@ -13,6 +13,84 @@
// limitations under the License.
//
/* Component */
.antiComponent {
display: flex;
flex-direction: column;
height: 100%;
.ac-header {
display: flex;
align-items: center;
flex-wrap: nowrap;
padding: 0 1.75rem 0 2.5rem;
height: 4rem;
min-height: 4rem;
border-bottom: 1px solid var(--theme-menu-divider);
.ac-header__icon {
margin-right: .75rem;
color: var(--theme-content-color);
}
.ac-header__title {
font-weight: 500;
font-size: 1rem;
color: var(--theme-caption-color);
user-select: none;
}
}
.ac-body {
display: flex;
flex-direction: column;
align-items: flex-start;
height: 100%;
&.columns { flex-direction: row; }
&.hScroll {
overflow-x: auto;
&::-webkit-scrollbar-track { margin: 2.5rem; }
}
.ac-column {
display: flex;
flex-direction: column;
overflow-y: auto;
padding: 1.75rem 2.5rem;
min-width: 25rem;
max-width: 25rem;
height: 100%;
border-right: 1px solid var(--theme-menu-divider);
&.max {
flex-grow: 1;
min-width: 25rem;
max-width: 100%;
border-right: none;
}
&__list-item {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 2.5rem;
padding: 0 1.25rem;
border: 1px solid transparent;
border-radius: 12px;
cursor: pointer;
&:hover { background-color: var(--theme-bg-accent-color); }
&.selected {
background-color: var(--theme-button-bg-enabled);
border-color: var(--theme-bg-accent-color);
cursor: auto;
}
}
}
}
}
.ac-column__list-item + .ac-column__list-item { margin-top: .75rem; }
/* Popups */
.antiPopup {
display: flex;

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

@ -11,7 +11,7 @@
<div class="flex-center overflow-label container {status.severity}">
{#if status.severity !== Severity.OK}
<Info size={'small'}/>
<div class="small-text ml-2 overflow-label"><Label label={status.code} params={status.params}/></div>
<div class="text-sm ml-2 overflow-label"><Label label={status.code} params={status.params}/></div>
{/if}
</div>

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

@ -115,13 +115,13 @@
on:drop|preventDefault|stopPropagation={fileDrop}
>
<UploadDuo size={'large'} />
<div class="small-text content-dark-color mt-2">
<div class="text-sm content-dark-color mt-2">
<Label label={attachment.string.NoAttachments} />
<span class="lower">
<Label label={classLabel} />
</span>
</div>
<div class="small-text">
<div class="text-sm">
<a href={'#'} on:click={() => inputFile.click()}><Label label={attachment.string.UploadDropFilesHere} /></a>
</div>
</div>

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

@ -92,7 +92,7 @@
<div class="flex-col">
<div class="fs-title"><EditBox placeholder={contact.string.PersonFirstNamePlaceholder} maxWidth="12rem" bind:value={firstName} /></div>
<div class="fs-title mb-1"><EditBox placeholder={contact.string.PersonLastNamePlaceholder} maxWidth="12rem" bind:value={lastName} /></div>
<div class="small-text"><EditBox placeholder={contact.string.PersonLocationPlaceholder} maxWidth="12rem" bind:value={object.city} /></div>
<div class="text-sm"><EditBox placeholder={contact.string.PersonLocationPlaceholder} maxWidth="12rem" bind:value={object.city} /></div>
</div>
</div>

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

@ -64,7 +64,7 @@
<div class="flex-row-center">
<a href={'#'} class="flex-row-center" on:click>
<CircleButton icon={IconActivity} size={'small'} primary on:click />
<span class="ml-2 small-text">View activity</span>
<span class="ml-2 text-sm">View activity</span>
</a>
</div>
</div>

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

@ -101,7 +101,7 @@
<div class="flex-row-center">
<a href={'#'} class="flex-row-center" on:click>
<CircleButton icon={IconActivity} size={'small'} primary on:click />
<span class="ml-2 small-text">View activity</span>
<span class="ml-2 text-sm">View activity</span>
</a>
</div>
</div>

2
plugins/gmail-resources/src/components/Chats.svelte
View File

@ -120,7 +120,7 @@
<div class="flex-center icon"><Icon icon={contact.icon.Email} size="small" /></div>
<div class="flex-grow flex-col">
<div class="fs-title">Gmail</div>
<div class="small-text content-dark-color"><Label label={gmail.string.YouAnd} /> {formatName(object.name)}</div>
<div class="text-sm content-dark-color"><Label label={gmail.string.YouAnd} /> {formatName(object.name)}</div>
</div>
<div class="mr-3">
<Button

2
plugins/gmail-resources/src/components/FullMessage.svelte
View File

@ -44,7 +44,7 @@
</div>
<div class="flex-grow flex-col mr-4 min-w-0">
<div class="fs-title overflow-label">{currentMessage.subject}</div>
<div class="small-text content-dark-color overflow-label">
<div class="text-sm content-dark-color overflow-label">
<Label label={currentMessage.incoming ? gmail.string.From : gmail.string.To} />
{title}
</div>

2
plugins/gmail-resources/src/components/Message.svelte
View File

@ -37,7 +37,7 @@
<div class="mr-4"><CheckBox circle primary bind:checked={selected} /></div>
{/if}
<div class="flex-col message" class:selected>
<div class="flex-between small-text mb-4">
<div class="flex-between text-sm mb-4">
<div class="content-trans-color overflow-label mr-4">From: <span class="content-accent-color">{formatName(message.sender)}</span></div>
<div class="content-trans-color">{getTime(message.modifiedOn)}</div>
</div>

2
plugins/gmail-resources/src/components/NewMessage.svelte
View File

@ -70,7 +70,7 @@
</div>
<div class="flex-grow flex-col">
<div class="fs-title">Gmail</div>
<div class="small-text content-dark-color overflow-label">
<div class="text-sm content-dark-color overflow-label">
<Label label={plugin.string.NewMessageTo} />
<span class="content-accent-color">{formatName(object.name)} ({channel.value})</span>
</div>

4
plugins/inventory-resources/src/components/Variants.svelte
View File

@ -42,10 +42,10 @@
{:else}
<div class="flex-col-center mt-5 create-container">
<Icon size={'large'} icon={inventory.icon.Variant} />
<div class="small-text content-dark-color mt-2">
<div class="text-sm content-dark-color mt-2">
<Label label={inventory.string.NoVariantsForProduct} />
</div>
<div class="small-text">
<div class="text-sm">
<a href={'#'} on:click={create}><Label label={inventory.string.CreateVariant} /></a>
</div>
</div>

4
plugins/lead-resources/src/components/Leads.svelte
View File

@ -51,10 +51,10 @@
/>
{:else}
<div class="flex-col-center mt-5 createapp-container">
<div class="small-text content-dark-color mt-2">
<div class="text-sm content-dark-color mt-2">
<Label label={lead.string.NoLeadsForDocument} />
</div>
<div class="small-text">
<div class="text-sm">
<a href={'#'} on:click={createLead}><Label label={lead.string.CreateLead} /></a>
</div>
</div>

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

@ -58,10 +58,10 @@
{:else}
<div class="flex-col-center mt-5 createapp-container">
<FileDuo size={'large'} />
<div class="small-text content-dark-color mt-2">
<div class="text-sm content-dark-color mt-2">
<Label label={recruit.string.NoApplicationsForCandidate} />
</div>
<div class="small-text">
<div class="text-sm">
<a href={'#'} on:click={createApp}><Label label={recruit.string.CreateAnApplication} /></a>
</div>
</div>

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

@ -81,7 +81,7 @@
flex-grow: 1;
display: flex;
flex-direction: column;
margin-right: 1rem;
// margin-right: 1rem;
height: 100%;
border-radius: 1.25rem;
background-color: var(--theme-bg-color);

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

@ -156,8 +156,8 @@
<div class="flex-col">
<div class="fs-title"><EditBox placeholder="John" maxWidth="10rem" bind:value={firstName}/></div>
<div class="fs-title mb-1"><EditBox placeholder="Appleseed" maxWidth="10rem" bind:value={lastName}/></div>
<div class="small-text"><EditBox placeholder="Title" maxWidth="10rem" bind:value={object.title}/></div>
<div class="small-text"><EditBox placeholder="Location" maxWidth="10rem" bind:value={object.city}/></div>
<div class="text-sm"><EditBox placeholder="Title" maxWidth="10rem" bind:value={object.title}/></div>
<div class="text-sm"><EditBox placeholder="Location" maxWidth="10rem" bind:value={object.city}/></div>
</div>
</div>

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

@ -61,7 +61,7 @@
{object.name}
</div>
</div>
<div class="small-text">{object.description}</div>
<div class="text-sm">{object.description}</div>
</div>
<div class="tool" on:click={() => { dispatch('close') }}><IconClose size={'small'} /></div>
</div>

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

@ -39,7 +39,7 @@
<div class="fs-title over-underline lines-limit-2" on:click={showCandidate}>
{formatName(object.$lookup?.attachedTo?.name)}
</div>
<div class="small-text lines-limit-2">{object.$lookup?.attachedTo?.title ?? ''}</div>
<div class="text-sm lines-limit-2">{object.$lookup?.attachedTo?.title ?? ''}</div>
</div>
<div class="tool"><ActionIcon label={undefined} icon={IconMoreH} size={'small'} /></div>
</div>

20
plugins/setting-assets/assets/icons.svg
View File

@ -1,13 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="edit" fill="none" viewBox="0 0 20 20">
<path d="M11.4561 17.0355H17.4999" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.65 3.16233C11.2964 2.38982 12.4583 2.27655 13.2469 2.90978C13.2905 2.94413 14.6912 4.03232 14.6912 4.03232C15.5575 4.55599 15.8266 5.66925 15.2912 6.51882C15.2627 6.56432 7.34329 16.4704 7.34329 16.4704C7.07981 16.7991 6.67986 16.9931 6.25242 16.9978L3.21961 17.0358L2.53628 14.1436C2.44055 13.7369 2.53628 13.3098 2.79975 12.9811L10.65 3.16233Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.18408 5.00098L13.7276 8.49025" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<symbol id="edit" viewBox="0 0 16 16">
<path d="M14,13.1H9.2c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5H14c0.3,0,0.5-0.2,0.5-0.5S14.3,13.1,14,13.1z"/>
<path d="M11.4,7.1C11.4,7.1,11.4,7.1,11.4,7.1c1.2-1.6,1.3-1.6,1.3-1.6C12.9,5,13,4.5,12.9,4c-0.1-0.5-0.4-0.9-0.8-1.2 c0,0-1.1-0.9-1.1-0.9c-0.8-0.7-2.1-0.6-2.8,0.3c0,0,0,0,0,0l-6.3,7.9c-0.3,0.4-0.4,0.9-0.3,1.4l0.5,2.3c0.1,0.2,0.3,0.4,0.5,0.4 c0,0,0,0,0,0l2.4,0c0.5,0,1-0.2,1.3-0.6C8.9,10.2,10.5,8.2,11.4,7.1C11.4,7.1,11.4,7.1,11.4,7.1z M8.9,2.8c0.3-0.4,1-0.5,1.4-0.1 c0,0,1.2,0.9,1.2,0.9c0.2,0.1,0.4,0.3,0.4,0.6c0.1,0.2,0,0.5-0.1,0.7c0,0-0.4,0.5-0.9,1.2L8.1,3.9L8.9,2.8z M5.5,12.9 C5.4,13,5.2,13.1,5,13.1l-2,0l-0.5-1.9c0-0.2,0-0.4,0.1-0.5l4.8-6l2.8,2.2C8.9,8.6,6.8,11.2,5.5,12.9z"/>
</symbol>
<symbol id="password" viewBox="0 0 16 16">
<path d="M14.4,5.7l-2-2l1-1c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0l-1.4,1.4L8.3,6.5C7.6,5.9,6.7,5.6,5.7,5.6c-2.3,0-4.2,1.9-4.2,4.2 c0,2.3,1.9,4.2,4.2,4.2s4.2-1.9,4.2-4.2c0-1-0.3-1.9-0.9-2.6l2.7-2.7l2,2c0.2,0.2,0.5,0.2,0.7,0S14.5,5.9,14.4,5.7z M5.7,13 c-1.8,0-3.2-1.4-3.2-3.2s1.4-3.2,3.2-3.2S8.9,8,8.9,9.8S7.5,13,5.7,13z"/>
</symbol>
<symbol id="password" fill="none" viewBox="0 0 20 20">
<ellipse cx="7.11573" cy="12.231" rx="4.61573" ry="4.61573" stroke="currentColor"/>
<path d="M10.5762 8.76966L14.6149 4.7309M16.3458 3L14.6149 4.7309M14.6149 4.7309L17.4998 7.61573" stroke="currentColor" stroke-linecap="round"/>
</symbol>
<symbol id="settings" viewBox="0 0 16 16">
<path d="M14,5.8l-1.1-1.9c-0.6-1-0.9-1.5-1.5-1.8c-0.6-0.3-1.2-0.3-2.3-0.4L8,1.7l-1.1,0c-1.1,0-1.8,0-2.3,0.4 C4,2.4,3.7,2.9,3.1,3.9L2,5.8C1.4,6.8,1.1,7.4,1.1,8S1.4,9.2,2,10.2l1.1,1.9c0.6,1,0.9,1.5,1.5,1.8c0.6,0.3,1.2,0.3,2.3,0.4l1.1,0 l1.1,0c1.1,0,1.8,0,2.3-0.4c0.6-0.3,0.9-0.9,1.5-1.8l1.1-1.9c0.6-1,0.9-1.5,0.9-2.2C14.9,7.4,14.6,6.8,14,5.8z M13.1,9.7L12,11.6 c-0.5,0.9-0.8,1.3-1.1,1.5c-0.3,0.2-0.8,0.2-1.8,0.2l-1.1,0l-1.1,0c-1.1,0-1.5,0-1.8-0.2c-0.3-0.2-0.6-0.6-1.1-1.5L2.9,9.7 C2.3,8.8,2.1,8.4,2.1,8c0-0.4,0.2-0.8,0.7-1.7L4,4.4c0.5-0.9,0.8-1.3,1.1-1.5c0.3-0.2,0.8-0.2,1.8-0.2l1.1,0l1.1,0 c1,0,1.5,0,1.8,0.2c0.3,0.2,0.6,0.6,1.1,1.5l1.1,1.9c0.5,0.9,0.7,1.3,0.7,1.7S13.6,8.8,13.1,9.7z"/>
<path d="M8,5.5C6.6,5.5,5.5,6.6,5.5,8c0,1.4,1.1,2.5,2.5,2.5c1.4,0,2.5-1.1,2.5-2.5C10.5,6.6,9.4,5.5,8,5.5z M8,9.5 C7.2,9.5,6.5,8.8,6.5,8S7.2,6.5,8,6.5S9.5,7.2,9.5,8S8.8,9.5,8,9.5z"/>
@ -28,8 +26,8 @@
<path d="M4.7,7.8h0.7c0.3,0,0.5-0.2,0.5-0.5S5.6,6.8,5.3,6.8H4.7c-0.3,0-0.5,0.2-0.5,0.5S4.4,7.8,4.7,7.8z"/>
<path d="M6.7,9.5h-2c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h2c0.3,0,0.5-0.2,0.5-0.5S6.9,9.5,6.7,9.5z"/>
</symbol>
<symbol id="signout" viewBox="0 0 16 16" fill="none">
<path d="M12.24 4.42664C13.0789 5.26583 13.6502 6.33493 13.8815 7.49876C14.1129 8.66259 13.994 9.86889 13.5398 10.9651C13.0856 12.0614 12.3165 12.9983 11.3299 13.6575C10.3432 14.3167 9.18328 14.6686 7.99668 14.6686C6.81007 14.6686 5.65011 14.3167 4.66346 13.6575C3.67681 12.9983 2.90777 12.0614 2.45359 10.9651C1.9994 9.86889 1.88047 8.66259 2.11182 7.49876C2.34317 6.33493 2.91442 5.26583 3.75334 4.42664" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 1.33331V7.99998" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<symbol id="signout" viewBox="0 0 16 16">
<path d="M14.4,7.4c-0.3-1.3-0.9-2.4-1.8-3.3c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7c0.8,0.8,1.3,1.7,1.5,2.8 c0.2,1.1,0.1,2.2-0.3,3.2c-0.4,1-1.1,1.9-2,2.5c-1.8,1.2-4.3,1.2-6.1,0c-0.9-0.6-1.6-1.5-2-2.5c-0.4-1-0.5-2.1-0.3-3.2 c0.2-1.1,0.7-2,1.5-2.8c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0C2.5,5,1.9,6.1,1.6,7.4C1.4,8.7,1.5,10,2,11.2c0.5,1.2,1.3,2.2,2.4,2.9 s2.3,1.1,3.6,1.1c1.3,0,2.5-0.4,3.6-1.1c1.1-0.7,1.9-1.7,2.4-2.9C14.5,10,14.6,8.7,14.4,7.4z"/>
<path d="M8,8.5c0.3,0,0.5-0.2,0.5-0.5V1.3c0-0.3-0.2-0.5-0.5-0.5S7.5,1.1,7.5,1.3V8C7.5,8.3,7.7,8.5,8,8.5z"/>
</symbol>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

20
plugins/setting-resources/src/components/CategoryElement.svelte
View File

@ -42,22 +42,22 @@
<style lang="scss">
.container {
margin: 0 16px;
padding-left: 10px;
padding-right: 12px;
min-height: 36px;
margin: 0 1rem;
padding-left: .625rem;
padding-right: .75rem;
min-height: 2.25rem;
font-weight: 500;
color: var(--theme-caption-color);
border-radius: 8px;
border-radius: .5rem;
user-select: none;
cursor: pointer;
.icon {
margin-right: 18px;
width: 16px;
min-width: 16px;
height: 16px;
border-radius: 4px;
margin-right: 1rem;
width: 1rem;
min-width: 1rem;
height: 1rem;
border-radius: .25rem;
}
span {
flex-grow: 1;

15
plugins/setting-resources/src/components/Integrations.svelte
View File

@ -31,10 +31,10 @@
integrationQuery.query(setting.class.Integration, { space: accountId as string as Ref<Space> }, (res) => (integrations = res))
</script>
<div class="flex-col h-full">
<div class="flex-row-center header">
<div class="content-color mr-3"><Icon icon={setting.icon.Integrations} size={'medium'} /></div>
<div class="fs-title"><Label label={setting.string.Integrations}/></div>
<div class="antiComponent">
<div class="ac-header">
<div class="ac-header__icon"><Icon icon={setting.icon.Integrations} size={'medium'} /></div>
<div class="ac-header__title"><Label label={setting.string.Integrations}/></div>
</div>
<div class="cards-container">
{#each integrationTypes as integrationType (integrationType._id)}
@ -44,13 +44,6 @@
</div>
<style lang="scss">
.header {
padding: 0 1.75rem 0 2.5rem;
height: 4rem;
min-height: 4rem;
border-bottom: 1px solid var(--theme-menu-divider);
}
.cards-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, auto));

23
plugins/setting-resources/src/components/Password.svelte
View File

@ -40,12 +40,12 @@
}
</script>
<div class="flex-col h-full">
<div class="flex-row-center header">
<div class="content-color mr-3"><Icon icon={setting.icon.Password} size={'medium'} /></div>
<div class="fs-title"><Label label={setting.string.ChangePassword} /></div>
<div class="antiComponent">
<div class="ac-header">
<div class="ac-header__icon"><Icon icon={setting.icon.Password} size={'medium'} /></div>
<div class="ac-header__title"><Label label={setting.string.ChangePassword} /></div>
</div>
<div class="container flex-row-streach flex-grow">
<div class="flex-row-streach flex-grow p-10">
<div class="flex-grow flex-col">
<div class="flex-grow flex-col">
<div>
@ -90,16 +90,3 @@
</div>
</div>
</div>
<style lang="scss">
.header {
padding: 0 1.75rem 0 2.5rem;
height: 4rem;
min-height: 4rem;
border-bottom: 1px solid var(--theme-menu-divider);
}
.container {
padding: 2.5rem;
}
</style>

2
plugins/setting-resources/src/components/PluginCard.svelte
View File

@ -49,7 +49,7 @@
<div class="icon mr-4"><Component is={integrationType.icon} /></div>
<div class="flex-grow flex-col">
<div class="fs-title max-label overflow-label"><Label label={integrationType.label} /></div>
<div class="small-text content-dark-color max-label overflow-label">
<div class="text-sm content-dark-color max-label overflow-label">
<Label label={integrationType.description} />
</div>
</div>

17
plugins/setting-resources/src/components/Privacy.svelte
View File

@ -18,18 +18,9 @@
import { Icon, Label } from '@anticrm/ui'
</script>
<div class="flex-col h-full">
<div class="flex-row-center header">
<div class="content-color mr-3"><Icon icon={setting.icon.Privacy} size={'medium'} /></div>
<div class="fs-title"><Label label={setting.string.Privacy}/></div>
<div class="antiComponent">
<div class="ac-header">
<div class="ac-header__icon"><Icon icon={setting.icon.Privacy} size={'medium'} /></div>
<div class="ac-header__title"><Label label={setting.string.Privacy}/></div>
</div>
</div>
<style lang="scss">
.header {
padding: 0 1.75rem 0 2.5rem;
height: 4rem;
min-height: 4rem;
border-bottom: 1px solid var(--theme-menu-divider);
}
</style>

28
plugins/setting-resources/src/components/Profile.svelte
View File

@ -88,13 +88,13 @@
}
</script>
<div class="flex-col h-full">
<div class="flex-row-center header">
<div class="content-color mr-3"><Icon icon={setting.icon.EditProfile} size={'medium'} /></div>
<div class="fs-title"><Label label={setting.string.EditProfile} /></div>
<div class="antiComponent">
<div class="ac-header">
<div class="ac-header__icon"><Icon icon={setting.icon.EditProfile} size={'medium'} /></div>
<div class="ac-header__title"><Label label={setting.string.EditProfile} /></div>
</div>
{#if employee}
<div class="container flex-row-streach flex-grow">
<div class="ac-body columns p-10">
<div class="mr-8">
<EditableAvatar avatar={employee.avatar} size={'x-large'} on:done={onAvatarDone} />
</div>
@ -127,7 +127,7 @@
<div class="separator" />
<div class="flex-between channels">
<div class="flex-between mt-3">
<div class="flex-row-center">
<ChannelsEditor attachedTo={employee._id} attachedClass={employee._class} />
</div>
@ -138,16 +138,6 @@
</div>
<style lang="scss">
.header {
padding: 0 1.75rem 0 2.5rem;
height: 4rem;
min-height: 4rem;
border-bottom: 1px solid var(--theme-menu-divider);
}
.container {
padding: 2.5rem;
}
.location {
margin-top: 0.25rem;
font-size: 0.75rem;
@ -158,12 +148,6 @@
font-size: 1.25rem;
color: var(--theme-caption-color);
}
.channels {
margin-top: 0.75rem;
span {
margin-left: 0.5rem;
}
}
.separator {
margin: 1rem 0;

17
plugins/setting-resources/src/components/Setting.svelte
View File

@ -18,18 +18,9 @@
import { Icon, Label } from '@anticrm/ui'
</script>
<div class="flex-col h-full">
<div class="flex-row-center header">
<div class="content-color mr-3"><Icon icon={setting.icon.Setting} size={'medium'} /></div>
<div class="fs-title"><Label label={setting.string.Setting}/></div>
<div class="antiComponent">
<div class="ac-header">
<div class="ac-header__icon"><Icon icon={setting.icon.Setting} size={'medium'} /></div>
<div class="ac-header__title"><Label label={setting.string.Setting}/></div>
</div>
</div>
<style lang="scss">
.header {
padding: 0 1.75rem 0 2.5rem;
height: 4rem;
min-height: 4rem;
border-bottom: 1px solid var(--theme-menu-divider);
}
</style>

8
plugins/setting-resources/src/components/Settings.svelte
View File

@ -41,7 +41,7 @@
}
</script>
<div class='container'>
<div class="container">
<div class="panel-navigator">
<div class="flex-between navheader-container">
<span class="fs-title overflow-label">
@ -49,9 +49,9 @@
</span>
</div>
{#each categories as category}
<CategoryElement icon={category.icon} label={category.label} on:click={() => { selectCategory(category.name) }}/>
<CategoryElement icon={category.icon} label={category.label} on:click={() => { selectCategory(category.name) }}/>
{/each}
<div class='signout'>
<div class="signout">
<CategoryElement icon={setting.icon.Signout} label={setting.string.Signout} on:click={signOut}/>
</div>
</div>
@ -67,7 +67,6 @@
.container {
display: flex;
height: 100%;
padding-bottom: 1.25rem;
background: var(--theme-menu-color);
.panel-navigator {
@ -91,7 +90,6 @@
flex-grow: 1;
display: flex;
flex-direction: column;
margin-right: 1rem;
height: 100%;
border-radius: 1.25rem;
background-color: var(--theme-bg-color);

17
plugins/setting-resources/src/components/Support.svelte
View File

@ -18,18 +18,9 @@
import { Icon, Label } from '@anticrm/ui'
</script>
<div class="flex-col h-full">
<div class="flex-row-center header">
<div class="content-color mr-3"><Icon icon={setting.icon.Support} size={'medium'} /></div>
<div class="fs-title"><Label label={setting.string.Support}/></div>
<div class="antiComponent">
<div class="ac-header">
<div class="ac-header__icon"><Icon icon={setting.icon.Support} size={'medium'} /></div>
<div class="ac-header__title"><Label label={setting.string.Support}/></div>
</div>
</div>
<style lang="scss">
.header {
padding: 0 1.75rem 0 2.5rem;
height: 4rem;
min-height: 4rem;
border-bottom: 1px solid var(--theme-menu-divider);
}
</style>

17
plugins/setting-resources/src/components/Terms.svelte
View File

@ -18,18 +18,9 @@
import { Icon, Label } from '@anticrm/ui'
</script>
<div class="flex-col h-full">
<div class="flex-row-center header">
<div class="content-color mr-3"><Icon icon={setting.icon.Terms} size={'medium'} /></div>
<div class="fs-title"><Label label={setting.string.Terms}/></div>
<div class="antiComponent">
<div class="ac-header">
<div class="ac-header__icon"><Icon icon={setting.icon.Terms} size={'medium'} /></div>
<div class="ac-header__title"><Label label={setting.string.Terms}/></div>
</div>
</div>
<style lang="scss">
.header {
padding: 0 1.75rem 0 2.5rem;
height: 4rem;
min-height: 4rem;
border-bottom: 1px solid var(--theme-menu-divider);
}
</style>

4
plugins/setting-resources/src/components/statuses/Folders.svelte
View File

@ -42,14 +42,14 @@
<div class="flex-col overflow-y-auto">
{#each folders as f (f._id)}
<div class="flex-between item" class:selected={f._id === folder?._id} on:click={() => select(f)}>
<div class="icon mr-4">
<div class="icon flex-no-shrink mr-4">
<Component is={f.icon}/>
</div>
<div class="flex-grow flex-col">
<div class="fs-title overflow-label">
{f.name}
</div>
<div class="small-text content-dark-color overflow-label">
<div class="text-sm content-dark-color overflow-label">
{f.description}
</div>
</div>

40
plugins/setting-resources/src/components/statuses/ManageStatuses.svelte
View File

@ -52,48 +52,24 @@
}
</script>
<div class="flex-col h-full">
<div class="flex-row-center header">
<div class="content-color mr-3"><Icon icon={task.icon.ManageStatuses} size={'medium'} /></div>
<div class="fs-title"><Label label={setting.string.ManageStatuses}/></div>
<div class="antiComponent">
<div class="ac-header">
<div class="ac-header__icon"><Icon icon={task.icon.ManageStatuses} size={'medium'} /></div>
<div class="ac-header__title"><Label label={setting.string.ManageStatuses}/></div>
</div>
<div class="flex-row-top h-full overflow-x-auto scroll-m-10">
<div class="flex-col section">
<div class="ac-body columns hScroll">
<div class="ac-column">
<Folders bind:folder={folder}/>
</div>
<div class="flex-col section">
<div class="ac-column">
{#if folder !== undefined}
<Templates {folder} bind:template={template}/>
{/if}
</div>
<div class="flex-col section max">
<div class="ac-column max">
{#if template !== undefined}
<KanbanTemplateEditor kanban={template} on:delete={(e) => deleteState(e.detail)}/>
{/if}
</div>
</div>
</div>
<style lang="scss">
.header {
padding: 0 1.75rem 0 2.5rem;
height: 4rem;
min-height: 4rem;
border-bottom: 1px solid var(--theme-menu-divider);
}
.section {
overflow-y: auto;
padding: 1.75rem 2.5rem;
min-width: 25rem;
max-width: 25rem;
height: 100%;
border-right: 1px solid var(--theme-menu-divider);
&.max {
width: 40rem;
max-width: 40rem;
border-right: none;
}
}
</style>

22
plugins/setting-resources/src/components/statuses/Templates.svelte
View File

@ -96,8 +96,8 @@
</div>
<div class="flex-col overflow-y-auto">
{#each templates as t (t._id)}
<div class="flex-between item" class:selected={t._id === template?._id} on:click={() => select(t)}>
<AttributeEditor maxWidth={'18rem'} _class={task.class.KanbanTemplate} object={t} key="title"/>
<div class="ac-column__list-item" class:selected={t._id === template?._id} on:click={() => select(t)}>
<AttributeEditor maxWidth={'15rem'} _class={task.class.KanbanTemplate} object={t} key="title"/>
<div class="hover-trans"
on:click|stopPropagation={(ev) => {
showPopup(ContextMenu, { object: t }, ev.target, () => {})
@ -108,21 +108,3 @@
</div>
{/each}
</div>
<style lang="scss">
.item {
min-height: 2.5rem;
padding: 0 1.25rem;
border: 1px solid transparent;
border-radius: 12px;
cursor: pointer;
&:hover { background-color: var(--theme-bg-accent-color); }
&.selected {
background-color: var(--theme-button-bg-enabled);
border-color: var(--theme-bg-accent-color);
cursor: auto;
}
}
.item + .item { margin-top: .75rem; }
</style>

2
plugins/task-resources/src/components/KanbanCard.svelte
View File

@ -37,7 +37,7 @@
<ActionIcon label={task.string.More} action={(evt) => { showMenu(evt) }} icon={IconMoreH} size={'small'} />
</div>
<div class="caption-color mb-3 lines-limit-4">{object.name}</div>
<!-- <div class="small-text lines-limit-2">{object.description}</div> -->
<!-- <div class="text-sm lines-limit-2">{object.description}</div> -->
<div class="flex-between">
<div class="flex-row-center">
{#if (object.attachments ?? 0) > 0}

4
plugins/task-resources/src/components/Tasks.svelte
View File

@ -61,10 +61,10 @@
{:else}
<div class="flex-col-center mt-5 createapp-container">
<!-- <FileDuo size={'large'} /> -->
<div class="small-text content-dark-color mt-2">
<div class="text-sm content-dark-color mt-2">
<Label label={task.string.NoTaskForObject} />
</div>
<div class="small-text">
<div class="text-sm">
<a href={'#'} on:click={createApp}><Label label={task.string.CreateTask} /></a>
</div>
</div>

2
plugins/task-resources/src/components/state/EditStatuses.svelte
View File

@ -85,7 +85,7 @@
{#if spaceClassInstance}<Label label={spaceClassInstance?.label}/>{:else}...{/if}
</span>
</div>
<div class="small-text content-dark-color overflow-label">{spaceInstance?.name}</div>
<div class="text-sm content-dark-color overflow-label">{spaceInstance?.name}</div>
</div>
<div class="ml-4 content-accent-color cursor-pointer" on:click={() => dispatch('close')}><IconClose size={'small'} /></div>
</div>

6
plugins/task-resources/src/components/state/StatesEditor.svelte
View File

@ -103,7 +103,7 @@
showPopup(ColorsPopup, {}, elements[i], onColorChange(state))
}}
/>
<div class="flex-grow caption-color"><AttributeEditor maxWidth={'20rem'} _class={state._class} object={state} key="title"/></div>
<div class="flex-grow caption-color"><AttributeEditor maxWidth={'13rem'} _class={state._class} object={state} key="title"/></div>
<div class="tool hover-trans"
on:click={(ev) => {
showPopup(StatusesPopup, { onDelete: () => dispatch('delete', { state }) }, ev.target, () => {})
@ -126,7 +126,7 @@
<div class="states flex-row-center">
<div class="bar"/>
<div class="color" style="background-color: #a5d179"/>
<div class="flex-grow caption-color"><AttributeEditor maxWidth={'20rem'} _class={state._class} object={state} key="title"/></div>
<div class="flex-grow caption-color"><AttributeEditor maxWidth={'13rem'} _class={state._class} object={state} key="title"/></div>
</div>
{/if}
{/each}
@ -142,7 +142,7 @@
<div class="states flex-row-center">
<div class="bar"/>
<div class="color" style="background-color: #f28469"/>
<div class="flex-grow caption-color"><AttributeEditor maxWidth="20rem" _class={state._class} object={state} key="title"/></div>
<div class="flex-grow caption-color"><AttributeEditor maxWidth={'13rem'} _class={state._class} object={state} key="title"/></div>
</div>
{/if}
{/each}

2
plugins/task-resources/src/components/todos/Todos.svelte
View File

@ -57,7 +57,7 @@
/>
{:else}
<div class="flex-col-center mt-5 createapp-container">
<div class="small-text">
<div class="text-sm">
<a href={'#'} on:click={createApp}><Label label={plugin.string.NoTodoItems} /></a>
</div>
</div>

2
plugins/telegram-resources/src/components/Chat.svelte
View File

@ -168,7 +168,7 @@
<div class="flex-center icon"><TelegramIcon size={'small'} /></div>
<div class="flex-grow flex-col">
<div class="fs-title">Telegram</div>
<div class="small-text content-dark-color">You and {formatName(object.name)}</div>
<div class="text-sm content-dark-color">You and {formatName(object.name)}</div>
</div>
<ActionIcon
icon={IconShare}

10
plugins/templates-assets/assets/icons.svg
View File

@ -1,8 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="templates" fill="none" viewBox="0 0 16 16">
<path d="M8.58334 3.33337V3.33337C7.42111 3.33337 6.83999 3.33337 6.36142 3.45325C4.92972 3.81187 3.81184 4.92975 3.45322 6.36145C3.33334 6.84002 3.33334 7.42114 3.33334 8.58337V10.8C3.33334 11.6139 3.33334 12.0208 3.5562 12.296C3.60017 12.3503 3.64972 12.3999 3.70402 12.4439C3.97922 12.6667 4.38615 12.6667 5.20001 12.6667H7.41668C8.57891 12.6667 9.16003 12.6667 9.6386 12.5468C11.0703 12.1882 12.1882 11.0703 12.5468 9.63863C12.6667 9.16006 12.6667 8.57894 12.6667 7.41671V7.41671" stroke="white"/>
<path d="M6 6.66663L10 6.66663" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6 9.33337H8" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.6667 5.33337L12.6667 1.33337M10.6667 3.33337H14.6667" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<symbol id="templates" viewBox="0 0 16 16">
<path d="M12.1,9.5c-0.3,1.3-1.3,2.2-2.5,2.5c-0.4,0.1-1,0.1-2.1,0.1H5.2c-0.6,0-1,0-1.2-0.1C4,12,4,12,3.9,12 c-0.1-0.1-0.1-0.6-0.1-1.2V8.6c0-1.1,0-1.7,0.1-2.1c0.3-1.3,1.3-2.2,2.5-2.5c0.4-0.1,1-0.1,2.1-0.1v-1c-1.2,0-1.8,0-2.3,0.1 C4.6,3.4,3.4,4.6,3,6.2C2.8,6.8,2.8,7.4,2.8,8.6v2.2c0,0.9,0,1.4,0.3,1.8c0.1,0.1,0.1,0.2,0.2,0.2c0.4,0.3,0.9,0.3,1.8,0.3h2.2 c1.2,0,1.8,0,2.3-0.1c1.6-0.4,2.9-1.7,3.3-3.3c0.1-0.5,0.1-1.1,0.1-2.3h-1C12.2,8.5,12.2,9.1,12.1,9.5z"/>
<path d="M10.5,6.7c0-0.3-0.2-0.5-0.5-0.5H6c-0.3,0-0.5,0.2-0.5,0.5S5.7,7.2,6,7.2h4C10.3,7.2,10.5,6.9,10.5,6.7z"/>
<path d="M6,8.8c-0.3,0-0.5,0.2-0.5,0.5S5.7,9.8,6,9.8h2c0.3,0,0.5-0.2,0.5-0.5S8.3,8.8,8,8.8H6z"/>
<path d="M14.7,2.8h-1.5V1.3c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5v1.5h-1.5c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h1.5v1.5 c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V3.8h1.5c0.3,0,0.5-0.2,0.5-0.5S14.9,2.8,14.7,2.8z"/>
</symbol>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 975 B

After

Width:  |  Height:  |  Size: 1.0 KiB

53
plugins/templates-resources/src/components/TemplateElement.svelte
View File

@ -14,7 +14,7 @@
-->
<script lang="ts">
import { Doc } from '@anticrm/core'
import { IconMoreV, showPopup } from '@anticrm/ui'
import { IconMoreH, showPopup } from '@anticrm/ui'
import { ContextMenu } from '@anticrm/view-resources'
import { createEventDispatcher } from 'svelte'
@ -32,57 +32,16 @@
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div
class="flex-row-center container" class:active={active}
class="flex-between ac-column__list-item" class:active={active}
on:click|stopPropagation={() => {
dispatch('click')
}}
>
<span>
{label}
</span>
{label}
{#if object}
<div class="menuRow" on:click={(ev) => showMenu(ev, object)}><IconMoreV size={'small'} /></div>
<div class="hover-trans" on:click|stopPropagation={(ev) => { showMenu(ev, object) }}>
<IconMoreH size={'medium'} />
</div>
{/if}
</div>
<style lang="scss">
.container {
min-height: 36px;
font-weight: 500;
color: var(--theme-caption-color);
border-radius: 8px;
user-select: none;
cursor: pointer;
span {
flex-grow: 1;
margin-left: 1rem;
margin-right: 1rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&.active {
background-color: var(--theme-button-bg-enabled);
}
&:hover {
background-color: var(--theme-button-bg-enabled);
.menuRow {
visibility: visible;
}
}
}
.menuRow {
visibility: hidden;
margin-left: 0.5rem;
opacity: 0.6;
cursor: pointer;
&:hover {
opacity: 1;
}
}
</style>

164
plugins/templates-resources/src/components/Templates.svelte
View File

@ -58,23 +58,20 @@
}
</script>
<div class="flex-between navheader-container">
<span class="fs-title overflow-label flex-row-center">
<div class="mr-2">
<Icon icon={templatesPlugin.icon.Templates} size={'medium'} />
</div>
<Label label={templatesPlugin.string.Templates} />
</span>
</div>
<div class="antiComponent">
<div class="ac-header">
<div class="ac-header__icon"><Icon icon={templatesPlugin.icon.Templates} size={'medium'} /></div>
<div class="ac-header__title"><Label label={templatesPlugin.string.Templates} /></div>
</div>
<div class="flex flex-grow">
<div class="tempaltes-nav flex-row">
<div class="flex-between flex-reverse">
<CircleButton icon={IconAdd} on:click={addTemplate} />
<Label label={templatesPlugin.string.TemplatesHeader} />
</div>
<div class="templates flex-row">
<ScrollBox vertical stretch>
<div class="ac-body columns">
<div class="ac-column">
<div class="flex-between trans-title mb-3">
<Label label={templatesPlugin.string.TemplatesHeader} />
<CircleButton icon={IconAdd} on:click={addTemplate} />
</div>
<div class="flex-col overflow-y-auto">
{#each templates as t}
<TemplateElement
label={t.title}
@ -87,93 +84,70 @@
object={t}
/>
{/each}
</ScrollBox>
</div>
</div>
<div class="templates-edit">
{#if newTemplate}
<span class="fs-title overflow-label">
{#if mode === Mode.Create}
<Label label={templatesPlugin.string.CreateTemplate} />
{:else if mode === Mode.Edit}
<Label label={templatesPlugin.string.EditTemplate} />
{:else}
<Label label={templatesPlugin.string.ViewTemplate} />
{/if}
</span>
<div class="titleedit mt-4 mb-4">
{#if mode !== Mode.View}
<EditBox bind:value={newTemplate.title} maxWidth={'12rem'} placeholder={templatesPlugin.string.TemplatePlaceholder} />
{:else}
{newTemplate.title}
{/if}
</div>
{#if mode !== Mode.View}
<StyledTextEditor
bind:content={newTemplate.message}
bind:this={textEditor}
on:value={(evt) => {
newTemplate = { title: newTemplate?.title ?? '', message: evt.detail }
}}>
<div class="flex flex-reverse flex-reverse flex-grow">
<div class="ml-2">
<Button disabled={newTemplate.title.trim().length == 0 } primary label={templatesPlugin.string.SaveTemplate} on:click={saveNewTemplate} />
</div>
<div class="ac-column max background-bg-accent template-container">
{#if newTemplate}
<span class="trans-title mb-3">
{#if mode === Mode.Create}
<Label label={templatesPlugin.string.CreateTemplate} />
{:else if mode === Mode.Edit}
<Label label={templatesPlugin.string.EditTemplate} />
{:else}
<Label label={templatesPlugin.string.ViewTemplate} />
{/if}
</span>
<div class="text-lg caption-color">
{#if mode !== Mode.View}
<EditBox bind:value={newTemplate.title} maxWidth={'12rem'} placeholder={templatesPlugin.string.TemplatePlaceholder} />
{:else}
{newTemplate.title}
{/if}
</div>
<div class="separator" />
{#if mode !== Mode.View}
<StyledTextEditor
bind:content={newTemplate.message}
bind:this={textEditor}
on:value={(evt) => {
newTemplate = { title: newTemplate?.title ?? '', message: evt.detail }
}}>
<div class="flex flex-reverse flex-grow">
<div class="ml-2">
<Button disabled={newTemplate.title.trim().length == 0 } primary label={templatesPlugin.string.SaveTemplate} on:click={saveNewTemplate} />
</div>
<Button
label={templatesPlugin.string.Cancel}
on:click={() => {
if (mode === Mode.Create) {
newTemplate = undefined
}
mode = Mode.View
}}
/>
</div>
<Button
label={templatesPlugin.string.Cancel}
on:click={() => {
if (mode === Mode.Create) {
newTemplate = undefined
}
mode = Mode.View
}}
/>
</StyledTextEditor>
{:else}
<div class="text">
<MessageViewer message={newTemplate.message}/>
</div>
</StyledTextEditor>
{:else}
<div class='text'>
<MessageViewer message={newTemplate.message}/>
</div>
<div class='flex flex-reverse'>
<Button primary label={templatesPlugin.string.EditTemplate} on:click={() => { mode = Mode.Edit }} />
</div>
<div class="flex flex-reverse">
<Button primary label={templatesPlugin.string.EditTemplate} on:click={() => { mode = Mode.Edit }} />
</div>
{/if}
{/if}
{/if}
</div>
</div>
</div>
<style lang="scss">
.navheader-container {
padding: 0 1.75rem;
height: 4rem;
border-bottom: 1px solid var(--theme-menu-divider);
}
.tempaltes-nav {
width: 425px;
border-right: 1px solid var(--theme-menu-divider);
padding: 2rem;
display: flex;
flex-direction: column;
}
.templates-edit {
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 2rem;
background-color: var(--theme-button-bg-enabled);
.titleedit {
font-size: 18px;
border-bottom: 1px solid var(--theme-menu-divider);
padding-bottom: 2rem;
}
}
.templates {
margin-top: 2rem;
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 12px;
.template-container { padding: 2.25rem 2.5rem 1.75rem; }
.separator {
flex-shrink: 0;
margin: 1.5rem 0;
height: 1px;
background-color: var(--theme-menu-divider);
}
.text {
flex-grow: 1;

83
plugins/workbench-resources/src/components/AccountPopup.svelte
View File

@ -70,81 +70,38 @@
}
</script>
<div class="account-popup">
<div class="popup-bg" />
{#await getItems() then items}
<div class="flex-row-center header item" on:click={() => { editProfile(items) }}>
<div class="antiPopup">
<div class="ap-space" />
<div class="ap-scroll"><div class="ap-box">
{#await getItems() then items}
<div class="ap-menuItem flex-row-center" on:click={() => { editProfile(items) }}>
{#if employee}
<Avatar avatar={employee.avatar} size={'medium'} />
{/if}
<div class="ml-2 flex-col">
<div class="ml-2 flex-col">
{#if account}
<div class="overflow-label fs-bold caption-color">{formatName(account.name)}</div>
<div class="overflow-label small-text content-dark-color">{account.email}</div>
<div class="overflow-label text-sm content-dark-color">{account.email}</div>
{/if}
</div>
</div>
</div>
<div class="content">
{#if items}
{#each filterItems(items) as item }
<div class="item flex-row-center" on:click={() => selectCategory(item)}>
<button class="ap-menuItem" on:click={() => selectCategory(item)}>
<div class='mr-2'>
<Icon icon={item.icon} size={'x-small'}/>
<Icon icon={item.icon} size={'small'}/>
</div>
<Label label={item.label} />
</div>
</button>
{/each}
{/if}
<div class="item" on:click={signOut}><Label label={setting.string.Signout} /></div>
</div>
{/await}
<button class="ap-menuItem" on:click={signOut}>
<div class='mr-2'>
<Icon icon={setting.icon.Signout} size={'small'}/>
</div>
<Label label={setting.string.Signout} />
</button>
{/await}
</div></div>
<div class="ap-space" />
</div>
<style lang="scss">
.account-popup {
position: relative;
display: flex;
flex-direction: column;
width: 16rem;
min-width: 16rem;
max-width: 16rem;
border-radius: 1.25rem;
.header {
flex-shrink: 0;
margin: 0.5rem;
margin-bottom: 0.25rem;
}
.content {
flex-shrink: 0;
flex-grow: 1;
margin: 0 .5rem 1rem;
height: fit-content;
}
.item {
padding: .5rem;
color: var(--theme-content-accent-color);
border-radius: .5rem;
cursor: pointer;
&:hover {
color: var(--theme-caption-color);
background-color: var(--theme-button-bg-focused);
}
}
.popup-bg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: var(--theme-card-bg);
border-radius: 1.25rem;
backdrop-filter: blur(15px);
box-shadow: var(--theme-card-shadow);
z-index: -1;
}
}
</style>