WEBDIENSTE/huly-platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2026-08-17 18:05:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

TSK-1324. Update popups layout (#3064)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
2023-04-25 09:59:07 +07:00
committed by GitHub
parent 4b6030d11f
commit 5c30b88976
40 changed files with 404 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/presentation/src/components/Card.svelte
+4 -1
View File
@@ -19,6 +19,7 @@
import { createEventDispatcher } from 'svelte'
import presentation from '..'
import { deviceOptionsStore as deviceInfo, resizeObserver } from '@hcengineering/ui'
import IconForward from './icons/Forward.svelte'
export let label: IntlString
export let labelProps: any | undefined = undefined
@@ -47,7 +48,7 @@
<div class="antiCard-header__title-wrap">
{#if $$slots.header}
<slot name="header" />
<span class="antiCard-header__divider">›</span>
<span class="antiCard-header__divider"><IconForward size={'small'} /></span>
{/if}
<span class="antiCard-header__title">
{#if $$slots.title}
@@ -83,6 +84,7 @@
<slot name="pool" />
</div>
{/if}
<div class="antiCard-pool__separator" />
<div class="antiCard-footer reverse">
<div class="buttons-group text-sm flex-no-shrink">
{#if $$slots.buttons}
@@ -97,6 +99,7 @@
disabled={!canSave}
label={okLabel}
kind={'primary'}
size={'large'}
on:click={() => {
if (okProcessing) {
return
packages/presentation/src/components/InlineAttributeBarEditor.svelte
+1 -1
View File
@@ -61,7 +61,7 @@
readonly={isReadonly}
label={attribute?.label}
placeholder={attribute?.label}
kind={'link'}
kind={'secondary'}
size={'large'}
width={'100%'}
justify={'left'}
packages/presentation/src/components/icons/Forward.svelte
+24
View File
@@ -0,0 +1,24 @@
<!--
// Copyright © 2023 Hardcore Engineering Inc.
//
// 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">
export let size: 'small' | 'medium' | 'large'
const fill: string = 'currentColor'
</script>
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path
d="M11.4,7.7L5.7,2.1C5.5,1.9,5.2,1.9,5,2.1S4.8,2.6,5,2.8L10.3,8L5,13.3c-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.1l5.6-5.6c0.1-0.1,0.1-0.2,0.1-0.4S11.4,7.8,11.4,7.7z"
/>
</svg>
packages/theme/styles/_colors.scss
+7 -1
View File
@@ -74,6 +74,7 @@
--theme-bg-color: #1A1A28;
--theme-back-color: #0f0f18;
--theme-overlay-color: #0000007f;
--theme-statusbar-color: #2C2C35;
--theme-navpanel-color: #14141F;
--theme-navpanel-hovered: rgba(255, 255, 255, .04);
@@ -113,6 +114,8 @@
--theme-checkbox-border: rgba(0, 0, 0, .12);
--theme-checkbox-disabled: #999;
--theme-progress-color: #FFFFFF;
--theme-popup-color: #292938;
--theme-popup-divider: rgba(255, 255, 255, .1);
--body-color: #1f2023;
--body-accent: #222326;
@@ -218,6 +221,7 @@
--theme-bg-color: #F1F1F4;
--theme-back-color: #D9D9DD;
--theme-overlay-color: #0000007f;
--theme-statusbar-color: #bfbfc6;
--theme-navpanel-color: #E8E8ED;
--theme-navpanel-hovered: rgba(218, 218, 231, .5);
@@ -257,6 +261,8 @@
--theme-checkbox-border: rgba(0, 0, 0, .12);
--theme-checkbox-disabled: #999;
--theme-progress-color: rgba(0, 0, 0, .5);
--theme-popup-color: #F1F1F4;
--theme-popup-divider: rgba(0, 0, 0, .1);
--body-color: #fff;
--body-accent: #fafafa; // HZ
@@ -267,7 +273,7 @@
--accent-bg-color: #eff0f2; // HZ
--accent-shadow: rgb(0 0 0 / 10%) 0px 2px 4px; // Dark
--highlight-hover: #F0F0F1;
--highlight-hover: #E8E8E9;
--highlight-select: #f0f4ff;
--highlight-select-border: #e6eaff;
--highlight-select-hover: #e4ebff;
packages/theme/styles/_layouts.scss
+2 -2
View File
@@ -401,8 +401,8 @@ input.search {
&.reverse > :last-child { margin-right: .375rem; }
}
.gap-2 {
& > *:not(:first-child) { margin-left: .5rem; }
&.reverse > :last-child { margin-right: .5rem; }
&:not(.reverse) > *:not(:first-child) { margin-left: .5rem; }
&.reverse > *:not(:last-child) { margin-right: .5rem; }
}
/* --------- */
packages/theme/styles/common.scss
+2 -2
View File
@@ -422,8 +422,8 @@
.antiEmphasized {
padding: .75rem;
background-color: var(--theme-comp-header-color);
border: 1px solid var(--theme-divider-color);
border-radius: .5rem;
border: 1px solid var(--theme-popup-divider);
border-radius: .25rem;
transition-property: border, background-color;
transition-duration: .15s;
transition-timing-function: var(--timing-main);
packages/theme/styles/dialogs.scss
+42 -51
View File
@@ -20,7 +20,7 @@
left: 0;
width: 100%;
height: 100vh;
background-color: var(--card-overlay-color);
background-color: var(--theme-overlay-color);
pointer-events: all;
}
@@ -29,8 +29,7 @@
display: flex;
flex-direction: column;
min-height: 0;
background: var(--theme-list-row-color);
border: 1px solid var(--theme-divider-color);
background: var(--theme-popup-color);
border-radius: .5rem;
box-shadow: var(--card-shadow);
@@ -40,18 +39,26 @@
justify-content: space-between;
align-items: center;
flex-shrink: 0;
padding: 1rem 1rem 1.5rem;
padding: 1.5rem 1.5rem .5rem 1.75rem;
font-size: .8125rem;
&__title-wrap {
display: flex;
align-items: center;
min-width: 0;
& > *:not(:last-child) { margin-right: .5rem; }
}
&__title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
user-select: none;
min-width: 0;
font-weight: 500;
font-size: 1rem;
line-height: 150%;
color: var(--theme-caption-color);
}
&__divider { color: var(--theme-content-color); }
&__error {
min-width: 0;
flex-grow: 1;
@@ -72,8 +79,9 @@
flex-direction: column;
flex-grow: 1;
flex-shrink: 1;
margin: 0 1rem;
padding: 1rem 1.75rem;
height: fit-content;
min-width: 0;
min-height: 0;
& > *:not(:last-child) { margin-bottom: 1rem; }
@@ -82,30 +90,44 @@
.antiCard-pool {
flex-shrink: 0;
display: flex;
flex-direction: column;
margin: 0 1rem .75rem;
color: var(--theme-caption-color);
align-items: center;
flex-wrap: wrap;
margin: .5rem 1.25rem 0 1.75rem;
min-width: 0;
font-size: .8125rem;
color: var(--theme-caption-color);
&__separator {
margin: 1rem 0;
flex-shrink: 0;
margin-top: 1.25rem;
height: 1px;
background-color: var(--theme-divider-color);
background-color: var(--theme-popup-divider);
}
& > * { margin: .5rem .5rem 0 0; }
}
.antiCard-footer {
overflow: hidden;
flex-shrink: 0;
display: grid;
grid-auto-flow: column;
direction: rtl;
justify-content: flex-start;
direction: ltr;
display: flex;
justify-content: space-between;
align-items: center;
column-gap: .75rem;
padding: 1.5rem 1rem 1rem;
height: 4.5rem;
padding: 1rem 1.75rem;
height: 4.25rem;
border-radius: 0 0 .5rem .5rem;
&.reverse { flex-direction: row-reverse; }
&__error {
flex-grow: 1;
display: flex;
margin-left: .375rem;
min-width: 0;
font-weight: 500;
font-size: .75rem;
color: var(--system-error-color);
&:empty { visibility: hidden; }
}
}
.antiCard-group {
@@ -149,26 +171,14 @@
width: 90vw;
max-width: 90vw;
max-height: 90vh;
}
&.dialog,
&.mobile {
.antiCard-header {
padding: .75rem .75rem .375rem;
&__title-wrap {
display: flex;
align-items: center;
min-width: 0;
& > *:not(:first-child) { margin-left: .375rem; }
}
&__divider, &__title {
font-weight: 400;
font-size: .8125rem;
}
&__divider { color: var(--theme-content-color); }
&__title { color: var(--theme-caption-color); }
}
.antiCard-content { margin: .5rem 1.125rem 1rem; }
.antiCard-pool {
@@ -176,29 +186,10 @@
align-items: center;
margin: 0 .5rem .25rem;
font-size: .75rem;
& > * { margin: 0 .25rem .5rem; }
}
.antiCard-footer {
direction: ltr;
display: flex;
justify-content: space-between;
align-items: center;
padding: .75rem;
height: auto;
border-top: 1px solid var(--theme-divider-color);
&.reverse { flex-direction: row-reverse; }
&__error {
flex-grow: 1;
display: flex;
margin-left: .375rem;
min-width: 0;
font-weight: 500;
font-size: .75rem;
color: var(--system-error-color);
&:empty { visibility: hidden; }
}
}
}
}
packages/theme/styles/popups.scss
+1 -2
View File
@@ -422,8 +422,7 @@
flex-direction: column;
padding: .5rem;
min-height: 22rem;
background: var(--theme-list-row-color);
border: 1px solid var(--theme-divider-color);
background: var(--theme-popup-color);
border-radius: .5rem;
box-shadow: var(--popup-shadow);
packages/ui/src/components/Button.svelte
+4 -4
View File
@@ -177,7 +177,7 @@
display: flex;
align-items: center;
flex-shrink: 0;
padding: 0 0.5rem;
padding: 0 0.625rem;
font-weight: 500;
min-width: 1.375rem;
white-space: nowrap;
@@ -279,9 +279,9 @@
background-color: var(--theme-button-enabled);
border-color: var(--theme-button-border);
&.medium:not(.only-icon) {
padding: 0 0.75rem;
}
// &.medium:not(.only-icon) {
// padding: 0 0.75rem;
// }
&:hover {
background-color: var(--theme-button-hovered);
}
packages/ui/src/components/calendar/DatePresenter.svelte
+38 -7
View File
@@ -19,7 +19,7 @@
import { DateRangeMode } from '@hcengineering/core'
import ui from '../../plugin'
import { showPopup } from '../../popups'
import { ButtonKind } from '../../types'
import { ButtonKind, ButtonSize } from '../../types'
import Icon from '../Icon.svelte'
import Label from '../Label.svelte'
import DatePopup from './DatePopup.svelte'
@@ -36,7 +36,7 @@
export let labelNull: IntlString = ui.string.NoDate
export let showIcon = true
export let shouldShowLabel: boolean = true
export let size: 'x-small' | 'small' = 'small'
export let size: ButtonSize | 'x-small' = 'small'
export let kind: ButtonKind = 'link'
export let label = ui.string.DueDate
export let detail = ui.string.NeedsToBeCompletedByThisDate
@@ -65,11 +65,9 @@
</script>
<button
class="datetime-button {kind}"
class="datetime-button {kind} {size}"
class:editable
class:dateTimeButtonNoLabel={!shouldShowLabel}
class:h-6={size === 'small'}
class:h-3={size === 'x-small'}
class:text-xs={size === 'x-small'}
on:click={(e) => {
if (editable && !opened) {
@@ -125,10 +123,22 @@
font-weight: 400;
width: auto;
white-space: nowrap;
color: var(--accent-color);
color: var(--theme-content-color);
cursor: default;
&.x-small {
height: 0.75rem;
}
&.small {
height: 1.5rem;
}
&.medium {
height: 2rem;
}
&.large {
height: 2.25rem;
}
&.primary {
padding: 0 0.5rem;
min-width: 1.5rem;
@@ -267,6 +277,27 @@
}
}
}
&.secondary {
padding: 0 0.625rem;
color: var(--theme-caption-color);
background-color: var(--theme-button-enabled);
border-color: var(--theme-button-border);
border-radius: 0.25rem;
.btn-icon {
color: var(--theme-content-color);
}
&:hover {
background-color: var(--theme-button-hovered);
border-color: var(--theme-divider-color);
.btn-icon {
color: var(--theme-content-color);
}
}
// &.edit {
// padding: 0 0.5rem;
// }
}
.time-divider {
flex-shrink: 0;
packages/ui/src/components/calendar/DateRangePresenter.svelte
+36 -6
View File
@@ -32,7 +32,8 @@
export let icon: 'normal' | 'warning' | 'overdue' = 'normal'
export let labelOver: IntlString | undefined = undefined // label instead of date
export let labelNull: IntlString = ui.string.NoDate
export let kind: 'no-border' | 'link' = 'no-border'
export let kind: 'no-border' | 'link' | 'secondary' = 'no-border'
export let size: 'small' | 'medium' | 'large' = 'small'
export let noShift: boolean = false
const dispatch = createEventDispatcher()
@@ -315,7 +316,7 @@
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<button
bind:this={datePresenter}
class="datetime-button {kind}"
class="datetime-button {kind} {size}"
class:editable
class:edit
on:click={() => {
@@ -455,17 +456,26 @@
padding: 0 0.5rem;
font-weight: 400;
min-width: 1.5rem;
width: auto;
height: 1.5rem;
width: min-content;
white-space: nowrap;
line-height: 1.5rem;
color: var(--accent-color);
color: var(--theme-content-color);
border: 1px solid transparent;
border-radius: 0.25rem;
transition-property: border, background-color, color, box-shadow;
transition-duration: 0.15s;
cursor: pointer;
&.small {
height: 1.5rem;
}
&.medium {
height: 2rem;
}
&.large {
height: 2.25rem;
}
.btn-icon {
margin-right: 0.375rem;
width: 0.875rem;
@@ -557,7 +567,6 @@
&.link {
padding: 0 0.875rem;
width: 100%;
height: 2.25rem;
color: var(--theme-caption-color);
&:hover {
background-color: var(--theme-bg-color);
@@ -571,6 +580,27 @@
}
}
&.secondary {
padding: 0 0.625rem;
color: var(--theme-caption-color);
background-color: var(--theme-button-enabled);
border-color: var(--theme-button-border);
.btn-icon {
color: var(--theme-content-color);
}
&:hover {
background-color: var(--theme-button-hovered);
border-color: var(--theme-divider-color);
.btn-icon {
color: var(--theme-content-color);
}
}
// &.edit {
// padding: 0 0.5rem;
// }
}
.close-btn {
display: flex;
justify-content: center;
packages/ui/src/components/icons/Attachment.svelte
+1 -1
View File
@@ -20,6 +20,6 @@
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<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"
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.3c0.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.8c-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"
/>
</svg>
plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
+5 -5
View File
@@ -366,16 +366,16 @@
margin-top: 0.5rem;
padding: 0.5rem;
min-width: 0;
color: var(--caption-color);
color: var(--theme-caption-color);
overflow-x: auto;
overflow-y: hidden;
background-color: var(--accent-bg-color);
border: 1px solid var(--divider-color);
border-radius: 0.5rem;
background-color: var(--theme-button-enabled);
border: 1px solid var(--theme-button-border);
border-radius: 0.25rem;
.item + .item {
padding-left: 1rem;
border-left: 1px solid var(--divider-color);
border-left: 1px solid var(--theme-divider-color);
}
}
</style>
plugins/calendar-resources/src/components/CreateEvent.svelte
+5 -1
View File
@@ -104,6 +104,8 @@
labelNull={ui.string.SelectDate}
on:change={async (event) => await handleNewStartDate(event.detail)}
mode={DateRangeMode.DATETIME}
kind={'secondary'}
size={'large'}
editable
/>
<DateRangePresenter
@@ -112,8 +114,10 @@
labelNull={calendar.string.DueTo}
on:change={async (event) => await handleNewDueDate(event.detail)}
mode={DateRangeMode.DATETIME}
kind={'secondary'}
size={'large'}
editable
/>
<UserBoxList bind:items={participants} label={calendar.string.Participants} />
<UserBoxList bind:items={participants} label={calendar.string.Participants} kind={'secondary'} size={'large'} />
</svelte:fragment>
</Card>
plugins/calendar-resources/src/components/CreateReminder.svelte
+9 -2
View File
@@ -72,7 +72,14 @@
<EditBox bind:value={title} placeholder={calendar.string.Title} kind={'large-style'} focus />
<svelte:fragment slot="pool">
<!-- <TimeShiftPicker title={calendar.string.Date} bind:value direction="after" /> -->
<DateRangePresenter bind:value mode={DateRangeMode.DATETIME} editable={true} labelNull={ui.string.SelectDate} />
<UserBoxList bind:items={participants} label={calendar.string.Participants} />
<DateRangePresenter
bind:value
mode={DateRangeMode.DATETIME}
editable={true}
labelNull={ui.string.SelectDate}
kind={'secondary'}
size={'large'}
/>
<UserBoxList bind:items={participants} label={calendar.string.Participants} kind={'secondary'} size={'large'} />
</svelte:fragment>
</Card>
plugins/contact-resources/src/components/AssigneeBox.svelte
+1 -1
View File
@@ -153,7 +153,7 @@
<div class="flex-presenter">
{#if icon}
<div class="icon" class:small-gap={size === 'inline' || size === 'small'}>
<Icon {icon} size={kind === 'link' ? 'small' : size} />
<Icon {icon} size={kind === 'link' || kind === 'secondary' ? 'small' : size} />
</div>
{/if}
<div class="label no-underline">
plugins/contact-resources/src/components/CreateEmployee.svelte
+2 -1
View File
@@ -169,7 +169,8 @@
<ChannelsDropdown
bind:value={channels}
focusIndex={10}
kind={'no-border'}
kind={'secondary'}
size={'large'}
editable
restricted={[contact.channelProvider.Email]}
/>
plugins/contact-resources/src/components/CreateOrganization.svelte
+2
View File
@@ -103,6 +103,8 @@
<ChannelsDropdown
bind:value={channels}
focusIndex={10}
kind={'secondary'}
size={'large'}
editable
highlighted={matchedChannels.map((it) => it.provider)}
/>
plugins/contact-resources/src/components/CreatePerson.svelte
+1 -1
View File
@@ -120,6 +120,6 @@
</div>
</div>
<svelte:fragment slot="pool">
<ChannelsDropdown bind:value={channels} focusIndex={10} kind={'no-border'} editable />
<ChannelsDropdown bind:value={channels} focusIndex={10} kind={'secondary'} size={'large'} editable />
</svelte:fragment>
</Card>
plugins/document-resources/src/components/CreateDocument.svelte
+6 -6
View File
@@ -121,28 +121,28 @@
<svelte:fragment slot="pool">
<UserBoxList
items={object.authors}
size="small"
label={document.string.Authors}
emptyLabel={document.string.Authors}
kind="no-border"
kind={'secondary'}
size={'large'}
width={'min-content'}
on:update={({ detail }) => (object.authors = detail)}
/>
<UserBoxList
items={object.approvers}
size="small"
label={document.string.Approvers}
emptyLabel={document.string.Approvers}
kind="no-border"
kind={'secondary'}
size={'large'}
width={'min-content'}
on:update={({ detail }) => (object.approvers = detail)}
/>
<UserBoxList
items={object.reviewers}
size="small"
label={document.string.Reviewers}
emptyLabel={document.string.Reviewers}
kind="no-border"
kind={'secondary'}
size={'large'}
width={'min-content'}
on:update={({ detail }) => (object.reviewers = detail)}
/>
plugins/hr-resources/src/components/CreateDepartment.svelte
+9 -1
View File
@@ -75,13 +75,21 @@
</div>
</div>
<svelte:fragment slot="header">
<SpaceSelector _class={hr.class.Department} label={hr.string.ParentDepartmentLabel} bind:space />
<SpaceSelector
_class={hr.class.Department}
label={hr.string.ParentDepartmentLabel}
bind:space
kind={'secondary'}
size={'large'}
/>
</svelte:fragment>
<svelte:fragment slot="pool">
<EmployeeBox
focusIndex={3}
label={hr.string.TeamLead}
placeholder={hr.string.TeamLead}
kind={'secondary'}
size={'large'}
bind:value={lead}
allowDeselect
showNavigate={false}
plugins/hr-resources/src/components/CreateRequest.svelte
+11 -3
View File
@@ -93,6 +93,8 @@
<EmployeeBox
label={hr.string.SelectEmployee}
placeholder={hr.string.SelectEmployee}
kind={'secondary'}
size={'large'}
bind:value={employee}
{readonly}
showNavigate={false}
@@ -118,13 +120,19 @@
placeholder={core.string.Description}
/>
<svelte:fragment slot="pool">
<DateRangePresenter bind:value editable labelNull={ui.string.SelectDate} />
<DateRangePresenter bind:value={dueDate} labelNull={calendar.string.DueTo} editable />
<DateRangePresenter bind:value editable labelNull={ui.string.SelectDate} kind={'secondary'} size={'large'} />
<DateRangePresenter
bind:value={dueDate}
labelNull={calendar.string.DueTo}
editable
kind={'secondary'}
size={'large'}
/>
</svelte:fragment>
<svelte:fragment slot="footer">
<Button
icon={IconAttachment}
kind={'transparent'}
size={'large'}
on:click={() => {
descriptionBox.attach()
}}
plugins/inventory-resources/src/components/CreateProduct.svelte
+2
View File
@@ -85,6 +85,8 @@
<svelte:fragment slot="pool">
<DropdownLabels
items={categories}
kind={'secondary'}
size={'large'}
bind:selected={doc.attachedTo}
placeholder={inventory.string.Categories}
label={inventory.string.Category}
plugins/lead-resources/src/components/CreateCustomer.svelte
+3 -8
View File
@@ -168,14 +168,7 @@
on:changeContent
>
<svelte:fragment slot="header">
<Button
icon={targetClass.icon}
label={targetClass.label}
size={'small'}
kind={'no-border'}
on:click={selectTarget}
focusIndex={100}
/>
<Button icon={targetClass.icon} label={targetClass.label} size={'large'} on:click={selectTarget} focusIndex={100} />
</svelte:fragment>
{#if targetClass._id === contact.class.Person}
<div class="flex-between flex-row-top">
@@ -236,6 +229,8 @@
<ChannelsDropdown
bind:value={channels}
focusIndex={10}
kind={'secondary'}
size={'large'}
editable
highlighted={matchedChannels.map((it) => it.provider)}
/>
plugins/lead-resources/src/components/CreateLead.svelte
+8 -4
View File
@@ -114,6 +114,8 @@
<SpaceSelector
_class={lead.class.Funnel}
label={lead.string.FunnelName}
kind={'secondary'}
size={'large'}
bind:space={_space}
create={{
component: lead.component.CreateFunnel,
@@ -132,8 +134,8 @@
label={lead.string.Leads}
placeholder={lead.string.Leads}
bind:value={customer}
kind={'no-border'}
size={'small'}
kind={'secondary'}
size={'large'}
/>
{/if}
<Label label={lead.string.CreateLead} />
@@ -152,6 +154,8 @@
<EmployeeBox
focusIndex={2}
label={lead.string.Assignee}
kind={'secondary'}
size={'large'}
bind:value={assignee}
allowDeselect
showNavigate={false}
@@ -164,8 +168,8 @@
label={lead.string.Customer}
placeholder={lead.string.SelectCustomer}
bind:value={customer}
kind={'no-border'}
size={'small'}
kind={'secondary'}
size={'large'}
create={{ component: lead.component.CreateCustomer, label: lead.string.CreateCustomer }}
/>
{/if}
plugins/recruit-resources/src/components/CandidateCard.svelte
+6 -7
View File
@@ -86,8 +86,8 @@
<style lang="scss">
.card-container {
padding: 1rem 1.5rem 1.25rem;
background-color: var(--board-card-bg-color);
border: 1px solid var(--divider-color);
background-color: var(--theme-button-enabled);
border: 1px solid var(--theme-button-border);
border-radius: 0.5rem;
transition-property: box-shadow, background-color, border-color;
transition-timing-function: var(--timing-shadow);
@@ -97,8 +97,7 @@
min-height: 15rem;
&:hover {
background-color: var(--board-card-bg-hover);
border-color: var(--button-border-color);
background-color: var(--theme-button-hovered);
box-shadow: var(--accent-shadow);
}
@@ -106,17 +105,17 @@
margin-bottom: 1.75rem;
font-weight: 500;
font-size: 0.625rem;
color: var(--dark-color);
color: var(--theme-dark-color);
}
.name {
margin: 1rem 0 0.25rem;
font-weight: 500;
font-size: 1rem;
color: var(--caption-color);
color: var(--theme-caption-color);
}
.description {
font-size: 0.75rem;
color: var(--dark-color);
color: var(--theme-dark-color);
}
.footer {
margin-top: 1.5rem;
plugins/recruit-resources/src/components/CreateApplication.svelte
+3 -2
View File
@@ -390,14 +390,15 @@
bind:value={doc.assignee}
allowDeselect
showNavigate={false}
kind={'secondary'}
size={'large'}
titleDeselect={recruit.string.UnAssignRecruiter}
/>
{#if states.length > 0}
<Button
focusIndex={3}
width="min-content"
size="small"
kind="no-border"
size="large"
bind:input={btn}
on:click={() => {
showPopup(
plugins/recruit-resources/src/components/CreateCandidate.svelte
+25 -36
View File
@@ -56,11 +56,11 @@
IconInfo,
Label,
showPopup,
Spinner
Spinner,
IconAttachment
} from '@hcengineering/ui'
import { createEventDispatcher } from 'svelte'
import recruit from '../plugin'
import FileUpload from './icons/FileUpload.svelte'
import YesNo from './YesNo.svelte'
export let shouldSaveDraft: boolean = false
@@ -521,14 +521,7 @@
on:changeContent
>
<svelte:fragment slot="header">
<Button
icon={contact.icon.Person}
label={contact.string.Person}
size={'small'}
kind={'no-border'}
disabled
on:click={() => {}}
/>
<Button icon={contact.icon.Person} label={contact.string.Person} size={'large'} disabled on:click={() => {}} />
</svelte:fragment>
<div class="flex-between">
<div class="flex-col">
@@ -585,7 +578,7 @@
focusIndex={10}
bind:value={object.channels}
highlighted={matchedChannels.map((it) => it.provider)}
kind={'link-bordered'}
kind={'secondary'}
size={'large'}
/>
<YesNo
@@ -594,7 +587,7 @@
label={recruit.string.Onsite}
tooltip={recruit.string.WorkLocationPreferences}
bind:value={object.onsite}
kind={'link-bordered'}
kind={'secondary'}
size={'large'}
/>
<YesNo
@@ -603,7 +596,7 @@
label={recruit.string.Remote}
tooltip={recruit.string.WorkLocationPreferences}
bind:value={object.remote}
kind={'link-bordered'}
kind={'secondary'}
size={'large'}
/>
<Component
@@ -618,7 +611,7 @@
elements,
newElements,
countLabel: recruit.string.NumberSkills,
kind: 'link-bordered',
kind: 'secondary',
size: 'large'
}}
on:open={(evt) => {
@@ -655,19 +648,19 @@
}}
/>
</div>
{:else}
<div class="flex-grow w-full" style="margin: 0" />
{/if}
<div class="flex flex-grow flex-wrap">
<InlineAttributeBar
_class={recruit.mixin.Candidate}
{object}
toClass={contact.class.Contact}
{ignoreKeys}
extraProps={{ showNavigate: false }}
on:update={() => {
object = object
}}
/>
</div>
<InlineAttributeBar
_class={recruit.mixin.Candidate}
{object}
toClass={contact.class.Contact}
{ignoreKeys}
extraProps={{ showNavigate: false }}
on:update={() => {
object = object
}}
/>
</svelte:fragment>
<svelte:fragment slot="footer">
@@ -683,14 +676,13 @@
on:drop|preventDefault|stopPropagation={drop}
>
{#if loading && object.resumeUuid}
<Button label={recruit.string.Parsing} kind="link" icon={Spinner} disabled />
<Button label={recruit.string.Parsing} icon={Spinner} disabled />
{:else}
{#if loading}
<Button label={recruit.string.Uploading} kind="link" icon={Spinner} disabled />
<Button label={recruit.string.Uploading} icon={Spinner} disabled />
{:else if object.resumeUuid}
<Button
disabled={loading}
kind={'transparent'}
focusIndex={103}
icon={FileIcon}
on:click={() => {
@@ -707,10 +699,9 @@
</Button>
{:else}
<Button
kind={'transparent'}
focusIndex={103}
label={recruit.string.AddDropHere}
icon={FileUpload}
icon={IconAttachment}
on:click={() => {
inputFile.click()
}}
@@ -735,14 +726,12 @@
<style lang="scss">
.resume {
margin: -0.375rem 0rem -0.375rem -0.375rem;
padding: 0.375rem;
background: var(--theme-comp-header-color);
border: 1px dashed var(--theme-divider-color);
box-shadow: 0 0 0 0 var(--primary-button-focused-border);
border-radius: 0.5rem;
transition: box-shadow 0.15s ease-in-out;
&.solid {
border-style: solid;
box-shadow: 0 0 0 2px var(--primary-button-focused-border);
}
}
.skills-box {
plugins/recruit-resources/src/components/CreateVacancy.svelte
+6 -4
View File
@@ -281,8 +281,8 @@
bind:value={company}
allowDeselect
titleDeselect={recruit.string.UnAssignCompany}
kind={'no-border'}
size={'small'}
kind={'secondary'}
size={'large'}
icon={Company}
readonly={preserveCompany}
showNavigate={false}
@@ -293,7 +293,9 @@
props={{
folders: [recruit.space.VacancyTemplates],
template: templateId,
focusIndex: 4
focusIndex: 4,
kind: 'secondary',
size: 'large'
}}
on:change={handleTemplateChange}
/>
@@ -311,7 +313,7 @@
<svelte:fragment slot="footer">
<Button
icon={IconAttachment}
kind={'transparent'}
size={'large'}
on:click={() => {
descriptionBox.attach()
}}
plugins/recruit-resources/src/components/VacancyCard.svelte
+3 -4
View File
@@ -124,8 +124,8 @@
<style lang="scss">
.card-container {
padding: 1rem 1.5rem 1.25rem;
background-color: var(--board-card-bg-color);
border: 1px solid var(--divider-color);
background-color: var(--theme-button-enabled);
border: 1px solid var(--theme-button-border);
border-radius: 0.5rem;
transition-property: box-shadow, background-color, border-color;
transition-timing-function: var(--timing-shadow);
@@ -135,8 +135,7 @@
min-height: 15rem;
&:hover {
background-color: var(--board-card-bg-hover);
border-color: var(--button-border-color);
background-color: var(--theme-button-hovered);
box-shadow: var(--accent-shadow);
}
plugins/recruit-resources/src/components/review/CreateReview.svelte
+11 -7
View File
@@ -165,8 +165,8 @@
bind:value={doc.attachedTo}
label={recruit.string.Talent}
placeholder={recruit.string.Talents}
kind={'no-border'}
size={'small'}
kind={'secondary'}
size={'large'}
create={{ component: recruit.component.CreateCandidate, label: recruit.string.CreateTalent }}
/>
{/if}
@@ -174,8 +174,8 @@
_class={contact.class.Organization}
bind:value={company}
label={recruit.string.Company}
kind={'no-border'}
size={'small'}
kind={'secondary'}
size={'large'}
showNavigate={false}
create={{ component: contact.component.CreateOrganization, label: contact.string.CreateOrganization }}
/>
@@ -184,9 +184,9 @@
bind:value={application}
label={recruit.string.Application}
placeholder={recruit.string.ApplicationCreateLabel}
kind={'no-border'}
kind={'secondary'}
size={'large'}
searchField={'number'}
size={'small'}
showNavigate={false}
allowCategory={[recruit.completion.ApplicationCategory]}
/>
@@ -195,6 +195,8 @@
labelNull={recruit.string.StartDate}
mode={DateRangeMode.DATETIME}
editable
kind={'secondary'}
size={'large'}
on:change={updateStart}
/>
<DateRangePresenter
@@ -202,7 +204,9 @@
labelNull={recruit.string.DueDate}
mode={DateRangeMode.DATETIME}
editable
kind={'secondary'}
size={'large'}
/>
<UserBoxList bind:items={doc.participants} label={calendar.string.Participants} />
<UserBoxList bind:items={doc.participants} label={calendar.string.Participants} kind={'secondary'} size={'large'} />
</svelte:fragment>
</Card>
plugins/tags-resources/src/components/CreateTagElement.svelte
+2
View File
@@ -136,6 +136,8 @@
<DropdownLabels
icon={IconFolder}
label={tags.string.CategoryLabel}
kind={'secondary'}
size={'large'}
bind:selected={category}
items={categoryItems}
on:selected={() => {
plugins/task-resources/src/components/kanban/KanbanTemplateSelector.svelte
+5 -1
View File
@@ -18,12 +18,14 @@
import type { KanbanTemplate, KanbanTemplateSpace } from '@hcengineering/task'
import task from '@hcengineering/task'
import type { DropdownTextItem } from '@hcengineering/ui'
import { DropdownLabels } from '@hcengineering/ui'
import { DropdownLabels, ButtonKind, ButtonSize } from '@hcengineering/ui'
import { createEventDispatcher } from 'svelte'
import plugin from '../../plugin'
export let folders: Ref<KanbanTemplateSpace>[]
export let template: Ref<KanbanTemplate> | undefined = undefined
export let kind: ButtonKind = 'no-border'
export let size: ButtonSize = 'small'
export let focusIndex = -1
let templates: KanbanTemplate[] = []
@@ -51,6 +53,8 @@
<DropdownLabels
{focusIndex}
{items}
{kind}
{size}
icon={task.icon.ManageTemplates}
bind:selected={selectedItem}
label={plugin.string.States}
plugins/tracker-resources/src/components/CreateIssue.svelte
+30 -13
View File
@@ -540,7 +540,13 @@
>
<svelte:fragment slot="header">
<div class="flex-row-center">
<SpaceSelector _class={tracker.class.Project} label={tracker.string.Project} bind:space={_space} />
<SpaceSelector
_class={tracker.class.Project}
label={tracker.string.Project}
bind:space={_space}
kind={'secondary'}
size={'large'}
/>
</div>
<ObjectBox
_class={tracker.class.IssueTemplate}
@@ -549,7 +555,8 @@
space: _space
}}
on:change={handleTemplateChange}
size={'small'}
kind={'secondary'}
size={'large'}
label={tracker.string.NoIssueTemplate}
icon={tracker.icon.Issues}
searchField={'title'}
@@ -615,8 +622,8 @@
<div id="status-editor">
<StatusEditor
value={object}
kind="no-border"
size="small"
kind={'secondary'}
size={'large'}
shouldShowLabel={true}
on:change={({ detail }) => (object.status = detail)}
/>
@@ -626,8 +633,8 @@
value={object}
shouldShowLabel
isEditable
kind="no-border"
size="small"
kind={'secondary'}
size={'large'}
justify="center"
on:change={({ detail }) => (object.priority = detail)}
/>
@@ -635,8 +642,8 @@
<div id="assignee-editor">
<AssigneeEditor
value={object}
size="small"
kind="no-border"
kind={'secondary'}
size={'large'}
width={'min-content'}
on:change={({ detail }) => (object.assignee = detail)}
/>
@@ -647,7 +654,9 @@
items: object.labels,
key,
targetClass: tracker.class.Issue,
countLabel: tracker.string.NumberLabels
countLabel: tracker.string.NumberLabels,
kind: 'secondary',
size: 'large'
}}
on:open={(evt) => {
addTagRef(evt.detail)
@@ -657,23 +666,31 @@
}}
/>
<div id="estimation-editor">
<EstimationEditor kind={'no-border'} size={'small'} value={object} />
<EstimationEditor kind={'secondary'} size={'large'} value={object} />
</div>
<ComponentSelector value={object.component} onChange={handleComponentIdChanged} isEditable={true} />
<ComponentSelector
value={object.component}
onChange={handleComponentIdChanged}
isEditable={true}
kind={'secondary'}
size={'large'}
/>
<SprintSelector
value={object.sprint}
onChange={handleSprintIdChanged}
useComponent={(!originalIssue && object.component) || undefined}
kind={'secondary'}
size={'large'}
/>
{#if object.dueDate !== null}
<DatePresenter bind:value={object.dueDate} editable />
<DatePresenter bind:value={object.dueDate} kind={'secondary'} size={'large'} editable />
{/if}
<div id="more-actions"><ActionIcon icon={IconMoreH} size={'medium'} action={showMoreActions} /></div>
</svelte:fragment>
<svelte:fragment slot="footer">
<Button
icon={IconAttachment}
kind={'transparent'}
size={'large'}
on:click={() => {
descriptionBox.attach()
}}
plugins/tracker-resources/src/components/components/NewComponent.svelte
+31 -4
View File
@@ -62,7 +62,13 @@
on:changeContent
>
<svelte:fragment slot="header">
<SpaceSelector _class={tracker.class.Project} label={tracker.string.Project} bind:space />
<SpaceSelector
_class={tracker.class.Project}
label={tracker.string.Project}
bind:space
kind={'secondary'}
size={'large'}
/>
</svelte:fragment>
<EditBox bind:value={object.label} placeholder={tracker.string.ComponentNamePlaceholder} kind={'large-style'} focus />
<StyledTextArea
@@ -74,6 +80,8 @@
<ComponentStatusSelector
selectedComponentStatus={object.status}
onComponentStatusChange={handleComponentStatusChanged}
kind={'secondary'}
size={'large'}
/>
<EmployeeBox
label={tracker.string.ComponentLead}
@@ -82,10 +90,29 @@
allowDeselect
titleDeselect={tracker.string.Unassigned}
showNavigate={false}
kind={'secondary'}
size={'large'}
/>
<UserBoxList
bind:items={object.members}
label={tracker.string.ComponentMembersSearchPlaceholder}
kind={'secondary'}
size={'large'}
/>
<UserBoxList bind:items={object.members} label={tracker.string.ComponentMembersSearchPlaceholder} />
<!-- TODO: add labels after customize IssueNeedsToBeCompletedByThisDate -->
<DatePresenter bind:value={object.startDate} labelNull={tracker.string.StartDate} editable />
<DatePresenter bind:value={object.targetDate} labelNull={tracker.string.TargetDate} editable />
<DatePresenter
bind:value={object.startDate}
labelNull={tracker.string.StartDate}
kind={'secondary'}
size={'large'}
editable
/>
<DatePresenter
bind:value={object.targetDate}
labelNull={tracker.string.TargetDate}
kind={'secondary'}
size={'large'}
editable
/>
</svelte:fragment>
</Card>
plugins/tracker-resources/src/components/sprints/NewSprint.svelte
+25 -3
View File
@@ -63,7 +63,13 @@
on:changeContent
>
<svelte:fragment slot="header">
<SpaceSelector _class={tracker.class.Project} label={tracker.string.Project} bind:space />
<SpaceSelector
_class={tracker.class.Project}
label={tracker.string.Project}
kind={'secondary'}
size={'large'}
bind:space
/>
</svelte:fragment>
<EditBox bind:value={object.label} placeholder={tracker.string.SprintNamePlaceholder} kind={'large-style'} focus />
<StyledTextArea
@@ -72,27 +78,43 @@
emphasized
/>
<svelte:fragment slot="pool">
<SprintStatusSelector selectedSprintStatus={object.status} onSprintStatusChange={handleComponentStatusChanged} />
<SprintStatusSelector
selectedSprintStatus={object.status}
onSprintStatusChange={handleComponentStatusChanged}
kind={'secondary'}
size={'large'}
/>
<EmployeeBox
label={tracker.string.SprintLead}
placeholder={tracker.string.AssignTo}
kind={'secondary'}
size={'large'}
bind:value={object.lead}
allowDeselect
titleDeselect={tracker.string.Unassigned}
showNavigate={false}
/>
<UserBoxList bind:items={object.members} label={tracker.string.SprintMembersSearchPlaceholder} />
<UserBoxList
bind:items={object.members}
label={tracker.string.SprintMembersSearchPlaceholder}
kind={'secondary'}
size={'large'}
/>
<DatePresenter
bind:value={object.startDate}
editable
label={tracker.string.StartDate}
detail={ui.string.SelectDate}
kind={'secondary'}
size={'large'}
/>
<DatePresenter
bind:value={object.targetDate}
editable
label={tracker.string.TargetDate}
detail={ui.string.SelectDate}
kind={'secondary'}
size={'large'}
/>
</svelte:fragment>
</Card>
plugins/tracker-resources/src/components/templates/CreateIssueTemplate.svelte
+24 -8
View File
@@ -132,7 +132,13 @@
on:changeContent
>
<svelte:fragment slot="header">
<SpaceSelector _class={tracker.class.Project} label={tracker.string.Project} bind:space={_space} />
<SpaceSelector
_class={tracker.class.Project}
label={tracker.string.Project}
bind:space={_space}
kind={'secondary'}
size={'large'}
/>
</svelte:fragment>
<svelte:fragment slot="title" let:label>
<Label {label} />
@@ -158,15 +164,15 @@
value={object}
shouldShowLabel
isEditable
kind="no-border"
size="small"
kind={'secondary'}
size={'large'}
justify="center"
on:change={({ detail }) => (object.priority = detail)}
/>
<AssigneeEditor
value={object}
size="small"
kind="no-border"
kind={'secondary'}
size={'large'}
width={'min-content'}
on:change={({ detail }) => (object.assignee = detail)}
/>
@@ -176,7 +182,9 @@
items: labels,
key,
targetClass: tracker.class.Issue,
countLabel: tracker.string.NumberLabels
countLabel: tracker.string.NumberLabels,
kind: 'secondary',
size: 'large'
}}
on:open={(evt) => {
addTagRef(evt.detail)
@@ -185,12 +193,20 @@
labels = labels.filter((it) => it._id !== evt.detail)
}}
/>
<EstimationEditor kind={'no-border'} size={'small'} value={object} />
<ComponentSelector value={object.component} onChange={handleComponentIdChanged} isEditable={true} />
<EstimationEditor kind={'secondary'} size={'large'} value={object} />
<ComponentSelector
value={object.component}
onChange={handleComponentIdChanged}
isEditable={true}
kind={'secondary'}
size={'large'}
/>
<SprintSelector
value={object.sprint}
onChange={handleSprintIdChanged}
useComponent={object.component ?? undefined}
kind={'secondary'}
size={'large'}
/>
</svelte:fragment>
</Card>
plugins/view-resources/src/components/DateEditor.svelte
+3 -1
View File
@@ -21,7 +21,8 @@
export let type: TypeDate | undefined
export let label: IntlString | undefined = undefined
export let onChange: (value: any) => void
export let kind: 'no-border' | 'link' = 'no-border'
export let kind: 'no-border' | 'link' | 'secondary' = 'no-border'
export let size: 'small' | 'medium' | 'large' = 'small'
</script>
<DateRangePresenter
@@ -31,6 +32,7 @@
noShift={!type?.withShift}
editable
{kind}
{size}
on:change={(res) => {
if (res.detail !== undefined) onChange(res.detail)
}}
plugins/view-resources/src/components/ObjectBox.svelte
+1 -1
View File
@@ -137,7 +137,7 @@
{:else}
<div class="flex-row-center">
{#if icon}
<Icon {icon} size={kind === 'link' ? 'small' : size} />
<Icon {icon} size={kind === 'link' || kind === 'secondary' ? 'small' : size} />
{/if}
<div class="ml-2">
<Label {label} />
plugins/view-resources/src/components/StringEditor.svelte
+3 -3
View File
@@ -15,7 +15,7 @@
-->
<script lang="ts">
import type { IntlString } from '@hcengineering/platform'
import type { ButtonSize } from '@hcengineering/ui'
import type { ButtonSize, ButtonKind } from '@hcengineering/ui'
import { EditBox, Label, showPopup, eventToHTMLElement, Button } from '@hcengineering/ui'
import EditBoxPopup from './EditBoxPopup.svelte'
@@ -24,7 +24,7 @@
export let value: string
export let focus: boolean = false
export let onChange: (value: string) => void = () => {}
export let kind: 'no-border' | 'link' = 'no-border'
export let kind: ButtonKind | undefined = undefined
export let readonly = false
export let size: ButtonSize = 'small'
export let justify: 'left' | 'center' = 'center'
@@ -37,7 +37,7 @@
}
</script>
{#if kind === 'link'}
{#if kind}
<Button
{kind}
{size}