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

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

Browse source 
* 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
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

17
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 <FAIcon
class="icon" class="icon"
icon="ellipsis-v" icon="ellipsis-v"
/> />
</div> </button>
</template>
</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"

10
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>
<template v-slot:trigger>
<button <button
slot="trigger"
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"
> >
<template v-slot:footer>
<span <span
slot="footer"
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">

16
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 <FAIcon
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="ellipsis-h" icon="ellipsis-h"
/> />
</span> </button>
</template>
</Popover> </Popover>
</template> </template>

11
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>
<template v-slot:trigger>
<button <button
slot="trigger"
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)"

6
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>
<button class="button-unstyled">
<FAIcon icon="filter" /> <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

16
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>

12
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') }} {{ $t('settings.setting_changed') }}
</div> </div>
</template>
</Popover> </Popover>
</span> </span>
</template> </template>

10
src/components/settings_modal/settings_modal.vue
View file

@ -62,8 +62,8 @@
:bound-to="{ x: 'container' }" :bound-to="{ x: 'container' }"
remove-padding remove-padding
> >
<template v-slot:trigger>
<button <button
slot="trigger"
class="btn button-default" class="btn button-default"
:title="$t('general.close')" :title="$t('general.close')"
> >
@ -72,10 +72,8 @@
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>

55
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')"
> >
<template v-slot="row">
<BlockCard <BlockCard
slot-scope="row"
: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')"
> >
<template v-slot="row">
<MuteCard <MuteCard
slot-scope="row"
: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')"
> >
<template v-slot="row">
<DomainMuteCard <DomainMuteCard
slot-scope="row"
: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>

13
src/components/timeline/timeline_quick_settings.vue
View file

@ -4,10 +4,8 @@
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"> <div v-if="loggedIn">
<button <button
class="button-default dropdown-item" class="button-default dropdown-item"
@ -72,9 +70,12 @@
<FAIcon icon="wrench" />{{ $t('settings.more_settings') }} <FAIcon icon="wrench" />{{ $t('settings.more_settings') }}
</button> </button>
</div> </div>
<div slot="trigger"> </template>
<template v-slot:trigger>
<button class="button-unstyled">
<FAIcon icon="filter" /> <FAIcon icon="filter" />
</div> </button>
</template>
</Popover> </Popover>
</template> </template>

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

@ -9,16 +9,13 @@
@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 /> <TimelineMenuContent />
</div> </div>
<div </template>
slot="trigger" <template v-slot:trigger>
class="title timeline-menu-title" <button class="button-unstyled title timeline-menu-title">
>
<span class="timeline-title">{{ timelineName() }}</span> <span class="timeline-title">{{ timelineName() }}</span>
<span> <span>
<FAIcon <FAIcon
@ -30,7 +27,8 @@
class="click-blocker" class="click-blocker"
@click="blockOpen" @click="blockOpen"
/> />
</div> </button>
</template>
</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"

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

@ -4,14 +4,12 @@
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 v-if="users.length">
<div <div
v-for="(user) in usersCapped" v-for="(user) in usersCapped"
:key="user.id" :key="user.id"
@ -29,15 +27,16 @@
<span class="user-list-screen-name">{{ user.screen_name_ui }}</span> <span class="user-list-screen-name">{{ user.screen_name_ui }}</span>
</div> </div>
</div> </div>
</div> </template>
<div v-else> <template v-else>
<FAIcon <FAIcon
icon="circle-notch" icon="circle-notch"
spin spin
size="3x" size="3x"
/> />
</template>
</div> </div>
</div> </template>
</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"