logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe
commit: 54b0f9013388b24769c587abbf7ca76849ce9570
parent: 171673113fd353666ae9b593abec8f64ec9ea6ef
Author: Shpuld Shpludson <shp@cock.li>
Date:   Sun,  7 Jul 2019 19:12:33 +0000

Merge branch 'eslint-fix' into 'develop'

Fix shitton warning eslint gives

See merge request pleroma/pleroma-fe!871

Diffstat:

M.eslintrc.js22+---------------------
Msrc/App.vue108++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------
Msrc/boot/routes.js4++--
Msrc/components/about/about.vue6+++---
Msrc/components/attachment/attachment.js2+-
Msrc/components/attachment/attachment.vue102+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------
Msrc/components/autosuggest/autosuggest.js4++--
Msrc/components/autosuggest/autosuggest.vue22++++++++++++++++++----
Msrc/components/avatar_list/avatar_list.vue9++++++---
Msrc/components/basic_user_card/basic_user_card.vue43++++++++++++++++++++++++++++++++++---------
Msrc/components/block_card/block_card.vue14++++++++++++--
Msrc/components/chat_panel/chat_panel.js2+-
Msrc/components/chat_panel/chat_panel.vue59++++++++++++++++++++++++++++++++++++++++++++---------------
Msrc/components/checkbox/checkbox.vue9+++++++--
Msrc/components/color_input/color_input.vue65++++++++++++++++++++++++++++++++++++++---------------------------
Msrc/components/contrast_ratio/contrast_ratio.vue52+++++++++++++++++++++++++++++++---------------------
Msrc/components/conversation-page/conversation-page.vue4++--
Msrc/components/conversation/conversation.js9+++++----
Msrc/components/conversation/conversation.vue27++++++++++++++++++---------
Msrc/components/dialog_modal/dialog_modal.vue16+++++++++++-----
Msrc/components/dm_timeline/dm_timeline.vue6+++++-
Msrc/components/emoji-input/emoji-input.js2+-
Msrc/components/emoji-input/emoji-input.vue44+++++++++++++++++++++++++-------------------
Msrc/components/export_import/export_import.vue33++++++++++++++++++++++++---------
Msrc/components/exporter/exporter.vue12+++++++++---
Msrc/components/extra_buttons/extra_buttons.vue39+++++++++++++++++++++++++++++----------
Msrc/components/favorite_button/favorite_button.js4++--
Msrc/components/favorite_button/favorite_button.vue17+++++++++++++----
Msrc/components/features_panel/features_panel.vue22+++++++++++++++-------
Msrc/components/follow_card/follow_card.vue19+++++++++++++++----
Msrc/components/follow_request_card/follow_request_card.vue14++++++++++++--
Msrc/components/follow_requests/follow_requests.vue9+++++++--
Msrc/components/font_control/font_control.vue81++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------------
Msrc/components/friends_timeline/friends_timeline.vue6+++++-
Msrc/components/gallery/gallery.vue19++++++++++++++-----
Msrc/components/image_cropper/image_cropper.vue55++++++++++++++++++++++++++++++++++++++++++++++---------
Msrc/components/importer/importer.vue33++++++++++++++++++++++++++-------
Msrc/components/instance_specific_panel/instance_specific_panel.vue10+++++++---
Msrc/components/interactions/interactions.vue30+++++++++++++++++++++---------
Msrc/components/interface_language_switcher/interface_language_switcher.vue70++++++++++++++++++++++++++++++++++++++++------------------------------
Msrc/components/link-preview/link-preview.vue20++++++++++++++++----
Msrc/components/list/list.vue16+++++++++++++---
Msrc/components/login_form/login_form.js4++--
Msrc/components/login_form/login_form.vue114++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------------
Msrc/components/media_modal/media_modal.vue22+++++++++++++++-------
Msrc/components/media_upload/media_upload.js6+++---
Msrc/components/media_upload/media_upload.vue30+++++++++++++++++++++++++-----
Msrc/components/mentions/mentions.vue6+++++-
Msrc/components/mfa_form/recovery_form.js2+-
Msrc/components/mfa_form/recovery_form.vue85++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------------
Msrc/components/mfa_form/totp_form.js2+-
Msrc/components/mfa_form/totp_form.vue90+++++++++++++++++++++++++++++++++++++++++++++++++------------------------------
Msrc/components/mobile_nav/mobile_nav.vue71++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------
Msrc/components/mobile_post_status_modal/mobile_post_status_modal.js4++--
Msrc/components/mobile_post_status_modal/mobile_post_status_modal.vue42+++++++++++++++++++++++++-----------------
Msrc/components/moderation_tools/moderation_tools.js12++++++------
Msrc/components/moderation_tools/moderation_tools.vue237+++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------
Msrc/components/mute_card/mute_card.vue14++++++++++++--
Msrc/components/nav_panel/nav_panel.vue17++++++++++-------
Msrc/components/notification/notification.vue99+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------
Msrc/components/notifications/notifications.vue66++++++++++++++++++++++++++++++++++++++++++++++++++----------------
Msrc/components/opacity_input/opacity_input.vue58+++++++++++++++++++++++++++++++++++-----------------------
Msrc/components/poll/poll.vue39++++++++++++++++++++++++++-------------
Msrc/components/poll/poll_form.vue66++++++++++++++++++++++++++++++++++++++++++++++++------------------
Msrc/components/post_status_form/post_status_form.vue366+++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------
Msrc/components/progress_button/progress_button.vue5++++-
Msrc/components/public_and_external_timeline/public_and_external_timeline.vue6+++++-
Msrc/components/public_timeline/public_timeline.vue6+++++-
Msrc/components/range_input/range_input.vue79++++++++++++++++++++++++++++++++++++++++++++++---------------------------------
Msrc/components/registration/registration.js4++--
Msrc/components/registration/registration.vue227+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------
Msrc/components/remote_follow/remote_follow.vue22++++++++++++++++++----
Msrc/components/retweet_button/retweet_button.js4++--
Msrc/components/retweet_button/retweet_button.vue23++++++++++++++++++-----
Msrc/components/scope_selector/scope_selector.js8++++----
Msrc/components/scope_selector/scope_selector.vue59+++++++++++++++++++++++++++++++++--------------------------
Msrc/components/selectable_list/selectable_list.vue47++++++++++++++++++++++++++++++++++++++---------
Msrc/components/settings/settings.vue733+++++++++++++++++++++++++++++++++++++++++++++++++------------------------------
Msrc/components/shadow_control/shadow_control.vue293+++++++++++++++++++++++++++++++++++++++++++++++++------------------------------
Msrc/components/side_drawer/side_drawer.vue97++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------
Msrc/components/status/status.js2+-
Msrc/components/status/status.vue415++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------
Msrc/components/still-image/still-image.vue18+++++++++++++++---
Msrc/components/style_switcher/preview.vue151+++++++++++++++++++++++++++++++++++++++++++++----------------------------------
Msrc/components/style_switcher/style_switcher.vue827+++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------
Msrc/components/tab_switcher/tab_switcher.js48++++++++++++++++++++++++------------------------
Msrc/components/tag_timeline/tag_timeline.vue10+++++++---
Msrc/components/terms_of_service_panel/terms_of_service_panel.vue8++++++--
Msrc/components/timeago/timeago.vue20+++++++++++---------
Msrc/components/timeline/timeline.js2+-
Msrc/components/timeline/timeline.vue57+++++++++++++++++++++++++++++++++++++++++----------------
Msrc/components/user_avatar/user_avatar.vue2+-
Msrc/components/user_card/user_card.js18+++++++++---------
Msrc/components/user_card/user_card.vue364+++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------
Msrc/components/user_finder/user_finder.vue37++++++++++++++++++++++++++++++-------
Msrc/components/user_panel/user_panel.vue20+++++++++++++++-----
Msrc/components/user_profile/user_profile.vue159++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------
Msrc/components/user_reporting_modal/user_reporting_modal.vue100+++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------
Msrc/components/user_search/user_search.vue36++++++++++++++++++++++++++++--------
Msrc/components/user_settings/confirm.vue26+++++++++++++++++---------
Msrc/components/user_settings/mfa.js2+-
Msrc/components/user_settings/mfa.vue186++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------------
Msrc/components/user_settings/mfa_backup_codes.vue27+++++++++++++++++++--------
Msrc/components/user_settings/mfa_totp.vue56++++++++++++++++++++++++++++++++++++++------------------
Msrc/components/user_settings/user_settings.js22+++++++++++-----------
Msrc/components/user_settings/user_settings.vue523+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------
Msrc/components/video_attachment/video_attachment.vue5+++--
Msrc/components/who_to_follow/who_to_follow.js2+-
Msrc/components/who_to_follow/who_to_follow.vue9+++++++--
Msrc/components/who_to_follow_panel/who_to_follow_panel.js2+-
Msrc/components/who_to_follow_panel/who_to_follow_panel.vue18+++++++++++-------
Msrc/hocs/with_load_more/with_load_more.js56++++++++++++++++++++++++++++----------------------------
Msrc/hocs/with_subscription/with_subscription.js68++++++++++++++++++++++++++++++++++----------------------------------
Msrc/modules/auth_flow.js5+++--
Msrc/modules/chat.js4++--
Msrc/modules/config.js4++--
Msrc/modules/errors.js1-
Msrc/modules/instance.js2+-
Msrc/modules/oauth_tokens.js4++--
Msrc/modules/statuses.js8++++----
Msrc/modules/users.js20++++++++++----------
Msrc/services/api/api.service.js2+-
Msrc/services/backend_interactor_service/backend_interactor_service.js6++++++
Msrc/services/color_convert/color_convert.js2+-
Msrc/services/completion/completion.js2+-
Msrc/services/file_size_format/file_size_format.js2+-
Msrc/services/follow_request_fetcher/follow_request_fetcher.service.js2+-
Msrc/services/new_api/mfa.js4++--
Msrc/services/new_api/oauth.js4++--
Msrc/services/new_api/user_search.js6+++---
Msrc/services/new_api/utils.js2+-
Msrc/services/notification_utils/notification_utils.js2+-
Msrc/services/notifications_fetcher/notifications_fetcher.service.js6+++---
Msrc/services/status_poster/status_poster.service.js2+-
Msrc/services/style_setter/style_setter.js12++++++------
Msrc/services/timeline_fetcher/timeline_fetcher.service.js10+++++-----
Msrc/services/user_highlighter/user_highlighter.js2+-
Mtest/e2e/nightwatch.conf.js54+++++++++++++++++++++++++++---------------------------
Mtest/unit/karma.conf.js6+++---
Mtest/unit/specs/modules/statuses.spec.js58+++++++++++++++++++++++++++++-----------------------------
Mtest/unit/specs/modules/users.spec.js4++--
Mtest/unit/specs/services/date_utils/date_utils.spec.js3+--
Mtest/unit/specs/services/entity_normalizer/entity_normalizer.spec.js16+++++-----------
Mtest/unit/specs/services/file_size_format/file_size_format.spec.js66+++++++++++++++++++++++++++++++++---------------------------------
Mtest/unit/specs/services/status_parser/status_parses.spec.js4++--
145 files changed, 5259 insertions(+), 2567 deletions(-)

