mirror of
https://github.com/hcengineering/platform.git
synced 2025-04-13 03:40:48 +00:00
Fix Table display in Documents application and CreateIssue layout (#2372)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
4fcec640a4
commit
5cf3ae7846
@ -54,6 +54,13 @@
|
||||
import Quote from './icons/Quote.svelte'
|
||||
import Strikethrough from './icons/Strikethrough.svelte'
|
||||
import LinkPopup from './LinkPopup.svelte'
|
||||
import AddRowBefore from './icons/table/AddRowBefore.svelte'
|
||||
import AddRowAfter from './icons/table/AddRowAfter.svelte'
|
||||
import AddColBefore from './icons/table/AddColBefore.svelte'
|
||||
import AddColAfter from './icons/table/AddColAfter.svelte'
|
||||
import DeleteRow from './icons/table/DeleteRow.svelte'
|
||||
import DeleteCol from './icons/table/DeleteCol.svelte'
|
||||
import DeleteTable from './icons/table/DeleteTable.svelte'
|
||||
|
||||
export let documentId: string
|
||||
export let readonly = false
|
||||
@ -408,6 +415,7 @@
|
||||
const ops = [
|
||||
{
|
||||
id: '#addColumnBefore',
|
||||
icon: AddColBefore,
|
||||
label: textEditorPlugin.string.AddColumnBefore,
|
||||
action: () => editor.commands.addColumnBefore(),
|
||||
category: {
|
||||
@ -416,6 +424,7 @@
|
||||
},
|
||||
{
|
||||
id: '#addColumnAfter',
|
||||
icon: AddColAfter,
|
||||
label: textEditorPlugin.string.AddColumnAfter,
|
||||
action: () => editor.commands.addColumnAfter(),
|
||||
category: {
|
||||
@ -425,6 +434,7 @@
|
||||
|
||||
{
|
||||
id: '#deleteColumn',
|
||||
icon: DeleteCol,
|
||||
label: textEditorPlugin.string.DeleteColumn,
|
||||
action: () => editor.commands.deleteColumn(),
|
||||
category: {
|
||||
@ -433,6 +443,7 @@
|
||||
},
|
||||
{
|
||||
id: '#addRowBefore',
|
||||
icon: AddRowBefore,
|
||||
label: textEditorPlugin.string.AddRowBefore,
|
||||
action: () => editor.commands.addRowBefore(),
|
||||
category: {
|
||||
@ -441,6 +452,7 @@
|
||||
},
|
||||
{
|
||||
id: '#addRowAfter',
|
||||
icon: AddRowAfter,
|
||||
label: textEditorPlugin.string.AddRowAfter,
|
||||
action: () => editor.commands.addRowAfter(),
|
||||
category: {
|
||||
@ -449,6 +461,7 @@
|
||||
},
|
||||
{
|
||||
id: '#deleteRow',
|
||||
icon: DeleteRow,
|
||||
label: textEditorPlugin.string.DeleteRow,
|
||||
action: () => editor.commands.deleteRow(),
|
||||
category: {
|
||||
@ -457,6 +470,7 @@
|
||||
},
|
||||
{
|
||||
id: '#deleteTable',
|
||||
icon: DeleteTable,
|
||||
label: textEditorPlugin.string.DeleteTable,
|
||||
action: () => editor.commands.deleteTable(),
|
||||
category: {
|
||||
@ -589,7 +603,7 @@
|
||||
{#if activeModes.has('table')}
|
||||
<StyleButton
|
||||
icon={IconTable}
|
||||
iconProps={{ style: 'grid' }}
|
||||
iconProps={{ style: 'tableProps' }}
|
||||
size={buttonSize}
|
||||
on:click={tableOptions}
|
||||
showTooltip={{ label: textEditorPlugin.string.TableOptions }}
|
||||
|
||||
@ -32,53 +32,43 @@
|
||||
tabindex="0"
|
||||
on:click|preventDefault|stopPropagation
|
||||
>
|
||||
<div class="icon {size} flex">
|
||||
<Icon {icon} {size} {iconProps} />
|
||||
</div>
|
||||
<Icon {icon} {size} {iconProps} />
|
||||
</button>
|
||||
|
||||
<style lang="scss">
|
||||
.button {
|
||||
color: inherit;
|
||||
border-radius: 0.125rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0.75rem;
|
||||
color: var(--dark-color);
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
color: var(--dark-color);
|
||||
}
|
||||
&:hover .icon {
|
||||
&:hover {
|
||||
color: var(--accent-color);
|
||||
opacity: 1;
|
||||
}
|
||||
&:focus {
|
||||
color: var(--theme-caption-color);
|
||||
border: 1px solid var(--primary-button-focused-border);
|
||||
box-shadow: 0 0 0 3px var(--primary-button-outline);
|
||||
.icon {
|
||||
color: var(--theme-caption-color);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
background-color: var(--button-bg-hover);
|
||||
border-color: var(--button-border-hover);
|
||||
color: var(--caption-color);
|
||||
|
||||
.btn-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
background-color: var(--button-bg-color);
|
||||
border-color: var(--button-border-color);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
&.small {
|
||||
width: 1.143em;
|
||||
height: 1.143em;
|
||||
}
|
||||
&.medium {
|
||||
width: 1.429em;
|
||||
height: 1.429em;
|
||||
}
|
||||
&.large {
|
||||
width: 1.715em;
|
||||
height: 1.715em;
|
||||
}
|
||||
}
|
||||
.small {
|
||||
width: 1.143em;
|
||||
height: 1.143em;
|
||||
}
|
||||
.medium {
|
||||
width: 1.429em;
|
||||
height: 1.429em;
|
||||
}
|
||||
.large {
|
||||
width: 1.715em;
|
||||
height: 1.715em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -12,6 +12,8 @@
|
||||
export let showButtons = true
|
||||
export let buttonSize: IconSize = 'small'
|
||||
export let focus = false
|
||||
export let isScrollable: boolean = false
|
||||
export let maxHeight: 'max' | 'card' | 'limited' | string | undefined = undefined
|
||||
|
||||
let rawValue: string
|
||||
let oldContent = ''
|
||||
@ -38,7 +40,7 @@
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="antiComponent styled-box"
|
||||
class="antiComponent styled-box clear-mins"
|
||||
on:click={() => {
|
||||
if (focused) {
|
||||
textEditor?.focus()
|
||||
@ -52,7 +54,8 @@
|
||||
{placeholder}
|
||||
{showButtons}
|
||||
{buttonSize}
|
||||
isScrollable={false}
|
||||
{maxHeight}
|
||||
{isScrollable}
|
||||
bind:content={rawValue}
|
||||
bind:this={textEditor}
|
||||
on:focus={() => {
|
||||
@ -65,6 +68,7 @@
|
||||
}}
|
||||
on:value={(evt) => {
|
||||
rawValue = evt.detail
|
||||
dispatch('changeContent')
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
export let showButtons: boolean = true
|
||||
export let buttonSize: IconSize = 'small'
|
||||
export let hideExtraButtons: boolean = false
|
||||
export let maxHeight: 'max' | 'card' | string = 'max'
|
||||
export let maxHeight: 'max' | 'card' | 'limited' | string = 'max'
|
||||
export let previewLimit: number = 240
|
||||
export let previewUnlimit: boolean = false
|
||||
export let focusable: boolean = false
|
||||
@ -70,7 +70,7 @@
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="antiComponent styled-box"
|
||||
class="antiComponent styled-box clear-mins"
|
||||
class:emphasized
|
||||
class:emphasized-focus={(mode === Mode.Edit || alwaysEdit) && focused}
|
||||
on:click={() => {
|
||||
@ -103,6 +103,7 @@
|
||||
}}
|
||||
on:value={(evt) => {
|
||||
rawValue = evt.detail
|
||||
dispatch('changeContent')
|
||||
}}
|
||||
>
|
||||
{#if !alwaysEdit && !hideExtraButtons}
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
export let buttonSize: IconSize = 'large'
|
||||
export let isScrollable: boolean = true
|
||||
export let focusable: boolean = false
|
||||
export let maxHeight: 'max' | 'card' | string = 'max'
|
||||
export let maxHeight: 'max' | 'card' | 'limited' | string | undefined = undefined
|
||||
export let withoutTopBorder = false
|
||||
|
||||
let textEditor: TextEditor
|
||||
@ -58,7 +58,14 @@
|
||||
textEditor.focus()
|
||||
}
|
||||
|
||||
$: varsStyle = maxHeight === 'card' ? 'calc(70vh - 12.5rem)' : maxHeight === 'max' ? 'max-content' : maxHeight
|
||||
$: varsStyle =
|
||||
maxHeight === 'card'
|
||||
? 'calc(70vh - 12.5rem)'
|
||||
: maxHeight === 'limited'
|
||||
? '12.5rem'
|
||||
: maxHeight === 'max'
|
||||
? 'max-content'
|
||||
: maxHeight
|
||||
|
||||
let isFormatting = false
|
||||
let activeModes = new Set<FormatMode>()
|
||||
@ -140,7 +147,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="ref-container">
|
||||
<div class="ref-container clear-mins">
|
||||
{#if isFormatting}
|
||||
<div class="formatPanel buttons-group xsmall-gap mb-4" class:withoutTopBorder>
|
||||
<StyleButton
|
||||
@ -281,12 +288,13 @@
|
||||
.inputMsg {
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
color: var(--content-color);
|
||||
background-color: transparent;
|
||||
|
||||
:global(.ProseMirror) {
|
||||
min-height: 0;
|
||||
max-height: 100%;
|
||||
// max-height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
@ -19,14 +19,10 @@ export const tableExtensions = [
|
||||
Table.configure({
|
||||
resizable: false,
|
||||
HTMLAttributes: {
|
||||
class: 'antiTable editable '
|
||||
}
|
||||
}),
|
||||
TableRow.configure({
|
||||
HTMLAttributes: {
|
||||
class: 'antiTable-body__row'
|
||||
class: 'proseTable'
|
||||
}
|
||||
}),
|
||||
TableRow.configure({}),
|
||||
TableHeader.configure({}),
|
||||
TableCell.configure({})
|
||||
]
|
||||
|
||||
@ -1,25 +1,36 @@
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
export let style: 'table' | 'grid' = 'table'
|
||||
export let style: 'table' | 'grid' | 'tableProps' = 'table'
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
{#if style === 'table'}
|
||||
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M19.5,2.2h-15c-1.2,0-2.2,1-2.2,2.2v2v3v10c0,1.2,1,2.2,2.2,2.2h10h3h2c1.2,0,2.2-1,2.2-2.2V10V7V4.5C21.8,3.3,20.7,2.2,19.5,2.2z M3.8,4.5c0-0.4,0.3-0.8,0.8-0.8h15c0.4,0,0.8,0.3,0.8,0.8V7v0.2H3.8V6.5V4.5z M9.5,20.2V8.8h5v11.5H9.5z M3.8,19.5v-10V8.8H8v11.5H4.5C4.1,20.2,3.8,19.9,3.8,19.5z M20.2,19.5c0,0.4-0.3,0.8-0.8,0.8h-2H16V8.8h4.2V10V19.5z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M2 8C2 6.34315 3.34315 5 5 5H19C20.6569 5 22 6.34315 22 8V16C22 17.6569 20.6569 19 19 19H5C3.34315 19 2 17.6569 2 16V8ZM5 7H19C19.5523 7 20 7.44771 20 8V11H4V8C4 7.44772 4.44772 7 5 7ZM4 13V16C4 16.5523 4.44772 17 5 17H8V13H4ZM10 17H19C19.5523 17 20 16.5523 20 16V13H10V17Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
{:else if style === 'grid'}
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M20.5,1.8h-17c-1,0-1.8,0.8-1.8,1.8v17c0,1,0.8,1.8,1.8,1.8h17c1,0,1.8-0.8,1.8-1.8v-17C22.2,2.5,21.5,1.8,20.5,1.8z M9.2,14.2V9.8h5v4.5H9.2z M14.2,15.8v5h-5v-5H14.2z M3.2,9.8h4.5v4.5H3.2V9.8z M9.2,8.2v-5h5v5H9.2zM15.8,9.8h5v4.5h-5V9.8z M20.8,3.5v4.8h-5v-5h4.8C20.6,3.2,20.8,3.4,20.8,3.5z M3.5,3.2h4.2v5H3.2V3.5C3.2,3.4,3.4,3.2,3.5,3.2zM3.2,20.5v-4.8h4.5v5H3.5C3.4,20.8,3.2,20.6,3.2,20.5z M20.5,20.8h-4.8v-5h5v4.8C20.8,20.6,20.6,20.8,20.5,20.8z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M5 5C3.34315 5 2 6.34315 2 8V16C2 17.6569 3.34315 19 5 19H19C20.6569 19 22 17.6569 22 16V8C22 6.34315 20.6569 5 19 5H5ZM8 7H5C4.44772 7 4 7.44772 4 8V9H8V7ZM10 7V9H14V7H10ZM16 7V9H20V8C20 7.44771 19.5523 7 19 7H16ZM14 11H10V13H14V11ZM16 13V11H20V13H16ZM14 15H10V17H14V15ZM16 17V15H20V16C20 16.5523 19.5523 17 19 17H16ZM8 17V15H4V16C4 16.5523 4.44772 17 5 17H8ZM8 13V11H4V13H8Z"
|
||||
fill="currentColor"
|
||||
/></svg
|
||||
>
|
||||
/>
|
||||
</svg>
|
||||
{:else if style === 'tableProps'}
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M19.2,11.2C19,11,18.8,11,18.6,11c-0.2,0-0.4,0.1-0.5,0.3l-5.2,7.2c-0.1,0.1-0.1,0.3-0.1,0.4v2c0,0.4,0.3,0.8,0.8,0.8h2c0.2,0,0.5-0.1,0.6-0.3l5.5-7.5c0.2-0.3,0.2-0.8-0.1-1L19.2,11.2z M15.1,20.2h-0.9v-1l4.7-6.4l1.1,0.8L15.1,20.2z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
d="M19.5,2.2h-15c-1.2,0-2.2,1-2.2,2.2v2v3v10c0,1.2,1,2.2,2.2,2.2h7c0.4,0,0.8-0.3,0.8-0.8s-0.3-0.8-0.8-0.8h-2V8.8h5v4.1c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8V8.8h4.2V10v0.9c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8V10V7V4.5C21.8,3.3,20.7,2.2,19.5,2.2z M8,20.2H4.5c-0.4,0-0.8-0.3-0.8-0.8v-10V8.8H8V20.2z M3.8,7.2V6.5v-2c0-0.4,0.3-0.8,0.8-0.8h15c0.4,0,0.8,0.3,0.8,0.8V7v0.2H3.8z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
{/if}
|
||||
|
||||
@ -0,0 +1,20 @@
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M9.3,20.5v-17c0-1-0.8-1.8-1.7-1.8H3.5c-1,0-1.8,0.8-1.8,1.8v17c0,1,0.8,1.8,1.8,1.8h4.1C8.5,22.2,9.3,21.4,9.3,20.5zM7.8,14.1H3.2v-5h4.6V14.1z M3.7,3.2h3.6c0.3,0,0.5,0.2,0.5,0.5v4H3.2v-4C3.2,3.4,3.4,3.2,3.7,3.2z M3.7,20.7c-0.3,0-0.5-0.2-0.5-0.5v-4.6h4.6v4.6c0,0.3-0.2,0.5-0.5,0.5H3.7z"
|
||||
/>
|
||||
<path
|
||||
d="M21.7,17.9h-2.2v-2.2c0-0.4-0.3-0.8-0.8-0.8s-0.8,0.3-0.8,0.8V18h-2.2c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h2.2v2.1c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8v-2.3h2.2c0.4,0,0.8-0.3,0.8-0.8S22.1,17.9,21.7,17.9z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
d="M18.3,3.7l4,4c0.3,0.3,0.3,0.8,0,1.1l-4,4c-0.3,0.3-0.8,0.3-1.1,0c-0.3-0.3-0.3-0.8,0-1.1L19.9,9h-6.2C13.3,9,13,8.7,13,8.2c0-0.4,0.3-0.8,0.8-0.8h6.2l-2.7-2.7c-0.3-0.3-0.3-0.8,0-1.1S18,3.4,18.3,3.7z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
@ -0,0 +1,20 @@
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M9.3,20.5v-17c0-1-0.8-1.8-1.7-1.8H3.5c-1,0-1.8,0.8-1.8,1.8v17c0,1,0.8,1.8,1.8,1.8h4.1C8.5,22.2,9.3,21.4,9.3,20.5zM7.8,14.1H3.2v-5h4.6V14.1z M3.7,3.2h3.6c0.3,0,0.5,0.2,0.5,0.5v4H3.2v-4C3.2,3.4,3.4,3.2,3.7,3.2z M3.7,20.7c-0.3,0-0.5-0.2-0.5-0.5v-4.6h4.6v4.6c0,0.3-0.2,0.5-0.5,0.5H3.7z"
|
||||
/>
|
||||
<path
|
||||
d="M21.7,17.9h-2.2v-2.2c0-0.4-0.3-0.8-0.8-0.8s-0.8,0.3-0.8,0.8V18h-2.2c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h2.2v2.1c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8v-2.3h2.2c0.4,0,0.8-0.3,0.8-0.8S22.1,17.9,21.7,17.9z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
d="M17.2,3.7l-4,4c-0.3,0.3-0.3,0.8,0,1.1l4,4c0.3,0.3,0.8,0.3,1.1,0c0.3-0.3,0.3-0.8,0-1.1L15.6,9h6.2c0.4,0,0.8-0.3,0.8-0.8c0-0.4-0.3-0.8-0.8-0.8h-6.2l2.7-2.7c0.3-0.3,0.3-0.8,0-1.1S17.5,3.4,17.2,3.7z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
@ -0,0 +1,22 @@
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M22.3,7.5v-4c0-1-0.8-1.8-1.8-1.8h-17c-1,0-1.8,0.8-1.8,1.8v4.1c0,1,0.8,1.8,1.8,1.8h17.1C21.5,9.3,22.3,8.5,22.3,7.5z M9.2,7.8V3.2h5v4.6H9.2z M3.7,3.2h4v4.6h-4c-0.3,0-0.5-0.2-0.5-0.5V3.7C3.2,3.4,3.4,3.2,3.7,3.2zM20.8,7.3c0,0.3-0.2,0.5-0.5,0.5h-4.6V3.2h4.6c0.3,0,0.5,0.2,0.5,0.5V7.3z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
d="M21.7,17.9h-2.2v-2.2c0-0.4-0.3-0.8-0.8-0.8s-0.8,0.3-0.8,0.8V18h-2.2c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h2.2v2.1c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8v-2.3h2.2c0.4,0,0.8-0.3,0.8-0.8S22.1,17.9,21.7,17.9z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
d="M13,18.3l-4,4c-0.3,0.3-0.8,0.3-1.1,0l-4-4c-0.3-0.3-0.3-0.8,0-1.1c0.3-0.3,0.8-0.3,1.1,0l2.7,2.7v-6.2C7.7,13.3,8,13,8.4,13c0.4,0,0.8,0.3,0.8,0.8v6.2l2.7-2.7c0.3-0.3,0.8-0.3,1.1,0S13.3,18,13,18.3z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
@ -0,0 +1,22 @@
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M22.3,7.5v-4c0-1-0.8-1.8-1.8-1.8h-17c-1,0-1.8,0.8-1.8,1.8v4.1c0,1,0.8,1.8,1.8,1.8h17.1C21.5,9.3,22.3,8.5,22.3,7.5z M9.2,7.8V3.2h5v4.6H9.2z M3.7,3.2h4v4.6h-4c-0.3,0-0.5-0.2-0.5-0.5V3.7C3.2,3.4,3.4,3.2,3.7,3.2zM20.8,7.3c0,0.3-0.2,0.5-0.5,0.5h-4.6V3.2h4.6c0.3,0,0.5,0.2,0.5,0.5V7.3z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
d="M21.7,17.9h-2.2v-2.2c0-0.4-0.3-0.8-0.8-0.8s-0.8,0.3-0.8,0.8V18h-2.2c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h2.2v2.1c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8v-2.3h2.2c0.4,0,0.8-0.3,0.8-0.8S22.1,17.9,21.7,17.9z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
d="M13,17.2l-4-4c-0.3-0.3-0.8-0.3-1.1,0l-4,4c-0.3,0.3-0.3,0.8,0,1.1c0.3,0.3,0.8,0.3,1.1,0l2.7-2.7v6.2c0,0.4,0.3,0.8,0.8,0.8c0.4,0,0.8-0.3,0.8-0.8v-6.2l2.7,2.7c0.3,0.3,0.8,0.3,1.1,0S13.3,17.5,13,17.2z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
@ -0,0 +1,15 @@
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M9.3,20.5v-17c0-1-0.8-1.8-1.7-1.8H3.5c-1,0-1.8,0.8-1.8,1.8v17c0,1,0.8,1.8,1.8,1.8h4.1C8.5,22.2,9.3,21.4,9.3,20.5zM7.8,14.1H3.2v-5h4.6V14.1z M3.7,3.2h3.6c0.3,0,0.5,0.2,0.5,0.5v4H3.2v-4C3.2,3.4,3.4,3.2,3.7,3.2z M3.7,20.7c-0.3,0-0.5-0.2-0.5-0.5v-4.6h4.6v4.6c0,0.3-0.2,0.5-0.5,0.5H3.7z"
|
||||
/>
|
||||
<path
|
||||
d="M21.8,20.7l-2-2l1.9-1.9c0.3-0.3,0.3-0.8,0-1.1c-0.3-0.3-0.7-0.3-1.1,0l-1.9,1.9l-1.9-1.9c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l1.9,1.9l-2,2c-0.3,0.3-0.3,0.8,0,1.1s0.8,0.3,1.1,0l2-2l2,2c0.3,0.3,0.8,0.3,1.1,0S22.1,21,21.8,20.7z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
@ -0,0 +1,17 @@
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M22.3,7.5v-4c0-1-0.8-1.8-1.8-1.8h-17c-1,0-1.8,0.8-1.8,1.8v4.1c0,1,0.8,1.8,1.8,1.8h17.1C21.5,9.3,22.3,8.5,22.3,7.5z M9.2,7.8V3.2h5v4.6H9.2z M3.7,3.2h4v4.6h-4c-0.3,0-0.5-0.2-0.5-0.5V3.7C3.2,3.4,3.4,3.2,3.7,3.2zM20.8,7.3c0,0.3-0.2,0.5-0.5,0.5h-4.6V3.2h4.6c0.3,0,0.5,0.2,0.5,0.5V7.3z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
d="M21.8,20.7l-2-2l1.9-1.9c0.3-0.3,0.3-0.8,0-1.1c-0.3-0.3-0.7-0.3-1.1,0l-1.9,1.9l-1.9-1.9c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l1.9,1.9l-2,2c-0.3,0.3-0.3,0.8,0,1.1s0.8,0.3,1.1,0l2-2l2,2c0.3,0.3,0.8,0.3,1.1,0S22.1,21,21.8,20.7z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
@ -0,0 +1,17 @@
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M21.8,20.7l-2-2l1.9-1.9c0.3-0.3,0.3-0.8,0-1.1c-0.3-0.3-0.7-0.3-1.1,0l-1.9,1.9l-1.9-1.9c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l1.9,1.9l-2,2c-0.3,0.3-0.3,0.8,0,1.1c0.3,0.3,0.8,0.3,1.1,0l2-2l2,2c0.3,0.3,0.8,0.3,1.1,0S22.1,21,21.8,20.7z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
d="M16,13.3V8.8h4.2V10v3.3c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8V10V7V4.5c0.1-1.2-1-2.3-2.2-2.3h-15c-1.2,0-2.2,1-2.2,2.2v2v3v10c0,1.2,1,2.2,2.2,2.2H13c0.4,0,0.7-0.3,0.7-0.6c0-0.4-0.3-0.7-0.7-0.7H9.5v-0.1V8.8h5v4.5c0,0.4,0.3,0.8,0.8,0.8S16,13.7,16,13.3z M8,20.3H4.5c-0.4-0.1-0.7-0.4-0.7-0.8v-10V8.8H8V20.3z M3.8,7.2V6.5v-2c0-0.4,0.3-0.8,0.8-0.8h15c0.4,0,0.8,0.3,0.8,0.8V7v0.2H3.8z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
@ -512,16 +512,18 @@ input.search {
|
||||
.min-w-80 { min-width: 20rem; }
|
||||
.min-w-min { min-width: min-content; }
|
||||
.min-h-0 { min-height: 0; }
|
||||
.min-h-2 { min-height: .5rem; }
|
||||
.min-h-7 { min-height: 1.75rem; }
|
||||
.min-h-60 { min-height: 15rem; }
|
||||
.max-h-125 { max-height: 31.25rem; }
|
||||
.max-h-30 { max-height: 7.5rem; }
|
||||
.max-h-50 { max-height: 12.5rem; }
|
||||
.max-h-60 { max-height: 15rem; }
|
||||
.max-w-30 { max-width: 7.5rem; }
|
||||
.max-w-60 { max-width: 15rem; }
|
||||
.max-w-80 { max-width: 20rem; }
|
||||
.max-w-240 { max-width: 60rem; }
|
||||
.max-h-2 { max-height: .5rem; }
|
||||
.max-h-30 { max-height: 7.5rem; }
|
||||
.max-h-50 { max-height: 12.5rem; }
|
||||
.max-h-60 { max-height: 15rem; }
|
||||
.max-h-125 { max-height: 31.25rem; }
|
||||
.clear-mins {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
|
||||
@ -28,6 +28,7 @@
|
||||
.antiCard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
background: var(--popup-bg-color);
|
||||
border-radius: .5rem;
|
||||
box-shadow: var(--card-shadow);
|
||||
@ -68,10 +69,10 @@
|
||||
.antiCard-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
margin: 0 1rem;
|
||||
height: fit-content;
|
||||
min-height: 0;
|
||||
|
||||
& > *:not(:last-child) { margin-bottom: 1rem; }
|
||||
}
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
@import "./popups.scss";
|
||||
@import "./mixins.scss";
|
||||
@import "./panel.scss";
|
||||
@import "./prose.scss";
|
||||
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Sans';
|
||||
|
||||
46
packages/theme/styles/prose.scss
Normal file
46
packages/theme/styles/prose.scss
Normal file
@ -0,0 +1,46 @@
|
||||
//
|
||||
// Copyright © 2022 Hardcore Engineering Inc.
|
||||
//
|
||||
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License. You may
|
||||
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
//
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
//
|
||||
|
||||
/* Table */
|
||||
table.proseTable {
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
|
||||
td,
|
||||
th {
|
||||
min-width: 1rem;
|
||||
border: 1px solid var(--button-border-hover);
|
||||
padding: .25rem .5rem;
|
||||
vertical-align: top;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
background-color: var(--button-bg-color);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@ -13,6 +13,7 @@
|
||||
// limitations under the License.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher, afterUpdate } from 'svelte'
|
||||
import { quintOut } from 'svelte/easing'
|
||||
import { tweened } from 'svelte/motion'
|
||||
|
||||
@ -20,6 +21,9 @@
|
||||
export let duration = 200
|
||||
export let easing: (t: number) => number = quintOut
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
afterUpdate(() => dispatch('changeContent'))
|
||||
|
||||
const tweenedHeight = tweened(0, { duration, easing })
|
||||
|
||||
let height = 0
|
||||
@ -28,7 +32,7 @@
|
||||
</script>
|
||||
|
||||
<div class="root" style="height: {$tweenedHeight}px">
|
||||
<div bind:offsetHeight={height}>
|
||||
<div bind:offsetHeight={height} class="clear-mins">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
@ -36,5 +40,6 @@
|
||||
<style lang="scss">
|
||||
.root {
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -124,7 +124,7 @@
|
||||
<svelte:fragment slot="item" let:item={itemId}>
|
||||
{@const item = filteredObjects[itemId]}
|
||||
<button
|
||||
class="menu-item w-full"
|
||||
class="menu-item w-full"
|
||||
on:click={() => dispatch('close', item.id)}
|
||||
on:focus={() => dispatch('update', item)}
|
||||
on:mouseover={() => dispatch('update', item)}
|
||||
@ -141,7 +141,7 @@
|
||||
<svelte:component this={item.component} {...item.props} />
|
||||
{:else}
|
||||
{#if item.icon}
|
||||
<div class="mr-2">
|
||||
<div class="icon mr-2">
|
||||
<Icon icon={item.icon} fill={item.iconColor} {size} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
export let alwaysEdit = false
|
||||
export let showButtons = false
|
||||
export let buttonSize: IconSize = 'small'
|
||||
export let maxHeight: 'max' | 'card' | string = 'max'
|
||||
export let maxHeight: 'max' | 'card' | 'limited' | string = 'max'
|
||||
|
||||
export function attach (): void {
|
||||
inputFile.click()
|
||||
@ -188,12 +188,21 @@
|
||||
/>
|
||||
|
||||
<div
|
||||
class="flex-col"
|
||||
class="flex-col clear-mins"
|
||||
on:dragover|preventDefault={() => {}}
|
||||
on:dragleave={() => {}}
|
||||
on:drop|preventDefault|stopPropagation={fileDrop}
|
||||
>
|
||||
<StyledTextBox bind:this={refInput} bind:content {placeholder} {alwaysEdit} {showButtons} {buttonSize} {maxHeight} />
|
||||
<StyledTextBox
|
||||
bind:this={refInput}
|
||||
bind:content
|
||||
{placeholder}
|
||||
{alwaysEdit}
|
||||
{showButtons}
|
||||
{buttonSize}
|
||||
{maxHeight}
|
||||
on:changeContent
|
||||
/>
|
||||
{#if attachments.size}
|
||||
<div class="flex-row-center list scroll-divider-color mt-1">
|
||||
{#each Array.from(attachments.values()) as attachment}
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
} from '@hcengineering/ui'
|
||||
import view from '@hcengineering/view'
|
||||
import { ObjectBox } from '@hcengineering/view-resources'
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import { createEventDispatcher, afterUpdate } from 'svelte'
|
||||
import { activeProject, activeSprint, updateIssueRelation } from '../issues'
|
||||
import tracker from '../plugin'
|
||||
import AssigneeEditor from './issues/AssigneeEditor.svelte'
|
||||
@ -638,6 +638,8 @@
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
afterUpdate(() => dispatch('changeContent'))
|
||||
</script>
|
||||
|
||||
<Card
|
||||
@ -702,12 +704,20 @@
|
||||
space={_space}
|
||||
alwaysEdit
|
||||
showButtons={false}
|
||||
maxHeight={'card'}
|
||||
maxHeight={'20vh'}
|
||||
bind:content={object.description}
|
||||
placeholder={tracker.string.IssueDescriptionPlaceholder}
|
||||
on:changeContent
|
||||
/>
|
||||
{/key}
|
||||
<IssueTemplateChilds bind:children={subIssues} sprint={object.sprint} project={object.project} />
|
||||
<IssueTemplateChilds
|
||||
bind:children={subIssues}
|
||||
sprint={object.sprint}
|
||||
project={object.project}
|
||||
isScrollable
|
||||
maxHeight={'20vh'}
|
||||
on:changeContent
|
||||
/>
|
||||
<svelte:fragment slot="pool">
|
||||
<div class="flex flex-wrap" style:gap={'0.2vw'}>
|
||||
{#if issueStatuses}
|
||||
|
||||
@ -29,6 +29,8 @@
|
||||
export let project: Ref<Project> | null = null
|
||||
export let childIssue: IssueTemplateChild | undefined = undefined
|
||||
export let showBorder = false
|
||||
export let isScrollable: boolean = false
|
||||
export let maxHeight: 'max' | 'card' | 'limited' | string | undefined = undefined
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
const client = getClient()
|
||||
@ -105,8 +107,8 @@
|
||||
$: labelRefs = labels.map((it) => ({ ...(it as unknown as TagReference), _id: generateId(), tag: it._id }))
|
||||
</script>
|
||||
|
||||
<div bind:this={thisRef} class="flex-col root" class:antiPopup={showBorder}>
|
||||
<div class="flex-row-top">
|
||||
<div bind:this={thisRef} class="flex-col root clear-mins" class:antiPopup={showBorder}>
|
||||
<div class="flex-row-top clear-mins">
|
||||
<div class="w-full flex-col content">
|
||||
<EditBox
|
||||
bind:value={newIssue.title}
|
||||
@ -115,12 +117,15 @@
|
||||
placeholder={tracker.string.IssueTitlePlaceholder}
|
||||
focus
|
||||
/>
|
||||
<div class="mt-4">
|
||||
<div class="mt-4 clear-mins">
|
||||
{#key newIssue.description}
|
||||
<StyledTextArea
|
||||
bind:content={newIssue.description}
|
||||
placeholder={tracker.string.IssueDescriptionPlaceholder}
|
||||
showButtons={false}
|
||||
{isScrollable}
|
||||
{maxHeight}
|
||||
on:changeContent
|
||||
/>
|
||||
{/key}
|
||||
</div>
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
import { Ref } from '@hcengineering/core'
|
||||
import { IssueTemplateChild, Project, Sprint } from '@hcengineering/tracker'
|
||||
import { Button, closeTooltip, ExpandCollapse, IconAdd } from '@hcengineering/ui'
|
||||
import { afterUpdate } from 'svelte'
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import tracker from '../../plugin'
|
||||
import Collapsed from '../icons/Collapsed.svelte'
|
||||
@ -27,6 +28,8 @@
|
||||
export let teamId: string = 'TSK'
|
||||
export let sprint: Ref<Sprint> | null = null
|
||||
export let project: Ref<Project> | null = null
|
||||
export let isScrollable: boolean = false
|
||||
export let maxHeight: 'max' | 'card' | 'limited' | string | undefined = undefined
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
@ -44,10 +47,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
afterUpdate(() => dispatch('changeContent'))
|
||||
|
||||
$: hasSubIssues = children.length > 0
|
||||
</script>
|
||||
|
||||
<div class="flex-between">
|
||||
<div class="flex-between clear-mins">
|
||||
{#if hasSubIssues}
|
||||
<Button
|
||||
width="min-content"
|
||||
@ -79,42 +84,41 @@
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<ExpandCollapse isExpanded={!isCollapsed} duration={400}>
|
||||
{#if hasSubIssues}
|
||||
<div class="list" class:collapsed={isCollapsed}>
|
||||
<IssueTemplateChildList
|
||||
{project}
|
||||
{sprint}
|
||||
bind:issues={children}
|
||||
{teamId}
|
||||
on:move={handleIssueSwap}
|
||||
on:update-issue
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{#if hasSubIssues}
|
||||
<ExpandCollapse isExpanded={!isCollapsed} duration={400} on:changeContent>
|
||||
<div class="list" class:collapsed={isCollapsed}>
|
||||
<IssueTemplateChildList
|
||||
{project}
|
||||
{sprint}
|
||||
bind:issues={children}
|
||||
{teamId}
|
||||
on:move={handleIssueSwap}
|
||||
on:update-issue
|
||||
/>
|
||||
</div>
|
||||
</ExpandCollapse>
|
||||
<ExpandCollapse isExpanded={!isCollapsed} duration={400}>
|
||||
{#if isCreating}
|
||||
<div class="pt-4">
|
||||
<IssueTemplateChildEditor
|
||||
{project}
|
||||
{sprint}
|
||||
on:close={() => {
|
||||
isCreating = false
|
||||
}}
|
||||
on:create={(evt) => {
|
||||
if (children === undefined) {
|
||||
children = []
|
||||
}
|
||||
children = [...children, evt.detail]
|
||||
dispatch('create-issue', evt.detail)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if isCreating}
|
||||
<ExpandCollapse isExpanded={!isCollapsed} duration={400} on:changeContent>
|
||||
<IssueTemplateChildEditor
|
||||
{project}
|
||||
{sprint}
|
||||
{isScrollable}
|
||||
{maxHeight}
|
||||
on:close={() => {
|
||||
isCreating = false
|
||||
}}
|
||||
on:create={(evt) => {
|
||||
if (children === undefined) {
|
||||
children = []
|
||||
}
|
||||
children = [...children, evt.detail]
|
||||
dispatch('create-issue', evt.detail)
|
||||
}}
|
||||
on:changeContent
|
||||
/>
|
||||
</ExpandCollapse>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.list {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user