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

UX: refactor security modals (#12870) 

- better form
- uses d-footer
- ensure buttons have the same height

Note that to achieve same height for btn without text, I made the choice to go for a minimum height which should work in most cases.
This commit is contained in:
Joffrey JAFFEUX 2021-05-03 09:22:33 +02:00 committed by GitHub
parent e7de943b5d
commit 286b6916af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/assets/javascripts/discourse/app/templates/modal/second-factor-edit-security-key.hbs
View File

@ -1,10 +1,13 @@
{{#d-modal-body}} {{#d-modal-body}}
<div class="form-horizontal"> <form class="form-horizontal">
{{input type="text" value=model.name}} <div class="input-group">
</div> <label for="security-key-name">{{i18n "user.second_factor.security_key.edit_description"}}</label>
<div class="second-factor instructions"> {{input name="security-key-name" type="text" value=model.name}}
{{i18n "user.second_factor.security_key.edit_description"}} </div>
</div> </form>
{{/d-modal-body}}
<div class="modal-footer">
{{d-button {{d-button
action=(action "editSecurityKey") action=(action "editSecurityKey")
class="btn-primary" class="btn-primary"
@ -12,9 +15,9 @@
}} }}
{{d-button {{d-button
action=(action "disableSecurityKey") action=(action "disableSecurityKey")
class="btn-danger" class="btn-danger no-text"
icon="trash-alt" icon="trash-alt"
aria-label="user.second_factor.disable" aria-label="user.second_factor.disable"
title="user.second_factor.disable" title="user.second_factor.disable"
}} }}
{{/d-modal-body}} </div>

19
app/assets/javascripts/discourse/app/templates/modal/second-factor-edit.hbs
View File

@ -1,10 +1,13 @@
{{#d-modal-body}} {{#d-modal-body}}
<div class="form-horizontal"> <form class="form-horizontal">
{{input type="text" value=model.name}} <div class="input-group">
</div> <label for="authenticator-name">{{i18n "user.second_factor.edit_description"}}</label>
<div class="second-factor instructions"> {{input name="authenticator-name" type="text" value=model.name}}
{{i18n "user.second_factor.edit_description"}} </div>
</div> </form>
{{/d-modal-body}}
<div class="modal-footer">
{{d-button {{d-button
action=(action "editSecondFactor") action=(action "editSecondFactor")
class="btn-primary" class="btn-primary"
@ -12,9 +15,9 @@
}} }}
{{d-button {{d-button
action=(action "disableSecondFactor") action=(action "disableSecondFactor")
class="btn-danger" class="btn-danger no-text"
icon="trash-alt" icon="trash-alt"
aria-label="user.second_factor.disable" aria-label="user.second_factor.disable"
title="user.second_factor.disable" title="user.second_factor.disable"
}} }}
{{/d-modal-body}} </div>

1
app/assets/stylesheets/common/components/buttons.scss
View File

@ -35,6 +35,7 @@
&.no-text { &.no-text {
.d-icon { .d-icon {
margin-right: 0; margin-right: 0;
min-height: 17px;
} }
} }
@include hover { @include hover {