aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/attachment/attachment.js11
-rw-r--r--src/components/conversation/conversation.js1
-rw-r--r--src/components/domain_mute_card/domain_mute_card.js15
-rw-r--r--src/components/domain_mute_card/domain_mute_card.vue38
-rw-r--r--src/components/emoji_reactions/emoji_reactions.js32
-rw-r--r--src/components/emoji_reactions/emoji_reactions.vue49
-rw-r--r--src/components/nav_panel/nav_panel.js2
-rw-r--r--src/components/nav_panel/nav_panel.vue2
-rw-r--r--src/components/react_button/react_button.js43
-rw-r--r--src/components/react_button/react_button.vue109
-rw-r--r--src/components/side_drawer/side_drawer.js2
-rw-r--r--src/components/side_drawer/side_drawer.vue2
-rw-r--r--src/components/staff_panel/staff_panel.js3
-rw-r--r--src/components/status/status.js6
-rw-r--r--src/components/status/status.vue8
-rw-r--r--src/components/user_settings/user_settings.js23
-rw-r--r--src/components/user_settings/user_settings.vue157
17 files changed, 446 insertions, 57 deletions
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 06b496b0..b832e10f 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -2,6 +2,7 @@ import StillImage from '../still-image/still-image.vue'
import VideoAttachment from '../video_attachment/video_attachment.vue'
import nsfwImage from '../../assets/nsfw.png'
import fileTypeService from '../../services/file_type/file_type.service.js'
+import { mapGetters } from 'vuex'
const Attachment = {
props: [
@@ -49,7 +50,8 @@ const Attachment = {
},
fullwidth () {
return this.type === 'html' || this.type === 'audio'
- }
+ },
+ ...mapGetters(['mergedConfig'])
},
methods: {
linkClicked ({ target }) {
@@ -58,7 +60,7 @@ const Attachment = {
}
},
openModal (event) {
- const modalTypes = this.$store.getters.mergedConfig.playVideosInModal
+ const modalTypes = this.mergedConfig.playVideosInModal
? ['image', 'video']
: ['image']
if (fileTypeService.fileMatchesSomeType(modalTypes, this.attachment) ||
@@ -71,7 +73,10 @@ const Attachment = {
}
},
toggleHidden (event) {
- if (this.$store.getters.mergedConfig.useOneClickNsfw && !this.showHidden) {
+ if (
+ (this.mergedConfig.useOneClickNsfw && !this.showHidden) &&
+ (this.type !== 'video' || this.mergedConfig.playVideosInModal)
+ ) {
this.openModal(event)
return
}
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 08283fff..45fb2bf6 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -150,6 +150,7 @@ const conversation = {
if (!id) return
this.highlight = id
this.$store.dispatch('fetchFavsAndRepeats', id)
+ this.$store.dispatch('fetchEmojiReactionsBy', id)
},
getHighlight () {
return this.isExpanded ? this.highlight : null
diff --git a/src/components/domain_mute_card/domain_mute_card.js b/src/components/domain_mute_card/domain_mute_card.js
new file mode 100644
index 00000000..c8e838ba
--- /dev/null
+++ b/src/components/domain_mute_card/domain_mute_card.js
@@ -0,0 +1,15 @@
+import ProgressButton from '../progress_button/progress_button.vue'
+
+const DomainMuteCard = {
+ props: ['domain'],
+ components: {
+ ProgressButton
+ },
+ methods: {
+ unmuteDomain () {
+ return this.$store.dispatch('unmuteDomain', this.domain)
+ }
+ }
+}
+
+export default DomainMuteCard
diff --git a/src/components/domain_mute_card/domain_mute_card.vue b/src/components/domain_mute_card/domain_mute_card.vue
new file mode 100644
index 00000000..567d81c5
--- /dev/null
+++ b/src/components/domain_mute_card/domain_mute_card.vue
@@ -0,0 +1,38 @@
+<template>
+ <div class="domain-mute-card">
+ <div class="domain-mute-card-domain">
+ {{ domain }}
+ </div>
+ <ProgressButton
+ :click="unmuteDomain"
+ class="btn btn-default"
+ >
+ {{ $t('domain_mute_card.unmute') }}
+ <template slot="progress">
+ {{ $t('domain_mute_card.unmute_progress') }}
+ </template>
+ </ProgressButton>
+ </div>
+</template>
+
+<script src="./domain_mute_card.js"></script>
+
+<style lang="scss">
+.domain-mute-card {
+ flex: 1 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0.6em 1em 0.6em 0;
+
+ &-domain {
+ margin-right: 1em;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ button {
+ width: 10em;
+ }
+}
+</style>
diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js
new file mode 100644
index 00000000..95d52cb6
--- /dev/null
+++ b/src/components/emoji_reactions/emoji_reactions.js
@@ -0,0 +1,32 @@
+
+const EmojiReactions = {
+ name: 'EmojiReactions',
+ props: ['status'],
+ computed: {
+ emojiReactions () {
+ return this.status.emoji_reactions
+ }
+ },
+ methods: {
+ reactedWith (emoji) {
+ const user = this.$store.state.users.currentUser
+ const reaction = this.status.emoji_reactions.find(r => r.emoji === emoji)
+ return reaction.accounts && reaction.accounts.find(u => u.id === user.id)
+ },
+ reactWith (emoji) {
+ this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
+ },
+ unreact (emoji) {
+ this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
+ },
+ emojiOnClick (emoji, event) {
+ if (this.reactedWith(emoji)) {
+ this.unreact(emoji)
+ } else {
+ this.reactWith(emoji)
+ }
+ }
+ }
+}
+
+export default EmojiReactions
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
new file mode 100644
index 00000000..00d6d2b7
--- /dev/null
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -0,0 +1,49 @@
+<template>
+ <div class="emoji-reactions">
+ <button
+ v-for="(reaction) in emojiReactions"
+ :key="reaction.emoji"
+ class="emoji-reaction btn btn-default"
+ :class="{ 'picked-reaction': reactedWith(reaction.emoji) }"
+ @click="emojiOnClick(reaction.emoji, $event)"
+ >
+ <span class="reaction-emoji">{{ reaction.emoji }}</span>
+ <span>{{ reaction.count }}</span>
+ </button>
+ </div>
+</template>
+
+<script src="./emoji_reactions.js" ></script>
+<style lang="scss">
+@import '../../_variables.scss';
+
+.emoji-reactions {
+ display: flex;
+ margin-top: 0.25em;
+ flex-wrap: wrap;
+}
+
+.emoji-reaction {
+ padding: 0 0.5em;
+ margin-right: 0.5em;
+ margin-top: 0.5em;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+ .reaction-emoji {
+ width: 1.25em;
+ margin-right: 0.25em;
+ }
+ &:focus {
+ outline: none;
+ }
+}
+
+.picked-reaction {
+ border: 1px solid var(--link, $fallback--link);
+ margin-left: -1px; // offset the border, can't use inset shadows either
+ margin-right: calc(0.5em - 1px);
+}
+
+</style>
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index d9268585..8f7edb7f 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -3,7 +3,7 @@ import { mapState } from 'vuex'
const NavPanel = {
created () {
if (this.currentUser && this.currentUser.locked) {
- this.$store.dispatch('startFetchingFollowRequest')
+ this.$store.dispatch('startFetchingFollowRequests')
}
},
computed: mapState({
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 034259d9..0f3296eb 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -33,7 +33,7 @@
<i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
</router-link>
</li>
- <li v-if="federating && !privateMode">
+ <li v-if="federating && (currentUser || !privateMode)">
<router-link :to="{ name: 'public-external-timeline' }">
<i class="button-icon icon-globe" /> {{ $t("nav.twkn") }}
</router-link>
diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
new file mode 100644
index 00000000..6fb2a780
--- /dev/null
+++ b/src/components/react_button/react_button.js
@@ -0,0 +1,43 @@
+import { mapGetters } from 'vuex'
+
+const ReactButton = {
+ props: ['status', 'loggedIn'],
+ data () {
+ return {
+ showTooltip: false,
+ filterWord: '',
+ popperOptions: {
+ modifiers: {
+ preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
+ }
+ }
+ }
+ },
+ methods: {
+ openReactionSelect () {
+ this.showTooltip = true
+ this.filterWord = ''
+ },
+ closeReactionSelect () {
+ this.showTooltip = false
+ },
+ addReaction (event, emoji) {
+ this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
+ this.closeReactionSelect()
+ }
+ },
+ computed: {
+ commonEmojis () {
+ return ['❤️', '😠', '👀', '😂', '🔥']
+ },
+ emojis () {
+ if (this.filterWord !== '') {
+ return this.$store.state.instance.emoji.filter(emoji => emoji.displayText.includes(this.filterWord))
+ }
+ return this.$store.state.instance.emoji || []
+ },
+ ...mapGetters(['mergedConfig'])
+ }
+}
+
+export default ReactButton
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
new file mode 100644
index 00000000..c925dd71
--- /dev/null
+++ b/src/components/react_button/react_button.vue
@@ -0,0 +1,109 @@
+<template>
+ <v-popover
+ :popper-options="popperOptions"
+ :open="showTooltip"
+ trigger="manual"
+ placement="top"
+ class="react-button-popover"
+ @hide="closeReactionSelect"
+ >
+ <div slot="popover">
+ <div class="reaction-picker-filter">
+ <input
+ v-model="filterWord"
+ :placeholder="$t('emoji.search_emoji')"
+ >
+ </div>
+ <div class="reaction-picker">
+ <span
+ v-for="emoji in commonEmojis"
+ :key="emoji"
+ class="emoji-button"
+ @click="addReaction($event, emoji)"
+ >
+ {{ emoji }}
+ </span>
+ <div class="reaction-picker-divider" />
+ <span
+ v-for="(emoji, key) in emojis"
+ :key="key"
+ class="emoji-button"
+ @click="addReaction($event, emoji.replacement)"
+ >
+ {{ emoji.replacement }}
+ </span>
+ <div class="reaction-bottom-fader" />
+ </div>
+ </div>
+ <div
+ v-if="loggedIn"
+ @click.prevent="openReactionSelect"
+ >
+ <i
+ class="icon-smile button-icon add-reaction-button"
+ :title="$t('tool_tip.add_reaction')"
+ />
+ </div>
+ </v-popover>
+</template>
+
+<script src="./react_button.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.reaction-picker-filter {
+ padding: 0.5em;
+}
+
+.reaction-picker-divider {
+ height: 1px;
+ width: 100%;
+ margin: 0.5em;
+ background-color: var(--border, $fallback--border);
+}
+
+.reaction-picker {
+ width: 10em;
+ height: 9em;
+ font-size: 1.5em;
+ overflow-y: scroll;
+ display: flex;
+ flex-wrap: wrap;
+ padding: 0.5em;
+ text-align: center;
+ align-content: flex-start;
+ user-select: none;
+
+ mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
+ linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
+ linear-gradient(to top, white, white);
+ transition: mask-size 150ms;
+ mask-size: 100% 20px, 100% 20px, auto;
+ // Autoprefixed seem to ignore this one, and also syntax is different
+ -webkit-mask-composite: xor;
+ mask-composite: exclude;
+
+ .emoji-button {
+ cursor: pointer;
+
+ flex-basis: 20%;
+ line-height: 1.5em;
+ align-content: center;
+
+ &:hover {
+ transform: scale(1.25);
+ }
+ }
+}
+
+.add-reaction-button {
+ cursor: pointer;
+
+ &:hover {
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
+ }
+}
+
+</style>
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index 2534eb8f..2181ecc7 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -12,7 +12,7 @@ const SideDrawer = {
this.closeGesture = GestureService.swipeGesture(GestureService.DIRECTION_LEFT, this.toggleDrawer)
if (this.currentUser && this.currentUser.locked) {
- this.$store.dispatch('startFetchingFollowRequest')
+ this.$store.dispatch('startFetchingFollowRequests')
}
},
components: { UserCard },
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 3fba9058..28637afc 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -88,7 +88,7 @@
</router-link>
</li>
<li
- v-if="federating && !privateMode"
+ v-if="federating && (currentUser || !privateMode)"
@click="toggleDrawer"
>
<router-link to="/main/all">
diff --git a/src/components/staff_panel/staff_panel.js b/src/components/staff_panel/staff_panel.js
index 93e950ad..4f98fff6 100644
--- a/src/components/staff_panel/staff_panel.js
+++ b/src/components/staff_panel/staff_panel.js
@@ -1,3 +1,4 @@
+import map from 'lodash/map'
import BasicUserCard from '../basic_user_card/basic_user_card.vue'
const StaffPanel = {
@@ -6,7 +7,7 @@ const StaffPanel = {
},
computed: {
staffAccounts () {
- return this.$store.state.instance.staffAccounts
+ return map(this.$store.state.instance.staffAccounts, nickname => this.$store.getters.findUser(nickname)).filter(_ => _)
}
}
}
diff --git a/src/components/status/status.js b/src/components/status/status.js
index c49e729c..81b57667 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -1,5 +1,6 @@
import Attachment from '../attachment/attachment.vue'
import FavoriteButton from '../favorite_button/favorite_button.vue'
+import ReactButton from '../react_button/react_button.vue'
import RetweetButton from '../retweet_button/retweet_button.vue'
import Poll from '../poll/poll.vue'
import ExtraButtons from '../extra_buttons/extra_buttons.vue'
@@ -11,6 +12,7 @@ import LinkPreview from '../link-preview/link-preview.vue'
import AvatarList from '../avatar_list/avatar_list.vue'
import Timeago from '../timeago/timeago.vue'
import StatusPopover from '../status_popover/status_popover.vue'
+import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import fileType from 'src/services/file_type/file_type.service'
import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js'
@@ -319,6 +321,7 @@ const Status = {
components: {
Attachment,
FavoriteButton,
+ ReactButton,
RetweetButton,
ExtraButtons,
PostStatusForm,
@@ -329,7 +332,8 @@ const Status = {
LinkPreview,
AvatarList,
Timeago,
- StatusPopover
+ StatusPopover,
+ EmojiReactions
},
methods: {
visibilityIcon (visibility) {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index d291e762..d5739304 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -354,6 +354,10 @@
</div>
</transition>
+ <EmojiReactions
+ :status="status"
+ />
+
<div
v-if="!noHeading && !isPreview"
class="status-actions media-body"
@@ -382,6 +386,10 @@
:logged-in="loggedIn"
:status="status"
/>
+ <ReactButton
+ :logged-in="loggedIn"
+ :status="status"
+ />
<extra-buttons
:status="status"
@onError="showError"
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index d5d671e4..38373056 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -9,6 +9,7 @@ import ScopeSelector from '../scope_selector/scope_selector.vue'
import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
import BlockCard from '../block_card/block_card.vue'
import MuteCard from '../mute_card/mute_card.vue'
+import DomainMuteCard from '../domain_mute_card/domain_mute_card.vue'
import SelectableList from '../selectable_list/selectable_list.vue'
import ProgressButton from '../progress_button/progress_button.vue'
import EmojiInput from '../emoji_input/emoji_input.vue'
@@ -32,6 +33,12 @@ const MuteList = withSubscription({
childPropName: 'items'
})(SelectableList)
+const DomainMuteList = withSubscription({
+ fetch: (props, $store) => $store.dispatch('fetchDomainMutes'),
+ select: (props, $store) => get($store.state.users.currentUser, 'domainMutes', []),
+ childPropName: 'items'
+})(SelectableList)
+
const UserSettings = {
data () {
return {
@@ -67,7 +74,8 @@ const UserSettings = {
changedPassword: false,
changePasswordError: false,
activeTab: 'profile',
- notificationSettings: this.$store.state.users.currentUser.notification_settings
+ notificationSettings: this.$store.state.users.currentUser.notification_settings,
+ newDomainToMute: ''
}
},
created () {
@@ -80,10 +88,12 @@ const UserSettings = {
ImageCropper,
BlockList,
MuteList,
+ DomainMuteList,
EmojiInput,
Autosuggest,
BlockCard,
MuteCard,
+ DomainMuteCard,
ProgressButton,
Importer,
Exporter,
@@ -297,7 +307,7 @@ const UserSettings = {
newPassword: this.changePasswordInputs[1],
newPasswordConfirmation: this.changePasswordInputs[2]
}
- this.$store.state.api.backendInteractor.changePassword({ params })
+ this.$store.state.api.backendInteractor.changePassword(params)
.then((res) => {
if (res.status === 'success') {
this.changedPassword = true
@@ -314,7 +324,7 @@ const UserSettings = {
email: this.newEmail,
password: this.changeEmailPassword
}
- this.$store.state.api.backendInteractor.changeEmail({ params })
+ this.$store.state.api.backendInteractor.changeEmail(params)
.then((res) => {
if (res.status === 'success') {
this.changedEmail = true
@@ -365,6 +375,13 @@ const UserSettings = {
unmuteUsers (ids) {
return this.$store.dispatch('unmuteUsers', ids)
},
+ unmuteDomains (domains) {
+ return this.$store.dispatch('unmuteDomains', domains)
+ },
+ muteDomain () {
+ return this.$store.dispatch('muteDomain', this.newDomainToMute)
+ .then(() => { this.newDomainToMute = '' })
+ },
identity (value) {
return value
}
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 3f1982a6..2222c293 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -509,59 +509,114 @@
</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"
- :user-id="row.item"
- />
- </Autosuggest>
- </div>
- <MuteList
- :refresh="true"
- :get-key="identity"
- >
- <template
- slot="header"
- slot-scope="{selected}"
- >
- <div class="profile-edit-bulk-actions">
- <ProgressButton
- v-if="selected.length > 0"
- class="btn btn-default"
- :click="() => muteUsers(selected)"
+ <tab-switcher>
+ <div label="Users">
+ <div class="profile-edit-usersearch-wrapper">
+ <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"
+ :get-key="identity"
+ >
+ <template
+ slot="header"
+ slot-scope="{selected}"
+ >
+ <div class="profile-edit-bulk-actions">
+ <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>
+ </ProgressButton>
+ <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>
+ </ProgressButton>
+ </div>
+ </template>
+ <template
+ slot="item"
+ slot-scope="{item}"
+ >
+ <MuteCard :user-id="item" />
+ </template>
+ <template slot="empty">
+ {{ $t('settings.no_mutes') }}
+ </template>
+ </MuteList>
+ </div>
+
+ <div :label="$t('settings.domain_mutes')">
+ <div class="profile-edit-domain-mute-form">
+ <input
+ v-model="newDomainToMute"
+ :placeholder="$t('settings.type_domains_to_mute')"
+ type="text"
+ @keyup.enter="muteDomain"
>
- {{ $t('user_card.mute') }}
- <template slot="progress">
- {{ $t('user_card.mute_progress') }}
- </template>
- </ProgressButton>
<ProgressButton
- v-if="selected.length > 0"
class="btn btn-default"
- :click="() => unmuteUsers(selected)"
+ :click="muteDomain"
>
- {{ $t('user_card.unmute') }}
+ {{ $t('domain_mute_card.mute') }}
<template slot="progress">
- {{ $t('user_card.unmute_progress') }}
+ {{ $t('domain_mute_card.mute_progress') }}
</template>
</ProgressButton>
</div>
- </template>
- <template
- slot="item"
- slot-scope="{item}"
- >
- <MuteCard :user-id="item" />
- </template>
- <template slot="empty">
- {{ $t('settings.no_mutes') }}
- </template>
- </MuteList>
+ <DomainMuteList
+ :refresh="true"
+ :get-key="identity"
+ >
+ <template
+ slot="header"
+ slot-scope="{selected}"
+ >
+ <div class="profile-edit-bulk-actions">
+ <ProgressButton
+ v-if="selected.length > 0"
+ class="btn btn-default"
+ :click="() => unmuteDomains(selected)"
+ >
+ {{ $t('domain_mute_card.unmute') }}
+ <template slot="progress">
+ {{ $t('domain_mute_card.unmute_progress') }}
+ </template>
+ </ProgressButton>
+ </div>
+ </template>
+ <template
+ slot="item"
+ slot-scope="{item}"
+ >
+ <DomainMuteCard :domain="item" />
+ </template>
+ <template slot="empty">
+ {{ $t('settings.no_mutes') }}
+ </template>
+ </DomainMuteList>
+ </div>
+ </tab-switcher>
</div>
</tab-switcher>
</div>
@@ -639,6 +694,18 @@
}
}
+ &-domain-mute-form {
+ padding: 1em;
+ display: flex;
+ flex-direction: column;
+
+ button {
+ align-self: flex-end;
+ margin-top: 1em;
+ width: 10em;
+ }
+ }
+
.setting-subitem {
margin-left: 1.75em;
}