🎨

src/client/app/desktop/views/components/activity.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="mk-activity">
-	<mk-widget-container :show-header="design == 0" :naked="design == 2">
+	<ui-container :show-header="design == 0" :naked="design == 2">
 		<template slot="header"><fa icon="chart-bar"/>{{ $t('title') }}</template>
 		<button slot="func" :title="$t('toggle')" @click="toggle"><fa icon="sort"/></button>
 
@@ -9,7 +9,7 @@
 			<x-calendar v-show="view == 0" :data="[].concat(activity)"/>
 			<x-chart v-show="view == 1" :data="[].concat(activity)"/>
 		</template>
-	</mk-widget-container>
+	</ui-container>
 </div>
 </template>
 

src/client/app/desktop/views/components/index.ts

@@ -18,7 +18,7 @@ import activity from './activity.vue';
 import friendsMaker from './friends-maker.vue';
 import userCard from './user-card.vue';
 import userListTimeline from './user-list-timeline.vue';
-import widgetContainer from './widget-container.vue';
+import uiContainer from './ui-container.vue';
 
 Vue.component('mk-ui', ui);
 Vue.component('mk-ui-notification', uiNotification);
@@ -38,4 +38,4 @@ Vue.component('mk-activity', activity);
 Vue.component('mk-friends-maker', friendsMaker);
 Vue.component('mk-user-card', userCard);
 Vue.component('mk-user-list-timeline', userListTimeline);
-Vue.component('mk-widget-container', widgetContainer);
+Vue.component('ui-container', uiContainer);

src/client/app/desktop/views/components/ui-container.vue

@@ -1,10 +1,16 @@
 <template>
-<div class="mk-widget-container" :class="{ naked }">
+<div class="kedshtep" :class="{ naked }">
 	<header v-if="showHeader">
 		<div class="title"><slot name="header"></slot></div>
 		<slot name="func"></slot>
+		<button v-if="bodyTogglable" @click="() => showBody = !showBody">
+			<template v-if="showBody"><fa icon="angle-up"/></template>
+			<template v-else><fa icon="angle-down"/></template>
+		</button>
 	</header>
-	<slot></slot>
+	<div v-show="showBody">
+		<slot></slot>
+	</div>
 </div>
 </template>
 
@@ -19,13 +25,22 @@ export default Vue.extend({
 		naked: {
 			type: Boolean,
 			default: false
-		}
+		},
+		bodyTogglable: {
+			type: Boolean,
+			default: false
+		},
+	},
+	data() {
+		return {
+			showBody: true
+		};
 	}
 });
 </script>
 
 <style lang="stylus" scoped>
-.mk-widget-container
+.kedshtep
 	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)