create a table process

1.0
Javier Álvarez Medina 14 years ago
parent 35b7bd23c8
commit a37ac9fdec

@ -85,6 +85,35 @@
<%= content_for(:mamufas) do %>
<div class="mamufas">
<div class="create_window">
<a href="#close_window" class="close_create"></a>
<div class="inner_">
<span class="loading">
<h5>We are creating your table...</h5>
<p>It's not gonna be a lot of time. Just a few seconds, ok?</p>
</span>
<form action="#">
<span class="top">
<h4>Do you want to import some data to the new table?</h4>
<p>You will also be available to do it later.</p>
<ul>
<li class="selected"><a href="#">I want to create an empty table</a></li>
<li class="disabled">
<a href="#">I want to start with some imported data...</a>
<span class="file">
<input type="file" />
</span>
</li>
</ul>
</span>
<span class="bottom">
<a href="#" class="cancel">cancel</a>
<input id="create_table" type="submit" value="Create table"/>
</span>
</form>
</div>
</div>
<div class="settings_window">
<a href="#close_window" class="close_settings"></a>
<div class="inner_">

@ -3,8 +3,10 @@ javascripts:
- base:
- jquery.min.js
- dashboard:
- plugins/jquery.color.js
- admin/dashboard.js
- public_tables:
- plugins/jquery.color.js
- admin/public_tables.js
- table:
- plugins/jquery.livequery.min.js

Binary file not shown.

Before

Width:  |  Height:  |  Size: 656 B

After

