Chapril/mobilizon.chapril.org-mobilizon
Chapril/mobilizon.chapril.org-mobilizon
25
0
Fork 0
Code Issues Pull Requests Releases Activity

Improve UI for participations when message is too long

Browse Source 
Add a button to make the details more discoverable

Closes #452

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-06-30 16:17:29 +02:00
parent 47cc3173ac
commit 02931ec0cd
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
1 changed files with 43 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
js/src/views/Event/Participants.vue
View File

@ -109,7 +109,7 @@
props.row.actor.name props.row.actor.name
}}</span }}</span
><br /> ><br />
<span class="is-size-7 has-text-grey" <span class="is-size-7 has-text-grey-dark"
>@{{ usernameWithDomain(props.row.actor) }}</span >@{{ usernameWithDomain(props.row.actor) }}</span
> >
</span> </span>
@ -148,10 +148,11 @@
</b-table-column> </b-table-column>
<b-table-column <b-table-column
field="metadata.message" field="metadata.message"
class="column-message"
:label="$t('Message')" :label="$t('Message')"
v-slot="props" v-slot="props"
> >
<span <div
@click="toggleQueueDetails(props.row)" @click="toggleQueueDetails(props.row)"
:class="{ :class="{
'ellipsed-message': 'ellipsed-message':
@ -159,11 +160,25 @@
}" }"
v-if="props.row.metadata && props.row.metadata.message" v-if="props.row.metadata && props.row.metadata.message"
> >
{{ props.row.metadata.message | ellipsize }} <p>
</span> {{ props.row.metadata.message | ellipsize }}
<span v-else class="has-text-grey"> </p>
<button
type="button"
class="button is-text"
v-if="props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH"
@click.stop="toggleQueueDetails(props.row)"
>
{{
openDetailedRows[props.row.id]
? $t("View less")
: $t("View more")
}}
</button>
</div>
<p v-else class="has-text-grey-dark">
{{ $t("No message") }} {{ $t("No message") }}
</span> </p>
</b-table-column> </b-table-column>
<b-table-column field="insertedAt" :label="$t('Date')" v-slot="props"> <b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
<span class="has-text-centered"> <span class="has-text-centered">
@ -177,7 +192,7 @@
</template> </template>
<template slot="empty"> <template slot="empty">
<section class="section"> <section class="section">
<div class="content has-text-grey has-text-centered"> <div class="content has-text-grey-dark has-text-centered">
<p>{{ $t("No participant matches the filters") }}</p> <p>{{ $t("No participant matches the filters") }}</p>
</div> </div>
</section> </section>
@ -407,8 +422,13 @@ export default class Participants extends Vue {
) )
return; return;
this.queueTable.toggleDetails(row); this.queueTable.toggleDetails(row);
if (row.id) {
this.openDetailedRows[row.id] = !this.openDetailedRows[row.id];
}
} }
openDetailedRows: Record<string, boolean> = {};
async pushRouter( async pushRouter(
routeName: string, routeName: string,
args: Record<string, string> args: Record<string, string>
@ -434,8 +454,24 @@ section {
} }
.table { .table {
.column-message {
vertical-align: middle;
}
.ellipsed-message { .ellipsed-message {
cursor: pointer; cursor: pointer;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
p {
flex: 1;
min-width: 200px;
}
button {
display: inline;
}
} }
span.tag { span.tag {