add image removing on hover

nextcloud · Sep 30, 2021 · 3ae56c5 · 3ae56c5
1 parent beb4a50
commit 3ae56c5
Show file tree

Hide file tree

Showing 11 changed files with 91 additions and 43 deletions.
diff --git a/js/editor.js b/js/editor.js
diff --git a/js/editor.js.map b/js/editor.js.map
diff --git a/js/text-files.js b/js/text-files.js
diff --git a/js/text-files.js.map b/js/text-files.js.map
diff --git a/js/text-public.js b/js/text-public.js
diff --git a/js/text-public.js.map b/js/text-public.js.map
diff --git a/js/text-text.js b/js/text-text.js
diff --git a/js/text-text.js.map b/js/text-text.js.map
diff --git a/js/text-viewer.js b/js/text-viewer.js
diff --git a/js/text-viewer.js.map b/js/text-viewer.js.map
diff --git a/src/nodes/ImageView.vue b/src/nodes/ImageView.vue
@@ -1,34 +1,62 @@
 <!--
-  - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
-  -
-  - @author Julius Härtl <jus@bitgrid.net>
-  -
-  - @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/>.
-  -
-  -->
+	- @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
+	-
+	- @author Julius Härtl <jus@bitgrid.net>
+	-
+	- @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>
 	<div class="image" :class="{'icon-loading': !loaded}" :data-src="src">
-		<div v-if="imageLoaded && isSupportedImage" class="image__view">
-			<transition name="fade">
-				<img v-show="loaded"
-					:src="imageUrl"
-					class="image__main"
-					@load="onLoaded">
-			</transition>
+		<div v-if="imageLoaded && isSupportedImage"
+			class="image__view"
+			@mouseover="showTrash = true"
+			@mouseleave="showTrash = false">
+			<div>
+				<div
+					v-if="showTrash"
+					class="trash-icon"
+					title="Delete this image"
+					@click="deleteImage">
+					<svg
+						class="svg-icon"
+						style="
+							width: 3em;
+							height: 3em;
+							vertical-align: middle;
+							fill: currentColor;
+							overflow: hidden;
+						"
+						viewBox="0 0 1024 1024"
+						version="1.1"
+						xmlns="http://www.w3.org/2000/svg">
+						<path
+							d="M512 955.733333c-121.890133 0-227.584-43.8784-314.146133-130.440533C111.872 739.2768 68.266667 633.890133 68.266667 512c0-121.856 43.588267-227.549867 129.536-314.112C284.450133 111.854933 390.144 68.266667 512 68.266667c121.890133 0 227.2768 43.605333 313.2928 129.5872C911.854933 284.416 955.733333 390.109867 955.733333 512c0 121.924267-43.895467 227.328-130.474666 313.326933C739.328 911.837867 633.924267 955.733333 512 955.733333z m0-853.333333c-112.520533 0-210.1248 40.2432-290.065067 119.620267C142.6432 301.8752 102.4 399.479467 102.4 512c0 112.503467 40.226133 209.783467 119.586133 289.160533C301.909333 881.083733 399.496533 921.6 512 921.6c112.4864 0 209.7664-40.4992 289.1264-120.405333C881.1008 721.7664 921.6 624.4864 921.6 512c0-112.503467-40.516267-210.090667-120.439467-290.013867C721.783467 142.626133 624.503467 102.4 512 102.4z" />
+						<path
+							d="M632.32 667.306667a33.979733 33.979733 0 0 1-24.2176-10.0864L512 560.452267l-96.1024 96.768a34.133333 34.133333 0 1 1-48.4352-48.093867l96.3584-97.041067-96.273067-96.273066a34.133333 34.133333 0 1 1 48.264534-48.264534L512 463.7184l96.187733-96.170667a34.133333 34.133333 0 1 1 48.264534 48.264534l-96.273067 96.273066 96.3584 97.041067A34.133333 34.133333 0 0 1 632.32 667.306667z" />
+					</svg>
+				</div>
+				<transition name="fade">
+					<img v-show="loaded"
+						:src="imageUrl"
+						class="image__main"
+						@load="onLoaded">
+				</transition>
+			</div>
 			<transition name="fade">
 				<div v-show="loaded" class="image__caption">
 					<input ref="altInput"
@@ -92,12 +120,13 @@ const getQueryVariable = (src, variable) => {
 
 export default {
 	name: 'ImageView',
-	props: ['node', 'options', 'updateAttrs', 'view'], // eslint-disable-line
+	props: ['node', 'options', 'updateAttrs', 'view', 'getPos'], // eslint-disable-line
 	data() {
 		return {
 			imageLoaded: false,
 			loaded: false,
 			failed: false,
+			showTrash: false,
 		}
 	},
 	computed: {
@@ -232,6 +261,15 @@ export default {
 		onLoaded() {
 			this.loaded = true
 		},
+		showTrashIcon() {
+			this.showTrash = true
+		},
+		deleteImage() {
+			const tr = this.view.state.tr
+			const pos = this.getPos()
+			tr.delete(pos, pos + this.node.nodeSize)
+			this.view.dispatch(tr)
+		},
 	},
 }
 </script>
@@ -265,6 +303,7 @@ export default {
 
 	.image__view {
 		text-align: center;
+		position: relative;
 
 		.image__main {
 			max-height: 40vh;
@@ -302,4 +341,13 @@ export default {
 	.fade-enter {
 		opacity: 0;
 	}
+
+	.trash-icon {
+		cursor: pointer;
+		position: absolute;
+		display: inherit;
+		width: 50px;
+		top: 12px;
+		right: 8px;
+	}
 </style>