diff --git a/packages/kanban/src/components/Kanban.svelte b/packages/kanban/src/components/Kanban.svelte index 26f23ede3b..52dee677b9 100644 --- a/packages/kanban/src/components/Kanban.svelte +++ b/packages/kanban/src/components/Kanban.svelte @@ -281,73 +281,71 @@ } -
-
- -
- {#each states as state, si} - {@const stateObjects = getStateObjects(objects, state, dragCard)} +
+ +
+ {#each states as state, si} + {@const stateObjects = getStateObjects(objects, state, dragCard)} -
panelDragOver(event, state)} - on:drop={() => { - move(state._id) - isDragging = false - }} - > - {#if $$slots.header !== undefined} - - {:else} -
-
-
-
- {state.title} -
+
panelDragOver(event, state)} + on:drop={() => { + move(state._id) + isDragging = false + }} + > + {#if $$slots.header !== undefined} + + {:else} +
+
+
+
+ {state.title}
- {/if} - - - {#each stateObjects as object} - {@const dragged = isDragging && object.it._id === dragCard?._id} +
+ {/if} + + + {#each stateObjects as object} + {@const dragged = isDragging && object.it._id === dragCard?._id} +
cardDragOver(evt, object)} + on:drop|preventDefault={(evt) => cardDrop(evt, object)} + >
cardDragOver(evt, object)} - on:drop|preventDefault={(evt) => cardDrop(evt, object)} + class="card-container" + class:selection={selection !== undefined ? objects[selection]?._id === object.it._id : false} + class:checked={checkedSet.has(object.it._id)} + on:mouseover={() => dispatch('obj-focus', object.it)} + on:focus={() => {}} + on:contextmenu={(evt) => showMenu(evt, object)} + draggable={true} + class:draggable={true} + on:dragstart + on:dragend + class:dragged + on:dragstart={() => onDragStart(object, state)} + on:dragend={() => { + isDragging = false + }} > -
dispatch('obj-focus', object.it)} - on:focus={() => {}} - on:contextmenu={(evt) => showMenu(evt, object)} - draggable={true} - class:draggable={true} - on:dragstart - on:dragend - class:dragged - on:dragstart={() => onDragStart(object, state)} - on:dragend={() => { - isDragging = false - }} - > - -
+
- {/each} - - -
- {/each} - -
- -
+
+ {/each} + + +
+ {/each} + +
+ {#if isDragging} {/if} @@ -362,7 +360,6 @@ .kanban-content { display: flex; padding: 1.5rem 2rem 0; - height: 100%; } .scrollable { @@ -416,9 +413,7 @@ .panel-container { display: flex; flex-direction: column; - align-items: stretch; width: 20rem; - height: 100%; background-color: transparent; border: 1px solid transparent; border-radius: 0.25rem; @@ -428,7 +423,6 @@ flex-direction: column; height: 4rem; min-height: 4rem; - user-select: none; .bar { height: 0.375rem; diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss index f39af0cd13..7b48e19055 100644 --- a/packages/theme/styles/_layouts.scss +++ b/packages/theme/styles/_layouts.scss @@ -221,7 +221,7 @@ input.search { min-width: 0; font-weight: 500; text-align: left; - color: var(--theme-content-accent-color); + color: var(--accent-color); overflow: hidden; visibility: visible; @@ -259,6 +259,16 @@ input.search { align-items: baseline; .icon { transform: translateY(.2rem); } } +// Presenters on the card +.card-container .flex-presenter, +.card-container .inline-presenter { + .icon { display: none; } + .label { + font-size: .75rem; + color: var(--dark-color); + } + &:hover .label { color: var(--content-color); } +} .buttons-group { display: grid; diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte index 2a4ab52d24..47cab7a391 100644 --- a/packages/ui/src/components/Button.svelte +++ b/packages/ui/src/components/Button.svelte @@ -298,7 +298,7 @@ &.link-bordered { padding: 0 0.375rem; color: var(--accent-color); - border-color: var(--button-border-color); + border-color: var(--divider-color); &:hover { color: var(--accent-color); background-color: var(--button-bg-hover); diff --git a/packages/ui/src/components/ProgressCircle.svelte b/packages/ui/src/components/ProgressCircle.svelte new file mode 100644 index 0000000000..279435b690 --- /dev/null +++ b/packages/ui/src/components/ProgressCircle.svelte @@ -0,0 +1,67 @@ + + + + + + + + + diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index b1f1ec66f2..3eea89c7cd 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -54,6 +54,7 @@ export { default as Tooltip } from './components/Tooltip.svelte' export { default as TooltipInstance } from './components/TooltipInstance.svelte' export { default as CheckBox } from './components/CheckBox.svelte' export { default as Progress } from './components/Progress.svelte' +export { default as ProgressCircle } from './components/ProgressCircle.svelte' export { default as Tabs } from './components/Tabs.svelte' export { default as ScrollBox } from './components/ScrollBox.svelte' export { default as PopupMenu } from './components/PopupMenu.svelte' diff --git a/plugins/tracker-resources/src/components/PrioritySelector.svelte b/plugins/tracker-resources/src/components/PrioritySelector.svelte index 166a4f39d8..0474a4fb07 100644 --- a/plugins/tracker-resources/src/components/PrioritySelector.svelte +++ b/plugins/tracker-resources/src/components/PrioritySelector.svelte @@ -32,6 +32,7 @@ const prioritiesInfo = defaultPriorities.map((p) => ({ id: p, ...issuePriorities[p] })) const handlePriorityEditorOpened = (event: MouseEvent) => { + event.stopPropagation() if (!isEditable) { return } diff --git a/plugins/tracker-resources/src/components/ProjectSelector.svelte b/plugins/tracker-resources/src/components/ProjectSelector.svelte index 76efee134d..89ca115ac5 100644 --- a/plugins/tracker-resources/src/components/ProjectSelector.svelte +++ b/plugins/tracker-resources/src/components/ProjectSelector.svelte @@ -78,6 +78,7 @@ } const handleProjectEditorOpened = (event: MouseEvent) => { + event.stopPropagation() if (!isEditable) { return } diff --git a/plugins/tracker-resources/src/components/issues/Board.svelte b/plugins/tracker-resources/src/components/issues/Board.svelte index e102899a15..d495b07cbd 100644 --- a/plugins/tracker-resources/src/components/issues/Board.svelte +++ b/plugins/tracker-resources/src/components/issues/Board.svelte @@ -17,8 +17,8 @@ import { Class, Doc, FindOptions, Ref, SortingOrder, WithLookup } from '@anticrm/core' import { Kanban, TypeState } from '@anticrm/kanban' import { createQuery } from '@anticrm/presentation' - import { Issue, Team } from '@anticrm/tracker' - import { Button, Icon, IconAdd, showPopup, Tooltip } from '@anticrm/ui' + import type { Issue, IssueStatus, Team } from '@anticrm/tracker' + import { Button, Icon, IconAdd, showPopup, Tooltip, showPanel } from '@anticrm/ui' import { focusStore, ListSelectionProvider, SelectDirection, selectionStore } from '@anticrm/view-resources' import ActionContext from '@anticrm/view-resources/src/components/ActionContext.svelte' import Menu from '@anticrm/view-resources/src/components/Menu.svelte' @@ -29,6 +29,7 @@ import IssuePresenter from './IssuePresenter.svelte' import PriorityEditor from './PriorityEditor.svelte' import ProjectEditor from '../projects/ProjectEditor.svelte' + import SubIssuesSelector from './edit/SubIssuesSelector.svelte' export let currentSpace: Ref export let baseMenuClass: Ref> | undefined = undefined @@ -43,17 +44,19 @@ currentTeam = res.shift() }) + let issueStatuses: WithLookup[] | undefined let states: TypeState[] | undefined $: statusesQuery.query( tracker.class.IssueStatus, { attachedTo: currentSpace }, - (issueStatuses) => { - states = issueStatuses.map((status) => ({ + (is) => { + states = is.map((status) => ({ _id: status._id, title: status.name, color: status.color ?? status.$lookup?.category?.color ?? 0, icon: status.$lookup?.category?.icon ?? undefined })) + issueStatuses = is }, { lookup: { category: tracker.class.IssueStatusCategory }, @@ -152,7 +155,12 @@ {@const issue = toIssue(object)} -
+
{ + showPanel(tracker.component.EditIssue, object._id, object._class, 'content') + }} + >
@@ -168,7 +176,10 @@ isEditable={true} />
-
+
+ {#if issue && issueStatuses && issue.subIssues > 0} + + {/if} import { Issue, IssuePriority } from '@anticrm/tracker' import { getClient } from '@anticrm/presentation' - import { Tooltip } from '@anticrm/ui' + import { tooltip } from '@anticrm/ui' import type { ButtonKind, ButtonSize } from '@anticrm/ui' import tracker from '../../plugin' import PrioritySelector from '../PrioritySelector.svelte' @@ -50,7 +50,7 @@ {#if value} {#if isEditable} - +
- +
{:else} {/if} diff --git a/plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte b/plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte new file mode 100644 index 0000000000..7e9fc5466f --- /dev/null +++ b/plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte @@ -0,0 +1,115 @@ + + + +{#if hasSubIssues} +
+ +
+{/if} diff --git a/plugins/tracker-resources/src/components/projects/ProjectEditor.svelte b/plugins/tracker-resources/src/components/projects/ProjectEditor.svelte index 46104f7433..a5122fa815 100644 --- a/plugins/tracker-resources/src/components/projects/ProjectEditor.svelte +++ b/plugins/tracker-resources/src/components/projects/ProjectEditor.svelte @@ -16,7 +16,7 @@ import { Ref } from '@anticrm/core' import { Issue, Project } from '@anticrm/tracker' import { getClient } from '@anticrm/presentation' - import { ButtonKind, ButtonShape, ButtonSize, Tooltip } from '@anticrm/ui' + import { ButtonKind, ButtonShape, ButtonSize, tooltip } from '@anticrm/ui' import { IntlString } from '@anticrm/platform' import tracker from '../../plugin' import ProjectSelector from '../ProjectSelector.svelte' @@ -52,7 +52,10 @@ {#if value.project || shouldShowPlaceholder} - +
- +
{/if}