mirror of
https://github.com/hcengineering/platform.git
synced 2024-11-22 11:42:30 +03:00
Alexander Platov
GitHub
parent
e2ae4b157e
commit
b6de3da74a
@ -156,21 +156,21 @@ export function createModel (builder: Builder): void {
|
||||
id: 'inbox',
|
||||
position: 'top',
|
||||
label: tracker.string.Inbox,
|
||||
icon: tracker.icon.TrackerApplication,
|
||||
icon: tracker.icon.Inbox,
|
||||
component: tracker.component.Inbox
|
||||
},
|
||||
{
|
||||
id: 'my-issues',
|
||||
position: 'top',
|
||||
label: tracker.string.MyIssues,
|
||||
icon: tracker.icon.TrackerApplication,
|
||||
icon: tracker.icon.MyIssues,
|
||||
component: tracker.component.MyIssues
|
||||
},
|
||||
{
|
||||
id: 'views',
|
||||
position: 'top',
|
||||
label: tracker.string.Views,
|
||||
icon: tracker.icon.TrackerApplication,
|
||||
icon: tracker.icon.Views,
|
||||
component: tracker.component.Views
|
||||
}
|
||||
],
|
||||
@ -178,14 +178,14 @@ export function createModel (builder: Builder): void {
|
||||
{
|
||||
label: tracker.string.Teams,
|
||||
spaceClass: tracker.class.Team,
|
||||
// icon: tracker.icon.TrackerApplication,
|
||||
addSpaceLabel: tracker.string.CreateTeam,
|
||||
createComponent: tracker.component.CreateTeam,
|
||||
icon: tracker.icon.Home,
|
||||
specials: [
|
||||
{
|
||||
id: 'issues',
|
||||
label: tracker.string.Issues,
|
||||
icon: tracker.icon.TrackerApplication,
|
||||
icon: tracker.icon.Issues,
|
||||
component: tracker.component.Issues
|
||||
},
|
||||
{
|
||||
@ -209,7 +209,7 @@ export function createModel (builder: Builder): void {
|
||||
{
|
||||
id: 'projects',
|
||||
label: tracker.string.Projects,
|
||||
icon: tracker.icon.TrackerApplication,
|
||||
icon: tracker.icon.Projects,
|
||||
component: tracker.component.Projects
|
||||
}
|
||||
]
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
<div class="antiCard-footer">
|
||||
<Button disabled={!canSave} label={okLabel} size={'small'} transparent primary on:click={() => { okAction(); dispatch('close') }} />
|
||||
<Button label={cancelLabel} size={'small'} transparent on:click={() => { dispatch('close') }} />
|
||||
<Button disabled={!canSave} label={okLabel} kind={'primary'} on:click={() => { okAction(); dispatch('close') }} />
|
||||
<Button label={cancelLabel} on:click={() => { dispatch('close') }} />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div>
|
||||
<Button label={plugin.string.Save} primary on:click={onCrop} />
|
||||
<Button label={plugin.string.Save} kind={'primary'} on:click={onCrop} />
|
||||
</div>
|
||||
<div class="ml-4 mr-4">
|
||||
<Button label={plugin.string.Change} on:click={selectAnother} />
|
||||
|
||||
@ -29,8 +29,8 @@
|
||||
<div class="overflow-label fs-title mb-4"><Label {label} /></div>
|
||||
<div class="message"><Label label={message} /></div>
|
||||
<div class="footer">
|
||||
<Button focus label={presentation.string.Ok} size={'small'} transparent primary on:click={() => dispatch('close', true)} />
|
||||
<Button label={presentation.string.Cancel} size={'small'} transparent on:click={() => dispatch('close', false)} />
|
||||
<Button focus label={presentation.string.Ok} size={'small'} kind={'primary'} on:click={() => dispatch('close', true)} />
|
||||
<Button label={presentation.string.Cancel} size={'small'} on:click={() => dispatch('close', false)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -51,8 +51,8 @@
|
||||
|
||||
<div class="pdfviewer-footer">
|
||||
<div class="flex-row-reverse">
|
||||
<a class="no-line ml-4" href={getFileUrl(file)} download={name}><Button label={presentation.string.Download} size={'small'} primary /></a>
|
||||
<Button label={presentation.string.Close} size={'small'} on:click={() => { dispatch('close') }} />
|
||||
<a class="no-line ml-4" href={getFileUrl(file)} download={name}><Button label={presentation.string.Download} kind={'primary'} /></a>
|
||||
<Button label={presentation.string.Close} on:click={() => { dispatch('close') }} />
|
||||
</div>
|
||||
{#if contentType && contentType.startsWith('image/') }
|
||||
<div class="img-nav">
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
</div>
|
||||
<div class="antiCard-content"><slot /></div>
|
||||
<div class="antiCard-footer">
|
||||
<Button disabled={!canSave} label={presentation.string.Create} size={'small'} transparent primary on:click={() => { okAction(); dispatch('close') }} />
|
||||
<Button label={presentation.string.Cancel} size={'small'} transparent on:click={() => { dispatch('close') }} />
|
||||
<Button disabled={!canSave} label={presentation.string.Create} kind={'primary'} on:click={() => { okAction(); dispatch('close') }} />
|
||||
<Button label={presentation.string.Cancel} on:click={() => { dispatch('close') }} />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -79,7 +79,7 @@
|
||||
{/if}
|
||||
{#each persons as person}
|
||||
<div class="antiComponentBox flex-center margin_025 antiComponentBoxFocused">
|
||||
<UserInfo value={person} size={'medium'} />
|
||||
<UserInfo value={person} size={'x-small'} />
|
||||
<div class="ml-1">
|
||||
<ActionIcon icon={IconClose} size={'small'} action={() => removePerson(person)} />
|
||||
</div>
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
<div class="ap-box">
|
||||
{#each objects as person}
|
||||
<button class="ap-menuItem withCheck" on:click={() => { dispatch('close', person) }}>
|
||||
<UserInfo size={'medium'} value={person} />
|
||||
<UserInfo size={'x-small'} value={person} />
|
||||
{#if allowDeselect && person._id === selected}
|
||||
<div class="ap-check">
|
||||
<ActionIcon direction={'top'} label={titleDeselect ?? presentation.string.Deselect} icon={IconBlueCheck} action={() => { dispatch('close', null) }} size={'small'} />
|
||||
|
||||
@ -52,6 +52,41 @@
|
||||
|
||||
/* Dark Theme */
|
||||
.theme-dark {
|
||||
--body-color: #1f2023;
|
||||
--body-accent: #222326;
|
||||
--tooltip-bg-color: #27282b;
|
||||
--tooltip-shadow: rgb(0 0 0 / 10%) 0px 2px 4px;
|
||||
|
||||
--content-color: #8a8f98;
|
||||
--accent-color: #d7d8db;
|
||||
--caption-color: #f7f8f8;
|
||||
--white-color: #fff;
|
||||
--caret-color: #6e5ed2;
|
||||
|
||||
--divider-color: #303236;
|
||||
--menu-bg-select: #2d2f36;
|
||||
--menu-icon-hover: #f3f3f8;
|
||||
--popup-bg-color: linear-gradient(136.61deg, var(--tooltip-bg-color) 13.72%, #2d2e31 74.3%);
|
||||
--popup-bg-hover: #37373c;
|
||||
--popup-divider: #313236;
|
||||
--popup-shadow: rgb(0 0 0 / 20%) 0px 4px 24px;
|
||||
--card-shadow: rgb(0 0 0 / 50%) 0px 16px 70px;
|
||||
--card-overlay-color: rgba(28, 29, 31, .5);
|
||||
|
||||
--button-bg-color: #303236;
|
||||
--button-bg-hover: #37383b;
|
||||
--button-border-color: #3c3f44;
|
||||
--button-border-hover: #45484e;
|
||||
--button-shadow: rgb(0 0 0 / 25%) 0px 1px 1px;
|
||||
--primary-bg-color: #5e6ad2;
|
||||
--primary-bg-hover: #717ce1;
|
||||
--primary-toggle-hover: #828fff;
|
||||
--primary-edit-border-color: #6499ff;
|
||||
--primary-shadow: rgb(0 0 0 / 25%) 0px 1px 2px;
|
||||
--dangerous-bg-color: #eb5757;
|
||||
--dangerous-bg-hover: #ff6464;
|
||||
--dangerous-shadow: var(--dangerous-bg-color) 0px 0px 12px -1px;
|
||||
|
||||
--theme-bg-color: #18181e;
|
||||
--theme-bg-selection: #282830;
|
||||
--theme-menu-color: #111117;
|
||||
@ -216,6 +251,29 @@
|
||||
|
||||
/* Light Theme */
|
||||
.theme-light {
|
||||
--body-color: #fff;
|
||||
--body-accent: #eee; // HZ
|
||||
--content-color: #6b6f76;
|
||||
--accent-color: #3c4149;
|
||||
--caption-color: #282a30;
|
||||
--white-color: #fff;
|
||||
|
||||
--menu-bg-select: #f0f3f9;
|
||||
--menu-icon-hover: #282a30;
|
||||
--divider-color: #00000010;
|
||||
|
||||
--button-bg-color: #fff;
|
||||
--button-bg-hover: #f4f5f8;
|
||||
--button-border-color: #dfe1e4;
|
||||
--button-border-hover: #c9cbcd;
|
||||
--button-shadow: rgb(0 0 0 / 7%) 0px 1px 1px;
|
||||
--primary-bg-color: #6e79d6;
|
||||
--primary-bg-hover: #5c67c7;
|
||||
--primary-shadow: rgb(0 0 0 / 7%) 0px 1px 2px;
|
||||
--dangerous-bg-color: #eb5757;
|
||||
--dangerous-bg-hover: #d44e4e;
|
||||
--dangerous-shadow: var(--dangerous-bg-color) 0px 0px 12px -1px;
|
||||
|
||||
--theme-bg-color: #FFFFFF;
|
||||
--theme-bg-selection: #F1F1F4;
|
||||
--theme-menu-color: #E7E7E7;
|
||||
|
||||
@ -48,7 +48,7 @@ input {
|
||||
font: inherit;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
color: var(--theme-caption-color);
|
||||
color: var(--caption-color);
|
||||
&.wrong-input { background-color: var(--system-error-color) !important; }
|
||||
}
|
||||
audio, canvas, embed, iframe, img, object, svg, video {
|
||||
@ -223,7 +223,18 @@ p:last-child { margin-block-end: 0; }
|
||||
.icon { transform: translateY(.2rem); }
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
.buttons-group {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
column-gap: .75rem;
|
||||
|
||||
&.reverse { direction: rtl; }
|
||||
&.small-gap { column-gap: .5rem; }
|
||||
}
|
||||
|
||||
.gap-1, .gap-1-5, .gap-2 {
|
||||
& > * { margin-right: .25rem; }
|
||||
& > *:last-child { margin-right: 0; }
|
||||
&.reverse {
|
||||
@ -232,14 +243,13 @@ p:last-child { margin-block-end: 0; }
|
||||
& > :first-child { margin-right: 0; }
|
||||
}
|
||||
}
|
||||
.gap-1-5 {
|
||||
& > * { margin-right: .375rem; }
|
||||
&.reverse > :last-child { margin-right: .375rem; }
|
||||
}
|
||||
.gap-2 {
|
||||
& > * { margin-right: .5rem; }
|
||||
& > *:last-child { margin-right: 0; }
|
||||
&.reverse {
|
||||
flex-direction: row-reverse;
|
||||
& > :last-child { margin-right: .5rem; }
|
||||
& > :first-child { margin-right: 0; }
|
||||
}
|
||||
&.reverse > :last-child { margin-right: .5rem; }
|
||||
}
|
||||
|
||||
/* --------- */
|
||||
@ -294,8 +304,9 @@ p:last-child { margin-block-end: 0; }
|
||||
.mb-2 { margin-bottom: .5rem; }
|
||||
.mb-3 { margin-bottom: .75rem; }
|
||||
.mb-4 { margin-bottom: 1rem; }
|
||||
.mx-1 { margin: 0 .125rem; }
|
||||
.mx-2 { margin: 0 .25rem; }
|
||||
.mx-1 { margin: 0 .25rem; }
|
||||
.mx-2 { margin: 0 .5rem; }
|
||||
.mx-3 { margin: 0 .75rem; }
|
||||
|
||||
.pr-1 { padding-right: .25rem; }
|
||||
.pr-4 { padding-right: 1rem; }
|
||||
@ -401,9 +412,13 @@ a.no-line {
|
||||
.cursor-pointer { cursor: pointer; }
|
||||
.cursor-default { cursor: default; }
|
||||
|
||||
.pointer-events-none { pointer-events: none; }
|
||||
|
||||
/* Text */
|
||||
.text-sm { font-size: .75rem; }
|
||||
.text-md { font-size: .8125rem; }
|
||||
.text-lg { font-size: 1.125rem; }
|
||||
.font-normal { font-weight: 400; }
|
||||
.font-medium { font-weight: 500; }
|
||||
.fs-title {
|
||||
font-weight: 500;
|
||||
|
||||
@ -19,10 +19,9 @@
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-width: 5rem;
|
||||
width: 5rem;
|
||||
min-width: 4rem;
|
||||
width: 4rem;
|
||||
height: 100%;
|
||||
border-radius: 1.25rem;
|
||||
}
|
||||
.antiPanel-navigator,
|
||||
.antiPanel-component {
|
||||
@ -30,11 +29,11 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
border-radius: 1.25rem;
|
||||
overflow: hidden;
|
||||
|
||||
&.indent { margin-right: 1rem; }
|
||||
&.filled { background-color: var(--theme-bg-color); }
|
||||
&.filled { background-color: var(--body-accent); }
|
||||
&.border-left { border-left: 1px solid var(--divider-color); }
|
||||
&.border-right { border-right: 1px solid var(--divider-color); }
|
||||
}
|
||||
.antiPanel-navigator {
|
||||
min-width: 18rem;
|
||||
@ -52,20 +51,27 @@
|
||||
padding: 0 1.75rem;
|
||||
height: 4rem;
|
||||
}
|
||||
.antiNav-subheader {
|
||||
display: flex;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
margin: .5rem .75rem .75rem;
|
||||
}
|
||||
.antiNav-element {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem;
|
||||
height: 2.25rem;
|
||||
border-radius: .5rem;
|
||||
margin: 1px 1rem;
|
||||
padding: .25rem;
|
||||
height: 1.75rem;
|
||||
border-radius: .25rem;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
.an-element__icon {
|
||||
min-width: 1rem;
|
||||
color: var(--theme-content-trans-color);
|
||||
margin: 0 1.125rem 0 0;
|
||||
color: var(--content-color);
|
||||
margin: 0 .625rem 0 .375rem;
|
||||
}
|
||||
.an-element__label {
|
||||
flex-grow: 1;
|
||||
@ -75,31 +81,61 @@
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
font-weight: 400;
|
||||
color: var(--theme-content-color);
|
||||
color: var(--accent-color);
|
||||
&.title {
|
||||
font-weight: 500;
|
||||
color: var(--theme-caption-color);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
.an-element__icon-arrow {
|
||||
margin-left: .5rem;
|
||||
opacity: 0;
|
||||
transform-origin: 35% center;
|
||||
transform: rotate(90deg);
|
||||
transition: transform .2s ease;
|
||||
|
||||
&.collapsed { transform: rotate(0deg); }
|
||||
&.small {
|
||||
width: .325rem;
|
||||
height: .325rem;
|
||||
}
|
||||
&.medium {
|
||||
width: .375rem;
|
||||
height: .375rem;
|
||||
}
|
||||
}
|
||||
.an-element__tool {
|
||||
margin-right: .75rem;
|
||||
margin-left: .75rem;
|
||||
visibility: hidden;
|
||||
}
|
||||
.an-element__counter {
|
||||
margin-right: .75rem;
|
||||
margin-left: .75rem;
|
||||
font-weight: 600;
|
||||
font-size: .75rem;
|
||||
color: var(--theme-caption-color);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
&:hover, &.hovered {
|
||||
background-color: var(--theme-button-bg-enabled);
|
||||
.an-element__tool { visibility: visible; }
|
||||
&:hover, &.hovered, &.selected {
|
||||
background-color: var(--menu-bg-select);
|
||||
.an-element__icon { color: var(--menu-icon-hover); }
|
||||
.an-element__icon-arrow { opacity: 1; }
|
||||
}
|
||||
&.selected {
|
||||
background-color: var(--theme-menu-selection);
|
||||
&:hover { background-color: var(--theme-button-bg-enabled); }
|
||||
&:hover .an-element__tool, &.hovered .an-element__tool { visibility: visible; }
|
||||
|
||||
&:not(.collapsed) .an-element__icon-arrow { opacity: 1; }
|
||||
&.parent {
|
||||
margin: .5rem 1rem 1px;
|
||||
padding: 0 .5rem;
|
||||
height: 1.5rem;
|
||||
font-size: .75rem;
|
||||
line-height: 1.5rem;
|
||||
|
||||
.an-element__icon-arrow { opacity: 0; }
|
||||
.an-element__label { color: var(--content-color); }
|
||||
&.collapsed .an-element__icon-arrow,
|
||||
&:hover .an-element__icon-arrow { opacity: 1; }
|
||||
}
|
||||
&.child { padding: 0 .25rem 0 1.5rem; }
|
||||
|
||||
&__dropbox {
|
||||
height: auto;
|
||||
@ -108,9 +144,9 @@
|
||||
}
|
||||
.antiNav-divider {
|
||||
flex-shrink: 0;
|
||||
margin: 1.5rem 0;
|
||||
margin: .25rem 0;
|
||||
height: 1px;
|
||||
background-color: var(--theme-menu-divider);
|
||||
// background-color: var(--divider-color);
|
||||
}
|
||||
.antiNav-scroll {
|
||||
flex-grow: 1;
|
||||
|
||||
@ -20,9 +20,9 @@
|
||||
height: 100%;
|
||||
|
||||
.ac-header {
|
||||
padding: 0 1.75rem 0 2.5rem;
|
||||
height: 4rem;
|
||||
min-height: 4rem;
|
||||
padding: 0 1.5rem 0 2.25rem;
|
||||
height: 3.5rem;
|
||||
min-height: 3.5rem;
|
||||
|
||||
&.short {
|
||||
display: flex;
|
||||
@ -47,7 +47,7 @@
|
||||
}
|
||||
}
|
||||
&.divide {
|
||||
border-bottom: 1px solid var(--theme-menu-divider);
|
||||
border-bottom: 1px solid var(--divider-color);
|
||||
}
|
||||
|
||||
.ac-header__wrap-description,
|
||||
@ -99,11 +99,11 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
color: var(--theme-content-trans-color);
|
||||
background-color: transparent;
|
||||
border-radius: 0.5rem;
|
||||
border-radius: .25rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
@ -111,7 +111,7 @@
|
||||
}
|
||||
&.selected {
|
||||
color: var(--theme-content-accent-color);
|
||||
background-color: var(--theme-button-bg-enabled);
|
||||
background-color: var(--menu-bg-select);
|
||||
cursor: default;
|
||||
&:hover {
|
||||
color: var(--theme-caption-color);
|
||||
@ -191,6 +191,7 @@
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
height: 100%;
|
||||
background-color: var(--body-color);
|
||||
|
||||
&.columns {
|
||||
flex-direction: row;
|
||||
|
||||
@ -23,8 +23,8 @@
|
||||
right: 1rem;
|
||||
|
||||
height: calc(100% - 32px - 1.25rem);
|
||||
background: var(--theme-bg-color);
|
||||
border-radius: 1.25rem;
|
||||
background: var(--popup-bg-color);
|
||||
border-radius: .5rem;
|
||||
|
||||
&.fullSize {
|
||||
flex-direction: row;
|
||||
@ -64,20 +64,18 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: .5;
|
||||
height: 100vh;
|
||||
background-color: var(--card-overlay-color);
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Cards */
|
||||
.antiCard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--theme-card-bg);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: var(--theme-card-shadow);
|
||||
background: var(--popup-bg-color);
|
||||
border-radius: .5rem;
|
||||
box-shadow: var(--card-shadow);
|
||||
|
||||
.antiCard-header {
|
||||
position: relative;
|
||||
@ -85,7 +83,7 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
padding: 1.75rem;
|
||||
padding: 1rem 1rem 1.5rem;
|
||||
|
||||
&__title {
|
||||
overflow: hidden;
|
||||
@ -95,16 +93,16 @@
|
||||
min-width: 0;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: var(--theme-caption-color);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
&__error {
|
||||
min-width: 0;
|
||||
flex-grow: 1;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
top: 3.25rem;
|
||||
left: 1.75rem;
|
||||
right: 1.75rem;
|
||||
top: 2.5rem;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
font-weight: 500;
|
||||
font-size: .75rem;
|
||||
color: var(--system-error-color);
|
||||
@ -115,14 +113,15 @@
|
||||
.antiCard-content {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
margin: 0 1.75rem;
|
||||
margin: 0 1rem;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.antiCard-pool {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 1.75rem .75rem;
|
||||
margin: 0 1rem .75rem;
|
||||
color: var(--theme-caption-color);
|
||||
|
||||
&__separator {
|
||||
@ -141,8 +140,48 @@
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
column-gap: .75rem;
|
||||
padding: 1rem 1.75rem 1.75rem;
|
||||
height: 5.25rem;
|
||||
border-radius: 0 0 1.25rem 1.25rem;
|
||||
padding: 1.5rem 1rem 1rem;
|
||||
height: 4.5rem;
|
||||
border-radius: 0 0 .5rem .5rem;
|
||||
}
|
||||
|
||||
&.dialog {
|
||||
width: 40rem;
|
||||
height: max-content;
|
||||
max-width: 40rem;
|
||||
|
||||
.antiCard-header {
|
||||
padding: .75rem .75rem .375rem;
|
||||
|
||||
&__title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__divider, &__title {
|
||||
margin-left: .375rem;
|
||||
font-weight: 400;
|
||||
font-size: .8125rem;
|
||||
}
|
||||
&__divider { color: var(--content-color); }
|
||||
&__title { color: var(--accent-color); }
|
||||
}
|
||||
.antiCard-content { margin: 0 1.125rem; }
|
||||
.antiCard-pool {
|
||||
flex-direction: row;
|
||||
margin: .375rem .75rem .75rem;
|
||||
}
|
||||
.antiCard-footer {
|
||||
direction: ltr;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: .75rem;
|
||||
height: auto;
|
||||
border-top: 1px solid var(--button-bg-color);
|
||||
|
||||
&.reverse { flex-direction: row-reverse; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -101,6 +101,7 @@ body {
|
||||
font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
|
||||
font-weight: 400;
|
||||
font-size: .875rem;
|
||||
color: var(--theme-content-color);
|
||||
background-color: var(--theme-menu-color);
|
||||
color: var(--content-color);
|
||||
background-color: var(--body-color);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@ -14,24 +14,88 @@
|
||||
//
|
||||
|
||||
/* Popups */
|
||||
.selectPopup {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: min-content;
|
||||
max-width: 45rem;
|
||||
max-height: 20rem;
|
||||
background: var(--popup-bg-color);
|
||||
border-radius: .5rem;
|
||||
box-shadow: var(--popup-shadow);
|
||||
will-change: transform;
|
||||
|
||||
.header {
|
||||
border-bottom: 1px solid var(--popup-divider);
|
||||
|
||||
input {
|
||||
margin: 0;
|
||||
padding: .625rem .75rem;
|
||||
color: #d6d6d6;
|
||||
border: none;
|
||||
caret-color: var(--caret-color);
|
||||
}
|
||||
}
|
||||
|
||||
.scroll {
|
||||
flex-grow: 1;
|
||||
min-height: 0;
|
||||
height: max-content;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar { width: 0; }
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
flex-shrink: 0;
|
||||
justify-content: start;
|
||||
padding: 0 .75rem;
|
||||
height: 2rem;
|
||||
text-align: left;
|
||||
color: var(--caption-color);
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
margin-right: .75rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
.label {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
&:hover { background-color: var(--popup-bg-hover); }
|
||||
}
|
||||
}
|
||||
|
||||
.antiPopup {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
max-width: 30rem;
|
||||
background-color: var(--theme-button-bg-focused);
|
||||
border: 1px solid var(--theme-button-border-enabled);
|
||||
border-radius: .75rem;
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, .2);
|
||||
background: var(--popup-bg-color);
|
||||
border-radius: .25rem;
|
||||
box-shadow: var(--popup-shadow);
|
||||
user-select: none;
|
||||
|
||||
.ap-space {
|
||||
flex-shrink: 0;
|
||||
height: .5rem;
|
||||
height: .25rem;
|
||||
}
|
||||
.ap-scroll {
|
||||
flex-grow: 1;
|
||||
margin: 0 .25rem;
|
||||
margin: 0;
|
||||
min-height: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
@ -44,19 +108,19 @@
|
||||
.ap-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 .25rem;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.ap-menuItem {
|
||||
justify-content: start;
|
||||
padding: .5rem;
|
||||
color: var(--theme-content-color);
|
||||
border-radius: .5rem;
|
||||
padding: 0 .5rem;
|
||||
height: 2rem;
|
||||
color: var(--caption-color);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
|
||||
&.ap-woScroll { margin: 0 .5rem; }
|
||||
&.selected { background-color: var(--theme-button-bg-hovered); }
|
||||
&.selected { background: var(--popup-bg-hover); }
|
||||
&.empty {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -71,15 +135,7 @@
|
||||
}
|
||||
&.withCheck { justify-content: space-between; }
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-caption-color);
|
||||
background-color: var(--theme-button-bg-hovered);
|
||||
}
|
||||
&:focus {
|
||||
color: var(--theme-content-accent-color);
|
||||
background-color: var(--theme-button-bg-pressed);
|
||||
z-index: 1;
|
||||
}
|
||||
&:hover, &:focus { background-color: var(--popup-bg-hover); }
|
||||
|
||||
&.redlight {
|
||||
color: var(--highlight-red);
|
||||
|
||||
@ -21,13 +21,14 @@
|
||||
import { onMount } from 'svelte'
|
||||
|
||||
export let label: IntlString | undefined = undefined
|
||||
export let primary: boolean = false
|
||||
export let size: 'small' | 'medium' = 'medium'
|
||||
export let kind: 'primary' | 'secondary' | 'no-border' | 'transparent' | 'dangerous' = 'secondary'
|
||||
export let size: 'small' | 'medium' | 'large' | 'large' = 'medium'
|
||||
export let icon: Asset | AnySvelteComponent | undefined = undefined
|
||||
export let justify: 'left' | 'center' = 'center'
|
||||
export let disabled: boolean = false
|
||||
export let loading: boolean = false
|
||||
export let transparent: boolean = false
|
||||
export let width: string | undefined = undefined
|
||||
export let resetIconSize: boolean = false
|
||||
export let focus: boolean = false
|
||||
|
||||
export let input: HTMLButtonElement | undefined = undefined
|
||||
@ -40,9 +41,20 @@
|
||||
})
|
||||
</script>
|
||||
|
||||
<button bind:this={input} class="button {size}" class:transparent class:primary disabled={disabled || loading} style={width ? 'width: ' + width : ''} on:click>
|
||||
<button
|
||||
bind:this={input}
|
||||
class="button {kind} {size} jf-{justify}"
|
||||
class:only-icon={label === undefined}
|
||||
disabled={disabled || loading}
|
||||
style={width ? 'width: ' + width : ''}
|
||||
on:click
|
||||
>
|
||||
{#if icon && !loading}
|
||||
<div class="icon">
|
||||
<div class="btn-icon"
|
||||
class:mr-1={label && kind === 'no-border'}
|
||||
class:mr-2={label && kind !== 'no-border'}
|
||||
class:resetIconSize
|
||||
>
|
||||
<Icon {icon} size={'small'}/>
|
||||
</div>
|
||||
{/if}
|
||||
@ -56,84 +68,119 @@
|
||||
</button>
|
||||
|
||||
<style lang="scss">
|
||||
.small { height: 2.5rem; }
|
||||
.medium { height: 3rem; }
|
||||
.button {
|
||||
padding: 0 1.5rem;
|
||||
font-weight: 600;
|
||||
background-color: var(--theme-button-bg-enabled);
|
||||
color: var(--theme-caption-color);
|
||||
border: 1px solid var(--theme-button-border-enabled);
|
||||
border-radius: .75rem;
|
||||
.small {
|
||||
height: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
&.only-icon { width: 1.5rem; }
|
||||
}
|
||||
.medium {
|
||||
height: 1.75rem;
|
||||
&.only-icon { width: 1.75rem; }
|
||||
}
|
||||
.large {
|
||||
height: 2rem;
|
||||
&.only-icon { width: 2rem; }
|
||||
}
|
||||
.x-large {
|
||||
height: 2.75rem;
|
||||
&.only-icon { width: 2.75rem; }
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: .375rem;
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
padding: 0 .5rem;
|
||||
font-weight: 500;
|
||||
min-width: 1.5rem;
|
||||
white-space: nowrap;
|
||||
color: var(--accent-color);
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: .25rem;
|
||||
transition-property: border, background-color, color, box-shadow;
|
||||
transition-duration: .15s;
|
||||
|
||||
.btn-icon {
|
||||
color: var(--content-color);
|
||||
transition: color .15s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-button-bg-hovered);
|
||||
border-color: var(--theme-button-border-hovered);
|
||||
}
|
||||
&:focus {
|
||||
background-color: var(--theme-button-bg-focused);
|
||||
border-color: var(--theme-button-border-focused);
|
||||
}
|
||||
&:active {
|
||||
background-color: var(--theme-button-bg-pressed);
|
||||
border-color: var(--theme-button-border-pressed);
|
||||
color: var(--caption-color);
|
||||
transition-duration: 0;
|
||||
|
||||
.btn-icon { color: var(--caption-color); }
|
||||
}
|
||||
&:disabled {
|
||||
background-color: var(--theme-button-bg-disabled);
|
||||
border-color: var(--theme-button-border-disabled);
|
||||
color: rgb(var(--theme-caption-color) / 40%);
|
||||
color: rgb(var(--accent-color) / 40%);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.transparent {
|
||||
padding: 0 1.25rem;
|
||||
border-radius: .5rem;
|
||||
color: var(--theme-caption-color);
|
||||
background-color: transparent;
|
||||
border-color: var(--theme-card-divider);
|
||||
backdrop-filter: blur(20px);
|
||||
&.jf-left { justify-content: flex-start; }
|
||||
&.jf-center { justify-content: center; }
|
||||
&.only-icon { padding: 0; }
|
||||
|
||||
&:hover, &:focus, &:active, &:disabled {
|
||||
background-color: transparent;
|
||||
border-color: var(--theme-card-divider);
|
||||
}
|
||||
&:disabled { color: var(--theme-content-dark-color); }
|
||||
}
|
||||
&.secondary {
|
||||
background-color: var(--button-bg-color);
|
||||
border-color: var(--button-border-color);
|
||||
box-shadow: var(--button-shadow);
|
||||
|
||||
.primary {
|
||||
color: var(--primary-button-color);
|
||||
background-color: var(--primary-button-enabled);
|
||||
border-color: var(--primary-button-border);
|
||||
&:hover {
|
||||
background-color: var(--button-bg-hover);
|
||||
border-color: var(--button-border-hover);
|
||||
}
|
||||
&:disabled {
|
||||
background-color: #30323655;
|
||||
border-color: #3c3f4455;
|
||||
}
|
||||
}
|
||||
&.no-border {
|
||||
font-weight: 400;
|
||||
color: var(--content-color);
|
||||
background-color: var(--button-bg-color);
|
||||
box-shadow: var(--button-shadow);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-button-hovered);
|
||||
border-color: var(--primary-button-border);
|
||||
&:hover {
|
||||
color: var(--accent-color);
|
||||
background-color: var(--button-bg-hover);
|
||||
|
||||
.btn-icon { color: var(--accent-color); }
|
||||
}
|
||||
&:disabled {
|
||||
background-color: #30323655;
|
||||
cursor: default;
|
||||
&:hover {
|
||||
color: var(--content-color);
|
||||
.btn-icon { color: var(--content-color); }
|
||||
}
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
background-color: var(--primary-button-focused);
|
||||
border: 1px solid var(--primary-button-focused-border);
|
||||
box-shadow: 0 0 0 3px var(--primary-button-outline);
|
||||
&.transparent:hover { background-color: var(--button-bg-hover); }
|
||||
&.primary {
|
||||
padding: 0 1rem;
|
||||
color: var(--white-color);
|
||||
background-color: var(--primary-bg-color);
|
||||
border-color: var(--primary-bg-color);
|
||||
box-shadow: var(--primary-shadow);
|
||||
|
||||
.btn-icon { color: var(--caption-color); }
|
||||
&:hover { background-color: var(--primary-bg-hover); }
|
||||
&:disabled {
|
||||
background-color: #5e6ad255;
|
||||
border-color: #5e6ad255;
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
background-color: var(--primary-button-pressed);
|
||||
border-color: var(--primary-button-border);
|
||||
box-shadow: none;
|
||||
|
||||
&.dangerous {
|
||||
color: var(--white-color);
|
||||
background-color: var(--dangerous-bg-color);
|
||||
border-color: var(--dangerous-bg-color);
|
||||
|
||||
&:hover { background-color: var(--dangerous-bg-hover); }
|
||||
&:focus { box-shadow: var(--dangerous-shadow); }
|
||||
}
|
||||
&:disabled {
|
||||
color: var(--theme-content-dark-color);
|
||||
background-color: var(--primary-button-disabled);
|
||||
border-color: var(--primary-button-border);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
.transparent.primary:disabled {
|
||||
background-color: var(--theme-button-trans-primary-disabled);
|
||||
border-color: transparent;
|
||||
|
||||
.resetIconSize { font-size: 16px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
<ScrollBox vertical stretch><slot /></ScrollBox>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<Button label={okLabel} primary />
|
||||
<Button label={okLabel} kind={'primary'} />
|
||||
<Button label={ui.string.Cancel} on:click={() => { dispatch('close') }} />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -29,6 +29,7 @@
|
||||
export let placeholder: IntlString = plugin.string.EditBoxPlaceholder
|
||||
export let placeholderParam: any | undefined = undefined
|
||||
export let format: 'text'| 'password' | 'number' = 'text'
|
||||
export let kind: 'editbox' | 'large-style' = 'editbox'
|
||||
export let focus: boolean = false
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
@ -66,61 +67,62 @@
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="container" on:click={() => { input.focus() }}>
|
||||
<div class="hidden-text" bind:this={text}></div>
|
||||
<div class="editbox-container" on:click={() => { input.focus() }}>
|
||||
<div class="hidden-text {kind}" bind:this={text}></div>
|
||||
{#if label}<div class="label"><Label label={label}/></div>{/if}
|
||||
<div class="flex-row-center">
|
||||
<div class="{kind} flex-row-center clear-mins">
|
||||
{#if icon}
|
||||
<div class="content-trans-color mr-1">
|
||||
<Icon {icon} size={'small'}/>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="antiWrapper conners focusWI">
|
||||
{#if format === 'password'}
|
||||
<input bind:this={input} type='passsword' bind:value placeholder={phTraslate} {style} on:input={(ev) => ev.target && computeSize(ev.target)} on:change/>
|
||||
{:else if format === 'number'}
|
||||
<input bind:this={input} type='number' bind:value placeholder={phTraslate} {style} on:input={(ev) => ev.target && computeSize(ev.target)} on:change/>
|
||||
{:else}
|
||||
<input bind:this={input} type='text' bind:value placeholder={phTraslate} {style} on:input={(ev) => ev.target && computeSize(ev.target)} on:change/>
|
||||
{/if}
|
||||
</div>
|
||||
{#if format === 'password'}
|
||||
<input bind:this={input} type='passsword' bind:value placeholder={phTraslate} {style} on:input={(ev) => ev.target && computeSize(ev.target)} on:change/>
|
||||
{:else if format === 'number'}
|
||||
<input bind:this={input} type='number' bind:value placeholder={phTraslate} {style} on:input={(ev) => ev.target && computeSize(ev.target)} on:change/>
|
||||
{:else}
|
||||
<input bind:this={input} type='text' bind:value placeholder={phTraslate} {style} on:input={(ev) => ev.target && computeSize(ev.target)} on:change/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.editbox-container {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: .25rem;
|
||||
font-size: .75rem;
|
||||
font-weight: 500;
|
||||
color: var(--theme-content-accent-color);
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-width: 0;
|
||||
color: var(--theme-caption-color);
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
|
||||
&::placeholder { color: var(--theme-content-dark-color); }
|
||||
|
||||
&::-webkit-contacts-auto-fill-button,
|
||||
&::-webkit-credentials-auto-fill-button {
|
||||
visibility: hidden;
|
||||
display: none !important;
|
||||
.label {
|
||||
margin-bottom: .25rem;
|
||||
font-size: .75rem;
|
||||
font-weight: 500;
|
||||
color: var(--theme-content-accent-color);
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
width: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.large-style {
|
||||
font-weight: 500;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-width: 0;
|
||||
color: var(--caption-color);
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
|
||||
&::-webkit-contacts-auto-fill-button,
|
||||
&::-webkit-credentials-auto-fill-button {
|
||||
visibility: hidden;
|
||||
display: none !important;
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -42,7 +42,7 @@
|
||||
</script>
|
||||
|
||||
<div class="flex-between editbox" style={width ? 'width: ' + width : ''} on:click={() => textHTML.focus()}>
|
||||
<div class="mr-2"><Icon {icon} size={'small'} /></div>
|
||||
<div class="mr-2 icon"><Icon {icon} size={'small'} /></div>
|
||||
<input bind:this={textHTML} type="text" bind:value placeholder={phTraslate} on:change on:input on:keydown/>
|
||||
<slot name='extra'/>
|
||||
{#if value}
|
||||
@ -54,28 +54,32 @@
|
||||
|
||||
<style lang="scss">
|
||||
.editbox {
|
||||
padding: 0 1rem;
|
||||
padding: 0 .5rem 0 .5rem;
|
||||
min-width: 16.75rem;
|
||||
height: 2.5rem;
|
||||
color: var(--theme-caption-color);
|
||||
background-color: var(--theme-button-bg-enabled);
|
||||
border: 1px solid var(--theme-bg-accent-hover);
|
||||
border-radius: .75rem;
|
||||
height: 2rem;
|
||||
color: var(--caption-color);
|
||||
background-color: var(--body-color);
|
||||
border: 1px solid var(--button-border-color);
|
||||
border-radius: .25rem;
|
||||
|
||||
&:focus-within { border-color: var(--theme-content-trans-color); }
|
||||
&:focus-within {
|
||||
border-color: var(--primary-edit-border-color);
|
||||
.icon { color: var(--menu-icon-hover); }
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-radius: .5rem;
|
||||
border-radius: .25rem;
|
||||
|
||||
&::placeholder { color: var(--theme-content-accent-color); }
|
||||
&::placeholder { color: var(--content-color); }
|
||||
}
|
||||
|
||||
.btn {
|
||||
color: var(--theme-content-color);
|
||||
color: var(--content-color);
|
||||
cursor: pointer;
|
||||
&:hover { color: var(--theme-caption-color); }
|
||||
&:hover { color: var(--caption-color); }
|
||||
}
|
||||
.icon { color: var(--content-color); }
|
||||
}
|
||||
</style>
|
||||
|
||||
98
packages/ui/src/components/MiniToggle.svelte
Normal file
98
packages/ui/src/components/MiniToggle.svelte
Normal file
@ -0,0 +1,98 @@
|
||||
<!--
|
||||
// Copyright © 2020 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.
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import type { IntlString } from '@anticrm/platform'
|
||||
import Label from './Label.svelte'
|
||||
|
||||
export let label: IntlString
|
||||
export let on: boolean = false
|
||||
</script>
|
||||
|
||||
<div class="flex-row-center">
|
||||
<label class="mini-toggle">
|
||||
<input class="chBox" type="checkbox" bind:checked={on} on:change>
|
||||
<span class="toggle-switch"></span>
|
||||
</label>
|
||||
<span class="mini-toggle-label" on:click={() => { on = !on }}><Label {label} /></span>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.mini-toggle {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 14px;
|
||||
min-width: 22px;
|
||||
// line-height: 1.75rem;
|
||||
vertical-align: middle;
|
||||
font-size: inherit;
|
||||
user-select: none;
|
||||
.chBox {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
overflow: hidden;
|
||||
|
||||
&:checked + .toggle-switch {
|
||||
background-color: var(--primary-bg-color);
|
||||
&:hover { background-color: var(--primary-toggle-hover); }
|
||||
&:before {
|
||||
left: 9px;
|
||||
background: var(--white-color);
|
||||
}
|
||||
}
|
||||
&:not(:disabled) + .toggle-switch { cursor: pointer; }
|
||||
&:disabled + .toggle-switch {
|
||||
filter: grayscale(70%);
|
||||
&:before { background: #eee; }
|
||||
}
|
||||
// &:focus-within + .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
|
||||
}
|
||||
// &:active > .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 14px;
|
||||
border-radius: 4.5rem;
|
||||
background-color: var(--button-border-color);
|
||||
transition: left .2s, background-color .2s;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 3px;
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--tooltip-bg-color);
|
||||
// box-shadow: 1px 2px 7px rgba(119, 129, 142, 0.1);
|
||||
transition: all .1s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
&-label {
|
||||
margin-left: .375rem;
|
||||
font-size: .75rem;
|
||||
color: var(--content-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -60,9 +60,9 @@
|
||||
const rectPopup = modalHTML.getBoundingClientRect()
|
||||
// Vertical
|
||||
if (rect.bottom + rectPopup.height + 28 <= document.body.clientHeight) {
|
||||
modalHTML.style.top = `calc(${rect.bottom}px + .75rem)`
|
||||
modalHTML.style.top = `calc(${rect.bottom}px + 1px)`
|
||||
} else if (rectPopup.height + 28 < rect.top) {
|
||||
modalHTML.style.bottom = `calc(${document.body.clientHeight - rect.y}px + .75rem)`
|
||||
modalHTML.style.bottom = `calc(${document.body.clientHeight - rect.y}px + 1px)`
|
||||
} else {
|
||||
modalHTML.style.top = modalHTML.style.bottom = '1rem'
|
||||
}
|
||||
@ -91,7 +91,7 @@
|
||||
modalHTML.style.right = '0'
|
||||
}
|
||||
} else {
|
||||
modalHTML.style.top = '50%'
|
||||
modalHTML.style.top = '25%'
|
||||
modalHTML.style.left = '50%'
|
||||
modalHTML.style.transform = 'translate(-50%, -50%)'
|
||||
show = true
|
||||
@ -112,7 +112,7 @@
|
||||
<div class="popup" bind:this={modalHTML} style={`z-index: ${zIndex + 1};`}>
|
||||
<svelte:component bind:this={componentInstance} this={is} {...props} on:update={(ev) => _update(ev.detail)} on:close={(ev) => _close(ev.detail)} />
|
||||
</div>
|
||||
<div class="modal-overlay" class:show style={`z-index: ${zIndex};`} on:click={() => escapeClose()} />
|
||||
<div class="modal-overlay" class:antiOverlay={show} style={`z-index: ${zIndex};`} on:click={() => escapeClose()} />
|
||||
|
||||
<style lang="scss">
|
||||
.popup {
|
||||
@ -128,7 +128,6 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&.show { background: rgba(0, 0, 0, .5); }
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -25,10 +25,10 @@
|
||||
<style lang="scss">
|
||||
.toggle {
|
||||
display: inline-block;
|
||||
width: 3.25rem;
|
||||
min-width: 3.25rem;
|
||||
height: 1.75rem;
|
||||
line-height: 1.75rem;
|
||||
width: 2rem;
|
||||
min-width: 2rem;
|
||||
height: 1.5rem;
|
||||
// line-height: 1.75rem;
|
||||
vertical-align: middle;
|
||||
font-size: inherit;
|
||||
user-select: none;
|
||||
@ -43,8 +43,12 @@
|
||||
overflow: hidden;
|
||||
|
||||
&:checked + .toggle-switch {
|
||||
background-color: var(--theme-on-color);
|
||||
&:before { left: calc(3.5rem - 1.625rem); }
|
||||
background-color: var(--primary-bg-color);
|
||||
&:hover { background-color: var(--primary-toggle-hover); }
|
||||
&:before {
|
||||
left: .75rem;
|
||||
background: var(--white-color);
|
||||
}
|
||||
}
|
||||
&:not(:disabled) + .toggle-switch { cursor: pointer; }
|
||||
&:disabled + .toggle-switch {
|
||||
@ -57,21 +61,21 @@
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 3.5rem;
|
||||
height: 1.75rem;
|
||||
border-radius: 3.125rem;
|
||||
background-color: var(--theme-off-color);
|
||||
width: 2rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 4.5rem;
|
||||
background-color: var(--button-border-color);
|
||||
transition: left .2s, background-color .2s;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: .125rem;
|
||||
left: .125rem;
|
||||
top: .25rem;
|
||||
left: .25rem;
|
||||
display: inline-block;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
background: var(--body-color);
|
||||
box-shadow: 1px 2px 7px rgba(119, 129, 142, 0.1);
|
||||
transition: .15s;
|
||||
}
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
$: if (currentDate) renderCellStyles()
|
||||
|
||||
const scrolling = (ev: Event): void => {
|
||||
console.log('!!! Scrolling:', ev)
|
||||
// console.log('!!! Scrolling:', ev)
|
||||
}
|
||||
|
||||
afterUpdate(() => {
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3,8.5L8.1,3c1.1-1.2,2.9-1.2,4,0c1.1,1.2,1.1,3,0,4.2l-5.9,6.3c-0.4,0.5-1.1,0.5-1.6,0c-0.4-0.5-0.4-1.2,0-1.7l5.9-6.3 c0.2-0.2,0.2-0.6,0-0.8c-0.2-0.2-0.6-0.2-0.8,0L3.7,11c-0.9,0.9-0.9,2.4,0,3.3c0.9,0.9,2.3,0.9,3.2,0l5.9-6.3c1.5-1.6,1.5-4.2,0-5.8 c-1.5-1.6-4-1.6-5.5,0L2.2,7.6c-0.2,0.2-0.2,0.6,0,0.8C2.4,8.7,2.7,8.7,3,8.5z"/>
|
||||
<path d="M12.6429 7.69048L8.92925 11.4041C7.48164 12.8517 5.34347 13.0101 4.16667 11.8333C2.98733 10.654 3.14447 8.52219 4.59216 7.07451L8.00206 3.66461C8.93557 2.73109 10.2976 2.63095 11.0333 3.36667C11.7681 4.10139 11.6658 5.4675 10.7361 6.39727L7.32363 9.8097C6.90202 10.2313 6.32171 10.2741 6.02381 9.97619C5.72651 9.6789 5.76949 9.09718 6.1989 8.66776L9.29048 5.57619C9.56662 5.30005 9.56662 4.85233 9.29048 4.57619C9.01433 4.30005 8.56662 4.30005 8.29048 4.57619L5.1989 7.66776C4.24737 8.6193 4.13865 10.091 5.02381 10.9762C5.9095 11.8619 7.37984 11.7535 8.32363 10.8097L11.7361 7.39727C13.1876 5.94573 13.3564 3.68975 12.0333 2.36667C10.7099 1.04326 8.45782 1.20884 7.00206 2.66461L3.59216 6.07451C1.62229 8.04437 1.39955 11.0662 3.16667 12.8333C4.93146 14.5981 7.9596 14.3737 9.92925 12.4041L13.6429 8.69048C13.919 8.41433 13.919 7.96662 13.6429 7.69048C13.3667 7.41433 12.919 7.41433 12.6429 7.69048Z"/>
|
||||
</svg>
|
||||
|
||||
@ -3,6 +3,6 @@
|
||||
export let fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.7,8l4.6-4.6c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0L8,7.3L3.4,2.6c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7L7.3,8l-4.6,4.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.7l4.6,4.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 class="svg-{size}" {fill} viewBox="-7 -7 38 38" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.439127 21.44C0.157865 21.7214 -9.37008e-05 22.103 7.33302e-08 22.5008C9.38474e-05 22.8987 0.158232 23.2802 0.439627 23.5615C0.721022 23.8427 1.10262 24.0007 1.50048 24.0006C1.89834 24.0005 2.27987 23.8424 2.56113 23.561L11.8231 14.3C11.8463 14.2767 11.8739 14.2582 11.9043 14.2456C11.9347 14.233 11.9672 14.2265 12.0001 14.2265C12.033 14.2265 12.0656 14.233 12.0959 14.2456C12.1263 14.2582 12.1539 14.2767 12.1771 14.3L21.4391 23.563C21.5784 23.7023 21.7437 23.8128 21.9257 23.8883C22.1077 23.9637 22.3028 24.0025 22.4998 24.0026C22.6968 24.0026 22.8919 23.9639 23.0739 23.8885C23.2559 23.8132 23.4213 23.7027 23.5606 23.5635C23.7 23.4242 23.8105 23.2589 23.8859 23.0769C23.9614 22.8949 24.0002 22.6998 24.0003 22.5028C24.0003 22.3058 23.9615 22.1107 23.8862 21.9287C23.8109 21.7467 23.7004 21.5813 23.5611 21.442L14.3001 12.177C14.2768 12.1537 14.2584 12.1262 14.2458 12.0958C14.2332 12.0654 14.2267 12.0329 14.2267 12C14.2267 11.9671 14.2332 11.9345 14.2458 11.9042C14.2584 11.8738 14.2768 11.8462 14.3001 11.823L23.5631 2.56097C23.8444 2.27931 24.0022 1.89745 24.002 1.49941C24.0017 1.10136 23.8433 0.71973 23.5616 0.438468C23.28 0.157206 22.8981 -0.000647135 22.5001 -0.000365836C22.102 -8.45362e-05 21.7204 0.158308 21.4391 0.439968L12.1771 9.69997C12.1539 9.72325 12.1263 9.74172 12.0959 9.75432C12.0656 9.76693 12.033 9.77342 12.0001 9.77342C11.9672 9.77342 11.9347 9.76693 11.9043 9.75432C11.8739 9.74172 11.8463 9.72325 11.8231 9.69997L2.56113 0.439968C2.42186 0.300636 2.25651 0.190098 2.07453 0.114667C1.89254 0.0392356 1.69748 0.000387673 1.50048 0.000341244C1.10262 0.000247476 0.721022 0.158206 0.439627 0.439468C0.158232 0.72073 9.38099e-05 1.10226 4.17235e-08 1.50011C-9.37265e-05 1.89797 0.157865 2.27957 0.439127 2.56097L9.70013 11.823C9.72341 11.8462 9.74188 11.8738 9.75448 11.9042C9.76709 11.9345 9.77357 11.9671 9.77357 12C9.77357 12.0329 9.76709 12.0654 9.75448 12.0958C9.74188 12.1262 9.72341 12.1537 9.70013 12.177L0.439127 21.44Z"/>
|
||||
</svg>
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<path d="M7.1,13.5H3.2L7,9.7C7.2,9.5,7.2,9.2,7,9S6.5,8.8,6.3,9l-3.8,3.8V8.9c0-0.3-0.2-0.5-0.5-0.5S1.5,8.6,1.5,8.9V14c0,0,0,0,0,0 c0,0.1,0,0.1,0,0.2c0,0,0,0.1,0.1,0.1c0,0,0,0,0,0c0,0,0.1,0,0.1,0.1c0,0,0.1,0,0.1,0.1c0.1,0,0.1,0,0.2,0c0,0,0,0,0,0h5.1 c0.3,0,0.5-0.2,0.5-0.5S7.4,13.5,7.1,13.5z"/>
|
||||
<path d="M14.5,1.8C14.4,1.8,14.4,1.8,14.5,1.8c-0.1-0.1-0.1-0.1-0.1-0.2c0,0,0,0,0,0c0,0-0.1-0.1-0.1-0.1c-0.1,0-0.1,0-0.2,0 c0,0,0,0,0,0H8.9C8.6,1.5,8.4,1.7,8.4,2s0.2,0.5,0.5,0.5h3.9L9,6.3C8.8,6.5,8.8,6.8,9,7c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1 l3.8-3.8v3.9c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V2C14.5,1.9,14.5,1.9,14.5,1.8z"/>
|
||||
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 16 16">
|
||||
<path d="M7.75 0.75C7.75 0.335786 8.08579 0 8.5 0H11.25C11.6642 0 12 0.335786 12 0.75V3.5C12 3.91421 11.6642 4.25 11.25 4.25C10.8358 4.25 10.5 3.91421 10.5 3.5V2.56066L7.78033 5.28033C7.48744 5.57322 7.01256 5.57322 6.71967 5.28033C6.42678 4.98744 6.42678 4.51256 6.71967 4.21967L9.43934 1.5H8.5C8.08579 1.5 7.75 1.16421 7.75 0.75ZM5.28033 6.71967C5.57322 7.01256 5.57322 7.48744 5.28033 7.78033L2.56066 10.5H3.5C3.91421 10.5 4.25 10.8358 4.25 11.25C4.25 11.6642 3.91421 12 3.5 12H0.75C0.335786 12 0 11.6642 0 11.25V8.5C0 8.08579 0.335786 7.75 0.75 7.75C1.16421 7.75 1.5 8.08579 1.5 8.5V9.43934L4.21967 6.71967C4.51256 6.42678 4.98744 6.42678 5.28033 6.71967Z"/>
|
||||
</svg>
|
||||
|
||||
@ -95,6 +95,7 @@
|
||||
min-width: 1200px;
|
||||
font-size: 12px;
|
||||
line-height: 150%;
|
||||
background-color: var(--divider-color);
|
||||
|
||||
.status-info {
|
||||
flex-grow: 1;
|
||||
|
||||
@ -34,6 +34,7 @@ export { default as ActionIcon } from './components/ActionIcon.svelte'
|
||||
export { default as Toggle } from './components/Toggle.svelte'
|
||||
export { default as Dialog } from './components/Dialog.svelte'
|
||||
export { default as ToggleWithLabel } from './components/ToggleWithLabel.svelte'
|
||||
export { default as MiniToggle } from './components/MiniToggle.svelte'
|
||||
export { default as Tooltip } from './components/Tooltip.svelte'
|
||||
export { default as TooltipInstance } from './components/TooltipInstance.svelte'
|
||||
export { default as CheckBox } from './components/CheckBox.svelte'
|
||||
|
||||
@ -208,11 +208,11 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="fs-title ml-2 mb-2 flex-row-center">
|
||||
<div class="fs-title ml-10 mb-2 flex-row-center">
|
||||
{label(currentDate(date, shifts), mode)}
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 mb-4">
|
||||
<div class="flex gap-2 mb-4 ml-10">
|
||||
<!-- <Button
|
||||
size={'small'}
|
||||
label={calendar.string.ModeDay}
|
||||
@ -255,7 +255,7 @@
|
||||
mode = CalendarMode.Year
|
||||
}}
|
||||
/>
|
||||
<div class="flex ml-4 gap-1">
|
||||
<div class="flex ml-4 gap-2">
|
||||
<Button
|
||||
icon={IconBack}
|
||||
size={'small'}
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
</script>
|
||||
|
||||
<div class='antiPopup'>
|
||||
<Button label={calendar.string.CreateReminder} primary on:click={(e) => click(e)} />
|
||||
<Button label={calendar.string.CreateReminder} kind={'primary'} on:click={(e) => click(e)} />
|
||||
<div class="ap-space" />
|
||||
<Table
|
||||
_class={calendar.mixin.Reminder}
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
</script>
|
||||
|
||||
{#if channels?.length === 0}
|
||||
<div id="channels-edit">
|
||||
<div id="channels-edit" class="flex-row-center">
|
||||
<CircleButton
|
||||
icon={IconAdd}
|
||||
size={'small'}
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
<SearchEdit bind:value={search} on:change={() => {
|
||||
updateResultQuery(search)
|
||||
}}/>
|
||||
<Button icon={IconAdd} label={contact.string.ContactCreateLabel} primary={true} size={'small'} on:click={(ev) => showCreateDialog(ev)}/>
|
||||
<Button icon={IconAdd} label={contact.string.ContactCreateLabel} kind={'primary'} on:click={(ev) => showCreateDialog(ev)}/>
|
||||
</div>
|
||||
|
||||
<Scroller>
|
||||
|
||||
@ -133,7 +133,7 @@
|
||||
<Button
|
||||
label={gmail.string.PublishSelected}
|
||||
size={'small'}
|
||||
primary
|
||||
kind={'primary'}
|
||||
disabled={!selected.size}
|
||||
on:click={share}
|
||||
/>
|
||||
@ -150,7 +150,7 @@
|
||||
<Button
|
||||
label={gmail.string.CreateMessage}
|
||||
size={'small'}
|
||||
primary
|
||||
kind={'primary'}
|
||||
on:click={() => {
|
||||
newMessage = true
|
||||
}}
|
||||
@ -169,7 +169,7 @@
|
||||
<div class="flex-center">
|
||||
<Button
|
||||
label={gmail.string.Connect}
|
||||
primary
|
||||
kind={'primary'}
|
||||
size={'small'}
|
||||
on:click={(e) => {
|
||||
showPopup(Connect, {}, e.target)
|
||||
|
||||
@ -59,7 +59,7 @@
|
||||
<div class="content">
|
||||
<Label label={gmail.string.RedirectGoogle} />
|
||||
<div class="footer">
|
||||
<Button label={gmail.string.Connect} primary disabled={connecting} on:click={sendRequest} />
|
||||
<Button label={gmail.string.Connect} kind={'primary'} disabled={connecting} on:click={sendRequest} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
<Button
|
||||
label={gmail.string.Reply}
|
||||
size={'small'}
|
||||
primary
|
||||
kind={'primary'}
|
||||
on:click={() => {
|
||||
newMessage = true
|
||||
}}
|
||||
|
||||
@ -139,7 +139,7 @@
|
||||
<div class="mr-2">
|
||||
<ActionIcon icon={IconAttachment} size={'small'} action={() => {inputFile.click()}} />
|
||||
</div>
|
||||
<Button label={plugin.string.Send} size={'small'} primary on:click={sendMsg} />
|
||||
<Button label={plugin.string.Send} size={'small'} kind={'primary'} on:click={sendMsg} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-col clear-mins right-content"
|
||||
|
||||
@ -45,8 +45,7 @@
|
||||
<Button
|
||||
label={inventory.string.CategoryCreateLabel}
|
||||
icon={IconAdd}
|
||||
primary={true}
|
||||
size={'small'}
|
||||
kind={'primary'}
|
||||
on:click={(ev) => showCreateDialog(ev)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -52,8 +52,7 @@
|
||||
<Button
|
||||
label={inventory.string.ProductCreateLabel}
|
||||
icon={IconAdd}
|
||||
primary={true}
|
||||
size={'small'}
|
||||
kind={'primary'}
|
||||
on:click={(ev) => showCreateDialog(ev)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -120,7 +120,7 @@
|
||||
<div class="form-row send">
|
||||
<Button
|
||||
label={action.i18n}
|
||||
primary
|
||||
kind={'primary'}
|
||||
width="100%"
|
||||
loading={inAction}
|
||||
disabled={status.severity !== Severity.OK && status.severity !== Severity.ERROR}
|
||||
|
||||
@ -48,15 +48,15 @@
|
||||
<div class="buttons flex">
|
||||
<Button
|
||||
label={login.string.Copy}
|
||||
size="small"
|
||||
size={'small'}
|
||||
on:click={() => {
|
||||
copy(link)
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
label={login.string.Close}
|
||||
size="small"
|
||||
primary
|
||||
size={'small'}
|
||||
kind={'primary'}
|
||||
on:click={() => {
|
||||
dispatch('close')
|
||||
}}
|
||||
|
||||
@ -77,7 +77,7 @@
|
||||
{/each}
|
||||
{#if !workspaces.length}
|
||||
<div class="form-row send">
|
||||
<Button label={login.string.CreateWorkspace} primary width="100%" on:click={createWorkspace} />
|
||||
<Button label={login.string.CreateWorkspace} kind={'primary'} width="100%" on:click={createWorkspace} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@ -125,7 +125,7 @@
|
||||
<div class="flex-row-reverse">
|
||||
<Button
|
||||
label={presentation.string.Save}
|
||||
primary
|
||||
kind={'primary'}
|
||||
on:click={() => {
|
||||
save()
|
||||
}}
|
||||
|
||||
@ -75,7 +75,7 @@
|
||||
</div>
|
||||
|
||||
<SearchEdit bind:value={search} on:change={() => { updateResultQuery(search) }} />
|
||||
<Button icon={IconAdd} label={recruit.string.ApplicationCreateLabel} primary size={'small'} on:click={(ev) => showCreateDialog(ev)} />
|
||||
<Button icon={IconAdd} label={recruit.string.ApplicationCreateLabel} kind={'primary'} on:click={(ev) => showCreateDialog(ev)} />
|
||||
</div>
|
||||
|
||||
<Scroller>
|
||||
|
||||
@ -69,7 +69,7 @@
|
||||
<SearchEdit bind:value={search} on:change={() => {
|
||||
updateResultQuery(search, documentIds)
|
||||
}} />
|
||||
<Button icon={IconAdd} label={recruit.string.CandidateCreateLabel} primary size={'small'} on:click={(ev) => showCreateDialog(ev)} />
|
||||
<Button icon={IconAdd} label={recruit.string.CandidateCreateLabel} kind={'primary'} on:click={(ev) => showCreateDialog(ev)} />
|
||||
</div>
|
||||
|
||||
<Component is={tags.component.TagsCategoryBar} props={{ targetClass: recruit.mixin.Candidate, category }} on:change={(evt) => updateCategory(evt.detail) }/>
|
||||
|
||||
@ -111,7 +111,7 @@
|
||||
vquery = search
|
||||
}}
|
||||
/>
|
||||
<Button icon={IconAdd} label={recruit.string.VacancyCreateLabel} primary size={'small'} on:click={(ev) => showCreateDialog(ev)} />
|
||||
<Button icon={IconAdd} label={recruit.string.VacancyCreateLabel} kind={'primary'} on:click={(ev) => showCreateDialog(ev)} />
|
||||
</div>
|
||||
<Scroller>
|
||||
<Table
|
||||
|
||||
@ -82,7 +82,7 @@
|
||||
<Button
|
||||
{label}
|
||||
{disabled}
|
||||
primary
|
||||
kind={'primary'}
|
||||
on:click={() => {
|
||||
save()
|
||||
}}
|
||||
|
||||
@ -75,7 +75,7 @@
|
||||
{#if integration.disabled && integrationType.reconnectComponent}
|
||||
<Button
|
||||
label={setting.string.Reconnect}
|
||||
primary
|
||||
kind={'primary'}
|
||||
on:click={(e) => {
|
||||
if (integrationType.reconnectComponent) {
|
||||
showPopup(integrationType.reconnectComponent, {}, e.target, reconnect)
|
||||
@ -88,7 +88,7 @@
|
||||
{:else}
|
||||
<Button
|
||||
label={setting.string.Add}
|
||||
primary
|
||||
kind={'primary'}
|
||||
on:click={(e) => {
|
||||
showPopup(integrationType.createComponent, {}, e.target, close)
|
||||
}}
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
<div class='flex-center'>
|
||||
<Button
|
||||
label={setting.string.Reconnect}
|
||||
primary
|
||||
kind={'primary'}
|
||||
on:click={(e) => {
|
||||
if (type?.reconnectComponent) {
|
||||
showPopup(type.reconnectComponent, {}, e.target, reconnect)
|
||||
|
||||
@ -107,7 +107,6 @@
|
||||
<Button
|
||||
label={tags.string.CancelLabel}
|
||||
size={'small'}
|
||||
transparent
|
||||
on:click={() => {
|
||||
dispatch('close')
|
||||
}}
|
||||
|
||||
@ -65,7 +65,7 @@
|
||||
updateResultQuery(search, category)
|
||||
}}
|
||||
/>
|
||||
<Button icon={IconAdd} label={сreateItemLabel} primary size={'small'} on:click={(ev) => showCreateDialog(ev)} />
|
||||
<Button icon={IconAdd} label={сreateItemLabel} kind={'primary'} on:click={(ev) => showCreateDialog(ev)} />
|
||||
</div>
|
||||
|
||||
<CategoryBar
|
||||
|
||||
@ -209,7 +209,7 @@
|
||||
<Button
|
||||
label={telegram.string.PublishSelected}
|
||||
size={'small'}
|
||||
primary
|
||||
kind={'primary'}
|
||||
disabled={!selected.size}
|
||||
on:click={share}
|
||||
/>
|
||||
@ -220,7 +220,7 @@
|
||||
<div class="flex-center">
|
||||
<Button
|
||||
label={telegram.string.Connect}
|
||||
primary
|
||||
kind={'primary'}
|
||||
on:click={(e) => {
|
||||
showPopup(Connect, {}, e.target, onConnectClose)
|
||||
}}
|
||||
@ -230,7 +230,7 @@
|
||||
<div class="flex-center">
|
||||
<Button
|
||||
label={setting.string.Reconnect}
|
||||
primary
|
||||
kind={'primary'}
|
||||
on:click={(e) => {
|
||||
showPopup(Reconnect, {}, e.target, onReconnect)
|
||||
}}
|
||||
|
||||
@ -143,7 +143,7 @@
|
||||
<EditBox label={telegram.string.Phone} maxWidth="10rem" placeholder={telegram.string.PhonePlaceholder} bind:value={phone} />
|
||||
{/if}
|
||||
<div class="footer">
|
||||
<Button {label} primary {disabled} on:click={click} />
|
||||
<Button {label} kind={'primary'} {disabled} on:click={click} />
|
||||
{#if requested || secondFactor}
|
||||
<div class="link over-underline" on:click={back}><Label label={telegram.string.Back} /></div>
|
||||
{/if}
|
||||
|
||||
@ -158,7 +158,7 @@
|
||||
{/await}
|
||||
{/if}
|
||||
<div class="footer">
|
||||
<Button {label} primary {disabled} on:click={click} />
|
||||
<Button {label} kind={'primary'} {disabled} on:click={click} />
|
||||
{#if requested || secondFactor}
|
||||
<div class="link over-underline" on:click={back}><Label label={telegram.string.Back} /></div>
|
||||
{/if}
|
||||
|
||||
@ -115,7 +115,7 @@
|
||||
}}>
|
||||
<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} />
|
||||
<Button disabled={newTemplate.title.trim().length === 0 } kind={'primary'} label={templatesPlugin.string.SaveTemplate} on:click={saveNewTemplate} />
|
||||
</div>
|
||||
<Button
|
||||
label={templatesPlugin.string.Cancel}
|
||||
@ -133,7 +133,7 @@
|
||||
<MessageViewer message={newTemplate.message}/>
|
||||
</div>
|
||||
<div class="flex flex-reverse">
|
||||
<Button primary label={templatesPlugin.string.EditTemplate} on:click={() => { mode = Mode.Edit }} />
|
||||
<Button kind={'primary'} label={templatesPlugin.string.EditTemplate} on:click={() => { mode = Mode.Edit }} />
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
@ -20,4 +20,78 @@
|
||||
<path d="M8,14.5c-3.6,0-6.5-2.9-6.5-6.5S4.4,1.5,8,1.5s6.5,2.9,6.5,6.5S11.6,14.5,8,14.5z M8,2.5C5,2.5,2.5,5,2.5,8 c0,3,2.5,5.5,5.5,5.5c3,0,5.5-2.5,5.5-5.5C13.5,5,11,2.5,8,2.5z"/>
|
||||
<polygon points="7.4,10.7 5,8.4 5.7,7.6 7.3,9.3 10.3,5.7 11,6.3 "/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="inbox" viewBox="0 0 16 16">
|
||||
<path d="M10.5914 1C11.9984 1 13.2164 1.97789 13.5205 3.35169L14.8819 9.50233C14.9604 9.85714 15 10.2195 15 10.5829V12.5181C15 13.8888 13.8888 15 12.5181 15H3.48193C2.1112 15 1 13.8888 1 12.5181V10.5829C1 10.2195 1.03962 9.85714 1.11815 9.50233L2.47949 3.35169C2.78356 1.97789 4.00156 1 5.4086 1H10.5914ZM10.5914 2.5H5.4086C4.70508 2.5 4.09608 2.98894 3.94405 3.67584L2.5827 9.82649L2.548 10.01L5.01028 10.0108C5.55851 10.0108 6.00293 10.4552 6.00293 11.0034C6.00293 11.5517 6.44735 11.9961 6.99557 11.9961H9.05948C9.6077 11.9961 10.0521 11.5517 10.0521 11.0034C10.0521 10.4552 10.4965 10.0108 11.0448 10.0108L13.4528 10.0102C13.4426 9.94867 13.4308 9.88742 13.4173 9.82649L12.056 3.67584C11.9039 2.98894 11.2949 2.5 10.5914 2.5Z"/>
|
||||
</symbol>
|
||||
<symbol id="myissues" viewBox="0 0 16 16">
|
||||
<path d="M14.2458 10C14.6255 10 14.9393 10.2822 14.9889 10.6482L14.9958 10.75V12.2475C14.9958 13.7083 13.8567 14.9034 12.4177 14.9922L12.2504 14.9975L10.7513 15C10.3371 15.0007 10.0007 14.6655 10 14.2513C9.99936 13.8716 10.281 13.5573 10.647 13.507L10.7487 13.5L12.2479 13.4975C12.8943 13.4964 13.4255 13.0047 13.4893 12.3751L13.4958 12.2475V10.75C13.4958 10.3358 13.8316 10 14.2458 10ZM1.75 10C2.16421 10 2.5 10.3358 2.5 10.75V12.2475C2.5 12.937 3.05836 13.4963 3.74789 13.4975L5.24703 13.5C5.66125 13.5007 5.99646 13.8371 5.99576 14.2513C5.99506 14.6655 5.65871 15.0007 5.2445 15L3.74535 14.9975C2.22839 14.9949 1 13.7644 1 12.2475V10.75C1 10.3358 1.33579 10 1.75 10ZM8 6C9.10457 6 10 6.89543 10 8C10 9.10457 9.10457 10 8 10C6.89543 10 6 9.10457 6 8C6 6.89543 6.89543 6 8 6ZM10.7513 1L12.2504 1.00254C13.7674 1.0051 14.9958 2.23556 14.9958 3.75253V5.25C14.9958 5.66422 14.66 6 14.2458 6C13.8316 6 13.4958 5.66422 13.4958 5.25V3.75253C13.4958 3.063 12.9374 2.5037 12.2479 2.50253L10.7487 2.5C10.3345 2.4993 9.9993 2.16295 10 1.74873C10.0007 1.33452 10.3371 0.999302 10.7513 1ZM5.24873 1C5.66295 0.999303 5.9993 1.33452 6 1.74873C6.0007 2.16295 5.66548 2.4993 5.25127 2.5L3.75212 2.50253C3.06259 2.5037 2.50424 3.063 2.50424 3.75253V5.25C2.50424 5.66422 2.16845 6 1.75424 6C1.34002 6 1.00424 5.66422 1.00424 5.25V3.75253C1.00424 2.23556 2.23262 1.0051 3.74959 1.00254L5.24873 1Z"/>
|
||||
</symbol>
|
||||
<symbol id="views" viewBox="0 0 16 16">
|
||||
<path d="M12.6541 10.7952L14.7544 11.6213C14.8576 11.6618 14.9394 11.7434 14.9801 11.8466C15.0511 12.0264 14.9828 12.2268 14.827 12.3284L14.755 12.3656L8.35645 14.8924C8.15935 14.9703 7.94372 14.9831 7.74052 14.9309L7.62035 14.8918L1.25259 12.3653C1.1499 12.3246 1.06864 12.2432 1.02806 12.1404C0.957068 11.9607 1.02536 11.7603 1.1812 11.6587L1.25319 11.6215L3.34307 10.7962L7.06917 12.2751C7.65895 12.5091 8.31525 12.5097 8.9054 12.2766L12.6541 10.7952ZM12.6541 6.77688L14.7544 7.60289C14.8576 7.64346 14.9394 7.72508 14.9801 7.82824C15.0511 8.00803 14.9828 8.20839 14.827 8.31004L14.755 8.3472L10.6001 9.98825L9.619 10.375L8.35645 10.8741L8.317 10.886L8.23566 10.9132C8.20301 10.9215 8.17004 10.9282 8.13688 10.9331C8.12585 10.9346 8.11547 10.936 8.10507 10.9372C8.02541 10.9468 7.94422 10.9464 7.86397 10.9363L7.74052 10.9126L7.62035 10.8735L6.391 10.385L5.38907 9.98825L1.25259 8.34697C1.1499 8.30623 1.06864 8.22483 1.02806 8.12208C0.957068 7.94229 1.02536 7.74192 1.1812 7.64029L1.25319 7.60312L3.34307 6.77788L7.06917 8.25677C7.65895 8.49078 8.31525 8.4913 8.9054 8.25824L12.6541 6.77688ZM7.62186 1.06989C7.85734 0.976906 8.11932 0.976697 8.35494 1.06931L14.7544 3.58452C14.8576 3.62509 14.9394 3.70671 14.9801 3.80987C15.0612 4.01534 14.9605 4.24769 14.755 4.32884L10.6001 5.96988L8.35565 6.856L8.27468 6.88396C8.25405 6.8901 8.23326 6.89557 8.21236 6.90036C8.09824 6.92674 7.98013 6.93258 7.86397 6.91788L7.74052 6.89419L7.62035 6.8551L1.25259 4.3286C1.1499 4.28786 1.06864 4.20646 1.02806 4.10371C0.946925 3.89823 1.04772 3.66589 1.25319 3.58475L7.62186 1.06989Z"/>
|
||||
</symbol>
|
||||
<symbol id="issues" viewBox="0 0 16 16">
|
||||
<path d="M12.5 11.2204C13.3829 10.8346 13.9999 9.95362 13.9999 8.92853V4.5C13.9999 3.11929 12.8806 2 11.4999 2H7.07132C6.04623 2 5.16524 2.61697 4.77942 3.49983L10 3.49983C11.3807 3.49983 12.5 4.61912 12.5 5.99983V11.2204ZM4.5 13.9998C3.11929 13.9998 2 12.8805 2 11.4998V7.07126C2 5.69055 3.11929 4.57126 4.5 4.57126L8.92853 4.57126C10.3092 4.57126 11.4285 5.69055 11.4285 7.07126V11.4998C11.4285 12.8805 10.3092 13.9998 8.92853 13.9998H4.5ZM8 9.49979C8 10.3282 7.32843 10.9998 6.5 10.9998C5.67157 10.9998 5 10.3282 5 9.49979C5 8.67136 5.67157 7.99979 6.5 7.99979C7.32843 7.99979 8 8.67136 8 9.49979ZM9.5 9.49979C9.5 11.1566 8.15685 12.4998 6.5 12.4998C4.84315 12.4998 3.5 11.1566 3.5 9.49979C3.5 7.84293 4.84315 6.49979 6.5 6.49979C8.15685 6.49979 9.5 7.84293 9.5 9.49979Z"/>
|
||||
</symbol>
|
||||
<symbol id="projects" viewBox="-3 -3 16 16">
|
||||
<path d="M3.45455 0H0.545455C0.244208 0 0 0.244208 0 0.545455V3.45455C0 3.75579 0.244208 4 0.545455 4H3.45455C3.75579 4 4 3.75579 4 3.45455V0.545455C4 0.244208 3.75579 0 3.45455 0Z"/>
|
||||
<path d="M9.95479 0H7.0457C6.74445 0 6.50024 0.244208 6.50024 0.545455V3.45455C6.50024 3.75579 6.74445 4 7.0457 4H9.95479C10.256 4 10.5002 3.75579 10.5002 3.45455V0.545455C10.5002 0.244208 10.256 0 9.95479 0Z"/>
|
||||
<path d="M3.45455 6.50024H0.545455C0.244208 6.50024 0 6.74445 0 7.0457V9.95479C0 10.256 0.244208 10.5002 0.545455 10.5002H3.45455C3.75579 10.5002 4 10.256 4 9.95479V7.0457C4 6.74445 3.75579 6.50024 3.45455 6.50024Z"/>
|
||||
<path d="M9.95479 6.50024H7.0457C6.74445 6.50024 6.50024 6.74445 6.50024 7.0457V9.95479C6.50024 10.256 6.74445 10.5002 7.0457 10.5002H9.95479C10.256 10.5002 10.5002 10.256 10.5002 9.95479V7.0457C10.5002 6.74445 10.256 6.50024 9.95479 6.50024Z"/>
|
||||
</symbol>
|
||||
<symbol id="newissue" viewBox="0 0 16 16">
|
||||
<path d="M14.7826 3.26359C15.1313 2.69123 15.0606 1.93115 14.5705 1.43492C14.0757 0.933932 13.3153 0.865765 12.7483 1.23041C13.2123 2.09277 13.9198 2.79999 14.7826 3.26359Z"/>
|
||||
<path d="M11.8171 2.11829L6.78472 7.18C7.77457 7.47517 8.57699 8.21908 8.95006 9.18198L13.9064 4.20208C13.0535 3.68436 12.3369 2.9696 11.8171 2.11829Z"/>
|
||||
<path d="M7.91486 10.1761C7.80538 9.1186 6.91913 8.30487 5.8592 8.29183C5.53827 8.92804 5.21105 9.90848 5.01729 10.5311C4.93355 10.8002 5.16675 11.0527 5.44262 10.9905C6.16831 10.8268 7.36057 10.5217 7.91486 10.1761Z"/>
|
||||
<path d="M4.75 2C2.67893 2 1 3.67893 1 5.75V11.25C1 13.3211 2.67893 15 4.75 15H10.2501C12.3212 15 14.0001 13.3211 14.0001 11.25V8C14.0001 7.58579 13.6643 7.25 13.2501 7.25C12.8359 7.25 12.5001 7.58579 12.5001 8V11.25C12.5001 12.4926 11.4927 13.5 10.2501 13.5H4.75C3.50736 13.5 2.5 12.4926 2.5 11.25V5.75C2.5 4.50736 3.50736 3.5 4.75 3.5H7C7.41421 3.5 7.75 3.16421 7.75 2.75C7.75 2.33579 7.41421 2 7 2H4.75Z"/>
|
||||
</symbol>
|
||||
<symbol id="magnifier" viewBox="1 1 13 13">
|
||||
<path d="M9.5 7C9.5 8.38071 8.38071 9.5 7 9.5C5.61929 9.5 4.5 8.38071 4.5 7C4.5 5.61929 5.61929 4.5 7 4.5C8.38071 4.5 9.5 5.61929 9.5 7ZM9.24822 10.3089C8.60751 10.745 7.83353 11 7 11C4.79086 11 3 9.20914 3 7C3 4.79086 4.79086 3 7 3C9.20914 3 11 4.79086 11 7C11 7.83353 10.745 8.60751 10.3089 9.24822L12.7803 11.7197C13.0732 12.0126 13.0732 12.4874 12.7803 12.7803C12.4874 13.0732 12.0126 13.0732 11.7197 12.7803L9.24822 10.3089Z" fill-rule="evenodd" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
<symbol id="home" viewBox="0 0 16 16" fill="#ff324cee">
|
||||
<path d="M4.92886 7.49494C4.99698 7.22733 5.21443 7 5.49057 7C5.76671 7 5.98416 7.22733 6.05228 7.49494C6.27254 8.36012 7.05683 9 7.99057 9C8.92431 9 9.7086 8.36012 9.92886 7.49494C9.99698 7.22733 10.2144 7 10.4906 7C10.7667 7 10.9842 7.22733 11.0523 7.49494C11.2725 8.36012 12.0568 9 12.9906 9C14.0154 9 14.8602 8.22917 14.9768 7.23566C14.9949 7.08147 14.9544 6.92771 14.885 6.78885L12.267 1.55279C12.0976 1.214 11.7513 1 11.3725 1H4.6086C4.22983 1 3.88357 1.214 3.71418 1.55279L1.09614 6.78885C1.02672 6.92771 0.98621 7.08147 1.00431 7.23566C1.12092 8.22917 1.96573 9 2.99057 9C3.92431 9 4.7086 8.36012 4.92886 7.49494Z"/>
|
||||
<path d="M3.01079 10C4.05518 10 4.97364 9.46684 5.51079 8.65844C6.04793 9.46684 6.9664 10 8.01079 10C9.05518 10 9.97365 9.46684 10.5108 8.65844C11.0479 9.46684 11.9664 10 13.0108 10C13.3538 10 13.6833 9.94247 13.9902 9.83653V13.5C13.9902 14.3284 13.3187 15 12.4902 15H10.5C10.2239 15 10 14.7761 10 14.5V13C10 12.4477 9.55229 12 9 12H7C6.44772 12 6 12.4477 6 13V14.5C6 14.7761 5.77614 15 5.5 15H3.49023C2.66181 15 1.99023 14.3284 1.99023 13.5V9.82201C2.30876 9.9372 2.6524 10 3.01079 10Z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="status-backlog" viewBox="0 0 14 14">
|
||||
<path fill="#bec2c8" d="M13.9408 7.91426L11.9576 7.65557C11.9855 7.4419 12 7.22314 12 7C12 6.77686 11.9855 6.5581 11.9576 6.34443L13.9408 6.08573C13.9799 6.38496 14 6.69013 14 7C14 7.30987 13.9799 7.61504 13.9408 7.91426ZM13.4688 4.32049C13.2328 3.7514 12.9239 3.22019 12.5538 2.73851L10.968 3.95716C11.2328 4.30185 11.4533 4.68119 11.6214 5.08659L13.4688 4.32049ZM11.2615 1.4462L10.0428 3.03204C9.69815 2.76716 9.31881 2.54673 8.91341 2.37862L9.67951 0.531163C10.2486 0.767153 10.7798 1.07605 11.2615 1.4462ZM7.91426 0.0591659L7.65557 2.04237C7.4419 2.01449 7.22314 2 7 2C6.77686 2 6.5581 2.01449 6.34443 2.04237L6.08574 0.059166C6.38496 0.0201343 6.69013 0 7 0C7.30987 0 7.61504 0.0201343 7.91426 0.0591659ZM4.32049 0.531164L5.08659 2.37862C4.68119 2.54673 4.30185 2.76716 3.95716 3.03204L2.73851 1.4462C3.22019 1.07605 3.7514 0.767153 4.32049 0.531164ZM1.4462 2.73851L3.03204 3.95716C2.76716 4.30185 2.54673 4.68119 2.37862 5.08659L0.531164 4.32049C0.767153 3.7514 1.07605 3.22019 1.4462 2.73851ZM0.0591659 6.08574C0.0201343 6.38496 0 6.69013 0 7C0 7.30987 0.0201343 7.61504 0.059166 7.91426L2.04237 7.65557C2.01449 7.4419 2 7.22314 2 7C2 6.77686 2.01449 6.5581 2.04237 6.34443L0.0591659 6.08574ZM0.531164 9.67951L2.37862 8.91341C2.54673 9.31881 2.76716 9.69815 3.03204 10.0428L1.4462 11.2615C1.07605 10.7798 0.767153 10.2486 0.531164 9.67951ZM2.73851 12.5538L3.95716 10.968C4.30185 11.2328 4.68119 11.4533 5.08659 11.6214L4.32049 13.4688C3.7514 13.2328 3.22019 12.9239 2.73851 12.5538ZM6.08574 13.9408L6.34443 11.9576C6.5581 11.9855 6.77686 12 7 12C7.22314 12 7.4419 11.9855 7.65557 11.9576L7.91427 13.9408C7.61504 13.9799 7.30987 14 7 14C6.69013 14 6.38496 13.9799 6.08574 13.9408ZM9.67951 13.4688L8.91341 11.6214C9.31881 11.4533 9.69815 11.2328 10.0428 10.968L11.2615 12.5538C10.7798 12.9239 10.2486 13.2328 9.67951 13.4688ZM12.5538 11.2615L10.968 10.0428C11.2328 9.69815 11.4533 9.31881 11.6214 8.91341L13.4688 9.67951C13.2328 10.2486 12.924 10.7798 12.5538 11.2615Z" />
|
||||
</symbol>
|
||||
<symbol id="status-todo" viewBox="0 0 14 14">
|
||||
<rect x="1" y="1" width="12" height="12" rx="6" stroke="#e2e2e2" stroke-width="2" fill="none" />
|
||||
<path fill="#e2e2e2" stroke="none" d="M 3.5,3.5 L3.5,0 A3.5,3.5 0 0,1 3.5, 0 z" transform="translate(3.5,3.5)" />
|
||||
</symbol>
|
||||
<symbol id="status-inprogress" viewBox="0 0 14 14">
|
||||
<rect x="1" y="1" width="12" height="12" rx="6" stroke="#f2c94c" stroke-width="2" fill="none" />
|
||||
<path fill="#f2c94c" stroke="none" d="M 3.5,3.5 L3.5,0 A3.5,3.5 0 0,1 3.5, 7 z" transform="translate(3.5,3.5)" />
|
||||
</symbol>
|
||||
<symbol id="status-done" viewBox="0 0 14 14">
|
||||
<path fill="#5e6ad2" stroke="#5e6ad2" d="M9.54541 3.54541L9.89896 3.89896L9.54541 3.54541L5.5 7.59081L4.45459 6.54541C3.92739 6.0182 3.07261 6.0182 2.54541 6.54541C2.0182 7.07261 2.0182 7.92739 2.54541 8.45459L4.54541 10.4546C5.07261 10.9818 5.92739 10.9818 6.45459 10.4546L11.4546 5.45459C11.9818 4.92739 11.9818 4.07261 11.4546 3.54541L11.101 3.89896L11.4546 3.54541C10.9274 3.0182 10.0726 3.0182 9.54541 3.54541ZM0.5 7C0.5 3.41015 3.41015 0.5 7 0.5C10.5899 0.5 13.5 3.41015 13.5 7C13.5 10.5899 10.5899 13.5 7 13.5C3.41015 13.5 0.5 10.5899 0.5 7Z" />
|
||||
</symbol>
|
||||
<symbol id="status-canceled" viewBox="0 0 14 14">
|
||||
<path fill="#95a2b3" fill-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14ZM5.03033 3.96967C4.73744 3.67678 4.26256 3.67678 3.96967 3.96967C3.67678 4.26256 3.67678 4.73744 3.96967 5.03033L5.93934 7L3.96967 8.96967C3.67678 9.26256 3.67678 9.73744 3.96967 10.0303C4.26256 10.3232 4.73744 10.3232 5.03033 10.0303L7 8.06066L8.96967 10.0303C9.26256 10.3232 9.73744 10.3232 10.0303 10.0303C10.3232 9.73744 10.3232 9.26256 10.0303 8.96967L8.06066 7L10.0303 5.03033C10.3232 4.73744 10.3232 4.26256 10.0303 3.96967C9.73744 3.67678 9.26256 3.67678 8.96967 3.96967L7 5.93934L5.03033 3.96967Z" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="priority-nopriority" viewBox="0 0 14 14">
|
||||
<rect width="2" height="2" rx="1" transform="matrix(-1 0 0 1 5 6)" />
|
||||
<rect width="2" height="2" rx="1" transform="matrix(-1 0 0 1 8 6)" />
|
||||
<rect width="2" height="2" rx="1" transform="matrix(-1 0 0 1 11 6)" />
|
||||
</symbol>
|
||||
<symbol id="priority-urgent" viewBox="0 0 16 16">
|
||||
<path d="M2 0a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V2a2 2 0 00-2-2H2zm3.914 3h1.738L7.5 8.602H6.07L5.914 3zm1.809 7.164a.95.95 0 01-.938.938.934.934 0 110-1.867c.5 0 .934.417.938.93z" />
|
||||
</symbol>
|
||||
<symbol id="priority-high" viewBox="0 0 16 16">
|
||||
<rect x="1" y="8" width="3" height="6" rx="1" />
|
||||
<rect x="6" y="5" width="3" height="9" rx="1" />
|
||||
<rect x="11" y="2" width="3" height="12" rx="1" />
|
||||
</symbol>
|
||||
<symbol id="priority-medium" viewBox="0 0 16 16">
|
||||
<rect x="1" y="8" width="3" height="6" rx="1" />
|
||||
<rect x="6" y="5" width="3" height="9" rx="1" />
|
||||
<rect x="11" y="2" width="3" height="12" rx="1" fill-opacity=".4" />
|
||||
</symbol>
|
||||
<symbol id="priority-low" viewBox="0 0 16 16">
|
||||
<rect x="1" y="8" width="3" height="6" rx="1" />
|
||||
<rect x="6" y="5" width="3" height="9" rx="1" fill-opacity=".4" />
|
||||
<rect x="11" y="2" width="3" height="12" rx="1" fill-opacity=".4" />
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 16 KiB |
@ -16,6 +16,18 @@
|
||||
"Projects": "Projects",
|
||||
"CreateTeam": "Create team",
|
||||
"NewIssue": "New issue",
|
||||
"SaveIssue": "Save issue",
|
||||
"CreateMore": "Create more",
|
||||
"Todo": "Todo",
|
||||
"InProgress": "In Progress",
|
||||
"Done": "Done",
|
||||
"Canceled": "Canceled",
|
||||
"SetStatus": "Set status...",
|
||||
"NoPriority": "No priority",
|
||||
"Urgent": "Urgent",
|
||||
"High": "High",
|
||||
"Medium": "Medium",
|
||||
"Low": "Low",
|
||||
|
||||
"Title": "Title",
|
||||
"Description": "",
|
||||
|
||||
@ -14,7 +14,19 @@
|
||||
"Backlog": "Backlog",
|
||||
"Board": "Board",
|
||||
"Projects": "Projects",
|
||||
"CreateTeam": "Create team"
|
||||
"CreateTeam": "Create team",
|
||||
"SaveIssue": "Save issue",
|
||||
"CreateMore": "Create more",
|
||||
"Todo": "Todo",
|
||||
"InProgress": "In Progress",
|
||||
"Done": "Done",
|
||||
"Canceled": "Canceled",
|
||||
"SetStatus": "Set status...",
|
||||
"NoPriority": "No priority",
|
||||
"Urgent": "Urgent",
|
||||
"High": "High",
|
||||
"Medium": "Medium",
|
||||
"Low": "Low"
|
||||
},
|
||||
"status": {
|
||||
|
||||
|
||||
@ -22,7 +22,25 @@ loadMetadata(tracker.icon, {
|
||||
Project: `${icons}#project`,
|
||||
Issue: `${icons}#issue`,
|
||||
Team: `${icons}#team`,
|
||||
Document: `${icons}#document`
|
||||
Document: `${icons}#document`,
|
||||
Inbox: `${icons}#inbox`,
|
||||
MyIssues: `${icons}#myissues`,
|
||||
Views: `${icons}#views`,
|
||||
Issues: `${icons}#myissues`,
|
||||
Projects: `${icons}#projects`,
|
||||
NewIssue: `${icons}#newissue`,
|
||||
Magnifier: `${icons}#magnifier`,
|
||||
Home: `${icons}#home`,
|
||||
StatusBacklog: `${icons}#status-backlog`,
|
||||
StatusTodo: `${icons}#status-todo`,
|
||||
StatusInProgress: `${icons}#status-inprogress`,
|
||||
StatusDone: `${icons}#status-done`,
|
||||
StatusCanceled: `${icons}#status-canceled`,
|
||||
PriorityNoPriority: `${icons}#priority-nopriority`,
|
||||
PriorityUrgent: `${icons}#priority-urgent`,
|
||||
PriorityHigh: `${icons}#priority-high`,
|
||||
PriorityMedium: `${icons}#priority-medium`,
|
||||
PriorityLow: `${icons}#priority-low`
|
||||
})
|
||||
|
||||
addStringsLoader(trackerId, async (lang: string) => await import(`../lang/${lang}.json`))
|
||||
|
||||
@ -15,14 +15,15 @@
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import type { IntlString } from '@anticrm/platform'
|
||||
import type { Asset, IntlString } from '@anticrm/platform'
|
||||
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import type { Ref, Class, Space, DocumentQuery } from '@anticrm/core'
|
||||
|
||||
import { Button, Label } from '@anticrm/ui'
|
||||
import { Button, Label, IconAttachment, IconExpand, IconClose, MiniToggle } from '@anticrm/ui'
|
||||
import SpaceSelect from './SpaceSelect.svelte'
|
||||
import presentation from '@anticrm/presentation'
|
||||
import tracker from '../plugin'
|
||||
|
||||
export let spaceClass: Ref<Class<Space>> | undefined = undefined
|
||||
export let space: Ref<Space> | undefined = undefined
|
||||
@ -31,8 +32,10 @@
|
||||
export let spacePlaceholder: IntlString | undefined = undefined
|
||||
export let label: IntlString
|
||||
export let labelProps: any | undefined = undefined
|
||||
export let icon: Asset | undefined = undefined
|
||||
export let okAction: () => void
|
||||
export let canSave: boolean = false
|
||||
export let createMore: boolean | undefined = undefined
|
||||
|
||||
export let okLabel: IntlString = presentation.string.Create
|
||||
export let cancelLabel: IntlString = presentation.string.Cancel
|
||||
@ -40,24 +43,31 @@
|
||||
const dispatch = createEventDispatcher()
|
||||
</script>
|
||||
|
||||
<form class="antiCard w-165" on:submit|preventDefault={ () => {} }>
|
||||
<form class="antiCard dialog" on:submit|preventDefault={ () => {} }>
|
||||
<div class="antiCard-header">
|
||||
<div class="antiCard-header__title"><Label {label} params={labelProps ?? {}} /></div>
|
||||
{#if $$slots.error}
|
||||
<div class="antiCard-header__error">
|
||||
<slot name="error" />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="antiCard-header__title-wrap">
|
||||
<Button icon={icon} label={presentation.string.Save} size={'small'} kind={'no-border'} disabled on:click={() => { }} />
|
||||
<span class="antiCard-header__divider">›</span>
|
||||
<span class="antiCard-header__title"><Label {label} params={labelProps ?? {}} /></span>
|
||||
</div>
|
||||
<div class="buttons-group small-gap">
|
||||
<Button icon={IconExpand} kind={'transparent'} on:click={() => { }} />
|
||||
<Button icon={IconClose} kind={'transparent'} on:click={() => { dispatch('close') }} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="antiCard-content"><slot /></div>
|
||||
{#if spaceClass && spaceLabel && spacePlaceholder}
|
||||
<div class="antiCard-pool">
|
||||
<div class="antiCard-pool__separator" />
|
||||
<SpaceSelect _class={spaceClass} spaceQuery={spaceQuery} label={spaceLabel} placeholder={spacePlaceholder} bind:value={space} />
|
||||
<slot name="pool" />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="antiCard-footer">
|
||||
<Button disabled={!canSave} label={okLabel} size={'small'} transparent primary on:click={() => { okAction(); dispatch('close') }} />
|
||||
<Button label={cancelLabel} size={'small'} transparent on:click={() => { dispatch('close') }} />
|
||||
<div class="antiCard-footer reverse">
|
||||
<div class="buttons-group text-sm">
|
||||
{#if createMore !== undefined}
|
||||
<MiniToggle label={tracker.string.CreateMore} bind:on={createMore} />
|
||||
{/if}
|
||||
<Button disabled={!canSave} label={okLabel} kind={'primary'} on:click={() => { okAction(); dispatch('close') }} />
|
||||
</div>
|
||||
<Button icon={IconAttachment} kind={'transparent'} on:click={() => { }} />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -13,17 +13,19 @@
|
||||
// limitations under the License.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { Asset, IntlString } from '@anticrm/platform'
|
||||
import contact, { Employee } from '@anticrm/contact'
|
||||
import core, { Data, generateId, Ref, SortingOrder } from '@anticrm/core'
|
||||
import { OK, Status } from '@anticrm/platform'
|
||||
import { getClient, UserBox } from '@anticrm/presentation'
|
||||
import { Issue, IssuePriority, IssueStatus, Team } from '@anticrm/tracker'
|
||||
import { StyledTextBox } from '@anticrm/text-editor'
|
||||
import { EditBox, Grid, Status as StatusControl } from '@anticrm/ui'
|
||||
import { EditBox, Grid, Status as StatusControl, Button, showPopup } from '@anticrm/ui'
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import tracker from '../plugin'
|
||||
import { calcRank } from '../utils'
|
||||
import Card from './Card.svelte';
|
||||
import Card from './Card.svelte'
|
||||
import SelectPopup from './SelectPopup.svelte'
|
||||
|
||||
export let space: Ref<Team>
|
||||
export let parent: Ref<Issue> | undefined
|
||||
@ -85,37 +87,84 @@ import Card from './Card.svelte';
|
||||
|
||||
await client.createDoc(tracker.class.Issue, _space, value, taskId)
|
||||
}
|
||||
|
||||
interface IPair {
|
||||
icon: Asset
|
||||
label: IntlString
|
||||
}
|
||||
const statuses: Array<IPair> =
|
||||
[{ icon: tracker.icon.StatusBacklog, label: tracker.string.Backlog },
|
||||
{ icon: tracker.icon.StatusTodo, label: tracker.string.Todo },
|
||||
{ icon: tracker.icon.StatusInProgress, label: tracker.string.InProgress },
|
||||
{ icon: tracker.icon.StatusDone, label: tracker.string.Done },
|
||||
{ icon: tracker.icon.StatusCanceled, label: tracker.string.Canceled }]
|
||||
let selectStatus: IPair = statuses[0]
|
||||
const priorities: Array<IPair> =
|
||||
[{ icon: tracker.icon.PriorityNoPriority, label: tracker.string.NoPriority },
|
||||
{ icon: tracker.icon.PriorityUrgent, label: tracker.string.Urgent },
|
||||
{ icon: tracker.icon.PriorityHigh, label: tracker.string.High },
|
||||
{ icon: tracker.icon.PriorityMedium, label: tracker.string.Medium },
|
||||
{ icon: tracker.icon.PriorityLow, label: tracker.string.Low }]
|
||||
let selectPriority: IPair = priorities[0]
|
||||
</script>
|
||||
|
||||
<!-- canSave: object.title.length > 0 && _space != null -->
|
||||
<Card
|
||||
label={tracker.string.NewIssue}
|
||||
okAction={createIssue}
|
||||
canSave={object.title.length > 0 && _space != null}
|
||||
icon={tracker.icon.Home}
|
||||
canSave={true}
|
||||
okLabel={tracker.string.SaveIssue}
|
||||
spaceClass={tracker.class.Team}
|
||||
spaceLabel={tracker.string.Team}
|
||||
spacePlaceholder={tracker.string.SelectTeam}
|
||||
createMore={false}
|
||||
bind:space={_space}
|
||||
on:close={() => {
|
||||
dispatch('close')
|
||||
}}
|
||||
>
|
||||
<StatusControl slot="error" {status} />
|
||||
<Grid column={1} rowGap={1.5}>
|
||||
<EditBox
|
||||
label={tracker.string.Title}
|
||||
bind:value={object.title}
|
||||
placeholder={tracker.string.IssueTitlePlaceholder}
|
||||
maxWidth={'16rem'}
|
||||
focus
|
||||
<EditBox
|
||||
bind:value={object.title}
|
||||
placeholder={tracker.string.IssueTitlePlaceholder}
|
||||
maxWidth={'37.5rem'}
|
||||
kind={'large-style'}
|
||||
focus
|
||||
/>
|
||||
<!-- <StyledTextBox alwaysEdit bind:content={object.description} placeholder={tracker.string.IssueDescriptionPlaceholder}/> -->
|
||||
<!-- <UserBox
|
||||
_class={contact.class.Employee}
|
||||
title={tracker.string.Assignee}
|
||||
caption={tracker.string.Assignee}
|
||||
bind:value={assignee}
|
||||
allowDeselect
|
||||
titleDeselect={tracker.string.TaskUnAssign}
|
||||
/> -->
|
||||
<div style="height: 30px"></div>
|
||||
<div slot="pool" class="flex-row-center text-sm gap-1-5">
|
||||
<Button
|
||||
label={selectStatus.label}
|
||||
icon={selectStatus.icon}
|
||||
width={'min-content'}
|
||||
size={'small'}
|
||||
kind={'no-border'}
|
||||
on:click={(ev) => {
|
||||
showPopup(SelectPopup, { value: statuses, placeholder: tracker.string.SetStatus, searchable: true }, ev.currentTarget, (result) => {
|
||||
if (result !== undefined) { selectStatus = result }
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<StyledTextBox alwaysEdit bind:content={object.description} placeholder={tracker.string.IssueDescriptionPlaceholder}/>
|
||||
<UserBox
|
||||
_class={contact.class.Employee}
|
||||
title={tracker.string.Assignee}
|
||||
caption={tracker.string.Assignee}
|
||||
bind:value={assignee}
|
||||
allowDeselect
|
||||
titleDeselect={tracker.string.TaskUnAssign}
|
||||
<Button
|
||||
label={selectPriority.label}
|
||||
icon={selectPriority.icon}
|
||||
width={'min-content'}
|
||||
size={'small'}
|
||||
kind={'no-border'}
|
||||
on:click={(ev) => {
|
||||
showPopup(SelectPopup, { value: priorities, placeholder: tracker.string.SetStatus }, ev.currentTarget, (result) => {
|
||||
if (result !== undefined) { selectPriority = result }
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { Ref, Space } from '@anticrm/core'
|
||||
import ui, { ActionIcon, Button, IconEdit, IconSearch, showPopup } from '@anticrm/ui'
|
||||
import { Button, IconSearch, showPopup } from '@anticrm/ui'
|
||||
import tracker from '../plugin'
|
||||
import CreateIssue from './CreateIssue.svelte'
|
||||
export let currentSpace: Ref<Space>
|
||||
@ -10,17 +10,15 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex-between mt-4 mb-4">
|
||||
<div class="flex-grow">
|
||||
<div class="antiNav-subheader gap-2">
|
||||
<div class="flex-grow text-md">
|
||||
<Button
|
||||
icon={IconEdit}
|
||||
icon={tracker.icon.NewIssue}
|
||||
label={tracker.string.NewIssue}
|
||||
justify={'left'}
|
||||
width={'100%'}
|
||||
size={'small'}
|
||||
on:click={(evt) => newIssue(evt.currentTarget)}
|
||||
on:click={() => newIssue(null)}
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
<ActionIcon icon={IconSearch} label={ui.string.Search} action={async () => {}} size={'large'} />
|
||||
</div>
|
||||
<Button icon={tracker.icon.Magnifier} on:click={async () => {}} />
|
||||
</div>
|
||||
|
||||
64
plugins/tracker-resources/src/components/SelectPopup.svelte
Normal file
64
plugins/tracker-resources/src/components/SelectPopup.svelte
Normal file
@ -0,0 +1,64 @@
|
||||
<!--
|
||||
// Copyright © 2020 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.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import type { Asset, IntlString } from '@anticrm/platform'
|
||||
import { translate } from '@anticrm/platform'
|
||||
import { afterUpdate, createEventDispatcher } from 'svelte'
|
||||
|
||||
import type { Ref, Class, Space, DocumentQuery } from '@anticrm/core'
|
||||
import { createQuery } from '@anticrm/presentation'
|
||||
import { Icon, Label } from '@anticrm/ui'
|
||||
import tracker from '../plugin'
|
||||
|
||||
export let _class: Ref<Class<Space>>
|
||||
export let spaceQuery: DocumentQuery<Space> | undefined
|
||||
export let placeholder: IntlString | undefined = undefined
|
||||
export let placeholderParam: any | undefined = undefined
|
||||
export let searchable: boolean = false
|
||||
export let value: Array<{
|
||||
icon: Asset
|
||||
label: IntlString
|
||||
}>
|
||||
|
||||
let search: string = ''
|
||||
let input: HTMLInputElement
|
||||
let objects: Space[] = []
|
||||
|
||||
let phTraslate: string = ''
|
||||
$: if (placeholder) translate(placeholder, placeholderParam ?? {}).then(res => { phTraslate = res })
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
// const query = createQuery()
|
||||
// $: query.query(_class, { ...(spaceQuery ?? {}), name: { $like: '%' + search + '%' } }, result => { objects = result })
|
||||
// afterUpdate(() => { dispatch('update', Date.now()) })
|
||||
</script>
|
||||
|
||||
<div class="selectPopup">
|
||||
{#if searchable}
|
||||
<div class="header">
|
||||
<input bind:this={input} type='text' bind:value={search} placeholder={phTraslate} on:input={(ev) => { }} on:change/>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="scroll">
|
||||
<div class="box">
|
||||
{#each value.filter(el => el.label.toLowerCase().includes(search.toLowerCase())) as space}
|
||||
<button class="menu-item" on:click={() => { dispatch('close', space) }}>
|
||||
<div class="icon"><Icon icon={space.icon} size={'small'} /></div>
|
||||
<span class="label"><Label label={space.label} /></span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -36,7 +36,19 @@ export default mergeIds(trackerId, tracker, {
|
||||
NewIssue: '' as IntlString,
|
||||
Team: '' as IntlString,
|
||||
SelectTeam: '' as IntlString,
|
||||
|
||||
SaveIssue: '' as IntlString,
|
||||
CreateMore: '' as IntlString,
|
||||
Todo: '' as IntlString,
|
||||
InProgress: '' as IntlString,
|
||||
Done: '' as IntlString,
|
||||
Canceled: '' as IntlString,
|
||||
SetStatus: '' as IntlString,
|
||||
NoPriority: '' as IntlString,
|
||||
Urgent: '' as IntlString,
|
||||
High: '' as IntlString,
|
||||
Medium: '' as IntlString,
|
||||
Low: '' as IntlString,
|
||||
|
||||
Title: '' as IntlString,
|
||||
Identifier: '' as IntlString,
|
||||
Description: '' as IntlString,
|
||||
|
||||
@ -140,6 +140,25 @@ export default plugin(trackerId, {
|
||||
Project: '' as Asset,
|
||||
Issue: '' as Asset,
|
||||
Team: '' as Asset,
|
||||
Document: '' as Asset
|
||||
Document: '' as Asset,
|
||||
Inbox: '' as Asset,
|
||||
MyIssues: '' as Asset,
|
||||
Views: '' as Asset,
|
||||
Issues: '' as Asset,
|
||||
Projects: '' as Asset,
|
||||
NewIssue: '' as Asset,
|
||||
Magnifier: '' as Asset,
|
||||
Home: '' as Asset,
|
||||
|
||||
StatusBacklog: '' as Asset,
|
||||
StatusTodo: '' as Asset,
|
||||
StatusInProgress: '' as Asset,
|
||||
StatusDone: '' as Asset,
|
||||
StatusCanceled: '' as Asset,
|
||||
PriorityNoPriority: '' as Asset,
|
||||
PriorityUrgent: '' as Asset,
|
||||
PriorityHigh: '' as Asset,
|
||||
PriorityMedium: '' as Asset,
|
||||
PriorityLow: '' as Asset
|
||||
}
|
||||
})
|
||||
|
||||
@ -115,8 +115,7 @@
|
||||
label={view.string.Move}
|
||||
size={'small'}
|
||||
disabled={object.space === currentSpace?._id || status !== OK}
|
||||
transparent
|
||||
primary
|
||||
kind={'primary'}
|
||||
on:click={() => {
|
||||
move(object)
|
||||
}}
|
||||
@ -124,7 +123,6 @@
|
||||
<Button
|
||||
size={'small'}
|
||||
label={view.string.Cancel}
|
||||
transparent
|
||||
on:click={() => {
|
||||
dispatch('close')
|
||||
}}
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: var(--theme-menu-selection);
|
||||
background-color: var(--menu-bg-select);
|
||||
.icon-container { color: var(--theme-caption-color); }
|
||||
}
|
||||
}
|
||||
|
||||
@ -45,7 +45,6 @@
|
||||
{ sort: { name: SortingOrder.Ascending } })
|
||||
}
|
||||
|
||||
let showDivider: Boolean = false
|
||||
let specTopCount: number
|
||||
let specBottomCount: number
|
||||
let spModelCount: number
|
||||
@ -67,7 +66,6 @@
|
||||
}
|
||||
if (model.spaces) spModelCount = model.spaces.length
|
||||
shownSpaces = spaces.filter(sp => !sp.archived)
|
||||
showDivider = !!((specTopCount > 0 && specBottomCount + spModelCount > 0))
|
||||
}
|
||||
|
||||
$: if (model) update(model, spaces)
|
||||
@ -97,18 +95,19 @@
|
||||
{#each topSpecials as special}
|
||||
<SpecialElement label={special.label} icon={special.icon} on:click={() => dispatch('special', special.id)} selected={special.id === currentSpecial} indent={'ml-2'} />
|
||||
{/each}
|
||||
{#if topSpecials.length > 0 && bottomSpecials.length > 0}
|
||||
<TreeSeparator />
|
||||
{/if}
|
||||
|
||||
{#if showDivider}<TreeSeparator />{/if}
|
||||
|
||||
{#each model.spaces as m (m.label)}
|
||||
<SpacesNav spaces={shownSpaces.filter(it => hierarchy.isDerived(it._class, m.spaceClass))} {currentSpace} model={m} on:space {currentSpecial}/>
|
||||
{/each}
|
||||
{#if model.specials}
|
||||
{#each bottomSpecials as special}
|
||||
<SpecialElement label={special.label} icon={special.icon} on:click={() => dispatch('special', special.id)} selected={special.id === currentSpecial} indent={'ml-2'} />
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
{#if topSpecials.length > 0 || bottomSpecials.length > 0}<TreeSeparator />{/if}
|
||||
|
||||
{#each model.spaces as m (m.label)}
|
||||
<SpacesNav spaces={shownSpaces.filter(it => hierarchy.isDerived(it._class, m.spaceClass))} {currentSpace} model={m} on:space {currentSpecial}/>
|
||||
{/each}
|
||||
<div class="antiNav-space" />
|
||||
</Scroller>
|
||||
{/if}
|
||||
|
||||
@ -69,7 +69,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="ac-header full">
|
||||
<div class="ac-header divide full">
|
||||
{#if space}
|
||||
<Header icon={classIcon(client, space._class)} label={space.name} description={space.description} on:click={onSpaceEdit} />
|
||||
{#if viewlets.length > 1}
|
||||
@ -89,7 +89,7 @@
|
||||
dispatch('search', search)
|
||||
}}/>
|
||||
{#if createItemDialog}
|
||||
<Button icon={IconAdd} label={createItemLabel} primary size={'small'} on:click={(ev) => showCreateDialog(ev)}/>
|
||||
<Button icon={IconAdd} label={createItemLabel} kind={'primary'} on:click={(ev) => showCreateDialog(ev)}/>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@ -266,8 +266,8 @@
|
||||
</svg>
|
||||
<div class="workbench-container">
|
||||
<div class="antiPanel-application" on:click={toggleNav}>
|
||||
<div class="flex-col">
|
||||
<ActivityStatus status="active" />
|
||||
<div class="flex-col mt-1">
|
||||
<!-- <ActivityStatus status="active" /> -->
|
||||
<AppItem
|
||||
icon={TopMenu}
|
||||
label={visibileNav ? workbench.string.HideMenu : workbench.string.ShowMenu}
|
||||
@ -317,7 +317,7 @@
|
||||
</div>
|
||||
</div>
|
||||
{#if currentApplication && navigatorModel && navigator && visibileNav}
|
||||
<div class="antiPanel-navigator filled indent">
|
||||
<div class="antiPanel-navigator" style="box-shadow: -1px 0px 2px rgba(0, 0, 0, .1)">
|
||||
{#if currentApplication}
|
||||
<NavHeader label={currentApplication.label} />
|
||||
{#if currentApplication.navHeaderComponent}
|
||||
@ -337,7 +337,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="antiPanel-component indent antiComponent" class:filled={isNavigate}>
|
||||
<div class="antiPanel-component antiComponent border-left">
|
||||
{#if currentApplication && currentApplication.component}
|
||||
<Component is={currentApplication.component} props={{ currentSpace }}/>
|
||||
{:else if specialComponent}
|
||||
@ -359,6 +359,5 @@
|
||||
.workbench-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-bottom: 1.25rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -82,10 +82,10 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<TreeNode label={model.label} actions={async () => [addSpace]} indent={'ml-2'}>
|
||||
<TreeNode label={model.label} parent actions={async () => [addSpace]} indent={'ml-2'}>
|
||||
{#each spaces as space (space._id)}
|
||||
{#if model.specials}
|
||||
<TreeNode title={space.name} indent={'ml-2'} actions={() => getActions(space)}>
|
||||
<TreeNode icon={model.icon} title={space.name} indent={'ml-2'} actions={() => getActions(space)}>
|
||||
{#each model.specials as special}
|
||||
<SpecialElement
|
||||
indent={'ml-4'}
|
||||
|
||||
@ -30,7 +30,11 @@
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class="antiNav-element" class:selected class:ml-2={indent === 'ml-2'} class:ml-4={indent === 'ml-4'} class:ml-8={indent === 'ml-8'}
|
||||
class="antiNav-element"
|
||||
class:selected
|
||||
class:ml-2={indent === 'ml-2'}
|
||||
class:ml-4={indent === 'ml-4'}
|
||||
class:ml-8={indent === 'ml-8'}
|
||||
on:click|stopPropagation={() => {
|
||||
dispatch('click')
|
||||
}}
|
||||
|
||||
@ -13,13 +13,10 @@
|
||||
// limitations under the License.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import Collapsed from '../icons/Collapsed.svelte'
|
||||
import Expanded from '../icons/Expanded.svelte'
|
||||
|
||||
import type { Asset, IntlString } from '@anticrm/platform'
|
||||
import type { Action } from '@anticrm/ui'
|
||||
import type { Ref, Space } from '@anticrm/core'
|
||||
import { Icon, Label, ActionIcon, Menu, showPopup, IconMoreV } from '@anticrm/ui'
|
||||
import { Icon, Label, ActionIcon, Menu, showPopup, IconMoreH, IconMoreV } from '@anticrm/ui'
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
|
||||
export let _id: Ref<Space> | undefined = undefined
|
||||
@ -28,6 +25,7 @@
|
||||
export let title: string | undefined = undefined
|
||||
export let notifications = 0
|
||||
export let node = false
|
||||
export let parent = false
|
||||
export let collapsed = false
|
||||
export let selected = false
|
||||
export let actions: () => Promise<Action[]> = async () => []
|
||||
@ -51,27 +49,28 @@
|
||||
class:ml-2={indent === 'ml-2'}
|
||||
class:ml-4={indent === 'ml-4'}
|
||||
class:ml-8={indent === 'ml-8'}
|
||||
class:parent
|
||||
class:collapsed
|
||||
class:child={!node}
|
||||
on:click|stopPropagation={() => {
|
||||
if (node && !icon) collapsed = !collapsed
|
||||
collapsed = !collapsed
|
||||
dispatch('click')
|
||||
}}
|
||||
>
|
||||
<span class="an-element__label" class:title={node}>
|
||||
<div class="flex-row-center">
|
||||
{#if icon}
|
||||
<div class="an-element__icon" class:sub={!node}>
|
||||
{#if icon && !parent}
|
||||
<div class="an-element__icon">
|
||||
<Icon {icon} size={'small'} />
|
||||
</div>
|
||||
{/if}
|
||||
{#if label}<Label {label} />{:else}{title}{/if}
|
||||
|
||||
{#if !icon}
|
||||
<div class="ml-2" class:sub={!node}>
|
||||
{#if collapsed}
|
||||
<Collapsed size={'small'} />
|
||||
{:else}
|
||||
<Expanded size={'small'} />
|
||||
{/if}
|
||||
{#if node}
|
||||
<div class="an-element__icon-arrow {parent ? 'small' : 'medium'}" class:collapsed>
|
||||
<svg fill="var(--content-color)" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0,0L6,3L0,6Z" />
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@ -104,6 +103,6 @@
|
||||
<div class="an-element__counter">{notifications}</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if node && !icon && !collapsed}
|
||||
{#if node && !collapsed}
|
||||
<div class="antiNav-element__dropbox"><slot /></div>
|
||||
{/if}
|
||||
|
||||
@ -14,19 +14,21 @@
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import type { IntlString } from '@anticrm/platform'
|
||||
import type { Asset, IntlString } from '@anticrm/platform'
|
||||
import type { Action } from '@anticrm/ui'
|
||||
import TreeElement from './TreeElement.svelte'
|
||||
|
||||
export let title: string | undefined = undefined
|
||||
export let label: IntlString | undefined = undefined
|
||||
export let icon: Asset | undefined = undefined
|
||||
export let actions: () => Promise<Action[]> = async () => []
|
||||
export let notifications = 0
|
||||
export let parent = false
|
||||
export let collapsed = false
|
||||
export let indent: 'default' | 'ml-2' | 'ml-4' | 'ml-8' = 'default'
|
||||
|
||||
</script>
|
||||
|
||||
<TreeElement {title} {label} {notifications} {collapsed} {actions} node {indent}>
|
||||
<TreeElement {title} {label} {icon} {notifications} {collapsed} {actions} node {parent} {indent}>
|
||||
<slot/>
|
||||
</TreeElement>
|
||||
@ -42,6 +42,7 @@ export interface SpacesNavModel {
|
||||
spaceClass: Ref<Class<Space>>
|
||||
addSpaceLabel: IntlString
|
||||
createComponent: AnyComponent
|
||||
icon?: Asset
|
||||
|
||||
// Child special items.
|
||||
specials?: SpecialNavModel[]
|
||||
|
||||
@ -75,7 +75,7 @@ test.describe('contact tests', () => {
|
||||
// Click #create-template div
|
||||
await page.click('#create-template div')
|
||||
const tid = 'template-' + generateId()
|
||||
const t = page.locator('#templates >> .container:has-text("New Template")').last()
|
||||
const t = page.locator('#templates div:has-text("New Template")').first()
|
||||
await t.click()
|
||||
await t.locator('input').fill(tid)
|
||||
// await page.locator(`#templates >> .container:has-text("${tid}")`).type('Enter')
|
||||
@ -83,16 +83,16 @@ test.describe('contact tests', () => {
|
||||
// Click text=Active statuses >> div
|
||||
await page.click('text=Active statuses >> div')
|
||||
|
||||
const s1 = page.locator('.container:has-text("New State")').first()
|
||||
const s1 = page.locator('.states:has-text("New State")').first()
|
||||
await s1.click()
|
||||
await s1.locator('input').fill('State1')
|
||||
|
||||
await page.click('text=Active statuses >> div')
|
||||
const s2 = page.locator('.container:has-text("New State")').first()
|
||||
const s2 = page.locator('.states:has-text("New State")').first()
|
||||
await s2.click()
|
||||
await s2.locator('input').fill('State2')
|
||||
await page.click('text=Active statuses >> div')
|
||||
const s3 = page.locator('.container:has-text("New State")').first()
|
||||
const s3 = page.locator('.states:has-text("New State")').first()
|
||||
await s3.click()
|
||||
await s3.locator('input').fill('State3')
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user