mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-22 11:01:54 +03:00
TSK-1459: update Panel layout (#3163)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
148cbd4898
commit
2e6181acf1
@ -157,23 +157,28 @@
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="aside">
|
||||
<Scroller padding={'.75rem 1.5rem'}>
|
||||
{#if $$slots.actions}
|
||||
<div class="flex-row-center pb-3 bottom-divider">
|
||||
{#if $$slots['actions-label']}
|
||||
<span class="fs-bold w-24 mr-6"><slot name="actions-label" /></span>
|
||||
{/if}
|
||||
<div class="buttons-group xsmall-gap flex flex-grow">
|
||||
<slot name="actions" />
|
||||
</div>
|
||||
{#if $$slots['aside-tabs']}
|
||||
<div class="popupPanel-body__aside-tabsheader">
|
||||
<slot name="aside-tabs" />
|
||||
</div>
|
||||
{/if}
|
||||
{#if $$slots.actions}
|
||||
<div class="popupPanel-body__aside-header">
|
||||
{#if $$slots['actions-label']}
|
||||
<span class="fs-bold w-27 mr-6"><slot name="actions-label" /></span>
|
||||
{/if}
|
||||
<div class="buttons-group xsmall-gap flex flex-grow">
|
||||
<slot name="actions" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<Scroller>
|
||||
{#if $$slots['custom-attributes'] && isCustomAttr}
|
||||
<slot name="custom-attributes" direction="column" />
|
||||
{:else if $$slots.attributes}<slot name="attributes" direction="column" />{/if}
|
||||
{#if $$slots.aside}<slot name="aside" />{/if}
|
||||
<div class="h-2 min-h-2 max-h-2" />
|
||||
</Scroller>
|
||||
<div class="h-2 min-h-2 max-h-2" />
|
||||
</svelte:fragment>
|
||||
|
||||
{#if $deviceInfo.isMobile}
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
{#if editor}
|
||||
{#if showHeader}
|
||||
<span
|
||||
class="overflow-label"
|
||||
class="label"
|
||||
use:tooltip={{
|
||||
component: Label,
|
||||
props: { label: attribute.label }
|
||||
|
||||
@ -32,21 +32,8 @@
|
||||
export let justify: 'left' | 'center' = 'left'
|
||||
</script>
|
||||
|
||||
<div class="attributes-bar-container vertical">
|
||||
<div class="popupPanel-body__aside-grid">
|
||||
{#each keys as key (typeof key === 'string' ? key : key.key)}
|
||||
<AttributeBarEditor {key} {_class} {object} {showHeader} {readonly} {draft} on:update />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.attributes-bar-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.5fr;
|
||||
grid-auto-flow: row;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
height: min-content;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -153,7 +153,7 @@ export class LiveQuery {
|
||||
private oldOptions: FindOptions<Doc> | undefined
|
||||
private oldCallback: ((result: FindResult<any>) => void) | undefined
|
||||
private reqId = 0
|
||||
unsubscribe = () => {}
|
||||
unsubscribe: () => void = () => {}
|
||||
clientRecreated = false
|
||||
|
||||
constructor (noDestroy: boolean = false) {
|
||||
|
||||
@ -115,8 +115,8 @@ p:last-child { margin-block-end: 0; }
|
||||
hyphens: auto;
|
||||
line-height: 150%;
|
||||
|
||||
&.contrast { color: var(--theme-accent-color); }
|
||||
&:not(.contrast) { color: var(--content-color); }
|
||||
&.contrast { color: var(--theme-caption-color); }
|
||||
&:not(.contrast) { color: var(--theme-content-color); }
|
||||
|
||||
a {
|
||||
word-break: break-all;
|
||||
@ -127,11 +127,11 @@ p:last-child { margin-block-end: 0; }
|
||||
|
||||
a.noUnderline {
|
||||
&:hover {
|
||||
color: var(--caption-color);
|
||||
color: var(--theme-caption-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
&:active {
|
||||
color: var(--accent-color);
|
||||
color: var(--theme-caption-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@ -159,7 +159,7 @@ a.noUnderline {
|
||||
|
||||
input.search {
|
||||
margin: 0;
|
||||
color: var(--accent-color);
|
||||
color: var(--theme-caption-color);
|
||||
border: none;
|
||||
caret-color: var(--theme-caret-color);
|
||||
|
||||
@ -281,7 +281,6 @@ input.search {
|
||||
}
|
||||
.label {
|
||||
min-width: 0;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
color: var(--theme-content-color);
|
||||
|
||||
@ -337,16 +336,6 @@ input.search {
|
||||
.avatar-container:not(.no-img) { transform: translateY(.375rem); }
|
||||
.avatar-container.no-img { transform: translateY(.15rem); }
|
||||
}
|
||||
// Presenters on the card
|
||||
.card-container .flex-presenter,
|
||||
.card-container .inline-presenter {
|
||||
.icon { display: none; }
|
||||
.label {
|
||||
font-size: .75rem;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
&:hover .label { color: var(--content-color); }
|
||||
}
|
||||
|
||||
.buttons-group {
|
||||
display: grid;
|
||||
@ -527,6 +516,7 @@ input.search {
|
||||
.px-2 { padding: 0 .5rem; }
|
||||
.px-3 { padding: 0 .75rem; }
|
||||
.px-4 { padding: 0 1rem; }
|
||||
.px-6 { padding: 0 1.5rem; }
|
||||
.px-10 { padding: 0 2.5rem; }
|
||||
.py-1 { padding: 0.25rem 0; }
|
||||
.py-4 { padding: 1rem 0; }
|
||||
@ -622,6 +612,7 @@ input.search {
|
||||
.w-16 { width: 4rem; }
|
||||
.w-22 { width: 5.5rem; }
|
||||
.w-24 { width: 6rem; }
|
||||
.w-27 { width: 6.75rem; }
|
||||
.w-32 { width: 8rem; }
|
||||
.w-60 { width: 15rem; }
|
||||
.w-85 { width: 21.25rem; }
|
||||
@ -706,19 +697,19 @@ input.search {
|
||||
}
|
||||
|
||||
.hover-trans {
|
||||
color: var(--dark-color);
|
||||
color: var(--theme-dark-color);
|
||||
cursor: pointer;
|
||||
&:hover { color: var(--caption-color); }
|
||||
&:active { color: var(--accent-color); }
|
||||
&:hover { color: var(--theme-caption-color); }
|
||||
&:active { color: var(--theme-caption-color); }
|
||||
}
|
||||
|
||||
/* Link */
|
||||
a.no-line {
|
||||
text-decoration: none;
|
||||
color: var(--accent-color);
|
||||
&:hover { color: var(--caption-color); }
|
||||
&:active { color: var(--accent-color); }
|
||||
&:visited { color: var(--accent-color); }
|
||||
color: var(--theme-caption-color);
|
||||
&:hover { color: var(--theme-caption-color); }
|
||||
&:active { color: var(--theme-caption-color); }
|
||||
&:visited { color: var(--theme-caption-color); }
|
||||
}
|
||||
.cursor-pointer { cursor: pointer; }
|
||||
.cursor-default { cursor: default; }
|
||||
@ -733,14 +724,14 @@ a.no-line {
|
||||
.fs-title {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: var(--caption-color);
|
||||
color: var(--theme-caption-color);
|
||||
user-select: none;
|
||||
}
|
||||
.trans-title {
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-size: .75rem;
|
||||
color: var(--dark-color);
|
||||
color: var(--theme-dark-color);
|
||||
user-select: none;
|
||||
}
|
||||
.text-xs { font-size: .625rem; }
|
||||
|
||||
@ -737,6 +737,15 @@
|
||||
& > * { margin-left: .375rem; }
|
||||
}
|
||||
}
|
||||
// Labels on the ListView
|
||||
.list-container .listitems-container,
|
||||
.list-container .listitems-container:hover,
|
||||
.list-container .button,
|
||||
.list-container .button:hover {
|
||||
background-color: var(--theme-list-button-color) !important;
|
||||
.icon { color: var(--theme-halfcontent-color) !important; }
|
||||
.label { color: var(--theme-halfcontent-color) !important; }
|
||||
}
|
||||
|
||||
/* Kanban - global style */
|
||||
.kanban-container .card-container .card-labels > * { margin: .25rem .25rem 0 0; }
|
||||
|
||||
@ -66,6 +66,7 @@
|
||||
scrollbar-color: var(--body-accent) var(--board-bg-color);
|
||||
scrollbar-width: none;
|
||||
--body-font-size: .875rem;
|
||||
--panel-aside-width: 25rem; // 20rem;
|
||||
--font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
|
||||
--timing-shadow: cubic-bezier(0,.65,.35,1);
|
||||
--timing-main: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
|
||||
@ -165,12 +165,24 @@
|
||||
|
||||
.popupPanel-body__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
|
||||
&-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 3.5rem;
|
||||
border-bottom: 1px solid var(--theme-divider-color);
|
||||
}
|
||||
&.main {
|
||||
margin: 0 auto;
|
||||
padding: .75rem 1.25rem;
|
||||
width: calc(100% - 5rem);
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
max-width: 900px;
|
||||
|
||||
&.max {
|
||||
@ -203,38 +215,26 @@
|
||||
}
|
||||
|
||||
&__aside {
|
||||
position: relative;
|
||||
width: 25%;
|
||||
min-width: 320px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 1rem;
|
||||
bottom: 1rem;
|
||||
left: 0;
|
||||
width: 0;
|
||||
border-left: 1px solid var(--theme-divider-color);
|
||||
}
|
||||
min-width: var(--panel-aside-width);
|
||||
border-left: 1px solid var(--theme-divider-color);
|
||||
|
||||
&.float {
|
||||
position: absolute;
|
||||
flex-shrink: 0;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
width: 320px;
|
||||
width: var(--panel-aside-width);
|
||||
min-width: 0;
|
||||
max-width: 320px;
|
||||
max-width: var(--panel-aside-width);
|
||||
height: 100%;
|
||||
background-color: var(--theme-panel-color);
|
||||
border-left: 1px solid var(--theme-divider-color);
|
||||
border-bottom-right-radius: .45rem;
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
transition: box-shadow 150ms ease 0s, transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
transform: translateX(0);
|
||||
visibility: hidden;
|
||||
|
||||
&::before { content: none; }
|
||||
&.shown {
|
||||
box-shadow: var(--popup-aside-shadow);
|
||||
transform: translateX(-100%);
|
||||
@ -252,6 +252,46 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-header,
|
||||
&-tabsheader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
padding: .75rem 2rem;
|
||||
height: 3.5rem;
|
||||
min-height: 3.5rem;
|
||||
border-bottom: 1px solid var(--theme-divider-color);
|
||||
}
|
||||
&-tabsheader {
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
&-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.5fr;
|
||||
grid-auto-flow: row;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
row-gap: .25rem;
|
||||
column-gap: 1rem;
|
||||
margin: .5rem 2rem;
|
||||
width: calc(100% - 4rem);
|
||||
height: min-content;
|
||||
|
||||
.divider {
|
||||
grid-column: 1 / 3;
|
||||
margin: .75rem -2rem;
|
||||
height: 1px;
|
||||
background-color: var(--theme-divider-color);
|
||||
}
|
||||
.label,
|
||||
.labelTop { color: var(--theme-dark-color); }
|
||||
.labelTop {
|
||||
align-self: start;
|
||||
margin-top: 0.385rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// &.asideShown .popupPanel-body__main {
|
||||
|
||||
@ -50,6 +50,7 @@
|
||||
export let iconSize: IconSize = size === 'inline' ? 'inline' : 'small'
|
||||
export let iconRightSize: IconSize = 'x-small'
|
||||
export let short: boolean = false
|
||||
export let accent: boolean = false
|
||||
|
||||
// $: iconSize = size === 'inline' ? 'inline' : 'small'
|
||||
$: iconOnly =
|
||||
@ -97,6 +98,7 @@
|
||||
bind:this={input}
|
||||
class="button {kind} {size} jf-{justify} sh-{shape ?? 'no-shape'} bs-{borderStyle}"
|
||||
class:only-icon={iconOnly}
|
||||
class:accent
|
||||
class:highlight
|
||||
class:selected
|
||||
class:notSelected
|
||||
@ -178,7 +180,6 @@
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
padding: 0 0.625rem;
|
||||
font-weight: 500;
|
||||
min-width: 1.375rem;
|
||||
white-space: nowrap;
|
||||
color: var(--theme-caption-color);
|
||||
@ -187,6 +188,9 @@
|
||||
transition-property: border, background-color, color, box-shadow;
|
||||
transition-duration: 0.15s;
|
||||
|
||||
&.accent {
|
||||
font-weight: 500;
|
||||
}
|
||||
.btn-icon {
|
||||
color: var(--theme-content-color);
|
||||
transition: color 0.15s;
|
||||
@ -391,8 +395,8 @@
|
||||
&.list {
|
||||
padding: 0 0.625em;
|
||||
min-height: 1.75rem;
|
||||
color: var(--theme-halfcontent-color);
|
||||
background-color: var(--theme-list-button-color);
|
||||
color: var(--theme-content-color);
|
||||
background-color: var(--theme-button-enabled);
|
||||
border: 1px solid var(--theme-button-border);
|
||||
border-radius: 1.5rem;
|
||||
// transition-property: border, color, background-color;
|
||||
@ -402,8 +406,8 @@
|
||||
color: var(--theme-dark-color);
|
||||
}
|
||||
&:hover {
|
||||
color: var(--theme-halfcontent-color);
|
||||
background-color: var(--theme-list-button-color);
|
||||
color: var(--theme-caption-color);
|
||||
background-color: var(--theme-button-hovered);
|
||||
border-color: var(--theme-button-border);
|
||||
}
|
||||
&:focus {
|
||||
@ -412,6 +416,7 @@
|
||||
}
|
||||
&.primary {
|
||||
padding: 0 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--primary-button-color);
|
||||
background-color: var(--primary-button-enabled);
|
||||
border-color: var(--primary-button-border);
|
||||
|
||||
@ -182,8 +182,10 @@
|
||||
}}
|
||||
>
|
||||
{#if $$slots.header && isHeader}
|
||||
<div class="popupPanel-body__header main bottom-divider" class:max={useMaxWidth}>
|
||||
<slot name="header" />
|
||||
<div class="popupPanel-body__header-wrapper">
|
||||
<div class="popupPanel-body__header main" class:max={useMaxWidth}>
|
||||
<slot name="header" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<slot />
|
||||
|
||||
@ -195,6 +195,7 @@
|
||||
&.plain,
|
||||
&.separated {
|
||||
margin-bottom: -1px;
|
||||
height: 100%;
|
||||
}
|
||||
.plain {
|
||||
display: inline-flex;
|
||||
|
||||
@ -36,6 +36,7 @@
|
||||
export let shouldShowLabel: boolean = true
|
||||
export let size: ButtonSize | 'x-small' = 'small'
|
||||
export let kind: ButtonKind = 'link'
|
||||
export let width: string | undefined = undefined
|
||||
export let label = ui.string.DueDate
|
||||
export let detail = ui.string.NeedsToBeCompletedByThisDate
|
||||
|
||||
@ -67,6 +68,7 @@
|
||||
class:editable
|
||||
class:dateTimeButtonNoLabel={!shouldShowLabel}
|
||||
class:text-xs={size === 'x-small'}
|
||||
style:width
|
||||
on:click={(e) => {
|
||||
if (editable && !opened) {
|
||||
e.stopPropagation()
|
||||
@ -248,6 +250,7 @@
|
||||
&.list {
|
||||
padding: 0 0.625em 0 0.5rem;
|
||||
min-height: 1.75rem;
|
||||
color: var(--theme-halfcontent-color);
|
||||
background-color: var(--theme-list-button-color);
|
||||
border: 1px solid var(--theme-divider-color);
|
||||
border-radius: 3rem;
|
||||
@ -255,10 +258,14 @@
|
||||
transition-duration: 0.15s;
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-caption-color);
|
||||
background-color: var(--theme-list-button-color);
|
||||
color: var(--theme-halfcontent-color);
|
||||
background-color: var(--theme-list-button-hover);
|
||||
border-color: var(--theme-divider-color);
|
||||
}
|
||||
.btn-icon,
|
||||
&:hover .btn-icon {
|
||||
color: var(--theme-halfcontent-color) !important;
|
||||
}
|
||||
&.medium {
|
||||
height: 1.75rem;
|
||||
}
|
||||
|
||||
@ -563,7 +563,6 @@
|
||||
|
||||
&.secondary {
|
||||
padding: 0 0.625rem;
|
||||
font-weight: 500;
|
||||
color: var(--theme-caption-color);
|
||||
background-color: var(--theme-button-enabled);
|
||||
border-color: var(--theme-button-border);
|
||||
|
||||
@ -27,6 +27,7 @@
|
||||
export let editable: boolean = true
|
||||
export let shouldIgnoreOverdue: boolean = false
|
||||
export let size: ButtonSize = 'medium'
|
||||
export let width: string | undefined = undefined
|
||||
|
||||
const today = new Date(new Date(Date.now()).setHours(0, 0, 0, 0))
|
||||
$: isOverdue = value !== null && value < today.getTime()
|
||||
@ -77,6 +78,7 @@
|
||||
{#if shouldRender}
|
||||
<div
|
||||
class="clear-mins"
|
||||
style:width
|
||||
use:tooltip={formattedDate
|
||||
? {
|
||||
direction: 'top',
|
||||
@ -91,6 +93,6 @@
|
||||
}
|
||||
: undefined}
|
||||
>
|
||||
<DatePresenter {value} {editable} icon={iconModifier} {kind} {size} on:change={handleDueDateChanged} />
|
||||
<DatePresenter {value} {editable} icon={iconModifier} {kind} {size} {width} on:change={handleDueDateChanged} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
{#if value}
|
||||
<ColorPresenter value={value.color} {isHovered} {size} on:click>
|
||||
{#if size !== 'tiny'}
|
||||
<div class="flex-center h-full w-full fs-title text-sm pr-1 pl-1">{value.title}</div>
|
||||
<div class="flex-center h-full w-full text-sm pr-1 pl-1">{value.title}</div>
|
||||
{/if}
|
||||
</ColorPresenter>
|
||||
{/if}
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
Button,
|
||||
ButtonKind,
|
||||
ButtonSize,
|
||||
IconSize,
|
||||
getEventPositionElement,
|
||||
getFocusManager,
|
||||
Icon,
|
||||
@ -56,6 +57,7 @@
|
||||
export let readonly = false
|
||||
export let kind: ButtonKind = 'no-border'
|
||||
export let size: ButtonSize = 'small'
|
||||
export let avatarSize: IconSize = kind === 'secondary' ? 'small' : 'card'
|
||||
export let justify: 'left' | 'center' = 'center'
|
||||
export let width: string | undefined = undefined
|
||||
export let focusIndex = -1
|
||||
@ -145,7 +147,7 @@
|
||||
>
|
||||
{#if selected}
|
||||
{#if hideIcon || selected}
|
||||
<UserInfo value={selected} size={kind === 'link' ? 'x-small' : 'tiny'} {icon} on:accent-color />
|
||||
<UserInfo value={selected} size={avatarSize} {icon} on:accent-color />
|
||||
{:else}
|
||||
{getName(selected)}
|
||||
{/if}
|
||||
@ -153,7 +155,7 @@
|
||||
<div class="flex-presenter not-selected">
|
||||
{#if icon}
|
||||
<div class="icon" class:small-gap={size === 'inline' || size === 'small'}>
|
||||
<Icon {icon} size={kind === 'link' || kind === 'secondary' ? 'small' : size} />
|
||||
<Icon {icon} size={avatarSize} />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="label no-underline">
|
||||
|
||||
@ -45,9 +45,8 @@
|
||||
|
||||
<style lang="scss">
|
||||
.user {
|
||||
color: var(--accent-color);
|
||||
color: var(--theme-caption-color);
|
||||
margin-left: 0.5rem;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
import contact, { Employee } from '@hcengineering/contact'
|
||||
import type { Class, DocumentQuery, FindOptions, Ref } from '@hcengineering/core'
|
||||
import type { IntlString } from '@hcengineering/platform'
|
||||
import { ButtonKind, ButtonSize, LabelAndProps } from '@hcengineering/ui'
|
||||
import { ButtonKind, ButtonSize, IconSize, LabelAndProps } from '@hcengineering/ui'
|
||||
import presentation from '@hcengineering/presentation'
|
||||
import IconPerson from './icons/Person.svelte'
|
||||
import UserBox from './UserBox.svelte'
|
||||
@ -34,6 +34,7 @@
|
||||
export let titleDeselect: IntlString | undefined = undefined
|
||||
export let kind: ButtonKind = 'no-border'
|
||||
export let size: ButtonSize = 'small'
|
||||
export let avatarSize: IconSize = 'card'
|
||||
export let justify: 'left' | 'center' = 'center'
|
||||
export let width: string | undefined = undefined
|
||||
export let focusIndex = -1
|
||||
@ -54,6 +55,7 @@
|
||||
{titleDeselect}
|
||||
{kind}
|
||||
{size}
|
||||
{avatarSize}
|
||||
{justify}
|
||||
{width}
|
||||
{focusIndex}
|
||||
|
||||
@ -106,11 +106,10 @@
|
||||
align-items: baseline;
|
||||
}
|
||||
.eContentPresenterIcon {
|
||||
color: var(--dark-color);
|
||||
color: var(--theme-dark-color);
|
||||
}
|
||||
.eContentPresenterLabel {
|
||||
min-width: 0;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
color: var(--theme-caption-color);
|
||||
|
||||
@ -139,10 +138,9 @@
|
||||
.status {
|
||||
margin-left: 0.25rem;
|
||||
padding: 0.125rem 0.25rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.75rem;
|
||||
color: var(--content-color);
|
||||
background-color: var(--noborder-bg-color);
|
||||
color: var(--theme-content-color);
|
||||
background-color: var(--theme-button-enabled);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
Button,
|
||||
ButtonKind,
|
||||
ButtonSize,
|
||||
IconSize,
|
||||
getEventPositionElement,
|
||||
getFocusManager,
|
||||
Icon,
|
||||
@ -54,6 +55,7 @@
|
||||
export let readonly = false
|
||||
export let kind: ButtonKind = 'no-border'
|
||||
export let size: ButtonSize = 'small'
|
||||
export let avatarSize: IconSize = kind === 'link' ? 'x-small' : 'tiny'
|
||||
export let justify: 'left' | 'center' = 'center'
|
||||
export let width: string | undefined = undefined
|
||||
export let focusIndex = -1
|
||||
@ -151,7 +153,7 @@
|
||||
>
|
||||
{#if selected}
|
||||
{#if hideIcon || selected}
|
||||
<UserInfo value={selected} size={kind === 'link' ? 'x-small' : 'tiny'} {icon} />
|
||||
<UserInfo value={selected} size={avatarSize} {icon} />
|
||||
{:else}
|
||||
{getName(selected)}
|
||||
{/if}
|
||||
@ -159,7 +161,7 @@
|
||||
<div class="flex-presenter not-selected">
|
||||
{#if icon}
|
||||
<div class="icon" class:small-gap={size === 'inline' || size === 'small'}>
|
||||
<Icon {icon} size={'small'} />
|
||||
<Icon {icon} size={avatarSize} />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="label no-underline">
|
||||
|
||||
@ -525,8 +525,8 @@
|
||||
{readonly}
|
||||
/>
|
||||
|
||||
<div class="tab-content">
|
||||
<div class="divider" />
|
||||
<div class="doc-divider" />
|
||||
<div class="popupPanel-body__aside-grid">
|
||||
<span class="label labelTop">
|
||||
<Label label={document.string.Labels} />
|
||||
</span>
|
||||
@ -552,28 +552,12 @@
|
||||
line-height: 150%;
|
||||
// overflow: auto;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.5fr;
|
||||
grid-auto-flow: row;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
height: min-content;
|
||||
|
||||
.divider {
|
||||
grid-column: 1 / 3;
|
||||
height: 1px;
|
||||
background-color: var(--divider-color);
|
||||
}
|
||||
.labelTop {
|
||||
align-self: start;
|
||||
}
|
||||
.doc-divider {
|
||||
flex-shrink: 0;
|
||||
margin: 0 0 0.5rem;
|
||||
height: 1px;
|
||||
background-color: var(--theme-divider-color);
|
||||
}
|
||||
|
||||
.emphasized {
|
||||
padding: 1rem;
|
||||
background-color: var(--body-color);
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
import { Doc, Ref } from '@hcengineering/core'
|
||||
import { getEmbeddedLabel } from '@hcengineering/platform'
|
||||
import presentation from '@hcengineering/presentation'
|
||||
import { Button, Icon, IconAdd, Label, showPopup } from '@hcengineering/ui'
|
||||
import { Button, Icon, IconAdd, Label, showPopup, Scroller } from '@hcengineering/ui'
|
||||
import view, { BuildModelKey } from '@hcengineering/view'
|
||||
import { Table } from '@hcengineering/view-resources'
|
||||
import recruit from '../plugin'
|
||||
@ -57,12 +57,14 @@
|
||||
<Button id="appls.add" icon={IconAdd} kind={'transparent'} shape={'circle'} on:click={createApp} />
|
||||
</div>
|
||||
{#if (vacancies ?? 0) > 0}
|
||||
<Table
|
||||
_class={recruit.class.Vacancy}
|
||||
{config}
|
||||
query={{ company: objectId }}
|
||||
loadingProps={{ length: vacancies ?? 0 }}
|
||||
/>
|
||||
<Scroller horizontal>
|
||||
<Table
|
||||
_class={recruit.class.Vacancy}
|
||||
{config}
|
||||
query={{ company: objectId }}
|
||||
loadingProps={{ length: vacancies ?? 0 }}
|
||||
/>
|
||||
</Scroller>
|
||||
{:else}
|
||||
<div class="antiSection-empty solid flex-col-center mt-3">
|
||||
<div class="caption-color">
|
||||
|
||||
@ -90,7 +90,6 @@
|
||||
min-width: 0;
|
||||
min-height: 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
font-size: 0.75rem;
|
||||
color: var(--theme-content-color);
|
||||
border-radius: 0.25rem;
|
||||
@ -102,7 +101,6 @@
|
||||
.tag-item-inline {
|
||||
position: relative;
|
||||
padding-left: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--theme-content-color);
|
||||
|
||||
&::before {
|
||||
|
||||
@ -42,18 +42,18 @@
|
||||
}}
|
||||
>
|
||||
<div class="color" style:background-color={getPlatformColor(value.color ?? 0)} />
|
||||
<span class="overflow-label ml-1 text-sm caption-color max-w-40">{value.title}</span>
|
||||
<span class="label overflow-label ml-1 text-sm caption-color max-w-40">{value.title}</span>
|
||||
</button>
|
||||
{:else if kind === 'list'}
|
||||
<div
|
||||
class="list-container"
|
||||
class="listitems-container"
|
||||
style:padding-right={isEditable ? '0' : '0.5rem'}
|
||||
use:resizeObserver={(element) => {
|
||||
realWidth = element.clientWidth
|
||||
}}
|
||||
>
|
||||
<div class="color" style:background-color={getPlatformColor(value.color ?? 0)} />
|
||||
<span class="overflow-label ml-1-5 caption-color max-w-40">
|
||||
<span class="label overflow-label ml-1-5 max-w-40">
|
||||
{value.title}
|
||||
</span>
|
||||
{#if isEditable}
|
||||
@ -66,7 +66,7 @@
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.list-container {
|
||||
.listitems-container {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -75,21 +75,28 @@
|
||||
height: 1.75rem;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
background-color: var(--theme-list-button-color);
|
||||
background-color: var(--theme-button-enabled);
|
||||
border: 1px solid var(--theme-button-border);
|
||||
border-radius: 1.5rem;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-button-hovered);
|
||||
}
|
||||
.label {
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
.btn-close {
|
||||
flex-shrink: 0;
|
||||
margin-left: 0.125rem;
|
||||
padding: 0 0.25rem 0 0.125rem;
|
||||
height: 1.75rem;
|
||||
color: var(--content-color);
|
||||
color: var(--theme-content-color);
|
||||
border-left: 1px solid transparent;
|
||||
|
||||
&:hover {
|
||||
color: var(--caption-color);
|
||||
border-left-color: var(--divider-color);
|
||||
color: var(--theme-caption-color);
|
||||
border-left-color: var(--theme-divider-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -102,7 +109,6 @@
|
||||
padding: 0 0.375rem;
|
||||
height: 1.5rem;
|
||||
min-width: 1.5rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.75rem;
|
||||
line-height: 0.75rem;
|
||||
white-space: nowrap;
|
||||
|
||||
@ -60,32 +60,32 @@
|
||||
|
||||
<style lang="scss">
|
||||
.step-container {
|
||||
margin: 0.125rem 0.125rem 0 0;
|
||||
margin: 0.375rem 0.375rem 0 0;
|
||||
}
|
||||
.tag-button {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
padding: 0 0.5rem;
|
||||
height: 1.5rem;
|
||||
padding: 0 0.625rem 0 0.5rem;
|
||||
height: 2rem;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
color: var(--content-color);
|
||||
color: var(--theme-content-color);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.75rem;
|
||||
border-radius: 1rem;
|
||||
|
||||
.icon {
|
||||
flex-shrink: 0;
|
||||
width: 0.625rem;
|
||||
height: 0.625rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
.label {
|
||||
margin-left: 0.125rem;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--caption-color);
|
||||
border-color: var(--divider-color);
|
||||
color: var(--theme-caption-color);
|
||||
border-color: var(--theme-divider-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -42,8 +42,8 @@
|
||||
padding: 0.25rem 0.75rem;
|
||||
width: fit-content;
|
||||
font-weight: 500;
|
||||
color: var(--caption-color);
|
||||
background-color: var(--divider-color);
|
||||
color: var(--theme-caption-color);
|
||||
background-color: var(--theme-button-enabled);
|
||||
border-radius: 1.25rem;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
@ -127,7 +127,7 @@
|
||||
on:click={handleComponentEditorOpened}
|
||||
>
|
||||
<svelte:fragment slot="content">
|
||||
<span class="label {enlargedText ? 'ml-1 text-base fs-bold' : 'text-md'} overflow-label pointer-events-none">
|
||||
<span class="label {enlargedText ? 'ml-1 text-base' : 'text-md'} overflow-label pointer-events-none">
|
||||
<Label label={getEmbeddedLabel(componentText)} />
|
||||
</span>
|
||||
</svelte:fragment>
|
||||
|
||||
@ -18,14 +18,15 @@
|
||||
import { AttachedData, Ref } from '@hcengineering/core'
|
||||
import { getClient } from '@hcengineering/presentation'
|
||||
import { Issue, IssueDraft, IssueTemplateData } from '@hcengineering/tracker'
|
||||
import { ButtonKind, ButtonSize, TooltipAlignment } from '@hcengineering/ui'
|
||||
import { ButtonKind, ButtonSize, IconSize, TooltipAlignment } from '@hcengineering/ui'
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import tracker from '../../plugin'
|
||||
import { getPreviousAssignees } from '../../utils'
|
||||
|
||||
export let value: Issue | AttachedData<Issue> | IssueTemplateData | IssueDraft
|
||||
export let size: ButtonSize = 'large'
|
||||
export let kind: ButtonKind = 'link'
|
||||
export let size: ButtonSize = 'large'
|
||||
export let avatarSize: IconSize = 'card'
|
||||
export let tooltipAlignment: TooltipAlignment | undefined = undefined
|
||||
export let width: string = '100%'
|
||||
export let focusIndex: number | undefined = undefined
|
||||
@ -97,6 +98,7 @@
|
||||
titleDeselect={tracker.string.Unassigned}
|
||||
{size}
|
||||
{kind}
|
||||
{avatarSize}
|
||||
{width}
|
||||
showNavigate={false}
|
||||
justify={'left'}
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
import { DueDatePresenter } from '@hcengineering/ui'
|
||||
|
||||
export let value: Issue
|
||||
export let width: string | undefined = undefined
|
||||
|
||||
const client = getClient()
|
||||
|
||||
@ -39,5 +40,5 @@
|
||||
</script>
|
||||
|
||||
{#if value}
|
||||
<DueDatePresenter kind={'link'} value={value.dueDate} editable onChange={(e) => handleDueDateChanged(e)} />
|
||||
<DueDatePresenter kind={'link'} value={value.dueDate} {width} editable onChange={(e) => handleDueDateChanged(e)} />
|
||||
{/if}
|
||||
|
||||
@ -87,7 +87,7 @@
|
||||
</script>
|
||||
|
||||
<div class="flex-row mt-4 mb-4">
|
||||
<Label label={tracker.string.StatusHistory} />:
|
||||
<span class="content-dark-color"><Label label={tracker.string.StatusHistory} />:</span>
|
||||
<table class="ml-2">
|
||||
{#each displaySt as st}
|
||||
<tr>
|
||||
@ -95,7 +95,7 @@
|
||||
<StatusPresenter value={st.status} />
|
||||
</td>
|
||||
<td>
|
||||
<div class="ml-2 mr-2">
|
||||
<div class="ml-8 mr-2">
|
||||
<Duration value={st.duration} />
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@ -89,9 +89,7 @@
|
||||
{#if issuePriorities[value.priority]?.icon}<Icon icon={issuePriorities[value.priority]?.icon} {size} />{/if}
|
||||
</div>
|
||||
{#if shouldShowLabel}
|
||||
<span
|
||||
class="{kind === 'list' ? 'ml-2 text-md' : 'ml-3 text-base'} overflow-label disabled fs-bold content-color"
|
||||
>
|
||||
<span class="{kind === 'list' ? 'ml-2 text-md' : 'ml-3 text-base'} overflow-label disabled content-color">
|
||||
<Label label={issuePriorities[value.priority]?.label} />
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
@ -120,9 +120,7 @@
|
||||
{#if selectedStatus}<IssueStatusIcon value={selectedStatus} size={kind === 'list' ? 'small' : 'medium'} />{/if}
|
||||
</div>
|
||||
{#if selectedStatusLabel}
|
||||
<span
|
||||
class="{kind === 'list' ? 'ml-1 text-md' : 'ml-2 text-base'} overflow-label disabled fs-bold content-color"
|
||||
>
|
||||
<span class="{kind === 'list' ? 'ml-1 text-md' : 'ml-2 text-base'} overflow-label disabled content-color">
|
||||
{selectedStatusLabel}
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
@ -93,7 +93,7 @@
|
||||
$: account = $employeeAccountByIdStore.get(issue.createdBy as Ref<EmployeeAccount>)
|
||||
</script>
|
||||
|
||||
<div class="content">
|
||||
<div class="popupPanel-body__aside-grid">
|
||||
{#if issue.template?.template}
|
||||
<span class="label">
|
||||
<Label label={tracker.string.IssueTemplate} />
|
||||
@ -118,7 +118,7 @@
|
||||
<Label label={tracker.string.Status} />
|
||||
</span>
|
||||
|
||||
<StatusEditor value={issue} shouldShowLabel />
|
||||
<StatusEditor value={issue} size={'medium'} shouldShowLabel />
|
||||
|
||||
{#if issue.blockedBy?.length}
|
||||
<span class="labelTop">
|
||||
@ -142,7 +142,7 @@
|
||||
<span class="label">
|
||||
<Label label={tracker.string.Priority} />
|
||||
</span>
|
||||
<PriorityEditor value={issue} shouldShowLabel />
|
||||
<PriorityEditor value={issue} size={'medium'} shouldShowLabel />
|
||||
|
||||
<span class="label">
|
||||
<Label label={core.string.CreatedBy} />
|
||||
@ -151,7 +151,8 @@
|
||||
value={employee?._id}
|
||||
label={core.string.CreatedBy}
|
||||
kind={'link'}
|
||||
size={'large'}
|
||||
size={'medium'}
|
||||
avatarSize={'card'}
|
||||
width={'100%'}
|
||||
showNavigate={false}
|
||||
readonly
|
||||
@ -160,7 +161,7 @@
|
||||
<span class="label">
|
||||
<Label label={tracker.string.Assignee} />
|
||||
</span>
|
||||
<AssigneeEditor value={issue} />
|
||||
<AssigneeEditor value={issue} size={'medium'} avatarSize={'card'} />
|
||||
|
||||
<span class="labelTop">
|
||||
<Label label={tracker.string.Labels} />
|
||||
@ -172,12 +173,12 @@
|
||||
<span class="label">
|
||||
<Label label={tracker.string.Component} />
|
||||
</span>
|
||||
<ComponentEditor value={issue} />
|
||||
<ComponentEditor value={issue} size={'medium'} />
|
||||
|
||||
<span class="label">
|
||||
<Label label={tracker.string.Sprint} />
|
||||
</span>
|
||||
<SprintEditor value={issue} />
|
||||
<SprintEditor value={issue} size={'medium'} />
|
||||
|
||||
{#if issue.dueDate !== null}
|
||||
<div class="divider" />
|
||||
@ -185,13 +186,13 @@
|
||||
<span class="label">
|
||||
<Label label={tracker.string.DueDate} />
|
||||
</span>
|
||||
<DueDateEditor value={issue} />
|
||||
<DueDateEditor value={issue} width={'100%'} />
|
||||
{/if}
|
||||
|
||||
{#if keys.length > 0}
|
||||
<div class="divider" />
|
||||
{#each keys as key (typeof key === 'string' ? key : key.key)}
|
||||
<AttributeBarEditor {key} _class={issue._class} object={issue} showHeader={true} size={'large'} />
|
||||
<AttributeBarEditor {key} _class={issue._class} object={issue} showHeader={true} size={'medium'} />
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
@ -203,32 +204,8 @@
|
||||
_class={mixin._id}
|
||||
object={hierarchy.as(issue, mixin._id)}
|
||||
showHeader={true}
|
||||
size={'large'}
|
||||
size={'medium'}
|
||||
/>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.5fr;
|
||||
grid-auto-flow: row;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
height: min-content;
|
||||
}
|
||||
|
||||
.divider {
|
||||
grid-column: 1 / 3;
|
||||
height: 1px;
|
||||
background-color: var(--divider-color);
|
||||
}
|
||||
.labelTop {
|
||||
align-self: start;
|
||||
margin-top: 0.385rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -267,13 +267,12 @@
|
||||
/>
|
||||
<Button
|
||||
kind={'transparent'}
|
||||
shape={'round'}
|
||||
selected={showAllMixins}
|
||||
on:click={() => {
|
||||
showAllMixins = !showAllMixins
|
||||
}}
|
||||
>
|
||||
<svelte:fragment slot="content">
|
||||
<svelte:fragment slot="icon">
|
||||
<IconMixin size={'small'} />
|
||||
</svelte:fragment>
|
||||
</Button>
|
||||
@ -285,7 +284,9 @@
|
||||
{/if}
|
||||
|
||||
<div class="divider" />
|
||||
<IssueStatusActivity {issue} />
|
||||
<div class="issue-stats">
|
||||
<IssueStatusActivity {issue} />
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</Panel>
|
||||
{/if}
|
||||
@ -293,10 +294,14 @@
|
||||
<style lang="scss">
|
||||
.divider {
|
||||
flex-shrink: 0;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
grid-column: 1 / 3;
|
||||
margin: 0.5rem 0;
|
||||
height: 1px;
|
||||
background-color: var(--divider-color);
|
||||
background-color: var(--theme-divider-color);
|
||||
}
|
||||
.issue-stats {
|
||||
flex-shrink: 0;
|
||||
margin: 0 2rem;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -27,6 +27,7 @@
|
||||
export let object: Issue
|
||||
export let value: number
|
||||
export let kind: 'no-border' | 'link' = 'no-border'
|
||||
export let size: 'small' | 'medium' | 'large' = 'large'
|
||||
export let currentProject: Project | undefined
|
||||
|
||||
const spaceQuery = createQuery()
|
||||
@ -66,7 +67,7 @@
|
||||
|
||||
{#if kind === 'link'}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div id="ReportedTimeEditor" class="link-container flex-between" on:click={showReports}>
|
||||
<div id="ReportedTimeEditor" class="link-container {size} flex-between" on:click={showReports}>
|
||||
{#if value !== undefined}
|
||||
<span class="overflow-label">
|
||||
<TimePresenter {value} />
|
||||
@ -98,12 +99,20 @@
|
||||
align-items: center;
|
||||
padding: 0 0.875rem;
|
||||
width: 100%;
|
||||
height: 2.25rem;
|
||||
color: var(--theme-caption-color);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
|
||||
&.small {
|
||||
height: 1.5rem;
|
||||
}
|
||||
&.medium {
|
||||
height: 2rem;
|
||||
}
|
||||
&.large {
|
||||
height: 2.25rem;
|
||||
}
|
||||
.add-action {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@ -34,9 +34,8 @@
|
||||
.scrumLabel {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
color: var(--caption-color);
|
||||
color: var(--theme-caption-color);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@ -33,9 +33,8 @@
|
||||
.scrumRecordLabel {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
color: var(--caption-color);
|
||||
color: var(--theme-caption-color);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@ -149,7 +149,7 @@
|
||||
on:click={handleSprintEditorOpened}
|
||||
>
|
||||
<svelte:fragment slot="content">
|
||||
<span class="label {enlargedText ? 'text-base' : 'text-md'} fs-bold overflow-label pointer-events-none">
|
||||
<span class="label {enlargedText ? 'text-base' : 'text-md'} overflow-label pointer-events-none">
|
||||
<Label label={getEmbeddedLabel(sprintText)} />
|
||||
</span>
|
||||
</svelte:fragment>
|
||||
|
||||
@ -176,27 +176,26 @@
|
||||
<style lang="scss">
|
||||
.row {
|
||||
position: relative;
|
||||
border-bottom: 1px solid var(--divider-color);
|
||||
border-bottom: 1px solid var(--theme-divider-color);
|
||||
|
||||
.text {
|
||||
font-weight: 500;
|
||||
color: var(--caption-color);
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
|
||||
.issuePresenter {
|
||||
flex-shrink: 0;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
font-weight: 500;
|
||||
color: var(--content-color);
|
||||
color: var(--theme-content-color);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--caption-color);
|
||||
color: var(--theme-caption-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
&:active {
|
||||
color: var(--accent-color);
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -232,7 +231,7 @@
|
||||
&.is-dragging::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background-color: var(--divider-color);
|
||||
background-color: var(--theme-divider-color);
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@ -292,9 +292,6 @@
|
||||
{#if template && currentProject}
|
||||
<TemplateControlPanel issue={template} />
|
||||
{/if}
|
||||
|
||||
<div class="divider" />
|
||||
<!-- <IssueStatusActivity issue={template} /> -->
|
||||
</svelte:fragment>
|
||||
</Panel>
|
||||
{/if}
|
||||
@ -318,13 +315,6 @@
|
||||
color: var(--dark-color);
|
||||
}
|
||||
}
|
||||
.divider {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
grid-column: 1 / 3;
|
||||
height: 1px;
|
||||
background-color: var(--divider-color);
|
||||
}
|
||||
|
||||
.tool {
|
||||
align-self: start;
|
||||
|
||||
@ -171,27 +171,26 @@
|
||||
<style lang="scss">
|
||||
.row {
|
||||
position: relative;
|
||||
border-bottom: 1px solid var(--divider-color);
|
||||
border-bottom: 1px solid var(--theme-divider-color);
|
||||
|
||||
.text {
|
||||
font-weight: 500;
|
||||
color: var(--caption-color);
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
|
||||
.issuePresenter {
|
||||
flex-shrink: 0;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
font-weight: 500;
|
||||
color: var(--content-color);
|
||||
color: var(--theme-content-color);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--caption-color);
|
||||
color: var(--theme-caption-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
&:active {
|
||||
color: var(--accent-color);
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -227,7 +226,7 @@
|
||||
&.is-dragging::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background-color: var(--divider-color);
|
||||
background-color: var(--theme-divider-color);
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@ -59,26 +59,25 @@
|
||||
flex-shrink: 0;
|
||||
max-width: 15rem;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--content-color);
|
||||
color: var(--theme-content-color);
|
||||
|
||||
&:not(.noPointer) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.noUnderline {
|
||||
font-weight: 500;
|
||||
color: var(--caption-color);
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
|
||||
&:not(.noUnderline) {
|
||||
&:hover {
|
||||
color: var(--caption-color);
|
||||
color: var(--theme-caption-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--accent-color);
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -64,16 +64,16 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="content">
|
||||
<div class="popupPanel-body__aside-grid">
|
||||
<span class="label">
|
||||
<Label label={tracker.string.Priority} />
|
||||
</span>
|
||||
<PriorityEditor value={issue} shouldShowLabel />
|
||||
<PriorityEditor value={issue} size={'medium'} shouldShowLabel />
|
||||
|
||||
<span class="label">
|
||||
<Label label={tracker.string.Assignee} />
|
||||
</span>
|
||||
<AssigneeEditor value={issue} />
|
||||
<AssigneeEditor value={issue} size={'medium'} />
|
||||
|
||||
<span class="labelTop">
|
||||
<Label label={tracker.string.Labels} />
|
||||
@ -82,7 +82,10 @@
|
||||
<Component
|
||||
is={tags.component.TagsDropdownEditor}
|
||||
props={{
|
||||
kind: 'no-border',
|
||||
kind: 'link',
|
||||
size: 'medium',
|
||||
width: '100%',
|
||||
justify: 'left',
|
||||
items: labelRefs,
|
||||
key,
|
||||
targetClass: tracker.class.Issue,
|
||||
@ -99,43 +102,19 @@
|
||||
<span class="label">
|
||||
<Label label={tracker.string.Component} />
|
||||
</span>
|
||||
<ComponentEditor value={issue} />
|
||||
<ComponentEditor value={issue} size={'medium'} />
|
||||
|
||||
{#if issue.sprint}
|
||||
<span class="label">
|
||||
<Label label={tracker.string.Sprint} />
|
||||
</span>
|
||||
<SprintEditor value={issue} />
|
||||
<SprintEditor value={issue} size={'medium'} />
|
||||
{/if}
|
||||
|
||||
{#if keys.length > 0}
|
||||
<div class="divider" />
|
||||
{#each keys as key (typeof key === 'string' ? key : key.key)}
|
||||
<AttributeBarEditor {key} _class={issue._class} object={issue} showHeader={true} />
|
||||
<AttributeBarEditor {key} _class={issue._class} object={issue} size={'medium'} showHeader={true} />
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.5fr;
|
||||
grid-auto-flow: row;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
height: min-content;
|
||||
}
|
||||
|
||||
.divider {
|
||||
grid-column: 1 / 3;
|
||||
height: 1px;
|
||||
background-color: var(--divider-color);
|
||||
}
|
||||
.labelTop {
|
||||
align-self: start;
|
||||
margin-top: 0.385rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -35,8 +35,7 @@
|
||||
width: 1.6rem;
|
||||
white-space: nowrap;
|
||||
text-transform: capitalize;
|
||||
font-weight: 500;
|
||||
color: var(--caption-color);
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -76,7 +76,7 @@
|
||||
<Button
|
||||
icon={setting.icon.Setting}
|
||||
kind={'link'}
|
||||
size={'large'}
|
||||
size={'medium'}
|
||||
showTooltip={{ label: setting.string.ClassSetting }}
|
||||
on:click={(ev) => {
|
||||
ev.stopPropagation()
|
||||
@ -104,17 +104,19 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0.25rem -0.5rem 0.75rem;
|
||||
padding: 0 0 0 0.5rem;
|
||||
padding: 0 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--theme-dark-color);
|
||||
border: 1px solid var(--theme-divider-color);
|
||||
border-radius: 0.25rem;
|
||||
border-top: 1px solid var(--theme-divider-color);
|
||||
border-bottom: 1px solid var(--theme-divider-color);
|
||||
cursor: pointer;
|
||||
transition-property: color, background-color, border-color;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: var(--timing-main);
|
||||
|
||||
&:first-child {
|
||||
border-top-color: transparent;
|
||||
}
|
||||
.icon-arrow {
|
||||
margin-left: 0.5rem;
|
||||
width: 0.325rem;
|
||||
|
||||
@ -300,8 +300,8 @@
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="attributes" let:direction={dir}>
|
||||
<div class="flex flex-reverse flex-no-shrink clear-mins">
|
||||
<svelte:fragment slot="aside-tabs">
|
||||
<div class="flex-row-center flex-reverse flex-grow">
|
||||
<Button
|
||||
kind={'transparent'}
|
||||
shape={'round'}
|
||||
@ -310,11 +310,13 @@
|
||||
showAllMixins = !showAllMixins
|
||||
}}
|
||||
>
|
||||
<svelte:fragment slot="content">
|
||||
<svelte:fragment slot="icon">
|
||||
<IconMixin size={'small'} />
|
||||
</svelte:fragment>
|
||||
</Button>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="attributes" let:direction={dir}>
|
||||
{#if !headerLoading}
|
||||
{#if headerEditor !== undefined}
|
||||
<Component
|
||||
@ -338,7 +340,7 @@
|
||||
|
||||
<svelte:fragment slot="subheader">
|
||||
{#if mainEditor && mainEditor.pinned}
|
||||
<div class="flex-col flex-grow step-tb-6">
|
||||
<div class="flex-col flex-grow my-4 step-tb-6">
|
||||
<Component is={mainEditor.editor} props={{ object }} on:open={handleOpen} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@ -82,11 +82,10 @@
|
||||
|
||||
border-radius: 8px;
|
||||
|
||||
font-weight: 500;
|
||||
font-size: 10px;
|
||||
|
||||
text-transform: uppercase;
|
||||
color: #ffffff;
|
||||
color: var(--theme-caption-color);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user