Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

revert unnecessary changes

Browse source
This commit is contained in:
Henry Jameson 2019-04-10 21:48:42 +03:00
parent 6471bec0d9
commit 262760d258
120 changed files with 2128 additions and 4290 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

113
src/App.vue
View file

@ -1,112 +1,51 @@
<template> <template>
<div <div id="app" v-bind:style="bgAppStyle">
id="app" <div class="app-bg-wrapper" v-bind:style="bgStyle"></div>
:style="bgAppStyle"
>
<div
class="app-bg-wrapper"
:style="bgStyle"
/>
<MobileNav v-if="isMobileLayout" /> <MobileNav v-if="isMobileLayout" />
<nav <nav v-else class='nav-bar container' @click="scrollToTop()" id="nav">
v-else <div class='logo' :style='logoBgStyle'>
id="nav" <div class='mask' :style='logoMaskStyle'></div>
class="nav-bar container" <img :src='logo' :style='logoStyle'>
@click="scrollToTop()"
>
<div
class="logo"
:style="logoBgStyle"
>
<div
class="mask"
:style="logoMaskStyle"
/>
<img
:src="logo"
:style="logoStyle"
>
</div> </div>
<div class="inner-nav"> <div class='inner-nav'>
<div class="item"> <div class='item'>
<router-link <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
class="site-name"
:to="{ name: 'root' }"
active-class="home"
>
{{ sitename }}
</router-link>
</div> </div>
<div class="item right"> <div class='item right'>
<user-finder <user-finder class="button-icon nav-icon mobile-hidden" @toggled="onFinderToggled"></user-finder>
class="button-icon nav-icon mobile-hidden" <router-link class="mobile-hidden" :to="{ name: 'settings'}"><i class="button-icon icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link>
@toggled="onFinderToggled" <a href="#" class="mobile-hidden" v-if="currentUser" @click.prevent="logout"><i class="button-icon icon-logout nav-icon" :title="$t('login.logout')"></i></a>
/>
<router-link
class="mobile-hidden"
:to="{ name: 'settings'}"
>
<i
class="button-icon icon-cog nav-icon"
:title="$t('nav.preferences')"
/>
</router-link>
<a
v-if="currentUser"
href="#"
class="mobile-hidden"
@click.prevent="logout"
><i
class="button-icon icon-logout nav-icon"
:title="$t('login.logout')"
/></a>
</div> </div>
</div> </div>
</nav> </nav>
<div <div v-if="" class="container" id="content">
id="content" <div class="sidebar-flexer mobile-hidden" v-if="!isMobileLayout">
class="container"
>
<div
v-if="!isMobileLayout"
class="sidebar-flexer mobile-hidden"
>
<div class="sidebar-bounds"> <div class="sidebar-bounds">
<div class="sidebar-scroller"> <div class="sidebar-scroller">
<div class="sidebar"> <div class="sidebar">
<user-panel /> <user-panel></user-panel>
<nav-panel /> <nav-panel></nav-panel>
<instance-specific-panel v-if="showInstanceSpecificPanel" /> <instance-specific-panel v-if="showInstanceSpecificPanel"></instance-specific-panel>
<features-panel v-if="!currentUser && showFeaturesPanel" /> <features-panel v-if="!currentUser && showFeaturesPanel"></features-panel>
<who-to-follow-panel v-if="currentUser && suggestionsEnabled" /> <who-to-follow-panel v-if="currentUser && suggestionsEnabled"></who-to-follow-panel>
<notifications v-if="currentUser" /> <notifications v-if="currentUser"></notifications>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="main"> <div class="main">
<div <div v-if="!currentUser" class="login-hint panel panel-default">
v-if="!currentUser" <router-link :to="{ name: 'login' }" class="panel-body">
class="login-hint panel panel-default"
>
<router-link
:to="{ name: 'login' }"
class="panel-body"
>
{{ $t("login.hint") }} {{ $t("login.hint") }}
</router-link> </router-link>
</div> </div>
<transition name="fade"> <transition name="fade">
<router-view /> <router-view></router-view>
</transition> </transition>
</div> </div>
<media-modal /> <media-modal></media-modal>
</div> </div>
<chat-panel <chat-panel :floating="true" v-if="currentUser && chat" class="floating-chat mobile-hidden"></chat-panel>
v-if="currentUser && chat"
:floating="true"
class="floating-chat mobile-hidden"
/>
</div> </div>
</template> </template>

6
src/components/about/about.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<div class="sidebar"> <div class="sidebar">
<instance-specific-panel /> <instance-specific-panel></instance-specific-panel>
<features-panel v-if="showFeaturesPanel" /> <features-panel v-if="showFeaturesPanel"></features-panel>
<terms-of-service-panel /> <terms-of-service-panel></terms-of-service-panel>
</div> </div>
</template> </template>

2
src/components/attachment/attachment.js
View file

