Discussions views improvements
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
d81c479aa6
commit
b1ab0dabbe
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue