From dd66e1706e8b3ad31f4ed00308fe444eb81952bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xose=20P=C3=A9rez?= Date: Sun, 16 Oct 2016 10:35:08 +0200 Subject: [PATCH] Replaced slide checkbox images with sprite --- code/html/checkboxes.css | 143 ++++++++++++++++++++--------- code/html/checkboxes.js | 21 ++++- code/html/custom.css | 8 -- code/html/images/check.png | Bin 0 -> 1471 bytes code/html/images/off.png | Bin 2577 -> 0 bytes code/html/images/on.png | Bin 2496 -> 0 bytes code/html/images/slider.png | Bin 1228 -> 0 bytes code/html/images/slider_center.png | Bin 260 -> 0 bytes code/html/images/slider_left.png | Bin 324 -> 0 bytes code/html/images/slider_right.png | Bin 321 -> 0 bytes 10 files changed, 114 insertions(+), 58 deletions(-) create mode 100644 code/html/images/check.png delete mode 100644 code/html/images/off.png delete mode 100644 code/html/images/on.png delete mode 100644 code/html/images/slider.png delete mode 100644 code/html/images/slider_center.png delete mode 100644 code/html/images/slider_left.png delete mode 100644 code/html/images/slider_right.png diff --git a/code/html/checkboxes.css b/code/html/checkboxes.css index ffe9b087..59ebbfb5 100644 --- a/code/html/checkboxes.css +++ b/code/html/checkboxes.css @@ -1,16 +1,20 @@ .iPhoneCheckContainer { - -webkit-transform:translate3d(0,0,0); - position: relative; - height: 27px; - cursor: pointer; - overflow: hidden; } - .iPhoneCheckContainer input { + -webkit-transform:translate3d(0,0,0); + position: relative; + height: 27px; + cursor: pointer; + overflow: hidden; +} + +.iPhoneCheckContainer input { position: absolute; top: 5px; left: 30px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); - opacity: 0; } - .iPhoneCheckContainer label { + opacity: 0; +} + +.iPhoneCheckContainer label { white-space: nowrap; font-size: 17px; line-height: 17px; @@ -23,51 +27,100 @@ width: auto; top: 0; padding-top: 5px; - overflow: hidden; } - .iPhoneCheckContainer, .iPhoneCheckContainer label { + overflow: hidden; +} + +.iPhoneCheckContainer, .iPhoneCheckContainer label { user-select: none; -moz-user-select: none; - -khtml-user-select: none; } + -khtml-user-select: none; +} .iPhoneCheckDisabled { - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); - opacity: 0.5; } + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); + opacity: 0.5; +} + +div.iPhoneCheckBorderOn { + position: absolute; + left: 0; + width: 4px; + height: 100%; + background-image: url('images/check.png'); + background-repeat: no-repeat; + background-position: 0px 0px; +} label.iPhoneCheckLabelOn { - color: white; - background: url('images/on.png') no-repeat; - text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6); - left: 0; - padding-top: 5px; } - label.iPhoneCheckLabelOn span { - padding-left: 8px; } + color: white; + background-image: url('images/check.png'); + background-repeat: repeat-x; + background-position: 0px -27px; + text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6); + left: 0; + padding-top: 5px; + margin-left: 4px; + margin-top: 0px; +} + +label.iPhoneCheckLabelOn span { + padding-left: 4px; +} + label.iPhoneCheckLabelOff { - color: #8b8b8b; - background: url('images/off.png') no-repeat right 0; - text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.6); - text-align: right; - right: 0; } - label.iPhoneCheckLabelOff span { - padding-right: 8px; } + color: #8b8b8b; + background-image: url('images/check.png'); + background-repeat: repeat-x; + background-position: 0px -54px; + text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.6); + text-align: right; + margin-right: 4px; + margin-top: 0px; + right: 0; +} -.iPhoneCheckHandle { - display: block; - height: 27px; - cursor: pointer; - position: absolute; - top: 0; - left: 0; - width: 0; - background: url('images/slider_left.png') no-repeat; - padding-left: 3px; } +label.iPhoneCheckLabelOff span { + padding-right: 4px; +} -.iPhoneCheckHandleRight { - height: 100%; - width: 100%; - padding-right: 3px; - background: url('images/slider_right.png') no-repeat right 0; } +div.iPhoneCheckBorderOff { + position: absolute; + width: 4px; + height: 100%; + background-image: url('images/check.png'); + background-repeat: no-repeat; + background-position: 0px -81px; +} + +.iPhoneCheckHandle { + display: block; + height: 27px; + cursor: pointer; + position: absolute; + top: 0; + left: 0; + width: 0; + background-image: url('images/check.png'); + background-repeat: no-repeat; + background-position: 0px -108px; + padding-left: 4px; +} .iPhoneCheckHandleCenter { - height: 100%; - width: 100%; - background: url('images/slider_center.png'); } + position: absolute; + width: 100%; + height: 100%; + background-image: url('images/check.png'); + background-repeat: repeat-x; + background-position: 0px -135px; +} + +.iPhoneCheckHandleRight { + position: absolute; + height: 100%; + width: 4px; + right: 0px; + background-image: url('images/check.png'); + background-repeat: no-repeat; + background-position: 0px -162px; +} diff --git a/code/html/checkboxes.js b/code/html/checkboxes.js index 67d04dae..42e1441b 100644 --- a/code/html/checkboxes.js +++ b/code/html/checkboxes.js @@ -63,8 +63,13 @@ this.offLabel = $("").appendTo(this.container); this.offSpan = this.offLabel.children('span'); this.onLabel = $("").appendTo(this.container); + this.onBorder = $("
").appendTo(this.container); + this.offBorder = $("
").appendTo(this.container); this.onSpan = this.onLabel.children('span'); - return this.handle = $("
\n
\n
\n
\n
").appendTo(this.container); + this.handle = $("
").appendTo(this.container); + this.handleCenter = $("
").appendTo(this.handle); + this.handleRight = $("
").appendTo(this.handle); + return true; }; iOSCheckbox.prototype.disableTextSelection = function() { @@ -98,8 +103,11 @@ }); } else { newWidth = onLabelWidth > offLabelWidth ? onLabelWidth : offLabelWidth; + this.handleCenter.css({ + width: newWidth + 4 + }); return this.handle.css({ - width: newWidth + width: newWidth + 7 }); } }; @@ -181,7 +189,7 @@ } else { this.container.removeClass(this.disabledClass); } - new_left = this.elem.prop('checked') ? this.rightSide : 0; + new_left = this.elem.prop('checked') ? this.rightSide + 2 : 0; this.handle.animate({ left: new_left }, this.duration); @@ -223,7 +231,10 @@ containerWidth = this._getDimension(this.container, "width"); this.offLabel.css({ - width: containerWidth - this.containerRadius + width: containerWidth - this.containerRadius - 4 + }); + this.offBorder.css({ + left: containerWidth - 4 }); offset = this.containerRadius + 1; if ($.browser.msie && $.browser.version < 7) { @@ -238,7 +249,7 @@ width: this.rightSide + this.handleRadius }); this.offSpan.css({ - marginRight: -this.rightSide + marginRight: -this.rightSide, }); } else { this.onLabel.css({ diff --git a/code/html/custom.css b/code/html/custom.css index 5b4407b2..af368faa 100644 --- a/code/html/custom.css +++ b/code/html/custom.css @@ -54,11 +54,3 @@ div.hint { color: #ccc; margin-top: -5px; } -.iPhoneCheckContainer { - margin-top: -10px; - letter-spacing: 0em; - height: 36px; -} -.iPhoneCheckHandle { - top: 9px; -} diff --git a/code/html/images/check.png b/code/html/images/check.png new file mode 100644 index 0000000000000000000000000000000000000000..45edff57b1eed8fef2fd07882790712a7af58cdb GIT binary patch literal 1471 zcmV;w1wi_VP)Px#AY({UO#lFTCIA3{ga82g0001h=l}q9FaQARU;qF* zm;eA5aGbhPJOBUy24YJ`L;wH)0002_L%V+f000SaNLh0L002k;002k;M#*bF000FR zNklDD)7RGxH(== ziFy-@3E}QU)Ob~6)ieVZ74Cs7Fb~Jf%Y$L=j?6GKOpb*ICNK#zWfdeOG7u4%43i-& zd#T;AaJ+INBA8T0gyT^prr|{GcoB9AP3QvPp?B2`m9Q z!Eoyn0}n+6FHTbl(aeq%b_D6b1a^`!1n&()6@8yx}(2rqSM z%|uw_Ogjm;aiOZZ1`?_CM3@;;7X}gGT}=>#@F6IyEdE6n9XKfy?PaQzZqMz8E@bIfxF@Ev)J0) zr1C%rcPBPBHZT+Gv?d~mx~@qn(KH39s*3e`&1$vEKt#|q4N+A@M7y?vaL+(^WS3R| zv;5$0R8>XPRZX*Q@XIJR+z1QYf~u-8kH`^*WeLfUa$Tyb!psf1kQE7+@)~ae4cvBs zxgoVGW|;XvMTVJ>R6W&aikE1RXe4J!0^+p=Y>HPZoY?~PZ^ z@bI;_ARATRter|C<&T>n7WJHc0jLEZZ0W*ppD9K|Ni|^F1A{&maEn3zpK^igQKG( zX}Mgc)6-L)JbCg8_|(o{pR>Qe&y5>5c7eN=NL;+R;Nai@;AR(T?jX%Np#9IRC-p$f zSf8y~p`v`YxLH5h(qK$`qkrun6C`!j?Mi8XS1CqYiQZ_rgo8-ciIa!X#&P7)vdsM0 zD1G{QG6qIdY44s7plQ|suk*2R=lS#JNP496^YirV*)twLew-KV!-o%lBcH}Ej*gC& Ze*(euW1w}`spJ3v002ovPDHLkV1jLWw&(x= literal 0 HcmV?d00001 diff --git a/code/html/images/off.png b/code/html/images/off.png deleted file mode 100644 index f414051ecc72db50e3267adb99ad288d22a293ad..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2577 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 diff --git a/code/html/images/on.png b/code/html/images/on.png deleted file mode 100644 index 94425e5841c89fb0b226d987b1a6d9199c372b3f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2496 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 KMNUMnLSTYI@WUwp diff --git a/code/html/images/slider.png b/code/html/images/slider.png deleted file mode 100644 index 80e05ff2dde736f92872019c10e6e69e4caf7179..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1228 zcmV;-1T*`IP)+dQ(pVRYZe}Df92L}hw z(vL4YJ3DJzTU)feyi6o{Uit#+o8Z<<`XKbQep=Y;XN#NZ_fBsC{ki)?*Vor{c6RnH zb-tLVuXnq-6*2FZ%c6hiwcmG+9`Xw@hzw%7KDl>oB?6pVrE7-lDj`mNA$% zHa2K!X=&}` zQCo-(yXJ>%{)!*6?*U42UHdJeVXIAF(dqE(>fpTXl3gV_xwxjuEp09X5H17gps850 z;7J~8A%L!BRVIz(%?n`2VVL^dat1`@>I9ycw}MoIiQw!n-5IFID?(lo%JM5i8hoYPxPIQBFYBvs;dhdEUE$lHbtC}_``U&!bOl_1075lx|^f8 zQ2|%C=XSPzQQ8cQE>iatrI#il%N5ZBxI^csTaKB$T`O|fdx552$D|E7n>`fK?Ue9) zgM4s0w^jmF+Xqe$JgyN3h*^bVAUdmw1`CnJx#Q_6cguuwG$6RUl`6oS0xkXY-!S23 zfS?>|R63XDwVh&yfYLeA`UGYgM!TgK}I_0jsq-)@+}m5XY3{u!9NL@Fc~zIaXgt$F&3VG<_M*89xjmPh*A{IBh68 zC9t3NIjc1(|w#y1z zd%VchBEiPFH^{x4uQ@m7}Ahe9Ql! qH~!5>yzzh48~^LQy}hgd0t^6MQ^T06mz3!M0000i zsd#E)vfFS1BxGB=t^*+idJkfZ#1b$8KILp>BJa=w*2e?R>ZFMr>$0Q)(&OAKtjW_Y z7&ietEH)YwgPhX%g*-G9LB+&@qsN5Yd7g*sloBy>vw@sHXlja-Qu+#5mTzAH>$*|n z$S~AehuXgH)*(iI$Dy&P3-3J7LA$QYwvnOteUGo2rm55Z0t^6tOGp^$Su~UY0000< KMNUMnLSTa9gK3li diff --git a/code/html/images/slider_left.png b/code/html/images/slider_left.png deleted file mode 100644 index 51576ce351944e96229b04bfa03f8f03e907e9ff..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 324 zcmV-K0lWT*P)$+ma!JqEi%8`jz}$IH&>I5C#~pELZ9uqT21yUVFdi6z z&R`?^zg{I1Q|2Gz=NToC-jt`3*w$$wy(z^UGHz=CkE1&^mMKGpL-c=+J}C!hjHZPJ z8+EZ@!}t+^z~1!UeL9;Zfa--y(=_CqGoQdXR8@7W>zcamtuh^;EX(k7=kRl10R{jI W5i+_owTc4(0000b$oD9c+P3`xaMbu}n#PfH zPUd;WFbpRpcYHZtP!t8Ks(M#q&jP{idP7;3n&ZO~kq0owK=E55*4Hu*jd5&$_PNuK)u8EfzVU TqbKrS00000NkvXXu0mjf#?yy8