Merge pull request #17 from nextcloud-gmbh/welcome-design

Design details: Welcome message and wording

lib/Controller/NavigationController.php

@@ -109,11 +109,13 @@ class NavigationController extends Controller {
 		$data = [
 			'serverData' => [
 				'public' => false,
+				'firstrun' => false,
 			]
 		];
 
 		try {
 			$this->actorService->createActor($this->userId, $this->userId);
+			$data['serverData']['firstrun'] = true;
 		} catch (AccountAlreadyExistsException $e) {
 			// we do nothing
 		}

src/App.vue

@@ -72,7 +72,7 @@ export default {
 					id: 'social-account',
 					classes: [],
 					icon: 'icon-user',
-					text: t('social', 'Your account'),
+					text: t('social', 'Profile'),
 					router: {
 						name: 'profile',
 						params: { account: this.currentUser.uid }

src/components/ProfileInfo.vue

@@ -28,7 +28,7 @@
 			<p>{{ accountInfo.cloudId }}</p>
 			<p v-if="accountInfo.website">Website: <a :href="accountInfo.website.value">{{ accountInfo.website.value }}</a></p>
 
-			<button v-if="!serverData.public" class="primary" @click="follow">Follow this user</button>
+			<button v-if="!serverData.public" class="primary" @click="follow">Follow</button>
 		</div>
 
 		<ul class="user-profile--sections">

src/views/Timeline.vue

@@ -1,14 +1,16 @@
 <template>
 	<div class="social__wrapper">
 		<div class="social__container">
-			<div v-if="!infoHidden" class="social__welcome">
-				<a class="close icon-close" href="#" @click="hideInfo()"><span class="hidden-visually">Close</span></a>
-				<h3>🎉{{ t('social', 'Nextcloud becomes part of the federated social networks!') }}</h3>
-				<p>
-					{{ t('social', 'We have automatically created a social account for you. Your social id is the same as the federated cloud id:') }}
-					<span class="social-id">{{ socialId }}</span>
-				</p>
-			</div>
+			<transition name="slide-fade">
+				<div v-if="showInfo" class="social__welcome">
+					<a class="close icon-close" href="#" @click="hideInfo()"><span class="hidden-visually">Close</span></a>
+					<h2>🎉 {{ t('social', 'Nextcloud becomes part of the federated social networks!') }}</h2>
+					<p>
+						{{ t('social', 'We automatically created a social account for you. Your social ID is the same as your federated cloud ID:') }}
+						<span class="social-id">{{ socialId }}</span>
+					</p>
+				</div>
+			</transition>
 			<div class="social__timeline">
 				<div class="new-post" data-id="">
 					<div class="new-post-author">
@@ -64,8 +66,7 @@
 		max-width: 700px;
 		margin: 15px auto;
 		padding: 15px;
-		border-radius: 10px;
-		background-color: var(--color-background-dark);
+		border-bottom: 1px solid var(--color-border);
 	}
 
 	.social__welcome h3 {
@@ -73,7 +74,15 @@
 	}
 
 	.social__welcome .icon-close {
-		float:right;
+		float: right;
+		padding: 22px;
+		margin: -15px;
+		opacity: .3;
+	}
+
+	.social__welcome .icon-close:hover,
+	.social__welcome .icon-close:focus {
+		opacity: 1;
 	}
 
 	.social__welcome .social-id {
@@ -88,7 +97,7 @@
 	.new-post {
 		display: flex;
 		padding: 10px;
-		background-color: var(--color-main-background);
+		background-color: var(--color-main-background-translucent);
 		position: sticky;
 		top: 47px;
 		z-index: 100;
@@ -129,6 +138,19 @@
 		position: relative;
 	}
 
+	.slide-fade-leave-active {
+		position: relative;
+		overflow: hidden;
+		transition: all .5s ease-out;
+		max-height: 200px;
+	}
+	.slide-fade-leave-to {
+		max-height: 0;
+		opacity: 0;
+		padding-top: 0;
+		padding-bottom: 0;
+	}
+
 </style>
 
 <script>
@@ -166,6 +188,9 @@ export default {
 		timeline: function() {
 			return this.$store.getters.getTimeline
 		},
+		showInfo() {
+			return this.$store.getters.getServerData.firstrun && !this.infoHidden
+		},
 		menu: function() {
 			let defaultCategories = [
 				{
@@ -180,7 +205,7 @@ export default {
 					classes: [],
 					href: '#',
 					icon: 'icon-category-user',
-					text: t('social', 'Your account')
+					text: t('social', 'Profile')
 				},
 				{
 					id: 'social-friends',