Tracker: Status should be positioned at same offset (#1464)

Signed-off-by: Artyom Grigorovich <grigorovichartyom@gmail.com>
This commit is contained in:
Artyom Grigorovich 2022-04-20 23:31:56 +07:00 committed by GitHub
parent 43c0413cd0
commit 55b389f22b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 97 additions and 79 deletions

View File

@ -61,13 +61,11 @@
<Scroller>
<IssuesList
_class={tracker.class.Issue}
leftItemsConfig={[
itemsConfig={[
{ key: '', presenter: tracker.component.PriorityPresenter, props: { currentSpace } },
{ key: '', presenter: tracker.component.IssuePresenter, props: { currentTeam } },
{ key: '', presenter: tracker.component.StatusPresenter, props: { currentSpace } },
{ key: '', presenter: tracker.component.TitlePresenter }
]}
rightItemsConfig={[
{ key: '', presenter: tracker.component.TitlePresenter, props: { shouldUseMargin: true } },
{ key: '', presenter: tracker.component.DueDatePresenter, props: { currentSpace } },
{ key: 'modifiedOn', presenter: tracker.component.ModificationDatePresenter },
{ key: '', presenter: tracker.component.AssigneePresenter, props: { currentSpace } }

View File

@ -25,16 +25,31 @@
const client = getClient()
const shortLabel = client.getHierarchy().getClass(value._class).shortLabel
$: issueName = `${currentTeam.identifier}-${value.number}`
const handleIssueEditorOpened = () => {
showPanel(tracker.component.EditIssue, value._id, value._class, 'content')
}
</script>
{#if value && shortLabel}
<div class="flex-presenter" class:inline-presenter={inline} on:click={handleIssueEditorOpened}>
<div class="flex-presenter issuePresenterRoot" class:inline-presenter={inline} on:click={handleIssueEditorOpened}>
<div class="icon">
<Icon icon={tracker.icon.Issue} size={'small'} />
</div>
<span class="label nowrap">{currentTeam.identifier}-{value.number}</span>
<span title={issueName} class="label nowrap issueLabel">{issueName}</span>
</div>
{/if}
<style lang="scss">
.issuePresenterRoot {
max-width: 5rem;
}
.issueLabel {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>

View File

@ -23,8 +23,7 @@
export let _class: Ref<Class<Doc>>
export let baseMenuClass: Ref<Class<Doc>> | undefined = undefined
export let leftItemsConfig: (BuildModelKey | string)[]
export let rightItemsConfig: (BuildModelKey | string)[] | undefined = undefined
export let itemsConfig: (BuildModelKey | string)[]
export let options: FindOptions<Doc> | undefined = undefined
export let query: DocumentQuery<Doc>
@ -92,16 +91,9 @@
return props.length
}
const buildItemModels = async () => {
const leftModels = await buildModel({ client, _class, keys: leftItemsConfig, options })
const rightModels = rightItemsConfig && (await buildModel({ client, _class, keys: rightItemsConfig, options }))
return { leftModels, rightModels }
}
</script>
{#await buildItemModels()}
{#await buildModel({ client, _class, keys: itemsConfig, options })}
{#if !isLoading}
<Loading />
{/if}
@ -114,8 +106,7 @@
class:mListGridChecked={selectedIssueIds.has(docObject._id)}
class:mListGridFixed={rowIndex === selectedRowIndex}
>
<div class="modelsContainer">
{#each itemModels.leftModels as attributeModel, attributeModelIndex}
{#each itemModels as attributeModel, attributeModelIndex}
{#if attributeModelIndex === 0}
<div class="gridElement">
<Tooltip direction={'bottom'} label={tracker.string.SelectIssue}>
@ -151,6 +142,13 @@
<IconMoreV size={'small'} />
</div>
</div>
{:else if attributeModelIndex === 3}
<svelte:component
this={attributeModel.presenter}
value={getObjectValue(attributeModel.key, docObject) ?? ''}
{...attributeModel.props}
/>
<div class="filler" />
{:else}
<div class="gridElement">
<svelte:component
@ -162,25 +160,10 @@
{/if}
{/each}
</div>
{#if itemModels.rightModels}
<div class="modelsContainer">
{#each itemModels.rightModels as attributeModel}
<div class="gridElement">
<svelte:component
this={attributeModel.presenter}
value={getObjectValue(attributeModel.key, docObject) ?? ''}
{...attributeModel.props}
/>
</div>
{/each}
</div>
{/if}
</div>
{/each}
{:else if loadingProps !== undefined}
{#each Array(getLoadingElementsLength(loadingProps, options)) as _, rowIndex}
<div class="listGrid mListGridIsLoading" class:fixed={rowIndex === selectedRowIndex}>
<div class="modelsContainer">
<div class="gridElement">
<CheckBox checked={false} />
<div class="ml-4">
@ -188,7 +171,6 @@
</div>
</div>
</div>
</div>
{/each}
{/if}
</div>
@ -206,7 +188,6 @@
.listGrid {
display: flex;
align-items: center;
justify-content: space-between;
height: 3.25rem;
color: var(--theme-caption-color);
border-bottom: 1px solid var(--theme-button-border-hovered);
@ -245,9 +226,9 @@
}
}
.modelsContainer {
.filler {
display: flex;
align-items: center;
flex-grow: 1;
}
.gridElement {
@ -268,6 +249,8 @@
.issuePresenter {
display: flex;
align-items: center;
flex-shrink: 0;
width: 5.5rem;
margin-left: 0.5rem;
.eIssuePresenterContextMenu {

View File

@ -29,5 +29,13 @@
</script>
<Tooltip label={tracker.string.ModificationDate} props={{ value: fullModificationDate }}>
<span class="nowrap">{shortModificationDate}</span>
<span class="modificationDateLabel">{shortModificationDate}</span>
</Tooltip>
<style lang="scss">
.modificationDateLabel {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>

View File

@ -16,8 +16,22 @@
import type { Issue } from '@anticrm/tracker'
export let value: Issue
export let shouldUseMargin: boolean = false
</script>
{#if value}
<span class="label nowrap" title={value.title}>{value.title}</span>
<span class="titleLabel" class:mTitleLabelWithMargin={shouldUseMargin} title={value.title}>{value.title}</span>
{/if}
<style lang="scss">
.titleLabel {
flex-shrink: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&.mTitleLabelWithMargin {
margin-left: 0.5rem;
}
}
</style>