Replace list by tab

Signed-off-by: Vitor Mattos <[email protected]>

src/Components/Draw/Draw.vue

@@ -1,58 +1,61 @@
 <template>
-	<NcModal>
-		<h2>{{ t('libresign', 'Customize your signatures') }}</h2>
-		<ul class="editor-select">
-			<li v-if="textEditor"
-				:class="{active: isActive('text')}"
-				@click.prevent="setActive('text')">
-				<img :src="$options.icons.textIcon" :alt="t('libresign', 'Text')">
-				{{ t('libresign', 'Text') }}
-			</li>
-			<li v-if="drawEditor"
-				:class="{active: isActive('draw')}"
-				@click.prevent="setActive('draw')">
-				<img :src="$options.icons.drawnIcon" :alt="t('libresign', 'Draw')">
-				{{ t('libresign', 'Draw') }}
-			</li>
-			<li v-if="fileEditor"
-				:class="{active: isActive('upload')}"
-				@click.prevent="setActive('upload')">
-				<img :src="$options.icons.uploadIcon" :alt="t('libresign', 'Upload')">
-				{{ t('libresign', 'Upload') }}
-			</li>
-		</ul>
+	<NcModal class="draw-signature"
+		@close="close">
+		<NcAppSidebar active="tab-draw"
+			:title="t('libresign', 'Customize your signatures')">
+			<NcAppSidebarTab v-if="drawEditor"
+				id="tab-draw"
+				:name="t('libresign', 'Draw')">
+				<template #icon>
+					<DrawIcon :size="20" />
+				</template>
+				<Editor @close="close"
+					@save="save" />
+			</NcAppSidebarTab>
+			<NcAppSidebarTab v-if="textEditor"
+				id="tab-text"
+				:name="t('libresign', 'Text')">
+				<template #icon>
+					<SignatureTextIcon :size="20" />
+				</template>
+				<TextInput @save="save"
+					@close="close" />
+			</NcAppSidebarTab>
+			<NcAppSidebarTab v-if="fileEditor"
+				id="tab-upload"
+				:name="t('libresign', 'Upload')">
+				<template #icon>
+					<UploadIcon :size="20" />
+				</template>
+				<FileUpload @save="save"
+					@close="close" />
+			</NcAppSidebarTab>
+		</NcAppSidebar>
 
-		<div class="content">
-			<Editor v-if="isActive('draw')"
-				:class="{'active show': isActive('draw')}"
-				@close="close"
-				@save="save" />
-			<TextInput v-if="isActive('text')"
-				ref="text"
-				:class="{'active show': isActive('text')}"
-				@save="save"
-				@close="close" />
-			<FileUpload v-if="isActive('upload')"
-				:class="{'active show': isActive('upload')}"
-				@save="save"
-				@close="close" />
-		</div>
+		<div class="content" />
 	</NcModal>
 </template>
 
 <script>
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar.js'
+import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab.js'
 import Editor from './Editor.vue'
+import DrawIcon from 'vue-material-design-icons/Draw.vue'
 import TextInput from './TextInput.vue'
+import SignatureTextIcon from 'vue-material-design-icons/SignatureText.vue'
 import FileUpload from './FileUpload.vue'
-import DrawIcon from '../../../img/curvature.png'
-import TextIcon from '../../../img/text.png'
-import UploadIcon from '../../../img/upload-black.png'
+import UploadIcon from 'vue-material-design-icons/Upload.vue'
 
 export default {
 	name: 'Draw',
 	components: {
 		NcModal,
+		NcAppSidebar,
+		NcAppSidebarTab,
+		SignatureTextIcon,
+		DrawIcon,
+		UploadIcon,
 		TextInput,
 		Editor,
 		FileUpload,
@@ -75,71 +78,30 @@ export default {
 		},
 	},
 
-	icons: {
-		drawnIcon: DrawIcon,
-		textIcon: TextIcon,
-		uploadIcon: UploadIcon,
-	},
-
-	data() {
-		return {
-			toolSelected: 'draw',
-		}
-	},
-
 	methods: {
-		isActive(tabItem) {
-			return this.toolSelected === tabItem
-		},
 		close() {
 			this.$emit('close')
 		},
 		save(param) {
 			this.$emit('save', param)
 			this.close()
 		},
-		setActive(tabItem) {
-			this.toolSelected = tabItem
-
-			if (tabItem === 'text') {
-				this.$refs.text.setFocus()
-			}
-		},
 	},
 }
 </script>
-<style lang="scss" scoped>
-ul.editor-select {
-	margin: 0;
-	li {
-		display: inline-block;
-		padding: 10px;
-		margin-bottom: -1px;
-		position: relative;
-
-		img{
-			max-width: 14px;
-			margin-right: 10px;
-		}
 
-		&.active{
-			border: 1px solid #dbdbdb;
-			border-bottom-color:#ffffff;
-			border-radius: 5px 5px 0 0;
-		}
+<style lang="scss">
+#app-sidebar-vue {
+	width: unset;
+	.app-sidebar__close {
+		display: none;
 	}
 }
-
-.container{
-	display: flex;
-	flex-direction: column;
-	width: 380px;
-	height: 100%;
-	margin-top: 10px;
-
-	.content{
-		width: 100%;
-		border: 1px solid #dbdbdb;
+.draw-signature {
+	.modal-container {
+		width: unset !important;
 	}
 }
 </style>
+<style lang="scss" scoped>
+</style>

src/views/Account/partials/Signature.vue

@@ -17,7 +17,7 @@
 		<Draw v-if="isEditing"
 			:draw-editor="true"
 			:text-editor="true"
-			:fileEditor="true"
+			:file-editor="true"
 			@save="save"
 			@close="close" />
 	</div>

src/views/SignPDF/_partials/Sign.vue

@@ -25,7 +25,7 @@
 					{{ t('libresign', 'You do not have any signature defined.') }}
 				</p>
 
-				<button :disabled="loading" class="button is-warning is-fullwidth" @click="goToSignatures">
+				<button :disabled="loading" class="button is-warning is-fullwidth" @click="callCreateSignature">
 					{{ t('libresign', 'Define your signature.') }}
 				</button>
 			</div>
@@ -101,12 +101,14 @@ export default {
 			password: false,
 			email: false,
 			sms: false,
+			createSignature: false,
 		},
 		user: {
 			account: { uid: '', displayName: '', emailAddress: '' },
 			settings: { canRequestSign: false, hasSignatureFile: true },
 		},
 		userSignatures: [],
+		createPassword: false,
 	}),
 	computed: {
 		signer() {
@@ -259,10 +261,8 @@ export default {
 		callPassword() {
 			this.modals.password = true
 		},
-		goToSignatures() {
-			const url = this.$router.resolve({ name: 'Account', query: { _back_to_signature: this.uuid } })
-
-			window.location.href = url.href
+		callCreateSignature() {
+			this.modals.createSignature = true
 		},
 		callSignMethod() {
 			if (this.modals[this.signMethod] === undefined) {