Merge pull request #112 from nextcloud-gmbh/design/noid/papercuts

Small design fixes

src/App.vue

@@ -9,7 +9,7 @@
 				<p v-if="!serverData.checks.checks.wellknown">{{ t('social', 'Social needs the .well-known automatic discovery to be properly set up. If Nextcloud is not installed in the root of the domain, it is often the case that Nextcloud can\'t configure this automatically. To use Social, the admin of this Nextcloud instance needs to manually configure the .well-known redirects: ') }}<a class="external_link" href="https://docs.nextcloud.com/server/15/go.php?to=admin-setup-well-known-URL" target="_blank"
 					rel="noreferrer noopener">{{ t('social', 'Open documentation') }} ↗</a></p>
 			</div>
-			<Search v-if="searchTerm != ''" :term="searchTerm" />
+			<Search v-if="searchTerm !== ''" :term="searchTerm" />
 			<router-view v-if="searchTerm === ''" :key="$route.fullPath" />
 		</div>
 	</div>
@@ -178,7 +178,9 @@ export default {
 			this.$store.commit('setServerData', JSON.parse(document.getElementById('serverData').dataset.server))
 		}
 
-		this.search = new OCA.Search(this.search, this.resetSearch)
+		if (!this.serverData.public) {
+			this.search = new OCA.Search(this.search, this.resetSearch)
+		}
 	},
 	methods: {
 		hideInfo() {

src/components/Composer.vue

@@ -35,14 +35,16 @@
 				<div v-contenteditable:post.dangerousHTML="canType" ref="composerInput" class="message"
 					placeholder="Share a thought…" @keyup.enter="keyup" />
 			</vue-tribute>
-			<emoji-picker :search="search" class="emoji-picker-wrapper" @emoji="insert">
+			<emoji-picker ref="emojiPicker" :search="search" class="emoji-picker-wrapper"
+				@emoji="insert">
 				<a v-tooltip="'Insert emoji'" slot="emoji-invoker" slot-scope="{ events }"
 					class="emoji-invoker" tabindex="0" v-on="events"
 					@keyup.enter="events.click" @keyup.space="events.click" />
 				<div slot="emoji-picker" slot-scope="{ emojis, insert, display }" class="emoji-picker popovermenu">
 					<div>
 						<div>
-							<input v-focus-on-create v-model="search" type="text">
+							<input v-focus-on-create v-model="search" type="text"
+								@keyup.enter="insert(emojis)">
 						</div>
 						<div>
 							<div v-for="(emojiGroup, category) in emojis" :key="category">
@@ -349,7 +351,7 @@ export default {
 								key: user.preferredUsername,
 								value: user.account,
 								url: user.url,
-								avatar: user.local ? OC.generateUrl(`/avatar/${user.preferredUsername}/32`) : ''// TODO: use real avatar from server
+								avatar: user.local ? OC.generateUrl(`/avatar/${user.preferredUsername}/32`) : OC.generateUrl(`apps/social/api/v1/global/actor/avatar?id=${user.id}`)
 							})
 						}
 						cb(users)
@@ -445,8 +447,15 @@ export default {
 	},
 	methods: {
 		insert(emoji) {
-			this.post += this.$twemoji.parse(emoji)
+			if (typeof emoji === 'object') {
-			this.$refs.composerInput.innerHTML = this.post
+				let category = Object.keys(emoji)[0]
+				let emojis = emoji[category]
+				let firstEmoji = Object.keys(emojis)[0]
+				emoji = emojis[firstEmoji]
+			}
+			this.post += this.$twemoji.parse(emoji) + ' '
+			this.$refs.composerInput.innerHTML += this.$twemoji.parse(emoji) + ' '
+			this.$refs.emojiPicker.hide()
 		},
 		togglePopoverMenu() {
 			this.menuOpened = !this.menuOpened
@@ -496,7 +505,7 @@ export default {
 			})
 		},
 		remoteSearch(text) {
-			return axios.get(OC.generateUrl('apps/social/api/v1/accounts/search?search=' + text))
+			return axios.get(OC.generateUrl('apps/social/api/v1/global/accounts/search?search=' + text))
 		}
 	}
 }

src/components/Search.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div class="social__container">
+	<div class="social__wrapper">
 		<div v-if="results.length < 1" id="emptycontent" :class="{'icon-loading': loading}">
 			<div v-if="!loading" class="icon-search" />
 			<h2 v-if="!loading">{{ t('social', 'No accounts found') }}</h2>

src/components/TimelineEntry.vue

@@ -92,8 +92,10 @@ export default {
 		flex-shrink: 0;
 	}
 
-	.timestamp {
+	.post-timestamp {
-		float: right;
+		width: 120px;
+		text-align: right;
+		flex-shrink: 0;
 	}
 
 	span {

src/views/Timeline.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="social__container">
+	<div class="social__wrapper">
 		<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>