Remove inline in Inbox. Panel, presenters fixes. (#3665)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2023-09-06 18:52:48 +03:00 committed by GitHub
parent d7fa8c3800
commit 47e39eae75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 121 additions and 89 deletions

View File

@ -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 }

View File

@ -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);
} }

View File

@ -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; }
} }

View File

@ -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>

View File

@ -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;

View File

@ -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}

View File

@ -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}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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}

View File

@ -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>

View File

@ -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}

View File

@ -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}

View File

@ -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);
} }

View File

@ -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%'} />

View File

@ -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>

View File

@ -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);
} }

View File

@ -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'} />

View File

@ -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
>

View File

@ -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} />

View File

@ -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}