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 14ccd0945c2045819818bac0ad465d0c6f8867d7 Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 17:23:41 2020 +0200 Modifications d'affichage des tags --- web/src/assets/less/_animations.less | 11 +++++++++++ web/src/components/CloudTags.vue | 17 ++++++++++++++++- web/src/components/bookmark/Tags.vue | 14 ++++++++++++-- web/src/components/common/TagsInput.vue | 5 +++-- web/src/components/preferences/TagsEditor.vue | 8 ++++++-- 5 files changed, 48 insertions(+), 7 deletions(-) diff --git a/web/src/assets/less/_animations.less b/web/src/assets/less/_animations.less index 4d4c729..dc4ef87 100644 --- a/web/src/assets/less/_animations.less +++ b/web/src/assets/less/_animations.less @@ -7,4 +7,15 @@ opacity: 1; margin-top: 0; } +} + +@keyframes reveal-zoom { + 0% { + opacity: 0; + transform: scale(1.2); + } + 100% { + opacity: 1; + transform: scale(1); + } } \ No newline at end of file diff --git a/web/src/components/CloudTags.vue b/web/src/components/CloudTags.vue index db73398..8162f6e 100644 --- a/web/src/components/CloudTags.vue +++ b/web/src/components/CloudTags.vue @@ -1,6 +1,14 @@ <template> <div class="cloud-tags"> - <span class="tag" v-for="(tag, i) in tags" :key="tag" :style="{ fontSize: getFont(i) + 'px' }" @click="addTagToQuery(tag)">{{ tag }}</span> + <span + v-for="(tag, i) in tags" + :key="tag" + class="tag" + :style="{ fontSize: getFont(i) + 'px' }" + @click="addTagToQuery(tag)" + > + {{ tag }} + </span> </div> </template> @@ -56,6 +64,7 @@ export default CloudTags justify-content: center; align-items: center; width: 100%; + min-height: 160px; margin-bottom: var(--margin--small); padding: var(--margin--large); @@ -66,12 +75,18 @@ export default CloudTags background: var(--color-analog); border-bottom: 1px solid var(--color-separation-border); } + .tag { margin: var(--margin--tiny); + cursor: pointer; + transition: all 0.2s ease; + animation: reveal-zoom 1s ease; + &:hover { color: var(--color-hover); + transform: translateY(-2px); } } </style> diff --git a/web/src/components/bookmark/Tags.vue b/web/src/components/bookmark/Tags.vue index 2524529..521c36c 100644 --- a/web/src/components/bookmark/Tags.vue +++ b/web/src/components/bookmark/Tags.vue @@ -5,8 +5,9 @@ :key="tag" v-dompurify-html="hltags[i] || tag" class="tag" + :class="{'active' : isActive(i)}" @click.prevent="addTag(tag)" - ></span> + >{{hltags[i]}}</span> </div> </template> @@ -25,6 +26,10 @@ class Tags extends Vue { addTag(tag) { this.addTagsAndGo([tag]) } + + isActive(i) { + return this.hltags && this.hltags[i].search('<b>') != -1; + } } export default Tags @@ -49,7 +54,7 @@ export default Tags font-weight: bold; text-decoration: none; - background: #0a3d621a; + background-color: #0a3d621a; border-radius: 4px; cursor: pointer; @@ -59,5 +64,10 @@ export default Tags background: var(--color-tag); color: white; } + + &.active { + background-color: #5C6BC0; + color: white; + } } </style> diff --git a/web/src/components/common/TagsInput.vue b/web/src/components/common/TagsInput.vue index 18fa467..791df9c 100644 --- a/web/src/components/common/TagsInput.vue +++ b/web/src/components/common/TagsInput.vue @@ -94,16 +94,17 @@ export default TagsInput </script> <style lang="less"> -.tags-input { +.vue-tags-input.tags-input { max-width: 100%; .ti-input { + width: 100%; padding: 2px 5px; color: var(--color-black); background-color: transparent; - border: 1px solid var(--color-grey); + border: 1px solid var(--color-grey--lighter); border-radius: 3px; } diff --git a/web/src/components/preferences/TagsEditor.vue b/web/src/components/preferences/TagsEditor.vue index 57efc64..64be180 100644 --- a/web/src/components/preferences/TagsEditor.vue +++ b/web/src/components/preferences/TagsEditor.vue @@ -4,18 +4,22 @@ <TagsInput id="oldTags" v-model="oldTags" :noCreation="true" :limit="1" :displayCount="true"></TagsInput> <label for="newTags">with</label> <TagsInput id="oldTags" v-model="newTags" :limit="1"></TagsInput> - <button class="replace" @click.prevent="doAction">replace</button> + <Button class="replace" @click.prevent="doAction">replace</Button> <span class="errorMsg">{{ errorMsg }}</span> </div> </template> <script> import { Component, Vue } from 'vue-property-decorator' +import Button from '@/components/common/Button' import TagsInput from '@/components/common/TagsInput' @Component({ name: 'TagsEditor', - components: { TagsInput } + components: { + Button, + TagsInput + } }) class TagsEditor extends Vue { errorMsg = '' -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.