Skip to content

Commit

Permalink
Merge pull request #2761 from LibreSign/backport/2759/stable29
Browse files Browse the repository at this point in the history 
[stable29] chore: Replace ncmodal by ncdialog
  • Loading branch information
@vitormattos
vitormattos authored Apr 12, 2024
2 parents 42ccc06 + de78944 commit 2ff1733
Show file tree
Hide file tree
Showing 8 changed files with 197 additions and 359 deletions.
29 changes: 24 additions & 5 deletions src/Components/Draw/Draw.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<template>
<NcModal class="draw-signature"
@close="close">
<NcDialog v-if="mounted"
class="draw-signature"
:name="t('libresign', 'Customize your signatures')"
@closing="close">
<NcAppSidebar active="tab-draw"
:name="t('libresign', 'Customize your signatures')">
<NcAppSidebarTab v-if="drawEditor"
Expand Down Expand Up @@ -33,11 +35,11 @@
</NcAppSidebar>

<div class="content" />
</NcModal>
</NcDialog>
</template>

<script>
import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar.js'
import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab.js'
import Editor from './Editor.vue'
Expand All @@ -51,7 +53,7 @@ import { useSignatureElementsStore } from '../../store/signatureElements.js'
export default {
name: 'Draw',
components: {
NcModal,
NcDialog,
NcAppSidebar,
NcAppSidebarTab,
SignatureTextIcon,
Expand Down Expand Up @@ -86,6 +88,14 @@ export default {
const signatureElementsStore = useSignatureElementsStore()
return { signatureElementsStore }
},
data() {
return {
mounted: false,
}
},
mounted() {
this.mounted = true
},
methods: {
close() {
this.$emit('close')
Expand All @@ -101,10 +111,19 @@ export default {

<style lang="scss" scoped>
.draw-signature{
::v-deep .app-sidebar-header{
display: none;
}
::v-deep #tab-tab-upload {
min-width: 350px;
}
::v-deep .modal-container {
width: unset !important;
height: unset !important;
}
::v-deep aside {
border-left: unset;
}
::v-deep .app-sidebar__close {
display: none;
}
Expand Down
62 changes: 19 additions & 43 deletions src/Components/Draw/Editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,25 +39,24 @@
{{ t('libresign', 'Cancel') }}
</NcButton>
</div>
<NcModal v-if="modal" @close="handleModal(false)">
<div class="modal-confirm">
<h1>{{ t('libresign', 'Confirm your signature') }}</h1>
<PreviewSignature :src="imageData" />
<div class="actions-modal">
<NcButton type="primary" @click="saveSignature">
{{ t('libresign', 'Save') }}
</NcButton>
<NcButton @click="handleModal(false)">
{{ t('libresign', 'Cancel') }}
</NcButton>
</div>
</div>
</NcModal>
<NcDialog v-if="modal"
:name="t('libresign', 'Confirm your signature')"
@closing="handleModal(false)">
<PreviewSignature :src="imageData" />
<template #actions>
<NcButton type="primary" @click="saveSignature">
{{ t('libresign', 'Save') }}
</NcButton>
<NcButton @click="handleModal(false)">
{{ t('libresign', 'Cancel') }}
</NcButton>
</template>
</NcDialog>
</div>
</template>

<script>
import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
import NcColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker.js'
import PaletteIcon from 'vue-material-design-icons/Palette.vue'
import DeleteIcon from 'vue-material-design-icons/Delete.vue'
Expand All @@ -70,7 +69,7 @@ export default {
name: 'Editor',
components: {
NcModal,
NcDialog,
NcColorPicker,
PaletteIcon,
DeleteIcon,
Expand Down Expand Up @@ -191,34 +190,11 @@ export default {
}
}
.modal-confirm{
z-index: 100000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 15px;
h1{
font-size: 1.4rem;
font-weight: bold;
margin: 10px;
}
img{
padding: 20px;
img{
padding: 20px;
@media screen and (max-width: 650px){
width: 100%;
}
}
.actions-modal{
display: flex;
flex-direction: row;
align-self: flex-end;
box-sizing: border-box;
grid-gap: 10px;
@media screen and (max-width: 650px){
width: 100%;
}
}
</style>
54 changes: 19 additions & 35 deletions src/Components/Draw/FileUpload.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,25 +37,24 @@
</div>
</div>

<NcModal v-if="modal" @close="cancel">
<div class="modal-confirm">
<h1>{{ t('libresign', 'Confirm your signature') }}</h1>
<img :src="imageData">
<div class="actions-modal">
<NcButton type="primary" @click="saveSignature">
{{ t('libresign', 'Save') }}
</NcButton>
<NcButton @click="cancel">
{{ t('libresign', 'Cancel') }}
</NcButton>
</div>
</div>
</NcModal>
<NcDialog v-if="modal"
:name="t('libresign', 'Confirm your signature')"
@closing="cancel">
<img :src="imageData">
<template #actions>
<NcButton type="primary" @click="saveSignature">
{{ t('libresign', 'Save') }}
</NcButton>
<NcButton @click="cancel">
{{ t('libresign', 'Cancel') }}
</NcButton>
</template>
</NcDialog>
</div>
</template>

<script>
import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
import { Cropper } from 'vue-advanced-cropper'
import { SignatureImageDimensions } from './options.js'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
Expand All @@ -65,7 +64,7 @@ export default {
components: {
NcButton,
Cropper,
NcModal,
NcDialog,
},
data() {
return {
Expand Down Expand Up @@ -154,26 +153,11 @@ export default {
box-sizing: border-box;
grid-gap: 10px;
}
.modal-confirm{
z-index: 100000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 15px;
h1{
font-size: 1.4rem;
font-weight: bold;
margin: 10px;
}
img{
padding: 20px;
img{
padding: 20px;
@media screen and (max-width: 650px){
width: 100%;
}
@media screen and (max-width: 650px){
width: 100%;
}
}
</style>
60 changes: 19 additions & 41 deletions src/Components/Draw/TextInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,26 +19,25 @@
{{ t('libresign', 'Cancel') }}
</NcButton>
</div>
<NcModal v-if="modal" @close="handleModal(false)">
<div class="modal-confirm">
<h1>{{ t('libresign', 'Confirm your signature') }}</h1>
<img :src="imageData">
<div class="actions-modal">
<NcButton type="primary" @click="saveSignature">
{{ t('libresign', 'Save') }}
</NcButton>
<NcButton @click="cancelConfirm">
{{ t('libresign', 'Cancel') }}
</NcButton>
</div>
</div>
</NcModal>
<NcDialog v-if="modal"
:name="t('libresign', 'Confirm your signature')"
@closing="handleModal(false)">
<img :src="imageData">
<template #actions>
<NcButton type="primary" @click="saveSignature">
{{ t('libresign', 'Save') }}
</NcButton>
<NcButton @click="cancelConfirm">
{{ t('libresign', 'Cancel') }}
</NcButton>
</template>
</NcDialog>
</div>
</template>

<script>
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import '@fontsource/dancing-script'
import { SignatureImageDimensions } from './options.js'
Expand All @@ -48,7 +47,7 @@ export default {
name: 'TextInput',
components: {
NcTextField,
NcModal,
NcDialog,
NcButton,
},
Expand Down Expand Up @@ -166,32 +165,11 @@ export default {
}
}
.modal-confirm{
z-index: 100000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 15px;
h1{
font-size: 1.4rem;
font-weight: bold;
margin: 10px;
}
img{
padding: 20px;
img{
padding: 20px;
@media screen and (max-width: 650px){
width: 100%;
}
}
.actions-modal{
display: flex;
flex-direction: row;
align-self: flex-end;
@media screen and (max-width: 650px){
width: 100%;
}
}
</style>
Loading

0 comments on commit 2ff1733

Please sign in to comment.