mirror of
https://github.com/hcengineering/platform.git
synced 2025-06-09 09:20:54 +00:00
Update Setting layouts, popup, icons. (#897)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
parent
f758fd678f
commit
489599539e
@ -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>
|
||||
|
@ -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} />
|
||||
|
@ -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); }
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.6 KiB |
@ -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;
|
||||
|
@ -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));
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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}
|
||||
|
@ -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>
|
||||
|
@ -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}
|
||||
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 975 B After Width: | Height: | Size: 1.0 KiB |
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user