experimental comment stylingenh/comments-design

Signed-off-by: dartcafe <github@dartcafe.de>

3 files changed, 55 insertions, 4 deletions

diff --git a/src/js/components/Comments/CommentItem.vue b/src/js/components/Comments/CommentItem.vue
index 29954702..2db13dec 100644
--- a/src/js/components/Comments/CommentItem.vue
+++ b/src/js/components/Comments/CommentItem.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div class="comment-item">
+	<div :class="['comment-item' , {currentuser: isCurrentUser}]">
 		<UserItem v-bind="comment.user" hide-names />
 		<div class="comment-item__content">
 			<span class="comment-item__user">{{ comment.user.displayName }}</span>
@@ -65,10 +65,16 @@ export default {
 	computed: {
 		...mapState({
 			acl: (state) => state.poll.acl,
+			currentUser: (state) => state.poll.acl.userId,
 		}),
+
 		dateCommentedRelative() {
 			return moment.unix(this.comment.timestamp).fromNow()
 		},
+
+		isCurrentUser() {
+			return this.currentUser === this.comment.user.userId
+		},
 	},
 
 	methods: {
@@ -114,7 +120,6 @@ export default {
 		padding-top: 2px;
 
 		.material-design-icon {
-			// display: none;
 			visibility: hidden;
 		}
 
@@ -126,10 +131,10 @@ export default {
 				background: var(--color-background-hover);
 				.material-design-icon {
 					visibility: visible;
-					// display: flex;
 				}
 			}
 		}
+
 		.comment-item__comment {
 			hyphens: auto;
 			flex: 1;
@@ -139,4 +144,35 @@ export default {
 		}
 	}
 
+	// experimental
+	.alternativestyle {
+		.comment-item {
+		flex-direction: row-reverse;
+			&.currentuser {
+				flex-direction: row;
+			}
+		}
+
+		.comment-item__content {
+			border: solid 1px var(--color-primary-element-light);
+			border-radius: var(--border-radius-large);
+			background-color: var(--color-primary-light);
+			box-shadow: 2px 2px 6px var(--color-box-shadow);
+			padding-left: 8px;
+			padding-bottom: 10px;
+
+			.comment-item__subcomment {
+				margin-right: 4px;
+
+				&:hover {
+					background: var(--color-primary-hover);
+					color: var(--color-primary-light-hover);
+					margin-left: -4px;
+					padding-left: 4px;
+					border-radius: var(--border-radius-large);
+				}
+			}
+		}
+	}
+
 </style>
diff --git a/src/js/components/Comments/Comments.vue b/src/js/components/Comments/Comments.vue
index 179d657c..d384f9e2 100644
--- a/src/js/components/Comments/Comments.vue
+++ b/src/js/components/Comments/Comments.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<transition-group name="fade" class="comments" tag="ul">
+	<transition-group name="fade" :class="['comments' , {'alternativestyle': commentStyling}]" tag="ul">
 		<CommentItem v-for="(comment) in sortedList"
 			:key="comment.id"
 			:comment="comment"
@@ -49,6 +49,7 @@ export default {
 	computed: {
 		...mapState({
 			comments: (state) => state.comments.list,
+			commentStyling: (state) => state.settings.user.useCommentsAlternativeStyling,
 		}),
 
 		sortedList() {
diff --git a/src/js/components/Settings/UserSettings/StyleSettings.vue b/src/js/components/Settings/UserSettings/StyleSettings.vue
index 31a71705..384e5c90 100644
--- a/src/js/components/Settings/UserSettings/StyleSettings.vue
+++ b/src/js/components/Settings/UserSettings/StyleSettings.vue
@@ -65,6 +65,11 @@
 				</div>
 			</div>
 		</div>
+		<div class="user_settings">
+			<CheckboxRadioSwitch :checked.sync="useCommentsAlternativeStyling" type="switch">
+				{{ t('polls', 'Use alternative styling for the comments sidebar') }}
+			</CheckboxRadioSwitch>
+		</div>
 	</div>
 </template>
 
@@ -151,6 +156,15 @@ export default {
 			},
 		},
 
+		useCommentsAlternativeStyling: {
+			get() {
+				return !!this.settings.useCommentsAlternativeStyling
+			},
+			set(value) {
+				this.writeValue({ useCommentsAlternativeStyling: +value })
+			},
+		},
+
 	},
 
 	methods: {