From febfb97bb4cb6565434c503a3809f27eaf8c13b6 Mon Sep 17 00:00:00 2001
From: MeiMei <30769358+mei23@users.noreply.github.com>
Date: Sun, 24 Feb 2019 10:38:53 +0900
Subject: [PATCH] Remember container state on user page (#4361)

* Remember container state on user page

* remove unnecessary code
---
 src/client/app/desktop/views/components/ui-container.vue  | 3 ++-
 .../app/desktop/views/deck/deck.user-column.home.vue      | 8 ++++++--
 src/client/app/desktop/views/home/user/user.home.vue      | 4 +++-
 src/client/app/desktop/views/home/user/user.photos.vue    | 4 +++-
 src/client/app/store.ts                                   | 4 +++-
 5 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/client/app/desktop/views/components/ui-container.vue b/src/client/app/desktop/views/components/ui-container.vue
index abe026c240..3bd335b54c 100644
--- a/src/client/app/desktop/views/components/ui-container.vue
+++ b/src/client/app/desktop/views/components/ui-container.vue
@@ -3,7 +3,7 @@
 	<header v-if="showHeader">
 		<div class="title"><slot name="header"></slot></div>
 		<slot name="func"></slot>
-		<button v-if="bodyTogglable" @click="() => showBody = !showBody">
+		<button v-if="bodyTogglable" @click="toggleContent(!showBody)">
 			<template v-if="showBody"><fa icon="angle-up"/></template>
 			<template v-else><fa icon="angle-down"/></template>
 		</button>
@@ -48,6 +48,7 @@ export default Vue.extend({
 	methods: {
 		toggleContent(show: boolean) {
 			this.showBody = show;
+			this.$emit('toggle', show);
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/deck/deck.user-column.home.vue b/src/client/app/desktop/views/deck/deck.user-column.home.vue
index 38a0904ef5..93a5a56c03 100644
--- a/src/client/app/desktop/views/deck/deck.user-column.home.vue
+++ b/src/client/app/desktop/views/deck/deck.user-column.home.vue
@@ -6,7 +6,9 @@
 			<x-note v-for="n in user.pinnedNotes" :key="n.id" :note="n" :mini="true"/>
 		</div>
 	</ui-container>
-	<ui-container v-if="images.length > 0" :body-togglable="true">
+	<ui-container v-if="images.length > 0" :body-togglable="true"
+		:expanded="$store.state.device.expandUsersPhotos"
+		@toggle="expanded => $store.commit('device/set', { key: 'expandUsersPhotos', value: expanded })">
 		<template #header><fa :icon="['far', 'images']"/> {{ $t('images') }}</template>
 		<div class="sainvnaq">
 			<router-link v-for="image in images"
@@ -17,7 +19,9 @@
 			></router-link>
 		</div>
 	</ui-container>
-	<ui-container :body-togglable="true">
+	<ui-container :body-togglable="true"
+		:expanded="$store.state.device.expandUsersActivity"
+		@toggle="expanded => $store.commit('device/set', { key: 'expandUsersActivity', value: expanded })">
 		<template #header><fa :icon="['far', 'chart-bar']"/> {{ $t('activity') }}</template>
 		<div>
 			<div ref="chart"></div>
diff --git a/src/client/app/desktop/views/home/user/user.home.vue b/src/client/app/desktop/views/home/user/user.home.vue
index 6e69072109..ec533efd3e 100644
--- a/src/client/app/desktop/views/home/user/user.home.vue
+++ b/src/client/app/desktop/views/home/user/user.home.vue
@@ -3,7 +3,9 @@
 	<mk-note-detail v-for="n in user.pinnedNotes" :key="n.id" :note="n" :compact="true"/>
 	<!--<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>-->
 	<div class="activity">
-		<ui-container :body-togglable="true">
+		<ui-container :body-togglable="true"
+			:expanded="$store.state.device.expandUsersActivity"
+			@toggle="expanded => $store.commit('device/set', { key: 'expandUsersActivity', value: expanded })">
 			<template #header><fa icon="chart-bar"/>{{ $t('activity') }}</template>
 			<x-activity :user="user" :limit="35" style="padding: 16px;"/>
 		</ui-container>
diff --git a/src/client/app/desktop/views/home/user/user.photos.vue b/src/client/app/desktop/views/home/user/user.photos.vue
index f1f29be47a..aff1c96c9a 100644
--- a/src/client/app/desktop/views/home/user/user.photos.vue
+++ b/src/client/app/desktop/views/home/user/user.photos.vue
@@ -1,5 +1,7 @@
 <template>
-<ui-container :body-togglable="true">
+<ui-container :body-togglable="true"
+	:expanded="$store.state.device.expandUsersPhotos"
+	@toggle="expanded => $store.commit('device/set', { key: 'expandUsersPhotos', value: expanded })">
 	<template #header><fa icon="camera"/> {{ $t('title') }}</template>
 
 	<div class="dzsuvbsrrrwobdxifudxuefculdfiaxd">
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index a91164c0b5..842563f246 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -68,7 +68,9 @@ const defaultDeviceSettings = {
 	mobileNotificationPosition: 'bottom',
 	deckMode: false,
 	useOsDefaultEmojis: false,
-	disableShowingAnimatedImages: false
+	disableShowingAnimatedImages: false,
+	expandUsersPhotos: true,
+	expandUsersActivity: true,
 };
 
 export default (os: MiOS) => new Vuex.Store({