potsda.mn/mobilizon
10
4
Fork 1
Code Issues 22 Pull requests 1 Projects Releases Wiki Activity

Improve comment tree

Browse source 
Closes #862

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-11-13 12:33:39 +01:00
parent b1a9c28a97
commit 4a8284fa6d
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
3 changed files with 36 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
js/src/components/Comment/CommentTree.vue
View file

@ -45,8 +45,8 @@
type="is-primary"
class="comment-button-submit"
icon-left="send"
:aria-label="$t('Post a comment')"
/>
>{{ $t("Send") }}</b-button
>
</div>
</article>
</form>
@ -63,7 +63,7 @@
<transition-group
key="list"
name="comment-list"
v-if="comments.length"
v-if="filteredOrderedComments.length"
class="comment-list"
tag="ul"
>
@ -77,9 +77,9 @@
@delete-comment="deleteComment"
/>
</transition-group>
<div v-else class="no-comments" key="no-comments">
<empty-content v-else icon="comment" key="no-comments" :inline="true">
<span>{{ $t("No comments yet") }}</span>
</div>
</empty-content>
</transition-group>
</div>
</template>
@ -99,6 +99,7 @@ import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
import { IPerson } from "../../types/actor";
import { IEvent } from "../../types/event.model";
import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
import EmptyContent from "@/components/Utils/EmptyContent.vue";
@Component({
apollo: {
@ -119,6 +120,7 @@ import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
components: {
Comment,
IdentityPickerWrapper,
EmptyContent,
editor: () =>
import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
},
@ -364,13 +366,25 @@ export default class CommentTree extends Vue {
<style lang="scss" scoped>
@use "@/styles/_mixins" as *;
@import "~bulma/sass/utilities/mixins.sass";
form.new-comment {
padding-bottom: 1rem;
.media {
flex-wrap: wrap;
justify-content: center;
.media-left {
@include mobile {
@include margin-right(0.5rem);
@include margin-left(0.5rem);
}
}
.media-content {
display: flex;
align-items: center;
align-content: center;
width: min-content;
.field {
flex: 1;
@ -383,6 +397,7 @@ form.new-comment {
}
}
}
}
.no-comments {
display: flex;

4
js/tests/unit/specs/components/Comment/CommentTree.spec.ts
View file

@ -162,7 +162,9 @@ describe("CommentTree", () => {
requestHandlers.eventCommentThreadsQueryHandler
).toHaveBeenCalledWith({ eventUUID: eventData.uuid });
expect(wrapper.find(".no-comments").text()).toBe("No comments yet");
expect(wrapper.findComponent({ name: "EmptyContent" }).text()).toBe(
"No comments yet"
);
expect(wrapper.html()).toMatchSnapshot();
});
});

6
js/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap
View file

@ -20,7 +20,7 @@ exports[`CommentTree renders a comment tree with comments 1`] = `
</div>
</div>
<div class="send-comment">
<b-button-stub type="is-primary" iconleft="send" nativetype="submit" tag="button" aria-label="Post a comment" class="comment-button-submit"></b-button-stub>
<b-button-stub type="is-primary" iconleft="send" nativetype="submit" tag="button" class="comment-button-submit">Send</b-button-stub>
</div>
</article>
</form>
@ -62,12 +62,12 @@ exports[`CommentTree renders an empty comment tree 1`] = `
</div>
</div>
<div class="send-comment">
<b-button-stub type="is-primary" iconleft="send" nativetype="submit" tag="button" aria-label="Post a comment" class="comment-button-submit"></b-button-stub>
<b-button-stub type="is-primary" iconleft="send" nativetype="submit" tag="button" class="comment-button-submit">Send</b-button-stub>
</div>
</article>
</form>
<transition-group-stub tag="div" name="comment-empty-list">
<div class="no-comments"><span>No comments yet</span></div>
<empty-content-stub icon="comment" inline="true"><span>No comments yet</span></empty-content-stub>
</transition-group-stub>
</div>
`;