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)"
: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>

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

@ -1,5 +1,6 @@
<template>
<el-dialog :title="$t('modals.add_list_member.title')" :model-value="addListMemberModal" width="400px" class="add-member">
<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 />
@ -29,6 +30,7 @@
</div>
</div>
</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);

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

@ -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;
}
}

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

@ -1,11 +1,12 @@
<template>
<div class="new-toot">
<el-dialog
:title="$t('modals.new_toot.title')"
:model-value="newTootModal"
v-if="newTootModal"
@update:model-value="newTootModal = $event"
:before-close="closeConfirm"
width="600px"
class="new-toot-modal"
custom-class="new-toot-modal"
ref="dialog"
>
<el-form v-on:submit.prevent="toot" role="form">
@ -52,7 +53,8 @@
</textarea>
</div>
</div>
<div slot="footer" class="dialog-footer">
<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" />
@ -131,15 +133,15 @@
<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>
<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,30 +464,30 @@ 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;
margin-right: 0;
.el-dialog__title {
color: #ebeef5;
@ -648,6 +650,7 @@ export default {
}
}
}
}
.privacy-icon {
margin-right: 4px;

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

@ -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,12 +119,12 @@ export default {
.content p {
unicode-bidi: plaintext;
}
}
.emojione {
.content-wrapper :deep(.emojione) {
width: 20px;
height: 20px;
}
}
.toot-header {
.user {
@ -143,15 +135,15 @@ export default {
overflow: hidden;
text-overflow: ellipsis;
.display-name /deep/ {
.display-name {
font-weight: 800;
color: var(--theme-primary-color);
}
.emojione {
.display-name :deep(.emojione) {
max-width: 14px;
max-height: 14px;
}
}
.acct {
font-weight: normal;

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

@ -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;

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

@ -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">
<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>

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

@ -1,4 +1,5 @@
<template>
<div class="shortcut">
<el-dialog :title="$t('modals.shortcut.title')" :model-value="shortcutModal" width="500px" class="shortcut-modal">
<table class="shortcuts">
<tbody>
@ -77,6 +78,7 @@
</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;

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/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', {

4
src/renderer/main.js
View File

@ -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,