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>.