Mastodon: compose toot
This commit is contained in:
parent
a97ffb491b
commit
35167c283f
|
@ -263,7 +263,7 @@ a, .osef
|
||||||
text-decoration: none
|
text-decoration: none
|
||||||
color: $noneColor
|
color: $noneColor
|
||||||
|
|
||||||
input, select, button
|
input, select, button, textarea
|
||||||
background-color: $backColor
|
background-color: $backColor
|
||||||
color: $foreColor
|
color: $foreColor
|
||||||
border: 1px solid $halfColor
|
border: 1px solid $halfColor
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
.client(@scroll.passive="onScroll")
|
.client
|
||||||
.statues
|
.statues(@scroll.passive="onScroll")
|
||||||
.header(v-if="hasNotifications") Accueil
|
.header(v-if="hasNotifications") Accueil
|
||||||
success-loadable.list(:loadable="statues")
|
success-loadable.list(:loadable="statues")
|
||||||
template(v-for="status in statues.get()")
|
template(v-for="status in statues.get()")
|
||||||
|
@ -14,6 +14,23 @@
|
||||||
.list
|
.list
|
||||||
notification(v-for="notification in notifications.get()" :key="notification.id" :notification="notification"
|
notification(v-for="notification in notifications.get()" :key="notification.id" :notification="notification"
|
||||||
:showMedia="options.showMedia" @dismiss="onNotificationDismiss" @mark="onStatusMark")
|
:showMedia="options.showMedia" @dismiss="onNotificationDismiss" @mark="onStatusMark")
|
||||||
|
.compose-toggle(@click="showCompose = !showCompose") 🖉
|
||||||
|
.compose(v-show="showCompose")
|
||||||
|
textarea.content(v-model="compose.status" placeholder="message")
|
||||||
|
.options
|
||||||
|
.sens
|
||||||
|
label.note(for="sensitive") Sensitive:
|
||||||
|
input(id="sensitive" v-model="compose.sensitive" type="checkbox")
|
||||||
|
.cw
|
||||||
|
input(v-show="compose.sensitive" v-model="compose.spoiler_text" placeholder="content warning")
|
||||||
|
.visibility
|
||||||
|
select(v-model="compose.visibility")
|
||||||
|
option(value="public") ◍
|
||||||
|
option(value="unlisted") 👁
|
||||||
|
option(selected value="private") ⚿
|
||||||
|
option(value="direct") ✉
|
||||||
|
span.note {{ compose.visibility }}
|
||||||
|
button(@click="sendStatus") Toot
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
@ -27,7 +44,7 @@ import AxiosLodableMore from '@/helpers/loadable/AxiosLoadableMore'
|
||||||
import { AUTH, getHeaders, getRest } from './Mastodon.vue'
|
import { AUTH, getHeaders, getRest } from './Mastodon.vue'
|
||||||
import Notification from './Notification.vue'
|
import Notification from './Notification.vue'
|
||||||
import Status from './Status.vue'
|
import Status from './Status.vue'
|
||||||
import { MarkMessage, Notification as INotification, Options, Status as IStatus } from './Types'
|
import { MarkMessage, Notification as INotification, Options, Status as IStatus, StatusPost } from './Types'
|
||||||
|
|
||||||
@Component({ components: { Status, Notification } })
|
@Component({ components: { Status, Notification } })
|
||||||
export default class Client extends Mixins<ServiceClient<Options>>(ServiceClient) {
|
export default class Client extends Mixins<ServiceClient<Options>>(ServiceClient) {
|
||||||
|
@ -37,6 +54,14 @@ export default class Client extends Mixins<ServiceClient<Options>>(ServiceClient
|
||||||
statues = new AxiosLodableMore<IStatus[], object>()
|
statues = new AxiosLodableMore<IStatus[], object>()
|
||||||
notifications = new AxiosLodable<INotification[], object>()
|
notifications = new AxiosLodable<INotification[], object>()
|
||||||
|
|
||||||
|
showCompose = false
|
||||||
|
compose: StatusPost = {
|
||||||
|
status: '',
|
||||||
|
visibility: 'private',
|
||||||
|
sensitive: false,
|
||||||
|
spoiler_text: ''
|
||||||
|
}
|
||||||
|
|
||||||
get hasNotifications() {
|
get hasNotifications() {
|
||||||
if(!this.notifications.isSuccess) {
|
if(!this.notifications.isSuccess) {
|
||||||
return false
|
return false
|
||||||
|
@ -64,6 +89,23 @@ export default class Client extends Mixins<ServiceClient<Options>>(ServiceClient
|
||||||
return this.catchEmit(this.rest.post(path, options))
|
return this.catchEmit(this.rest.post(path, options))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
sendStatus() {
|
||||||
|
if(this.compose.status) {
|
||||||
|
const post: StatusPost = {
|
||||||
|
status: this.compose.status,
|
||||||
|
visibility: this.compose.visibility
|
||||||
|
}
|
||||||
|
if(this.compose.sensitive) {
|
||||||
|
post.sensitive = true
|
||||||
|
if(this.compose.spoiler_text) {
|
||||||
|
post.spoiler_text = this.compose.spoiler_text
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.post('/statuses', post)
|
||||||
|
this.compose.status = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
getTimeline(options = {}) {
|
getTimeline(options = {}) {
|
||||||
return this.get('/timelines/home', options)
|
return this.get('/timelines/home', options)
|
||||||
}
|
}
|
||||||
|
@ -143,16 +185,38 @@ export default class Client extends Mixins<ServiceClient<Options>>(ServiceClient
|
||||||
.mastodon
|
.mastodon
|
||||||
.client
|
.client
|
||||||
display: flex
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
height: 100%
|
height: 100%
|
||||||
overflow-y: auto
|
overflow: hidden
|
||||||
|
position: relative
|
||||||
.header
|
.header
|
||||||
@include main-tile
|
@include main-tile
|
||||||
.list
|
.list
|
||||||
@include group-tile
|
@include group-tile
|
||||||
.statues
|
.statues
|
||||||
flex: 1
|
flex: 1
|
||||||
|
overflow-y: auto
|
||||||
.notifications
|
.notifications
|
||||||
max-width: 33%
|
max-width: 33%
|
||||||
|
.compose-toggle
|
||||||
|
position: absolute
|
||||||
|
bottom: .5em
|
||||||
|
right: 1.5em
|
||||||
|
background-color: $backColor
|
||||||
|
border: 1px solid $darkColor
|
||||||
|
border-radius: 100%
|
||||||
|
height: 2em
|
||||||
|
width: 2em
|
||||||
|
text-align: center
|
||||||
|
line-height: 2em
|
||||||
|
.compose
|
||||||
|
@include main-tile
|
||||||
|
display: flex
|
||||||
|
min-height: 5em
|
||||||
|
textarea
|
||||||
|
flex: 1
|
||||||
|
.options
|
||||||
|
margin-right: 1em
|
||||||
|
|
||||||
.account
|
.account
|
||||||
.name
|
.name
|
||||||
|
|
|
@ -38,6 +38,11 @@
|
||||||
a.favourites(:class="{ colored: status.favourited }" @click.stop.prevent="makeFav(status)")
|
a.favourites(:class="{ colored: status.favourited }" @click.stop.prevent="makeFav(status)")
|
||||||
span.text-icon ⚝
|
span.text-icon ⚝
|
||||||
| {{ status.favourites_count }}
|
| {{ status.favourites_count }}
|
||||||
|
a.visibility
|
||||||
|
template(v-if="status.visibility == 'public'") ◍
|
||||||
|
template(v-else-if="status.visibility == 'unlisted'") 👁
|
||||||
|
template(v-else-if="status.visibility == 'private'") ⚿
|
||||||
|
template(v-else-if="status.visibility == 'direct'") ✉
|
||||||
a.fil(v-if="status.in_reply_to_id" @click.stop.prevent="showReply(status.in_reply_to_id)")
|
a.fil(v-if="status.in_reply_to_id" @click.stop.prevent="showReply(status.in_reply_to_id)")
|
||||||
| Voir le fil
|
| Voir le fil
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -18,6 +18,17 @@ export interface Options {
|
||||||
showMedia: boolean
|
showMedia: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export type VisibilityType = 'public' | 'unlisted' | 'private' | 'direct'
|
||||||
|
|
||||||
|
export interface StatusPost {
|
||||||
|
status: string
|
||||||
|
in_reply_to_id?: number
|
||||||
|
media_ids?: number[] // TODO:
|
||||||
|
sensitive?: boolean
|
||||||
|
spoiler_text?: string
|
||||||
|
visibility: VisibilityType
|
||||||
|
}
|
||||||
|
|
||||||
export interface Status {
|
export interface Status {
|
||||||
id: number
|
id: number
|
||||||
uri: string
|
uri: string
|
||||||
|
@ -36,7 +47,8 @@ export interface Status {
|
||||||
reblog?: Status
|
reblog?: Status
|
||||||
spoiler_text?: string,
|
spoiler_text?: string,
|
||||||
card?: Card,
|
card?: Card,
|
||||||
poll?: Poll
|
poll?: Poll,
|
||||||
|
visibility: VisibilityType
|
||||||
}
|
}
|
||||||
|
|
||||||
export type CardType = 'link' | 'photo' | 'video' | 'rich'
|
export type CardType = 'link' | 'photo' | 'video' | 'rich'
|
||||||
|
|
Loading…
Reference in New Issue