Some minor visual improvements
This commit is contained in:
Martin Kleinschrodt
parent
1635dc96c3
commit
dc4b022ea2
|
|
@ -153,7 +153,7 @@ export class CreateInvitesDialog extends Dialog<Org, Invite[]> {
|
|||
@blur=${this._enter}
|
||||
@keydown=${this._keydown}
|
||||
>
|
||||
<div class="horizontal wrapping layout" slot="above">
|
||||
<div class="horizontal wrapping spacing layout" slot="above">
|
||||
${this._emails.map(
|
||||
(email) => html`
|
||||
<div
|
||||
|
|
@ -161,6 +161,7 @@ export class CreateInvitesDialog extends Dialog<Org, Invite[]> {
|
|||
? ""
|
||||
: "warning"}"
|
||||
>
|
||||
${!this._isValid(email) ? html`<pl-icon icon="warning"></pl-icon>` : ""}
|
||||
<div>${email}</div>
|
||||
<pl-button class="small skinny transparent" @click=${() => this._remove(email)}>
|
||||
<pl-icon icon="cancel"></pl-icon>
|
||||
|
|
|
|||
|
|
@ -147,6 +147,7 @@ export class GroupView extends Routing(StateMixin(LitElement)) {
|
|||
this._saveButton.start();
|
||||
|
||||
try {
|
||||
this._saveButton.success();
|
||||
if (this.groupName === "new") {
|
||||
const group = await app.createGroup(
|
||||
this._org!,
|
||||
|
|
@ -154,6 +155,7 @@ export class GroupView extends Routing(StateMixin(LitElement)) {
|
|||
[...this._members],
|
||||
[...this._vaults]
|
||||
);
|
||||
this._saveButton.success();
|
||||
this.go(`orgs/${this._org!.id}/groups/${encodeURIComponent(group.name)}`, undefined, true, true);
|
||||
} else {
|
||||
const group = await app.updateGroup(
|
||||
|
|
@ -165,10 +167,10 @@ export class GroupView extends Routing(StateMixin(LitElement)) {
|
|||
vaults: [...this._vaults],
|
||||
}
|
||||
);
|
||||
this._saveButton.success();
|
||||
this.redirect(`orgs/${this._org!.id}/groups/${encodeURIComponent(group.name)}`);
|
||||
}
|
||||
|
||||
this._saveButton.success();
|
||||
this.requestUpdate();
|
||||
} catch (e) {
|
||||
this._saveButton.fail();
|
||||
|
|
|
|||
|
|
@ -136,6 +136,12 @@ export class InviteRecipient extends Routing(StateMixin(LitElement)) {
|
|||
),
|
||||
};
|
||||
|
||||
const invitor = this._invite.invitedBy
|
||||
? this._invite.invitedBy.name
|
||||
? `${this._invite.invitedBy.name} <${this._invite.invitedBy.email}>`
|
||||
: this._invite.invitedBy.email
|
||||
: "Someone";
|
||||
|
||||
return html`
|
||||
<div class="fullbleed vertical layout">
|
||||
<header class="padded horizontal center-aligning layout">
|
||||
|
|
@ -152,32 +158,30 @@ export class InviteRecipient extends Routing(StateMixin(LitElement)) {
|
|||
</header>
|
||||
|
||||
<pl-scroller class="stretch">
|
||||
<div class="center-aligning vertical layout">
|
||||
<div class="max-width-30em">
|
||||
<div class="center-aligning vertical layout fill-vertically">
|
||||
<div class="max-width-30em padded double-margined box">
|
||||
<div class="large spacer"></div>
|
||||
|
||||
<div class="margined text-centering">
|
||||
${purpose === "confirm_membership"
|
||||
? $l("You've been requested to confirm your membership with")
|
||||
: $l("You've been invited to join")}
|
||||
? $l("{0} requested to confirm your membership with", invitor)
|
||||
: $l("{0} invited to join", invitor)}
|
||||
</div>
|
||||
|
||||
<div class="bold big margined centering layout">
|
||||
<div class="tag highlight">
|
||||
<pl-icon icon="members" class="large"></pl-icon>
|
||||
<div>${this._invite.org.name}</div>
|
||||
</div>
|
||||
<div class="huge padded margined highlighted text-centering">
|
||||
<pl-icon icon="members" class="inline"></pl-icon>
|
||||
<span>${this._invite.org.name}</span>
|
||||
</div>
|
||||
|
||||
${accepted || expired
|
||||
? html`
|
||||
<div class="double-margined padded red card">
|
||||
<div class="double-margined padded negative highlighted text-centering box">
|
||||
${accepted
|
||||
? $l("You have already accepted this invite!")
|
||||
: $l("This invite has expired!")}
|
||||
</div>
|
||||
|
||||
<pl-button class="margined" @click=${() => this.go("")}>
|
||||
<pl-button class="margined transparent" @click=${() => this.go("")}>
|
||||
${$l("Dismiss")}
|
||||
</pl-button>
|
||||
`
|
||||
|
|
@ -190,7 +194,7 @@ export class InviteRecipient extends Routing(StateMixin(LitElement)) {
|
|||
|
||||
<pl-input
|
||||
id="codeInput"
|
||||
class="large margined mono"
|
||||
class="large double-margined mono"
|
||||
.label=${$l("Confirmation Code")}
|
||||
>
|
||||
</pl-input>
|
||||
|
|
@ -199,7 +203,9 @@ export class InviteRecipient extends Routing(StateMixin(LitElement)) {
|
|||
<pl-button id="submitButton" class="primary" @click=${this._submit}>
|
||||
${$l("Submit")}
|
||||
</pl-button>
|
||||
<pl-button @click=${this._dismiss}> ${$l("Dismiss")} </pl-button>
|
||||
<pl-button @click=${this._dismiss} class="transparent">
|
||||
${$l("Dismiss")}
|
||||
</pl-button>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -186,56 +186,56 @@ export class InviteView extends Routing(StateMixin(LitElement)) {
|
|||
</header>
|
||||
|
||||
<pl-scroller class="stretch">
|
||||
<div class="large spacer"></div>
|
||||
<div class="double-margined padded box">
|
||||
<div class="margined text-centering">
|
||||
${$l(
|
||||
purpose === "confirm_membership"
|
||||
? "A membership confirmation request was sent to:"
|
||||
: "An invite was sent to:"
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="margined text-centering">
|
||||
${$l(
|
||||
purpose === "confirm_membership"
|
||||
? "A membership confirmation request was sent to:"
|
||||
: "An invite was sent to:"
|
||||
)}
|
||||
</div>
|
||||
<div class="bold large text-centering">${email}</div>
|
||||
|
||||
<div class="bold large text-centering">${email}</div>
|
||||
<div class="double-margined text-centering">
|
||||
${$l(
|
||||
"They will also need the following confirmation code, which " +
|
||||
"you should communicate to them separately:"
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="double-margined text-centering">
|
||||
${$l(
|
||||
"They will also need the following confirmation code, which " +
|
||||
"you should communicate to them separately:"
|
||||
)}
|
||||
</div>
|
||||
<div class="giant centering margined padded layout mono">
|
||||
<div>${until(this._secret, html` <pl-spinner active></pl-spinner> `)}</div>
|
||||
</div>
|
||||
|
||||
<div class="giant centering double-margined padded layout mono card">
|
||||
<div>${until(this._secret, html` <pl-spinner active></pl-spinner> `)}</div>
|
||||
</div>
|
||||
<div class="horziontal margined evenly stretching spacing horizontal layout">
|
||||
${accepted
|
||||
? html`
|
||||
<pl-button
|
||||
?disabled=${expired}
|
||||
id="confirmButton"
|
||||
class="tap primary"
|
||||
@click=${() => this._confirm()}
|
||||
>
|
||||
<pl-icon icon="invite" class="right-margined"></pl-icon>
|
||||
|
||||
<div class="horziontal margined evenly stretching spacing horizontal layout">
|
||||
${accepted
|
||||
? html`
|
||||
<pl-button
|
||||
?disabled=${expired}
|
||||
id="confirmButton"
|
||||
class="tap primary"
|
||||
@click=${() => this._confirm()}
|
||||
>
|
||||
<pl-icon icon="invite" class="right-margined"></pl-icon>
|
||||
<div>${$l(purpose === "confirm_membership" ? "Confirm" : "Add Member")}</div>
|
||||
</pl-button>
|
||||
`
|
||||
: html`
|
||||
<pl-button id="resendButton" class="tap" @click=${() => this._resend()}>
|
||||
<pl-icon icon="mail" class="right-margined"></pl-icon>
|
||||
|
||||
<div>${$l(purpose === "confirm_membership" ? "Confirm" : "Add Member")}</div>
|
||||
</pl-button>
|
||||
`
|
||||
: html`
|
||||
<pl-button id="resendButton" class="tap" @click=${() => this._resend()}>
|
||||
<pl-icon icon="mail" class="right-margined"></pl-icon>
|
||||
<div>${$l("Resend")}</div>
|
||||
</pl-button>
|
||||
`}
|
||||
|
||||
<div>${$l("Resend")}</div>
|
||||
</pl-button>
|
||||
`}
|
||||
<pl-button id="deleteButton" class="tap negative" @click=${() => this._delete()}>
|
||||
<pl-icon icon="delete" class="right-margined"></pl-icon>
|
||||
|
||||
<pl-button id="deleteButton" class="tap negative" @click=${() => this._delete()}>
|
||||
<pl-icon icon="delete" class="right-margined"></pl-icon>
|
||||
|
||||
<div>${$l("Delete")}</div>
|
||||
</pl-button>
|
||||
<div>${$l("Delete")}</div>
|
||||
</pl-button>
|
||||
</div>
|
||||
</div>
|
||||
</pl-scroller>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -336,7 +336,7 @@ export class VaultItemListItem extends LitElement {
|
|||
|
||||
<div class="stretch collapse left-half-margined">
|
||||
<div class="tiny subtle">${vault.label}</div>
|
||||
<div class="ellipsis semibold" ?disabled=${!item.name}>${item.name || $l("No Name")}</div>
|
||||
<div class="ellipsis semibold" ?disabled=${!item.name}>${item.name || $l("New Item")}</div>
|
||||
</div>
|
||||
|
||||
${tags.map(
|
||||
|
|
|
|||
Loading…
Reference in New Issue