enable-animations --> reduce-motion
This commit is contained in:
		
							parent
							
								
									f7228e79bb
								
							
						
					
					
						commit
						cda3635d97
					
				
					 9 changed files with 15 additions and 15 deletions
				
			
		| 
						 | 
					@ -119,7 +119,7 @@ common:
 | 
				
			||||||
  always-show-nsfw: "常に閲覧注意のメディアを表示する"
 | 
					  always-show-nsfw: "常に閲覧注意のメディアを表示する"
 | 
				
			||||||
  always-mark-nsfw: "常にメディアを閲覧注意として投稿"
 | 
					  always-mark-nsfw: "常にメディアを閲覧注意として投稿"
 | 
				
			||||||
  show-full-acct: "ユーザー名のホストを省略しない"
 | 
					  show-full-acct: "ユーザー名のホストを省略しない"
 | 
				
			||||||
  enable-animations: "アニメーションを使用"
 | 
					  reduce-motion: "UIの動きを減らす"
 | 
				
			||||||
  this-setting-is-this-device-only: "このデバイスのみ"
 | 
					  this-setting-is-this-device-only: "このデバイスのみ"
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  do-not-use-in-production: 'これは開発ビルドです。本番環境で使用しないでください。'
 | 
					  do-not-use-in-production: 'これは開発ビルドです。本番環境で使用しないでください。'
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -10,7 +10,7 @@
 | 
				
			||||||
	</div>
 | 
						</div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	<!-- トランジションを有効にするとなぜかメモリリークする -->
 | 
						<!-- トランジションを有効にするとなぜかメモリリークする -->
 | 
				
			||||||
	<component :is="$store.state.device.animations ? 'transition-group' : 'div'" name="mk-notes" class="notes transition" tag="div">
 | 
						<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="notes transition" tag="div">
 | 
				
			||||||
		<template v-for="(note, i) in _notes">
 | 
							<template v-for="(note, i) in _notes">
 | 
				
			||||||
			<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
 | 
								<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
 | 
				
			||||||
			<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
 | 
								<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -2,7 +2,7 @@
 | 
				
			||||||
<div class="mk-notifications">
 | 
					<div class="mk-notifications">
 | 
				
			||||||
	<div class="notifications" v-if="notifications.length != 0">
 | 
						<div class="notifications" v-if="notifications.length != 0">
 | 
				
			||||||
		<!-- トランジションを有効にするとなぜかメモリリークする -->
 | 
							<!-- トランジションを有効にするとなぜかメモリリークする -->
 | 
				
			||||||
		<component :is="$store.state.device.animations ? 'transition-group' : 'div'" name="mk-notifications" class="transition" tag="div">
 | 
							<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notifications" class="transition" tag="div">
 | 
				
			||||||
			<template v-for="(notification, i) in _notifications">
 | 
								<template v-for="(notification, i) in _notifications">
 | 
				
			||||||
				<div class="notification" :class="notification.type" :key="notification.id">
 | 
									<div class="notification" :class="notification.type" :key="notification.id">
 | 
				
			||||||
					<mk-time :time="notification.createdAt"/>
 | 
										<mk-time :time="notification.createdAt"/>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -60,7 +60,7 @@
 | 
				
			||||||
				<button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button>
 | 
									<button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button>
 | 
				
			||||||
				<mk-switch v-model="darkmode" text="%i18n:@dark-mode%"/>
 | 
									<mk-switch v-model="darkmode" text="%i18n:@dark-mode%"/>
 | 
				
			||||||
				<mk-switch v-model="circleIcons" text="%i18n:@circle-icons%"/>
 | 
									<mk-switch v-model="circleIcons" text="%i18n:@circle-icons%"/>
 | 
				
			||||||
				<mk-switch v-model="animations" text="%i18n:common.enable-animations%"/>
 | 
									<mk-switch v-model="reduceMotion" text="%i18n:common.reduce-motion%"/>
 | 
				
			||||||
				<mk-switch v-model="contrastedAcct" text="%i18n:@contrasted-acct%"/>
 | 
									<mk-switch v-model="contrastedAcct" text="%i18n:@contrasted-acct%"/>
 | 
				
			||||||
				<mk-switch v-model="showFullAcct" text="%i18n:common.show-full-acct%"/>
 | 
									<mk-switch v-model="showFullAcct" text="%i18n:common.show-full-acct%"/>
 | 
				
			||||||
				<mk-switch v-model="gradientWindowHeader" text="%i18n:@gradient-window-header%"/>
 | 
									<mk-switch v-model="gradientWindowHeader" text="%i18n:@gradient-window-header%"/>
 | 
				
			||||||
