From 94826954f251995807a8b7c96eae6457d9daf98b Mon Sep 17 00:00:00 2001
From: korelstar <korelstar@users.noreply.github.com>
Date: Sun, 13 Mar 2022 20:17:57 +0100
Subject: [PATCH] use Actions and ActionButton components

---
 src/components/EditorEasyMDE.vue | 36 +++++++++++++++++++++++++-------
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/components/EditorEasyMDE.vue b/src/components/EditorEasyMDE.vue
index 701529281..b0b2a0d01 100644
--- a/src/components/EditorEasyMDE.vue
+++ b/src/components/EditorEasyMDE.vue
@@ -1,8 +1,26 @@
 <template>
 	<div>
 		<div class="upload-button">
-			<button class="icon-upload" @click="onClickUpload" />
-			<button class="icon-files" @click="onClickSelect" />
+			<Actions
+				container=".upload-button"
+				menu-align="right"
+				default-icon="icon-picture"
+			>
+				<ActionButton
+					icon="icon-upload"
+					@click="onClickUpload"
+					:closeAfterClick="true"
+				>
+					{{ t('notes', 'Upload image') }}
+				</ActionButton>
+				<ActionButton
+					icon="icon-picture"
+					@click="onClickSelect"
+					:closeAfterClick="true"
+				>
+					{{ t('notes', 'Insert image') }}
+				</ActionButton>
+			</Actions>
 		</div>
 		<div class="markdown-editor" @click="onClickEditor">
 			<textarea />
@@ -17,10 +35,19 @@ import { generateUrl } from '@nextcloud/router'
 import store from '../store'
 import { showError } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/styles/toast.scss'
+import {
+	Actions,
+	ActionButton,
+} from '@nextcloud/vue'
 
 export default {
 	name: 'EditorEasyMDE',
 
+	components: {
+		Actions,
+		ActionButton,
+	},
+
 	props: {
 		value: {
 			type: String,
@@ -337,13 +364,8 @@ export default {
 }
 
 .upload-button {
-	margin-right: 15px;
 	right: 64px;
 	position: fixed;
 	height: 40px;
 }
-.upload-button button {
-	height: 100%;
-	width: 40px;
-}
 </style>