Skip to content

Commit

Permalink
Merge pull request OctoPrint#4103 from cp2004/improve/dialog-fade
Browse files Browse the repository at this point in the history 
💄 Improve all dialog animations
  • Loading branch information
@foosel
foosel authored May 4, 2021
2 parents 0ce1c05 + 3319624 commit 0580b0f
Show file tree
Hide file tree
Showing 25 changed files with 74 additions and 37 deletions.
2 changes: 1 addition & 1 deletion src/octoprint/plugins/announcements/templates/announcements.jinja2
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="plugin_announcements_dialog" class="modal hide fade large" tabindex="-1" role="dialog" aria-labelledby="announcements_dialog_label" aria-hidden="true">
<div id="plugin_announcements_dialog" class="modal hide fade-in large" tabindex="-1" role="dialog" aria-labelledby="announcements_dialog_label" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h3 id="announcements_dialog_label">{{ _('Announcements') }}</h3>
Expand Down
2 changes: 1 addition & 1 deletion src/octoprint/plugins/appkeys/templates/appkeys.jinja2
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="plugin_appkeys_keygenerated" class="modal hide fade">
<div id="plugin_appkeys_keygenerated" class="modal hide fade-in">
<div class="modal-header">
<a href="javascript:void(0)" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
<h3 id="plugin_appkeys_keygenerated_title"></h3>
Expand Down
6 changes: 3 additions & 3 deletions src/octoprint/plugins/pluginmanager/templates/pluginmanager_settings.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@
</div>
</div>

<div id="settings_plugin_pluginmanager_workingdialog" class="modal hide fade">
<div id="settings_plugin_pluginmanager_workingdialog" class="modal hide fade-in">
<div class="modal-header">
<h3 data-bind="text: workingTitle"></h3>
</div>
Expand All @@ -200,7 +200,7 @@
</div>
</div>

<div id="settings_plugin_pluginmanager_repositorydialog" class="modal hide fade">
<div id="settings_plugin_pluginmanager_repositorydialog" class="modal hide fade-in">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
<h3>{{ _('Install new Plugins...') }}</h3>
Expand Down Expand Up @@ -346,7 +346,7 @@
</div>
</div>

<div id="settings_plugin_pluginmanager_configurationdialog" class="modal hide fade">
<div id="settings_plugin_pluginmanager_configurationdialog" class="modal hide fade-in">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
<h3>{{ _('Plugin Configuration') }}</h3>
Expand Down
4 changes: 2 additions & 2 deletions src/octoprint/plugins/softwareupdate/templates/softwareupdate_settings.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@



<div id="settings_plugin_softwareupdate_configurationdialog" class="modal hide fade">
<div id="settings_plugin_softwareupdate_configurationdialog" class="modal hide fade-in">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
<h3>{{ _('Plugin Configuration') }}</h3>
Expand Down Expand Up @@ -164,7 +164,7 @@
</div>
</div>

