FEATURE: Improve expired invites tab (#12392)

This commit extends functionality of the expired invites tab, making
it more similar to the pending tab. It also implements a different
layout for mobile.
This commit is contained in:
Dan Ungureanu 2021-03-15 11:52:58 +02:00 committed by GitHub
parent 6c57f6f49d
commit 790c4ad4a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 72 additions and 52 deletions

View File

@ -128,8 +128,16 @@ export default Controller.extend(
},
@discourseComputed("buffered.expires_at")
expiresAtRelative(expires_at) {
return moment.duration(moment(expires_at) - moment()).humanize();
expiresAtLabel(expires_at) {
const expiresAt = moment(expires_at);
return expiresAt.isBefore()
? I18n.t("user.invited.invite.expired_at_time", {
time: expiresAt.format("LLL"),
})
: I18n.t("user.invited.invite.expires_in_time", {
time: moment.duration(expiresAt - moment()).humanize(),
});
},
@discourseComputed("type", "buffered.email")

View File

@ -9,7 +9,7 @@
{{copy-button selector="input.invite-link" copied=(action "copied")}}
</div>
<p>{{i18n "user.invited.invite.expires_at_time" time=expiresAtRelative}}</p>
<p>{{expiresAtLabel}}</p>
<div class="input-group invite-type">
<div class="radio-group">

View File

@ -85,35 +85,6 @@
{{/each}}
</tbody>
</table>
{{else if inviteExpired}}
<table class="table user-invite-list">
<thead>
<tr>
<th>{{i18n "user.invited.invited_via"}}</th>
<th>{{i18n "user.invited.sent"}}</th>
<th>{{i18n "user.invited.expires_at"}}</th>
<th></th>
</tr>
</thead>
<tbody>
{{#each model.invites as |invite|}}
<tr>
<td>
{{#if invite.email}}
{{invite.email}}
{{else}}
{{i18n "user.invited.invited_via_link" count=invite.redemption_count max=invite.max_redemptions_allowed}}
{{/if}}
</td>
<td>{{raw-date invite.updated_at}}</td>
<td>{{raw-date invite.expires_at}}</td>
<td class="actions">
{{d-button icon="trash-alt" class="cancel" action=(action "destroyInvite" invite) title=(if invite.destroyed "user.invited.removed" "user.invited.remove")}}
</td>
</tr>
{{/each}}
</tbody>
</table>
{{else}}
<table class="table user-invite-list">
<thead>
@ -130,7 +101,8 @@
<tbody>
{{#each model.invites as |invite|}}
<tr>
<td>
<td class="invite-type">
<div class="label">{{i18n "user.invited.invited_via"}}</div>
{{#if invite.email}}
{{invite.email}}
{{else}}
@ -138,7 +110,8 @@
{{/if}}
</td>
{{#if currentUser.staff}}
<td>
<td class="invite-groups">
<div class="label">{{i18n "user.invited.groups"}}</div>
{{#each invite.groups as |g|}}
<a href="/g/{{g.name}}">{{g.name}}</a>
{{else}}
@ -146,15 +119,21 @@
{{/each}}
</td>
{{/if}}
<td>{{format-date invite.updated_at}}</td>
<td>
{{#if invite.expired}}
<td class="invite-updated-at">
<div class="label">{{i18n "user.invited.sent"}}</div>
{{format-date invite.updated_at}}
</td>
<td class="invite-expires-at">
<div class="label">{{i18n "user.invited.expires_at"}}</div>
{{#if inviteExpired}}
{{raw-date invite.expires_at}}
{{else if invite.expired}}
{{i18n "user.invited.expired"}}
{{else}}
{{raw-date invite.expires_at}}
{{/if}}
</td>
<td class="actions">
<td class="invite-actions">
{{d-button icon="pencil-alt" action=(action "editInvite" invite) title="user.invited.edit"}}
{{d-button icon="trash-alt" class="cancel" action=(action "destroyInvite" invite) title=(if invite.destroyed "user.invited.removed" "user.invited.remove")}}
</td>

View File

@ -84,16 +84,22 @@
margin-right: 0px;
}
.user-invite-list {
table.user-invite-list {
width: 100%;
margin-top: 15px;
tr {
td {
padding: 0.667em;
&.actions {
&.invite-actions {
white-space: nowrap;
width: 100px;
}
.label {
display: none;
}
}
}
}

View File

@ -315,24 +315,50 @@
padding: 0;
}
}
table {
tr:first-of-type {
table.user-invite-list {
thead {
display: none;
}
tr {
display: flex;
flex-wrap: wrap;
margin-bottom: 1em;
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 0.25em;
}
td:first-of-type {
margin-right: 1em;
}
td:nth-of-type(n + 3) {
.label {
display: block;
width: 50%;
padding: 0.25em 0 1em 0;
color: var(--primary-medium);
font-size: $font-down-1;
margin: 0.5em 0 0.15em 0;
}
td.invite-type {
grid-column-start: 1;
grid-column-end: -2;
order: 1;
vertical-align: middle;
}
td.invite-actions {
order: 2;
align-self: center;
text-align: right;
}
td.invite-groups {
grid-column-start: 1;
grid-column-end: -1;
order: 3;
}
td.invite-updated-at,
td.invite-expires-at {
order: 4;
}
}
.user-invite-none {
margin-top: 1em;
}

View File

@ -1498,7 +1498,8 @@ en:
instructions: "Share this link to instantly grant access to this site:"
copy_link: "copy link"
expires_at_time: "Expires in %{time}."
expires_in_time: "Expires in %{time}."
expired_at_time: "Expired at %{time}."
show_advanced: "Show Advanced Options"
hide_advanced: "Hide Advanced Options"