diff options
author | René Gieling <github@dartcafe.de> | 2022-07-21 12:50:56 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-07-21 12:50:56 +0300 |
commit | 5a862499f1b5afe3ff1641d8c4fb94182796f780 (patch) | |
tree | 26f3c8fed4d7aeb0dfc5db19b9a7b858f642ad2c /src | |
parent | 8e2807b28e1ea9ae492d84d3a14e28d5a6e33aec (diff) | |
parent | 564ca41fca8f3cc0162c86b0d88be09eb50041e0 (diff) |
Merge pull request #2511 from nextcloud/enh/comments-design
experimental comment styling
Diffstat (limited to 'src')
-rw-r--r-- | src/js/components/Comments/CommentItem.vue | 42 | ||||
-rw-r--r-- | src/js/components/Comments/Comments.vue | 3 | ||||
-rw-r--r-- | src/js/components/Settings/UserSettings/StyleSettings.vue | 14 | ||||
-rw-r--r-- | src/js/store/modules/settings.js | 1 |
4 files changed, 56 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: { diff --git a/src/js/store/modules/settings.js b/src/js/store/modules/settings.js index 857b11b8..750313ba 100644 --- a/src/js/store/modules/settings.js +++ b/src/js/store/modules/settings.js @@ -28,6 +28,7 @@ const defaultSettings = () => ({ user: { useDashboardStyling: false, useIndividualStyling: false, + useCommentsAlternativeStyling: false, individualBgColor: false, individualImage: false, individualImageUrl: '', |