Discussions views improvements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-09-07 17:55:25 +02:00
parent d81c479aa6
commit b1ab0dabbe
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
2 changed files with 91 additions and 26 deletions

View file

@ -1,14 +1,57 @@
<template> <template>
<section class="section container"> <section class="section container">
<h1>{{ $t("Create a discussion") }}</h1> <nav class="breadcrumb" aria-label="breadcrumbs">
<ul v-if="group">
<li>
<router-link :to="{ name: RouteName.MY_GROUPS }">{{
$t("My groups")
}}</router-link>
</li>
<li>
<router-link
:to="{
name: RouteName.GROUP,
params: { preferredUsername: usernameWithDomain(group) },
}"
>{{ group.name }}</router-link
>
</li>
<li>
<router-link
:to="{
name: RouteName.DISCUSSION_LIST,
params: { preferredUsername: usernameWithDomain(group) },
}"
>{{ $t("Discussions") }}</router-link
>
</li>
<li class="is-active">
<router-link
:to="{
name: RouteName.CREATE_DISCUSSION,
params: { preferredUsername: usernameWithDomain(group) },
}"
>{{ $t("Create") }}</router-link
>
</li>
</ul>
<b-skeleton v-else-if="$apollo.loading" :animated="animated"></b-skeleton>
</nav>
<h1 class="title">{{ $t("Create a discussion") }}</h1>
<form @submit.prevent="createDiscussion"> <form @submit.prevent="createDiscussion">
<b-field <b-field
:label="$t('Title')" :label="$t('Title')"
label-for="discussion-title"
:message="errors.title" :message="errors.title"
:type="errors.title ? 'is-danger' : undefined" :type="errors.title ? 'is-danger' : undefined"
> >
<b-input aria-required="true" required v-model="discussion.title" /> <b-input
aria-required="true"
required
v-model="discussion.title"
id="discussion-title"
/>
</b-field> </b-field>
<b-field :label="$t('Text')"> <b-field :label="$t('Text')">
@ -24,7 +67,7 @@
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
import { IGroup, IPerson } from "@/types/actor"; import { IGroup, IPerson, usernameWithDomain } from "@/types/actor";
import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor"; import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
import { FETCH_GROUP } from "@/graphql/group"; import { FETCH_GROUP } from "@/graphql/group";
import { CREATE_DISCUSSION } from "@/graphql/discussion"; import { CREATE_DISCUSSION } from "@/graphql/discussion";
@ -66,6 +109,10 @@ export default class CreateDiscussion extends Vue {
errors = { title: "" }; errors = { title: "" };
RouteName = RouteName;
usernameWithDomain = usernameWithDomain;
async createDiscussion(): Promise<void> { async createDiscussion(): Promise<void> {
this.errors = { title: "" }; this.errors = { title: "" };
try { try {
@ -100,7 +147,11 @@ export default class CreateDiscussion extends Vue {
} }
</script> </script>
<style> <style lang="scss" scoped>
.container.section {
background: $white;
}
.markdown-render h1 { .markdown-render h1 {
font-size: 2em; font-size: 2em;
} }

View file

@ -46,23 +46,27 @@
</b-message> </b-message>
<section> <section>
<div class="discussion-title"> <div class="discussion-title">
<h2 class="title" v-if="discussion.title && !editTitleMode"> <h1 class="title" v-if="discussion.title && !editTitleMode">
{{ discussion.title }} {{ discussion.title }}
<span </h1>
v-if=" <b-button
currentActor.id === discussion.creator.id || icon-right="pencil"
isCurrentActorAGroupModerator size="is-small"
" :title="$t('Update discussion title')"
@click=" v-if="
() => { discussion.creator &&
newTitle = discussion.title; !editTitleMode &&
editTitleMode = true; (currentActor.id === discussion.creator.id ||
} isCurrentActorAGroupModerator)
" "
> @click="
<b-icon icon="pencil" /> () => {
</span> newTitle = discussion.title;
</h2> editTitleMode = true;
}
"
>
</b-button>
<b-skeleton <b-skeleton
v-else-if="!editTitleMode && $apollo.loading" v-else-if="!editTitleMode && $apollo.loading"
height="50px" height="50px"
@ -73,12 +77,19 @@
@submit.prevent="updateDiscussion" @submit.prevent="updateDiscussion"
class="title-edit" class="title-edit"
> >
<b-input :value="discussion.title" v-model="newTitle" /> <b-field :label="$t('Title')" label-for="discussion-title">
<b-input
:value="discussion.title"
v-model="newTitle"
id="discussion-title"
/>
</b-field>
<div class="buttons"> <div class="buttons">
<b-button <b-button
type="is-primary" type="is-primary"
native-type="submit" native-type="submit"
icon-right="check" icon-right="check"
:title="$t('Update discussion title')"
/> />
<b-button <b-button
@click=" @click="
@ -88,6 +99,7 @@
} }
" "
icon-right="close" icon-right="close"
:title="$t('Cancel discussion title edition')"
/> />
<b-button <b-button
@click="openDeleteDiscussionConfirmation" @click="openDeleteDiscussionConfirmation"
@ -489,15 +501,17 @@ div.container.section {
padding: 1rem 5% 4rem; padding: 1rem 5% 4rem;
div.discussion-title { div.discussion-title {
margin-bottom: 0.75rem; margin-bottom: 1.75rem;
display: flex;
align-items: center;
h2.title { h1.title {
span { margin-bottom: 0;
cursor: pointer; margin-right: 10px;
}
} }
form.title-edit { form.title-edit {
flex: 1;
div.control { div.control {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }