diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index 6ef3f683..3e46f2ca 100644 --- a/build/css/ox.ui.css +++ b/build/css/ox.ui.css @@ -651,3 +651,18 @@ Panels bottom: 0; overflow: hidden; } + +/* +================================================================================ +Requests +================================================================================ +*/ + +.OxLoadingIcon { + opacity: 0; +} + +.OxLoadingIcon.OxMedium { + width: 16px; + height: 16px; +} diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 61c3fb0a..b2640032 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -2230,7 +2230,9 @@ requires .addClass("OxExtras") .appendTo(that.$element); $.each(self.options.extras, function(position, extra) { - extra.appendTo(that.extras); + extra.css({ + float: "left" // fixme: need class! + }).appendTo(that.extras); }); } @@ -3188,23 +3190,64 @@ requires }; -})(); + /* + ============================================================================ + Requests + ============================================================================ + */ -/* -============================================================================ -Requests -============================================================================ -*/ + /* + ---------------------------------------------------------------------------- + Ox.LoadingIcon + ---------------------------------------------------------------------------- + */ -/* ----------------------------------------------------------------------------- -Ox.Progressbar ----------------------------------------------------------------------------- -*/ + Ox.LoadingIcon = function(options, self) { + var self = self || {}, + that = new Ox.Element("img", self) + .defaults({ + size: "medium" + }) + .options(options || {}) + .attr({ + src: oxui.path + "/png/ox.ui.classic/loading.png" + }) + .addClass( + "OxLoadingIcon Ox" + Ox.toTitleCase(self.options.size) + ); + self.deg = 0; + function update() { + Ox.print(self.deg, "deg"); + that.css({ + MozTransform: "rotate(" + self.deg + "deg)", + WebkitTransform: "rotate(" + self.deg + "deg)" + }); + } + that.start = function() { + self.deg = 0; + that.css({ + opacity: 1 + }); + self.interval = setInterval(function() { + self.deg = (self.deg + 30) % 360; + update(); + }, 83); + }; + that.stop = function() { + clearTimeout(self.interval); + self.deg = 0; + that.css({ + opacity: 0 + }); + } + return that; + } -/* ----------------------------------------------------------------------------- -Ox.Spinner ----------------------------------------------------------------------------- -*/ + /* + ---------------------------------------------------------------------------- + Ox.Progressbar + ---------------------------------------------------------------------------- + */ + +})(); \ No newline at end of file diff --git a/build/png/ox.ui.classic/loading.png b/build/png/ox.ui.classic/loading.png new file mode 100644 index 00000000..82153b7e Binary files /dev/null and b/build/png/ox.ui.classic/loading.png differ diff --git a/demos/test/index.html b/demos/test/index.html index dfa8229e..bef1056f 100644 --- a/demos/test/index.html +++ b/demos/test/index.html @@ -59,6 +59,13 @@ borderBottom: "1px solid rgb(160, 160, 160)" })*/; + var loadingIcon = new Ox.LoadingIcon({ + size: "medium" + }) + .css({ + marginLeft: "4px" + }); + var mainMenu = new Ox.MainMenu({ extras: [ new Ox.Input({ @@ -107,7 +114,8 @@ id: "find", label: ["Find: All", "Find: Title", "Find: Director", "Find: Country", "Find: Cinematographer"], labelWidth: 96 - }).width(320) + }).width(320), + loadingIcon ], menus: [ { @@ -169,6 +177,12 @@ ], size: "large" }); + Ox.Event.bind(null, "submit_find", function(data) { + loadingIcon.start(); + setTimeout(function() { + loadingIcon.stop(); + }, 5000); + }); var bottomPanel = Ox.Bar({size: "small"}) .css({ zIndex: 2, @@ -455,6 +469,19 @@ placeholder: ["City", "State"], selected: 1 }).addClass("margin").width(160).appendTo(mainPanel); + Ox.Button({ + selectable: true, + size: size, + type: "text", + value: "Foo" + }).addClass("margin").appendTo(mainPanel); + Ox.Button({ + selectable: true, + size: size, + type: "text", + value: "Bar" + }).addClass("margin").appendTo(mainPanel); + //*/ function openDialog() { var $dialog = new Ox.Dialog({