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

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

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

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

@ -162,7 +162,9 @@ describe("CommentTree", () => {
requestHandlers.eventCommentThreadsQueryHandler requestHandlers.eventCommentThreadsQueryHandler
).toHaveBeenCalledWith({ eventUUID: eventData.uuid }); ).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(); 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> </div>
<div class="send-comment"> <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> </div>
</article> </article>
</form> </form>
@ -62,12 +62,12 @@ exports[`CommentTree renders an empty comment tree 1`] = `
</div> </div>
</div> </div>
<div class="send-comment"> <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> </div>
</article> </article>
</form> </form>
<transition-group-stub tag="div" name="comment-empty-list"> <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> </transition-group-stub>
</div> </div>
`; `;