Merge pull request #3308 from h3poteto/fix/shortcut

Fix shortcut modal
This commit is contained in:
AkiraFukushima 2022-04-27 20:03:44 +09:00 committed by GitHub
commit 0e5ae80d81
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 58 additions and 66 deletions

View File

@ -4,6 +4,7 @@
"name": "Whalebird",
"about": "About Whalebird",
"preferences": "Preferences...",
"shortcuts": "Shortcut Keys",
"services": "Services",
"hide": "Hide Whalebird",
"hide_others": "Hide Others",

View File

@ -1365,6 +1365,12 @@ const ApplicationMenu = (accountsChange: Array<MenuItemConstructorOptions>, menu
mainWindow!.webContents.send('open-preferences')
}
},
{
label: i18n.t('main_menu.application.shortcuts'),
click: () => {
mainWindow!.webContents.send('open-shortcuts-list')
}
},
...macGeneralMenu,
{
type: 'separator'

View File

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

View File

@ -1,5 +1,5 @@
<template>
<el-dialog :model-value="jumpModal" width="440px" class="jump-modal">
<el-dialog v-model="jumpModal" width="440px" class="jump-modal">
<el-form class="jump-form" v-on:submit.prevent="jump">
<div class="channel">
<input type="text" v-model="channel" :placeholder="$t('modals.jump.jump_to')" ref="channel" />

View File

@ -1,5 +1,5 @@
<template>
<el-dialog :title="$t('modals.list_membership.title')" :model-value="listMembershipModal" width="400px" class="list-membership-modal">
<el-dialog :title="$t('modals.list_membership.title')" v-model="listMembershipModal" width="400px" class="list-membership-modal">
<el-checkbox-group v-model="belongToLists" v-loading="loading">
<table class="lists">
<tbody>

View File

@ -1,5 +1,5 @@
<template>
<el-dialog :title="$t('modals.mute_confirm.title')" :model-value="muteConfirmModal" width="400px" custom-class="mute-confirm">
<el-dialog :title="$t('modals.mute_confirm.title')" v-model="muteConfirmModal" width="400px" custom-class="mute-confirm">
<el-form class="description">
<el-form-item for="notify" :label="$t('modals.mute_confirm.body')">
<el-switch id="notify" v-model="notify"></el-switch>

View File

@ -3,43 +3,14 @@
<ul class="poll-list">
<li class="poll-option" v-for="(option, id) in value" v-bind:key="id">
<el-radio :disabled="true" :label="id">
<el-input
:placeholder="`choice ${id}`"
:model-value="value[id]"
@input="(value) => updateOption(value, id)"
size="small"
></el-input>
<el-button
class="remove-poll"
type="text"
@click="removePoll(id)"
size="small"
><font-awesome-icon icon="xmark"
/></el-button>
<el-input :placeholder="`choice ${id}`" v-model="value[id]" @input="value => updateOption(value, id)" size="small"></el-input>
<el-button class="remove-poll" type="text" @click="removePoll(id)" size="small"><font-awesome-icon icon="xmark" /></el-button>
</el-radio>
</li>
</ul>
<el-button
class="add-poll"
type="info"
size="small"
@click="addPoll"
plain
>{{ $t('modals.new_toot.poll.add_choice') }}</el-button
>
<el-select
v-model="expiresIn"
size="small"
value-key="value"
@change="changeExpire"
>
<el-option
v-for="exp in expires"
:key="exp.value"
:label="exp.label"
:value="exp"
>
</el-option>
<el-button class="add-poll" type="info" size="small" @click="addPoll" plain>{{ $t('modals.new_toot.poll.add_choice') }}</el-button>
<el-select v-model="expiresIn" size="small" value-key="value" @change="changeExpire">
<el-option v-for="exp in expires" :key="exp.value" :label="exp.label" :value="exp"> </el-option>
</el-select>
</div>
</template>
@ -53,34 +24,34 @@ export default {
expires: [
{
label: this.$t('modals.new_toot.poll.expires.5_minutes'),
value: 60 * 5,
value: 60 * 5
},
{
label: this.$t('modals.new_toot.poll.expires.30_minutes'),
value: 60 * 30,
value: 60 * 30
},
{
label: this.$t('modals.new_toot.poll.expires.1_hour'),
value: 3600,
value: 3600
},
{
label: this.$t('modals.new_toot.poll.expires.6_hours'),
value: 3600 * 6,
value: 3600 * 6
},
{
label: this.$t('modals.new_toot.poll.expires.1_day'),
value: 3600 * 24,
value: 3600 * 24
},
{
label: this.$t('modals.new_toot.poll.expires.3_days'),
value: 3600 * 24 * 3,
value: 3600 * 24 * 3
},
{
label: this.$t('modals.new_toot.poll.expires.7_days'),
value: 3600 * 24 * 7,
},
value: 3600 * 24 * 7
}
],
expiresIn: null,
expiresIn: null
}
},
created() {
@ -94,17 +65,13 @@ export default {
this.$emit('removePoll', id)
},
updateOption(item, index) {
const newValue = [
...this.value.slice(0, index),
item,
...this.value.slice(index + 1),
]
const newValue = [...this.value.slice(0, index), item, ...this.value.slice(index + 1)]
this.$emit('input', newValue)
},
changeExpire(exp) {
this.$emit('changeExpire', exp)
},
},
}
}
}
</script>

View File

