From 3894a4f13d6e555e3d9c74bd4081d2690d58ad80 Mon Sep 17 00:00:00 2001 From: "Endi S. Dewata" Date: Fri, 1 Jul 2011 13:37:43 -0500 Subject: [PATCH] Added arrow icons for details sections. New arrow icons have been added to replace the plus/minus sign icons for expanding/collapsing details sections. Ticket #1422 --- install/ui/arrow_collapsed.png | Bin 0 -> 1044 bytes install/ui/arrow_expanded.png | Bin 0 -> 1047 bytes install/ui/details.js | 10 ++++---- install/ui/ipa.css | 45 +++++++++++++++------------------ 4 files changed, 25 insertions(+), 30 deletions(-) create mode 100755 install/ui/arrow_collapsed.png create mode 100755 install/ui/arrow_expanded.png diff --git a/install/ui/arrow_collapsed.png b/install/ui/arrow_collapsed.png new file mode 100755 index 0000000000000000000000000000000000000000..61c2dafc4d632526f1fc49d2795445257da1da39 GIT binary patch literal 1044 zcmaJ=O-K|`93M3{6-+52ld#u_QRL2-uDd(9sXMcqTaGO2LVHP^oq6sKIv>qE+fh8I zT~<2ODWbY~EGQ}{f({8SQ4~a1=_Ju9D3HKIU~kslwL{y$oA>^Y-|zSTd~3;x3vI1k ztpq`|CC0=Q-aEY2?8E<)+q*K}j-yxxO`0>PAlr}_Rn05}30=;?6qMD4tMB0uK{SzC zI)gIOIIoyGC3_gk)h)~>h@oNEl9gGAKo;gSBSQXo^_m2l8X+$SBu26XnAgS@Z8*6& zkyaLGm9R<#^hQqrNvaHMFvv*CCpbSB?5ppl6jFbd|X+sd87{9^{ zGGLIU*#3cFFxUq;hGl4mqgl?+2Kj!DXBbfVNbJp4XZVyDulT}Ngv=vk@ibj16sST! zW!gEK4Tr;?2FLj^!tX2?NOt{((^FLtp`+NEg*4Luo}!#J=TU^jk?y6STQyn3sgwy9 zjCN&&|3h`XhIUX2?#KI2VJE#{K{^E;bKX{P<7Rq1R~9eWP)4SmHqE(e z6_a@rnNHrcfG`;VlB{TkXP5Dk#3u{~$%X{<7Tr3ufMFp0PF(F|v z6b%e;BFl;l!!cE^Xe#qMG*FeR?sMaHx!x$~7WOPcTe}9;xNYj7oHDP~k431fSK+Gl zV-f3eX&emgHTJJYSFiB&c*okrrRXck4yYd#8!mg!ni*z4`}MDNeBf literal 0 HcmV?d00001 diff --git a/install/ui/arrow_expanded.png b/install/ui/arrow_expanded.png new file mode 100755 index 0000000000000000000000000000000000000000..4f2a9d6d6fd4154a9c430d98b64bbd0cff88ee90 GIT binary patch literal 1047 zcmaJ=PfXKL9IhZ{5Fu!cpa(4lj3%so?KZX*CS&c8C6+8>iMyECwQsE1`p5Rc3I~Hq z0>q04Zl3g@2NM#mYN7`{a4?Y*Q4}lWy{gsnfEDp;|N}E z7mRUbi(zTtrPKgQ(*L2l-b6bn0}tapQrOAPTad{>$DFkl+_*x&=gQ&*8_LMEv!+>Y zR54vNk?9moixj3qq$Dev;n_93B=IT3L9(I1lo+G107uRBVq{!A_+kZ zM32?0bJZhasdJCdgTcWtUSt1hbmIz7k9Ta2EjF5i4-Gu+HXiG8Vc-XT5|2{ic-H-r z->+83S_c+|=${L|KzKk}K8$#U@7*SV9+FL$3me37o6 w?dW;a-hS@el~3>bM+SHL)~@z0-z&8E08!oSTe-%s@!nHSC8xyo#GMC!0m$l3zW@LL literal 0 HcmV?d00001 diff --git a/install/ui/details.js b/install/ui/details.js index 4c70530e5..4f01cd34c 100644 --- a/install/ui/details.js +++ b/install/ui/details.js @@ -26,8 +26,8 @@ /* REQUIRES: ipa.js */ -IPA.expand_icon = 'ui-icon-minus'; -IPA.collapse_icon = 'ui-icon-plus'; +IPA.expanded_icon = 'ui-icon-expanded'; +IPA.collapsed_icon = 'ui-icon-collapsed'; IPA.details_section = function(spec) { @@ -440,7 +440,7 @@ IPA.details_facet = function(spec) { var icon = $('', { name: 'icon', - 'class': 'ui-icon section-expand '+IPA.expand_icon + 'class': 'ui-icon section-expand '+IPA.expanded_icon }).appendTo(header); header.append(' '); @@ -497,8 +497,8 @@ IPA.details_facet = function(spec) { var header = $('h2[name='+section.name+']', that.container); var icon = $('span[name=icon]', header); - icon.toggleClass(IPA.expand_icon, visible); - icon.toggleClass(IPA.collapse_icon, !visible); + icon.toggleClass(IPA.expanded_icon, visible); + icon.toggleClass(IPA.collapsed_icon, !visible); var div = section.container; diff --git a/install/ui/ipa.css b/install/ui/ipa.css index 26e000fc1..38b5a9118 100644 --- a/install/ui/ipa.css +++ b/install/ui/ipa.css @@ -721,15 +721,6 @@ h3 { } .section-expand{ - float:left; - -moz-border-radius: 0.3em; - -webkit-border-radius: 0.3em; - background-color: -moz-linear-gradient(top, #959595, #5e5e5e); - background: -webkit-gradient(linear, left top, left bottom, from(#959595), to(#5e5e5e)); - border: 1px solid #b8b8b8; - color: #fff; - margin-right: 0.5em; - margin-top: -0.2em; } hr { @@ -909,28 +900,32 @@ span.attrhint { padding:0; } -#the positions for these are in the large icon image, -#and need to be specified in pixels. - - -.ui-icon-minus { - background-position: -48px -129px; -} - -.ui-icon-plus { - background-position: -16px -129px; -} - -.ui-icon-trash { - background-position: -176px -97px; -} - +/* + the positions for these are in the large icon image, + and need to be specified in pixels. +*/ .ui-icon { /* background-image: url("ui-icons_222222_256x240.png"); */ background-color: #e2e2e2; display: inline-block; } +.ui-icon-expanded { + background: url(arrow_expanded.png); +} + +.ui-icon-collapsed { + background: url(arrow_collapsed.png); +} + +.ui-icon-plus { + background-position: -16px -129px; +} + +.ui-icon-trash { + background-position: -176px -97px; +} + .ui-widget-content { }