From 6ab5f700901a06713f92a8c1bce12875fd0b2cbe Mon Sep 17 00:00:00 2001 From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com> Date: Tue, 5 Oct 2021 15:30:31 -0500 Subject: [PATCH] UX: Change layout of invites page to match other user pages (#14520) * UX: Change layout of invites page to match other user pages --- .../app/templates/user-invited-show.hbs | 78 ++++++++++--------- .../acceptance/create-invite-modal-test.js | 14 ++-- app/assets/stylesheets/common/base/user.scss | 5 -- app/assets/stylesheets/desktop/user.scss | 4 + app/assets/stylesheets/mobile/user.scss | 28 +++++-- 5 files changed, 75 insertions(+), 54 deletions(-) diff --git a/app/assets/javascripts/discourse/app/templates/user-invited-show.hbs b/app/assets/javascripts/discourse/app/templates/user-invited-show.hbs index 2ff2fa86947..1872e0e9632 100644 --- a/app/assets/javascripts/discourse/app/templates/user-invited-show.hbs +++ b/app/assets/javascripts/discourse/app/templates/user-invited-show.hbs @@ -1,49 +1,53 @@ +{{#if model.can_see_invite_details}} + {{#d-section class="user-secondary-navigation" pageClass="user-invites"}} + {{#mobile-nav class="invites-nav" desktopClass="nav-stacked action-list"}} + {{nav-item route="userInvited.show" routeParam="pending" i18nLabel=pendingLabel}} + {{nav-item route="userInvited.show" routeParam="expired" i18nLabel=expiredLabel}} + {{nav-item route="userInvited.show" routeParam="redeemed" i18nLabel=redeemedLabel}} + {{/mobile-nav}} + {{/d-section}} +{{/if}} + {{#d-section pageClass="user-invites" tagName=""}} {{#if canInviteToForum}} {{#load-more class="user-content" selector=".user-invite-list tr" action=(action "loadMore")}} -
- {{#if model.can_see_invite_details}} -
- - -
- {{d-button class="btn-default" icon="plus" action=(action "createInvite") label="user.invited.create"}} - {{#if canBulkInvite}} - {{d-button class="btn-default" icon="upload" action=(action "createInviteCsv") label="user.invited.bulk_invite.text"}} - {{/if}} - {{#if showBulkActionButtons}} - {{#if inviteExpired}} - {{#if removedAll}} - {{i18n "user.invited.removed_all"}} - {{else}} - {{d-button icon="times" action=(action "destroyAllExpired") label="user.invited.remove_all"}} - {{/if}} - {{/if}} - - {{#if invitePending}} - {{#if reinvitedAll}} - {{i18n "user.invited.reinvited_all"}} - {{else}} - {{d-button class="btn-default" icon="sync" action=(action "reinviteAll") label="user.invited.reinvite_all"}} - {{/if}} - {{/if}} - {{/if}} -
-
- {{/if}} - + {{#d-section class="user-additional-controls"}} {{#if showSearch}}
{{text-field value=searchTerm placeholderKey="user.invited.search"}}
{{/if}} + {{#d-section class="user-invite-buttons"}} + {{d-button class="btn-default" icon="plus" action=(action "createInvite") label="user.invited.create"}} + {{#if canBulkInvite}} + {{#unless site.mobileView}} + {{d-button class="btn-default" icon="upload" action=(action "createInviteCsv") label="user.invited.bulk_invite.text"}} + {{/unless}} + {{/if}} + {{#if showBulkActionButtons}} + {{#if inviteExpired}} + {{#if removedAll}} +
  • + {{i18n "user.invited.removed_all"}} +
    • + {{else}} + {{d-button icon="times" action=(action "destroyAllExpired") label="user.invited.remove_all"}} + {{/if}} + {{/if}} + {{#if invitePending}} + {{#if reinvitedAll}} +
  • + {{i18n "user.invited.reinvited_all"}} +
    • + {{else}} + {{d-button class="btn-default" icon="sync" action=(action "reinviteAll") label="user.invited.reinvite_all"}} + {{/if}} + {{/if}} + {{/if}} + {{/d-section}} + {{/d-section}} +
    {{#if model.invites}} {{#if inviteRedeemed}} diff --git a/app/assets/javascripts/discourse/tests/acceptance/create-invite-modal-test.js b/app/assets/javascripts/discourse/tests/acceptance/create-invite-modal-test.js index d12ec51292e..5f521e5993f 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/create-invite-modal-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/create-invite-modal-test.js @@ -51,7 +51,7 @@ acceptance("Invites - Create & Edit Invite Modal", function (needs) { test("basic functionality", async function (assert) { await visit("/u/eviltrout/invited/pending"); - await click(".invite-controls .btn:first-child"); + await click(".user-invite-buttons .btn:first-child"); assert.equal( find("input.invite-link")[0].value, "http://example.com/invites/52641ae8878790bc7b79916247cfe6ba", @@ -69,7 +69,7 @@ acceptance("Invites - Create & Edit Invite Modal", function (needs) { test("saving", async function (assert) { await visit("/u/eviltrout/invited/pending"); - await click(".invite-controls .btn:first-child"); + await click(".user-invite-buttons .btn:first-child"); assert.ok(!exists("tbody tr"), "does not show invite before saving"); @@ -83,7 +83,7 @@ acceptance("Invites - Create & Edit Invite Modal", function (needs) { test("copying saves invite", async function (assert) { await visit("/u/eviltrout/invited/pending"); - await click(".invite-controls .btn:first-child"); + await click(".user-invite-buttons .btn:first-child"); await click(".invite-link .btn"); @@ -93,7 +93,7 @@ acceptance("Invites - Create & Edit Invite Modal", function (needs) { test("copying an email invite without an email shows error message", async function (assert) { await visit("/u/eviltrout/invited/pending"); - await click(".invite-controls .btn:first-child"); + await click(".user-invite-buttons .btn:first-child"); await fillIn("#invite-email", "error"); await click(".invite-link .btn"); @@ -128,7 +128,7 @@ acceptance("Invites - Link Invites", function (needs) { test("invite links", async function (assert) { await visit("/u/eviltrout/invited/pending"); - await click(".invite-controls .btn:first-child"); + await click(".user-invite-buttons .btn:first-child"); assert.ok(exists("#invite-max-redemptions"), "shows max redemptions field"); }); @@ -167,7 +167,7 @@ acceptance("Invites - Email Invites", function (needs) { test("invite email", async function (assert) { await visit("/u/eviltrout/invited/pending"); - await click(".invite-controls .btn:first-child"); + await click(".user-invite-buttons .btn:first-child"); assert.ok(exists("#invite-email"), "shows email field"); await fillIn("#invite-email", "test@example.com"); @@ -226,7 +226,7 @@ acceptance( test("shows correct timeframe options", async function (assert) { await visit("/u/eviltrout/invited/pending"); - await click(".invite-controls .btn:first-child"); + await click(".user-invite-buttons .btn:first-child"); await click(".modal-footer .show-advanced"); await click(".future-date-input-selector-header"); diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss index 881a4ef8d7f..9d87e21fbf8 100644 --- a/app/assets/stylesheets/common/base/user.scss +++ b/app/assets/stylesheets/common/base/user.scss @@ -798,11 +798,6 @@ } .user-invites-page { - .user-invite-search { - clear: both; - margin: 15px 0px -15px 0px; - } - .invite-error { grid-column: 1 / span 2; } diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss index 4fea447637f..94274b24c81 100644 --- a/app/assets/stylesheets/desktop/user.scss +++ b/app/assets/stylesheets/desktop/user.scss @@ -73,11 +73,15 @@ .user-additional-controls { display: flex; flex-wrap: wrap; + padding-top: 15px; .single-select-header, button { margin-bottom: 1em; margin-right: 0.75em; } + .user-invite-buttons { + margin-left: auto; + } } .user-content { diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss index ae32c03884b..d8fb951f9cc 100644 --- a/app/assets/stylesheets/mobile/user.scss +++ b/app/assets/stylesheets/mobile/user.scss @@ -22,6 +22,7 @@ } .user-additional-controls { grid-column-start: 1; + grid-column-end: 3; grid-row-start: 2; } .user-content, @@ -354,12 +355,25 @@ width: 100%; } - .admin-controls { + .user-additional-controls { + width: 100%; + display: flex; + flex-direction: row; flex-wrap: wrap; - .pull-right { - flex: 1 1 100%; - font-size: $font-down-1; - padding: 5px 0; + .user-invite-search { + width: 100%; + } + .user-invite-buttons { + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + .btn { + margin-bottom: 0.5em; + } + .btn:not(:last-of-type) { + margin-right: 0.5em; + } } } @@ -409,6 +423,10 @@ grid-column-end: -1; order: 4; } + + td.invite-actions { + display: flex; + } } .user-invite-none {