Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix design modals

This commit is contained in:
AkiraFukushima 2022-04-25 18:20:18 +09:00
parent b656832290
commit b1b3fd78f9
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
10 changed files with 505 additions and 502 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
View File

@ -22,17 +22,17 @@
@click="unsubscribe(account)" @click="unsubscribe(account)"
:title="$t('side_bar.account_profile.unsubscribe')" :title="$t('side_bar.account_profile.unsubscribe')"
> >
<font-awesome-icon icon="bell" size="xl" /> <font-awesome-icon icon="bell" size="lg" />
</div> </div>
<div v-else class="subscribe" @click="subscribe(account)" :title="$t('side_bar.account_profile.subscribe')"> <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>
</div> </div>
<div class="user-info"> <div class="user-info">
<div class="more" v-if="relationship !== null && relationship !== '' && !isOwnProfile"> <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"> <ul class="menu-list">
<li role="button" @click="openBrowser(account)"> <li role="button" @click="openBrowser(account)">
{{ $t('side_bar.account_profile.open_in_browser') }} {{ $t('side_bar.account_profile.open_in_browser') }}
@ -229,29 +229,23 @@ export default {
}, },
openBrowser(account) { openBrowser(account) {
window.shell.openExternal(account.url) window.shell.openExternal(account.url)
this.$refs.popper.doClose()
}, },
addToList(account) { addToList(account) {
this.$store.dispatch('TimelineSpace/Modals/ListMembership/setAccount', account) this.$store.dispatch('TimelineSpace/Modals/ListMembership/setAccount', account)
this.$store.dispatch('TimelineSpace/Modals/ListMembership/changeModal', true) this.$store.dispatch('TimelineSpace/Modals/ListMembership/changeModal', true)
this.$refs.popper.doClose()
}, },
confirmMute(account) { confirmMute(account) {
this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeAccount', account) this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeAccount', account)
this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeModal', true) this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeModal', true)
this.$refs.popper.doClose()
}, },
unmute(account) { unmute(account) {
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/unmute', account) this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/unmute', account)
this.$refs.popper.doClose()
}, },
block(account) { block(account) {
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/block', account) this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/block', account)
this.$refs.popper.doClose()
}, },
unblock(account) { unblock(account) {
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/unblock', account) this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/unblock', account)
this.$refs.popper.doClose()
}, },
metadataClick(e) { metadataClick(e) {
const link = findLink(e.target, 'metadata') 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 { .icon {
padding: 12px; padding: 12px;
@ -517,3 +483,31 @@ export default {
} }
} }
</style> </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>

61
src/renderer/components/TimelineSpace/Modals/AddListMember.vue
View File

@ -1,34 +1,36 @@
<template> <template>
<el-dialog :title="$t('modals.add_list_member.title')" :model-value="addListMemberModal" width="400px" class="add-member"> <div class="add-member">
<div class="search-account" :element-loading-background="loadingBackground"> <el-dialog :title="$t('modals.add_list_member.title')" :model-value="addListMemberModal" width="400px" custom-class="add-member-modal">
<el-form :inline="true"> <div class="search-account" :element-loading-background="loadingBackground">
<input v-model="name" placeholder="Account name" class="account-name" autofocus /> <el-form :inline="true">
<el-button type="text" class="search" @click="search"> <input v-model="name" placeholder="Account name" class="account-name" autofocus />
<font-awesome-icon icon="magnifying-glass" /> <el-button type="text" class="search" @click="search">
</el-button> <font-awesome-icon icon="magnifying-glass" />
</el-form> </el-button>
<div class="search-results"> </el-form>
<template v-for="user in accounts"> <div class="search-results">
<div class="user"> <template v-for="user in accounts">
<div class="icon"> <div class="user">
<img :src="user.avatar" /> <div class="icon">
</div> <img :src="user.avatar" />
<div class="name"> </div>
<div class="username"> <div class="name">
{{ username(user) }} <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>
<div class="acct">@{{ user.acct }}</div>
</div> </div>
<div class="add"> </template>
<el-button type="text" @click="add(user)"> </div>
<font-awesome-icon icon="plus" />
</el-button>
</div>
</div>
</template>
</div> </div>
</div> </el-dialog>
</el-dialog> </div>
</template> </template>
<script> <script>
@ -86,9 +88,10 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.add-member /deep/ { .add-member :deep() {
.el-dialog__header { .el-dialog__header {
background-color: var(--theme-header-menu-color); background-color: var(--theme-header-menu-color);
margin-right: 0;
.el-dialog__title { .el-dialog__title {
color: var(--theme-secondary-color); color: var(--theme-secondary-color);
@ -100,7 +103,9 @@ export default {
color: var(--theme-secondary-color); color: var(--theme-secondary-color);
padding: 8px 12px 30px; padding: 8px 12px 30px;
} }
}
.add-member-modal {
.search-account { .search-account {
background-color: var(--theme-selected-background-color); background-color: var(--theme-selected-background-color);

14
src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<transition name="image-viewer"> <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-wrapper">
<div class="image-header"> <div class="image-header">
<el-button type="text" @click="close" class="close-button"> <el-button type="text" @click="close" class="close-button">
@ -9,11 +9,11 @@
</div> </div>
<div class="image-content" role="presentation"> <div class="image-content" role="presentation">
<span class="button-area" <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> ></span>
<Media :src="imageURL" :type="imageType"></Media> <Media :src="imageURL" :type="imageType"></Media>
<span class="button-area" <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> ></span>
</div> </div>
</div> </div>
@ -107,11 +107,13 @@ export default {
.image-viewer-leave-to { .image-viewer-leave-to {
opacity: 0; opacity: 0;
} }
.button-area { .button-area {
display: inline-block; display: inline-block;
width: 52px; width: 27px;
height: 77px; margin: 0 12px;
i {
svg {
font-size: 50px; font-size: 50px;
} }
} }

565
src/renderer/components/TimelineSpace/Modals/NewToot.vue
View File

@ -1,145 +1,147 @@
<template> <template>
<el-dialog <div class="new-toot">
:title="$t('modals.new_toot.title')" <el-dialog
:model-value="newTootModal" :title="$t('modals.new_toot.title')"
v-if="newTootModal" :model-value="newTootModal"
:before-close="closeConfirm" @update:model-value="newTootModal = $event"
width="600px" :before-close="closeConfirm"
class="new-toot-modal" width="600px"
ref="dialog" 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> <el-form v-on:submit.prevent="toot" role="form">
<div class="spoiler" v-if="showContentWarning" ref="spoiler"> <Quote :message="quoteToMessage" :displayNameStyle="displayNameStyle" v-if="quoteToMessage !== null" ref="quote"></Quote>
<div class="el-input"> <div class="spoiler" v-if="showContentWarning" ref="spoiler">
<input type="text" class="el-input__inner" :placeholder="$t('modals.new_toot.cw')" v-model="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>
</div> </div>
<Status <template #footer>
v-model="status" <div class="dialog-footer">
:opened="newTootModal" <div class="upload-image">
:fixCursorPos="hashtagInserting" <el-button size="default" type="text" @click="selectImage" :title="$t('modals.new_toot.footer.add_image')">
:height="statusHeight" <font-awesome-icon icon="camera" />
@paste="onPaste" </el-button>
@toot="toot" <input name="image" type="file" class="image-input" ref="image" @change="onChangeImage" :key="attachedMediaId" />
@pickerOpened="innerElementOpened" </div>
@suggestOpened="innerElementOpened" <div class="poll">
/> <el-button size="default" type="text" @click="togglePollForm" :title="$t('modals.new_toot.footer.poll')">
</el-form> <font-awesome-icon icon="square-poll-horizontal" />
<Poll </el-button>
v-if="openPoll" </div>
v-model="polls" <div class="privacy">
@addPoll="addPoll" <el-dropdown trigger="click" @command="changeVisibility">
@removePoll="removePoll" <el-button size="default" type="text" :title="$t('modals.new_toot.footer.change_visibility')">
:defaultExpire="pollExpire" <font-awesome-icon :icon="visibilityIcon" />
@changeExpire="changeExpire" </el-button>
ref="poll" <template #dropdown>
></Poll> <el-dropdown-menu>
<div class="preview" ref="preview"> <el-dropdown-item :command="visibilityList.Public.value">
<div class="image-wrapper" v-for="media in attachedMedias" v-bind:key="media.id"> <font-awesome-icon icon="globe" class="privacy-icon" />
<img :src="media.preview_url" class="preview-image" /> {{ $t(visibilityList.Public.name) }}
<el-button type="text" @click="removeAttachment(media)" class="remove-image"><font-awesome-icon icon="circle-xmark" /></el-button> </el-dropdown-item>
<textarea <el-dropdown-item :command="visibilityList.Unlisted.value">
maxlength="420" <font-awesome-icon icon="unlock" class="privacy-icon" />
class="image-description" {{ $t(visibilityList.Unlisted.name) }}
:placeholder="$t('modals.new_toot.description')" </el-dropdown-item>
:value="mediaDescriptions[media.id]" <el-dropdown-item :command="visibilityList.Private.value">
@input="updateDescription(media.id, $event.target.value)" <font-awesome-icon icon="lock" class="privacy-icon" />
role="textbox" {{ $t(visibilityList.Private.name) }}
contenteditable="true" </el-dropdown-item>
aria-multiline="true" <el-dropdown-item :command="visibilityList.Direct.value">
> <font-awesome-icon icon="envelope" class="privacy-icon" size="sm" />
</textarea> {{ $t(visibilityList.Direct.name) }}
</div> </el-dropdown-item>
</div> </el-dropdown-menu>
<div slot="footer" class="dialog-footer"> </template>
<div class="upload-image"> </el-dropdown>
<el-button size="default" type="text" @click="selectImage" :title="$t('modals.new_toot.footer.add_image')"> </div>
<font-awesome-icon icon="camera" /> <div class="sensitive" v-show="attachedMedias.length > 0">
</el-button> <el-button
<input name="image" type="file" class="image-input" ref="image" @change="onChangeImage" :key="attachedMediaId" /> size="default"
</div> type="text"
<div class="poll"> @click="changeSensitive"
<el-button size="default" type="text" @click="togglePollForm" :title="$t('modals.new_toot.footer.poll')"> :title="$t('modals.new_toot.footer.change_sensitive')"
<font-awesome-icon icon="square-poll-horizontal" /> :aria-pressed="sensitive"
</el-button> >
</div> <font-awesome-icon icon="eye-slash" v-show="!sensitive" />
<div class="privacy"> <font-awesome-icon icon="eye" v-show="sensitive" />
<el-dropdown trigger="click" @command="changeVisibility"> </el-button>
<el-button size="default" type="text" :title="$t('modals.new_toot.footer.change_visibility')"> </div>
<font-awesome-icon :icon="visibilityIcon" /> <div class="content-warning">
</el-button> <el-button
<template #dropdown> size="default"
<el-dropdown-menu> type="text"
<el-dropdown-item :command="visibilityList.Public.value"> @click="toggleContentWarning()"
<font-awesome-icon icon="globe" class="privacy-icon" /> :title="$t('modals.new_toot.footer.add_cw')"
{{ $t(visibilityList.Public.name) }} :class="showContentWarning ? '' : 'clickable'"
</el-dropdown-item> :aria-pressed="showContentWarning"
<el-dropdown-item :command="visibilityList.Unlisted.value"> >
<font-awesome-icon icon="unlock" class="privacy-icon" /> <font-awesome-icon icon="eye-slash" />
{{ $t(visibilityList.Unlisted.name) }} </el-button>
</el-dropdown-item> </div>
<el-dropdown-item :command="visibilityList.Private.value"> <div class="pined-hashtag">
<font-awesome-icon icon="lock" class="privacy-icon" /> <el-button
{{ $t(visibilityList.Private.name) }} size="default"
</el-dropdown-item> type="text"
<el-dropdown-item :command="visibilityList.Direct.value"> @click="pinedHashtag = !pinedHashtag"
<font-awesome-icon icon="envelope" class="privacy-icon" size="sm" /> :title="$t('modals.new_toot.footer.pined_hashtag')"
{{ $t(visibilityList.Direct.name) }} :class="pinedHashtag ? '' : 'clickable'"
</el-dropdown-item> :aria-pressed="pinedHashtag"
</el-dropdown-menu> >
</template> <font-awesome-icon icon="hashtag" />
</el-dropdown> </el-button>
</div> </div>
<div class="sensitive" v-show="attachedMedias.length > 0"> <div class="info">
<el-button <img src="../../../assets/images/loading-spinner-wide.svg" v-show="loading" class="loading" />
size="default" <span class="text-count">{{ tootMax - status.length }}</span>
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" @click="closeConfirm(close)">{{ $t('modals.new_toot.cancel') }}</el-button>
<el-button class="toot-action" size="small" type="primary" @click="toot" :loading="blockSubmit">{{ <el-button class="toot-action" type="primary" @click="toot" :loading="blockSubmit">{{ $t('modals.new_toot.toot') }}</el-button>
$t('modals.new_toot.toot') </div>
}}</el-button> <div class="clearfix"></div>
</div> </div>
<div class="clearfix"></div> </template>
</div> <resize-observer @notify="handleResize" />
<resize-observer @notify="handleResize" /> </el-dialog>
</el-dialog> </div>
</template> </template>
<script> <script>
@ -462,189 +464,190 @@ export default {
event.height - footerHeight - headerHeight - this.$refs.preview.offsetHeight - pollHeight - spoilerHeight - quoteHeight event.height - footerHeight - headerHeight - this.$refs.preview.offsetHeight - pollHeight - spoilerHeight - quoteHeight
} }
}, },
innerElementOpened(open) { innerElementOpened() {
if (open) { // if (open) {
this.$refs.dialog.$el.firstChild.style.overflow = 'visible' // this.$refs.dialog.$el.firstChild.style.overflow = 'visible'
} else { // } else {
this.$refs.dialog.$el.firstChild.style.overflow = 'hidden' // this.$refs.dialog.$el.firstChild.style.overflow = 'hidden'
} // }
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.new-toot-modal /deep/ { .new-toot :deep() {
.el-dialog { .new-toot-modal {
background-color: var(--theme-selected-background-color); background-color: var(--theme-selected-background-color);
overflow: hidden; overflow: hidden;
resize: both; resize: both;
padding-bottom: 20px; padding-bottom: 20px;
max-height: calc(100% - 15vh - 80px); max-height: calc(100% - 15vh - 80px);
max-width: 95%; max-width: 95%;
}
.el-dialog__header { .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;
background-color: #4a5664; background-color: #4a5664;
margin-right: 0;
input { .el-dialog__title {
border-radius: 0; color: #ebeef5;
&::placeholder {
color: #c0c4cc;
}
} }
} }
.preview { .el-dialog__body {
box-sizing: border-box; padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
.image-wrapper { .el-input__inner {
position: relative; background-color: var(--theme-background-color);
flex: 1 1 0; color: var(--theme-primary-color);
min-width: 10%; border: 1px solid var(--theme-border-color);
height: 150px; }
margin: 4px;
.preview-image { .spoiler {
width: 100%; box-sizing: border-box;
height: 100%; padding: 4px 0;
object-fit: cover; background-color: #4a5664;
border: 0;
border-radius: 8px;
}
.image-description { input {
position: absolute; border-radius: 0;
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 { &::placeholder {
color: #c0c4cc; color: #c0c4cc;
} }
} }
}
.remove-image { .preview {
position: absolute; box-sizing: border-box;
top: 2px; display: flex;
left: 2px; flex-direction: row;
padding: 0; flex-wrap: wrap;
cursor: pointer;
font-size: 1.5rem;
.fa-icon { .image-wrapper {
font-size: 0.9rem; position: relative;
width: auto; flex: 1 1 0;
height: 1em; min-width: 10%;
max-width: 100%; height: 150px;
max-height: 100%; 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 { .el-dialog__footer {
background-color: var(--theme-selected-background-color); background-color: var(--theme-selected-background-color);
font-size: var(--base-font-size); font-size: var(--base-font-size);
padding-bottom: 0; padding-bottom: 0;
.upload-image { .upload-image {
text-align: left; text-align: left;
float: left; float: left;
.image-input { .image-input {
display: none; 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;
} }
.text-count { .poll {
padding-right: 10px; 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; color: #909399;
} }
}
.toot-action { .info {
font-size: var(--base-font-size); display: flex;
margin-top: 2px; justify-content: flex-end;
margin-bottom: 2px; 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;
}
} }
} }
} }

46
src/renderer/components/TimelineSpace/Modals/NewToot/Quote.vue
View File

@ -6,22 +6,14 @@
<div class="detail"> <div class="detail">
<div class="toot-header"> <div class="toot-header">
<div class="user"> <div class="user">
<span class="display-name" <span class="display-name"><bdi v-html="username(message.account)"></bdi></span>
><bdi v-html="username(message.account)"></bdi
></span>
<span class="acct">{{ accountName(message.account) }}</span> <span class="acct">{{ accountName(message.account) }}</span>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="content-wrapper"> <div class="content-wrapper">
<div <div class="spoiler" v-html="emojiText(message.spoiler_text, message.emojis)"></div>
class="spoiler" <div class="content" v-html="emojiText(message.content, message.emojis)"></div>
v-html="emojiText(message.spoiler_text, message.emojis)"
></div>
<div
class="content"
v-html="emojiText(message.content, message.emojis)"
></div>
</div> </div>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
@ -36,17 +28,17 @@ import emojify from '@/utils/emojify'
export default { export default {
new: 'quote-target', new: 'quote-target',
components: { components: {
FailoverImg, FailoverImg
}, },
props: { props: {
message: { message: {
type: Object, type: Object,
default: {}, default: {}
}, },
displayNameStyle: { displayNameStyle: {
type: Number, type: Number,
default: 0, default: 0
}, }
}, },
methods: { methods: {
username(account) { username(account) {
@ -78,8 +70,8 @@ export default {
}, },
emojiText(content, emojis) { emojiText(content, emojis) {
return emojify(content, emojis) return emojify(content, emojis)
}, }
}, }
} }
</script> </script>
@ -104,7 +96,7 @@ export default {
float: left; float: left;
width: calc(100% - 52px); width: calc(100% - 52px);
.content-wrapper /deep/ { .content-wrapper {
font-size: var(--base-font-size); font-size: var(--base-font-size);
color: var(--theme-primary-color); color: var(--theme-primary-color);
@ -127,11 +119,11 @@ export default {
.content p { .content p {
unicode-bidi: plaintext; unicode-bidi: plaintext;
} }
}
.emojione { .content-wrapper :deep(.emojione) {
width: 20px; width: 20px;
height: 20px; height: 20px;
}
} }
.toot-header { .toot-header {
@ -143,14 +135,14 @@ export default {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
.display-name /deep/ { .display-name {
font-weight: 800; font-weight: 800;
color: var(--theme-primary-color); color: var(--theme-primary-color);
}
.emojione { .display-name :deep(.emojione) {
max-width: 14px; max-width: 14px;
max-height: 14px; max-height: 14px;
}
} }
.acct { .acct {

70
src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue
View File

@ -13,7 +13,7 @@
autofocus autofocus
> >
</textarea> </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"> <ul class="suggest-list">
<li <li
v-for="(item, index) in filteredSuggestion" v-for="(item, index) in filteredSuggestion"
@ -31,9 +31,13 @@
{{ item.name }} {{ item.name }}
</li> </li>
</ul> </ul>
<!-- dummy object to open suggest popper -->
<template #reference>
<span></span>
</template>
</el-popover> </el-popover>
<div> <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 <picker
:data="emojiIndex" :data="emojiIndex"
set="twitter" set="twitter"
@ -280,6 +284,37 @@ export default {
.suggest-popper { .suggest-popper {
background-color: var(--theme-background-color); background-color: var(--theme-background-color);
border: 1px solid var(--theme-header-menu-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> </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 { .emoji-selector {
position: absolute; position: absolute;
top: 4px; top: 4px;

10
src/renderer/components/TimelineSpace/Modals/Report.vue
View File

@ -1,10 +1,12 @@
<template> <template>
<el-dialog :title="$t('modals.report.title')" :model-value="reportModal" width="400px" custom-class="report"> <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> <el-input type="textarea" v-model="comment" :placeholder="$t('modals.report.comment')"></el-input>
<span slot="footer" class="dialog-footer"> <template #footer>
<el-button @click="closeModal">{{ $t('modals.report.cancel') }}</el-button> <span class="dialog-footer">
<el-button type="primary" @click="submit">{{ $t('modals.report.ok') }}</el-button> <el-button @click="closeModal">{{ $t('modals.report.cancel') }}</el-button>
</span> <el-button type="primary" @click="submit">{{ $t('modals.report.ok') }}</el-button>
</span>
</template>
</el-dialog> </el-dialog>
</template> </template>

162
src/renderer/components/TimelineSpace/Modals/Shortcut.vue
View File

@ -1,82 +1,84 @@
<template> <template>
<el-dialog :title="$t('modals.shortcut.title')" :model-value="shortcutModal" width="500px" class="shortcut-modal"> <div class="shortcut">
<table class="shortcuts"> <el-dialog :title="$t('modals.shortcut.title')" :model-value="shortcutModal" width="500px" class="shortcut-modal">
<tbody> <table class="shortcuts">
<tr> <tbody>
<td><kbd>Ctrl(Cmd) + 1, 2, 3...</kbd></td> <tr>
<td>{{ $t('modals.shortcut.ctrl_number') }}</td> <td><kbd>Ctrl(Cmd) + 1, 2, 3...</kbd></td>
</tr> <td>{{ $t('modals.shortcut.ctrl_number') }}</td>
<tr> </tr>
<td><kbd>Ctrl(Cmd) + k</kbd></td> <tr>
<td>{{ $t('modals.shortcut.ctrl_k') }}</td> <td><kbd>Ctrl(Cmd) + k</kbd></td>
</tr> <td>{{ $t('modals.shortcut.ctrl_k') }}</td>
<tr> </tr>
<td><kbd>Ctrl(Cmd) + n</kbd></td> <tr>
<td>{{ $t('modals.shortcut.ctrl_n') }}</td> <td><kbd>Ctrl(Cmd) + n</kbd></td>
</tr> <td>{{ $t('modals.shortcut.ctrl_n') }}</td>
<tr> </tr>
<td><kbd>Ctrl(Cmd) + Enter</kbd></td> <tr>
<td>{{ $t('modals.shortcut.ctrl_enter') }}</td> <td><kbd>Ctrl(Cmd) + Enter</kbd></td>
</tr> <td>{{ $t('modals.shortcut.ctrl_enter') }}</td>
<tr> </tr>
<td><kbd>Ctrl(Cmd) + r</kbd></td> <tr>
<td>{{ $t('modals.shortcut.ctrl_r') }}</td> <td><kbd>Ctrl(Cmd) + r</kbd></td>
</tr> <td>{{ $t('modals.shortcut.ctrl_r') }}</td>
<tr> </tr>
<td><kbd>j</kbd></td> <tr>
<td>{{ $t('modals.shortcut.j') }}</td> <td><kbd>j</kbd></td>
</tr> <td>{{ $t('modals.shortcut.j') }}</td>
<tr> </tr>
<td><kbd>k</kbd></td> <tr>
<td>{{ $t('modals.shortcut.k') }}</td> <td><kbd>k</kbd></td>
</tr> <td>{{ $t('modals.shortcut.k') }}</td>
<tr> </tr>
<td><kbd>h</kbd></td> <tr>
<td>{{ $t('modals.shortcut.h') }}</td> <td><kbd>h</kbd></td>
</tr> <td>{{ $t('modals.shortcut.h') }}</td>
<tr> </tr>
<td><kbd>l</kbd></td> <tr>
<td>{{ $t('modals.shortcut.l') }}</td> <td><kbd>l</kbd></td>
</tr> <td>{{ $t('modals.shortcut.l') }}</td>
<tr> </tr>
<td><kbd>r</kbd></td> <tr>
<td>{{ $t('modals.shortcut.r') }}</td> <td><kbd>r</kbd></td>
</tr> <td>{{ $t('modals.shortcut.r') }}</td>
<tr> </tr>
<td><kbd>b</kbd></td> <tr>
<td>{{ $t('modals.shortcut.b') }}</td> <td><kbd>b</kbd></td>
</tr> <td>{{ $t('modals.shortcut.b') }}</td>
<tr> </tr>
<td><kbd>f</kbd></td> <tr>
<td>{{ $t('modals.shortcut.f') }}</td> <td><kbd>f</kbd></td>
</tr> <td>{{ $t('modals.shortcut.f') }}</td>
<tr> </tr>
<td><kbd>o</kbd></td> <tr>
<td>{{ $t('modals.shortcut.o') }}</td> <td><kbd>o</kbd></td>
</tr> <td>{{ $t('modals.shortcut.o') }}</td>
<tr> </tr>
<td><kbd>p</kbd></td> <tr>
<td>{{ $t('modals.shortcut.p') }}</td> <td><kbd>p</kbd></td>
</tr> <td>{{ $t('modals.shortcut.p') }}</td>
<tr> </tr>
<td><kbd>i</kbd></td> <tr>
<td>{{ $t('modals.shortcut.i') }}</td> <td><kbd>i</kbd></td>
</tr> <td>{{ $t('modals.shortcut.i') }}</td>
<tr> </tr>
<td><kbd>x</kbd></td> <tr>
<td>{{ $t('modals.shortcut.x') }}</td> <td><kbd>x</kbd></td>
</tr> <td>{{ $t('modals.shortcut.x') }}</td>
<tr> </tr>
<td><kbd>?</kbd></td> <tr>
<td>{{ $t('modals.shortcut.?') }}</td> <td><kbd>?</kbd></td>
</tr> <td>{{ $t('modals.shortcut.?') }}</td>
<tr> </tr>
<td><kbd>esc</kbd></td> <tr>
<td>{{ $t('modals.shortcut.esc') }}</td> <td><kbd>esc</kbd></td>
</tr> <td>{{ $t('modals.shortcut.esc') }}</td>
</tbody> </tr>
</table> </tbody>
</el-dialog> </table>
</el-dialog>
</div>
</template> </template>
<script> <script>
@ -96,7 +98,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.shortcut-modal /deep/ { .shortcut :deep() {
.el-dialog__header { .el-dialog__header {
background-color: #4a5664; background-color: #4a5664;
@ -104,7 +106,9 @@ export default {
color: #ebeef5; color: #ebeef5;
} }
} }
}
.shortcut-modal {
.shortcuts { .shortcuts {
text-align: left; text-align: left;
border-collapse: collapse; border-collapse: collapse;

7
src/renderer/components/organisms/Toot.vue
View File

@ -468,28 +468,22 @@ export default {
this.$store.dispatch('TimelineSpace/Contents/SideBar/openTootComponent') this.$store.dispatch('TimelineSpace/Contents/SideBar/openTootComponent')
this.$store.dispatch('TimelineSpace/Contents/SideBar/TootDetail/changeToot', message) this.$store.dispatch('TimelineSpace/Contents/SideBar/TootDetail/changeToot', message)
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true) this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
this.$refs.status_menu_popper.doClose()
}, },
openBrowser(message) { openBrowser(message) {
window.shell.openExternal(message.url) window.shell.openExternal(message.url)
this.$refs.status_menu_popper.doClose()
}, },
copyLink(message) { copyLink(message) {
window.clipboard.writeText(message.url, 'toot-link') window.clipboard.writeText(message.url, 'toot-link')
this.$refs.status_menu_popper.doClose()
}, },
reportUser() { reportUser() {
this.$store.dispatch('TimelineSpace/Modals/Report/openReport', this.originalMessage) this.$store.dispatch('TimelineSpace/Modals/Report/openReport', this.originalMessage)
this.$refs.status_menu_popper.doClose()
}, },
confirmMute() { confirmMute() {
this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeAccount', this.originalMessage.account) this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeAccount', this.originalMessage.account)
this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeModal', true) this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeModal', true)
this.$refs.status_menu_popper.doClose()
}, },
block() { block() {
this.$store.dispatch('organisms/Toot/block', this.originalMessage.account) this.$store.dispatch('organisms/Toot/block', this.originalMessage.account)
this.$refs.status_menu_popper.doClose()
}, },
changeReblog(message) { changeReblog(message) {
if (message.reblogged) { if (message.reblogged) {
@ -676,7 +670,6 @@ export default {
native: emoji.native native: emoji.native
}) })
this.$emit('update', status) this.$emit('update', status)
this.$refs.status_emoji_picker.doClose()
}, },
async addReaction(native) { async addReaction(native) {
const status = await this.$store.dispatch('organisms/Toot/sendReaction', { const status = await this.$store.dispatch('organisms/Toot/sendReaction', {

4
src/renderer/main.js
View File

@ -8,6 +8,8 @@ import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
faAngleDown, faAngleDown,
faAngleUp, faAngleUp,
faAngleRight,
faAngleLeft,
faAnglesRight, faAnglesRight,
faAnglesLeft, faAnglesLeft,
faHome, faHome,
@ -82,6 +84,8 @@ import i18next from '~/src/config/i18n'
library.add( library.add(
faAngleDown, faAngleDown,
faAngleUp, faAngleUp,
faAngleRight,
faAngleLeft,
faAnglesRight, faAnglesRight,
faAnglesLeft, faAnglesLeft,
faHome, faHome,