@ -51,7 +51,7 @@ const Attachment = {
} }
}, },
methods: { methods: {
linkClicked ({ target }) { linkClicked ({target}) {
if (target.tagName === 'A') { if (target.tagName === 'A') {
window.open(target.href, '_blank') window.open(target.href, '_blank')
} }

100
src/components/attachment/attachment.vue
View file

@ -1,104 +1,54 @@
<template> <template>
<div <div v-if="usePlaceHolder" @click="openModal">
v-if="usePlaceHolder" <a class="placeholder"
@click="openModal"
>
<a
v-if="type !== 'html'" v-if="type !== 'html'"
class="placeholder" target="_blank" :href="attachment.url"
target="_blank"
:href="attachment.url"
> >
[{{ nsfw ? "NSFW/" : "" }}{{ type.toUpperCase() }}] [{{nsfw ? "NSFW/" : ""}}{{type.toUpperCase()}}]
</a> </a>
</div> </div>
<div <div
v-else v-else class="attachment"
v-show="!isEmpty"
class="attachment"
:class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}" :class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}"
v-show="!isEmpty"
> >
<a <a class="image-attachment" v-if="hidden" :href="attachment.url" @click.prevent="toggleHidden">
v-if="hidden" <img class="nsfw" :key="nsfwImage" :src="nsfwImage" :class="{'small': isSmall}"/>
class="image-attachment" <i v-if="type === 'video'" class="play-icon icon-play-circled"></i>
:href="attachment.url"
@click.prevent="toggleHidden"
>
<img
:key="nsfwImage"
class="nsfw"
:src="nsfwImage"
:class="{'small': isSmall}"
>
<i
v-if="type === 'video'"
class="play-icon icon-play-circled"
/>
</a> </a>
<div <div class="hider" v-if="nsfw && hideNsfwLocal && !hidden">
v-if="nsfw && hideNsfwLocal && !hidden" <a href="#" @click.prevent="toggleHidden">Hide</a>
class="hider"
>
<a
href="#"
@click.prevent="toggleHidden"
>Hide</a>
</div> </div>
<a <a v-if="type === 'image' && (!hidden || preloadImage)"
v-if="type === 'image' && (!hidden || preloadImage)" @click="openModal"
class="image-attachment" class="image-attachment"
:class="{'hidden': hidden && preloadImage }" :class="{'hidden': hidden && preloadImage }"
:href="attachment.url" :href="attachment.url" target="_blank"
target="_blank"
:title="attachment.description" :title="attachment.description"
@click="openModal"
> >
<StillImage <StillImage :referrerpolicy="referrerpolicy" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/>
:referrerpolicy="referrerpolicy"
:mimetype="attachment.mimetype"
:src="attachment.large_thumb_url || attachment.url"
/>
</a> </a>
<a <a class="video-container"
@click="openModal"
v-if="type === 'video' && !hidden" v-if="type === 'video' && !hidden"
class="video-container"
:class="{'small': isSmall}" :class="{'small': isSmall}"
:href="allowPlay ? undefined : attachment.url" :href="allowPlay ? undefined : attachment.url"
@click="openModal"
> >
<VideoAttachment <VideoAttachment class="video" :attachment="attachment" :controls="allowPlay" />
class="video" <i v-if="!allowPlay" class="play-icon icon-play-circled"></i>
:attachment="attachment"
:controls="allowPlay"
/>
<i
v-if="!allowPlay"
class="play-icon icon-play-circled"
/>
</a> </a>
<audio <audio v-if="type === 'audio'" :src="attachment.url" controls></audio>
v-if="type === 'audio'"
:src="attachment.url"
controls
/>
<div <div @click.prevent="linkClicked" v-if="type === 'html' && attachment.oembed" class="oembed">
v-if="type === 'html' && attachment.oembed" <div v-if="attachment.thumb_url" class="image">
class="oembed" <img :src="attachment.thumb_url"/>
@click.prevent="linkClicked"
>
<div
v-if="attachment.thumb_url"
class="image"
>
<img :src="attachment.thumb_url">
</div> </div>
<div class="text"> <div class="text">
<h1><a :href="attachment.url">{{ attachment.oembed.title }}</a></h1> <h1><a :href="attachment.url">{{attachment.oembed.title}}</a></h1>
<div v-html="attachment.oembed.oembedHTML" /> <div v-html="attachment.oembed.oembedHTML"></div>
</div> </div>
</div> </div>
</div> </div>

47
src/components/basic_user_card/basic_user_card.vue
View file

@ -1,49 +1,22 @@
<template> <template>
<div class="basic-user-card"> <div class="basic-user-card">
<router-link :to="userProfileLink(user)"> <router-link :to="userProfileLink(user)">
<UserAvatar <UserAvatar class="avatar" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
class="avatar"
:src="user.profile_image_url"
@click.prevent.native="toggleUserExpanded"
/>
</router-link> </router-link>
<div <div class="basic-user-card-expanded-content" v-if="userExpanded">
v-if="userExpanded" <UserCard :user="user" :rounded="true" :bordered="true"/>
class="basic-user-card-expanded-content"
>
<UserCard
:user="user"
:rounded="true"
:bordered="true"
/>
</div> </div>
<div <div class="basic-user-card-collapsed-content" v-else>
v-else <div :title="user.name" class="basic-user-card-user-name">
class="basic-user-card-collapsed-content" <span v-if="user.name_html" class="basic-user-card-user-name-value" v-html="user.name_html"></span>
> <span v-else class="basic-user-card-user-name-value">{{ user.name }}</span>
<div
:title="user.name"
class="basic-user-card-user-name"
>
<span
v-if="user.name_html"
class="basic-user-card-user-name-value"
v-html="user.name_html"
/>
<span
v-else
class="basic-user-card-user-name-value"
>{{ user.name }}</span>
</div> </div>
<div> <div>
<router-link <router-link class="basic-user-card-screen-name" :to="userProfileLink(user)">
class="basic-user-card-screen-name" @{{user.screen_name}}
:to="userProfileLink(user)"
>
@{{ user.screen_name }}
</router-link> </router-link>
</div> </div>
<slot /> <slot></slot>
</div> </div>
</div> </div>
</template> </template>

14
src/components/block_card/block_card.vue
View file

@ -1,12 +1,7 @@
<template> <template>
<basic-user-card :user="user"> <basic-user-card :user="user">
<div class="block-card-content-container"> <div class="block-card-content-container">
<button <button class="btn btn-default" @click="unblockUser" :disabled="progress" v-if="blocked">
v-if="blocked"
class="btn btn-default"
:disabled="progress"
@click="unblockUser"
>
<template v-if="progress"> <template v-if="progress">
{{ $t('user_card.unblock_progress') }} {{ $t('user_card.unblock_progress') }}
</template> </template>
@ -14,12 +9,7 @@
{{ $t('user_card.unblock') }} {{ $t('user_card.unblock') }}
</template> </template>
</button> </button>
<button <button class="btn btn-default" @click="blockUser" :disabled="progress" v-else>
v-else
class="btn btn-default"
:disabled="progress"
@click="blockUser"
>
<template v-if="progress"> <template v-if="progress">
{{ $t('user_card.block_progress') }} {{ $t('user_card.block_progress') }}
</template> </template>

2
src/components/chat_panel/chat_panel.js
View file

@ -16,7 +16,7 @@ const chatPanel = {
}, },
methods: { methods: {
submit (message) { submit (message) {
this.$store.state.chat.channel.push('new_msg', { text: message }, 10000) this.$store.state.chat.channel.push('new_msg', {text: message}, 10000)
this.currentMessage = '' this.currentMessage = ''
}, },
togglePanel () { togglePanel () {

59
src/components/chat_panel/chat_panel.vue
View file

@ -1,70 +1,41 @@
<template> <template>
<div <div class="chat-panel" v-if="!this.collapsed || !this.floating">
v-if="!this.collapsed || !this.floating"
class="chat-panel"
>
<div class="panel panel-default"> <div class="panel panel-default">
<div <div class="panel-heading timeline-heading" :class="{ 'chat-heading': floating }" @click.stop.prevent="togglePanel">
class="panel-heading timeline-heading"
:class="{ 'chat-heading': floating }"
@click.stop.prevent="togglePanel"
>
<div class="title"> <div class="title">
<span>{{ $t('chat.title') }}</span> <span>{{$t('chat.title')}}</span>
<i <i class="icon-cancel" v-if="floating"></i>
v-if="floating"
class="icon-cancel"
/>
</div> </div>
</div> </div>
<div <div class="chat-window" v-chat-scroll>
v-chat-scroll <div class="chat-message" v-for="message in messages" :key="message.id">
class="chat-window"
>
<div
v-for="message in messages"
:key="message.id"
class="chat-message"
>
<span class="chat-avatar"> <span class="chat-avatar">
<img :src="message.author.avatar"> <img :src="message.author.avatar" />
</span> </span>
<div class="chat-content"> <div class="chat-content">
<router-link <router-link
class="chat-name" class="chat-name"
:to="userProfileLink(message.author)" :to="userProfileLink(message.author)">
> {{message.author.username}}
{{ message.author.username }}
</router-link> </router-link>
<br> <br>
<span class="chat-text"> <span class="chat-text">
{{ message.text }} {{message.text}}
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<div class="chat-input"> <div class="chat-input">
<textarea <textarea @keyup.enter="submit(currentMessage)" v-model="currentMessage" class="chat-input-textarea" rows="1"></textarea>
v-model="currentMessage"
class="chat-input-textarea"
rows="1"
@keyup.enter="submit(currentMessage)"
/>
</div> </div>
</div> </div>
</div> </div>
<div <div v-else class="chat-panel">
v-else
class="chat-panel"
>
<div class="panel panel-default"> <div class="panel panel-default">
<div <div class="panel-heading stub timeline-heading chat-heading" @click.stop.prevent="togglePanel">
class="panel-heading stub timeline-heading chat-heading"
@click.stop.prevent="togglePanel"
>
<div class="title"> <div class="title">
<i class="icon-comment-empty" /> <i class="icon-comment-empty"></i>
{{ $t('chat.title') }} {{$t('chat.title')}}
</div> </div>
</div> </div>
</div> </div>

25
src/components/color_input/color_input.vue
View file

@ -1,27 +1,16 @@
<template> <template>
<div <div class="color-control style-control" :class="{ disabled: !present || disabled }">
class="color-control style-control" <label :for="name" class="label">
:class="{ disabled: !present || disabled }" {{label}}
>
<label
:for="name"
class="label"
>
{{ label }}
</label> </label>
<input <input
v-if="typeof fallback !== 'undefined'" v-if="typeof fallback !== 'undefined'"
:id="name + '-o'"
class="opt exlcude-disabled" class="opt exlcude-disabled"
:id="name + '-o'"
type="checkbox" type="checkbox"
:checked="present" :checked="present"
@input="$emit('input', typeof value === 'undefined' ? fallback : undefined)" @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)">
> <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
<label
v-if="typeof fallback !== 'undefined'"
class="opt-l"
:for="name + '-o'"
/>
<input <input
:id="name" :id="name"
class="color-input" class="color-input"
@ -38,7 +27,7 @@
:disabled="!present || disabled" :disabled="!present || disabled"
@input="$emit('input', $event.target.value)" @input="$emit('input', $event.target.value)"
> >
</div> </div>
</template> </template>
<script> <script>

30
src/components/contrast_ratio/contrast_ratio.vue
View file

@ -1,38 +1,28 @@
<template> <template>
<span <span v-if="contrast" class="contrast-ratio">
v-if="contrast" <span :title="hint" class="rating">
class="contrast-ratio"
>
<span
:title="hint"
class="rating"
>
<span v-if="contrast.aaa"> <span v-if="contrast.aaa">
<i class="icon-thumbs-up-alt" /> <i class="icon-thumbs-up-alt"/>
</span> </span>
<span v-if="!contrast.aaa && contrast.aa"> <span v-if="!contrast.aaa && contrast.aa">
<i class="icon-adjust" /> <i class="icon-adjust"/>
</span> </span>
<span v-if="!contrast.aaa && !contrast.aa"> <span v-if="!contrast.aaa && !contrast.aa">
<i class="icon-attention" /> <i class="icon-attention"/>
</span> </span>
</span> </span>
<span <span class="rating" v-if="contrast && large" :title="hint_18pt">
v-if="contrast && large"
class="rating"
:title="hint_18pt"
>
<span v-if="contrast.laaa"> <span v-if="contrast.laaa">
<i class="icon-thumbs-up-alt" /> <i class="icon-thumbs-up-alt"/>
</span> </span>
<span v-if="!contrast.laaa && contrast.laa"> <span v-if="!contrast.laaa && contrast.laa">
<i class="icon-adjust" /> <i class="icon-adjust"/>
</span> </span>
<span v-if="!contrast.laaa && !contrast.laa"> <span v-if="!contrast.laaa && !contrast.laa">
<i class="icon-attention" /> <i class="icon-attention"/>
</span>
</span> </span>
</span> </span>
</span>
</template> </template>
<script> <script>

4
src/components/conversation-page/conversation-page.vue
View file

@ -1,9 +1,9 @@
<template> <template>
<conversation <conversation
:collapsable="false" :collapsable="false"
is-page="true" isPage="true"
:statusoid="statusoid" :statusoid="statusoid"
/> ></conversation>
</template> </template>
<script src="./conversation-page.js"></script> <script src="./conversation-page.js"></script>

8
src/components/conversation/conversation.js
View file

@ -94,8 +94,8 @@ const conversation = {
}, },
replies () { replies () {
let i = 1 let i = 1
return reduce(this.conversation, (result, {id, in_reply_to_status_id}) => {
/* eslint-disable camelcase */ /* eslint-disable camelcase */
return reduce(this.conversation, (result, { id, in_reply_to_status_id }) => {
const irid = in_reply_to_status_id const irid = in_reply_to_status_id
/* eslint-enable camelcase */ /* eslint-enable camelcase */
if (irid) { if (irid) {
@ -127,8 +127,8 @@ const conversation = {
methods: { methods: {
fetchConversation () { fetchConversation () {
if (this.status) { if (this.status) {
this.$store.state.api.backendInteractor.fetchConversation({ id: this.status.id }) this.$store.state.api.backendInteractor.fetchConversation({id: this.status.id})
.then(({ ancestors, descendants }) => { .then(({ancestors, descendants}) => {
this.$store.dispatch('addNewStatuses', { statuses: ancestors }) this.$store.dispatch('addNewStatuses', { statuses: ancestors })
this.$store.dispatch('addNewStatuses', { statuses: descendants }) this.$store.dispatch('addNewStatuses', { statuses: descendants })
set(this, 'converationStatusIds', [].concat( set(this, 'converationStatusIds', [].concat(
@ -139,7 +139,7 @@ const conversation = {
.then(() => this.setHighlight(this.statusId)) .then(() => this.setHighlight(this.statusId))
} else { } else {
const id = this.$route.params.id const id = this.$route.params.id
this.$store.state.api.backendInteractor.fetchStatus({ id }) this.$store.state.api.backendInteractor.fetchStatus({id})
.then((status) => this.$store.dispatch('addNewStatuses', { statuses: [status] })) .then((status) => this.$store.dispatch('addNewStatuses', { statuses: [status] }))
.then(() => this.fetchConversation()) .then(() => this.fetchConversation())
} }

25
src/components/conversation/conversation.vue
View file

@ -1,33 +1,24 @@
<template> <template>
<div <div class="timeline panel-default" :class="[isExpanded ? 'panel' : 'panel-disabled']">
class="timeline panel-default" <div v-if="isExpanded" class="panel-heading conversation-heading">
:class="[isExpanded ? 'panel' : 'panel-disabled']"
>
<div
v-if="isExpanded"
class="panel-heading conversation-heading"
>
<span class="title"> {{ $t('timeline.conversation') }} </span> <span class="title"> {{ $t('timeline.conversation') }} </span>
<span v-if="collapsable"> <span v-if="collapsable">
<a <a href="#" @click.prevent="toggleExpanded">{{ $t('timeline.collapse') }}</a>
href="#"
@click.prevent="toggleExpanded"
>{{ $t('timeline.collapse') }}</a>
</span> </span>
</div> </div>
<status <status
v-for="status in conversation" v-for="status in conversation"
@goto="setHighlight"
@toggleExpanded="toggleExpanded"
:key="status.id" :key="status.id"
:inline-expanded="collapsable" :inlineExpanded="collapsable"
:statusoid="status" :statusoid="status"
:expandable="!expanded" :expandable='!expanded'
:focused="focused(status.id)" :focused="focused(status.id)"
:in-conversation="isExpanded" :inConversation="isExpanded"
:highlight="getHighlight()" :highlight="getHighlight()"
:replies="getReplies(status.id)" :replies="getReplies(status.id)"
class="status-fadein panel-body" class="status-fadein panel-body"
@goto="setHighlight"
@toggleExpanded="toggleExpanded"
/> />
</div> </div>
</template> </template>

2
src/components/delete_button/delete_button.js
View file

@ -10,7 +10,7 @@ const DeleteButton = {
}, },
computed: { computed: {
currentUser () { return this.$store.state.users.currentUser }, currentUser () { return this.$store.state.users.currentUser },
canDelete () { return (this.currentUser && this.currentUser.rights.delete_others_notice) || this.status.user.id === this.currentUser.id } canDelete () { return this.currentUser && this.currentUser.rights.delete_others_notice || this.status.user.id === this.currentUser.id }
} }
} }

7
src/components/delete_button/delete_button.vue
View file

@ -1,10 +1,7 @@
<template> <template>
<div v-if="canDelete"> <div v-if="canDelete">
<a <a href="#" v-on:click.prevent="deleteStatus()">
href="#" <i class='button-icon icon-cancel delete-status'></i>
@click.prevent="deleteStatus()"
>
<i class="button-icon icon-cancel delete-status" />
</a> </a>
</div> </div>
</template> </template>

6
src/components/dm_timeline/dm_timeline.vue
View file

@ -1,9 +1,5 @@
<template> <template>
<Timeline <Timeline :title="$t('nav.dms')" v-bind:timeline="timeline" v-bind:timeline-name="'dms'"/>
:title="$t('nav.dms')"
:timeline="timeline"
:timeline-name="'dms'"
/>
</template> </template>
<script src="./dm_timeline.js"></script> <script src="./dm_timeline.js"></script>

5
src/components/emoji-input/emoji-input.js
View file

@ -23,8 +23,7 @@ const EmojiInput = {
if (matchedEmoji.length <= 0) { if (matchedEmoji.length <= 0) {
return false return false
} }
// eslint-disable-next-line camelcase return map(take(matchedEmoji, 5), ({shortcode, image_url, utf}, index) => ({
return map(take(matchedEmoji, 5), ({ shortcode, image_url, utf }, index) => ({
shortcode: `:${shortcode}:`, shortcode: `:${shortcode}:`,
utf: utf || '', utf: utf || '',
// eslint-disable-next-line camelcase // eslint-disable-next-line camelcase
@ -99,7 +98,7 @@ const EmojiInput = {
onInput (e) { onInput (e) {
this.$emit('input', e.target.value) this.$emit('input', e.target.value)
}, },
setCaret ({ target: { selectionStart } }) { setCaret ({target: {selectionStart}}) {
this.caret = selectionStart this.caret = selectionStart
} }
} }

41
src/components/emoji-input/emoji-input.vue
View file

@ -9,13 +9,13 @@
@input="onInput" @input="onInput"
@click="setCaret" @click="setCaret"
@keyup="setCaret" @keyup="setCaret"
@keydown.exact="onKeydown" @keydown="onKeydown"
@keydown.down.exact="cycleForward" @keydown.down="cycleForward"
@keydown.up.exact="cycleBackward" @keydown.up="cycleBackward"
@keydown.shift.tab.exact="cycleBackward" @keydown.shift.tab="cycleBackward"
@keydown.tab.exact="cycleForward" @keydown.tab="cycleForward"
@keydown.enter.exact="replaceEmoji" @keydown.enter="replaceEmoji"
> />
<textarea <textarea
v-else v-else
:class="classname" :class="classname"
@ -24,30 +24,27 @@
@input="onInput" @input="onInput"
@click="setCaret" @click="setCaret"
@keyup="setCaret" @keyup="setCaret"
@keydown.exact="onKeydown" @keydown="onKeydown"
@keydown.down.exact="cycleForward" @keydown.down="cycleForward"
@keydown.up.exact="cycleBackward" @keydown.up="cycleBackward"
@keydown.shift.tab.exact="cycleBackward" @keydown.shift.tab="cycleBackward"
@keydown.tab.exact="cycleForward" @keydown.tab="cycleForward"
@keydown.enter.exact="replaceEmoji" @keydown.enter="replaceEmoji"
/> ></textarea>
<div <div class="autocomplete-panel" v-if="suggestions">
v-if="suggestions"
class="autocomplete-panel"
>
<div class="autocomplete-panel-body"> <div class="autocomplete-panel-body">
<div <div
v-for="(emoji, index) in suggestions" v-for="(emoji, index) in suggestions"
:key="index" :key="index"
@click="replace(emoji.utf || (emoji.shortcode + ' '))"
class="autocomplete-item" class="autocomplete-item"
:class="{ highlighted: emoji.highlighted }" :class="{ highlighted: emoji.highlighted }"
@click="replace(emoji.utf || (emoji.shortcode + ' '))"
> >
<span v-if="emoji.img"> <span v-if="emoji.img">
<img :src="emoji.img"> <img :src="emoji.img" />
</span> </span>
<span v-else>{{ emoji.utf }}</span> <span v-else>{{emoji.utf}}</span>
<span>{{ emoji.shortcode }}</span> <span>{{emoji.shortcode}}</span>
</div> </div>
</div> </div>
</div> </div>

33
src/components/export_import/export_import.vue
View file

@ -1,27 +1,12 @@
<template> <template>
<div class="import-export-container"> <div class="import-export-container">
<slot name="before" /> <slot name="before"/>
<button <button class="btn" @click="exportData">{{ exportLabel }}</button>
class="btn" <button class="btn" @click="importData">{{ importLabel }}</button>
@click="exportData" <slot name="afterButtons"/>
> <p v-if="importFailed" class="alert error">{{ importFailedText }}</p>
{{ exportLabel }} <slot name="afterError"/>
</button> </div>
<button
class="btn"
@click="importData"
>
{{ importLabel }}
</button>
<slot name="afterButtons" />
<p
v-if="importFailed"
class="alert error"
>
{{ importFailedText }}
</p>
<slot name="afterError" />
</div>
</template> </template>
<script> <script>
@ -64,7 +49,7 @@ export default {
if (event.target.files[0]) { if (event.target.files[0]) {
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
const reader = new FileReader() const reader = new FileReader()
reader.onload = ({ target }) => { reader.onload = ({target}) => {
try { try {
const parsed = JSON.parse(target.result) const parsed = JSON.parse(target.result)
const valid = this.validator(parsed) const valid = this.validator(parsed)

4
src/components/favorite_button/favorite_button.js
View file

@ -11,9 +11,9 @@ const FavoriteButton = {
methods: { methods: {
favorite () { favorite () {
if (!this.status.favorited) { if (!this.status.favorited) {
this.$store.dispatch('favorite', { id: this.status.id }) this.$store.dispatch('favorite', {id: this.status.id})
} else { } else {
this.$store.dispatch('unfavorite', { id: this.status.id }) this.$store.dispatch('unfavorite', {id: this.status.id})
} }
this.animated = true this.animated = true
setTimeout(() => { setTimeout(() => {

17
src/components/favorite_button/favorite_button.vue
View file

@ -1,20 +1,11 @@
<template> <template>
<div v-if="loggedIn"> <div v-if="loggedIn">
<i <i :class='classes' class='button-icon favorite-button fav-active' @click.prevent='favorite()' :title="$t('tool_tip.favorite')"/>
:class="classes" <span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span>
class="button-icon favorite-button fav-active"
:title="$t('tool_tip.favorite')"
@click.prevent="favorite()"
/>
<span v-if="!hidePostStatsLocal && status.fave_num > 0">{{ status.fave_num }}</span>
</div> </div>
<div v-else> <div v-else>
<i <i :class='classes' class='button-icon favorite-button' :title="$t('tool_tip.favorite')"/>
:class="classes" <span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span>
class="button-icon favorite-button"
:title="$t('tool_tip.favorite')"
/>
<span v-if="!hidePostStatsLocal && status.fave_num > 0">{{ status.fave_num }}</span>
</div> </div>
</template> </template>

22
src/components/features_panel/features_panel.vue
View file

@ -3,25 +3,17 @@
<div class="panel panel-default base01-background"> <div class="panel panel-default base01-background">
<div class="panel-heading timeline-heading base02-background base04"> <div class="panel-heading timeline-heading base02-background base04">
<div class="title"> <div class="title">
{{ $t('features_panel.title') }} {{$t('features_panel.title')}}
</div> </div>
</div> </div>
<div class="panel-body features-panel"> <div class="panel-body features-panel">
<ul> <ul>
<li v-if="chat"> <li v-if="chat">{{$t('features_panel.chat')}}</li>
{{ $t('features_panel.chat') }} <li v-if="gopher">{{$t('features_panel.gopher')}}</li>
</li> <li v-if="whoToFollow">{{$t('features_panel.who_to_follow')}}</li>
<li v-if="gopher"> <li v-if="mediaProxy">{{$t('features_panel.media_proxy')}}</li>
{{ $t('features_panel.gopher') }} <li>{{$t('features_panel.scope_options')}}</li>
</li> <li>{{$t('features_panel.text_limit')}} = {{textlimit}}</li>
<li v-if="whoToFollow">
{{ $t('features_panel.who_to_follow') }}
</li>
<li v-if="mediaProxy">
{{ $t('features_panel.media_proxy') }}
</li>
<li>{{ $t('features_panel.scope_options') }}</li>
<li>{{ $t('features_panel.text_limit') }} = {{ textlimit }}</li>
</ul> </ul>
</div> </div>
</div> </div>

2
src/components/follow_card/follow_card.js
View file

@ -22,7 +22,7 @@ const FollowCard = {
isMe () { return this.$store.state.users.currentUser.id === this.user.id }, isMe () { return this.$store.state.users.currentUser.id === this.user.id },
following () { return this.updated ? this.updated.following : this.user.following }, following () { return this.updated ? this.updated.following : this.user.following },
showFollow () { showFollow () {
return !this.following || (this.updated && !this.updated.following) return !this.following || this.updated && !this.updated.following
}, },
loggedIn () { loggedIn () {
return this.$store.state.users.currentUser return this.$store.state.users.currentUser

19
src/components/follow_card/follow_card.vue
View file

@ -1,24 +1,18 @@
<template> <template>
<basic-user-card :user="user"> <basic-user-card :user="user">
<div class="follow-card-content-container"> <div class="follow-card-content-container">
<span <span class="faint" v-if="!noFollowsYou && user.follows_you">
v-if="!noFollowsYou && user.follows_you"
class="faint"
>
{{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }} {{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }}
</span> </span>
<div <div class="follow-card-follow-button" v-if="showFollow && !loggedIn">
v-if="showFollow && !loggedIn"
class="follow-card-follow-button"
>
<RemoteFollow :user="user" /> <RemoteFollow :user="user" />
</div> </div>
<button <button
v-if="showFollow && loggedIn" v-if="showFollow && loggedIn"
class="btn btn-default follow-card-follow-button" class="btn btn-default follow-card-follow-button"
@click="followUser"
:disabled="inProgress" :disabled="inProgress"
:title="requestSent ? $t('user_card.follow_again') : ''" :title="requestSent ? $t('user_card.follow_again') : ''"
@click="followUser"
> >
<template v-if="inProgress"> <template v-if="inProgress">
{{ $t('user_card.follow_progress') }} {{ $t('user_card.follow_progress') }}
@ -30,12 +24,7 @@
{{ $t('user_card.follow') }} {{ $t('user_card.follow') }}
</template> </template>
</button> </button>
<button <button v-if="following" class="btn btn-default follow-card-follow-button pressed" @click="unfollowUser" :disabled="inProgress">
v-if="following"
class="btn btn-default follow-card-follow-button pressed"
:disabled="inProgress"
@click="unfollowUser"
>
<template v-if="inProgress"> <template v-if="inProgress">
{{ $t('user_card.follow_progress') }} {{ $t('user_card.follow_progress') }}
</template> </template>

14
src/components/follow_request_card/follow_request_card.vue
View file

@ -1,18 +1,8 @@
<template> <template>
<basic-user-card :user="user"> <basic-user-card :user="user">
<div class="follow-request-card-content-container"> <div class="follow-request-card-content-container">
<button <button class="btn btn-default" @click="approveUser">{{ $t('user_card.approve') }}</button>
class="btn btn-default" <button class="btn btn-default" @click="denyUser">{{ $t('user_card.deny') }}</button>
@click="approveUser"
>
{{ $t('user_card.approve') }}
</button>
<button
class="btn btn-default"
@click="denyUser"
>
{{ $t('user_card.deny') }}
</button>
</div> </div>
</basic-user-card> </basic-user-card>
</template> </template>

8
src/components/follow_requests/follow_requests.vue
View file

@ -1,14 +1,10 @@
<template> <template>
<div class="settings panel panel-default"> <div class="settings panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
{{ $t('nav.friend_requests') }} {{$t('nav.friend_requests')}}
</div> </div>
<div class="panel-body"> <div class="panel-body">
<FollowRequestCard <FollowRequestCard v-for="request in requests" :key="request.id" :user="request"/>
v-for="request in requests"
:key="request.id"
:user="request"
/>
</div> </div>
</div> </div>
</template> </template>

49
src/components/font_control/font_control.vue
View file

@ -1,56 +1,35 @@
<template> <template>
<div <div class="font-control style-control" :class="{ custom: isCustom }">
class="font-control style-control" <label :for="preset === 'custom' ? name : name + '-font-switcher'" class="label">
:class="{ custom: isCustom }" {{label}}
>
<label
:for="preset === 'custom' ? name : name + '-font-switcher'"
class="label"
>
{{ label }}
</label> </label>
<input <input
v-if="typeof fallback !== 'undefined'" v-if="typeof fallback !== 'undefined'"
:id="name + '-o'"
class="opt exlcude-disabled" class="opt exlcude-disabled"
type="checkbox" type="checkbox"
:id="name + '-o'"
:checked="present" :checked="present"
@input="$emit('input', typeof value === 'undefined' ? fallback : undefined)" @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)">
> <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
<label <label :for="name + '-font-switcher'" class="select" :disabled="!present">
v-if="typeof fallback !== 'undefined'"
class="opt-l"
:for="name + '-o'"
/>
<label
:for="name + '-font-switcher'"
class="select"
:disabled="!present"
>
<select <select
:id="name + '-font-switcher'"
v-model="preset"
:disabled="!present" :disabled="!present"
v-model="preset"
class="font-switcher" class="font-switcher"
> :id="name + '-font-switcher'">
<option <option v-for="option in availableOptions" :value="option">
v-for="option in availableOptions"
:key="option"
:value="option"
>
{{ option === 'custom' ? $t('settings.style.fonts.custom') : option }} {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
</option> </option>
</select> </select>
<i class="icon-down-open" /> <i class="icon-down-open"/>
</label> </label>
<input <input
v-if="isCustom" v-if="isCustom"
:id="name"
v-model="family"
class="custom-font" class="custom-font"
type="text" type="text"
> :id="name"
</div> v-model="family">
</div>
</template> </template>
<script src="./font_control.js" ></script> <script src="./font_control.js" ></script>

6
src/components/friends_timeline/friends_timeline.vue
View file

@ -1,9 +1,5 @@
<template> <template>
<Timeline <Timeline :title="$t('nav.timeline')" v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/>
:title="$t('nav.timeline')"
:timeline="timeline"
:timeline-name="'friends'"
/>
</template> </template>
<script src="./friends_timeline.js"></script> <script src="./friends_timeline.js"></script>

19
src/components/gallery/gallery.vue
View file

@ -1,22 +1,13 @@
<template> <template>
<div <div ref="galleryContainer" style="width: 100%;">
ref="galleryContainer" <div class="gallery-row" v-for="row in rows" :style="rowHeight(row.length)" :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }">
style="width: 100%;"
>
<div
v-for="row in rows"
:key="row"
class="gallery-row"
:style="rowHeight(row.length)"
:class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }"
>
<attachment <attachment
v-for="attachment in row" v-for="attachment in row"
:key="attachment.id" :setMedia="setMedia"
:set-media="setMedia"
:nsfw="nsfw" :nsfw="nsfw"
:attachment="attachment" :attachment="attachment"
:allow-play="false" :allowPlay="false"
:key="attachment.id"
/> />
</div> </div>
</div> </div>

55
src/components/image_cropper/image_cropper.vue
View file

@ -2,57 +2,20 @@
<div class="image-cropper"> <div class="image-cropper">
<div v-if="dataUrl"> <div v-if="dataUrl">
<div class="image-cropper-image-container"> <div class="image-cropper-image-container">
<img <img ref="img" :src="dataUrl" alt="" @load.stop="createCropper" />
ref="img"
:src="dataUrl"
alt=""
@load.stop="createCropper"
>
</div> </div>
<div class="image-cropper-buttons-wrapper"> <div class="image-cropper-buttons-wrapper">
<button <button class="btn" type="button" :disabled="submitting" @click="submit" v-text="saveText"></button>
class="btn" <button class="btn" type="button" :disabled="submitting" @click="destroy" v-text="cancelText"></button>
type="button" <button class="btn" type="button" :disabled="submitting" @click="submitWithoutCropping" v-text="saveWithoutCroppingText"></button>
:disabled="submitting" <i class="icon-spin4 animate-spin" v-if="submitting"></i>
@click="submit"
v-text="saveText"
/>
<button
class="btn"
type="button"
:disabled="submitting"
@click="destroy"
v-text="cancelText"
/>
<button
class="btn"
type="button"
:disabled="submitting"
@click="submitWithoutCropping"
v-text="saveWithoutCroppingText"
/>
<i
v-if="submitting"
class="icon-spin4 animate-spin"
/>
</div> </div>
<div <div class="alert error" v-if="submitError">
v-if="submitError" {{submitErrorMsg}}
class="alert error" <i class="button-icon icon-cancel" @click="clearError"></i>
>
{{ submitErrorMsg }}
<i
class="button-icon icon-cancel"
@click="clearError"
/>
</div> </div>
</div> </div>
<input <input ref="input" type="file" class="image-cropper-img-input" :accept="mimes">
ref="input"
type="file"
class="image-cropper-img-input"
:accept="mimes"
>
</div> </div>
</template> </template>

8
src/components/instance_specific_panel/instance_specific_panel.vue
View file

@ -1,11 +1,9 @@
<template> <template>
<div <div v-if="show" class="instance-specific-panel">
v-if="show"
class="instance-specific-panel"
>
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-body"> <div class="panel-body">
<div v-html="instanceSpecificPanelContent" /> <div v-html="instanceSpecificPanelContent">
</div>
</div> </div>
</div> </div>
</div> </div>

28
src/components/interface_language_switcher/interface_language_switcher.vue
View file

@ -3,33 +3,23 @@
<label for="interface-language-switcher"> <label for="interface-language-switcher">
{{ $t('settings.interfaceLanguage') }} {{ $t('settings.interfaceLanguage') }}
</label> </label>
<label <label for="interface-language-switcher" class='select'>
for="interface-language-switcher" <select id="interface-language-switcher" v-model="language">
class="select" <option v-for="(langCode, i) in languageCodes" :value="langCode">
>
<select
id="interface-language-switcher"
v-model="language"
>
<option
v-for="(langCode, i) in languageCodes"
:key="langCode"
:value="langCode"
>
{{ languageNames[i] }} {{ languageNames[i] }}
</option> </option>
</select> </select>
<i class="icon-down-open" /> <i class="icon-down-open"/>
</label> </label>
</div> </div>
</template> </template>
<script> <script>
import languagesObject from '../../i18n/messages' import languagesObject from '../../i18n/messages'
import ISO6391 from 'iso-639-1' import ISO6391 from 'iso-639-1'
import _ from 'lodash' import _ from 'lodash'
export default { export default {
computed: { computed: {
languageCodes () { languageCodes () {
return Object.keys(languagesObject) return Object.keys(languagesObject)
@ -47,5 +37,5 @@ export default {
} }
} }
} }
} }
</script> </script>

20
src/components/link-preview/link-preview.vue
View file

@ -1,25 +1,13 @@
<template> <template>
<div> <div>
<a <a class="link-preview-card" :href="card.url" target="_blank" rel="noopener">
class="link-preview-card" <div class="card-image" :class="{ 'small-image': size === 'small' }" v-if="useImage">
:href="card.url" <img :src="card.image"></img>
target="_blank"
rel="noopener"
>
<div
v-if="useImage"
class="card-image"
:class="{ 'small-image': size === 'small' }"
>
<img :src="card.image">
</div> </div>
<div class="card-content"> <div class="card-content">
<span class="card-host faint">{{ card.provider_name }}</span> <span class="card-host faint">{{ card.provider_name }}</span>
<h4 class="card-title">{{ card.title }}</h4> <h4 class="card-title">{{ card.title }}</h4>
<p <p class="card-description" v-if="useDescription">{{ card.description }}</p>
v-if="useDescription"
class="card-description"
>{{ card.description }}</p>
</div> </div>
</a> </a>
</div> </div>

2
src/components/login_form/login_form.js
View file

@ -39,7 +39,7 @@ const LoginForm = {
} }
this.$store.commit('setToken', result.access_token) this.$store.commit('setToken', result.access_token)
this.$store.dispatch('loginUser', result.access_token) this.$store.dispatch('loginUser', result.access_token)
this.$router.push({ name: 'friends' }) this.$router.push({name: 'friends'})
}) })
}) })
}, },

98
src/components/login_form/login_form.vue
View file

@ -2,96 +2,42 @@
<div class="login panel panel-default"> <div class="login panel panel-default">
<!-- Default panel contents --> <!-- Default panel contents -->
<div class="panel-heading"> <div class="panel-heading">
{{ $t('login.login') }} {{$t('login.login')}}
</div> </div>
<div class="panel-body"> <div class="panel-body">
<form <form v-if="loginMethod == 'password'" v-on:submit.prevent='submit(user)' class='login-form'>
v-if="loginMethod == 'password'" <div class='form-group'>
class="login-form" <label for='username'>{{$t('login.username')}}</label>
@submit.prevent="submit(user)" <input :disabled="loggingIn" v-model='user.username' class='form-control' id='username' v-bind:placeholder="$t('login.placeholder')">
>
<div class="form-group">
<label for="username">{{ $t('login.username') }}</label>
<input
id="username"
v-model="user.username"
:disabled="loggingIn"
class="form-control"
:placeholder="$t('login.placeholder')"
>
</div> </div>
<div class="form-group"> <div class='form-group'>
<label for="password">{{ $t('login.password') }}</label> <label for='password'>{{$t('login.password')}}</label>
<input <input :disabled="loggingIn" v-model='user.password' class='form-control' id='password' type='password'>
id="password"
v-model="user.password"
:disabled="loggingIn"
class="form-control"
type="password"
>
</div> </div>
<div class="form-group"> <div class='form-group'>
<div class="login-bottom"> <div class='login-bottom'>
<div> <div><router-link :to="{name: 'registration'}" v-if='registrationOpen' class='register'>{{$t('login.register')}}</router-link></div>
<router-link <button :disabled="loggingIn" type='submit' class='btn btn-default'>{{$t('login.login')}}</button>
v-if="registrationOpen"
:to="{name: 'registration'}"
class="register"
>
{{ $t('login.register') }}
</router-link>
</div>
<button
:disabled="loggingIn"
type="submit"
class="btn btn-default"
>
{{ $t('login.login') }}
</button>
</div> </div>
</div> </div>
</form> </form>
<form <form v-if="loginMethod == 'token'" v-on:submit.prevent='oAuthLogin' class="login-form">
v-if="loginMethod == 'token'"
class="login-form"
@submit.prevent="oAuthLogin"
>
<div class="form-group"> <div class="form-group">
<p>{{ $t('login.description') }}</p> <p>{{$t('login.description')}}</p>
</div> </div>
<div class="form-group"> <div class='form-group'>
<div class="login-bottom"> <div class='login-bottom'>
<div> <div><router-link :to="{name: 'registration'}" v-if='registrationOpen' class='register'>{{$t('login.register')}}</router-link></div>
<router-link <button :disabled="loggingIn" type='submit' class='btn btn-default'>{{$t('login.login')}}</button>
v-if="registrationOpen"
:to="{name: 'registration'}"
class="register"
>
{{ $t('login.register') }}
</router-link>
</div>
<button
:disabled="loggingIn"
type="submit"
class="btn btn-default"
>
{{ $t('login.login') }}
</button>
</div> </div>
</div> </div>
</form> </form>
<div <div v-if="authError" class='form-group'>
v-if="authError" <div class='alert error'>
class="form-group" {{authError}}
> <i class="button-icon icon-cancel" @click="clearError"></i>
<div class="alert error">
{{ authError }}
<i
class="button-icon icon-cancel"
@click="clearError"
/>
</div> </div>
</div> </div>
</div> </div>

22
src/components/media_modal/media_modal.vue
View file

@ -1,33 +1,25 @@
<template> <template>
<div <div class="modal-view media-modal-view" v-if="showing" @click.prevent="hide">
v-if="showing" <img class="modal-image" v-if="type === 'image'" :src="currentMedia.url"></img>
class="modal-view media-modal-view"
@click.prevent="hide"
>
<img
v-if="type === 'image'"
class="modal-image"
:src="currentMedia.url"
>
<VideoAttachment <VideoAttachment
v-if="type === 'video'"
class="modal-image" class="modal-image"
v-if="type === 'video'"
:attachment="currentMedia" :attachment="currentMedia"
:controls="true" :controls="true"
@click.stop.native="" @click.stop.native="">
/> </VideoAttachment>
<button <button
v-if="canNavigate"
:title="$t('media_modal.previous')" :title="$t('media_modal.previous')"
class="modal-view-button-arrow modal-view-button-arrow--prev" class="modal-view-button-arrow modal-view-button-arrow--prev"
v-if="canNavigate"
@click.stop.prevent="goPrev" @click.stop.prevent="goPrev"
> >
<i class="icon-left-open arrow-icon" /> <i class="icon-left-open arrow-icon" />
</button> </button>
<button <button
v-if="canNavigate"
:title="$t('media_modal.next')" :title="$t('media_modal.next')"
class="modal-view-button-arrow modal-view-button-arrow--next" class="modal-view-button-arrow modal-view-button-arrow--next"
v-if="canNavigate"
@click.stop.prevent="goNext" @click.stop.prevent="goNext"
> >
<i class="icon-right-open arrow-icon" /> <i class="icon-right-open arrow-icon" />

4
src/components/media_upload/media_upload.js
View file

@ -16,7 +16,7 @@ const mediaUpload = {
if (file.size > store.state.instance.uploadlimit) { if (file.size > store.state.instance.uploadlimit) {
const filesize = fileSizeFormatService.fileSizeFormat(file.size) const filesize = fileSizeFormatService.fileSizeFormat(file.size)
const allowedsize = fileSizeFormatService.fileSizeFormat(store.state.instance.uploadlimit) const allowedsize = fileSizeFormatService.fileSizeFormat(store.state.instance.uploadlimit)
self.$emit('upload-failed', 'file_too_big', { filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit }) self.$emit('upload-failed', 'file_too_big', {filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit})
return return
} }
const formData = new FormData() const formData = new FormData()
@ -54,7 +54,7 @@ const mediaUpload = {
this.uploadReady = true this.uploadReady = true
}) })
}, },
change ({ target }) { change ({target}) {
for (var i = 0; i < target.files.length; i++) { for (var i = 0; i < target.files.length; i++) {
let file = target.files[i] let file = target.files[i]
this.uploadFile(file) this.uploadFile(file)

30
src/components/media_upload/media_upload.vue
View file

@ -1,29 +1,9 @@
<template> <template>
<div <div class="media-upload" @drop.prevent @dragover.prevent="fileDrag" @drop="fileDrop">
class="media-upload" <label class="btn btn-default" :title="$t('tool_tip.media_upload')">
@drop.prevent <i class="icon-spin4 animate-spin" v-if="uploading"></i>
@dragover.prevent="fileDrag" <i class="icon-upload" v-if="!uploading"></i>
@drop="fileDrop" <input type="file" v-if="uploadReady" @change="change" style="position: fixed; top: -100em" multiple="true"></input>
>
<label
class="btn btn-default"
:title="$t('tool_tip.media_upload')"
>
<i
v-if="uploading"
class="icon-spin4 animate-spin"
/>
<i
v-if="!uploading"
class="icon-upload"
/>
<input
v-if="uploadReady"
type="file"
style="position: fixed; top: -100em"
multiple="true"
@change="change"
>
</label> </label>
</div> </div>
</template> </template>

6
src/components/mentions/mentions.vue
View file

@ -1,9 +1,5 @@
<template> <template>
<Timeline <Timeline :title="$t('nav.mentions')" v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/>
:title="$t('nav.mentions')"
:timeline="timeline"
:timeline-name="'mentions'"
/>
</template> </template>
<script src="./mentions.js"></script> <script src="./mentions.js"></script>

71
src/components/mobile_nav/mobile_nav.vue
View file

@ -1,71 +1,34 @@
<template> <template>
<nav <nav class='nav-bar container' id="nav">
id="nav" <div class='mobile-inner-nav' @click="scrollToTop()">
class="nav-bar container" <div class='item'>
> <a href="#" class="mobile-nav-button" @click.stop.prevent="toggleMobileSidebar()">
<div <i class="button-icon icon-menu"></i>
class="mobile-inner-nav"
@click="scrollToTop()"
>
<div class="item">
<a
href="#"
class="mobile-nav-button"
@click.stop.prevent="toggleMobileSidebar()"
>
<i class="button-icon icon-menu" />
</a> </a>
<router-link <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
class="site-name"
:to="{ name: 'root' }"
active-class="home"
>
{{ sitename }}
</router-link>
</div> </div>
<div class="item right"> <div class='item right'>
<a <a class="mobile-nav-button" v-if="currentUser" href="#" @click.stop.prevent="openMobileNotifications()">
v-if="currentUser" <i class="button-icon icon-bell-alt"></i>
class="mobile-nav-button" <div class="alert-dot" v-if="unseenNotificationsCount"></div>
href="#"
@click.stop.prevent="openMobileNotifications()"
>
<i class="button-icon icon-bell-alt" />
<div
v-if="unseenNotificationsCount"
class="alert-dot"
/>
</a> </a>
</div> </div>
</div> </div>
<SideDrawer <SideDrawer ref="sideDrawer" :logout="logout"/>
ref="sideDrawer" <div v-if="currentUser"
:logout="logout"
/>
<div
v-if="currentUser"
class="mobile-notifications-drawer" class="mobile-notifications-drawer"
:class="{ 'closed': !notificationsOpen }" :class="{ 'closed': !notificationsOpen }"
@touchstart="notificationsTouchStart" @touchstart="notificationsTouchStart"
@touchmove="notificationsTouchMove" @touchmove="notificationsTouchMove"
> >
<div class="mobile-notifications-header"> <div class="mobile-notifications-header">
<span class="title">{{ $t('notifications.notifications') }}</span> <span class="title">{{$t('notifications.notifications')}}</span>
<a <a class="mobile-nav-button" @click.stop.prevent="closeMobileNotifications()">
class="mobile-nav-button" <i class="button-icon icon-cancel"/>
@click.stop.prevent="closeMobileNotifications()"
>
<i class="button-icon icon-cancel" />
</a> </a>
</div> </div>
<div <div v-if="currentUser" class="mobile-notifications">
v-if="currentUser" <Notifications ref="notifications" noHeading="true"/>
class="mobile-notifications"
>
<Notifications
ref="notifications"
no-heading="true"
/>
</div> </div>
</div> </div>
<MobilePostStatusModal /> <MobilePostStatusModal />

20
src/components/mobile_post_status_modal/mobile_post_status_modal.vue
View file

@ -1,21 +1,13 @@
<template> <template>
<div v-if="currentUser"> <div v-if="currentUser">
<div <div
v-show="postFormOpen"
class="post-form-modal-view modal-view" class="post-form-modal-view modal-view"
v-show="postFormOpen"
@click="closePostForm" @click="closePostForm"
> >
<div <div class="post-form-modal-panel panel" @click.stop="">
class="post-form-modal-panel panel" <div class="panel-heading">{{$t('post_status.new_status')}}</div>
@click.stop="" <PostStatusForm class="panel-body" @posted="closePostForm"/>
>
<div class="panel-heading">
{{ $t('post_status.new_status') }}
</div>
<PostStatusForm
class="panel-body"
@posted="closePostForm"
/>
</div> </div>
</div> </div>
<button <button
@ -25,7 +17,7 @@
> >
<i class="icon-edit" /> <i class="icon-edit" />
</button> </button>
</div> </div>
</template> </template>
<script src="./mobile_post_status_modal.js"></script> <script src="./mobile_post_status_modal.js"></script>

14
src/components/mute_card/mute_card.vue
View file

@ -1,12 +1,7 @@
<template> <template>
<basic-user-card :user="user"> <basic-user-card :user="user">
<div class="mute-card-content-container"> <div class="mute-card-content-container">
<button <button class="btn btn-default" @click="unmuteUser" :disabled="progress" v-if="muted">
v-if="muted"
class="btn btn-default"
:disabled="progress"
@click="unmuteUser"
>
<template v-if="progress"> <template v-if="progress">
{{ $t('user_card.unmute_progress') }} {{ $t('user_card.unmute_progress') }}
</template> </template>
@ -14,12 +9,7 @@
{{ $t('user_card.unmute') }} {{ $t('user_card.unmute') }}
</template> </template>
</button> </button>
<button <button class="btn btn-default" @click="muteUser" :disabled="progress" v-else>
v-else
class="btn btn-default"
:disabled="progress"
@click="muteUser"
>
<template v-if="progress"> <template v-if="progress">
{{ $t('user_card.mute_progress') }} {{ $t('user_card.mute_progress') }}
</template> </template>

17
src/components/nav_panel/nav_panel.vue
View file

@ -2,29 +2,26 @@
<div class="nav-panel"> <div class="nav-panel">
<div class="panel panel-default"> <div class="panel panel-default">
<ul> <ul>
<li v-if="currentUser"> <li v-if='currentUser'>
<router-link :to="{ name: 'friends' }"> <router-link :to="{ name: 'friends' }">
{{ $t("nav.timeline") }} {{ $t("nav.timeline") }}
</router-link> </router-link>
</li> </li>
<li v-if="currentUser"> <li v-if='currentUser'>
<router-link :to="{ name: 'mentions', params: { username: currentUser.screen_name } }"> <router-link :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
{{ $t("nav.mentions") }} {{ $t("nav.mentions") }}
</router-link> </router-link>
</li> </li>
<li v-if="currentUser"> <li v-if='currentUser'>
<router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }"> <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
{{ $t("nav.dms") }} {{ $t("nav.dms") }}
</router-link> </router-link>
</li> </li>
<li v-if="currentUser && currentUser.locked"> <li v-if='currentUser && currentUser.locked'>
<router-link :to="{ name: 'friend-requests' }"> <router-link :to="{ name: 'friend-requests' }">
{{ $t("nav.friend_requests") }} {{ $t("nav.friend_requests")}}
<span <span v-if='followRequestCount > 0' class="badge follow-request-count">
v-if="followRequestCount > 0" {{followRequestCount}}
class="badge follow-request-count"
>
{{ followRequestCount }}
</span> </span>
</router-link> </router-link>
</li> </li>

87
src/components/notification/notification.vue
View file

@ -1,90 +1,41 @@
<template> <template>
<status <status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
v-if="notification.type === 'mention'" <div class="non-mention" :class="[userClass, { highlighted: userStyle }]" :style="[ userStyle ]" v-else>
:compact="true" <a class='avatar-container' :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
:statusoid="notification.status" <UserAvatar :compact="true" :betterShadow="betterShadow" :src="notification.action.user.profile_image_url_original"/>
/>
<div
v-else
class="non-mention"
:class="[userClass, { highlighted: userStyle }]"
:style="[ userStyle ]"
>
<a
class="avatar-container"
:href="notification.action.user.statusnet_profile_url"
@click.stop.prevent.capture="toggleUserExpanded"
>
<UserAvatar
:compact="true"
:better-shadow="betterShadow"
:src="notification.action.user.profile_image_url_original"
/>
</a> </a>
<div class="notification-right"> <div class='notification-right'>
<UserCard <UserCard :user="user" :rounded="true" :bordered="true" v-if="userExpanded"/>
v-if="userExpanded"
:user="user"
:rounded="true"
:bordered="true"
/>
<span class="notification-details"> <span class="notification-details">
<div class="name-and-action"> <div class="name-and-action">
<span <span class="username" v-if="!!notification.action.user.name_html" :title="'@'+notification.action.user.screen_name" v-html="notification.action.user.name_html"></span>
v-if="!!notification.action.user.name_html" <span class="username" v-else :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
class="username"
:title="'@'+notification.action.user.screen_name"
v-html="notification.action.user.name_html"
/>
<span
v-else
class="username"
:title="'@'+notification.action.user.screen_name"
>{{ notification.action.user.name }}</span>
<span v-if="notification.type === 'like'"> <span v-if="notification.type === 'like'">
<i class="fa icon-star lit" /> <i class="fa icon-star lit"></i>
<small>{{ $t('notifications.favorited_you') }}</small> <small>{{$t('notifications.favorited_you')}}</small>
</span> </span>
<span v-if="notification.type === 'repeat'"> <span v-if="notification.type === 'repeat'">
<i <i class="fa icon-retweet lit" :title="$t('tool_tip.repeat')"></i>
class="fa icon-retweet lit" <small>{{$t('notifications.repeated_you')}}</small>
:title="$t('tool_tip.repeat')"
/>
<small>{{ $t('notifications.repeated_you') }}</small>
</span> </span>
<span v-if="notification.type === 'follow'"> <span v-if="notification.type === 'follow'">
<i class="fa icon-user-plus lit" /> <i class="fa icon-user-plus lit"></i>
<small>{{ $t('notifications.followed_you') }}</small> <small>{{$t('notifications.followed_you')}}</small>
</span> </span>
</div> </div>
<div class="timeago"> <div class="timeago">
<router-link <router-link v-if="notification.status" :to="{ name: 'conversation', params: { id: notification.status.id } }" class="faint-link">
v-if="notification.status" <timeago :since="notification.action.created_at" :auto-update="240"></timeago>
:to="{ name: 'conversation', params: { id: notification.status.id } }"
class="faint-link"
>
<timeago
:since="notification.action.created_at"
:auto-update="240"
/>
</router-link> </router-link>
</div> </div>
</span> </span>
<div <div class="follow-text" v-if="notification.type === 'follow'">
v-if="notification.type === 'follow'"
class="follow-text"
>
<router-link :to="userProfileLink(notification.action.user)"> <router-link :to="userProfileLink(notification.action.user)">
@{{ notification.action.user.screen_name }} @{{notification.action.user.screen_name}}
</router-link> </router-link>
</div> </div>
<template v-else> <template v-else>
<status <status class="faint" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
class="faint"
:compact="true"
:statusoid="notification.status"
:no-heading="true"
/>
</template> </template>
</div> </div>
</div> </div>

61
src/components/notifications/notifications.vue
View file

@ -1,62 +1,31 @@
<template> <template>
<div class="notifications"> <div class="notifications">
<div class="panel panel-default"> <div class="panel panel-default">
<div <div v-if="!noHeading" class="panel-heading">
v-if="!noHeading"
class="panel-heading"
>
<div class="title"> <div class="title">
{{ $t('notifications.notifications') }} {{$t('notifications.notifications')}}
<span <span class="badge badge-notification unseen-count" v-if="unseenCount">{{unseenCount}}</span>
v-if="unseenCount"
class="badge badge-notification unseen-count"
>{{ unseenCount }}</span>
</div> </div>
<div <div @click.prevent class="loadmore-error alert error" v-if="error">
v-if="error" {{$t('timeline.error_fetching')}}
class="loadmore-error alert error"
@click.prevent
>
{{ $t('timeline.error_fetching') }}
</div> </div>
<button <button v-if="unseenCount" @click.prevent="markAsSeen" class="read-button">{{$t('notifications.read')}}</button>
v-if="unseenCount"
class="read-button"
@click.prevent="markAsSeen"
>
{{ $t('notifications.read') }}
</button>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div <div v-for="notification in visibleNotifications" :key="notification.action.id" class="notification" :class='{"unseen": !notification.seen}'>
v-for="notification in visibleNotifications" <div class="notification-overlay"></div>
:key="notification.action.id" <notification :notification="notification"></notification>
class="notification"
:class="{&quot;unseen&quot;: !notification.seen}"
>
<div class="notification-overlay" />
<notification :notification="notification" />
</div> </div>
</div> </div>
<div class="panel-footer"> <div class="panel-footer">
<div <div v-if="bottomedOut" class="new-status-notification text-center panel-footer faint">
v-if="bottomedOut" {{$t('notifications.no_more_notifications')}}
class="new-status-notification text-center panel-footer faint"
>
{{ $t('notifications.no_more_notifications') }}
</div> </div>
<a <a v-else-if="!loading" href="#" v-on:click.prevent="fetchOlderNotifications()">
v-else-if="!loading" <div class="new-status-notification text-center panel-footer">{{$t('notifications.load_older')}}</div>
href="#"
@click.prevent="fetchOlderNotifications()"
>
<div class="new-status-notification text-center panel-footer">{{ $t('notifications.load_older') }}</div>
</a> </a>
<div <div v-else class="new-status-notification text-center panel-footer">
v-else <i class="icon-spin3 animate-spin"/>
class="new-status-notification text-center panel-footer"
>
<i class="icon-spin3 animate-spin" />
</div> </div>
</div> </div>
</div> </div>

2
src/components/oauth_callback/oauth_callback.js
View file

@ -11,7 +11,7 @@ const oac = {
}).then((result) => { }).then((result) => {
this.$store.commit('setToken', result.access_token) this.$store.commit('setToken', result.access_token)
this.$store.dispatch('loginUser', result.access_token) this.$store.dispatch('loginUser', result.access_token)
this.$router.push({ name: 'friends' }) this.$router.push({name: 'friends'})
}) })
} }
} }

30
src/components/opacity_input/opacity_input.vue
View file

@ -1,39 +1,27 @@
<template> <template>
<div <div class="opacity-control style-control" :class="{ disabled: !present || disabled }">
class="opacity-control style-control" <label :for="name" class="label">
:class="{ disabled: !present || disabled }" {{$t('settings.style.common.opacity')}}
>
<label
:for="name"
class="label"
>
{{ $t('settings.style.common.opacity') }}
</label> </label>
<input <input
v-if="typeof fallback !== 'undefined'" v-if="typeof fallback !== 'undefined'"
:id="name + '-o'"
class="opt exclude-disabled" class="opt exclude-disabled"
:id="name + '-o'"
type="checkbox" type="checkbox"
:checked="present" :checked="present"
@input="$emit('input', !present ? fallback : undefined)" @input="$emit('input', !present ? fallback : undefined)">
> <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
<label
v-if="typeof fallback !== 'undefined'"
class="opt-l"
:for="name + '-o'"
/>
<input <input
:id="name" :id="name"
class="input-number" class="input-number"
type="number" type="number"
:value="value || fallback" :value="value || fallback"
:disabled="!present || disabled" :disabled="!present || disabled"
@input="$emit('input', $event.target.value)"
max="1" max="1"
min="0" min="0"
step=".05" step=".05">
@input="$emit('input', $event.target.value)" </div>
>
</div>
</template> </template>
<script> <script>

15
src/components/post_status_form/post_status_form.js
View file

@ -6,13 +6,13 @@ import fileTypeService from '../../services/file_type/file_type.service.js'
import Completion from '../../services/completion/completion.js' import Completion from '../../services/completion/completion.js'
import { take, filter, reject, map, uniqBy } from 'lodash' import { take, filter, reject, map, uniqBy } from 'lodash'
const buildMentionsString = ({ user, attentions }, currentUser) => { const buildMentionsString = ({user, attentions}, currentUser) => {
let allAttentions = [...attentions] let allAttentions = [...attentions]
allAttentions.unshift(user) allAttentions.unshift(user)
allAttentions = uniqBy(allAttentions, 'id') allAttentions = uniqBy(allAttentions, 'id')
allAttentions = reject(allAttentions, { id: currentUser.id }) allAttentions = reject(allAttentions, {id: currentUser.id})
let mentions = map(allAttentions, (attention) => { let mentions = map(allAttentions, (attention) => {
return `@${attention.screen_name}` return `@${attention.screen_name}`
@ -56,7 +56,7 @@ const PostStatusForm = {
statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser) statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
} }
const scope = ((this.copyMessageScope && scopeCopy) || this.copyMessageScope === 'direct') const scope = (this.copyMessageScope && scopeCopy || this.copyMessageScope === 'direct')
? this.copyMessageScope ? this.copyMessageScope
: this.$store.state.users.currentUser.default_scope : this.$store.state.users.currentUser.default_scope
@ -88,13 +88,13 @@ const PostStatusForm = {
const query = this.textAtCaret.slice(1).toUpperCase() const query = this.textAtCaret.slice(1).toUpperCase()
const matchedUsers = filter(this.users, (user) => { const matchedUsers = filter(this.users, (user) => {
return user.screen_name.toUpperCase().startsWith(query) || return user.screen_name.toUpperCase().startsWith(query) ||
(user.name && user.name.toUpperCase().startsWith(query)) user.name && user.name.toUpperCase().startsWith(query)
}) })
if (matchedUsers.length <= 0) { if (matchedUsers.length <= 0) {
return false return false
} }
// eslint-disable-next-line camelcase // eslint-disable-next-line camelcase
return map(take(matchedUsers, 5), ({ screen_name, name, profile_image_url_original }, index) => ({ return map(take(matchedUsers, 5), ({screen_name, name, profile_image_url_original}, index) => ({
// eslint-disable-next-line camelcase // eslint-disable-next-line camelcase
screen_name: `@${screen_name}`, screen_name: `@${screen_name}`,
name: name, name: name,
@ -107,8 +107,7 @@ const PostStatusForm = {
if (matchedEmoji.length <= 0) { if (matchedEmoji.length <= 0) {
return false return false
} }
// eslint-disable-next-line camelcase return map(take(matchedEmoji, 5), ({shortcode, image_url, utf}, index) => ({
return map(take(matchedEmoji, 5), ({ shortcode, image_url, utf }, index) => ({
screen_name: `:${shortcode}:`, screen_name: `:${shortcode}:`,
name: '', name: '',
utf: utf || '', utf: utf || '',
@ -234,7 +233,7 @@ const PostStatusForm = {
onKeydown (e) { onKeydown (e) {
e.stopPropagation() e.stopPropagation()
}, },
setCaret ({ target: { selectionStart } }) { setCaret ({target: {selectionStart}}) {
this.caret = selectionStart this.caret = selectionStart
}, },
postStatus (newStatus) { postStatus (newStatus) {

202
src/components/post_status_form/post_status_form.vue
View file

@ -1,204 +1,107 @@
<template> <template>
<div class="post-status-form"> <div class="post-status-form">
<form @submit.prevent="postStatus(newStatus)"> <form @submit.prevent="postStatus(newStatus)">
<div class="form-group"> <div class="form-group" >
<i18n <i18n
v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'" v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'"
path="post_status.account_not_locked_warning" path="post_status.account_not_locked_warning"
tag="p" tag="p"
class="visibility-notice" class="visibility-notice">
> <router-link :to="{ name: 'user-settings' }">{{ $t('post_status.account_not_locked_warning_link') }}</router-link>
<router-link :to="{ name: 'user-settings' }">
{{ $t('post_status.account_not_locked_warning_link') }}
</router-link>
</i18n> </i18n>
<p <p v-if="newStatus.visibility === 'direct'" class="visibility-notice">
v-if="newStatus.visibility === 'direct'"
class="visibility-notice"
>
<span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span> <span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
<span v-else>{{ $t('post_status.direct_warning_to_all') }}</span> <span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
</p> </p>
<EmojiInput <EmojiInput
v-if="newStatus.spoilerText || alwaysShowSubject" v-if="newStatus.spoilerText || alwaysShowSubject"
v-model="newStatus.spoilerText"
type="text" type="text"
:placeholder="$t('post_status.content_warning')" :placeholder="$t('post_status.content_warning')"
v-model="newStatus.spoilerText"
classname="form-control" classname="form-control"
/> />
<textarea <textarea
ref="textarea" ref="textarea"
v-model="newStatus.status"
:placeholder="$t('post_status.default')"
rows="1"
class="form-control"
:disabled="posting"
@click="setCaret" @click="setCaret"
@keyup.exact="setCaret" @keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control"
@keydown.exact="onKeydown" @keydown="onKeydown"
@keydown.exact.down="cycleForward" @keydown.down="cycleForward"
@keydown.exact.up="cycleBackward" @keydown.up="cycleBackward"
@keydown.exact.shift.tab="cycleBackward" @keydown.shift.tab="cycleBackward"
@keydown.exact.tab="cycleForward" @keydown.tab="cycleForward"
@keydown.exact.enter="replaceCandidate" @keydown.enter="replaceCandidate"
@keydown.exact.meta.enter="postStatus(newStatus)" @keydown.meta.enter="postStatus(newStatus)"
@keyup.exact.ctrl.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)"
@drop="fileDrop" @drop="fileDrop"
@dragover.prevent="fileDrag" @dragover.prevent="fileDrag"
@input="resize" @input="resize"
@paste="paste" @paste="paste"
/> :disabled="posting"
>
</textarea>
<div class="visibility-tray"> <div class="visibility-tray">
<span <span class="text-format" v-if="formattingOptionsEnabled">
v-if="formattingOptionsEnabled" <label for="post-content-type" class="select">
class="text-format" <select id="post-content-type" v-model="newStatus.contentType" class="form-control">
> <option v-for="postFormat in postFormats" :key="postFormat" :value="postFormat">
<label {{$t(`post_status.content_type["${postFormat}"]`)}}
for="post-content-type"
class="select"
>
<select
id="post-content-type"
v-model="newStatus.contentType"
class="form-control"
>
<option
v-for="postFormat in postFormats"
:key="postFormat"
:value="postFormat"
>
{{ $t(`post_status.content_type["${postFormat}"]`) }}
</option> </option>
</select> </select>
<i class="icon-down-open" /> <i class="icon-down-open"></i>
</label> </label>
</span> </span>
<scope-selector <scope-selector
:show-all="showAllScopes" :showAll="showAllScopes"
:user-default="userDefaultScope" :userDefault="userDefaultScope"
:original-scope="copyMessageScope" :originalScope="copyMessageScope"
:initial-scope="newStatus.visibility" :initialScope="newStatus.visibility"
:on-scope-change="changeVis" :onScopeChange="changeVis"/>
/>
</div> </div>
</div> </div>
<div <div class="autocomplete-panel" v-if="candidates">
v-if="candidates"
class="autocomplete-panel"
>
<div class="autocomplete-panel-body"> <div class="autocomplete-panel-body">
<div <div
v-for="(candidate, index) in candidates" v-for="(candidate, index) in candidates"
:key="index" :key="index"
@click="replace(candidate.utf || (candidate.screen_name + ' '))"
class="autocomplete-item" class="autocomplete-item"
:class="{ highlighted: candidate.highlighted }" :class="{ highlighted: candidate.highlighted }"
@click="replace(candidate.utf || (candidate.screen_name + ' '))"
> >
<span v-if="candidate.img"><img :src="candidate.img"></span> <span v-if="candidate.img"><img :src="candidate.img" /></span>
<span v-else>{{ candidate.utf }}</span> <span v-else>{{candidate.utf}}</span>
<span>{{ candidate.screen_name }}<small>{{ candidate.name }}</small></span> <span>{{candidate.screen_name}}<small>{{candidate.name}}</small></span>
</div> </div>
</div> </div>
</div> </div>
<div class="form-bottom"> <div class='form-bottom'>
<media-upload <media-upload ref="mediaUpload" @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="uploadFailed" :drop-files="dropFiles"></media-upload>
ref="mediaUpload"
:drop-files="dropFiles"
@uploading="disableSubmit"
@uploaded="addMediaFile"
@upload-failed="uploadFailed"
/>
<p <p v-if="isOverLengthLimit" class="error">{{ charactersLeft }}</p>
v-if="isOverLengthLimit" <p class="faint" v-else-if="hasStatusLengthLimit">{{ charactersLeft }}</p>
class="error"
>
{{ charactersLeft }}
</p>
<p
v-else-if="hasStatusLengthLimit"
class="faint"
>
{{ charactersLeft }}
</p>
<button <button v-if="posting" disabled class="btn btn-default">{{$t('post_status.posting')}}</button>
v-if="posting" <button v-else-if="isOverLengthLimit" disabled class="btn btn-default">{{$t('general.submit')}}</button>
disabled <button v-else :disabled="submitDisabled" type="submit" class="btn btn-default">{{$t('general.submit')}}</button>
class="btn btn-default"
>
{{ $t('post_status.posting') }}
</button>
<button
v-else-if="isOverLengthLimit"
disabled
class="btn btn-default"
>
{{ $t('general.submit') }}
</button>
<button
v-else
:disabled="submitDisabled"
type="submit"
class="btn btn-default"
>
{{ $t('general.submit') }}
</button>
</div> </div>
<div <div class='alert error' v-if="error">
v-if="error"
class="alert error"
>
Error: {{ error }} Error: {{ error }}
<i <i class="button-icon icon-cancel" @click="clearError"></i>
class="button-icon icon-cancel"
@click="clearError"
/>
</div> </div>
<div class="attachments"> <div class="attachments">
<div <div class="media-upload-wrapper" v-for="file in newStatus.files">
v-for="file in newStatus.files" <i class="fa button-icon icon-cancel" @click="removeMediaFile(file)"></i>
:key="file.url"
class="media-upload-wrapper"
>
<i
class="fa button-icon icon-cancel"
@click="removeMediaFile(file)"
/>
<div class="media-upload-container attachment"> <div class="media-upload-container attachment">
<img <img class="thumbnail media-upload" :src="file.url" v-if="type(file) === 'image'"></img>
v-if="type(file) === 'image'" <video v-if="type(file) === 'video'" :src="file.url" controls></video>
class="thumbnail media-upload" <audio v-if="type(file) === 'audio'" :src="file.url" controls></audio>
:src="file.url" <a v-if="type(file) === 'unknown'" :href="file.url">{{file.url}}</a>
>
<video
v-if="type(file) === 'video'"
:src="file.url"
controls
/>
<audio
v-if="type(file) === 'audio'"
:src="file.url"
controls
/>
<a
v-if="type(file) === 'unknown'"
:href="file.url"
>{{ file.url }}</a>
</div> </div>
</div> </div>
</div> </div>
<div <div class="upload_settings" v-if="newStatus.files.length > 0">
v-if="newStatus.files.length > 0" <input type="checkbox" id="filesSensitive" v-model="newStatus.nsfw">
class="upload_settings" <label for="filesSensitive">{{$t('post_status.attachments_sensitive')}}</label>
>
<input
id="filesSensitive"
v-model="newStatus.nsfw"
type="checkbox"
>
<label for="filesSensitive">{{ $t('post_status.attachments_sensitive') }}</label>
</div> </div>
</form> </form>
</div> </div>
@ -311,6 +214,7 @@
} }
} }
.btn { .btn {
cursor: pointer; cursor: pointer;
} }

6
src/components/public_and_external_timeline/public_and_external_timeline.vue
View file

@ -1,9 +1,5 @@
<template> <template>
<Timeline <Timeline :title="$t('nav.twkn')" v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/>
:title="$t('nav.twkn')"
:timeline="timeline"
:timeline-name="'publicAndExternal'"
/>
</template> </template>
<script src="./public_and_external_timeline.js"></script> <script src="./public_and_external_timeline.js"></script>

6
src/components/public_timeline/public_timeline.vue
View file

@ -1,9 +1,5 @@
<template> <template>
<Timeline <Timeline :title="$t('nav.public_tl')" v-bind:timeline="timeline" v-bind:timeline-name="'public'"/>
:title="$t('nav.public_tl')"
:timeline="timeline"
:timeline-name="'public'"
/>
</template> </template>
<script src="./public_timeline.js"></script> <script src="./public_timeline.js"></script>

35
src/components/range_input/range_input.vue
View file

@ -1,50 +1,37 @@
<template> <template>
<div <div class="range-control style-control" :class="{ disabled: !present || disabled }">
class="range-control style-control" <label :for="name" class="label">
:class="{ disabled: !present || disabled }" {{label}}
>
<label
:for="name"
class="label"
>
{{ label }}
</label> </label>
<input <input
v-if="typeof fallback !== 'undefined'" v-if="typeof fallback !== 'undefined'"
:id="name + '-o'"
class="opt exclude-disabled" class="opt exclude-disabled"
:id="name + '-o'"
type="checkbox" type="checkbox"
:checked="present" :checked="present"
@input="$emit('input', !present ? fallback : undefined)" @input="$emit('input', !present ? fallback : undefined)">
> <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
<label
v-if="typeof fallback !== 'undefined'"
class="opt-l"
:for="name + '-o'"
/>
<input <input
:id="name" :id="name"
class="input-number" class="input-number"
type="range" type="range"
:value="value || fallback" :value="value || fallback"
:disabled="!present || disabled" :disabled="!present || disabled"
@input="$emit('input', $event.target.value)"
:max="max || hardMax || 100" :max="max || hardMax || 100"
:min="min || hardMin || 0" :min="min || hardMin || 0"
:step="step || 1" :step="step || 1">
@input="$emit('input', $event.target.value)"
>
<input <input
:id="name" :id="name"
class="input-number" class="input-number"
type="number" type="number"
:value="value || fallback" :value="value || fallback"
:disabled="!present || disabled" :disabled="!present || disabled"
@input="$emit('input', $event.target.value)"
:max="hardMax" :max="hardMax"
:min="hardMin" :min="hardMin"
:step="step || 1" :step="step || 1">
@input="$emit('input', $event.target.value)" </div>
>
</div>
</template> </template>
<script> <script>

4
src/components/registration/registration.js
View file

@ -28,7 +28,7 @@ const registration = {
}, },
created () { created () {
if ((!this.registrationOpen && !this.token) || this.signedIn) { if ((!this.registrationOpen && !this.token) || this.signedIn) {
this.$router.push({ name: 'root' }) this.$router.push({name: 'root'})
} }
this.setCaptcha() this.setCaptcha()
@ -61,7 +61,7 @@ const registration = {
if (!this.$v.$invalid) { if (!this.$v.$invalid) {
try { try {
await this.signUp(this.user) await this.signUp(this.user)
this.$router.push({ name: 'friends' }) this.$router.push({name: 'friends'})
} catch (error) { } catch (error) {
console.warn('Registration failed: ' + error) console.warn('Registration failed: ' + error)
} }

225
src/components/registration/registration.vue
View file

@ -1,234 +1,109 @@
<template> <template>
<div class="settings panel panel-default"> <div class="settings panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
{{ $t('registration.registration') }} {{$t('registration.registration')}}
</div> </div>
<div class="panel-body"> <div class="panel-body">
<form <form v-on:submit.prevent='submit(user)' class='registration-form'>
class="registration-form" <div class='container'>
@submit.prevent="submit(user)" <div class='text-fields'>
> <div class='form-group' :class="{ 'form-group--error': $v.user.username.$error }">
<div class="container"> <label class='form--label' for='sign-up-username'>{{$t('login.username')}}</label>
<div class="text-fields"> <input :disabled="isPending" v-model.trim='$v.user.username.$model' class='form-control' id='sign-up-username' :placeholder="$t('registration.username_placeholder')">
<div
class="form-group"
:class="{ 'form-group--error': $v.user.username.$error }"
>
<label
class="form--label"
for="sign-up-username"
>{{ $t('login.username') }}</label>
<input
id="sign-up-username"
v-model.trim="$v.user.username.$model"
:disabled="isPending"
class="form-control"
:placeholder="$t('registration.username_placeholder')"
>
</div> </div>
<div <div class="form-error" v-if="$v.user.username.$dirty">
v-if="$v.user.username.$dirty"
class="form-error"
>
<ul> <ul>
<li v-if="!$v.user.username.required"> <li v-if="!$v.user.username.required">
<span>{{ $t('registration.validations.username_required') }}</span> <span>{{$t('registration.validations.username_required')}}</span>
</li> </li>
</ul> </ul>
</div> </div>
<div <div class='form-group' :class="{ 'form-group--error': $v.user.fullname.$error }">
class="form-group" <label class='form--label' for='sign-up-fullname'>{{$t('registration.fullname')}}</label>
:class="{ 'form-group--error': $v.user.fullname.$error }" <input :disabled="isPending" v-model.trim='$v.user.fullname.$model' class='form-control' id='sign-up-fullname' :placeholder="$t('registration.fullname_placeholder')">
>
<label
class="form--label"
for="sign-up-fullname"
>{{ $t('registration.fullname') }}</label>
<input
id="sign-up-fullname"
v-model.trim="$v.user.fullname.$model"
:disabled="isPending"
class="form-control"
:placeholder="$t('registration.fullname_placeholder')"
>
</div> </div>
<div <div class="form-error" v-if="$v.user.fullname.$dirty">
v-if="$v.user.fullname.$dirty"
class="form-error"
>
<ul> <ul>
<li v-if="!$v.user.fullname.required"> <li v-if="!$v.user.fullname.required">
<span>{{ $t('registration.validations.fullname_required') }}</span> <span>{{$t('registration.validations.fullname_required')}}</span>
</li> </li>
</ul> </ul>
</div> </div>
<div <div class='form-group' :class="{ 'form-group--error': $v.user.email.$error }">
class="form-group" <label class='form--label' for='email'>{{$t('registration.email')}}</label>
:class="{ 'form-group--error': $v.user.email.$error }" <input :disabled="isPending" v-model='$v.user.email.$model' class='form-control' id='email' type="email">
>
<label
class="form--label"
for="email"
>{{ $t('registration.email') }}</label>
<input
id="email"
v-model="$v.user.email.$model"
:disabled="isPending"
class="form-control"
type="email"
>
</div> </div>
<div <div class="form-error" v-if="$v.user.email.$dirty">
v-if="$v.user.email.$dirty"
class="form-error"
>
<ul> <ul>
<li v-if="!$v.user.email.required"> <li v-if="!$v.user.email.required">
<span>{{ $t('registration.validations.email_required') }}</span> <span>{{$t('registration.validations.email_required')}}</span>
</li> </li>
</ul> </ul>
</div> </div>
<div class="form-group"> <div class='form-group'>
<label <label class='form--label' for='bio'>{{$t('registration.bio')}} ({{$t('general.optional')}})</label>
class="form--label" <textarea :disabled="isPending" v-model='user.bio' class='form-control' id='bio' :placeholder="bioPlaceholder"></textarea>
for="bio"
>{{ $t('registration.bio') }} ({{ $t('general.optional') }})</label>
<textarea
id="bio"
v-model="user.bio"
:disabled="isPending"
class="form-control"
:placeholder="bioPlaceholder"
/>
</div> </div>
<div <div class='form-group' :class="{ 'form-group--error': $v.user.password.$error }">
class="form-group" <label class='form--label' for='sign-up-password'>{{$t('login.password')}}</label>
:class="{ 'form-group--error': $v.user.password.$error }" <input :disabled="isPending" v-model='user.password' class='form-control' id='sign-up-password' type='password'>
>
<label
class="form--label"
for="sign-up-password"
>{{ $t('login.password') }}</label>
<input
id="sign-up-password"
v-model="user.password"
:disabled="isPending"
class="form-control"
type="password"
>
</div> </div>
<div <div class="form-error" v-if="$v.user.password.$dirty">
v-if="$v.user.password.$dirty"
class="form-error"
>
<ul> <ul>
<li v-if="!$v.user.password.required"> <li v-if="!$v.user.password.required">
<span>{{ $t('registration.validations.password_required') }}</span> <span>{{$t('registration.validations.password_required')}}</span>
</li> </li>
</ul> </ul>
</div> </div>
<div <div class='form-group' :class="{ 'form-group--error': $v.user.confirm.$error }">
class="form-group" <label class='form--label' for='sign-up-password-confirmation'>{{$t('registration.password_confirm')}}</label>
:class="{ 'form-group--error': $v.user.confirm.$error }" <input :disabled="isPending" v-model='user.confirm' class='form-control' id='sign-up-password-confirmation' type='password'>
>
<label
class="form--label"
for="sign-up-password-confirmation"
>{{ $t('registration.password_confirm') }}</label>
<input
id="sign-up-password-confirmation"
v-model="user.confirm"
:disabled="isPending"
class="form-control"
type="password"
>
</div> </div>
<div <div class="form-error" v-if="$v.user.confirm.$dirty">
v-if="$v.user.confirm.$dirty"
class="form-error"
>
<ul> <ul>
<li v-if="!$v.user.confirm.required"> <li v-if="!$v.user.confirm.required">
<span>{{ $t('registration.validations.password_confirmation_required') }}</span> <span>{{$t('registration.validations.password_confirmation_required')}}</span>
</li> </li>
<li v-if="!$v.user.confirm.sameAsPassword"> <li v-if="!$v.user.confirm.sameAsPassword">
<span>{{ $t('registration.validations.password_confirmation_match') }}</span> <span>{{$t('registration.validations.password_confirmation_match')}}</span>
</li> </li>
</ul> </ul>
</div> </div>
<div <div class="form-group" id="captcha-group" v-if="captcha.type != 'none'">
v-if="captcha.type != 'none'" <label class='form--label' for='captcha-label'>{{$t('captcha')}}</label>
id="captcha-group"
class="form-group"
>
<label
class="form--label"
for="captcha-label"
>{{ $t('captcha') }}</label>
<template v-if="captcha.type == 'kocaptcha'"> <template v-if="captcha.type == 'kocaptcha'">
<img <img v-bind:src="captcha.url" v-on:click="setCaptcha">
:src="captcha.url"
@click="setCaptcha"
>
<sub>{{ $t('registration.new_captcha') }}</sub> <sub>{{$t('registration.new_captcha')}}</sub>
<input <input :disabled="isPending"
id="captcha-answer" v-model='captcha.solution'
v-model="captcha.solution" class='form-control' id='captcha-answer' type='text' autocomplete="off">
:disabled="isPending"
class="form-control"
type="text"
autocomplete="off"
>
</template> </template>
</div> </div>
<div <div class='form-group' v-if='token' >
v-if="token" <label for='token'>{{$t('registration.token')}}</label>
class="form-group" <input disabled='true' v-model='token' class='form-control' id='token' type='text'>
>
<label for="token">{{ $t('registration.token') }}</label>
<input
id="token"
v-model="token"
disabled="true"
class="form-control"
type="text"
>
</div> </div>
<div class="form-group"> <div class='form-group'>
<button <button :disabled="isPending" type='submit' class='btn btn-default'>{{$t('general.submit')}}</button>
:disabled="isPending"
type="submit"
class="btn btn-default"
>
{{ $t('general.submit') }}
</button>
</div> </div>
</div> </div>
<div <div class='terms-of-service' v-html="termsOfService">
class="terms-of-service"
v-html="termsOfService"
/>
</div> </div>
<div </div>
v-if="serverValidationErrors.length" <div v-if="serverValidationErrors.length" class='form-group'>
class="form-group" <div class='alert error'>
> <span v-for="error in serverValidationErrors">{{error}}</span>
<div class="alert error">
<span
v-for="error in serverValidationErrors"
:key="error"
>{{ error }}</span>
</div> </div>
</div> </div>
</form> </form>

22
src/components/remote_follow/remote_follow.vue
View file

@ -1,23 +1,9 @@
<template> <template>
<div class="remote-follow"> <div class="remote-follow">
<form <form method="POST" :action='subscribeUrl'>
method="POST" <input type="hidden" name="nickname" :value="user.screen_name">
:action="subscribeUrl" <input type="hidden" name="profile" value="">
> <button click="submit" class="remote-button">
<input
type="hidden"
name="nickname"
:value="user.screen_name"
>
<input
type="hidden"
name="profile"
value=""
>
<button
click="submit"
class="remote-button"
>
{{ $t('user_card.remote_follow') }} {{ $t('user_card.remote_follow') }}
</button> </button>
</form> </form>

4
src/components/retweet_button/retweet_button.js
View file

@ -11,9 +11,9 @@ const RetweetButton = {
methods: { methods: {
retweet () { retweet () {
if (!this.status.repeated) { if (!this.status.repeated) {
this.$store.dispatch('retweet', { id: this.status.id }) this.$store.dispatch('retweet', {id: this.status.id})
} else { } else {
this.$store.dispatch('unretweet', { id: this.status.id }) this.$store.dispatch('unretweet', {id: this.status.id})
} }
this.animated = true this.animated = true
setTimeout(() => { setTimeout(() => {

23
src/components/retweet_button/retweet_button.vue
View file

@ -1,29 +1,16 @@
<template> <template>
<div v-if="loggedIn"> <div v-if="loggedIn">
<template v-if="visibility !== 'private' && visibility !== 'direct'"> <template v-if="visibility !== 'private' && visibility !== 'direct'">
<i <i :class='classes' class='button-icon retweet-button icon-retweet rt-active' v-on:click.prevent='retweet()' :title="$t('tool_tip.repeat')"></i>
:class="classes" <span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span>
class="button-icon retweet-button icon-retweet rt-active"
:title="$t('tool_tip.repeat')"
@click.prevent="retweet()"
/>
<span v-if="!hidePostStatsLocal && status.repeat_num > 0">{{ status.repeat_num }}</span>
</template> </template>
<template v-else> <template v-else>
<i <i :class='classes' class='button-icon icon-lock' :title="$t('timeline.no_retweet_hint')"></i>
:class="classes"
class="button-icon icon-lock"
:title="$t('timeline.no_retweet_hint')"
/>
</template> </template>
</div> </div>
<div v-else-if="!loggedIn"> <div v-else-if="!loggedIn">
<i <i :class='classes' class='button-icon icon-retweet' :title="$t('tool_tip.repeat')"></i>
:class="classes" <span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span>
class="button-icon icon-retweet"
:title="$t('tool_tip.repeat')"
/>
<span v-if="!hidePostStatsLocal && status.repeat_num > 0">{{ status.repeat_num }}</span>
</div> </div>
</template> </template>

8
src/components/scope_selector/scope_selector.js
View file

@ -29,10 +29,10 @@ const ScopeSelector = {
}, },
css () { css () {
return { return {
public: { selected: this.currentScope === 'public' }, public: {selected: this.currentScope === 'public'},
unlisted: { selected: this.currentScope === 'unlisted' }, unlisted: {selected: this.currentScope === 'unlisted'},
private: { selected: this.currentScope === 'private' }, private: {selected: this.currentScope === 'private'},
direct: { selected: this.currentScope === 'direct' } direct: {selected: this.currentScope === 'direct'}
} }
} }
}, },

40
src/components/scope_selector/scope_selector.vue
View file

@ -1,34 +1,30 @@
<template> <template>
<div v-if="!showNothing"> <div v-if="!showNothing">
<i <i class="icon-mail-alt"
v-if="showDirect"
class="icon-mail-alt"
:class="css.direct" :class="css.direct"
:title="$t('post_status.scope.direct')" :title="$t('post_status.scope.direct')"
@click="changeVis('direct')" v-if="showDirect"
/> @click="changeVis('direct')">
<i </i>
v-if="showPrivate" <i class="icon-lock"
class="icon-lock"
:class="css.private" :class="css.private"
:title="$t('post_status.scope.private')" :title="$t('post_status.scope.private')"
@click="changeVis('private')" v-if="showPrivate"
/> v-on:click="changeVis('private')">
<i </i>
v-if="showUnlisted" <i class="icon-lock-open-alt"
class="icon-lock-open-alt"
:class="css.unlisted" :class="css.unlisted"
:title="$t('post_status.scope.unlisted')" :title="$t('post_status.scope.unlisted')"
@click="changeVis('unlisted')" v-if="showUnlisted"
/> @click="changeVis('unlisted')">
<i </i>
v-if="showPublic" <i class="icon-globe"
class="icon-globe"
:class="css.public" :class="css.public"
:title="$t('post_status.scope.public')" :title="$t('post_status.scope.public')"
@click="changeVis('public')" v-if="showPublic"
/> @click="changeVis('public')">
</div> </i>
</div>
</template> </template>
<script src="./scope_selector.js"></script> <script src="./scope_selector.js"></script>

395
src/components/settings/settings.vue
View file

@ -1,34 +1,26 @@
<template> <template>
<div class="settings panel panel-default"> <div class="settings panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<div class="title"> <div class="title">
{{ $t('settings.settings') }} {{$t('settings.settings')}}
</div> </div>
<transition name="fade"> <transition name="fade">
<template v-if="currentSaveStateNotice"> <template v-if="currentSaveStateNotice">
<div <div @click.prevent class="alert error" v-if="currentSaveStateNotice.error">
v-if="currentSaveStateNotice.error"
class="alert error"
@click.prevent
>
{{ $t('settings.saving_err') }} {{ $t('settings.saving_err') }}
</div> </div>
<div <div @click.prevent class="alert transparent" v-if="!currentSaveStateNotice.error">
v-if="!currentSaveStateNotice.error"
class="alert transparent"
@click.prevent
>
{{ $t('settings.saving_ok') }} {{ $t('settings.saving_ok') }}
</div> </div>
</template> </template>
</transition> </transition>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<keep-alive> <keep-alive>
<tab-switcher> <tab-switcher>
<div :label="$t('settings.general')"> <div :label="$t('settings.general')" >
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.interface') }}</h2> <h2>{{ $t('settings.interface') }}</h2>
<ul class="setting-list"> <ul class="setting-list">
@ -36,431 +28,265 @@
<interface-language-switcher /> <interface-language-switcher />
</li> </li>
<li v-if="instanceSpecificPanelPresent"> <li v-if="instanceSpecificPanelPresent">
<input <input type="checkbox" id="hideISP" v-model="hideISPLocal">
id="hideISP" <label for="hideISP">{{$t('settings.hide_isp')}}</label>
v-model="hideISPLocal"
type="checkbox"
>
<label for="hideISP">{{ $t('settings.hide_isp') }}</label>
</li> </li>
</ul> </ul>
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('nav.timeline') }}</h2> <h2>{{$t('nav.timeline')}}</h2>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<input <input type="checkbox" id="hideMutedPosts" v-model="hideMutedPostsLocal">
id="hideMutedPosts" <label for="hideMutedPosts">{{$t('settings.hide_muted_posts')}} {{$t('settings.instance_default', { value: hideMutedPostsDefault })}}</label>
v-model="hideMutedPostsLocal"
type="checkbox"
>
<label for="hideMutedPosts">{{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsDefault }) }}</label>
</li> </li>
<li> <li>
<input <input type="checkbox" id="collapseMessageWithSubject" v-model="collapseMessageWithSubjectLocal">
id="collapseMessageWithSubject"
v-model="collapseMessageWithSubjectLocal"
type="checkbox"
>
<label for="collapseMessageWithSubject"> <label for="collapseMessageWithSubject">
{{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectDefault }) }} {{$t('settings.collapse_subject')}} {{$t('settings.instance_default', { value: collapseMessageWithSubjectDefault })}}
</label> </label>
</li> </li>
<li> <li>
<input <input type="checkbox" id="streaming" v-model="streamingLocal">
id="streaming" <label for="streaming">{{$t('settings.streaming')}}</label>
v-model="streamingLocal" <ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
type="checkbox"
>
<label for="streaming">{{ $t('settings.streaming') }}</label>
<ul
class="setting-list suboptions"
:class="[{disabled: !streamingLocal}]"
>
<li> <li>
<input <input :disabled="!streamingLocal" type="checkbox" id="pauseOnUnfocused" v-model="pauseOnUnfocusedLocal">
id="pauseOnUnfocused" <label for="pauseOnUnfocused">{{$t('settings.pause_on_unfocused')}}</label>
v-model="pauseOnUnfocusedLocal"
:disabled="!streamingLocal"
type="checkbox"
>
<label for="pauseOnUnfocused">{{ $t('settings.pause_on_unfocused') }}</label>
</li> </li>
</ul> </ul>
</li> </li>
<li> <li>
<input <input type="checkbox" id="autoload" v-model="autoLoadLocal">
id="autoload" <label for="autoload">{{$t('settings.autoload')}}</label>
v-model="autoLoadLocal"
type="checkbox"
>
<label for="autoload">{{ $t('settings.autoload') }}</label>
</li> </li>
<li> <li>
<input <input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
id="hoverPreview" <label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
v-model="hoverPreviewLocal"
type="checkbox"
>
<label for="hoverPreview">{{ $t('settings.reply_link_preview') }}</label>
</li> </li>
</ul> </ul>
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.composing') }}</h2> <h2>{{$t('settings.composing')}}</h2>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<input <input type="checkbox" id="scopeCopy" v-model="scopeCopyLocal">
id="scopeCopy"
v-model="scopeCopyLocal"
type="checkbox"
>
<label for="scopeCopy"> <label for="scopeCopy">
{{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyDefault }) }} {{$t('settings.scope_copy')}} {{$t('settings.instance_default', { value: scopeCopyDefault })}}
</label> </label>
</li> </li>
<li> <li>
<input <input type="checkbox" id="subjectHide" v-model="alwaysShowSubjectInputLocal">
id="subjectHide"
v-model="alwaysShowSubjectInputLocal"
type="checkbox"
>
<label for="subjectHide"> <label for="subjectHide">
{{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputDefault }) }} {{$t('settings.subject_input_always_show')}} {{$t('settings.instance_default', { value: alwaysShowSubjectInputDefault })}}
</label> </label>
</li> </li>
<li> <li>
<div> <div>
{{ $t('settings.subject_line_behavior') }} {{$t('settings.subject_line_behavior')}}
<label <label for="subjectLineBehavior" class="select">
for="subjectLineBehavior" <select id="subjectLineBehavior" v-model="subjectLineBehaviorLocal">
class="select"
>
<select
id="subjectLineBehavior"
v-model="subjectLineBehaviorLocal"
>
<option value="email"> <option value="email">
{{ $t('settings.subject_line_email') }} {{$t('settings.subject_line_email')}}
{{ subjectLineBehaviorDefault == 'email' ? $t('settings.instance_default_simple') : '' }} {{subjectLineBehaviorDefault == 'email' ? $t('settings.instance_default_simple') : ''}}
</option> </option>
<option value="masto"> <option value="masto">
{{ $t('settings.subject_line_mastodon') }} {{$t('settings.subject_line_mastodon')}}
{{ subjectLineBehaviorDefault == 'mastodon' ? $t('settings.instance_default_simple') : '' }} {{subjectLineBehaviorDefault == 'mastodon' ? $t('settings.instance_default_simple') : ''}}
</option> </option>
<option value="noop"> <option value="noop">
{{ $t('settings.subject_line_noop') }} {{$t('settings.subject_line_noop')}}
{{ subjectLineBehaviorDefault == 'noop' ? $t('settings.instance_default_simple') : '' }} {{subjectLineBehaviorDefault == 'noop' ? $t('settings.instance_default_simple') : ''}}
</option> </option>
</select> </select>
<i class="icon-down-open" /> <i class="icon-down-open"/>
</label> </label>
</div> </div>
</li> </li>
<li> <li>
<div> <div>
{{ $t('settings.post_status_content_type') }} {{$t('settings.post_status_content_type')}}
<label <label for="postContentType" class="select">
for="postContentType" <select id="postContentType" v-model="postContentTypeLocal">
class="select" <option v-for="postFormat in postFormats" :key="postFormat" :value="postFormat">
> {{$t(`post_status.content_type["${postFormat}"]`)}}
<select {{postContentTypeDefault === postFormat ? $t('settings.instance_default_simple') : ''}}
id="postContentType"
v-model="postContentTypeLocal"
>
<option
v-for="postFormat in postFormats"
:key="postFormat"
:value="postFormat"
>
{{ $t(`post_status.content_type["${postFormat}"]`) }}
{{ postContentTypeDefault === postFormat ? $t('settings.instance_default_simple') : '' }}
</option> </option>
</select> </select>
<i class="icon-down-open" /> <i class="icon-down-open"/>
</label> </label>
</div> </div>
</li> </li>
<li> <li>
<input <input type="checkbox" id="minimalScopesMode" v-model="minimalScopesModeLocal">
id="minimalScopesMode"
v-model="minimalScopesModeLocal"
type="checkbox"
>
<label for="minimalScopesMode"> <label for="minimalScopesMode">
{{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeDefault }) }} {{$t('settings.minimal_scopes_mode')}} {{$t('settings.instance_default', { value: minimalScopesModeDefault })}}
</label> </label>
</li> </li>
</ul> </ul>
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.attachments') }}</h2> <h2>{{$t('settings.attachments')}}</h2>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<input <input type="checkbox" id="hideAttachments" v-model="hideAttachmentsLocal">
id="hideAttachments" <label for="hideAttachments">{{$t('settings.hide_attachments_in_tl')}}</label>
v-model="hideAttachmentsLocal"
type="checkbox"
>
<label for="hideAttachments">{{ $t('settings.hide_attachments_in_tl') }}</label>
</li> </li>
<li> <li>
<input <input type="checkbox" id="hideAttachmentsInConv" v-model="hideAttachmentsInConvLocal">
id="hideAttachmentsInConv" <label for="hideAttachmentsInConv">{{$t('settings.hide_attachments_in_convo')}}</label>
v-model="hideAttachmentsInConvLocal"
type="checkbox"
>
<label for="hideAttachmentsInConv">{{ $t('settings.hide_attachments_in_convo') }}</label>
</li> </li>
<li> <li>
<label for="maxThumbnails">{{ $t('settings.max_thumbnails') }}</label> <label for="maxThumbnails">{{$t('settings.max_thumbnails')}}</label>
<input <input class="number-input" type="number" id="maxThumbnails" v-model.number="maxThumbnails" min="0" step="1">
id="maxThumbnails"
v-model.number="maxThumbnails"
class="number-input"
type="number"
min="0"
step="1"
>
</li> </li>
<li> <li>
<input <input type="checkbox" id="hideNsfw" v-model="hideNsfwLocal">
id="hideNsfw" <label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
v-model="hideNsfwLocal"
type="checkbox"
>
<label for="hideNsfw">{{ $t('settings.nsfw_clickthrough') }}</label>
</li> </li>
<ul class="setting-list suboptions"> <ul class="setting-list suboptions" >
<li> <li>
<input <input :disabled="!hideNsfwLocal" type="checkbox" id="preloadImage" v-model="preloadImage">
id="preloadImage" <label for="preloadImage">{{$t('settings.preload_images')}}</label>
v-model="preloadImage"
:disabled="!hideNsfwLocal"
type="checkbox"
>
<label for="preloadImage">{{ $t('settings.preload_images') }}</label>
</li> </li>
<li> <li>
<input <input :disabled="!hideNsfwLocal" type="checkbox" id="useOneClickNsfw" v-model="useOneClickNsfw">
id="useOneClickNsfw" <label for="useOneClickNsfw">{{$t('settings.use_one_click_nsfw')}}</label>
v-model="useOneClickNsfw"
:disabled="!hideNsfwLocal"
type="checkbox"
>
<label for="useOneClickNsfw">{{ $t('settings.use_one_click_nsfw') }}</label>
</li> </li>
</ul> </ul>
<li> <li>
<input <input type="checkbox" id="stopGifs" v-model="stopGifs">
id="stopGifs" <label for="stopGifs">{{$t('settings.stop_gifs')}}</label>
v-model="stopGifs"
type="checkbox"
>
<label for="stopGifs">{{ $t('settings.stop_gifs') }}</label>
</li> </li>
<li> <li>
<input <input type="checkbox" id="loopVideo" v-model="loopVideoLocal">
id="loopVideo" <label for="loopVideo">{{$t('settings.loop_video')}}</label>
v-model="loopVideoLocal" <ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
type="checkbox"
>
<label for="loopVideo">{{ $t('settings.loop_video') }}</label>
<ul
class="setting-list suboptions"
:class="[{disabled: !streamingLocal}]"
>
<li> <li>
<input <input :disabled="!loopVideoLocal || !loopSilentAvailable" type="checkbox" id="loopVideoSilentOnly" v-model="loopVideoSilentOnlyLocal">
id="loopVideoSilentOnly" <label for="loopVideoSilentOnly">{{$t('settings.loop_video_silent_only')}}</label>
v-model="loopVideoSilentOnlyLocal" <div v-if="!loopSilentAvailable" class="unavailable">
:disabled="!loopVideoLocal || !loopSilentAvailable" <i class="icon-globe"/>! {{$t('settings.limited_availability')}}
type="checkbox"
>
<label for="loopVideoSilentOnly">{{ $t('settings.loop_video_silent_only') }}</label>
<div
v-if="!loopSilentAvailable"
class="unavailable"
>
<i class="icon-globe" />! {{ $t('settings.limited_availability') }}
</div> </div>
</li> </li>
</ul> </ul>
</li> </li>
<li> <li>
<input <input type="checkbox" id="playVideosInModal" v-model="playVideosInModal">
id="playVideosInModal" <label for="playVideosInModal">{{$t('settings.play_videos_in_modal')}}</label>
v-model="playVideosInModal"
type="checkbox"
>
<label for="playVideosInModal">{{ $t('settings.play_videos_in_modal') }}</label>
</li> </li>
<li> <li>
<input <input type="checkbox" id="useContainFit" v-model="useContainFit">
id="useContainFit" <label for="useContainFit">{{$t('settings.use_contain_fit')}}</label>
v-model="useContainFit"
type="checkbox"
>
<label for="useContainFit">{{ $t('settings.use_contain_fit') }}</label>
</li> </li>
</ul> </ul>
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.notifications') }}</h2> <h2>{{$t('settings.notifications')}}</h2>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<input <input type="checkbox" id="webPushNotifications" v-model="webPushNotificationsLocal">
id="webPushNotifications"
v-model="webPushNotificationsLocal"
type="checkbox"
>
<label for="webPushNotifications"> <label for="webPushNotifications">
{{ $t('settings.enable_web_push_notifications') }} {{$t('settings.enable_web_push_notifications')}}
</label> </label>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div :label="$t('settings.theme')"> <div :label="$t('settings.theme')" >
<div class="setting-item"> <div class="setting-item">
<style-switcher /> <style-switcher></style-switcher>
</div> </div>
</div> </div>
<div :label="$t('settings.filtering')"> <div :label="$t('settings.filtering')" >
<div class="setting-item"> <div class="setting-item">
<div class="select-multiple"> <div class="select-multiple">
<span class="label">{{ $t('settings.notification_visibility') }}</span> <span class="label">{{$t('settings.notification_visibility')}}</span>
<ul class="option-list"> <ul class="option-list">
<li> <li>
<input <input type="checkbox" id="notification-visibility-likes" v-model="notificationVisibilityLocal.likes">
id="notification-visibility-likes"
v-model="notificationVisibilityLocal.likes"
type="checkbox"
>
<label for="notification-visibility-likes"> <label for="notification-visibility-likes">
{{ $t('settings.notification_visibility_likes') }} {{$t('settings.notification_visibility_likes')}}
</label> </label>
</li> </li>
<li> <li>
<input <input type="checkbox" id="notification-visibility-repeats" v-model="notificationVisibilityLocal.repeats">
id="notification-visibility-repeats"
v-model="notificationVisibilityLocal.repeats"
type="checkbox"
>
<label for="notification-visibility-repeats"> <label for="notification-visibility-repeats">
{{ $t('settings.notification_visibility_repeats') }} {{$t('settings.notification_visibility_repeats')}}
</label> </label>
</li> </li>
<li> <li>
<input <input type="checkbox" id="notification-visibility-follows" v-model="notificationVisibilityLocal.follows">
id="notification-visibility-follows"
v-model="notificationVisibilityLocal.follows"
type="checkbox"
>
<label for="notification-visibility-follows"> <label for="notification-visibility-follows">
{{ $t('settings.notification_visibility_follows') }} {{$t('settings.notification_visibility_follows')}}
</label> </label>
</li> </li>
<li> <li>
<input <input type="checkbox" id="notification-visibility-mentions" v-model="notificationVisibilityLocal.mentions">
id="notification-visibility-mentions"
v-model="notificationVisibilityLocal.mentions"
type="checkbox"
>
<label for="notification-visibility-mentions"> <label for="notification-visibility-mentions">
{{ $t('settings.notification_visibility_mentions') }} {{$t('settings.notification_visibility_mentions')}}
</label> </label>
</li> </li>
</ul> </ul>
</div> </div>
<div> <div>
{{ $t('settings.replies_in_timeline') }} {{$t('settings.replies_in_timeline')}}
<label <label for="replyVisibility" class="select">
for="replyVisibility" <select id="replyVisibility" v-model="replyVisibilityLocal">
class="select" <option value="all" selected>{{$t('settings.reply_visibility_all')}}</option>
> <option value="following">{{$t('settings.reply_visibility_following')}}</option>
<select <option value="self">{{$t('settings.reply_visibility_self')}}</option>
id="replyVisibility"
v-model="replyVisibilityLocal"
>
<option
value="all"
selected
>{{ $t('settings.reply_visibility_all') }}</option>
<option value="following">{{ $t('settings.reply_visibility_following') }}</option>
<option value="self">{{ $t('settings.reply_visibility_self') }}</option>
</select> </select>
<i class="icon-down-open" /> <i class="icon-down-open"/>
</label> </label>
</div> </div>
<div> <div>
<input <input type="checkbox" id="hidePostStats" v-model="hidePostStatsLocal">
id="hidePostStats"
v-model="hidePostStatsLocal"
type="checkbox"
>
<label for="hidePostStats"> <label for="hidePostStats">
{{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsDefault }) }} {{$t('settings.hide_post_stats')}} {{$t('settings.instance_default', { value: hidePostStatsDefault })}}
</label> </label>
</div> </div>
<div> <div>
<input <input type="checkbox" id="hideUserStats" v-model="hideUserStatsLocal">
id="hideUserStats"
v-model="hideUserStatsLocal"
type="checkbox"
>
<label for="hideUserStats"> <label for="hideUserStats">
{{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsDefault }) }} {{$t('settings.hide_user_stats')}} {{$t('settings.instance_default', { value: hideUserStatsDefault })}}
</label> </label>
</div> </div>
</div> </div>
<div class="setting-item"> <div class="setting-item">
<div> <div>
<p>{{ $t('settings.filtering_explanation') }}</p> <p>{{$t('settings.filtering_explanation')}}</p>
<textarea <textarea id="muteWords" v-model="muteWordsString"></textarea>
id="muteWords"
v-model="muteWordsString"
/>
</div> </div>
<div> <div>
<input <input type="checkbox" id="hideFilteredStatuses" v-model="hideFilteredStatusesLocal">
id="hideFilteredStatuses"
v-model="hideFilteredStatusesLocal"
type="checkbox"
>
<label for="hideFilteredStatuses"> <label for="hideFilteredStatuses">
{{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesDefault }) }} {{$t('settings.hide_filtered_statuses')}} {{$t('settings.instance_default', { value: hideFilteredStatusesDefault })}}
</label> </label>
</div> </div>
</div> </div>
</div> </div>
<div :label="$t('settings.version.title')"> <div :label="$t('settings.version.title')" >
<div class="setting-item"> <div class="setting-item">
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<p>{{ $t('settings.version.backend_version') }}</p> <p>{{$t('settings.version.backend_version')}}</p>
<ul class="option-list"> <ul class="option-list">
<li> <li>
<a <a :href="backendVersionLink" target="_blank">{{backendVersion}}</a>
:href="backendVersionLink"
target="_blank"
>{{ backendVersion }}</a>
</li> </li>
</ul> </ul>
</li> </li>
<li> <li>
<p>{{ $t('settings.version.frontend_version') }}</p> <p>{{$t('settings.version.frontend_version')}}</p>
<ul class="option-list"> <ul class="option-list">
<li> <li>
<a <a :href="frontendVersionLink" target="_blank">{{frontendVersion}}</a>
:href="frontendVersionLink"
target="_blank"
>{{ frontendVersion }}</a>
</li> </li>
</ul> </ul>
</li> </li>
@ -468,9 +294,9 @@
</div> </div>
</div> </div>
</tab-switcher> </tab-switcher>
</keep-alive> </keep-alive>
</div>
</div> </div>
</div>
</template> </template>
<script src="./settings.js"> <script src="./settings.js">
@ -501,6 +327,7 @@
min-width: 10em; min-width: 10em;
} }
textarea { textarea {
width: 100%; width: 100%;
height: 100px; height: 100px;

163
src/components/shadow_control/shadow_control.vue
View file

@ -1,19 +1,12 @@
<template> <template>
<div <div class="shadow-control" :class="{ disabled: !present }">
class="shadow-control"
:class="{ disabled: !present }"
>
<div class="shadow-preview-container"> <div class="shadow-preview-container">
<div <div :disabled="!present" class="y-shift-control">
:disabled="!present"
class="y-shift-control"
>
<input <input
v-model="selected.y" v-model="selected.y"
:disabled="!present" :disabled="!present"
class="input-number" class="input-number"
type="number" type="number">
>
<div class="wrap"> <div class="wrap">
<input <input
v-model="selected.y" v-model="selected.y"
@ -21,26 +14,18 @@
class="input-range" class="input-range"
type="range" type="range"
max="20" max="20"
min="-20" min="-20">
>
</div> </div>
</div> </div>
<div class="preview-window"> <div class="preview-window">
<div <div class="preview-block" :style="style"></div>
class="preview-block"
:style="style"
/>
</div> </div>
<div <div :disabled="!present" class="x-shift-control">
:disabled="!present"
class="x-shift-control"
>
<input <input
v-model="selected.x" v-model="selected.x"
:disabled="!present" :disabled="!present"
class="input-number" class="input-number"
type="number" type="number">
>
<div class="wrap"> <div class="wrap">
<input <input
v-model="selected.x" v-model="selected.x"
@ -48,160 +33,102 @@
class="input-range" class="input-range"
type="range" type="range"
max="20" max="20"
min="-20" min="-20">
>
</div> </div>
</div> </div>
</div> </div>
<div class="shadow-tweak"> <div class="shadow-tweak">
<div <div :disabled="usingFallback" class="id-control style-control">
:disabled="usingFallback" <label for="shadow-switcher" class="select" :disabled="!ready || usingFallback">
class="id-control style-control"
>
<label
for="shadow-switcher"
class="select"
:disabled="!ready || usingFallback"
>
<select <select
id="shadow-switcher" v-model="selectedId" class="shadow-switcher"
v-model="selectedId"
class="shadow-switcher"
:disabled="!ready || usingFallback" :disabled="!ready || usingFallback"
> id="shadow-switcher">
<option <option v-for="(shadow, index) in cValue" :value="index">
v-for="(shadow, index) in cValue" {{$t('settings.style.shadows.shadow_id', { value: index })}}
:key="index"
:value="index"
>
{{ $t('settings.style.shadows.shadow_id', { value: index }) }}
</option> </option>
</select> </select>
<i class="icon-down-open" /> <i class="icon-down-open"/>
</label> </label>
<button <button class="btn btn-default" :disabled="!ready || !present" @click="del">
class="btn btn-default" <i class="icon-cancel"/>
:disabled="!ready || !present"
@click="del"
>
<i class="icon-cancel" />
</button> </button>
<button <button class="btn btn-default" :disabled="!moveUpValid" @click="moveUp">
class="btn btn-default" <i class="icon-up-open"/>
:disabled="!moveUpValid"
@click="moveUp"
>
<i class="icon-up-open" />
</button> </button>
<button <button class="btn btn-default" :disabled="!moveDnValid" @click="moveDn">
class="btn btn-default" <i class="icon-down-open"/>
:disabled="!moveDnValid"
@click="moveDn"
>
<i class="icon-down-open" />
</button> </button>
<button <button class="btn btn-default" :disabled="usingFallback" @click="add">
class="btn btn-default" <i class="icon-plus"/>
:disabled="usingFallback"
@click="add"
>
<i class="icon-plus" />
</button> </button>
</div> </div>
<div <div :disabled="!present" class="inset-control style-control">
:disabled="!present" <label for="inset" class="label">
class="inset-control style-control" {{$t('settings.style.shadows.inset')}}
>
<label
for="inset"
class="label"
>
{{ $t('settings.style.shadows.inset') }}
</label> </label>
<input <input
id="inset"
v-model="selected.inset" v-model="selected.inset"
:disabled="!present" :disabled="!present"
name="inset" name="inset"
id="inset"
class="input-inset" class="input-inset"
type="checkbox" type="checkbox">
> <label class="checkbox-label" for="inset"></label>
<label
class="checkbox-label"
for="inset"
/>
</div> </div>
<div <div :disabled="!present" class="blur-control style-control">
:disabled="!present" <label for="spread" class="label">
class="blur-control style-control" {{$t('settings.style.shadows.blur')}}
>
<label
for="spread"
class="label"
>
{{ $t('settings.style.shadows.blur') }}
</label> </label>
<input <input
id="blur"
v-model="selected.blur" v-model="selected.blur"
:disabled="!present" :disabled="!present"
name="blur" name="blur"
id="blur"
class="input-range" class="input-range"
type="range" type="range"
max="20" max="20"
min="0" min="0">
>
<input <input
v-model="selected.blur" v-model="selected.blur"
:disabled="!present" :disabled="!present"
class="input-number" class="input-number"
type="number" type="number"
min="0" min="0">
>
</div> </div>
<div <div :disabled="!present" class="spread-control style-control">
:disabled="!present" <label for="spread" class="label">
class="spread-control style-control" {{$t('settings.style.shadows.spread')}}
>
<label
for="spread"
class="label"
>
{{ $t('settings.style.shadows.spread') }}
</label> </label>
<input <input
id="spread"
v-model="selected.spread" v-model="selected.spread"
:disabled="!present" :disabled="!present"
name="spread" name="spread"
id="spread"
class="input-range" class="input-range"
type="range" type="range"
max="20" max="20"
min="-20" min="-20">
>
<input <input
v-model="selected.spread" v-model="selected.spread"
:disabled="!present" :disabled="!present"
class="input-number" class="input-number"
type="number" type="number">
>
</div> </div>
<ColorInput <ColorInput
v-model="selected.color" v-model="selected.color"
:disabled="!present" :disabled="!present"
:label="$t('settings.style.common.color')" :label="$t('settings.style.common.color')"
name="shadow" name="shadow"/>
/>
<OpacityInput <OpacityInput
v-model="selected.alpha" v-model="selected.alpha"
:disabled="!present" :disabled="!present"/>
/>
<p> <p>
{{ $t('settings.style.shadows.hint') }} {{$t('settings.style.shadows.hint')}}
</p> </p>
</div> </div>
</div> </div>
</template> </template>
<script src="./shadow_control.js" ></script> <script src="./shadow_control.js" ></script>

92
src/components/side_drawer/side_drawer.vue
View file

@ -1,90 +1,58 @@
<template> <template>
<div <div class="side-drawer-container"
class="side-drawer-container"
:class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }" :class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
> >
<div <div class="side-drawer-darken" :class="{ 'side-drawer-darken-closed': closed}" />
class="side-drawer-darken" <div class="side-drawer"
:class="{ 'side-drawer-darken-closed': closed}"
/>
<div
class="side-drawer"
:class="{'side-drawer-closed': closed}" :class="{'side-drawer-closed': closed}"
@touchstart="touchStart" @touchstart="touchStart"
@touchmove="touchMove" @touchmove="touchMove"
> >
<div <div class="side-drawer-heading" @click="toggleDrawer">
class="side-drawer-heading" <UserCard :user="currentUser" :hideBio="true" v-if="currentUser"/>
@click="toggleDrawer" <div class="side-drawer-logo-wrapper" v-else>
> <img :src="logo"/>
<UserCard <span>{{sitename}}</span>
v-if="currentUser"
:user="currentUser"
:hide-bio="true"
/>
<div
v-else
class="side-drawer-logo-wrapper"
>
<img :src="logo">
<span>{{ sitename }}</span>
</div> </div>
</div> </div>
<ul> <ul>
<li <li v-if="!currentUser" @click="toggleDrawer">
v-if="!currentUser"
@click="toggleDrawer"
>
<router-link :to="{ name: 'login' }"> <router-link :to="{ name: 'login' }">
{{ $t("login.login") }} {{ $t("login.login") }}
</router-link> </router-link>
</li> </li>
<li <li v-if="currentUser" @click="toggleDrawer">
v-if="currentUser"
@click="toggleDrawer"
>
<router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }"> <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
{{ $t("nav.dms") }} {{ $t("nav.dms") }}
</router-link> </router-link>
</li> </li>
</ul> </ul>
<ul> <ul>
<li <li v-if="currentUser" @click="toggleDrawer">
v-if="currentUser"
@click="toggleDrawer"
>
<router-link :to="{ name: 'friends' }"> <router-link :to="{ name: 'friends' }">
{{ $t("nav.timeline") }} {{ $t("nav.timeline") }}
</router-link> </router-link>
</li> </li>
<li <li v-if="currentUser && currentUser.locked" @click="toggleDrawer">
v-if="currentUser && currentUser.locked" <router-link to='/friend-requests'>
@click="toggleDrawer"
>
<router-link to="/friend-requests">
{{ $t("nav.friend_requests") }} {{ $t("nav.friend_requests") }}
<span <span v-if='followRequestCount > 0' class="badge follow-request-count">
v-if="followRequestCount > 0" {{followRequestCount}}
class="badge follow-request-count"
>
{{ followRequestCount }}
</span> </span>
</router-link> </router-link>
</li> </li>
<li @click="toggleDrawer"> <li @click="toggleDrawer">
<router-link to="/main/public"> <router-link to='/main/public'>
{{ $t("nav.public_tl") }} {{ $t("nav.public_tl") }}
</router-link> </router-link>
</li> </li>
<li @click="toggleDrawer"> <li @click="toggleDrawer">
<router-link to="/main/all"> <router-link to='/main/all'>
{{ $t("nav.twkn") }} {{ $t("nav.twkn") }}
</router-link> </router-link>
</li> </li>
<li <li v-if="currentUser && chat" @click="toggleDrawer">
v-if="currentUser && chat"
@click="toggleDrawer"
>
<router-link :to="{ name: 'chat' }"> <router-link :to="{ name: 'chat' }">
{{ $t("nav.chat") }} {{ $t("nav.chat") }}
</router-link> </router-link>
@ -96,10 +64,7 @@
{{ $t("nav.user_search") }} {{ $t("nav.user_search") }}
</router-link> </router-link>
</li> </li>
<li <li v-if="currentUser && suggestionsEnabled" @click="toggleDrawer">
v-if="currentUser && suggestionsEnabled"
@click="toggleDrawer"
>
<router-link :to="{ name: 'who-to-follow' }"> <router-link :to="{ name: 'who-to-follow' }">
{{ $t("nav.who_to_follow") }} {{ $t("nav.who_to_follow") }}
</router-link> </router-link>
@ -114,24 +79,17 @@
{{ $t("nav.about") }} {{ $t("nav.about") }}
</router-link> </router-link>
</li> </li>
<li <li v-if="currentUser" @click="toggleDrawer">
v-if="currentUser" <a @click="doLogout" href="#">
@click="toggleDrawer"
>
<a
href="#"
@click="doLogout"
>
{{ $t("login.logout") }} {{ $t("login.logout") }}
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<div <div class="side-drawer-click-outside"
class="side-drawer-click-outside"
:class="{'side-drawer-click-outside-closed': closed}"
@click.stop.prevent="toggleDrawer" @click.stop.prevent="toggleDrawer"
/> :class="{'side-drawer-click-outside-closed': closed}"
></div>
</div> </div>
</template> </template>

4
src/components/status/status.js
View file

@ -213,7 +213,7 @@ const Status = {
? this.$store.state.instance.subjectLineBehavior ? this.$store.state.instance.subjectLineBehavior
: this.$store.state.config.subjectLineBehavior : this.$store.state.config.subjectLineBehavior
const startsWithRe = decodedSummary.match(/^re[: ]/i) const startsWithRe = decodedSummary.match(/^re[: ]/i)
if ((behavior !== 'noop' && startsWithRe) || behavior === 'masto') { if (behavior !== 'noop' && startsWithRe || behavior === 'masto') {
return decodedSummary return decodedSummary
} else if (behavior === 'email') { } else if (behavior === 'email') {
return 're: '.concat(decodedSummary) return 're: '.concat(decodedSummary)
@ -350,7 +350,7 @@ const Status = {
this.preview = find(statuses, { 'id': targetId }) this.preview = find(statuses, { 'id': targetId })
// or if we have to fetch it // or if we have to fetch it
if (!this.preview) { if (!this.preview) {
this.$store.state.api.backendInteractor.fetchStatus({ id }).then((status) => { this.$store.state.api.backendInteractor.fetchStatus({id}).then((status) => {
this.preview = status this.preview = status
}) })
} }

370
src/components/status/status.vue
View file

@ -1,366 +1,152 @@
<template> <template>
<div <div class="status-el" v-if="!hideStatus" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
v-if="!hideStatus"
class="status-el"
:class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]"
>
<template v-if="muted && !isPreview"> <template v-if="muted && !isPreview">
<div class="media status container muted"> <div class="media status container muted">
<small> <small>
<router-link :to="userProfileLink"> <router-link :to="userProfileLink">
{{ status.user.screen_name }} {{status.user.screen_name}}
</router-link> </router-link>
</small> </small>
<small class="muteWords">{{ muteWordHits.join(', ') }}</small> <small class="muteWords">{{muteWordHits.join(', ')}}</small>
<a <a href="#" class="unmute" @click.prevent="toggleMute"><i class="button-icon icon-eye-off"></i></a>
href="#"
class="unmute"
@click.prevent="toggleMute"
><i class="button-icon icon-eye-off" /></a>
</div> </div>
</template> </template>
<template v-else> <template v-else>
<div <div v-if="retweet && !noHeading && !inConversation" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
v-if="retweet && !noHeading && !inConversation" <UserAvatar class="media-left" v-if="retweet" :betterShadow="betterShadow" :src="statusoid.user.profile_image_url_original"/>
:class="[repeaterClass, { highlighted: repeaterStyle }]"
:style="[repeaterStyle]"
class="media container retweet-info"
>
<UserAvatar
v-if="retweet"
class="media-left"
:better-shadow="betterShadow"
:src="statusoid.user.profile_image_url_original"
/>
<div class="media-body faint"> <div class="media-body faint">
<span class="user-name"> <span class="user-name">
<router-link <router-link v-if="retweeterHtml" :to="retweeterProfileLink" v-html="retweeterHtml"/>
v-if="retweeterHtml" <router-link v-else :to="retweeterProfileLink">{{retweeter}}</router-link>
:to="retweeterProfileLink"
v-html="retweeterHtml"
/>
<router-link
v-else
:to="retweeterProfileLink"
>{{ retweeter }}</router-link>
</span> </span>
<i <i class='fa icon-retweet retweeted' :title="$t('tool_tip.repeat')"></i>
class="fa icon-retweet retweeted" {{$t('timeline.repeated')}}
:title="$t('tool_tip.repeat')"
/>
{{ $t('timeline.repeated') }}
</div> </div>
</div> </div>
<div <div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet && !inConversation }]" :style="[ userStyle ]" class="media status">
:class="[userClass, { highlighted: userStyle, 'is-retweet': retweet && !inConversation }]" <div v-if="!noHeading" class="media-left">
:style="[ userStyle ]" <router-link :to="userProfileLink" @click.stop.prevent.capture.native="toggleUserExpanded">
class="media status" <UserAvatar :compact="compact" :betterShadow="betterShadow" :src="status.user.profile_image_url_original"/>
>
<div
v-if="!noHeading"
class="media-left"
>
<router-link
:to="userProfileLink"
@click.stop.prevent.capture.native="toggleUserExpanded"
>
<UserAvatar
:compact="compact"
:better-shadow="betterShadow"
:src="status.user.profile_image_url_original"
/>
</router-link> </router-link>
</div> </div>
<div class="status-body"> <div class="status-body">
<UserCard <UserCard :user="status.user" :rounded="true" :bordered="true" class="status-usercard" v-if="userExpanded"/>
v-if="userExpanded" <div v-if="!noHeading" class="media-heading">
:user="status.user"
:rounded="true"
:bordered="true"
class="status-usercard"
/>
<div
v-if="!noHeading"
class="media-heading"
>
<div class="heading-name-row"> <div class="heading-name-row">
<div class="name-and-account-name"> <div class="name-and-account-name">
<h4 <h4 class="user-name" v-if="status.user.name_html" v-html="status.user.name_html"></h4>
v-if="status.user.name_html" <h4 class="user-name" v-else>{{status.user.name}}</h4>
class="user-name" <router-link class="account-name" :to="userProfileLink">
v-html="status.user.name_html" {{status.user.screen_name}}
/>
<h4
v-else
class="user-name"
>
{{ status.user.name }}
</h4>
<router-link
class="account-name"
:to="userProfileLink"
>
{{ status.user.screen_name }}
</router-link> </router-link>
</div> </div>
<span class="heading-right"> <span class="heading-right">
<router-link <router-link class="timeago faint-link" :to="{ name: 'conversation', params: { id: status.id } }">
class="timeago faint-link" <timeago :since="status.created_at" :auto-update="60"></timeago>
:to="{ name: 'conversation', params: { id: status.id } }"
>
<timeago
:since="status.created_at"
:auto-update="60"
/>
</router-link> </router-link>
<div <div class="button-icon visibility-icon" v-if="status.visibility">
v-if="status.visibility" <i :class="visibilityIcon(status.visibility)" :title="status.visibility | capitalize"></i>
class="button-icon visibility-icon"
>
<i
:class="visibilityIcon(status.visibility)"
:title="status.visibility | capitalize"
/>
</div> </div>
<a <a :href="status.external_url" target="_blank" v-if="!status.is_local && !isPreview" class="source_url" title="Source">
v-if="!status.is_local && !isPreview" <i class="button-icon icon-link-ext-alt"></i>
:href="status.external_url"
target="_blank"
class="source_url"
title="Source"
>
<i class="button-icon icon-link-ext-alt" />
</a> </a>
<template v-if="expandable && !isPreview"> <template v-if="expandable && !isPreview">
<a <a href="#" @click.prevent="toggleExpanded" title="Expand">
href="#" <i class="button-icon icon-plus-squared"></i>
title="Expand"
@click.prevent="toggleExpanded"
>
<i class="button-icon icon-plus-squared" />
</a> </a>
</template> </template>
<a <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="button-icon icon-eye-off"></i></a>
v-if="unmuted"
href="#"
@click.prevent="toggleMute"
><i class="button-icon icon-eye-off" /></a>
</span> </span>
</div> </div>
<div class="heading-reply-row"> <div class="heading-reply-row">
<div <div v-if="isReply" class="reply-to-and-accountname">
v-if="isReply" <a class="reply-to"
class="reply-to-and-accountname" href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
>
<a
class="reply-to"
href="#"
:aria-label="$t('tool_tip.reply')" :aria-label="$t('tool_tip.reply')"
@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
@mouseenter.prevent.stop="replyEnter(status.in_reply_to_status_id, $event)" @mouseenter.prevent.stop="replyEnter(status.in_reply_to_status_id, $event)"
@mouseleave.prevent.stop="replyLeave()" @mouseleave.prevent.stop="replyLeave()"
> >
<i <i class="button-icon icon-reply" v-if="!isPreview"></i>
v-if="!isPreview" <span class="faint-link reply-to-text">{{$t('status.reply_to')}}</span>
class="button-icon icon-reply"
/>
<span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
</a> </a>
<router-link :to="replyProfileLink"> <router-link :to="replyProfileLink">
{{ replyToName }} {{replyToName}}
</router-link> </router-link>
<span <span class="faint replies-separator" v-if="replies && replies.length">
v-if="replies && replies.length"
class="faint replies-separator"
>
- -
</span> </span>
</div> </div>
<div <div class="replies" v-if="inConversation && !isPreview">
v-if="inConversation && !isPreview" <span class="faint" v-if="replies && replies.length">{{$t('status.replies_list')}}</span>
class="replies" <span class="reply-link faint" v-if="replies" v-for="reply in replies">
> <a href="#" @click.prevent="gotoOriginal(reply.id)" @mouseenter="replyEnter(reply.id, $event)" @mouseout="replyLeave()">{{reply.name}}</a>
<span
v-if="replies && replies.length"
class="faint"
>{{ $t('status.replies_list') }}</span>
<template
v-if="replies"
>
<span
v-for="reply in replies"
:key="reply.name"
class="reply-link faint"
>
<a
href="#"
@click.prevent="gotoOriginal(reply.id)"
@mouseenter="replyEnter(reply.id, $event)"
@mouseout="replyLeave()"
>{{ reply.name }}</a>
</span> </span>
</template>
</div>
</div>
</div>
<div
v-if="showPreview"
class="status-preview-container"
>
<status
v-if="preview"
class="status-preview"
:is-preview="true"
:statusoid="preview"
:compact="true"
/>
<div
v-else
class="status-preview status-preview-loading"
>
<i class="icon-spin4 animate-spin" />
</div> </div>
</div> </div>
<div
v-if="longSubject"
class="status-content-wrapper"
:class="{ 'tall-status': !showingLongSubject }"
>
<a
v-if="!showingLongSubject"
class="tall-status-hider"
:class="{ 'tall-status-hider_focused': isFocused }"
href="#"
@click.prevent="showingLongSubject=true"
>{{ $t("general.show_more") }}</a>
<div
class="status-content media-body"
@click.prevent="linkClicked"
v-html="contentHtml"
/>
<a
v-if="showingLongSubject"
href="#"
class="status-unhider"
@click.prevent="showingLongSubject=false"
>{{ $t("general.show_less") }}</a>
</div>
<div
v-else
:class="{'tall-status': hideTallStatus}"
class="status-content-wrapper"
>
<a
v-if="hideTallStatus"
class="tall-status-hider"
:class="{ 'tall-status-hider_focused': isFocused }"
href="#"
@click.prevent="toggleShowMore"
>{{ $t("general.show_more") }}</a>
<div
v-if="!hideSubjectStatus"
class="status-content media-body"
@click.prevent="linkClicked"
v-html="contentHtml"
/>
<div
v-else
class="status-content media-body"
@click.prevent="linkClicked"
v-html="status.summary_html"
/>
<a
v-if="hideSubjectStatus"
href="#"
class="cw-status-hider"
@click.prevent="toggleShowMore"
>{{ $t("general.show_more") }}</a>
<a
v-if="showingMore"
href="#"
class="status-unhider"
@click.prevent="toggleShowMore"
>{{ $t("general.show_less") }}</a>
</div> </div>
<div <div v-if="showPreview" class="status-preview-container">
v-if="status.attachments && (!hideSubjectStatus || showingLongSubject)" <status class="status-preview" v-if="preview" :isPreview="true" :statusoid="preview" :compact=true></status>
class="attachments media-body" <div class="status-preview status-preview-loading" v-else>
> <i class="icon-spin4 animate-spin"></i>
</div>
</div>
<div class="status-content-wrapper" :class="{ 'tall-status': !showingLongSubject }" v-if="longSubject">
<a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="!showingLongSubject" href="#" @click.prevent="showingLongSubject=true">{{$t("general.show_more")}}</a>
<div @click.prevent="linkClicked" class="status-content media-body" v-html="contentHtml"></div>
<a v-if="showingLongSubject" href="#" class="status-unhider" @click.prevent="showingLongSubject=false">{{$t("general.show_less")}}</a>
</div>
<div :class="{'tall-status': hideTallStatus}" class="status-content-wrapper" v-else>
<a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowMore">{{$t("general.show_more")}}</a>
<div @click.prevent="linkClicked" class="status-content media-body" v-html="contentHtml" v-if="!hideSubjectStatus"></div>
<div @click.prevent="linkClicked" class="status-content media-body" v-html="status.summary_html" v-else></div>
<a v-if="hideSubjectStatus" href="#" class="cw-status-hider" @click.prevent="toggleShowMore">{{$t("general.show_more")}}</a>
<a v-if="showingMore" href="#" class="status-unhider" @click.prevent="toggleShowMore">{{$t("general.show_less")}}</a>
</div>
<div v-if="status.attachments && (!hideSubjectStatus || showingLongSubject)" class="attachments media-body">
<attachment <attachment
v-for="attachment in nonGalleryAttachments"
:key="attachment.id"
class="non-gallery" class="non-gallery"
v-for="attachment in nonGalleryAttachments"
:size="attachmentSize" :size="attachmentSize"
:nsfw="nsfwClickthrough" :nsfw="nsfwClickthrough"
:attachment="attachment" :attachment="attachment"
:allow-play="true" :allowPlay="true"
:set-media="setMedia()" :setMedia="setMedia()"
:key="attachment.id"
/> />
<gallery <gallery
v-if="galleryAttachments.length > 0" v-if="galleryAttachments.length > 0"
:nsfw="nsfwClickthrough" :nsfw="nsfwClickthrough"
:attachments="galleryAttachments" :attachments="galleryAttachments"
:set-media="setMedia()" :setMedia="setMedia()"
/> />
</div> </div>
<div <div v-if="status.card && !hideSubjectStatus && !noHeading" class="link-preview media-body">
v-if="status.card && !hideSubjectStatus && !noHeading" <link-preview :card="status.card" :size="attachmentSize" :nsfw="nsfwClickthrough" />
class="link-preview media-body"
>
<link-preview
:card="status.card"
:size="attachmentSize"
:nsfw="nsfwClickthrough"
/>
</div> </div>
<div <div v-if="!noHeading && !isPreview" class='status-actions media-body'>
v-if="!noHeading && !isPreview"
class="status-actions media-body"
>
<div v-if="loggedIn"> <div v-if="loggedIn">
<i <i class="button-icon icon-reply" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')" :class="{'icon-reply-active': replying}"></i>
class="button-icon icon-reply" <span v-if="status.replies_count > 0">{{status.replies_count}}</span>
:title="$t('tool_tip.reply')"
:class="{'icon-reply-active': replying}"
@click.prevent="toggleReplying"
/>
<span v-if="status.replies_count > 0">{{ status.replies_count }}</span>
</div> </div>
<retweet-button <retweet-button :visibility='status.visibility' :loggedIn='loggedIn' :status='status'></retweet-button>
:visibility="status.visibility" <favorite-button :loggedIn='loggedIn' :status='status'></favorite-button>
:logged-in="loggedIn" <delete-button :status='status'></delete-button>
:status="status"
/>
<favorite-button
:logged-in="loggedIn"
:status="status"
/>
<delete-button :status="status" />
</div> </div>
</div> </div>
</div> </div>
<div <div class="container" v-if="replying">
v-if="replying" <div class="reply-left"/>
class="container" <post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" :copy-message-scope="status.visibility" :subject="replySubject" v-on:posted="toggleReplying"/>
>
<div class="reply-left" />
<post-status-form
class="reply-body"
:reply-to="status.id"
:attentions="status.attentions"
:replied-user="status.user"
:copy-message-scope="status.visibility"
:subject="replySubject"
@posted="toggleReplying"
/>
</div> </div>
</template> </template>
</div> </div>

18
src/components/still-image/still-image.vue
View file

@ -1,19 +1,7 @@
<template> <template>
<div <div class='still-image' :class='{ animated: animated }' >
class="still-image" <canvas ref="canvas" v-if="animated"></canvas>
:class="{ animated: animated }" <img ref="src" :src="src" :referrerpolicy="referrerpolicy" v-on:load="onLoad" @error="onError"/>
>
<canvas
v-if="animated"
ref="canvas"
/>
<img
ref="src"
:src="src"
:referrerpolicy="referrerpolicy"
@load="onLoad"
@error="onError"
>
</div> </div>
</template> </template>

65
src/components/style_switcher/preview.vue
View file

@ -1,20 +1,20 @@
<template> <template>
<div class="panel dummy"> <div class="panel dummy">
<div class="panel-heading"> <div class="panel-heading">
<div class="title"> <div class="title">
{{ $t('settings.style.preview.header') }} {{$t('settings.style.preview.header')}}
<span class="badge badge-notification"> <span class="badge badge-notification">
99 99
</span> </span>
</div> </div>
<span class="faint"> <span class="faint">
{{ $t('settings.style.preview.header_faint') }} {{$t('settings.style.preview.header_faint')}}
</span> </span>
<span class="alert error"> <span class="alert error">
{{ $t('settings.style.preview.error') }} {{$t('settings.style.preview.error')}}
</span> </span>
<button class="btn"> <button class="btn">
{{ $t('settings.style.preview.button') }} {{$t('settings.style.preview.button')}}
</button> </button>
</div> </div>
<div class="panel-body theme-preview-content"> <div class="panel-body theme-preview-content">
@ -24,35 +24,23 @@
</div> </div>
<div class="content"> <div class="content">
<h4> <h4>
{{ $t('settings.style.preview.content') }} {{$t('settings.style.preview.content')}}
</h4> </h4>
<i18n path="settings.style.preview.text"> <i18n path="settings.style.preview.text">
<code style="font-family: var(--postCodeFont)"> <code style="font-family: var(--postCodeFont)">
{{ $t('settings.style.preview.mono') }} {{$t('settings.style.preview.mono')}}
</code> </code>
<a style="color: var(--link)"> <a style="color: var(--link)">
{{ $t('settings.style.preview.link') }} {{$t('settings.style.preview.link')}}
</a> </a>
</i18n> </i18n>
<div class="icons"> <div class="icons">
<i <i style="color: var(--cBlue)" class="button-icon icon-reply"/>
style="color: var(--cBlue)" <i style="color: var(--cGreen)" class="button-icon icon-retweet"/>
class="button-icon icon-reply" <i style="color: var(--cOrange)" class="button-icon icon-star"/>
/> <i style="color: var(--cRed)" class="button-icon icon-cancel"/>
<i
style="color: var(--cGreen)"
class="button-icon icon-retweet"
/>
<i
style="color: var(--cOrange)"
class="button-icon icon-star"
/>
<i
style="color: var(--cRed)"
class="button-icon icon-cancel"
/>
</div> </div>
</div> </div>
</div> </div>
@ -62,40 +50,29 @@
:^) :^)
</div> </div>
<div class="content"> <div class="content">
<i18n <i18n path="settings.style.preview.fine_print" tag="span" class="faint">
path="settings.style.preview.fine_print"
tag="span"
class="faint"
>
<a style="color: var(--faintLink)"> <a style="color: var(--faintLink)">
{{ $t('settings.style.preview.faint_link') }} {{$t('settings.style.preview.faint_link')}}
</a> </a>
</i18n> </i18n>
</div> </div>
</div> </div>
<div class="separator" /> <div class="separator"></div>
<span class="alert error"> <span class="alert error">
{{ $t('settings.style.preview.error') }} {{$t('settings.style.preview.error')}}
</span> </span>
<input <input :value="$t('settings.style.preview.input')" type="text">
:value="$t('settings.style.preview.input')"
type="text"
>
<div class="actions"> <div class="actions">
<span class="checkbox"> <span class="checkbox">
<input <input checked="very yes" type="checkbox" id="preview_checkbox">
id="preview_checkbox" <label for="preview_checkbox">{{$t('settings.style.preview.checkbox')}}</label>
checked="very yes"
type="checkbox"
>
<label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
</span> </span>
<button class="btn"> <button class="btn">
{{ $t('settings.style.preview.button') }} {{$t('settings.style.preview.button')}}
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</template> </template>

571
src/components/style_switcher/style_switcher.vue
View file

@ -1,40 +1,29 @@
<template> <template>
<div class="style-switcher"> <div class="style-switcher">
<div class="presets-container"> <div class="presets-container">
<div class="save-load"> <div class="save-load">
<export-import <export-import
:export-object="exportedTheme" :exportObject='exportedTheme'
:export-label="$t(&quot;settings.export_theme&quot;)" :exportLabel='$t("settings.export_theme")'
:import-label="$t(&quot;settings.import_theme&quot;)" :importLabel='$t("settings.import_theme")'
:import-failed-text="$t(&quot;settings.invalid_theme_imported&quot;)" :importFailedText='$t("settings.invalid_theme_imported")'
:on-import="onImport" :onImport='onImport'
:validator="importValidator" :validator='importValidator'>
>
<template slot="before"> <template slot="before">
<div class="presets"> <div class="presets">
{{ $t('settings.presets') }} {{$t('settings.presets')}}
<label <label for="preset-switcher" class='select'>
for="preset-switcher" <select id="preset-switcher" v-model="selected" class="preset-switcher">
class="select" <option v-for="style in availableStyles"
>
<select
id="preset-switcher"
v-model="selected"
class="preset-switcher"
>
<option
v-for="style in availableStyles"
:key="style.name"
:value="style" :value="style"
:style="{ :style="{
backgroundColor: style[1] || style.theme.colors.bg, backgroundColor: style[1] || style.theme.colors.bg,
color: style[3] || style.theme.colors.text color: style[3] || style.theme.colors.text
}" }">
> {{style[0] || style.name}}
{{ style[0] || style.name }}
</option> </option>
</select> </select>
<i class="icon-down-open" /> <i class="icon-down-open"/>
</label> </label>
</div> </div>
</template> </template>
@ -44,550 +33,242 @@
<span class="keep-option"> <span class="keep-option">
<input <input
id="keep-color" id="keep-color"
v-model="keepColor"
type="checkbox" type="checkbox"
> v-model="keepColor">
<label for="keep-color">{{ $t('settings.style.switcher.keep_color') }}</label> <label for="keep-color">{{$t('settings.style.switcher.keep_color')}}</label>
</span> </span>
<span class="keep-option"> <span class="keep-option">
<input <input
id="keep-shadows" id="keep-shadows"
v-model="keepShadows"
type="checkbox" type="checkbox"
> v-model="keepShadows">
<label for="keep-shadows">{{ $t('settings.style.switcher.keep_shadows') }}</label> <label for="keep-shadows">{{$t('settings.style.switcher.keep_shadows')}}</label>
</span> </span>
<span class="keep-option"> <span class="keep-option">
<input <input
id="keep-opacity" id="keep-opacity"
v-model="keepOpacity"
type="checkbox" type="checkbox"
> v-model="keepOpacity">
<label for="keep-opacity">{{ $t('settings.style.switcher.keep_opacity') }}</label> <label for="keep-opacity">{{$t('settings.style.switcher.keep_opacity')}}</label>
</span> </span>
<span class="keep-option"> <span class="keep-option">
<input <input
id="keep-roundness" id="keep-roundness"
v-model="keepRoundness"
type="checkbox" type="checkbox"
> v-model="keepRoundness">
<label for="keep-roundness">{{ $t('settings.style.switcher.keep_roundness') }}</label> <label for="keep-roundness">{{$t('settings.style.switcher.keep_roundness')}}</label>
</span> </span>
<span class="keep-option"> <span class="keep-option">
<input <input
id="keep-fonts" id="keep-fonts"
v-model="keepFonts"
type="checkbox" type="checkbox"
> v-model="keepFonts">
<label for="keep-fonts">{{ $t('settings.style.switcher.keep_fonts') }}</label> <label for="keep-fonts">{{$t('settings.style.switcher.keep_fonts')}}</label>
</span> </span>
<p>{{ $t('settings.style.switcher.save_load_hint') }}</p> <p>{{$t('settings.style.switcher.save_load_hint')}}</p>
</div> </div>
</div> </div>
<div class="preview-container"> <div class="preview-container">
<preview :style="previewRules" /> <preview :style="previewRules"/>
</div> </div>
<keep-alive> <keep-alive>
<tab-switcher key="style-tweak"> <tab-switcher key="style-tweak">
<div <div :label="$t('settings.style.common_colors._tab_label')" class="color-container">
:label="$t('settings.style.common_colors._tab_label')"
class="color-container"
>
<div class="tab-header"> <div class="tab-header">
<p>{{ $t('settings.theme_help') }}</p> <p>{{$t('settings.theme_help')}}</p>
<button <button class="btn" @click="clearOpacity">{{$t('settings.style.switcher.clear_opacity')}}</button>
class="btn" <button class="btn" @click="clearV1">{{$t('settings.style.switcher.clear_all')}}</button>
@click="clearOpacity"
>
{{ $t('settings.style.switcher.clear_opacity') }}
</button>
<button
class="btn"
@click="clearV1"
>
{{ $t('settings.style.switcher.clear_all') }}
</button>
</div> </div>
<p>{{ $t('settings.theme_help_v2_1') }}</p> <p>{{$t('settings.theme_help_v2_1')}}</p>
<h4>{{ $t('settings.style.common_colors.main') }}</h4> <h4>{{ $t('settings.style.common_colors.main') }}</h4>
<div class="color-item"> <div class="color-item">
<ColorInput <ColorInput name="bgColor" v-model="bgColorLocal" :label="$t('settings.background')"/>
v-model="bgColorLocal" <OpacityInput name="bgOpacity" v-model="bgOpacityLocal" :fallback="previewTheme.opacity.bg || 1"/>
name="bgColor" <ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/>
:label="$t('settings.background')" <ContrastRatio :contrast="previewContrast.bgText"/>
/> <ColorInput name="linkColor" v-model="linkColorLocal" :label="$t('settings.links')"/>
<OpacityInput <ContrastRatio :contrast="previewContrast.bgLink"/>
v-model="bgOpacityLocal"
name="bgOpacity"
:fallback="previewTheme.opacity.bg || 1"
/>
<ColorInput
v-model="textColorLocal"
name="textColor"
:label="$t('settings.text')"
/>
<ContrastRatio :contrast="previewContrast.bgText" />
<ColorInput
v-model="linkColorLocal"
name="linkColor"
:label="$t('settings.links')"
/>
<ContrastRatio :contrast="previewContrast.bgLink" />
</div> </div>
<div class="color-item"> <div class="color-item">
<ColorInput <ColorInput name="fgColor" v-model="fgColorLocal" :label="$t('settings.foreground')"/>
v-model="fgColorLocal" <ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.fgText"/>
name="fgColor" <ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="previewTheme.colors.fgLink"/>
:label="$t('settings.foreground')"
/>
<ColorInput
v-model="fgTextColorLocal"
name="fgTextColor"
:label="$t('settings.text')"
:fallback="previewTheme.colors.fgText"
/>
<ColorInput
v-model="fgLinkColorLocal"
name="fgLinkColor"
:label="$t('settings.links')"
:fallback="previewTheme.colors.fgLink"
/>
<p>{{ $t('settings.style.common_colors.foreground_hint') }}</p> <p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
</div> </div>
<h4>{{ $t('settings.style.common_colors.rgbo') }}</h4> <h4>{{ $t('settings.style.common_colors.rgbo') }}</h4>
<div class="color-item"> <div class="color-item">
<ColorInput <ColorInput name="cRedColor" v-model="cRedColorLocal" :label="$t('settings.cRed')"/>
v-model="cRedColorLocal" <ContrastRatio :contrast="previewContrast.bgRed"/>
name="cRedColor" <ColorInput name="cBlueColor" v-model="cBlueColorLocal" :label="$t('settings.cBlue')"/>
:label="$t('settings.cRed')" <ContrastRatio :contrast="previewContrast.bgBlue"/>
/>
<ContrastRatio :contrast="previewContrast.bgRed" />
<ColorInput
v-model="cBlueColorLocal"
name="cBlueColor"
:label="$t('settings.cBlue')"
/>
<ContrastRatio :contrast="previewContrast.bgBlue" />
</div> </div>
<div class="color-item"> <div class="color-item">
<ColorInput <ColorInput name="cGreenColor" v-model="cGreenColorLocal" :label="$t('settings.cGreen')"/>
v-model="cGreenColorLocal" <ContrastRatio :contrast="previewContrast.bgGreen"/>
name="cGreenColor" <ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/>
:label="$t('settings.cGreen')" <ContrastRatio :contrast="previewContrast.bgOrange"/>
/>
<ContrastRatio :contrast="previewContrast.bgGreen" />
<ColorInput
v-model="cOrangeColorLocal"
name="cOrangeColor"
:label="$t('settings.cOrange')"
/>
<ContrastRatio :contrast="previewContrast.bgOrange" />
</div> </div>
<p>{{ $t('settings.theme_help_v2_2') }}</p> <p>{{$t('settings.theme_help_v2_2')}}</p>
</div> </div>
<div <div :label="$t('settings.style.advanced_colors._tab_label')" class="color-container">
:label="$t('settings.style.advanced_colors._tab_label')"
class="color-container"
>
<div class="tab-header"> <div class="tab-header">
<p>{{ $t('settings.theme_help') }}</p> <p>{{$t('settings.theme_help')}}</p>
<button <button class="btn" @click="clearOpacity">{{$t('settings.style.switcher.clear_opacity')}}</button>
class="btn" <button class="btn" @click="clearV1">{{$t('settings.style.switcher.clear_all')}}</button>
@click="clearOpacity"
>
{{ $t('settings.style.switcher.clear_opacity') }}
</button>
<button
class="btn"
@click="clearV1"
>
{{ $t('settings.style.switcher.clear_all') }}
</button>
</div> </div>
<div class="color-item"> <div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.alert') }}</h4> <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
<ColorInput <ColorInput name="alertError" v-model="alertErrorColorLocal" :label="$t('settings.style.advanced_colors.alert_error')" :fallback="previewTheme.colors.alertError"/>
v-model="alertErrorColorLocal" <ContrastRatio :contrast="previewContrast.alertError"/>
name="alertError"
:label="$t('settings.style.advanced_colors.alert_error')"
:fallback="previewTheme.colors.alertError"
/>
<ContrastRatio :contrast="previewContrast.alertError" />
</div> </div>
<div class="color-item"> <div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.badge') }}</h4> <h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
<ColorInput <ColorInput name="badgeNotification" v-model="badgeNotificationColorLocal" :label="$t('settings.style.advanced_colors.badge_notification')" :fallback="previewTheme.colors.badgeNotification"/>
v-model="badgeNotificationColorLocal"
name="badgeNotification"
:label="$t('settings.style.advanced_colors.badge_notification')"
:fallback="previewTheme.colors.badgeNotification"
/>
</div> </div>
<div class="color-item"> <div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4> <h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
<ColorInput <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
v-model="panelColorLocal" <OpacityInput name="panelOpacity" v-model="panelOpacityLocal" :fallback="previewTheme.opacity.panel || 1"/>
name="panelColor" <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.text')"/>
:fallback="fgColorLocal" <ContrastRatio :contrast="previewContrast.panelText" large="1"/>
:label="$t('settings.background')" <ColorInput name="panelLinkColor" v-model="panelLinkColorLocal" :fallback="previewTheme.colors.panelLink" :label="$t('settings.links')"/>
/> <ContrastRatio :contrast="previewContrast.panelLink" large="1"/>
<OpacityInput
v-model="panelOpacityLocal"
name="panelOpacity"
:fallback="previewTheme.opacity.panel || 1"
/>
<ColorInput
v-model="panelTextColorLocal"
name="panelTextColor"
:fallback="previewTheme.colors.panelText"
:label="$t('settings.text')"
/>
<ContrastRatio
:contrast="previewContrast.panelText"
large="1"
/>
<ColorInput
v-model="panelLinkColorLocal"
name="panelLinkColor"
:fallback="previewTheme.colors.panelLink"
:label="$t('settings.links')"
/>
<ContrastRatio
:contrast="previewContrast.panelLink"
large="1"
/>
</div> </div>
<div class="color-item"> <div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4> <h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4>
<ColorInput <ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
v-model="topBarColorLocal" <ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="previewTheme.colors.topBarText" :label="$t('settings.text')"/>
name="topBarColor" <ContrastRatio :contrast="previewContrast.topBarText"/>
:fallback="fgColorLocal" <ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="previewTheme.colors.topBarLink" :label="$t('settings.links')"/>
:label="$t('settings.background')" <ContrastRatio :contrast="previewContrast.topBarLink"/>
/>
<ColorInput
v-model="topBarTextColorLocal"
name="topBarTextColor"
:fallback="previewTheme.colors.topBarText"
:label="$t('settings.text')"
/>
<ContrastRatio :contrast="previewContrast.topBarText" />
<ColorInput
v-model="topBarLinkColorLocal"
name="topBarLinkColor"
:fallback="previewTheme.colors.topBarLink"
:label="$t('settings.links')"
/>
<ContrastRatio :contrast="previewContrast.topBarLink" />
</div> </div>
<div class="color-item"> <div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.inputs') }}</h4> <h4>{{ $t('settings.style.advanced_colors.inputs') }}</h4>
<ColorInput <ColorInput name="inputColor" v-model="inputColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
v-model="inputColorLocal" <OpacityInput name="inputOpacity" v-model="inputOpacityLocal" :fallback="previewTheme.opacity.input || 1"/>
name="inputColor" <ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="previewTheme.colors.inputText" :label="$t('settings.text')"/>
:fallback="fgColorLocal" <ContrastRatio :contrast="previewContrast.inputText"/>
:label="$t('settings.background')"
/>
<OpacityInput
v-model="inputOpacityLocal"
name="inputOpacity"
:fallback="previewTheme.opacity.input || 1"
/>
<ColorInput
v-model="inputTextColorLocal"
name="inputTextColor"
:fallback="previewTheme.colors.inputText"
:label="$t('settings.text')"
/>
<ContrastRatio :contrast="previewContrast.inputText" />
</div> </div>
<div class="color-item"> <div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.buttons') }}</h4> <h4>{{ $t('settings.style.advanced_colors.buttons') }}</h4>
<ColorInput <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
v-model="btnColorLocal" <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" :fallback="previewTheme.opacity.btn || 1"/>
name="btnColor" <ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="previewTheme.colors.btnText" :label="$t('settings.text')"/>
:fallback="fgColorLocal" <ContrastRatio :contrast="previewContrast.btnText"/>
:label="$t('settings.background')"
/>
<OpacityInput
v-model="btnOpacityLocal"
name="btnOpacity"
:fallback="previewTheme.opacity.btn || 1"
/>
<ColorInput
v-model="btnTextColorLocal"
name="btnTextColor"
:fallback="previewTheme.colors.btnText"
:label="$t('settings.text')"
/>
<ContrastRatio :contrast="previewContrast.btnText" />
</div> </div>
<div class="color-item"> <div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.borders') }}</h4> <h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
<ColorInput <ColorInput name="borderColor" v-model="borderColorLocal" :fallback="previewTheme.colors.border" :label="$t('settings.style.common.color')"/>
v-model="borderColorLocal" <OpacityInput name="borderOpacity" v-model="borderOpacityLocal" :fallback="previewTheme.opacity.border || 1"/>
name="borderColor"
:fallback="previewTheme.colors.border"
:label="$t('settings.style.common.color')"
/>
<OpacityInput
v-model="borderOpacityLocal"
name="borderOpacity"
:fallback="previewTheme.opacity.border || 1"
/>
</div> </div>
<div class="color-item"> <div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.faint_text') }}</h4> <h4>{{ $t('settings.style.advanced_colors.faint_text') }}</h4>
<ColorInput <ColorInput name="faintColor" v-model="faintColorLocal" :fallback="previewTheme.colors.faint || 1" :label="$t('settings.text')"/>
v-model="faintColorLocal" <ColorInput name="faintLinkColor" v-model="faintLinkColorLocal" :fallback="previewTheme.colors.faintLink" :label="$t('settings.links')"/>
name="faintColor" <ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.style.advanced_colors.panel_header')"/>
:fallback="previewTheme.colors.faint || 1" <OpacityInput name="faintOpacity" v-model="faintOpacityLocal" :fallback="previewTheme.opacity.faint || 0.5"/>
:label="$t('settings.text')"
/>
<ColorInput
v-model="faintLinkColorLocal"
name="faintLinkColor"
:fallback="previewTheme.colors.faintLink"
:label="$t('settings.links')"
/>
<ColorInput
v-model="panelFaintColorLocal"
name="panelFaintColor"
:fallback="previewTheme.colors.panelFaint"
:label="$t('settings.style.advanced_colors.panel_header')"
/>
<OpacityInput
v-model="faintOpacityLocal"
name="faintOpacity"
:fallback="previewTheme.opacity.faint || 0.5"
/>
</div> </div>
</div> </div>
<div <div :label="$t('settings.style.radii._tab_label')" class="radius-container">
:label="$t('settings.style.radii._tab_label')"
class="radius-container"
>
<div class="tab-header"> <div class="tab-header">
<p>{{ $t('settings.radii_help') }}</p> <p>{{$t('settings.radii_help')}}</p>
<button <button class="btn" @click="clearRoundness">{{$t('settings.style.switcher.clear_all')}}</button>
class="btn"
@click="clearRoundness"
>
{{ $t('settings.style.switcher.clear_all') }}
</button>
</div> </div>
<RangeInput <RangeInput name="btnRadius" :label="$t('settings.btnRadius')" v-model="btnRadiusLocal" :fallback="previewTheme.radii.btn" max="16" hardMin="0"/>
v-model="btnRadiusLocal" <RangeInput name="inputRadius" :label="$t('settings.inputRadius')" v-model="inputRadiusLocal" :fallback="previewTheme.radii.input" max="9" hardMin="0"/>
name="btnRadius" <RangeInput name="checkboxRadius" :label="$t('settings.checkboxRadius')" v-model="checkboxRadiusLocal" :fallback="previewTheme.radii.checkbox" max="16" hardMin="0"/>
:label="$t('settings.btnRadius')" <RangeInput name="panelRadius" :label="$t('settings.panelRadius')" v-model="panelRadiusLocal" :fallback="previewTheme.radii.panel" max="50" hardMin="0"/>
:fallback="previewTheme.radii.btn" <RangeInput name="avatarRadius" :label="$t('settings.avatarRadius')" v-model="avatarRadiusLocal" :fallback="previewTheme.radii.avatar" max="28" hardMin="0"/>
max="16" <RangeInput name="avatarAltRadius" :label="$t('settings.avatarAltRadius')" v-model="avatarAltRadiusLocal" :fallback="previewTheme.radii.avatarAlt" max="28" hardMin="0"/>
hard-min="0" <RangeInput name="attachmentRadius" :label="$t('settings.attachmentRadius')" v-model="attachmentRadiusLocal" :fallback="previewTheme.radii.attachment" max="50" hardMin="0"/>
/> <RangeInput name="tooltipRadius" :label="$t('settings.tooltipRadius')" v-model="tooltipRadiusLocal" :fallback="previewTheme.radii.tooltip" max="50" hardMin="0"/>
<RangeInput
v-model="inputRadiusLocal"
name="inputRadius"
:label="$t('settings.inputRadius')"
:fallback="previewTheme.radii.input"
max="9"
hard-min="0"
/>
<RangeInput
v-model="checkboxRadiusLocal"
name="checkboxRadius"
:label="$t('settings.checkboxRadius')"
:fallback="previewTheme.radii.checkbox"
max="16"
hard-min="0"
/>
<RangeInput
v-model="panelRadiusLocal"
name="panelRadius"
:label="$t('settings.panelRadius')"
:fallback="previewTheme.radii.panel"
max="50"
hard-min="0"
/>
<RangeInput
v-model="avatarRadiusLocal"
name="avatarRadius"
:label="$t('settings.avatarRadius')"
:fallback="previewTheme.radii.avatar"
max="28"
hard-min="0"
/>
<RangeInput
v-model="avatarAltRadiusLocal"
name="avatarAltRadius"
:label="$t('settings.avatarAltRadius')"
:fallback="previewTheme.radii.avatarAlt"
max="28"
hard-min="0"
/>
<RangeInput
v-model="attachmentRadiusLocal"
name="attachmentRadius"
:label="$t('settings.attachmentRadius')"
:fallback="previewTheme.radii.attachment"
max="50"
hard-min="0"
/>
<RangeInput
v-model="tooltipRadiusLocal"
name="tooltipRadius"
:label="$t('settings.tooltipRadius')"
:fallback="previewTheme.radii.tooltip"
max="50"
hard-min="0"
/>
</div> </div>
<div <div :label="$t('settings.style.shadows._tab_label')" class="shadow-container">
:label="$t('settings.style.shadows._tab_label')"
class="shadow-container"
>
<div class="tab-header shadow-selector"> <div class="tab-header shadow-selector">
<div class="select-container"> <div class="select-container">
{{ $t('settings.style.shadows.component') }} {{$t('settings.style.shadows.component')}}
<label <label for="shadow-switcher" class="select">
for="shadow-switcher" <select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher">
class="select" <option v-for="shadow in shadowsAvailable"
> :value="shadow">
<select {{$t('settings.style.shadows.components.' + shadow)}}
id="shadow-switcher"
v-model="shadowSelected"
class="shadow-switcher"
>
<option
v-for="shadow in shadowsAvailable"
:key="shadow"
:value="shadow"
>
{{ $t('settings.style.shadows.components.' + shadow) }}
</option> </option>
</select> </select>
<i class="icon-down-open" /> <i class="icon-down-open"/>
</label> </label>
</div> </div>
<div class="override"> <div class="override">
<label <label for="override" class="label">
for="override" {{$t('settings.style.shadows.override')}}
class="label"
>
{{ $t('settings.style.shadows.override') }}
</label> </label>
<input <input
id="override"
v-model="currentShadowOverriden" v-model="currentShadowOverriden"
name="override" name="override"
id="override"
class="input-override" class="input-override"
type="checkbox" type="checkbox">
> <label class="checkbox-label" for="override"></label>
<label
class="checkbox-label"
for="override"
/>
</div> </div>
<button <button class="btn" @click="clearShadows">{{$t('settings.style.switcher.clear_all')}}</button>
class="btn"
@click="clearShadows"
>
{{ $t('settings.style.switcher.clear_all') }}
</button>
</div> </div>
<shadow-control <shadow-control :ready="!!currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/>
v-model="currentShadow"
:ready="!!currentShadowFallback"
:fallback="currentShadowFallback"
/>
<div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'"> <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
<i18n <i18n path="settings.style.shadows.filter_hint.always_drop_shadow" tag="p">
path="settings.style.shadows.filter_hint.always_drop_shadow"
tag="p"
>
<code>filter: drop-shadow()</code> <code>filter: drop-shadow()</code>
</i18n> </i18n>
<p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p> <p>{{$t('settings.style.shadows.filter_hint.avatar_inset')}}</p>
<i18n <i18n path="settings.style.shadows.filter_hint.drop_shadow_syntax" tag="p">
path="settings.style.shadows.filter_hint.drop_shadow_syntax"
tag="p"
>
<code>drop-shadow</code> <code>drop-shadow</code>
<code>spread-radius</code> <code>spread-radius</code>
<code>inset</code> <code>inset</code>
</i18n> </i18n>
<i18n <i18n path="settings.style.shadows.filter_hint.inset_classic" tag="p">
path="settings.style.shadows.filter_hint.inset_classic"
tag="p"
>
<code>box-shadow</code> <code>box-shadow</code>
</i18n> </i18n>
<p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p> <p>{{$t('settings.style.shadows.filter_hint.spread_zero')}}</p>
</div> </div>
</div> </div>
<div <div :label="$t('settings.style.fonts._tab_label')" class="fonts-container">
:label="$t('settings.style.fonts._tab_label')"
class="fonts-container"
>
<div class="tab-header"> <div class="tab-header">
<p>{{ $t('settings.style.fonts.help') }}</p> <p>{{$t('settings.style.fonts.help')}}</p>
<button <button class="btn" @click="clearFonts">{{$t('settings.style.switcher.clear_all')}}</button>
class="btn"
@click="clearFonts"
>
{{ $t('settings.style.switcher.clear_all') }}
</button>
</div> </div>
<FontControl <FontControl
v-model="fontsLocal.interface"
name="ui" name="ui"
v-model="fontsLocal.interface"
:label="$t('settings.style.fonts.components.interface')" :label="$t('settings.style.fonts.components.interface')"
:fallback="previewTheme.fonts.interface" :fallback="previewTheme.fonts.interface"
no-inherit="1" no-inherit="1"/>
/>
<FontControl <FontControl
v-model="fontsLocal.input"
name="input" name="input"
v-model="fontsLocal.input"
:label="$t('settings.style.fonts.components.input')" :label="$t('settings.style.fonts.components.input')"
:fallback="previewTheme.fonts.input" :fallback="previewTheme.fonts.input"/>
/>
<FontControl <FontControl
v-model="fontsLocal.post"
name="post" name="post"
v-model="fontsLocal.post"
:label="$t('settings.style.fonts.components.post')" :label="$t('settings.style.fonts.components.post')"
:fallback="previewTheme.fonts.post" :fallback="previewTheme.fonts.post"/>
/>
<FontControl <FontControl
v-model="fontsLocal.postCode"
name="postCode" name="postCode"
v-model="fontsLocal.postCode"
:label="$t('settings.style.fonts.components.postCode')" :label="$t('settings.style.fonts.components.postCode')"
:fallback="previewTheme.fonts.postCode" :fallback="previewTheme.fonts.postCode"/>
/>
</div> </div>
</tab-switcher> </tab-switcher>
</keep-alive> </keep-alive>
<div class="apply-container"> <div class="apply-container">
<button <button class="btn submit" :disabled="!themeValid" @click="setCustomTheme">{{$t('general.apply')}}</button>
class="btn submit" <button class="btn" @click="clearAll">{{$t('settings.style.switcher.reset')}}</button>
:disabled="!themeValid"
@click="setCustomTheme"
>
{{ $t('general.apply') }}
</button>
<button
class="btn"
@click="clearAll"
>
{{ $t('settings.style.switcher.reset') }}
</button>
</div>
</div> </div>
</div>
</template> </template>
<script src="./style_switcher.js"></script> <script src="./style_switcher.js"></script>

12
src/components/tab_switcher/tab_switcher.js
View file

@ -10,12 +10,6 @@ export default Vue.component('tab-switcher', {
active: this.$slots.default.findIndex(_ => _.tag) active: this.$slots.default.findIndex(_ => _.tag)
} }
}, },
beforeUpdate () {
const currentSlot = this.$slots.default[this.active]
if (!currentSlot.tag) {
this.active = this.$slots.default.findIndex(_ => _.tag)
}
},
methods: { methods: {
activateTab (index) { activateTab (index) {
return () => { return () => {
@ -23,6 +17,12 @@ export default Vue.component('tab-switcher', {
} }
} }
}, },
beforeUpdate () {
const currentSlot = this.$slots.default[this.active]
if (!currentSlot.tag) {
this.active = this.$slots.default.findIndex(_ => _.tag)
}
},
render (h) { render (h) {
const tabs = this.$slots.default const tabs = this.$slots.default
.map((slot, index) => { .map((slot, index) => {

7
src/components/tag_timeline/tag_timeline.vue
View file

@ -1,10 +1,5 @@
<template> <template>
<Timeline <Timeline :title="tag" :timeline="timeline" :timeline-name="'tag'" :tag="tag" />
:title="tag"
:timeline="timeline"
:timeline-name="'tag'"
:tag="tag"
/>
</template> </template>
<script src='./tag_timeline.js'></script> <script src='./tag_timeline.js'></script>

6
src/components/terms_of_service_panel/terms_of_service_panel.vue
View file

@ -2,10 +2,8 @@
<div> <div>
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-body"> <div class="panel-body">
<div <div v-html="content" class="tos-content">
class="tos-content" </div>
v-html="content"
/>
</div> </div>
</div> </div>
</div> </div>

57
src/components/timeline/timeline.vue
View file

@ -2,66 +2,41 @@
<div :class="classes.root"> <div :class="classes.root">
<div :class="classes.header"> <div :class="classes.header">
<div class="title"> <div class="title">
{{ title }} {{title}}
</div> </div>
<div <div @click.prevent class="loadmore-error alert error" v-if="timelineError">
v-if="timelineError" {{$t('timeline.error_fetching')}}
class="loadmore-error alert error"
@click.prevent
>
{{ $t('timeline.error_fetching') }}
</div> </div>
<button <button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
v-if="timeline.newStatusCount > 0 && !timelineError" {{$t('timeline.show_new')}}{{newStatusCountStr}}
class="loadmore-button"
@click.prevent="showNewStatuses"
>
{{ $t('timeline.show_new') }}{{ newStatusCountStr }}
</button> </button>
<div <div @click.prevent class="loadmore-text faint" v-if="!timeline.newStatusCount > 0 && !timelineError">
v-if="!timeline.newStatusCount > 0 && !timelineError" {{$t('timeline.up_to_date')}}
class="loadmore-text faint"
@click.prevent
>
{{ $t('timeline.up_to_date') }}
</div> </div>
</div> </div>
<div :class="classes.body"> <div :class="classes.body">
<div class="timeline"> <div class="timeline">
<conversation <conversation
v-for="status in timeline.visibleStatuses" v-for="status in timeline.visibleStatuses"
:key="status.id"
class="status-fadein" class="status-fadein"
:key="status.id"
:statusoid="status" :statusoid="status"
:collapsable="true" :collapsable="true"
/> />
</div> </div>
</div> </div>
<div :class="classes.footer"> <div :class="classes.footer">
<div <div v-if="count===0" class="new-status-notification text-center panel-footer faint">
v-if="count===0" {{$t('timeline.no_statuses')}}
class="new-status-notification text-center panel-footer faint"
>
{{ $t('timeline.no_statuses') }}
</div> </div>
<div <div v-else-if="bottomedOut" class="new-status-notification text-center panel-footer faint">
v-else-if="bottomedOut" {{$t('timeline.no_more_statuses')}}
class="new-status-notification text-center panel-footer faint"
>
{{ $t('timeline.no_more_statuses') }}
</div> </div>
<a <a v-else-if="!timeline.loading" href="#" v-on:click.prevent='fetchOlderStatuses()'>
v-else-if="!timeline.loading" <div class="new-status-notification text-center panel-footer">{{$t('timeline.load_older')}}</div>
href="#"
@click.prevent="fetchOlderStatuses()"
>
<div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div>
</a> </a>
<div <div v-else class="new-status-notification text-center panel-footer">
v-else <i class="icon-spin3 animate-spin"/>
class="new-status-notification text-center panel-footer"
>
<i class="icon-spin3 animate-spin" />
</div> </div>
</div> </div>
</div> </div>

2
src/components/user_avatar/user_avatar.vue
View file

@ -3,7 +3,7 @@
class="avatar" class="avatar"
:class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }" :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
:src="imgSrc" :src="imgSrc"
:image-load-error="imageLoadError" :imageLoadError="imageLoadError"
/> />
</template> </template>

8
src/components/user_card/user_card.js
View file

@ -72,12 +72,12 @@ export default {
userHighlightType: { userHighlightType: {
get () { get () {
const data = this.$store.state.config.highlight[this.user.screen_name] const data = this.$store.state.config.highlight[this.user.screen_name]
return (data && data.type) || 'disabled' return data && data.type || 'disabled'
}, },
set (type) { set (type) {
const data = this.$store.state.config.highlight[this.user.screen_name] const data = this.$store.state.config.highlight[this.user.screen_name]
if (type !== 'disabled') { if (type !== 'disabled') {
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: (data && data.color) || '#FFFFFF', type }) this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: data && data.color || '#FFFFFF', type })
} else { } else {
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined }) this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
} }
@ -107,7 +107,7 @@ export default {
followUser () { followUser () {
const store = this.$store const store = this.$store
this.followRequestInProgress = true this.followRequestInProgress = true
requestFollow(this.user, store).then(({ sent }) => { requestFollow(this.user, store).then(({sent}) => {
this.followRequestInProgress = false this.followRequestInProgress = false
this.followRequestSent = sent this.followRequestSent = sent
}) })
@ -138,7 +138,7 @@ export default {
store.commit('setProfileView', { v }) store.commit('setProfileView', { v })
} }
}, },
linkClicked ({ target }) { linkClicked ({target}) {
if (target.tagName === 'SPAN') { if (target.tagName === 'SPAN') {
target = target.parentNode target = target.parentNode
} }

206
src/components/user_card/user_card.vue
View file

@ -1,128 +1,55 @@
<template> <template>
<div <div class="user-card" :class="classes" :style="style">
class="user-card"
:class="classes"
:style="style"
>
<div class="panel-heading"> <div class="panel-heading">
<div class="user-info"> <div class='user-info'>
<div class="container"> <div class='container'>
<router-link :to="userProfileLink(user)"> <router-link :to="userProfileLink(user)">
<UserAvatar <UserAvatar :betterShadow="betterShadow" :src="user.profile_image_url_original"/>
:better-shadow="betterShadow"
:src="user.profile_image_url_original"
/>
</router-link> </router-link>
<div class="name-and-screen-name"> <div class="name-and-screen-name">
<div class="top-line"> <div class="top-line">
<div <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
v-if="user.name_html" <div :title="user.name" class='user-name' v-else>{{user.name}}</div>
:title="user.name" <router-link :to="{ name: 'user-settings' }" v-if="!isOtherUser">
class="user-name" <i class="button-icon icon-pencil usersettings" :title="$t('tool_tip.user_settings')"></i>
v-html="user.name_html"
/>
<div
v-else
:title="user.name"
class="user-name"
>
{{ user.name }}
</div>
<router-link
v-if="!isOtherUser"
:to="{ name: 'user-settings' }"
>
<i
class="button-icon icon-pencil usersettings"
:title="$t('tool_tip.user_settings')"
/>
</router-link> </router-link>
<a <a :href="user.statusnet_profile_url" target="_blank" v-if="isOtherUser && !user.is_local">
v-if="isOtherUser && !user.is_local" <i class="icon-link-ext usersettings"></i>
:href="user.statusnet_profile_url"
target="_blank"
>
<i class="icon-link-ext usersettings" />
</a> </a>
</div> </div>
<router-link <router-link class='user-screen-name' :to="userProfileLink(user)">
class="user-screen-name" <span class="handle">@{{user.screen_name}}
:to="userProfileLink(user)" <span class="alert staff" v-if="!hideBio && !!visibleRole">{{visibleRole}}</span>
> </span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
<span class="handle">@{{ user.screen_name }} <span v-if="!hideUserStatsLocal && !hideBio" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
<span
v-if="!hideBio && !!visibleRole"
class="alert staff"
>{{ visibleRole }}</span>
</span><span v-if="user.locked"><i class="icon icon-lock" /></span>
<span
v-if="!hideUserStatsLocal && !hideBio"
class="dailyAvg"
>{{ dailyAvg }} {{ $t('user_card.per_day') }}</span>
</router-link> </router-link>
</div> </div>
</div> </div>
<div class="user-meta"> <div class="user-meta">
<div <div v-if="user.follows_you && loggedIn && isOtherUser" class="following">
v-if="user.follows_you && loggedIn && isOtherUser"
class="following"
>
{{ $t('user_card.follows_you') }} {{ $t('user_card.follows_you') }}
</div> </div>
<div <div class="highlighter" v-if="isOtherUser && (loggedIn || !switcher)">
v-if="isOtherUser && (loggedIn || !switcher)"
class="highlighter"
>
<!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to --> <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
<input <input class="userHighlightText" type="text" :id="'userHighlightColorTx'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
v-if="userHighlightType !== 'disabled'" <input class="userHighlightCl" type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
:id="'userHighlightColorTx'+user.id" <label for="style-switcher" class='userHighlightSel select'>
v-model="userHighlightColor" <select class="userHighlightSel" :id="'userHighlightSel'+user.id" v-model="userHighlightType">
class="userHighlightText"
type="text"
>
<input
v-if="userHighlightType !== 'disabled'"
:id="'userHighlightColor'+user.id"
v-model="userHighlightColor"
class="userHighlightCl"
type="color"
>
<label
for="style-switcher"
class="userHighlightSel select"
>
<select
:id="'userHighlightSel'+user.id"
v-model="userHighlightType"
class="userHighlightSel"
>
<option value="disabled">No highlight</option> <option value="disabled">No highlight</option>
<option value="solid">Solid bg</option> <option value="solid">Solid bg</option>
<option value="striped">Striped bg</option> <option value="striped">Striped bg</option>
<option value="side">Side stripe</option> <option value="side">Side stripe</option>
</select> </select>
<i class="icon-down-open" /> <i class="icon-down-open"/>
</label> </label>
</div> </div>
</div> </div>
<div <div v-if="isOtherUser" class="user-interactions">
v-if="isOtherUser" <div class="follow" v-if="loggedIn">
class="user-interactions"
>
<div
v-if="loggedIn"
class="follow"
>
<span v-if="user.following"> <span v-if="user.following">
<!--Following them!--> <!--Following them!-->
<button <button @click="unfollowUser" class="pressed" :disabled="followRequestInProgress" :title="$t('user_card.follow_unfollow')">
class="pressed"
:disabled="followRequestInProgress"
:title="$t('user_card.follow_unfollow')"
@click="unfollowUser"
>
<template v-if="followRequestInProgress"> <template v-if="followRequestInProgress">
{{ $t('user_card.follow_progress') }} {{ $t('user_card.follow_progress') }}
</template> </template>
@ -132,11 +59,7 @@
</button> </button>
</span> </span>
<span v-if="!user.following"> <span v-if="!user.following">
<button <button @click="followUser" :disabled="followRequestInProgress" :title="followRequestSent ? $t('user_card.follow_again') : ''">
:disabled="followRequestInProgress"
:title="followRequestSent ? $t('user_card.follow_again') : ''"
@click="followUser"
>
<template v-if="followRequestInProgress"> <template v-if="followRequestInProgress">
{{ $t('user_card.follow_progress') }} {{ $t('user_card.follow_progress') }}
</template> </template>
@ -149,40 +72,28 @@
</button> </button>
</span> </span>
</div> </div>
<div <div class='mute' v-if='isOtherUser && loggedIn'>
v-if="isOtherUser && loggedIn" <span v-if='user.muted'>
class="mute" <button @click="unmuteUser" class="pressed">
>
<span v-if="user.muted">
<button
class="pressed"
@click="unmuteUser"
>
{{ $t('user_card.muted') }} {{ $t('user_card.muted') }}
</button> </button>
</span> </span>
<span v-if="!user.muted"> <span v-if='!user.muted'>
<button @click="muteUser"> <button @click="muteUser">
{{ $t('user_card.mute') }} {{ $t('user_card.mute') }}
</button> </button>
</span> </span>
</div> </div>
<div v-if="!loggedIn && user.is_local"> <div v-if='!loggedIn && user.is_local'>
<RemoteFollow :user="user" /> <RemoteFollow :user="user" />
</div> </div>
<div <div class='block' v-if='isOtherUser && loggedIn'>
v-if="isOtherUser && loggedIn" <span v-if='user.statusnet_blocking'>
class="block" <button @click="unblockUser" class="pressed">
>
<span v-if="user.statusnet_blocking">
<button
class="pressed"
@click="unblockUser"
>
{{ $t('user_card.blocked') }} {{ $t('user_card.blocked') }}
</button> </button>
</span> </span>
<span v-if="!user.statusnet_blocking"> <span v-if='!user.statusnet_blocking'>
<button @click="blockUser"> <button @click="blockUser">
{{ $t('user_card.block') }} {{ $t('user_card.block') }}
</button> </button>
@ -191,50 +102,25 @@
</div> </div>
</div> </div>
</div> </div>
<div <div class="panel-body" v-if="!hideBio">
v-if="!hideBio" <div v-if="!hideUserStatsLocal && switcher" class="user-counts">
class="panel-body" <div class="user-count" v-on:click.prevent="setProfileView('statuses')">
>
<div
v-if="!hideUserStatsLocal && switcher"
class="user-counts"
>
<div
class="user-count"
@click.prevent="setProfileView('statuses')"
>
<h5>{{ $t('user_card.statuses') }}</h5> <h5>{{ $t('user_card.statuses') }}</h5>
<span>{{ user.statuses_count }} <br></span> <span>{{user.statuses_count}} <br></span>
</div> </div>
<div <div class="user-count" v-on:click.prevent="setProfileView('friends')">
class="user-count"
@click.prevent="setProfileView('friends')"
>
<h5>{{ $t('user_card.followees') }}</h5> <h5>{{ $t('user_card.followees') }}</h5>
<span>{{ user.friends_count }}</span> <span>{{user.friends_count}}</span>
</div> </div>
<div <div class="user-count" v-on:click.prevent="setProfileView('followers')">
class="user-count"
@click.prevent="setProfileView('followers')"
>
<h5>{{ $t('user_card.followers') }}</h5> <h5>{{ $t('user_card.followers') }}</h5>
<span>{{ user.followers_count }}</span> <span>{{user.followers_count}}</span>
</div> </div>
</div> </div>
<p <p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="user-card-bio" v-html="user.description_html"></p>
v-if="!hideBio && user.description_html" <p v-else-if="!hideBio" class="user-card-bio">{{ user.description }}</p>
class="user-card-bio"
@click.prevent="linkClicked"
v-html="user.description_html"
/>
<p
v-else-if="!hideBio"
class="user-card-bio"
>
{{ user.description }}
</p>
</div>
</div> </div>
</div>
</template> </template>
<script src="./user_card.js"></script> <script src="./user_card.js"></script>

37
src/components/user_finder/user_finder.vue
View file

@ -1,38 +1,14 @@
<template> <template>
<div> <div>
<div class="user-finder-container"> <div class="user-finder-container">
<i <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" />
v-if="loading" <a href="#" v-if="hidden" :title="$t('finder.find_user')"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden" /></a>
class="icon-spin4 user-finder-icon animate-spin-slow"
/>
<a
v-if="hidden"
href="#"
:title="$t('finder.find_user')"
><i
class="icon-user-plus user-finder-icon"
@click.prevent.stop="toggleHidden"
/></a>
<template v-else> <template v-else>
<input <input class="user-finder-input" ref="userSearchInput" @keyup.enter="findUser(username)" v-model="username" :placeholder="$t('finder.find_user')" id="user-finder-input" type="text"/>
id="user-finder-input" <button class="btn search-button" @click="findUser(username)">
ref="userSearchInput" <i class="icon-search"/>
v-model="username"
class="user-finder-input"
:placeholder="$t('finder.find_user')"
type="text"
@keyup.enter="findUser(username)"
>
<button
class="btn search-button"
@click="findUser(username)"
>
<i class="icon-search" />
</button> </button>
<i <i class="button-icon icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/>
class="button-icon icon-cancel user-finder-icon"
@click.prevent.stop="toggleHidden"
/>
</template> </template>
</div> </div>
</div> </div>
@ -49,6 +25,7 @@
align-items: baseline; align-items: baseline;
vertical-align: baseline; vertical-align: baseline;
.user-finder-input, .user-finder-input,
.search-button { .search-button {
height: 29px; height: 29px;

16
src/components/user_panel/user_panel.vue
View file

@ -1,20 +1,12 @@
<template> <template>
<div class="user-panel"> <div class="user-panel">
<div <div v-if='user' class="panel panel-default" style="overflow: visible;">
v-if="user" <UserCard :user="user" :hideBio="true" rounded="top"/>
class="panel panel-default"
style="overflow: visible;"
>
<UserCard
:user="user"
:hide-bio="true"
rounded="top"
/>
<div class="panel-footer"> <div class="panel-footer">
<post-status-form v-if="user" /> <post-status-form v-if='user'></post-status-form>
</div> </div>
</div> </div>
<login-form v-if="!user" /> <login-form v-if='!user'></login-form>
</div> </div>
</template> </template>

53
src/components/user_profile/user_profile.vue
View file

@ -1,19 +1,8 @@
<template> <template>
<div> <div>
<div <div v-if="user.id" class="user-profile panel panel-default">
v-if="user.id" <UserCard :user="user" :switcher="true" :selected="timeline.viewing" rounded="top"/>
class="user-profile panel panel-default" <tab-switcher :renderOnlyFocused="true" ref="tabSwitcher">
>
<UserCard
:user="user"
:switcher="true"
:selected="timeline.viewing"
rounded="top"
/>
<tab-switcher
ref="tabSwitcher"
:render-only-focused="true"
>
<Timeline <Timeline
:label="$t('user_card.statuses')" :label="$t('user_card.statuses')"
:disabled="!user.statuses_count" :disabled="!user.statuses_count"
@ -24,28 +13,16 @@
:timeline-name="'user'" :timeline-name="'user'"
:user-id="userId" :user-id="userId"
/> />
<div <div :label="$t('user_card.followees')" v-if="followsTabVisible" :disabled="!user.friends_count">
v-if="followsTabVisible" <FriendList :userId="userId" />
:label="$t('user_card.followees')"
:disabled="!user.friends_count"
>
<FriendList :user-id="userId" />
</div> </div>
<div <div :label="$t('user_card.followers')" v-if="followersTabVisible" :disabled="!user.followers_count">
v-if="followersTabVisible" <FollowerList :userId="userId" :entryProps="{noFollowsYou: isUs}" />
:label="$t('user_card.followers')"
:disabled="!user.followers_count"
>
<FollowerList
:user-id="userId"
:entry-props="{noFollowsYou: isUs}"
/>
</div> </div>
<Timeline <Timeline
:label="$t('user_card.media')" :label="$t('user_card.media')"
:disabled="!media.visibleStatuses.length" :disabled="!media.visibleStatuses.length"
:embedded="true" :embedded="true" :title="$t('user_card.media')"
:title="$t('user_card.media')"
timeline-name="media" timeline-name="media"
:timeline="media" :timeline="media"
:user-id="userId" :user-id="userId"
@ -61,10 +38,7 @@
/> />
</tab-switcher> </tab-switcher>
</div> </div>
<div <div v-else class="panel user-profile-placeholder">
v-else
class="panel user-profile-placeholder"
>
<div class="panel-heading"> <div class="panel-heading">
<div class="title"> <div class="title">
{{ $t('settings.profile_tab') }} {{ $t('settings.profile_tab') }}
@ -72,13 +46,10 @@
</div> </div>
<div class="panel-body"> <div class="panel-body">
<span v-if="error">{{ error }}</span> <span v-if="error">{{ error }}</span>
<i <i class="icon-spin3 animate-spin" v-else></i>
v-else
class="icon-spin3 animate-spin"
/>
</div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script src="./user_profile.js"></script> <script src="./user_profile.js"></script>

2
src/components/user_search/user_search.js
View file

@ -33,7 +33,7 @@ const userSearch = {
return return
} }
this.loading = true this.loading = true
userSearchApi.search({ query, store: this.$store }) userSearchApi.search({query, store: this.$store})
.then((res) => { .then((res) => {
this.loading = false this.loading = false
this.users = res this.users = res

35
src/components/user_search/user_search.vue
View file

@ -1,38 +1,19 @@
<template> <template>
<div class="user-search panel panel-default"> <div class="user-search panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
{{ $t('nav.user_search') }} {{$t('nav.user_search')}}
</div> </div>
<div class="user-search-input-container"> <div class="user-search-input-container">
<input <input class="user-finder-input" ref="userSearchInput" @keyup.enter="newQuery(username)" v-model="username" :placeholder="$t('finder.find_user')"/>
ref="userSearchInput" <button class="btn search-button" @click="newQuery(username)">
v-model="username" <i class="icon-search"/>
class="user-finder-input"
:placeholder="$t('finder.find_user')"
@keyup.enter="newQuery(username)"
>
<button
class="btn search-button"
@click="newQuery(username)"
>
<i class="icon-search" />
</button> </button>
</div> </div>
<div <div v-if="loading" class="text-center loading-icon">
v-if="loading" <i class="icon-spin3 animate-spin"/>
class="text-center loading-icon"
>
<i class="icon-spin3 animate-spin" />
</div> </div>
<div <div v-else class="panel-body">
v-else <FollowCard v-for="user in users" :key="user.id" :user="user"/>
class="panel-body"
>
<FollowCard
v-for="user in users"
:key="user.id"
:user="user"
/>
</div> </div>
</div> </div>
</template> </template>

16
src/components/user_settings/user_settings.js
View file

@ -134,7 +134,7 @@ const UserSettings = {
hide_followers, hide_followers,
show_role show_role
/* eslint-enable camelcase */ /* eslint-enable camelcase */
} }).then((user) => { }}).then((user) => {
if (!user.error) { if (!user.error) {
this.$store.commit('addNewUsers', [user]) this.$store.commit('addNewUsers', [user])
this.$store.commit('setCurrentUser', user) this.$store.commit('setCurrentUser', user)
@ -150,12 +150,12 @@ const UserSettings = {
if (file.size > this.$store.state.instance[slot + 'limit']) { if (file.size > this.$store.state.instance[slot + 'limit']) {
const filesize = fileSizeFormatService.fileSizeFormat(file.size) const filesize = fileSizeFormatService.fileSizeFormat(file.size)
const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit']) const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
this[slot + 'UploadError'] = this.$t('upload.error.base') + ' ' + this.$t('upload.error.file_too_big', { filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit }) this[slot + 'UploadError'] = this.$t('upload.error.base') + ' ' + this.$t('upload.error.file_too_big', {filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit})
return return
} }
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
const reader = new FileReader() const reader = new FileReader()
reader.onload = ({ target }) => { reader.onload = ({target}) => {
const img = target.result const img = target.result
this[slot + 'Preview'] = img this[slot + 'Preview'] = img
} }
@ -195,7 +195,7 @@ const UserSettings = {
offset_top = 0 offset_top = 0
offset_left = 0 offset_left = 0
this.bannerUploading = true this.bannerUploading = true
this.$store.state.api.backendInteractor.updateBanner({ params: { banner, offset_top, offset_left, width, height } }).then((data) => { this.$store.state.api.backendInteractor.updateBanner({params: {banner, offset_top, offset_left, width, height}}).then((data) => {
if (!data.error) { if (!data.error) {
let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser)) let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser))
clone.cover_photo = data.url clone.cover_photo = data.url
@ -221,7 +221,7 @@ const UserSettings = {
cropW = imginfo.width cropW = imginfo.width
cropH = imginfo.width cropH = imginfo.width
this.backgroundUploading = true this.backgroundUploading = true
this.$store.state.api.backendInteractor.updateBg({ params: { img, cropX, cropY, cropW, cropH } }).then((data) => { this.$store.state.api.backendInteractor.updateBg({params: {img, cropX, cropY, cropW, cropH}}).then((data) => {
if (!data.error) { if (!data.error) {
let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser)) let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser))
clone.background_image = data.url clone.background_image = data.url
@ -237,7 +237,7 @@ const UserSettings = {
importFollows () { importFollows () {
this.followListUploading = true this.followListUploading = true
const followList = this.followList const followList = this.followList
this.$store.state.api.backendInteractor.followImport({ params: followList }) this.$store.state.api.backendInteractor.followImport({params: followList})
.then((status) => { .then((status) => {
if (status) { if (status) {
this.followsImported = true this.followsImported = true
@ -295,11 +295,11 @@ const UserSettings = {
this.deletingAccount = true this.deletingAccount = true
}, },
deleteAccount () { deleteAccount () {
this.$store.state.api.backendInteractor.deleteAccount({ password: this.deleteAccountConfirmPasswordInput }) this.$store.state.api.backendInteractor.deleteAccount({password: this.deleteAccountConfirmPasswordInput})
.then((res) => { .then((res) => {
if (res.status === 'success') { if (res.status === 'success') {
this.$store.dispatch('logout') this.$store.dispatch('logout')
this.$router.push({ name: 'root' }) this.$router.push({name: 'root'})
} else { } else {
this.deleteAccountError = res.error this.deleteAccountError = res.error
} }

387
src/components/user_settings/user_settings.vue
View file

@ -2,23 +2,15 @@
<div class="settings panel panel-default"> <div class="settings panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<div class="title"> <div class="title">
{{ $t('settings.user_settings') }} {{$t('settings.user_settings')}}
</div> </div>
<transition name="fade"> <transition name="fade">
<template v-if="currentSaveStateNotice"> <template v-if="currentSaveStateNotice">
<div <div @click.prevent class="alert error" v-if="currentSaveStateNotice.error">
v-if="currentSaveStateNotice.error"
class="alert error"
@click.prevent
>
{{ $t('settings.saving_err') }} {{ $t('settings.saving_err') }}
</div> </div>
<div <div @click.prevent class="alert transparent" v-if="!currentSaveStateNotice.error">
v-if="!currentSaveStateNotice.error"
class="alert transparent"
@click.prevent
>
{{ $t('settings.saving_ok') }} {{ $t('settings.saving_ok') }}
</div> </div>
</template> </template>
@ -27,258 +19,132 @@
<div class="panel-body profile-edit"> <div class="panel-body profile-edit">
<tab-switcher> <tab-switcher>
<div :label="$t('settings.profile_tab')"> <div :label="$t('settings.profile_tab')">
<div class="setting-item"> <div class="setting-item" >
<h2>{{ $t('settings.name_bio') }}</h2> <h2>{{$t('settings.name_bio')}}</h2>
<p>{{ $t('settings.name') }}</p> <p>{{$t('settings.name')}}</p>
<EmojiInput <EmojiInput
id="username"
v-model="newName"
type="text" type="text"
v-model="newName"
id="username"
classname="name-changer" classname="name-changer"
/> />
<p>{{ $t('settings.bio') }}</p> <p>{{$t('settings.bio')}}</p>
<EmojiInput <EmojiInput
v-model="newBio"
type="textarea" type="textarea"
v-model="newBio"
classname="bio" classname="bio"
/> />
<p> <p>
<input <input type="checkbox" v-model="newLocked" id="account-locked">
id="account-locked" <label for="account-locked">{{$t('settings.lock_account_description')}}</label>
v-model="newLocked"
type="checkbox"
>
<label for="account-locked">{{ $t('settings.lock_account_description') }}</label>
</p> </p>
<div> <div>
<label for="default-vis">{{ $t('settings.default_vis') }}</label> <label for="default-vis">{{$t('settings.default_vis')}}</label>
<div <div id="default-vis" class="visibility-tray">
id="default-vis"
class="visibility-tray"
>
<scope-selector <scope-selector
:show-all="true" :showAll="true"
:user-default="newDefaultScope" :userDefault="newDefaultScope"
:on-scope-change="changeVis" :onScopeChange="changeVis"/>
/>
</div> </div>
</div> </div>
<p> <p>
<input <input type="checkbox" v-model="newNoRichText" id="account-no-rich-text">
id="account-no-rich-text" <label for="account-no-rich-text">{{$t('settings.no_rich_text_description')}}</label>
v-model="newNoRichText"
type="checkbox"
>
<label for="account-no-rich-text">{{ $t('settings.no_rich_text_description') }}</label>
</p> </p>
<p> <p>
<input <input type="checkbox" v-model="hideFollows" id="account-hide-follows">
id="account-hide-follows" <label for="account-hide-follows">{{$t('settings.hide_follows_description')}}</label>
v-model="hideFollows"
type="checkbox"
>
<label for="account-hide-follows">{{ $t('settings.hide_follows_description') }}</label>
</p> </p>
<p> <p>
<input <input type="checkbox" v-model="hideFollowers" id="account-hide-followers">
id="account-hide-followers" <label for="account-hide-followers">{{$t('settings.hide_followers_description')}}</label>
v-model="hideFollowers"
type="checkbox"
>
<label for="account-hide-followers">{{ $t('settings.hide_followers_description') }}</label>
</p> </p>
<p> <p>
<input <input type="checkbox" v-model="showRole" id="account-show-role">
id="account-show-role" <label for="account-show-role" v-if="role === 'admin'">{{$t('settings.show_admin_badge')}}</label>
v-model="showRole" <label for="account-show-role" v-if="role === 'moderator'">{{$t('settings.show_moderator_badge')}}</label>
type="checkbox"
>
<label
v-if="role === 'admin'"
for="account-show-role"
>{{ $t('settings.show_admin_badge') }}</label>
<label
v-if="role === 'moderator'"
for="account-show-role"
>{{ $t('settings.show_moderator_badge') }}</label>
</p> </p>
<button <button :disabled='newName && newName.length === 0' class="btn btn-default" @click="updateProfile">{{$t('general.submit')}}</button>
:disabled="newName && newName.length === 0"
class="btn btn-default"
@click="updateProfile"
>
{{ $t('general.submit') }}
</button>
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.avatar') }}</h2> <h2>{{$t('settings.avatar')}}</h2>
<p class="visibility-notice"> <p class="visibility-notice">{{$t('settings.avatar_size_instruction')}}</p>
{{ $t('settings.avatar_size_instruction') }} <p>{{$t('settings.current_avatar')}}</p>
</p> <img :src="user.profile_image_url_original" class="current-avatar" />
<p>{{ $t('settings.current_avatar') }}</p> <p>{{$t('settings.set_new_avatar')}}</p>
<img <button class="btn" type="button" id="pick-avatar" v-show="pickAvatarBtnVisible">{{$t('settings.upload_a_photo')}}</button>
:src="user.profile_image_url_original" <image-cropper trigger="#pick-avatar" :submitHandler="submitAvatar" @open="pickAvatarBtnVisible=false" @close="pickAvatarBtnVisible=true" />
class="current-avatar"
>
<p>{{ $t('settings.set_new_avatar') }}</p>
<button
v-show="pickAvatarBtnVisible"
id="pick-avatar"
class="btn"
type="button"
>
{{ $t('settings.upload_a_photo') }}
</button>
<image-cropper
trigger="#pick-avatar"
:submit-handler="submitAvatar"
@open="pickAvatarBtnVisible=false"
@close="pickAvatarBtnVisible=true"
/>
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.profile_banner') }}</h2> <h2>{{$t('settings.profile_banner')}}</h2>
<p>{{ $t('settings.current_profile_banner') }}</p> <p>{{$t('settings.current_profile_banner')}}</p>
<img <img :src="user.cover_photo" class="banner" />
:src="user.cover_photo" <p>{{$t('settings.set_new_profile_banner')}}</p>
class="banner" <img class="banner" v-bind:src="bannerPreview" v-if="bannerPreview" />
>
<p>{{ $t('settings.set_new_profile_banner') }}</p>
<img
v-if="bannerPreview"
class="banner"
:src="bannerPreview"
>
<div> <div>
<input <input type="file" @change="uploadFile('banner', $event)" />
type="file"
@change="uploadFile('banner', $event)"
>
</div> </div>
<i <i class=" icon-spin4 animate-spin uploading" v-if="bannerUploading"></i>
v-if="bannerUploading" <button class="btn btn-default" v-else-if="bannerPreview" @click="submitBanner">{{$t('general.submit')}}</button>
class=" icon-spin4 animate-spin uploading" <div class='alert error' v-if="bannerUploadError">
/>
<button
v-else-if="bannerPreview"
class="btn btn-default"
@click="submitBanner"
>
{{ $t('general.submit') }}
</button>
<div
v-if="bannerUploadError"
class="alert error"
>
Error: {{ bannerUploadError }} Error: {{ bannerUploadError }}
<i <i class="button-icon icon-cancel" @click="clearUploadError('banner')"></i>
class="button-icon icon-cancel"
@click="clearUploadError('banner')"
/>
</div> </div>
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.profile_background') }}</h2> <h2>{{$t('settings.profile_background')}}</h2>
<p>{{ $t('settings.set_new_profile_background') }}</p> <p>{{$t('settings.set_new_profile_background')}}</p>
<img <img class="bg" v-bind:src="backgroundPreview" v-if="backgroundPreview" />
v-if="backgroundPreview"
class="bg"
:src="backgroundPreview"
>
<div> <div>
<input <input type="file" @change="uploadFile('background', $event)" />
type="file"
@change="uploadFile('background', $event)"
>
</div> </div>
<i <i class=" icon-spin4 animate-spin uploading" v-if="backgroundUploading"></i>
v-if="backgroundUploading" <button class="btn btn-default" v-else-if="backgroundPreview" @click="submitBg">{{$t('general.submit')}}</button>
class=" icon-spin4 animate-spin uploading" <div class='alert error' v-if="backgroundUploadError">
/>
<button
v-else-if="backgroundPreview"
class="btn btn-default"
@click="submitBg"
>
{{ $t('general.submit') }}
</button>
<div
v-if="backgroundUploadError"
class="alert error"
>
Error: {{ backgroundUploadError }} Error: {{ backgroundUploadError }}
<i <i class="button-icon icon-cancel" @click="clearUploadError('background')"></i>
class="button-icon icon-cancel"
@click="clearUploadError('background')"
/>
</div> </div>
</div> </div>
</div> </div>
<div :label="$t('settings.security_tab')"> <div :label="$t('settings.security_tab')">
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.change_password') }}</h2> <h2>{{$t('settings.change_password')}}</h2>
<div> <div>
<p>{{ $t('settings.current_password') }}</p> <p>{{$t('settings.current_password')}}</p>
<input <input type="password" v-model="changePasswordInputs[0]">
v-model="changePasswordInputs[0]"
type="password"
>
</div> </div>
<div> <div>
<p>{{ $t('settings.new_password') }}</p> <p>{{$t('settings.new_password')}}</p>
<input <input type="password" v-model="changePasswordInputs[1]">
v-model="changePasswordInputs[1]"
type="password"
>
</div> </div>
<div> <div>
<p>{{ $t('settings.confirm_new_password') }}</p> <p>{{$t('settings.confirm_new_password')}}</p>
<input <input type="password" v-model="changePasswordInputs[2]">
v-model="changePasswordInputs[2]"
type="password"
>
</div> </div>
<button <button class="btn btn-default" @click="changePassword">{{$t('general.submit')}}</button>
class="btn btn-default" <p v-if="changedPassword">{{$t('settings.changed_password')}}</p>
@click="changePassword" <p v-else-if="changePasswordError !== false">{{$t('settings.change_password_error')}}</p>
> <p v-if="changePasswordError">{{changePasswordError}}</p>
{{ $t('general.submit') }}
</button>
<p v-if="changedPassword">
{{ $t('settings.changed_password') }}
</p>
<p v-else-if="changePasswordError !== false">
{{ $t('settings.change_password_error') }}
</p>
<p v-if="changePasswordError">
{{ changePasswordError }}
</p>
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.oauth_tokens') }}</h2> <h2>{{$t('settings.oauth_tokens')}}</h2>
<table class="oauth-tokens"> <table class="oauth-tokens">
<thead> <thead>
<tr> <tr>
<th>{{ $t('settings.app_name') }}</th> <th>{{$t('settings.app_name')}}</th>
<th>{{ $t('settings.valid_until') }}</th> <th>{{$t('settings.valid_until')}}</th>
<th /> <th></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr <tr v-for="oauthToken in oauthTokens" :key="oauthToken.id">
v-for="oauthToken in oauthTokens" <td>{{oauthToken.appName}}</td>
:key="oauthToken.id" <td>{{oauthToken.validUntil}}</td>
>
<td>{{ oauthToken.appName }}</td>
<td>{{ oauthToken.validUntil }}</td>
<td class="actions"> <td class="actions">
<button <button class="btn btn-default" @click="revokeToken(oauthToken.id)">
class="btn btn-default" {{$t('settings.revoke_token')}}
@click="revokeToken(oauthToken.id)"
>
{{ $t('settings.revoke_token') }}
</button> </button>
</td> </td>
</tr> </tr>
@ -287,113 +153,56 @@
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.delete_account') }}</h2> <h2>{{$t('settings.delete_account')}}</h2>
<p v-if="!deletingAccount"> <p v-if="!deletingAccount">{{$t('settings.delete_account_description')}}</p>
{{ $t('settings.delete_account_description') }}
</p>
<div v-if="deletingAccount"> <div v-if="deletingAccount">
<p>{{ $t('settings.delete_account_instructions') }}</p> <p>{{$t('settings.delete_account_instructions')}}</p>
<p>{{ $t('login.password') }}</p> <p>{{$t('login.password')}}</p>
<input <input type="password" v-model="deleteAccountConfirmPasswordInput">
v-model="deleteAccountConfirmPasswordInput" <button class="btn btn-default" @click="deleteAccount">{{$t('settings.delete_account')}}</button>
type="password"
>
<button
class="btn btn-default"
@click="deleteAccount"
>
{{ $t('settings.delete_account') }}
</button>
</div> </div>
<p v-if="deleteAccountError !== false"> <p v-if="deleteAccountError !== false">{{$t('settings.delete_account_error')}}</p>
{{ $t('settings.delete_account_error') }} <p v-if="deleteAccountError">{{deleteAccountError}}</p>
</p> <button class="btn btn-default" v-if="!deletingAccount" @click="confirmDelete">{{$t('general.submit')}}</button>
<p v-if="deleteAccountError">
{{ deleteAccountError }}
</p>
<button
v-if="!deletingAccount"
class="btn btn-default"
@click="confirmDelete"
>
{{ $t('general.submit') }}
</button>
</div> </div>
</div> </div>
<div <div :label="$t('settings.data_import_export_tab')" v-if="pleromaBackend">
v-if="pleromaBackend"
:label="$t('settings.data_import_export_tab')"
>
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.follow_import') }}</h2> <h2>{{$t('settings.follow_import')}}</h2>
<p>{{ $t('settings.import_followers_from_a_csv_file') }}</p> <p>{{$t('settings.import_followers_from_a_csv_file')}}</p>
<form> <form>
<input <input type="file" ref="followlist" v-on:change="followListChange" />
ref="followlist"
type="file"
@change="followListChange"
>
</form> </form>
<i <i class=" icon-spin4 animate-spin uploading" v-if="followListUploading"></i>
v-if="followListUploading" <button class="btn btn-default" v-else @click="importFollows">{{$t('general.submit')}}</button>
class=" icon-spin4 animate-spin uploading"
/>
<button
v-else
class="btn btn-default"
@click="importFollows"
>
{{ $t('general.submit') }}
</button>
<div v-if="followsImported"> <div v-if="followsImported">
<i <i class="icon-cross" @click="dismissImported"></i>
class="icon-cross" <p>{{$t('settings.follows_imported')}}</p>
@click="dismissImported"
/>
<p>{{ $t('settings.follows_imported') }}</p>
</div> </div>
<div v-else-if="followImportError"> <div v-else-if="followImportError">
<i <i class="icon-cross" @click="dismissImported"></i>
class="icon-cross" <p>{{$t('settings.follow_import_error')}}</p>
@click="dismissImported"
/>
<p>{{ $t('settings.follow_import_error') }}</p>
</div> </div>
</div> </div>
<div <div class="setting-item" v-if="enableFollowsExport">
v-if="enableFollowsExport" <h2>{{$t('settings.follow_export')}}</h2>
class="setting-item" <button class="btn btn-default" @click="exportFollows">{{$t('settings.follow_export_button')}}</button>
>
<h2>{{ $t('settings.follow_export') }}</h2>
<button
class="btn btn-default"
@click="exportFollows"
>
{{ $t('settings.follow_export_button') }}
</button>
</div> </div>
<div <div class="setting-item" v-else>
v-else <h2>{{$t('settings.follow_export_processing')}}</h2>
class="setting-item"
>
<h2>{{ $t('settings.follow_export_processing') }}</h2>
</div> </div>
</div> </div>
<div :label="$t('settings.blocks_tab')"> <div :label="$t('settings.blocks_tab')">
<block-list :refresh="true"> <block-list :refresh="true">
<template slot="empty"> <template slot="empty">{{$t('settings.no_blocks')}}</template>
{{ $t('settings.no_blocks') }}
</template>
</block-list> </block-list>
</div> </div>
<div :label="$t('settings.mutes_tab')"> <div :label="$t('settings.mutes_tab')">
<mute-list :refresh="true"> <mute-list :refresh="true">
<template slot="empty"> <template slot="empty">{{$t('settings.no_mutes')}}</template>
{{ $t('settings.no_mutes') }}
</template>
</mute-list> </mute-list>
</div> </div>
</tab-switcher> </tab-switcher>

5
src/components/video_attachment/video_attachment.vue
View file

@ -1,11 +1,10 @@
<template> <template>
<video <video class="video"
class="video" @loadeddata="onVideoDataLoad"
:src="attachment.url" :src="attachment.url"
:loop="loopVideo" :loop="loopVideo"
:controls="controls" :controls="controls"
playsinline playsinline
@loadeddata="onVideoDataLoad"
/> />
</template> </template>

2
src/components/who_to_follow/who_to_follow.js
View file

@ -36,7 +36,7 @@ const WhoToFollow = {
getWhoToFollow () { getWhoToFollow () {
const credentials = this.$store.state.users.currentUser.credentials const credentials = this.$store.state.users.currentUser.credentials
if (credentials) { if (credentials) {
apiService.suggestions({ credentials: credentials }) apiService.suggestions({credentials: credentials})
.then((reply) => { .then((reply) => {
this.showWhoToFollow(reply) this.showWhoToFollow(reply)
}) })

8
src/components/who_to_follow/who_to_follow.vue
View file

@ -1,14 +1,10 @@
<template> <template>
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
{{ $t('who_to_follow.who_to_follow') }} {{$t('who_to_follow.who_to_follow')}}
</div> </div>
<div class="panel-body"> <div class="panel-body">
<FollowCard <FollowCard v-for="user in users" :key="user.id" :user="user"/>
v-for="user in users"
:key="user.id"
:user="user"
/>
</div> </div>
</div> </div>
</template> </template>

2
src/components/who_to_follow_panel/who_to_follow_panel.js
View file

@ -29,7 +29,7 @@ function getWhoToFollow (panel) {
panel.usersToFollow.forEach(toFollow => { panel.usersToFollow.forEach(toFollow => {
toFollow.name = 'Loading...' toFollow.name = 'Loading...'
}) })
apiService.suggestions({ credentials: credentials }) apiService.suggestions({credentials: credentials})
.then((reply) => { .then((reply) => {
showWhoToFollow(panel, reply) showWhoToFollow(panel, reply)
}) })

19
src/components/who_to_follow_panel/who_to_follow_panel.vue
View file

@ -3,22 +3,17 @@
<div class="panel panel-default base01-background"> <div class="panel panel-default base01-background">
<div class="panel-heading timeline-heading base02-background base04"> <div class="panel-heading timeline-heading base02-background base04">
<div class="title"> <div class="title">
{{ $t('who_to_follow.who_to_follow') }} {{$t('who_to_follow.who_to_follow')}}
</div> </div>
</div> </div>
<div class="panel-body who-to-follow"> <div class="panel-body who-to-follow">
<span <span v-for="user in usersToFollow">
v-for="user in usersToFollow" <img v-bind:src="user.img" />
:key="user.id" <router-link v-bind:to="userProfileLink(user.id, user.name)">
> {{user.name}}
<img :src="user.img"> </router-link><br />
<router-link :to="userProfileLink(user.id, user.name)">
{{ user.name }}
</router-link><br>
</span> </span>
<img :src="$store.state.instance.logo"> <router-link :to="{ name: 'who-to-follow' }"> <img v-bind:src="$store.state.instance.logo"> <router-link :to="{ name: 'who-to-follow' }">{{$t('who_to_follow.more')}}</router-link>
{{ $t('who_to_follow.more') }}
</router-link>
</div> </div>
</div> </div>
</div> </div>

46
src/hocs/with_load_more/with_load_more.js
View file

@ -14,6 +14,29 @@ const withLoadMore = ({
const props = originalProps.filter(v => v !== childPropName).concat(additionalPropNames) const props = originalProps.filter(v => v !== childPropName).concat(additionalPropNames)
return Vue.component('withLoadMore', { return Vue.component('withLoadMore', {
render (createElement) {
const props = {
props: {
...this.$props,
[childPropName]: this.entries
},
on: this.$listeners,
scopedSlots: this.$scopedSlots
}
const children = Object.entries(this.$slots).map(([key, value]) => createElement('template', { slot: key }, value))
return (
<div class="with-load-more">
<WrappedComponent {...props}>
{children}
</WrappedComponent>
<div class="with-load-more-footer">
{this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>}
{!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
{!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
</div>
</div>
)
},
props, props,
data () { data () {
return { return {
@ -64,29 +87,6 @@ const withLoadMore = ({
this.fetchEntries() this.fetchEntries()
} }
} }
},
render (createElement) {
const props = {
props: {
...this.$props,
[childPropName]: this.entries
},
on: this.$listeners,
scopedSlots: this.$scopedSlots
}
const children = Object.entries(this.$slots).map(([key, value]) => createElement('template', { slot: key }, value))
return (
<div class="with-load-more">
<WrappedComponent {...props}>
{children}
</WrappedComponent>
<div class="with-load-more-footer">
{this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>}
{!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
{!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
</div>
</div>
)
} }
}) })
} }

58
src/hocs/with_subscription/with_subscription.js
View file

@ -17,6 +17,35 @@ const withSubscription = ({
...props, ...props,
'refresh' // boolean saying to force-fetch data whenever created 'refresh' // boolean saying to force-fetch data whenever created
], ],
render (createElement) {
if (!this.error && !this.loading) {
const props = {
props: {
...this.$props,
[childPropName]: this.fetchedData
},
on: this.$listeners,
scopedSlots: this.$scopedSlots
}
const children = Object.entries(this.$slots).map(([key, value]) => createElement('template', { slot: key }, value))
return (
<div class="with-subscription">
<WrappedComponent {...props}>
{children}
</WrappedComponent>
</div>
)
} else {
return (
<div class="with-subscription-loading">
{this.error
? <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>
: <i class="icon-spin3 animate-spin"/>
}
</div>
)
}
},
data () { data () {
return { return {
loading: false, loading: false,
@ -48,35 +77,6 @@ const withSubscription = ({
}) })
} }
} }
},
render (createElement) {
if (!this.error && !this.loading) {
const props = {
props: {
...this.$props,
[childPropName]: this.fetchedData
},
on: this.$listeners,
scopedSlots: this.$scopedSlots
}
const children = Object.entries(this.$slots).map(([key, value]) => createElement('template', { slot: key }, value))
return (
<div class="with-subscription">
<WrappedComponent {...props}>
{children}
</WrappedComponent>
</div>
)
} else {
return (
<div class="with-subscription-loading">
{this.error
? <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>
: <i class="icon-spin3 animate-spin"/>
}
</div>
)
}
} }
}) })
} }

10
src/modules/api.js
View file

@ -13,10 +13,10 @@ const api = {
setBackendInteractor (state, backendInteractor) { setBackendInteractor (state, backendInteractor) {
state.backendInteractor = backendInteractor state.backendInteractor = backendInteractor
}, },
addFetcher (state, { timeline, fetcher }) { addFetcher (state, {timeline, fetcher}) {
state.fetchers[timeline] = fetcher state.fetchers[timeline] = fetcher
}, },
removeFetcher (state, { timeline }) { removeFetcher (state, {timeline}) {
delete state.fetchers[timeline] delete state.fetchers[timeline]
}, },
setWsToken (state, token) { setWsToken (state, token) {
@ -33,7 +33,7 @@ const api = {
} }
}, },
actions: { actions: {
startFetching (store, { timeline = 'friends', tag = false, userId = false }) { startFetching (store, {timeline = 'friends', tag = false, userId = false}) {
// Don't start fetching if we already are. // Don't start fetching if we already are.
if (store.state.fetchers[timeline]) return if (store.state.fetchers[timeline]) return
@ -43,7 +43,7 @@ const api = {
stopFetching (store, timeline) { stopFetching (store, timeline) {
const fetcher = store.state.fetchers[timeline] const fetcher = store.state.fetchers[timeline]
window.clearInterval(fetcher) window.clearInterval(fetcher)
store.commit('removeFetcher', { timeline }) store.commit('removeFetcher', {timeline})
}, },
setWsToken (store, token) { setWsToken (store, token) {
store.commit('setWsToken', token) store.commit('setWsToken', token)
@ -52,7 +52,7 @@ const api = {
// Set up websocket connection // Set up websocket connection
if (!store.state.chatDisabled) { if (!store.state.chatDisabled) {
const token = store.state.wsToken const token = store.state.wsToken
const socket = new Socket('/socket', { params: { token } }) const socket = new Socket('/socket', {params: {token}})
socket.connect() socket.connect()
store.dispatch('initializeChat', socket) store.dispatch('initializeChat', socket)
} }

4
src/modules/chat.js
View file

@ -1,7 +1,7 @@
const chat = { const chat = {
state: { state: {
messages: [], messages: [],
channel: { state: '' }, channel: {state: ''},
socket: null socket: null
}, },
mutations: { mutations: {
@ -29,7 +29,7 @@ const chat = {
channel.on('new_msg', (msg) => { channel.on('new_msg', (msg) => {
store.commit('addMessage', msg) store.commit('addMessage', msg)
}) })
channel.on('messages', ({ messages }) => { channel.on('messages', ({messages}) => {
store.commit('setMessages', messages) store.commit('setMessages', messages)
}) })
channel.join() channel.join()

4
src/modules/config.js
View file

@ -54,10 +54,10 @@ const config = {
}, },
actions: { actions: {
setHighlight ({ commit, dispatch }, { user, color, type }) { setHighlight ({ commit, dispatch }, { user, color, type }) {
commit('setHighlight', { user, color, type }) commit('setHighlight', {user, color, type})
}, },
setOption ({ commit, dispatch }, { name, value }) { setOption ({ commit, dispatch }, { name, value }) {
commit('setOption', { name, value }) commit('setOption', {name, value})
switch (name) { switch (name) {
case 'theme': case 'theme':
setPreset(value, commit) setPreset(value, commit)

1
src/modules/errors.js
View file

@ -9,3 +9,4 @@ export function humanizeErrors (errors) {
return [...errs, message] return [...errs, message]
}, []) }, [])
} }

2
src/modules/instance.js
View file

@ -68,7 +68,7 @@ const instance = {
}, },
actions: { actions: {
setInstanceOption ({ commit, dispatch }, { name, value }) { setInstanceOption ({ commit, dispatch }, { name, value }) {
commit('setInstanceOption', { name, value }) commit('setInstanceOption', {name, value})
switch (name) { switch (name) {
case 'name': case 'name':
dispatch('setPageTitle') dispatch('setPageTitle')

4
src/modules/oauth_tokens.js
View file

@ -3,12 +3,12 @@ const oauthTokens = {
tokens: [] tokens: []
}, },
actions: { actions: {
fetchTokens ({ rootState, commit }) { fetchTokens ({rootState, commit}) {
rootState.api.backendInteractor.fetchOAuthTokens().then((tokens) => { rootState.api.backendInteractor.fetchOAuthTokens().then((tokens) => {
commit('swapTokens', tokens) commit('swapTokens', tokens)
}) })
}, },
revokeToken ({ rootState, commit, state }, id) { revokeToken ({rootState, commit, state}, id) {
rootState.api.backendInteractor.revokeOAuthToken(id).then((response) => { rootState.api.backendInteractor.revokeOAuthToken(id).then((response) => {
if (response.status === 201) { if (response.status === 201) {
commit('swapTokens', state.tokens.filter(token => token.id !== id)) commit('swapTokens', state.tokens.filter(token => token.id !== id))

8
src/modules/statuses.js
View file

@ -78,13 +78,13 @@ const mergeOrAdd = (arr, obj, item) => {
merge(oldItem, omitBy(item, (v, k) => v === null || k === 'user')) merge(oldItem, omitBy(item, (v, k) => v === null || k === 'user'))
// Reactivity fix. // Reactivity fix.
oldItem.attachments.splice(oldItem.attachments.length) oldItem.attachments.splice(oldItem.attachments.length)
return { item: oldItem, new: false } return {item: oldItem, new: false}
} else { } else {
// This is a new item, prepare it // This is a new item, prepare it
prepareStatus(item) prepareStatus(item)
arr.push(item) arr.push(item)
set(obj, item.id, item) set(obj, item.id, item)
return { item, new: true } return {item, new: true}
} }
} }
@ -237,12 +237,12 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
const uri = deletion.uri const uri = deletion.uri
// Remove possible notification // Remove possible notification
const status = find(allStatuses, { uri }) const status = find(allStatuses, {uri})
if (!status) { if (!status) {
return return
} }
remove(state.notifications.data, ({ action: { id } }) => id === status.id) remove(state.notifications.data, ({action: {id}}) => id === status.id)
remove(allStatuses, { uri }) remove(allStatuses, { uri })
if (timeline) { if (timeline) {

12
src/modules/users.js
View file

@ -224,8 +224,8 @@ const users = {
.then((friends) => { .then((friends) => {
commit('addFriends', { id: user.id, friends }) commit('addFriends', { id: user.id, friends })
resolve(friends) resolve(friends)
}).catch(e => { }).catch(() => {
reject(e) reject()
}) })
}) })
}, },
@ -322,7 +322,7 @@ const users = {
} }
}, },
async getCaptcha (store) { async getCaptcha (store) {
return store.rootState.api.backendInteractor.getCaptcha() return await store.rootState.api.backendInteractor.getCaptcha()
}, },
logout (store) { logout (store) {
@ -376,9 +376,9 @@ const users = {
// Authentication failed // Authentication failed
commit('endLogin') commit('endLogin')
if (response.status === 401) { if (response.status === 401) {
reject(new Error('Wrong username or password')) reject('Wrong username or password')
} else { } else {
reject(new Error('An error occurred, please try again')) reject('An error occurred, please try again')
} }
} }
commit('endLogin') commit('endLogin')
@ -387,7 +387,7 @@ const users = {
.catch((error) => { .catch((error) => {
console.log(error) console.log(error)
commit('endLogin') commit('endLogin')
reject(new Error('Failed to connect to server, try again')) reject('Failed to connect to server, try again')
}) })
}) })
} }

80
src/services/api/api.service.js
View file

@ -1,9 +1,4 @@
/* eslint-env browser */ /* eslint-env browser */
import { each, map } from 'lodash'
import { parseStatus, parseUser, parseNotification, parseAttachment } from '../entity_normalizer/entity_normalizer.service.js'
import 'whatwg-fetch'
import { StatusCodeError } from '../errors/errors'
const LOGIN_URL = '/api/account/verify_credentials.json' const LOGIN_URL = '/api/account/verify_credentials.json'
const ALL_FOLLOWING_URL = '/api/qvitter/allfollowing' const ALL_FOLLOWING_URL = '/api/qvitter/allfollowing'
const MENTIONS_URL = '/api/statuses/mentions.json' const MENTIONS_URL = '/api/statuses/mentions.json'
@ -51,6 +46,11 @@ const MASTODON_UNMUTE_USER_URL = id => `/api/v1/accounts/${id}/unmute`
const MASTODON_POST_STATUS_URL = '/api/v1/statuses' const MASTODON_POST_STATUS_URL = '/api/v1/statuses'
const MASTODON_MEDIA_UPLOAD_URL = '/api/v1/media' const MASTODON_MEDIA_UPLOAD_URL = '/api/v1/media'
import { each, map } from 'lodash'
import { parseStatus, parseUser, parseNotification, parseAttachment } from '../entity_normalizer/entity_normalizer.service.js'
import 'whatwg-fetch'
import { StatusCodeError } from '../errors/errors'
const oldfetch = window.fetch const oldfetch = window.fetch
let fetch = (url, options) => { let fetch = (url, options) => {
@ -80,7 +80,7 @@ const promisedRequest = (url, options) => {
// cropX // cropX
// cropY // cropY
// img (base 64 encodend data url) // img (base 64 encodend data url)
const updateAvatar = ({ credentials, params }) => { const updateAvatar = ({credentials, params}) => {
let url = AVATAR_UPDATE_URL let url = AVATAR_UPDATE_URL
const form = new FormData() const form = new FormData()
@ -98,7 +98,7 @@ const updateAvatar = ({ credentials, params }) => {
}).then((data) => data.json()) }).then((data) => data.json())
} }
const updateBg = ({ credentials, params }) => { const updateBg = ({credentials, params}) => {
let url = BG_UPDATE_URL let url = BG_UPDATE_URL
const form = new FormData() const form = new FormData()
@ -122,7 +122,7 @@ const updateBg = ({ credentials, params }) => {
// offset_left // offset_left
// offset_top // offset_top
// banner (base 64 encodend data url) // banner (base 64 encodend data url)
const updateBanner = ({ credentials, params }) => { const updateBanner = ({credentials, params}) => {
let url = BANNER_UPDATE_URL let url = BANNER_UPDATE_URL
const form = new FormData() const form = new FormData()
@ -145,7 +145,7 @@ const updateBanner = ({ credentials, params }) => {
// url // url
// location // location
// description // description
const updateProfile = ({ credentials, params }) => { const updateProfile = ({credentials, params}) => {
// Always include these fields, because they might be empty or false // Always include these fields, because they might be empty or false
const fields = ['description', 'locked', 'no_rich_text', 'hide_follows', 'hide_followers', 'show_role'] const fields = ['description', 'locked', 'no_rich_text', 'hide_follows', 'hide_followers', 'show_role']
let url = PROFILE_UPDATE_URL let url = PROFILE_UPDATE_URL
@ -201,7 +201,7 @@ const authHeaders = (accessToken) => {
} }
} }
const externalProfile = ({ profileUrl, credentials }) => { const externalProfile = ({profileUrl, credentials}) => {
let url = `${EXTERNAL_PROFILE_URL}?profileurl=${profileUrl}` let url = `${EXTERNAL_PROFILE_URL}?profileurl=${profileUrl}`
return fetch(url, { return fetch(url, {
headers: authHeaders(credentials), headers: authHeaders(credentials),
@ -209,7 +209,7 @@ const externalProfile = ({ profileUrl, credentials }) => {
}).then((data) => data.json()) }).then((data) => data.json())
} }
const followUser = ({ id, credentials }) => { const followUser = ({id, credentials}) => {
let url = MASTODON_FOLLOW_URL(id) let url = MASTODON_FOLLOW_URL(id)
return fetch(url, { return fetch(url, {
headers: authHeaders(credentials), headers: authHeaders(credentials),
@ -217,7 +217,7 @@ const followUser = ({ id, credentials }) => {
}).then((data) => data.json()) }).then((data) => data.json())
} }
const unfollowUser = ({ id, credentials }) => { const unfollowUser = ({id, credentials}) => {
let url = MASTODON_UNFOLLOW_URL(id) let url = MASTODON_UNFOLLOW_URL(id)
return fetch(url, { return fetch(url, {
headers: authHeaders(credentials), headers: authHeaders(credentials),
@ -225,21 +225,21 @@ const unfollowUser = ({ id, credentials }) => {
}).then((data) => data.json()) }).then((data) => data.json())
} }
const blockUser = ({ id, credentials }) => { const blockUser = ({id, credentials}) => {
return fetch(MASTODON_BLOCK_USER_URL(id), { return fetch(MASTODON_BLOCK_USER_URL(id), {
headers: authHeaders(credentials), headers: authHeaders(credentials),
method: 'POST' method: 'POST'
}).then((data) => data.json()) }).then((data) => data.json())
} }
const unblockUser = ({ id, credentials }) => { const unblockUser = ({id, credentials}) => {
return fetch(MASTODON_UNBLOCK_USER_URL(id), { return fetch(MASTODON_UNBLOCK_USER_URL(id), {
headers: authHeaders(credentials), headers: authHeaders(credentials),
method: 'POST' method: 'POST'
}).then((data) => data.json()) }).then((data) => data.json())
} }
const approveUser = ({ id, credentials }) => { const approveUser = ({id, credentials}) => {
let url = `${APPROVE_USER_URL}?user_id=${id}` let url = `${APPROVE_USER_URL}?user_id=${id}`
return fetch(url, { return fetch(url, {
headers: authHeaders(credentials), headers: authHeaders(credentials),
@ -247,7 +247,7 @@ const approveUser = ({ id, credentials }) => {
}).then((data) => data.json()) }).then((data) => data.json())
} }
const denyUser = ({ id, credentials }) => { const denyUser = ({id, credentials}) => {
let url = `${DENY_USER_URL}?user_id=${id}` let url = `${DENY_USER_URL}?user_id=${id}`
return fetch(url, { return fetch(url, {
headers: authHeaders(credentials), headers: authHeaders(credentials),
@ -255,13 +255,13 @@ const denyUser = ({ id, credentials }) => {
}).then((data) => data.json()) }).then((data) => data.json())
} }
const fetchUser = ({ id, credentials }) => { const fetchUser = ({id, credentials}) => {
let url = `${MASTODON_USER_URL}/${id}` let url = `${MASTODON_USER_URL}/${id}`
return promisedRequest(url, { headers: authHeaders(credentials) }) return promisedRequest(url, { headers: authHeaders(credentials) })
.then((data) => parseUser(data)) .then((data) => parseUser(data))
} }
const fetchUserRelationship = ({ id, credentials }) => { const fetchUserRelationship = ({id, credentials}) => {
let url = `${MASTODON_USER_RELATIONSHIPS_URL}/?id=${id}` let url = `${MASTODON_USER_RELATIONSHIPS_URL}/?id=${id}`
return fetch(url, { headers: authHeaders(credentials) }) return fetch(url, { headers: authHeaders(credentials) })
.then((response) => { .then((response) => {
@ -275,7 +275,7 @@ const fetchUserRelationship = ({ id, credentials }) => {
}) })
} }
const fetchFriends = ({ id, maxId, sinceId, limit = 20, credentials }) => { const fetchFriends = ({id, maxId, sinceId, limit = 20, credentials}) => {
let url = MASTODON_FOLLOWING_URL(id) let url = MASTODON_FOLLOWING_URL(id)
const args = [ const args = [
maxId && `max_id=${maxId}`, maxId && `max_id=${maxId}`,
@ -289,14 +289,14 @@ const fetchFriends = ({ id, maxId, sinceId, limit = 20, credentials }) => {
.then((data) => data.map(parseUser)) .then((data) => data.map(parseUser))
} }
const exportFriends = ({ id, credentials }) => { const exportFriends = ({id, credentials}) => {
let url = MASTODON_FOLLOWING_URL(id) + `?all=true` let url = MASTODON_FOLLOWING_URL(id) + `?all=true`
return fetch(url, { headers: authHeaders(credentials) }) return fetch(url, { headers: authHeaders(credentials) })
.then((data) => data.json()) .then((data) => data.json())
.then((data) => data.map(parseUser)) .then((data) => data.map(parseUser))
} }
const fetchFollowers = ({ id, maxId, sinceId, limit = 20, credentials }) => { const fetchFollowers = ({id, maxId, sinceId, limit = 20, credentials}) => {
let url = MASTODON_FOLLOWERS_URL(id) let url = MASTODON_FOLLOWERS_URL(id)
const args = [ const args = [
maxId && `max_id=${maxId}`, maxId && `max_id=${maxId}`,
@ -310,20 +310,20 @@ const fetchFollowers = ({ id, maxId, sinceId, limit = 20, credentials }) => {
.then((data) => data.map(parseUser)) .then((data) => data.map(parseUser))
} }
const fetchAllFollowing = ({ username, credentials }) => { const fetchAllFollowing = ({username, credentials}) => {
const url = `${ALL_FOLLOWING_URL}/${username}.json` const url = `${ALL_FOLLOWING_URL}/${username}.json`
return fetch(url, { headers: authHeaders(credentials) }) return fetch(url, { headers: authHeaders(credentials) })
.then((data) => data.json()) .then((data) => data.json())
.then((data) => data.map(parseUser)) .then((data) => data.map(parseUser))
} }
const fetchFollowRequests = ({ credentials }) => { const fetchFollowRequests = ({credentials}) => {
const url = FOLLOW_REQUESTS_URL const url = FOLLOW_REQUESTS_URL
return fetch(url, { headers: authHeaders(credentials) }) return fetch(url, { headers: authHeaders(credentials) })
.then((data) => data.json()) .then((data) => data.json())
} }
const fetchConversation = ({ id, credentials }) => { const fetchConversation = ({id, credentials}) => {
let urlContext = MASTODON_STATUS_CONTEXT_URL(id) let urlContext = MASTODON_STATUS_CONTEXT_URL(id)
return fetch(urlContext, { headers: authHeaders(credentials) }) return fetch(urlContext, { headers: authHeaders(credentials) })
.then((data) => { .then((data) => {
@ -333,13 +333,13 @@ const fetchConversation = ({ id, credentials }) => {
throw new Error('Error fetching timeline', data) throw new Error('Error fetching timeline', data)
}) })
.then((data) => data.json()) .then((data) => data.json())
.then(({ ancestors, descendants }) => ({ .then(({ancestors, descendants}) => ({
ancestors: ancestors.map(parseStatus), ancestors: ancestors.map(parseStatus),
descendants: descendants.map(parseStatus) descendants: descendants.map(parseStatus)
})) }))
} }
const fetchStatus = ({ id, credentials }) => { const fetchStatus = ({id, credentials}) => {
let url = MASTODON_STATUS_URL(id) let url = MASTODON_STATUS_URL(id)
return fetch(url, { headers: authHeaders(credentials) }) return fetch(url, { headers: authHeaders(credentials) })
.then((data) => { .then((data) => {
@ -352,7 +352,7 @@ const fetchStatus = ({ id, credentials }) => {
.then((data) => parseStatus(data)) .then((data) => parseStatus(data))
} }
const fetchTimeline = ({ timeline, credentials, since = false, until = false, userId = false, tag = false, withMuted = false }) => { const fetchTimeline = ({timeline, credentials, since = false, until = false, userId = false, tag = false, withMuted = false}) => {
const timelineUrls = { const timelineUrls = {
public: MASTODON_PUBLIC_TIMELINE, public: MASTODON_PUBLIC_TIMELINE,
friends: MASTODON_USER_HOME_TIMELINE_URL, friends: MASTODON_USER_HOME_TIMELINE_URL,
@ -487,7 +487,7 @@ const unretweet = ({ id, credentials }) => {
.then((data) => parseStatus(data)) .then((data) => parseStatus(data))
} }
const postStatus = ({ credentials, status, spoilerText, visibility, sensitive, mediaIds = [], inReplyToStatusId, contentType }) => { const postStatus = ({credentials, status, spoilerText, visibility, sensitive, mediaIds = [], inReplyToStatusId, contentType}) => {
const form = new FormData() const form = new FormData()
form.append('status', status) form.append('status', status)
@ -527,7 +527,7 @@ const deleteStatus = ({ id, credentials }) => {
}) })
} }
const uploadMedia = ({ formData, credentials }) => { const uploadMedia = ({formData, credentials}) => {
return fetch(MASTODON_MEDIA_UPLOAD_URL, { return fetch(MASTODON_MEDIA_UPLOAD_URL, {
body: formData, body: formData,
method: 'POST', method: 'POST',
@ -537,7 +537,7 @@ const uploadMedia = ({ formData, credentials }) => {
.then((data) => parseAttachment(data)) .then((data) => parseAttachment(data))
} }
const followImport = ({ params, credentials }) => { const followImport = ({params, credentials}) => {
return fetch(FOLLOW_IMPORT_URL, { return fetch(FOLLOW_IMPORT_URL, {
body: params, body: params,
method: 'POST', method: 'POST',
@ -546,7 +546,7 @@ const followImport = ({ params, credentials }) => {
.then((response) => response.ok) .then((response) => response.ok)
} }
const deleteAccount = ({ credentials, password }) => { const deleteAccount = ({credentials, password}) => {
const form = new FormData() const form = new FormData()
form.append('password', password) form.append('password', password)
@ -559,7 +559,7 @@ const deleteAccount = ({ credentials, password }) => {
.then((response) => response.json()) .then((response) => response.json())
} }
const changePassword = ({ credentials, password, newPassword, newPasswordConfirmation }) => { const changePassword = ({credentials, password, newPassword, newPasswordConfirmation}) => {
const form = new FormData() const form = new FormData()
form.append('password', password) form.append('password', password)
@ -574,31 +574,31 @@ const changePassword = ({ credentials, password, newPassword, newPasswordConfirm
.then((response) => response.json()) .then((response) => response.json())
} }
const fetchMutes = ({ credentials }) => { const fetchMutes = ({credentials}) => {
return promisedRequest(MASTODON_USER_MUTES_URL, { headers: authHeaders(credentials) }) return promisedRequest(MASTODON_USER_MUTES_URL, { headers: authHeaders(credentials) })
.then((users) => users.map(parseUser)) .then((users) => users.map(parseUser))
} }
const muteUser = ({ id, credentials }) => { const muteUser = ({id, credentials}) => {
return promisedRequest(MASTODON_MUTE_USER_URL(id), { return promisedRequest(MASTODON_MUTE_USER_URL(id), {
headers: authHeaders(credentials), headers: authHeaders(credentials),
method: 'POST' method: 'POST'
}) })
} }
const unmuteUser = ({ id, credentials }) => { const unmuteUser = ({id, credentials}) => {
return promisedRequest(MASTODON_UNMUTE_USER_URL(id), { return promisedRequest(MASTODON_UNMUTE_USER_URL(id), {
headers: authHeaders(credentials), headers: authHeaders(credentials),
method: 'POST' method: 'POST'
}) })
} }
const fetchBlocks = ({ credentials }) => { const fetchBlocks = ({credentials}) => {
return promisedRequest(MASTODON_USER_BLOCKS_URL, { headers: authHeaders(credentials) }) return promisedRequest(MASTODON_USER_BLOCKS_URL, { headers: authHeaders(credentials) })
.then((users) => users.map(parseUser)) .then((users) => users.map(parseUser))
} }
const fetchOAuthTokens = ({ credentials }) => { const fetchOAuthTokens = ({credentials}) => {
const url = '/api/oauth_tokens.json' const url = '/api/oauth_tokens.json'
return fetch(url, { return fetch(url, {
@ -611,7 +611,7 @@ const fetchOAuthTokens = ({ credentials }) => {
}) })
} }
const revokeOAuthToken = ({ id, credentials }) => { const revokeOAuthToken = ({id, credentials}) => {
const url = `/api/oauth_tokens/${id}` const url = `/api/oauth_tokens/${id}`
return fetch(url, { return fetch(url, {
@ -620,13 +620,13 @@ const revokeOAuthToken = ({ id, credentials }) => {
}) })
} }
const suggestions = ({ credentials }) => { const suggestions = ({credentials}) => {
return fetch(SUGGESTIONS_URL, { return fetch(SUGGESTIONS_URL, {
headers: authHeaders(credentials) headers: authHeaders(credentials)
}).then((data) => data.json()) }).then((data) => data.json())
} }
const markNotificationsAsSeen = ({ id, credentials }) => { const markNotificationsAsSeen = ({id, credentials}) => {
const body = new FormData() const body = new FormData()
body.append('latest_id', id) body.append('latest_id', id)

78
src/services/backend_interactor_service/backend_interactor_service.js
View file

@ -2,86 +2,86 @@ import apiService from '../api/api.service.js'
import timelineFetcherService from '../timeline_fetcher/timeline_fetcher.service.js' import timelineFetcherService from '../timeline_fetcher/timeline_fetcher.service.js'
const backendInteractorService = (credentials) => { const backendInteractorService = (credentials) => {
const fetchStatus = ({ id }) => { const fetchStatus = ({id}) => {
return apiService.fetchStatus({ id, credentials }) return apiService.fetchStatus({id, credentials})
} }
const fetchConversation = ({ id }) => { const fetchConversation = ({id}) => {
return apiService.fetchConversation({ id, credentials }) return apiService.fetchConversation({id, credentials})
} }
const fetchFriends = ({ id, maxId, sinceId, limit }) => { const fetchFriends = ({id, maxId, sinceId, limit}) => {
return apiService.fetchFriends({ id, maxId, sinceId, limit, credentials }) return apiService.fetchFriends({id, maxId, sinceId, limit, credentials})
} }
const exportFriends = ({ id }) => { const exportFriends = ({id}) => {
return apiService.exportFriends({ id, credentials }) return apiService.exportFriends({id, credentials})
} }
const fetchFollowers = ({ id, maxId, sinceId, limit }) => { const fetchFollowers = ({id, maxId, sinceId, limit}) => {
return apiService.fetchFollowers({ id, maxId, sinceId, limit, credentials }) return apiService.fetchFollowers({id, maxId, sinceId, limit, credentials})
} }
const fetchAllFollowing = ({ username }) => { const fetchAllFollowing = ({username}) => {
return apiService.fetchAllFollowing({ username, credentials }) return apiService.fetchAllFollowing({username, credentials})
} }
const fetchUser = ({ id }) => { const fetchUser = ({id}) => {
return apiService.fetchUser({ id, credentials }) return apiService.fetchUser({id, credentials})
} }
const fetchUserRelationship = ({ id }) => { const fetchUserRelationship = ({id}) => {
return apiService.fetchUserRelationship({ id, credentials }) return apiService.fetchUserRelationship({id, credentials})
} }
const followUser = (id) => { const followUser = (id) => {
return apiService.followUser({ credentials, id }) return apiService.followUser({credentials, id})
} }
const unfollowUser = (id) => { const unfollowUser = (id) => {
return apiService.unfollowUser({ credentials, id }) return apiService.unfollowUser({credentials, id})
} }
const blockUser = (id) => { const blockUser = (id) => {
return apiService.blockUser({ credentials, id }) return apiService.blockUser({credentials, id})
} }
const unblockUser = (id) => { const unblockUser = (id) => {
return apiService.unblockUser({ credentials, id }) return apiService.unblockUser({credentials, id})
} }
const approveUser = (id) => { const approveUser = (id) => {
return apiService.approveUser({ credentials, id }) return apiService.approveUser({credentials, id})
} }
const denyUser = (id) => { const denyUser = (id) => {
return apiService.denyUser({ credentials, id }) return apiService.denyUser({credentials, id})
} }
const startFetching = ({ timeline, store, userId = false, tag }) => { const startFetching = ({timeline, store, userId = false, tag}) => {
return timelineFetcherService.startFetching({ timeline, store, credentials, userId, tag }) return timelineFetcherService.startFetching({timeline, store, credentials, userId, tag})
} }
const fetchMutes = () => apiService.fetchMutes({ credentials }) const fetchMutes = () => apiService.fetchMutes({credentials})
const muteUser = (id) => apiService.muteUser({ credentials, id }) const muteUser = (id) => apiService.muteUser({credentials, id})
const unmuteUser = (id) => apiService.unmuteUser({ credentials, id }) const unmuteUser = (id) => apiService.unmuteUser({credentials, id})
const fetchBlocks = () => apiService.fetchBlocks({ credentials }) const fetchBlocks = () => apiService.fetchBlocks({credentials})
const fetchFollowRequests = () => apiService.fetchFollowRequests({ credentials }) const fetchFollowRequests = () => apiService.fetchFollowRequests({credentials})
const fetchOAuthTokens = () => apiService.fetchOAuthTokens({ credentials }) const fetchOAuthTokens = () => apiService.fetchOAuthTokens({credentials})
const revokeOAuthToken = (id) => apiService.revokeOAuthToken({ id, credentials }) const revokeOAuthToken = (id) => apiService.revokeOAuthToken({id, credentials})
const getCaptcha = () => apiService.getCaptcha() const getCaptcha = () => apiService.getCaptcha()
const register = (params) => apiService.register(params) const register = (params) => apiService.register(params)
const updateAvatar = ({ params }) => apiService.updateAvatar({ credentials, params }) const updateAvatar = ({params}) => apiService.updateAvatar({credentials, params})
const updateBg = ({ params }) => apiService.updateBg({ credentials, params }) const updateBg = ({params}) => apiService.updateBg({credentials, params})
const updateBanner = ({ params }) => apiService.updateBanner({ credentials, params }) const updateBanner = ({params}) => apiService.updateBanner({credentials, params})
const updateProfile = ({ params }) => apiService.updateProfile({ credentials, params }) const updateProfile = ({params}) => apiService.updateProfile({credentials, params})
const externalProfile = (profileUrl) => apiService.externalProfile({ profileUrl, credentials }) const externalProfile = (profileUrl) => apiService.externalProfile({profileUrl, credentials})
const followImport = ({ params }) => apiService.followImport({ params, credentials }) const followImport = ({params}) => apiService.followImport({params, credentials})
const deleteAccount = ({ password }) => apiService.deleteAccount({ credentials, password }) const deleteAccount = ({password}) => apiService.deleteAccount({credentials, password})
const changePassword = ({ password, newPassword, newPasswordConfirmation }) => apiService.changePassword({ credentials, password, newPassword, newPasswordConfirmation }) const changePassword = ({password, newPassword, newPasswordConfirmation}) => apiService.changePassword({credentials, password, newPassword, newPasswordConfirmation})
const backendInteractorServiceInstance = { const backendInteractorServiceInstance = {
fetchStatus, fetchStatus,

2
src/services/color_convert/color_convert.js
View file

@ -59,7 +59,7 @@ const srgbToLinear = (srgb) => {
* @returns {Number} relative luminance * @returns {Number} relative luminance
*/ */
const relativeLuminance = (srgb) => { const relativeLuminance = (srgb) => {
const { r, g, b } = srgbToLinear(srgb) const {r, g, b} = srgbToLinear(srgb)
return 0.2126 * r + 0.7152 * g + 0.0722 * b return 0.2126 * r + 0.7152 * g + 0.0722 * b
} }

2
src/services/completion/completion.js
View file

@ -8,7 +8,7 @@ export const wordAtPosition = (str, pos) => {
const words = splitIntoWords(str) const words = splitIntoWords(str)
const wordsWithPosition = addPositionToWords(words) const wordsWithPosition = addPositionToWords(words)
return find(wordsWithPosition, ({ start, end }) => start <= pos && end > pos) return find(wordsWithPosition, ({start, end}) => start <= pos && end > pos)
} }
export const addPositionToWords = (words) => { export const addPositionToWords = (words) => {

Some files were not shown because too many files have changed in this diff Show more