<div id="settings_plugin_softwareupdate_workingdialog" class="modal hide fade">
<div id="settings_plugin_softwareupdate_workingdialog" class="modal hide fade-in">
<div class="modal-header">
<h3 data-bind="text: workingTitle"></h3>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/octoprint/static/css/octoprint.css
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions src/octoprint/static/js/app/helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -755,7 +755,7 @@ function showMessageDialog(msg, options) {

var modal = $("<div></div>").addClass("modal hide");
if (!nofade) {
modal.addClass("fade");
modal.addClass("fade-in");
}
modal
.append($("<div></div>").addClass("modal-header").append(modalHeader))
Expand Down Expand Up @@ -845,7 +845,7 @@ function showConfirmationDialog(msg, onacknowledge, options) {

var modal = $("<div></div>").addClass("modal hide");
if (!nofade) {
modal.addClass("fade");
modal.addClass("fade-in");
}

var buttons = $("<div></div>").addClass("modal-footer").append(cancelButton);
Expand Down Expand Up @@ -963,7 +963,7 @@ function showSelectionDialog(options) {
// create modal and do final wiring up
var modal = $("<div></div>").addClass("modal hide");
if (!nofade) {
modal.addClass("fade");
modal.addClass("fade-in");
}
if (!cancel) {
modal.data("backdrop", "static").data("keyboard", "false");
Expand Down Expand Up @@ -1092,7 +1092,7 @@ function showProgressModal(options, promise) {
}

var modal = $("<div></div>")
.addClass("modal hide fade")
.addClass("modal hide fade-in")
.addClass(dialogClass)
.append($("<div></div>").addClass("modal-header").append(modalHeader))
.append(modalBody)
Expand Down
1 change: 0 additions & 1 deletion src/octoprint/static/js/app/viewmodels/about.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ $(function () {
}
})
.css({
"width": "auto",
"margin-left": function () {
return -($(this).width() / 2);
}
Expand Down
4 changes: 0 additions & 4 deletions src/octoprint/static/js/app/viewmodels/access.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,6 @@ $(function () {
}
})
.css({
"width": "auto",
"margin-left": function () {
return -($(this).width() / 2);
}
Expand Down Expand Up @@ -201,7 +200,6 @@ $(function () {
}
})
.css({
"width": "auto",
"margin-left": function () {
return -($(this).width() / 2);
}
Expand Down Expand Up @@ -565,7 +563,6 @@ $(function () {
}
})
.css({
"width": "auto",
"margin-left": function () {
return -($(this).width() / 2);
}
Expand Down Expand Up @@ -607,7 +604,6 @@ $(function () {
}
})
.css({
"width": "auto",
"margin-left": function () {
return -($(this).width() / 2);
}
Expand Down
1 change: 0 additions & 1 deletion src/octoprint/static/js/app/viewmodels/printerprofiles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -676,7 +676,6 @@ $(function () {
}
})
.css({
"width": "auto",
"margin-left": function () {
return -($(this).width() / 2);
}
Expand Down
6 changes: 4 additions & 2 deletions src/octoprint/static/js/app/viewmodels/settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -452,7 +452,10 @@ $(function () {
throw "Unknown stream type " + streamType;
}

var message = $("<p></p>").append(text).append(webcam_element);
var message = $("<div id='webcamTestContainer'></div>")
.append($("<p></p>"))
.append(text)
.append(webcam_element);

self.testWebcamStreamUrlBusy(true);
showMessageDialog({
Expand Down Expand Up @@ -803,7 +806,6 @@ $(function () {
}
})
.css({
"width": "auto",
"margin-left": function () {
return -($(this).width() / 2);
}
Expand Down
1 change: 0 additions & 1 deletion src/octoprint/static/js/app/viewmodels/wizard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ $(function () {
}
})
.css({
"width": "auto",
"margin-left": function () {
return -($(this).width() / 2);
}
Expand Down
42 changes: 42 additions & 0 deletions src/octoprint/static/less/octoprint.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -708,6 +708,12 @@ ul.dropdown-menu li a {
object-fit: contain;
}
}
// Predict height of webcam test container for modal positioning
// height is 3/4 the fixed modal width, for 4:3 webcam stream.
// Yes it's hardcoded, but so is the modal width.
#webcamTestContainer {
min-height: 384px;
}

/** State sidebar panel */

Expand Down Expand Up @@ -1634,3 +1640,39 @@ textarea.monospace {
}
}
}

/* Custom animations for the dialogs
* These animations override the default bootstrap 2 slow Javascript based animations.
* Usage: Add the class `fade-in` to any modal instead of the `fade` class
*/
@animationDuration: 0.3s;

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes backgroundFadeIn {
from {
opacity: 0;
}
to {
opacity: 0.7;
}
}

.fade-in {
animation-name: fadeIn;
animation-duration: @animationDuration;
}

.modal-backdrop:not(.fade) {
// Slightly fade in the backdrop when BS2 animation is disabled
// Breaks completely disabling animations, but the backdrop is generated by BS2
animation-name: backgroundFadeIn;
animation-duration: @animationDuration;
}
2 changes: 1 addition & 1 deletion src/octoprint/templates/dialogs/about.jinja2
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="about_dialog" class="modal hide fade large" tabindex="-1" role="dialog" aria-labelledby="about_dialog_label" aria-hidden="true">
<div id="about_dialog" class="modal hide fade-in large" tabindex="-1" role="dialog" aria-labelledby="about_dialog_label" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h3 id="about_dialog_label">{{ _('About OctoPrint') }}</h3>
Expand Down
6 changes: 3 additions & 3 deletions src/octoprint/templates/dialogs/files.jinja2
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="add_folder_dialog" class="modal hide fade">
<div id="add_folder_dialog" class="modal hide fade-in">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
<h3>{{ _('Create Folder') }}</h3>
Expand All @@ -20,7 +20,7 @@
</div>
</div>

<div id="move_file_or_folder_dialog" class="modal hide fade">
<div id="move_file_or_folder_dialog" class="modal hide fade-in">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
<h3>{{ _('Move File or Folder') }}</h3>
Expand Down Expand Up @@ -48,7 +48,7 @@
</div>
</div>

<div id="upload_exists_dialog" class="modal hide fade">
<div id="upload_exists_dialog" class="modal hide fade-in">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
<h3>{{ _('File already exists') }}</h3>
Expand Down
2 changes: 1 addition & 1 deletion src/octoprint/templates/dialogs/settings.jinja2
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="settings_dialog" data-test-id="settings-dialog" class="modal hide fade large" tabindex="-1" role="dialog" aria-labelledby="settings_dialog_label" aria-hidden="true">
<div id="settings_dialog" data-test-id="settings-dialog" class="modal hide fade-in large" tabindex="-1" role="dialog" aria-labelledby="settings_dialog_label" aria-hidden="true">
<div class="modal-header">
<button type="button" data-test-id="settings-close-x" class="close" data-dismiss="modal">&times;</button>
<h3 id="settings_dialog_label">{{ _('OctoPrint Settings') }} <i class="fas fa-spinner fa-spin" data-bind="visible: receiving"></i></h3>
Expand Down
2 changes: 1 addition & 1 deletion src/octoprint/templates/dialogs/settings/appearance.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
</div>
</form>

<div id="settings_appearance_managelanguagesdialog" class="modal hide fade">
<div id="settings_appearance_managelanguagesdialog" class="modal hide fade-in">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
<h3>{{ _('Manage Language Packs...') }}</h3>
Expand Down
2 changes: 1 addition & 1 deletion src/octoprint/templates/dialogs/slicing.jinja2
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="slicing_configuration_dialog" class="modal hide fade">
<div id="slicing_configuration_dialog" class="modal hide fade-in">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
<h3 data-bind="text: title"></h3>
Expand Down
2 changes: 1 addition & 1 deletion src/octoprint/templates/dialogs/temperature.jinja2
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="change_offset_dialog" class="modal hide fade">
<div id="change_offset_dialog" class="modal hide fade-in">
<div class="modal-header">
<a href="javascript:void(0)" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
<h3 data-bind="text: changingOffset.title"></h3>
Expand Down
2 changes: 1 addition & 1 deletion src/octoprint/templates/dialogs/timelapse.jinja2
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="timelapsePreviewModal" class="modal large hide fade">
<div id="timelapsePreviewModal" class="modal large hide fade-in">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
<h3>{{ _('Timelapse Preview') }}</h3>
Expand Down
2 changes: 1 addition & 1 deletion src/octoprint/templates/dialogs/usersettings.jinja2
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="usersettings_dialog" class="modal hide fade">
<div id="usersettings_dialog" class="modal hide fade-in">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
<h3>{{ _('User Settings') }}</h3>
Expand Down
2 changes: 1 addition & 1 deletion src/octoprint/templates/dialogs/wizard.jinja2
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="wizard_dialog" class="modal hide fade large" data-backdrop="static" data-keyboard="false">
<div id="wizard_dialog" class="modal hide fade-in large" data-backdrop="static" data-keyboard="false">
<div class="modal-header">
<h3><i class="fas fa-magic"></i> {{ _('Setup Wizard') }}</h3>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/octoprint/templates/recovery.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@
</div>
</div>

<div id="workdialog" class="modal hide fade">
<div id="workdialog" class="modal hide fade-in">
<div class="modal-header">
<h3 data-bind="text: workTitle"></h3>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/octoprint/templates/snippets/settings/accesscontrol/groups.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@

<!-- Modals for group management -->

<div id="settings-groupsEditorDialog" class="modal hide fade">
<div id="settings-groupsEditorDialog" class="modal hide fade-in">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
<h3 data-bind="text: $root.access.groups.editor.header"></h3>
Expand Down
4 changes: 2 additions & 2 deletions src/octoprint/templates/snippets/settings/accesscontrol/users.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
<!-- /ko -->
</script>

<div id="settings-usersEditorDialog" class="modal hide fade">
<div id="settings-usersEditorDialog" class="modal hide fade-in">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
<h3 data-bind="text: $root.access.users.editor.header"></h3>
Expand Down Expand Up @@ -130,7 +130,7 @@
</div>
</div>

<div id="settings-usersDialogChangePassword" class="modal hide fade">
<div id="settings-usersDialogChangePassword" class="modal hide fade-in">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
<h3>{{ _('Change password for user "%(user)s"', user='<span data-bind="text: $root.access.users.editor.name"></span>') }}</h3>
Expand Down
2 changes: 1 addition & 1 deletion src/octoprint/templates/snippets/settings/printerprofiles/profileEditor.jinja2
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="settings_printerProfiles_editDialog" class="modal hide fade">
<div id="settings_printerProfiles_editDialog" class="modal hide fade-in">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
<h3 class="modal-title"></h3>
Expand Down

0 comments on commit 0580b0f

Please sign in to comment.