mirror of
https://github.com/hcengineering/platform.git
synced 2024-11-26 04:23:58 +03:00
Remove inline in Inbox. Panel, presenters fixes. (#3665)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
parent
d7fa8c3800
commit
47e39eae75
@ -66,7 +66,7 @@
|
|||||||
{#if editor}
|
{#if editor}
|
||||||
{#if showHeader}
|
{#if showHeader}
|
||||||
<span
|
<span
|
||||||
class="label"
|
class="labelOnPanel"
|
||||||
use:tooltip={{
|
use:tooltip={{
|
||||||
component: Label,
|
component: Label,
|
||||||
props: { label: attribute.label }
|
props: { label: attribute.label }
|
||||||
|
@ -23,6 +23,7 @@
|
|||||||
export let colorInherit: boolean = false
|
export let colorInherit: boolean = false
|
||||||
export let shrink: number = 1
|
export let shrink: number = 1
|
||||||
export let accent: boolean = false
|
export let accent: boolean = false
|
||||||
|
export let noOverflow: boolean = false
|
||||||
|
|
||||||
function clickHandler (e: MouseEvent) {
|
function clickHandler (e: MouseEvent) {
|
||||||
if (disabled) return
|
if (disabled) return
|
||||||
@ -54,6 +55,7 @@
|
|||||||
<span
|
<span
|
||||||
class:cursor-pointer={!disabled}
|
class:cursor-pointer={!disabled}
|
||||||
class:noUnderline
|
class:noUnderline
|
||||||
|
class:noOverflow
|
||||||
class:inline
|
class:inline
|
||||||
class:colorInherit
|
class:colorInherit
|
||||||
class:fs-bold={accent}
|
class:fs-bold={accent}
|
||||||
@ -66,6 +68,7 @@
|
|||||||
<a
|
<a
|
||||||
{href}
|
{href}
|
||||||
class:noUnderline
|
class:noUnderline
|
||||||
|
class:noOverflow
|
||||||
class:inline
|
class:inline
|
||||||
class:colorInherit
|
class:colorInherit
|
||||||
class:fs-bold={accent}
|
class:fs-bold={accent}
|
||||||
@ -82,12 +85,14 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
// overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
word-break: break-all;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
font-weight: inherit;
|
font-weight: inherit;
|
||||||
|
|
||||||
|
&:not(.noOverflow) {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
word-break: break-all;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
&:not(.colorInherit) {
|
&:not(.colorInherit) {
|
||||||
color: var(--theme-content-color);
|
color: var(--theme-content-color);
|
||||||
}
|
}
|
||||||
|
@ -299,11 +299,11 @@
|
|||||||
height: 1px;
|
height: 1px;
|
||||||
background-color: var(--theme-divider-color);
|
background-color: var(--theme-divider-color);
|
||||||
}
|
}
|
||||||
.label,
|
.labelOnPanel,
|
||||||
.labelTop { color: var(--theme-dark-color); }
|
.labelTop { color: var(--theme-dark-color); }
|
||||||
.labelTop {
|
.labelTop {
|
||||||
align-self: start;
|
align-self: start;
|
||||||
margin-top: 0.625rem;
|
margin-top: .4rem;
|
||||||
}
|
}
|
||||||
.textPadding { margin-left: .875rem; }
|
.textPadding { margin-left: .875rem; }
|
||||||
}
|
}
|
||||||
|
@ -24,21 +24,22 @@
|
|||||||
export let inline: boolean = false
|
export let inline: boolean = false
|
||||||
export let disabled: boolean = false
|
export let disabled: boolean = false
|
||||||
export let accent: boolean = false
|
export let accent: boolean = false
|
||||||
|
export let noUnderline: boolean = false
|
||||||
export let maxWidth = ''
|
export let maxWidth = ''
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if value}
|
{#if value}
|
||||||
<DocNavLink {disabled} {inline} object={value} {accent} noUnderline={disabled}>
|
<DocNavLink {disabled} {inline} object={value} {accent} {noUnderline}>
|
||||||
{#if inline}
|
{#if inline}
|
||||||
<span class="antiMention" use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
|
<span class="antiMention" use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
|
||||||
@{value.name}
|
@{value.name}
|
||||||
</span>
|
</span>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="flex-presenter" style:max-width={maxWidth} use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
|
<div class="flex-presenter" style:max-width={maxWidth} use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
|
||||||
{#if !inline}
|
<div class="icon circle"><Company size={'small'} /></div>
|
||||||
<div class="icon circle"><Company size={'small'} /></div>
|
<span class="overflow-label label" class:no-underline={noUnderline || disabled} class:fs-bold={accent}
|
||||||
{/if}
|
>{value.name}</span
|
||||||
<span class="overflow-label label" class:no-underline={disabled} class:fs-bold={accent}>{value.name}</span>
|
>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</DocNavLink>
|
</DocNavLink>
|
||||||
|
@ -36,6 +36,7 @@
|
|||||||
export let shouldShowName = true
|
export let shouldShowName = true
|
||||||
export let element: HTMLElement | undefined = undefined
|
export let element: HTMLElement | undefined = undefined
|
||||||
export let shouldShowPlaceholder = false
|
export let shouldShowPlaceholder = false
|
||||||
|
export let noUnderline: boolean = false
|
||||||
export let defaultName: IntlString | undefined = undefined
|
export let defaultName: IntlString | undefined = undefined
|
||||||
export let statusLabel: IntlString | undefined = undefined
|
export let statusLabel: IntlString | undefined = undefined
|
||||||
export let avatarSize: IconSize = 'x-small'
|
export let avatarSize: IconSize = 'x-small'
|
||||||
@ -68,7 +69,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if value}
|
{#if value}
|
||||||
<DocNavLink object={value} onClick={onEdit} {disabled} noUnderline={disabled} {inline} {colorInherit} {accent}>
|
<DocNavLink object={value} onClick={onEdit} {disabled} {noUnderline} {inline} {colorInherit} {accent} noOverflow>
|
||||||
{#if inline}
|
{#if inline}
|
||||||
<span class="antiMention" use:tooltip={disabled ? undefined : showTooltip}>
|
<span class="antiMention" use:tooltip={disabled ? undefined : showTooltip}>
|
||||||
@{getName(client.getHierarchy(), value)}
|
@{getName(client.getHierarchy(), value)}
|
||||||
@ -90,7 +91,7 @@
|
|||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
{#if shouldShowName}
|
{#if shouldShowName}
|
||||||
<span class="eContentPresenterLabel" class:colorInherit class:fs-bold={accent}
|
<span class="eContentPresenterLabel overflow-label" class:colorInherit class:fs-bold={accent}
|
||||||
>{getName(client.getHierarchy(), value)}</span
|
>{getName(client.getHierarchy(), value)}</span
|
||||||
>
|
>
|
||||||
{/if}
|
{/if}
|
||||||
@ -132,6 +133,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
|
min-width: 0;
|
||||||
|
|
||||||
.eContentPresenterIcon {
|
.eContentPresenterIcon {
|
||||||
color: var(--theme-dark-color);
|
color: var(--theme-dark-color);
|
||||||
@ -141,13 +143,13 @@
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
color: var(--theme-caption-color);
|
color: var(--theme-caption-color);
|
||||||
|
|
||||||
overflow: hidden;
|
// overflow: hidden;
|
||||||
display: -webkit-box;
|
// display: -webkit-box;
|
||||||
/* autoprefixer: ignore next */
|
// /* autoprefixer: ignore next */
|
||||||
-webkit-box-orient: vertical;
|
// -webkit-box-orient: vertical;
|
||||||
-webkit-line-clamp: 2;
|
// -webkit-line-clamp: 2;
|
||||||
line-clamp: 2;
|
// line-clamp: 2;
|
||||||
user-select: none;
|
// user-select: none;
|
||||||
|
|
||||||
&.colorInherit {
|
&.colorInherit {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
@ -29,6 +29,7 @@
|
|||||||
export let shouldShowAvatar = true
|
export let shouldShowAvatar = true
|
||||||
export let shouldShowName = true
|
export let shouldShowName = true
|
||||||
export let shouldShowPlaceholder = false
|
export let shouldShowPlaceholder = false
|
||||||
|
export let noUnderline = false
|
||||||
export let defaultName: IntlString | undefined = ui.string.NotSelected
|
export let defaultName: IntlString | undefined = ui.string.NotSelected
|
||||||
export let statusLabel: IntlString | undefined = undefined
|
export let statusLabel: IntlString | undefined = undefined
|
||||||
export let tooltipLabels: PersonLabelTooltip | undefined = undefined
|
export let tooltipLabels: PersonLabelTooltip | undefined = undefined
|
||||||
@ -88,6 +89,7 @@
|
|||||||
{shouldShowAvatar}
|
{shouldShowAvatar}
|
||||||
{shouldShowName}
|
{shouldShowName}
|
||||||
{shouldShowPlaceholder}
|
{shouldShowPlaceholder}
|
||||||
|
{noUnderline}
|
||||||
{enlargedText}
|
{enlargedText}
|
||||||
{statusLabel}
|
{statusLabel}
|
||||||
{colorInherit}
|
{colorInherit}
|
||||||
|
@ -25,20 +25,25 @@
|
|||||||
export let inline: boolean = false
|
export let inline: boolean = false
|
||||||
export let disabled: boolean = false
|
export let disabled: boolean = false
|
||||||
export let accent: boolean = false
|
export let accent: boolean = false
|
||||||
|
export let noUnderline: boolean = false
|
||||||
|
export let maxWidth = ''
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if value}
|
{#if value}
|
||||||
<DocNavLink {disabled} object={value} {inline} {accent} noUnderline={disabled} component={document.component.EditDoc}>
|
<DocNavLink {disabled} object={value} {inline} {accent} {noUnderline} component={document.component.EditDoc}>
|
||||||
{#if inline}
|
{#if inline}
|
||||||
<span class="antiMention" use:tooltip={{ label: document.string.Document }}>
|
<span class="antiMention" use:tooltip={{ label: document.string.Document }}>
|
||||||
@{value.name}-{value.version}
|
@{value.name}-{value.version}
|
||||||
</span>
|
</span>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="icon">
|
<div class="flex-presenter" style:max-width={maxWidth} use:tooltip={{ label: document.string.Document }}>
|
||||||
<Icon icon={document.icon.Document} size={'small'} />
|
<div class="icon">
|
||||||
|
<Icon icon={document.icon.Document} size={'small'} />
|
||||||
|
</div>
|
||||||
|
<span class="label nowrap" class:no-underline={noUnderline || disabled} class:fs-bold={accent}>
|
||||||
|
{value.name}-{value.version}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>{value.name}-{value.version}</span
|
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
</DocNavLink>
|
</DocNavLink>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -535,7 +535,7 @@
|
|||||||
|
|
||||||
<div class="doc-divider" />
|
<div class="doc-divider" />
|
||||||
<div class="popupPanel-body__aside-grid">
|
<div class="popupPanel-body__aside-grid">
|
||||||
<span class="label labelTop">
|
<span class="labelTop">
|
||||||
<Label label={document.string.Labels} />
|
<Label label={document.string.Labels} />
|
||||||
</span>
|
</span>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
@ -545,7 +545,7 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="divider" />
|
<div class="divider" />
|
||||||
<span class="label">
|
<span class="labelOnPanel">
|
||||||
<Label label={document.string.LastRevision} />
|
<Label label={document.string.LastRevision} />
|
||||||
</span>
|
</span>
|
||||||
<span>{documentObject?.latest}</span>
|
<span>{documentObject?.latest}</span>
|
||||||
|
@ -23,16 +23,19 @@
|
|||||||
export let inline: boolean = false
|
export let inline: boolean = false
|
||||||
export let disabled: boolean = false
|
export let disabled: boolean = false
|
||||||
export let accent: boolean = false
|
export let accent: boolean = false
|
||||||
|
export let noUnderline: boolean = false
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if value}
|
{#if value}
|
||||||
<DocNavLink object={value} {inline} {disabled} noUnderline={disabled} {accent}>
|
<DocNavLink object={value} {inline} {disabled} {noUnderline} {accent}>
|
||||||
{#if inline}
|
{#if inline}
|
||||||
<span class="antiMention" use:tooltip={{ label: lead.string.Lead }}>@LEAD-{value.number}</span>
|
<span class="antiMention" use:tooltip={{ label: lead.string.Lead }}>@LEAD-{value.number}</span>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="flex-presenter">
|
<div class="flex-presenter">
|
||||||
<div class="icon"><Icon icon={lead.icon.Lead} size={'small'} /></div>
|
<div class="icon"><Icon icon={lead.icon.Lead} size={'small'} /></div>
|
||||||
<span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>LEAD-{value.number}</span>
|
<span class="label nowrap" class:no-underline={noUnderline || disabled} class:fs-bold={accent}
|
||||||
|
>LEAD-{value.number}</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</DocNavLink>
|
</DocNavLink>
|
||||||
|
@ -96,7 +96,7 @@
|
|||||||
>
|
>
|
||||||
<div class="flex-row-center flex-no-shrink mr-8">
|
<div class="flex-row-center flex-no-shrink mr-8">
|
||||||
{#if presenter}
|
{#if presenter}
|
||||||
<svelte:component this={presenter} value={doc} inline accent disabled inbox />
|
<svelte:component this={presenter} value={doc} accent disabled inbox />
|
||||||
{/if}
|
{/if}
|
||||||
{#if newTxes > 0 && !selected}
|
{#if newTxes > 0 && !selected}
|
||||||
<div class="counter float">{newTxes}</div>
|
<div class="counter float">{newTxes}</div>
|
||||||
|
@ -161,9 +161,9 @@
|
|||||||
<span class="lower"><Label label={m.label} /></span>
|
<span class="lower"><Label label={m.label} /></span>
|
||||||
{#each value.added as cvalue}
|
{#each value.added as cvalue}
|
||||||
{#if value.isObjectAdded}
|
{#if value.isObjectAdded}
|
||||||
<ObjectPresenter value={cvalue} inline />
|
<ObjectPresenter value={cvalue} />
|
||||||
{:else}
|
{:else}
|
||||||
<svelte:component this={m.presenter} value={cvalue} inline />
|
<svelte:component this={m.presenter} value={cvalue} />
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
{:else if value.removed.length}
|
{:else if value.removed.length}
|
||||||
@ -172,9 +172,9 @@
|
|||||||
<span class="lower"><Label label={m.label} /></span>
|
<span class="lower"><Label label={m.label} /></span>
|
||||||
{#each value.removed as cvalue}
|
{#each value.removed as cvalue}
|
||||||
{#if value.isObjectRemoved}
|
{#if value.isObjectRemoved}
|
||||||
<ObjectPresenter value={cvalue} inline />
|
<ObjectPresenter value={cvalue} />
|
||||||
{:else}
|
{:else}
|
||||||
<svelte:component this={m.presenter} value={cvalue} inline />
|
<svelte:component this={m.presenter} value={cvalue} />
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
{:else if value.set === null || value.set === undefined || value.set === ''}
|
{:else if value.set === null || value.set === undefined || value.set === ''}
|
||||||
@ -188,9 +188,9 @@
|
|||||||
{#if !hasMessageType}
|
{#if !hasMessageType}
|
||||||
<span class="strong">
|
<span class="strong">
|
||||||
{#if value.isObjectSet}
|
{#if value.isObjectSet}
|
||||||
<ObjectPresenter value={value.set} inline accent />
|
<ObjectPresenter value={value.set} accent />
|
||||||
{:else}
|
{:else}
|
||||||
<svelte:component this={m.presenter} value={value.set} inline accent />
|
<svelte:component this={m.presenter} value={value.set} accent />
|
||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
@ -211,9 +211,9 @@
|
|||||||
{#if !hasMessageType}
|
{#if !hasMessageType}
|
||||||
<div class="strong">
|
<div class="strong">
|
||||||
{#if value.isObjectSet}
|
{#if value.isObjectSet}
|
||||||
<ObjectPresenter value={value.set} inline accent />
|
<ObjectPresenter value={value.set} accent />
|
||||||
{:else}
|
{:else}
|
||||||
<svelte:component this={m.presenter} value={value.set} inline accent />
|
<svelte:component this={m.presenter} value={value.set} accent />
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
@ -222,9 +222,9 @@
|
|||||||
{/each}
|
{/each}
|
||||||
{:else if viewlet && viewlet.display === 'inline' && viewlet.component}
|
{:else if viewlet && viewlet.display === 'inline' && viewlet.component}
|
||||||
{#if typeof viewlet.component === 'string'}
|
{#if typeof viewlet.component === 'string'}
|
||||||
<Component is={viewlet.component} {props} inline />
|
<Component is={viewlet.component} {props} />
|
||||||
{:else}
|
{:else}
|
||||||
<svelte:component this={viewlet.component} {...props} inline />
|
<svelte:component this={viewlet.component} {...props} />
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
@ -24,6 +24,7 @@
|
|||||||
export let value: Applicant
|
export let value: Applicant
|
||||||
export let inline: boolean = false
|
export let inline: boolean = false
|
||||||
export let disabled: boolean = false
|
export let disabled: boolean = false
|
||||||
|
export let noUnderline: boolean = false
|
||||||
export let accent: boolean = false
|
export let accent: boolean = false
|
||||||
|
|
||||||
const client = getClient()
|
const client = getClient()
|
||||||
@ -31,7 +32,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if value && shortLabel}
|
{#if value && shortLabel}
|
||||||
<DocNavLink object={value} {inline} {disabled} noUnderline={disabled} {accent}>
|
<DocNavLink object={value} {inline} {disabled} {noUnderline} {accent}>
|
||||||
{#if inline}
|
{#if inline}
|
||||||
<span class="antiMention" use:tooltip={{ label: recruitPlg.string.Application }}>
|
<span class="antiMention" use:tooltip={{ label: recruitPlg.string.Application }}>
|
||||||
@{#if shortLabel}{shortLabel}-{/if}{value.number}
|
@{#if shortLabel}{shortLabel}-{/if}{value.number}
|
||||||
@ -41,7 +42,7 @@
|
|||||||
<div class="icon">
|
<div class="icon">
|
||||||
<Icon icon={recruit.icon.Application} size={'small'} />
|
<Icon icon={recruit.icon.Application} size={'small'} />
|
||||||
</div>
|
</div>
|
||||||
<span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>
|
<span class="label nowrap" class:no-underline={noUnderline || disabled} class:fs-bold={accent}>
|
||||||
{#if shortLabel}{shortLabel}-{/if}{value.number}
|
{#if shortLabel}{shortLabel}-{/if}{value.number}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -26,6 +26,7 @@
|
|||||||
export let inline: boolean = false
|
export let inline: boolean = false
|
||||||
export let disabled: boolean = false
|
export let disabled: boolean = false
|
||||||
export let accent: boolean = false
|
export let accent: boolean = false
|
||||||
|
export let noUnderline: boolean = false
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
$: accentColor = getPlatformAvatarColorForTextDef(value.name, $themeStore.dark)
|
$: accentColor = getPlatformAvatarColorForTextDef(value.name, $themeStore.dark)
|
||||||
@ -37,14 +38,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if value}
|
{#if value}
|
||||||
<DocNavLink
|
<DocNavLink {disabled} object={value} {inline} {accent} {noUnderline} component={recruit.component.EditVacancy}>
|
||||||
{disabled}
|
|
||||||
object={value}
|
|
||||||
{inline}
|
|
||||||
{accent}
|
|
||||||
noUnderline={disabled}
|
|
||||||
component={recruit.component.EditVacancy}
|
|
||||||
>
|
|
||||||
{#if inline}
|
{#if inline}
|
||||||
<span class="antiMention" use:tooltip={{ label: recruit.string.Vacancy }}>
|
<span class="antiMention" use:tooltip={{ label: recruit.string.Vacancy }}>
|
||||||
@{value.name}
|
@{value.name}
|
||||||
@ -52,7 +46,9 @@
|
|||||||
{:else}
|
{:else}
|
||||||
<div class="flex-presenter" use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
|
<div class="flex-presenter" use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
|
||||||
<div class="icon"><Icon icon={recruit.icon.Vacancy} size={'small'} /></div>
|
<div class="icon"><Icon icon={recruit.icon.Vacancy} size={'small'} /></div>
|
||||||
<span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>{value.name}</span>
|
<span class="label nowrap" class:no-underline={noUnderline || disabled} class:fs-bold={accent}
|
||||||
|
>{value.name}</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</DocNavLink>
|
</DocNavLink>
|
||||||
|
@ -24,6 +24,7 @@
|
|||||||
export let inline: boolean = false
|
export let inline: boolean = false
|
||||||
export let disabled: boolean = false
|
export let disabled: boolean = false
|
||||||
export let accent: boolean = false
|
export let accent: boolean = false
|
||||||
|
export let noUnderline: boolean = false
|
||||||
|
|
||||||
const client = getClient()
|
const client = getClient()
|
||||||
|
|
||||||
@ -31,12 +32,12 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if value && label}
|
{#if value && label}
|
||||||
<DocNavLink object={value} {inline} {disabled} {accent} noUnderline={disabled}>
|
<DocNavLink object={value} {inline} {disabled} {accent} {noUnderline}>
|
||||||
<div class="flex-presenter" class:inline-presenter={inline}>
|
<div class="flex-presenter" class:inline-presenter={inline}>
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<Icon icon={recruit.icon.Review} size={'small'} />
|
<Icon icon={recruit.icon.Review} size={'small'} />
|
||||||
</div>
|
</div>
|
||||||
<span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>
|
<span class="label nowrap" class:no-underline={noUnderline || disabled} class:fs-bold={accent}>
|
||||||
{label}-{value.number}
|
{label}-{value.number}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -31,6 +31,7 @@
|
|||||||
export let oneLine: boolean = false
|
export let oneLine: boolean = false
|
||||||
export let shouldShowName: boolean = true
|
export let shouldShowName: boolean = true
|
||||||
export let shouldShowTooltip: boolean = false
|
export let shouldShowTooltip: boolean = false
|
||||||
|
export let noUnderline: boolean = false
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
@ -57,7 +58,9 @@
|
|||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
{#if shouldShowName}
|
{#if shouldShowName}
|
||||||
<span class="overflow-label label" class:nowrap={oneLine} class:no-underline={disabled}>{value.name}</span>
|
<span class="overflow-label label" class:nowrap={oneLine} class:no-underline={noUnderline || disabled}
|
||||||
|
>{value.name}</span
|
||||||
|
>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -566,7 +566,7 @@
|
|||||||
searchField={'title'}
|
searchField={'title'}
|
||||||
allowDeselect={true}
|
allowDeselect={true}
|
||||||
showNavigate={false}
|
showNavigate={false}
|
||||||
docProps={{ disabled: true }}
|
docProps={{ disabled: true, noUnderline: true }}
|
||||||
focusIndex={20000}
|
focusIndex={20000}
|
||||||
/>
|
/>
|
||||||
</svelte:fragment>
|
</svelte:fragment>
|
||||||
|
@ -50,9 +50,9 @@
|
|||||||
{#if inline}
|
{#if inline}
|
||||||
<span class="antiMention" use:tooltip={{ label: tracker.string.Component }}>@{label}</span>
|
<span class="antiMention" use:tooltip={{ label: tracker.string.Component }}>@{label}</span>
|
||||||
{:else}
|
{:else}
|
||||||
<span class="flex-presenter" class:list={kind === 'list'}>
|
<span class="flex-presenter" class:list={kind === 'list'} use:tooltip={{ label: tracker.string.Component }}>
|
||||||
{#if shouldShowAvatar}
|
{#if shouldShowAvatar}
|
||||||
<div class="icon" use:tooltip={{ label: tracker.string.Component }}>
|
<div class="icon">
|
||||||
<Icon icon={tracker.icon.Component} size={'small'} />
|
<Icon icon={tracker.icon.Component} size={'small'} />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -21,7 +21,7 @@
|
|||||||
$: classes = Array.from(valueGroup.keys())
|
$: classes = Array.from(valueGroup.keys())
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex-column flex-grow">
|
<div class="flex-column flex-grow clear-mins">
|
||||||
{#each classes as classCategory}
|
{#each classes as classCategory}
|
||||||
{@const vals = valueGroup.get(classCategory)}
|
{@const vals = valueGroup.get(classCategory)}
|
||||||
{#if vals}
|
{#if vals}
|
||||||
|
@ -87,7 +87,7 @@
|
|||||||
<Icon {icon} size={'small'} />
|
<Icon {icon} size={'small'} />
|
||||||
<div class="flex-grow">
|
<div class="flex-grow">
|
||||||
<button on:click|stopPropagation={() => handleRedirect(issue)}>
|
<button on:click|stopPropagation={() => handleRedirect(issue)}>
|
||||||
<span class="overflow-label ml-1-5 caption-color">{getIssueId(issue.$lookup.space, issue)}</span>
|
<span class="overflow-label ml-1-5 content-color">{getIssueId(issue.$lookup.space, issue)}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button class="btn-close" on:click|stopPropagation={() => handleClick(issue)}>
|
<button class="btn-close" on:click|stopPropagation={() => handleClick(issue)}>
|
||||||
@ -96,15 +96,11 @@
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{:else}
|
{:else}
|
||||||
<div class="tag-container">
|
<div class="tag-container between">
|
||||||
<div class="flex-grow">
|
<Component
|
||||||
<div class="overflow-label max-w-30">
|
is={view.component.ObjectPresenter}
|
||||||
<Component
|
props={{ objectId: doc._id, _class: doc._class, value: doc, noUnderline: true, props: { avatarSize: 'card' } }}
|
||||||
is={view.component.ObjectPresenter}
|
/>
|
||||||
props={{ objectId: doc._id, _class: doc._class, value: doc, inline: true }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button class="btn-close" on:click|stopPropagation={() => handleClick(doc)}>
|
<button class="btn-close" on:click|stopPropagation={() => handleClick(doc)}>
|
||||||
<Icon icon={IconClose} size={'x-small'} />
|
<Icon icon={IconClose} size={'x-small'} />
|
||||||
</button>
|
</button>
|
||||||
@ -118,14 +114,20 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
// flex-shrink: 0;
|
// flex-shrink: 0;
|
||||||
padding-left: 0.5rem;
|
padding-left: 0.75rem;
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
font-size: 0.8125rem;
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
// width: fit-content;
|
// width: fit-content;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
|
|
||||||
|
&.between {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
|
background-color: var(--theme-button-hovered);
|
||||||
border-color: var(--theme-divider-color);
|
border-color: var(--theme-divider-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -95,7 +95,7 @@
|
|||||||
|
|
||||||
<div class="popupPanel-body__aside-grid">
|
<div class="popupPanel-body__aside-grid">
|
||||||
{#if issue.template?.template}
|
{#if issue.template?.template}
|
||||||
<span class="label">
|
<span class="labelOnPanel">
|
||||||
<Label label={tracker.string.IssueTemplate} />
|
<Label label={tracker.string.IssueTemplate} />
|
||||||
</span>
|
</span>
|
||||||
<ObjectBox
|
<ObjectBox
|
||||||
@ -114,7 +114,7 @@
|
|||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<span class="label">
|
<span class="labelOnPanel">
|
||||||
<Label label={tracker.string.Status} />
|
<Label label={tracker.string.Status} />
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
@ -139,12 +139,12 @@
|
|||||||
<RelationEditor value={issue} type="relations" />
|
<RelationEditor value={issue} type="relations" />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<span class="label">
|
<span class="labelOnPanel">
|
||||||
<Label label={tracker.string.Priority} />
|
<Label label={tracker.string.Priority} />
|
||||||
</span>
|
</span>
|
||||||
<PriorityEditor value={issue} size={'medium'} shouldShowLabel />
|
<PriorityEditor value={issue} size={'medium'} shouldShowLabel />
|
||||||
|
|
||||||
<span class="label">
|
<span class="labelOnPanel">
|
||||||
<Label label={core.string.CreatedBy} />
|
<Label label={core.string.CreatedBy} />
|
||||||
</span>
|
</span>
|
||||||
<EmployeeBox
|
<EmployeeBox
|
||||||
@ -158,7 +158,7 @@
|
|||||||
readonly
|
readonly
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<span class="label">
|
<span class="labelOnPanel">
|
||||||
<Label label={tracker.string.Assignee} />
|
<Label label={tracker.string.Assignee} />
|
||||||
</span>
|
</span>
|
||||||
<AssigneeEditor object={issue} size={'medium'} avatarSize={'card'} width="100%" />
|
<AssigneeEditor object={issue} size={'medium'} avatarSize={'card'} width="100%" />
|
||||||
@ -170,12 +170,12 @@
|
|||||||
|
|
||||||
<div class="divider" />
|
<div class="divider" />
|
||||||
|
|
||||||
<span class="label">
|
<span class="labelOnPanel">
|
||||||
<Label label={tracker.string.Component} />
|
<Label label={tracker.string.Component} />
|
||||||
</span>
|
</span>
|
||||||
<ComponentEditor value={issue} space={issue.space} size={'medium'} />
|
<ComponentEditor value={issue} space={issue.space} size={'medium'} />
|
||||||
|
|
||||||
<span class="label">
|
<span class="labelOnPanel">
|
||||||
<Label label={tracker.string.Milestone} />
|
<Label label={tracker.string.Milestone} />
|
||||||
</span>
|
</span>
|
||||||
<MilestoneEditor value={issue} space={issue.space} size={'medium'} />
|
<MilestoneEditor value={issue} space={issue.space} size={'medium'} />
|
||||||
@ -183,7 +183,7 @@
|
|||||||
{#if issue.dueDate !== null}
|
{#if issue.dueDate !== null}
|
||||||
<div class="divider" />
|
<div class="divider" />
|
||||||
|
|
||||||
<span class="label">
|
<span class="labelOnPanel">
|
||||||
<Label label={tracker.string.DueDate} />
|
<Label label={tracker.string.DueDate} />
|
||||||
</span>
|
</span>
|
||||||
<DueDateEditor value={issue} width={'100%'} />
|
<DueDateEditor value={issue} width={'100%'} />
|
||||||
|
@ -31,6 +31,7 @@
|
|||||||
export let disabled = false
|
export let disabled = false
|
||||||
export let inline = false
|
export let inline = false
|
||||||
export let accent: boolean = false
|
export let accent: boolean = false
|
||||||
|
export let noUnderline: boolean = false
|
||||||
export let onClick: (() => void) | undefined = undefined
|
export let onClick: (() => void) | undefined = undefined
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
@ -46,17 +47,22 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if value}
|
{#if value}
|
||||||
<DocNavLink object={value} {disabled} {inline} {accent} noUnderline={disabled} {onClick}>
|
<DocNavLink object={value} {disabled} {inline} {accent} {noUnderline} {onClick}>
|
||||||
{#if inline}
|
{#if inline}
|
||||||
<span class="antiMention" use:tooltip={{ label: tracker.string.Milestone }}>@{value.label}</span>
|
<span class="antiMention" use:tooltip={{ label: tracker.string.Milestone }}>@{value.label}</span>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="flex-presenter">
|
<div class="flex-presenter" use:tooltip={{ label: tracker.string.Milestone }}>
|
||||||
{#if shouldShowAvatar}
|
{#if shouldShowAvatar}
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<Icon icon={tracker.icon.Milestone} size="small" />
|
<Icon icon={tracker.icon.Milestone} size="small" />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<span title={value.label} class="overflow-label label" class:no-underline={disabled} class:fs-bold={accent}>
|
<span
|
||||||
|
title={value.label}
|
||||||
|
class="overflow-label label"
|
||||||
|
class:no-underline={noUnderline || disabled}
|
||||||
|
class:fs-bold={accent}
|
||||||
|
>
|
||||||
{value.label}
|
{value.label}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -65,7 +65,9 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.noUnderline {
|
&.noUnderline,
|
||||||
|
&.noUnderline:hover {
|
||||||
|
text-decoration: none;
|
||||||
color: var(--theme-caption-color);
|
color: var(--theme-caption-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -65,12 +65,12 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="popupPanel-body__aside-grid">
|
<div class="popupPanel-body__aside-grid">
|
||||||
<span class="label">
|
<span class="labelOnPanel">
|
||||||
<Label label={tracker.string.Priority} />
|
<Label label={tracker.string.Priority} />
|
||||||
</span>
|
</span>
|
||||||
<PriorityEditor value={issue} size={'medium'} shouldShowLabel />
|
<PriorityEditor value={issue} size={'medium'} shouldShowLabel />
|
||||||
|
|
||||||
<span class="label">
|
<span class="labelOnPanel">
|
||||||
<Label label={tracker.string.Assignee} />
|
<Label label={tracker.string.Assignee} />
|
||||||
</span>
|
</span>
|
||||||
<AssigneeEditor object={issue} size={'medium'} width="100%" />
|
<AssigneeEditor object={issue} size={'medium'} width="100%" />
|
||||||
@ -99,13 +99,13 @@
|
|||||||
|
|
||||||
<div class="divider" />
|
<div class="divider" />
|
||||||
|
|
||||||
<span class="label">
|
<span class="labelOnPanel">
|
||||||
<Label label={tracker.string.Component} />
|
<Label label={tracker.string.Component} />
|
||||||
</span>
|
</span>
|
||||||
<ComponentEditor value={issue} size={'medium'} />
|
<ComponentEditor value={issue} size={'medium'} />
|
||||||
|
|
||||||
{#if issue.milestone}
|
{#if issue.milestone}
|
||||||
<span class="label">
|
<span class="labelOnPanel">
|
||||||
<Label label={tracker.string.Milestone} />
|
<Label label={tracker.string.Milestone} />
|
||||||
</span>
|
</span>
|
||||||
<MilestoneEditor value={issue} size={'medium'} />
|
<MilestoneEditor value={issue} size={'medium'} />
|
||||||
|
@ -29,6 +29,7 @@
|
|||||||
export let props: Record<string, any> = {}
|
export let props: Record<string, any> = {}
|
||||||
export let shrink: number = 1
|
export let shrink: number = 1
|
||||||
export let accent: boolean = false
|
export let accent: boolean = false
|
||||||
|
export let noOverflow: boolean = false
|
||||||
|
|
||||||
const client = getClient()
|
const client = getClient()
|
||||||
const hierarchy = client.getHierarchy()
|
const hierarchy = client.getHierarchy()
|
||||||
@ -50,4 +51,6 @@
|
|||||||
$: if (object !== undefined) getHref(object)
|
$: if (object !== undefined) getHref(object)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<NavLink {disabled} {onClick} {noUnderline} {inline} {shrink} {href} {colorInherit} {accent}><slot /></NavLink>
|
<NavLink {disabled} {onClick} {noUnderline} {inline} {shrink} {href} {colorInherit} {accent} {noOverflow}
|
||||||
|
><slot /></NavLink
|
||||||
|
>
|
||||||
|
@ -142,7 +142,7 @@
|
|||||||
objectId={selected._id}
|
objectId={selected._id}
|
||||||
_class={selected._class}
|
_class={selected._class}
|
||||||
value={selected}
|
value={selected}
|
||||||
props={{ ...docProps, disabled: true, noUnderline: true, size: 'x-small' }}
|
props={{ ...docProps, disabled: true, noUnderline: true, size: 'x-small', shouldShowAvatar: false }}
|
||||||
/>
|
/>
|
||||||
{:else}
|
{:else}
|
||||||
<Label {label} />
|
<Label {label} />
|
||||||
|
@ -70,11 +70,11 @@
|
|||||||
<svelte:component
|
<svelte:component
|
||||||
this={presenter.presenter}
|
this={presenter.presenter}
|
||||||
value={doc}
|
value={doc}
|
||||||
{...props}
|
|
||||||
{inline}
|
{inline}
|
||||||
{accent}
|
{accent}
|
||||||
{shouldShowAvatar}
|
{shouldShowAvatar}
|
||||||
{noUnderline}
|
{noUnderline}
|
||||||
|
{...props}
|
||||||
on:accent-color
|
on:accent-color
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
|
Loading…
Reference in New Issue
Block a user