💄 (#2345): table icons

Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>
nextcloud · May 23, 2022 · 5e8f077 · 5e8f077
1 parent 29898e4
commit 5e8f077
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 16 deletions.
diff --git a/src/components/icons.js b/src/components/icons.js
@@ -23,6 +23,7 @@
 import MdiLoading from 'vue-material-design-icons/Loading'
 
 export { default as Lock } from 'vue-material-design-icons/Lock'
+export { default as Delete } from 'vue-material-design-icons/Delete'
 export { default as Undo } from 'vue-material-design-icons/ArrowULeftTop'
 export { default as Redo } from 'vue-material-design-icons/ArrowURightTop'
 export { default as Info } from 'vue-material-design-icons/Information'
@@ -51,6 +52,11 @@ export { default as FormatListNumbered } from 'vue-material-design-icons/FormatL
 export { default as FormatListBulleted } from 'vue-material-design-icons/FormatListBulleted'
 export { default as FormatListCheckbox } from 'vue-material-design-icons/FormatListCheckbox'
 export { default as FormatQuote } from 'vue-material-design-icons/FormatQuoteClose'
+export { default as TableSettings } from 'vue-material-design-icons/TableCog'
+export { default as TableAddRowAfter } from 'vue-material-design-icons/TableRowPlusAfter'
+export { default as TableAddRowBefore } from 'vue-material-design-icons/TableRowPlusBefore'
+export { default as TableAddColumnAfter } from 'vue-material-design-icons/TableColumnPlusAfter'
+export { default as TableAddColumnBefore } from 'vue-material-design-icons/TableColumnPlusBefore'
 
 export const Loading = {
 	functional: true,

diff --git a/src/nodes/TableCellView.vue b/src/nodes/TableCellView.vue
@@ -26,18 +26,25 @@
 			<NodeViewContent class="content" />
 			<Actions v-if="editor.isEditable">
 				<ActionButton icon="icon-add_row_before"
-					:close-after-click="true"
+					close-after-click
 					@click="addRowBefore">
+					<template #icon>
+						<TableAddRowBefore />
+					</template>
 					{{ t('text', 'Add row before') }}
 				</ActionButton>
-				<ActionButton icon="icon-add_row_after"
-					:close-after-click="true"
+				<ActionButton close-after-click
 					@click="addRowAfter">
+					<template #icon>
+						<TableAddRowAfter />
+					</template>
 					{{ t('text', 'Add row after') }}
 				</ActionButton>
-				<ActionButton icon="icon-delete"
-					:close-after-click="true"
+				<ActionButton close-after-click
 					@click="deleteRow">
+					<template #icon>
+						<Delete />
+					</template>
 					{{ t('text', 'Delete this row') }}
 				</ActionButton>
 			</Actions>
@@ -49,6 +56,7 @@
 import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
 import Actions from '@nextcloud/vue/dist/Components/Actions'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import { TableAddRowBefore, TableAddRowAfter, Delete } from '../components/icons.js'
 
 export default {
 	name: 'TableCellView',
@@ -57,6 +65,9 @@ export default {
 		Actions,
 		NodeViewWrapper,
 		NodeViewContent,
+		TableAddRowBefore,
+		TableAddRowAfter,
+		Delete,
 	},
 	props: {
 		editor: {

diff --git a/src/nodes/TableHeaderView.vue b/src/nodes/TableHeaderView.vue
@@ -25,19 +25,25 @@
 		<div>
 			<NodeViewContent class="content" />
 			<Actions v-if="editor.isEditable">
-				<ActionButton icon="icon-add_col_before"
-					:close-after-click="true"
+				<ActionButton close-after-click
 					@click="addColumnBefore">
+					<template #icon>
+						<TableAddColumnBefore />
+					</template>
 					{{ t('text', 'Add column before') }}
 				</ActionButton>
-				<ActionButton icon="icon-add_col_after"
-					:close-after-click="true"
+				<ActionButton close-after-click
 					@click="addColumnAfter">
+					<template #icon>
+						<TableAddColumnAfter />
+					</template>
 					{{ t('text', 'Add column after') }}
 				</ActionButton>
-				<ActionButton icon="icon-delete"
-					:close-after-click="true"
+				<ActionButton close-after-click
 					@click="deleteColumn">
+					<template #icon>
+						<Delete />
+					</template>
 					{{ t('text', 'Delete this column') }}
 				</ActionButton>
 			</Actions>
@@ -49,6 +55,7 @@
 import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
 import Actions from '@nextcloud/vue/dist/Components/Actions'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import { Delete, TableAddColumnBefore, TableAddColumnAfter } from '../components/icons.js'
 
 export default {
 	name: 'TableHeaderView',
@@ -57,6 +64,9 @@ export default {
 		Actions,
 		NodeViewWrapper,
 		NodeViewContent,
+		Delete,
+		TableAddColumnBefore,
+		TableAddColumnAfter,
 	},
 	props: {
 		editor: {

diff --git a/src/nodes/TableView.vue b/src/nodes/TableView.vue
@@ -24,12 +24,16 @@
 	<NodeViewWrapper class="table-wrapper">
 		<NodeViewContent class="content" as="table" />
 		<Actions v-if="editor.isEditable"
-			:force-menu="true"
-			class="table-settings"
-			default-icon="icon-table_settings">
-			<ActionButton icon="icon-delete"
-				:close-after-click="true"
+			force-menu
+			class="table-settings">
+			<template #icon>
+				<TableSettings />
+			</template>
+			<ActionButton close-after-click
 				@click="deleteNode">
+				<template #icon>
+					<Delete />
+				</template>
 				{{ t('text', 'Delete this table') }}
 			</ActionButton>
 		</Actions>
@@ -41,6 +45,7 @@
 import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
 import Actions from '@nextcloud/vue/dist/Components/Actions'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import { TableSettings, Delete } from '../components/icons.js'
 
 export default {
 	name: 'TableView',
@@ -49,6 +54,8 @@ export default {
 		Actions,
 		NodeViewWrapper,
 		NodeViewContent,
+		TableSettings,
+		Delete,
 	},
 	props: {
 		editor: {