This is an automated email from the git hooks/post-receive script. New commit to branch bow-v2-go in repository bow. See https://gitlab.nuiton.org/chorem/bow.git commit 742b90ba83c1294955bec0535c5ebba9c10c5ad6 Author: kaufmann <kaufmann@codelutin.com> Date: Tue Aug 11 14:05:24 2020 +0200 Ajout d'un composant pour les fenêtres de confirmation d'une action --- web/src/components/Bookmark.vue | 80 +++++++++-- web/src/components/layout/ConfirmationModal.vue | 176 ++++++++++++++++++++++++ 2 files changed, 241 insertions(+), 15 deletions(-) diff --git a/web/src/components/Bookmark.vue b/web/src/components/Bookmark.vue index 329c957..07fad81 100644 --- a/web/src/components/Bookmark.vue +++ b/web/src/components/Bookmark.vue @@ -1,5 +1,5 @@ <template> - <div class="bookmark"> + <div class="bookmark" :class="{deleted: this.deleted}"> <template v-if="this.deleted"> Deleted <a :href="bookmark.uri">{{ bookmark.uri }}</a> </template> @@ -57,10 +57,28 @@ ></Tags> </div> - <DropDown> - <Button @click.prevent="edit" icon="icon-pencil">Edit</Button> - <Button @click.prevent="deleteBookmark" icon="icon-trashcan">Delete</Button> + <DropDown class="dropdown"> + <Button + @click.prevent="edit" + icon="icon-pencil" + > + Edit + </Button> + <Button + @click="toggleConfirmationModal" + icon="icon-trashcan" + > + Delete + </Button> + + <ConfirmationModal + :isOpen="showConfirmationModal" + :message="'Do you want realy remove this bookmark ' + this.bookmark.uri + ' ?'" + @confirm="deleteBookmark" + @close="toggleConfirmationModal"> + </ConfirmationModal> </DropDown> + </template> </div> </template> @@ -76,6 +94,7 @@ import AuthenticationInfo from '@/components/bookmark/AuthenticationInfo' import Description from '@/components/bookmark/Description' import LinkCount from '@/components/bookmark/LinkCount' import Visit from '@/components/bookmark/Visit' +import ConfirmationModal from '@/components/layout/ConfirmationModal' @Component({ name: 'Bookmark', @@ -85,6 +104,7 @@ import Visit from '@/components/bookmark/Visit' AuthenticationInfo, BookmarkDate, Button, + ConfirmationModal, Description, DropDown, LinkCount, @@ -95,6 +115,7 @@ import Visit from '@/components/bookmark/Visit' class Bookmark extends Vue { @Prop bookmark deleted = false + showConfirmationModal = false; get date() { return this.bookmark.importdate || this.bookmark.creationdate @@ -105,17 +126,15 @@ class Bookmark extends Vue { } deleteBookmark() { - if (confirm(`Do you want realy remove this bookmark\n${this.bookmark.uri} ?`)) { - this.$fetch.delete(`/bookmarks/${this.bookmark.id}`).then( - () => { - this.deleted = true - }, - (err) => { - console.log('ko', err) - this.errorMsg = err.cause - } - ) - } + this.$fetch.delete(`/bookmarks/${this.bookmark.id}`).then( + () => { + this.deleted = true + }, + (err) => { + console.log('ko', err) + this.errorMsg = err.cause + } + ) } hexaToImg(hexa) { @@ -132,6 +151,11 @@ class Bookmark extends Vue { let base64 = btoa(String.fromCharCode.apply(null, bytea)) return 'data:image/png;base64,' + base64 } + + toggleConfirmationModal() { + this.showConfirmationModal = !this.showConfirmationModal; + console.log(this.showConfirmationModal) + } } export default Bookmark @@ -154,6 +178,10 @@ export default Bookmark background-color: var(--color-bookmark-bg); box-shadow: var(--default-ui-element-shadow); + &.deleted { + background-color: var(--color-separation-border); + } + .info{ flex-grow: 2; } @@ -232,6 +260,28 @@ export default Bookmark flex-direction: column; overflow: auto; } + + .bookmark-info { + max-width: 100%; + padding-right: var(--margin--large); + } + + .bookmark-tags { + max-width: none; + width: 100%; + flex-grow: 0; + .tags { + flex-wrap: wrap-reverse; + justify-content: center; + } + } + + .dropdown { + position: absolute; + top: var(--margin--small); + right: var(--margin--small); + z-index: 2; + } } @media screen and (min-width: @screen-desktop-low) { diff --git a/web/src/components/layout/ConfirmationModal.vue b/web/src/components/layout/ConfirmationModal.vue new file mode 100644 index 0000000..7e79b64 --- /dev/null +++ b/web/src/components/layout/ConfirmationModal.vue @@ -0,0 +1,176 @@ +<template> + <transition name="fade"> + <div v-if="isOpen" class="modal-wrapper"> + <div + class="overlay" + @click.self="isOpen = false" + ></div> + + <div class="modal"> + <div class="modal-content"> + <i class="icon icon-trashcan"/> + {{ message }} + </div> + <div class="modal-footer"> + <Button + outline + @click="closeModal" + > + Cancel + </Button> + + <Button + primary + @click="confirm" + > + Confirm + </Button> + </div> + </div> + </div> + </transition> +</template> + +<script> +import { Component, Prop, Vue } from 'vue-property-decorator' +import Button from '@/components/common/Button' + +@Component({ + name: 'ConfirmationModal', + components: { + Button + } +}) +class ConfirmationModal extends Vue { + @Prop({ default: false }) isOpen; + @Prop({ default: 'Are you sure ?' }) message; + + closeModal() { + this.$emit('close'); + } + + confirm() { + this.$emit('confirm'); + } +} + +export default ConfirmationModal +</script> + +<style scoped lang="less"> +@import '../../assets/less/globals'; + +.modal-wrapper { + position: fixed; + top: 0; + left: 0; + z-index: 1000; + + display: flex; + align-items: bottom; + justify-content: center; + width: 100vw; + height: 100vh; +} + +.overlay { + position: fixed; + top: 0; + left: 0; + + z-index: 50; + + display: flex; + align-items: center; + justify-content: center; + + width: 100vw; + height: 100vh; + + background-color: rgba(0, 0, 0, 0.2); +} + +.modal { + position: relative; + + display: flex; + flex-direction: column; + width: min-content; + height: min-content; + max-width: 90%; + max-height: 90%;//calc(100% - var(--mobile-menu-height)); + // margin-top: var(--mobile-menu-height); + overflow-y: auto; + z-index: 50; + + background-color: white; + box-shadow: + 0 2.8px 2.2px rgba(0, 0, 0, 0.02), + 0 6.7px 5.3px rgba(0, 0, 0, 0.028), + 0 12.5px 10px rgba(0, 0, 0, 0.035), + 0 22.3px 17.9px rgba(0, 0, 0, 0.042), + 0 41.8px 33.4px rgba(0, 0, 0, 0.05), + 0 100px 80px rgba(0, 0, 0, 0.07); + border-radius: 5px; + + transition: all 0.2s ease-in; +} + +.modal-content { + flex-grow: 1; + + padding: var(--margin--medium) var(--margin--medium) 0 var(--margin--medium); + + color: var(--color-text); + font-weight: 600; + // font-size: var(--font-size--bigger); + text-align: center; + + .icon { + display: inline-block; + width: 100%; + padding: var(--margin--small) 0; + + color: var(--color-separation-border); + font-size: 70px; + text-align: center; + } +} + +.fade-leave-active, +.fade-enter-active { + transition: all 0.3s ease-out; +} + +.fade-enter, +.fade-leave-to { + opacity: 0; +} + +@media screen and (min-width: @screen-desktop-low) { + .modal-wrapper { + align-items: center; + } + + .modal { + bottom: auto; + margin-top: 0; + margin-bottom: 0; + + min-width: 300px; + max-width: 85%; + min-height: 300px; + } + + .modal-footer { + display: flex; + justify-content: space-between; + padding: var(--margin--medium); + + button { + padding: var(--margin--small); + border-radius: 5px; + } + } +} +</style> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.