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 3ab4859835b87faa5cc857622f236fc61752567d Author: kaufmann <kaufmann@codelutin.com> Date: Mon Aug 10 15:26:02 2020 +0200 Affichage des actions sur un bookmark en liste déroulante --- web/src/components/Bookmark.vue | 34 ++++++------ web/src/components/common/Button.vue | 3 +- web/src/components/common/DropDown.vue | 94 ++++++++++++++++++++++++++++++++++ 3 files changed, 115 insertions(+), 16 deletions(-) diff --git a/web/src/components/Bookmark.vue b/web/src/components/Bookmark.vue index 094d933..329c957 100644 --- a/web/src/components/Bookmark.vue +++ b/web/src/components/Bookmark.vue @@ -57,10 +57,10 @@ ></Tags> </div> - <div class="bookmark-actions"> - <button @click.prevent="edit">Edit</button> - <button @click.prevent="deleteBookmark">Delete</button> - </div> + <DropDown> + <Button @click.prevent="edit" icon="icon-pencil">Edit</Button> + <Button @click.prevent="deleteBookmark" icon="icon-trashcan">Delete</Button> + </DropDown> </template> </div> </template> @@ -69,6 +69,8 @@ import { Component, Prop, Vue } from 'vue-property-decorator' import Aliases from '@/components/bookmark/Alias' import BookmarkDate from '@/components/common/BookmarkDate' +import Button from '@/components/common/Button' +import DropDown from '@/components/common/DropDown' import Tags from '@/components/bookmark/Tags' import AuthenticationInfo from '@/components/bookmark/AuthenticationInfo' import Description from '@/components/bookmark/Description' @@ -78,7 +80,17 @@ import Visit from '@/components/bookmark/Visit' @Component({ name: 'Bookmark', props: ['bookmark'], - components: { Aliases, AuthenticationInfo, BookmarkDate, Description, LinkCount, Tags, Visit } + components: { + Aliases, + AuthenticationInfo, + BookmarkDate, + Button, + Description, + DropDown, + LinkCount, + Tags, + Visit + } }) class Bookmark extends Vue { @Prop bookmark @@ -211,16 +223,8 @@ export default Bookmark font-weight: bold; } - -.bookmarks-list { - .bookmark-icon { - width: 70px; - - text-align: center; - } - .bookmark-content { - flex: 1; - } +.bookmark:hover { + box-shadow: -2px 2px 5px 1px rgba(0,0,0, 0.05); } .grid { diff --git a/web/src/components/common/Button.vue b/web/src/components/common/Button.vue index 6799618..43541e6 100644 --- a/web/src/components/common/Button.vue +++ b/web/src/components/common/Button.vue @@ -1,6 +1,7 @@ <template> <button @click="handleClick" - class="button"> + class="button" + :class="icon"> <slot></slot> </button> </template> diff --git a/web/src/components/common/DropDown.vue b/web/src/components/common/DropDown.vue new file mode 100644 index 0000000..ee55f8c --- /dev/null +++ b/web/src/components/common/DropDown.vue @@ -0,0 +1,94 @@ +<template> + <div class="dropdown-wrapper" :class="{'dropdown-opened': isOpened}"> + <Button @click="toggleDropDown" + class="dropdown-toggle"> + ... + </Button> + <div v-if="isOpened" class="dropdown-content"> + <slot></slot> + </div> + </div> +</template> + +<script> + import { Component, Vue } from 'vue-property-decorator' + import Button from '@/components/common/Button' + + + @Component({ + name: 'Home', + components: { + Button + } + }) + + class DropDown extends Vue { + isOpened = false; + + toggleDropDown() { + this.isOpened = ! this.isOpened + } + } + export default DropDown +</script> + +<style scoped lang="less"> +.dropdown-wrapper { + position: relative; +} + +.dropdown-toggle { + height: 30px; + + background-color: rgba(0, 0, 0, 0.07); + border-color: transparent; + font-weight: bold; + + &:hover { + color: inherit; + + border-color: transparent; + background: transparent; + box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.15); + opacity: 1; + } +} + +.dropdown-content { + position: absolute; + right: 0; + z-index: 1; + + display: flex; + flex-direction: column; + align-items: flex-start; + + color: white; + background-color: var(--color-bg-sidebar); + box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.15); + + button { + width: 100%; + padding: 15px var(--margin--large) 15px 15px; + + color: white; + text-align: left; + + border: 0; + white-space: nowrap; + + &::before { + margin-right: var(--margin--small); + } + } +} + +.dropdown-opened { + .dropdown-toggle { + color: white; + background-color: var(--color-bg-sidebar); + border-color: var(--color-bg-sidebar); + box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.15); + } +} +</style> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.