settings: Add modal fade.

This implements the modal fade idea suggested here:

https://chat.zulip.org/#narrow/stream/6-frontend/subject/Visual.20Design.20Strategy.20for.20Settings.20UI/near/559763
This commit is contained in:
guaca 2018-04-18 22:40:26 -04:00 committed by Tim Abbott
parent 160931377f
commit 3c01ea78b0
3 changed files with 16 additions and 5 deletions

View File

@ -1222,6 +1222,14 @@ input[type=checkbox].inline-block {
transition: opacity 100ms ease-out;
}
.modal.fade {
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
transform: translateY(-50%);
}
#settings_page .table-striped thead th.active:after {
content: " \f0d8";
white-space: pre;
@ -1371,7 +1379,6 @@ input[type=checkbox].inline-block {
.modal.fade.in {
top: 50%;
transform: translateY(-50%);
}
#id_realm_create_stream_permission,
@ -1385,6 +1392,10 @@ input[type=checkbox].inline-block {
margin-top: 10px;
}
#change_email_modal,
#change_full_name_modal,
#change_password_modal,
#default_language_modal,
#deactivate_self_modal,
#deactivate-realm-modal {
box-shadow: 0px 0px 75px hsla(0, 0%, 0%, 0.5);

View File

@ -1,4 +1,4 @@
<div id="default_language_modal" class="modal hide modal-bg" tabindex="-1" role="dialog"
<div id="default_language_modal" class="modal hide modal-bg fade" tabindex="-1" role="dialog"
aria-labelledby="default_language_modal_label" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>

View File

@ -17,7 +17,7 @@
title="{{t 'Changing email addresses has been disabled by your Zulip organization administrators. Contact an administrator for help.' }}"></i>
</div>
<div id="change_email_modal" class="modal modal-bg hide" tabindex="-1" role="dialog"
<div id="change_email_modal" class="modal modal-bg hide fade" tabindex="-1" role="dialog"
aria-labelledby="change_email_modal_label" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>
@ -51,7 +51,7 @@
{{#if page_params.is_admin}}style="display:none"{{else}}{{#unless page_params.realm_name_changes_disabled}}style="display:none"{{/unless}}{{/if}}
title="{{t 'Changing your name has been disabled by your Zulip organization administrators. Contact an administrator for help.' }}"/>
</div>
<div id="change_full_name_modal" class="modal modal-bg hide" tabindex="-1" role="dialog"
<div id="change_full_name_modal" class="modal modal-bg hide fade" tabindex="-1" role="dialog"
aria-labelledby="change_full_name_modal_label" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>
@ -85,7 +85,7 @@
</div>
{{/if}}
<div id="change_password_modal" class="modal modal-bg hide" tabindex="-1" role="dialog"
<div id="change_password_modal" class="modal modal-bg hide fade" tabindex="-1" role="dialog"
aria-labelledby="change_password_modal_label" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>