branch bow-v2-go updated (ad665b6 -> e6e4497)
This is an automated email from the git hooks/post-receive script. New change to branch bow-v2-go in repository bow. See https://gitlab.nuiton.org/chorem/bow.git from ad665b6 Modifications d'affichage des tags new 1fd1a6a Modification pour pouvoir retirer un tag de la recherche en cliquant dessus new 2cd308f Modifications d'affichage de la pagination new 0a0af36 Création de composants pour l'affichage en onglets new c0f478a Création d'un composant pour uniformiser l'affichage des formulaires new 14ccd09 Modifications d'affichage des tags new b23e65e Affichage des écrans de préférences sous forme d'onglets new e6e4497 Début d'intégration de la vue grille The 7 revisions listed above as "new" are entirely new to this repository and will be described in separate emails. The revisions listed as "adds" were already present in the repository and have only been added to this reference. Detailed log of new commits: commit e6e44978f5fd63fb3a87aca9a5d020e8db584f41 Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 17:44:51 2020 +0200 Début d'intégration de la vue grille commit b23e65ec1bd5649be2590e9cb757deac3761b120 Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 17:24:27 2020 +0200 Affichage des écrans de préférences sous forme d'onglets commit 14ccd0945c2045819818bac0ad465d0c6f8867d7 Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 17:23:41 2020 +0200 Modifications d'affichage des tags commit c0f478ae7aa96a3de7df3070431d240915b9334c Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 17:21:52 2020 +0200 Création d'un composant pour uniformiser l'affichage des formulaires commit 0a0af365460f551bb5ced61e0b239c3887515dd7 Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 17:21:06 2020 +0200 Création de composants pour l'affichage en onglets commit 2cd308fe4aa0a813f6dcfd6af7f7816ec0a39449 Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 17:20:40 2020 +0200 Modifications d'affichage de la pagination commit 1fd1a6aec0ee5ecc4126d37873470691fa8e0f9b Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 14:39:37 2020 +0200 Modification pour pouvoir retirer un tag de la recherche en cliquant dessus Summary of changes: web/src/App.vue | 11 ++- web/src/assets/less/_animations.less | 11 +++ web/src/assets/less/_colors.less | 4 +- web/src/assets/less/_theme-default.less | 6 +- web/src/components/Bookmark.vue | 12 ++-- web/src/components/CloudTags.vue | 17 ++++- web/src/components/Navigation.vue | 48 ++++++++++--- web/src/components/bookmark/Tags.vue | 14 +++- web/src/components/common/Form.vue | 56 ++++++++++++++++ web/src/components/common/PageMainTitle.vue | 4 +- web/src/components/common/Pagination.vue | 79 ++++++++++++++++++++++ web/src/components/common/TabContent.vue | 63 +++++++++++++++++ web/src/components/common/Tabs.vue | 60 +++++++++++++++++ web/src/components/common/TagsInput.vue | 5 +- web/src/components/preferences/TagsEditor.vue | 8 ++- web/src/main.js | 8 +-- web/src/views/BookmarkEdit.vue | 22 +++--- web/src/views/Home.vue | 56 ++++++++++++++-- web/src/views/Preferences.vue | 97 ++++++++++++++++++++++++--- 19 files changed, 521 insertions(+), 60 deletions(-) create mode 100644 web/src/components/common/Form.vue create mode 100644 web/src/components/common/Pagination.vue create mode 100644 web/src/components/common/TabContent.vue create mode 100644 web/src/components/common/Tabs.vue -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
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 1fd1a6aec0ee5ecc4126d37873470691fa8e0f9b Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 14:39:37 2020 +0200 Modification pour pouvoir retirer un tag de la recherche en cliquant dessus --- web/src/main.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/web/src/main.js b/web/src/main.js index 0d5e161..5e30e1a 100644 --- a/web/src/main.js +++ b/web/src/main.js @@ -117,17 +117,15 @@ Vue.mixin({ }, addTagsAndGo: function(tags) { let query = { ...this.currentQuery } - let added = false query.tags = query.tags ? [...query.tags] : [] tags.forEach((t) => { if (query.tags.indexOf(t) === -1) { query.tags.push(t) - added = true + } else { + query.tags.splice(t, 1) } }) - if (added) { - this.go(query) - } + this.go(query) } }, computed: { -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
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 2cd308fe4aa0a813f6dcfd6af7f7816ec0a39449 Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 17:20:40 2020 +0200 Modifications d'affichage de la pagination --- web/src/components/Navigation.vue | 31 ++++++++++--- web/src/components/common/Pagination.vue | 79 ++++++++++++++++++++++++++++++++ web/src/views/Home.vue | 10 +++- 3 files changed, 113 insertions(+), 7 deletions(-) diff --git a/web/src/components/Navigation.vue b/web/src/components/Navigation.vue index 17fadf6..aec4fe6 100644 --- a/web/src/components/Navigation.vue +++ b/web/src/components/Navigation.vue @@ -1,7 +1,7 @@ <template> <div class="navigation"> <div class="display-settings"> - <i class="icon icon-list"/> + <i class="icon icon-list active"/> <i class="icon icon-grid"/> </div> @@ -71,22 +71,41 @@ export default Navigation .navigation { display: flex; flex-wrap: wrap; + align-items: center; justify-content: space-between; width: calc(100% - 2 * var(--margin--medium)); max-width: 1200px; margin: var(--margin--small) var(--margin--medium); - padding: var(--margin--small); + padding: var(--margin--small) var(--margin--medium); - background: var(--color-bookmarks-header); - border: 1px solid var(--color-separation-border); color: var(--color-text); - position: relative; - text-align: center; font-size: 130%; + text-align: center; + + background-color: rgba(0, 0, 0, 0.07); + border: 1px solid var(--color-separation-border); + box-shadow: var(--default-ui-element-shadow); + position: relative; +} + +.display-settings { + flex: 2; + text-align: left; + + .icon { + opacity: 0.3; + margin-right: var(--margin--tiny); + } + .icon.active { + opacity: inherit; + } } .sort { + flex: 2; margin-left: 15px; + + text-align: right; } </style> diff --git a/web/src/components/common/Pagination.vue b/web/src/components/common/Pagination.vue new file mode 100644 index 0000000..cc7af04 --- /dev/null +++ b/web/src/components/common/Pagination.vue @@ -0,0 +1,79 @@ +<template> + <div class="pagination"> + <div class="cursor"> + <span :class="{hidden : queryInfo.first == 0}"> + <Button @click="goFirst()" class="pagination-button"><<</Button> + <Button @click="goPrev()" class="pagination-button"><</Button> + </span> + + <span class="current-page"> + {{ 1 + queryInfo.first }}-{{ last }} + </span> + + <span :class="{hidden : last == queryInfo.total}"> + <Button @click="goNext()" class="pagination-button">></Button> + <Button @click="goLast()" class="pagination-button">>></Button> + </span> + </div> + </div> +</template> + +<script> +import { Component, Vue } from 'vue-property-decorator' +import Button from '@/components/common/Button.vue' + +@Component({ + name: 'Pagination', + components: { Button } +}) +class Pagination extends Vue { + get last() { + if (this.queryInfo.first + this.queryInfo.limit <= this.queryInfo.total) { + return this.queryInfo.first + this.queryInfo.limit + } + return this.queryInfo.total + } + + get orderby() { + return this.queryInfo.orderby + } + + set orderby(value) { + this.changeOrderBy(value) + } + + get orderasc() { + return this.queryInfo.orderasc + } + + set orderasc(value) { + this.changeOrderAsc(value) + } +} + +export default Pagination +</script> + +<style lang="less" scoped> +.hidden { + visibility: hidden; + pointer-events: none; +} +.pagination { + margin-top: var(--margin--small); + margin-bottom: var(--margin--medium); +} + +.current-page { + margin: var(--margin--medium) 0; + padding: var(--margin--tiny) var(--margin--small); + + background-color: rgba(0, 0, 0, 0.07); + border: 2px solid transparent; +} + +.pagination-button { + margin-left: var(--margin--small); + margin-right: var(--margin--small); +} +</style> diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue index 3143047..fb72710 100644 --- a/web/src/views/Home.vue +++ b/web/src/views/Home.vue @@ -11,6 +11,8 @@ :bookmark="bookmark" ></Bookmark> </div> + + <Pagination></Pagination> </div> </template> @@ -20,11 +22,17 @@ import { Component, Prop, Vue } from 'vue-property-decorator' import Bookmark from '@/components/Bookmark' import CloudTags from '@/components/CloudTags' import Navigation from '@/components/Navigation' +import Pagination from '@/components/common/Pagination' @Component({ name: 'Home', props: ['id', 'tags', 'fulltext', 'query', 'orderby', 'orderasc', 'first'], - components: { CloudTags, Bookmark, Navigation } + components: { + CloudTags, + Bookmark, + Navigation, + Pagination + } }) class Home extends Vue { @Prop id -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
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 0a0af365460f551bb5ced61e0b239c3887515dd7 Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 17:21:06 2020 +0200 Création de composants pour l'affichage en onglets --- web/src/components/common/TabContent.vue | 63 ++++++++++++++++++++++++++++++++ web/src/components/common/Tabs.vue | 60 ++++++++++++++++++++++++++++++ 2 files changed, 123 insertions(+) diff --git a/web/src/components/common/TabContent.vue b/web/src/components/common/TabContent.vue new file mode 100644 index 0000000..9eb9ea1 --- /dev/null +++ b/web/src/components/common/TabContent.vue @@ -0,0 +1,63 @@ +<template> + <div v-if="id == current" class="tab bow-form"> + <h2>{{name}}</h2> + <slot></slot> + </div> +</template> + +<script> +import { Component, Prop, Vue } from 'vue-property-decorator' + +@Component({ + name: 'TabContent', + props: ['id', 'name', 'current'], + components: {} +}) +class TabContent extends Vue { + @Prop id + @Prop name + @Prop current + + created() { + this.$emit('createTab', this.id, this.name) + } +} + +export default TabContent +</script> + +<style lang="less" scoped> +@import '../../assets/less/globals'; + +.bow-form { + display: flex; + flex-direction: column; + width: min-content; + min-width: 90vw; + margin: var(--margin--small) auto; +} + +h2 { + margin-bottom: var(--margin--medium); + + text-align: center; +} +h3 { + margin-bottom: var(--margin--small); + margin-top: var(--margin--medium); + + text-align: center; +} + +@media screen and (min-width: @screen-desktop-low) { + .bow-form { + min-width: 450px; + } +} + +@media screen and (min-width: @screen-desktop-large) { + .bow-form { + min-width: 600px; + } +} +</style> diff --git a/web/src/components/common/Tabs.vue b/web/src/components/common/Tabs.vue new file mode 100644 index 0000000..0e9bf92 --- /dev/null +++ b/web/src/components/common/Tabs.vue @@ -0,0 +1,60 @@ +<template> + <ul class="tabs"> + <li + v-for="tab in tabs" + :key="tab.name" + :class="{'active' : tab.id === current}" + @click="displayTab(tab.id)"> + {{tab.name}} + </li> + </ul> +</template> + +<script> +import { Component, Prop, Vue } from 'vue-property-decorator' + +@Component({ + name: 'Tabs', + props: ['tabs', 'current'], + components: {} +}) +class Tabs extends Vue { + @Prop tabs + @Prop current + + displayTab(tabId) { + this.$emit('changeDisplayedTab', tabId) + } +} + +export default Tabs +</script> + +<style lang="less" scoped> +.tabs { + display: flex; + justify-content: center; + list-style: none; + + margin-bottom: var(--margin--large); + padding-top: var(--margin--medium); + padding-bottom: 6px; + + border-bottom: 1px solid #eee; + + li { + margin: 0 20px; + padding-bottom: 5px; + margin-bottom: -8px; + cursor: pointer; + font-size: 18px; + line-height: 21px; + text-decoration: none; + + &.active { + color: var(--color-main); + border-bottom: 3px solid var(--color-main); + } + } +} +</style> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
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 c0f478ae7aa96a3de7df3070431d240915b9334c Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 17:21:52 2020 +0200 Création d'un composant pour uniformiser l'affichage des formulaires --- web/src/App.vue | 11 +++++++- web/src/components/common/Form.vue | 56 ++++++++++++++++++++++++++++++++++++++ web/src/views/BookmarkEdit.vue | 22 ++++++--------- 3 files changed, 74 insertions(+), 15 deletions(-) diff --git a/web/src/App.vue b/web/src/App.vue index 5c70801..fabeba2 100644 --- a/web/src/App.vue +++ b/web/src/App.vue @@ -4,7 +4,7 @@ <main> <Header :route="$route.fullPath"/> - <router-view :key="$route.fullPath" /> + <router-view :key="$route.fullPath" class="main-content"/> </main> <Footer /> @@ -93,5 +93,14 @@ main { body { padding-left: var(--sidebar-width); } + + main { + display: flex; + flex-direction: column; + } + + .main-content { + flex-grow: 1; + } } </style> diff --git a/web/src/components/common/Form.vue b/web/src/components/common/Form.vue new file mode 100644 index 0000000..eebaec2 --- /dev/null +++ b/web/src/components/common/Form.vue @@ -0,0 +1,56 @@ +<template> + <div class="bow-form-wrapper"> + <PageMainTitle> + <slot name="Title"></slot> + </PageMainTitle> + + <form + v-if="hasFormContent" + class="bow-form" + onsubmit.prevent="save" + > + <slot name="FormContent"></slot> + </form> + + <slot name="Content"></slot> + + <div v-if="errorMsg"> + {{errorMsg}} + </div> + </div> +</template> + +<script> + import { Component, Prop, Vue } from 'vue-property-decorator' + import PageMainTitle from '@/components/common/PageMainTitle' + + @Component({ + name: 'Form', + props: ['errorMsg'], + components: { + PageMainTitle + } + }) + class Form extends Vue { + @Prop errorMsg + + get hasFormContent() { + return this.$slots.FormContent && this.$slots.FormContent.length; + } + } + + export default Form +</script> + +<style scoped lang="less"> +.bow-form { + display: flex; + flex-direction: column; + width: min-content; + margin: var(--margin--small) auto; +} + +.bow-form-wrapper { + background-color: white; +} +</style> diff --git a/web/src/views/BookmarkEdit.vue b/web/src/views/BookmarkEdit.vue index ae56e6d..206c731 100644 --- a/web/src/views/BookmarkEdit.vue +++ b/web/src/views/BookmarkEdit.vue @@ -1,11 +1,10 @@ <template> - <div class="bookmark-editor"> - <PageMainTitle class="bow-form-title"> + <Form :errorMsg="errorMsg"> + <template v-slot:Title> Ajouter ou modifier une URL - </PageMainTitle> + </template> - <div>{{ errorMsg }}</div> - <form class="bow-form" onsubmit.prevent="save"> + <template v-slot:FormContent @submit="save"> <FormRow> <label>Date</label> <BookmarkDate @@ -60,12 +59,13 @@ <Button class="button" v-on:click.prevent="cancel">Cancel</Button> <Button class="button" primary v-on:click.prevent="save">Save</Button> </div> - </form> - </div> + </template> + </Form> </template> <script> import { Component, Prop, Vue } from 'vue-property-decorator' +import Form from '@/components/common/Form' import BookmarkDate from '@/components/common/BookmarkDate' import Button from '@/components/common/Button.vue' import FormRow from '@/components/common/FormRow' @@ -86,6 +86,7 @@ import TagsInput from '@/components/common/TagsInput' components: { BookmarkDate, Button, + Form, FormRow, PageMainTitle, TagsInput @@ -208,13 +209,6 @@ export default BookmarkEdit </script> <style lang="less" scoped> -.bow-form { - display: flex; - flex-direction: column; - width: min-content; - margin: var(--margin--small) auto; -} - .actions { display: flex; justify-content: space-around; -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
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>.
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 b23e65ec1bd5649be2590e9cb757deac3761b120 Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 17:24:27 2020 +0200 Affichage des écrans de préférences sous forme d'onglets --- web/src/components/common/PageMainTitle.vue | 4 +- web/src/views/Preferences.vue | 97 +++++++++++++++++++++++++---- 2 files changed, 88 insertions(+), 13 deletions(-) diff --git a/web/src/components/common/PageMainTitle.vue b/web/src/components/common/PageMainTitle.vue index 558d6c8..2f0a1dc 100644 --- a/web/src/components/common/PageMainTitle.vue +++ b/web/src/components/common/PageMainTitle.vue @@ -16,7 +16,7 @@ h1 { } h1.bow-list-title, -h1.bow-form-title { +.bow-form-wrapper h1 { margin-top: 0; margin-bottom: var(--margin--small); padding: var(--margin--large); @@ -24,7 +24,7 @@ h1.bow-form-title { text-align: center; } -h1.bow-form-title { +.bow-form-wrapper h1 { background-color: var(--color-white--darker); } </style> diff --git a/web/src/views/Preferences.vue b/web/src/views/Preferences.vue index b891a53..1f66988 100644 --- a/web/src/views/Preferences.vue +++ b/web/src/views/Preferences.vue @@ -1,18 +1,66 @@ <template> - <div class="preferences"> - <div>{{ errorMsg }}</div> - <a :href="bookmarkletAdd">bookmarklet add</a> Drag and drop this link to your toolbar browser. To bookmark page, select some text in page, and click on it, in your toolbar browser. - <LangEditor></LangEditor> - <MaxResultEditor></MaxResultEditor> - <MaxTagInCloudEditor></MaxTagInCloudEditor> - <Actions :actions="user.actions"></Actions> - <TagsEditor></TagsEditor> - </div> + <Form :errorMsg="errorMsg"> + <template v-slot:Title> + Préférences + </template> + + <template v-slot:Content > + <Tabs + :tabs="tabs" + :current="tabDisplayedId" + @changeDisplayedTab="changeDisplayedTab" + ></Tabs> + + <TabContent + id="general" + name="Informations générales" + :current="tabDisplayedId" + @createTab="registerTab" + > + <h3>Extensions / Bookmark</h3> + <a :href="bookmarkletAdd">bookmarklet add</a> + Drag and drop this link to your toolbar browser. To bookmark page, select some text in page, and click on it, in your toolbar browser. + + </TabContent> + + <TabContent + id="preferences" + name="Préférences du site" + :current="tabDisplayedId" + @createTab="registerTab" + > + <LangEditor></LangEditor> + <MaxResultEditor></MaxResultEditor> + <MaxTagInCloudEditor></MaxTagInCloudEditor> + </TabContent> + + <TabContent + id="actions" + name="Actions" + :current="tabDisplayedId" + @createTab="registerTab" + > + <Actions :actions="user.actions"></Actions> + </TabContent> + + <TabContent + id="tags" + name="Édition des tags" + :current="tabDisplayedId" + @createTab="registerTab" + > + <TagsEditor></TagsEditor> + </TabContent> + </template> + </Form> </template> <script> // @ is an alias to /src import { Component, Vue } from 'vue-property-decorator' +import Form from '@/components/common/Form' +import Tabs from '@/components/common/Tabs' +import TabContent from '@/components/common/TabContent' import LangEditor from '@/components/preferences/LangEditor' import MaxResultEditor from '@/components/preferences/MaxResultEditor' import MaxTagInCloudEditor from '@/components/preferences/MaxTagInCloudEditor' @@ -21,11 +69,23 @@ import TagsEditor from '@/components/preferences/TagsEditor' @Component({ name: 'Preferences', - components: {LangEditor, MaxTagInCloudEditor, MaxResultEditor, Actions, TagsEditor} + components: { + Actions, + Form, + LangEditor, + MaxResultEditor, + MaxTagInCloudEditor, + Tabs, + TabContent, + TagsEditor + } }) class Preferences extends Vue { errorMsg = '' bookmarkletAdd = `javascript:document.location='${location.protocol}//${location.host}/edit/new?uri='+encodeURIComponent(location.href)+'&description='+encodeURIComponent(document.title + '\\n' + (document.getSelection() || ''))` + tabDisplayedId = 'general' + tabs = [] + load() { this.$fetch.get('/users/current').then( @@ -41,13 +101,28 @@ class Preferences extends Vue { ) } + changeDisplayedTab(tabId) { + this.tabDisplayedId = tabId; + } + beforeMount() { console.log('beforeMounted preference') this.load() } + + registerTab(i, y) { + this.tabs.push({ + id: i, + name: y + }) + } } export default Preferences </script> -<style lang="less"></style> +<style lang="less"> +.bow-form-wrapper { + background-color: white; +} +</style> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
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 e6e44978f5fd63fb3a87aca9a5d020e8db584f41 Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 17:44:51 2020 +0200 Début d'intégration de la vue grille --- web/src/assets/less/_colors.less | 4 +-- web/src/assets/less/_theme-default.less | 6 ++++- web/src/components/Bookmark.vue | 12 +++++---- web/src/components/Navigation.vue | 19 +++++++++++--- web/src/views/Home.vue | 46 ++++++++++++++++++++++++++++++--- 5 files changed, 73 insertions(+), 14 deletions(-) diff --git a/web/src/assets/less/_colors.less b/web/src/assets/less/_colors.less index a59f463..6cf83e3 100644 --- a/web/src/assets/less/_colors.less +++ b/web/src/assets/less/_colors.less @@ -1,7 +1,7 @@ * { --color-text : #2c3e50; - --color-bg : var(--color-white); + --color-bg : var(--color-white--darker); --color-bg-sidebar : var(--color-black); --color-separation-border : #EEE; @@ -10,7 +10,7 @@ --color-active : var(--color-complementary--darker); --color-bookmarks-header : var(--color-white--darker); - --color-bookmark-bg : #FAFDFD; + --color-bookmark-bg : white; --color-footer-text : var(--color-grey); diff --git a/web/src/assets/less/_theme-default.less b/web/src/assets/less/_theme-default.less index 4d57e7e..92430f3 100644 --- a/web/src/assets/less/_theme-default.less +++ b/web/src/assets/less/_theme-default.less @@ -12,7 +12,8 @@ --color-analog--darker : #0a3d62; --color-black : #1e2a2f; --color-grey : #575757; - --color-white--darker : #F4F4F4; + --color-grey--lighter : #ccc; + --color-white--darker : #f8f9fa; --color-error : #b71540; /* Main display elements default sizes */ @@ -28,9 +29,12 @@ --margin--large : 50px; /* Some display configuration for reusable components */ + --default-ui-element-shadow : 0 2px 5px 1px rgba(0,0,0, 0.02); --default-bookmark-radius : 3px; --default-bookmark-title-height : 30px; + --grid-display-mode-bookmark-width: 300px; + } @font-face { diff --git a/web/src/components/Bookmark.vue b/web/src/components/Bookmark.vue index cdc2d8f..094d933 100644 --- a/web/src/components/Bookmark.vue +++ b/web/src/components/Bookmark.vue @@ -128,10 +128,6 @@ export default Bookmark <style lang="less"> @import '../assets/less/globals'; -b { - color: red; -} - .bookmark { position: relative; @@ -144,7 +140,7 @@ b { padding: var(--margin--small) var(--margin--medium); background-color: var(--color-bookmark-bg); - border: 1px solid var(--color-separation-border); + box-shadow: var(--default-ui-element-shadow); .info{ flex-grow: 2; @@ -227,6 +223,12 @@ b { } } +.grid { + .bookmark { + flex-direction: column; + overflow: auto; + } +} @media screen and (min-width: @screen-desktop-low) { .bookmark-info { diff --git a/web/src/components/Navigation.vue b/web/src/components/Navigation.vue index aec4fe6..0ff594b 100644 --- a/web/src/components/Navigation.vue +++ b/web/src/components/Navigation.vue @@ -1,8 +1,14 @@ <template> <div class="navigation"> <div class="display-settings"> - <i class="icon icon-list active"/> - <i class="icon icon-grid"/> + <i + class="icon icon-list" + :class="{active : displayMode == 'list'}" + @click="changeDisplayMode('list')"/> + <i + class="icon icon-grid" + :class="{active : displayMode == 'grid'}" + @click="changeDisplayMode('grid')"/> </div> <div class="cursor"> @@ -33,13 +39,16 @@ </template> <script> -import { Component, Vue } from 'vue-property-decorator' +import { Component, Prop, Vue } from 'vue-property-decorator' @Component({ name: 'Navigation', + props: ['displayMode'], components: {} }) class Navigation extends Vue { + @Prop displayMode + get last() { if (this.queryInfo.first + this.queryInfo.limit <= this.queryInfo.total) { return this.queryInfo.first + this.queryInfo.limit @@ -62,6 +71,10 @@ class Navigation extends Vue { set orderasc(value) { this.changeOrderAsc(value) } + + changeDisplayMode(mode) { + this.$emit('changeDisplayMode', mode) + } } export default Navigation diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue index fb72710..ccf23df 100644 --- a/web/src/views/Home.vue +++ b/web/src/views/Home.vue @@ -2,9 +2,12 @@ <div class="home"> <div>{{ errorMsg }}</div> <CloudTags></CloudTags> - <Navigation></Navigation> + <Navigation + :displayMode="displayMode" + @changeDisplayMode="changeDisplayMode" + ></Navigation> - <div class="bookmarks-list"> + <div class="bookmarks" :class="displayMode"> <Bookmark v-for="bookmark in bookmarks" :key="bookmark.id" @@ -50,6 +53,7 @@ class Home extends Vue { mOrderasc = this.orderasc || false mFirst = this.first || 0 + displayMode = 'list' errorMsg = '' get bookmarks() { @@ -84,6 +88,10 @@ class Home extends Vue { ) } + changeDisplayMode(mode) { + this.displayMode = mode + } + beforeMount() { console.log('beforeMounted home') this.fetchBookmark() @@ -94,13 +102,19 @@ export default Home </script> <style scoped lang="less"> +@import '../assets/less/globals'; + .home { display: flex; flex-direction: column; align-items: center; } -.bookmarks-list { +.bookmarks { + transition: all 0.2s ease-out; +} + +.bookmarks.list { width: 100%; max-width: calc(1200px + 2 * var(--margin--medium)); @@ -108,4 +122,30 @@ export default Home padding-left: var(--margin--medium); padding-right: var(--margin--medium); } + +.bookmarks.grid { + display: grid; + + max-width: calc(1200px); + grid-gap: var(--margin--large); + grid-template-columns: 100%; + margin: 0 var(--margin-large) var(--margin--large) + var(--margin--large); +} + +@media screen and (min-width: @screen-desktop-low) { + .bookmarks.grid { + /* FIXME LK : Check Browsers comptability */ + grid-template-columns: repeat( + auto-fill, + minmax(var(--grid-display-mode-bookmark-width), 1fr) + ); + grid-template-rows: repeat( + auto-fill, + 400px + ); + margin-bottom: var(--margin---small); + overflow-y: auto; + } +} </style> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
participants (1)
-
chorem.org scm