mirror/mobilizon
1
0
Fork 0
mirror of https://framagit.org/framasoft/mobilizon.git synced 2024-12-21 23:44:30 +00:00
Code Issues Releases Wiki Activity

Discussions views improvements

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

59
js/src/views/Discussions/Create.vue
View file

@ -1,14 +1,57 @@
<template>
<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">
<b-field
:label="$t('Title')"
label-for="discussion-title"
:message="errors.title"
: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 :label="$t('Text')">
@ -24,7 +67,7 @@
<script lang="ts">
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 { FETCH_GROUP } from "@/graphql/group";
import { CREATE_DISCUSSION } from "@/graphql/discussion";
@ -66,6 +109,10 @@ export default class CreateDiscussion extends Vue {
errors = { title: "" };
RouteName = RouteName;
usernameWithDomain = usernameWithDomain;
async createDiscussion(): Promise<void> {
this.errors = { title: "" };
try {
@ -100,7 +147,11 @@ export default class CreateDiscussion extends Vue {
}
</script>
<style>
<style lang="scss" scoped>
.container.section {
background: $white;
}
.markdown-render h1 {
font-size: 2em;
}

58
js/src/views/Discussions/Discussion.vue
View file

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