diff options
author | Max <max@nextcloud.com> | 2022-03-21 18:05:35 +0300 |
---|---|---|
committer | Max <max@nextcloud.com> | 2022-03-31 15:29:25 +0300 |
commit | 3491ccb97fa59b1afd1c0bbb5a6e804af6e77fc0 (patch) | |
tree | 1de73631b0b88f520af8cf21b7435ffaaa8e69fa | |
parent | 5ea06281ebc17add0074ea696e4a79e5821793d5 (diff) |
ui: add actions for rows
Signed-off-by: Max <max@nextcloud.com>
-rw-r--r-- | css/icons.scss | 4 | ||||
-rw-r--r-- | css/prosemirror.scss | 8 | ||||
-rw-r--r-- | src/nodes/TableCell.js | 7 | ||||
-rw-r--r-- | src/nodes/TableCellView.vue | 135 | ||||
-rw-r--r-- | src/nodes/TableHeaderView.vue | 11 |
5 files changed, 153 insertions, 12 deletions
diff --git a/css/icons.scss b/css/icons.scss index 3d6bf6f17..626d1650d 100644 --- a/css/icons.scss +++ b/css/icons.scss @@ -24,5 +24,7 @@ @include icon-black-white('h4', 'text', 1); @include icon-black-white('h5', 'text', 1); @include icon-black-white('h6', 'text', 1); -@include icon-black-white('add_col_after', 'text', 1); @include icon-black-white('add_col_before', 'text', 1); +@include icon-black-white('add_col_after', 'text', 1); +@include icon-black-white('add_row_before', 'text', 1); +@include icon-black-white('add_row_after', 'text', 1); diff --git a/css/prosemirror.scss b/css/prosemirror.scss index 7c7bf5d3b..465b6e75f 100644 --- a/css/prosemirror.scss +++ b/css/prosemirror.scss @@ -267,8 +267,6 @@ div.ProseMirror { td, th { border: 1px solid var(--color-border); border-left: 0; - color: var(--color-main-text); - padding: 0.5em 0.75em; vertical-align: top; max-width: 100%; &:first-child { @@ -276,11 +274,15 @@ div.ProseMirror { } } td { + padding: 0.5em 0.75em; border-top: 0; + color: var(--color-main-text); } th { - font-weight: bold; + padding: 0 0 0.5em 0.75em; + font-weight: normal; border-bottom-color: var(--color-border-dark); + color: var(--color-text-maxcontrast); } tr { background-color: var(--color-main-background); diff --git a/src/nodes/TableCell.js b/src/nodes/TableCell.js index a8ce69234..a1f445420 100644 --- a/src/nodes/TableCell.js +++ b/src/nodes/TableCell.js @@ -1,4 +1,6 @@ import { TableCell } from '@tiptap/extension-table-cell' +import { VueNodeViewRenderer } from '@tiptap/vue-2' +import TableCellView from './TableCellView' export default TableCell.extend({ content: 'inline*', @@ -17,4 +19,9 @@ export default TableCell.extend({ { tag: 'table thead ~ tbody td', priority: 70 }, ] }, + + addNodeView() { + return VueNodeViewRenderer(TableCellView) + }, + }) diff --git a/src/nodes/TableCellView.vue b/src/nodes/TableCellView.vue new file mode 100644 index 000000000..1eb62a1e1 --- /dev/null +++ b/src/nodes/TableCellView.vue @@ -0,0 +1,135 @@ +<!-- + - @copyright Copyright (c) 2022 Max <max@nextcloud.com> + - + - @author Max <max@nextcloud.com> + - + - @license GNU AGPL version 3 or any later version + - + - This program is free software: you can redistribute it and/or modify + - it under the terms of the GNU Affero General Public License as + - published by the Free Software Foundation, either version 3 of the + - License, or (at your option) any later version. + - + - This program is distributed in the hope that it will be useful, + - but WITHOUT ANY WARRANTY; without even the implied warranty of + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + - GNU Affero General Public License for more details. + - + - You should have received a copy of the GNU Affero General Public License + - along with this program. If not, see <http://www.gnu.org/licenses/>. + - + --> + +<template> + <NodeViewWrapper as="td"> + <div class="container"> + <NodeViewContent class="content" /> + <Actions> + <ActionButton icon="icon-add_row_before" + :close-after-click="true" + @click="addRowBefore"> + Add new row before this + </ActionButton> + <ActionButton icon="icon-add_row_after" + :close-after-click="true" + @click="addRowAfter"> + Add new row after this + </ActionButton> + <ActionButton icon="icon-delete" + :close-after-click="true" + @click="deleteRow"> + Remove this row + </ActionButton> + </Actions> + </div> + </NodeViewWrapper> +</template> + +<script> +import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2' +import Actions from '@nextcloud/vue/dist/Components/Actions' +import ActionButton from '@nextcloud/vue/dist/Components/ActionButton' + +export default { + name: 'TableCellView', + components: { + ActionButton, + Actions, + NodeViewWrapper, + NodeViewContent, + }, + props: { + editor: { + type: Object, + required: true, + }, + getPos: { + type: Function, + required: true, + }, + }, + methods: { + deleteRow() { + this.editor.chain() + .focus() + .setTextSelection(this.getPos()) + .deleteRow() + .run() + }, + addRowBefore() { + this.editor.chain() + .focus() + .setTextSelection(this.getPos()) + .addRowBefore() + .run() + }, + addRowAfter() { + this.editor.chain() + .focus() + .setTextSelection(this.getPos()) + .addRowAfter() + .run() + }, + }, +} +</script> + +<style scoped lang="scss"> +td { + position: relative; + + .container { + display: flex; + flex-wrap: wrap; + min-height: 36px; + } + + .content { + flex: 1 1 0; + margin: 0; + } + + .action-item { + position: absolute; + right: -48px; + flex: 0 1 auto; + display: none; + top: 2px; + } + + &:last-child { + .action-item { + display: block; + opacity: 50%; + } + + &:hover, &:active, &:focus, &:focus-within { + .action-item { + opacity: 100%; + } + } + } + +} + +</style> diff --git a/src/nodes/TableHeaderView.vue b/src/nodes/TableHeaderView.vue index 7d8ba0da7..e14fa2b38 100644 --- a/src/nodes/TableHeaderView.vue +++ b/src/nodes/TableHeaderView.vue @@ -97,20 +97,15 @@ export default { <style scoped lang="scss"> th { - div { - display: flex; - flex-wrap: wrap; - } - .content { - flex: 1 1 0; + float: left; margin: 0; min-height: 44px; - line-height: 44px; + padding-top: 0.75em; } .action-item { - flex: 0 1 auto; + float: right; opacity: 50%; } |