diff --git a/plugins/login-resources/src/utils.ts b/plugins/login-resources/src/utils.ts
index 73965e5ebf..93684036d3 100644
--- a/plugins/login-resources/src/utils.ts
+++ b/plugins/login-resources/src/utils.ts
@@ -220,7 +220,6 @@ export async function getWorkspaces (): Promise<Workspace[]> {
body: serialize(request)
})
const result: Response<any> = await response.json()
- console.log(result)
if (result.error != null) {
throw new PlatformError(result.error)
}
diff --git a/plugins/tracker-resources/src/components/issues/IssuesList.svelte b/plugins/tracker-resources/src/components/issues/IssuesList.svelte
index 2d417ced08..c902d2f4d3 100644
--- a/plugins/tracker-resources/src/components/issues/IssuesList.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuesList.svelte
@@ -86,8 +86,6 @@
let currentTeam: Team | undefined
let personPresenter: AttributeModel
let isCollapsedMap: Record<any, boolean> = {}
- let varsStyle: string = ''
- let propsWidth: Record<string, number> = { groupBy: 0 }
let itemModels: AttributeModel[]
let isFilterUpdate = false
let groupedIssuesBeforeFilter = groupedIssues
@@ -196,20 +194,9 @@
personPresenter = p
})
$: buildModel({ client, _class, keys: itemsConfig, lookup: options.lookup }).then((res) => (itemModels = res))
- $: if (itemModels) {
- for (const item of itemModels) if (item.props?.fixed !== undefined) propsWidth[item.key] = 0
- }
- $: if (propsWidth) {
- varsStyle = ''
- for (const key in propsWidth) varsStyle += `--fixed-${key}: ${propsWidth[key]}px;`
- }
-
- const checkWidth = (key: string, result: CustomEvent): void => {
- if (result !== undefined) propsWidth[key] = result.detail
- }
</script>
-<div class="issueslist-container" style={varsStyle}>
+<div class="issueslist-container">
{#each categories as category}
{@const items = groupedIssues[category] ?? []}
{@const limited = limitGroup(category, groupedIssues, categoryLimit) ?? []}
@@ -217,12 +204,7 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="flex-between categoryHeader row" on:click={() => handleCollapseCategory(toCat(category))}>
<div class="flex-row-center gap-2 clear-mins">
- <FixedColumn
- width={propsWidth.groupBy}
- key={'groupBy'}
- justify={'left'}
- on:update={(result) => checkWidth('groupBy', result)}
- >
+ <FixedColumn key={'issuelist_groupBy'} justify={'left'}>
{#if groupByKey === 'assignee' && personPresenter}
<svelte:component
this={personPresenter.presenter}
@@ -256,12 +238,7 @@
/>
{/if}
</FixedColumn>
- <FixedColumn
- width={propsWidth.statistics}
- key={'statistics'}
- justify={'left'}
- on:update={(result) => checkWidth('statistics', result)}
- >
+ <FixedColumn key={'issuelist_statistics'} justify={'left'}>
<IssueStatistics issues={groupedIssues[category]} />
</FixedColumn>
{#if limited.length < items.length}
@@ -303,10 +280,6 @@
checked={selectedObjectIdsSet.has(docObject._id)}
{statuses}
{currentTeam}
- {propsWidth}
- on:fitting={(ev) => {
- if (ev.detail !== undefined) propsWidth = ev.detail
- }}
on:check={(ev) => dispatch('check', { docs: ev.detail.docs, value: ev.detail.value })}
on:contextmenu={(event) =>
handleMenuOpened(
diff --git a/plugins/tracker-resources/src/components/issues/IssuesListItem.svelte b/plugins/tracker-resources/src/components/issues/IssuesListItem.svelte
index bb7f8e246e..ce194a384d 100644
--- a/plugins/tracker-resources/src/components/issues/IssuesListItem.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuesListItem.svelte
@@ -32,17 +32,9 @@
export let selected: boolean
export let statuses: WithLookup<IssueStatus>[]
export let currentTeam: Team | undefined
- export let propsWidth: Record<string, number>
const dispatch = createEventDispatcher()
- const checkWidth = (key: string, result: CustomEvent): void => {
- if (result !== undefined) {
- propsWidth[key] = result.detail
- dispatch('fitting', propsWidth)
- }
- }
-
$: compactMode = $deviceInfo.twoRows
</script>
@@ -78,12 +70,7 @@
<svelte:component this={attributeModel.presenter} />
{:else if (!groupByKey || attributeModel.props?.excludeByKey !== groupByKey) && !(attributeModel.props?.optional && compactMode)}
{#if attributeModel.props?.fixed}
- <FixedColumn
- width={propsWidth[attributeModel.key]}
- key={attributeModel.key}
- justify={attributeModel.props.fixed}
- on:update={(result) => checkWidth(attributeModel.key, result)}
- >
+ <FixedColumn key={`issue_${attributeModel.key}`} justify={attributeModel.props.fixed}>
<svelte:component
this={attributeModel.presenter}
value={getObjectValue(attributeModel.key, docObject) ?? ''}
diff --git a/plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte b/plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte
index f8e3d5df9e..8b457c5ba0 100644
--- a/plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte
@@ -70,16 +70,6 @@
function showContextMenu (ev: MouseEvent, object: Issue) {
showPopup(ContextMenu, { object }, getEventPositionElement(ev))
}
-
- let varsStyle: string = ''
- const propsWidth: Record<string, number> = { issue: 0 }
- $: if (propsWidth) {
- varsStyle = ''
- for (const key in propsWidth) varsStyle += `--fixed-${key}: ${propsWidth[key]}px;`
- }
- const checkWidth = (key: string, result: CustomEvent): void => {
- if (result !== undefined) propsWidth[key] = result.detail
- }
</script>
<ActionContext
@@ -96,7 +86,6 @@
class:is-dragging={index === draggingIndex}
class:is-dragged-over-up={draggingIndex !== null && index < draggingIndex && index === hoveringIndex}
class:is-dragged-over-down={draggingIndex !== null && index > draggingIndex && index === hoveringIndex}
- style={varsStyle}
animate:flip={{ duration: 400 }}
draggable={true}
on:click|self={openIssueCall}
@@ -113,12 +102,7 @@
<div class="flex-row-center ml-6 clear-mins gap-2">
<PriorityEditor value={issue} isEditable kind={'list'} size={'small'} justify={'center'} />
<span class="issuePresenter" on:click={openIssueCall}>
- <FixedColumn
- width={propsWidth.issue}
- key={'issue'}
- justify={'left'}
- on:update={(result) => checkWidth('issue', result)}
- >
+ <FixedColumn key={'subissue_issue'} justify={'left'}>
{#if currentTeam}
{getIssueId(currentTeam, issue)}
{/if}
diff --git a/plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte b/plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte
index 1639bc7438..da202ffdfd 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte
@@ -32,16 +32,6 @@
}
const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {})
-
- let varsStyle: string = ''
- const propsWidth: Record<string, number> = { issue: 0, estimation: 0, assignee: 0 }
- $: if (propsWidth) {
- varsStyle = ''
- for (const key in propsWidth) varsStyle += `--fixed-${key}: ${propsWidth[key]}px;`
- }
- const checkWidth = (key: string, result: CustomEvent): void => {
- if (result !== undefined) propsWidth[key] = result.detail
- }
</script>
<ListView count={issues.length}>
@@ -50,7 +40,6 @@
{@const currentTeam = teams.get(issue.space)}
<div
class="flex-between row"
- style={varsStyle}
on:contextmenu|preventDefault={(ev) => showContextMenu(ev, issue)}
on:mouseover={() => {
listProvider.updateFocus(issue)
@@ -61,12 +50,7 @@
>
<div class="flex-row-center clear-mins gap-2 p-2 flex-grow">
<span class="issuePresenter">
- <FixedColumn
- width={propsWidth.issue}
- key={'issue'}
- justify={'left'}
- on:update={(result) => checkWidth('issue', result)}
- >
+ <FixedColumn key={'estimation_issue'} justify={'left'}>
{#if currentTeam}
{getIssueId(currentTeam, issue)}
{/if}
@@ -77,12 +61,7 @@
</span>
</div>
- <FixedColumn
- width={propsWidth.assignee}
- key={'assignee'}
- justify={'right'}
- on:update={(result) => checkWidth('assignee', result)}
- >
+ <FixedColumn key={'estimation_issue_assignee'} justify={'right'}>
<UserBox
width={'100%'}
label={tracker.string.Assignee}
@@ -92,12 +71,7 @@
showNavigate={false}
/>
</FixedColumn>
- <FixedColumn
- width={propsWidth.estimation}
- key={'estimation'}
- justify={'left'}
- on:update={(result) => checkWidth('estimation', result)}
- >
+ <FixedColumn key={'estimation'} justify={'left'}>
<EstimationEditor value={issue} kind={'list'} />
</FixedColumn>
</div>
diff --git a/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte b/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte
index 794bf3e3ef..713e3f9ca4 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte
@@ -35,15 +35,6 @@
const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {})
- let varsStyle: string = ''
- const propsWidth: Record<string, number> = { issue: 0, assignee: 0, reported: 0, date: 0 }
- $: if (propsWidth) {
- varsStyle = ''
- for (const key in propsWidth) varsStyle += `--fixed-${key}: ${propsWidth[key]}px;`
- }
- const checkWidth = (key: string, result: CustomEvent): void => {
- if (result !== undefined) propsWidth[key] = result.detail
- }
const toTeamId = (ref: Ref<Space>) => ref as Ref<Team>
function editSpendReport (
@@ -72,7 +63,6 @@
{@const currentTeam = teams.get(toTeamId(report.space))}
<div
class="flex-between row"
- style={varsStyle}
on:contextmenu|preventDefault={(ev) => showContextMenu(ev, report)}
on:mouseover={() => {
listProvider.updateFocus(report)
@@ -84,12 +74,7 @@
>
<div class="flex-row-center clear-mins gap-2 p-2 flex-grow">
<span class="issuePresenter">
- <FixedColumn
- width={propsWidth.issue}
- key={'issue'}
- justify={'left'}
- on:update={(result) => checkWidth('issue', result)}
- >
+ <FixedColumn key={'tmiespend_issue'} justify={'left'}>
{#if currentTeam && report.$lookup?.attachedTo}
{getIssueId(currentTeam, report.$lookup?.attachedTo)}
{/if}
@@ -101,12 +86,7 @@
</span>
{/if}
</div>
- <FixedColumn
- width={propsWidth.assignee}
- key={'assignee'}
- justify={'left'}
- on:update={(result) => checkWidth('assignee', result)}
- >
+ <FixedColumn key={'timespend_assignee'} justify={'left'}>
<UserBox
width={'100%'}
label={tracker.string.Assignee}
@@ -117,22 +97,12 @@
/>
</FixedColumn>
- <FixedColumn
- width={propsWidth.reported}
- key={'reported'}
- justify={'center'}
- on:update={(result) => checkWidth('reported', result)}
- >
+ <FixedColumn key={'timespend_reported'} justify={'center'}>
<div class="p-1">
<TimePresenter value={report.value} workDayLength={currentTeam?.workDayLength} />
</div>
</FixedColumn>
- <FixedColumn
- width={propsWidth.date}
- key={'date'}
- justify={'left'}
- on:update={(result) => checkWidth('date', result)}
- >
+ <FixedColumn key={'timespend_date'} justify={'left'}>
<DatePresenter value={report.date} />
</FixedColumn>
</div>
diff --git a/plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte b/plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte
index 4bea46987b..840a01bca6 100644
--- a/plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte
+++ b/plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte
@@ -86,16 +86,6 @@
// showPopup(ContextMenu, { object }, getEventPositionElement(ev))
}
- let varsStyle: string = ''
- const propsWidth: Record<string, number> = { issue: 0 }
- $: if (propsWidth) {
- varsStyle = ''
- for (const key in propsWidth) varsStyle += `--fixed-${key}: ${propsWidth[key]}px;`
- }
- const checkWidth = (key: string, result: CustomEvent): void => {
- if (result !== undefined) propsWidth[key] = result.detail
- }
-
export function getIssueTemplateId (team: string, issue: IssueTemplateChild): string {
return `${team}-${issues.findIndex((it) => it.id === issue.id)}`
}
@@ -114,7 +104,6 @@
class:is-dragging={index === draggingIndex}
class:is-dragged-over-up={draggingIndex !== null && index < draggingIndex && index === hoveringIndex}
class:is-dragged-over-down={draggingIndex !== null && index > draggingIndex && index === hoveringIndex}
- style={varsStyle}
animate:flip={{ duration: 400 }}
draggable={true}
on:click|self={(evt) => openIssue(evt, issue)}
@@ -142,12 +131,7 @@
/>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<span class="issuePresenter" on:click={(evt) => openIssue(evt, issue)}>
- <FixedColumn
- width={propsWidth.issue}
- key={'issue'}
- justify={'left'}
- on:update={(result) => checkWidth('issue', result)}
- >
+ <FixedColumn key={'issue_template_issue'} justify={'left'}>
{getIssueTemplateId(teamId, issue)}
</FixedColumn>
</span>
diff --git a/plugins/view-resources/src/components/FixedColumn.svelte b/plugins/view-resources/src/components/FixedColumn.svelte
index c20a8ee6d3..9d4fc18d58 100644
--- a/plugins/view-resources/src/components/FixedColumn.svelte
+++ b/plugins/view-resources/src/components/FixedColumn.svelte
@@ -15,24 +15,34 @@
-->
<script lang="ts">
import { resizeObserver } from '@hcengineering/ui'
- import { createEventDispatcher } from 'svelte'
+ import { afterUpdate, onDestroy } from 'svelte'
+ import { fixedWidthStore } from '../utils'
- export let width: number | undefined = 0
export let key: string
export let justify: string = ''
-
- const dispatch = createEventDispatcher()
+ let prevKey = key
let cWidth: number = 0
- $: if (cWidth > (width ?? 0)) {
- width = cWidth
- dispatch('update', cWidth)
+
+ afterUpdate(() => {
+ if (prevKey !== key) {
+ $fixedWidthStore[prevKey] = 0
+ prevKey = key
+ }
+ })
+
+ $: if (cWidth > ($fixedWidthStore[key] ?? 0)) {
+ $fixedWidthStore[key] = cWidth
}
+
+ onDestroy(() => {
+ $fixedWidthStore[key] = 0
+ })
</script>
<div
class="flex-no-shrink"
- style="{justify !== '' ? `text-align: ${justify}; ` : ''} min-width: var(--fixed-{key});"
+ style="{justify !== '' ? `text-align: ${justify}; ` : ''} min-width: {$fixedWidthStore[key] ?? 0}px;"
use:resizeObserver={(element) => {
if (element.clientWidth > cWidth) {
cWidth = element.clientWidth
diff --git a/plugins/view-resources/src/utils.ts b/plugins/view-resources/src/utils.ts
index a4a4385201..6c6dbcadb4 100644
--- a/plugins/view-resources/src/utils.ts
+++ b/plugins/view-resources/src/utils.ts
@@ -39,6 +39,7 @@ import {
} from '@hcengineering/ui'
import type { BuildModelOptions, Viewlet } from '@hcengineering/view'
import view, { AttributeModel, BuildModelKey } from '@hcengineering/view'
+import { writable } from 'svelte/store'
import plugin from './plugin'
/**
@@ -492,3 +493,7 @@ export function getActiveViewletId (): Ref<Viewlet> | null {
const key = makeViewletKey()
return localStorage.getItem(key) as Ref<Viewlet> | null
}
+
+export type FixedWidthStore = Record<string, number>
+
+export const fixedWidthStore = writable<FixedWidthStore>({})