From 364f2f950660ae71f84760542dd04618bd819b55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javier=20=C3=81lvarez=20Medina?= Date: Thu, 27 Jan 2011 14:04:00 +0100 Subject: [PATCH] changes in table - name table --- app/views/admin/tables/show.html.erb | 2 +- config/asset_packages.yml | 1 + public/images/admin/table/save_title_bkg.png | Bin 0 -> 2039 bytes public/images/admin/table/title_input_bkg.png | Bin 0 -> 380 bytes public/javascripts/admin/table.js | 142 ------------ public/javascripts/admin/table_elements.js | 210 ++++++++++++++++++ public/stylesheets/admin/table.css | 12 + 7 files changed, 224 insertions(+), 143 deletions(-) create mode 100644 public/images/admin/table/save_title_bkg.png create mode 100644 public/images/admin/table/title_input_bkg.png create mode 100644 public/javascripts/admin/table_elements.js diff --git a/app/views/admin/tables/show.html.erb b/app/views/admin/tables/show.html.erb index 42c537d9b5..8f8c6c5a54 100644 --- a/app/views/admin/tables/show.html.erb +++ b/app/views/admin/tables/show.html.erb @@ -9,7 +9,7 @@
-

<%= @table.name %>

+

<%= @table.name %>

<%= table_privacy_text(@table) %>

<% unless @table.tags.blank? %> diff --git a/config/asset_packages.yml b/config/asset_packages.yml index 2d6dc212a0..6588f85bda 100644 --- a/config/asset_packages.yml +++ b/config/asset_packages.yml @@ -9,6 +9,7 @@ javascripts: - table: - plugins/jquery.livequery.min.js - plugins/cDBtable.js + - admin/table_elements.js - admin/table.js stylesheets: diff --git a/public/images/admin/table/save_title_bkg.png b/public/images/admin/table/save_title_bkg.png new file mode 100644 index 0000000000000000000000000000000000000000..8a9a318e68adf79e0f52c67c9f2d7357d19fce3d GIT binary patch literal 2039 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 S$-e}8kipZ{&t;ucLK6VgNs)>G literal 0 HcmV?d00001 diff --git a/public/javascripts/admin/table.js b/public/javascripts/admin/table.js index a311d8f062..93a055384c 100644 --- a/public/javascripts/admin/table.js +++ b/public/javascripts/admin/table.js @@ -9,150 +9,8 @@ total: 5000 } ); - - - //SUBHEADER EVENTS AND FLOATING WINDOWS - - //Save operation loader - $('section.subheader').append( - '
' + - '

Loading...

'+ - '
'); - - - // change table status - $('div.inner_subheader div.left').append( - ''+ - ''+ - ''); - - $('span.privacy_window ul li a').livequery('click',function(ev){ - ev.stopPropagation(); - ev.preventDefault(); - var parent_li = $(this).parent(); - if (parent_li.hasClass('selected')) { - $('span.privacy_window').hide(); - } else { - var old_value = $('span.privacy_window ul li.selected a strong').text().toLowerCase(); - $('span.privacy_window ul li').removeClass('selected'); - parent_li.addClass('selected'); - var new_value = $('span.privacy_window ul li.selected a strong').text().toLowerCase(); - $('span.privacy_window').hide(); - $('p.status a').removeClass('public private').addClass(new_value).text(new_value); - changesRequest('/toggle_privacy','privacy',new_value.toUpperCase(),old_value); - } - }); - - $('p.status a').livequery('click',function(ev){ - ev.stopPropagation(); - ev.preventDefault(); - var privacy_window = $(this).parent().parent().children('span.privacy_window'); - if (privacy_window.is(':visible')) { - privacy_window.hide(); - } else { - var status_position = $('p.status a').position(); - privacy_window.css('left',status_position.left-72+'px').show(); - } - }); - // End table status binding - - - - - - - - - $('div.inner_subheader div.right').append( - ''+ - 'advanced'+ - ''+ - ''); - - $('p.settings a.settings, span.advanced_options a.advanced').livequery('click',function(ev){ - ev.stopPropagation(); - ev.preventDefault(); - if (!$('span.advanced_options').is(':visible')) { - $(this).parent().parent().children('span.advanced_options').show(); - $('body').click(function(event) { - if (!$(event.target).closest('span.advanced_options').length) { - $('span.advanced_options').hide(); - $('body').unbind('click'); - }; - }); - } else { - $(this).parent().hide(); - $('body').unbind('click'); - } - }); }); - - - function changesRequest(url_change,param,value,old_value) { - //show loader - $('div.performing_op').show(); - - var params = {}; - params[param] = value; - $.ajax({ - dataType: 'json', - type: "PUT", - url: '/api/json/tables/'+table_id+url_change, - data: params, - success: function(data) { - successActionPerform(param); - }, - error: function(e) { - errorActionPerforming(param,old_value); - } - }); - } - - - - function successActionPerform(param) { - switch (param) { - case 'privacy': $('div.performing_op p').removeClass('loading').addClass('success').text('The status has been changed'); - var width_text = $('div.performing_op p').width(); - $('div.performing_op').css('margin-left','-'+(width_text/2)+'px'); - break; - //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - default: - } - $('div.performing_op').delay(1000).fadeOut(function(){resetLoader()}); - } - - - function errorActionPerforming(param, old_value) { - switch (param) { - case 'privacy': $('div.performing_op p').removeClass('loading').addClass('error').text('The status has not been changed. Try again later.'); - var width_text = $('div.performing_op p').width(); - $('div.performing_op').css('margin-left','-'+(width_text/2)+'px'); - $('span.privacy_window ul li').removeClass('selected'); - $('span.privacy_window ul li.'+old_value).addClass('selected'); - $('p.status a').removeClass('public private').addClass(old_value).text(old_value); - break; - //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - default: - } - $('div.performing_op').delay(1000).fadeOut(function(){resetLoader()}); - } - - - function resetLoader() { - $('div.performing_op p').removeClass('success').addClass('loading').text('Loading...'); - var width_text = $('div.performing_op p').width(); - $('div.performing_op').css('margin-left','-'+(width_text/2)+'px'); - } - - diff --git a/public/javascripts/admin/table_elements.js b/public/javascripts/admin/table_elements.js new file mode 100644 index 0000000000..4d234b7a38 --- /dev/null +++ b/public/javascripts/admin/table_elements.js @@ -0,0 +1,210 @@ + + + $(document).ready(function(){ + + //SUBHEADER EVENTS AND FLOATING WINDOWS + + //Save operation loader + $('section.subheader').append( + '
' + + '

