Merge pull request #620 from h3poteto/iss-251
refs #251 Show toot design sample in appearance setting page
This commit is contained in:
AkiraFukushima
GitHub
commit
fbe7e294ec
|
|
@ -74,39 +74,52 @@
|
|||
"title": "Einstellungen",
|
||||
"general": {
|
||||
"title": "Allgemein",
|
||||
"appearance": "Anzeige",
|
||||
"theme_color": "Themenfarbe:",
|
||||
"toot": {
|
||||
"title": "Toot",
|
||||
"description": "Customize default visibility of toot.",
|
||||
"visibility": {
|
||||
"title": "Standard-Sichtbarkeit",
|
||||
"public": "Öffenlich",
|
||||
"unlisted": "Nicht gelistet",
|
||||
"private": "Privat",
|
||||
"direct": "Direkt"
|
||||
}
|
||||
},
|
||||
"sounds": {
|
||||
"title": "Klänge",
|
||||
"description": "Please set feedback sounds.",
|
||||
"fav_rb": "When you favourite or boost the toot",
|
||||
"toot": "When you post toot"
|
||||
}
|
||||
},
|
||||
"appearance": {
|
||||
"title": "Anzeige",
|
||||
"theme_color": "Themenfarbe",
|
||||
"theme": {
|
||||
"light": "Hell",
|
||||
"dark": "Dunkel"
|
||||
},
|
||||
"font_size": "Schriftgröße:",
|
||||
"font_size": "Schriftgröße",
|
||||
"display_style": {
|
||||
"title": "Anzeigestil:",
|
||||
"title": "Anzeigestil",
|
||||
"display_name_and_username": "Anzeige- und Benutzername",
|
||||
"display_name": "Anzeigename",
|
||||
"username": "Benutzername"
|
||||
},
|
||||
"toot": "Toot",
|
||||
"visibility": {
|
||||
"title": "Standard-Sichtbarkeit:",
|
||||
"public": "Öffenlich",
|
||||
"unlisted": "Nicht gelistet",
|
||||
"private": "Privat",
|
||||
"direct": "Direkt"
|
||||
},
|
||||
"sounds": "Klänge",
|
||||
"fav_rb_sound": "Favorit und Boost:",
|
||||
"toot_sound": "Toot:"
|
||||
"time_format": {
|
||||
"title": "Time format",
|
||||
"absolute": "Absolute",
|
||||
"relative": "Relative"
|
||||
}
|
||||
},
|
||||
"notification": {
|
||||
"title": "Notification",
|
||||
"notify": {
|
||||
"title": "Notify",
|
||||
"reply": "Reply:",
|
||||
"reblog": "Reblog:",
|
||||
"favourite": "Favourite:",
|
||||
"follow": "Follow:"
|
||||
"enable": {
|
||||
"description": "Pelase set notification events.",
|
||||
"reply": "Notify me when I receive reply",
|
||||
"reblog": "Notify me when I receive reblog",
|
||||
"favourite": "Notify me when I receive favourite",
|
||||
"follow": "Notify me when I receive follow"
|
||||
}
|
||||
},
|
||||
"account": {
|
||||
|
|
@ -124,7 +137,7 @@
|
|||
},
|
||||
"language": {
|
||||
"title": "Sprache",
|
||||
"display_language": "Sprache",
|
||||
"language_description": "Choose the language you would like to use with Whalebird.",
|
||||
"notice": "Erfordert Neustart",
|
||||
"confirm": {
|
||||
"title": "Warnung",
|
||||
|
|
|
|||
|
|
@ -74,44 +74,52 @@
|
|||
"title": "Preferences",
|
||||
"general": {
|
||||
"title": "General",
|
||||
"appearance": "Appearance",
|
||||
"theme_color": "Theme color:",
|
||||
"toot": {
|
||||
"title": "Toot",
|
||||
"description": "Customize default visibility of toot.",
|
||||
"visibility": {
|
||||
"title": "Default visibility",
|
||||
"public": "Public",
|
||||
"unlisted": "Unlisted",
|
||||
"private": "Private",
|
||||
"direct": "Direct"
|
||||
}
|
||||
},
|
||||
"sounds": {
|
||||
"title": "Sounds",
|
||||
"description": "Please set feedback sounds.",
|
||||
"fav_rb": "When you favorite or boost the toot",
|
||||
"toot": "When you post toot"
|
||||
}
|
||||
},
|
||||
"appearance": {
|
||||
"title": "Appearance",
|
||||
"theme_color": "Theme color",
|
||||
"theme": {
|
||||
"light": "Light",
|
||||
"dark": "Dark"
|
||||
},
|
||||
"font_size": "Font size:",
|
||||
"font_size": "Font size",
|
||||
"display_style": {
|
||||
"title": "Display style:",
|
||||
"title": "Display style of username",
|
||||
"display_name_and_username": "Display name and username",
|
||||
"display_name": "Display name",
|
||||
"username": "Username"
|
||||
},
|
||||
"time_format": {
|
||||
"title": "Time format:",
|
||||
"title": "Time format",
|
||||
"absolute": "Absolute",
|
||||
"relative": "Relative"
|
||||
},
|
||||
"toot": "Toot",
|
||||
"visibility": {
|
||||
"title": "Default visibility:",
|
||||
"public": "Public",
|
||||
"unlisted": "Unlisted",
|
||||
"private": "Private",
|
||||
"direct": "Direct"
|
||||
},
|
||||
"sounds": "Sounds",
|
||||
"fav_rb_sound": "Favorite and Boost:",
|
||||
"toot_sound": "Toot:"
|
||||
}
|
||||
},
|
||||
"notification": {
|
||||
"title": "Notification",
|
||||
"notify": {
|
||||
"title": "Notify",
|
||||
"reply": "Reply:",
|
||||
"reblog": "Reblog:",
|
||||
"favourite": "Favourite:",
|
||||
"follow": "Follow:"
|
||||
"enable": {
|
||||
"description": "Please set notification events.",
|
||||
"reply": "Notify me when I receive reply",
|
||||
"reblog": "Notify me when I receive reblog",
|
||||
"favourite": "Notify me when I receive favourite",
|
||||
"follow": "Notify me when I receive follow"
|
||||
}
|
||||
},
|
||||
"account": {
|
||||
|
|
@ -129,7 +137,7 @@
|
|||
},
|
||||
"language": {
|
||||
"title": "Language",
|
||||
"display_language": "language",
|
||||
"language_description": "Choose the language you would like to use with Whalebird.",
|
||||
"notice": "Require relaunch",
|
||||
"confirm": {
|
||||
"title": "Warning",
|
||||
|
|
|
|||
|
|
@ -74,39 +74,52 @@
|
|||
"title": "Préférences",
|
||||
"general": {
|
||||
"title": "Général",
|
||||
"appearance": "Apparence",
|
||||
"theme_color": "Couleur du thème:",
|
||||
"toot": {
|
||||
"title": "Pouet",
|
||||
"description": "Customize default visibility of toot.",
|
||||
"visibility": {
|
||||
"title": "Visibilité par défaut",
|
||||
"public": "Public",
|
||||
"unlisted": "Public sans être affiché sur le fil public",
|
||||
"private": "Abonné⋅e⋅s uniquement",
|
||||
"direct": "Message direct"
|
||||
}
|
||||
},
|
||||
"sounds": {
|
||||
"title": "Sons",
|
||||
"description": "Please set feedback sounds.",
|
||||
"fav_rb": "Partages et favoris",
|
||||
"toot": "Pouets"
|
||||
}
|
||||
},
|
||||
"appearance": {
|
||||
"title": "Apparence",
|
||||
"theme_color": "Couleur du thème",
|
||||
"theme": {
|
||||
"light": "Clair",
|
||||
"dark": "Foncé"
|
||||
},
|
||||
"font_size": "Taille des caractères:",
|
||||
"font_size": "Taille des caractères",
|
||||
"display_style": {
|
||||
"title": "Format d'affichage:",
|
||||
"title": "Format d'affichage",
|
||||
"display_name_and_username": "Nom et utilisateur⋅trice",
|
||||
"display_name": "Nom",
|
||||
"username": "Utilisateur⋅trice"
|
||||
},
|
||||
"toot": "Pouet",
|
||||
"visibility": {
|
||||
"title": "Visibilité par défaut:",
|
||||
"public": "Public",
|
||||
"unlisted": "Public sans être affiché sur le fil public",
|
||||
"private": "Abonné⋅e⋅s uniquement",
|
||||
"direct": "Message direct"
|
||||
},
|
||||
"sounds": "Sons",
|
||||
"fav_rb_sound": "Partages et favoris:",
|
||||
"toot_sound": "Pouets:"
|
||||
"time_format": {
|
||||
"title": "Time format",
|
||||
"absolute": "Absolute",
|
||||
"relative": "Relative"
|
||||
}
|
||||
},
|
||||
"notification": {
|
||||
"title": "Notification",
|
||||
"notify": {
|
||||
"title": "Notify",
|
||||
"reply": "Reply:",
|
||||
"reblog": "Reblog:",
|
||||
"favourite": "Favourite:",
|
||||
"follow": "Follow:"
|
||||
"enable": {
|
||||
"description": "Please set notification events.",
|
||||
"reply": "Notify me when I receive reply",
|
||||
"reblog": "Notify me when I receive reblog",
|
||||
"favourite": "Notify me when I receive favourite",
|
||||
"follow": "Notify me when I receive follow"
|
||||
}
|
||||
},
|
||||
"account": {
|
||||
|
|
@ -124,7 +137,7 @@
|
|||
},
|
||||
"language": {
|
||||
"title": "Langue",
|
||||
"display_language": "Langue",
|
||||
"language_description": "Choose the language you would like to use with Whalebird.",
|
||||
"notice": "Nécessite un redémarrage",
|
||||
"confirm": {
|
||||
"title": "Avertissement",
|
||||
|
|
|
|||
|
|
@ -74,39 +74,52 @@
|
|||
"title": "設定",
|
||||
"general": {
|
||||
"title": "一般",
|
||||
"appearance": "外観",
|
||||
"theme_color": "テーマカラー:",
|
||||
"toot": {
|
||||
"title": "トゥート",
|
||||
"description": "トゥートの公開設定を変更できます",
|
||||
"visibility": {
|
||||
"title": "公開設定",
|
||||
"public": "公開",
|
||||
"unlisted": "未収載",
|
||||
"private": "フォロワー限定",
|
||||
"direct": "ダイレクト"
|
||||
}
|
||||
},
|
||||
"sounds": {
|
||||
"title": "効果音",
|
||||
"description": "操作時の効果音を設定",
|
||||
"fav_rb": "お気に入り，ブースト時",
|
||||
"toot": "トゥート時"
|
||||
}
|
||||
},
|
||||
"appearance": {
|
||||
"title": "外観",
|
||||
"theme_color": "テーマカラー",
|
||||
"theme": {
|
||||
"light": "標準",
|
||||
"dark": "ダーク"
|
||||
},
|
||||
"font_size": "フォントサイズ:",
|
||||
"font_size": "フォントサイズ",
|
||||
"display_style": {
|
||||
"title": "ユーザ名の表示形式:",
|
||||
"title": "ユーザ名の表示形式",
|
||||
"display_name_and_username": "表示名+ユーザー名",
|
||||
"display_name": "表示名",
|
||||
"username": "ユーザー名"
|
||||
},
|
||||
"toot": "トゥート",
|
||||
"visibility": {
|
||||
"title": "公開設定:",
|
||||
"public": "公開",
|
||||
"unlisted": "未収載",
|
||||
"private": "フォロワー限定",
|
||||
"direct": "ダイレクト"
|
||||
},
|
||||
"sounds": "効果音",
|
||||
"fav_rb_sound": "お気に入り，ブースト時:",
|
||||
"toot_sound": "トゥート時:"
|
||||
"time_format": {
|
||||
"title": "時間の表示形式",
|
||||
"absolute": "絶対表示",
|
||||
"relative": "相対表示"
|
||||
}
|
||||
},
|
||||
"notification": {
|
||||
"title": "通知",
|
||||
"notify": {
|
||||
"title": "通知設定",
|
||||
"reply": "返信:",
|
||||
"reblog": "ブースト:",
|
||||
"favourite": "お気に入り:",
|
||||
"follow": "フォロー:"
|
||||
"enable": {
|
||||
"description": "通知を受け取るかどうかを設定",
|
||||
"reply": "返信がある時",
|
||||
"reblog": "ブーストされた時",
|
||||
"favourite": "お気に入りされた時",
|
||||
"follow": "フォローされた時"
|
||||
}
|
||||
},
|
||||
"account": {
|
||||
|
|
@ -124,7 +137,7 @@
|
|||
},
|
||||
"language": {
|
||||
"title": "言語",
|
||||
"display_language": "表示言語",
|
||||
"language_description": "Whalebirdの表示言語を選択",
|
||||
"notice": "再起動が必要です",
|
||||
"confirm": {
|
||||
"title": "再起動します",
|
||||
|
|
|
|||
|
|
@ -74,44 +74,52 @@
|
|||
"title": "설정",
|
||||
"general": {
|
||||
"title": "일반",
|
||||
"appearance": "외관",
|
||||
"theme_color": "테마 색상:",
|
||||
"toot": {
|
||||
"title": "툿",
|
||||
"description": "Customize default visibility of toot.",
|
||||
"visibility": {
|
||||
"title": "기본 공개 설정",
|
||||
"public": "공개",
|
||||
"unlisted": "미등록",
|
||||
"private": "비공개",
|
||||
"direct": "다이렉트"
|
||||
}
|
||||
},
|
||||
"sounds": {
|
||||
"title": "사운드",
|
||||
"description": "Please set feedback sounds.",
|
||||
"fav_rb": "When you favorite or boost the toot",
|
||||
"toot": "When you post toot"
|
||||
}
|
||||
},
|
||||
"appearance": {
|
||||
"title": "외관",
|
||||
"theme_color": "테마 색상",
|
||||
"theme": {
|
||||
"light": "밝은 테마",
|
||||
"dark": "어두운 테마"
|
||||
},
|
||||
"font_size": "폰트 크기:",
|
||||
"font_size": "폰트 크기",
|
||||
"display_style": {
|
||||
"title": "사용자 표시 형식:",
|
||||
"title": "사용자 표시 형식",
|
||||
"display_name_and_username": "닉네임과 아이디 모두 보이기",
|
||||
"display_name": "닉네임만 보이기",
|
||||
"username": "아이디만 보이기"
|
||||
},
|
||||
"time_format":{
|
||||
"title": "시간 표시 형식:",
|
||||
"time_format":{
|
||||
"title": "시간 표시 형식",
|
||||
"absolute": "고정 시각 표시",
|
||||
"relative": "상대 시간 표시"
|
||||
},
|
||||
"toot": "툿",
|
||||
"visibility": {
|
||||
"title": "기본 공개 설정:",
|
||||
"public": "공개",
|
||||
"unlisted": "미등록",
|
||||
"private": "비공개",
|
||||
"direct": "다이렉트"
|
||||
},
|
||||
"sounds": "사운드",
|
||||
"fav_rb_sound": "즐겨찾기 및 부스트:",
|
||||
"toot_sound": "툿:"
|
||||
}
|
||||
},
|
||||
"notification": {
|
||||
"title": "알림",
|
||||
"notify": {
|
||||
"title": "푸쉬 알림",
|
||||
"reply": "답장:",
|
||||
"reblog": "부스트:",
|
||||
"favourite": "즐겨찾기:",
|
||||
"follow": "즐겨찾기:"
|
||||
"enable": {
|
||||
"description": "Please set notification events.",
|
||||
"reply": "Notify me when I receive reply",
|
||||
"reblog": "Notify me when I receive reblog",
|
||||
"favourite": "Notify me when I receive favourite",
|
||||
"follow": "Notify me when I receive follow"
|
||||
}
|
||||
},
|
||||
"account": {
|
||||
|
|
@ -129,7 +137,7 @@
|
|||
},
|
||||
"language": {
|
||||
"title": "언어",
|
||||
"display_language": "언어",
|
||||
"language_description": "Choose the language you would like to use with Whalebird.",
|
||||
"notice": "재실행이 필요합니다",
|
||||
"confirm": {
|
||||
"title": "알림",
|
||||
|
|
|
|||
|
|
@ -74,39 +74,52 @@
|
|||
"title": "Preferencje",
|
||||
"general": {
|
||||
"title": "Ogólne",
|
||||
"appearance": "Wygląd",
|
||||
"theme_color": "Kolor motywu:",
|
||||
"toot": {
|
||||
"title": "Wpisy",
|
||||
"description": "Customize default visibility of toot.",
|
||||
"visibility": {
|
||||
"title": "Domyślna widoczność",
|
||||
"public": "Publiczne",
|
||||
"unlisted": "Niewidoczne",
|
||||
"private": "Prywatne",
|
||||
"direct": "Bezpośrednie"
|
||||
}
|
||||
},
|
||||
"sounds": {
|
||||
"title": "Dźwięki",
|
||||
"description": "Please set feedback sounds.",
|
||||
"fav_rb": "Polubienie i podbicie",
|
||||
"toot": "Wpisy"
|
||||
}
|
||||
},
|
||||
"appearance": {
|
||||
"title": "Wygląd",
|
||||
"theme_color": "Kolor motywu",
|
||||
"theme": {
|
||||
"light": "Jasny",
|
||||
"dark": "Ciemny"
|
||||
},
|
||||
"font_size": "Rozmiar czcionki:",
|
||||
"font_size": "Rozmiar czcionki",
|
||||
"display_style": {
|
||||
"title": "Styl wyświetlania:",
|
||||
"title": "Styl wyświetlania",
|
||||
"display_name_and_username": "Nazwa wyświetlana i nazwa użytkownika",
|
||||
"display_name": "Nazwa wyświetlana",
|
||||
"username": "Nazwa użytkownika"
|
||||
},
|
||||
"toot": "Wpisy",
|
||||
"visibility": {
|
||||
"title": "Domyślna widoczność:",
|
||||
"public": "Publiczne",
|
||||
"unlisted": "Niewidoczne",
|
||||
"private": "Prywatne",
|
||||
"direct": "Bezpośrednie"
|
||||
},
|
||||
"sounds": "Dźwięki",
|
||||
"fav_rb_sound": "Polubienie i podbicie:",
|
||||
"toot_sound": "Wpisy:"
|
||||
"time_format": {
|
||||
"title": "Time format",
|
||||
"absolute": "Absolute",
|
||||
"relative": "Relative"
|
||||
}
|
||||
},
|
||||
"notification": {
|
||||
"title": "Notification",
|
||||
"notify": {
|
||||
"title": "Notify",
|
||||
"reply": "Reply:",
|
||||
"reblog": "Reblog:",
|
||||
"favourite": "Favourite:",
|
||||
"follow": "Follow:"
|
||||
"enable": {
|
||||
"description": "Please set notification events.",
|
||||
"reply": "Notify me when I receive reply",
|
||||
"reblog": "Notify me when I receive reblog",
|
||||
"favourite": "Notify me when I receive favourite",
|
||||
"follow": "Notify me when I receive follow"
|
||||
}
|
||||
},
|
||||
"account": {
|
||||
|
|
@ -124,7 +137,7 @@
|
|||
},
|
||||
"language": {
|
||||
"title": "Język",
|
||||
"display_language": "język",
|
||||
"language_description": "Choose the language you would like to use with Whalebird.",
|
||||
"notice": "Wymaga ponownego uruchomienia",
|
||||
"confirm": {
|
||||
"title": "Ostrzeżenie",
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
export default {
|
||||
DisplayNameAndUsername: {
|
||||
name: 'preferences.general.display_style.display_name_and_username',
|
||||
name: 'preferences.appearance.display_style.display_name_and_username',
|
||||
value: 0
|
||||
},
|
||||
DisplayName: {
|
||||
name: 'preferences.general.display_style.display_name',
|
||||
name: 'preferences.appearance.display_style.display_name',
|
||||
value: 1
|
||||
},
|
||||
Username: {
|
||||
name: 'preferences.general.display_style.username',
|
||||
name: 'preferences.appearance.display_style.username',
|
||||
value: 2
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
export default {
|
||||
Light: {
|
||||
name: 'preferences.general.theme.light',
|
||||
name: 'preferences.appearance.theme.light',
|
||||
key: 'light'
|
||||
},
|
||||
Dark: {
|
||||
name: 'preferences.general.theme.dark',
|
||||
name: 'preferences.appearance.theme.dark',
|
||||
key: 'dark'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
export default {
|
||||
Absolute: {
|
||||
name: 'preferences.general.time_format.absolute',
|
||||
name: 'preferences.appearance.time_format.absolute',
|
||||
value: 0
|
||||
},
|
||||
Relative: {
|
||||
name: 'preferences.general.time_format.relative',
|
||||
name: 'preferences.appearance.time_format.relative',
|
||||
value: 1
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
export default {
|
||||
Public: {
|
||||
name: 'preferences.general.visibility.public',
|
||||
name: 'preferences.general.toot.visibility.public',
|
||||
value: 0,
|
||||
key: 'public'
|
||||
},
|
||||
Unlisted: {
|
||||
name: 'preferences.general.visibility.unlisted',
|
||||
name: 'preferences.general.toot.visibility.unlisted',
|
||||
value: 1,
|
||||
key: 'unlisted'
|
||||
},
|
||||
Private: {
|
||||
name: 'preferences.general.visibility.private',
|
||||
name: 'preferences.general.toot.visibility.private',
|
||||
value: 2,
|
||||
key: 'private'
|
||||
},
|
||||
Direct: {
|
||||
name: 'preferences.general.visibility.direct',
|
||||
name: 'preferences.general.toot.visibility.direct',
|
||||
value: 3,
|
||||
key: 'direct'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,11 +12,7 @@ const Base = {
|
|||
fav_rb: true,
|
||||
toot: true
|
||||
},
|
||||
theme: Theme.Light.key,
|
||||
fontSize: 14,
|
||||
displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
|
||||
tootVisibility: Visibility.Public.value,
|
||||
timeFormat: TimeFormat.Absolute.value
|
||||
tootVisibility: Visibility.Public.value
|
||||
},
|
||||
state: {
|
||||
collapse: false
|
||||
|
|
@ -31,6 +27,12 @@ const Base = {
|
|||
favourite: true,
|
||||
follow: true
|
||||
}
|
||||
},
|
||||
appearance: {
|
||||
theme: Theme.Light.key,
|
||||
fontSize: 14,
|
||||
displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
|
||||
timeFormat: TimeFormat.Absolute.value
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,15 +23,19 @@
|
|||
<icon name="cog" class="icon" scale="1.3"></icon>
|
||||
<span>{{ $t('preferences.general.title') }}</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" :route="{path: '/preferences/notification'}" @click="notification">
|
||||
<el-menu-item index="2" :route="{path: '/preferences/appearance'}" @click="appearance">
|
||||
<icon name="palette" class="icon" scale="1.3"></icon>
|
||||
<span>{{ $t('preferences.appearance.title') }}</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3" :route="{path: '/preferences/notification'}" @click="notification">
|
||||
<icon name="bell" class="icon" scale="1.3"></icon>
|
||||
<span>{{ $t('preferences.notification.title') }}</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3" :route="{path: '/preferences/account'}" @click="account">
|
||||
<el-menu-item index="4" :route="{path: '/preferences/account'}" @click="account">
|
||||
<icon name="user" class="icon" scale="1.3"></icon>
|
||||
<span>{{ $t('preferences.account.title') }}</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="4" :route="{path: '/preferences/language'}" @click="language">
|
||||
<el-menu-item index="5" :route="{path: '/preferences/language'}" @click="language">
|
||||
<icon name="language" class="icon" scale="1.3"></icon>
|
||||
<span>{{ $t('preferences.language.title') }}</span>
|
||||
</el-menu-item>
|
||||
|
|
@ -72,6 +76,9 @@ export default {
|
|||
},
|
||||
language () {
|
||||
this.$router.push('/preferences/language')
|
||||
},
|
||||
appearance () {
|
||||
this.$router.push('/preferences/appearance')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,147 @@
|
|||
<template>
|
||||
<div id="appearance">
|
||||
<h2>{{ $t('preferences.appearance.title') }}</h2>
|
||||
<div class="theme section">
|
||||
<div class="left">
|
||||
<h4>{{ $t('preferences.appearance.theme_color') }}</h4>
|
||||
<span class="status">
|
||||
<el-select v-model="theme" placeholder="theme">
|
||||
<el-option
|
||||
v-for="t in themes"
|
||||
:key="t.key"
|
||||
:label="$t(t.name)"
|
||||
:value="t.key">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<Toot
|
||||
:displayNameStyle="displayNameStyle"
|
||||
:timeFormat="timeFormat"
|
||||
></Toot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="font section">
|
||||
<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-option
|
||||
v-for="style in nameStyles"
|
||||
:key="style.value"
|
||||
:label="$t(style.name)"
|
||||
: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-option
|
||||
v-for="format in timeFormats"
|
||||
:key="format.value"
|
||||
:label="$t(format.name)"
|
||||
:value="format.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import Toot from './Appearance/Toot'
|
||||
import DisplayStyle from '~/src/constants/displayStyle'
|
||||
import Theme from '~/src/constants/theme'
|
||||
import TimeFormat from '~/src/constants/timeFormat'
|
||||
|
||||
export default {
|
||||
name: 'appearance',
|
||||
components: {
|
||||
Toot
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
nameStyles: [
|
||||
DisplayStyle.DisplayNameAndUsername,
|
||||
DisplayStyle.DisplayName,
|
||||
DisplayStyle.Username
|
||||
],
|
||||
themes: [
|
||||
Theme.Light,
|
||||
Theme.Dark
|
||||
],
|
||||
timeFormats: [
|
||||
TimeFormat.Absolute,
|
||||
TimeFormat.Relative
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('Preferences/Appearance', {
|
||||
fontSize: state => state.appearance.fontSize
|
||||
}),
|
||||
theme: {
|
||||
get () {
|
||||
return this.$store.state.Preferences.Appearance.appearance.theme
|
||||
},
|
||||
set (value) {
|
||||
this.$store.dispatch('Preferences/Appearance/updateTheme', value)
|
||||
}
|
||||
},
|
||||
displayNameStyle: {
|
||||
get () {
|
||||
return this.$store.state.Preferences.Appearance.appearance.displayNameStyle
|
||||
},
|
||||
set (value) {
|
||||
this.$store.dispatch('Preferences/Appearance/updateDisplayNameStyle', value)
|
||||
}
|
||||
},
|
||||
timeFormat: {
|
||||
get () {
|
||||
return this.$store.state.Preferences.Appearance.appearance.timeFormat
|
||||
},
|
||||
set (value) {
|
||||
this.$store.dispatch('Preferences/Appearance/updateTimeFormat', value)
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$store.dispatch('Preferences/Appearance/loadAppearance')
|
||||
},
|
||||
methods: {
|
||||
updateFontSize (value) {
|
||||
this.$store.dispatch('Preferences/Appearance/updateFontSize', value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#appearance {
|
||||
color: var(--theme-secondary-color);
|
||||
box-sizing: border-box;
|
||||
|
||||
.theme {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.right {
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,273 @@
|
|||
<template>
|
||||
<div
|
||||
class="status"
|
||||
tabIndex="0"
|
||||
ref="status"
|
||||
>
|
||||
<div class="toot">
|
||||
<div class="icon">
|
||||
<img :src="sampleIcon" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div class="toot-header">
|
||||
<div class="user">
|
||||
<span class="display-name">{{ username }}</span>
|
||||
<span class="acct">{{ accountName }}</span>
|
||||
</div>
|
||||
<div class="timestamp">
|
||||
{{ timestamp }}
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<div class="content" v-html="status"></div>
|
||||
</div>
|
||||
<div class="tool-box">
|
||||
<el-button type="text" class="reply" :title="$t('cards.toot.reply')">
|
||||
<icon name="reply" scale="0.9"></icon>
|
||||
</el-button>
|
||||
<el-button type="text" class="reblog" :title="$t('cards.toot.reblog')">
|
||||
<icon name="retweet" scale="0.9"></icon>
|
||||
</el-button>
|
||||
<span class="count">
|
||||
{{ reblogsCount }}
|
||||
</span>
|
||||
<el-button type="text" class="favourite" :title="$t('cards.toot.fav')">
|
||||
<icon name="star" scale="0.9"></icon>
|
||||
</el-button>
|
||||
<span class="count">
|
||||
{{ favouritesCount }}
|
||||
</span>
|
||||
<popper trigger="click" :options="{placement: 'bottom'}" ref="popper">
|
||||
<div class="popper toot-menu">
|
||||
<ul class="menu-list">
|
||||
<li role="button">
|
||||
{{ $t('cards.toot.view_toot_detail') }}
|
||||
</li>
|
||||
<li role="button">
|
||||
{{ $t('cards.toot.open_in_browser') }}
|
||||
</li>
|
||||
<li role="button">
|
||||
{{ $t('cards.toot.copy_link_to_toot') }}
|
||||
</li>
|
||||
<li role="button" class="separate">
|
||||
{{ $t('cards.toot.delete') }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<el-button slot="reference" type="text" :title="$t('cards.toot.detail')">
|
||||
<icon name="ellipsis-h" scale="0.9"></icon>
|
||||
</el-button>
|
||||
</popper>
|
||||
</div>
|
||||
<div class="application">
|
||||
{{ $t('cards.toot.via', { application: 'Whalebird' }) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import DisplayStyle from '~/src/constants/displayStyle'
|
||||
import TimeFormat from '~/src/constants/timeFormat'
|
||||
|
||||
export default {
|
||||
name: 'toot',
|
||||
props: {
|
||||
displayNameStyle: {
|
||||
type: Number,
|
||||
default: DisplayStyle.DisplayNameAndUsername.value
|
||||
},
|
||||
timeFormat: {
|
||||
type: Number,
|
||||
default: TimeFormat.Absolute.value
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
sampleIcon () {
|
||||
return 'https://github.com/h3poteto/whalebird-desktop/raw/master/build/icons/256x256.png'
|
||||
},
|
||||
username () {
|
||||
switch (this.displayNameStyle) {
|
||||
case DisplayStyle.DisplayNameAndUsername.value:
|
||||
case DisplayStyle.DisplayName.value:
|
||||
return 'Whalebird'
|
||||
default:
|
||||
return 'whalebird@mastodon.social'
|
||||
}
|
||||
},
|
||||
accountName () {
|
||||
switch (this.displayNameStyle) {
|
||||
case DisplayStyle.DisplayNameAndUsername.value:
|
||||
return 'whalebird@mastodon.social'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
},
|
||||
timestamp () {
|
||||
switch (this.timeFormat) {
|
||||
case TimeFormat.Absolute.value:
|
||||
return '2018-08-12 20:35:41'
|
||||
case TimeFormat.Relative.value:
|
||||
return moment('2018-08-12 20:35:41').fromNow()
|
||||
}
|
||||
},
|
||||
status () {
|
||||
return '<p>Sample status</p>'
|
||||
},
|
||||
reblogsCount () {
|
||||
return 1
|
||||
},
|
||||
favouritesCount () {
|
||||
return 5
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.toot {
|
||||
padding: 8px 0 0 16px;
|
||||
|
||||
.icon {
|
||||
float: left;
|
||||
|
||||
img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
margin: 0 8px 0 8px;
|
||||
float: left;
|
||||
width: calc(100% - 52px);
|
||||
|
||||
.toot-header {
|
||||
.user {
|
||||
float: left;
|
||||
font-size: var(--base-font-size);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.display-name {
|
||||
font-weight: 800;
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
|
||||
.acct {
|
||||
font-weight: normal;
|
||||
color: var(--theme-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-size: var(--base-font-size);
|
||||
text-align: right;
|
||||
color: #909399;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper /deep/ {
|
||||
font-size: var(--base-font-size);
|
||||
color: var(--theme-primary-color);
|
||||
|
||||
.content {
|
||||
margin: 4px 0 8px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.emojione {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.tool-box {
|
||||
float: left;
|
||||
|
||||
button {
|
||||
margin: 0 8px;
|
||||
padding: 0;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 0.8em;
|
||||
color: #909399;
|
||||
margin: 0 0 4px -8px;
|
||||
}
|
||||
|
||||
.toot-menu {
|
||||
padding: 2px 0;
|
||||
border-color: #909399;
|
||||
|
||||
.menu-list {
|
||||
padding: 0;
|
||||
margin: 4px 0;
|
||||
font-size: 0.9rem;
|
||||
list-style-type: none;
|
||||
line-height: 32px;
|
||||
text-align: left;
|
||||
color: #303133;
|
||||
|
||||
li {
|
||||
box-sizing: border-box;
|
||||
padding: 0 32px 0 16px;
|
||||
|
||||
&:hover {
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.separate {
|
||||
border-top: 1px solid var(--theme-border-color);
|
||||
padding-top: 4px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.application {
|
||||
float: right;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.reply:hover,
|
||||
.reblog:hover,
|
||||
.favourite:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.action-pop-over {
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
background-color: var(--theme-background-color);
|
||||
border: 1px solid var(--theme-border-color);
|
||||
border-radius: 4px;
|
||||
padding-bottom: 4px;
|
||||
box-shadow: 0 0 12px var(--theme-border-color);
|
||||
}
|
||||
|
||||
.status:focus {
|
||||
background-color: var(--theme-selected-background-color);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,95 +1,39 @@
|
|||
<template>
|
||||
<div id="general" v-loading="loading">
|
||||
<h2>{{ $t('preferences.general.title') }}</h2>
|
||||
<div class="appearance">
|
||||
<h3>{{ $t('preferences.general.appearance') }}</h3>
|
||||
<table class="theme">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title">{{ $t('preferences.general.theme_color') }}</td>
|
||||
<td class="status">
|
||||
<el-radio v-for="t in themes" :key="t.key" v-model="theme" :label="t.key">{{ $t(t.name) }}</el-radio>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title">{{ $t('preferences.general.font_size') }}</td>
|
||||
<td class="status">
|
||||
<el-input-number :value="fontSize" :min="9" :max="18" @change="updateFontSize"></el-input-number>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title">{{ $t('preferences.general.display_style.title') }}</td>
|
||||
<td class="status">
|
||||
<el-select v-model="displayNameStyle" placeholder="style">
|
||||
<el-option
|
||||
v-for="style in nameStyles"
|
||||
:key="style.value"
|
||||
:label="$t(style.name)"
|
||||
:value="style.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title">{{ $t('preferences.general.time_format.title') }}</td>
|
||||
<td class="status">
|
||||
<el-select v-model="timeFormat" placeholder="format">
|
||||
<el-option
|
||||
v-for="format in timeFormats"
|
||||
:key="format.value"
|
||||
:label="$t(format.name)"
|
||||
:value="format.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="toot section">
|
||||
<h3>{{ $t('preferences.general.toot.title') }}</h3>
|
||||
<p class="description">{{ $t('preferences.general.toot.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>
|
||||
</div>
|
||||
<div class="toot">
|
||||
<h3>{{ $t('preferences.general.toot') }}</h3>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title">{{ $t('preferences.general.visibility.title') }}</td>
|
||||
<td class="status">
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="sounds">
|
||||
<h3>{{ $t('preferences.general.sounds') }}</h3>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title">{{ $t('preferences.general.fav_rb_sound') }}</td>
|
||||
<td class="status">
|
||||
<el-switch
|
||||
v-model="sound_fav_rb"
|
||||
active-color="#13ce66">
|
||||
</el-switch>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title">{{ $t('preferences.general.toot_sound') }}</td>
|
||||
<td class="status">
|
||||
<el-switch
|
||||
v-model="sound_toot"
|
||||
active-color="#13ce66">
|
||||
</el-switch>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="sounds section">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -97,9 +41,6 @@
|
|||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import Visibility from '~/src/constants/visibility'
|
||||
import DisplayStyle from '~/src/constants/displayStyle'
|
||||
import Theme from '~/src/constants/theme'
|
||||
import TimeFormat from '~/src/constants/timeFormat'
|
||||
|
||||
export default {
|
||||
name: 'general',
|
||||
|
|
@ -109,51 +50,13 @@ export default {
|
|||
Visibility.Public,
|
||||
Visibility.Unlisted,
|
||||
Visibility.Private
|
||||
],
|
||||
nameStyles: [
|
||||
DisplayStyle.DisplayNameAndUsername,
|
||||
DisplayStyle.DisplayName,
|
||||
DisplayStyle.Username
|
||||
],
|
||||
themes: [
|
||||
Theme.Light,
|
||||
Theme.Dark
|
||||
],
|
||||
timeFormats: [
|
||||
TimeFormat.Absolute,
|
||||
TimeFormat.Relative
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
loading: state => state.Preferences.General.loading,
|
||||
fontSize: state => state.Preferences.General.general.fontSize
|
||||
loading: state => state.Preferences.General.loading
|
||||
}),
|
||||
theme: {
|
||||
get () {
|
||||
return this.$store.state.Preferences.General.general.theme
|
||||
},
|
||||
set (value) {
|
||||
this.$store.dispatch('Preferences/General/updateTheme', value)
|
||||
}
|
||||
},
|
||||
displayNameStyle: {
|
||||
get () {
|
||||
return this.$store.state.Preferences.General.general.displayNameStyle
|
||||
},
|
||||
set (value) {
|
||||
this.$store.dispatch('Preferences/General/updateDisplayNameStyle', value)
|
||||
}
|
||||
},
|
||||
timeFormat: {
|
||||
get () {
|
||||
return this.$store.state.Preferences.General.general.timeFormat
|
||||
},
|
||||
set (value) {
|
||||
this.$store.dispatch('Preferences/General/updateTimeFormat', value)
|
||||
}
|
||||
},
|
||||
tootVisibility: {
|
||||
get () {
|
||||
return this.$store.state.Preferences.General.general.tootVisibility
|
||||
|
|
@ -191,51 +94,27 @@ export default {
|
|||
type: 'error'
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
updateFontSize (value) {
|
||||
this.$store.dispatch('Preferences/General/updateFontSize', value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#general {
|
||||
table {
|
||||
width: 100%;
|
||||
.description {
|
||||
margin: 24px 0 20px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 16px 0;
|
||||
.section {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: right;
|
||||
width: 50%;
|
||||
}
|
||||
.selection {
|
||||
margin: 12px 0;
|
||||
|
||||
.status {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.appearance {
|
||||
color: var(--theme-secondary-color);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.toot {
|
||||
color: var(--theme-secondary-color);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sounds {
|
||||
color: var(--theme-secondary-color);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
.title {
|
||||
margin-left: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,24 +2,16 @@
|
|||
<div id="language">
|
||||
<h2>{{ $t('preferences.language.title') }}</h2>
|
||||
<div class="display-language">
|
||||
<table class="language">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title">{{ $t('preferences.language.display_language') }}</td>
|
||||
<td class="status">
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -80,27 +72,13 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
#language {
|
||||
table {
|
||||
width: 100%;
|
||||
.description {
|
||||
margin: 24px 0 20px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: right;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.status {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
|
||||
.notice {
|
||||
color: #c0c4cc;
|
||||
font-size: 12px;
|
||||
}
|
||||
.notice {
|
||||
color: #c0c4cc;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,48 +1,44 @@
|
|||
<template>
|
||||
<div id="notification">
|
||||
<h2>{{ $t('preferences.notification.title') }}</h2>
|
||||
<div class="notify">
|
||||
<h3>{{ $t('preferences.notification.notify.title') }}</h3>
|
||||
<table class="notification">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title">{{ $t('preferences.notification.notify.reply') }}</td>
|
||||
<td class="status">
|
||||
<el-switch
|
||||
v-model="notifyReply"
|
||||
active-color="#13ce66">
|
||||
</el-switch>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title">{{ $t('preferences.notification.notify.reblog') }}</td>
|
||||
<td class="status">
|
||||
<el-switch
|
||||
v-model="notifyReblog"
|
||||
active-color="#13ce66">
|
||||
</el-switch>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title">{{ $t('preferences.notification.notify.favourite') }}</td>
|
||||
<td class="status">
|
||||
<el-switch
|
||||
v-model="notifyFavourite"
|
||||
active-color="#13ce66">
|
||||
</el-switch>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title">{{ $t('preferences.notification.notify.follow') }}</td>
|
||||
<td class="status">
|
||||
<el-switch
|
||||
v-model="notifyFollow"
|
||||
active-color="#13ce66">
|
||||
</el-switch>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="enable">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -106,23 +102,16 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
#notification {
|
||||
.notify {
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
.description {
|
||||
margin: 24px 0 20px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 16px 0;
|
||||
}
|
||||
.selection {
|
||||
margin: 12px 0;
|
||||
|
||||
.title {
|
||||
text-align: right;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.status {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
margin-left: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -486,9 +486,8 @@ export default {
|
|||
.timestamp {
|
||||
font-size: var(--base-font-size);
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
color: #909399;
|
||||
flota: right;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,6 +26,11 @@ export default new Router({
|
|||
name: 'general',
|
||||
component: require('@/components/Preferences/General').default
|
||||
},
|
||||
{
|
||||
path: 'appearance',
|
||||
name: 'appearance',
|
||||
component: require('@/components/Preferences/Appearance').default
|
||||
},
|
||||
{
|
||||
path: 'notification',
|
||||
name: 'notification',
|
||||
|
|
|
|||
|
|
@ -74,12 +74,12 @@ const App = {
|
|||
})
|
||||
ipcRenderer.once('response-get-preferences', (event, conf) => {
|
||||
ipcRenderer.removeAllListeners('error-get-preferences')
|
||||
commit('updateTheme', conf.general.theme)
|
||||
commit('updateDisplayNameStyle', conf.general.displayNameStyle)
|
||||
commit('updateFontSize', conf.general.fontSize)
|
||||
commit('updateTheme', conf.appearance.theme)
|
||||
commit('updateDisplayNameStyle', conf.appearance.displayNameStyle)
|
||||
commit('updateFontSize', conf.appearance.fontSize)
|
||||
commit('updateTootVisibility', conf.general.tootVisibility)
|
||||
commit('updateNotify', conf.notification.notify)
|
||||
commit('updateTimeFormat', conf.general.timeFormat)
|
||||
commit('updateTimeFormat', conf.appearance.timeFormat)
|
||||
commit('updateLanguage', conf.language.language)
|
||||
resolve(conf)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import General from './Preferences/General'
|
|||
import Account from './Preferences/Account'
|
||||
import Language from './Preferences/Language'
|
||||
import Notification from './Preferences/Notification'
|
||||
import Appearance from './Preferences/Appearance'
|
||||
|
||||
const Preferences = {
|
||||
namespaced: true,
|
||||
|
|
@ -9,7 +10,8 @@ const Preferences = {
|
|||
General,
|
||||
Account,
|
||||
Language,
|
||||
Notification
|
||||
Notification,
|
||||
Appearance
|
||||
},
|
||||
state: {
|
||||
defaultActive: '1'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,105 @@
|
|||
import { ipcRenderer } from 'electron'
|
||||
import DisplayStyle from '~/src/constants/displayStyle'
|
||||
import Theme from '~/src/constants/theme'
|
||||
import TimeFormat from '~/src/constants/timeFormat'
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {
|
||||
appearance: {
|
||||
theme: Theme.Light.key,
|
||||
fontSize: 14,
|
||||
displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
|
||||
timeFormat: TimeFormat.Absolute.value
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
updateAppearance (state, conf) {
|
||||
state.appearance = conf
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
loadAppearance ({ commit }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
ipcRenderer.send('get-preferences')
|
||||
ipcRenderer.once('error-get-preferences', (event, err) => {
|
||||
ipcRenderer.removeAllListeners('response-get-preferences')
|
||||
reject(err)
|
||||
})
|
||||
ipcRenderer.once('response-get-preferences', (event, conf) => {
|
||||
ipcRenderer.removeAllListeners('error-get-preferences')
|
||||
commit('updateAppearance', conf.appearance)
|
||||
resolve(conf)
|
||||
})
|
||||
})
|
||||
},
|
||||
updateTheme ({ dispatch, commit, state }, theme) {
|
||||
const newAppearance = Object.assign({}, state.appearance, {
|
||||
theme: theme
|
||||
})
|
||||
const config = {
|
||||
appearance: newAppearance
|
||||
}
|
||||
ipcRenderer.send('update-preferences', config)
|
||||
ipcRenderer.once('error-update-preferences', (event, err) => {
|
||||
ipcRenderer.removeAllListeners('response-update-preferences')
|
||||
})
|
||||
ipcRenderer.once('response-update-preferences', (event, conf) => {
|
||||
ipcRenderer.removeAllListeners('error-update-preferences')
|
||||
commit('updateAppearance', conf.appearance)
|
||||
dispatch('App/loadPreferences', null, { root: true })
|
||||
})
|
||||
},
|
||||
updateFontSize ({ dispatch, commit, state }, fontSize) {
|
||||
const newAppearance = Object.assign({}, state.appearance, {
|
||||
fontSize: fontSize
|
||||
})
|
||||
const config = {
|
||||
appearance: newAppearance
|
||||
}
|
||||
ipcRenderer.send('update-preferences', config)
|
||||
ipcRenderer.once('error-update-preferences', (event, err) => {
|
||||
ipcRenderer.removeAllListeners('response-update-preferences')
|
||||
})
|
||||
ipcRenderer.once('response-update-preferences', (event, conf) => {
|
||||
ipcRenderer.removeAllListeners('error-update-preferences')
|
||||
commit('updateAppearance', conf.appearance)
|
||||
dispatch('App/loadPreferences', null, { root: true })
|
||||
})
|
||||
},
|
||||
updateDisplayNameStyle ({ dispatch, commit, state }, value) {
|
||||
const newAppearance = Object.assign({}, state.appearance, {
|
||||
displayNameStyle: value
|
||||
})
|
||||
const config = {
|
||||
appearance: newAppearance
|
||||
}
|
||||
ipcRenderer.send('update-preferences', config)
|
||||
ipcRenderer.once('error-update-preferences', (event, err) => {
|
||||
ipcRenderer.removeAllListeners('response-update-preferences')
|
||||
})
|
||||
ipcRenderer.once('response-update-preferences', (event, conf) => {
|
||||
ipcRenderer.removeAllListeners('error-update-preferences')
|
||||
dispatch('App/loadPreferences', null, { root: true })
|
||||
commit('updateAppearance', conf.appearance)
|
||||
})
|
||||
},
|
||||
updateTimeFormat ({ dispatch, commit, state }, value) {
|
||||
const newAppearance = Object.assign({}, state.appearance, {
|
||||
timeFormat: value
|
||||
})
|
||||
const config = {
|
||||
appearance: newAppearance
|
||||
}
|
||||
ipcRenderer.send('update-preferences', config)
|
||||
ipcRenderer.once('error-update-preferences', (event, err) => {
|
||||
ipcRenderer.removeAllListeners('response-update-preferences')
|
||||
})
|
||||
ipcRenderer.once('response-update-preferences', (event, conf) => {
|
||||
ipcRenderer.removeAllListeners('error-update-preferences')
|
||||
dispatch('App/loadPreferences', null, { root: true })
|
||||
commit('updateAppearance', conf.appearance)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,5 @@
|
|||
import { ipcRenderer } from 'electron'
|
||||
import Visibility from '~/src/constants/visibility'
|
||||
import DisplayStyle from '~/src/constants/displayStyle'
|
||||
import Theme from '~/src/constants/theme'
|
||||
import TimeFormat from '~/src/constants/timeFormat'
|
||||
|
||||
const General = {
|
||||
namespaced: true,
|
||||
|
|
@ -12,11 +9,7 @@ const General = {
|
|||
fav_rb: true,
|
||||
toot: true
|
||||
},
|
||||
theme: Theme.Light.key,
|
||||
fontSize: 14,
|
||||
displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
|
||||
tootVisibility: Visibility.Public.value,
|
||||
timeFormat: TimeFormat.Absolute.value
|
||||
tootVisibility: Visibility.Public.value
|
||||
},
|
||||
loading: false
|
||||
},
|
||||
|
|
@ -46,77 +39,6 @@ const General = {
|
|||
})
|
||||
})
|
||||
},
|
||||
updateTheme ({ dispatch, commit, state }, theme) {
|
||||
commit('changeLoading', true)
|
||||
const newGeneral = Object.assign({}, state.general, {
|
||||
theme: theme
|
||||
})
|
||||
const config = {
|
||||
general: newGeneral
|
||||
}
|
||||
ipcRenderer.send('update-preferences', config)
|
||||
ipcRenderer.once('error-update-preferences', (event, err) => {
|
||||
ipcRenderer.removeAllListeners('response-update-preferences')
|
||||
commit('changeLoading', false)
|
||||
})
|
||||
ipcRenderer.once('response-update-preferences', (event, conf) => {
|
||||
ipcRenderer.removeAllListeners('error-update-preferences')
|
||||
commit('updateGeneral', conf.general)
|
||||
dispatch('App/loadPreferences', null, { root: true })
|
||||
commit('changeLoading', false)
|
||||
})
|
||||
},
|
||||
updateFontSize ({ dispatch, commit, state }, fontSize) {
|
||||
const newGeneral = Object.assign({}, state.general, {
|
||||
fontSize: fontSize
|
||||
})
|
||||
const config = {
|
||||
general: newGeneral
|
||||
}
|
||||
ipcRenderer.send('update-preferences', config)
|
||||
ipcRenderer.once('error-update-preferences', (event, err) => {
|
||||
ipcRenderer.removeAllListeners('response-update-preferences')
|
||||
})
|
||||
ipcRenderer.once('response-update-preferences', (event, conf) => {
|
||||
ipcRenderer.removeAllListeners('error-update-preferences')
|
||||
commit('updateGeneral', conf.general)
|
||||
dispatch('App/loadPreferences', null, { root: true })
|
||||
})
|
||||
},
|
||||
updateDisplayNameStyle ({ dispatch, commit, state }, value) {
|
||||
const newGeneral = Object.assign({}, state.general, {
|
||||
displayNameStyle: value
|
||||
})
|
||||
const config = {
|
||||
general: newGeneral
|
||||
}
|
||||
ipcRenderer.send('update-preferences', config)
|
||||
ipcRenderer.once('error-update-preferences', (event, err) => {
|
||||
ipcRenderer.removeAllListeners('response-update-preferences')
|
||||
})
|
||||
ipcRenderer.once('response-update-preferences', (event, conf) => {
|
||||
ipcRenderer.removeAllListeners('error-update-preferences')
|
||||
dispatch('App/loadPreferences', null, { root: true })
|
||||
commit('updateGeneral', conf.general)
|
||||
})
|
||||
},
|
||||
updateTimeFormat ({ dispatch, commit, state }, value) {
|
||||
const newGeneral = Object.assign({}, state.general, {
|
||||
timeFormat: value
|
||||
})
|
||||
const config = {
|
||||
general: newGeneral
|
||||
}
|
||||
ipcRenderer.send('update-preferences', config)
|
||||
ipcRenderer.once('error-update-preferences', (event, err) => {
|
||||
ipcRenderer.removeAllListeners('response-update-preferences')
|
||||
})
|
||||
ipcRenderer.once('response-update-preferences', (event, conf) => {
|
||||
ipcRenderer.removeAllListeners('error-update-preferences')
|
||||
dispatch('App/loadPreferences', null, { root: true })
|
||||
commit('updateGeneral', conf.general)
|
||||
})
|
||||
},
|
||||
updateTootVisibility ({ dispatch, commit, state }, value) {
|
||||
const newGeneral = Object.assign({}, state.general, {
|
||||
tootVisibility: value
|
||||
|
|
|
|||
Loading…
Reference in New Issue