Add inline actions

Signed-off-by: Julius Härtl <jus@bitgrid.net>

2 files changed, 28 insertions, 23 deletions

diff --git a/src/components/TimelineEntry.vue b/src/components/TimelineEntry.vue
index a6a621f2..19c08d88 100644
--- a/src/components/TimelineEntry.vue
+++ b/src/components/TimelineEntry.vue
@@ -25,17 +25,20 @@
 				</div>
 				<!-- eslint-disable-next-line vue/no-v-html -->
 				<div class="post-message" v-html="formatedMessage" />
+				<div v-click-outside="hidePopoverMenu" class="post-actions">
+					<a v-tooltip.bottom="t('social', 'Reply')" class="icon-reply" @click.prevent="reply" />
+					<div v-tooltip.bottom="t('social', 'More actions')" class="post-actions-more">
+						<a class="icon-more" @click.prevent="togglePopoverMenu" />
+						<div :class="{open: menuOpened}" class="popovermenu">
+							<popover-menu :menu="popoverMenu" />
+						</div>
+					</div>
+				</div>
 			</div>
 			<div>
 				<div :data-timestamp="timestamp" class="post-timestamp live-relative-timestamp">
 					{{ relativeTimestamp }}
 				</div>
-				<div v-click-outside="hidePopoverMenu" class="post-actions">
-					<a class="icon-more" @click.prevent="togglePopoverMenu" />
-					<div :class="{open: menuOpened}" class="popovermenu">
-						<popover-menu :menu="popoverMenu" />
-					</div>
-				</div>
 			</div>
 		</div>
 	</div>
@@ -69,11 +72,6 @@ export default {
 	computed: {
 		popoverMenu() {
 			var actions = [
-				{
-					action: () => { this.$root.$emit('composer-reply', this.item) },
-					icon: 'icon-reply',
-					text: t('social', 'Reply to post')
-				}
 			]
 			if (this.item.actor_info.account === this.cloudId) {
 				actions.push(
@@ -118,6 +116,9 @@ export default {
 	methods: {
 		userDisplayName(actorInfo) {
 			return actorInfo.name !== '' ? actorInfo.name : actorInfo.preferredUsername
+		},
+		reply() {
+			this.$root.$emit('composer-reply', this.item)
 		}
 	}
 }
@@ -128,10 +129,6 @@ export default {
 		margin-bottom: 10px;
 	}
 
-	.social__welcome h3 {
-		margin-top: 0;
-	}
-
 	.post-author {
 		font-weight: bold;
 	}
@@ -158,15 +155,24 @@ export default {
 	}
 
 	.post-actions {
-		position: relative;
-		width: 44px;
+		margin-left: -13px;
 		height: 44px;
-		float: right;
 
+		.post-actions-more {
+			position: relative;
+			width: 44px;
+			height: 34px;
+			display: inline-block;
+		}
+		.icon-reply,
 		.icon-more {
 			display: inline-block;
 			width: 44px;
-			height: 44px;
+			height: 34px;
+			opacity: .5;
+			&:hover, &:focus {
+				opacity: 1;
+			}
 		}
 	}
 
@@ -184,10 +190,6 @@ export default {
 	.post-timestamp {
 		opacity: .7;
 	}
-
-	.icon-reply {
-		background-image: url(../../img/reply.svg);
-	}
 </style>
 <style>
 	.post-message a {
diff --git a/src/main.js b/src/main.js
index f1059a7e..1eb2ff56 100644
--- a/src/main.js
+++ b/src/main.js
@@ -29,6 +29,8 @@ import router from './router'
 import vuetwemoji from 'vue-twemoji'
 import contenteditableDirective from 'vue-contenteditable-directive'
 import ClickOutside from 'vue-click-outside'
+import VTooltip from 'v-tooltip'
+
 sync(store, router)
 
 // CSP config for webpack dynamic chunk loading
@@ -46,6 +48,7 @@ Vue.prototype.OC = OC
 Vue.prototype.OCA = OCA
 
 Vue.directive('ClickOutside', ClickOutside)
+Vue.use(VTooltip)
 Vue.use(contenteditableDirective)
 Vue.use(vuetwemoji, {
 	baseUrl: OC.linkTo('social', 'img/'), // can set to local folder of emojis. default: https://twemoji.maxcdn.com/