diff options
author | Max <max@nextcloud.com> | 2022-03-21 14:10:35 +0300 |
---|---|---|
committer | Max <max@nextcloud.com> | 2022-03-31 15:29:24 +0300 |
commit | 5ea06281ebc17add0074ea696e4a79e5821793d5 (patch) | |
tree | e30f53cb4fe382ee25a1c8b3eaf9968418af106b | |
parent | 932191e8dcf285c5eba7eb0503f2d5d02e189251 (diff) |
feat: add and remove columns in tables
Signed-off-by: Max <max@nextcloud.com>
-rw-r--r-- | css/icons.scss | 2 | ||||
-rw-r--r-- | cypress/plugins/index.js | 9 | ||||
-rw-r--r-- | src/nodes/TableHeader.js | 7 | ||||
-rw-r--r-- | src/nodes/TableHeaderView.vue | 124 |
4 files changed, 136 insertions, 6 deletions
diff --git a/css/icons.scss b/css/icons.scss index 6c36e66fb..3d6bf6f17 100644 --- a/css/icons.scss +++ b/css/icons.scss @@ -24,3 +24,5 @@ @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); diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js index d9762fcd2..6a2be1cea 100644 --- a/cypress/plugins/index.js +++ b/cypress/plugins/index.js @@ -13,13 +13,10 @@ const browserify = require('@cypress/browserify-preprocessor') const webpack = require('@cypress/webpack-preprocessor') -const defaults = webpack.defaultOptions +const webpackOptions = require('@nextcloud/webpack-vue-config') module.exports = (on, config) => { on('file:preprocessor', browserify()) - defaults.webpackOptions.module.rules.push({ - test: /\.md/, - type: 'asset/source', - }) - on('file:preprocessor', webpack(defaults)) + webpackOptions.module.rules.push({ test: /\.md/, type: 'asset/source' }) + on('file:preprocessor', webpack({webpackOptions})) } diff --git a/src/nodes/TableHeader.js b/src/nodes/TableHeader.js index db9224742..f6538be5d 100644 --- a/src/nodes/TableHeader.js +++ b/src/nodes/TableHeader.js @@ -1,4 +1,6 @@ import { TableHeader } from '@tiptap/extension-table-header' +import { VueNodeViewRenderer } from '@tiptap/vue-2' +import TableHeaderView from './TableHeaderView' export default TableHeader.extend({ content: 'inline*', @@ -21,4 +23,9 @@ export default TableHeader.extend({ { tag: 'table > :first-child > td', priority: 60 }, ] }, + + addNodeView() { + return VueNodeViewRenderer(TableHeaderView) + }, + }) diff --git a/src/nodes/TableHeaderView.vue b/src/nodes/TableHeaderView.vue new file mode 100644 index 000000000..7d8ba0da7 --- /dev/null +++ b/src/nodes/TableHeaderView.vue @@ -0,0 +1,124 @@ +<!-- + - @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="th"> + <div> + <NodeViewContent class="content" /> + <Actions> + <ActionButton icon="icon-add_col_before" + :close-after-click="true" + @click="addColumnBefore"> + Add new column before this + </ActionButton> + <ActionButton icon="icon-add_col_after" + :close-after-click="true" + @click="addColumnAfter"> + Add new column after this + </ActionButton> + <ActionButton icon="icon-delete" + :close-after-click="true" + @click="deleteColumn"> + Remove this column + </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: 'TableHeaderView', + components: { + ActionButton, + Actions, + NodeViewWrapper, + NodeViewContent, + }, + props: { + editor: { + type: Object, + required: true, + }, + getPos: { + type: Function, + required: true, + }, + }, + methods: { + deleteColumn() { + this.editor.chain() + .focus() + .setTextSelection(this.getPos()) + .deleteColumn() + .run() + }, + addColumnBefore() { + this.editor.chain() + .focus() + .setTextSelection(this.getPos()) + .addColumnBefore() + .run() + }, + addColumnAfter() { + this.editor.chain() + .focus() + .setTextSelection(this.getPos()) + .addColumnAfter() + .run() + }, + }, +} +</script> + +<style scoped lang="scss"> +th { + + div { + display: flex; + flex-wrap: wrap; + } + + .content { + flex: 1 1 0; + margin: 0; + min-height: 44px; + line-height: 44px; + } + + .action-item { + flex: 0 1 auto; + opacity: 50%; + } + + &:hover, &:active, &:focus, &:focus-within { + .action-item { + opacity: 100%; + } + } +} + +</style> |