From 332caf0bbaf582ce484eeedd586335fad000434c Mon Sep 17 00:00:00 2001 From: RaNaN Date: Tue, 14 Aug 2012 22:34:45 +0200 Subject: added dialog window --- module/web/static/css/default/style.css | 6 +- module/web/static/css/omniwindow.css | 72 +++++++++++++ module/web/static/js/libs/jquery.omniwindow.js | 141 +++++++++++++++++++++++++ module/web/templates/default/base.html | 130 +++++++++++++++-------- 4 files changed, 303 insertions(+), 46 deletions(-) create mode 100644 module/web/static/css/omniwindow.css create mode 100644 module/web/static/js/libs/jquery.omniwindow.js diff --git a/module/web/static/css/default/style.css b/module/web/static/css/default/style.css index f882e4a43..87cd60831 100644 --- a/module/web/static/css/default/style.css +++ b/module/web/static/css/default/style.css @@ -157,7 +157,11 @@ header .logo { #globalprogress { height: 8px; - margin: 8px 5px; + margin: 8px 5px 0; +} + +#globalprogress .ui-widget-header { + background: #fee247; } #speedgraph { diff --git a/module/web/static/css/omniwindow.css b/module/web/static/css/omniwindow.css new file mode 100644 index 000000000..12f4d451c --- /dev/null +++ b/module/web/static/css/omniwindow.css @@ -0,0 +1,72 @@ +/* Default class for an overlay */ +.ow-overlay { + content: " "; + height: 100%; + width: 100%; + position: absolute; + left: 0; + top: 0; + background: -moz-radial-gradient(center, ellipse cover, rgba(127,127,0,0) 0%, rgba(127,127,127,0.9) 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(127,127,127,0)), color-stop(100%,rgba(127,127,127,0.9))); + background: -webkit-radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%); + background: -o-radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%); + background: -ms-radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%); + background: radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007f7f7f', endColorstr='#e67f7f7f',GradientType=1 ); + z-index: 50; + } + +/* Default class for both hidden overlay and modal window */ +.ow-closed { + display: none; +} + +/* Default class for modal window */ +.modal { + left: 50%; + position: fixed; + width: 300px; + height: 300px; + z-index: 100; + background-color: #ffffff; +} + +/* Animations */ +.window-container { + background: #fcfcfc; + opacity: 0; + margin: 8em auto; + width: 500px; + padding: 10px 20px 20px; + text-align: left; + border-radius: 3px; + box-shadow: 0px 0px 30px rgba(0,0,0,0.2); + -webkit-transition: 0.4s ease-out; + -moz-transition: 0.4s ease-out; + -ms-transition: 0.4s ease-out; + -o-transition: 0.4s ease-out; + transition: 0.4s ease-out; +} + +.zoomin { + -webkit-transform: scale(1.2); + -moz-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); +} + +.zoomout { + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); +} + +.window-container-visible { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + opacity: 1; +} + diff --git a/module/web/static/js/libs/jquery.omniwindow.js b/module/web/static/js/libs/jquery.omniwindow.js new file mode 100644 index 000000000..e1f0b8f77 --- /dev/null +++ b/module/web/static/js/libs/jquery.omniwindow.js @@ -0,0 +1,141 @@ +// jQuery OmniWindow plugin +// @version: 0.7.0 +// @author: Rudenka Alexander (mur.mailbox@gmail.com) +// @license: MIT + +;(function($) { + "use strict"; + $.fn.extend({ + omniWindow: function(options) { + + options = $.extend(true, { + animationsPriority: { + show: ['overlay', 'modal'], + hide: ['modal', 'overlay'] + }, + overlay: { + selector: '.ow-overlay', + hideClass: 'ow-closed', + animations: { + show: function(subjects, internalCallback) { return internalCallback(subjects); }, + hide: function(subjects, internalCallback) { return internalCallback(subjects); }, + internal: { + show: function(subjects){ subjects.overlay.removeClass(options.overlay.hideClass); }, + hide: function(subjects){ subjects.overlay.addClass(options.overlay.hideClass); } + } + } + }, + modal: { + hideClass: 'ow-closed', + animations: { + show: function(subjects, internalCallback) { return internalCallback(subjects); }, + hide: function(subjects, internalCallback) { return internalCallback(subjects); }, + internal: { + show: function(subjects){ subjects.modal.removeClass(options.modal.hideClass); }, + hide: function(subjects){ subjects.modal.addClass(options.modal.hideClass); } + } + }, + internal: { + stateAttribute: 'ow-active' + } + }, + eventsNames: { + show: 'show.ow', + hide: 'hide.ow', + internal: { + overlayClick: 'click.ow', + keyboardKeyUp: 'keyup.ow' + } + }, + callbacks: { // Callbacks execution chain + beforeShow: function(subjects, internalCallback) { return internalCallback(subjects); }, // 1 (stop if retruns false) + positioning: function(subjects, internalCallback) { return internalCallback(subjects); }, // 2 + afterShow: function(subjects, internalCallback) { return internalCallback(subjects); }, // 3 + beforeHide: function(subjects, internalCallback) { return internalCallback(subjects); }, // 4 (stop if retruns false) + afterHide: function(subjects, internalCallback) { return internalCallback(subjects); }, // 5 + internal: { + beforeShow: function(subjects) { + if (subjects.modal.data(options.modal.internal.stateAttribute)) { + return false; + } else { + subjects.modal.data(options.modal.internal.stateAttribute, true); + return true; + } + }, + afterShow: function(subjects) { + $(document).on(options.eventsNames.internal.keyboardKeyUp, function(e) { + if (e.keyCode === 27) { // if the key pressed is the ESC key + subjects.modal.trigger(options.eventsNames.hide); + } + }); + + subjects.overlay.on(options.eventsNames.internal.overlayClick, function(){ + subjects.modal.trigger(options.eventsNames.hide); + }); + }, + positioning: function(subjects) { + subjects.modal.css('margin-left', Math.round(subjects.modal.outerWidth() / -2)); + }, + beforeHide: function(subjects) { + if (subjects.modal.data(options.modal.internal.stateAttribute)) { + subjects.modal.data(options.modal.internal.stateAttribute, false); + return true; + } else { + return false; + } + }, + afterHide: function(subjects) { + subjects.overlay.off(options.eventsNames.internal.overlayClick); + $(document).off(options.eventsNames.internal.keyboardKeyUp); + + subjects.overlay.css('display', ''); // clear inline styles after jQ animations + subjects.modal.css('display', ''); + } + } + } + }, options); + + var animate = function(process, subjects, callbackName) { + var first = options.animationsPriority[process][0], + second = options.animationsPriority[process][1]; + + options[first].animations[process](subjects, function(subjs) { // call USER's FIRST animation (depends on priority) + options[first].animations.internal[process](subjs); // call internal FIRST animation + + options[second].animations[process](subjects, function(subjs) { // call USER's SECOND animation + options[second].animations.internal[process](subjs); // call internal SECOND animation + + // then we need to call USER's + // afterShow of afterHide callback + options.callbacks[callbackName](subjects, options.callbacks.internal[callbackName]); + }); + }); + }; + + var showModal = function(subjects) { + if (!options.callbacks.beforeShow(subjects, options.callbacks.internal.beforeShow)) { return; } // cancel showing if beforeShow callback return false + + options.callbacks.positioning(subjects, options.callbacks.internal.positioning); + + animate('show', subjects, 'afterShow'); + }; + + var hideModal = function(subjects) { + if (!options.callbacks.beforeHide(subjects, options.callbacks.internal.beforeHide)) { return; } // cancel hiding if beforeHide callback return false + + animate('hide', subjects, 'afterHide'); + }; + + + var $overlay = $(options.overlay.selector); + + return this.each(function() { + var $modal = $(this); + var subjects = {modal: $modal, overlay: $overlay}; + + $modal.bind(options.eventsNames.show, function(){ showModal(subjects); }) + .bind(options.eventsNames.hide, function(){ hideModal(subjects); }); + }); + } + }); +})(jQuery); \ No newline at end of file diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html index d5d51d989..5e1b2089a 100644 --- a/module/web/templates/default/base.html +++ b/module/web/templates/default/base.html @@ -9,11 +9,13 @@ + + @@ -32,57 +34,50 @@ pyLoad {% if user %} -
- No runnings tasks -
-
- - -
-
- {{ user.name }} +
+ No runnings tasks +
-
- {{ _("Logout")}} + + +
+
+ {{ user.name }} +
+
+ {{ _("Logout") }} +
-
-
-
-
- 500 kb/s +
+
+
+ 500 kb/s +
+
+ 5 / 125 +
-
- 5 / 125 -
-
{% endif %}
- DOM Element (hidden div) -