Fix design modals
This commit is contained in:
AkiraFukushima
parent
b656832290
commit
b1b3fd78f9
|
|
@ -22,17 +22,17 @@
|
|||
@click="unsubscribe(account)"
|
||||
:title="$t('side_bar.account_profile.unsubscribe')"
|
||||
>
|
||||
<font-awesome-icon icon="bell" size="xl" />
|
||||
<font-awesome-icon icon="bell" size="lg" />
|
||||
</div>
|
||||
<div v-else class="subscribe" @click="subscribe(account)" :title="$t('side_bar.account_profile.subscribe')">
|
||||
<font-awesome-icon :icon="['far', 'bell']" size="xl" />
|
||||
<font-awesome-icon :icon="['far', 'bell']" size="lg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="user-info">
|
||||
<div class="more" v-if="relationship !== null && relationship !== '' && !isOwnProfile">
|
||||
<el-popover placement="bottom" width="200" trigger="click" ref="popper">
|
||||
<el-popover placement="bottom" width="200" trigger="click" popper-class="account-menu-popper">
|
||||
<ul class="menu-list">
|
||||
<li role="button" @click="openBrowser(account)">
|
||||
{{ $t('side_bar.account_profile.open_in_browser') }}
|
||||
|
|
@ -229,29 +229,23 @@ export default {
|
|||
},
|
||||
openBrowser(account) {
|
||||
window.shell.openExternal(account.url)
|
||||
this.$refs.popper.doClose()
|
||||
},
|
||||
addToList(account) {
|
||||
this.$store.dispatch('TimelineSpace/Modals/ListMembership/setAccount', account)
|
||||
this.$store.dispatch('TimelineSpace/Modals/ListMembership/changeModal', true)
|
||||
this.$refs.popper.doClose()
|
||||
},
|
||||
confirmMute(account) {
|
||||
this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeAccount', account)
|
||||
this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeModal', true)
|
||||
this.$refs.popper.doClose()
|
||||
},
|
||||
unmute(account) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/unmute', account)
|
||||
this.$refs.popper.doClose()
|
||||
},
|
||||
block(account) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/block', account)
|
||||
this.$refs.popper.doClose()
|
||||
},
|
||||
unblock(account) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/unblock', account)
|
||||
this.$refs.popper.doClose()
|
||||
},
|
||||
metadataClick(e) {
|
||||
const link = findLink(e.target, 'metadata')
|
||||
|
|
@ -344,34 +338,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.more {
|
||||
.popper {
|
||||
padding: 2px 0;
|
||||
border-color: #909399;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
padding: 0;
|
||||
font-size: calc(var(--base-font-size) * 0.9);
|
||||
list-style-type: none;
|
||||
line-height: 32px;
|
||||
text-align: left;
|
||||
color: #303133;
|
||||
margin: 4px 0;
|
||||
|
||||
li {
|
||||
box-sizing: border-box;
|
||||
padding: 0 32px 0 16px;
|
||||
|
||||
&:hover {
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding: 12px;
|
||||
|
||||
|
|
@ -517,3 +483,31 @@ export default {
|
|||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.account-menu-popper {
|
||||
padding: 2px 0 !important;
|
||||
border-color: #909399;
|
||||
|
||||
.menu-list {
|
||||
padding: 0;
|
||||
font-size: calc(var(--base-font-size) * 0.9);
|
||||
list-style-type: none;
|
||||
line-height: 32px;
|
||||
text-align: left;
|
||||
color: #303133;
|
||||
margin: 4px 0;
|
||||
|
||||
li {
|
||||
box-sizing: border-box;
|
||||
padding: 0 32px 0 16px;
|
||||
|
||||
&:hover {
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,36 @@
|
|||
<template>
|
||||
<el-dialog :title="$t('modals.add_list_member.title')" :model-value="addListMemberModal" width="400px" class="add-member">
|
||||
<div class="search-account" :element-loading-background="loadingBackground">
|
||||
<el-form :inline="true">
|
||||
<input v-model="name" placeholder="Account name" class="account-name" autofocus />
|
||||
<el-button type="text" class="search" @click="search">
|
||||
<font-awesome-icon icon="magnifying-glass" />
|
||||
</el-button>
|
||||
</el-form>
|
||||
<div class="search-results">
|
||||
<template v-for="user in accounts">
|
||||
<div class="user">
|
||||
<div class="icon">
|
||||
<img :src="user.avatar" />
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="username">
|
||||
{{ username(user) }}
|
||||
<div class="add-member">
|
||||
<el-dialog :title="$t('modals.add_list_member.title')" :model-value="addListMemberModal" width="400px" custom-class="add-member-modal">
|
||||
<div class="search-account" :element-loading-background="loadingBackground">
|
||||
<el-form :inline="true">
|
||||
<input v-model="name" placeholder="Account name" class="account-name" autofocus />
|
||||
<el-button type="text" class="search" @click="search">
|
||||
<font-awesome-icon icon="magnifying-glass" />
|
||||
</el-button>
|
||||
</el-form>
|
||||
<div class="search-results">
|
||||
<template v-for="user in accounts">
|
||||
<div class="user">
|
||||
<div class="icon">
|
||||
<img :src="user.avatar" />
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="username">
|
||||
{{ username(user) }}
|
||||
</div>
|
||||
<div class="acct">@{{ user.acct }}</div>
|
||||
</div>
|
||||
<div class="add">
|
||||
<el-button type="text" @click="add(user)">
|
||||
<font-awesome-icon icon="plus" />
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="acct">@{{ user.acct }}</div>
|
||||
</div>
|
||||
<div class="add">
|
||||
<el-button type="text" @click="add(user)">
|
||||
<font-awesome-icon icon="plus" />
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -86,9 +88,10 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add-member /deep/ {
|
||||
.add-member :deep() {
|
||||
.el-dialog__header {
|
||||
background-color: var(--theme-header-menu-color);
|
||||
margin-right: 0;
|
||||
|
||||
.el-dialog__title {
|
||||
color: var(--theme-secondary-color);
|
||||
|
|
@ -100,7 +103,9 @@ export default {
|
|||
color: var(--theme-secondary-color);
|
||||
padding: 8px 12px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-member-modal {
|
||||
.search-account {
|
||||
background-color: var(--theme-selected-background-color);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<transition name="image-viewer">
|
||||
<div id="image" v-show="modalOpen" @click="close" :aria-hidden="!modalOpen" aria-modal="true" role="dialog">
|
||||
<div id="image" v-show="modalOpen" :aria-hidden="!modalOpen" aria-modal="true" role="dialog">
|
||||
<div class="image-wrapper">
|
||||
<div class="image-header">
|
||||
<el-button type="text" @click="close" class="close-button">
|
||||
|
|
@ -9,11 +9,11 @@
|
|||
</div>
|
||||
<div class="image-content" role="presentation">
|
||||
<span class="button-area"
|
||||
><el-button type="text"> <font-awesome-icon icon="arrow-left" /> </el-button
|
||||
><el-button type="text" v-show="showLeft" @click="decrementIndex()"> <font-awesome-icon icon="angle-left" /> </el-button
|
||||
></span>
|
||||
<Media :src="imageURL" :type="imageType"></Media>
|
||||
<span class="button-area"
|
||||
><el-button type="text"> <font-awesome-icon icon="arrow-right" /> </el-button
|
||||
><el-button type="text" v-show="showRight" @click="incrementIndex()"> <font-awesome-icon icon="angle-right" /> </el-button
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -107,11 +107,13 @@ export default {
|
|||
.image-viewer-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.button-area {
|
||||
display: inline-block;
|
||||
width: 52px;
|
||||
height: 77px;
|
||||
i {
|
||||
width: 27px;
|
||||
margin: 0 12px;
|
||||
|
||||
svg {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,145 +1,147 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
:title="$t('modals.new_toot.title')"
|
||||
:model-value="newTootModal"
|
||||
v-if="newTootModal"
|
||||
:before-close="closeConfirm"
|
||||
width="600px"
|
||||
class="new-toot-modal"
|
||||
ref="dialog"
|
||||
>
|
||||
<el-form v-on:submit.prevent="toot" role="form">
|
||||
<Quote :message="quoteToMessage" :displayNameStyle="displayNameStyle" v-if="quoteToMessage !== null" ref="quote"></Quote>
|
||||
<div class="spoiler" v-if="showContentWarning" ref="spoiler">
|
||||
<div class="el-input">
|
||||
<input type="text" class="el-input__inner" :placeholder="$t('modals.new_toot.cw')" v-model="spoiler" />
|
||||
<div class="new-toot">
|
||||
<el-dialog
|
||||
:title="$t('modals.new_toot.title')"
|
||||
:model-value="newTootModal"
|
||||
@update:model-value="newTootModal = $event"
|
||||
:before-close="closeConfirm"
|
||||
width="600px"
|
||||
custom-class="new-toot-modal"
|
||||
ref="dialog"
|
||||
>
|
||||
<el-form v-on:submit.prevent="toot" role="form">
|
||||
<Quote :message="quoteToMessage" :displayNameStyle="displayNameStyle" v-if="quoteToMessage !== null" ref="quote"></Quote>
|
||||
<div class="spoiler" v-if="showContentWarning" ref="spoiler">
|
||||
<div class="el-input">
|
||||
<input type="text" class="el-input__inner" :placeholder="$t('modals.new_toot.cw')" v-model="spoiler" />
|
||||
</div>
|
||||
</div>
|
||||
<Status
|
||||
v-model="status"
|
||||
:opened="newTootModal"
|
||||
:fixCursorPos="hashtagInserting"
|
||||
:height="statusHeight"
|
||||
@paste="onPaste"
|
||||
@toot="toot"
|
||||
@pickerOpened="innerElementOpened"
|
||||
@suggestOpened="innerElementOpened"
|
||||
/>
|
||||
</el-form>
|
||||
<Poll
|
||||
v-if="openPoll"
|
||||
v-model="polls"
|
||||
@addPoll="addPoll"
|
||||
@removePoll="removePoll"
|
||||
:defaultExpire="pollExpire"
|
||||
@changeExpire="changeExpire"
|
||||
ref="poll"
|
||||
></Poll>
|
||||
<div class="preview" ref="preview">
|
||||
<div class="image-wrapper" v-for="media in attachedMedias" v-bind:key="media.id">
|
||||
<img :src="media.preview_url" class="preview-image" />
|
||||
<el-button type="text" @click="removeAttachment(media)" class="remove-image"><font-awesome-icon icon="circle-xmark" /></el-button>
|
||||
<textarea
|
||||
maxlength="420"
|
||||
class="image-description"
|
||||
:placeholder="$t('modals.new_toot.description')"
|
||||
:value="mediaDescriptions[media.id]"
|
||||
@input="updateDescription(media.id, $event.target.value)"
|
||||
role="textbox"
|
||||
contenteditable="true"
|
||||
aria-multiline="true"
|
||||
>
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<Status
|
||||
v-model="status"
|
||||
:opened="newTootModal"
|
||||
:fixCursorPos="hashtagInserting"
|
||||
:height="statusHeight"
|
||||
@paste="onPaste"
|
||||
@toot="toot"
|
||||
@pickerOpened="innerElementOpened"
|
||||
@suggestOpened="innerElementOpened"
|
||||
/>
|
||||
</el-form>
|
||||
<Poll
|
||||
v-if="openPoll"
|
||||
v-model="polls"
|
||||
@addPoll="addPoll"
|
||||
@removePoll="removePoll"
|
||||
:defaultExpire="pollExpire"
|
||||
@changeExpire="changeExpire"
|
||||
ref="poll"
|
||||
></Poll>
|
||||
<div class="preview" ref="preview">
|
||||
<div class="image-wrapper" v-for="media in attachedMedias" v-bind:key="media.id">
|
||||
<img :src="media.preview_url" class="preview-image" />
|
||||
<el-button type="text" @click="removeAttachment(media)" class="remove-image"><font-awesome-icon icon="circle-xmark" /></el-button>
|
||||
<textarea
|
||||
maxlength="420"
|
||||
class="image-description"
|
||||
:placeholder="$t('modals.new_toot.description')"
|
||||
:value="mediaDescriptions[media.id]"
|
||||
@input="updateDescription(media.id, $event.target.value)"
|
||||
role="textbox"
|
||||
contenteditable="true"
|
||||
aria-multiline="true"
|
||||
>
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<div class="upload-image">
|
||||
<el-button size="default" type="text" @click="selectImage" :title="$t('modals.new_toot.footer.add_image')">
|
||||
<font-awesome-icon icon="camera" />
|
||||
</el-button>
|
||||
<input name="image" type="file" class="image-input" ref="image" @change="onChangeImage" :key="attachedMediaId" />
|
||||
</div>
|
||||
<div class="poll">
|
||||
<el-button size="default" type="text" @click="togglePollForm" :title="$t('modals.new_toot.footer.poll')">
|
||||
<font-awesome-icon icon="square-poll-horizontal" />
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="privacy">
|
||||
<el-dropdown trigger="click" @command="changeVisibility">
|
||||
<el-button size="default" type="text" :title="$t('modals.new_toot.footer.change_visibility')">
|
||||
<font-awesome-icon :icon="visibilityIcon" />
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item :command="visibilityList.Public.value">
|
||||
<font-awesome-icon icon="globe" class="privacy-icon" />
|
||||
{{ $t(visibilityList.Public.name) }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :command="visibilityList.Unlisted.value">
|
||||
<font-awesome-icon icon="unlock" class="privacy-icon" />
|
||||
{{ $t(visibilityList.Unlisted.name) }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :command="visibilityList.Private.value">
|
||||
<font-awesome-icon icon="lock" class="privacy-icon" />
|
||||
{{ $t(visibilityList.Private.name) }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :command="visibilityList.Direct.value">
|
||||
<font-awesome-icon icon="envelope" class="privacy-icon" size="sm" />
|
||||
{{ $t(visibilityList.Direct.name) }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="sensitive" v-show="attachedMedias.length > 0">
|
||||
<el-button
|
||||
size="default"
|
||||
type="text"
|
||||
@click="changeSensitive"
|
||||
:title="$t('modals.new_toot.footer.change_sensitive')"
|
||||
:aria-pressed="sensitive"
|
||||
>
|
||||
<font-awesome-icon icon="eye-slash" v-show="!sensitive" />
|
||||
<font-awesome-icon icon="eye" v-show="sensitive" />
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="content-warning">
|
||||
<el-button
|
||||
size="default"
|
||||
type="text"
|
||||
@click="toggleContentWarning()"
|
||||
:title="$t('modals.new_toot.footer.add_cw')"
|
||||
:class="showContentWarning ? '' : 'clickable'"
|
||||
:aria-pressed="showContentWarning"
|
||||
>
|
||||
<font-awesome-icon icon="eye-slash" />
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="pined-hashtag">
|
||||
<el-button
|
||||
size="default"
|
||||
type="text"
|
||||
@click="pinedHashtag = !pinedHashtag"
|
||||
:title="$t('modals.new_toot.footer.pined_hashtag')"
|
||||
:class="pinedHashtag ? '' : 'clickable'"
|
||||
:aria-pressed="pinedHashtag"
|
||||
>
|
||||
<font-awesome-icon icon="hashtag" />
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="info">
|
||||
<img src="../../../assets/images/loading-spinner-wide.svg" v-show="loading" class="loading" />
|
||||
<span class="text-count">{{ tootMax - status.length }}</span>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<div class="upload-image">
|
||||
<el-button size="default" type="text" @click="selectImage" :title="$t('modals.new_toot.footer.add_image')">
|
||||
<font-awesome-icon icon="camera" />
|
||||
</el-button>
|
||||
<input name="image" type="file" class="image-input" ref="image" @change="onChangeImage" :key="attachedMediaId" />
|
||||
</div>
|
||||
<div class="poll">
|
||||
<el-button size="default" type="text" @click="togglePollForm" :title="$t('modals.new_toot.footer.poll')">
|
||||
<font-awesome-icon icon="square-poll-horizontal" />
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="privacy">
|
||||
<el-dropdown trigger="click" @command="changeVisibility">
|
||||
<el-button size="default" type="text" :title="$t('modals.new_toot.footer.change_visibility')">
|
||||
<font-awesome-icon :icon="visibilityIcon" />
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item :command="visibilityList.Public.value">
|
||||
<font-awesome-icon icon="globe" class="privacy-icon" />
|
||||
{{ $t(visibilityList.Public.name) }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :command="visibilityList.Unlisted.value">
|
||||
<font-awesome-icon icon="unlock" class="privacy-icon" />
|
||||
{{ $t(visibilityList.Unlisted.name) }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :command="visibilityList.Private.value">
|
||||
<font-awesome-icon icon="lock" class="privacy-icon" />
|
||||
{{ $t(visibilityList.Private.name) }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :command="visibilityList.Direct.value">
|
||||
<font-awesome-icon icon="envelope" class="privacy-icon" size="sm" />
|
||||
{{ $t(visibilityList.Direct.name) }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="sensitive" v-show="attachedMedias.length > 0">
|
||||
<el-button
|
||||
size="default"
|
||||
type="text"
|
||||
@click="changeSensitive"
|
||||
:title="$t('modals.new_toot.footer.change_sensitive')"
|
||||
:aria-pressed="sensitive"
|
||||
>
|
||||
<font-awesome-icon icon="eye-slash" v-show="!sensitive" />
|
||||
<font-awesome-icon icon="eye" v-show="sensitive" />
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="content-warning">
|
||||
<el-button
|
||||
size="default"
|
||||
type="text"
|
||||
@click="toggleContentWarning()"
|
||||
:title="$t('modals.new_toot.footer.add_cw')"
|
||||
:class="showContentWarning ? '' : 'clickable'"
|
||||
:aria-pressed="showContentWarning"
|
||||
>
|
||||
<font-awesome-icon icon="eye-slash" />
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="pined-hashtag">
|
||||
<el-button
|
||||
size="default"
|
||||
type="text"
|
||||
@click="pinedHashtag = !pinedHashtag"
|
||||
:title="$t('modals.new_toot.footer.pined_hashtag')"
|
||||
:class="pinedHashtag ? '' : 'clickable'"
|
||||
:aria-pressed="pinedHashtag"
|
||||
>
|
||||
<font-awesome-icon icon="hashtag" />
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="info">
|
||||
<img src="../../../assets/images/loading-spinner-wide.svg" v-show="loading" class="loading" />
|
||||
<span class="text-count">{{ tootMax - status.length }}</span>
|
||||
|
||||
<el-button class="toot-action" size="small" @click="closeConfirm(close)">{{ $t('modals.new_toot.cancel') }}</el-button>
|
||||
<el-button class="toot-action" size="small" type="primary" @click="toot" :loading="blockSubmit">{{
|
||||
$t('modals.new_toot.toot')
|
||||
}}</el-button>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<resize-observer @notify="handleResize" />
|
||||
</el-dialog>
|
||||
<el-button class="toot-action" @click="closeConfirm(close)">{{ $t('modals.new_toot.cancel') }}</el-button>
|
||||
<el-button class="toot-action" type="primary" @click="toot" :loading="blockSubmit">{{ $t('modals.new_toot.toot') }}</el-button>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</template>
|
||||
<resize-observer @notify="handleResize" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -462,189 +464,190 @@ export default {
|
|||
event.height - footerHeight - headerHeight - this.$refs.preview.offsetHeight - pollHeight - spoilerHeight - quoteHeight
|
||||
}
|
||||
},
|
||||
innerElementOpened(open) {
|
||||
if (open) {
|
||||
this.$refs.dialog.$el.firstChild.style.overflow = 'visible'
|
||||
} else {
|
||||
this.$refs.dialog.$el.firstChild.style.overflow = 'hidden'
|
||||
}
|
||||
innerElementOpened() {
|
||||
// if (open) {
|
||||
// this.$refs.dialog.$el.firstChild.style.overflow = 'visible'
|
||||
// } else {
|
||||
// this.$refs.dialog.$el.firstChild.style.overflow = 'hidden'
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.new-toot-modal /deep/ {
|
||||
.el-dialog {
|
||||
.new-toot :deep() {
|
||||
.new-toot-modal {
|
||||
background-color: var(--theme-selected-background-color);
|
||||
overflow: hidden;
|
||||
resize: both;
|
||||
padding-bottom: 20px;
|
||||
max-height: calc(100% - 15vh - 80px);
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
background-color: #4a5664;
|
||||
|
||||
.el-dialog__title {
|
||||
color: #ebeef5;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 0;
|
||||
|
||||
.el-input__inner {
|
||||
background-color: var(--theme-background-color);
|
||||
color: var(--theme-primary-color);
|
||||
border: 1px solid var(--theme-border-color);
|
||||
}
|
||||
|
||||
.spoiler {
|
||||
box-sizing: border-box;
|
||||
padding: 4px 0;
|
||||
.el-dialog__header {
|
||||
background-color: #4a5664;
|
||||
margin-right: 0;
|
||||
|
||||
input {
|
||||
border-radius: 0;
|
||||
|
||||
&::placeholder {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
.el-dialog__title {
|
||||
color: #ebeef5;
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
.el-dialog__body {
|
||||
padding: 0;
|
||||
|
||||
.image-wrapper {
|
||||
position: relative;
|
||||
flex: 1 1 0;
|
||||
min-width: 10%;
|
||||
height: 150px;
|
||||
margin: 4px;
|
||||
.el-input__inner {
|
||||
background-color: var(--theme-background-color);
|
||||
color: var(--theme-primary-color);
|
||||
border: 1px solid var(--theme-border-color);
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.spoiler {
|
||||
box-sizing: border-box;
|
||||
padding: 4px 0;
|
||||
background-color: #4a5664;
|
||||
|
||||
.image-description {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0.35) 80%, transparent);
|
||||
font-size: var(--font-base-size);
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
resize: none;
|
||||
overflow: scroll;
|
||||
input {
|
||||
border-radius: 0;
|
||||
|
||||
&::placeholder {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.remove-image {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font-size: 1.5rem;
|
||||
.preview {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.fa-icon {
|
||||
font-size: 0.9rem;
|
||||
width: auto;
|
||||
height: 1em;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
.image-wrapper {
|
||||
position: relative;
|
||||
flex: 1 1 0;
|
||||
min-width: 10%;
|
||||
height: 150px;
|
||||
margin: 4px;
|
||||
|
||||
.preview-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.image-description {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0.35) 80%, transparent);
|
||||
font-size: var(--font-base-size);
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
resize: none;
|
||||
overflow: scroll;
|
||||
|
||||
&::placeholder {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
}
|
||||
|
||||
.remove-image {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font-size: 1.5rem;
|
||||
|
||||
.fa-icon {
|
||||
font-size: 0.9rem;
|
||||
width: auto;
|
||||
height: 1em;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
background-color: var(--theme-selected-background-color);
|
||||
font-size: var(--base-font-size);
|
||||
padding-bottom: 0;
|
||||
.el-dialog__footer {
|
||||
background-color: var(--theme-selected-background-color);
|
||||
font-size: var(--base-font-size);
|
||||
padding-bottom: 0;
|
||||
|
||||
.upload-image {
|
||||
text-align: left;
|
||||
float: left;
|
||||
.upload-image {
|
||||
text-align: left;
|
||||
float: left;
|
||||
|
||||
.image-input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.poll {
|
||||
float: left;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.privacy {
|
||||
float: left;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.sensitive {
|
||||
float: left;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.content-warning {
|
||||
float: left;
|
||||
margin-left: 8px;
|
||||
|
||||
.cw-text {
|
||||
font-weight: 800;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.pined-hashtag {
|
||||
float: left;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.loading {
|
||||
width: 18px;
|
||||
margin-right: 4px;
|
||||
.image-input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.text-count {
|
||||
padding-right: 10px;
|
||||
.poll {
|
||||
float: left;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.privacy {
|
||||
float: left;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.sensitive {
|
||||
float: left;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.content-warning {
|
||||
float: left;
|
||||
margin-left: 8px;
|
||||
|
||||
.cw-text {
|
||||
font-weight: 800;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.pined-hashtag {
|
||||
float: left;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
.toot-action {
|
||||
font-size: var(--base-font-size);
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
.info {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.loading {
|
||||
width: 18px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.text-count {
|
||||
padding-right: 10px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
.toot-action {
|
||||
font-size: var(--base-font-size);
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,22 +6,14 @@
|
|||
<div class="detail">
|
||||
<div class="toot-header">
|
||||
<div class="user">
|
||||
<span class="display-name"
|
||||
><bdi v-html="username(message.account)"></bdi
|
||||
></span>
|
||||
<span class="display-name"><bdi v-html="username(message.account)"></bdi></span>
|
||||
<span class="acct">{{ accountName(message.account) }}</span>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<div
|
||||
class="spoiler"
|
||||
v-html="emojiText(message.spoiler_text, message.emojis)"
|
||||
></div>
|
||||
<div
|
||||
class="content"
|
||||
v-html="emojiText(message.content, message.emojis)"
|
||||
></div>
|
||||
<div class="spoiler" v-html="emojiText(message.spoiler_text, message.emojis)"></div>
|
||||
<div class="content" v-html="emojiText(message.content, message.emojis)"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
|
|
@ -36,17 +28,17 @@ import emojify from '@/utils/emojify'
|
|||
export default {
|
||||
new: 'quote-target',
|
||||
components: {
|
||||
FailoverImg,
|
||||
FailoverImg
|
||||
},
|
||||
props: {
|
||||
message: {
|
||||
type: Object,
|
||||
default: {},
|
||||
default: {}
|
||||
},
|
||||
displayNameStyle: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
username(account) {
|
||||
|
|
@ -78,8 +70,8 @@ export default {
|
|||
},
|
||||
emojiText(content, emojis) {
|
||||
return emojify(content, emojis)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -104,7 +96,7 @@ export default {
|
|||
float: left;
|
||||
width: calc(100% - 52px);
|
||||
|
||||
.content-wrapper /deep/ {
|
||||
.content-wrapper {
|
||||
font-size: var(--base-font-size);
|
||||
color: var(--theme-primary-color);
|
||||
|
||||
|
|
@ -127,11 +119,11 @@ export default {
|
|||
.content p {
|
||||
unicode-bidi: plaintext;
|
||||
}
|
||||
}
|
||||
|
||||
.emojione {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.content-wrapper :deep(.emojione) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.toot-header {
|
||||
|
|
@ -143,14 +135,14 @@ export default {
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.display-name /deep/ {
|
||||
.display-name {
|
||||
font-weight: 800;
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
|
||||
.emojione {
|
||||
max-width: 14px;
|
||||
max-height: 14px;
|
||||
}
|
||||
.display-name :deep(.emojione) {
|
||||
max-width: 14px;
|
||||
max-height: 14px;
|
||||
}
|
||||
|
||||
.acct {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
autofocus
|
||||
>
|
||||
</textarea>
|
||||
<el-popover placement="bottom-start" width="300" trigger="manual" :model-value="openSuggest" popper-class="suggest-popper">
|
||||
<el-popover placement="bottom-start" width="300" trigger="manual" v-model:visible="openSuggest" popper-class="suggest-popper">
|
||||
<ul class="suggest-list">
|
||||
<li
|
||||
v-for="(item, index) in filteredSuggestion"
|
||||
|
|
@ -31,9 +31,13 @@
|
|||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
<!-- dummy object to open suggest popper -->
|
||||
<template #reference>
|
||||
<span></span>
|
||||
</template>
|
||||
</el-popover>
|
||||
<div>
|
||||
<el-popover placement="bottom" width="281" trigger="click" popper-class="status-emoji-picker" ref="status_emoji_picker">
|
||||
<el-popover placement="bottom" width="281" trigger="click" popper-class="new-toot-emoji-picker" ref="new_toot_emoji_picker">
|
||||
<picker
|
||||
:data="emojiIndex"
|
||||
set="twitter"
|
||||
|
|
@ -280,6 +284,37 @@ export default {
|
|||
.suggest-popper {
|
||||
background-color: var(--theme-background-color);
|
||||
border: 1px solid var(--theme-header-menu-color);
|
||||
|
||||
.suggest-list {
|
||||
list-style: none;
|
||||
padding: 6px 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
li {
|
||||
font-size: var(--base-font-size);
|
||||
padding: 0 20px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
color: var(--theme-regular-color);
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.highlighted {
|
||||
background-color: var(--theme-selected-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -317,37 +352,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.suggest-list {
|
||||
list-style: none;
|
||||
padding: 6px 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
li {
|
||||
font-size: var(--base-font-size);
|
||||
padding: 0 20px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
color: var(--theme-regular-color);
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.highlighted {
|
||||
background-color: var(--theme-selected-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-selector {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
<template>
|
||||
<el-dialog :title="$t('modals.report.title')" :model-value="reportModal" width="400px" custom-class="report">
|
||||
<el-input type="textarea" v-model="comment" :placeholder="$t('modals.report.comment')"></el-input>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeModal">{{ $t('modals.report.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="submit">{{ $t('modals.report.ok') }}</el-button>
|
||||
</span>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="closeModal">{{ $t('modals.report.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="submit">{{ $t('modals.report.ok') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,82 +1,84 @@
|
|||
<template>
|
||||
<el-dialog :title="$t('modals.shortcut.title')" :model-value="shortcutModal" width="500px" class="shortcut-modal">
|
||||
<table class="shortcuts">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><kbd>Ctrl(Cmd) + 1, 2, 3...</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.ctrl_number') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Ctrl(Cmd) + k</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.ctrl_k') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Ctrl(Cmd) + n</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.ctrl_n') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Ctrl(Cmd) + Enter</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.ctrl_enter') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Ctrl(Cmd) + r</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.ctrl_r') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>j</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.j') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>k</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.k') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>h</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.h') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>l</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.l') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>r</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.r') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>b</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.b') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>f</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.f') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>o</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.o') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>p</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.p') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>i</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.i') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>x</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.x') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>?</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.?') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>esc</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.esc') }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</el-dialog>
|
||||
<div class="shortcut">
|
||||
<el-dialog :title="$t('modals.shortcut.title')" :model-value="shortcutModal" width="500px" class="shortcut-modal">
|
||||
<table class="shortcuts">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><kbd>Ctrl(Cmd) + 1, 2, 3...</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.ctrl_number') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Ctrl(Cmd) + k</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.ctrl_k') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Ctrl(Cmd) + n</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.ctrl_n') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Ctrl(Cmd) + Enter</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.ctrl_enter') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Ctrl(Cmd) + r</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.ctrl_r') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>j</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.j') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>k</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.k') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>h</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.h') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>l</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.l') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>r</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.r') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>b</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.b') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>f</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.f') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>o</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.o') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>p</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.p') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>i</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.i') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>x</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.x') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>?</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.?') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>esc</kbd></td>
|
||||
<td>{{ $t('modals.shortcut.esc') }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -96,7 +98,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.shortcut-modal /deep/ {
|
||||
.shortcut :deep() {
|
||||
.el-dialog__header {
|
||||
background-color: #4a5664;
|
||||
|
||||
|
|
@ -104,7 +106,9 @@ export default {
|
|||
color: #ebeef5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shortcut-modal {
|
||||
.shortcuts {
|
||||
text-align: left;
|
||||
border-collapse: collapse;
|
||||
|
|
|
|||
|
|
@ -468,28 +468,22 @@ export default {
|
|||
this.$store.dispatch('TimelineSpace/Contents/SideBar/openTootComponent')
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/TootDetail/changeToot', message)
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
|
||||
this.$refs.status_menu_popper.doClose()
|
||||
},
|
||||
openBrowser(message) {
|
||||
window.shell.openExternal(message.url)
|
||||
this.$refs.status_menu_popper.doClose()
|
||||
},
|
||||
copyLink(message) {
|
||||
window.clipboard.writeText(message.url, 'toot-link')
|
||||
this.$refs.status_menu_popper.doClose()
|
||||
},
|
||||
reportUser() {
|
||||
this.$store.dispatch('TimelineSpace/Modals/Report/openReport', this.originalMessage)
|
||||
this.$refs.status_menu_popper.doClose()
|
||||
},
|
||||
confirmMute() {
|
||||
this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeAccount', this.originalMessage.account)
|
||||
this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeModal', true)
|
||||
this.$refs.status_menu_popper.doClose()
|
||||
},
|
||||
block() {
|
||||
this.$store.dispatch('organisms/Toot/block', this.originalMessage.account)
|
||||
this.$refs.status_menu_popper.doClose()
|
||||
},
|
||||
changeReblog(message) {
|
||||
if (message.reblogged) {
|
||||
|
|
@ -676,7 +670,6 @@ export default {
|
|||
native: emoji.native
|
||||
})
|
||||
this.$emit('update', status)
|
||||
this.$refs.status_emoji_picker.doClose()
|
||||
},
|
||||
async addReaction(native) {
|
||||
const status = await this.$store.dispatch('organisms/Toot/sendReaction', {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ import { library } from '@fortawesome/fontawesome-svg-core'
|
|||
import {
|
||||
faAngleDown,
|
||||
faAngleUp,
|
||||
faAngleRight,
|
||||
faAngleLeft,
|
||||
faAnglesRight,
|
||||
faAnglesLeft,
|
||||
faHome,
|
||||
|
|
@ -82,6 +84,8 @@ import i18next from '~/src/config/i18n'
|
|||
library.add(
|
||||
faAngleDown,
|
||||
faAngleUp,
|
||||
faAngleRight,
|
||||
faAngleLeft,
|
||||
faAnglesRight,
|
||||
faAnglesLeft,
|
||||
faHome,
|
||||
|
|
|
|||
Loading…
Reference in New Issue