moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/develop' into experiment-still-emoji 

* origin/develop:
  fix warnings
  oops
  backport vue3 changes related to emoji-input
  migrate to v-slot
This commit is contained in:
Henry Jameson 2021-05-31 16:50:08 +03:00
parent 8e1182651a 7bd18cda64
commit 3cc84a867d
22 changed files with 266 additions and 309 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/account_actions/account_actions.vue
View File

@ -6,10 +6,7 @@
:bound-to="{ x: 'container' }" :bound-to="{ x: 'container' }"
remove-padding remove-padding
> >
<div <template v-slot:content>
slot="content"
class="account-tools-popover"
>
<div class="dropdown-menu"> <div class="dropdown-menu">
<template v-if="relationship.following"> <template v-if="relationship.following">
<button <button
@ -59,16 +56,15 @@
{{ $t('user_card.message') }} {{ $t('user_card.message') }}
</button> </button>
</div> </div>
</div> </template>
<div <template v-slot:trigger>
slot="trigger" <button class="button-unstyled ellipsis-button">
class="ellipsis-button" <FAIcon
> class="icon"
<FAIcon icon="ellipsis-v"
class="icon" />
icon="ellipsis-v" </button>
/> </template>
</div>
</Popover> </Popover>
</div> </div>
</template> </template>
@ -83,7 +79,6 @@
} }
.ellipsis-button { .ellipsis-button {
cursor: pointer;
width: 2.5em; width: 2.5em;
margin: -0.5em 0; margin: -0.5em 0;
padding: 0.5em 0; padding: 0.5em 0;

5
src/components/chat_list/chat_list.vue
View File

@ -23,10 +23,7 @@
class="timeline" class="timeline"
> >
<List :items="sortedChatList"> <List :items="sortedChatList">
<template <template v-slot:item="{item}">
slot="item"
slot-scope="{item}"
>
<ChatListItem <ChatListItem
:key="item.id" :key="item.id"
:compact="false" :compact="false"

32
src/components/chat_message/chat_message.vue
View File

@ -50,7 +50,7 @@
@show="menuOpened = true" @show="menuOpened = true"
@close="menuOpened = false" @close="menuOpened = false"
> >
<div slot="content"> <template v-slot:content>
<div class="dropdown-menu"> <div class="dropdown-menu">
<button <button
class="button-default dropdown-item dropdown-item-icon" class="button-default dropdown-item dropdown-item-icon"
@ -59,26 +59,28 @@
<FAIcon icon="times" /> {{ $t("chats.delete") }} <FAIcon icon="times" /> {{ $t("chats.delete") }}
</button> </button>
</div> </div>
</div> </template>
<button <template v-slot:trigger>
slot="trigger" <button
class="button-default menu-icon" class="button-default menu-icon"
:title="$t('chats.more')" :title="$t('chats.more')"
> >
<FAIcon icon="ellipsis-h" /> <FAIcon icon="ellipsis-h" />
</button> </button>
</template>
</Popover> </Popover>
</div> </div>
<StatusContent <StatusContent
:status="messageForStatusContent" :status="messageForStatusContent"
:full-content="true" :full-content="true"
> >
<span <template v-slot:footer>
slot="footer" <span
class="created-at" class="created-at"
> >
{{ createdAt }} {{ createdAt }}
</span> </span>
</template>
</StatusContent> </StatusContent>
</div> </div>
</div> </div>

4
src/components/domain_mute_card/domain_mute_card.vue
View File

@ -9,7 +9,7 @@
class="btn button-default" class="btn button-default"
> >
{{ $t('domain_mute_card.unmute') }} {{ $t('domain_mute_card.unmute') }}
<template slot="progress"> <template v-slot:progress>
{{ $t('domain_mute_card.unmute_progress') }} {{ $t('domain_mute_card.unmute_progress') }}
</template> </template>
</ProgressButton> </ProgressButton>
@ -19,7 +19,7 @@
class="btn button-default" class="btn button-default"
> >
{{ $t('domain_mute_card.mute') }} {{ $t('domain_mute_card.mute') }}
<template slot="progress"> <template v-slot:progress>
{{ $t('domain_mute_card.mute_progress') }} {{ $t('domain_mute_card.mute_progress') }}
</template> </template>
</ProgressButton> </ProgressButton>

60
src/components/emoji_input/emoji_input.js
View File

@ -57,6 +57,7 @@ const EmojiInput = {
required: true, required: true,
type: Function type: Function
}, },
// TODO VUE3: change to modelValue, change 'input' event to 'input'
value: { value: {
/** /**
* Used for v-model * Used for v-model
@ -143,32 +144,31 @@ const EmojiInput = {
} }
}, },
mounted () { mounted () {
const slots = this.$slots.default const { root } = this.$refs
if (!slots || slots.length === 0) return const input = root.querySelector('.emoji-input > input') || root.querySelector('.emoji-input > textarea')
const input = slots.find(slot => ['input', 'textarea'].includes(slot.tag))
if (!input) return if (!input) return
this.input = input this.input = input
this.resize() this.resize()
input.elm.addEventListener('blur', this.onBlur) input.addEventListener('blur', this.onBlur)
input.elm.addEventListener('focus', this.onFocus) input.addEventListener('focus', this.onFocus)
input.elm.addEventListener('paste', this.onPaste) input.addEventListener('paste', this.onPaste)
input.elm.addEventListener('keyup', this.onKeyUp) input.addEventListener('keyup', this.onKeyUp)
input.elm.addEventListener('keydown', this.onKeyDown) input.addEventListener('keydown', this.onKeyDown)
input.elm.addEventListener('click', this.onClickInput) input.addEventListener('click', this.onClickInput)
input.elm.addEventListener('transitionend', this.onTransition) input.addEventListener('transitionend', this.onTransition)
input.elm.addEventListener('input', this.onInput) input.addEventListener('input', this.onInput)
}, },
unmounted () { unmounted () {
const { input } = this const { input } = this
if (input) { if (input) {
input.elm.removeEventListener('blur', this.onBlur) input.removeEventListener('blur', this.onBlur)
input.elm.removeEventListener('focus', this.onFocus) input.removeEventListener('focus', this.onFocus)
input.elm.removeEventListener('paste', this.onPaste) input.removeEventListener('paste', this.onPaste)
input.elm.removeEventListener('keyup', this.onKeyUp) input.removeEventListener('keyup', this.onKeyUp)
input.elm.removeEventListener('keydown', this.onKeyDown) input.removeEventListener('keydown', this.onKeyDown)
input.elm.removeEventListener('click', this.onClickInput) input.removeEventListener('click', this.onClickInput)
input.elm.removeEventListener('transitionend', this.onTransition) input.removeEventListener('transitionend', this.onTransition)
input.elm.removeEventListener('input', this.onInput) input.removeEventListener('input', this.onInput)
} }
}, },
watch: { watch: {
@ -216,7 +216,7 @@ const EmojiInput = {
}, 0) }, 0)
}, },
togglePicker () { togglePicker () {
this.input.elm.focus() this.input.focus()
this.showPicker = !this.showPicker this.showPicker = !this.showPicker
if (this.showPicker) { if (this.showPicker) {
this.scrollIntoView() this.scrollIntoView()
@ -262,13 +262,13 @@ const EmojiInput = {
this.$emit('input', newValue) this.$emit('input', newValue)
const position = this.caret + (insertion + spaceAfter + spaceBefore).length const position = this.caret + (insertion + spaceAfter + spaceBefore).length
if (!keepOpen) { if (!keepOpen) {
this.input.elm.focus() this.input.focus()
} }
this.$nextTick(function () { this.$nextTick(function () {
// Re-focus inputbox after clicking suggestion // Re-focus inputbox after clicking suggestion
// Set selection right after the replacement instead of the very end // Set selection right after the replacement instead of the very end
this.input.elm.setSelectionRange(position, position) this.input.setSelectionRange(position, position)
this.caret = position this.caret = position
}) })
}, },
@ -285,9 +285,9 @@ const EmojiInput = {
this.$nextTick(function () { this.$nextTick(function () {
// Re-focus inputbox after clicking suggestion // Re-focus inputbox after clicking suggestion
this.input.elm.focus() this.input.focus()
// Set selection right after the replacement instead of the very end // Set selection right after the replacement instead of the very end
this.input.elm.setSelectionRange(position, position) this.input.setSelectionRange(position, position)
this.caret = position this.caret = position
}) })
e.preventDefault() e.preventDefault()
@ -349,7 +349,7 @@ const EmojiInput = {
} }
this.$nextTick(() => { this.$nextTick(() => {
const { offsetHeight } = this.input.elm const { offsetHeight } = this.input
const { picker } = this.$refs const { picker } = this.$refs
const pickerBottom = picker.$el.getBoundingClientRect().bottom const pickerBottom = picker.$el.getBoundingClientRect().bottom
if (pickerBottom > window.innerHeight) { if (pickerBottom > window.innerHeight) {
@ -414,8 +414,8 @@ const EmojiInput = {
// Scroll the input element to the position of the cursor // Scroll the input element to the position of the cursor
this.$nextTick(() => { this.$nextTick(() => {
this.input.elm.blur() this.input.blur()
this.input.elm.focus() this.input.focus()
}) })
} }
// Disable suggestions hotkeys if suggestions are hidden // Disable suggestions hotkeys if suggestions are hidden
@ -444,7 +444,7 @@ const EmojiInput = {
// de-focuses the element (i.e. default browser behavior) // de-focuses the element (i.e. default browser behavior)
if (key === 'Escape') { if (key === 'Escape') {
if (!this.temporarilyHideSuggestions) { if (!this.temporarilyHideSuggestions) {
this.input.elm.focus() this.input.focus()
} }
} }
@ -480,7 +480,7 @@ const EmojiInput = {
if (!panel) return if (!panel) return
const picker = this.$refs.picker.$el const picker = this.$refs.picker.$el
const panelBody = this.$refs['panel-body'] const panelBody = this.$refs['panel-body']
const { offsetHeight, offsetTop } = this.input.elm const { offsetHeight, offsetTop } = this.input
const offsetBottom = offsetTop + offsetHeight const offsetBottom = offsetTop + offsetHeight
this.setPlacement(panelBody, panel, offsetBottom) this.setPlacement(panelBody, panel, offsetBottom)
@ -494,7 +494,7 @@ const EmojiInput = {
if (this.placement === 'top' || (this.placement === 'auto' && this.overflowsBottom(container))) { if (this.placement === 'top' || (this.placement === 'auto' && this.overflowsBottom(container))) {
target.style.top = 'auto' target.style.top = 'auto'
target.style.bottom = this.input.elm.offsetHeight + 'px' target.style.bottom = this.input.offsetHeight + 'px'
} }
}, },
overflowsBottom (el) { overflowsBottom (el) {

1
src/components/emoji_input/emoji_input.vue
View File

@ -3,6 +3,7 @@
v-click-outside="onClickOutside" v-click-outside="onClickOutside"
class="emoji-input" class="emoji-input"
:class="{ 'with-picker': !hideEmojiButton }" :class="{ 'with-picker': !hideEmojiButton }"
ref='root'
> >
<slot /> <slot />
<template v-if="enableEmojiPicker"> <template v-if="enableEmojiPicker">

24
src/components/extra_buttons/extra_buttons.vue
View File

@ -7,10 +7,7 @@
:bound-to="{ x: 'container' }" :bound-to="{ x: 'container' }"
remove-padding remove-padding
> >
<div <template v-slot:content="{close}">
slot="content"
slot-scope="{close}"
>
<div class="dropdown-menu"> <div class="dropdown-menu">
<button <button
v-if="canMute && !status.thread_muted" v-if="canMute && !status.thread_muted"
@ -120,16 +117,15 @@
/><span>{{ $t("user_card.report") }}</span> /><span>{{ $t("user_card.report") }}</span>
</button> </button>
</div> </div>
</div> </template>
<span <template v-slot:trigger>
slot="trigger" <button class="button-unstyled popover-trigger">
class="popover-trigger" <FAIcon
> class="fa-scale-110 fa-old-padding"
<FAIcon icon="ellipsis-h"
class="fa-scale-110 fa-old-padding" />
icon="ellipsis-h" </button>
/> </template>
</span>
</Popover> </Popover>
</template> </template>

25
src/components/moderation_tools/moderation_tools.vue
View File

@ -8,7 +8,7 @@
@show="setToggled(true)" @show="setToggled(true)"
@close="setToggled(false)" @close="setToggled(false)"
> >
<div slot="content"> <template v-slot:content>
<div class="dropdown-menu"> <div class="dropdown-menu">
<span v-if="user.is_local"> <span v-if="user.is_local">
<button <button
@ -121,26 +121,27 @@
</button> </button>
</span> </span>
</div> </div>
</div> </template>
<button <template v-slot:trigger>
slot="trigger" <button
class="btn button-default btn-block moderation-tools-button" class="btn button-default btn-block moderation-tools-button"
:class="{ toggled }" :class="{ toggled }"
> >
{{ $t('user_card.admin_menu.moderation') }} {{ $t('user_card.admin_menu.moderation') }}
<FAIcon icon="chevron-down" /> <FAIcon icon="chevron-down" />
</button> </button>
</template>
</Popover> </Popover>
<portal to="modal"> <portal to="modal">
<DialogModal <DialogModal
v-if="showDeleteUserDialog" v-if="showDeleteUserDialog"
:on-cancel="deleteUserDialog.bind(this, false)" :on-cancel="deleteUserDialog.bind(this, false)"
> >
<template slot="header"> <template v-slot:header>
{{ $t('user_card.admin_menu.delete_user') }} {{ $t('user_card.admin_menu.delete_user') }}
</template> </template>
<p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p> <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
<template slot="footer"> <template v-slot:footer>
<button <button
class="btn button-default" class="btn button-default"
@click="deleteUserDialog(false)" @click="deleteUserDialog(false)"

8
src/components/notifications/notification_filters.vue
View File

@ -5,9 +5,7 @@
placement="bottom" placement="bottom"
:bound-to="{ x: 'container' }" :bound-to="{ x: 'container' }"
> >
<template <template v-slot:content>
v-slot:content
>
<div class="dropdown-menu"> <div class="dropdown-menu">
<button <button
class="button-default dropdown-item" class="button-default dropdown-item"
@ -66,7 +64,9 @@
</div> </div>
</template> </template>
<template v-slot:trigger> <template v-slot:trigger>
<FAIcon icon="filter" /> <button class="button-unstyled">
<FAIcon icon="filter" />
</button>
</template> </template>
</Popover> </Popover>
</template> </template>

2
src/components/popover/popover.js
View File

@ -54,7 +54,7 @@ const Popover = {
} }
// Popover will be anchored around this element, trigger ref is the container, so // Popover will be anchored around this element, trigger ref is the container, so
// its children are what are inside the slot. Expect only one slot="trigger". // its children are what are inside the slot. Expect only one v-slot:trigger.
const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el
// SVGs don't have offsetWidth/Height, use fallback // SVGs don't have offsetWidth/Height, use fallback
const anchorWidth = anchorEl.offsetWidth || anchorEl.clientWidth const anchorWidth = anchorEl.offsetWidth || anchorEl.clientWidth

28
src/components/react_button/react_button.vue
View File

@ -8,10 +8,7 @@
remove-padding remove-padding
@show="focusInput" @show="focusInput"
> >
<div <template v-slot:content="{close}">
slot="content"
slot-scope="{close}"
>
<div class="reaction-picker-filter"> <div class="reaction-picker-filter">
<input <input
v-model="filterWord" v-model="filterWord"
@ -41,17 +38,18 @@
</span> </span>
<div class="reaction-bottom-fader" /> <div class="reaction-bottom-fader" />
</div> </div>
</div> </template>
<span <template v-slot:trigger>
slot="trigger" <button
class="popover-trigger" class="button-unstyled popover-trigger"
:title="$t('tool_tip.add_reaction')" :title="$t('tool_tip.add_reaction')"
> >
<FAIcon <FAIcon
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
:icon="['far', 'smile-beam']" :icon="['far', 'smile-beam']"
/> />
</span> </button>
</template>
</Popover> </Popover>
</template> </template>

7
src/components/selectable_list/selectable_list.vue
View File

@ -24,10 +24,7 @@
:items="items" :items="items"
:get-key="getKey" :get-key="getKey"
> >
<template <template v-slot:item="{item}">
slot="item"
slot-scope="{item}"
>
<div <div
class="selectable-list-item-inner" class="selectable-list-item-inner"
:class="{ 'selectable-list-item-selected-inner': isSelected(item) }" :class="{ 'selectable-list-item-selected-inner': isSelected(item) }"
@ -44,7 +41,7 @@
/> />
</div> </div>
</template> </template>
<template slot="empty"> <template v-slot:empty>
<slot name="empty" /> <slot name="empty" />
</template> </template>
</List> </List>

16
src/components/settings_modal/helpers/modified_indicator.vue
View File

@ -6,18 +6,18 @@
<Popover <Popover
trigger="hover" trigger="hover"
> >
<span slot="trigger"> <template v-slot:trigger>
&nbsp; &nbsp;
<FAIcon <FAIcon
icon="wrench" icon="wrench"
:aria-label="$t('settings.setting_changed')"
/> />
</span> </template>
<div <template v-slot:content>
slot="content" <div class="modified-tooltip">
class="modified-tooltip" {{ $t('settings.setting_changed') }}
> </div>
{{ $t('settings.setting_changed') }} </template>
</div>
</Popover> </Popover>
</span> </span>
</template> </template>

28
src/components/settings_modal/settings_modal.vue
View File

@ -62,20 +62,18 @@
:bound-to="{ x: 'container' }" :bound-to="{ x: 'container' }"
remove-padding remove-padding
> >
<button <template v-slot:trigger>
slot="trigger" <button
class="btn button-default" class="btn button-default"
:title="$t('general.close')" :title="$t('general.close')"
> >
<span>{{ $t("settings.file_export_import.backup_restore") }}</span> <span>{{ $t("settings.file_export_import.backup_restore") }}</span>
<FAIcon <FAIcon
icon="chevron-down" icon="chevron-down"
/> />
</button> </button>
<div </template>
slot="content" <template v-slot:content="{close}">
slot-scope="{close}"
>
<div class="dropdown-menu"> <div class="dropdown-menu">
<button <button
class="button-default dropdown-item dropdown-item-icon" class="button-default dropdown-item dropdown-item-icon"
@ -108,7 +106,7 @@
/><span>{{ $t("settings.file_export_import.restore_settings") }}</span> /><span>{{ $t("settings.file_export_import.restore_settings") }}</span>
</button> </button>
</div> </div>
</div> </template>
</Popover> </Popover>
</div> </div>
</div> </div>

73
src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
View File

@ -10,20 +10,18 @@
:query="queryUserIds" :query="queryUserIds"
:placeholder="$t('settings.search_user_to_block')" :placeholder="$t('settings.search_user_to_block')"
> >
<BlockCard <template v-slot="row">
slot-scope="row" <BlockCard
:user-id="row.item" :user-id="row.item"
/> />
</template>
</Autosuggest> </Autosuggest>
</div> </div>
<BlockList <BlockList
:refresh="true" :refresh="true"
:get-key="i => i" :get-key="i => i"
> >
<template <template v-slot:header="{selected}">
slot="header"
slot-scope="{selected}"
>
<div class="bulk-actions"> <div class="bulk-actions">
<ProgressButton <ProgressButton
v-if="selected.length > 0" v-if="selected.length > 0"
@ -31,7 +29,7 @@
:click="() => blockUsers(selected)" :click="() => blockUsers(selected)"
> >
{{ $t('user_card.block') }} {{ $t('user_card.block') }}
<template slot="progress"> <template v-slot:progress>
{{ $t('user_card.block_progress') }} {{ $t('user_card.block_progress') }}
</template> </template>
</ProgressButton> </ProgressButton>
@ -41,19 +39,16 @@
:click="() => unblockUsers(selected)" :click="() => unblockUsers(selected)"
> >
{{ $t('user_card.unblock') }} {{ $t('user_card.unblock') }}
<template slot="progress"> <template v-slot:progress>
{{ $t('user_card.unblock_progress') }} {{ $t('user_card.unblock_progress') }}
</template> </template>
</ProgressButton> </ProgressButton>
</div> </div>
</template> </template>
<template <template v-slot:item="{item}">
slot="item"
slot-scope="{item}"
>
<BlockCard :user-id="item" /> <BlockCard :user-id="item" />
</template> </template>
<template slot="empty"> <template v-slot:empty>
{{ $t('settings.no_blocks') }} {{ $t('settings.no_blocks') }}
</template> </template>
</BlockList> </BlockList>
@ -68,20 +63,18 @@
:query="queryUserIds" :query="queryUserIds"
:placeholder="$t('settings.search_user_to_mute')" :placeholder="$t('settings.search_user_to_mute')"
> >
<MuteCard <template v-slot="row">
slot-scope="row" <MuteCard
:user-id="row.item" :user-id="row.item"
/> />
</template>
</Autosuggest> </Autosuggest>
</div> </div>
<MuteList <MuteList
:refresh="true" :refresh="true"
:get-key="i => i" :get-key="i => i"
> >
<template <template v-slot:header="{selected}">
slot="header"
slot-scope="{selected}"
>
<div class="bulk-actions"> <div class="bulk-actions">
<ProgressButton <ProgressButton
v-if="selected.length > 0" v-if="selected.length > 0"
@ -89,7 +82,7 @@
:click="() => muteUsers(selected)" :click="() => muteUsers(selected)"
> >
{{ $t('user_card.mute') }} {{ $t('user_card.mute') }}
<template slot="progress"> <template v-slot:progress>
{{ $t('user_card.mute_progress') }} {{ $t('user_card.mute_progress') }}
</template> </template>
</ProgressButton> </ProgressButton>
@ -99,19 +92,16 @@
:click="() => unmuteUsers(selected)" :click="() => unmuteUsers(selected)"
> >
{{ $t('user_card.unmute') }} {{ $t('user_card.unmute') }}
<template slot="progress"> <template v-slot:progress>
{{ $t('user_card.unmute_progress') }} {{ $t('user_card.unmute_progress') }}
</template> </template>
</ProgressButton> </ProgressButton>
</div> </div>
</template> </template>
<template <template v-slot:item="{item}">
slot="item"
slot-scope="{item}"
>
<MuteCard :user-id="item" /> <MuteCard :user-id="item" />
</template> </template>
<template slot="empty"> <template v-slot:empty>
{{ $t('settings.no_mutes') }} {{ $t('settings.no_mutes') }}
</template> </template>
</MuteList> </MuteList>
@ -124,20 +114,18 @@
:query="queryKnownDomains" :query="queryKnownDomains"
:placeholder="$t('settings.type_domains_to_mute')" :placeholder="$t('settings.type_domains_to_mute')"
> >
<DomainMuteCard <template v-slot="row">
slot-scope="row" <DomainMuteCard
:domain="row.item" :domain="row.item"
/> />
</template>
</Autosuggest> </Autosuggest>
</div> </div>
<DomainMuteList <DomainMuteList
:refresh="true" :refresh="true"
:get-key="i => i" :get-key="i => i"
> >
<template <template v-slot:header="{selected}">
slot="header"
slot-scope="{selected}"
>
<div class="bulk-actions"> <div class="bulk-actions">
<ProgressButton <ProgressButton
v-if="selected.length > 0" v-if="selected.length > 0"
@ -145,19 +133,16 @@
:click="() => unmuteDomains(selected)" :click="() => unmuteDomains(selected)"
> >
{{ $t('domain_mute_card.unmute') }} {{ $t('domain_mute_card.unmute') }}
<template slot="progress"> <template v-slot:progress>
{{ $t('domain_mute_card.unmute_progress') }} {{ $t('domain_mute_card.unmute_progress') }}
</template> </template>
</ProgressButton> </ProgressButton>
</div> </div>
</template> </template>
<template <template v-slot:item="{item}">
slot="item"
slot-scope="{item}"
>
<DomainMuteCard :domain="item" /> <DomainMuteCard :domain="item" />
</template> </template>
<template slot="empty"> <template v-slot:empty>
{{ $t('settings.no_mutes') }} {{ $t('settings.no_mutes') }}
</template> </template>
</DomainMuteList> </DomainMuteList>

8
src/components/status_popover/status_popover.vue
View File

@ -5,12 +5,10 @@
:bound-to="{ x: 'container' }" :bound-to="{ x: 'container' }"
@show="enter" @show="enter"
> >
<template slot="trigger"> <template v-slot:trigger>
<slot /> <slot />
</template> </template>
<div <template v-slot:content>
slot="content"
>
<Status <Status
v-if="status" v-if="status"
:is-preview="true" :is-preview="true"
@ -33,7 +31,7 @@
size="2x" size="2x"
/> />
</div> </div>
</div> </template>
</Popover> </Popover>
</template> </template>

109
src/components/timeline/timeline_quick_settings.vue
View File

@ -4,77 +4,78 @@
class="TimelineQuickSettings" class="TimelineQuickSettings"
:bound-to="{ x: 'container' }" :bound-to="{ x: 'container' }"
> >
<div <template v-slot:content>
slot="content" <div class="dropdown-menu">
class="dropdown-menu" <div v-if="loggedIn">
> <button
<div v-if="loggedIn"> class="button-default dropdown-item"
@click="replyVisibilityAll = true"
>
<span
class="menu-checkbox"
:class="{ 'menu-checkbox-radio': replyVisibilityAll }"
/>{{ $t('settings.reply_visibility_all') }}
</button>
<button
class="button-default dropdown-item"
@click="replyVisibilityFollowing = true"
>
<span
class="menu-checkbox"
:class="{ 'menu-checkbox-radio': replyVisibilityFollowing }"
/>{{ $t('settings.reply_visibility_following_short') }}
</button>
<button
class="button-default dropdown-item"
@click="replyVisibilitySelf = true"
>
<span
class="menu-checkbox"
:class="{ 'menu-checkbox-radio': replyVisibilitySelf }"
/>{{ $t('settings.reply_visibility_self_short') }}
</button>
<div
role="separator"
class="dropdown-divider"
/>
</div>
<button <button
class="button-default dropdown-item" class="button-default dropdown-item"
@click="replyVisibilityAll = true" @click="hideMedia = !hideMedia"
> >
<span <span
class="menu-checkbox" class="menu-checkbox"
:class="{ 'menu-checkbox-radio': replyVisibilityAll }" :class="{ 'menu-checkbox-checked': hideMedia }"
/>{{ $t('settings.reply_visibility_all') }} />{{ $t('settings.hide_media_previews') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="button-default dropdown-item"
@click="replyVisibilityFollowing = true" @click="hideMutedPosts = !hideMutedPosts"
> >
<span <span
class="menu-checkbox" class="menu-checkbox"
:class="{ 'menu-checkbox-radio': replyVisibilityFollowing }" :class="{ 'menu-checkbox-checked': hideMutedPosts }"
/>{{ $t('settings.reply_visibility_following_short') }} />{{ $t('settings.hide_all_muted_posts') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="button-default dropdown-item dropdown-item-icon"
@click="replyVisibilitySelf = true" @click="openTab('filtering')"
> >
<span <FAIcon icon="font" />{{ $t('settings.word_filter') }}
class="menu-checkbox" </button>
:class="{ 'menu-checkbox-radio': replyVisibilitySelf }" <button
/>{{ $t('settings.reply_visibility_self_short') }} class="button-default dropdown-item dropdown-item-icon"
@click="openTab('general')"
>
<FAIcon icon="wrench" />{{ $t('settings.more_settings') }}
</button> </button>
<div
role="separator"
class="dropdown-divider"
/>
</div> </div>
<button </template>
class="button-default dropdown-item" <template v-slot:trigger>
@click="hideMedia = !hideMedia" <button class="button-unstyled">
> <FAIcon icon="filter" />
<span
class="menu-checkbox"
:class="{ 'menu-checkbox-checked': hideMedia }"
/>{{ $t('settings.hide_media_previews') }}
</button> </button>
<button </template>
class="button-default dropdown-item"
@click="hideMutedPosts = !hideMutedPosts"
>
<span
class="menu-checkbox"
:class="{ 'menu-checkbox-checked': hideMutedPosts }"
/>{{ $t('settings.hide_all_muted_posts') }}
</button>
<button
class="button-default dropdown-item dropdown-item-icon"
@click="openTab('filtering')"
>
<FAIcon icon="font" />{{ $t('settings.word_filter') }}
</button>
<button
class="button-default dropdown-item dropdown-item-icon"
@click="openTab('general')"
>
<FAIcon icon="wrench" />{{ $t('settings.more_settings') }}
</button>
</div>
<div slot="trigger">
<FAIcon icon="filter" />
</div>
</Popover> </Popover>
</template> </template>

40
src/components/timeline_menu/timeline_menu.vue
View File

@ -9,28 +9,26 @@
@show="openMenu" @show="openMenu"
@close="() => isOpen = false" @close="() => isOpen = false"
> >
<div <template v-slot:content>
slot="content" <div class="timeline-menu-popover popover-default">
class="timeline-menu-popover panel panel-default" <TimelineMenuContent />
> </div>
<TimelineMenuContent /> </template>
</div> <template v-slot:trigger>
<div <button class="button-unstyled title timeline-menu-title">
slot="trigger" <span class="timeline-title">{{ timelineName() }}</span>
class="title timeline-menu-title" <span>
> <FAIcon
<span class="timeline-title">{{ timelineName() }}</span> size="sm"
<span> icon="chevron-down"
<FAIcon />
size="sm" </span>
icon="chevron-down" <span
class="click-blocker"
@click="blockOpen"
/> />
</span> </button>
<span </template>
class="click-blocker"
@click="blockOpen"
/>
</div>
</Popover> </Popover>
</template> </template>

6
src/components/user_card/user_card.vue
View File

@ -53,17 +53,17 @@
> >
{{ user.name }} {{ user.name }}
</div> </div>
<a <button
v-if="isOtherUser && !user.is_local" v-if="isOtherUser && !user.is_local"
:href="user.statusnet_profile_url" :href="user.statusnet_profile_url"
target="_blank" target="_blank"
class="external-link-button" class="button-unstyled external-link-button"
> >
<FAIcon <FAIcon
class="icon" class="icon"
icon="external-link-alt" icon="external-link-alt"
/> />
</a> </button>
<AccountActions <AccountActions
v-if="isOtherUser && loggedIn" v-if="isOtherUser && loggedIn"
:user="user" :user="user"

59
src/components/user_list_popover/user_list_popover.vue
View File

@ -4,40 +4,39 @@
placement="top" placement="top"
:offset="{ y: 5 }" :offset="{ y: 5 }"
> >
<template slot="trigger"> <template v-slot:trigger>
<slot /> <slot />
</template> </template>
<div <template v-slot:content>
slot="content" <div class="user-list-popover">
class="user-list-popover" <template v-if="users.length">
> <div
<div v-if="users.length"> v-for="(user) in usersCapped"
<div :key="user.id"
v-for="(user) in usersCapped" class="user-list-row"
:key="user.id" >
class="user-list-row" <UserAvatar
> :user="user"
<UserAvatar class="avatar-small"
:user="user" :compact="true"
class="avatar-small" />
:compact="true" <div class="user-list-names">
/> <!-- eslint-disable vue/no-v-html -->
<div class="user-list-names"> <span v-html="user.name_html" />
<!-- eslint-disable vue/no-v-html --> <!-- eslint-enable vue/no-v-html -->
<span v-html="user.name_html" /> <span class="user-list-screen-name">{{ user.screen_name_ui }}</span>
<!-- eslint-enable vue/no-v-html --> </div>
<span class="user-list-screen-name">{{ user.screen_name_ui }}</span>
</div> </div>
</div> </template>
<template v-else>
<FAIcon
icon="circle-notch"
spin
size="3x"
/>
</template>
</div> </div>
<div v-else> </template>
<FAIcon
icon="circle-notch"
spin
size="3x"
/>
</div>
</div>
</Popover> </Popover>
</template> </template>

10
src/components/user_profile/user_profile.vue
View File

@ -60,10 +60,7 @@
:disabled="!user.friends_count" :disabled="!user.friends_count"
> >
<FriendList :user-id="userId"> <FriendList :user-id="userId">
<template <template v-slot:item="{item}">
slot="item"
slot-scope="{item}"
>
<FollowCard :user="item" /> <FollowCard :user="item" />
</template> </template>
</FriendList> </FriendList>
@ -75,10 +72,7 @@
:disabled="!user.followers_count" :disabled="!user.followers_count"
> >
<FollowerList :user-id="userId"> <FollowerList :user-id="userId">
<template <template v-slot:item="{item}">
slot="item"
slot-scope="{item}"
>
<FollowCard <FollowCard
:user="item" :user="item"
:no-follows-you="isUs" :no-follows-you="isUs"

5
src/components/user_reporting_modal/user_reporting_modal.vue
View File

@ -45,10 +45,7 @@
</div> </div>
<div class="user-reporting-panel-right"> <div class="user-reporting-panel-right">
<List :items="statuses"> <List :items="statuses">
<template <template v-slot:item="{item}">
slot="item"
slot-scope="{item}"
>
<div class="status-fadein user-reporting-panel-sitem"> <div class="status-fadein user-reporting-panel-sitem">
<Status <Status
:in-conversation="false" :in-conversation="false"