mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-23 11:31:57 +03:00
[TSK-801] Fixed presenters (#2729)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
parent
9eddd84ada
commit
b0b389d208
@ -86,7 +86,8 @@
|
||||
</div>
|
||||
{/if}
|
||||
{:else if node.nodeName === 'SPAN'}
|
||||
<span style={node.getAttribute('style')}>
|
||||
<span style:margin={'0 .25rem'} style={node.getAttribute('style')}>
|
||||
<!-- <svelte:self nodes={node.childNodes} /> -->
|
||||
{#if node.getAttribute('data-objectclass') !== undefined && node.getAttribute('data-id') !== undefined}
|
||||
<Component
|
||||
is={view.component.ObjectPresenter}
|
||||
@ -95,7 +96,10 @@
|
||||
title: node.getAttribute('data-label'),
|
||||
_class: node.getAttribute('data-objectclass'),
|
||||
props: {
|
||||
shouldShowAvatar: false
|
||||
inline: true,
|
||||
avatarSize: 'x-small',
|
||||
withIcon: true
|
||||
// shouldShowAvatar: false
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
@ -112,7 +112,7 @@ p:last-child { margin-block-end: 0; }
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
hyphens: auto;
|
||||
line-height: 150%;
|
||||
line-height: 180%;
|
||||
color: var(--accent-color);
|
||||
|
||||
a {
|
||||
@ -304,7 +304,12 @@ input.search {
|
||||
.inline-presenter {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
margin: -.25rem 0;
|
||||
|
||||
.icon { transform: translateY(.2rem); }
|
||||
.icon.circle { transform: translateY(.375rem); }
|
||||
.avatar-container:not(.no-img) { transform: translateY(.375rem); }
|
||||
.avatar-container.no-img { transform: translateY(.15rem); }
|
||||
}
|
||||
// Presenters on the card
|
||||
.card-container .flex-presenter,
|
||||
|
@ -88,7 +88,7 @@
|
||||
cursor: pointer;
|
||||
|
||||
&.outter {
|
||||
bottom: 0.5rem;
|
||||
bottom: 0.25rem;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
&:hover {
|
||||
|
@ -19,8 +19,7 @@
|
||||
export let inline = false
|
||||
export let disableClick = false
|
||||
export let defaultName: IntlString | undefined = undefined
|
||||
|
||||
let container: HTMLElement
|
||||
export let element: HTMLElement | undefined = undefined
|
||||
|
||||
const onEdit = (evt: MouseEvent) => {
|
||||
if (disableClick) {
|
||||
@ -34,7 +33,7 @@
|
||||
{
|
||||
employeeId: value._id
|
||||
},
|
||||
container
|
||||
element
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -42,20 +41,28 @@
|
||||
$: handlePersonEdit = onEmployeeEdit ?? onEdit
|
||||
</script>
|
||||
|
||||
<div bind:this={container} class="flex-presenter inline-presenter">
|
||||
<PersonPresenter
|
||||
{value}
|
||||
{tooltipLabels}
|
||||
onEdit={isInteractive ? handlePersonEdit : () => {}}
|
||||
{shouldShowAvatar}
|
||||
{shouldShowName}
|
||||
{avatarSize}
|
||||
{shouldShowPlaceholder}
|
||||
{isInteractive}
|
||||
{inline}
|
||||
{defaultName}
|
||||
/>
|
||||
</div>
|
||||
<PersonPresenter
|
||||
bind:element
|
||||
{value}
|
||||
{tooltipLabels}
|
||||
onEdit={isInteractive ? handlePersonEdit : () => {}}
|
||||
{shouldShowAvatar}
|
||||
{shouldShowName}
|
||||
{avatarSize}
|
||||
{shouldShowPlaceholder}
|
||||
{isInteractive}
|
||||
{inline}
|
||||
{defaultName}
|
||||
/>
|
||||
{#if value?.active === false}
|
||||
(<Label label={contact.string.Inactive} />)
|
||||
<div class="status ml-1">
|
||||
(<Label label={contact.string.Inactive} />)
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.status {
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
</style>
|
||||
|
@ -31,8 +31,9 @@
|
||||
export let onEdit: ((event: MouseEvent) => void) | undefined = undefined
|
||||
export let showTooltip: LabelAndProps | undefined = undefined
|
||||
export let enlargedText = false
|
||||
export let element: HTMLElement | undefined = undefined
|
||||
|
||||
$: element = getElement(value, onEdit, shouldShowPlaceholder, isInteractive)
|
||||
$: el = getElement(value, onEdit, shouldShowPlaceholder, isInteractive)
|
||||
|
||||
const getElement = (
|
||||
person: Person | undefined | null,
|
||||
@ -56,8 +57,10 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<svelte:element
|
||||
this={element}
|
||||
this={el}
|
||||
bind:this={element}
|
||||
use:tooltip={showTooltip}
|
||||
class="contentPresenter"
|
||||
class:inline-presenter={inline}
|
||||
@ -94,12 +97,16 @@
|
||||
flex-wrap: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
&.inline-presenter {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
&.mContentPresenterNotInteractive {
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
.eContentPresenterIcon {
|
||||
color: var(--dark-color);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
.eContentPresenterLabel {
|
||||
text-decoration: none;
|
||||
|
@ -31,6 +31,7 @@
|
||||
export let tooltipLabels: PersonLabelTooltip | undefined = undefined
|
||||
export let avatarSize: 'inline' | 'tiny' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' = 'x-small'
|
||||
export let onEdit: ((event: MouseEvent) => void) | undefined = undefined
|
||||
export let element: HTMLElement | undefined = undefined
|
||||
|
||||
function getTooltip (
|
||||
tooltipLabels: PersonLabelTooltip | undefined,
|
||||
@ -72,5 +73,6 @@
|
||||
{shouldShowName}
|
||||
{shouldShowPlaceholder}
|
||||
{enlargedText}
|
||||
bind:element
|
||||
/>
|
||||
{/if}
|
||||
|
@ -25,7 +25,7 @@
|
||||
const dispatch = createEventDispatcher()
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div
|
||||
class="antiNav-element"
|
||||
class:selected
|
||||
|
@ -24,6 +24,7 @@
|
||||
export let onClick: (() => void) | undefined = undefined
|
||||
export let withIcon = false
|
||||
export let noUnderline = false
|
||||
export let inline = false
|
||||
|
||||
// Extra properties
|
||||
export let teams: Map<Ref<Team>, Team> | undefined = undefined
|
||||
@ -58,9 +59,15 @@
|
||||
|
||||
{#if value}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<span class="issuePresenterRoot" class:noPointer={disableClick} class:noUnderline on:click={handleIssueEditorOpened}>
|
||||
<span
|
||||
class="issuePresenterRoot"
|
||||
class:noPointer={disableClick}
|
||||
class:noUnderline
|
||||
class:inline
|
||||
on:click={handleIssueEditorOpened}
|
||||
>
|
||||
{#if withIcon}
|
||||
<div class="mr-2" use:tooltip={{ label: tracker.string.Issue }}>
|
||||
<div class="icon" use:tooltip={{ label: tracker.string.Issue }}>
|
||||
<Icon icon={tracker.icon.Issues} size={'small'} />
|
||||
</div>
|
||||
{/if}
|
||||
@ -73,17 +80,32 @@
|
||||
<style lang="scss">
|
||||
.issuePresenterRoot {
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
max-width: 5rem;
|
||||
color: var(--content-color);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
flex-shrink: 0;
|
||||
max-width: 5rem;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--content-color);
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
margin-right: 0.5rem;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
&.inline {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
|
||||
.icon {
|
||||
transform: translateY(0.2rem);
|
||||
}
|
||||
.select-text {
|
||||
font-weight: 500;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
&.noPointer {
|
||||
cursor: default;
|
||||
}
|
||||
@ -97,6 +119,10 @@
|
||||
&:hover {
|
||||
color: var(--caption-color);
|
||||
text-decoration: underline;
|
||||
|
||||
.icon {
|
||||
color: var(--caption-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user