Scott Seago
2008-Jul-18 16:59 UTC
[Ovirt-devel] [PATCH] added tallen's confirmation dialog styling changes. I've replaced all of the confirm("foo") javascript confirmation popups with the facebox-based design.
Signed-off-by: Scott Seago <sseago at redhat.com>
---
wui/src/app/helpers/application_helper.rb | 24 ++++++++++
wui/src/app/views/hardware/quick_summary.rhtml | 26 ++++++------
wui/src/app/views/layouts/_side_toolbar.rhtml | 6 ++-
wui/src/app/views/layouts/redux.rhtml | 40 ++++++++---------
wui/src/app/views/resources/quick_summary.rhtml | 30 +++++++-------
wui/src/app/views/storage/show.rhtml | 24 +++++-----
wui/src/app/views/vm/show.rhtml | 52 +++++++++++-----------
wui/src/public/images/bg_warningMessage.png | Bin 0 -> 625 bytes
wui/src/public/images/icon_warning.png | Bin 0 -> 1954 bytes
wui/src/public/stylesheets/layout.css | 18 ++++++++
10 files changed, 131 insertions(+), 89 deletions(-)
create mode 100644 wui/src/public/images/bg_warningMessage.png
create mode 100644 wui/src/public/images/icon_warning.png
diff --git a/wui/src/app/helpers/application_helper.rb
b/wui/src/app/helpers/application_helper.rb
index 58a6358..63a33d3 100644
--- a/wui/src/app/helpers/application_helper.rb
+++ b/wui/src/app/helpers/application_helper.rb
@@ -113,6 +113,30 @@ module ApplicationHelper
}
end
+ def confirmation_dialog(div_id, text, action)
+ %{
+ <div id="#{div_id}" style="display:none;">
+ <div class="confirm_dialog_title">
+ <div
class="confirm_dialog_header">#{text}</div>
+ <div style="clear:both;"></div>
+ </div>
+
+ <div class="confirm_dialog_footer">
+ <div class="button">
+ <div class="button_left_grey"></div>
+ <div class="button_middle_grey"><a
href="#"
onclick="jQuery(document).trigger('close.facebox')">Cancel</a></div>
+ <div class="button_right_grey"></div>
+ </div>
+ <div class="button">
+ <div class="button_left_blue"></div>
+ <div class="button_middle_blue"><a
href="#" onclick="#{action}">OK</a></div>
+ <div class="button_right_blue"></div>
+ </div>
+ </div>
+ </div>
+ }
+ end
+
def timeout_flash(name)
%{
<script type="text/javascript">
diff --git a/wui/src/app/views/hardware/quick_summary.rhtml
b/wui/src/app/views/hardware/quick_summary.rhtml
index 897cecb..eb2e6af 100644
--- a/wui/src/app/views/hardware/quick_summary.rhtml
+++ b/wui/src/app/views/hardware/quick_summary.rhtml
@@ -10,7 +10,7 @@
<%= link_to image_tag("icon_edit.png") + " Edit Default
Quota",
{:controller => 'quota', :action =>
'edit', :id => @pool.quota},
:rel=>"facebox[.bolder]",
:class=>"selection_facebox" %>
- <a href="#" onClick="delete_default_quota()">
+ <a href="#confirm_delete_default_quota"
rel="facebox[.bolder]">
<%= image_tag "icon_x.png" %> Remove Default Quota
</a>
<% else -%>
@@ -20,21 +20,21 @@
<% end -%>
<% end -%>
<% end -%>
+<%= confirmation_dialog("confirm_delete_default_quota", "Are
you sure?", "delete_default_quota()") %>
<script type="text/javascript">
function delete_default_quota()
{
- if(confirm("Are you sure?")){
- $.post('<%= url_for :controller => "quota", :action
=> "destroy", :id => @pool.quota %>',
- function(data,status){
- refresh_summary('hwpool_selection',
- '<%= url_for :controller =>
"hardware",
- :action =>
"quick_summary" %>',
- <%= @pool.id %>)
- if (data.alert) {
- $.jGrowl(data.alert);
- }
- }, 'json');
- }
+ jQuery(document).trigger('close.facebox');
+ $.post('<%= url_for :controller => "quota", :action
=> "destroy", :id => @pool.quota %>',
+ function(data,status){
+ refresh_summary('hwpool_selection',
+ '<%= url_for :controller =>
"hardware",
+ :action => "quick_summary"
%>',
+ <%= @pool.id %>);
+ if (data.alert) {
+ $.jGrowl(data.alert);
+ }
+ }, 'json');
}
</script>
diff --git a/wui/src/app/views/layouts/_side_toolbar.rhtml
b/wui/src/app/views/layouts/_side_toolbar.rhtml
index 2cdd4f3..42cbae6 100644
--- a/wui/src/app/views/layouts/_side_toolbar.rhtml
+++ b/wui/src/app/views/layouts/_side_toolbar.rhtml
@@ -13,10 +13,12 @@
</div>
<% end -%>
<div class="toolbar" style="float:left;">
- <a href="#"
onClick="delete_<%=pool[:type]=='HardwarePool' ? 'hw' :
'vm' %>_pool(<%=pool.id%>)">
+ <a href="#conf_nav_delete_pool"
rel="facebox[.bolder]">
<%= image_tag "icon_delete.gif", :title=>"Delete
Selected Pool" %>
</a>
</div>
<% end -%>
-
+<div class="toolbar" style="display:none;">
+ <%= confirmation_dialog("conf_nav_delete_pool", "Are you
sure?", "delete_#{pool[:type]=='HardwarePool' ? 'hw' :
'vm'}_pool(#{pool.id})") %>
+</div>
<div class="toolbar"></div>
diff --git a/wui/src/app/views/layouts/redux.rhtml
b/wui/src/app/views/layouts/redux.rhtml
index 46ff9da..23983fa 100644
--- a/wui/src/app/views/layouts/redux.rhtml
+++ b/wui/src/app/views/layouts/redux.rhtml
@@ -109,30 +109,28 @@
function delete_vm_pool(id, parent)
{
- if(confirm("Are you sure?")){
- $.post('<%= url_for :controller => "resources",
:action => "destroy" %>',
- {id: id},
- function(data,status){
- // need to redirect to the parent using the new ajax reload
stuff
- $("#vmpools_grid").flexReload()
- if (data.alert) {
- $.jGrowl(data.alert);
- }
- }, 'json');
- }
+ jQuery(document).trigger('close.facebox');
+ $.post('<%= url_for :controller => "resources", :action
=> "destroy" %>',
+ {id: id},
+ function(data,status){
+ // need to redirect to the parent using the new ajax reload stuff
+ $("#vmpools_grid").flexReload();
+ if (data.alert) {
+ $.jGrowl(data.alert);
+ }
+ }, 'json');
}
function delete_hw_pool(id, parent)
{
- if(confirm("Are you sure?")){
- $.post('<%= url_for :controller => "hardware",
:action => "destroy" %>',
- {id: id},
- function(data,status){
- // need to redirect to the parent using the new ajax reload
stuff
- if (data.alert) {
- $.jGrowl(data.alert);
- }
- }, 'json');
- }
+ jQuery(document).trigger('close.facebox');
+ $.post('<%= url_for :controller => "hardware", :action
=> "destroy" %>',
+ {id: id},
+ function(data,status){
+ // need to redirect to the parent using the new ajax reload stuff
+ if (data.alert) {
+ $.jGrowl(data.alert);
+ }
+ }, 'json');
}
</script>
<%= yield :scripts -%>
diff --git a/wui/src/app/views/resources/quick_summary.rhtml
b/wui/src/app/views/resources/quick_summary.rhtml
index 77b1708..b17d332 100644
--- a/wui/src/app/views/resources/quick_summary.rhtml
+++ b/wui/src/app/views/resources/quick_summary.rhtml
@@ -10,7 +10,7 @@
<%= link_to image_tag("icon_edit.png") + " Edit
Quota",
{:controller => 'quota', :action =>
'edit', :id => @vm_resource_pool.quota},
:rel=>"facebox[.bolder]",
:class=>"selection_facebox" %>
- <a href="#" onClick="delete_vm_quota()">
+ <a href="#confirm_delete_quota"
rel="facebox[.bolder]">
<%= image_tag "icon_x.png" %> Revert to Default Quota
</a>
<% else -%>
@@ -20,22 +20,22 @@
<% end -%>
<% end -%>
<% end -%>
+<%= confirmation_dialog("confirm_delete_quota", "Are you
sure?", "delete_vm_quota()") %>
<script type="text/javascript">
- function delete_vm_quota(id)
+ function delete_vm_quota()
{
- if(confirm("Are you sure?")){
- $.post('<%= url_for :controller => "quota", :action
=> "destroy", :id => @vm_resource_pool.quota %>',
- {x: 1},
- function(data,status){
- refresh_summary('vmpool_selection',
- '<%= url_for :controller =>
"resources",
- :action =>
"quick_summary" %>',
- <%= @vm_resource_pool.id %>)
- if (data.alert) {
- $.jGrowl(data.alert);
- }
- }, 'json');
- }
+ jQuery(document).trigger('close.facebox');
+ $.post('<%= url_for :controller => "quota", :action
=> "destroy", :id => @vm_resource_pool.quota %>',
+ {x: 1},
+ function(data,status){
+ refresh_summary('vmpool_selection',
+ '<%= url_for :controller =>
"resources",
+ :action => "quick_summary"
%>',
+ <%= @vm_resource_pool.id %>);
+ if (data.alert) {
+ $.jGrowl(data.alert);
+ }
+ }, 'json');
}
</script>
diff --git a/wui/src/app/views/storage/show.rhtml
b/wui/src/app/views/storage/show.rhtml
index 6263021..19ab30e 100644
--- a/wui/src/app/views/storage/show.rhtml
+++ b/wui/src/app/views/storage/show.rhtml
@@ -10,7 +10,7 @@
<a href="#" onClick="refresh_storage_pool()">
<%= image_tag "icon_refresh.png" %> Refresh
</a>
- <a href="#" onClick="delete_storage_pool()">
+ <a href="#confirm_delete_storage"
rel="facebox[.bolder]">
<%= image_tag "icon_x.png" %> Delete
</a>
<%- end -%>
@@ -52,6 +52,7 @@
<%- end -%>
+<%= confirmation_dialog("confirm_delete_storage", "Are you
sure?", "delete_storage_pool()") %>
<script type="text/javascript">
$("#storage_volumes_grid").flexigrid
(
@@ -82,7 +83,7 @@
'<%= url_for :controller =>
"storage",
:action => "show"
%>',
<%= @storage_pool.id %>)
- $("#storage_grid").flexReload()
+ $("#storage_grid").flexReload();
if (data.alert) {
$.jGrowl(data.alert);
}
@@ -90,16 +91,15 @@
}
function delete_storage_pool()
{
- if(confirm("Are you sure?")){
- $.post('<%= url_for :controller => "storage", :action
=> "destroy", :id => @storage_pool %>',
- function(data,status){
- $("#storage_grid").flexReload()
- if (data.alert) {
- $.jGrowl(data.alert);
- }
- empty_summary('storage_selection', 'Storage Pool')
- }, 'json');
- }
+ jQuery(document).trigger('close.facebox');
+ $.post('<%= url_for :controller => "storage", :action
=> "destroy", :id => @storage_pool %>',
+ function(data,status){
+ $("#storage_grid").flexReload();
+ if (data.alert) {
+ $.jGrowl(data.alert);
+ }
+ empty_summary('storage_selection', 'Storage Pool');
+ }, 'json');
}
</script>
diff --git a/wui/src/app/views/vm/show.rhtml b/wui/src/app/views/vm/show.rhtml
index 293b632..defd40e 100644
--- a/wui/src/app/views/vm/show.rhtml
+++ b/wui/src/app/views/vm/show.rhtml
@@ -29,44 +29,44 @@
</a>
<% end -%>
<% end %>
- <a href="#" onClick="cancel_queued_tasks()">
+ <a href="#confirm_cancel"
rel="facebox[.bolder]">
<%= image_tag "icon_x.png" %> Cancel queued tasks
</a>
- <a href="#" onClick="delete_vm()">
+ <a href="#confirm_delete"
rel="facebox[.bolder]">
<%= image_tag "icon_x.png" %> Delete
</a>
<% end -%>
<% end -%>
+<%= confirmation_dialog("confirm_cancel", "Are you
sure?", "cancel_queued_tasks()") %>
+<%= confirmation_dialog("confirm_delete", "Are you
sure?", "delete_vm()") %>
<script type="text/javascript">
function cancel_queued_tasks()
{
- if(confirm("Are you sure?")){
- $.post('<%= url_for :controller => "vm", :action
=> "cancel_queued_tasks", :id => @vm %>',
- function(data,status){
- refresh_summary('vms_selection',
- '<%= url_for :controller =>
"vm",
- :action => "show"
%>',
- <%= @vm.id %>)
- $("#vms_grid").flexReload()
- if (data.alert) {
- $.jGrowl(data.alert);
- }
- }, 'json');
- }
+ jQuery(document).trigger('close.facebox');
+ $.post('<%= url_for :controller => "vm", :action =>
"cancel_queued_tasks", :id => @vm %>',
+ function(data,status){
+ refresh_summary('vms_selection',
+ '<%= url_for :controller => "vm",
+ :action => "show" %>',
+ <%= @vm.id %>);
+ $("#vms_grid").flexReload();
+ if (data.alert) {
+ $.jGrowl(data.alert);
+ }
+ }, 'json');
}
function delete_vm()
{
- if(confirm("Are you sure?")){
- $.post('<%= url_for :controller => "vm", :action
=> "destroy", :id => @vm %>',
- {x: 1},
- function(data,status){
- $("#vms_grid").flexReload()
- if (data.alert) {
- $.jGrowl(data.alert);
- }
- empty_summary('vms_selection', 'Virtual Machine')
- }, 'json');
- }
+ jQuery(document).trigger('close.facebox');
+ $.post('<%= url_for :controller => "vm", :action =>
"destroy", :id => @vm %>',
+ {x: 1},
+ function(data,status){
+ $("#vms_grid").flexReload();
+ if (data.alert) {
+ $.jGrowl(data.alert);
+ }
+ empty_summary('vms_selection', 'Virtual Machine');
+ }, 'json');
}
function single_vm_action(action)
{
diff --git a/wui/src/public/images/bg_warningMessage.png
b/wui/src/public/images/bg_warningMessage.png
new file mode 100644
index
0000000000000000000000000000000000000000..063a1f067fda745edfd6e0508263a259320d29ec
GIT binary patch
literal 625
zcmV-%0*?KOP)<h;3K|Lk000e1NJLTq000F50027(1^@s6vmZb>00004b3#c}2nYxW
zd<bNS00009a7bBm000W`000W`0Ya=am;e9(9CSrkbW?9;ba!ELWdK2BZ(?O2Mrm?o
zcW-iQb09-gGnm#!0{{R36?8>dbVG7wVRUJ4ZXi@?ZDjyAFEKDLFgWjXy+!~40m?~4
zK~y-6UDN+dQ(+Xx@%M9go%6cs+!~PtMS+nJMMM!41xbNe5JmrEP$(vbQB)K~QBfpD
zMUfOr`*Pjfy!*cE58lo5ocrU$bIyx%KF>8_{(gx3a`$k-5eIjn at BkM~bZ`d>4*?V1
z%-x2<JpC#YhG9r?!D{PLT*T^o;1({%>>p%rLg|r!vU5;ciXh`aW)}QqFcR_~E6885
zq09}@6CiUP{3lUQfQcE{dJ4vgZcbc-t!MPB_Mq}}1(jc5^-W(@Q2Gj#UkYgaGE`m(
zX#5gXUMr~bMnT(eu{Je!QDroC0k+?XeWuPs^*xw=MyYd9{eYcO^`nAnpKK_3Rzb-#
zQ2Q*#OrD0?7xpt6Jq0^oRYp6j3JTT+HvsUa)#|*H5PTE5cLIX%K!0`K6a+ui>gqog
zRR4uFz{qj+>JrDG at
moNNqtN&xpu`bqtShMbS3%8xSOW|nR;wGHgyx3O<A<QNDKd&5
zgw}uTjM{kxwF@>hlvB`97TP5Nxf$sA0&>&PDJ!T`QBb#PXB11RjABXX)`TAOpc_Q1
zGX|Uy=+y^rY7go)6x3^B4dBGZF9Tp)2s=VIF$lXvug*l}y#cffQ@)|W$mauN00000
LNkvXXu0mjfq;&#r
literal 0
HcmV?d00001
diff --git a/wui/src/public/images/icon_warning.png
b/wui/src/public/images/icon_warning.png
new file mode 100644
index
0000000000000000000000000000000000000000..741d0994c3abfc3dcb8beae7bf87b589519bde0a
GIT binary patch
literal 1954
zcmV;T2VMAyP)<h;3K|Lk000e1NJLTq001Na001Ni1^@s6;Q*MJ00004XF*Lt007q5
z)K6G40000PbVXQnQ*UN;cVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU(G)Y83RCwCl
zSZiz)RTMt=&hG5&&USa(rP;QurATX$0;N0*KB~16PzkFgN)TdvK=?rvtTD!D at
P~<i
zFhNX=G2#ysAAg7mzGHmEkkn|5Pe4r+d9)<8Eu{~(-Q9Uy&$%<Roo!mE75L#MCwFJz>$~6i&N+7%;D7kxk2gk_Q+p{EWB&z6=K_7*qVnKtja8xa
at jj#H=l=YT{U@@YVxK+R
zMU~ltd2GJEep^fY!`m}ev3WNqVcF8MSbg5!%Cq+O-wqjn;uvwI0I at rfk<R7uFPm4F
ztCHhU6QE3iimP=<4Hh<Z4;gR%k+nu=b<$bP30_~WKGkwvJSrVCVt{$J0B~XqIT6ru
zQ!+~ZH10|;#I~lj=I8HBy{^VpfSd(6Q-FcM1hxSSy;L276&zNb>dhZIGHUi-Zicjb
z7U&1`xnY2U1qK4JT%{l$5a$uuhza`QIBcA+AE5D<lOeuqex#%Gj?^v)G7tp;1zVIT
z*Fu*C31L!&Ya>eaz?s}H-wheR{TqS*8-^keG{;_oI7&l;!PuU(4Lut<>=-rx>Lc**
z5*&~7E(b%w=Nh9gY+hU0E;p9C5fVYL?NLzM9|0Dx0sG{)U}MxtmSRDuP6VU;%y{gp
zv&QE$%}p}_#BQxr=RLos^0l(6kV at 3#Z5wO^6KJ{{LL2u0Po_bsUk#%7G}!&WW3XW#
z!~N%KaE)m<{m_$t=j50*bg5jXZm!i{tZs<tVA^2dW)`v_kOda0E=5ky2-afA(3k~~
zH=ue&Lce#O_9CrwDFE>ub&=MG+U8{BNQx?Co^b?&8&jzJKk^yhgCZa=5YQ-EQi1Jl
z<(VCITI);*xYz(KQy<<N#M}ZlhB<<<>GTMQHnsb^OGSP5w0uwflErb%;Nu1amqs8{
zukW2n8n_T3<(X^ro$Ff at
EkLKWY%oa|q&nI(fE$jSE}b#lE#J$2v>ftDnH+Qu>)R78
zPvd$Q)9rMC*xFPmecy`M6Oaf>FnMx`#||1-(QWFa%K{Q9-z$#MI5Ur+h7eSv23uC>
zPpqv{(-*pBOa~~~Iw$aCQ;VJg(?aQ>a=2aGNN(ma<^KfS3MTs<EtxnEvRLbo-KMr!
zs&!8A$qUuFsQ|GpS80oPuS at O(jk~UzV8(L?1W`k$zb+N^sV-mvA<Y{nIOQzcVJWS`
z?%NYPY5nO~nhH>8!#r(YSsm6Zi`cQ9jOGVJEMX9{@T8ex<^*?<NrzRFDu*lZvXwfl
zzdE$faqz_f@!bo;8#b at
0xJ4#bj~zb{?z)Vaz?iWI9AQ&S&%_+K{opc1;|u6|SyGYzwycZava3PcFcl$_6|cX%rs9*Drbv{uL)Qw+=Pt&5+M$**_V-^QQ<Y%6`#7>Th~F8G
zL-v^K6z;U7HieQY$A_yzP}yg;9ym7sD!wjE2Pp9DLVeHHO!5v104G!40X~J0<ugbV
zV|^e-{|1r$5qMm2giZ6A1F8s&ImJxgnJNNMgLTgSs{n`ljl=#r=Lw75mQw59=%_rB
zUJ};vqJtFMMRvRpCP2&+H=Uf9f!gsI7S>vslM3&xq2%PyA=pGq+hNreXoNSAK%rFz
zq36(W_Q8XLOTPHqIO$zcJRhoe%?<5OFT#3-C!lI>fzM4GO2No*w?SFBO at fgpiq%4(
zaXT_%`xy0^yOv3V&r_YVAbq2*chrUU`|F(a at TOXA=>zTM87$Et3n(}sn5TgvFyG=7
z%BDT3mf21%3pja*DO1d&G+<G(L}--(xWBC|v#B<;)bkc?r!I>sov}JiqBe;k0_4v<
zlNWVQZ5?|X>y>k>pw{~Jt&-9)p|{fclKm_dUjt%`G*}W>Iz5(XdbGJlyFup8yzS%+
zRvIOYdrbMh)AW1~6kcfpR=yaea|Bq~7)F}n@=lr&MXA#H<db{WJobe~5L7e(%WKse
z;K*2%RwO`?SQt`ta|m!+#ES~|RBV#@M9t$IgoZzVtZ#r}eqmwm6a^uqkeUB7EnH(0
zX#mEN0B%7n%v0`F_pBuN at
QGY^U0<Ogk>n7fh<C#lCWS5YfHL7Qg_>iUD>m+_K=@EF
z2bAzwXENwy3cyz*2xw$Tz~SS$ZZ8E9pj_90 at zJVZvX7;kHHhP>Re8%0a_=I~Me}X!
z(ZD at My^O+q<Gtu`<`6auby_Ge7#^^p=ePk~{pLr6!vi$>ac|)u?;2it*SW%tbqygF
z!CPJsH7>lW?FmvQJ at -!J6R8B_PqCJlf0!&kPD@}pFl>!+yx|TCIC-=nJ~*1|`nbn9
zNI1Zk+>>Z66)Mjxt5Di?g(WZ&oE*i3FMUFhCB~=t55+GU-_1n$@~|Y5fsH{n^wWU#
z<zQaCj~zdfew_3<Q9@#9RcLe3%KyVZBQyCBU+2)ypwZ9m5%*omorJkA47nF5b{PQ?
oe+Gp){R*G$UpH6e^N#=n0H=d1t<sL41poj507*qoM6N<$f{l-!F#rGn
literal 0
HcmV?d00001
diff --git a/wui/src/public/stylesheets/layout.css
b/wui/src/public/stylesheets/layout.css
index 52151eb..4df8c66 100644
--- a/wui/src/public/stylesheets/layout.css
+++ b/wui/src/public/stylesheets/layout.css
@@ -386,6 +386,24 @@ a { color:#000000; text-decoration: none;}
height: 350px;
}
+.confirm_dialog_title {
+ width:400px;
+ padding: 15px;
+ font-size: 110%;
+ background:url(../images/bg_warningMessage.png) top repeat-x;
+}
+.confirm_dialog_header {
+ background:url(../images/icon_warning.png) top left no-repeat;
+ padding: 0 0 0 45px;
+ min-height:36px;
+
+}
+.confirm_dialog_footer {
+ height: 37px;
+ text-align:right;
+ padding: 5px 9px 0 0;
+}
+
.dialog_form {
margin: 15px;
background: #FFFFFF
--
1.5.5.1
Jason Guiditta
2008-Jul-21 21:01 UTC
[Ovirt-devel] [PATCH] added tallen's confirmation dialog styling changes. I've replaced all of the confirm("foo") javascript confirmation popups with the facebox-based design.
For consistency, unless it breaks for some reason (didn't when I tried it out), everything that looks like this:> + jQuery(document).trigger('close.facebox');should instead be: + $(document).trigger('close.facebox'); Aside from that, ACK, works fine for me. -j