diff --git a/models/board/src/plugin.ts b/models/board/src/plugin.ts index 06ed884dd8..bf77a81e28 100644 --- a/models/board/src/plugin.ts +++ b/models/board/src/plugin.ts @@ -25,7 +25,6 @@ export default mergeIds(boardId, board, { component: { CreateBoard: '' as AnyComponent, CreateCard: '' as AnyComponent, - EditCard: '' as AnyComponent, KanbanCard: '' as AnyComponent, CardPresenter: '' as AnyComponent, TemplatesIcon: '' as AnyComponent, diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss index aad35cd93a..5df57b7477 100644 --- a/packages/theme/styles/_layouts.scss +++ b/packages/theme/styles/_layouts.scss @@ -172,6 +172,9 @@ p:last-child { margin-block-end: 0; } .justify-end { justify-content: flex-end; } .items-baseline { align-items: baseline; } +.flex-gap-3 {gap: .75rem;} +.flex-gap-1 {gap: .25rem;} + .flex-presenter, .inline-presenter { flex-wrap: nowrap; cursor: pointer; @@ -313,6 +316,9 @@ p:last-child { margin-block-end: 0; } .pr-4 { padding-right: 1rem; } .pr-24 { padding-right: 6rem; } +.p-2 { padding: .5rem; } +.p-3 { padding: .75rem; } +.p-6 { padding: 1.5rem; } .p-10 { padding: 2.5rem; } /* --------- */ @@ -356,6 +362,7 @@ p:last-child { margin-block-end: 0; } .h-2 { height: .5rem; } .h-9 { height: 2.25rem; } .w-full { width: 100%; } +.w-9 { width: 2.25rem; } .w-85 {width: 21.25rem; } .w-165 {width: 41.25rem; } .min-w-0 { min-width: 0; } @@ -416,11 +423,7 @@ a.no-line { .pointer-events-none { pointer-events: none; } /* Text */ -.text-sm { font-size: .75rem; } -.text-md { font-size: .8125rem; } -.text-lg { font-size: 1.125rem; } -.font-normal { font-weight: 400; } -.font-medium { font-weight: 500; } + .fs-title { font-weight: 500; font-size: 1rem; @@ -434,6 +437,11 @@ a.no-line { color: var(--theme-content-trans-color); user-select: none; } +.text-sm { font-size: .75rem; } +.text-md { font-size: .8125rem; } +.text-lg { font-size: 1.125rem; } +.font-normal { font-weight: 400; } +.font-medium { font-weight: 500; } .fs-bold { font-weight: 500; } .uppercase { text-transform: uppercase; } .text-left { text-align: left; } @@ -529,6 +537,8 @@ a.no-line { .red-color { color: var(--highlight-red); } +.border-radius-3 {border-radius: 0.75rem;} +.border-bg-accent {border: 1px solid var(--theme-bg-accent-color);} .border-primary-button { border-color: var(--primary-button-border); } .border-button-enabled { border: 1px solid var(--theme-button-border-enabled); } .bottom-divider { border-bottom: 1px solid var(--theme-menu-divider); } diff --git a/plugins/activity-resources/src/components/Activity.svelte b/plugins/activity-resources/src/components/Activity.svelte index 2f879d931f..44d9b6edd0 100644 --- a/plugins/activity-resources/src/components/Activity.svelte +++ b/plugins/activity-resources/src/components/Activity.svelte @@ -24,6 +24,7 @@ export let object: Doc export let fullSize: boolean = false + export let showCommenInput: boolean = true export let transparent: boolean = false let txes: DisplayTx[] = [] @@ -39,7 +40,7 @@ const descriptors = createQuery() $: descriptors.query(activity.class.TxViewlet, {}, (result) => { viewlets = new Map(result.map((r) => [activityKey(r.objectClass, r.txClass), r])) - + editable = new Map(result.map(it => [it.objectClass, it.editable ?? false])) }) @@ -78,9 +79,11 @@ {/if} -
- -
+ {#if showCommenInput} +
+ +
+ {/if} {:else} @@ -105,9 +108,11 @@ -
- -
+ {#if showCommenInput} +
+ +
+ {/if} {/if} diff --git a/plugins/board-resources/src/components/KanbanCard.svelte b/plugins/board-resources/src/components/KanbanCard.svelte index 76282aa8a6..705efea31d 100644 --- a/plugins/board-resources/src/components/KanbanCard.svelte +++ b/plugins/board-resources/src/components/KanbanCard.svelte @@ -20,7 +20,6 @@ import type { WithLookup } from '@anticrm/core' import notification from '@anticrm/notification' import { ActionIcon, Component, IconMoreH, showPanel, showPopup } from '@anticrm/ui' - import view from '@anticrm/view' import { ContextMenu } from '@anticrm/view-resources' import board from '../plugin' @@ -33,11 +32,11 @@ } function showLead () { - showPanel(view.component.EditDoc, object._id, object._class, 'middle') + showPanel(board.component.EditCard, object._id, object._class, 'middle') } -
+
{object.title}
@@ -56,7 +55,7 @@ />
-
+
{#if (object.attachments ?? 0) > 0}
@@ -72,14 +71,14 @@ .card-container { display: flex; flex-direction: column; - padding: .5rem 1rem; + padding: 0.5rem 1rem; background-color: var(--board-card-bg-color); border: 1px solid var(--board-card-bg-color); - border-radius: .25rem; + border-radius: 0.25rem; user-select: none; - &:hover { - background-color: var(--board-card-bg-hover); + &:hover { + background-color: var(--board-card-bg-hover); } &.draggable { cursor: grab; diff --git a/plugins/board-resources/src/components/TemplatesIcon.svelte b/plugins/board-resources/src/components/TemplatesIcon.svelte index c6cad3a516..79939d7fec 100644 --- a/plugins/board-resources/src/components/TemplatesIcon.svelte +++ b/plugins/board-resources/src/components/TemplatesIcon.svelte @@ -12,6 +12,6 @@ width: 100%; height: 100%; color: #fff; - background-color: #4474F6; + background-color: #4474f6; } - \ No newline at end of file + diff --git a/plugins/board-resources/src/components/editor/CardActions.svelte b/plugins/board-resources/src/components/editor/CardActions.svelte new file mode 100644 index 0000000000..b7b0b7eb0f --- /dev/null +++ b/plugins/board-resources/src/components/editor/CardActions.svelte @@ -0,0 +1,43 @@ + + + +{#if value} +
+ {#each actionGroups as group} +
+
+ {/each} +
+{/if} diff --git a/plugins/board-resources/src/components/editor/CardActivity.svelte b/plugins/board-resources/src/components/editor/CardActivity.svelte new file mode 100644 index 0000000000..324f038adf --- /dev/null +++ b/plugins/board-resources/src/components/editor/CardActivity.svelte @@ -0,0 +1,59 @@ + + + +{#if value !== undefined} +
+ + +
+
+ +
+
+
+
+
+
+
+ +
+
+ {#if isActivityShown === true} + + + + {/if} +
+{/if} diff --git a/plugins/board-resources/src/components/editor/CardFields.svelte b/plugins/board-resources/src/components/editor/CardFields.svelte new file mode 100644 index 0000000000..18cd5b4331 --- /dev/null +++ b/plugins/board-resources/src/components/editor/CardFields.svelte @@ -0,0 +1,24 @@ + + + +{#if value} +
+{/if} diff --git a/plugins/board-resources/src/models/CardAction.ts b/plugins/board-resources/src/models/CardAction.ts new file mode 100644 index 0000000000..9e573b49bc --- /dev/null +++ b/plugins/board-resources/src/models/CardAction.ts @@ -0,0 +1,17 @@ +import { Card } from '@anticrm/board' +import { Asset, IntlString } from '@anticrm/platform' +import { AnySvelteComponent } from '@anticrm/ui' + +export interface CardActionGroup { + actions: CardAction[] + hint?: IntlString + label: IntlString +} + +export interface CardAction { + hint?: IntlString + icon: Asset | AnySvelteComponent + isTransparent?: boolean + label: IntlString + handler?: (card: Card) => void +} diff --git a/plugins/board-resources/src/plugin.ts b/plugins/board-resources/src/plugin.ts index f0382d75ba..78fe882724 100644 --- a/plugins/board-resources/src/plugin.ts +++ b/plugins/board-resources/src/plugin.ts @@ -41,17 +41,35 @@ export default mergeIds(boardId, board, { Assignee: '' as IntlString, ManageBoardStatuses: '' as IntlString, Description: '' as IntlString, + DescriptionPlaceholder: '' as IntlString, Location: '' as IntlString, Members: '' as IntlString, BoardCreateLabel: '' as IntlString, - Settings: '' as IntlString + Settings: '' as IntlString, + InList: '' as IntlString, + AddToCard: '' as IntlString, + Labels: '' as IntlString, + Checklist: '' as IntlString, + Dates: '' as IntlString, + Attachments: '' as IntlString, + CustomFields: '' as IntlString, + Automation: '' as IntlString, + AddButton: '' as IntlString, + Actions: '' as IntlString, + Move: '' as IntlString, + Copy: '' as IntlString, + MakeTemplate: '' as IntlString, + Watch: '' as IntlString, + Archive: '' as IntlString, + HideDetails: '' as IntlString, + ShowDetails: '' as IntlString }, component: { CreateCustomer: '' as AnyComponent, CardsPresenter: '' as AnyComponent, Boards: '' as AnyComponent, + EditCard: '' as AnyComponent, Members: '' as AnyComponent, Settings: '' as AnyComponent - } }) diff --git a/plugins/board-resources/src/utils/CardActionUtils.ts b/plugins/board-resources/src/utils/CardActionUtils.ts new file mode 100644 index 0000000000..39d7fb8a01 --- /dev/null +++ b/plugins/board-resources/src/utils/CardActionUtils.ts @@ -0,0 +1,86 @@ +import { Card } from '@anticrm/board' +import { IconAdd, IconAttachment } from '@anticrm/ui' +import { CardAction, CardActionGroup } from '../models/CardAction' +import board from '../plugin' + +export const MembersAction: CardAction = { + icon: board.icon.Card, + label: board.string.Members +} + +export const LabelsAction: CardAction = { + icon: board.icon.Card, + label: board.string.Labels +} + +export const ChecklistAction: CardAction = { + icon: board.icon.Card, + label: board.string.Checklist +} + +export const DatesAction: CardAction = { + icon: board.icon.Card, + label: board.string.Dates +} + +export const AttachmentsAction: CardAction = { + icon: IconAttachment, + label: board.string.Attachments +} + +export const CustomFieldsAction: CardAction = { + icon: board.icon.Card, + label: board.string.CustomFields +} + +export const AddButtonAction: CardAction = { + icon: IconAdd, + isTransparent: true, + label: board.string.AddButton +} + +export const MoveAction: CardAction = { + icon: board.icon.Card, + label: board.string.Move +} + +export const CopyAction: CardAction = { + icon: board.icon.Card, + label: board.string.Copy +} + +export const MakeTemplateAction: CardAction = { + icon: board.icon.Card, + label: board.string.MakeTemplate +} + +export const WatchAction: CardAction = { + icon: board.icon.Card, + label: board.string.Watch +} + +export const ArchiveAction: CardAction = { + icon: board.icon.Card, + label: board.string.Archive +} + +export const getEditorCardActionGroups = (card: Card): CardActionGroup[] => { + if (card === undefined) { + return [] + } + + return [ + { + label: board.string.AddToCard, + actions: [MembersAction, LabelsAction, ChecklistAction, DatesAction, AttachmentsAction, CustomFieldsAction] + }, + { + label: board.string.Automation, + actions: [AddButtonAction] + }, + { + label: board.string.Actions, + actions: [MoveAction, CopyAction, MakeTemplateAction, WatchAction, ArchiveAction] + } + ] +}