Add movable
This commit is contained in:
parent
ec779ab541
commit
a92369b284
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -14,6 +14,11 @@ export default {
|
|||
settingBoolean: settingBooleanVue,
|
||||
settingInt: settingIntVue,
|
||||
settingString: settingStringVue
|
||||
},
|
||||
methods:{
|
||||
passMove(move) {
|
||||
this.$emit('move', move)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -3,6 +3,12 @@
|
|||
.title(@click="showSettings = !showSettings")
|
||||
slot(name="title")
|
||||
.settings(v-show="showSettings")
|
||||
input.position(
|
||||
@keyup.up.ctrl.exact="onMove('x', -1)" @keyup.down.ctrl.exact="onMove('x', 1)"
|
||||
@keyup.left.ctrl.exact="onMove('y', -1)" @keyup.right.ctrl.exact="onMove('y', 1)"
|
||||
@keyup.up.alt.exact="onMove('h', -1)" @keyup.down.alt.exact="onMove('h', 1)"
|
||||
@keyup.left.alt.exact="onMove('w', -1)" @keyup.right.alt.exact="onMove('w', 1)"
|
||||
)
|
||||
slot(name="settings")
|
||||
</template>
|
||||
|
||||
|
@ -10,6 +16,11 @@
|
|||
export default {
|
||||
data() { return {
|
||||
showSettings: false
|
||||
} }
|
||||
} },
|
||||
methods: {
|
||||
onMove(type, direction) {
|
||||
this.$emit('move', { type: type, direction: direction })
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
export const emitErrorMixin = {
|
||||
methods: {
|
||||
emitError(err) {
|
||||
this.$emit("error", err.toString())
|
||||
this.$emit('error', err.toString())
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -9,7 +9,7 @@ export const emitErrorMixin = {
|
|||
export const handleOptionsMixin = {
|
||||
methods: {
|
||||
saveOptions(options) {
|
||||
this.$emit("save", options)
|
||||
this.$emit('save', options)
|
||||
},
|
||||
setOption(name, value) {
|
||||
const options = {...this.$props}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template lang="pug">
|
||||
.client(@scroll="onScroll")
|
||||
.client(@scroll.passive="onScroll")
|
||||
.statues
|
||||
.header(v-if="notifications.length > 0") Accueil
|
||||
.list(v-if="statues.length > 0")
|
||||
|
@ -13,7 +13,8 @@
|
|||
| Notifications
|
||||
span.date(@click.stop.prevent="onNotificationsClear") ❌
|
||||
.list
|
||||
notification(v-for="notification in notifications" :key="notification.id" :notification="notification" :now="now" :showMedia="showMedia" @dismiss="onNotificationDismiss")
|
||||
notification(v-for="notification in notifications" :key="notification.id" :notification="notification" :now="now"
|
||||
:showMedia="showMedia" @dismiss="onNotificationDismiss" @mark="onStatusMark")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template lang="pug">
|
||||
.mastodon
|
||||
service-header
|
||||
service-header(@move="passMove")
|
||||
template(#title)
|
||||
| Mastodon:
|
||||
span(v-html="parseEmojis(account.display_name, account.emojis)")
|
||||
|
@ -11,7 +11,7 @@
|
|||
setting-boolean(:id="'reply'" :title="'Show replies'" :value="reply" @change="setOptionCouple")
|
||||
setting-int(:id="'buffer'" :title="'Buffer size'" :value="buffer" @change="setOptionCouple")
|
||||
setting-boolean(:id="'showMedia'" :title="'Show medias'" :value="showMedia" @change="setOptionCouple")
|
||||
client(v-if="server && token" v-bind="$props")
|
||||
client(v-if="server && token" v-bind="$props" @error="emitError")
|
||||
.auth(v-else)
|
||||
form(@submit.prevent="setServer")
|
||||
p
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
.content
|
||||
template(v-if="notification.type == 'follow'") Vous suit
|
||||
status.reblog(v-else-if="notification.status" :status="notification.status" :now="now"
|
||||
:showMedia="showMedia" :withAccount="notification.type != 'mention'" @mark.stop.prevent="")
|
||||
:showMedia="showMedia" :withAccount="notification.type != 'mention'" @mark="passMark")
|
||||
|
||||
a.date(@click.stop.prevent="makeDismiss" style="margin-top: -1em") ❌
|
||||
</template>
|
||||
|
@ -38,6 +38,9 @@ export default {
|
|||
methods: {
|
||||
makeDismiss() {
|
||||
this.$emit('dismiss', this.notification.id)
|
||||
},
|
||||
passMark(action) {
|
||||
this.$emit('mark', action)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -65,10 +65,10 @@ export default {
|
|||
makeReply(status) {
|
||||
console.error(status.id) //TODO:
|
||||
},
|
||||
emitMark(status, action, callback) {
|
||||
emitMark(status, action, callback, undo = false) {
|
||||
this.$emit('mark', {
|
||||
id: status.id,
|
||||
type: (status.reblogged ? 'un' : '') + action,
|
||||
type: (undo ? 'un' : '') + action,
|
||||
callback: callback
|
||||
})
|
||||
},
|
||||
|
@ -76,13 +76,13 @@ export default {
|
|||
this.emitMark(status, 'reblog', () => {
|
||||
status.reblogs_count += (status.reblogged ? -1 : 1)
|
||||
status.reblogged = !status.reblogged
|
||||
})
|
||||
}, status.reblogged)
|
||||
},
|
||||
makeFav(status) {
|
||||
this.emitMark(status, 'favourite', () => {
|
||||
status.favourites_count += (status.favourited ? -1 : 1)
|
||||
status.favourited = !status.favourited
|
||||
})
|
||||
}, status.favourited)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template lang="pug">
|
||||
.nextcloud-news(v-show="showEmpty || unreaded.length > 0 || !server || !token || !username")
|
||||
service-header
|
||||
service-header(@move="passMove")
|
||||
template(#title) Nextcloud News
|
||||
template(#settings)
|
||||
setting-int(:id="'update'" :title="'Update interval'" :value="update" @change="setOptionCouple")
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template lang="pug">
|
||||
.openweathermap
|
||||
service-header
|
||||
service-header(@move="passMove")
|
||||
template(#title) OpenWeatherMap
|
||||
template(#settings)
|
||||
setting-string(:id="'token'" :title="'Token'" :value="token" @change="setOptionCouple")
|
||||
|
|
|
@ -27,8 +27,8 @@
|
|||
<div id="services">
|
||||
<component
|
||||
v-for="(service, key) in services" :is="service.type" :key="key"
|
||||
v-bind="service.options" @error="addError" @save="setService(key, $event)"
|
||||
:style="gridPos(key, service.position)"
|
||||
@error="addError" @save="setService(key, $event)" @move="moveService(key, $event)"
|
||||
v-bind="service.options" :style="gridPos(key, service.position)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
12
main.css
12
main.css
|
@ -79,6 +79,11 @@ a {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
#services > div .service-header .settings .position {
|
||||
float: right;
|
||||
width: 1.2em;
|
||||
}
|
||||
|
||||
#services .service-loader {
|
||||
display: inline-block;
|
||||
width: 64px;
|
||||
|
@ -137,6 +142,13 @@ a {
|
|||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mastodon .client .header {
|
||||
margin: 0.3em;
|
||||
background-color: #222;
|
||||
border-radius: 0.3em;
|
||||
padding: 0.3em;
|
||||
}
|
||||
|
||||
.mastodon .client .list > div {
|
||||
margin: 0.3em;
|
||||
background-color: #222;
|
||||
|
|
File diff suppressed because one or more lines are too long
6
main.js
6
main.js
|
@ -46,6 +46,12 @@ var app = new Vue({
|
|||
})
|
||||
this.saveServices()
|
||||
},
|
||||
moveService(id, move) {
|
||||
const service = { ...this.services[id] }
|
||||
service.position[move.type] = Math.max(1, (service.position[move.type] || 1) + move.direction)
|
||||
this.$set(this.services, id, service)
|
||||
this.saveServices()
|
||||
},
|
||||
removeService(id) {
|
||||
this.services.splice(id, 1)
|
||||
this.saveServices()
|
||||
|
|
Loading…
Reference in New Issue