Loading...

'+ + '
'); + + + + //Change title name window + $('div.inner_subheader div.left').append( + ''+ + '

Pick a name for this table

'+ + '
'+ + '
'+ + ''); + //Bind events + // -Open window + $('section.subheader h2 a').livequery('click',function(ev){ + ev.stopPropagation(); + ev.preventDefault(); + if ($('span.title_window').is(':visible')) { + $('span.title_window').hide(); + } else { + var position = ($(this).parent().width()/2) - 118; + if ($('section.subheader h2 a').text()=='Untitle table') { + $('span.title_window input[type="text"]').attr('value',''); + } else { + $('span.title_window input[type="text"]').attr('value',$('section.subheader h2 a').text()); + } + $('span.title_window').css('left',position+'px').show(); + $('span.title_window input[type="text"]').focus(); + } + }); + $('#change_name').live('submit',function(){ + console.log('jamon'); + saveTableTitle(); + }); + + + // Change table status + $('div.inner_subheader div.left').append( + ''+ + ''+ + ''); + + $('span.privacy_window ul li a').livequery('click',function(ev){ + ev.stopPropagation(); + ev.preventDefault(); + var parent_li = $(this).parent(); + if (parent_li.hasClass('selected')) { + $('span.privacy_window').hide(); + } else { + var old_value = $('span.privacy_window ul li.selected a strong').text().toLowerCase(); + $('span.privacy_window ul li').removeClass('selected'); + parent_li.addClass('selected'); + var new_value = $('span.privacy_window ul li.selected a strong').text().toLowerCase(); + $('span.privacy_window').hide(); + $('p.status a').removeClass('public private').addClass(new_value).text(new_value); + changesRequest('/toggle_privacy','privacy',new_value.toUpperCase(),old_value); + } + }); + + $('p.status a').livequery('click',function(ev){ + ev.stopPropagation(); + ev.preventDefault(); + var privacy_window = $(this).parent().parent().children('span.privacy_window'); + if (privacy_window.is(':visible')) { + privacy_window.hide(); + } else { + var status_position = $('p.status a').position(); + privacy_window.css('left',status_position.left-72+'px').show(); + } + }); + // End table status binding + + + + $('div.inner_subheader div.right').append( + ''+ + 'advanced'+ + ''+ + ''); + + $('p.settings a.settings, span.advanced_options a.advanced').livequery('click',function(ev){ + ev.stopPropagation(); + ev.preventDefault(); + if (!$('span.advanced_options').is(':visible')) { + $(this).parent().parent().children('span.advanced_options').show(); + $('body').click(function(event) { + if (!$(event.target).closest('span.advanced_options').length) { + $('span.advanced_options').hide(); + $('body').unbind('click'); + }; + }); + } else { + $(this).parent().hide(); + $('body').unbind('click'); + } + }); + + }); + + + + function changesRequest(url_change,param,value,old_value) { + //show loader + $('div.performing_op').show(); + + var params = {}; + params[param] = value; + $.ajax({ + dataType: 'json', + type: "PUT", + url: '/api/json/tables/'+table_id+url_change, + data: params, + success: function(data) { + successActionPerform(param); + }, + error: function(e) { + errorActionPerforming(param,old_value); + } + }); + } + + + + function successActionPerform(param) { + switch (param) { + case 'privacy': $('div.performing_op p').removeClass('loading').addClass('success').text('The status has been changed'); + var width_text = $('div.performing_op p').width(); + $('div.performing_op').css('margin-left','-'+(width_text/2)+'px'); + break; + //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + case 'name': $('div.performing_op p').removeClass('loading').addClass('success').text('The table name has been changed'); + var width_text = $('div.performing_op p').width(); + $('div.performing_op').css('margin-left','-'+(width_text/2)+'px'); + break; + //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + default: + } + $('div.performing_op').delay(2000).fadeOut(function(){resetLoader()}); + } + + + + + + function errorActionPerforming(param, old_value) { + switch (param) { + case 'privacy': $('div.performing_op p').removeClass('loading').addClass('error').text('The status has not been changed. Try again later.'); + var width_text = $('div.performing_op p').width(); + $('div.performing_op').css('margin-left','-'+(width_text/2)+'px'); + $('span.privacy_window ul li').removeClass('selected'); + $('span.privacy_window ul li.'+old_value).addClass('selected'); + $('p.status a').removeClass('public private').addClass(old_value).text(old_value); + break; + //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + case 'name': $('div.performing_op p').removeClass('loading').addClass('error').text('The table name has not been changed. Try again later.'); + var width_text = $('div.performing_op p').width(); + $('div.performing_op').css('margin-left','-'+(width_text/2)+'px'); + $('section.subheader h2 a').text(old_value); + break; + //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + default: + } + $('div.performing_op').delay(2000).fadeOut(function(){resetLoader()}); + } + + + + // -Save table name + function saveTableTitle() { + var new_value = $('span.title_window input[type="text"]').attr('value'); + var old_value = $('section.subheader h2 a').text(); + if (new_value==old_value) { + $('span.title_window').hide(); + } else if (new_value=='') { + $('span.title_window input').css('border-color','#D05153'); + setTimeout(function(){$('span.title_window input').css('border-color','#999999')},1000); + } else { + $('section.subheader h2 a').text(new_value); + $('span.title_window').hide(); + changesRequest('/update','name',new_value,old_value); + } + } + + + + function resetLoader() { + $('div.performing_op p').removeClass('success').addClass('loading').text('Loading...'); + var width_text = $('div.performing_op p').width(); + $('div.performing_op').css('margin-left','-'+(width_text/2)+'px'); + } + + + + + diff --git a/public/stylesheets/admin/table.css b/public/stylesheets/admin/table.css index df4cabac30..b83a28f42a 100644 --- a/public/stylesheets/admin/table.css +++ b/public/stylesheets/admin/table.css @@ -15,6 +15,8 @@ section.subheader {position:absolute; top:58px; left:0; width:100%; min-width:88 section.subheader div.mamufas {float:left; width:100%; background:url('/images/admin/common/sub_header_bkg.png') repeat-x 0 0;} section.subheader div.left {position:relative; float:left; width:600px; height:88px; padding:15px 0 0 0; margin:0 0 0 40px;} section.subheader h2 {float:left; width:auto; font:bold 21px Arial; color:white;} +section.subheader h2 a {color:white; text-decoration:none;} +section.subheader h2 a:hover {font-style:italic;} section.subheader p.status {float:left; width:auto;} section.subheader p.status a {float:left; padding:2px 7px; margin:4px 0 0 10px; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; font:bold 11px Arial; color:white; text-decoration:none; text-transform:uppercase;} section.subheader p.status a.public {background:#6FBE6F;} @@ -74,6 +76,16 @@ section.subheader div.performing_op p {font:normal 13px Arial; color:#333333; pa section.subheader div.performing_op p.loading {padding:8px 12px 8px 32px; background:url('/images/admin/icons/watch.png') no-repeat 12px 9px #FFEAA4;} section.subheader div.performing_op p.success {padding:8px 12px; background:#99CC66; border-bottom-color:#A5BB93; color:#111111;} section.subheader div.performing_op p.error {padding:8px 12px; background:#FF5F5F; border-bottom-color:#D05153; color:white;} +/*Change table title*/ +section.subheader span.title_window {position:absolute; display:none; top:22px; right:50px; width:200px; height:67px; padding:33px 18px 0 18px; background:url('/images/admin/table/save_title_bkg.png') no-repeat 0 0;} +section.subheader span.title_window p {font:bold 13px Arial; color:#000000;} +section.subheader span.title_window input[type="text"] {float:left; width:134px; height:14px; margin:5px 0 0 0; padding:6px 7px; background:white; color:#999999; border:none; font:normal 14px Arial; border:1px solid #999999; border-right:0; + -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; border-top-left-radius: 3px; border-bottom-left-radius: 3px;} +section.subheader span.title_window input:focus {outline:none; color:#333333;} +section.subheader span.title_window input[type="submit"] {float:right; width:50px; height:28px; margin:5px 1px 0 0; padding:6px 0; font:bold 12px Arial; color:#333333; text-align:center; border:1px solid #999999; text-decoration:none; + -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; + background-image:-moz-linear-gradient(100% 100% 90deg, #FFFFFF, #CACBCE); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#CACBCE));} +section.subheader span.title_window input[type="submit"]: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;}