encrypt/gancio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactoring with vuetify

Browse Source
This commit is contained in:
les
2020-07-31 01:03:19 +02:00
parent 24a99d0eb0
commit 3f49c915ab
25 changed files with 686 additions and 1071 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Calendar.vue
View File

@@ -4,7 +4,6 @@
title-position='left'
:is-dark="settings['theme.is_dark']"
@update:from-page='updatePage'
:columns="$screens({ default: 1, lg: 2 })"
:locale='$i18n.locale'
:attributes='attributes'
transition='fade'
@@ -84,7 +83,6 @@ export default {
</script>
<style>
.vc-opacity-0 {
opacity: 0.3 !important;
}

2
components/Event.vue
View File

@@ -108,7 +108,7 @@ export default {
</script>
<style lang="less" scoped>
.event {
width: 300px;
width: 330px;
max-width: 450px;
flex-grow: 1;
margin: .2em;

2
components/FollowMe.vue
View File

@@ -3,7 +3,7 @@
p(v-html="$t('event.follow_me_description', { title: settings.title, account: `@${settings.instance_name}@${domain}`})")
v-text-field(v-model='instance_hostname' ref='instance')
a(slot='append' :href='link' target='_blank')
v-btn(:disabled='(!couldGo || !proceed)' plain type="primary" icon='el-icon-document') {{$t("common.follow")}}
v-btn(:disabled='(!couldGo || !proceed)' plain type="primary") {{$t("common.follow")}}
p.mt-2 <img class='instance_thumb' :src="instance.thumbnail"/> {{instance.title}}
</template>
<script>

13
components/Home.vue
View File

@@ -2,7 +2,7 @@
v-container#home(fluid)
Announcement(v-for='announcement in announcements' :key='`a_${announcement.id}`' :announcement='announcement')
#calbar.row.mt-2.mb-2
.col-xl-7.col-lg-7.col-sm-6.col-xs-12
.col-xl-5.col-lg-5.col-sm-5.col-xs-12
client-only
Calendar
@@ -50,16 +50,11 @@ export default {
}
</script>
<style lang='less'>
// #calbar {
// max-width: 1000px;
// // margin: 0 auto;
// }
// #home {
// max-width: 1600px;
// }
#home {
max-width: 1400px;
}
#events {
max-width: 1600px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;

19
components/List.vue
View File

@@ -51,23 +51,4 @@ export default {
#list {
max-width: 500px;
margin: 0 auto;
.el-timeline {
padding-left: 5px;
hr {
margin-top: 4px;
margin-bottom: 4px;
}
}
.el-timeline-item {
padding-bottom: 1px;
}
.el-timeline-item__timestamp {
margin: 0px;
padding: 0px;
}
}
</style>

86
components/Nav.vue
View File

@@ -68,54 +68,6 @@
v-btn(icon v-clipboard:copy='feedLink' v-clipboard:success='copyLink')
v-icon(color='orange') mdi-rss
//- el-menu-item(type='text' v-clipboard:copy='feedLink' v-clipboard:success='copyLink')
//- v-icon(color='orange' name='rss')
//- el-header#header
//- img(src='/favicon.ico')
//- span.ml-1.hidden-xs-only {{settings.title}}
//- small.hidden-sm-only {{settings.description}}
//- el-menu#menu(mode='horizontal' router )
//- el-menu-item(v-if='could_add' index='/add')
//- i.el-icon-plus
//- span.hidden-xs-only {{$t('common.add_event')}}
//- //- nuxt-link(to='/export')
//- el-menu-item(index='/export')
//- i.el-icon-share
//- span.hidden-xs-only {{$t('common.share')}}
//- el-submenu(v-if='settings.enable_trusted_instances && settings.trusted_instances && settings.trusted_instances.length' index=4)
//- template(slot='title')
//- i.el-icon-guide
//- span.hidden-xs-only {{$t('common.places')}}
//- el-menu-item(v-for='instance in settings.trusted_instances' :key='instance.name')
//- a(:href='instance.url' target='_link')
//- img.mr-1(:src='`${instance.url}/favicon.ico`' style='height: 25px;')
//- span.ml-1 {{instance.label || instance.name}}
//- el-menu-item(v-if='!$auth.loggedIn' index='/login')
//- i.el-icon-user
//- span.hidden-xs-only {{$t('common.login')}}
//- el-submenu(v-if='$auth.loggedIn' index=3)
//- template(slot='title')
//- i.el-icon-user
//- span.hidden-xs-only {{$t('common.user')}}
//- el-menu-item(divided index='/settings')
//- i.el-icon-s-tools
//- span {{$t('common.settings')}}
//- el-menu-item(v-if='$auth.user.is_admin' index='/admin')
//- i.el-icon-s-operation
//- span {{$t('common.admin')}}
//- el-menu-item(@click='logout')
//- i.el-icon-switch-button
//- span {{$t('common.logout')}}
//- el-menu-item(type='text' v-clipboard:copy='feedLink' v-clipboard:success='copyLink')
//- v-icon(color='orange' name='rss')
</template>
<script>
import { mapState } from 'vuex'
@@ -146,12 +98,12 @@ export default {
},
methods: {
copyLink () {
this.$root.$emit('message', {
this.$root.$message({
message: this.$t('common.feed_url_copied')
})
},
logout () {
this.$root.$emit('message', {
this.$root.$message({
message: this.$t('common.logout_ok')
})
this.$auth.logout()
@@ -172,8 +124,7 @@ export default {
this.setSetting({ key: 'trusted_instances', value: this.settings.trusted_instances.concat(trusted_instance) })
} catch (e) {
console.error(e)
Message({
showClose: true,
this.$root.$message({
type: 'error',
message: e
})
@@ -182,34 +133,3 @@ export default {
}
}
</script>
<style lang='less'>
// #header {
// display: inline;
// #logo {
// img {
// max-height: 60px;
// }
// float: left;
// line-height: 60px;
// color: white;
// font-size: 1.5em;
// font-weight: 600;
// text-decoration: none;
// small {
// font-size: 0.5em;
// }
// }
// #menu {
// position: absolute;
// right: 10px;
// top: 0px;
// border-bottom: none;
// .el-menu-item {
// padding: 0px 15px;
// }
// }
// }
</style>

58
components/Search.vue
View File

@@ -11,19 +11,38 @@
:label="$t('event.show_past')"
v-model='showPast')
v-autocomplete#searchInput.mt-0(:placeholder='$t("common.filter")'
v-model='search' :debounce='200'
:fetch-suggestions='querySearch' clearable
@select='addFilter')
template(slot-scope='{ item }')
span.float-left {{ item.label }}
i.float-right.el-icon-place(v-if='item.type==="place"')
i.float-right.el-icon-collection-tag(v-if='item.type==="tag"')
#filters
v-vtn.mr-1.bg-dark(type='text' round plain v-for='t in filters.tags' size='mini'
:key='t' @click='removeTag(t)') {{t}}
v-btn.mr-1.bg-dark.text-warning(type='text' round plain v-for='p in selectedPlaces' size='mini'
:key='p.id' @click='removePlace(p.id)') {{p.name}}
p {{filter}}
v-autocomplete.mt-0(
:label='$t("common.filter")'
:items='keywords'
v-model='filter'
:search-input.sync='search'
item-text='label'
chips
multiple
)
template(v-slot:selection="data")
v-chip(v-bind="data.attrs"
:input-value="data.selected"
close
@click="data.select"
@click:close="remove(data.item)")
v-avatar(left)
v-icon
//- <v-img :src="data.item.avatar"></v-img>
//- </v-avatar>
span {{ data.item.name }}
template(v-slot:item='{ item }')
v-list-item-content
v-list-item-title(v-text='item.label')
//- span.float-left {{ item.label }}
//- i.float-right.el-icon-place(v-if='item.type==="place"')
//- i.float-right.el-icon-collection-tag(v-if='item.type==="tag"')
//- #filters
//- v-vtn.mr-1.bg-dark(type='text' round plain v-for='t in filters.tags' size='mini'
//- :key='t' @click='removeTag(t)') {{t}}
//- v-btn.mr-1.bg-dark.text-warning(type='text' round plain v-for='p in selectedPlaces' size='mini'
//- :key='p.id' @click='removePlace(p.id)') {{p.name}}
</template>
<script>
@@ -36,14 +55,15 @@ export default {
},
data () {
return {
filter: null,
search: ''
}
},
computed: {
...mapState(['tags', 'places', 'filters', 'settings']),
selectedPlaces () {
return this.places.filter(p => this.filters.places.includes(p.id))
},
// selectedPlaces () {
// return this.places.filter(p => this.filters.places.includes(p.id))
// },
keywords () {
const tags = this.tags.filter(t => !this.filters.tags.includes(t.tag)).map(t => ({ type: 'tag', label: t.tag, weigth: t.weigth, id: t.tag }))
const places = this.places.filter(p => !this.filters.places.includes(p.id))
@@ -58,10 +78,10 @@ export default {
showRecurrent: {
set (value) { this.showRecurrentEvents(value) },
get () { return this.filters.show_recurrent_events }
},
filter () {
return this.filters.tags.concat(this.filters.places)
}
// filter () {
// return this.filters.tags.concat(this.filters.places)
// }
},
methods: {
...mapActions(['setSearchPlaces', 'setSearchTags',

5
components/admin/Settings.vue
View File

@@ -1,6 +1,7 @@
<template lang="pug">
v-container
v-card
v-card-title {{$t('common.settings')}}
v-card-text
//- select timezone
v-autocomplete(v-model='instance_timezone'
:label="$t('admin.select_instance_timezone')"

62
components/admin/Theme.vue
View File

@@ -1,25 +1,43 @@
<template lang="pug">
v-container
v-card
v-card-title {{$t('common.theme')}}
v-card-text
p {{settings['theme.primary']}}
//- LOGO
v-file-input.mt-5(ref='upload'
:label="$t('admin.favicon')"
@change='uploadLogo'
accept='image/*')
template(slot='append-outer')
v-btn(small @click='resetLogo') Reset
v-img(:src='`${settings.baseurl}/favicon.ico?${logoKey}`'
max-width="100px" max-height="80px" contain)
//- LOGO
v-file-input.mt-5(ref='upload'
:label="$t('admin.favicon')"
@change='uploadLogo'
accept='image/*')
template(slot='append-outer')
v-btn(small @click='resetLogo') Reset
v-img(:src='`${settings.baseurl}/favicon.ico?${logoKey}`'
max-width="100px" max-height="80px" contain)
v-switch.mt-5(v-model='is_dark'
inset
:label="$t('admin.is_dark')")
v-color-picker(
mode='hexa'
:label="$t('common.primary_color')"
v-model='primary_color')
v-switch.mt-5(v-model='is_dark'
inset
:label="$t('admin.is_dark')")
v-row
v-col
v-menu(v-model='primaryMenu'
:close-on-content-click="false"
transition="slide-x-transition"
offset-y
absolute
bottom
max-width="290px"
min-width="290px")
template(v-slot:activator='{ on }')
v-text-field(
:label="$t('event.from')"
:value='primary_color'
v-on='on'
clearable
readonly)
v-color-picker(
mode='hexa'
:label="$t('common.primary_color')"
v-model='primary_color')
</template>
<script>
import { mapActions, mapState } from 'vuex'
@@ -27,7 +45,8 @@ export default {
name: 'Theme',
data () {
return {
logoKey: 0
logoKey: 0,
primaryMenu: false
}
},
computed: {
@@ -43,13 +62,12 @@ export default {
get () { return this.settings['theme.primary'] },
set (value) {
if (!value) { return }
this.setSetting({ key: 'theme.primary', value })
if (this.settings['theme.is_dark']) {
this.$vuetify.theme.themes.dark.primary = value
} else {
this.$vuetify.theme.themes.light.primary = value
}
// this.$vuetify.theme.themes.light.primary = value.hex
// this.setSetting({ key: 'theme.primary', value: value.hex })
}
}
},