@ -1,5 +1,5 @@
<template>
<el-dialog :title="$t('modals.report.title')" :model-value="reportModal" width="400px" custom-class="report">
<el-dialog :title="$t('modals.report.title')" v-model="reportModal" width="400px" custom-class="report">
<el-input type="textarea" v-model="comment" :placeholder="$t('modals.report.comment')"></el-input>
<template #footer>
<span class="dialog-footer">

View File

@ -1,6 +1,6 @@
<template>
<div class="shortcut">
<el-dialog :title="$t('modals.shortcut.title')" :model-value="shortcutModal" width="500px" class="shortcut-modal">
<el-dialog :title="$t('modals.shortcut.title')" v-model="shortcutModal" width="500px" class="shortcut-modal">
<table class="shortcuts">
<tbody>
<tr>
@ -101,6 +101,7 @@ export default {
.shortcut :deep() {
.el-dialog__header {
background-color: #4a5664;
margin-right: 0;
.el-dialog__title {
color: #ebeef5;
@ -108,7 +109,7 @@ export default {
}
}
.shortcut-modal {
.shortcut {
.shortcuts {
text-align: left;
border-collapse: collapse;

View File

@ -74,7 +74,7 @@ import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import './assets/fonts/fonts.css'
import App from './App.vue'
import router from '@/router'
import store from './store'
import store, { key } from './store'
import i18next from '~/src/config/i18n'
library.add(
@ -142,7 +142,7 @@ library.add(
const i18n = createI18n(i18next)
const app = createApp(App)
app.use(store)
app.use(store, key)
app.use(router)
app.use(ElementPlus)
app.component('font-awesome-icon', FontAwesomeIcon)

View File

@ -12,7 +12,7 @@ import { BaseConfig } from '~/src/types/preference'
import { Appearance } from '~/src/types/appearance'
import { MyWindow } from '~/src/types/global'
const win = (window as any) as MyWindow
const win = window as any as MyWindow
export type AppState = {
theme: ThemeColorType
@ -54,7 +54,7 @@ const state = (): AppState => ({
userAgent: 'Whalebird'
})
const MUTATION_TYPES = {
export const MUTATION_TYPES = {
UPDATE_THEME: 'updateTheme',
UPDATE_FONT_SIZE: 'updateFontSize',
UPDATE_DISPLAY_NAME_STYLE: 'updateDisplayNameStyle',
@ -105,16 +105,23 @@ const mutations: MutationTree<AppState> = {
}
}
export const ACTION_TYPES = {
WATCH_SHORTCUT_EVENTS: 'watchShortcutEvents',
REMOVE_SHORTCUT_EVENTS: 'removeShortcutEvents',
LOAD_PREFERENCES: 'loadPreferences',
UPDATE_THEME: 'updateTheme'
}
const actions: ActionTree<AppState, RootState> = {
watchShortcutsEvents: () => {
[ACTION_TYPES.WATCH_SHORTCUT_EVENTS]: () => {
win.ipcRenderer.on('open-preferences', () => {
router.push('/preferences/general')
})
},
removeShortcutsEvents: () => {
[ACTION_TYPES.REMOVE_SHORTCUT_EVENTS]: () => {
win.ipcRenderer.removeAllListeners('open-preferences')
},
loadPreferences: async ({ commit, dispatch }) => {
[ACTION_TYPES.LOAD_PREFERENCES]: async ({ commit, dispatch }) => {
const conf: BaseConfig = await win.ipcRenderer.invoke('get-preferences')
await dispatch('updateTheme', conf.appearance)
commit(MUTATION_TYPES.UPDATE_DISPLAY_NAME_STYLE, conf.appearance.displayNameStyle)
@ -129,7 +136,7 @@ const actions: ActionTree<AppState, RootState> = {
commit(MUTATION_TYPES.UPDATE_HIDE_ALL_ATTACHMENTS, conf.general.timeline.hideAllAttachments)
return conf
},
updateTheme: async ({ commit }, appearance: Appearance) => {
[ACTION_TYPES.UPDATE_THEME]: async ({ commit }, appearance: Appearance) => {
const themeKey: string = appearance.theme
switch (themeKey) {
case Theme.System.key: {

View File

@ -157,6 +157,9 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
win.ipcRenderer.on('CmdOrCtrl+K', () => {
commit('TimelineSpace/Modals/Jump/changeModal', true, { root: true })
})
win.ipcRenderer.on('open-shortcuts-list', () => {
commit('TimelineSpace/Modals/Shortcut/changeModal', true, { root: true })
})
},
removeShortcutEvents: async () => {
win.ipcRenderer.removeAllListeners('CmdOrCtrl+N')

View File

@ -1,5 +1,6 @@
import { createStore, createLogger } from 'vuex'
import { createStore, createLogger, Store, useStore as baseUseStore } from 'vuex'
import { RouteLocationNormalized } from 'vue-router'
import { InjectionKey } from 'vue'
import App, { AppState } from './App'
import GlobalHeader, { GlobalHeaderState } from './GlobalHeader'
@ -25,6 +26,12 @@ export interface RootState {
route: RouteLocationNormalized
}
export const key: InjectionKey<Store<RootState>> = Symbol('store')
export function useStore() {
return baseUseStore(key)
}
export default createStore({
strict: win.node_env !== 'production',
plugins: win.node_env !== 'production' ? [createLogger({})] : [],