diff --git a/.eslintrc.js b/.eslintrc.js
index 7d090208..3c48baa8 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -21,26 +21,6 @@ module.exports = {
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
- // Webpack 4 update commit, most of these probably should be fixed and removed in a separate MR
- // A lot of errors come from .vue files that are now properly linted
- 'vue/valid-v-if': 1,
- 'vue/use-v-on-exact': 1,
- 'vue/no-parsing-error': 1,
- 'vue/require-v-for-key': 1,
- 'vue/valid-v-for': 1,
- 'vue/require-prop-types': 1,
- 'vue/no-use-v-if-with-v-for': 1,
- 'indent': 1,
- 'import/first': 1,
- 'object-curly-spacing': 1,
- 'prefer-promise-reject-errors': 1,
- 'eol-last': 1,
- 'no-return-await': 1,
- 'no-multi-spaces': 1,
- 'no-trailing-spaces': 1,
- 'no-unused-expressions': 1,
- 'no-mixed-operators': 1,
- 'camelcase': 1,
- 'no-multiple-empty-lines': 1
+ 'vue/require-prop-types': 0
}
}
diff --git a/src/App.vue b/src/App.vue
index 769e075d..758c9fce 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,53 +1,111 @@
<template>
- <div id="app" v-bind:style="bgAppStyle">
- <div class="app-bg-wrapper" v-bind:style="bgStyle"></div>
+ <div
+ id="app"
+ :style="bgAppStyle"
+ >
+ <div
+ class="app-bg-wrapper"
+ :style="bgStyle"
+ />
<MobileNav v-if="isMobileLayout" />
- <nav v-else class='nav-bar container' @click="scrollToTop()" id="nav">
- <div class='logo' :style='logoBgStyle'>
- <div class='mask' :style='logoMaskStyle'></div>
- <img :src='logo' :style='logoStyle'>
+ <nav
+ v-else
+ id="nav"
+ class="nav-bar container"
+ @click="scrollToTop()"
+ >
+ <div
+ class="logo"
+ :style="logoBgStyle"
+ >
+ <div
+ class="mask"
+ :style="logoMaskStyle"
+ />
+ <img
+ :src="logo"
+ :style="logoStyle"
+ >
</div>
- <div class='inner-nav'>
- <div class='item'>
- <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
+ <div class="inner-nav">
+ <div class="item">
+ <router-link
+ class="site-name"
+ :to="{ name: 'root' }"
+ active-class="home"
+ >
+ {{ sitename }}
+ </router-link>
</div>
- <div class='item right'>
- <user-finder class="button-icon nav-icon mobile-hidden" @toggled="onFinderToggled"></user-finder>
- <router-link class="mobile-hidden" :to="{ name: 'settings'}"><i class="button-icon icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link>
- <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>
+ <div class="item right">
+ <user-finder
+ class="button-icon nav-icon mobile-hidden"
+ @toggled="onFinderToggled"
+ />
+ <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>
</nav>
- <div class="container" id="content">
+ <div
+ id="content"
+ class="container"
+ >
<div class="sidebar-flexer mobile-hidden">
<div class="sidebar-bounds">
<div class="sidebar-scroller">
<div class="sidebar">
- <user-panel></user-panel>
+ <user-panel />
<div v-if="!isMobileLayout">
- <nav-panel></nav-panel>
- <instance-specific-panel v-if="showInstanceSpecificPanel"></instance-specific-panel>
- <features-panel v-if="!currentUser && showFeaturesPanel"></features-panel>
- <who-to-follow-panel v-if="currentUser && suggestionsEnabled"></who-to-follow-panel>
- <notifications v-if="currentUser"></notifications>
+ <nav-panel />
+ <instance-specific-panel v-if="showInstanceSpecificPanel" />
+ <features-panel v-if="!currentUser && showFeaturesPanel" />
+ <who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
+ <notifications v-if="currentUser" />
</div>
</div>
</div>
</div>
</div>
<div class="main">
- <div v-if="!currentUser" class="login-hint panel panel-default">
- <router-link :to="{ name: 'login' }" class="panel-body">
+ <div
+ v-if="!currentUser"
+ class="login-hint panel panel-default"
+ >
+ <router-link
+ :to="{ name: 'login' }"
+ class="panel-body"
+ >
{{ $t("login.hint") }}
</router-link>
</div>
<transition name="fade">
- <router-view></router-view>
+ <router-view />
</transition>
</div>
- <media-modal></media-modal>
+ <media-modal />
</div>
- <chat-panel :floating="true" v-if="currentUser && chat" class="floating-chat mobile-hidden"></chat-panel>
+ <chat-panel
+ v-if="currentUser && chat"
+ :floating="true"
+ class="floating-chat mobile-hidden"
+ />
<UserReportingModal />
<portal-target name="modal" />
</div>
diff --git a/src/boot/routes.js b/src/boot/routes.js
index 055a0aea..ca4a6a3e 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -24,8 +24,8 @@ export default (store) => {
path: '/',
redirect: _to => {
return (store.state.users.currentUser
- ? store.state.instance.redirectRootLogin
- : store.state.instance.redirectRootNoLogin) || '/main/all'
+ ? store.state.instance.redirectRootLogin
+ : store.state.instance.redirectRootNoLogin) || '/main/all'
}
},
{ name: 'public-external-timeline', path: '/main/all', component: PublicAndExternalTimeline },
diff --git a/src/components/about/about.vue b/src/components/about/about.vue
index 13dec87c..62ae16ea 100644
--- a/src/components/about/about.vue
+++ b/src/components/about/about.vue
@@ -1,8 +1,8 @@
<template>
<div class="sidebar">
- <instance-specific-panel></instance-specific-panel>
- <features-panel v-if="showFeaturesPanel"></features-panel>
- <terms-of-service-panel></terms-of-service-panel>
+ <instance-specific-panel />
+ <features-panel v-if="showFeaturesPanel" />
+ <terms-of-service-panel />
</div>
</template>
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 3b7f08dc..e93921fe 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -51,7 +51,7 @@ const Attachment = {
}
},
methods: {
- linkClicked ({target}) {
+ linkClicked ({ target }) {
if (target.tagName === 'A') {
window.open(target.href, '_blank')
}
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index fc9cc7a2..108dc36e 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -1,54 +1,106 @@
<template>
- <div v-if="usePlaceHolder" @click="openModal">
- <a class="placeholder"
+ <div
+ v-if="usePlaceHolder"
+ @click="openModal"
+ >
+ <a
v-if="type !== 'html'"
- target="_blank" :href="attachment.url"
+ class="placeholder"
+ target="_blank"
+ :href="attachment.url"
>
- [{{nsfw ? "NSFW/" : ""}}{{type.toUpperCase()}}]
+ [{{ nsfw ? "NSFW/" : "" }}{{ type.toUpperCase() }}]
</a>
</div>
<div
- v-else class="attachment"
- :class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}"
+ v-else
v-show="!isEmpty"
+ class="attachment"
+ :class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}"
>
- <a class="image-attachment" v-if="hidden" :href="attachment.url" @click.prevent="toggleHidden">
- <img class="nsfw" :key="nsfwImage" :src="nsfwImage" :class="{'small': isSmall}"/>
- <i v-if="type === 'video'" class="play-icon icon-play-circled"></i>
+ <a
+ v-if="hidden"
+ class="image-attachment"
+ :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>
- <div class="hider" v-if="nsfw && hideNsfwLocal && !hidden">
- <a href="#" @click.prevent="toggleHidden">Hide</a>
+ <div
+ v-if="nsfw && hideNsfwLocal && !hidden"
+ class="hider"
+ >
+ <a
+ href="#"
+ @click.prevent="toggleHidden"
+ >Hide</a>
</div>
- <a v-if="type === 'image' && (!hidden || preloadImage)"
- @click="openModal"
+ <a
+ v-if="type === 'image' && (!hidden || preloadImage)"
class="image-attachment"
:class="{'hidden': hidden && preloadImage }"
- :href="attachment.url" target="_blank"
+ :href="attachment.url"
+ target="_blank"
:title="attachment.description"
+ @click="openModal"
>
- <StillImage :referrerpolicy="referrerpolicy" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/>
+ <StillImage
+ :referrerpolicy="referrerpolicy"
+ :mimetype="attachment.mimetype"
+ :src="attachment.large_thumb_url || attachment.url"
+ />
</a>
- <a class="video-container"
- @click="openModal"
+ <a
v-if="type === 'video' && !hidden"
+ class="video-container"
:class="{'small': isSmall}"
:href="allowPlay ? undefined : attachment.url"
+ @click="openModal"
>
- <VideoAttachment class="video" :attachment="attachment" :controls="allowPlay" />
- <i v-if="!allowPlay" class="play-icon icon-play-circled"></i>
+ <VideoAttachment
+ class="video"
+ :attachment="attachment"
+ :controls="allowPlay"
+ />
+ <i
+ v-if="!allowPlay"
+ class="play-icon icon-play-circled"
+ />
</a>
- <audio v-if="type === 'audio'" :src="attachment.url" controls></audio>
+ <audio
+ v-if="type === 'audio'"
+ :src="attachment.url"
+ controls
+ />
- <div @click.prevent="linkClicked" v-if="type === 'html' && attachment.oembed" class="oembed">
- <div v-if="attachment.thumb_url" class="image">
- <img :src="attachment.thumb_url"/>
+ <div
+ v-if="type === 'html' && attachment.oembed"
+ class="oembed"
+ @click.prevent="linkClicked"
+ >
+ <div
+ v-if="attachment.thumb_url"
+ class="image"
+ >
+ <img :src="attachment.thumb_url">
</div>
<div class="text">
- <h1><a :href="attachment.url">{{attachment.oembed.title}}</a></h1>
- <div v-html="attachment.oembed.oembedHTML"></div>
+ <!-- eslint-disable vue/no-v-html -->
+ <h1><a :href="attachment.url">{{ attachment.oembed.title }}</a></h1>
+ <div v-html="attachment.oembed.oembedHTML" />
+ <!-- eslint-enabled vue/no-v-html -->
</div>
</div>
</div>
diff --git a/src/components/autosuggest/autosuggest.js b/src/components/autosuggest/autosuggest.js
index d4efe912..f58f17bb 100644
--- a/src/components/autosuggest/autosuggest.js
+++ b/src/components/autosuggest/autosuggest.js
@@ -2,11 +2,11 @@ const debounceMilliseconds = 500
export default {
props: {
- query: { // function to query results and return a promise
+ query: { // function to query results and return a promise
type: Function,
required: true
},
- filter: { // function to filter results in real time
+ filter: { // function to filter results in real time
type: Function
},
placeholder: {
diff --git a/src/components/autosuggest/autosuggest.vue b/src/components/autosuggest/autosuggest.vue
index 91657a2d..1f86e996 100644
--- a/src/components/autosuggest/autosuggest.vue
+++ b/src/components/autosuggest/autosuggest.vue
@@ -1,8 +1,22 @@
<template>
- <div class="autosuggest" v-click-outside="onClickOutside">
- <input v-model="term" :placeholder="placeholder" @click="onInputClick" class="autosuggest-input" />
- <div class="autosuggest-results" v-if="resultsVisible && filtered.length > 0">
- <slot v-for="item in filtered" :item="item" />
+ <div
+ v-click-outside="onClickOutside"
+ class="autosuggest"
+ >
+ <input
+ v-model="term"
+ :placeholder="placeholder"
+ class="autosuggest-input"
+ @click="onInputClick"
+ >
+ <div
+ v-if="resultsVisible && filtered.length > 0"
+ class="autosuggest-results"
+ >
+ <slot
+ v-for="item in filtered"
+ :item="item"
+ />
</div>
</div>
</template>
diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
index 343ef529..e1b6e971 100644
--- a/src/components/avatar_list/avatar_list.vue
+++ b/src/components/avatar_list/avatar_list.vue
@@ -1,12 +1,15 @@
<template>
<div class="avatars">
<router-link
- :to="userProfileLink(user)"
- class="avatars-item"
v-for="user in slicedUsers"
:key="user.id"
+ :to="userProfileLink(user)"
+ class="avatars-item"
>
- <UserAvatar :user="user" class="avatar-small" />
+ <UserAvatar
+ :user="user"
+ class="avatar-small"
+ />
</router-link>
</div>
</template>
diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index 634d62b3..568e9359 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -7,20 +7,45 @@
@click.prevent.native="toggleUserExpanded"
/>
</router-link>
- <div class="basic-user-card-expanded-content" v-if="userExpanded">
- <UserCard :user="user" :rounded="true" :bordered="true"/>
+ <div
+ v-if="userExpanded"
+ class="basic-user-card-expanded-content"
+ >
+ <UserCard
+ :user="user"
+ :rounded="true"
+ :bordered="true"
+ />
</div>
- <div class="basic-user-card-collapsed-content" v-else>
- <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>
- <span v-else class="basic-user-card-user-name-value">{{ user.name }}</span>
+ <div
+ v-else
+ class="basic-user-card-collapsed-content"
+ >
+ <div
+ :title="user.name"
+ class="basic-user-card-user-name"
+ >
+ <!-- eslint-disable vue/no-v-html -->
+ <span
+ v-if="user.name_html"
+ class="basic-user-card-user-name-value"
+ v-html="user.name_html"
+ />
+ <!-- eslint-enable vue/no-v-html -->
+ <span
+ v-else
+ class="basic-user-card-user-name-value"
+ >{{ user.name }}</span>
</div>
<div>
- <router-link class="basic-user-card-screen-name" :to="userProfileLink(user)">
- @{{user.screen_name}}
+ <router-link
+ class="basic-user-card-screen-name"
+ :to="userProfileLink(user)"
+ >
+ @{{ user.screen_name }}
</router-link>
</div>
- <slot></slot>
+ <slot />
</div>
</div>
</template>
diff --git a/src/components/block_card/block_card.vue b/src/components/block_card/block_card.vue
index 8eb56e25..5b00b738 100644
--- a/src/components/block_card/block_card.vue
+++ b/src/components/block_card/block_card.vue
@@ -1,7 +1,12 @@
<template>
<basic-user-card :user="user">
<div class="block-card-content-container">
- <button class="btn btn-default" @click="unblockUser" :disabled="progress" v-if="blocked">
+ <button
+ v-if="blocked"
+ class="btn btn-default"
+ :disabled="progress"
+ @click="unblockUser"
+ >
<template v-if="progress">
{{ $t('user_card.unblock_progress') }}
</template>
@@ -9,7 +14,12 @@
{{ $t('user_card.unblock') }}
</template>
</button>
- <button class="btn btn-default" @click="blockUser" :disabled="progress" v-else>
+ <button
+ v-else
+ class="btn btn-default"
+ :disabled="progress"
+ @click="blockUser"
+ >
<template v-if="progress">
{{ $t('user_card.block_progress') }}
</template>
diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js
index bbc9b49f..f2e3adf0 100644
--- a/src/components/chat_panel/chat_panel.js
+++ b/src/components/chat_panel/chat_panel.js
@@ -16,7 +16,7 @@ const chatPanel = {
},
methods: {
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 = ''
},
togglePanel () {
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index b37469ac..3677722f 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -1,41 +1,70 @@
<template>
- <div class="chat-panel" v-if="!this.collapsed || !this.floating">
+ <div
+ v-if="!collapsed || !floating"
+ class="chat-panel"
+ >
<div class="panel panel-default">
- <div class="panel-heading timeline-heading" :class="{ 'chat-heading': floating }" @click.stop.prevent="togglePanel">
+ <div
+ class="panel-heading timeline-heading"
+ :class="{ 'chat-heading': floating }"
+ @click.stop.prevent="togglePanel"
+ >
<div class="title">
- <span>{{$t('chat.title')}}</span>
- <i class="icon-cancel" v-if="floating"></i>
+ <span>{{ $t('chat.title') }}</span>
+ <i
+ v-if="floating"
+ class="icon-cancel"
+ />
</div>
</div>
- <div class="chat-window" v-chat-scroll>
- <div class="chat-message" v-for="message in messages" :key="message.id">
+ <div
+ v-chat-scroll
+ class="chat-window"
+ >
+ <div
+ v-for="message in messages"
+ :key="message.id"
+ class="chat-message"
+ >
<span class="chat-avatar">
- <img :src="message.author.avatar" />
+ <img :src="message.author.avatar">
</span>
<div class="chat-content">
<router-link
class="chat-name"
- :to="userProfileLink(message.author)">
- {{message.author.username}}
+ :to="userProfileLink(message.author)"
+ >
+ {{ message.author.username }}
</router-link>
<br>
<span class="chat-text">
- {{message.text}}
+ {{ message.text }}
</span>
</div>
</div>
</div>
<div class="chat-input">
- <textarea @keyup.enter="submit(currentMessage)" v-model="currentMessage" class="chat-input-textarea" rows="1"></textarea>
+ <textarea
+ v-model="currentMessage"
+ class="chat-input-textarea"
+ rows="1"
+ @keyup.enter="submit(currentMessage)"
+ />
</div>
</div>
</div>
- <div v-else class="chat-panel">
+ <div
+ v-else
+ class="chat-panel"
+ >
<div class="panel panel-default">
- <div class="panel-heading stub timeline-heading chat-heading" @click.stop.prevent="togglePanel">
+ <div
+ class="panel-heading stub timeline-heading chat-heading"
+ @click.stop.prevent="togglePanel"
+ >
<div class="title">
- <i class="icon-comment-empty"></i>
- {{$t('chat.title')}}
+ <i class="icon-comment-empty" />
+ {{ $t('chat.title') }}
</div>
</div>
</div>
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 4152b049..2b822ec3 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -1,8 +1,13 @@
<template>
<label class="checkbox">
- <input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)" :indeterminate.prop="indeterminate">
+ <input
+ type="checkbox"
+ :checked="checked"
+ :indeterminate.prop="indeterminate"
+ @change="$emit('change', $event.target.checked)"
+ >
<i class="checkbox-indicator" />
- <span v-if="!!$slots.default"><slot></slot></span>
+ <span v-if="!!$slots.default"><slot /></span>
</label>
</template>
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index 34eec248..9db62e81 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -1,33 +1,44 @@
<template>
-<div class="color-control style-control" :class="{ disabled: !present || disabled }">
- <label :for="name" class="label">
- {{label}}
- </label>
- <input
- v-if="typeof fallback !== 'undefined'"
- class="opt exlcude-disabled"
- :id="name + '-o'"
- type="checkbox"
- :checked="present"
- @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)">
- <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
- <input
- :id="name"
- class="color-input"
- type="color"
- :value="value || fallback"
- :disabled="!present || disabled"
- @input="$emit('input', $event.target.value)"
+ <div
+ class="color-control style-control"
+ :class="{ disabled: !present || disabled }"
+ >
+ <label
+ :for="name"
+ class="label"
>
- <input
- :id="name + '-t'"
- class="text-input"
- type="text"
- :value="value || fallback"
- :disabled="!present || disabled"
- @input="$emit('input', $event.target.value)"
+ {{ label }}
+ </label>
+ <input
+ v-if="typeof fallback !== 'undefined'"
+ :id="name + '-o'"
+ class="opt exlcude-disabled"
+ type="checkbox"
+ :checked="present"
+ @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
>
-</div>
+ <label
+ v-if="typeof fallback !== 'undefined'"
+ class="opt-l"
+ :for="name + '-o'"
+ />
+ <input
+ :id="name"
+ class="color-input"
+ type="color"
+ :value="value || fallback"
+ :disabled="!present || disabled"
+ @input="$emit('input', $event.target.value)"
+ >
+ <input
+ :id="name + '-t'"
+ class="text-input"
+ type="text"
+ :value="value || fallback"
+ :disabled="!present || disabled"
+ @input="$emit('input', $event.target.value)"
+ >
+ </div>
</template>
<script>
diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue
index bd971d00..15a450a2 100644
--- a/src/components/contrast_ratio/contrast_ratio.vue
+++ b/src/components/contrast_ratio/contrast_ratio.vue
@@ -1,28 +1,38 @@
<template>
-<span v-if="contrast" class="contrast-ratio">
- <span :title="hint" class="rating">
- <span v-if="contrast.aaa">
- <i class="icon-thumbs-up-alt"/>
+ <span
+ v-if="contrast"
+ class="contrast-ratio"
+ >
+ <span
+ :title="hint"
+ class="rating"
+ >
+ <span v-if="contrast.aaa">
+ <i class="icon-thumbs-up-alt" />
+ </span>
+ <span v-if="!contrast.aaa && contrast.aa">
+ <i class="icon-adjust" />
+ </span>
+ <span v-if="!contrast.aaa && !contrast.aa">
+ <i class="icon-attention" />
+ </span>
</span>
- <span v-if="!contrast.aaa && contrast.aa">
- <i class="icon-adjust"/>
- </span>
- <span v-if="!contrast.aaa && !contrast.aa">
- <i class="icon-attention"/>
+ <span
+ v-if="contrast && large"
+ class="rating"
+ :title="hint_18pt"
+ >
+ <span v-if="contrast.laaa">
+ <i class="icon-thumbs-up-alt" />
+ </span>
+ <span v-if="!contrast.laaa && contrast.laa">
+ <i class="icon-adjust" />
+ </span>
+ <span v-if="!contrast.laaa && !contrast.laa">
+ <i class="icon-attention" />
+ </span>
</span>
</span>
- <span class="rating" v-if="contrast && large" :title="hint_18pt">
- <span v-if="contrast.laaa">
- <i class="icon-thumbs-up-alt"/>
- </span>
- <span v-if="!contrast.laaa && contrast.laa">
- <i class="icon-adjust"/>
- </span>
- <span v-if="!contrast.laaa && !contrast.laa">
- <i class="icon-attention"/>
- </span>
- </span>
-</span>
</template>
<script>
diff --git a/src/components/conversation-page/conversation-page.vue b/src/components/conversation-page/conversation-page.vue
index 9e322cf5..532f785c 100644
--- a/src/components/conversation-page/conversation-page.vue
+++ b/src/components/conversation-page/conversation-page.vue
@@ -1,9 +1,9 @@
<template>
<conversation
:collapsable="false"
- isPage="true"
+ is-page="true"
:statusoid="statusoid"
- ></conversation>
+ />
</template>
<script src="./conversation-page.js"></script>
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 8ae89421..a2b3aeab 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -86,7 +86,8 @@ const conversation = {
},
replies () {
let i = 1
- return reduce(this.conversation, (result, {id, in_reply_to_status_id}) => {
+ // eslint-disable-next-line camelcase
+ return reduce(this.conversation, (result, { id, in_reply_to_status_id }) => {
/* eslint-disable camelcase */
const irid = in_reply_to_status_id
/* eslint-enable camelcase */
@@ -119,15 +120,15 @@ const conversation = {
methods: {
fetchConversation () {
if (this.status) {
- this.$store.state.api.backendInteractor.fetchConversation({id: this.status.id})
- .then(({ancestors, descendants}) => {
+ this.$store.state.api.backendInteractor.fetchConversation({ id: this.status.id })
+ .then(({ ancestors, descendants }) => {
this.$store.dispatch('addNewStatuses', { statuses: ancestors })
this.$store.dispatch('addNewStatuses', { statuses: descendants })
})
.then(() => this.setHighlight(this.statusId))
} else {
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(() => this.fetchConversation())
}
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 0b4998c3..5a900607 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -1,25 +1,34 @@
<template>
- <div class="timeline panel-default" :class="[isExpanded ? 'panel' : 'panel-disabled']">
- <div v-if="isExpanded" class="panel-heading conversation-heading">
+ <div
+ class="timeline panel-default"
+ :class="[isExpanded ? 'panel' : 'panel-disabled']"
+ >
+ <div
+ v-if="isExpanded"
+ class="panel-heading conversation-heading"
+ >
<span class="title"> {{ $t('timeline.conversation') }} </span>
<span v-if="collapsable">
- <a href="#" @click.prevent="toggleExpanded">{{ $t('timeline.collapse') }}</a>
+ <a
+ href="#"
+ @click.prevent="toggleExpanded"
+ >{{ $t('timeline.collapse') }}</a>
</span>
</div>
<status
v-for="status in conversation"
- @goto="setHighlight"
- @toggleExpanded="toggleExpanded"
:key="status.id"
- :inlineExpanded="collapsable && isExpanded"
+ :inline-expanded="collapsable && isExpanded"
:statusoid="status"
- :expandable='!isExpanded'
- :showPinned="showPinned"
+ :expandable="!isExpanded"
+ :show-pinned="showPinned"
:focused="focused(status.id)"
- :inConversation="isExpanded"
+ :in-conversation="isExpanded"
:highlight="getHighlight()"
:replies="getReplies(status.id)"
class="status-fadein panel-body"
+ @goto="setHighlight"
+ @toggleExpanded="toggleExpanded"
/>
</div>
</template>
diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index 3da543de..55d7a7d2 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@@ -1,16 +1,22 @@
<template>
- <span v-bind:class="{ 'dark-overlay': darkOverlay }" @click.self.stop='onCancel()'>
- <div class="dialog-modal panel panel-default" @click.stop=''>
+ <span
+ :class="{ 'dark-overlay': darkOverlay }"
+ @click.self.stop="onCancel()"
+ >
+ <div
+ class="dialog-modal panel panel-default"
+ @click.stop=""
+ >
<div class="panel-heading dialog-modal-heading">
<div class="title">
- <slot name="header"></slot>
+ <slot name="header" />
</div>
</div>
<div class="dialog-modal-content">
- <slot name="default"></slot>
+ <slot name="default" />
</div>
<div class="dialog-modal-footer user-interactions panel-footer">
- <slot name="footer"></slot>
+ <slot name="footer" />
</div>
</div>
</span>
diff --git a/src/components/dm_timeline/dm_timeline.vue b/src/components/dm_timeline/dm_timeline.vue
index f03da4d3..c4e4d070 100644
--- a/src/components/dm_timeline/dm_timeline.vue
+++ b/src/components/dm_timeline/dm_timeline.vue
@@ -1,5 +1,9 @@
<template>
- <Timeline :title="$t('nav.dms')" v-bind:timeline="timeline" v-bind:timeline-name="'dms'"/>
+ <Timeline
+ :title="$t('nav.dms')"
+ :timeline="timeline"
+ :timeline-name="'dms'"
+ />
</template>
<script src="./dm_timeline.js"></script>
diff --git a/src/components/emoji-input/emoji-input.js b/src/components/emoji-input/emoji-input.js
index b09dc628..fab64a69 100644
--- a/src/components/emoji-input/emoji-input.js
+++ b/src/components/emoji-input/emoji-input.js
@@ -53,7 +53,7 @@ const EmojiInput = {
required: true,
type: String
}
- },
+ },
data () {
return {
input: undefined,
diff --git a/src/components/emoji-input/emoji-input.vue b/src/components/emoji-input/emoji-input.vue
index b1f7afa5..48739ec8 100644
--- a/src/components/emoji-input/emoji-input.vue
+++ b/src/components/emoji-input/emoji-input.vue
@@ -1,27 +1,34 @@
<template>
-<div class="emoji-input">
- <slot></slot>
- <div ref="panel" class="autocomplete-panel" :class="{ hide: !showPopup }">
- <div class="autocomplete-panel-body">
- <div
- v-for="(suggestion, index) in suggestions"
- :key="index"
- @click.stop.prevent="onClick($event, suggestion)"
- class="autocomplete-item"
- :class="{ highlighted: suggestion.highlighted }"
+ <div class="emoji-input">
+ <slot />
+ <div
+ ref="panel"
+ class="autocomplete-panel"
+ :class="{ hide: !showPopup }"
+ >
+ <div class="autocomplete-panel-body">
+ <div
+ v-for="(suggestion, index) in suggestions"
+ :key="index"
+ class="autocomplete-item"
+ :class="{ highlighted: suggestion.highlighted }"
+ @click.stop.prevent="onClick($event, suggestion)"
>
- <span class="image">
- <img v-if="suggestion.img":src="suggestion.img" />
- <span v-else>{{suggestion.replacement}}</span>
- </span>
- <div class="label">
- <span class="displayText">{{suggestion.displayText}}</span>
- <span class="detailText">{{suggestion.detailText}}</span>
+ <span class="image">
+ <img
+ v-if="suggestion.img"
+ :src="suggestion.img"
+ >
+ <span v-else>{{ suggestion.replacement }}</span>
+ </span>
+ <div class="label">
+ <span class="displayText">{{ suggestion.displayText }}</span>
+ <span class="detailText">{{ suggestion.detailText }}</span>
+ </div>
</div>
</div>
</div>
</div>
-</div>
</template>
<script src="./emoji-input.js"></script>
@@ -103,7 +110,6 @@
}
}
-
input, textarea {
flex: 1 0 auto;
}
diff --git a/src/components/export_import/export_import.vue b/src/components/export_import/export_import.vue
index 451a2668..20c6f569 100644
--- a/src/components/export_import/export_import.vue
+++ b/src/components/export_import/export_import.vue
@@ -1,12 +1,27 @@
<template>
-<div class="import-export-container">
- <slot name="before"/>
- <button class="btn" @click="exportData">{{ exportLabel }}</button>
- <button class="btn" @click="importData">{{ importLabel }}</button>
- <slot name="afterButtons"/>
- <p v-if="importFailed" class="alert error">{{ importFailedText }}</p>
- <slot name="afterError"/>
-</div>
+ <div class="import-export-container">
+ <slot name="before" />
+ <button
+ class="btn"
+ @click="exportData"
+ >
+ {{ exportLabel }}
+ </button>
+ <button
+ class="btn"
+ @click="importData"
+ >
+ {{ importLabel }}
+ </button>
+ <slot name="afterButtons" />
+ <p
+ v-if="importFailed"
+ class="alert error"
+ >
+ {{ importFailedText }}
+ </p>
+ <slot name="afterError" />
+ </div>
</template>
<script>
@@ -49,7 +64,7 @@ export default {
if (event.target.files[0]) {
// eslint-disable-next-line no-undef
const reader = new FileReader()
- reader.onload = ({target}) => {
+ reader.onload = ({ target }) => {
try {
const parsed = JSON.parse(target.result)
const valid = this.validator(parsed)
diff --git a/src/components/exporter/exporter.vue b/src/components/exporter/exporter.vue
index f22e579e..f5126dc1 100644
--- a/src/components/exporter/exporter.vue
+++ b/src/components/exporter/exporter.vue
@@ -1,10 +1,16 @@
<template>
<div class="exporter">
<div v-if="processing">
- <i class="icon-spin4 animate-spin exporter-processing"></i>
- <span>{{processingMessage}}</span>
+ <i class="icon-spin4 animate-spin exporter-processing" />
+ <span>{{ processingMessage }}</span>
</div>
- <button class="btn btn-default" @click="process" v-else>{{exportButtonLabel}}</button>
+ <button
+ v-else
+ class="btn btn-default"
+ @click="process"
+ >
+ {{ exportButtonLabel }}
+ </button>
</div>
</template>
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index a761d313..8e24e9a5 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -1,9 +1,8 @@
<template>
<Popper
- trigger="click"
- @hide='showDropDown = false'
- append-to-body
v-if="enabled && showPopper"
+ trigger="click"
+ append-to-body
:options="{
placement: 'top',
modifiers: {
@@ -11,22 +10,42 @@
offset: { offset: '0, 5px' },
}
}"
+ @hide="showDropDown = false"
>
<div class="popper-wrapper">
<div class="dropdown-menu">
- <button class="dropdown-item dropdown-item-icon" @click.prevent="pinStatus" v-if="!status.pinned && canPin">
- <i class="icon-pin"></i><span>{{$t("status.pin")}}</span>
+ <button
+ v-if="!status.pinned && canPin"
+ class="dropdown-item dropdown-item-icon"
+ @click.prevent="pinStatus"
+ >
+ <i class="icon-pin" /><span>{{ $t("status.pin") }}</span>
</button>
- <button class="dropdown-item dropdown-item-icon" @click.prevent="unpinStatus" v-if="status.pinned && canPin">
- <i class="icon-pin"></i><span>{{$t("status.unpin")}}</span>
+ <button
+ v-if="status.pinned && canPin"
+ class="dropdown-item dropdown-item-icon"
+ @click.prevent="unpinStatus"
+ >
+ <i class="icon-pin" /><span>{{ $t("status.unpin") }}</span>
</button>
- <button class="dropdown-item dropdown-item-icon" @click.prevent="deleteStatus" v-if="canDelete">
- <i class="icon-cancel"></i><span>{{$t("status.delete")}}</span>
+ <button
+ v-if="canDelete"
+ class="dropdown-item dropdown-item-icon"
+ @click.prevent="deleteStatus"
+ >
+ <i class="icon-cancel" /><span>{{ $t("status.delete") }}</span>
</button>
</div>
</div>
- <div class="button-icon" slot="reference" @click="toggleMenu">
- <i class='icon-ellipsis' :class="{'icon-clicked': showDropDown}"></i>
+ <div
+ slot="reference"
+ class="button-icon"
+ @click="toggleMenu"
+ >
+ <i
+ class="icon-ellipsis"
+ :class="{'icon-clicked': showDropDown}"
+ />
</div>
</Popper>
</template>
diff --git a/src/components/favorite_button/favorite_button.js b/src/components/favorite_button/favorite_button.js
index a2b4cb65..a24eacbf 100644
--- a/src/components/favorite_button/favorite_button.js
+++ b/src/components/favorite_button/favorite_button.js
@@ -11,9 +11,9 @@ const FavoriteButton = {
methods: {
favorite () {
if (!this.status.favorited) {
- this.$store.dispatch('favorite', {id: this.status.id})
+ this.$store.dispatch('favorite', { id: this.status.id })
} else {
- this.$store.dispatch('unfavorite', {id: this.status.id})
+ this.$store.dispatch('unfavorite', { id: this.status.id })
}
this.animated = true
setTimeout(() => {
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 05ce6bd0..06ce9983 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -1,11 +1,20 @@
<template>
<div v-if="loggedIn">
- <i :class='classes' class='button-icon favorite-button fav-active' @click.prevent='favorite()' :title="$t('tool_tip.favorite')"/>
- <span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span>
+ <i
+ :class="classes"
+ 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 v-else>
- <i :class='classes' class='button-icon favorite-button' :title="$t('tool_tip.favorite')"/>
- <span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span>
+ <i
+ :class="classes"
+ class="button-icon favorite-button"
+ :title="$t('tool_tip.favorite')"
+ />
+ <span v-if="!hidePostStatsLocal && status.fave_num > 0">{{ status.fave_num }}</span>
</div>
</template>
diff --git a/src/components/features_panel/features_panel.vue b/src/components/features_panel/features_panel.vue
index 7a263e01..3e5939a6 100644
--- a/src/components/features_panel/features_panel.vue
+++ b/src/components/features_panel/features_panel.vue
@@ -3,17 +3,25 @@
<div class="panel panel-default base01-background">
<div class="panel-heading timeline-heading base02-background base04">
<div class="title">
- {{$t('features_panel.title')}}
+ {{ $t('features_panel.title') }}
</div>
</div>
<div class="panel-body features-panel">
<ul>
- <li v-if="chat">{{$t('features_panel.chat')}}</li>
- <li v-if="gopher">{{$t('features_panel.gopher')}}</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>
+ <li v-if="chat">
+ {{ $t('features_panel.chat') }}
+ </li>
+ <li v-if="gopher">
+ {{ $t('features_panel.gopher') }}
+ </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>
</div>
</div>
diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue
index 94e2836f..310fe843 100644
--- a/src/components/follow_card/follow_card.vue
+++ b/src/components/follow_card/follow_card.vue
@@ -1,11 +1,17 @@
<template>
<basic-user-card :user="user">
<div class="follow-card-content-container">
- <span class="faint" v-if="!noFollowsYou && user.follows_you">
+ <span
+ v-if="!noFollowsYou && user.follows_you"
+ class="faint"
+ >
{{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }}
</span>
<template v-if="!loggedIn">
- <div class="follow-card-follow-button" v-if="!user.following">
+ <div
+ v-if="!user.following"
+ class="follow-card-follow-button"
+ >
<RemoteFollow :user="user" />
</div>
</template>
@@ -13,9 +19,9 @@
<button
v-if="!user.following"
class="btn btn-default follow-card-follow-button"
- @click="followUser"
:disabled="inProgress"
:title="requestSent ? $t('user_card.follow_again') : ''"
+ @click="followUser"
>
<template v-if="inProgress">
{{ $t('user_card.follow_progress') }}
@@ -27,7 +33,12 @@
{{ $t('user_card.follow') }}
</template>
</button>
- <button v-else class="btn btn-default follow-card-follow-button pressed" @click="unfollowUser" :disabled="inProgress">
+ <button
+ v-else
+ class="btn btn-default follow-card-follow-button pressed"
+ :disabled="inProgress"
+ @click="unfollowUser"
+ >
<template v-if="inProgress">
{{ $t('user_card.follow_progress') }}
</template>
diff --git a/src/components/follow_request_card/follow_request_card.vue b/src/components/follow_request_card/follow_request_card.vue
index 4a3bbba4..b217b8ed 100644
--- a/src/components/follow_request_card/follow_request_card.vue
+++ b/src/components/follow_request_card/follow_request_card.vue
@@ -1,8 +1,18 @@
<template>
<basic-user-card :user="user">
<div class="follow-request-card-content-container">
- <button class="btn btn-default" @click="approveUser">{{ $t('user_card.approve') }}</button>
- <button class="btn btn-default" @click="denyUser">{{ $t('user_card.deny') }}</button>
+ <button
+ class="btn btn-default"
+ @click="approveUser"
+ >
+ {{ $t('user_card.approve') }}
+ </button>
+ <button
+ class="btn btn-default"
+ @click="denyUser"
+ >
+ {{ $t('user_card.deny') }}
+ </button>
</div>
</basic-user-card>
</template>
diff --git a/src/components/follow_requests/follow_requests.vue b/src/components/follow_requests/follow_requests.vue
index 36901fb4..5fa4cf39 100644
--- a/src/components/follow_requests/follow_requests.vue
+++ b/src/components/follow_requests/follow_requests.vue
@@ -1,10 +1,15 @@
<template>
<div class="settings panel panel-default">
<div class="panel-heading">
- {{$t('nav.friend_requests')}}
+ {{ $t('nav.friend_requests') }}
</div>
<div class="panel-body">
- <FollowRequestCard v-for="request in requests" :key="request.id" :user="request" class="list-item"/>
+ <FollowRequestCard
+ v-for="request in requests"
+ :key="request.id"
+ :user="request"
+ class="list-item"
+ />
</div>
</div>
</template>
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index ed36b280..61f0384b 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -1,35 +1,56 @@
<template>
-<div class="font-control style-control" :class="{ custom: isCustom }">
- <label :for="preset === 'custom' ? name : name + '-font-switcher'" class="label">
- {{label}}
- </label>
- <input
- v-if="typeof fallback !== 'undefined'"
- class="opt exlcude-disabled"
- type="checkbox"
- :id="name + '-o'"
- :checked="present"
- @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)">
- <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
- <label :for="name + '-font-switcher'" class="select" :disabled="!present">
- <select
+ <div
+ class="font-control style-control"
+ :class="{ custom: isCustom }"
+ >
+ <label
+ :for="preset === 'custom' ? name : name + '-font-switcher'"
+ class="label"
+ >
+ {{ label }}
+ </label>
+ <input
+ v-if="typeof fallback !== 'undefined'"
+ :id="name + '-o'"
+ class="opt exlcude-disabled"
+ type="checkbox"
+ :checked="present"
+ @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
+ >
+ <label
+ v-if="typeof fallback !== 'undefined'"
+ class="opt-l"
+ :for="name + '-o'"
+ />
+ <label
+ :for="name + '-font-switcher'"
+ class="select"
:disabled="!present"
- v-model="preset"
- class="font-switcher"
- :id="name + '-font-switcher'">
- <option v-for="option in availableOptions" :value="option">
- {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
- </option>
- </select>
- <i class="icon-down-open"/>
- </label>
- <input
- v-if="isCustom"
- class="custom-font"
- type="text"
- :id="name"
- v-model="family">
-</div>
+ >
+ <select
+ :id="name + '-font-switcher'"
+ v-model="preset"
+ :disabled="!present"
+ class="font-switcher"
+ >
+ <option
+ v-for="option in availableOptions"
+ :key="option"
+ :value="option"
+ >
+ {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
+ </option>
+ </select>
+ <i class="icon-down-open" />
+ </label>
+ <input
+ v-if="isCustom"
+ :id="name"
+ v-model="family"
+ class="custom-font"
+ type="text"
+ >
+ </div>
</template>
<script src="./font_control.js" ></script>
diff --git a/src/components/friends_timeline/friends_timeline.vue b/src/components/friends_timeline/friends_timeline.vue
index 66c0c058..01a56812 100644
--- a/src/components/friends_timeline/friends_timeline.vue
+++ b/src/components/friends_timeline/friends_timeline.vue
@@ -1,5 +1,9 @@
<template>
- <Timeline :title="$t('nav.timeline')" v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/>
+ <Timeline
+ :title="$t('nav.timeline')"
+ :timeline="timeline"
+ :timeline-name="'friends'"
+ />
</template>
<script src="./friends_timeline.js"></script>
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index f0433f10..6adfb76c 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -1,13 +1,22 @@
<template>
- <div ref="galleryContainer" style="width: 100%;">
- <div class="gallery-row" v-for="row in rows" :style="rowHeight(row.length)" :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }">
+ <div
+ ref="galleryContainer"
+ style="width: 100%;"
+ >
+ <div
+ v-for="(row, index) in rows"
+ :key="index"
+ class="gallery-row"
+ :style="rowHeight(row.length)"
+ :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }"
+ >
<attachment
v-for="attachment in row"
- :setMedia="setMedia"
+ :key="attachment.id"
+ :set-media="setMedia"
:nsfw="nsfw"
:attachment="attachment"
- :allowPlay="false"
- :key="attachment.id"
+ :allow-play="false"
/>
</div>
</div>
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index d2b86e9e..4e1b5927 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -2,20 +2,57 @@
<div class="image-cropper">
<div v-if="dataUrl">
<div class="image-cropper-image-container">
- <img ref="img" :src="dataUrl" alt="" @load.stop="createCropper" />
+ <img
+ ref="img"
+ :src="dataUrl"
+ alt=""
+ @load.stop="createCropper"
+ >
</div>
<div class="image-cropper-buttons-wrapper">
- <button class="btn" type="button" :disabled="submitting" @click="submit()" v-text="saveText"></button>
- <button class="btn" type="button" :disabled="submitting" @click="destroy" v-text="cancelText"></button>
- <button class="btn" type="button" :disabled="submitting" @click="submit(false)" v-text="saveWithoutCroppingText"></button>
- <i class="icon-spin4 animate-spin" v-if="submitting"></i>
+ <button
+ class="btn"
+ type="button"
+ :disabled="submitting"
+ @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="submit(false)"
+ v-text="saveWithoutCroppingText"
+ />
+ <i
+ v-if="submitting"
+ class="icon-spin4 animate-spin"
+ />
</div>
- <div class="alert error" v-if="submitError">
- {{submitErrorMsg}}
- <i class="button-icon icon-cancel" @click="clearError"></i>
+ <div
+ v-if="submitError"
+ class="alert error"
+ >
+ {{ submitErrorMsg }}
+ <i
+ class="button-icon icon-cancel"
+ @click="clearError"
+ />
</div>
</div>
- <input ref="input" type="file" class="image-cropper-img-input" :accept="mimes">
+ <input
+ ref="input"
+ type="file"
+ class="image-cropper-img-input"
+ :accept="mimes"
+ >
</div>
</template>
diff --git a/src/components/importer/importer.vue b/src/components/importer/importer.vue
index 0c5aa93d..ed923d59 100644
--- a/src/components/importer/importer.vue
+++ b/src/components/importer/importer.vue
@@ -1,17 +1,36 @@
<template>
<div class="importer">
<form>
- <input type="file" ref="input" v-on:change="change" />
+ <input
+ ref="input"
+ type="file"
+ @change="change"
+ >
</form>
- <i class="icon-spin4 animate-spin importer-uploading" v-if="submitting"></i>
- <button class="btn btn-default" v-else @click="submit">{{submitButtonLabel}}</button>
+ <i
+ v-if="submitting"
+ class="icon-spin4 animate-spin importer-uploading"
+ />
+ <button
+ v-else
+ class="btn btn-default"
+ @click="submit"
+ >
+ {{ submitButtonLabel }}
+ </button>
<div v-if="success">
- <i class="icon-cross" @click="dismiss"></i>
- <p>{{successMessage}}</p>
+ <i
+ class="icon-cross"
+ @click="dismiss"
+ />
+ <p>{{ successMessage }}</p>
</div>
<div v-else-if="error">
- <i class="icon-cross" @click="dismiss"></i>
- <p>{{errorMessage}}</p>
+ <i
+ class="icon-cross"
+ @click="dismiss"
+ />
+ <p>{{ errorMessage }}</p>
</div>
</div>
</template>
diff --git a/src/components/instance_specific_panel/instance_specific_panel.vue b/src/components/instance_specific_panel/instance_specific_panel.vue
index a7b74667..a7cf6b48 100644
--- a/src/components/instance_specific_panel/instance_specific_panel.vue
+++ b/src/components/instance_specific_panel/instance_specific_panel.vue
@@ -1,9 +1,13 @@
<template>
- <div v-if="show" class="instance-specific-panel">
+ <div
+ v-if="show"
+ class="instance-specific-panel"
+ >
<div class="panel panel-default">
<div class="panel-body">
- <div v-html="instanceSpecificPanelContent">
- </div>
+ <!-- eslint-disable vue/no-v-html -->
+ <div v-html="instanceSpecificPanelContent" />
+ <!-- eslint-enable vue/no-v-html -->
</div>
</div>
</div>
diff --git a/src/components/interactions/interactions.vue b/src/components/interactions/interactions.vue
index 38b2670d..d71c99d5 100644
--- a/src/components/interactions/interactions.vue
+++ b/src/components/interactions/interactions.vue
@@ -7,18 +7,30 @@
</div>
<tab-switcher
ref="tabSwitcher"
- :onSwitch="onModeSwitch"
- >
- <span data-tab-dummy data-filter="mentions" :label="$t('nav.mentions')"/>
- <span data-tab-dummy data-filter="likes+repeats" :label="$t('interactions.favs_repeats')"/>
- <span data-tab-dummy data-filter="follows" :label="$t('interactions.follows')"/>
+ :on-switch="onModeSwitch"
+ >
+ <span
+ data-tab-dummy
+ data-filter="mentions"
+ :label="$t('nav.mentions')"
+ />
+ <span
+ data-tab-dummy
+ data-filter="likes+repeats"
+ :label="$t('interactions.favs_repeats')"
+ />
+ <span
+ data-tab-dummy
+ data-filter="follows"
+ :label="$t('interactions.follows')"
+ />
</tab-switcher>
<Notifications
ref="notifications"
- :noHeading="true"
- :minimalMode="true"
- :filterMode="filterMode"
- />
+ :no-heading="true"
+ :minimal-mode="true"
+ :filter-mode="filterMode"
+ />
</div>
</template>
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 9f7877c6..83df9a0b 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -3,50 +3,60 @@
<label for="interface-language-switcher">
{{ $t('settings.interfaceLanguage') }}
</label>
- <label for="interface-language-switcher" class='select'>
- <select id="interface-language-switcher" v-model="language">
- <option v-for="(langCode, i) in languageCodes" :value="langCode">
+ <label
+ for="interface-language-switcher"
+ class="select"
+ >
+ <select
+ id="interface-language-switcher"
+ v-model="language"
+ >
+ <option
+ v-for="(langCode, i) in languageCodes"
+ :key="langCode"
+ :value="langCode"
+ >
{{ languageNames[i] }}
</option>
</select>
- <i class="icon-down-open"/>
+ <i class="icon-down-open" />
</label>
</div>
</template>
<script>
- import languagesObject from '../../i18n/messages'
- import ISO6391 from 'iso-639-1'
- import _ from 'lodash'
+import languagesObject from '../../i18n/messages'
+import ISO6391 from 'iso-639-1'
+import _ from 'lodash'
- export default {
- computed: {
- languageCodes () {
- return Object.keys(languagesObject)
- },
-
- languageNames () {
- return _.map(this.languageCodes, this.getLanguageName)
- },
-
- language: {
- get: function () { return this.$store.state.config.interfaceLanguage },
- set: function (val) {
- this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
- this.$i18n.locale = val
- }
- }
+export default {
+ computed: {
+ languageCodes () {
+ return Object.keys(languagesObject)
},
- methods: {
- getLanguageName (code) {
- const specialLanguageNames = {
- 'ja': 'Japanese (やさしいにほんご)',
- 'ja_pedantic': 'Japanese (日本語)',
- 'zh': 'Chinese (简体中文)'
- }
- return specialLanguageNames[code] || ISO6391.getName(code)
+ languageNames () {
+ return _.map(this.languageCodes, this.getLanguageName)
+ },
+
+ language: {
+ get: function () { return this.$store.state.config.interfaceLanguage },
+ set: function (val) {
+ this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+ this.$i18n.locale = val
}
}
+ },
+
+ methods: {
+ getLanguageName (code) {
+ const specialLanguageNames = {
+ 'ja': 'Japanese (やさしいにほんご)',
+ 'ja_pedantic': 'Japanese (日本語)',
+ 'zh': 'Chinese (简体中文)'
+ }
+ return specialLanguageNames[code] || ISO6391.getName(code)
+ }
}
+}
</script>
diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue
index 64b1a58b..493774c2 100644
--- a/src/components/link-preview/link-preview.vue
+++ b/src/components/link-preview/link-preview.vue
@@ -1,13 +1,25 @@
<template>
<div>
- <a class="link-preview-card" :href="card.url" target="_blank" rel="noopener">
- <div class="card-image" :class="{ 'small-image': size === 'small' }" v-if="useImage">
- <img :src="card.image"></img>
+ <a
+ class="link-preview-card"
+ :href="card.url"
+ target="_blank"
+ rel="noopener"
+ >
+ <div
+ v-if="useImage"
+ class="card-image"
+ :class="{ 'small-image': size === 'small' }"
+ >
+ <img :src="card.image">
</div>
<div class="card-content">
<span class="card-host faint">{{ card.provider_name }}</span>
<h4 class="card-title">{{ card.title }}</h4>
- <p class="card-description" v-if="useDescription">{{ card.description }}</p>
+ <p
+ v-if="useDescription"
+ class="card-description"
+ >{{ card.description }}</p>
</div>
</a>
</div>
diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index 7136915b..a6223cce 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -1,9 +1,19 @@
<template>
<div class="list">
- <div v-for="item in items" class="list-item" :key="getKey(item)">
- <slot name="item" :item="item" />
+ <div
+ v-for="item in items"
+ :key="getKey(item)"
+ class="list-item"
+ >
+ <slot
+ name="item"
+ :item="item"
+ />
</div>
- <div class="list-empty-content faint" v-if="items.length === 0 && !!$slots.empty">
+ <div
+ v-if="items.length === 0 && !!$slots.empty"
+ class="list-empty-content faint"
+ >
<slot name="empty" />
</div>
</div>
diff --git a/src/components/login_form/login_form.js b/src/components/login_form/login_form.js
index 4a5b1965..10f52fe2 100644
--- a/src/components/login_form/login_form.js
+++ b/src/components/login_form/login_form.js
@@ -58,7 +58,7 @@ const LoginForm = {
).then((result) => {
if (result.error) {
if (result.error === 'mfa_required') {
- this.requireMFA({app: app, settings: result})
+ this.requireMFA({ app: app, settings: result })
} else {
this.error = result.error
this.focusOnPasswordInput()
@@ -66,7 +66,7 @@ const LoginForm = {
return
}
this.login(result).then(() => {
- this.$router.push({name: 'friends'})
+ this.$router.push({ name: 'friends' })
})
})
})
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index a2c5cf8f..3ec7fe0c 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -1,53 +1,83 @@
<template>
-<div class="login panel panel-default">
- <!-- Default panel contents -->
+ <div class="login panel panel-default">
+ <!-- Default panel contents -->
- <div class="panel-heading">{{$t('login.login')}}</div>
+ <div class="panel-heading">
+ {{ $t('login.login') }}
+ </div>
- <div class="panel-body">
- <form class='login-form' @submit.prevent='submit'>
- <template v-if="isPasswordAuth">
- <div class='form-group'>
- <label for='username'>{{$t('login.username')}}</label>
- <input :disabled="loggingIn" v-model='user.username'
- class='form-control' id='username'
- :placeholder="$t('login.placeholder')">
- </div>
- <div class='form-group'>
- <label for='password'>{{$t('login.password')}}</label>
- <input :disabled="loggingIn" v-model='user.password'
- ref='passwordInput' class='form-control' id='password' type='password'>
- </div>
- </template>
-
- <div class="form-group" v-if="isTokenAuth">
- <p>{{$t('login.description')}}</p>
- </div>
-
- <div class='form-group'>
- <div class='login-bottom'>
- <div>
- <router-link :to="{name: 'registration'}"
- v-if='registrationOpen'
- class='register'>
- {{$t('login.register')}}
- </router-link>
+ <div class="panel-body">
+ <form
+ class="login-form"
+ @submit.prevent="submit"
+ >
+ <template v-if="isPasswordAuth">
+ <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>
- <button :disabled="loggingIn" type='submit' class='btn btn-default'>
- {{$t('login.login')}}
- </button>
- </div>
- </div>
- </form>
- </div>
+ <div class="form-group">
+ <label for="password">{{ $t('login.password') }}</label>
+ <input
+ id="password"
+ ref="passwordInput"
+ v-model="user.password"
+ :disabled="loggingIn"
+ class="form-control"
+ type="password"
+ >
+ </div>
+ </template>
- <div v-if="error" class='form-group'>
- <div class='alert error'>
- {{error}}
- <i class="button-icon icon-cancel" @click="clearError"></i>
+ <div
+ v-if="isTokenAuth"
+ class="form-group"
+ >
+ <p>{{ $t('login.description') }}</p>
+ </div>
+
+ <div class="form-group">
+ <div class="login-bottom">
+ <div>
+ <router-link
+ 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>
+ </form>
+ </div>
+
+ <div
+ v-if="error"
+ class="form-group"
+ >
+ <div class="alert error">
+ {{ error }}
+ <i
+ class="button-icon icon-cancel"
+ @click="clearError"
+ />
+ </div>
</div>
</div>
-</div>
</template>
<script src="./login_form.js" ></script>
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index a4c12d74..0543e677 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -1,25 +1,33 @@
<template>
- <div class="modal-view media-modal-view" v-if="showing" @click.prevent="hide">
- <img class="modal-image" v-if="type === 'image'" :src="currentMedia.url"></img>
- <VideoAttachment
+ <div
+ v-if="showing"
+ class="modal-view media-modal-view"
+ @click.prevent="hide"
+ >
+ <img
+ v-if="type === 'image'"
class="modal-image"
+ :src="currentMedia.url"
+ >
+ <VideoAttachment
v-if="type === 'video'"
+ class="modal-image"
:attachment="currentMedia"
:controls="true"
- @click.stop.native="">
- </VideoAttachment>
+ @click.stop.native=""
+ />
<button
+ v-if="canNavigate"
:title="$t('media_modal.previous')"
class="modal-view-button-arrow modal-view-button-arrow--prev"
- v-if="canNavigate"
@click.stop.prevent="goPrev"
>
<i class="icon-left-open arrow-icon" />
</button>
<button
+ v-if="canNavigate"
:title="$t('media_modal.next')"
class="modal-view-button-arrow modal-view-button-arrow--next"
- v-if="canNavigate"
@click.stop.prevent="goNext"
>
<i class="icon-right-open arrow-icon" />
diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index e4b3d460..f457d022 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -16,7 +16,7 @@ const mediaUpload = {
if (file.size > store.state.instance.uploadlimit) {
const filesize = fileSizeFormatService.fileSizeFormat(file.size)
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
}
const formData = new FormData()
@@ -36,7 +36,7 @@ const mediaUpload = {
},
fileDrop (e) {
if (e.dataTransfer.files.length > 0) {
- e.preventDefault() // allow dropping text like before
+ e.preventDefault() // allow dropping text like before
this.uploadFile(e.dataTransfer.files[0])
}
},
@@ -54,7 +54,7 @@ const mediaUpload = {
this.uploadReady = true
})
},
- change ({target}) {
+ change ({ target }) {
for (var i = 0; i < target.files.length; i++) {
let file = target.files[i]
this.uploadFile(file)
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index eb785735..ac32ae83 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -1,9 +1,29 @@
<template>
- <div class="media-upload" @drop.prevent @dragover.prevent="fileDrag" @drop="fileDrop">
- <label class="btn btn-default" :title="$t('tool_tip.media_upload')">
- <i class="icon-spin4 animate-spin" v-if="uploading"></i>
- <i class="icon-upload" v-if="!uploading"></i>
- <input type="file" v-if="uploadReady" @change="change" style="position: fixed; top: -100em" multiple="true"></input>
+ <div
+ class="media-upload"
+ @drop.prevent
+ @dragover.prevent="fileDrag"
+ @drop="fileDrop"
+ >
+ <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>
</div>
</template>
diff --git a/src/components/mentions/mentions.vue b/src/components/mentions/mentions.vue
index 6b4e96e0..70f60baf 100644
--- a/src/components/mentions/mentions.vue
+++ b/src/components/mentions/mentions.vue
@@ -1,5 +1,9 @@
<template>
- <Timeline :title="$t('nav.interactions')" v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/>
+ <Timeline
+ :title="$t('nav.interactions')"
+ :timeline="timeline"
+ :timeline-name="'mentions'"
+ />
</template>
<script src="./mentions.js"></script>
diff --git a/src/components/mfa_form/recovery_form.js b/src/components/mfa_form/recovery_form.js
index fbe9b437..7a3cc22d 100644
--- a/src/components/mfa_form/recovery_form.js
+++ b/src/components/mfa_form/recovery_form.js
@@ -33,7 +33,7 @@ export default {
}
this.login(result).then(() => {
- this.$router.push({name: 'friends'})
+ this.$router.push({ name: 'friends' })
})
})
}
diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue
index e0e2d65b..57294630 100644
--- a/src/components/mfa_form/recovery_form.vue
+++ b/src/components/mfa_form/recovery_form.vue
@@ -1,42 +1,65 @@
<template>
-<div class="login panel panel-default">
- <!-- Default panel contents -->
+ <div class="login panel panel-default">
+ <!-- Default panel contents -->
- <div class="panel-heading">{{$t('login.heading.recovery')}}</div>
+ <div class="panel-heading">
+ {{ $t('login.heading.recovery') }}
+ </div>
- <div class="panel-body">
- <form class='login-form' @submit.prevent='submit'>
- <div class='form-group'>
- <label for='code'>{{$t('login.recovery_code')}}</label>
- <input v-model='code' class='form-control' id='code'>
- </div>
-
- <div class='form-group'>
- <div class='login-bottom'>
- <div>
- <a href="#" @click.prevent="requireTOTP">
- {{$t('login.enter_two_factor_code')}}
- </a>
- <br />
- <a href="#" @click.prevent="abortMFA">
- {{$t('general.cancel')}}
- </a>
- </div>
- <button type='submit' class='btn btn-default'>
- {{$t('general.verify')}}
- </button>
+ <div class="panel-body">
+ <form
+ class="login-form"
+ @submit.prevent="submit"
+ >
+ <div class="form-group">
+ <label for="code">{{ $t('login.recovery_code') }}</label>
+ <input
+ id="code"
+ v-model="code"
+ class="form-control"
+ >
</div>
+
+ <div class="form-group">
+ <div class="login-bottom">
+ <div>
+ <a
+ href="#"
+ @click.prevent="requireTOTP"
+ >
+ {{ $t('login.enter_two_factor_code') }}
+ </a>
+ <br>
+ <a
+ href="#"
+ @click.prevent="abortMFA"
+ >
+ {{ $t('general.cancel') }}
+ </a>
+ </div>
+ <button
+ type="submit"
+ class="btn btn-default"
+ >
+ {{ $t('general.verify') }}
+ </button>
+ </div>
+ </div>
+ </form>
+ </div>
+
+ <div
+ v-if="error"
+ class="form-group"
+ >
+ <div class="alert error">
+ {{ error }}
+ <i
+ class="button-icon icon-cancel"
+ @click="clearError"
+ />
</div>
-
- </form>
- </div>
-
- <div v-if="error" class='form-group'>
- <div class='alert error'>
- {{error}}
- <i class="button-icon icon-cancel" @click="clearError"></i>
</div>
</div>
-</div>
</template>
<script src="./recovery_form.js" ></script>
diff --git a/src/components/mfa_form/totp_form.js b/src/components/mfa_form/totp_form.js
index 6c94fe52..778bf8dc 100644
--- a/src/components/mfa_form/totp_form.js
+++ b/src/components/mfa_form/totp_form.js
@@ -32,7 +32,7 @@ export default {
}
this.login(result).then(() => {
- this.$router.push({name: 'friends'})
+ this.$router.push({ name: 'friends' })
})
})
}
diff --git a/src/components/mfa_form/totp_form.vue b/src/components/mfa_form/totp_form.vue
index c547785e..a344b395 100644
--- a/src/components/mfa_form/totp_form.vue
+++ b/src/components/mfa_form/totp_form.vue
@@ -1,45 +1,67 @@
<template>
-<div class="login panel panel-default">
- <!-- Default panel contents -->
+ <div class="login panel panel-default">
+ <!-- Default panel contents -->
- <div class="panel-heading">
- {{$t('login.heading.totp')}}
- </div>
+ <div class="panel-heading">
+ {{ $t('login.heading.totp') }}
+ </div>
- <div class="panel-body">
- <form class='login-form' @submit.prevent='submit'>
- <div class='form-group'>
- <label for='code'>
- {{$t('login.authentication_code')}}
- </label>
- <input v-model='code' class='form-control' id='code'>
- </div>
-
- <div class='form-group'>
- <div class='login-bottom'>
- <div>
- <a href="#" @click.prevent="requireRecovery">
- {{$t('login.enter_recovery_code')}}
- </a>
- <br />
- <a href="#" @click.prevent="abortMFA">
- {{$t('general.cancel')}}
- </a>
- </div>
- <button type='submit' class='btn btn-default'>
- {{$t('general.verify')}}
- </button>
+ <div class="panel-body">
+ <form
+ class="login-form"
+ @submit.prevent="submit"
+ >
+ <div class="form-group">
+ <label for="code">
+ {{ $t('login.authentication_code') }}
+ </label>
+ <input
+ id="code"
+ v-model="code"
+ class="form-control"
+ >
</div>
- </div>
- </form>
- </div>
- <div v-if="error" class='form-group'>
- <div class='alert error'>
- {{error}}
- <i class="button-icon icon-cancel" @click="clearError"></i>
+ <div class="form-group">
+ <div class="login-bottom">
+ <div>
+ <a
+ href="#"
+ @click.prevent="requireRecovery"
+ >
+ {{ $t('login.enter_recovery_code') }}
+ </a>
+ <br>
+ <a
+ href="#"
+ @click.prevent="abortMFA"
+ >
+ {{ $t('general.cancel') }}
+ </a>
+ </div>
+ <button
+ type="submit"
+ class="btn btn-default"
+ >
+ {{ $t('general.verify') }}
+ </button>
+ </div>
+ </div>
+ </form>
+ </div>
+
+ <div
+ v-if="error"
+ class="form-group"
+ >
+ <div class="alert error">
+ {{ error }}
+ <i
+ class="button-icon icon-cancel"
+ @click="clearError"
+ />
+ </div>
</div>
</div>
-</div>
</template>
<script src="./totp_form.js"></script>
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index dcac440a..f67b7ff8 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -1,38 +1,75 @@
<template>
<div>
- <nav class='nav-bar container' id="nav">
- <div 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"></i>
+ <nav
+ id="nav"
+ class="nav-bar container"
+ >
+ <div
+ 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>
- <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
+ <router-link
+ class="site-name"
+ :to="{ name: 'root' }"
+ active-class="home"
+ >
+ {{ sitename }}
+ </router-link>
</div>
- <div class='item right'>
- <a class="mobile-nav-button" v-if="currentUser" href="#" @click.stop.prevent="openMobileNotifications()">
- <i class="button-icon icon-bell-alt"></i>
- <div class="alert-dot" v-if="unseenNotificationsCount"></div>
+ <div class="item right">
+ <a
+ v-if="currentUser"
+ class="mobile-nav-button"
+ href="#"
+ @click.stop.prevent="openMobileNotifications()"
+ >
+ <i class="button-icon icon-bell-alt" />
+ <div
+ v-if="unseenNotificationsCount"
+ class="alert-dot"
+ />
</a>
</div>
</div>
</nav>
- <div v-if="currentUser"
+ <div
+ v-if="currentUser"
class="mobile-notifications-drawer"
:class="{ 'closed': !notificationsOpen }"
@touchstart.stop="notificationsTouchStart"
@touchmove.stop="notificationsTouchMove"
>
<div class="mobile-notifications-header">
- <span class="title">{{$t('notifications.notifications')}}</span>
- <a class="mobile-nav-button" @click.stop.prevent="closeMobileNotifications()">
- <i class="button-icon icon-cancel"/>
+ <span class="title">{{ $t('notifications.notifications') }}</span>
+ <a
+ class="mobile-nav-button"
+ @click.stop.prevent="closeMobileNotifications()"
+ >
+ <i class="button-icon icon-cancel" />
</a>
</div>
- <div class="mobile-notifications" @scroll="onScroll">
- <Notifications ref="notifications" :noHeading="true"/>
+ <div
+ class="mobile-notifications"
+ @scroll="onScroll"
+ >
+ <Notifications
+ ref="notifications"
+ :no-heading="true"
+ />
</div>
</div>
- <SideDrawer ref="sideDrawer" :logout="logout"/>
+ <SideDrawer
+ ref="sideDrawer"
+ :logout="logout"
+ />
<MobilePostStatusModal />
</div>
</template>
diff --git a/src/components/mobile_post_status_modal/mobile_post_status_modal.js b/src/components/mobile_post_status_modal/mobile_post_status_modal.js
index 91b730e7..3cec23c6 100644
--- a/src/components/mobile_post_status_modal/mobile_post_status_modal.js
+++ b/src/components/mobile_post_status_modal/mobile_post_status_modal.js
@@ -96,12 +96,12 @@ const MobilePostStatusModal = {
this.hidden = false
}
this.oldScrollPos = window.scrollY
- }, 100, {leading: true, trailing: false}),
+ }, 100, { leading: true, trailing: false }),
handleScrollEnd: debounce(function () {
this.hidden = false
this.oldScrollPos = window.scrollY
- }, 100, {leading: false, trailing: true})
+ }, 100, { leading: false, trailing: true })
}
}
diff --git a/src/components/mobile_post_status_modal/mobile_post_status_modal.vue b/src/components/mobile_post_status_modal/mobile_post_status_modal.vue
index c762705b..5db7584b 100644
--- a/src/components/mobile_post_status_modal/mobile_post_status_modal.vue
+++ b/src/components/mobile_post_status_modal/mobile_post_status_modal.vue
@@ -1,23 +1,31 @@
<template>
-<div v-if="currentUser">
- <div
- class="post-form-modal-view modal-view"
- v-show="postFormOpen"
- @click="closePostForm"
- >
- <div class="post-form-modal-panel panel" @click.stop="">
- <div class="panel-heading">{{$t('post_status.new_status')}}</div>
- <PostStatusForm class="panel-body" @posted="closePostForm" />
+ <div v-if="currentUser">
+ <div
+ v-show="postFormOpen"
+ class="post-form-modal-view modal-view"
+ @click="closePostForm"
+ >
+ <div
+ class="post-form-modal-panel panel"
+ @click.stop=""
+ >
+ <div class="panel-heading">
+ {{ $t('post_status.new_status') }}
+ </div>
+ <PostStatusForm
+ class="panel-body"
+ @posted="closePostForm"
+ />
+ </div>
</div>
+ <button
+ class="new-status-button"
+ :class="{ 'hidden': isHidden }"
+ @click="openPostForm"
+ >
+ <i class="icon-edit" />
+ </button>
</div>
- <button
- class="new-status-button"
- :class="{ 'hidden': isHidden }"
- @click="openPostForm"
- >
- <i class="icon-edit" />
- </button>
-</div>
</template>
<script src="./mobile_post_status_modal.js"></script>
diff --git a/src/components/moderation_tools/moderation_tools.js b/src/components/moderation_tools/moderation_tools.js
index 3eedeaa1..11de9f93 100644
--- a/src/components/moderation_tools/moderation_tools.js
+++ b/src/components/moderation_tools/moderation_tools.js
@@ -52,12 +52,12 @@ const ModerationTools = {
if (this.tagsSet.has(tag)) {
store.state.api.backendInteractor.untagUser(this.user, tag).then(response => {
if (!response.ok) { return }
- store.commit('untagUser', {user: this.user, tag})
+ store.commit('untagUser', { user: this.user, tag })
})
} else {
store.state.api.backendInteractor.tagUser(this.user, tag).then(response => {
if (!response.ok) { return }
- store.commit('tagUser', {user: this.user, tag})
+ store.commit('tagUser', { user: this.user, tag })
})
}
},
@@ -66,12 +66,12 @@ const ModerationTools = {
if (this.user.rights[right]) {
store.state.api.backendInteractor.deleteRight(this.user, right).then(response => {
if (!response.ok) { return }
- store.commit('updateRight', {user: this.user, right: right, value: false})
+ store.commit('updateRight', { user: this.user, right: right, value: false })
})
} else {
store.state.api.backendInteractor.addRight(this.user, right).then(response => {
if (!response.ok) { return }
- store.commit('updateRight', {user: this.user, right: right, value: true})
+ store.commit('updateRight', { user: this.user, right: right, value: true })
})
}
},
@@ -80,7 +80,7 @@ const ModerationTools = {
const status = !!this.user.deactivated
store.state.api.backendInteractor.setActivationStatus(this.user, status).then(response => {
if (!response.ok) { return }
- store.commit('updateActivationStatus', {user: this.user, status: status})
+ store.commit('updateActivationStatus', { user: this.user, status: status })
})
},
deleteUserDialog (show) {
@@ -89,7 +89,7 @@ const ModerationTools = {
deleteUser () {
const store = this.$store
const user = this.user
- const {id, name} = user
+ const { id, name } = user
store.state.api.backendInteractor.deleteUser(user)
.then(e => {
this.$store.dispatch('markStatusesAsDeleted', status => user.id === status.user.id)
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index 6a5e8cc0..c6f8354b 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -1,85 +1,168 @@
<template>
-<div class='block' style='position: relative'>
- <Popper
- trigger="click"
- @hide='showDropDown = false'
- append-to-body
- :options="{
- placement: 'bottom-end',
- modifiers: {
- arrow: { enabled: true },
- offset: { offset: '0, 5px' },
- }
- }">
- <div class="popper-wrapper">
- <div class="dropdown-menu">
- <span v-if='user.is_local'>
- <button class="dropdown-item" @click='toggleRight("admin")'>
- {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
+ <div
+ class="block"
+ style="position: relative"
+ >
+ <Popper
+ trigger="click"
+ append-to-body
+ :options="{
+ placement: 'bottom-end',
+ modifiers: {
+ arrow: { enabled: true },
+ offset: { offset: '0, 5px' },
+ }
+ }"
+ @hide="showDropDown = false"
+ >
+ <div class="popper-wrapper">
+ <div class="dropdown-menu">
+ <span v-if="user.is_local">
+ <button
+ class="dropdown-item"
+ @click="toggleRight("admin")"
+ >
+ {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
+ </button>
+ <button
+ class="dropdown-item"
+ @click="toggleRight("moderator")"
+ >
+ {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
+ </button>
+ <div
+ role="separator"
+ class="dropdown-divider"
+ />
+ </span>
+ <button
+ class="dropdown-item"
+ @click="toggleActivationStatus()"
+ >
+ {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
</button>
- <button class="dropdown-item" @click='toggleRight("moderator")'>
- {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
+ <button
+ class="dropdown-item"
+ @click="deleteUserDialog(true)"
+ >
+ {{ $t('user_card.admin_menu.delete_account') }}
</button>
- <div role="separator" class="dropdown-divider"></div>
- </span>
- <button class="dropdown-item" @click='toggleActivationStatus()'>
- {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
- </button>
- <button class="dropdown-item" @click='deleteUserDialog(true)'>
- {{ $t('user_card.admin_menu.delete_account') }}
- </button>
- <div role="separator" class="dropdown-divider" v-if='hasTagPolicy'></div>
- <span v-if='hasTagPolicy'>
- <button class="dropdown-item" @click='toggleTag(tags.FORCE_NSFW)'>
- {{ $t('user_card.admin_menu.force_nsfw') }}
- <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"></span>
- </button>
- <button class="dropdown-item" @click='toggleTag(tags.STRIP_MEDIA)'>
- {{ $t('user_card.admin_menu.strip_media') }}
- <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"></span>
- </button>
- <button class="dropdown-item" @click='toggleTag(tags.FORCE_UNLISTED)'>
- {{ $t('user_card.admin_menu.force_unlisted') }}
- <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"></span>
- </button>
- <button class="dropdown-item" @click='toggleTag(tags.SANDBOX)'>
- {{ $t('user_card.admin_menu.sandbox') }}
- <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"></span>
- </button>
- <button class="dropdown-item" v-if='user.is_local' @click='toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)'>
- {{ $t('user_card.admin_menu.disable_remote_subscription') }}
- <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"></span>
- </button>
- <button class="dropdown-item" v-if='user.is_local' @click='toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)'>
- {{ $t('user_card.admin_menu.disable_any_subscription') }}
- <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"></span>
- </button>
- <button class="dropdown-item" v-if='user.is_local' @click='toggleTag(tags.QUARANTINE)'>
- {{ $t('user_card.admin_menu.quarantine') }}
- <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"></span>
- </button>
- </span>
+ <div
+ v-if="hasTagPolicy"
+ role="separator"
+ class="dropdown-divider"
+ />
+ <span v-if="hasTagPolicy">
+ <button
+ class="dropdown-item"
+ @click="toggleTag(tags.FORCE_NSFW)"
+ >
+ {{ $t('user_card.admin_menu.force_nsfw') }}
+ <span
+ class="menu-checkbox"
+ :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
+ />
+ </button>
+ <button
+ class="dropdown-item"
+ @click="toggleTag(tags.STRIP_MEDIA)"
+ >
+ {{ $t('user_card.admin_menu.strip_media') }}
+ <span
+ class="menu-checkbox"
+ :class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
+ />
+ </button>
+ <button
+ class="dropdown-item"
+ @click="toggleTag(tags.FORCE_UNLISTED)"
+ >
+ {{ $t('user_card.admin_menu.force_unlisted') }}
+ <span
+ class="menu-checkbox"
+ :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
+ />
+ </button>
+ <button
+ class="dropdown-item"
+ @click="toggleTag(tags.SANDBOX)"
+ >
+ {{ $t('user_card.admin_menu.sandbox') }}
+ <span
+ class="menu-checkbox"
+ :class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
+ />
+ </button>
+ <button
+ v-if="user.is_local"
+ class="dropdown-item"
+ @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
+ >
+ {{ $t('user_card.admin_menu.disable_remote_subscription') }}
+ <span
+ class="menu-checkbox"
+ :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
+ />
+ </button>
+ <button
+ v-if="user.is_local"
+ class="dropdown-item"
+ @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
+ >
+ {{ $t('user_card.admin_menu.disable_any_subscription') }}
+ <span
+ class="menu-checkbox"
+ :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
+ />
+ </button>
+ <button
+ v-if="user.is_local"
+ class="dropdown-item"
+ @click="toggleTag(tags.QUARANTINE)"
+ >
+ {{ $t('user_card.admin_menu.quarantine') }}
+ <span
+ class="menu-checkbox"
+ :class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
+ />
+ </button>
+ </span>
+ </div>
</div>
- </div>
- <button slot="reference" v-bind:class="{ pressed: showDropDown }" @click='toggleMenu'>
- {{ $t('user_card.admin_menu.moderation') }}
- </button>
- </Popper>
- <portal to="modal">
- <DialogModal v-if="showDeleteUserDialog" :onCancel='deleteUserDialog.bind(this, false)'>
- <template slot="header">{{ $t('user_card.admin_menu.delete_user') }}</template>
- <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
- <template slot="footer">
- <button class="btn btn-default" @click='deleteUserDialog(false)'>
- {{ $t('general.cancel') }}
- </button>
- <button class="btn btn-default danger" @click='deleteUser()'>
+ <button
+ slot="reference"
+ :class="{ pressed: showDropDown }"
+ @click="toggleMenu"
+ >
+ {{ $t('user_card.admin_menu.moderation') }}
+ </button>
+ </Popper>
+ <portal to="modal">
+ <DialogModal
+ v-if="showDeleteUserDialog"
+ :on-cancel="deleteUserDialog.bind(this, false)"
+ >
+ <template slot="header">
{{ $t('user_card.admin_menu.delete_user') }}
- </button>
- </template>
- </DialogModal>
- </portal>
-</div>
+ </template>
+ <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
+ <template slot="footer">
+ <button
+ class="btn btn-default"
+ @click="deleteUserDialog(false)"
+ >
+ {{ $t('general.cancel') }}
+ </button>
+ <button
+ class="btn btn-default danger"
+ @click="deleteUser()"
+ >
+ {{ $t('user_card.admin_menu.delete_user') }}
+ </button>
+ </template>
+ </DialogModal>
+ </portal>
+ </div>
</template>
<script src="./moderation_tools.js"></script>
diff --git a/src/components/mute_card/mute_card.vue b/src/components/mute_card/mute_card.vue
index a4edff03..9611fb82 100644
--- a/src/components/mute_card/mute_card.vue
+++ b/src/components/mute_card/mute_card.vue
@@ -1,7 +1,12 @@
<template>
<basic-user-card :user="user">
<div class="mute-card-content-container">
- <button class="btn btn-default" @click="unmuteUser" :disabled="progress" v-if="muted">
+ <button
+ v-if="muted"
+ class="btn btn-default"
+ :disabled="progress"
+ @click="unmuteUser"
+ >
<template v-if="progress">
{{ $t('user_card.unmute_progress') }}
</template>
@@ -9,7 +14,12 @@
{{ $t('user_card.unmute') }}
</template>
</button>
- <button class="btn btn-default" @click="muteUser" :disabled="progress" v-else>
+ <button
+ v-else
+ class="btn btn-default"
+ :disabled="progress"
+ @click="muteUser"
+ >
<template v-if="progress">
{{ $t('user_card.mute_progress') }}
</template>
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index e6e0f074..614fadf4 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -2,26 +2,29 @@
<div class="nav-panel">
<div class="panel panel-default">
<ul>
- <li v-if='currentUser'>
+ <li v-if="currentUser">
<router-link :to="{ name: 'friends' }">
{{ $t("nav.timeline") }}
</router-link>
</li>
- <li v-if='currentUser'>
+ <li v-if="currentUser">
<router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
{{ $t("nav.interactions") }}
</router-link>
</li>
- <li v-if='currentUser'>
+ <li v-if="currentUser">
<router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
{{ $t("nav.dms") }}
</router-link>
</li>
- <li v-if='currentUser && currentUser.locked'>
+ <li v-if="currentUser && currentUser.locked">
<router-link :to="{ name: 'friend-requests' }">
- {{ $t("nav.friend_requests")}}
- <span v-if='followRequestCount > 0' class="badge follow-request-count">
- {{followRequestCount}}
+ {{ $t("nav.friend_requests") }}
+ <span
+ v-if="followRequestCount > 0"
+ class="badge follow-request-count"
+ >
+ {{ followRequestCount }}
</span>
</router-link>
</li>
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 5ad365ad..bafcd026 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -3,49 +3,104 @@
v-if="notification.type === 'mention'"
:compact="true"
:statusoid="notification.status"
+ />
+ <div
+ v-else
+ class="non-mention"
+ :class="[userClass, { highlighted: userStyle }]"
+ :style="[ userStyle ]"
>
- </status>
- <div class="non-mention" :class="[userClass, { highlighted: userStyle }]" :style="[ userStyle ]" v-else>
- <a class='avatar-container' :href="notification.from_profile.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
- <UserAvatar :compact="true" :betterShadow="betterShadow" :user="notification.from_profile"/>
+ <a
+ class="avatar-container"
+ :href="notification.from_profile.statusnet_profile_url"
+ @click.stop.prevent.capture="toggleUserExpanded"
+ >
+ <UserAvatar
+ :compact="true"
+ :better-shadow="betterShadow"
+ :user="notification.from_profile"
+ />
</a>
- <div class='notification-right'>
- <UserCard :user="getUser(notification)" :rounded="true" :bordered="true" v-if="userExpanded" />
+ <div class="notification-right">
+ <UserCard
+ v-if="userExpanded"
+ :user="getUser(notification)"
+ :rounded="true"
+ :bordered="true"
+ />
<span class="notification-details">
<div class="name-and-action">
- <span class="username" v-if="!!notification.from_profile.name_html" :title="'@'+notification.from_profile.screen_name" v-html="notification.from_profile.name_html"></span>
- <span class="username" v-else :title="'@'+notification.from_profile.screen_name">{{ notification.from_profile.name }}</span>
+ <!-- eslint-disable vue/no-v-html -->
+ <span
+ v-if="!!notification.from_profile.name_html"
+ class="username"
+ :title="'@'+notification.from_profile.screen_name"
+ v-html="notification.from_profile.name_html"
+ />
+ <!-- eslint-enable vue/no-v-html -->
+ <span
+ v-else
+ class="username"
+ :title="'@'+notification.from_profile.screen_name"
+ >{{ notification.from_profile.name }}</span>
<span v-if="notification.type === 'like'">
- <i class="fa icon-star lit"></i>
- <small>{{$t('notifications.favorited_you')}}</small>
+ <i class="fa icon-star lit" />
+ <small>{{ $t('notifications.favorited_you') }}</small>
</span>
<span v-if="notification.type === 'repeat'">
- <i class="fa icon-retweet lit" :title="$t('tool_tip.repeat')"></i>
- <small>{{$t('notifications.repeated_you')}}</small>
+ <i
+ class="fa icon-retweet lit"
+ :title="$t('tool_tip.repeat')"
+ />
+ <small>{{ $t('notifications.repeated_you') }}</small>
</span>
<span v-if="notification.type === 'follow'">
- <i class="fa icon-user-plus lit"></i>
- <small>{{$t('notifications.followed_you')}}</small>
+ <i class="fa icon-user-plus lit" />
+ <small>{{ $t('notifications.followed_you') }}</small>
</span>
</div>
- <div class="timeago" v-if="notification.type === 'follow'">
+ <div
+ v-if="notification.type === 'follow'"
+ class="timeago"
+ >
<span class="faint">
- <Timeago :time="notification.created_at" :auto-update="240"></Timeago>
+ <Timeago
+ :time="notification.created_at"
+ :auto-update="240"
+ />
</span>
</div>
- <div class="timeago" v-else>
- <router-link v-if="notification.status" :to="{ name: 'conversation', params: { id: notification.status.id } }" class="faint-link">
- <Timeago :time="notification.created_at" :auto-update="240"></Timeago>
+ <div
+ v-else
+ class="timeago"
+ >
+ <router-link
+ v-if="notification.status"
+ :to="{ name: 'conversation', params: { id: notification.status.id } }"
+ class="faint-link"
+ >
+ <Timeago
+ :time="notification.created_at"
+ :auto-update="240"
+ />
</router-link>
</div>
</span>
- <div class="follow-text" v-if="notification.type === 'follow'">
+ <div
+ v-if="notification.type === 'follow'"
+ class="follow-text"
+ >
<router-link :to="userProfileLink(notification.from_profile)">
- @{{notification.from_profile.screen_name}}
+ @{{ notification.from_profile.screen_name }}
</router-link>
</div>
<template v-else>
- <status class="faint" :compact="true" :statusoid="notification.action" :noHeading="true"></status>
+ <status
+ class="faint"
+ :compact="true"
+ :statusoid="notification.action"
+ :no-heading="true"
+ />
</template>
</div>
</div>
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index c71499b2..c42c35e6 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,33 +1,67 @@
<template>
- <div :class="{ minimal: minimalMode }" class="notifications">
+ <div
+ :class="{ minimal: minimalMode }"
+ class="notifications"
+ >
<div :class="mainClass">
- <div v-if="!noHeading" class="panel-heading">
+ <div
+ v-if="!noHeading"
+ class="panel-heading"
+ >
<div class="title">
- {{$t('notifications.notifications')}}
- <span class="badge badge-notification unseen-count" v-if="unseenCount">{{unseenCount}}</span>
+ {{ $t('notifications.notifications') }}
+ <span
+ v-if="unseenCount"
+ class="badge badge-notification unseen-count"
+ >{{ unseenCount }}</span>
</div>
- <div @click.prevent class="loadmore-error alert error" v-if="error">
- {{$t('timeline.error_fetching')}}
+ <div
+ v-if="error"
+ class="loadmore-error alert error"
+ @click.prevent
+ >
+ {{ $t('timeline.error_fetching') }}
</div>
- <button v-if="unseenCount" @click.prevent="markAsSeen" class="read-button">{{$t('notifications.read')}}</button>
+ <button
+ v-if="unseenCount"
+ class="read-button"
+ @click.prevent="markAsSeen"
+ >
+ {{ $t('notifications.read') }}
+ </button>
</div>
<div class="panel-body">
- <div v-for="notification in visibleNotifications" :key="notification.id" class="notification" :class='{"unseen": !minimalMode && !notification.seen}'>
- <div class="notification-overlay"></div>
- <notification :notification="notification"></notification>
+ <div
+ v-for="notification in visibleNotifications"
+ :key="notification.id"
+ class="notification"
+ :class="{"unseen": !minimalMode && !notification.seen}"
+ >
+ <div class="notification-overlay" />
+ <notification :notification="notification" />
</div>
</div>
<div class="panel-footer">
- <div v-if="bottomedOut" class="new-status-notification text-center panel-footer faint">
- {{$t('notifications.no_more_notifications')}}
+ <div
+ v-if="bottomedOut"
+ class="new-status-notification text-center panel-footer faint"
+ >
+ {{ $t('notifications.no_more_notifications') }}
</div>
- <a v-else-if="!loading" href="#" v-on:click.prevent="fetchOlderNotifications()">
+ <a
+ v-else-if="!loading"
+ href="#"
+ @click.prevent="fetchOlderNotifications()"
+ >
<div class="new-status-notification text-center panel-footer">
- {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older')}}
+ {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
</div>
</a>
- <div v-else class="new-status-notification text-center panel-footer">
- <i class="icon-spin3 animate-spin"/>
+ <div
+ v-else
+ class="new-status-notification text-center panel-footer"
+ >
+ <i class="icon-spin3 animate-spin" />
</div>
</div>
</div>
diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue
index 3926915b..c677f18c 100644
--- a/src/components/opacity_input/opacity_input.vue
+++ b/src/components/opacity_input/opacity_input.vue
@@ -1,27 +1,39 @@
<template>
-<div class="opacity-control style-control" :class="{ disabled: !present || disabled }">
- <label :for="name" class="label">
- {{$t('settings.style.common.opacity')}}
- </label>
- <input
- v-if="typeof fallback !== 'undefined'"
- class="opt exclude-disabled"
- :id="name + '-o'"
- type="checkbox"
- :checked="present"
- @input="$emit('input', !present ? fallback : undefined)">
- <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
- <input
- :id="name"
- class="input-number"
- type="number"
- :value="value || fallback"
- :disabled="!present || disabled"
- @input="$emit('input', $event.target.value)"
- max="1"
- min="0"
- step=".05">
-</div>
+ <div
+ class="opacity-control style-control"
+ :class="{ disabled: !present || disabled }"
+ >
+ <label
+ :for="name"
+ class="label"
+ >
+ {{ $t('settings.style.common.opacity') }}
+ </label>
+ <input
+ v-if="typeof fallback !== 'undefined'"
+ :id="name + '-o'"
+ class="opt exclude-disabled"
+ type="checkbox"
+ :checked="present"
+ @input="$emit('input', !present ? fallback : undefined)"
+ >
+ <label
+ v-if="typeof fallback !== 'undefined'"
+ class="opt-l"
+ :for="name + '-o'"
+ />
+ <input
+ :id="name"
+ class="input-number"
+ type="number"
+ :value="value || fallback"
+ :disabled="!present || disabled"
+ max="1"
+ min="0"
+ step=".05"
+ @input="$emit('input', $event.target.value)"
+ >
+ </div>
</template>
<script>
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index bb67101a..db8e33b3 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -1,24 +1,33 @@
<template>
- <div class="poll" v-bind:class="containerClass">
+ <div
+ class="poll"
+ :class="containerClass"
+ >
<div
- class="poll-option"
v-for="(option, index) in options"
:key="index"
+ class="poll-option"
>
- <div v-if="showResults" :title="resultTitle(option)" class="option-result">
+ <div
+ v-if="showResults"
+ :title="resultTitle(option)"
+ class="option-result"
+ >
<div class="option-result-label">
<span class="result-percentage">
- {{percentageForOption(option.votes_count)}}%
+ {{ percentageForOption(option.votes_count) }}%
</span>
- <span>{{option.title}}</span>
+ <span>{{ option.title }}</span>
</div>
<div
class="result-fill"
:style="{ 'width': `${percentageForOption(option.votes_count)}%` }"
- >
- </div>
+ />
</div>
- <div v-else @click="activateOption(index)">
+ <div
+ v-else
+ @click="activateOption(index)"
+ >
<input
v-if="poll.multiple"
type="checkbox"
@@ -32,7 +41,7 @@
:value="index"
>
<label class="option-vote">
- <div>{{option.title}}</div>
+ <div>{{ option.title }}</div>
</label>
</div>
</div>
@@ -41,16 +50,20 @@
v-if="!showResults"
class="btn btn-default poll-vote-button"
type="button"
- @click="vote"
:disabled="isDisabled"
+ @click="vote"
>
- {{$t('polls.vote')}}
+ {{ $t('polls.vote') }}
</button>
<div class="total">
- {{totalVotesCount}} {{ $t("polls.votes") }} ·
+ {{ totalVotesCount }} {{ $t("polls.votes") }} ·
</div>
<i18n :path="expired ? 'polls.expired' : 'polls.expires_in'">
- <Timeago :time="this.expiresAt" :auto-update="60" :now-threshold="0" />
+ <Timeago
+ :time="expiresAt"
+ :auto-update="60"
+ :now-threshold="0"
+ />
</i18n>
</div>
</div>
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index 0bc6006d..d53f3837 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -1,20 +1,33 @@
<template>
- <div class="poll-form" v-if="visible">
- <div class="poll-option" v-for="(option, index) in options" :key="index">
+ <div
+ v-if="visible"
+ class="poll-form"
+ >
+ <div
+ v-for="(option, index) in options"
+ :key="index"
+ class="poll-option"
+ >
<div class="input-container">
<input
+ :id="`poll-${index}`"
+ v-model="options[index]"
class="poll-option-input"
type="text"
:placeholder="$t('polls.option')"
:maxlength="maxLength"
- :id="`poll-${index}`"
- v-model="options[index]"
@change="updatePollToParent"
@keydown.enter.stop.prevent="nextOption(index)"
>
</div>
- <div class="icon-container" v-if="options.length > 2">
- <i class="icon-cancel" @click="deleteOption(index)"></i>
+ <div
+ v-if="options.length > 2"
+ class="icon-container"
+ >
+ <i
+ class="icon-cancel"
+ @click="deleteOption(index)"
+ />
</div>
</div>
<a
@@ -26,34 +39,51 @@
{{ $t("polls.add_option") }}
</a>
<div class="poll-type-expiry">
- <div class="poll-type" :title="$t('polls.type')">
- <label for="poll-type-selector" class="select">
- <select class="select" v-model="pollType" @change="updatePollToParent">
- <option value="single">{{$t('polls.single_choice')}}</option>
- <option value="multiple">{{$t('polls.multiple_choices')}}</option>
+ <div
+ class="poll-type"
+ :title="$t('polls.type')"
+ >
+ <label
+ for="poll-type-selector"
+ class="select"
+ >
+ <select
+ v-model="pollType"
+ class="select"
+ @change="updatePollToParent"
+ >
+ <option value="single">{{ $t('polls.single_choice') }}</option>
+ <option value="multiple">{{ $t('polls.multiple_choices') }}</option>
</select>
- <i class="icon-down-open"/>
+ <i class="icon-down-open" />
</label>
</div>
- <div class="poll-expiry" :title="$t('polls.expiry')">
- <input
+ <div
+ class="poll-expiry"
+ :title="$t('polls.expiry')"
+ >
+ <input
+ v-model="expiryAmount"
type="number"
class="expiry-amount hide-number-spinner"
:min="minExpirationInCurrentUnit"
:max="maxExpirationInCurrentUnit"
- v-model="expiryAmount"
@change="expiryAmountChange"
>
<label class="expiry-unit select">
- <select
+ <select
v-model="expiryUnit"
@change="expiryAmountChange"
>
- <option v-for="unit in expiryUnits" :value="unit">
+ <option
+ v-for="unit in expiryUnits"
+ :key="unit"
+ :value="unit"
+ >
{{ $t(`time.${unit}_short`, ['']) }}
</option>
</select>
- <i class="icon-down-open"/>
+ <i class="icon-down-open" />
</label>
</div>
</div>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 52d1b43c..1f389eda 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -1,147 +1,254 @@
<template>
-<div class="post-status-form">
- <form @submit.prevent="postStatus(newStatus)" autocomplete="off">
- <div class="form-group" >
- <i18n
- v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'"
- path="post_status.account_not_locked_warning"
- tag="p"
- class="visibility-notice">
- <router-link :to="{ name: 'user-settings' }">{{ $t('post_status.account_not_locked_warning_link') }}</router-link>
- </i18n>
- <p v-if="!hideScopeNotice && newStatus.visibility === 'public'" class="visibility-notice notice-dismissible">
- <span>{{ $t('post_status.scope_notice.public') }}</span>
- <a v-on:click.prevent="dismissScopeNotice()" class="button-icon dismiss">
- <i class='icon-cancel'></i>
- </a>
- </p>
- <p v-else-if="!hideScopeNotice && newStatus.visibility === 'unlisted'" class="visibility-notice notice-dismissible">
- <span>{{ $t('post_status.scope_notice.unlisted') }}</span>
- <a v-on:click.prevent="dismissScopeNotice()" class="button-icon dismiss">
- <i class='icon-cancel'></i>
- </a>
- </p>
- <p v-else-if="!hideScopeNotice && newStatus.visibility === 'private' && $store.state.users.currentUser.locked" class="visibility-notice notice-dismissible">
- <span>{{ $t('post_status.scope_notice.private') }}</span>
- <a v-on:click.prevent="dismissScopeNotice()" class="button-icon dismiss">
- <i class='icon-cancel'></i>
- </a>
- </p>
- <p v-else-if="newStatus.visibility === 'direct'" class="visibility-notice">
- <span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
- <span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
- </p>
- <EmojiInput
- v-if="newStatus.spoilerText || alwaysShowSubject"
- :suggest="emojiSuggestor"
- v-model="newStatus.spoilerText"
- class="form-control"
+ <div class="post-status-form">
+ <form
+ autocomplete="off"
+ @submit.prevent="postStatus(newStatus)"
+ >
+ <div class="form-group">
+ <i18n
+ v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'"
+ path="post_status.account_not_locked_warning"
+ tag="p"
+ class="visibility-notice"
>
- <input
-
- type="text"
- :placeholder="$t('post_status.content_warning')"
- v-model="newStatus.spoilerText"
- class="form-post-subject"
- />
- </EmojiInput>
- <EmojiInput
- :suggest="emojiUserSuggestor"
- v-model="newStatus.status"
- class="form-control main-input"
- >
- <textarea
- ref="textarea"
- v-model="newStatus.status"
- :placeholder="$t('post_status.default')"
- rows="1"
- @keydown.meta.enter="postStatus(newStatus)"
- @keyup.ctrl.enter="postStatus(newStatus)"
- @drop="fileDrop"
- @dragover.prevent="fileDrag"
- @input="resize"
- @paste="paste"
- :disabled="posting"
- class="form-post-body"
- >
- </textarea>
+ <router-link :to="{ name: 'user-settings' }">
+ {{ $t('post_status.account_not_locked_warning_link') }}
+ </router-link>
+ </i18n>
<p
- v-if="hasStatusLengthLimit"
- class="character-counter faint"
- :class="{ error: isOverLengthLimit }"
+ v-if="!hideScopeNotice && newStatus.visibility === 'public'"
+ class="visibility-notice notice-dismissible"
>
- {{ charactersLeft }}
+ <span>{{ $t('post_status.scope_notice.public') }}</span>
+ <a
+ class="button-icon dismiss"
+ @click.prevent="dismissScopeNotice()"
+ >
+ <i class="icon-cancel" />
+ </a>
</p>
- </EmojiInput>
- <div class="visibility-tray">
- <scope-selector
- :showAll="showAllScopes"
- :userDefault="userDefaultScope"
- :originalScope="copyMessageScope"
- :initialScope="newStatus.visibility"
- :onScopeChange="changeVis"/>
+ <p
+ v-else-if="!hideScopeNotice && newStatus.visibility === 'unlisted'"
+ class="visibility-notice notice-dismissible"
+ >
+ <span>{{ $t('post_status.scope_notice.unlisted') }}</span>
+ <a
+ class="button-icon dismiss"
+ @click.prevent="dismissScopeNotice()"
+ >
+ <i class="icon-cancel" />
+ </a>
+ </p>
+ <p
+ v-else-if="!hideScopeNotice && newStatus.visibility === 'private' && $store.state.users.currentUser.locked"
+ class="visibility-notice notice-dismissible"
+ >
+ <span>{{ $t('post_status.scope_notice.private') }}</span>
+ <a
+ class="button-icon dismiss"
+ @click.prevent="dismissScopeNotice()"
+ >
+ <i class="icon-cancel" />
+ </a>
+ </p>
+ <p
+ v-else-if="newStatus.visibility === 'direct'"
+ class="visibility-notice"
+ >
+ <span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
+ <span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
+ </p>
+ <EmojiInput
+ v-if="newStatus.spoilerText || alwaysShowSubject"
+ v-model="newStatus.spoilerText"
+ :suggest="emojiSuggestor"
+ class="form-control"
+ >
+ <input
- <div class="text-format" v-if="postFormats.length > 1">
- <label 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>
- </select>
- <i class="icon-down-open"></i>
- </label>
- </div>
- <div class="text-format" v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'">
- <span class="only-format">
- {{$t(`post_status.content_type["${postFormats[0]}"]`)}}
- </span>
- </div>
- </div>
- </div>
- <poll-form
- ref="pollForm"
- v-if="pollsAvailable"
- :visible="pollFormVisible"
- @update-poll="setPoll"
- />
- <div class='form-bottom'>
- <div class='form-bottom-left'>
- <media-upload ref="mediaUpload" @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="uploadFailed" :drop-files="dropFiles"></media-upload>
- <div v-if="pollsAvailable" class="poll-icon">
- <i
- :title="$t('polls.add_poll')"
- @click="togglePollForm"
- class="icon-chart-bar btn btn-default"
- :class="pollFormVisible && 'selected'"
+ v-model="newStatus.spoilerText"
+ type="text"
+ :placeholder="$t('post_status.content_warning')"
+ class="form-post-subject"
+ >
+ </EmojiInput>
+ <EmojiInput
+ v-model="newStatus.status"
+ :suggest="emojiUserSuggestor"
+ class="form-control main-input"
+ >
+ <textarea
+ ref="textarea"
+ v-model="newStatus.status"
+ :placeholder="$t('post_status.default')"
+ rows="1"
+ :disabled="posting"
+ class="form-post-body"
+ @keydown.meta.enter="postStatus(newStatus)"
+ @keyup.ctrl.enter="postStatus(newStatus)"
+ @drop="fileDrop"
+ @dragover.prevent="fileDrag"
+ @input="resize"
+ @paste="paste"
+ />
+ <p
+ v-if="hasStatusLengthLimit"
+ class="character-counter faint"
+ :class="{ error: isOverLengthLimit }"
+ >
+ {{ charactersLeft }}
+ </p>
+ </EmojiInput>
+ <div class="visibility-tray">
+ <scope-selector
+ :show-all="showAllScopes"
+ :user-default="userDefaultScope"
+ :original-scope="copyMessageScope"
+ :initial-scope="newStatus.visibility"
+ :on-scope-change="changeVis"
/>
- </div>
- </div>
- <button v-if="posting" disabled 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 class='alert error' v-if="error">
- Error: {{ error }}
- <i class="button-icon icon-cancel" @click="clearError"></i>
- </div>
- <div class="attachments">
- <div class="media-upload-wrapper" v-for="file in newStatus.files">
- <i class="fa button-icon icon-cancel" @click="removeMediaFile(file)"></i>
- <div class="media-upload-container attachment">
- <img class="thumbnail media-upload" :src="file.url" v-if="type(file) === 'image'"></img>
- <video v-if="type(file) === 'video'" :src="file.url" controls></video>
- <audio v-if="type(file) === 'audio'" :src="file.url" controls></audio>
- <a v-if="type(file) === 'unknown'" :href="file.url">{{file.url}}</a>
+ <div
+ v-if="postFormats.length > 1"
+ class="text-format"
+ >
+ <label
+ 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>
+ </select>
+ <i class="icon-down-open" />
+ </label>
+ </div>
+ <div
+ v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"
+ class="text-format"
+ >
+ <span class="only-format">
+ {{ $t(`post_status.content_type["${postFormats[0]}"]`) }}
+ </span>
+ </div>
</div>
</div>
- </div>
- <div class="upload_settings" v-if="newStatus.files.length > 0">
- <input type="checkbox" id="filesSensitive" v-model="newStatus.nsfw">
- <label for="filesSensitive">{{$t('post_status.attachments_sensitive')}}</label>
- </div>
- </form>
-</div>
+ <poll-form
+ v-if="pollsAvailable"
+ ref="pollForm"
+ :visible="pollFormVisible"
+ @update-poll="setPoll"
+ />
+ <div class="form-bottom">
+ <div class="form-bottom-left">
+ <media-upload
+ ref="mediaUpload"
+ :drop-files="dropFiles"
+ @uploading="disableSubmit"
+ @uploaded="addMediaFile"
+ @upload-failed="uploadFailed"
+ />
+ <div
+ v-if="pollsAvailable"
+ class="poll-icon"
+ >
+ <i
+ :title="$t('polls.add_poll')"
+ class="icon-chart-bar btn btn-default"
+ :class="pollFormVisible && 'selected'"
+ @click="togglePollForm"
+ />
+ </div>
+ </div>
+
+ <button
+ v-if="posting"
+ disabled
+ 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
+ v-if="error"
+ class="alert error"
+ >
+ Error: {{ error }}
+ <i
+ class="button-icon icon-cancel"
+ @click="clearError"
+ />
+ </div>
+ <div class="attachments">
+ <div
+ v-for="file in newStatus.files"
+ :key="file.url"
+ class="media-upload-wrapper"
+ >
+ <i
+ class="fa button-icon icon-cancel"
+ @click="removeMediaFile(file)"
+ />
+ <div class="media-upload-container attachment">
+ <img
+ v-if="type(file) === 'image'"
+ class="thumbnail media-upload"
+ :src="file.url"
+ >
+ <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
+ v-if="newStatus.files.length > 0"
+ class="upload_settings"
+ >
+ <input
+ id="filesSensitive"
+ v-model="newStatus.nsfw"
+ type="checkbox"
+ >
+ <label for="filesSensitive">{{ $t('post_status.attachments_sensitive') }}</label>
+ </div>
+ </form>
+ </div>
</template>
<script src="./post_status_form.js"></script>
@@ -217,7 +324,6 @@
cursor: pointer;
}
-
.error {
text-align: center;
}
diff --git a/src/components/progress_button/progress_button.vue b/src/components/progress_button/progress_button.vue
index 737360bb..d19aa97d 100644
--- a/src/components/progress_button/progress_button.vue
+++ b/src/components/progress_button/progress_button.vue
@@ -1,5 +1,8 @@
<template>
- <button :disabled="progress || disabled" @click="onClick">
+ <button
+ :disabled="progress || disabled"
+ @click="onClick"
+ >
<template v-if="progress">
<slot name="progress" />
</template>
diff --git a/src/components/public_and_external_timeline/public_and_external_timeline.vue b/src/components/public_and_external_timeline/public_and_external_timeline.vue
index 6be9f955..fcd915ac 100644
--- a/src/components/public_and_external_timeline/public_and_external_timeline.vue
+++ b/src/components/public_and_external_timeline/public_and_external_timeline.vue
@@ -1,5 +1,9 @@
<template>
- <Timeline :title="$t('nav.twkn')" v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/>
+ <Timeline
+ :title="$t('nav.twkn')"
+ :timeline="timeline"
+ :timeline-name="'publicAndExternal'"
+ />
</template>
<script src="./public_and_external_timeline.js"></script>
diff --git a/src/components/public_timeline/public_timeline.vue b/src/components/public_timeline/public_timeline.vue
index 85d42cca..5720068d 100644
--- a/src/components/public_timeline/public_timeline.vue
+++ b/src/components/public_timeline/public_timeline.vue
@@ -1,5 +1,9 @@
<template>
- <Timeline :title="$t('nav.public_tl')" v-bind:timeline="timeline" v-bind:timeline-name="'public'"/>
+ <Timeline
+ :title="$t('nav.public_tl')"
+ :timeline="timeline"
+ :timeline-name="'public'"
+ />
</template>
<script src="./public_timeline.js"></script>
diff --git a/src/components/range_input/range_input.vue b/src/components/range_input/range_input.vue
index 3e50664b..aaa2ed26 100644
--- a/src/components/range_input/range_input.vue
+++ b/src/components/range_input/range_input.vue
@@ -1,37 +1,50 @@
<template>
-<div class="range-control style-control" :class="{ disabled: !present || disabled }">
- <label :for="name" class="label">
- {{label}}
- </label>
- <input
- v-if="typeof fallback !== 'undefined'"
- class="opt exclude-disabled"
- :id="name + '-o'"
- type="checkbox"
- :checked="present"
- @input="$emit('input', !present ? fallback : undefined)">
- <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
- <input
- :id="name"
- class="input-number"
- type="range"
- :value="value || fallback"
- :disabled="!present || disabled"
- @input="$emit('input', $event.target.value)"
- :max="max || hardMax || 100"
- :min="min || hardMin || 0"
- :step="step || 1">
- <input
- :id="name"
- class="input-number"
- type="number"
- :value="value || fallback"
- :disabled="!present || disabled"
- @input="$emit('input', $event.target.value)"
- :max="hardMax"
- :min="hardMin"
- :step="step || 1">
-</div>
+ <div
+ class="range-control style-control"
+ :class="{ disabled: !present || disabled }"
+ >
+ <label
+ :for="name"
+ class="label"
+ >
+ {{ label }}
+ </label>
+ <input
+ v-if="typeof fallback !== 'undefined'"
+ :id="name + '-o'"
+ class="opt exclude-disabled"
+ type="checkbox"
+ :checked="present"
+ @input="$emit('input', !present ? fallback : undefined)"
+ >
+ <label
+ v-if="typeof fallback !== 'undefined'"
+ class="opt-l"
+ :for="name + '-o'"
+ />
+ <input
+ :id="name"
+ class="input-number"
+ type="range"
+ :value="value || fallback"
+ :disabled="!present || disabled"
+ :max="max || hardMax || 100"
+ :min="min || hardMin || 0"
+ :step="step || 1"
+ @input="$emit('input', $event.target.value)"
+ >
+ <input
+ :id="name"
+ class="input-number"
+ type="number"
+ :value="value || fallback"
+ :disabled="!present || disabled"
+ :max="hardMax"
+ :min="hardMin"
+ :step="step || 1"
+ @input="$emit('input', $event.target.value)"
+ >
+ </div>
</template>
<script>
diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index 8dc00420..57f3caf0 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -28,7 +28,7 @@ const registration = {
},
created () {
if ((!this.registrationOpen && !this.token) || this.signedIn) {
- this.$router.push({name: 'root'})
+ this.$router.push({ name: 'root' })
}
this.setCaptcha()
@@ -61,7 +61,7 @@ const registration = {
if (!this.$v.$invalid) {
try {
await this.signUp(this.user)
- this.$router.push({name: 'friends'})
+ this.$router.push({ name: 'friends' })
} catch (error) {
console.warn('Registration failed: ' + error)
}
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 110b27bf..e0fa214a 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -1,109 +1,236 @@
<template>
<div class="settings panel panel-default">
<div class="panel-heading">
- {{$t('registration.registration')}}
+ {{ $t('registration.registration') }}
</div>
<div class="panel-body">
- <form v-on:submit.prevent='submit(user)' class='registration-form'>
- <div class='container'>
- <div class='text-fields'>
- <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 :disabled="isPending" v-model.trim='$v.user.username.$model' class='form-control' id='sign-up-username' :placeholder="$t('registration.username_placeholder')">
+ <form
+ class="registration-form"
+ @submit.prevent="submit(user)"
+ >
+ <div class="container">
+ <div class="text-fields">
+ <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 class="form-error" v-if="$v.user.username.$dirty">
+ <div
+ v-if="$v.user.username.$dirty"
+ class="form-error"
+ >
<ul>
<li v-if="!$v.user.username.required">
- <span>{{$t('registration.validations.username_required')}}</span>
+ <span>{{ $t('registration.validations.username_required') }}</span>
</li>
</ul>
</div>
- <div class='form-group' :class="{ 'form-group--error': $v.user.fullname.$error }">
- <label class='form--label' for='sign-up-fullname'>{{$t('registration.fullname')}}</label>
- <input :disabled="isPending" v-model.trim='$v.user.fullname.$model' class='form-control' id='sign-up-fullname' :placeholder="$t('registration.fullname_placeholder')">
+ <div
+ class="form-group"
+ :class="{ 'form-group--error': $v.user.fullname.$error }"
+ >
+ <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 class="form-error" v-if="$v.user.fullname.$dirty">
+ <div
+ v-if="$v.user.fullname.$dirty"
+ class="form-error"
+ >
<ul>
<li v-if="!$v.user.fullname.required">
- <span>{{$t('registration.validations.fullname_required')}}</span>
+ <span>{{ $t('registration.validations.fullname_required') }}</span>
</li>
</ul>
</div>
- <div class='form-group' :class="{ 'form-group--error': $v.user.email.$error }">
- <label class='form--label' for='email'>{{$t('registration.email')}}</label>
- <input :disabled="isPending" v-model='$v.user.email.$model' class='form-control' id='email' type="email">
+ <div
+ class="form-group"
+ :class="{ 'form-group--error': $v.user.email.$error }"
+ >
+ <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 class="form-error" v-if="$v.user.email.$dirty">
+ <div
+ v-if="$v.user.email.$dirty"
+ class="form-error"
+ >
<ul>
<li v-if="!$v.user.email.required">
- <span>{{$t('registration.validations.email_required')}}</span>
+ <span>{{ $t('registration.validations.email_required') }}</span>
</li>
</ul>
</div>
- <div class='form-group'>
- <label class='form--label' for='bio'>{{$t('registration.bio')}} ({{$t('general.optional')}})</label>
- <textarea :disabled="isPending" v-model='user.bio' class='form-control' id='bio' :placeholder="bioPlaceholder"></textarea>
+ <div class="form-group">
+ <label
+ class="form--label"
+ 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 class='form-group' :class="{ 'form-group--error': $v.user.password.$error }">
- <label class='form--label' for='sign-up-password'>{{$t('login.password')}}</label>
- <input :disabled="isPending" v-model='user.password' class='form-control' id='sign-up-password' type='password'>
+ <div
+ class="form-group"
+ :class="{ 'form-group--error': $v.user.password.$error }"
+ >
+ <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 class="form-error" v-if="$v.user.password.$dirty">
+ <div
+ v-if="$v.user.password.$dirty"
+ class="form-error"
+ >
<ul>
<li v-if="!$v.user.password.required">
- <span>{{$t('registration.validations.password_required')}}</span>
+ <span>{{ $t('registration.validations.password_required') }}</span>
</li>
</ul>
</div>
- <div class='form-group' :class="{ 'form-group--error': $v.user.confirm.$error }">
- <label class='form--label' for='sign-up-password-confirmation'>{{$t('registration.password_confirm')}}</label>
- <input :disabled="isPending" v-model='user.confirm' class='form-control' id='sign-up-password-confirmation' type='password'>
+ <div
+ class="form-group"
+ :class="{ 'form-group--error': $v.user.confirm.$error }"
+ >
+ <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 class="form-error" v-if="$v.user.confirm.$dirty">
+ <div
+ v-if="$v.user.confirm.$dirty"
+ class="form-error"
+ >
<ul>
<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 v-if="!$v.user.confirm.sameAsPassword">
- <span>{{$t('registration.validations.password_confirmation_match')}}</span>
+ <span>{{ $t('registration.validations.password_confirmation_match') }}</span>
</li>
</ul>
</div>
- <div class="form-group" id="captcha-group" v-if="captcha.type != 'none'">
- <label class='form--label' for='captcha-label'>{{$t('captcha')}}</label>
+ <div
+ v-if="captcha.type != 'none'"
+ id="captcha-group"
+ class="form-group"
+ >
+ <label
+ class="form--label"
+ for="captcha-label"
+ >{{ $t('captcha') }}</label>
<template v-if="captcha.type == 'kocaptcha'">
- <img v-bind:src="captcha.url" v-on:click="setCaptcha">
+ <img
+ :src="captcha.url"
+ @click="setCaptcha"
+ >
- <sub>{{$t('registration.new_captcha')}}</sub>
+ <sub>{{ $t('registration.new_captcha') }}</sub>
- <input :disabled="isPending"
- v-model='captcha.solution'
- class='form-control' id='captcha-answer' type='text' autocomplete="off">
+ <input
+ id="captcha-answer"
+ v-model="captcha.solution"
+ :disabled="isPending"
+ class="form-control"
+ type="text"
+ autocomplete="off"
+ >
</template>
</div>
- <div class='form-group' v-if='token' >
- <label for='token'>{{$t('registration.token')}}</label>
- <input disabled='true' v-model='token' class='form-control' id='token' type='text'>
+ <div
+ v-if="token"
+ class="form-group"
+ >
+ <label for="token">{{ $t('registration.token') }}</label>
+ <input
+ id="token"
+ v-model="token"
+ disabled="true"
+ class="form-control"
+ type="text"
+ >
</div>
- <div class='form-group'>
- <button :disabled="isPending" type='submit' class='btn btn-default'>{{$t('general.submit')}}</button>
+ <div class="form-group">
+ <button
+ :disabled="isPending"
+ type="submit"
+ class="btn btn-default"
+ >
+ {{ $t('general.submit') }}
+ </button>
</div>
</div>
- <div class='terms-of-service' v-html="termsOfService">
- </div>
+ <!-- eslint-disable vue/no-v-html -->
+ <div
+ class="terms-of-service"
+ v-html="termsOfService"
+ />
+ <!-- eslint-enable vue/no-v-html -->
</div>
- <div v-if="serverValidationErrors.length" class='form-group'>
- <div class='alert error'>
- <span v-for="error in serverValidationErrors">{{error}}</span>
+ <div
+ v-if="serverValidationErrors.length"
+ class="form-group"
+ >
+ <div class="alert error">
+ <span
+ v-for="error in serverValidationErrors"
+ :key="error"
+ >{{ error }}</span>
</div>
</div>
</form>
diff --git a/src/components/remote_follow/remote_follow.vue b/src/components/remote_follow/remote_follow.vue
index fb2147bd..cb1c2a1b 100644
--- a/src/components/remote_follow/remote_follow.vue
+++ b/src/components/remote_follow/remote_follow.vue
@@ -1,9 +1,23 @@
<template>
<div class="remote-follow">
- <form method="POST" :action='subscribeUrl'>
- <input type="hidden" name="nickname" :value="user.screen_name">
- <input type="hidden" name="profile" value="">
- <button click="submit" class="remote-button">
+ <form
+ method="POST"
+ :action="subscribeUrl"
+ >
+ <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') }}
</button>
</form>
diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js
index eb4e4b41..fb543a9c 100644
--- a/src/components/retweet_button/retweet_button.js
+++ b/src/components/retweet_button/retweet_button.js
@@ -11,9 +11,9 @@ const RetweetButton = {
methods: {
retweet () {
if (!this.status.repeated) {
- this.$store.dispatch('retweet', {id: this.status.id})
+ this.$store.dispatch('retweet', { id: this.status.id })
} else {
- this.$store.dispatch('unretweet', {id: this.status.id})
+ this.$store.dispatch('unretweet', { id: this.status.id })
}
this.animated = true
setTimeout(() => {
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 6370f9dc..d58a7f8c 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -1,16 +1,29 @@
<template>
<div v-if="loggedIn">
<template v-if="visibility !== 'private' && visibility !== 'direct'">
- <i :class='classes' class='button-icon retweet-button icon-retweet rt-active' v-on:click.prevent='retweet()' :title="$t('tool_tip.repeat')"></i>
- <span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span>
+ <i
+ :class="classes"
+ 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 v-else>
- <i :class='classes' class='button-icon icon-lock' :title="$t('timeline.no_retweet_hint')"></i>
+ <i
+ :class="classes"
+ class="button-icon icon-lock"
+ :title="$t('timeline.no_retweet_hint')"
+ />
</template>
</div>
<div v-else-if="!loggedIn">
- <i :class='classes' class='button-icon icon-retweet' :title="$t('tool_tip.repeat')"></i>
- <span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span>
+ <i
+ :class="classes"
+ class="button-icon icon-retweet"
+ :title="$t('tool_tip.repeat')"
+ />
+ <span v-if="!hidePostStatsLocal && status.repeat_num > 0">{{ status.repeat_num }}</span>
</div>
</template>
diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js
index 8a42ee7b..e9ccdefc 100644
--- a/src/components/scope_selector/scope_selector.js
+++ b/src/components/scope_selector/scope_selector.js
@@ -29,10 +29,10 @@ const ScopeSelector = {
},
css () {
return {
- public: {selected: this.currentScope === 'public'},
- unlisted: {selected: this.currentScope === 'unlisted'},
- private: {selected: this.currentScope === 'private'},
- direct: {selected: this.currentScope === 'direct'}
+ public: { selected: this.currentScope === 'public' },
+ unlisted: { selected: this.currentScope === 'unlisted' },
+ private: { selected: this.currentScope === 'private' },
+ direct: { selected: this.currentScope === 'direct' }
}
}
},
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index 5ebb5d56..291236f2 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -1,30 +1,37 @@
<template>
-<div v-if="!showNothing" class="scope-selector">
- <i class="icon-mail-alt"
- :class="css.direct"
- :title="$t('post_status.scope.direct')"
- v-if="showDirect"
- @click="changeVis('direct')">
- </i>
- <i class="icon-lock"
- :class="css.private"
- :title="$t('post_status.scope.private')"
- v-if="showPrivate"
- v-on:click="changeVis('private')">
- </i>
- <i class="icon-lock-open-alt"
- :class="css.unlisted"
- :title="$t('post_status.scope.unlisted')"
- v-if="showUnlisted"
- @click="changeVis('unlisted')">
- </i>
- <i class="icon-globe"
- :class="css.public"
- :title="$t('post_status.scope.public')"
- v-if="showPublic"
- @click="changeVis('public')">
- </i>
-</div>
+ <div
+ v-if="!showNothing"
+ class="scope-selector"
+ >
+ <i
+ v-if="showDirect"
+ class="icon-mail-alt"
+ :class="css.direct"
+ :title="$t('post_status.scope.direct')"
+ @click="changeVis('direct')"
+ />
+ <i
+ v-if="showPrivate"
+ class="icon-lock"
+ :class="css.private"
+ :title="$t('post_status.scope.private')"
+ @click="changeVis('private')"
+ />
+ <i
+ v-if="showUnlisted"
+ class="icon-lock-open-alt"
+ :class="css.unlisted"
+ :title="$t('post_status.scope.unlisted')"
+ @click="changeVis('unlisted')"
+ />
+ <i
+ v-if="showPublic"
+ class="icon-globe"
+ :class="css.public"
+ :title="$t('post_status.scope.public')"
+ @click="changeVis('public')"
+ />
+ </div>
</template>
<script src="./scope_selector.js"></script>
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 3f16c921..d9ec7ece 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -1,23 +1,52 @@
<template>
<div class="selectable-list">
- <div class="selectable-list-header" v-if="items.length > 0">
+ <div
+ v-if="items.length > 0"
+ class="selectable-list-header"
+ >
<div class="selectable-list-checkbox-wrapper">
- <Checkbox :checked="allSelected" @change="toggleAll" :indeterminate="someSelected">{{ $t('selectable_list.select_all') }}</Checkbox>
+ <Checkbox
+ :checked="allSelected"
+ :indeterminate="someSelected"
+ @change="toggleAll"
+ >
+ {{ $t('selectable_list.select_all') }}
+ </Checkbox>
</div>
<div class="selectable-list-header-actions">
- <slot name="header" :selected="filteredSelected" />
+ <slot
+ name="header"
+ :selected="filteredSelected"
+ />
</div>
</div>
- <List :items="items" :getKey="getKey">
- <template slot="item" slot-scope="{item}">
- <div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(item) }">
+ <List
+ :items="items"
+ :get-key="getKey"
+ >
+ <template
+ slot="item"
+ slot-scope="{item}"
+ >
+ <div
+ class="selectable-list-item-inner"
+ :class="{ 'selectable-list-item-selected-inner': isSelected(item) }"
+ >
<div class="selectable-list-checkbox-wrapper">
- <Checkbox :checked="isSelected(item)" @change="checked => toggle(checked, item)" />
+ <Checkbox
+ :checked="isSelected(item)"
+ @change="checked => toggle(checked, item)"
+ />
</div>
- <slot name="item" :item="item" />
+ <slot
+ name="item"
+ :item="item"
+ />
</div>
</template>
- <template slot="empty"><slot name="empty" /></template>
+ <template slot="empty">
+ <slot name="empty" />
+ </template>
</List>
</div>
</template>
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 528c13cc..744ec566 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -1,305 +1,483 @@
<template>
-<div class="settings panel panel-default">
- <div class="panel-heading">
- <div class="title">
- {{$t('settings.settings')}}
+ <div class="settings panel panel-default">
+ <div class="panel-heading">
+ <div class="title">
+ {{ $t('settings.settings') }}
+ </div>
+
+ <transition name="fade">
+ <template v-if="currentSaveStateNotice">
+ <div
+ v-if="currentSaveStateNotice.error"
+ class="alert error"
+ @click.prevent
+ >
+ {{ $t('settings.saving_err') }}
+ </div>
+
+ <div
+ v-if="!currentSaveStateNotice.error"
+ class="alert transparent"
+ @click.prevent
+ >
+ {{ $t('settings.saving_ok') }}
+ </div>
+ </template>
+ </transition>
</div>
-
- <transition name="fade">
- <template v-if="currentSaveStateNotice">
- <div @click.prevent class="alert error" v-if="currentSaveStateNotice.error">
- {{ $t('settings.saving_err') }}
- </div>
-
- <div @click.prevent class="alert transparent" v-if="!currentSaveStateNotice.error">
- {{ $t('settings.saving_ok') }}
- </div>
- </template>
- </transition>
- </div>
- <div class="panel-body">
-<keep-alive>
- <tab-switcher>
- <div :label="$t('settings.general')" >
- <div class="setting-item">
- <h2>{{ $t('settings.interface') }}</h2>
- <ul class="setting-list">
- <li>
- <interface-language-switcher />
- </li>
- <li v-if="instanceSpecificPanelPresent">
- <input type="checkbox" id="hideISP" v-model="hideISPLocal">
- <label for="hideISP">{{$t('settings.hide_isp')}}</label>
- </li>
- </ul>
- </div>
- <div class="setting-item">
- <h2>{{$t('nav.timeline')}}</h2>
- <ul class="setting-list">
- <li>
- <input type="checkbox" id="hideMutedPosts" v-model="hideMutedPostsLocal">
- <label for="hideMutedPosts">{{$t('settings.hide_muted_posts')}} {{$t('settings.instance_default', { value: hideMutedPostsDefault })}}</label>
- </li>
- <li>
- <input type="checkbox" id="collapseMessageWithSubject" v-model="collapseMessageWithSubjectLocal">
- <label for="collapseMessageWithSubject">{{$t('settings.collapse_subject')}} {{$t('settings.instance_default', { value: collapseMessageWithSubjectDefault })}}</label>
- </li>
- <li>
- <input type="checkbox" id="streaming" v-model="streamingLocal">
- <label for="streaming">{{$t('settings.streaming')}}</label>
- <ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
+ <div class="panel-body">
+ <keep-alive>
+ <tab-switcher>
+ <div :label="$t('settings.general')">
+ <div class="setting-item">
+ <h2>{{ $t('settings.interface') }}</h2>
+ <ul class="setting-list">
<li>
- <input :disabled="!streamingLocal" type="checkbox" id="pauseOnUnfocused" v-model="pauseOnUnfocusedLocal">
- <label for="pauseOnUnfocused">{{$t('settings.pause_on_unfocused')}}</label>
+ <interface-language-switcher />
+ </li>
+ <li v-if="instanceSpecificPanelPresent">
+ <input
+ id="hideISP"
+ v-model="hideISPLocal"
+ type="checkbox"
+ >
+ <label for="hideISP">{{ $t('settings.hide_isp') }}</label>
</li>
</ul>
- </li>
- <li>
- <input type="checkbox" id="autoload" v-model="autoLoadLocal">
- <label for="autoload">{{$t('settings.autoload')}}</label>
- </li>
- <li>
- <input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
- <label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
- </li>
- </ul>
- </div>
-
- <div class="setting-item">
- <h2>{{$t('settings.composing')}}</h2>
- <ul class="setting-list">
- <li>
- <input type="checkbox" id="scopeCopy" v-model="scopeCopyLocal">
- <label for="scopeCopy">
- {{$t('settings.scope_copy')}} {{$t('settings.instance_default', { value: scopeCopyDefault })}}
- </label>
- </li>
- <li>
- <input type="checkbox" id="subjectHide" v-model="alwaysShowSubjectInputLocal">
- <label for="subjectHide">
- {{$t('settings.subject_input_always_show')}} {{$t('settings.instance_default', { value: alwaysShowSubjectInputDefault })}}
- </label>
- </li>
- <li>
- <div>
- {{$t('settings.subject_line_behavior')}}
- <label for="subjectLineBehavior" class="select">
- <select id="subjectLineBehavior" v-model="subjectLineBehaviorLocal">
- <option value="email">
- {{$t('settings.subject_line_email')}}
- {{subjectLineBehaviorDefault == 'email' ? $t('settings.instance_default_simple') : ''}}
- </option>
- <option value="masto">
- {{$t('settings.subject_line_mastodon')}}
- {{subjectLineBehaviorDefault == 'mastodon' ? $t('settings.instance_default_simple') : ''}}
- </option>
- <option value="noop">
- {{$t('settings.subject_line_noop')}}
- {{subjectLineBehaviorDefault == 'noop' ? $t('settings.instance_default_simple') : ''}}
- </option>
- </select>
- <i class="icon-down-open"/>
- </label>
- </div>
- </li>
- <li v-if="postFormats.length > 0">
- <div>
- {{$t('settings.post_status_content_type')}}
- <label for="postContentType" class="select">
- <select 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>
- </select>
- <i class="icon-down-open"/>
- </label>
- </div>
- </li>
- <li>
- <input type="checkbox" id="minimalScopesMode" v-model="minimalScopesModeLocal">
- <label for="minimalScopesMode">
- {{$t('settings.minimal_scopes_mode')}} {{$t('settings.instance_default', { value: minimalScopesModeDefault })}}
- </label>
- </li>
- <li>
- <input type="checkbox" id="autohideFloatingPostButton" v-model="autohideFloatingPostButtonLocal">
- <label for="autohideFloatingPostButton">{{$t('settings.autohide_floating_post_button')}}</label>
- </li>
- </ul>
- </div>
-
- <div class="setting-item">
- <h2>{{$t('settings.attachments')}}</h2>
- <ul class="setting-list">
- <li>
- <input type="checkbox" id="hideAttachments" v-model="hideAttachmentsLocal">
- <label for="hideAttachments">{{$t('settings.hide_attachments_in_tl')}}</label>
- </li>
- <li>
- <input type="checkbox" id="hideAttachmentsInConv" v-model="hideAttachmentsInConvLocal">
- <label for="hideAttachmentsInConv">{{$t('settings.hide_attachments_in_convo')}}</label>
- </li>
- <li>
- <label for="maxThumbnails">{{$t('settings.max_thumbnails')}}</label>
- <input class="number-input" type="number" id="maxThumbnails" v-model.number="maxThumbnails" min="0" step="1">
- </li>
- <li>
- <input type="checkbox" id="hideNsfw" v-model="hideNsfwLocal">
- <label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
- </li>
- <ul class="setting-list suboptions" >
- <li>
- <input :disabled="!hideNsfwLocal" type="checkbox" id="preloadImage" v-model="preloadImage">
- <label for="preloadImage">{{$t('settings.preload_images')}}</label>
- </li>
- <li>
- <input :disabled="!hideNsfwLocal" type="checkbox" id="useOneClickNsfw" v-model="useOneClickNsfw">
- <label for="useOneClickNsfw">{{$t('settings.use_one_click_nsfw')}}</label>
- </li>
- </ul>
- <li>
- <input type="checkbox" id="stopGifs" v-model="stopGifs">
- <label for="stopGifs">{{$t('settings.stop_gifs')}}</label>
- </li>
- <li>
- <input type="checkbox" id="loopVideo" v-model="loopVideoLocal">
- <label for="loopVideo">{{$t('settings.loop_video')}}</label>
- <ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
+ </div>
+ <div class="setting-item">
+ <h2>{{ $t('nav.timeline') }}</h2>
+ <ul class="setting-list">
<li>
- <input :disabled="!loopVideoLocal || !loopSilentAvailable" type="checkbox" id="loopVideoSilentOnly" v-model="loopVideoSilentOnlyLocal">
- <label for="loopVideoSilentOnly">{{$t('settings.loop_video_silent_only')}}</label>
- <div v-if="!loopSilentAvailable" class="unavailable">
- <i class="icon-globe"/>! {{$t('settings.limited_availability')}}
+ <input
+ id="hideMutedPosts"
+ v-model="hideMutedPostsLocal"
+ type="checkbox"
+ >
+ <label for="hideMutedPosts">{{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsDefault }) }}</label>
+ </li>
+ <li>
+ <input
+ id="collapseMessageWithSubject"
+ v-model="collapseMessageWithSubjectLocal"
+ type="checkbox"
+ >
+ <label for="collapseMessageWithSubject">{{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectDefault }) }}</label>
+ </li>
+ <li>
+ <input
+ id="streaming"
+ v-model="streamingLocal"
+ type="checkbox"
+ >
+ <label for="streaming">{{ $t('settings.streaming') }}</label>
+ <ul
+ class="setting-list suboptions"
+ :class="[{disabled: !streamingLocal}]"
+ >
+ <li>
+ <input
+ id="pauseOnUnfocused"
+ v-model="pauseOnUnfocusedLocal"
+ :disabled="!streamingLocal"
+ type="checkbox"
+ >
+ <label for="pauseOnUnfocused">{{ $t('settings.pause_on_unfocused') }}</label>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <input
+ id="autoload"
+ v-model="autoLoadLocal"
+ type="checkbox"
+ >
+ <label for="autoload">{{ $t('settings.autoload') }}</label>
+ </li>
+ <li>
+ <input
+ id="hoverPreview"
+ v-model="hoverPreviewLocal"
+ type="checkbox"
+ >
+ <label for="hoverPreview">{{ $t('settings.reply_link_preview') }}</label>
+ </li>
+ </ul>
+ </div>
+
+ <div class="setting-item">
+ <h2>{{ $t('settings.composing') }}</h2>
+ <ul class="setting-list">
+ <li>
+ <input
+ id="scopeCopy"
+ v-model="scopeCopyLocal"
+ type="checkbox"
+ >
+ <label for="scopeCopy">
+ {{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyDefault }) }}
+ </label>
+ </li>
+ <li>
+ <input
+ id="subjectHide"
+ v-model="alwaysShowSubjectInputLocal"
+ type="checkbox"
+ >
+ <label for="subjectHide">
+ {{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputDefault }) }}
+ </label>
+ </li>
+ <li>
+ <div>
+ {{ $t('settings.subject_line_behavior') }}
+ <label
+ for="subjectLineBehavior"
+ class="select"
+ >
+ <select
+ id="subjectLineBehavior"
+ v-model="subjectLineBehaviorLocal"
+ >
+ <option value="email">
+ {{ $t('settings.subject_line_email') }}
+ {{ subjectLineBehaviorDefault == 'email' ? $t('settings.instance_default_simple') : '' }}
+ </option>
+ <option value="masto">
+ {{ $t('settings.subject_line_mastodon') }}
+ {{ subjectLineBehaviorDefault == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
+ </option>
+ <option value="noop">
+ {{ $t('settings.subject_line_noop') }}
+ {{ subjectLineBehaviorDefault == 'noop' ? $t('settings.instance_default_simple') : '' }}
+ </option>
+ </select>
+ <i class="icon-down-open" />
+ </label>
+ </div>
+ </li>
+ <li v-if="postFormats.length > 0">
+ <div>
+ {{ $t('settings.post_status_content_type') }}
+ <label
+ for="postContentType"
+ class="select"
+ >
+ <select
+ 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>
+ </select>
+ <i class="icon-down-open" />
+ </label>
</div>
</li>
- </ul>
- </li>
- <li>
- <input type="checkbox" id="playVideosInModal" v-model="playVideosInModal">
- <label for="playVideosInModal">{{$t('settings.play_videos_in_modal')}}</label>
- </li>
- <li>
- <input type="checkbox" id="useContainFit" v-model="useContainFit">
- <label for="useContainFit">{{$t('settings.use_contain_fit')}}</label>
- </li>
- </ul>
- </div>
-
- <div class="setting-item">
- <h2>{{$t('settings.notifications')}}</h2>
- <ul class="setting-list">
- <li>
- <input type="checkbox" id="webPushNotifications" v-model="webPushNotificationsLocal">
- <label for="webPushNotifications">
- {{$t('settings.enable_web_push_notifications')}}
- </label>
- </li>
- </ul>
- </div>
- </div>
-
- <div :label="$t('settings.theme')" >
- <div class="setting-item">
- <style-switcher></style-switcher>
- </div>
- </div>
-
- <div :label="$t('settings.filtering')" >
- <div class="setting-item">
- <div class="select-multiple">
- <span class="label">{{$t('settings.notification_visibility')}}</span>
- <ul class="option-list">
- <li>
- <input type="checkbox" id="notification-visibility-likes" v-model="notificationVisibilityLocal.likes">
- <label for="notification-visibility-likes">
- {{$t('settings.notification_visibility_likes')}}
- </label>
- </li>
- <li>
- <input type="checkbox" id="notification-visibility-repeats" v-model="notificationVisibilityLocal.repeats">
- <label for="notification-visibility-repeats">
- {{$t('settings.notification_visibility_repeats')}}
- </label>
- </li>
- <li>
- <input type="checkbox" id="notification-visibility-follows" v-model="notificationVisibilityLocal.follows">
- <label for="notification-visibility-follows">
- {{$t('settings.notification_visibility_follows')}}
- </label>
- </li>
- <li>
- <input type="checkbox" id="notification-visibility-mentions" v-model="notificationVisibilityLocal.mentions">
- <label for="notification-visibility-mentions">
- {{$t('settings.notification_visibility_mentions')}}
- </label>
- </li>
- </ul>
- </div>
- <div>
- {{$t('settings.replies_in_timeline')}}
- <label for="replyVisibility" class="select">
- <select 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>
- <i class="icon-down-open"/>
- </label>
- </div>
- <div>
- <input type="checkbox" id="hidePostStats" v-model="hidePostStatsLocal">
- <label for="hidePostStats">
- {{$t('settings.hide_post_stats')}} {{$t('settings.instance_default', { value: hidePostStatsDefault })}}
- </label>
- </div>
- <div>
- <input type="checkbox" id="hideUserStats" v-model="hideUserStatsLocal">
- <label for="hideUserStats">
- {{$t('settings.hide_user_stats')}} {{$t('settings.instance_default', { value: hideUserStatsDefault })}}
- </label>
- </div>
- </div>
- <div class="setting-item">
- <div>
- <p>{{$t('settings.filtering_explanation')}}</p>
- <textarea id="muteWords" v-model="muteWordsString"></textarea>
- </div>
- <div>
- <input type="checkbox" id="hideFilteredStatuses" v-model="hideFilteredStatusesLocal">
- <label for="hideFilteredStatuses">
- {{$t('settings.hide_filtered_statuses')}} {{$t('settings.instance_default', { value: hideFilteredStatusesDefault })}}
- </label>
- </div>
- </div>
- </div>
- <div :label="$t('settings.version.title')" >
- <div class="setting-item">
- <ul class="setting-list">
- <li>
- <p>{{$t('settings.version.backend_version')}}</p>
- <ul class="option-list">
<li>
- <a :href="backendVersionLink" target="_blank">{{backendVersion}}</a>
+ <input
+ id="minimalScopesMode"
+ v-model="minimalScopesModeLocal"
+ type="checkbox"
+ >
+ <label for="minimalScopesMode">
+ {{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeDefault }) }}
+ </label>
+ </li>
+ <li>
+ <input
+ id="autohideFloatingPostButton"
+ v-model="autohideFloatingPostButtonLocal"
+ type="checkbox"
+ >
+ <label for="autohideFloatingPostButton">{{ $t('settings.autohide_floating_post_button') }}</label>
</li>
</ul>
- </li>
- <li>
- <p>{{$t('settings.version.frontend_version')}}</p>
- <ul class="option-list">
+ </div>
+
+ <div class="setting-item">
+ <h2>{{ $t('settings.attachments') }}</h2>
+ <ul class="setting-list">
<li>
- <a :href="frontendVersionLink" target="_blank">{{frontendVersion}}</a>
+ <input
+ id="hideAttachments"
+ v-model="hideAttachmentsLocal"
+ type="checkbox"
+ >
+ <label for="hideAttachments">{{ $t('settings.hide_attachments_in_tl') }}</label>
+ </li>
+ <li>
+ <input
+ id="hideAttachmentsInConv"
+ v-model="hideAttachmentsInConvLocal"
+ type="checkbox"
+ >
+ <label for="hideAttachmentsInConv">{{ $t('settings.hide_attachments_in_convo') }}</label>
+ </li>
+ <li>
+ <label for="maxThumbnails">{{ $t('settings.max_thumbnails') }}</label>
+ <input
+ id="maxThumbnails"
+ v-model.number="maxThumbnails"
+ class="number-input"
+ type="number"
+ min="0"
+ step="1"
+ >
+ </li>
+ <li>
+ <input
+ id="hideNsfw"
+ v-model="hideNsfwLocal"
+ type="checkbox"
+ >
+ <label for="hideNsfw">{{ $t('settings.nsfw_clickthrough') }}</label>
+ </li>
+ <ul class="setting-list suboptions">
+ <li>
+ <input
+ id="preloadImage"
+ v-model="preloadImage"
+ :disabled="!hideNsfwLocal"
+ type="checkbox"
+ >
+ <label for="preloadImage">{{ $t('settings.preload_images') }}</label>
+ </li>
+ <li>
+ <input
+ id="useOneClickNsfw"
+ v-model="useOneClickNsfw"
+ :disabled="!hideNsfwLocal"
+ type="checkbox"
+ >
+ <label for="useOneClickNsfw">{{ $t('settings.use_one_click_nsfw') }}</label>
+ </li>
+ </ul>
+ <li>
+ <input
+ id="stopGifs"
+ v-model="stopGifs"
+ type="checkbox"
+ >
+ <label for="stopGifs">{{ $t('settings.stop_gifs') }}</label>
+ </li>
+ <li>
+ <input
+ id="loopVideo"
+ v-model="loopVideoLocal"
+ type="checkbox"
+ >
+ <label for="loopVideo">{{ $t('settings.loop_video') }}</label>
+ <ul
+ class="setting-list suboptions"
+ :class="[{disabled: !streamingLocal}]"
+ >
+ <li>
+ <input
+ id="loopVideoSilentOnly"
+ v-model="loopVideoSilentOnlyLocal"
+ :disabled="!loopVideoLocal || !loopSilentAvailable"
+ 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>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <input
+ id="playVideosInModal"
+ v-model="playVideosInModal"
+ type="checkbox"
+ >
+ <label for="playVideosInModal">{{ $t('settings.play_videos_in_modal') }}</label>
+ </li>
+ <li>
+ <input
+ id="useContainFit"
+ v-model="useContainFit"
+ type="checkbox"
+ >
+ <label for="useContainFit">{{ $t('settings.use_contain_fit') }}</label>
</li>
</ul>
- </li>
- </ul>
- </div>
- </div>
- </tab-switcher>
-</keep-alive>
+ </div>
+
+ <div class="setting-item">
+ <h2>{{ $t('settings.notifications') }}</h2>
+ <ul class="setting-list">
+ <li>
+ <input
+ id="webPushNotifications"
+ v-model="webPushNotificationsLocal"
+ type="checkbox"
+ >
+ <label for="webPushNotifications">
+ {{ $t('settings.enable_web_push_notifications') }}
+ </label>
+ </li>
+ </ul>
+ </div>
+ </div>
+
+ <div :label="$t('settings.theme')">
+ <div class="setting-item">
+ <style-switcher />
+ </div>
+ </div>
+
+ <div :label="$t('settings.filtering')">
+ <div class="setting-item">
+ <div class="select-multiple">
+ <span class="label">{{ $t('settings.notification_visibility') }}</span>
+ <ul class="option-list">
+ <li>
+ <input
+ id="notification-visibility-likes"
+ v-model="notificationVisibilityLocal.likes"
+ type="checkbox"
+ >
+ <label for="notification-visibility-likes">
+ {{ $t('settings.notification_visibility_likes') }}
+ </label>
+ </li>
+ <li>
+ <input
+ id="notification-visibility-repeats"
+ v-model="notificationVisibilityLocal.repeats"
+ type="checkbox"
+ >
+ <label for="notification-visibility-repeats">
+ {{ $t('settings.notification_visibility_repeats') }}
+ </label>
+ </li>
+ <li>
+ <input
+ id="notification-visibility-follows"
+ v-model="notificationVisibilityLocal.follows"
+ type="checkbox"
+ >
+ <label for="notification-visibility-follows">
+ {{ $t('settings.notification_visibility_follows') }}
+ </label>
+ </li>
+ <li>
+ <input
+ id="notification-visibility-mentions"
+ v-model="notificationVisibilityLocal.mentions"
+ type="checkbox"
+ >
+ <label for="notification-visibility-mentions">
+ {{ $t('settings.notification_visibility_mentions') }}
+ </label>
+ </li>
+ </ul>
+ </div>
+ <div>
+ {{ $t('settings.replies_in_timeline') }}
+ <label
+ for="replyVisibility"
+ class="select"
+ >
+ <select
+ 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>
+ <i class="icon-down-open" />
+ </label>
+ </div>
+ <div>
+ <input
+ id="hidePostStats"
+ v-model="hidePostStatsLocal"
+ type="checkbox"
+ >
+ <label for="hidePostStats">
+ {{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsDefault }) }}
+ </label>
+ </div>
+ <div>
+ <input
+ id="hideUserStats"
+ v-model="hideUserStatsLocal"
+ type="checkbox"
+ >
+ <label for="hideUserStats">
+ {{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsDefault }) }}
+ </label>
+ </div>
+ </div>
+ <div class="setting-item">
+ <div>
+ <p>{{ $t('settings.filtering_explanation') }}</p>
+ <textarea
+ id="muteWords"
+ v-model="muteWordsString"
+ />
+ </div>
+ <div>
+ <input
+ id="hideFilteredStatuses"
+ v-model="hideFilteredStatusesLocal"
+ type="checkbox"
+ >
+ <label for="hideFilteredStatuses">
+ {{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesDefault }) }}
+ </label>
+ </div>
+ </div>
+ </div>
+ <div :label="$t('settings.version.title')">
+ <div class="setting-item">
+ <ul class="setting-list">
+ <li>
+ <p>{{ $t('settings.version.backend_version') }}</p>
+ <ul class="option-list">
+ <li>
+ <a
+ :href="backendVersionLink"
+ target="_blank"
+ >{{ backendVersion }}</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <p>{{ $t('settings.version.frontend_version') }}</p>
+ <ul class="option-list">
+ <li>
+ <a
+ :href="frontendVersionLink"
+ target="_blank"
+ >{{ frontendVersion }}</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </tab-switcher>
+ </keep-alive>
+ </div>
</div>
-</div>
</template>
<script src="./settings.js">
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 744925d4..de8a42d1 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -1,134 +1,207 @@
<template>
-<div class="shadow-control" :class="{ disabled: !present }">
- <div class="shadow-preview-container">
- <div :disabled="!present" class="y-shift-control">
- <input
- v-model="selected.y"
+ <div
+ class="shadow-control"
+ :class="{ disabled: !present }"
+ >
+ <div class="shadow-preview-container">
+ <div
:disabled="!present"
- class="input-number"
- type="number">
- <div class="wrap">
+ class="y-shift-control"
+ >
<input
v-model="selected.y"
:disabled="!present"
- class="input-range"
- type="range"
- max="20"
- min="-20">
+ class="input-number"
+ type="number"
+ >
+ <div class="wrap">
+ <input
+ v-model="selected.y"
+ :disabled="!present"
+ class="input-range"
+ type="range"
+ max="20"
+ min="-20"
+ >
+ </div>
</div>
- </div>
- <div class="preview-window">
- <div class="preview-block" :style="style"></div>
- </div>
- <div :disabled="!present" class="x-shift-control">
- <input
- v-model="selected.x"
+ <div class="preview-window">
+ <div
+ class="preview-block"
+ :style="style"
+ />
+ </div>
+ <div
:disabled="!present"
- class="input-number"
- type="number">
- <div class="wrap">
+ class="x-shift-control"
+ >
<input
v-model="selected.x"
:disabled="!present"
+ class="input-number"
+ type="number"
+ >
+ <div class="wrap">
+ <input
+ v-model="selected.x"
+ :disabled="!present"
+ class="input-range"
+ type="range"
+ max="20"
+ min="-20"
+ >
+ </div>
+ </div>
+ </div>
+
+ <div class="shadow-tweak">
+ <div
+ :disabled="usingFallback"
+ class="id-control style-control"
+ >
+ <label
+ for="shadow-switcher"
+ class="select"
+ :disabled="!ready || usingFallback"
+ >
+ <select
+ id="shadow-switcher"
+ v-model="selectedId"
+ class="shadow-switcher"
+ :disabled="!ready || usingFallback"
+ >
+ <option
+ v-for="(shadow, index) in cValue"
+ :key="index"
+ :value="index"
+ >
+ {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
+ </option>
+ </select>
+ <i class="icon-down-open" />
+ </label>
+ <button
+ class="btn btn-default"
+ :disabled="!ready || !present"
+ @click="del"
+ >
+ <i class="icon-cancel" />
+ </button>
+ <button
+ class="btn btn-default"
+ :disabled="!moveUpValid"
+ @click="moveUp"
+ >
+ <i class="icon-up-open" />
+ </button>
+ <button
+ class="btn btn-default"
+ :disabled="!moveDnValid"
+ @click="moveDn"
+ >
+ <i class="icon-down-open" />
+ </button>
+ <button
+ class="btn btn-default"
+ :disabled="usingFallback"
+ @click="add"
+ >
+ <i class="icon-plus" />
+ </button>
+ </div>
+ <div
+ :disabled="!present"
+ class="inset-control style-control"
+ >
+ <label
+ for="inset"
+ class="label"
+ >
+ {{ $t('settings.style.shadows.inset') }}
+ </label>
+ <input
+ id="inset"
+ v-model="selected.inset"
+ :disabled="!present"
+ name="inset"
+ class="input-inset"
+ type="checkbox"
+ >
+ <label
+ class="checkbox-label"
+ for="inset"
+ />
+ </div>
+ <div
+ :disabled="!present"
+ class="blur-control style-control"
+ >
+ <label
+ for="spread"
+ class="label"
+ >
+ {{ $t('settings.style.shadows.blur') }}
+ </label>
+ <input
+ id="blur"
+ v-model="selected.blur"
+ :disabled="!present"
+ name="blur"
class="input-range"
type="range"
max="20"
- min="-20">
+ min="0"
+ >
+ <input
+ v-model="selected.blur"
+ :disabled="!present"
+ class="input-number"
+ type="number"
+ min="0"
+ >
</div>
+ <div
+ :disabled="!present"
+ class="spread-control style-control"
+ >
+ <label
+ for="spread"
+ class="label"
+ >
+ {{ $t('settings.style.shadows.spread') }}
+ </label>
+ <input
+ id="spread"
+ v-model="selected.spread"
+ :disabled="!present"
+ name="spread"
+ class="input-range"
+ type="range"
+ max="20"
+ min="-20"
+ >
+ <input
+ v-model="selected.spread"
+ :disabled="!present"
+ class="input-number"
+ type="number"
+ >
+ </div>
+ <ColorInput
+ v-model="selected.color"
+ :disabled="!present"
+ :label="$t('settings.style.common.color')"
+ name="shadow"
+ />
+ <OpacityInput
+ v-model="selected.alpha"
+ :disabled="!present"
+ />
+ <p>
+ {{ $t('settings.style.shadows.hint') }}
+ </p>
</div>
</div>
-
- <div class="shadow-tweak">
- <div :disabled="usingFallback" class="id-control style-control">
- <label for="shadow-switcher" class="select" :disabled="!ready || usingFallback">
- <select
- v-model="selectedId" class="shadow-switcher"
- :disabled="!ready || usingFallback"
- id="shadow-switcher">
- <option v-for="(shadow, index) in cValue" :value="index">
- {{$t('settings.style.shadows.shadow_id', { value: index })}}
- </option>
- </select>
- <i class="icon-down-open"/>
- </label>
- <button class="btn btn-default" :disabled="!ready || !present" @click="del">
- <i class="icon-cancel"/>
- </button>
- <button class="btn btn-default" :disabled="!moveUpValid" @click="moveUp">
- <i class="icon-up-open"/>
- </button>
- <button class="btn btn-default" :disabled="!moveDnValid" @click="moveDn">
- <i class="icon-down-open"/>
- </button>
- <button class="btn btn-default" :disabled="usingFallback" @click="add">
- <i class="icon-plus"/>
- </button>
- </div>
- <div :disabled="!present" class="inset-control style-control">
- <label for="inset" class="label">
- {{$t('settings.style.shadows.inset')}}
- </label>
- <input
- v-model="selected.inset"
- :disabled="!present"
- name="inset"
- id="inset"
- class="input-inset"
- type="checkbox">
- <label class="checkbox-label" for="inset"></label>
- </div>
- <div :disabled="!present" class="blur-control style-control">
- <label for="spread" class="label">
- {{$t('settings.style.shadows.blur')}}
- </label>
- <input
- v-model="selected.blur"
- :disabled="!present"
- name="blur"
- id="blur"
- class="input-range"
- type="range"
- max="20"
- min="0">
- <input
- v-model="selected.blur"
- :disabled="!present"
- class="input-number"
- type="number"
- min="0">
- </div>
- <div :disabled="!present" class="spread-control style-control">
- <label for="spread" class="label">
- {{$t('settings.style.shadows.spread')}}
- </label>
- <input
- v-model="selected.spread"
- :disabled="!present"
- name="spread"
- id="spread"
- class="input-range"
- type="range"
- max="20"
- min="-20">
- <input
- v-model="selected.spread"
- :disabled="!present"
- class="input-number"
- type="number">
- </div>
- <ColorInput
- v-model="selected.color"
- :disabled="!present"
- :label="$t('settings.style.common.color')"
- name="shadow"/>
- <OpacityInput
- v-model="selected.alpha"
- :disabled="!present"/>
- <p>
- {{$t('settings.style.shadows.hint')}}
- </p>
- </div>
-</div>
</template>
<script src="./shadow_control.js" ></script>
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 6428b1b0..80b75ce5 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -1,63 +1,98 @@
<template>
- <div class="side-drawer-container"
+ <div
+ class="side-drawer-container"
:class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
>
- <div class="side-drawer-darken" :class="{ 'side-drawer-darken-closed': closed}" />
- <div class="side-drawer"
+ <div
+ class="side-drawer-darken"
+ :class="{ 'side-drawer-darken-closed': closed}"
+ />
+ <div
+ class="side-drawer"
:class="{'side-drawer-closed': closed}"
@touchstart="touchStart"
@touchmove="touchMove"
>
- <div class="side-drawer-heading" @click="toggleDrawer">
- <UserCard :user="currentUser" :hideBio="true" v-if="currentUser"/>
- <div class="side-drawer-logo-wrapper" v-else>
- <img :src="logo"/>
- <span>{{sitename}}</span>
+ <div
+ class="side-drawer-heading"
+ @click="toggleDrawer"
+ >
+ <UserCard
+ v-if="currentUser"
+ :user="currentUser"
+ :hide-bio="true"
+ />
+ <div
+ v-else
+ class="side-drawer-logo-wrapper"
+ >
+ <img :src="logo">
+ <span>{{ sitename }}</span>
</div>
</div>
<ul>
- <li v-if="!currentUser" @click="toggleDrawer">
+ <li
+ v-if="!currentUser"
+ @click="toggleDrawer"
+ >
<router-link :to="{ name: 'login' }">
{{ $t("login.login") }}
</router-link>
</li>
- <li v-if="currentUser" @click="toggleDrawer">
+ <li
+ v-if="currentUser"
+ @click="toggleDrawer"
+ >
<router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
{{ $t("nav.dms") }}
</router-link>
</li>
- <li v-if="currentUser" @click="toggleDrawer">
+ <li
+ v-if="currentUser"
+ @click="toggleDrawer"
+ >
<router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
{{ $t("nav.interactions") }}
</router-link>
</li>
</ul>
<ul>
- <li v-if="currentUser" @click="toggleDrawer">
+ <li
+ v-if="currentUser"
+ @click="toggleDrawer"
+ >
<router-link :to="{ name: 'friends' }">
{{ $t("nav.timeline") }}
</router-link>
</li>
- <li v-if="currentUser && currentUser.locked" @click="toggleDrawer">
- <router-link to='/friend-requests'>
+ <li
+ v-if="currentUser && currentUser.locked"
+ @click="toggleDrawer"
+ >
+ <router-link to="/friend-requests">
{{ $t("nav.friend_requests") }}
- <span v-if='followRequestCount > 0' class="badge follow-request-count">
- {{followRequestCount}}
+ <span
+ v-if="followRequestCount > 0"
+ class="badge follow-request-count"
+ >
+ {{ followRequestCount }}
</span>
-
</router-link>
</li>
<li @click="toggleDrawer">
- <router-link to='/main/public'>
+ <router-link to="/main/public">
{{ $t("nav.public_tl") }}
</router-link>
</li>
<li @click="toggleDrawer">
- <router-link to='/main/all'>
+ <router-link to="/main/all">
{{ $t("nav.twkn") }}
</router-link>
</li>
- <li v-if="currentUser && chat" @click="toggleDrawer">
+ <li
+ v-if="currentUser && chat"
+ @click="toggleDrawer"
+ >
<router-link :to="{ name: 'chat' }">
{{ $t("nav.chat") }}
</router-link>
@@ -69,7 +104,10 @@
{{ $t("nav.user_search") }}
</router-link>
</li>
- <li v-if="currentUser && suggestionsEnabled" @click="toggleDrawer">
+ <li
+ v-if="currentUser && suggestionsEnabled"
+ @click="toggleDrawer"
+ >
<router-link :to="{ name: 'who-to-follow' }">
{{ $t("nav.who_to_follow") }}
</router-link>
@@ -84,17 +122,24 @@
{{ $t("nav.about") }}
</router-link>
</li>
- <li v-if="currentUser" @click="toggleDrawer">
- <a @click="doLogout" href="#">
+ <li
+ v-if="currentUser"
+ @click="toggleDrawer"
+ >
+ <a
+ href="#"
+ @click="doLogout"
+ >
{{ $t("login.logout") }}
</a>
</li>
</ul>
</div>
- <div class="side-drawer-click-outside"
- @click.stop.prevent="toggleDrawer"
+ <div
+ class="side-drawer-click-outside"
:class="{'side-drawer-click-outside-closed': closed}"
- ></div>
+ @click.stop.prevent="toggleDrawer"
+ />
</div>
</template>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index d2452935..199351cb 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -221,7 +221,7 @@ const Status = {
? this.$store.state.instance.subjectLineBehavior
: this.$store.state.config.subjectLineBehavior
const startsWithRe = decodedSummary.match(/^re[: ]/i)
- if (behavior !== 'noop' && startsWithRe || behavior === 'masto') {
+ if ((behavior !== 'noop' && startsWithRe) || behavior === 'masto') {
return decodedSummary
} else if (behavior === 'email') {
return 're: '.concat(decodedSummary)
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index b16d8694..30969256 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -1,190 +1,431 @@
<template>
- <div class="status-el" v-if="!hideStatus" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
- <div v-if="error" class="alert error">
- {{error}}
- <i class="button-icon icon-cancel" @click="clearError"></i>
+ <!-- eslint-disable vue/no-v-html -->
+ <div
+ v-if="!hideStatus"
+ class="status-el"
+ :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]"
+ >
+ <div
+ v-if="error"
+ class="alert error"
+ >
+ {{ error }}
+ <i
+ class="button-icon icon-cancel"
+ @click="clearError"
+ />
</div>
<template v-if="muted && !isPreview">
<div class="media status container muted">
<small>
<router-link :to="userProfileLink">
- {{status.user.screen_name}}
+ {{ status.user.screen_name }}
</router-link>
</small>
- <small class="muteWords">{{muteWordHits.join(', ')}}</small>
- <a href="#" class="unmute" @click.prevent="toggleMute"><i class="button-icon icon-eye-off"></i></a>
+ <small class="muteWords">{{ muteWordHits.join(', ') }}</small>
+ <a
+ href="#"
+ class="unmute"
+ @click.prevent="toggleMute"
+ ><i class="button-icon icon-eye-off" /></a>
</div>
</template>
<template v-else>
- <div v-if="showPinned && statusoid.pinned" class="status-pin">
- <i class="fa icon-pin faint"></i>
- <span class="faint">{{$t('status.pinned')}}</span>
+ <div
+ v-if="showPinned && statusoid.pinned"
+ class="status-pin"
+ >
+ <i class="fa icon-pin faint" />
+ <span class="faint">{{ $t('status.pinned') }}</span>
</div>
- <div v-if="retweet && !noHeading && !inConversation" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
- <UserAvatar class="media-left" v-if="retweet" :betterShadow="betterShadow" :user="statusoid.user"/>
+ <div
+ v-if="retweet && !noHeading && !inConversation"
+ :class="[repeaterClass, { highlighted: repeaterStyle }]"
+ :style="[repeaterStyle]"
+ class="media container retweet-info"
+ >
+ <UserAvatar
+ v-if="retweet"
+ class="media-left"
+ :better-shadow="betterShadow"
+ :user="statusoid.user"
+ />
<div class="media-body faint">
<span class="user-name">
- <router-link v-if="retweeterHtml" :to="retweeterProfileLink" v-html="retweeterHtml"/>
- <router-link v-else :to="retweeterProfileLink">{{retweeter}}</router-link>
+ <router-link
+ v-if="retweeterHtml"
+ :to="retweeterProfileLink"
+ v-html="retweeterHtml"
+ />
+ <router-link
+ v-else
+ :to="retweeterProfileLink"
+ >{{ retweeter }}</router-link>
</span>
- <i class='fa icon-retweet retweeted' :title="$t('tool_tip.repeat')"></i>
- {{$t('timeline.repeated')}}
+ <i
+ class="fa icon-retweet retweeted"
+ :title="$t('tool_tip.repeat')"
+ />
+ {{ $t('timeline.repeated') }}
</div>
</div>
- <div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet && !inConversation }]" :style="[ userStyle ]" class="media status" :data-tags="tags">
- <div v-if="!noHeading" class="media-left">
- <router-link :to="userProfileLink" @click.stop.prevent.capture.native="toggleUserExpanded">
- <UserAvatar :compact="compact" :betterShadow="betterShadow" :user="status.user"/>
+ <div
+ :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet && !inConversation }]"
+ :style="[ userStyle ]"
+ class="media status"
+ :data-tags="tags"
+ >
+ <div
+ v-if="!noHeading"
+ class="media-left"
+ >
+ <router-link
+ :to="userProfileLink"
+ @click.stop.prevent.capture.native="toggleUserExpanded"
+ >
+ <UserAvatar
+ :compact="compact"
+ :better-shadow="betterShadow"
+ :user="status.user"
+ />
</router-link>
</div>
<div class="status-body">
- <UserCard :user="status.user" :rounded="true" :bordered="true" class="status-usercard" v-if="userExpanded"/>
- <div v-if="!noHeading" class="media-heading">
+ <UserCard
+ v-if="userExpanded"
+ :user="status.user"
+ :rounded="true"
+ :bordered="true"
+ class="status-usercard"
+ />
+ <div
+ v-if="!noHeading"
+ class="media-heading"
+ >
<div class="heading-name-row">
<div class="name-and-account-name">
- <h4 class="user-name" v-if="status.user.name_html" v-html="status.user.name_html"></h4>
- <h4 class="user-name" v-else>{{status.user.name}}</h4>
- <router-link class="account-name" :to="userProfileLink">
- {{status.user.screen_name}}
+ <h4
+ v-if="status.user.name_html"
+ class="user-name"
+ v-html="status.user.name_html"
+ />
+ <h4
+ v-else
+ class="user-name"
+ >
+ {{ status.user.name }}
+ </h4>
+ <router-link
+ class="account-name"
+ :to="userProfileLink"
+ >
+ {{ status.user.screen_name }}
</router-link>
</div>
<span class="heading-right">
- <router-link class="timeago faint-link" :to="{ name: 'conversation', params: { id: status.id } }">
- <Timeago :time="status.created_at" :auto-update="60"></Timeago>
+ <router-link
+ class="timeago faint-link"
+ :to="{ name: 'conversation', params: { id: status.id } }"
+ >
+ <Timeago
+ :time="status.created_at"
+ :auto-update="60"
+ />
</router-link>
- <div class="button-icon visibility-icon" v-if="status.visibility">
- <i :class="visibilityIcon(status.visibility)" :title="status.visibility | capitalize"></i>
+ <div
+ v-if="status.visibility"
+ class="button-icon visibility-icon"
+ >
+ <i
+ :class="visibilityIcon(status.visibility)"
+ :title="status.visibility | capitalize"
+ />
</div>
- <a :href="status.external_url" target="_blank" v-if="!status.is_local && !isPreview" class="source_url" title="Source">
- <i class="button-icon icon-link-ext-alt"></i>
+ <a
+ v-if="!status.is_local && !isPreview"
+ :href="status.external_url"
+ target="_blank"
+ class="source_url"
+ title="Source"
+ >
+ <i class="button-icon icon-link-ext-alt" />
</a>
<template v-if="expandable && !isPreview">
- <a href="#" @click.prevent="toggleExpanded" title="Expand">
- <i class="button-icon icon-plus-squared"></i>
+ <a
+ href="#"
+ title="Expand"
+ @click.prevent="toggleExpanded"
+ >
+ <i class="button-icon icon-plus-squared" />
</a>
</template>
- <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="button-icon icon-eye-off"></i></a>
+ <a
+ v-if="unmuted"
+ href="#"
+ @click.prevent="toggleMute"
+ ><i class="button-icon icon-eye-off" /></a>
</span>
</div>
<div class="heading-reply-row">
- <div v-if="isReply" class="reply-to-and-accountname">
- <a class="reply-to"
- href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
+ <div
+ v-if="isReply"
+ class="reply-to-and-accountname"
+ >
+ <a
+ class="reply-to"
+ href="#"
: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)"
@mouseleave.prevent.stop="replyLeave()"
>
- <i class="button-icon icon-reply" v-if="!isPreview"></i>
- <span class="faint-link reply-to-text">{{$t('status.reply_to')}}</span>
+ <i
+ v-if="!isPreview"
+ class="button-icon icon-reply"
+ />
+ <span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
</a>
<router-link :to="replyProfileLink">
- {{replyToName}}
+ {{ replyToName }}
</router-link>
- <span class="faint replies-separator" v-if="replies && replies.length">
+ <span
+ v-if="replies && replies.length"
+ class="faint replies-separator"
+ >
-
</span>
</div>
- <div class="replies" v-if="inConversation && !isPreview">
- <span class="faint" v-if="replies && replies.length">{{$t('status.replies_list')}}</span>
- <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>
+ <div
+ v-if="inConversation && !isPreview"
+ class="replies"
+ >
+ <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.id"
+ class="reply-link faint"
+ >
+ <a
+ href="#"
+ @click.prevent="gotoOriginal(reply.id)"
+ @mouseenter="replyEnter(reply.id, $event)"
+ @mouseout="replyLeave()"
+ >{{ reply.name }}</a>
+ </span>
+ </template>
</div>
</div>
-
-
</div>
- <div v-if="showPreview" class="status-preview-container">
- <status class="status-preview"
+ <div
+ v-if="showPreview"
+ class="status-preview-container"
+ >
+ <status
v-if="preview"
- :isPreview="true"
+ 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"></i>
+ <div
+ v-else
+ class="status-preview status-preview-loading"
+ >
+ <i class="icon-spin4 animate-spin" />
</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
+ 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 :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
+ 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 v-if="status.poll && status.poll.options">
<poll :base-poll="status.poll" />
</div>
- <div v-if="status.attachments && (!hideSubjectStatus || showingLongSubject)" class="attachments media-body">
+ <div
+ v-if="status.attachments && (!hideSubjectStatus || showingLongSubject)"
+ class="attachments media-body"
+ >
<attachment
- class="non-gallery"
v-for="attachment in nonGalleryAttachments"
+ :key="attachment.id"
+ class="non-gallery"
:size="attachmentSize"
:nsfw="nsfwClickthrough"
:attachment="attachment"
- :allowPlay="true"
- :setMedia="setMedia()"
- :key="attachment.id"
+ :allow-play="true"
+ :set-media="setMedia()"
/>
<gallery
v-if="galleryAttachments.length > 0"
:nsfw="nsfwClickthrough"
:attachments="galleryAttachments"
- :setMedia="setMedia()"
+ :set-media="setMedia()"
/>
</div>
- <div v-if="status.card && !hideSubjectStatus && !noHeading" class="link-preview media-body">
- <link-preview :card="status.card" :size="attachmentSize" :nsfw="nsfwClickthrough" />
+ <div
+ v-if="status.card && !hideSubjectStatus && !noHeading"
+ class="link-preview media-body"
+ >
+ <link-preview
+ :card="status.card"
+ :size="attachmentSize"
+ :nsfw="nsfwClickthrough"
+ />
</div>
<transition name="fade">
- <div class="favs-repeated-users" v-if="isFocused && combinedFavsAndRepeatsUsers.length > 0">
+ <div
+ v-if="isFocused && combinedFavsAndRepeatsUsers.length > 0"
+ class="favs-repeated-users"
+ >
<div class="stats">
- <div class="stat-count" v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0">
+ <div
+ v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0"
+ class="stat-count"
+ >
<a class="stat-title">{{ $t('status.repeats') }}</a>
- <div class="stat-number">{{ statusFromGlobalRepository.rebloggedBy.length }}</div>
+ <div class="stat-number">
+ {{ statusFromGlobalRepository.rebloggedBy.length }}
+ </div>
</div>
- <div class="stat-count" v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0">
+ <div
+ v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0"
+ class="stat-count"
+ >
<a class="stat-title">{{ $t('status.favorites') }}</a>
- <div class="stat-number">{{ statusFromGlobalRepository.favoritedBy.length }}</div>
+ <div class="stat-number">
+ {{ statusFromGlobalRepository.favoritedBy.length }}
+ </div>
</div>
<div class="avatar-row">
- <AvatarList :users="combinedFavsAndRepeatsUsers"></AvatarList>
+ <AvatarList :users="combinedFavsAndRepeatsUsers" />
</div>
</div>
</div>
</transition>
- <div v-if="!noHeading && !isPreview" class='status-actions media-body'>
+ <div
+ v-if="!noHeading && !isPreview"
+ class="status-actions media-body"
+ >
<div>
- <i class="button-icon icon-reply" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')" :class="{'button-icon-active': replying}" v-if="loggedIn"/>
- <i class="button-icon button-icon-disabled icon-reply" :title="$t('tool_tip.reply')" v-else />
- <span v-if="status.replies_count > 0">{{status.replies_count}}</span>
+ <i
+ v-if="loggedIn"
+ class="button-icon icon-reply"
+ :title="$t('tool_tip.reply')"
+ :class="{'button-icon-active': replying}"
+ @click.prevent="toggleReplying"
+ />
+ <i
+ v-else
+ class="button-icon button-icon-disabled icon-reply"
+ :title="$t('tool_tip.reply')"
+ />
+ <span v-if="status.replies_count > 0">{{ status.replies_count }}</span>
</div>
- <retweet-button :visibility='status.visibility' :loggedIn='loggedIn' :status='status'></retweet-button>
- <favorite-button :loggedIn='loggedIn' :status='status'></favorite-button>
- <extra-buttons :status="status" @onError="showError" @onSuccess="clearError"></extra-buttons>
+ <retweet-button
+ :visibility="status.visibility"
+ :logged-in="loggedIn"
+ :status="status"
+ />
+ <favorite-button
+ :logged-in="loggedIn"
+ :status="status"
+ />
+ <extra-buttons
+ :status="status"
+ @onError="showError"
+ @onSuccess="clearError"
+ />
</div>
</div>
</div>
- <div class="container" v-if="replying">
- <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
+ v-if="replying"
+ class="container"
+ >
+ <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>
</template>
</div>
+<!-- eslint-enable vue/no-v-html -->
</template>
<script src="./status.js" ></script>
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index af824fa2..3fff63f9 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -1,7 +1,19 @@
<template>
- <div class='still-image' :class='{ animated: animated }' >
- <canvas ref="canvas" v-if="animated"></canvas>
- <img ref="src" :src="src" :referrerpolicy="referrerpolicy" v-on:load="onLoad" @error="onError"/>
+ <div
+ class="still-image"
+ :class="{ animated: animated }"
+ >
+ <canvas
+ v-if="animated"
+ ref="canvas"
+ />
+ <img
+ ref="src"
+ :src="src"
+ :referrerpolicy="referrerpolicy"
+ @load="onLoad"
+ @error="onError"
+ >
</div>
</template>
diff --git a/src/components/style_switcher/preview.vue b/src/components/style_switcher/preview.vue
index 634f5b35..101a32bd 100644
--- a/src/components/style_switcher/preview.vue
+++ b/src/components/style_switcher/preview.vue
@@ -1,78 +1,101 @@
<template>
-<div class="panel dummy">
- <div class="panel-heading">
- <div class="title">
- {{$t('settings.style.preview.header')}}
- <span class="badge badge-notification">
- 99
+ <div class="panel dummy">
+ <div class="panel-heading">
+ <div class="title">
+ {{ $t('settings.style.preview.header') }}
+ <span class="badge badge-notification">
+ 99
+ </span>
+ </div>
+ <span class="faint">
+ {{ $t('settings.style.preview.header_faint') }}
</span>
- </div>
- <span class="faint">
- {{$t('settings.style.preview.header_faint')}}
- </span>
- <span class="alert error">
- {{$t('settings.style.preview.error')}}
- </span>
- <button class="btn">
- {{$t('settings.style.preview.button')}}
- </button>
- </div>
- <div class="panel-body theme-preview-content">
- <div class="post">
- <div class="avatar">
- ( ͡° ͜ʖ ͡°)
- </div>
- <div class="content">
- <h4>
- {{$t('settings.style.preview.content')}}
- </h4>
-
- <i18n path="settings.style.preview.text">
- <code style="font-family: var(--postCodeFont)">
- {{$t('settings.style.preview.mono')}}
- </code>
- <a style="color: var(--link)">
- {{$t('settings.style.preview.link')}}
- </a>
- </i18n>
-
- <div class="icons">
- <i style="color: var(--cBlue)" class="button-icon icon-reply"/>
- <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 class="after-post">
- <div class="avatar-alt">
- :^)
- </div>
- <div class="content">
- <i18n path="settings.style.preview.fine_print" tag="span" class="faint">
- <a style="color: var(--faintLink)">
- {{$t('settings.style.preview.faint_link')}}
- </a>
- </i18n>
- </div>
- </div>
- <div class="separator"></div>
-
- <span class="alert error">
- {{$t('settings.style.preview.error')}}
- </span>
- <input :value="$t('settings.style.preview.input')" type="text">
-
- <div class="actions">
- <span class="checkbox">
- <input checked="very yes" type="checkbox" id="preview_checkbox">
- <label for="preview_checkbox">{{$t('settings.style.preview.checkbox')}}</label>
+ <span class="alert error">
+ {{ $t('settings.style.preview.error') }}
</span>
<button class="btn">
- {{$t('settings.style.preview.button')}}
+ {{ $t('settings.style.preview.button') }}
</button>
</div>
+ <div class="panel-body theme-preview-content">
+ <div class="post">
+ <div class="avatar">
+ ( ͡° ͜ʖ ͡°)
+ </div>
+ <div class="content">
+ <h4>
+ {{ $t('settings.style.preview.content') }}
+ </h4>
+
+ <i18n path="settings.style.preview.text">
+ <code style="font-family: var(--postCodeFont)">
+ {{ $t('settings.style.preview.mono') }}
+ </code>
+ <a style="color: var(--link)">
+ {{ $t('settings.style.preview.link') }}
+ </a>
+ </i18n>
+
+ <div class="icons">
+ <i
+ style="color: var(--cBlue)"
+ class="button-icon icon-reply"
+ />
+ <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 class="after-post">
+ <div class="avatar-alt">
+ :^)
+ </div>
+ <div class="content">
+ <i18n
+ path="settings.style.preview.fine_print"
+ tag="span"
+ class="faint"
+ >
+ <a style="color: var(--faintLink)">
+ {{ $t('settings.style.preview.faint_link') }}
+ </a>
+ </i18n>
+ </div>
+ </div>
+ <div class="separator" />
+
+ <span class="alert error">
+ {{ $t('settings.style.preview.error') }}
+ </span>
+ <input
+ :value="$t('settings.style.preview.input')"
+ type="text"
+ >
+
+ <div class="actions">
+ <span class="checkbox">
+ <input
+ id="preview_checkbox"
+ checked="very yes"
+ type="checkbox"
+ >
+ <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
+ </span>
+ <button class="btn">
+ {{ $t('settings.style.preview.button') }}
+ </button>
+ </div>
+ </div>
</div>
-</div>
</template>
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 84963c81..d24394a4 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -1,274 +1,593 @@
<template>
-<div class="style-switcher">
- <div class="presets-container">
- <div class="save-load">
- <export-import
- :exportObject='exportedTheme'
- :exportLabel='$t("settings.export_theme")'
- :importLabel='$t("settings.import_theme")'
- :importFailedText='$t("settings.invalid_theme_imported")'
- :onImport='onImport'
- :validator='importValidator'>
- <template slot="before">
- <div class="presets">
- {{$t('settings.presets')}}
- <label for="preset-switcher" class='select'>
- <select id="preset-switcher" v-model="selected" class="preset-switcher">
- <option v-for="style in availableStyles"
- :value="style"
- :style="{
- backgroundColor: style[1] || style.theme.colors.bg,
- color: style[3] || style.theme.colors.text
- }">
- {{style[0] || style.name}}
- </option>
- </select>
- <i class="icon-down-open"/>
- </label>
- </div>
- </template>
- </export-import>
+ <div class="style-switcher">
+ <div class="presets-container">
+ <div class="save-load">
+ <export-import
+ :export-object="exportedTheme"
+ :export-label="$t("settings.export_theme")"
+ :import-label="$t("settings.import_theme")"
+ :import-failed-text="$t("settings.invalid_theme_imported")"
+ :on-import="onImport"
+ :validator="importValidator"
+ >
+ <template slot="before">
+ <div class="presets">
+ {{ $t('settings.presets') }}
+ <label
+ for="preset-switcher"
+ class="select"
+ >
+ <select
+ id="preset-switcher"
+ v-model="selected"
+ class="preset-switcher"
+ >
+ <option
+ v-for="style in availableStyles"
+ :key="style.name"
+ :value="style"
+ :style="{
+ backgroundColor: style[1] || style.theme.colors.bg,
+ color: style[3] || style.theme.colors.text
+ }"
+ >
+ {{ style[0] || style.name }}
+ </option>
+ </select>
+ <i class="icon-down-open" />
+ </label>
+ </div>
+ </template>
+ </export-import>
+ </div>
+ <div class="save-load-options">
+ <span class="keep-option">
+ <input
+ id="keep-color"
+ v-model="keepColor"
+ type="checkbox"
+ >
+ <label for="keep-color">{{ $t('settings.style.switcher.keep_color') }}</label>
+ </span>
+ <span class="keep-option">
+ <input
+ id="keep-shadows"
+ v-model="keepShadows"
+ type="checkbox"
+ >
+ <label for="keep-shadows">{{ $t('settings.style.switcher.keep_shadows') }}</label>
+ </span>
+ <span class="keep-option">
+ <input
+ id="keep-opacity"
+ v-model="keepOpacity"
+ type="checkbox"
+ >
+ <label for="keep-opacity">{{ $t('settings.style.switcher.keep_opacity') }}</label>
+ </span>
+ <span class="keep-option">
+ <input
+ id="keep-roundness"
+ v-model="keepRoundness"
+ type="checkbox"
+ >
+ <label for="keep-roundness">{{ $t('settings.style.switcher.keep_roundness') }}</label>
+ </span>
+ <span class="keep-option">
+ <input
+ id="keep-fonts"
+ v-model="keepFonts"
+ type="checkbox"
+ >
+ <label for="keep-fonts">{{ $t('settings.style.switcher.keep_fonts') }}</label>
+ </span>
+ <p>{{ $t('settings.style.switcher.save_load_hint') }}</p>
+ </div>
</div>
- <div class="save-load-options">
- <span class="keep-option">
- <input
- id="keep-color"
- type="checkbox"
- v-model="keepColor">
- <label for="keep-color">{{$t('settings.style.switcher.keep_color')}}</label>
- </span>
- <span class="keep-option">
- <input
- id="keep-shadows"
- type="checkbox"
- v-model="keepShadows">
- <label for="keep-shadows">{{$t('settings.style.switcher.keep_shadows')}}</label>
- </span>
- <span class="keep-option">
- <input
- id="keep-opacity"
- type="checkbox"
- v-model="keepOpacity">
- <label for="keep-opacity">{{$t('settings.style.switcher.keep_opacity')}}</label>
- </span>
- <span class="keep-option">
- <input
- id="keep-roundness"
- type="checkbox"
- v-model="keepRoundness">
- <label for="keep-roundness">{{$t('settings.style.switcher.keep_roundness')}}</label>
- </span>
- <span class="keep-option">
- <input
- id="keep-fonts"
- type="checkbox"
- v-model="keepFonts">
- <label for="keep-fonts">{{$t('settings.style.switcher.keep_fonts')}}</label>
- </span>
- <p>{{$t('settings.style.switcher.save_load_hint')}}</p>
+
+ <div class="preview-container">
+ <preview :style="previewRules" />
+ </div>
+
+ <keep-alive>
+ <tab-switcher key="style-tweak">
+ <div
+ :label="$t('settings.style.common_colors._tab_label')"
+ class="color-container"
+ >
+ <div class="tab-header">
+ <p>{{ $t('settings.theme_help') }}</p>
+ <button
+ class="btn"
+ @click="clearOpacity"
+ >
+ {{ $t('settings.style.switcher.clear_opacity') }}
+ </button>
+ <button
+ class="btn"
+ @click="clearV1"
+ >
+ {{ $t('settings.style.switcher.clear_all') }}
+ </button>
+ </div>
+ <p>{{ $t('settings.theme_help_v2_1') }}</p>
+ <h4>{{ $t('settings.style.common_colors.main') }}</h4>
+ <div class="color-item">
+ <ColorInput
+ v-model="bgColorLocal"
+ name="bgColor"
+ :label="$t('settings.background')"
+ />
+ <OpacityInput
+ 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 class="color-item">
+ <ColorInput
+ v-model="fgColorLocal"
+ name="fgColor"
+ :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>
+ </div>
+ <h4>{{ $t('settings.style.common_colors.rgbo') }}</h4>
+ <div class="color-item">
+ <ColorInput
+ v-model="cRedColorLocal"
+ name="cRedColor"
+ :label="$t('settings.cRed')"
+ />
+ <ContrastRatio :contrast="previewContrast.bgRed" />
+ <ColorInput
+ v-model="cBlueColorLocal"
+ name="cBlueColor"
+ :label="$t('settings.cBlue')"
+ />
+ <ContrastRatio :contrast="previewContrast.bgBlue" />
+ </div>
+ <div class="color-item">
+ <ColorInput
+ v-model="cGreenColorLocal"
+ name="cGreenColor"
+ :label="$t('settings.cGreen')"
+ />
+ <ContrastRatio :contrast="previewContrast.bgGreen" />
+ <ColorInput
+ v-model="cOrangeColorLocal"
+ name="cOrangeColor"
+ :label="$t('settings.cOrange')"
+ />
+ <ContrastRatio :contrast="previewContrast.bgOrange" />
+ </div>
+ <p>{{ $t('settings.theme_help_v2_2') }}</p>
+ </div>
+
+ <div
+ :label="$t('settings.style.advanced_colors._tab_label')"
+ class="color-container"
+ >
+ <div class="tab-header">
+ <p>{{ $t('settings.theme_help') }}</p>
+ <button
+ class="btn"
+ @click="clearOpacity"
+ >
+ {{ $t('settings.style.switcher.clear_opacity') }}
+ </button>
+ <button
+ class="btn"
+ @click="clearV1"
+ >
+ {{ $t('settings.style.switcher.clear_all') }}
+ </button>
+ </div>
+ <div class="color-item">
+ <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
+ <ColorInput
+ v-model="alertErrorColorLocal"
+ name="alertError"
+ :label="$t('settings.style.advanced_colors.alert_error')"
+ :fallback="previewTheme.colors.alertError"
+ />
+ <ContrastRatio :contrast="previewContrast.alertError" />
+ </div>
+ <div class="color-item">
+ <h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
+ <ColorInput
+ v-model="badgeNotificationColorLocal"
+ name="badgeNotification"
+ :label="$t('settings.style.advanced_colors.badge_notification')"
+ :fallback="previewTheme.colors.badgeNotification"
+ />
+ </div>
+ <div class="color-item">
+ <h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
+ <ColorInput
+ v-model="panelColorLocal"
+ name="panelColor"
+ :fallback="fgColorLocal"
+ :label="$t('settings.background')"
+ />
+ <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 class="color-item">
+ <h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4>
+ <ColorInput
+ v-model="topBarColorLocal"
+ name="topBarColor"
+ :fallback="fgColorLocal"
+ :label="$t('settings.background')"
+ />
+ <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 class="color-item">
+ <h4>{{ $t('settings.style.advanced_colors.inputs') }}</h4>
+ <ColorInput
+ v-model="inputColorLocal"
+ name="inputColor"
+ :fallback="fgColorLocal"
+ :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 class="color-item">
+ <h4>{{ $t('settings.style.advanced_colors.buttons') }}</h4>
+ <ColorInput
+ v-model="btnColorLocal"
+ name="btnColor"
+ :fallback="fgColorLocal"
+ :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 class="color-item">
+ <h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
+ <ColorInput
+ v-model="borderColorLocal"
+ 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 class="color-item">
+ <h4>{{ $t('settings.style.advanced_colors.faint_text') }}</h4>
+ <ColorInput
+ v-model="faintColorLocal"
+ name="faintColor"
+ :fallback="previewTheme.colors.faint || 1"
+ :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
+ :label="$t('settings.style.radii._tab_label')"
+ class="radius-container"
+ >
+ <div class="tab-header">
+ <p>{{ $t('settings.radii_help') }}</p>
+ <button
+ class="btn"
+ @click="clearRoundness"
+ >
+ {{ $t('settings.style.switcher.clear_all') }}
+ </button>
+ </div>
+ <RangeInput
+ v-model="btnRadiusLocal"
+ name="btnRadius"
+ :label="$t('settings.btnRadius')"
+ :fallback="previewTheme.radii.btn"
+ max="16"
+ hard-min="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
+ :label="$t('settings.style.shadows._tab_label')"
+ class="shadow-container"
+ >
+ <div class="tab-header shadow-selector">
+ <div class="select-container">
+ {{ $t('settings.style.shadows.component') }}
+ <label
+ for="shadow-switcher"
+ class="select"
+ >
+ <select
+ 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>
+ </select>
+ <i class="icon-down-open" />
+ </label>
+ </div>
+ <div class="override">
+ <label
+ for="override"
+ class="label"
+ >
+ {{ $t('settings.style.shadows.override') }}
+ </label>
+ <input
+ id="override"
+ v-model="currentShadowOverriden"
+ name="override"
+ class="input-override"
+ type="checkbox"
+ >
+ <label
+ class="checkbox-label"
+ for="override"
+ />
+ </div>
+ <button
+ class="btn"
+ @click="clearShadows"
+ >
+ {{ $t('settings.style.switcher.clear_all') }}
+ </button>
+ </div>
+ <shadow-control
+ v-model="currentShadow"
+ :ready="!!currentShadowFallback"
+ :fallback="currentShadowFallback"
+ />
+ <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
+ <i18n
+ path="settings.style.shadows.filter_hint.always_drop_shadow"
+ tag="p"
+ >
+ <code>filter: drop-shadow()</code>
+ </i18n>
+ <p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
+ <i18n
+ path="settings.style.shadows.filter_hint.drop_shadow_syntax"
+ tag="p"
+ >
+ <code>drop-shadow</code>
+ <code>spread-radius</code>
+ <code>inset</code>
+ </i18n>
+ <i18n
+ path="settings.style.shadows.filter_hint.inset_classic"
+ tag="p"
+ >
+ <code>box-shadow</code>
+ </i18n>
+ <p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
+ </div>
+ </div>
+
+ <div
+ :label="$t('settings.style.fonts._tab_label')"
+ class="fonts-container"
+ >
+ <div class="tab-header">
+ <p>{{ $t('settings.style.fonts.help') }}</p>
+ <button
+ class="btn"
+ @click="clearFonts"
+ >
+ {{ $t('settings.style.switcher.clear_all') }}
+ </button>
+ </div>
+ <FontControl
+ v-model="fontsLocal.interface"
+ name="ui"
+ :label="$t('settings.style.fonts.components.interface')"
+ :fallback="previewTheme.fonts.interface"
+ no-inherit="1"
+ />
+ <FontControl
+ v-model="fontsLocal.input"
+ name="input"
+ :label="$t('settings.style.fonts.components.input')"
+ :fallback="previewTheme.fonts.input"
+ />
+ <FontControl
+ v-model="fontsLocal.post"
+ name="post"
+ :label="$t('settings.style.fonts.components.post')"
+ :fallback="previewTheme.fonts.post"
+ />
+ <FontControl
+ v-model="fontsLocal.postCode"
+ name="postCode"
+ :label="$t('settings.style.fonts.components.postCode')"
+ :fallback="previewTheme.fonts.postCode"
+ />
+ </div>
+ </tab-switcher>
+ </keep-alive>
+
+ <div class="apply-container">
+ <button
+ class="btn submit"
+ :disabled="!themeValid"
+ @click="setCustomTheme"
+ >
+ {{ $t('general.apply') }}
+ </button>
+ <button
+ class="btn"
+ @click="clearAll"
+ >
+ {{ $t('settings.style.switcher.reset') }}
+ </button>
</div>
</div>
-
- <div class="preview-container">
- <preview :style="previewRules"/>
- </div>
-
- <keep-alive>
- <tab-switcher key="style-tweak">
- <div :label="$t('settings.style.common_colors._tab_label')" class="color-container">
- <div class="tab-header">
- <p>{{$t('settings.theme_help')}}</p>
- <button class="btn" @click="clearOpacity">{{$t('settings.style.switcher.clear_opacity')}}</button>
- <button class="btn" @click="clearV1">{{$t('settings.style.switcher.clear_all')}}</button>
- </div>
- <p>{{$t('settings.theme_help_v2_1')}}</p>
- <h4>{{ $t('settings.style.common_colors.main') }}</h4>
- <div class="color-item">
- <ColorInput name="bgColor" v-model="bgColorLocal" :label="$t('settings.background')"/>
- <OpacityInput name="bgOpacity" v-model="bgOpacityLocal" :fallback="previewTheme.opacity.bg || 1"/>
- <ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/>
- <ContrastRatio :contrast="previewContrast.bgText"/>
- <ColorInput name="linkColor" v-model="linkColorLocal" :label="$t('settings.links')"/>
- <ContrastRatio :contrast="previewContrast.bgLink"/>
- </div>
- <div class="color-item">
- <ColorInput name="fgColor" v-model="fgColorLocal" :label="$t('settings.foreground')"/>
- <ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.fgText"/>
- <ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="previewTheme.colors.fgLink"/>
- <p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
- </div>
- <h4>{{ $t('settings.style.common_colors.rgbo') }}</h4>
- <div class="color-item">
- <ColorInput name="cRedColor" v-model="cRedColorLocal" :label="$t('settings.cRed')"/>
- <ContrastRatio :contrast="previewContrast.bgRed"/>
- <ColorInput name="cBlueColor" v-model="cBlueColorLocal" :label="$t('settings.cBlue')"/>
- <ContrastRatio :contrast="previewContrast.bgBlue"/>
- </div>
- <div class="color-item">
- <ColorInput name="cGreenColor" v-model="cGreenColorLocal" :label="$t('settings.cGreen')"/>
- <ContrastRatio :contrast="previewContrast.bgGreen"/>
- <ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/>
- <ContrastRatio :contrast="previewContrast.bgOrange"/>
- </div>
- <p>{{$t('settings.theme_help_v2_2')}}</p>
- </div>
-
- <div :label="$t('settings.style.advanced_colors._tab_label')" class="color-container">
- <div class="tab-header">
- <p>{{$t('settings.theme_help')}}</p>
- <button class="btn" @click="clearOpacity">{{$t('settings.style.switcher.clear_opacity')}}</button>
- <button class="btn" @click="clearV1">{{$t('settings.style.switcher.clear_all')}}</button>
- </div>
- <div class="color-item">
- <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
- <ColorInput name="alertError" v-model="alertErrorColorLocal" :label="$t('settings.style.advanced_colors.alert_error')" :fallback="previewTheme.colors.alertError"/>
- <ContrastRatio :contrast="previewContrast.alertError"/>
- </div>
- <div class="color-item">
- <h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
- <ColorInput name="badgeNotification" v-model="badgeNotificationColorLocal" :label="$t('settings.style.advanced_colors.badge_notification')" :fallback="previewTheme.colors.badgeNotification"/>
- </div>
- <div class="color-item">
- <h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
- <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
- <OpacityInput name="panelOpacity" v-model="panelOpacityLocal" :fallback="previewTheme.opacity.panel || 1"/>
- <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.text')"/>
- <ContrastRatio :contrast="previewContrast.panelText" large="1"/>
- <ColorInput name="panelLinkColor" v-model="panelLinkColorLocal" :fallback="previewTheme.colors.panelLink" :label="$t('settings.links')"/>
- <ContrastRatio :contrast="previewContrast.panelLink" large="1"/>
- </div>
- <div class="color-item">
- <h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4>
- <ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
- <ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="previewTheme.colors.topBarText" :label="$t('settings.text')"/>
- <ContrastRatio :contrast="previewContrast.topBarText"/>
- <ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="previewTheme.colors.topBarLink" :label="$t('settings.links')"/>
- <ContrastRatio :contrast="previewContrast.topBarLink"/>
- </div>
- <div class="color-item">
- <h4>{{ $t('settings.style.advanced_colors.inputs') }}</h4>
- <ColorInput name="inputColor" v-model="inputColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
- <OpacityInput name="inputOpacity" v-model="inputOpacityLocal" :fallback="previewTheme.opacity.input || 1"/>
- <ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="previewTheme.colors.inputText" :label="$t('settings.text')"/>
- <ContrastRatio :contrast="previewContrast.inputText"/>
- </div>
- <div class="color-item">
- <h4>{{ $t('settings.style.advanced_colors.buttons') }}</h4>
- <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
- <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" :fallback="previewTheme.opacity.btn || 1"/>
- <ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="previewTheme.colors.btnText" :label="$t('settings.text')"/>
- <ContrastRatio :contrast="previewContrast.btnText"/>
- </div>
- <div class="color-item">
- <h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
- <ColorInput name="borderColor" v-model="borderColorLocal" :fallback="previewTheme.colors.border" :label="$t('settings.style.common.color')"/>
- <OpacityInput name="borderOpacity" v-model="borderOpacityLocal" :fallback="previewTheme.opacity.border || 1"/>
- </div>
- <div class="color-item">
- <h4>{{ $t('settings.style.advanced_colors.faint_text') }}</h4>
- <ColorInput name="faintColor" v-model="faintColorLocal" :fallback="previewTheme.colors.faint || 1" :label="$t('settings.text')"/>
- <ColorInput name="faintLinkColor" v-model="faintLinkColorLocal" :fallback="previewTheme.colors.faintLink" :label="$t('settings.links')"/>
- <ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.style.advanced_colors.panel_header')"/>
- <OpacityInput name="faintOpacity" v-model="faintOpacityLocal" :fallback="previewTheme.opacity.faint || 0.5"/>
- </div>
- </div>
-
- <div :label="$t('settings.style.radii._tab_label')" class="radius-container">
- <div class="tab-header">
- <p>{{$t('settings.radii_help')}}</p>
- <button class="btn" @click="clearRoundness">{{$t('settings.style.switcher.clear_all')}}</button>
- </div>
- <RangeInput name="btnRadius" :label="$t('settings.btnRadius')" v-model="btnRadiusLocal" :fallback="previewTheme.radii.btn" max="16" hardMin="0"/>
- <RangeInput name="inputRadius" :label="$t('settings.inputRadius')" v-model="inputRadiusLocal" :fallback="previewTheme.radii.input" max="9" hardMin="0"/>
- <RangeInput name="checkboxRadius" :label="$t('settings.checkboxRadius')" v-model="checkboxRadiusLocal" :fallback="previewTheme.radii.checkbox" max="16" hardMin="0"/>
- <RangeInput name="panelRadius" :label="$t('settings.panelRadius')" v-model="panelRadiusLocal" :fallback="previewTheme.radii.panel" max="50" hardMin="0"/>
- <RangeInput name="avatarRadius" :label="$t('settings.avatarRadius')" v-model="avatarRadiusLocal" :fallback="previewTheme.radii.avatar" max="28" hardMin="0"/>
- <RangeInput name="avatarAltRadius" :label="$t('settings.avatarAltRadius')" v-model="avatarAltRadiusLocal" :fallback="previewTheme.radii.avatarAlt" max="28" hardMin="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"/>
- </div>
-
- <div :label="$t('settings.style.shadows._tab_label')" class="shadow-container">
- <div class="tab-header shadow-selector">
- <div class="select-container">
- {{$t('settings.style.shadows.component')}}
- <label for="shadow-switcher" class="select">
- <select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher">
- <option v-for="shadow in shadowsAvailable"
- :value="shadow">
- {{$t('settings.style.shadows.components.' + shadow)}}
- </option>
- </select>
- <i class="icon-down-open"/>
- </label>
- </div>
- <div class="override">
- <label for="override" class="label">
- {{$t('settings.style.shadows.override')}}
- </label>
- <input
- v-model="currentShadowOverriden"
- name="override"
- id="override"
- class="input-override"
- type="checkbox">
- <label class="checkbox-label" for="override"></label>
- </div>
- <button class="btn" @click="clearShadows">{{$t('settings.style.switcher.clear_all')}}</button>
- </div>
- <shadow-control :ready="!!currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/>
- <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
- <i18n path="settings.style.shadows.filter_hint.always_drop_shadow" tag="p">
- <code>filter: drop-shadow()</code>
- </i18n>
- <p>{{$t('settings.style.shadows.filter_hint.avatar_inset')}}</p>
- <i18n path="settings.style.shadows.filter_hint.drop_shadow_syntax" tag="p">
- <code>drop-shadow</code>
- <code>spread-radius</code>
- <code>inset</code>
- </i18n>
- <i18n path="settings.style.shadows.filter_hint.inset_classic" tag="p">
- <code>box-shadow</code>
- </i18n>
- <p>{{$t('settings.style.shadows.filter_hint.spread_zero')}}</p>
- </div>
- </div>
-
- <div :label="$t('settings.style.fonts._tab_label')" class="fonts-container">
- <div class="tab-header">
- <p>{{$t('settings.style.fonts.help')}}</p>
- <button class="btn" @click="clearFonts">{{$t('settings.style.switcher.clear_all')}}</button>
- </div>
- <FontControl
- name="ui"
- v-model="fontsLocal.interface"
- :label="$t('settings.style.fonts.components.interface')"
- :fallback="previewTheme.fonts.interface"
- no-inherit="1"/>
- <FontControl
- name="input"
- v-model="fontsLocal.input"
- :label="$t('settings.style.fonts.components.input')"
- :fallback="previewTheme.fonts.input"/>
- <FontControl
- name="post"
- v-model="fontsLocal.post"
- :label="$t('settings.style.fonts.components.post')"
- :fallback="previewTheme.fonts.post"/>
- <FontControl
- name="postCode"
- v-model="fontsLocal.postCode"
- :label="$t('settings.style.fonts.components.postCode')"
- :fallback="previewTheme.fonts.postCode"/>
- </div>
- </tab-switcher>
- </keep-alive>
-
- <div class="apply-container">
- <button class="btn submit" :disabled="!themeValid" @click="setCustomTheme">{{$t('general.apply')}}</button>
- <button class="btn" @click="clearAll">{{$t('settings.style.switcher.reset')}}</button>
- </div>
-</div>
</template>
<script src="./style_switcher.js"></script>
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index c949b458..81e4d333 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -10,6 +10,12 @@ export default Vue.component('tab-switcher', {
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: {
activateTab (index, dataset) {
return () => {
@@ -20,34 +26,28 @@ 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) {
const tabs = this.$slots.default
- .map((slot, index) => {
- if (!slot.tag) return
- const classesTab = ['tab']
- const classesWrapper = ['tab-wrapper']
+ .map((slot, index) => {
+ if (!slot.tag) return
+ const classesTab = ['tab']
+ const classesWrapper = ['tab-wrapper']
- if (index === this.active) {
- classesTab.push('active')
- classesWrapper.push('active')
- }
+ if (index === this.active) {
+ classesTab.push('active')
+ classesWrapper.push('active')
+ }
- return (
- <div class={ classesWrapper.join(' ')}>
- <button
- disabled={slot.data.attrs.disabled}
- onClick={this.activateTab(index)}
- class={classesTab.join(' ')}>
- {slot.data.attrs.label}</button>
- </div>
- )
- })
+ return (
+ <div class={ classesWrapper.join(' ')}>
+ <button
+ disabled={slot.data.attrs.disabled}
+ onClick={this.activateTab(index)}
+ class={classesTab.join(' ')}>
+ {slot.data.attrs.label}</button>
+ </div>
+ )
+ })
const contents = this.$slots.default.map((slot, index) => {
if (!slot.tag) return
diff --git a/src/components/tag_timeline/tag_timeline.vue b/src/components/tag_timeline/tag_timeline.vue
index 62bb579a..ace96c3f 100644
--- a/src/components/tag_timeline/tag_timeline.vue
+++ b/src/components/tag_timeline/tag_timeline.vue
@@ -1,5 +1,10 @@
<template>
- <Timeline :title="tag" :timeline="timeline" :timeline-name="'tag'" :tag="tag" />
+ <Timeline
+ :title="tag"
+ :timeline="timeline"
+ :timeline-name="'tag'"
+ :tag="tag"
+ />
</template>
-<script src='./tag_timeline.js'></script>
\ No newline at end of file
+<script src='./tag_timeline.js'></script>
diff --git a/src/components/terms_of_service_panel/terms_of_service_panel.vue b/src/components/terms_of_service_panel/terms_of_service_panel.vue
index eb0f2527..63dc58b8 100644
--- a/src/components/terms_of_service_panel/terms_of_service_panel.vue
+++ b/src/components/terms_of_service_panel/terms_of_service_panel.vue
@@ -2,8 +2,12 @@
<div>
<div class="panel panel-default">
<div class="panel-body">
- <div v-html="content" class="tos-content">
- </div>
+ <!-- eslint-disable vue/no-v-html -->
+ <div
+ class="tos-content"
+ v-html="content"
+ />
+ <!-- eslint-enable vue/no-v-html -->
</div>
</div>
</div>
diff --git a/src/components/timeago/timeago.vue b/src/components/timeago/timeago.vue
index 3f185a2d..6df0524d 100644
--- a/src/components/timeago/timeago.vue
+++ b/src/components/timeago/timeago.vue
@@ -1,5 +1,8 @@
<template>
- <time :datetime="time" :title="localeDateString">
+ <time
+ :datetime="time"
+ :title="localeDateString"
+ >
{{ $t(relativeTime.key, [relativeTime.num]) }}
</time>
</template>
@@ -16,12 +19,6 @@ export default {
interval: null
}
},
- created () {
- this.refreshRelativeTimeObject()
- },
- destroyed () {
- clearTimeout(this.interval)
- },
computed: {
localeDateString () {
return typeof this.time === 'string'
@@ -29,6 +26,12 @@ export default {
: this.time.toLocaleString()
}
},
+ created () {
+ this.refreshRelativeTimeObject()
+ },
+ destroyed () {
+ clearTimeout(this.interval)
+ },
methods: {
refreshRelativeTimeObject () {
const nowThreshold = typeof this.nowThreshold === 'number' ? this.nowThreshold : 1
@@ -45,4 +48,4 @@ export default {
}
}
}
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index b1c7edf8..5e24bd15 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -139,7 +139,7 @@ const Timeline = {
if (top < 15 &&
!this.paused &&
!(this.unfocused && this.$store.state.config.pauseOnUnfocused)
- ) {
+ ) {
this.showNewStatuses()
} else {
this.paused = true
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index e6a8d458..1fc52083 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -2,41 +2,66 @@
<div :class="classes.root">
<div :class="classes.header">
<div class="title">
- {{title}}
+ {{ title }}
</div>
- <div @click.prevent class="loadmore-error alert error" v-if="timelineError">
- {{$t('timeline.error_fetching')}}
+ <div
+ v-if="timelineError"
+ class="loadmore-error alert error"
+ @click.prevent
+ >
+ {{ $t('timeline.error_fetching') }}
</div>
- <button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
- {{$t('timeline.show_new')}}{{newStatusCountStr}}
+ <button
+ v-if="timeline.newStatusCount > 0 && !timelineError"
+ class="loadmore-button"
+ @click.prevent="showNewStatuses"
+ >
+ {{ $t('timeline.show_new') }}{{ newStatusCountStr }}
</button>
- <div @click.prevent class="loadmore-text faint" v-if="!timeline.newStatusCount > 0 && !timelineError">
- {{$t('timeline.up_to_date')}}
+ <div
+ v-if="!timeline.newStatusCount > 0 && !timelineError"
+ class="loadmore-text faint"
+ @click.prevent
+ >
+ {{ $t('timeline.up_to_date') }}
</div>
</div>
<div :class="classes.body">
<div class="timeline">
<conversation
v-for="status in timeline.visibleStatuses"
- class="status-fadein"
:key="status.id"
+ class="status-fadein"
:statusoid="status"
:collapsable="true"
/>
</div>
</div>
<div :class="classes.footer">
- <div v-if="count===0" class="new-status-notification text-center panel-footer faint">
- {{$t('timeline.no_statuses')}}
+ <div
+ v-if="count===0"
+ class="new-status-notification text-center panel-footer faint"
+ >
+ {{ $t('timeline.no_statuses') }}
</div>
- <div v-else-if="bottomedOut" class="new-status-notification text-center panel-footer faint">
- {{$t('timeline.no_more_statuses')}}
+ <div
+ v-else-if="bottomedOut"
+ class="new-status-notification text-center panel-footer faint"
+ >
+ {{ $t('timeline.no_more_statuses') }}
</div>
- <a v-else-if="!timeline.loading" href="#" v-on:click.prevent='fetchOlderStatuses()'>
- <div class="new-status-notification text-center panel-footer">{{$t('timeline.load_older')}}</div>
+ <a
+ v-else-if="!timeline.loading"
+ href="#"
+ @click.prevent="fetchOlderStatuses()"
+ >
+ <div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div>
</a>
- <div v-else class="new-status-notification text-center panel-footer">
- <i class="icon-spin3 animate-spin"/>
+ <div
+ v-else
+ class="new-status-notification text-center panel-footer"
+ >
+ <i class="icon-spin3 animate-spin" />
</div>
</div>
</div>
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index e5466fdf..811efd3c 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -5,7 +5,7 @@
:title="user.screen_name"
:src="user.profile_image_url_original"
:class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
- :imageLoadError="imageLoadError"
+ :image-load-error="imageLoadError"
/>
</template>
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 7c6ffa89..92cd0e54 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -23,15 +23,15 @@ export default {
computed: {
classes () {
return [{
- 'user-card-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
- 'user-card-rounded': this.rounded === true, // set border-radius for all sides
- 'user-card-bordered': this.bordered === true // set border for all sides
+ 'user-card-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
+ 'user-card-rounded': this.rounded === true, // set border-radius for all sides
+ 'user-card-bordered': this.bordered === true // set border for all sides
}]
},
style () {
const color = this.$store.state.config.customTheme.colors
- ? this.$store.state.config.customTheme.colors.bg // v2
- : this.$store.state.config.colors.bg // v1
+ ? this.$store.state.config.customTheme.colors.bg // v2
+ : this.$store.state.config.colors.bg // v1
if (color) {
const rgb = (typeof color === 'string') ? hex2rgb(color) : color
@@ -73,12 +73,12 @@ export default {
userHighlightType: {
get () {
const data = this.$store.state.config.highlight[this.user.screen_name]
- return data && data.type || 'disabled'
+ return (data && data.type) || 'disabled'
},
set (type) {
const data = this.$store.state.config.highlight[this.user.screen_name]
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 {
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
}
@@ -110,7 +110,7 @@ export default {
followUser () {
const store = this.$store
this.followRequestInProgress = true
- requestFollow(this.user, store).then(({sent}) => {
+ requestFollow(this.user, store).then(({ sent }) => {
this.followRequestInProgress = false
this.followRequestSent = sent
})
@@ -141,7 +141,7 @@ export default {
store.commit('setProfileView', { v })
}
},
- linkClicked ({target}) {
+ linkClicked ({ target }) {
if (target.tagName === 'SPAN') {
target = target.parentNode
}
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index b4495673..5a5a4881 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -1,134 +1,260 @@
<template>
-<div class="user-card" :class="classes" :style="style">
- <div class="panel-heading">
- <div class='user-info'>
- <div class='container'>
- <router-link :to="userProfileLink(user)">
- <UserAvatar :betterShadow="betterShadow" :user="user"/>
- </router-link>
- <div class="user-summary">
- <div class="top-line">
- <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
- <div :title="user.name" class='user-name' v-else>{{user.name}}</div>
- <router-link :to="{ name: 'user-settings' }" v-if="!isOtherUser">
- <i class="button-icon icon-wrench usersettings" :title="$t('tool_tip.user_settings')"></i>
- </router-link>
- <a :href="user.statusnet_profile_url" target="_blank" v-if="isOtherUser && !user.is_local">
- <i class="icon-link-ext usersettings"></i>
- </a>
- </div>
+ <div
+ class="user-card"
+ :class="classes"
+ :style="style"
+ >
+ <div class="panel-heading">
+ <div class="user-info">
+ <div class="container">
+ <router-link :to="userProfileLink(user)">
+ <UserAvatar
+ :better-shadow="betterShadow"
+ :user="user"
+ />
+ </router-link>
+ <div class="user-summary">
+ <div class="top-line">
+ <!-- eslint-disable vue/no-v-html -->
+ <div
+ v-if="user.name_html"
+ :title="user.name"
+ class="user-name"
+ v-html="user.name_html"
+ />
+ <!-- eslint-enable vue/no-v-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-wrench usersettings"
+ :title="$t('tool_tip.user_settings')"
+ />
+ </router-link>
+ <a
+ v-if="isOtherUser && !user.is_local"
+ :href="user.statusnet_profile_url"
+ target="_blank"
+ >
+ <i class="icon-link-ext usersettings" />
+ </a>
+ </div>
- <div class="bottom-line">
- <router-link class="user-screen-name" :to="userProfileLink(user)">@{{user.screen_name}}</router-link>
- <span class="alert staff" v-if="!hideBio && !!visibleRole">{{visibleRole}}</span>
- <span v-if="user.locked"><i class="icon icon-lock"></i></span>
- <span v-if="!hideUserStatsLocal && !hideBio" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
+ <div class="bottom-line">
+ <router-link
+ class="user-screen-name"
+ :to="userProfileLink(user)"
+ >
+ @{{ user.screen_name }}
+ </router-link>
+ <span
+ v-if="!hideBio && !!visibleRole"
+ class="alert staff"
+ >{{ visibleRole }}</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>
+ </div>
</div>
</div>
- </div>
- <div class="user-meta">
- <div v-if="user.follows_you && loggedIn && isOtherUser" class="following">
- {{ $t('user_card.follows_you') }}
+ <div class="user-meta">
+ <div
+ v-if="user.follows_you && loggedIn && isOtherUser"
+ class="following"
+ >
+ {{ $t('user_card.follows_you') }}
+ </div>
+ <div
+ v-if="isOtherUser && (loggedIn || !switcher)"
+ class="highlighter"
+ >
+ <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
+ <input
+ v-if="userHighlightType !== 'disabled'"
+ :id="'userHighlightColorTx'+user.id"
+ v-model="userHighlightColor"
+ 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="solid">Solid bg</option>
+ <option value="striped">Striped bg</option>
+ <option value="side">Side stripe</option>
+ </select>
+ <i class="icon-down-open" />
+ </label>
+ </div>
</div>
- <div class="highlighter" v-if="isOtherUser && (loggedIn || !switcher)">
- <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
- <input class="userHighlightText" type="text" :id="'userHighlightColorTx'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
- <input class="userHighlightCl" type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
- <label for="style-switcher" class='userHighlightSel select'>
- <select class="userHighlightSel" :id="'userHighlightSel'+user.id" v-model="userHighlightType">
- <option value="disabled">No highlight</option>
- <option value="solid">Solid bg</option>
- <option value="striped">Striped bg</option>
- <option value="side">Side stripe</option>
- </select>
- <i class="icon-down-open"/>
- </label>
+ <div
+ v-if="isOtherUser"
+ class="user-interactions"
+ >
+ <div
+ v-if="loggedIn"
+ class="follow"
+ >
+ <span v-if="user.following">
+ <!--Following them!-->
+ <button
+ class="pressed"
+ :disabled="followRequestInProgress"
+ :title="$t('user_card.follow_unfollow')"
+ @click="unfollowUser"
+ >
+ <template v-if="followRequestInProgress">
+ {{ $t('user_card.follow_progress') }}
+ </template>
+ <template v-else>
+ {{ $t('user_card.following') }}
+ </template>
+ </button>
+ </span>
+ <span v-if="!user.following">
+ <button
+ :disabled="followRequestInProgress"
+ :title="followRequestSent ? $t('user_card.follow_again') : ''"
+ @click="followUser"
+ >
+ <template v-if="followRequestInProgress">
+ {{ $t('user_card.follow_progress') }}
+ </template>
+ <template v-else-if="followRequestSent">
+ {{ $t('user_card.follow_sent') }}
+ </template>
+ <template v-else>
+ {{ $t('user_card.follow') }}
+ </template>
+ </button>
+ </span>
+ </div>
+ <div
+ v-if="isOtherUser && loggedIn"
+ class="mute"
+ >
+ <span v-if="user.muted">
+ <button
+ class="pressed"
+ @click="unmuteUser"
+ >
+ {{ $t('user_card.muted') }}
+ </button>
+ </span>
+ <span v-if="!user.muted">
+ <button @click="muteUser">
+ {{ $t('user_card.mute') }}
+ </button>
+ </span>
+ </div>
+ <div v-if="!loggedIn && user.is_local">
+ <RemoteFollow :user="user" />
+ </div>
+ <div
+ v-if="isOtherUser && loggedIn"
+ class="block"
+ >
+ <span v-if="user.statusnet_blocking">
+ <button
+ class="pressed"
+ @click="unblockUser"
+ >
+ {{ $t('user_card.blocked') }}
+ </button>
+ </span>
+ <span v-if="!user.statusnet_blocking">
+ <button @click="blockUser">
+ {{ $t('user_card.block') }}
+ </button>
+ </span>
+ </div>
+ <div
+ v-if="isOtherUser && loggedIn"
+ class="block"
+ >
+ <span>
+ <button @click="reportUser">
+ {{ $t('user_card.report') }}
+ </button>
+ </span>
+ </div>
+ <ModerationTools
+ v-if="loggedIn.role === "admin""
+ :user="user"
+ />
</div>
</div>
- <div v-if="isOtherUser" class="user-interactions">
- <div class="follow" v-if="loggedIn">
- <span v-if="user.following">
- <!--Following them!-->
- <button @click="unfollowUser" class="pressed" :disabled="followRequestInProgress" :title="$t('user_card.follow_unfollow')">
- <template v-if="followRequestInProgress">
- {{ $t('user_card.follow_progress') }}
- </template>
- <template v-else>
- {{ $t('user_card.following') }}
- </template>
- </button>
- </span>
- <span v-if="!user.following">
- <button @click="followUser" :disabled="followRequestInProgress" :title="followRequestSent ? $t('user_card.follow_again') : ''">
- <template v-if="followRequestInProgress">
- {{ $t('user_card.follow_progress') }}
- </template>
- <template v-else-if="followRequestSent">
- {{ $t('user_card.follow_sent') }}
- </template>
- <template v-else>
- {{ $t('user_card.follow') }}
- </template>
- </button>
- </span>
- </div>
- <div class='mute' v-if='isOtherUser && loggedIn'>
- <span v-if='user.muted'>
- <button @click="unmuteUser" class="pressed">
- {{ $t('user_card.muted') }}
- </button>
- </span>
- <span v-if='!user.muted'>
- <button @click="muteUser">
- {{ $t('user_card.mute') }}
- </button>
- </span>
- </div>
- <div v-if='!loggedIn && user.is_local'>
- <RemoteFollow :user="user" />
- </div>
- <div class='block' v-if='isOtherUser && loggedIn'>
- <span v-if='user.statusnet_blocking'>
- <button @click="unblockUser" class="pressed">
- {{ $t('user_card.blocked') }}
- </button>
- </span>
- <span v-if='!user.statusnet_blocking'>
- <button @click="blockUser">
- {{ $t('user_card.block') }}
- </button>
- </span>
- </div>
- <div class='block' v-if='isOtherUser && loggedIn'>
- <span>
- <button @click="reportUser">
- {{ $t('user_card.report') }}
- </button>
- </span>
- </div>
- <ModerationTools :user='user' v-if='loggedIn.role === "admin"'/>
- </div>
</div>
- </div>
- <div class="panel-body" v-if="!hideBio">
- <div v-if="!hideUserStatsLocal && switcher" class="user-counts">
- <div class="user-count" v-on:click.prevent="setProfileView('statuses')">
- <h5>{{ $t('user_card.statuses') }}</h5>
- <span>{{user.statuses_count}} <br></span>
- </div>
- <div class="user-count" v-on:click.prevent="setProfileView('friends')">
- <h5>{{ $t('user_card.followees') }}</h5>
- <span>{{user.friends_count}}</span>
- </div>
- <div class="user-count" v-on:click.prevent="setProfileView('followers')">
- <h5>{{ $t('user_card.followers') }}</h5>
- <span>{{user.followers_count}}</span>
+ <div
+ v-if="!hideBio"
+ class="panel-body"
+ >
+ <div
+ v-if="!hideUserStatsLocal && switcher"
+ class="user-counts"
+ >
+ <div
+ class="user-count"
+ @click.prevent="setProfileView('statuses')"
+ >
+ <h5>{{ $t('user_card.statuses') }}</h5>
+ <span>{{ user.statuses_count }} <br></span>
+ </div>
+ <div
+ class="user-count"
+ @click.prevent="setProfileView('friends')"
+ >
+ <h5>{{ $t('user_card.followees') }}</h5>
+ <span>{{ user.friends_count }}</span>
+ </div>
+ <div
+ class="user-count"
+ @click.prevent="setProfileView('followers')"
+ >
+ <h5>{{ $t('user_card.followers') }}</h5>
+ <span>{{ user.followers_count }}</span>
+ </div>
</div>
+ <!-- eslint-disable vue/no-v-html -->
+ <p
+ v-if="!hideBio && user.description_html"
+ class="user-card-bio"
+ @click.prevent="linkClicked"
+ v-html="user.description_html"
+ />
+ <!-- eslint-enable vue/no-v-html -->
+ <p
+ v-else-if="!hideBio"
+ class="user-card-bio"
+ >
+ {{ user.description }}
+ </p>
</div>
- <p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="user-card-bio" v-html="user.description_html"></p>
- <p v-else-if="!hideBio" class="user-card-bio">{{ user.description }}</p>
</div>
-</div>
</template>
<script src="./user_card.js"></script>
diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue
index a118ffe2..39d49237 100644
--- a/src/components/user_finder/user_finder.vue
+++ b/src/components/user_finder/user_finder.vue
@@ -1,14 +1,38 @@
<template>
<div>
<div class="user-finder-container">
- <i class="icon-spin4 user-finder-icon animate-spin-slow" 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>
+ <i
+ v-if="loading"
+ 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>
- <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"/>
- <button class="btn search-button" @click="findUser(username)">
- <i class="icon-search"/>
+ <input
+ id="user-finder-input"
+ ref="userSearchInput"
+ 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>
- <i class="button-icon icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/>
+ <i
+ class="button-icon icon-cancel user-finder-icon"
+ @click.prevent.stop="toggleHidden"
+ />
</template>
</div>
</div>
@@ -25,7 +49,6 @@
align-items: baseline;
vertical-align: baseline;
-
.user-finder-input,
.search-button {
height: 29px;
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 37e28ca5..c92630e3 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -1,13 +1,23 @@
<template>
<div class="user-panel">
-
- <div v-if="signedIn" key="user-panel" class="panel panel-default signed-in">
- <UserCard :user="user" :hideBio="true" rounded="top"/>
+ <div
+ v-if="signedIn"
+ key="user-panel"
+ class="panel panel-default signed-in"
+ >
+ <UserCard
+ :user="user"
+ :hide-bio="true"
+ rounded="top"
+ />
<div class="panel-footer">
- <post-status-form v-if='user'></post-status-form>
+ <post-status-form v-if="user" />
</div>
</div>
- <auth-form v-else key="user-panel"/>
+ <auth-form
+ v-else
+ key="user-panel"
+ />
</div>
</template>
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 84a159da..4ea0a869 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -1,75 +1,110 @@
<template>
-<div>
- <div v-if="user" class="user-profile panel panel-default">
- <UserCard :user="user" :switcher="true" :selected="timeline.viewing" rounded="top"/>
- <tab-switcher :renderOnlyFocused="true" ref="tabSwitcher">
- <div :label="$t('user_card.statuses')">
- <div class="timeline">
- <template v-for="statusId in user.pinnedStatuseIds">
- <Conversation
- v-if="timeline.statusesObject[statusId]"
- class="status-fadein"
- :key="statusId"
- :statusoid="timeline.statusesObject[statusId]"
- :collapsable="true"
- :showPinned="true"
- />
- </template>
+ <div>
+ <div
+ v-if="user"
+ class="user-profile panel panel-default"
+ >
+ <UserCard
+ :user="user"
+ :switcher="true"
+ :selected="timeline.viewing"
+ rounded="top"
+ />
+ <tab-switcher
+ ref="tabSwitcher"
+ :render-only-focused="true"
+ >
+ <div :label="$t('user_card.statuses')">
+ <div class="timeline">
+ <template v-for="statusId in user.pinnedStatuseIds">
+ <Conversation
+ v-if="timeline.statusesObject[statusId]"
+ :key="statusId"
+ class="status-fadein"
+ :statusoid="timeline.statusesObject[statusId]"
+ :collapsable="true"
+ :show-pinned="true"
+ />
+ </template>
+ </div>
+ <Timeline
+ :count="user.statuses_count"
+ :embedded="true"
+ :title="$t('user_profile.timeline_title')"
+ :timeline="timeline"
+ :timeline-name="'user'"
+ :user-id="userId"
+ />
+ </div>
+ <div
+ v-if="followsTabVisible"
+ :label="$t('user_card.followees')"
+ :disabled="!user.friends_count"
+ >
+ <FriendList :user-id="userId">
+ <template
+ slot="item"
+ slot-scope="{item}"
+ >
+ <FollowCard :user="item" />
+ </template>
+ </FriendList>
+ </div>
+ <div
+ v-if="followersTabVisible"
+ :label="$t('user_card.followers')"
+ :disabled="!user.followers_count"
+ >
+ <FollowerList :user-id="userId">
+ <template
+ slot="item"
+ slot-scope="{item}"
+ >
+ <FollowCard
+ :user="item"
+ :no-follows-you="isUs"
+ />
+ </template>
+ </FollowerList>
</div>
<Timeline
- :count="user.statuses_count"
+ :label="$t('user_card.media')"
+ :disabled="!media.visibleStatuses.length"
:embedded="true"
- :title="$t('user_profile.timeline_title')"
- :timeline="timeline"
- :timeline-name="'user'"
+ :title="$t('user_card.media')"
+ timeline-name="media"
+ :timeline="media"
:user-id="userId"
/>
+ <Timeline
+ v-if="isUs"
+ :label="$t('user_card.favorites')"
+ :disabled="!favorites.visibleStatuses.length"
+ :embedded="true"
+ :title="$t('user_card.favorites')"
+ timeline-name="favorites"
+ :timeline="favorites"
+ />
+ </tab-switcher>
+ </div>
+ <div
+ v-else
+ class="panel user-profile-placeholder"
+ >
+ <div class="panel-heading">
+ <div class="title">
+ {{ $t('settings.profile_tab') }}
+ </div>
</div>
- <div :label="$t('user_card.followees')" v-if="followsTabVisible" :disabled="!user.friends_count">
- <FriendList :userId="userId">
- <template slot="item" slot-scope="{item}">
- <FollowCard :user="item" />
- </template>
- </FriendList>
- </div>
- <div :label="$t('user_card.followers')" v-if="followersTabVisible" :disabled="!user.followers_count">
- <FollowerList :userId="userId">
- <template slot="item" slot-scope="{item}">
- <FollowCard :user="item" :noFollowsYou="isUs" />
- </template>
- </FollowerList>
- </div>
- <Timeline
- :label="$t('user_card.media')"
- :disabled="!media.visibleStatuses.length"
- :embedded="true" :title="$t('user_card.media')"
- timeline-name="media"
- :timeline="media"
- :user-id="userId"
- />
- <Timeline
- v-if="isUs"
- :label="$t('user_card.favorites')"
- :disabled="!favorites.visibleStatuses.length"
- :embedded="true"
- :title="$t('user_card.favorites')"
- timeline-name="favorites"
- :timeline="favorites"
- />
- </tab-switcher>
- </div>
- <div v-else class="panel user-profile-placeholder">
- <div class="panel-heading">
- <div class="title">
- {{ $t('settings.profile_tab') }}
+ <div class="panel-body">
+ <span v-if="error">{{ error }}</span>
+ <i
+ v-else
+ class="icon-spin3 animate-spin"
+ />
</div>
</div>
- <div class="panel-body">
- <span v-if="error">{{ error }}</span>
- <i class="icon-spin3 animate-spin" v-else></i>
- </div>
</div>
-</div>
</template>
<script src="./user_profile.js"></script>
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index 432dd14d..c79a3707 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -1,45 +1,75 @@
<template>
-<div class="modal-view" @click="closeModal" v-if="isOpen">
- <div class="user-reporting-panel panel" @click.stop="">
- <div class="panel-heading">
- <div class="title">{{$t('user_reporting.title', [user.screen_name])}}</div>
- </div>
- <div class="panel-body">
- <div class="user-reporting-panel-left">
- <div>
- <p>{{$t('user_reporting.add_comment_description')}}</p>
- <textarea
- v-model="comment"
- class="form-control"
- :placeholder="$t('user_reporting.additional_comments')"
- rows="1"
- @input="resize"
- />
- </div>
- <div v-if="!user.is_local">
- <p>{{$t('user_reporting.forward_description')}}</p>
- <Checkbox v-model="forward">{{$t('user_reporting.forward_to', [remoteInstance])}}</Checkbox>
- </div>
- <div>
- <button class="btn btn-default" @click="reportUser" :disabled="processing">{{$t('user_reporting.submit')}}</button>
- <div class="alert error" v-if="error">
- {{$t('user_reporting.generic_error')}}
- </div>
+ <div
+ v-if="isOpen"
+ class="modal-view"
+ @click="closeModal"
+ >
+ <div
+ class="user-reporting-panel panel"
+ @click.stop=""
+ >
+ <div class="panel-heading">
+ <div class="title">
+ {{ $t('user_reporting.title', [user.screen_name]) }}
</div>
</div>
- <div class="user-reporting-panel-right">
- <List :items="statuses">
- <template slot="item" slot-scope="{item}">
- <div class="status-fadein user-reporting-panel-sitem">
- <Status :inConversation="false" :focused="false" :statusoid="item" />
- <Checkbox :checked="isChecked(item.id)" @change="checked => toggleStatus(checked, item.id)" />
+ <div class="panel-body">
+ <div class="user-reporting-panel-left">
+ <div>
+ <p>{{ $t('user_reporting.add_comment_description') }}</p>
+ <textarea
+ v-model="comment"
+ class="form-control"
+ :placeholder="$t('user_reporting.additional_comments')"
+ rows="1"
+ @input="resize"
+ />
+ </div>
+ <div v-if="!user.is_local">
+ <p>{{ $t('user_reporting.forward_description') }}</p>
+ <Checkbox v-model="forward">
+ {{ $t('user_reporting.forward_to', [remoteInstance]) }}
+ </Checkbox>
+ </div>
+ <div>
+ <button
+ class="btn btn-default"
+ :disabled="processing"
+ @click="reportUser"
+ >
+ {{ $t('user_reporting.submit') }}
+ </button>
+ <div
+ v-if="error"
+ class="alert error"
+ >
+ {{ $t('user_reporting.generic_error') }}
</div>
- </template>
- </List>
+ </div>
+ </div>
+ <div class="user-reporting-panel-right">
+ <List :items="statuses">
+ <template
+ slot="item"
+ slot-scope="{item}"
+ >
+ <div class="status-fadein user-reporting-panel-sitem">
+ <Status
+ :in-conversation="false"
+ :focused="false"
+ :statusoid="item"
+ />
+ <Checkbox
+ :checked="isChecked(item.id)"
+ @change="checked => toggleStatus(checked, item.id)"
+ />
+ </div>
+ </template>
+ </List>
+ </div>
</div>
</div>
</div>
-</div>
</template>
<script src="./user_reporting_modal.js"></script>
diff --git a/src/components/user_search/user_search.vue b/src/components/user_search/user_search.vue
index 890b3c13..e1c6074c 100644
--- a/src/components/user_search/user_search.vue
+++ b/src/components/user_search/user_search.vue
@@ -1,19 +1,39 @@
<template>
<div class="user-search panel panel-default">
<div class="panel-heading">
- {{$t('nav.user_search')}}
+ {{ $t('nav.user_search') }}
</div>
<div class="user-search-input-container">
- <input class="user-finder-input" ref="userSearchInput" @keyup.enter="newQuery(username)" v-model="username" :placeholder="$t('finder.find_user')"/>
- <button class="btn search-button" @click="newQuery(username)">
- <i class="icon-search"/>
+ <input
+ ref="userSearchInput"
+ v-model="username"
+ 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>
</div>
- <div v-if="loading" class="text-center loading-icon">
- <i class="icon-spin3 animate-spin"/>
+ <div
+ v-if="loading"
+ class="text-center loading-icon"
+ >
+ <i class="icon-spin3 animate-spin" />
</div>
- <div v-else class="panel-body">
- <FollowCard v-for="user in users" :key="user.id" :user="user" class="list-item"/>
+ <div
+ v-else
+ class="panel-body"
+ >
+ <FollowCard
+ v-for="user in users"
+ :key="user.id"
+ :user="user"
+ class="list-item"
+ />
</div>
</div>
</template>
diff --git a/src/components/user_settings/confirm.vue b/src/components/user_settings/confirm.vue
index 46a42e38..69b3811b 100644
--- a/src/components/user_settings/confirm.vue
+++ b/src/components/user_settings/confirm.vue
@@ -1,13 +1,21 @@
<template>
-<div>
- <slot></slot>
- <button class="btn btn-default" @click="confirm" :disabled="disabled">
- {{$t('general.confirm')}}
- </button>
- <button class="btn btn-default" @click="cancel" :disabled="disabled">
- {{$t('general.cancel')}}
- </button>
-</div>
+ <div>
+ <slot />
+ <button
+ class="btn btn-default"
+ :disabled="disabled"
+ @click="confirm"
+ >
+ {{ $t('general.confirm') }}
+ </button>
+ <button
+ class="btn btn-default"
+ :disabled="disabled"
+ @click="cancel"
+ >
+ {{ $t('general.cancel') }}
+ </button>
+ </div>
</template>
<script src="./confirm.js">
diff --git a/src/components/user_settings/mfa.js b/src/components/user_settings/mfa.js
index d44a3ab7..3090138a 100644
--- a/src/components/user_settings/mfa.js
+++ b/src/components/user_settings/mfa.js
@@ -107,7 +107,7 @@ const Mfa = {
this.setupState.setupOTPState = 'confirm'
})
},
- doConfirmOTP () { // handler confirm enable OTP
+ doConfirmOTP () { // handler confirm enable OTP
this.error = null
this.backendInteractor.mfaConfirmOTP({
token: this.otpConfirmToken,
diff --git a/src/components/user_settings/mfa.vue b/src/components/user_settings/mfa.vue
index 1f1be60d..14ea10a1 100644
--- a/src/components/user_settings/mfa.vue
+++ b/src/components/user_settings/mfa.vue
@@ -1,86 +1,138 @@
<template>
-<div class="setting-item mfa-settings" v-if="readyInit && settings.available">
-
- <div class="mfa-heading">
- <h2>{{$t('settings.mfa.title')}}</h2>
- </div>
-
- <div>
- <div class="setting-item" v-if="!setupInProgress">
- <!-- Enabled methods -->
- <h3>{{$t('settings.mfa.authentication_methods')}}</h3>
- <totp-item :settings="settings" @deactivate="fetchSettings" @activate="activateOTP"/>
- <br />
-
- <div v-if="settings.enabled"> <!-- backup codes block-->
- <recovery-codes :backup-codes="backupCodes" v-if="!confirmNewBackupCodes" />
- <button class="btn btn-default" @click="getBackupCodes" v-if="!confirmNewBackupCodes">
- {{$t('settings.mfa.generate_new_recovery_codes')}}
- </button>
-
- <div v-if="confirmNewBackupCodes">
- <confirm @confirm="confirmBackupCodes" @cancel="cancelBackupCodes"
- :disabled="backupCodes.inProgress">
- <p class="warning">{{$t('settings.mfa.warning_of_generate_new_codes')}}</p>
- </confirm>
- </div>
- </div>
+ <div
+ v-if="readyInit && settings.available"
+ class="setting-item mfa-settings"
+ >
+ <div class="mfa-heading">
+ <h2>{{ $t('settings.mfa.title') }}</h2>
</div>
- <div v-if="setupInProgress"> <!-- setup block-->
+ <div>
+ <div
+ v-if="!setupInProgress"
+ class="setting-item"
+ >
+ <!-- Enabled methods -->
+ <h3>{{ $t('settings.mfa.authentication_methods') }}</h3>
+ <totp-item
+ :settings="settings"
+ @deactivate="fetchSettings"
+ @activate="activateOTP"
+ />
+ <br>
- <h3>{{$t('settings.mfa.setup_otp')}}</h3>
+ <div v-if="settings.enabled">
+ <!-- backup codes block-->
+ <recovery-codes
+ v-if="!confirmNewBackupCodes"
+ :backup-codes="backupCodes"
+ />
+ <button
+ v-if="!confirmNewBackupCodes"
+ class="btn btn-default"
+ @click="getBackupCodes"
+ >
+ {{ $t('settings.mfa.generate_new_recovery_codes') }}
+ </button>
- <recovery-codes :backup-codes="backupCodes" v-if="!setupOTPInProgress"/>
-
-
- <button class="btn btn-default" @click="cancelSetup" v-if="canSetupOTP">
- {{$t('general.cancel')}}
- </button>
-
- <button class="btn btn-default" v-if="canSetupOTP" @click="setupOTP">
- {{$t('settings.mfa.setup_otp')}}
- </button>
-
- <template v-if="setupOTPInProgress">
- <i v-if="prepareOTP">{{$t('settings.mfa.wait_pre_setup_otp')}}</i>
-
- <div v-if="confirmOTP">
- <div class="setup-otp">
- <div class="qr-code">
- <h4>{{$t('settings.mfa.scan.title')}}</h4>
- <p>{{$t('settings.mfa.scan.desc')}}</p>
- <qrcode :value="otpSettings.provisioning_uri" :options="{ width: 200 }"></qrcode>
- <p>
- {{$t('settings.mfa.scan.secret_code')}}:
- {{otpSettings.key}}
+ <div v-if="confirmNewBackupCodes">
+ <confirm
+ :disabled="backupCodes.inProgress"
+ @confirm="confirmBackupCodes"
+ @cancel="cancelBackupCodes"
+ >
+ <p class="warning">
+ {{ $t('settings.mfa.warning_of_generate_new_codes') }}
</p>
- </div>
-
- <div class="verify">
- <h4>{{$t('general.verify')}}</h4>
- <p>{{$t('settings.mfa.verify.desc')}}</p>
- <input type="text" v-model="otpConfirmToken">
-
- <p>{{$t('settings.enter_current_password_to_confirm')}}:</p>
- <input type="password" v-model="currentPassword">
- <div class="confirm-otp-actions">
- <button class="btn btn-default" @click="doConfirmOTP">
- {{$t('settings.mfa.confirm_and_enable')}}
- </button>
- <button class="btn btn-default" @click="cancelSetup">
- {{$t('general.cancel')}}
- </button>
- </div>
- <div class="alert error" v-if="error">{{error}}</div>
- </div>
+ </confirm>
</div>
</div>
- </template>
- </div>
+ </div>
+ <div v-if="setupInProgress">
+ <!-- setup block-->
+
+ <h3>{{ $t('settings.mfa.setup_otp') }}</h3>
+
+ <recovery-codes
+ v-if="!setupOTPInProgress"
+ :backup-codes="backupCodes"
+ />
+
+ <button
+ v-if="canSetupOTP"
+ class="btn btn-default"
+ @click="cancelSetup"
+ >
+ {{ $t('general.cancel') }}
+ </button>
+
+ <button
+ v-if="canSetupOTP"
+ class="btn btn-default"
+ @click="setupOTP"
+ >
+ {{ $t('settings.mfa.setup_otp') }}
+ </button>
+
+ <template v-if="setupOTPInProgress">
+ <i v-if="prepareOTP">{{ $t('settings.mfa.wait_pre_setup_otp') }}</i>
+
+ <div v-if="confirmOTP">
+ <div class="setup-otp">
+ <div class="qr-code">
+ <h4>{{ $t('settings.mfa.scan.title') }}</h4>
+ <p>{{ $t('settings.mfa.scan.desc') }}</p>
+ <qrcode
+ :value="otpSettings.provisioning_uri"
+ :options="{ width: 200 }"
+ />
+ <p>
+ {{ $t('settings.mfa.scan.secret_code') }}:
+ {{ otpSettings.key }}
+ </p>
+ </div>
+
+ <div class="verify">
+ <h4>{{ $t('general.verify') }}</h4>
+ <p>{{ $t('settings.mfa.verify.desc') }}</p>
+ <input
+ v-model="otpConfirmToken"
+ type="text"
+ >
+
+ <p>{{ $t('settings.enter_current_password_to_confirm') }}:</p>
+ <input
+ v-model="currentPassword"
+ type="password"
+ >
+ <div class="confirm-otp-actions">
+ <button
+ class="btn btn-default"
+ @click="doConfirmOTP"
+ >
+ {{ $t('settings.mfa.confirm_and_enable') }}
+ </button>
+ <button
+ class="btn btn-default"
+ @click="cancelSetup"
+ >
+ {{ $t('general.cancel') }}
+ </button>
+ </div>
+ <div
+ v-if="error"
+ class="alert error"
+ >
+ {{ error }}
+ </div>
+ </div>
+ </div>
+ </div>
+ </template>
+ </div>
+ </div>
</div>
-</div>
</template>
<script src="./mfa.js"></script>
diff --git a/src/components/user_settings/mfa_backup_codes.vue b/src/components/user_settings/mfa_backup_codes.vue
index c275bd63..e6c8ede2 100644
--- a/src/components/user_settings/mfa_backup_codes.vue
+++ b/src/components/user_settings/mfa_backup_codes.vue
@@ -1,12 +1,23 @@
<template>
-<div>
- <h4 v-if="displayTitle">{{$t('settings.mfa.recovery_codes')}}</h4>
- <i v-if="inProgress">{{$t('settings.mfa.waiting_a_recovery_codes')}}</i>
- <template v-if="ready">
- <p class="alert warning">{{$t('settings.mfa.recovery_codes_warning')}}</p>
- <ul class="backup-codes"><li v-for="code in backupCodes.codes">{{code}}</li></ul>
- </template>
-</div>
+ <div>
+ <h4 v-if="displayTitle">
+ {{ $t('settings.mfa.recovery_codes') }}
+ </h4>
+ <i v-if="inProgress">{{ $t('settings.mfa.waiting_a_recovery_codes') }}</i>
+ <template v-if="ready">
+ <p class="alert warning">
+ {{ $t('settings.mfa.recovery_codes_warning') }}
+ </p>
+ <ul class="backup-codes">
+ <li
+ v-for="code in backupCodes.codes"
+ :key="code"
+ >
+ {{ code }}
+ </li>
+ </ul>
+ </template>
+ </div>
</template>
<script src="./mfa_backup_codes.js"></script>
<style lang="scss">
diff --git a/src/components/user_settings/mfa_totp.vue b/src/components/user_settings/mfa_totp.vue
index 6b73c8f4..c6f2cc7b 100644
--- a/src/components/user_settings/mfa_totp.vue
+++ b/src/components/user_settings/mfa_totp.vue
@@ -1,23 +1,43 @@
<template>
-<div>
- <div class="method-item">
- <strong>{{$t('settings.mfa.otp')}}</strong>
- <button class="btn btn-default" v-if="!isActivated" @click="doActivate">
- {{$t('general.enable')}}
- </button>
+ <div>
+ <div class="method-item">
+ <strong>{{ $t('settings.mfa.otp') }}</strong>
+ <button
+ v-if="!isActivated"
+ class="btn btn-default"
+ @click="doActivate"
+ >
+ {{ $t('general.enable') }}
+ </button>
- <button class="btn btn-default" :disabled="deactivate" @click="doDeactivate"
- v-if="isActivated">
- {{$t('general.disable')}}
- </button>
+ <button
+ v-if="isActivated"
+ class="btn btn-default"
+ :disabled="deactivate"
+ @click="doDeactivate"
+ >
+ {{ $t('general.disable') }}
+ </button>
+ </div>
+
+ <confirm
+ v-if="deactivate"
+ :disabled="inProgress"
+ @confirm="confirmDeactivate"
+ @cancel="cancelDeactivate"
+ >
+ {{ $t('settings.enter_current_password_to_confirm') }}:
+ <input
+ v-model="currentPassword"
+ type="password"
+ >
+ </confirm>
+ <div
+ v-if="error"
+ class="alert error"
+ >
+ {{ error }}
+ </div>
</div>
-
- <confirm @confirm="confirmDeactivate" @cancel="cancelDeactivate"
- :disabled="inProgress" v-if="deactivate">
- {{$t('settings.enter_current_password_to_confirm')}}:
- <input type="password" v-model="currentPassword">
- </confirm>
- <div class="alert error" v-if="error">{{error}}</div>
-</div>
</template>
<script src="./mfa_totp.js"></script>
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index ced3efaa..19f4604f 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -99,7 +99,7 @@ const UserSettings = {
return suggestor({ emoji: [
...this.$store.state.instance.emoji,
...this.$store.state.instance.customEmoji
- ]})
+ ] })
},
pleromaBackend () {
return this.$store.state.instance.pleromaBackend
@@ -144,10 +144,10 @@ const UserSettings = {
hide_followers: this.hideFollowers,
show_role: this.showRole
/* eslint-enable camelcase */
- }}).then((user) => {
- this.$store.commit('addNewUsers', [user])
- this.$store.commit('setCurrentUser', user)
- })
+ } }).then((user) => {
+ this.$store.commit('addNewUsers', [user])
+ this.$store.commit('setCurrentUser', user)
+ })
},
updateNotificationSettings () {
this.$store.state.api.backendInteractor
@@ -162,12 +162,12 @@ const UserSettings = {
if (file.size > this.$store.state.instance[slot + 'limit']) {
const filesize = fileSizeFormatService.fileSizeFormat(file.size)
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
}
// eslint-disable-next-line no-undef
const reader = new FileReader()
- reader.onload = ({target}) => {
+ reader.onload = ({ target }) => {
const img = target.result
this[slot + 'Preview'] = img
this[slot] = file
@@ -203,7 +203,7 @@ const UserSettings = {
if (!this.bannerPreview) { return }
this.bannerUploading = true
- this.$store.state.api.backendInteractor.updateBanner({banner: this.banner})
+ this.$store.state.api.backendInteractor.updateBanner({ banner: this.banner })
.then((user) => {
this.$store.commit('addNewUsers', [user])
this.$store.commit('setCurrentUser', user)
@@ -269,11 +269,11 @@ const UserSettings = {
this.deletingAccount = true
},
deleteAccount () {
- this.$store.state.api.backendInteractor.deleteAccount({password: this.deleteAccountConfirmPasswordInput})
+ this.$store.state.api.backendInteractor.deleteAccount({ password: this.deleteAccountConfirmPasswordInput })
.then((res) => {
if (res.status === 'success') {
this.$store.dispatch('logout')
- this.$router.push({name: 'root'})
+ this.$router.push({ name: 'root' })
} else {
this.deleteAccountError = res.error
}
@@ -322,7 +322,7 @@ const UserSettings = {
})
},
queryUserIds (query) {
- return userSearchApi.search({query, store: this.$store})
+ return userSearchApi.search({ query, store: this.$store })
.then((users) => {
this.$store.dispatch('addNewUsers', users)
return map(users, 'id')
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 94f1b1f1..34ea8569 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -2,15 +2,23 @@
<div class="settings panel panel-default">
<div class="panel-heading">
<div class="title">
- {{$t('settings.user_settings')}}
+ {{ $t('settings.user_settings') }}
</div>
<transition name="fade">
<template v-if="currentSaveStateNotice">
- <div @click.prevent class="alert error" v-if="currentSaveStateNotice.error">
+ <div
+ v-if="currentSaveStateNotice.error"
+ class="alert error"
+ @click.prevent
+ >
{{ $t('settings.saving_err') }}
</div>
- <div @click.prevent class="alert transparent" v-if="!currentSaveStateNotice.error">
+ <div
+ v-if="!currentSaveStateNotice.error"
+ class="alert transparent"
+ @click.prevent
+ >
{{ $t('settings.saving_ok') }}
</div>
</template>
@@ -19,135 +27,267 @@
<div class="panel-body profile-edit">
<tab-switcher>
<div :label="$t('settings.profile_tab')">
- <div class="setting-item" >
- <h2>{{$t('settings.name_bio')}}</h2>
- <p>{{$t('settings.name')}}</p>
- <EmojiInput :suggest="emojiSuggestor" v-model="newName">
+ <div class="setting-item">
+ <h2>{{ $t('settings.name_bio') }}</h2>
+ <p>{{ $t('settings.name') }}</p>
+ <EmojiInput
+ v-model="newName"
+ :suggest="emojiSuggestor"
+ >
<input
- v-model="newName"
id="username"
+ v-model="newName"
classname="name-changer"
- />
+ >
</EmojiInput>
- <p>{{$t('settings.bio')}}</p>
- <EmojiInput :suggest="emojiUserSuggestor" v-model="newBio">
+ <p>{{ $t('settings.bio') }}</p>
+ <EmojiInput
+ v-model="newBio"
+ :suggest="emojiUserSuggestor"
+ >
<textarea
v-model="newBio"
classname="bio"
- />
+ />
</EmojiInput>
<p>
- <input type="checkbox" v-model="newLocked" id="account-locked">
- <label for="account-locked">{{$t('settings.lock_account_description')}}</label>
+ <input
+ id="account-locked"
+ v-model="newLocked"
+ type="checkbox"
+ >
+ <label for="account-locked">{{ $t('settings.lock_account_description') }}</label>
</p>
<div>
- <label for="default-vis">{{$t('settings.default_vis')}}</label>
- <div id="default-vis" class="visibility-tray">
+ <label for="default-vis">{{ $t('settings.default_vis') }}</label>
+ <div
+ id="default-vis"
+ class="visibility-tray"
+ >
<scope-selector
- :showAll="true"
- :userDefault="newDefaultScope"
- :initialScope="newDefaultScope"
- :onScopeChange="changeVis"/>
+ :show-all="true"
+ :user-default="newDefaultScope"
+ :initial-scope="newDefaultScope"
+ :on-scope-change="changeVis"
+ />
</div>
</div>
<p>
- <input type="checkbox" v-model="newNoRichText" id="account-no-rich-text">
- <label for="account-no-rich-text">{{$t('settings.no_rich_text_description')}}</label>
+ <input
+ id="account-no-rich-text"
+ v-model="newNoRichText"
+ type="checkbox"
+ >
+ <label for="account-no-rich-text">{{ $t('settings.no_rich_text_description') }}</label>
</p>
<p>
- <input type="checkbox" v-model="hideFollows" id="account-hide-follows">
- <label for="account-hide-follows">{{$t('settings.hide_follows_description')}}</label>
+ <input
+ id="account-hide-follows"
+ v-model="hideFollows"
+ type="checkbox"
+ >
+ <label for="account-hide-follows">{{ $t('settings.hide_follows_description') }}</label>
</p>
<p>
- <input type="checkbox" v-model="hideFollowers" id="account-hide-followers">
- <label for="account-hide-followers">{{$t('settings.hide_followers_description')}}</label>
+ <input
+ id="account-hide-followers"
+ v-model="hideFollowers"
+ type="checkbox"
+ >
+ <label for="account-hide-followers">{{ $t('settings.hide_followers_description') }}</label>
</p>
<p>
- <input type="checkbox" v-model="showRole" id="account-show-role">
- <label for="account-show-role" v-if="role === 'admin'">{{$t('settings.show_admin_badge')}}</label>
- <label for="account-show-role" v-if="role === 'moderator'">{{$t('settings.show_moderator_badge')}}</label>
+ <input
+ id="account-show-role"
+ v-model="showRole"
+ 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>
- <button :disabled='newName && newName.length === 0' class="btn btn-default" @click="updateProfile">{{$t('general.submit')}}</button>
+ <button
+ :disabled="newName && newName.length === 0"
+ class="btn btn-default"
+ @click="updateProfile"
+ >
+ {{ $t('general.submit') }}
+ </button>
</div>
<div class="setting-item">
- <h2>{{$t('settings.avatar')}}</h2>
- <p class="visibility-notice">{{$t('settings.avatar_size_instruction')}}</p>
- <p>{{$t('settings.current_avatar')}}</p>
- <img :src="user.profile_image_url_original" class="current-avatar" />
- <p>{{$t('settings.set_new_avatar')}}</p>
- <button class="btn" type="button" id="pick-avatar" v-show="pickAvatarBtnVisible">{{$t('settings.upload_a_photo')}}</button>
- <image-cropper trigger="#pick-avatar" :submitHandler="submitAvatar" @open="pickAvatarBtnVisible=false" @close="pickAvatarBtnVisible=true" />
+ <h2>{{ $t('settings.avatar') }}</h2>
+ <p class="visibility-notice">
+ {{ $t('settings.avatar_size_instruction') }}
+ </p>
+ <p>{{ $t('settings.current_avatar') }}</p>
+ <img
+ :src="user.profile_image_url_original"
+ 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 class="setting-item">
- <h2>{{$t('settings.profile_banner')}}</h2>
- <p>{{$t('settings.current_profile_banner')}}</p>
- <img :src="user.cover_photo" class="banner" />
- <p>{{$t('settings.set_new_profile_banner')}}</p>
- <img class="banner" v-bind:src="bannerPreview" v-if="bannerPreview" />
+ <h2>{{ $t('settings.profile_banner') }}</h2>
+ <p>{{ $t('settings.current_profile_banner') }}</p>
+ <img
+ :src="user.cover_photo"
+ class="banner"
+ >
+ <p>{{ $t('settings.set_new_profile_banner') }}</p>
+ <img
+ v-if="bannerPreview"
+ class="banner"
+ :src="bannerPreview"
+ >
<div>
- <input type="file" @change="uploadFile('banner', $event)" />
+ <input
+ type="file"
+ @change="uploadFile('banner', $event)"
+ >
</div>
- <i class=" icon-spin4 animate-spin uploading" v-if="bannerUploading"></i>
- <button class="btn btn-default" v-else-if="bannerPreview" @click="submitBanner">{{$t('general.submit')}}</button>
- <div class='alert error' v-if="bannerUploadError">
+ <i
+ v-if="bannerUploading"
+ class=" icon-spin4 animate-spin uploading"
+ />
+ <button
+ v-else-if="bannerPreview"
+ class="btn btn-default"
+ @click="submitBanner"
+ >
+ {{ $t('general.submit') }}
+ </button>
+ <div
+ v-if="bannerUploadError"
+ class="alert error"
+ >
Error: {{ bannerUploadError }}
- <i class="button-icon icon-cancel" @click="clearUploadError('banner')"></i>
+ <i
+ class="button-icon icon-cancel"
+ @click="clearUploadError('banner')"
+ />
</div>
</div>
<div class="setting-item">
- <h2>{{$t('settings.profile_background')}}</h2>
- <p>{{$t('settings.set_new_profile_background')}}</p>
- <img class="bg" v-bind:src="backgroundPreview" v-if="backgroundPreview" />
+ <h2>{{ $t('settings.profile_background') }}</h2>
+ <p>{{ $t('settings.set_new_profile_background') }}</p>
+ <img
+ v-if="backgroundPreview"
+ class="bg"
+ :src="backgroundPreview"
+ >
<div>
- <input type="file" @change="uploadFile('background', $event)" />
+ <input
+ type="file"
+ @change="uploadFile('background', $event)"
+ >
</div>
- <i class=" icon-spin4 animate-spin uploading" v-if="backgroundUploading"></i>
- <button class="btn btn-default" v-else-if="backgroundPreview" @click="submitBg">{{$t('general.submit')}}</button>
- <div class='alert error' v-if="backgroundUploadError">
+ <i
+ v-if="backgroundUploading"
+ class=" icon-spin4 animate-spin uploading"
+ />
+ <button
+ v-else-if="backgroundPreview"
+ class="btn btn-default"
+ @click="submitBg"
+ >
+ {{ $t('general.submit') }}
+ </button>
+ <div
+ v-if="backgroundUploadError"
+ class="alert error"
+ >
Error: {{ backgroundUploadError }}
- <i class="button-icon icon-cancel" @click="clearUploadError('background')"></i>
+ <i
+ class="button-icon icon-cancel"
+ @click="clearUploadError('background')"
+ />
</div>
</div>
</div>
<div :label="$t('settings.security_tab')">
<div class="setting-item">
- <h2>{{$t('settings.change_password')}}</h2>
+ <h2>{{ $t('settings.change_password') }}</h2>
<div>
- <p>{{$t('settings.current_password')}}</p>
- <input type="password" v-model="changePasswordInputs[0]">
+ <p>{{ $t('settings.current_password') }}</p>
+ <input
+ v-model="changePasswordInputs[0]"
+ type="password"
+ >
</div>
<div>
- <p>{{$t('settings.new_password')}}</p>
- <input type="password" v-model="changePasswordInputs[1]">
+ <p>{{ $t('settings.new_password') }}</p>
+ <input
+ v-model="changePasswordInputs[1]"
+ type="password"
+ >
</div>
<div>
- <p>{{$t('settings.confirm_new_password')}}</p>
- <input type="password" v-model="changePasswordInputs[2]">
+ <p>{{ $t('settings.confirm_new_password') }}</p>
+ <input
+ v-model="changePasswordInputs[2]"
+ type="password"
+ >
</div>
- <button class="btn btn-default" @click="changePassword">{{$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>
+ <button
+ class="btn btn-default"
+ @click="changePassword"
+ >
+ {{ $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 class="setting-item">
- <h2>{{$t('settings.oauth_tokens')}}</h2>
+ <h2>{{ $t('settings.oauth_tokens') }}</h2>
<table class="oauth-tokens">
<thead>
<tr>
- <th>{{$t('settings.app_name')}}</th>
- <th>{{$t('settings.valid_until')}}</th>
- <th></th>
+ <th>{{ $t('settings.app_name') }}</th>
+ <th>{{ $t('settings.valid_until') }}</th>
+ <th />
</tr>
</thead>
<tbody>
- <tr v-for="oauthToken in oauthTokens" :key="oauthToken.id">
- <td>{{oauthToken.appName}}</td>
- <td>{{oauthToken.validUntil}}</td>
+ <tr
+ v-for="oauthToken in oauthTokens"
+ :key="oauthToken.id"
+ >
+ <td>{{ oauthToken.appName }}</td>
+ <td>{{ oauthToken.validUntil }}</td>
<td class="actions">
- <button class="btn btn-default" @click="revokeToken(oauthToken.id)">
- {{$t('settings.revoke_token')}}
+ <button
+ class="btn btn-default"
+ @click="revokeToken(oauthToken.id)"
+ >
+ {{ $t('settings.revoke_token') }}
</button>
</td>
</tr>
@@ -156,123 +296,250 @@
</div>
<mfa />
<div class="setting-item">
- <h2>{{$t('settings.delete_account')}}</h2>
- <p v-if="!deletingAccount">{{$t('settings.delete_account_description')}}</p>
+ <h2>{{ $t('settings.delete_account') }}</h2>
+ <p v-if="!deletingAccount">
+ {{ $t('settings.delete_account_description') }}
+ </p>
<div v-if="deletingAccount">
- <p>{{$t('settings.delete_account_instructions')}}</p>
- <p>{{$t('login.password')}}</p>
- <input type="password" v-model="deleteAccountConfirmPasswordInput">
- <button class="btn btn-default" @click="deleteAccount">{{$t('settings.delete_account')}}</button>
+ <p>{{ $t('settings.delete_account_instructions') }}</p>
+ <p>{{ $t('login.password') }}</p>
+ <input
+ v-model="deleteAccountConfirmPasswordInput"
+ type="password"
+ >
+ <button
+ class="btn btn-default"
+ @click="deleteAccount"
+ >
+ {{ $t('settings.delete_account') }}
+ </button>
</div>
- <p v-if="deleteAccountError !== false">{{$t('settings.delete_account_error')}}</p>
- <p v-if="deleteAccountError">{{deleteAccountError}}</p>
- <button class="btn btn-default" v-if="!deletingAccount" @click="confirmDelete">{{$t('general.submit')}}</button>
+ <p v-if="deleteAccountError !== false">
+ {{ $t('settings.delete_account_error') }}
+ </p>
+ <p v-if="deleteAccountError">
+ {{ deleteAccountError }}
+ </p>
+ <button
+ v-if="!deletingAccount"
+ class="btn btn-default"
+ @click="confirmDelete"
+ >
+ {{ $t('general.submit') }}
+ </button>
</div>
</div>
- <div :label="$t('settings.notifications')" v-if="pleromaBackend">
+ <div
+ v-if="pleromaBackend"
+ :label="$t('settings.notifications')"
+ >
<div class="setting-item">
<div class="select-multiple">
- <span class="label">{{$t('settings.notification_setting')}}</span>
+ <span class="label">{{ $t('settings.notification_setting') }}</span>
<ul class="option-list">
<li>
- <input type="checkbox" id="notification-setting-follows" v-model="notificationSettings.follows">
+ <input
+ id="notification-setting-follows"
+ v-model="notificationSettings.follows"
+ type="checkbox"
+ >
<label for="notification-setting-follows">
- {{$t('settings.notification_setting_follows')}}
+ {{ $t('settings.notification_setting_follows') }}
</label>
</li>
<li>
- <input type="checkbox" id="notification-setting-followers" v-model="notificationSettings.followers">
+ <input
+ id="notification-setting-followers"
+ v-model="notificationSettings.followers"
+ type="checkbox"
+ >
<label for="notification-setting-followers">
- {{$t('settings.notification_setting_followers')}}
+ {{ $t('settings.notification_setting_followers') }}
</label>
</li>
<li>
- <input type="checkbox" id="notification-setting-non-follows" v-model="notificationSettings.non_follows">
+ <input
+ id="notification-setting-non-follows"
+ v-model="notificationSettings.non_follows"
+ type="checkbox"
+ >
<label for="notification-setting-non-follows">
- {{$t('settings.notification_setting_non_follows')}}
+ {{ $t('settings.notification_setting_non_follows') }}
</label>
</li>
<li>
- <input type="checkbox" id="notification-setting-non-followers" v-model="notificationSettings.non_followers">
+ <input
+ id="notification-setting-non-followers"
+ v-model="notificationSettings.non_followers"
+ type="checkbox"
+ >
<label for="notification-setting-non-followers">
- {{$t('settings.notification_setting_non_followers')}}
+ {{ $t('settings.notification_setting_non_followers') }}
</label>
</li>
</ul>
</div>
- <p>{{$t('settings.notification_mutes')}}</p>
- <p>{{$t('settings.notification_blocks')}}</p>
- <button class="btn btn-default" @click="updateNotificationSettings">{{$t('general.submit')}}</button>
+ <p>{{ $t('settings.notification_mutes') }}</p>
+ <p>{{ $t('settings.notification_blocks') }}</p>
+ <button
+ class="btn btn-default"
+ @click="updateNotificationSettings"
+ >
+ {{ $t('general.submit') }}
+ </button>
</div>
</div>
- <div :label="$t('settings.data_import_export_tab')" v-if="pleromaBackend">
+ <div
+ v-if="pleromaBackend"
+ :label="$t('settings.data_import_export_tab')"
+ >
<div class="setting-item">
- <h2>{{$t('settings.follow_import')}}</h2>
- <p>{{$t('settings.import_followers_from_a_csv_file')}}</p>
- <Importer :submitHandler="importFollows" :successMessage="$t('settings.follows_imported')" :errorMessage="$t('settings.follow_import_error')" />
+ <h2>{{ $t('settings.follow_import') }}</h2>
+ <p>{{ $t('settings.import_followers_from_a_csv_file') }}</p>
+ <Importer
+ :submit-handler="importFollows"
+ :success-message="$t('settings.follows_imported')"
+ :error-message="$t('settings.follow_import_error')"
+ />
</div>
<div class="setting-item">
- <h2>{{$t('settings.follow_export')}}</h2>
- <Exporter :getContent="getFollowsContent" filename="friends.csv" :exportButtonLabel="$t('settings.follow_export_button')" />
+ <h2>{{ $t('settings.follow_export') }}</h2>
+ <Exporter
+ :get-content="getFollowsContent"
+ filename="friends.csv"
+ :export-button-label="$t('settings.follow_export_button')"
+ />
</div>
<div class="setting-item">
- <h2>{{$t('settings.block_import')}}</h2>
- <p>{{$t('settings.import_blocks_from_a_csv_file')}}</p>
- <Importer :submitHandler="importBlocks" :successMessage="$t('settings.blocks_imported')" :errorMessage="$t('settings.block_import_error')" />
+ <h2>{{ $t('settings.block_import') }}</h2>
+ <p>{{ $t('settings.import_blocks_from_a_csv_file') }}</p>
+ <Importer
+ :submit-handler="importBlocks"
+ :success-message="$t('settings.blocks_imported')"
+ :error-message="$t('settings.block_import_error')"
+ />
</div>
<div class="setting-item">
- <h2>{{$t('settings.block_export')}}</h2>
- <Exporter :getContent="getBlocksContent" filename="blocks.csv" :exportButtonLabel="$t('settings.block_export_button')" />
+ <h2>{{ $t('settings.block_export') }}</h2>
+ <Exporter
+ :get-content="getBlocksContent"
+ filename="blocks.csv"
+ :export-button-label="$t('settings.block_export_button')"
+ />
</div>
</div>
<div :label="$t('settings.blocks_tab')">
<div class="profile-edit-usersearch-wrapper">
- <Autosuggest :filter="filterUnblockedUsers" :query="queryUserIds" :placeholder="$t('settings.search_user_to_block')">
- <BlockCard slot-scope="row" :userId="row.item"/>
+ <Autosuggest
+ :filter="filterUnblockedUsers"
+ :query="queryUserIds"
+ :placeholder="$t('settings.search_user_to_block')"
+ >
+ <BlockCard
+ slot-scope="row"
+ :user-id="row.item"
+ />
</Autosuggest>
</div>
- <BlockList :refresh="true" :getKey="identity">
- <template slot="header" slot-scope="{selected}">
+ <BlockList
+ :refresh="true"
+ :get-key="identity"
+ >
+ <template
+ slot="header"
+ slot-scope="{selected}"
+ >
<div class="profile-edit-bulk-actions">
- <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => blockUsers(selected)">
+ <ProgressButton
+ v-if="selected.length > 0"
+ class="btn btn-default"
+ :click="() => blockUsers(selected)"
+ >
{{ $t('user_card.block') }}
- <template slot="progress">{{ $t('user_card.block_progress') }}</template>
+ <template slot="progress">
+ {{ $t('user_card.block_progress') }}
+ </template>
</ProgressButton>
- <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => unblockUsers(selected)">
+ <ProgressButton
+ v-if="selected.length > 0"
+ class="btn btn-default"
+ :click="() => unblockUsers(selected)"
+ >
{{ $t('user_card.unblock') }}
- <template slot="progress">{{ $t('user_card.unblock_progress') }}</template>
+ <template slot="progress">
+ {{ $t('user_card.unblock_progress') }}
+ </template>
</ProgressButton>
</div>
</template>
- <template slot="item" slot-scope="{item}"><BlockCard :userId="item" /></template>
- <template slot="empty">{{$t('settings.no_blocks')}}</template>
+ <template
+ slot="item"
+ slot-scope="{item}"
+ >
+ <BlockCard :user-id="item" />
+ </template>
+ <template slot="empty">
+ {{ $t('settings.no_blocks') }}
+ </template>
</BlockList>
</div>
<div :label="$t('settings.mutes_tab')">
<div class="profile-edit-usersearch-wrapper">
- <Autosuggest :filter="filterUnMutedUsers" :query="queryUserIds" :placeholder="$t('settings.search_user_to_mute')">
- <MuteCard slot-scope="row" :userId="row.item"/>
+ <Autosuggest
+ :filter="filterUnMutedUsers"
+ :query="queryUserIds"
+ :placeholder="$t('settings.search_user_to_mute')"
+ >
+ <MuteCard
+ slot-scope="row"
+ :user-id="row.item"
+ />
</Autosuggest>
</div>
- <MuteList :refresh="true" :getKey="identity">
- <template slot="header" slot-scope="{selected}">
+ <MuteList
+ :refresh="true"
+ :get-key="identity"
+ >
+ <template
+ slot="header"
+ slot-scope="{selected}"
+ >
<div class="profile-edit-bulk-actions">
- <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => muteUsers(selected)">
+ <ProgressButton
+ v-if="selected.length > 0"
+ class="btn btn-default"
+ :click="() => muteUsers(selected)"
+ >
{{ $t('user_card.mute') }}
- <template slot="progress">{{ $t('user_card.mute_progress') }}</template>
+ <template slot="progress">
+ {{ $t('user_card.mute_progress') }}
+ </template>
</ProgressButton>
- <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => unmuteUsers(selected)">
+ <ProgressButton
+ v-if="selected.length > 0"
+ class="btn btn-default"
+ :click="() => unmuteUsers(selected)"
+ >
{{ $t('user_card.unmute') }}
- <template slot="progress">{{ $t('user_card.unmute_progress') }}</template>
+ <template slot="progress">
+ {{ $t('user_card.unmute_progress') }}
+ </template>
</ProgressButton>
</div>
</template>
- <template slot="item" slot-scope="{item}"><MuteCard :userId="item" /></template>
- <template slot="empty">{{$t('settings.no_mutes')}}</template>
+ <template
+ slot="item"
+ slot-scope="{item}"
+ >
+ <MuteCard :user-id="item" />
+ </template>
+ <template slot="empty">
+ {{ $t('settings.no_mutes') }}
+ </template>
</MuteList>
</div>
</tab-switcher>
diff --git a/src/components/video_attachment/video_attachment.vue b/src/components/video_attachment/video_attachment.vue
index 68de201e..97ddf1cd 100644
--- a/src/components/video_attachment/video_attachment.vue
+++ b/src/components/video_attachment/video_attachment.vue
@@ -1,10 +1,11 @@
<template>
- <video class="video"
- @loadeddata="onVideoDataLoad"
+ <video
+ class="video"
:src="attachment.url"
:loop="loopVideo"
:controls="controls"
playsinline
+ @loadeddata="onVideoDataLoad"
/>
</template>
diff --git a/src/components/who_to_follow/who_to_follow.js b/src/components/who_to_follow/who_to_follow.js
index 7ae602a2..f8100257 100644
--- a/src/components/who_to_follow/who_to_follow.js
+++ b/src/components/who_to_follow/who_to_follow.js
@@ -37,7 +37,7 @@ const WhoToFollow = {
getWhoToFollow () {
const credentials = this.$store.state.users.currentUser.credentials
if (credentials) {
- apiService.suggestions({credentials: credentials})
+ apiService.suggestions({ credentials: credentials })
.then((reply) => {
this.showWhoToFollow(reply)
})
diff --git a/src/components/who_to_follow/who_to_follow.vue b/src/components/who_to_follow/who_to_follow.vue
index 8bc9a728..3a17d0e2 100644
--- a/src/components/who_to_follow/who_to_follow.vue
+++ b/src/components/who_to_follow/who_to_follow.vue
@@ -1,10 +1,15 @@
<template>
<div class="panel panel-default">
<div class="panel-heading">
- {{$t('who_to_follow.who_to_follow')}}
+ {{ $t('who_to_follow.who_to_follow') }}
</div>
<div class="panel-body">
- <FollowCard v-for="user in users" :key="user.id" :user="user" class="list-item"/>
+ <FollowCard
+ v-for="user in users"
+ :key="user.id"
+ :user="user"
+ class="list-item"
+ />
</div>
</div>
</template>
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js
index a56a27ea..7d01678b 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.js
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -29,7 +29,7 @@ function getWhoToFollow (panel) {
panel.usersToFollow.forEach(toFollow => {
toFollow.name = 'Loading...'
})
- apiService.suggestions({credentials: credentials})
+ apiService.suggestions({ credentials: credentials })
.then((reply) => {
showWhoToFollow(panel, reply)
})
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.vue b/src/components/who_to_follow_panel/who_to_follow_panel.vue
index 74e82789..518acd97 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.vue
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.vue
@@ -3,19 +3,23 @@
<div class="panel panel-default base01-background">
<div class="panel-heading timeline-heading base02-background base04">
<div class="title">
- {{$t('who_to_follow.who_to_follow')}}
+ {{ $t('who_to_follow.who_to_follow') }}
</div>
</div>
<div class="who-to-follow">
- <p v-for="user in usersToFollow" class="who-to-follow-items">
- <img v-bind:src="user.img" />
- <router-link v-bind:to="userProfileLink(user.id, user.name)">
- {{user.name}}
- </router-link><br />
+ <p
+ v-for="user in usersToFollow"
+ :key="user.id"
+ class="who-to-follow-items"
+ >
+ <img :src="user.img">
+ <router-link :to="userProfileLink(user.id, user.name)">
+ {{ user.name }}
+ </router-link><br>
</p>
<p class="who-to-follow-more">
<router-link :to="{ name: 'who-to-follow' }">
- {{$t('who_to_follow.more')}}
+ {{ $t('who_to_follow.more') }}
</router-link>
</p>
</div>
diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js
index 74979b87..1e1b2a74 100644
--- a/src/hocs/with_load_more/with_load_more.js
+++ b/src/hocs/with_load_more/with_load_more.js
@@ -4,39 +4,16 @@ import { getComponentProps } from '../../services/component_utils/component_util
import './with_load_more.scss'
const withLoadMore = ({
- fetch, // function to fetch entries and return a promise
- select, // function to select data from store
- destroy, // function called at "destroyed" lifecycle
- childPropName = 'entries', // name of the prop to be passed into the wrapped component
- additionalPropNames = [] // additional prop name list of the wrapper component
+ fetch, // function to fetch entries and return a promise
+ select, // function to select data from store
+ destroy, // function called at "destroyed" lifecycle
+ childPropName = 'entries', // name of the prop to be passed into the wrapped component
+ additionalPropNames = [] // additional prop name list of the wrapper component
}) => (WrappedComponent) => {
const originalProps = Object.keys(getComponentProps(WrappedComponent))
const props = originalProps.filter(v => v !== childPropName).concat(additionalPropNames)
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,
data () {
return {
@@ -87,6 +64,29 @@ const withLoadMore = ({
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>
+ )
}
})
}
diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js
index 679409cf..91fc4cca 100644
--- a/src/hocs/with_subscription/with_subscription.js
+++ b/src/hocs/with_subscription/with_subscription.js
@@ -4,10 +4,10 @@ import { getComponentProps } from '../../services/component_utils/component_util
import './with_subscription.scss'
const withSubscription = ({
- fetch, // function to fetch entries and return a promise
- select, // function to select data from store
- childPropName = 'content', // name of the prop to be passed into the wrapped component
- additionalPropNames = [] // additional prop name list of the wrapper component
+ fetch, // function to fetch entries and return a promise
+ select, // function to select data from store
+ childPropName = 'content', // name of the prop to be passed into the wrapped component
+ additionalPropNames = [] // additional prop name list of the wrapper component
}) => (WrappedComponent) => {
const originalProps = Object.keys(getComponentProps(WrappedComponent))
const props = originalProps.filter(v => v !== childPropName).concat(additionalPropNames)
@@ -15,37 +15,8 @@ const withSubscription = ({
return Vue.component('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 () {
return {
loading: false,
@@ -77,6 +48,35 @@ 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>
+ )
+ }
}
})
}
diff --git a/src/modules/auth_flow.js b/src/modules/auth_flow.js
index 86328cf3..d0a90feb 100644
--- a/src/modules/auth_flow.js
+++ b/src/modules/auth_flow.js
@@ -55,7 +55,7 @@ const mutations = {
requireToken (state) {
state.strategy = TOKEN_STRATEGY
},
- requireMFA (state, {app, settings}) {
+ requireMFA (state, { app, settings }) {
state.settings = settings
state.app = app
state.strategy = TOTP_STRATEGY // default strategy of MFA
@@ -73,7 +73,8 @@ const mutations = {
// actions
const actions = {
- async login ({state, dispatch, commit}, {access_token}) {
+ // eslint-disable-next-line camelcase
+ async login ({ state, dispatch, commit }, { access_token }) {
commit('setToken', access_token, { root: true })
await dispatch('loginUser', access_token, { root: true })
resetState(state)
diff --git a/src/modules/chat.js b/src/modules/chat.js
index 4d8d6699..e1b03bca 100644
--- a/src/modules/chat.js
+++ b/src/modules/chat.js
@@ -1,7 +1,7 @@
const chat = {
state: {
messages: [],
- channel: {state: ''},
+ channel: { state: '' },
socket: null
},
mutations: {
@@ -29,7 +29,7 @@ const chat = {
channel.on('new_msg', (msg) => {
store.commit('addMessage', msg)
})
- channel.on('messages', ({messages}) => {
+ channel.on('messages', ({ messages }) => {
store.commit('setMessages', messages)
})
channel.join()
diff --git a/src/modules/config.js b/src/modules/config.js
index a8da525a..2bfad8f6 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -56,10 +56,10 @@ const config = {
},
actions: {
setHighlight ({ commit, dispatch }, { user, color, type }) {
- commit('setHighlight', {user, color, type})
+ commit('setHighlight', { user, color, type })
},
setOption ({ commit, dispatch }, { name, value }) {
- commit('setOption', {name, value})
+ commit('setOption', { name, value })
switch (name) {
case 'theme':
setPreset(value, commit)
diff --git a/src/modules/errors.js b/src/modules/errors.js
index c809e1b5..ca89dc0f 100644
--- a/src/modules/errors.js
+++ b/src/modules/errors.js
@@ -9,4 +9,3 @@ export function humanizeErrors (errors) {
return [...errs, message]
}, [])
}
-
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 22addb9b..93b56577 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -74,7 +74,7 @@ const instance = {
},
actions: {
setInstanceOption ({ commit, dispatch }, { name, value }) {
- commit('setInstanceOption', {name, value})
+ commit('setInstanceOption', { name, value })
switch (name) {
case 'name':
dispatch('setPageTitle')
diff --git a/src/modules/oauth_tokens.js b/src/modules/oauth_tokens.js
index 00ac1431..0159a3f1 100644
--- a/src/modules/oauth_tokens.js
+++ b/src/modules/oauth_tokens.js
@@ -3,12 +3,12 @@ const oauthTokens = {
tokens: []
},
actions: {
- fetchTokens ({rootState, commit}) {
+ fetchTokens ({ rootState, commit }) {
rootState.api.backendInteractor.fetchOAuthTokens().then((tokens) => {
commit('swapTokens', tokens)
})
},
- revokeToken ({rootState, commit, state}, id) {
+ revokeToken ({ rootState, commit, state }, id) {
rootState.api.backendInteractor.revokeOAuthToken(id).then((response) => {
if (response.status === 201) {
commit('swapTokens', state.tokens.filter(token => token.id !== id))
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index e58a9b4c..cf65c9f4 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -80,13 +80,13 @@ const mergeOrAdd = (arr, obj, item) => {
merge(oldItem, omitBy(item, (v, k) => v === null || k === 'user'))
// Reactivity fix.
oldItem.attachments.splice(oldItem.attachments.length)
- return {item: oldItem, new: false}
+ return { item: oldItem, new: false }
} else {
// This is a new item, prepare it
prepareStatus(item)
arr.push(item)
set(obj, item.id, item)
- return {item, new: true}
+ return { item, new: true }
}
}
@@ -137,7 +137,7 @@ const removeStatusFromGlobalStorage = (state, status) => {
// TODO: Need to remove from allStatusesObject?
// Remove possible notification
- remove(state.notifications.data, ({action: {id}}) => id === status.id)
+ remove(state.notifications.data, ({ action: { id } }) => id === status.id)
// Remove from conversation
const conversationId = status.statusnet_conversation_id
@@ -270,7 +270,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
},
'deletion': (deletion) => {
const uri = deletion.uri
- const status = find(allStatuses, {uri})
+ const status = find(allStatuses, { uri })
if (!status) {
return
}
diff --git a/src/modules/users.js b/src/modules/users.js
index dd3a8f3c..6c7a96f6 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -347,8 +347,8 @@ const users = {
const notificationsObject = store.rootState.statuses.notifications.idStore
const relevantNotifications = Object.entries(notificationsObject)
- .filter(([k, val]) => notificationIds.includes(k))
- .map(([k, val]) => val)
+ .filter(([k, val]) => notificationIds.includes(k))
+ .map(([k, val]) => val)
// Reconnect users to notifications
each(relevantNotifications, (notification) => {
@@ -394,7 +394,7 @@ const users = {
}
},
async getCaptcha (store) {
- return await store.rootState.api.backendInteractor.getCaptcha()
+ return store.rootState.api.backendInteractor.getCaptcha()
},
logout (store) {
@@ -472,19 +472,19 @@ const users = {
// Authentication failed
commit('endLogin')
if (response.status === 401) {
- reject('Wrong username or password')
+ reject(new Error('Wrong username or password'))
} else {
- reject('An error occurred, please try again')
+ reject(new Error('An error occurred, please try again'))
}
}
commit('endLogin')
resolve()
})
- .catch((error) => {
- console.log(error)
- commit('endLogin')
- reject('Failed to connect to server, try again')
- })
+ .catch((error) => {
+ console.log(error)
+ commit('endLogin')
+ reject(new Error('Failed to connect to server, try again'))
+ })
})
}
}
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index d5fc418d..22db671e 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -315,7 +315,7 @@ const exportFriends = ({ id, credentials }) => {
let more = true
while (more) {
const maxId = friends.length > 0 ? last(friends).id : undefined
- const users = await fetchFriends({id, maxId, credentials})
+ const users = await fetchFriends({ id, maxId, credentials })
friends = concat(friends, users)
if (users.length === 0) {
more = false
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index e095d3d2..3550aafd 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -63,26 +63,32 @@ const backendInteractorService = credentials => {
return notificationsFetcher.startFetching({ store, credentials })
}
+ // eslint-disable-next-line camelcase
const tagUser = ({ screen_name }, tag) => {
return apiService.tagUser({ screen_name, tag, credentials })
}
+ // eslint-disable-next-line camelcase
const untagUser = ({ screen_name }, tag) => {
return apiService.untagUser({ screen_name, tag, credentials })
}
+ // eslint-disable-next-line camelcase
const addRight = ({ screen_name }, right) => {
return apiService.addRight({ screen_name, right, credentials })
}
+ // eslint-disable-next-line camelcase
const deleteRight = ({ screen_name }, right) => {
return apiService.deleteRight({ screen_name, right, credentials })
}
+ // eslint-disable-next-line camelcase
const setActivationStatus = ({ screen_name }, status) => {
return apiService.setActivationStatus({ screen_name, status, credentials })
}
+ // eslint-disable-next-line camelcase
const deleteUser = ({ screen_name }) => {
return apiService.deleteUser({ screen_name, credentials })
}
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index 7576c518..d1b17c61 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -59,7 +59,7 @@ const srgbToLinear = (srgb) => {
* @returns {Number} relative luminance
*/
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
}
diff --git a/src/services/completion/completion.js b/src/services/completion/completion.js
index 11c45867..df83d03d 100644
--- a/src/services/completion/completion.js
+++ b/src/services/completion/completion.js
@@ -8,7 +8,7 @@ export const wordAtPosition = (str, pos) => {
const words = splitIntoWords(str)
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) => {
diff --git a/src/services/file_size_format/file_size_format.js b/src/services/file_size_format/file_size_format.js
index add56ee0..7e6cd4d7 100644
--- a/src/services/file_size_format/file_size_format.js
+++ b/src/services/file_size_format/file_size_format.js
@@ -9,7 +9,7 @@ const fileSizeFormat = (num) => {
exponent = Math.min(Math.floor(Math.log(num) / Math.log(1024)), units.length - 1)
num = (num / Math.pow(1024, exponent)).toFixed(2) * 1
unit = units[exponent]
- return {num: num, unit: unit}
+ return { num: num, unit: unit }
}
const fileSizeFormatService = {
fileSizeFormat
diff --git a/src/services/follow_request_fetcher/follow_request_fetcher.service.js b/src/services/follow_request_fetcher/follow_request_fetcher.service.js
index 125ff3e1..786740b7 100644
--- a/src/services/follow_request_fetcher/follow_request_fetcher.service.js
+++ b/src/services/follow_request_fetcher/follow_request_fetcher.service.js
@@ -8,7 +8,7 @@ const fetchAndUpdate = ({ store, credentials }) => {
.catch(() => {})
}
-const startFetching = ({credentials, store}) => {
+const startFetching = ({ credentials, store }) => {
fetchAndUpdate({ credentials, store })
const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
return setInterval(boundFetchAndUpdate, 10000)
diff --git a/src/services/new_api/mfa.js b/src/services/new_api/mfa.js
index ddf90e6b..cbba06d5 100644
--- a/src/services/new_api/mfa.js
+++ b/src/services/new_api/mfa.js
@@ -1,4 +1,4 @@
-const verifyOTPCode = ({app, instance, mfaToken, code}) => {
+const verifyOTPCode = ({ app, instance, mfaToken, code }) => {
const url = `${instance}/oauth/mfa/challenge`
const form = new window.FormData()
@@ -14,7 +14,7 @@ const verifyOTPCode = ({app, instance, mfaToken, code}) => {
}).then((data) => data.json())
}
-const verifyRecoveryCode = ({app, instance, mfaToken, code}) => {
+const verifyRecoveryCode = ({ app, instance, mfaToken, code }) => {
const url = `${instance}/oauth/mfa/challenge`
const form = new window.FormData()
diff --git a/src/services/new_api/oauth.js b/src/services/new_api/oauth.js
index 663531ab..d0d18c03 100644
--- a/src/services/new_api/oauth.js
+++ b/src/services/new_api/oauth.js
@@ -93,7 +93,7 @@ export const getClientToken = ({ clientId, clientSecret, instance }) => {
body: form
}).then((data) => data.json())
}
-const verifyOTPCode = ({app, instance, mfaToken, code}) => {
+const verifyOTPCode = ({ app, instance, mfaToken, code }) => {
const url = `${instance}/oauth/mfa/challenge`
const form = new window.FormData()
@@ -109,7 +109,7 @@ const verifyOTPCode = ({app, instance, mfaToken, code}) => {
}).then((data) => data.json())
}
-const verifyRecoveryCode = ({app, instance, mfaToken, code}) => {
+const verifyRecoveryCode = ({ app, instance, mfaToken, code }) => {
const url = `${instance}/oauth/mfa/challenge`
const form = new window.FormData()
diff --git a/src/services/new_api/user_search.js b/src/services/new_api/user_search.js
index c5a87cce..5936fef9 100644
--- a/src/services/new_api/user_search.js
+++ b/src/services/new_api/user_search.js
@@ -1,7 +1,7 @@
import utils from './utils.js'
import { parseUser } from '../entity_normalizer/entity_normalizer.service.js'
-const search = ({query, store}) => {
+const search = ({ query, store }) => {
return utils.request({
store,
url: '/api/v1/accounts/search',
@@ -10,8 +10,8 @@ const search = ({query, store}) => {
resolve: true
}
})
- .then((data) => data.json())
- .then((data) => data.map(parseUser))
+ .then((data) => data.json())
+ .then((data) => data.map(parseUser))
}
const UserSearch = {
search
diff --git a/src/services/new_api/utils.js b/src/services/new_api/utils.js
index 6696573b..57111026 100644
--- a/src/services/new_api/utils.js
+++ b/src/services/new_api/utils.js
@@ -13,7 +13,7 @@ const headers = (store) => {
}
}
-const request = ({method = 'GET', url, params, store}) => {
+const request = ({ method = 'GET', url, params, store }) => {
const instance = store.state.instance.server
let fullUrl = `${instance}${url}`
diff --git a/src/services/notification_utils/notification_utils.js b/src/services/notification_utils/notification_utils.js
index f9cbbade..7021adbd 100644
--- a/src/services/notification_utils/notification_utils.js
+++ b/src/services/notification_utils/notification_utils.js
@@ -35,4 +35,4 @@ export const visibleNotificationsFromStore = (store, types) => {
}
export const unseenNotificationsFromStore = store =>
- filter(visibleNotificationsFromStore(store), ({seen}) => !seen)
+ filter(visibleNotificationsFromStore(store), ({ seen }) => !seen)
diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js
index 60c497ae..f9ec3f6e 100644
--- a/src/services/notifications_fetcher/notifications_fetcher.service.js
+++ b/src/services/notifications_fetcher/notifications_fetcher.service.js
@@ -1,12 +1,12 @@
import apiService from '../api/api.service.js'
-const update = ({store, notifications, older}) => {
+const update = ({ store, notifications, older }) => {
store.dispatch('setNotificationsError', { value: false })
store.dispatch('addNewNotifications', { notifications, older })
}
-const fetchAndUpdate = ({store, credentials, older = false}) => {
+const fetchAndUpdate = ({ store, credentials, older = false }) => {
const args = { credentials }
const rootState = store.rootState || store.state
const timelineData = rootState.statuses.notifications
@@ -45,7 +45,7 @@ const fetchNotifications = ({ store, args, older }) => {
.catch(() => store.dispatch('setNotificationsError', { value: true }))
}
-const startFetching = ({credentials, store}) => {
+const startFetching = ({ credentials, store }) => {
fetchAndUpdate({ credentials, store })
const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
// Initially there's set flag to silence all desktop notifications so
diff --git a/src/services/status_poster/status_poster.service.js b/src/services/status_poster/status_poster.service.js
index 1efecf90..9e904d3a 100644
--- a/src/services/status_poster/status_poster.service.js
+++ b/src/services/status_poster/status_poster.service.js
@@ -13,7 +13,7 @@ const postStatus = ({ store, status, spoilerText, visibility, sensitive, poll, m
mediaIds,
inReplyToStatusId,
contentType,
- poll})
+ poll })
.then((data) => {
if (!data.error) {
store.dispatch('addNewStatuses', {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index d73106b8..f186d202 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -239,12 +239,12 @@ const generateColors = (input) => {
})
const htmlColors = Object.entries(colors)
- .reduce((acc, [k, v]) => {
- if (!v) return acc
- acc.solid[k] = rgb2hex(v)
- acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgb2rgba(v)
- return acc
- }, { complete: {}, solid: {} })
+ .reduce((acc, [k, v]) => {
+ if (!v) return acc
+ acc.solid[k] = rgb2hex(v)
+ acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgb2rgba(v)
+ return acc
+ }, { complete: {}, solid: {} })
return {
rules: {
colors: Object.entries(htmlColors.complete)
diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
index 8e954cdf..f72688f8 100644
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@@ -2,7 +2,7 @@ import { camelCase } from 'lodash'
import apiService from '../api/api.service.js'
-const update = ({store, statuses, timeline, showImmediately, userId}) => {
+const update = ({ store, statuses, timeline, showImmediately, userId }) => {
const ccTimeline = camelCase(timeline)
store.dispatch('setError', { value: false })
@@ -15,7 +15,7 @@ const update = ({store, statuses, timeline, showImmediately, userId}) => {
})
}
-const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false, showImmediately = false, userId = false, tag = false, until}) => {
+const fetchAndUpdate = ({ store, credentials, timeline = 'friends', older = false, showImmediately = false, userId = false, tag = false, until }) => {
const args = { timeline, credentials }
const rootState = store.rootState || store.state
const timelineData = rootState.statuses.timelines[camelCase(timeline)]
@@ -40,17 +40,17 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false
if (!older && statuses.length >= 20 && !timelineData.loading && numStatusesBeforeFetch > 0) {
store.dispatch('queueFlush', { timeline: timeline, id: timelineData.maxId })
}
- update({store, statuses, timeline, showImmediately, userId})
+ update({ store, statuses, timeline, showImmediately, userId })
return statuses
}, () => store.dispatch('setError', { value: true }))
}
-const startFetching = ({timeline = 'friends', credentials, store, userId = false, tag = false}) => {
+const startFetching = ({ timeline = 'friends', credentials, store, userId = false, tag = false }) => {
const rootState = store.rootState || store.state
const timelineData = rootState.statuses.timelines[camelCase(timeline)]
const showImmediately = timelineData.visibleStatuses.length === 0
timelineData.userId = userId
- fetchAndUpdate({timeline, credentials, store, showImmediately, userId, tag})
+ fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, tag })
const boundFetchAndUpdate = () => fetchAndUpdate({ timeline, credentials, store, userId, tag })
return setInterval(boundFetchAndUpdate, 10000)
}
diff --git a/src/services/user_highlighter/user_highlighter.js b/src/services/user_highlighter/user_highlighter.js
index f6ddfb9c..b91c0f78 100644
--- a/src/services/user_highlighter/user_highlighter.js
+++ b/src/services/user_highlighter/user_highlighter.js
@@ -1,7 +1,7 @@
import { hex2rgb } from '../color_convert/color_convert.js'
const highlightStyle = (prefs) => {
if (prefs === undefined) return
- const {color, type} = prefs
+ const { color, type } = prefs
if (typeof color !== 'string') return
const rgb = hex2rgb(color)
if (rgb == null) return
diff --git a/test/e2e/nightwatch.conf.js b/test/e2e/nightwatch.conf.js
index a5e55e90..2fc3af0b 100644
--- a/test/e2e/nightwatch.conf.js
+++ b/test/e2e/nightwatch.conf.js
@@ -3,43 +3,43 @@ var config = require('../../config')
// http://nightwatchjs.org/guide#settings-file
module.exports = {
- "src_folders": ["test/e2e/specs"],
- "output_folder": "test/e2e/reports",
- "custom_assertions_path": ["test/e2e/custom-assertions"],
+ 'src_folders': ['test/e2e/specs'],
+ 'output_folder': 'test/e2e/reports',
+ 'custom_assertions_path': ['test/e2e/custom-assertions'],
- "selenium": {
- "start_process": true,
- "server_path": "node_modules/selenium-server/lib/runner/selenium-server-standalone-2.53.1.jar",
- "host": "127.0.0.1",
- "port": 4444,
- "cli_args": {
- "webdriver.chrome.driver": require('chromedriver').path
+ 'selenium': {
+ 'start_process': true,
+ 'server_path': 'node_modules/selenium-server/lib/runner/selenium-server-standalone-2.53.1.jar',
+ 'host': '127.0.0.1',
+ 'port': 4444,
+ 'cli_args': {
+ 'webdriver.chrome.driver': require('chromedriver').path
}
},
- "test_settings": {
- "default": {
- "selenium_port": 4444,
- "selenium_host": "localhost",
- "silent": true,
- "globals": {
- "devServerURL": "http://localhost:" + (process.env.PORT || config.dev.port)
+ 'test_settings': {
+ 'default': {
+ 'selenium_port': 4444,
+ 'selenium_host': 'localhost',
+ 'silent': true,
+ 'globals': {
+ 'devServerURL': 'http://localhost:' + (process.env.PORT || config.dev.port)
}
},
- "chrome": {
- "desiredCapabilities": {
- "browserName": "chrome",
- "javascriptEnabled": true,
- "acceptSslCerts": true
+ 'chrome': {
+ 'desiredCapabilities': {
+ 'browserName': 'chrome',
+ 'javascriptEnabled': true,
+ 'acceptSslCerts': true
}
},
- "firefox": {
- "desiredCapabilities": {
- "browserName": "firefox",
- "javascriptEnabled": true,
- "acceptSslCerts": true
+ 'firefox': {
+ 'desiredCapabilities': {
+ 'browserName': 'firefox',
+ 'javascriptEnabled': true,
+ 'acceptSslCerts': true
}
}
}
diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js
index 8465523a..8af05c24 100644
--- a/test/unit/karma.conf.js
+++ b/test/unit/karma.conf.js
@@ -3,12 +3,12 @@
// we are also using it with karma-webpack
// https://github.com/webpack/karma-webpack
-var path = require('path')
+// var path = require('path')
var merge = require('webpack-merge')
var baseConfig = require('../../build/webpack.base.conf')
var utils = require('../../build/utils')
var webpack = require('webpack')
-var projectRoot = path.resolve(__dirname, '../../')
+// var projectRoot = path.resolve(__dirname, '../../')
var webpackConfig = merge(baseConfig, {
// use inline sourcemap for karma-sourcemap-loader
@@ -60,7 +60,7 @@ module.exports = function (config) {
'FirefoxHeadless': {
base: 'Firefox',
flags: [
- '-headless',
+ '-headless'
]
}
},
diff --git a/test/unit/specs/modules/statuses.spec.js b/test/unit/specs/modules/statuses.spec.js
index e4661e2a..f794997b 100644
--- a/test/unit/specs/modules/statuses.spec.js
+++ b/test/unit/specs/modules/statuses.spec.js
@@ -1,10 +1,10 @@
import { defaultState, mutations, prepareStatus } from '../../../../src/modules/statuses.js'
// eslint-disable-next-line camelcase
-const makeMockStatus = ({id, text, type = 'status'}) => {
+const makeMockStatus = ({ id, text, type = 'status' }) => {
return {
id,
- user: {id: '0'},
+ user: { id: '0' },
name: 'status',
text: text || `Text number ${id}`,
fave_num: 0,
@@ -17,7 +17,7 @@ const makeMockStatus = ({id, text, type = 'status'}) => {
describe('Statuses module', () => {
describe('prepareStatus', () => {
it('sets deleted flag to false', () => {
- const aStatus = makeMockStatus({id: '1', text: 'Hello oniichan'})
+ const aStatus = makeMockStatus({ id: '1', text: 'Hello oniichan' })
expect(prepareStatus(aStatus).deleted).to.eq(false)
})
})
@@ -25,7 +25,7 @@ describe('Statuses module', () => {
describe('addNewStatuses', () => {
it('adds the status to allStatuses and to the given timeline', () => {
const state = defaultState()
- const status = makeMockStatus({id: '1'})
+ const status = makeMockStatus({ id: '1' })
mutations.addNewStatuses(state, { statuses: [status], timeline: 'public' })
@@ -37,7 +37,7 @@ describe('Statuses module', () => {
it('counts the status as new if it has not been seen on this timeline', () => {
const state = defaultState()
- const status = makeMockStatus({id: '1'})
+ const status = makeMockStatus({ id: '1' })
mutations.addNewStatuses(state, { statuses: [status], timeline: 'public' })
mutations.addNewStatuses(state, { statuses: [status], timeline: 'friends' })
@@ -55,7 +55,7 @@ describe('Statuses module', () => {
it('add the statuses to allStatuses if no timeline is given', () => {
const state = defaultState()
- const status = makeMockStatus({id: '1'})
+ const status = makeMockStatus({ id: '1' })
mutations.addNewStatuses(state, { statuses: [status] })
@@ -67,7 +67,7 @@ describe('Statuses module', () => {
it('adds the status to allStatuses and to the given timeline, directly visible', () => {
const state = defaultState()
- const status = makeMockStatus({id: '1'})
+ const status = makeMockStatus({ id: '1' })
mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
@@ -79,10 +79,10 @@ describe('Statuses module', () => {
it('removes statuses by tag on deletion', () => {
const state = defaultState()
- const status = makeMockStatus({id: '1'})
- const otherStatus = makeMockStatus({id: '3'})
+ const status = makeMockStatus({ id: '1' })
+ const otherStatus = makeMockStatus({ id: '3' })
status.uri = 'xxx'
- const deletion = makeMockStatus({id: '2', type: 'deletion'})
+ const deletion = makeMockStatus({ id: '2', type: 'deletion' })
deletion.text = 'Dolus deleted notice {{tag:gs.smuglo.li,2016-11-18:noticeId=1038007:objectType=note}}.'
deletion.uri = 'xxx'
@@ -97,8 +97,8 @@ describe('Statuses module', () => {
it('does not update the maxId when the noIdUpdate flag is set', () => {
const state = defaultState()
- const status = makeMockStatus({id: '1'})
- const secondStatus = makeMockStatus({id: '2'})
+ const status = makeMockStatus({ id: '1' })
+ const secondStatus = makeMockStatus({ id: '2' })
mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
expect(state.timelines.public.maxId).to.eql('1')
@@ -111,10 +111,10 @@ describe('Statuses module', () => {
it('keeps a descending by id order in timeline.visibleStatuses and timeline.statuses', () => {
const state = defaultState()
- const nonVisibleStatus = makeMockStatus({id: '1'})
- const status = makeMockStatus({id: '3'})
- const statusTwo = makeMockStatus({id: '2'})
- const statusThree = makeMockStatus({id: '4'})
+ const nonVisibleStatus = makeMockStatus({ id: '1' })
+ const status = makeMockStatus({ id: '3' })
+ const statusTwo = makeMockStatus({ id: '2' })
+ const statusThree = makeMockStatus({ id: '4' })
mutations.addNewStatuses(state, { statuses: [nonVisibleStatus], showImmediately: false, timeline: 'public' })
@@ -131,9 +131,9 @@ describe('Statuses module', () => {
it('splits retweets from their status and links them', () => {
const state = defaultState()
- const status = makeMockStatus({id: '1'})
- const retweet = makeMockStatus({id: '2', type: 'retweet'})
- const modStatus = makeMockStatus({id: '1', text: 'something else'})
+ const status = makeMockStatus({ id: '1' })
+ const retweet = makeMockStatus({ id: '2', type: 'retweet' })
+ const modStatus = makeMockStatus({ id: '1', text: 'something else' })
retweet.retweeted_status = status
@@ -156,8 +156,8 @@ describe('Statuses module', () => {
it('replaces existing statuses with the same id', () => {
const state = defaultState()
- const status = makeMockStatus({id: '1'})
- const modStatus = makeMockStatus({id: '1', text: 'something else'})
+ const status = makeMockStatus({ id: '1' })
+ const modStatus = makeMockStatus({ id: '1', text: 'something else' })
// Add original status
mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
@@ -173,9 +173,9 @@ describe('Statuses module', () => {
it('replaces existing statuses with the same id, coming from a retweet', () => {
const state = defaultState()
- const status = makeMockStatus({id: '1'})
- const modStatus = makeMockStatus({id: '1', text: 'something else'})
- const retweet = makeMockStatus({id: '2', type: 'retweet'})
+ const status = makeMockStatus({ id: '1' })
+ const modStatus = makeMockStatus({ id: '1', text: 'something else' })
+ const retweet = makeMockStatus({ id: '2', type: 'retweet' })
retweet.retweeted_status = modStatus
// Add original status
@@ -194,7 +194,7 @@ describe('Statuses module', () => {
it('handles favorite actions', () => {
const state = defaultState()
- const status = makeMockStatus({id: '1'})
+ const status = makeMockStatus({ id: '1' })
const favorite = {
id: '2',
@@ -272,14 +272,14 @@ describe('Statuses module', () => {
it('removes a notification when the notice gets removed', () => {
const user = { id: '1' }
const state = defaultState()
- const status = makeMockStatus({id: '1'})
- const otherStatus = makeMockStatus({id: '3'})
- const mentionedStatus = makeMockStatus({id: '2'})
+ const status = makeMockStatus({ id: '1' })
+ const otherStatus = makeMockStatus({ id: '3' })
+ const mentionedStatus = makeMockStatus({ id: '2' })
mentionedStatus.attentions = [user]
mentionedStatus.uri = 'xxx'
otherStatus.attentions = [user]
- const deletion = makeMockStatus({id: '4', type: 'deletion'})
+ const deletion = makeMockStatus({ id: '4', type: 'deletion' })
deletion.text = 'Dolus deleted notice {{tag:gs.smuglo.li,2016-11-18:noticeId=1038007:objectType=note}}.'
deletion.uri = 'xxx'
diff --git a/test/unit/specs/modules/users.spec.js b/test/unit/specs/modules/users.spec.js
index c8bc0ae7..eeb7afef 100644
--- a/test/unit/specs/modules/users.spec.js
+++ b/test/unit/specs/modules/users.spec.js
@@ -24,11 +24,11 @@ describe('The users module', () => {
const user = { id: '1', name: 'Guy' }
mutations.addNewUsers(state, [user])
- mutations.setMuted(state, {user, muted: true})
+ mutations.setMuted(state, { user, muted: true })
expect(user.muted).to.eql(true)
- mutations.setMuted(state, {user, muted: false})
+ mutations.setMuted(state, { user, muted: false })
expect(user.muted).to.eql(false)
})
diff --git a/test/unit/specs/services/date_utils/date_utils.spec.js b/test/unit/specs/services/date_utils/date_utils.spec.js
index b94de760..2d61dbac 100644
--- a/test/unit/specs/services/date_utils/date_utils.spec.js
+++ b/test/unit/specs/services/date_utils/date_utils.spec.js
@@ -37,4 +37,4 @@ describe('DateUtils', () => {
expect(DateUtils.relativeTimeShort(time)).to.eql({ num: 2, key: 'time.years_short' })
})
})
-})
\ No newline at end of file
+})
diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
index b3491c61..20e03cb0 100644
--- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
+++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
@@ -163,12 +163,6 @@ const makeMockEmojiMasto = (overrides = [{}]) => {
]
}
-parseNotification
-parseUser
-parseStatus
-makeMockStatusQvitter
-makeMockUserQvitter
-
describe('API Entities normalizer', () => {
describe('parseStatus', () => {
describe('QVitter preprocessing', () => {
@@ -206,15 +200,15 @@ describe('API Entities normalizer', () => {
})
it('sets nsfw for statuses with the #nsfw tag', () => {
- const safe = makeMockStatusQvitter({id: '1', text: 'Hello oniichan'})
- const nsfw = makeMockStatusQvitter({id: '1', text: 'Hello oniichan #nsfw'})
+ const safe = makeMockStatusQvitter({ id: '1', text: 'Hello oniichan' })
+ const nsfw = makeMockStatusQvitter({ id: '1', text: 'Hello oniichan #nsfw' })
expect(parseStatus(safe).nsfw).to.eq(false)
expect(parseStatus(nsfw).nsfw).to.eq(true)
})
it('leaves existing nsfw settings alone', () => {
- const nsfw = makeMockStatusQvitter({id: '1', text: 'Hello oniichan #nsfw', nsfw: false})
+ const nsfw = makeMockStatusQvitter({ id: '1', text: 'Hello oniichan #nsfw', nsfw: false })
expect(parseStatus(nsfw).nsfw).to.eq(false)
})
@@ -330,9 +324,9 @@ describe('API Entities normalizer', () => {
describe('MastoAPI emoji adder', () => {
const emojis = makeMockEmojiMasto()
const imageHtml = '<img src="https://example.com/image.png" alt="image" title="image" class="emoji" />'
- .replace(/"/g, '\'')
+ .replace(/"/g, '\'')
const thinkHtml = '<img src="https://example.com/think.png" alt="thinking" title="thinking" class="emoji" />'
- .replace(/"/g, '\'')
+ .replace(/"/g, '\'')
it('correctly replaces shortcodes in supplied string', () => {
const result = addEmojis('This post has :image: emoji and :thinking: emoji', emojis)
diff --git a/test/unit/specs/services/file_size_format/file_size_format.spec.js b/test/unit/specs/services/file_size_format/file_size_format.spec.js
index 0a5a82b7..e02ac379 100644
--- a/test/unit/specs/services/file_size_format/file_size_format.spec.js
+++ b/test/unit/specs/services/file_size_format/file_size_format.spec.js
@@ -1,34 +1,34 @@
- import fileSizeFormatService from '../../../../../src/services/file_size_format/file_size_format.js'
- describe('fileSizeFormat', () => {
- it('Formats file size', () => {
- const values = [1, 1024, 1048576, 1073741824, 1099511627776]
- const expected = [
- {
- num: 1,
- unit: 'B'
- },
- {
- num: 1,
- unit: 'KiB'
- },
- {
- num: 1,
- unit: 'MiB'
- },
- {
- num: 1,
- unit: 'GiB'
- },
- {
- num: 1,
- unit: 'TiB'
- }
- ]
+import fileSizeFormatService from '../../../../../src/services/file_size_format/file_size_format.js'
+describe('fileSizeFormat', () => {
+ it('Formats file size', () => {
+ const values = [1, 1024, 1048576, 1073741824, 1099511627776]
+ const expected = [
+ {
+ num: 1,
+ unit: 'B'
+ },
+ {
+ num: 1,
+ unit: 'KiB'
+ },
+ {
+ num: 1,
+ unit: 'MiB'
+ },
+ {
+ num: 1,
+ unit: 'GiB'
+ },
+ {
+ num: 1,
+ unit: 'TiB'
+ }
+ ]
- var res = []
- for (var value in values) {
- res.push(fileSizeFormatService.fileSizeFormat(values[value]))
- }
- expect(res).to.eql(expected)
- })
- })
+ var res = []
+ for (var value in values) {
+ res.push(fileSizeFormatService.fileSizeFormat(values[value]))
+ }
+ expect(res).to.eql(expected)
+ })
+})
diff --git a/test/unit/specs/services/status_parser/status_parses.spec.js b/test/unit/specs/services/status_parser/status_parses.spec.js
index 65808d84..7afd5042 100644
--- a/test/unit/specs/services/status_parser/status_parses.spec.js
+++ b/test/unit/specs/services/status_parser/status_parses.spec.js
@@ -1,7 +1,7 @@
-const example = '<div class="status-content">@<a href="https://sealion.club/user/4" class="h-card mention" title="dewoo">dwmatiz</a> <a href="https://social.heldscal.la/file/3deb764ada10ce64a61b7a070b75dac45f86d2d5bf213bf18873da71d8714d86.png" title="https://social.heldscal.la/file/3deb764ada10ce64a61b7a070b75dac45f86d2d5bf213bf18873da71d8714d86.png" class="attachment" id="attachment-159853" rel="nofollow external">https://social.heldscal.la/attachment/159853</a></div>'
-
import { removeAttachmentLinks } from '../../../../../src/services/status_parser/status_parser.js'
+const example = '<div class="status-content">@<a href="https://sealion.club/user/4" class="h-card mention" title="dewoo">dwmatiz</a> <a href="https://social.heldscal.la/file/3deb764ada10ce64a61b7a070b75dac45f86d2d5bf213bf18873da71d8714d86.png" title="https://social.heldscal.la/file/3deb764ada10ce64a61b7a070b75dac45f86d2d5bf213bf18873da71d8714d86.png" class="attachment" id="attachment-159853" rel="nofollow external">https://social.heldscal.la/attachment/159853</a></div>'
+
describe('statusParser.removeAttachmentLinks', () => {
const exampleWithoutAttachmentLinks = '<div class="status-content">@<a href="https://sealion.club/user/4" class="h-card mention" title="dewoo">dwmatiz</a> </div>'