diff --git 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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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> - </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 + 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> </template> <script> diff --git 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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -1,9 +1,8 @@ <template> <Popper + v-if="enabled && showPopper" trigger="click" - @hide='showDropDown = false' append-to-body - v-if="enabled && showPopper" :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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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) - }, +export default { + computed: { + languageCodes () { + return Object.keys(languagesObject) + }, - languageNames () { - return _.map(this.languageCodes, this.getLanguageName) - }, + 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 - } + 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) + 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 @@ -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 @@ -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 @@ -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 @@ -1,53 +1,83 @@ <template> -<div class="login panel panel-default"> - <!-- Default panel contents --> - - <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="login panel panel-default"> + <!-- Default panel contents --> - <div class="form-group" v-if="isTokenAuth"> - <p>{{$t('login.description')}}</p> - </div> + <div class="panel-heading"> + {{ $t('login.login') }} + </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 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="isTokenAuth" + class="form-group" + > + <p>{{ $t('login.description') }}</p> </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> + <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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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="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 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> - <button type='submit' class='btn btn-default'> - {{$t('general.verify')}} - </button> </div> - </div> - - </form> - </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 + 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="./recovery_form.js" ></script> diff --git 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 @@ -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="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 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 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> - <button type='submit' class='btn btn-default'> - {{$t('general.verify')}} - </button> </div> - </div> - </form> - </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 + 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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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(&quot;admin&quot;)" + > + {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }} + </button> + <button + class="dropdown-item" + @click="toggleRight(&quot;moderator&quot;)" + > + {{ $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 @@ -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 @@ -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 @@ -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 @@ -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="{&quot;unseen&quot;: !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 @@ -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 @@ -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") }}&nbsp;·&nbsp; + {{ totalVotesCount }} {{ $t("polls.votes") }}&nbsp;·&nbsp; </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 @@ -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 @@ -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" + <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" > - <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" + <span>{{ $t('post_status.scope_notice.public') }}</span> + <a + class="button-icon dismiss" + @click.prevent="dismissScopeNotice()" + > + <i class="icon-cancel" /> + </a> + </p> + <p + v-else-if="!hideScopeNotice && newStatus.visibility === 'unlisted'" + class="visibility-notice notice-dismissible" > - </textarea> + <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-if="hasStatusLengthLimit" - class="character-counter faint" - :class="{ error: isOverLengthLimit }" + v-else-if="newStatus.visibility === 'direct'" + class="visibility-notice" > - {{ charactersLeft }} + <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> - <div class="visibility-tray"> - <scope-selector - :showAll="showAllScopes" - :userDefault="userDefaultScope" - :originalScope="copyMessageScope" - :initialScope="newStatus.visibility" - :onScopeChange="changeVis"/> - - <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> + <EmojiInput + v-if="newStatus.spoilerText || alwaysShowSubject" + v-model="newStatus.spoilerText" + :suggest="emojiSuggestor" + class="form-control" + > + <input + + 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 + 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 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> + <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> - <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"> + <div class="attachments"> + <div + v-for="file in newStatus.files" + :key="file.url" + class="media-upload-wrapper" + > <i - :title="$t('polls.add_poll')" - @click="togglePollForm" - class="icon-chart-bar btn btn-default" - :class="pollFormVisible && 'selected'" + 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> - - <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> + <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> - </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> + </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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -1,305 +1,483 @@ <template> -<div class="settings panel panel-default"> - <div class="panel-heading"> - <div class="title"> - {{$t('settings.settings')}} - </div> + <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 @click.prevent class="alert error" v-if="currentSaveStateNotice.error"> - {{ $t('settings.saving_err') }} - </div> + <transition name="fade"> + <template v-if="currentSaveStateNotice"> + <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"> - {{ $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 + v-if="!currentSaveStateNotice.error" + class="alert transparent" + @click.prevent + > + {{ $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> - <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> + <div class="setting-item"> + <h2>{{ $t('nav.timeline') }}</h2> + <ul class="setting-list"> + <li> + <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.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 class="setting-item"> + <h2>{{ $t('settings.composing') }}</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="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> + <li> + <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> - <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> - <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 class="setting-item"> + <h2>{{ $t('settings.attachments') }}</h2> + <ul class="setting-list"> + <li> + <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> + </div> - <div :label="$t('settings.theme')" > - <div class="setting-item"> - <style-switcher></style-switcher> - </div> - </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.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')}} + <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> - </li> - <li> - <input type="checkbox" id="notification-visibility-repeats" v-model="notificationVisibilityLocal.repeats"> - <label for="notification-visibility-repeats"> - {{$t('settings.notification_visibility_repeats')}} + </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> - </li> - <li> - <input type="checkbox" id="notification-visibility-follows" v-model="notificationVisibilityLocal.follows"> - <label for="notification-visibility-follows"> - {{$t('settings.notification_visibility_follows')}} + </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> - </li> - <li> - <input type="checkbox" id="notification-visibility-mentions" v-model="notificationVisibilityLocal.mentions"> - <label for="notification-visibility-mentions"> - {{$t('settings.notification_visibility_mentions')}} + </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> - </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> - </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"> + <div :label="$t('settings.version.title')"> + <div class="setting-item"> + <ul class="setting-list"> <li> - <a :href="backendVersionLink" target="_blank">{{backendVersion}}</a> + <p>{{ $t('settings.version.backend_version') }}</p> + <ul class="option-list"> + <li> + <a + :href="backendVersionLink" + target="_blank" + >{{ backendVersion }}</a> + </li> + </ul> </li> - </ul> - </li> - <li> - <p>{{$t('settings.version.frontend_version')}}</p> - <ul class="option-list"> <li> - <a :href="frontendVersionLink" target="_blank">{{frontendVersion}}</a> + <p>{{ $t('settings.version.frontend_version') }}</p> + <ul class="option-list"> + <li> + <a + :href="frontendVersionLink" + target="_blank" + >{{ frontendVersion }}</a> + </li> + </ul> </li> </ul> - </li> - </ul> - </div> - </div> - </tab-switcher> -</keep-alive> + </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 @@ -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-range" - type="range" - max="20" - min="-20"> + 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> - <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" + <div class="shadow-tweak"> + <div + :disabled="usingFallback" + class="id-control style-control" + > + <label + for="shadow-switcher" + class="select" :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" + > + <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" - 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" + 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" - name="blur" - id="blur" - class="input-range" - type="range" - max="20" - min="0"> - <input - v-model="selected.blur" + 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="0" + > + <input + v-model="selected.blur" + :disabled="!present" + class="input-number" + type="number" + min="0" + > + </div> + <div :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" + 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" - name="spread" - id="spread" - class="input-range" - type="range" - max="20" - min="-20"> - <input - v-model="selected.spread" + :label="$t('settings.style.common.color')" + name="shadow" + /> + <OpacityInput + v-model="selected.alpha" :disabled="!present" - class="input-number" - type="number"> + /> + <p> + {{ $t('settings.style.shadows.hint') }} + </p> </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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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> + <span class="alert error"> + {{ $t('settings.style.preview.error') }} </span> + <button class="btn"> + {{ $t('settings.style.preview.button') }} + </button> </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> + <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> + <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 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> - <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 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> - <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="separator" /> - <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')}} - </button> + <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 @@ -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> - <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="style-switcher"> + <div class="presets-container"> + <div class="save-load"> + <export-import + :export-object="exportedTheme" + :export-label="$t(&quot;settings.export_theme&quot;)" + :import-label="$t(&quot;settings.import_theme&quot;)" + :import-failed-text="$t(&quot;settings.invalid_theme_imported&quot;)" + :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> - <div class="preview-container"> - <preview :style="previewRules"/> - </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"/> + <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> - <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 + :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> - <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 + :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> - <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 + :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> - <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> + <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> - <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 + :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> - <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> + </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 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> </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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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="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="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 + 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 === &quot;admin&quot;" + :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 + 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='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 + class="user-count" + @click.prevent="setProfileView('friends')" + > + <h5>{{ $t('user_card.followees') }}</h5> + <span>{{ user.friends_count }}</span> </div> - <div class='block' v-if='isOtherUser && loggedIn'> - <span> - <button @click="reportUser"> - {{ $t('user_card.report') }} - </button> - </span> + <div + class="user-count" + @click.prevent="setProfileView('followers')" + > + <h5>{{ $t('user_card.followers') }}</h5> + <span>{{ user.followers_count }}</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> + <!-- 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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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="readyInit && settings.available" + class="setting-item mfa-settings" + > + <div class="mfa-heading"> + <h2>{{ $t('settings.mfa.title') }}</h2> + </div> - <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 + v-if="!setupInProgress" + class="setting-item" + > + <!-- 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 + v-if="!confirmNewBackupCodes" + :backup-codes="backupCodes" + /> + <button + v-if="!confirmNewBackupCodes" + class="btn btn-default" + @click="getBackupCodes" + > + {{ $t('settings.mfa.generate_new_recovery_codes') }} + </button> + + <div v-if="confirmNewBackupCodes"> + <confirm + :disabled="backupCodes.inProgress" + @confirm="confirmBackupCodes" + @cancel="cancelBackupCodes" + > + <p class="warning"> + {{ $t('settings.mfa.warning_of_generate_new_codes') }} + </p> + </confirm> + </div> </div> </div> - </div> - - <div v-if="setupInProgress"> <!-- setup block--> - <h3>{{$t('settings.mfa.setup_otp')}}</h3> + <div v-if="setupInProgress"> + <!-- setup block--> - <recovery-codes :backup-codes="backupCodes" v-if="!setupOTPInProgress"/> + <h3>{{ $t('settings.mfa.setup_otp') }}</h3> + <recovery-codes + v-if="!setupOTPInProgress" + :backup-codes="backupCodes" + /> - <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> + <button + v-if="canSetupOTP" + class="btn btn-default" + @click="cancelSetup" + > + {{ $t('general.cancel') }} + </button> - <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}} - </p> - </div> + <button + v-if="canSetupOTP" + class="btn btn-default" + @click="setupOTP" + > + {{ $t('settings.mfa.setup_otp') }} + </button> - <div class="verify"> - <h4>{{$t('general.verify')}}</h4> - <p>{{$t('settings.mfa.verify.desc')}}</p> - <input type="text" v-model="otpConfirmToken"> + <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> - <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 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 class="alert error" v-if="error">{{error}}</div> </div> </div> - </div> - </template> + </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 @@ -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 @@ -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> - </div> + <button + v-if="isActivated" + class="btn btn-default" + :disabled="deactivate" + @click="doDeactivate" + > + {{ $t('general.disable') }} + </button> + </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> + <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> </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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -9,4 +9,3 @@ export function humanizeErrors (errors) { return [...errs, message] }, []) } - diff --git 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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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>'