Width:  |  Height:  |  Size: 861 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -23,17 +23,33 @@
$('a.new_table').click(function(ev){
ev.preventDefault();
ev.stopPropagation();
$('div.create_window').show();
$('div.mamufas').fadeIn();
// $.ajax({
// method: "POST",
// url: '/api/json/tables/',
// success: function(data) {
// console.debug(data);
// },
// error: function(e) {
// console.debug(e);
// }
// });
bindESC();
});
$('input#create_table').click(function(ev){
ev.stopPropagation();
ev.preventDefault();
$('div.create_window div.inner_').animate({borderColor:'#FFC209', height:'68px'},500);
$('div.create_window div.inner_ form').animate({opacity:0},300,function(){
$('div.create_window div.inner_ span.loading').show();
$('div.create_window div.inner_ span.loading').animate({opacity:1},200, function(){
$.ajax({
type: "POST",
url: '/api/json/tables/',
success: function(data) {
window.location.href = window.location;
},
error: function(e) {
console.debug(e);
}
});
});
});
setTimeout(function(){$('div.create_window a.close_create').addClass('last');},250);
});
$('a.delete').click(function(ev){
@ -47,7 +63,7 @@
});
$('div.mamufas a.cancel, div.mamufas a.close_delete, div.mamufas a.close_settings').click(function(ev){
$('div.mamufas a.cancel, div.mamufas a.close_delete, div.mamufas a.close_settings, div.mamufas a.close_create').click(function(ev){
ev.preventDefault();
ev.stopPropagation();
$('div.mamufas').fadeOut('fast',function(){
@ -93,6 +109,7 @@
$('div.mamufas').fadeOut('fast',function(){
$('div.mamufas div.settings_window').hide();
$('div.mamufas div.delete_window').hide();
$('div.mamufas div.create_window').hide();
});
}
});

@ -0,0 +1,9 @@
/*!
* Color animation jQuery-plugin
* http://www.bitstorm.org/jquery/color-animation/
* Copyright 2011 Edwin Martin <edwin@bitstorm.org>
* Released under the MIT and GPL licenses.
*/
(function(d){function i(){var b=d("script:first"),a=b.css("color"),c=false;if(/^rgba/.test(a))c=true;else try{c=a!=b.css("color","rgba(0, 0, 0, 0.5)").css("color");b.css("color",a)}catch(e){}return c}function g(b,a,c){var e="rgb"+(d.support.rgba?"a":"")+"("+parseInt(b[0]+c*(a[0]-b[0]),10)+","+parseInt(b[1]+c*(a[1]-b[1]),10)+","+parseInt(b[2]+c*(a[2]-b[2]),10);if(d.support.rgba)e+=","+(b&&a?parseFloat(b[3]+c*(a[3]-b[3])):1);e+=")";return e}function f(b){var a,c;if(a=/#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})/.exec(b))c=
[parseInt(a[1],16),parseInt(a[2],16),parseInt(a[3],16),1];else if(a=/#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/.exec(b))c=[parseInt(a[1],16)*17,parseInt(a[2],16)*17,parseInt(a[3],16)*17,1];else if(a=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(b))c=[parseInt(a[1]),parseInt(a[2]),parseInt(a[3]),1];else if(a=/rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([01\.]*)\s*\)/.exec(b))c=[parseInt(a[1],10),parseInt(a[2],10),parseInt(a[3],10),parseFloat(a[4])];return c}
d.extend(true,d,{support:{rgba:i()}});var h=["color","backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","outlineColor"];d.each(h,function(b,a){d.fx.step[a]=function(c){if(!c.init){c.a=f(d(c.elem).css(a));c.end=f(c.end);c.init=true}c.elem.style[a]=g(c.a,c.end,c.pos)}});d.fx.step.borderColor=function(b){if(!b.init)b.end=f(b.end);var a=h.slice(2,6);d.each(a,function(c,e){b.init||(b[e]={a:f(d(b.elem).css(e))});b.elem.style[e]=g(b[e].a,b.end,b.pos)});b.init=true}})(jQuery);

@ -107,6 +107,37 @@ section#content div.right ul li a:hover span {background-position:right -20px!im
/*Mamufas*/
div.mamufas {position:fixed; display:none; top:0; left:0; height:100%; width:100%; background:rgba(0,0,0,0.65);}
div.mamufas div.create_window {position:absolute; display:none; top:50%; left:50%; width:414px; margin:-107px 0 0 -207px; padding:8px; background:white; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:0 0 50px 3px #111111;}
div.mamufas div.create_window a.close_create {position:absolute; right:-8px; top:-7px; width:23px; height:23px; background:url('/images/admin/dashboard/close_settings.png') no-repeat 0 0;}
div.mamufas div.create_window a.close_create:hover {background-position:0 -23px;}
div.mamufas div.create_window a.close_create.last {background-position:0 -46px;}
div.mamufas div.create_window a.close_create.last:hover {background-position:0 -69px;}
div.mamufas div.create_window div.inner_ span.loading {float:left; display:none; opacity:0; width:347px; height:40px; padding:0 0 0 47px; margin:10px; background:url('/images/admin/icons/loading.gif') no-repeat 0 7px;}
div.mamufas div.create_window div.inner_ span.loading h5 {margin:5px 0 0 0; font:bold 15px "Helvetica"; color:#333333; text-shadow:0 1px white;}
div.mamufas div.create_window div.inner_ span.loading p {padding:6px 0 0 0; font:normal 13px "Helvetica"; color:#666666; text-shadow:0 1px white;}
div.mamufas div.create_window div.inner_ {float:left; width:414px; border:1px solid #CCCCCC; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; background:#EDEEF0;}
div.mamufas div.create_window div.inner_ span.top {float:left; width:394px; padding:10px 10px 25px 10px; border-bottom:1px solid #CCCCCC;}
div.mamufas div.create_window div.inner_ span.top h4 {font:bold 15px "Helvetica",Arial; color:#333333; text-shadow:0 1px white;}
div.mamufas div.create_window div.inner_ span.top p {padding:5px 0 5px 0; font:normal 13px "Helvetica",Arial; color:#999999; text-shadow:0 1px white;}
div.mamufas div.create_window div.inner_ span.top ul {padding:10px 0 0 0;}
div.mamufas div.create_window div.inner_ span.top ul li {float:left; width:auto!important; padding:10px;}
div.mamufas div.create_window div.inner_ span.top ul li a {padding:0 0 0 18px; font:bold 13px Arial; color:#333333; text-decoration:none; background:url('/images/admin/icons/select_create_table.png') no-repeat 0 -28px;}
div.mamufas div.create_window div.inner_ span.top ul li a:hover {color:#111111; background-position:0 -67px;}
div.mamufas div.create_window div.inner_ span.top ul li.selected {width:auto; padding:10px; background:#2A3857; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
div.mamufas div.create_window div.inner_ span.top ul li.selected a {color:white; background-position:0 1px;}
div.mamufas div.create_window div.inner_ span.top ul li.selected a:hover {color:white; cursor:default; background-position:0 1px;}
div.mamufas div.create_window div.inner_ span.top ul li span.file {display:none;}
div.mamufas div.create_window div.inner_ span.top ul li.selected span.file {display:block;}
div.mamufas div.create_window div.inner_ span.top ul li.disabled a {opacity:0.3;}
div.mamufas div.create_window div.inner_ span.top ul li.disabled a:hover {cursor:default; background-position:0 -28px;}
div.mamufas div.create_window div.inner_ span.bottom {float:left; width:394px; padding:10px; border-top:1px solid white;}
div.mamufas div.create_window div.inner_ span.bottom input {float:right; height:26px; padding:7px 10px; border:1px solid #999; font:bold 11px "Helvetica",Arial; color:#333333; text-align:center;
text-decoration:none; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; text-shadow:0 1px white; background-image:-moz-linear-gradient(100% 100% 90deg, #FFFFFF, #CACBCE); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#CACBCE));}
div.mamufas div.create_window div.inner_ span.bottom input:focus {outline:none;}
div.mamufas div.create_window div.inner_ span.bottom input:hover {background-image:-moz-linear-gradient(100% 100% 90deg, #CACBCE, #FFFFFF); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#CACBCE), to(#FFFFFF)); cursor:pointer;}
div.mamufas div.create_window div.inner_ span.bottom a.cancel {float:left; margin:7px 0 0 0; font:normal 13px "Helvetica",Arial; color:#666666;}
div.mamufas div.create_window div.inner_ span.bottom a.cancel:hover {color:#333333;}
div.mamufas div.settings_window {position:absolute; display:none; top:50%; left:50%; width:309px; height:259px; margin:-137px 0 0 -167px; padding:8px; background:white; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:0 0 50px 3px #111111;}
div.mamufas div.settings_window a.close_settings {position:absolute; right:-8px; top:-7px; width:23px; height:23px; background:url('/images/admin/dashboard/close_settings.png') no-repeat 0 0;}
div.mamufas div.settings_window a.close_settings:hover {background-position:0 -23px;}
@ -130,6 +161,7 @@ div.mamufas div.settings_window div.inner_ span.bottom input {float:right; heigh
div.mamufas div.settings_window div.inner_ span.bottom input:focus {outline:none;}
div.mamufas div.settings_window div.inner_ span.bottom input:hover {background-image:-moz-linear-gradient(100% 100% 90deg, #CACBCE, #FFFFFF); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#CACBCE), to(#FFFFFF)); cursor:pointer;}
div.mamufas div.delete_window {position:absolute; display:none; top:50%; left:50%; width:434px; height:139px; margin:-69px 0 0 -217px; padding:8px; background:white; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:0 0 50px 3px #111111;}
div.mamufas div.delete_window a.close_delete {position:absolute; right:-8px; top:-8px; width:24px; height:24px; background:url('/images/admin/table/close_delete.png') no-repeat 0 0;}
div.mamufas div.delete_window a.close_delete:hover {background-position:0 -24px;}

Loading…
Cancel
Save