Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Style adjustments & addition of login button on admin invite page (#19073) 

* user field label move
* more user field edits
* invite page adjustments
* caps lock adjustment


Co-authored-by: Penar Musaraj <pmusaraj@gmail.com>
This commit is contained in:
Jordan Vidrine 2022-11-22 19:06:19 -06:00 committed by GitHub
parent 072ff72759
commit 34e21525d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 52 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/assets/javascripts/discourse/app/components/create-account.js
View File

@ -6,19 +6,19 @@ export default Component.extend({
classNames: ["create-account-body"],
userInputFocus(event) {
let label = event.target.parentElement.previousElementSibling;
if (!label.classList.contains("value-entered")) {
label.classList.toggle("value-entered");
const controls = event.target.parentElement;
if (!controls.classList.contains("value-entered")) {
controls.classList.toggle("value-entered");
}
},
userInputFocusOut(event) {
let label = event.target.parentElement.previousElementSibling;
const controls = event.target.parentElement;
if (
event.target.value.length === 0 &&
label.classList.contains("value-entered")
controls.classList.contains("value-entered")
) {
label.classList.toggle("value-entered");
controls.classList.toggle("value-entered");
}
},

8
app/assets/javascripts/discourse/app/templates/components/user-fields/text.hbs
View File

@ -1,9 +1,9 @@
<label class="control-label" for={{concat "user-" this.elementId}}>
{{this.field.name}}
{{#if this.field.required}}<span class="required">*</span>{{/if}}
</label>
<div class="controls">
<Input id={{concat "user-" this.elementId}} @value={{this.value}} maxlength={{this.site.user_field_max_length}} />
<label class="control-label" for={{concat "user-" this.elementId}}>
{{this.field.name}}
{{#if this.field.required}}<span class="required">*</span>{{/if}}
</label>
<InputTip @validation={{this.validation}} />
<div class="instructions">{{html-safe this.field.description}}</div>
</div>

10
app/assets/javascripts/discourse/app/templates/invites/show.hbs
View File

@ -102,7 +102,7 @@
<InputTip @validation={{this.passwordValidation}} />
<div class="instructions">
{{this.passwordInstructions}}
<div class="caps-lock-warning {{unless this.capsLockOn "invisible"}}">
<div class="caps-lock-warning {{unless this.capsLockOn " hidden"}}">
{{d-icon "exclamation-triangle"}} {{i18n "login.caps_lock_warning"}}
</div>
</div>
@ -119,7 +119,13 @@
</div>
{{/if}}
<DButton @class="btn-primary" @action={{action "submit"}} @type="submit" @disabled={{this.submitDisabled}} @label="invites.accept_invite" />
<div class="invitation-cta">
<DButton @class="btn-primary invitation-cta__accept" @action={{action "submit"}} @type="submit" @disabled={{this.submitDisabled}} @label="invites.accept_invite" />
<div class="invitation-cta__info">
<span class="invitation-cta__signed-up">{{i18n "login.previous_sign_up"}}</span>
<DButton @action={{route-action "showLogin"}} @class="btn-flat invitation-cta__sign-in" @label="log_in" />
</div>
</div>
<div class="disclaimer">
{{html-safe this.disclaimerHtml}}

2
app/assets/javascripts/discourse/app/templates/modal/create-account.hbs
View File

@ -78,7 +78,7 @@
<InputTip @validation={{this.passwordValidation}} @id="password-validation" />
<span class="more-info">{{this.passwordInstructions}}</span>
<div class="caps-lock-warning {{unless this.capsLockOn " hidden"}}">
<div class="caps-lock-warning {{unless this.capsLockOn "hidden"}}">
{{d-icon "exclamation-triangle"}} {{i18n "login.caps_lock_warning"}}
</div>
{{/if}}

2
app/assets/javascripts/discourse/app/templates/password-reset.hbs
View File

@ -41,7 +41,7 @@
</div>
<div class="instructions">
<div class="caps-lock-warning {{unless this.capsLockOn "invisible"}}">
<div class="caps-lock-warning {{unless this.capsLockOn "hidden"}}">
{{d-icon "exclamation-triangle"}} {{i18n "login.caps_lock_warning"}}
</div>
</div>

50
app/assets/stylesheets/common/base/login.scss
View File

@ -5,6 +5,7 @@ $invite-mobile-bg: absolute-image-url("/branded-background-mobile.svg");
color: var(--danger);
font-size: var(--font-down-1);
font-weight: bold;
margin-top: 0.5em;
}
.discourse-no-touch #login-form {
@ -48,7 +49,7 @@ body.invite-page {
background-repeat: no-repeat;
background-position: bottom;
}
.d-header {
.d-header .panel.clearfix {
display: none;
}
}
@ -152,9 +153,6 @@ body.invite-page {
display: flex;
flex-direction: column;
margin-bottom: 0.8em;
&:last-child {
margin-bottom: 2em;
}
input,
.select-kit-header {
padding: 0.75em 0.77em;
@ -249,6 +247,14 @@ body.invite-page {
.user-fields .input-group {
.user-field {
&.text {
&.value-entered label.control-label {
top: -8px;
left: calc(1em - 0.25em);
background-color: var(--secondary);
padding: 0 0.25em 0 0.25em;
font-size: 14px;
color: var(--primary-medium);
}
label.control-label {
color: var(--primary-medium);
font-size: 16px;
@ -263,15 +269,6 @@ body.invite-page {
overflow: hidden;
text-overflow: ellipsis;
}
&.value-entered label.control-label,
label.control-label.value-entered {
top: -8px;
left: calc(1em - 0.25em);
background-color: var(--secondary);
padding: 0 0.25em 0 0.25em;
font-size: 14px;
color: var(--primary-medium);
}
}
span.name {
color: var(--primary-medium);
@ -339,6 +336,7 @@ body.invite-page {
}
}
// admin invite page
.invites-show {
display: grid;
justify-content: center;
@ -359,8 +357,7 @@ body.invite-page {
.invite-form {
margin-bottom: 50px;
box-shadow: 0 4px 19px 6px rgba(0, 0, 0, 0.05);
padding: 1em 3em;
max-width: calc(33em - 6em);
max-width: calc(30em);
.tip {
display: block;
}
@ -389,10 +386,6 @@ body.invite-page {
}
form {
margin-top: 24px;
button.btn-primary {
margin-top: 10px;
}
.controls,
.input {
margin-bottom: 10px;
@ -409,6 +402,25 @@ body.invite-page {
margin-bottom: 0.25em;
}
}
.invitation-cta {
display: flex;
align-items: center;
margin-top: 2em;
&__accept {
margin-right: 1em;
}
&__signed-up {
margin-right: 0.5em;
}
&__sign-in {
padding: 0;
&.btn-flat.btn-text:not([disabled]):active {
background-color: transparent;
background-image: none;
}
}
}
}
.auth-message {

1
config/locales/client.en.yml
View File

@ -2038,6 +2038,7 @@ en:
blank_username_or_password: "Please enter your email or username, and password."
reset_password: "Reset Password"
logging_in: "Signing In..."
previous_sign_up: "Already have an account?"
or: "Or"
authenticating: "Authenticating..."
awaiting_activation: "Your account is awaiting activation, use the forgot password link to issue another activation email."