| 
						 | 
					@ -247,9 +247,9 @@ export default Vue.extend({
 | 
				
			||||||
		};
 | 
							};
 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
	computed: {
 | 
						computed: {
 | 
				
			||||||
		animations: {
 | 
							reduceMotion: {
 | 
				
			||||||
			get() { return this.$store.state.device.animations; },
 | 
								get() { return this.$store.state.device.reduceMotion; },
 | 
				
			||||||
			set(value) { this.$store.commit('device/set', { key: 'animations', value }); }
 | 
								set(value) { this.$store.commit('device/set', { key: 'reduceMotion', value }); }
 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		apiViaStream: {
 | 
							apiViaStream: {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,7 +1,7 @@
 | 
				
			||||||
<template>
 | 
					<template>
 | 
				
			||||||
<div class="oxynyeqmfvracxnglgulyqfgqxnxmehl">
 | 
					<div class="oxynyeqmfvracxnglgulyqfgqxnxmehl">
 | 
				
			||||||
	<!-- トランジションを有効にするとなぜかメモリリークする -->
 | 
						<!-- トランジションを有効にするとなぜかメモリリークする -->
 | 
				
			||||||
	<component :is="$store.state.device.animations ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications">
 | 
						<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications">
 | 
				
			||||||
		<template v-for="(notification, i) in _notifications">
 | 
							<template v-for="(notification, i) in _notifications">
 | 
				
			||||||
			<x-notification class="notification" :notification="notification" :key="notification.id"/>
 | 
								<x-notification class="notification" :notification="notification" :key="notification.id"/>
 | 
				
			||||||
			<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'">
 | 
								<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'">
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -14,7 +14,7 @@
 | 
				
			||||||
	</div>
 | 
						</div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	<!-- トランジションを有効にするとなぜかメモリリークする -->
 | 
						<!-- トランジションを有効にするとなぜかメモリリークする -->
 | 
				
			||||||
	<component :is="$store.state.device.animations ? 'transition-group' : 'div'" name="mk-notes" class="transition" tag="div">
 | 
						<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="transition" tag="div">
 | 
				
			||||||
		<template v-for="(note, i) in _notes">
 | 
							<template v-for="(note, i) in _notes">
 | 
				
			||||||
			<mk-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
 | 
								<mk-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
 | 
				
			||||||
			<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
 | 
								<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,7 +1,7 @@
 | 
				
			||||||
<template>
 | 
					<template>
 | 
				
			||||||
<div class="mk-notifications">
 | 
					<div class="mk-notifications">
 | 
				
			||||||
	<!-- トランジションを有効にするとなぜかメモリリークする -->
 | 
						<!-- トランジションを有効にするとなぜかメモリリークする -->
 | 
				
			||||||
	<component :is="$store.state.device.animations ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications">
 | 
						<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications">
 | 
				
			||||||
		<template v-for="(notification, i) in _notifications">
 | 
							<template v-for="(notification, i) in _notifications">
 | 
				
			||||||
			<mk-notification :notification="notification" :key="notification.id"/>
 | 
								<mk-notification :notification="notification" :key="notification.id"/>
 | 
				
			||||||
			<p class="date" :key="notification.id + '_date'" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date">
 | 
								<p class="date" :key="notification.id + '_date'" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date">
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -13,7 +13,7 @@
 | 
				
			||||||
				<section>
 | 
									<section>
 | 
				
			||||||
					<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
 | 
										<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
 | 
				
			||||||
					<ui-switch v-model="circleIcons">%i18n:@circle-icons%</ui-switch>
 | 
										<ui-switch v-model="circleIcons">%i18n:@circle-icons%</ui-switch>
 | 
				
			||||||
					<ui-switch v-model="animations">%i18n:common.enable-animations% (%i18n:common.this-setting-is-this-device-only%)</ui-switch>
 | 
										<ui-switch v-model="reduceMotion">%i18n:common.reduce-motion% (%i18n:common.this-setting-is-this-device-only%)</ui-switch>
 | 
				
			||||||
					<ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
 | 
										<ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
 | 
				
			||||||
					<ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch>
 | 
										<ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch>
 | 
				
			||||||
					<ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
 | 
										<ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
 | 
				
			||||||
| 
						 | 
					@ -169,9 +169,9 @@ export default Vue.extend({
 | 
				
			||||||
			set(value) { this.$store.commit('device/set', { key: 'darkmode', value }); }
 | 
								set(value) { this.$store.commit('device/set', { key: 'darkmode', value }); }
 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		animations: {
 | 
							reduceMotion: {
 | 
				
			||||||
			get() { return this.$store.state.device.animations; },
 | 
								get() { return this.$store.state.device.reduceMotion; },
 | 
				
			||||||
			set(value) { this.$store.commit('device/set', { key: 'animations', value }); }
 | 
								set(value) { this.$store.commit('device/set', { key: 'reduceMotion', value }); }
 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		alwaysShowNsfw: {
 | 
							alwaysShowNsfw: {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -38,7 +38,7 @@ const defaultSettings = {
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const defaultDeviceSettings = {
 | 
					const defaultDeviceSettings = {
 | 
				
			||||||
	animations: true,
 | 
						reduceMotion: false,
 | 
				
			||||||
	apiViaStream: true,
 | 
						apiViaStream: true,
 | 
				
			||||||
	autoPopout: false,
 | 
						autoPopout: false,
 | 
				
			||||||
	darkmode: false,
 | 
						darkmode: false,
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue