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

Merge pull request #785 from amyspark/make-ui-accessible 

Make UI a bit more accessible
This commit is contained in:
AkiraFukushima 2018-12-12 18:54:11 +09:00 committed by GitHub
parent e10b32ffee 40d34a74a7
commit bd64b10ad6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 294 additions and 332 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/renderer/components/Preferences.vue
View File

@ -3,10 +3,10 @@
<el-header class="header">
<el-row>
<el-col :span="23">
<h3>{{ $t('preferences.title') }}</h3>
<h1>{{ $t('preferences.title') }}</h1>
</el-col>
<el-col :span="1">
<el-button type="text" icon="el-icon-close" @click="close" class="close-button"></el-button>
<el-button type="text" icon="el-icon-close" @click="close" class="close-button" role="button"></el-button>
</el-col>
</el-row>
</el-header>
@ -77,9 +77,10 @@ export default {
.header {
text-align: center;
border-bottom: 1px solid var(--theme-border-color);
user-select: none;
.close-button {
font-size: 24px;
font-size: 28px;
}
}
@ -88,31 +89,16 @@ export default {
padding-left: 24px;
.el-menu {
background-color: var(--theme-background-color);
border-right: solid 1px var(--theme-border-color);
}
.setting-menu /deep/ {
height: 100%;
user-select: none;
.icon {
margin-right: 9px;
}
.el-menu-item {
transition: none;
-webkit-transition: none;
.icon {
color: var(--theme-secondary-color);
}
}
.is-active {
.icon {
color: #409eff;
}
}
}
}
}

93
src/renderer/components/Preferences/Account.vue
View File

@ -1,9 +1,9 @@
<template>
<div id="account">
<h2>{{ $t('preferences.account.title') }}</h2>
<div class="connected-account">
<el-form class="connected-account section" size="small">
<h3>{{ $t('preferences.account.connected') }}</h3>
<template>
<el-form-item>
<el-table
:data="accounts"
tooltip-effect="dark"
@ -23,7 +23,8 @@
<template slot-scope="scope">
<el-button
@click.native.prevent="removeAccount(scope.$index, accounts)"
type="text">
type="text"
class="action">
<i class="el-icon-close"></i> {{ $t('preferences.account.remove_association') }}
</el-button>
</template>
@ -32,30 +33,30 @@
:label="$t('preferences.account.order')"
width="60">
<template slot-scope="scope">
<div>
<el-button class="arrow-up" type="text" icon="el-icon-arrow-up" @click.native.prevent="forward(scope.$index, accounts)"></el-button>
<div class="allow-up">
<el-button class="arrow-up action" type="text" icon="el-icon-arrow-up" @click.native.prevent="forward(scope.$index, accounts)"></el-button>
</div>
<div>
<el-button class="arrow-down" type="text" icon="el-icon-arrow-down" @click.native.prevent="backward(scope.$index, accounts)"></el-button>
<div class="allow-down">
<el-button class="arrow-down action" type="text" icon="el-icon-arrow-down" @click.native.prevent="backward(scope.$index, accounts)"></el-button>
</div>
</template>
</el-table-column>
</el-table>
</template>
</div>
<div class="reset">
<el-popover
placement="top"
width="160"
v-model="deletePopoverVisible">
<p>{{ $t('preferences.account.confirm_message') }}</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="deletePopoverVisible = false">{{ $t('preferences.account.cancel') }}</el-button>
<el-button type="danger" size="mini" @click="removeAllAssociations">{{ $t('preferences.account.confirm') }}</el-button>
</div>
<el-button slot="reference" type="danger">{{ $t('preferences.account.remove_all_associations') }}</el-button>
</el-popover>
</div>
</el-form-item>
<el-form-item>
<el-popover
placement="top"
width="160"
v-model="deletePopoverVisible">
<p>{{ $t('preferences.account.confirm_message') }}</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="deletePopoverVisible = false">{{ $t('preferences.account.cancel') }}</el-button>
<el-button type="danger" size="mini" @click="removeAllAssociations">{{ $t('preferences.account.confirm') }}</el-button>
</div>
<el-button slot="reference" type="danger">{{ $t('preferences.account.remove_all_associations') }}</el-button>
</el-popover>
</el-form-item>
</el-form>
</div>
</template>
@ -130,32 +131,38 @@ export default {
<style lang="scss" scoped>
#account {
.el-table /deep/ {
tr,
th,
td {
background-color: var(--theme-background-color);
color: var(--theme-secondary-color);
border-bottom: 1px solid var(--theme-border-color);
.section /deep/ {
margin-bottom: 40px;
.el-form-item__label {
color: var(--theme-primary-color);
}
}
.connected-account {
.el-table /deep/ {
tr,
th,
td {
background-color: var(--theme-background-color);
color: var(--theme-primary-color);
border-bottom: 1px solid var(--theme-border-color);
}
}
}
.el-table::before {
background-color: var(--theme-border-color);
}
.el-table::before {
background-color: var(--theme-border-color);
}
.allow-up,
.allow-down {
display: inline-block;
}
.reset {
margin: 24px 12px;
text-align: right;
.action {
font-size: var(--base-font-size);
}
}
}
.allow-up {
padding: 0;
}
.allow-down {
padding: 0;
}
</style>

63
src/renderer/components/Preferences/Appearance.vue
View File

@ -1,11 +1,10 @@
<template>
<div id="appearance">
<h2>{{ $t('preferences.appearance.title') }}</h2>
<div class="theme section">
<el-form class="theme section" size="small" label-position="top">
<div class="left">
<h4>{{ $t('preferences.appearance.theme_color') }}</h4>
<div class="status">
<el-select v-model="theme" placeholder="theme">
<el-form-item for="theme" :label="$t('preferences.appearance.theme_color')">
<el-select id="theme" v-model="theme" placeholder="theme">
<el-option
v-for="t in themes"
:key="t.key"
@ -13,7 +12,7 @@
:value="t.key">
</el-option>
</el-select>
</div>
</el-form-item>
</div>
<div class="right">
<Toot
@ -21,30 +20,27 @@
:timeFormat="timeFormat"
></Toot>
</div>
</div>
<div class="color-pallet" v-if="customizeThemeColor">
</el-form>
<div class="color-pallet section" v-if="customizeThemeColor">
<color-pallet></color-pallet>
</div>
<div class="font section">
<h4>{{ $t('preferences.appearance.font_family') }}</h4>
<span class="status">
<el-select v-model="font" placeholder="fonts">
<el-form class="font section" size="small" label-position="top">
<el-form-item for="font-family" :label="$t('preferences.appearance.font_family')">
<el-select id="font-family" v-model="font" placeholder="fonts">
<el-option
v-for="f in fontList"
:key="f"
:label="f"
:value="f" />
</el-select>
</span>
<h4>{{ $t('preferences.appearance.font_size') }}</h4>
<span class="status">
<el-input-number :value="fontSize" :min="9" :max="18" @change="updateFontSize"></el-input-number>
</span>
</div>
<div class="display-style section">
<h4>{{ $t('preferences.appearance.display_style.title') }}</h4>
<span class="status">
<el-select v-model="displayNameStyle" placeholder="style">
</el-form-item>
<el-form-item for="font-size" :label="$t('preferences.appearance.font_size')">
<el-input-number id="font-size" :value="fontSize" :min="9" :max="18" @change="updateFontSize"></el-input-number>
</el-form-item>
</el-form>
<el-form class="display-style section" size="small" label-position="top">
<el-form-item for="display-style" :label="$t('preferences.appearance.display_style.title')">
<el-select id="display-style" v-model="displayNameStyle" placeholder="style">
<el-option
v-for="style in nameStyles"
:key="style.value"
@ -52,12 +48,11 @@
:value="style.value">
</el-option>
</el-select>
</span>
</div>
<div class="time-format section">
<h4>{{ $t('preferences.appearance.time_format.title') }}</h4>
<span class="status">
<el-select v-model="timeFormat" placeholder="format">
</el-form-item>
</el-form>
<el-form class="time-format section" size="small" label-position="top">
<el-form-item for="time-format" :label="$t('preferences.appearance.time_format.title')">
<el-select id="time-format" v-model="timeFormat" placeholder="format">
<el-option
v-for="format in timeFormats"
:key="format.value"
@ -65,8 +60,8 @@
:value="format.value">
</el-option>
</el-select>
</span>
</div>
</el-form-item>
</el-form>
</div>
</template>
@ -160,20 +155,24 @@ export default {
<style lang="scss" scoped>
#appearance {
color: var(--theme-secondary-color);
box-sizing: border-box;
.theme {
display: flex;
align-items: flex-start;
justify-content: space-between;
.right {
margin-left: 40px;
}
}
.section {
margin-bottom: 48px;
.section /deep/ {
margin-bottom: 40px;
.el-form-item__label {
color: var(--theme-primary-color);
}
}
}
</style>

64
src/renderer/components/Preferences/Appearance/ColorPallet.vue
View File

@ -1,36 +1,46 @@
<template>
<div class="pallet">
<el-form class="pallet" label-position="top" size="small">
<div class="item">
<div class="title">{{ $t('preferences.appearance.custom_theme.background_color') }}</div>
<el-color-picker v-model="background"></el-color-picker>
<div class="title">{{ $t('preferences.appearance.custom_theme.selected_background_color') }}</div>
<el-color-picker v-model="selectedBackground"></el-color-picker>
<el-form-item :label="$t('preferences.appearance.custom_theme.background_color') ">
<el-color-picker v-model="background"></el-color-picker>
</el-form-item>
<el-form-item :label="$t('preferences.appearance.custom_theme.selected_background_color')">
<el-color-picker v-model="selectedBackground"></el-color-picker>
</el-form-item>
</div>
<div class="item">
<div class="title">{{ $t('preferences.appearance.custom_theme.global_header_color') }}</div>
<el-color-picker v-model="globalHeader"></el-color-picker>
<div class="title">{{ $t('preferences.appearance.custom_theme.side_menu_color') }}</div>
<el-color-picker v-model="sideMenu"></el-color-picker>
<el-form-item :label="$t('preferences.appearance.custom_theme.global_header_color')">
<el-color-picker v-model="globalHeader"></el-color-picker>
</el-form-item>
<el-form-item :label="$t('preferences.appearance.custom_theme.side_menu_color')">
<el-color-picker v-model="sideMenu"></el-color-picker>
</el-form-item>
</div>
<div class="item">
<div class="title">{{ $t('preferences.appearance.custom_theme.primary_color') }}</div>
<el-color-picker v-model="primary"></el-color-picker>
<div class="title">{{ $t('preferences.appearance.custom_theme.regular_color') }}</div>
<el-color-picker v-model="regular"></el-color-picker>
<el-form-item :label="$t('preferences.appearance.custom_theme.primary_color')">
<el-color-picker v-model="primary"></el-color-picker>
</el-form-item>
<el-form-item :label="$t('preferences.appearance.custom_theme.regular_color')">
<el-color-picker v-model="regular"></el-color-picker>
</el-form-item>
</div>
<div class="item">
<div class="title">{{ $t('preferences.appearance.custom_theme.secondary_color') }}</div>
<el-color-picker v-model="secondary"></el-color-picker>
<div class="title">{{ $t('preferences.appearance.custom_theme.border_color') }}</div>
<el-color-picker v-model="border"></el-color-picker>
<el-form-item :label="$t('preferences.appearance.custom_theme.secondary_color')">
<el-color-picker v-model="secondary"></el-color-picker>
</el-form-item>
<el-form-item :label="$t('preferences.appearance.custom_theme.border_color')">
<el-color-picker v-model="border"></el-color-picker>
</el-form-item>
</div>
<div class="item">
<div class="title">{{ $t('preferences.appearance.custom_theme.header_menu_color') }}</div>
<el-color-picker v-model="headerMenu"></el-color-picker>
<div class="title">{{ $t('preferences.appearance.custom_theme.wrapper_mask_color') }}</div>
<el-color-picker v-model="wrapperMask" :show-alpha="true"></el-color-picker>
<el-form-item :label="$t('preferences.appearance.custom_theme.header_menu_color')">
<el-color-picker v-model="headerMenu"></el-color-picker>
</el-form-item>
<el-form-item :label="$t('preferences.appearance.custom_theme.wrapper_mask_color')">
<el-color-picker v-model="wrapperMask" :show-alpha="true"></el-color-picker>
</el-form-item>
</div>
</div>
</el-form>
</template>
<script>
@ -150,8 +160,14 @@ export default {
text-align: center;
margin: 0 12px;
.title {
margin: 8px 0;
.el-form-item {
margin-bottom: 0;
}
.el-form-item__label {
color: var(--theme-primary-color);
text-align: center;
line-height: unset;
}
}
}

44
src/renderer/components/Preferences/General.vue
View File

@ -1,28 +1,24 @@
<template>
<div id="general" v-loading="loading">
<h2>{{ $t('preferences.general.title') }}</h2>
<div class="sounds section">
<el-form class="sounds section" label-position="right" label-width="250px" size="small">
<h3>{{ $t('preferences.general.sounds.title') }}</h3>
<p class="description">{{ $t('preferences.general.sounds.description') }}</p>
<div class="selection">
<span class="value">
<el-switch
v-model="sound_fav_rb"
active-color="#13ce66">
</el-switch>
</span>
<span class="title">{{ $t('preferences.general.sounds.fav_rb') }}</span>
</div>
<div class="selection">
<span class="value">
<el-switch
v-model="sound_toot"
active-color="#13ce66">
</el-switch>
</span>
<span class="title">{{ $t('preferences.general.sounds.toot') }}</span>
</div>
</div>
<el-form-item for="fav_rb" :label="$t('preferences.general.sounds.fav_rb')">
<el-switch
id="fav_rb"
v-model="sound_fav_rb"
active-color="#13ce66">
</el-switch>
</el-form-item>
<el-form-item for="sound_toot" :label="$t('preferences.general.sounds.toot')">
<el-switch
id="sound_toot"
v-model="sound_toot"
active-color="#13ce66">
</el-switch>
</el-form-item>
</el-form>
</div>
</template>
@ -74,8 +70,12 @@ export default {
margin: 24px 0 20px;
}
.section {
margin-bottom: 48px;
.section /deep/ {
margin-bottom: 40px;
.el-form-item__label {
color: var(--theme-primary-color);
}
}
.selection {

33
src/renderer/components/Preferences/Language.vue
View File

@ -1,18 +1,19 @@
<template>
<div id="language">
<h2>{{ $t('preferences.language.title') }}</h2>
<div class="display-language">
<p class="description">{{ $t('preferences.language.language_description') }}</p>
<el-select v-model="displayLanguage" placeholder="style">
<el-option
v-for="lang in languages"
:key="lang.key"
:label="lang.name"
:value="lang.key">
</el-option>
</el-select>
<p class="notice">{{ $t('preferences.language.notice') }}</p>
</div>
<el-form class="display-language section" label-position="top" size="small">
<el-form-item for="language" :label="$t('preferences.language.language_description')">
<el-select id="language" v-model="displayLanguage" placeholder="style">
<el-option
v-for="lang in languages"
:key="lang.key"
:label="lang.name"
:value="lang.key">
</el-option>
</el-select>
<p class="notice">{{ $t('preferences.language.notice') }}</p>
</el-form-item>
</el-form>
</div>
</template>
@ -72,8 +73,12 @@ export default {
<style lang="scss" scoped>
#language {
.description {
margin: 24px 0 20px;
.section /deep/ {
margin-bottom: 40px;
.el-form-item__label {
color: var(--theme-primary-color);
}
}
.notice {

76
src/renderer/components/Preferences/Notification.vue
View File

@ -1,45 +1,36 @@
<template>
<div id="notification">
<h2>{{ $t('preferences.notification.title') }}</h2>
<div class="enable">
<el-form class="section" label-position="right" label-width="250px" size="small">
<p class="description">{{ $t('preferences.notification.enable.description') }}</p>
<div class="selection">
<span class="value">
<el-switch
v-model="notifyReply"
active-color="#13ce66">
</el-switch>
</span>
<span class="title">{{ $t('preferences.notification.enable.reply') }}</span>
</div>
<div class="selection">
<span class="value">
<el-switch
v-model="notifyReblog"
active-color="#13ce66">
</el-switch>
</span>
<span class="title">{{ $t('preferences.notification.enable.reblog') }}</span>
</div>
<div class="selection">
<span class="value">
<el-switch
v-model="notifyFavourite"
active-color="#13ce66">
</el-switch>
</span>
<span class="title">{{ $t('preferences.notification.enable.favourite') }}</span>
</div>
<div class="selection">
<span class="value">
<el-switch
v-model="notifyFollow"
active-color="#13ce66">
</el-switch>
</span>
<span class="title">{{ $t('preferences.notification.enable.follow') }}</span>
</div>
</div>
<el-form-item for="notifyReply" :label="$t('preferences.notification.enable.reply')">
<el-switch
id="notifyReply"
v-model="notifyReply"
active-color="#13ce66">
</el-switch>
</el-form-item>
<el-form-item for="notifyReblog" :label="$t('preferences.notification.enable.reblog')">
<el-switch
id="notifyReblog"
v-model="notifyReblog"
active-color="#13ce66">
</el-switch>
</el-form-item>
<el-form-item for="notifyFavourite" :label="$t('preferences.notification.enable.favourite')">
<el-switch
id="notifyFavourite"
v-model="notifyFavourite"
active-color="#13ce66">
</el-switch>
</el-form-item>
<el-form-item for="notifyFollow" :label="$t('preferences.notification.enable.follow')">
<el-switch
v-model="notifyFollow"
active-color="#13ce66">
</el-switch>
</el-form-item>
</el-form>
</div>
</template>
@ -106,12 +97,11 @@ export default {
margin: 24px 0 20px;
}
.selection {
margin: 12px 0;
.section /deep/ {
margin-bottom: 40px;
.title {
margin-left: 12px;
font-weight: 800;
.el-form-item__label {
color: var(--theme-primary-color);
}
}
}

24
src/renderer/components/Settings.vue
View File

@ -3,10 +3,10 @@
<el-header class="header">
<el-row>
<el-col :span="23">
<h3>{{ $t('settings.title') }}</h3>
<h1>{{ $t('settings.title') }}</h1>
</el-col>
<el-col :span="1">
<el-button type="text" icon="el-icon-close" @click="close" class="close-button"></el-button>
<el-button type="text" icon="el-icon-close" @click="close" class="close-button" role="button"></el-button>
</el-col>
</el-row>
</el-header>
@ -72,10 +72,11 @@ export default {
.header {
text-align: center;
border-bottom: 1px solid var(--theme-border-color);
user-select: none;
}
.close-button {
font-size: 24px;
font-size: 28px;
}
.menu {
@ -83,31 +84,16 @@ export default {
padding-left: 24px;
.el-menu {
background-color: var(--theme-background-color);
border-right: solid 1px var(--theme-border-color);
}
.setting-menu /deep/ {
height: 100%;
user-select: none;
.icon {
margin-right: 9px;
}
.el-menu-item {
transition: none;
-webkit-transition: none;
.icon {
color: var(--theme-secondary-color);
}
}
.is-active {
.icon {
color: #409eff;
}
}
}
}
}

40
src/renderer/components/Settings/General.vue
View File

@ -1,20 +1,22 @@
<template>
<div id="general">
<div class="toot section">
<h2>{{ $t('settings.general.title') }}</h2>
<el-form class="toot section" label-width="250px" label-position="right" size="medium">
<h3>{{ $t('settings.general.toot.title') }}</h3>
<p class="description">{{ $t('settings.general.toot.visibility.description') }}</p>
<el-select v-model="tootVisibility" placeholder="visibility">
<el-option
v-for="v in visibilities"
:key="v.value"
:label="$t(v.name)"
:value="v.value">
</el-option>
</el-select>
<p class="description">{{ $t('settings.general.toot.sensitive.description') }}</p>
<el-switch v-model="tootSensitive">
</el-switch>
</div>
<el-form-item for="visibility" :label="$t('settings.general.toot.visibility.description')">
<el-select id="visibility" v-model="tootVisibility" placeholder="visibility">
<el-option
v-for="v in visibilities"
:key="v.value"
:label="$t(v.name)"
:value="v.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item for="sensitive" :label="$t('settings.general.toot.sensitive.description')">
<el-switch id="sensitive" v-model="tootSensitive"></el-switch>
</el-form-item>
</el-form>
</div>
</template>
@ -58,12 +60,12 @@ export default {
<style lang="scss" scoped>
#general {
.description {
margin: 32px 0 20px;
}
.section {
.section /deep/ {
margin-bottom: 40px;
.el-form-item__label {
color: var(--theme-primary-color);
}
}
}
</style>

61
src/renderer/components/Settings/Timeline.vue
View File

@ -1,37 +1,20 @@
<template>
<div id="timeline">
<div class="unread-notification section">
<h2>{{ $t('settings.timeline.title') }}</h2>
<el-form class="unread-notification section" size="medium" label-position="right" label-width="250px">
<h3>{{ $t('settings.timeline.unread_notification.title') }}</h3>
<p class="description">{{ $t('settings.timeline.unread_notification.description') }}</p>
<table class="table">
<tbody>
<tr>
<td class="title">
{{ $t('settings.timeline.unread_notification.direct') }}
</td>
<td class="status">
<el-switch v-model="direct" />
</td>
</tr>
<tr>
<td class="title">
{{ $t('settings.timeline.unread_notification.local') }}
</td>
<td class="status">
<el-switch v-model="local" />
</td>
</tr>
<tr>
<td class="title">
{{ $t('settings.timeline.unread_notification.public') }}
</td>
<td class="status">
<el-switch v-model="public" />
</td>
</tr>
</tbody>
</table>
</div>
<el-form-item for="direct" :label="$t('settings.timeline.unread_notification.direct')">
<el-switch v-model="direct" id="direct" />
</el-form-item>
<el-form-item for="local" :label="$t('settings.timeline.unread_notification.local')">
<el-switch v-model="local" id="local" />
</el-form-item>
<el-form-item for="public" :label="$t('settings.timeline.unread_notification.public')">
<el-switch v-model="public" id="public" />
</el-form-item>
</el-form>
</div>
</template>
@ -82,23 +65,11 @@ export default {
margin: 32px 0 20px;
}
.section {
.section /deep/ {
margin-bottom: 40px;
}
.table {
tr {
height: 3rem;
}
.title {
width: 200px;
text-align: right;
}
.status {
width: 200px;
text-align: center;
.el-form-item__label {
color: var(--theme-primary-color);
}
}
}

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

@ -45,7 +45,7 @@
</el-button>
</popper>
</div>
<div class="icon">
<div class="icon" role="presentation">
<FailoverImg :src="account.avatar" :alt="`Avatar of ${account.username}`" />
</div>
<div class="follow-status" v-if="relationship !== null && relationship !== '' && account.username!==user.username">

43
src/renderer/components/TimelineSpace/HeaderMenu.vue
View File

@ -1,6 +1,8 @@
<template>
<div id="header_menu">
<div class="channel">{{ title }}</div>
<nav id="header_menu" :aria-label="title">
<div class="channel">
<h1>{{ title }}</h1>
</div>
<div class="tools">
<el-button type="text" class="action" @click="openNewTootModal" :title="$t('header_menu.new_toot')">
<icon name="regular/edit" scale="1.1"></icon>
@ -15,23 +17,25 @@
trigger="click"
v-model="filterVisible">
<div>
<el-form role="form">
<el-form-item :label="$t('header_menu.filter.title')">
<div class="input-wrapper">
<el-form role="form" label-position="left" label-width="125px" size="medium">
<el-form-item for="filter" :label="$t('header_menu.filter.title')">
<div class="el-input">
<input
id="filter"
class="el-input__inner"
v-model="filter"
:placeholder="$t('header_menu.filter.placeholder')"
v-shortkey.avoid
aria-label="filter words"
tilte="filter"
></input>
:aria-label="$t('header_menu.filter.placeholder')"
:title="$t('header_menu.filter.placeholder')"
>
</div>
</el-form-item>
<el-form-item :label="$t('header_menu.filter.show_reblogs')" v-if="extrasFilterable()">
<el-checkbox v-model="showReblogs"></el-checkbox>
<el-form-item for="show-reblogs" :label="$t('header_menu.filter.show_reblogs')" v-if="extrasFilterable()">
<el-checkbox id="show-reblogs" v-model="showReblogs"></el-checkbox>
</el-form-item>
<el-form-item :label="$t('header_menu.filter.show_replies')" v-if="extrasFilterable()">
<el-checkbox v-model="showReplies"></el-checkbox>
<el-form-item for="show-replies" :label="$t('header_menu.filter.show_replies')" v-if="extrasFilterable()">
<el-checkbox id="show-replies" v-model="showReplies"></el-checkbox>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="applyFilter(filter)">{{ $t('header_menu.filter.apply') }}</el-button>
@ -46,7 +50,7 @@
<icon name="cog" scale="1.1"></icon>
</el-button>
</div>
</div>
</nav>
</template>
<script>
@ -258,16 +262,19 @@ export default {
<style lang="scss" scoped>
#header_menu {
background-color: var(--theme-background-color);
padding: 12px 24px;
padding: 10px 20px;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: stretch;
align-items: center;
user-select: none;
.channel {
font-weight: bold;
font-size: 18px;
margin-right: auto;
h1 {
margin: 0;
}
}
.tools {
@ -289,7 +296,7 @@ export default {
position: relative;
font-size: 14px;
display: inline-block;
width: 100%;
max-width: 100%;
input {
background-color: #fff;

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

@ -1,11 +1,11 @@
<template>
<transition name="image-viewer">
<div id="image" v-show="modalOpen" @click="close">
<div id="image" v-show="modalOpen" @click="close" :aria-hidden="!modalOpen" aria-modal="true" role="dialog">
<div class="image-wrapper" v-shortkey="modalOpen ? {close: ['esc']} : {}" @shortkey="closeHandle">
<div class="image-header">
<el-button type="text" icon="el-icon-close" @click="close" class="close-button"></el-button>
</div>
<div class="image-content">
<div class="image-content" role="presentation">
<span class="button-area"><el-button type="text" v-show="showLeft" v-shortkey="['arrowleft']" @shortkey.native="decrementIndex()"><i class="el-icon-arrow-left" @click.stop="decrementIndex"></i></el-button></span>
<Media :src="imageURL" :type="imageType"></Media>
<span class="button-area"><el-button type="text" v-show="showRight" v-shortkey="['arrowright']" @shortkey.native="incrementIndex()"><i class="el-icon-arrow-right" @click.stop="incrementIndex"></i></el-button></span>

17
src/renderer/components/TimelineSpace/Modals/MuteConfirm.vue
View File

@ -5,12 +5,11 @@
width="400px"
custom-class="mute-confirm"
>
<div class="description">
<span class="label">
{{ $t('modals.mute_confirm.body') }}
</span>
<el-switch v-model="notify"></el-switch>
</div>
<el-form class="description">
<el-form-item for="notify" :label="$t('modals.mute_confirm.body')">
<el-switch id="notify" v-model="notify"></el-switch>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="closeModal">{{ $t('modals.mute_confirm.cancel') }}</el-button>
<el-button type="primary" @click="submit">{{ $t('modals.mute_confirm.ok') }}</el-button>
@ -56,11 +55,5 @@ export default {
<style lang="scss" scoped>
.description {
text-align: center;
.label {
font-size: 14px;
color: #606266;
padding: 0 32px 0 0;
}
}
</style>

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

@ -67,24 +67,24 @@
</el-dropdown>
</div>
<div class="sensitive" v-show="attachedMedias.length > 0">
<el-button size="small" type="text" @click="changeSensitive" :title="$t('modals.new_toot.change_sensitive')">
<el-button size="small" type="text" @click="changeSensitive" :title="$t('modals.new_toot.change_sensitive')" :aria-pressed="sensitive">
<icon name="eye-slash" v-show="!sensitive"></icon>
<icon name="eye" v-show="sensitive"></icon>
</el-button>
</div>
<div class="content-warning">
<el-button size="small" type="text" @click="showContentWarning = !showContentWarning" :title="$t('modals.new_toot.add_cw')" :class="showContentWarning? '' : 'clickable'">
<el-button size="small" type="text" @click="showContentWarning = !showContentWarning" :title="$t('modals.new_toot.add_cw')" :class="showContentWarning? '' : 'clickable'" :aria-pressed="showContentWarning">
<span class="cw-text">CW</span>
</el-button>
</div>
<div class="pined-hashtag">
<el-button size="small" type="text" @click="pinedHashtag = !pinedHashtag" :title="$t('modals.new_toot.pined_hashtag')" :class="pinedHashtag? '' : 'clickable'">
<el-button size="small" type="text" @click="pinedHashtag = !pinedHashtag" :title="$t('modals.new_toot.pined_hashtag')" :class="pinedHashtag? '' : 'clickable'" :aria-pressed="pinedHashtag">
<icon name="hashtag"></icon>
</el-button>
</div>
<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" v-loading="blockSubmit">{{ $t('modals.new_toot.toot') }}</el-button>
<el-button class="toot-action" size="small" type="primary" @click="toot" :loading="blockSubmit">{{ $t('modals.new_toot.toot') }}</el-button>
<div class="clearfix"></div>
</div>
</el-dialog>

8
src/renderer/components/molecules/Notification/Favourite.vue
View File

@ -20,14 +20,14 @@
<div class="action-detail">
<span class="bold" @click="openUser(message.account)"><bdi v-html="username(message.account)"></bdi></span> favourited your status
</div>
<div class="action-icon">
<div class="action-icon" role="presentation">
<FailoverImg :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" />
</div>
</div>
<div class="clearfix"></div>
<div class="target" v-on:dblclick="openDetail(message.status)">
<div class="icon" @click="openUser(message.status.account)">
<FailoverImg :src="message.status.account.avatar" :alt="`Avatar of ${message.status.account.username}`" />
<FailoverImg :src="message.status.account.avatar" :alt="`Avatar of ${message.status.account.username}`" role="presentation" />
</div>
<div class="detail">
<div class="toot-header">
@ -59,8 +59,8 @@
<el-button v-show="sensitive(message.status) && isShowAttachments(message.status)" class="hide-sensitive" type="text" @click="showAttachments = false" :title="$t('cards.toot.hide')">
<icon name="eye" class="hide"></icon>
</el-button>
<div class="media" v-for="media in mediaAttachments(message.status)">
<FailoverImg :src="media.preview_url" alt="attached media" />
<div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments(message.status)">
<FailoverImg :src="media.preview_url" :title="media.description" />
<el-tag class="media-label" size="mini" v-if="media.type == 'gifv'">GIF</el-tag>
<el-tag class="media-label" size="mini" v-else-if="media.type == 'video'">VIDEO</el-tag>
</div>

2
src/renderer/components/molecules/Notification/Follow.vue
View File

@ -16,7 +16,7 @@
<div class="action-detail">
<span class="bold" @click="openUser(message.account)"><bdi v-html="username(message.account)"></bdi></span> is now following you
</div>
<div class="action-icon">
<div class="action-icon" role="presentation">
<FailoverImg :src="message.account.avatar" />
</div>
</div>

8
src/renderer/components/molecules/Notification/Reblog.vue
View File

@ -20,13 +20,13 @@
<div class="action-detail">
<span class="bold" @click="openUser(message.account)"><bdi v-html="username(message.account)"></bdi></span> boosted your status
</div>
<div class="action-icon">
<div class="action-icon" role="presentation">
<FailoverImg :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" />
</div>
</div>
<div class="clearfix"></div>
<div class="target" v-on:dblclick="openDetail(message.status)">
<div class="icon" @click="openUser(message.status.account)">
<div class="icon" @click="openUser(message.status.account)" role="presentation">
<FailoverImg :src="message.status.account.avatar" :alt="`Avatar of ${message.status.account.username}`" />
</div>
<div class="detail">
@ -61,8 +61,8 @@
<el-button v-show="sensitive(message.status) && isShowAttachments(message.status)" class="hide-sensitive" type="text" @click="showAttachments = false" :title="$t('cards.toot.hide')">
<icon name="eye" class="hide"></icon>
</el-button>
<div class="media" v-for="media in mediaAttachments(message.status)">
<FailoverImg :src="media.preview_url" alt="attached media" />
<div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments(message.status)">
<FailoverImg :src="media.preview_url" :title="media.description" />
<el-tag class="media-label" size="mini" v-if="media.type == 'gifv'">GIF</el-tag>
<el-tag class="media-label" size="mini" v-else-if="media.type == 'video'">VIDEO</el-tag>
</div>

10
src/renderer/components/molecules/Toot.vue
View File

@ -13,7 +13,7 @@
Filtered
</div>
<div v-show="!filtered(message)" class="toot">
<div class="icon">
<div class="icon" role="presentation">
<FailoverImg
:src="originalMessage(message).account.avatar"
@click="openUser(originalMessage(message).account)"
@ -63,7 +63,7 @@
</div>
<div class="reblogger" v-show="message.reblog !== null">
<icon name="retweet"></icon>
<span class="reblogger-icon" @click="openUser(message.account)">
<span class="reblogger-icon" @click="openUser(message.account)" role="presentation">
<FailoverImg
:src="message.account.avatar"
:alt="`Avatar of ${message.account.username}`" />
@ -73,7 +73,7 @@
</span>
</div>
<div class="tool-box">
<el-button type="text" @click="openReply(message)" class="reply" :title="$t('cards.toot.reply')">
<el-button type="text" @click="openReply(message)" class="reply" :title="$t('cards.toot.reply')" :aria-label="$t('cards.toot.reply')">
<icon name="reply" scale="0.9"></icon>
</el-button>
<el-button v-show="locked(message)" type="text" class="locked">
@ -88,13 +88,13 @@
<span class="count">
{{ reblogsCount(message) }}
</span>
<el-button type="text" @click="changeFavourite(originalMessage(message))" :class="originalMessage(message).favourited ? 'favourited animated bounceIn' : 'favourite'" :title="$t('cards.toot.fav')">
<el-button type="text" @click="changeFavourite(originalMessage(message))" :class="originalMessage(message).favourited ? 'favourited animated bounceIn' : 'favourite'" :title="$t('cards.toot.fav')" :aria-label="$t('cards.toot.fav')">
<icon name="star" scale="0.9"></icon>
</el-button>
<span class="count">
{{ favouritesCount(message) }}
</span>
<el-button class="pinned" type="text" :title="$t('cards.toot.pinned')" v-show="pinned">
<el-button class="pinned" type="text" :title="$t('cards.toot.pinned')" :aria-label="$t('cards.toot.pinned')" v-show="pinned">
<icon name="thumbtack" scale="0.9"></icon>
</el-button>
<popper trigger="click" :options="{placement: 'bottom'}" ref="popper">

2
src/renderer/components/molecules/User.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="user" @click="openUser(user)" aria-label="user">
<div class="icon">
<div class="icon" role="presentation">
<FailoverImg :src="user.avatar" :alt="`Avatar of ${user.username}`" />
</div>
<div class="name">