From 69d824025a4acca446c5c4d2f4df198115278269 Mon Sep 17 00:00:00 2001 From: Esko Cruzeta Date: Thu, 8 Oct 2015 08:31:55 -0700 Subject: [PATCH 1/5] create switch size option --- angular-ui-switch.css | 33 +++++++++++++++++++++++++++++++++ angular-ui-switch.js | 4 +++- angular-ui-switch.min.css | 2 +- angular-ui-switch.min.js | 2 +- example/app.js | 2 ++ example/index.html | 16 ++++++++++++++++ 6 files changed, 56 insertions(+), 3 deletions(-) diff --git a/angular-ui-switch.css b/angular-ui-switch.css index d5bcdf2..aefc63d 100644 --- a/angular-ui-switch.css +++ b/angular-ui-switch.css @@ -80,3 +80,36 @@ opacity: .50; cursor: not-allowed; } + + +/* Switchery sizes. */ + +.switchery-small { + border-radius: 20px; + height: 20px; + width: 33px; +} + +.switchery-small > small { + height: 20px; + width: 20px; +} + +.switch.switchery-small.checked small { + left: 13px; +} + +.switchery-large { + border-radius: 40px; + height: 40px; + width: 66px; +} + +.switchery-large > small { + height: 40px; + width: 40px; +} + +.switch.switchery-large.checked small { + left: 26px; +} diff --git a/angular-ui-switch.js b/angular-ui-switch.js index 9a6b591..1dc0e90 100644 --- a/angular-ui-switch.js +++ b/angular-ui-switch.js @@ -8,7 +8,9 @@ angular.module('uiSwitch', []) , template: function(element, attrs) { var html = ''; html += 'small{height:20px;width:20px}.switch.switchery-small.checked small{left:13px}.switchery-large{border-radius:40px;height:40px;width:66px}.switchery-large>small{height:40px;width:40px}.switch.switchery-large.checked small{left:26px} \ No newline at end of file diff --git a/angular-ui-switch.min.js b/angular-ui-switch.min.js index 6f6da0f..22dcb8b 100644 --- a/angular-ui-switch.min.js +++ b/angular-ui-switch.min.js @@ -1 +1 @@ -angular.module("uiSwitch",[]).directive("switch",function(){return{restrict:"AE",replace:!0,transclude:!0,template:function(n,e){var s="";return s+="'+e.on+"":"",s+=e.off?''+e.off+"":" ",s+=""}}}); \ No newline at end of file +angular.module("uiSwitch",[]).directive("switch",function(){return{restrict:"AE",replace:!0,transclude:!0,template:function(n,e){var s="";return s+="'+e.on+"":"",s+=e.off?''+e.off+"":" ",s+=""}}}); \ No newline at end of file diff --git a/example/app.js b/example/app.js index 3d12135..39b6a39 100644 --- a/example/app.js +++ b/example/app.js @@ -5,6 +5,8 @@ angular.module('app', ['uiSwitch']) $scope.onOff = true; $scope.yesNo = true; $scope.disabled = true; + $scope.sizeSmall = true; + $scope.sizeLarge = true; $scope.changeCallback = function() { diff --git a/example/index.html b/example/index.html index 6adb029..28a7b54 100644 --- a/example/index.html +++ b/example/index.html @@ -46,6 +46,22 @@

Enabled: {{ disabled }}

+ + +

+ +

+

+ Enabled: {{ sizeSmall }} +

+ + +

+ +

+

+ Enabled: {{ sizeLarge }} +

From d86b867bd0968c1acf749e5e62baf08503683a83 Mon Sep 17 00:00:00 2001 From: Esko Cruzeta Date: Mon, 12 Oct 2015 14:55:14 -0700 Subject: [PATCH 2/5] load switch size image --- switch-size.png | Bin 0 -> 4566 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 switch-size.png diff --git a/switch-size.png b/switch-size.png new file mode 100644 index 0000000000000000000000000000000000000000..5efbeded56e7f0c205ee2732beaf3fd87233b19b GIT binary patch literal 4566 zcmV;{5h?D8P)004R>004l5008;`004mK004C`008P>0026e000+ooVrmw00006 zVoOIv00000008+zyMF)x010qNS#tmY3labT3lag+-G2N401-M#L_t(|+U=crbW~-U z#(($LzGPn^VnV`}gs=&?pfK(Y?t8n8+K$+*^k}y|_OaWZX-=PGJ7>n3b99bJTAj9K zX4G-IZMxC8qe7!15F!LHAuCHD3n5#j>Q>!*zxku6GDRh!Ds?N8KK1;=A;A6K_x+yl z{od!>kc1F|6jC_DAb;Biq>#c$ND(uIGZHCcrf^0gMa&e=NSMEE15y}26iuP6znR+3 z9RTzzz0`DlZfF}q2!t*`NC;gZ&_PIWQZg^dTS~e;6G@U-P_UTknKN)$97vLsP`gq} zl}|2s0)y=8*v{Ln8vq>%81j1n&_n*IblVQr`ni;n+C%=MxcR^g==^X5!vAcoynl^Gy(NeA~y9TS-8W%xR#GC}! z)v<&1`<};Panh?CPf8m?7wD?MqT9IS?5nu3>Q+O(TfJ`sAGB5T-O77ea@Kjsa%{3D zMa(l8y3qOUp66&CXrbGC6gk1VZ6t)Uq~_OIn!lVo7JLtv)n#ZK9>0e_?fpF`lrC1E z^Dq{(<+R!JuZEbq(CPR0QP)*VyXP=%{mr!W*N^*q!;5}h*CGo3lJuDrXO>dro<>!{ zLNe`Hm}HZo{wSKlvo-(B38g!ESyBju2C83WRmm-eWy#S{y>A0Go!j}*c|XHtbB#&P zNl#2wSNWoS3$NC{NUpsQzvjcI`o<*$PA&T9 zwEr+|z0G`fY!i1>+|LEmR>WOPjRZwg`1Q6Y@B{`JQU{U}w-71Ks+C*j+{22pOOn#g zso2`QnfF^Z^4PLpj!Di*OH5tpeAQVKuDyDE-3d)~p&H97>|9d3k}GCj9rKjt@q75R z`9nTzt>(T34>2dN60>Q1D{;Eed1C923245glT!7m{B7lfte7z|qzqwe^JX@+y~9tJ zt;K2?c_2?pVj5X{MbuaYE4X9+z2mO2Jbn-V`_+29nuiA#KZ4n0jyrq4wEI73>aV9y z=}BJvG#ypZSXF#8H_p2)Y3+=KxAtzJrT+jAEqxS|DY^`rbUQzartrkpAJf>opB~?_ z#7U`v>eIM+=H0AbvL>Oz-(_`i-;xI@&zZ;Ln;yoac!+1*@9Nl2>p)9VNf{o5dCR{w zQUY9Ec|FO$x6;6e6v?`BW;u9(Ech@yd@V3?P`h;yc#OTMdc zTw=kRy*c6Zf7EHAy-(7j8nJ zSoyb=&*QQgtG?rfM;YX2?>)j(mp_Zs?u>}hh=q_YbQ*i>d3oVIAui>@~_gV96tSnyn zt&9)dZsdvTpYS)Omyzwx z3G*N#QlY7`xxaxv<@jlrTZRjVRmC^)t4p6Ak(8&RIID!mF8U`*(q{1ZriTfrfieHS zs;jKuw~lV_(S!pbL~sz9H5+#>{9e)n|J{Z6@N(@syoz_!db6fuJDQ&O9`~4jpX{gW z=OlNnay(c$>sq!Q{5+!83==byDM5>QK{rgwlAF1{GJc0wm0!oQDHrp?&S%CX=jZKP zuv;94)LudtXaSAOO0F_|hhrqTtS+vYzKSiapNv@K15~$eU`QQIsvSZDRnaLgs7$)g z@nUBFY~DHWCsb7p|13<*11IWf>Tify5r#5Pp>-NJ%pLzIys_$5Jl-Mpb<~ZRQFNj6 zTK$Wh@ENoFA#_j`m6he!8Wz~o;o@0W@Os@#BMv@AQvluY0~rxMpPa_0I?g6Py>P<( zjui#zg%sKgBUUkF2zLJO_N`-3>5bjllZy857XL6|!)}{@H!s(&!yoWR{aL@ij~siU zG1*dx;Eqn-5}a12QE@#jTvitsOu3Zq!LF#m*V@-ic&{@_2xtn6!R9I5W(rNDtB@CTwWq5$(~MS)_mIgjzo3bo~~N_y3Y{jL#lLk z?!-@L)3eK{ZLf)%&TBijhtE?c4MIX!1#_lUO}O8&Vs6oVYTI{25_8}2-KfGJ^G8A> zaGJZsFvAL5Q`m82TU5uj4<5o7FlGrw=%A^BlI&8$?2Z*hS<^UtqHWYVGnokWSCSKR zf<}U-X_3UN>)sXLs1*`gK%=~Hu3>h~$e&4DPg7LK9UN%Eug5-U#xz^#2vsL9E#EM^ zV}--wpwHKfrbW(5M*26p-vUk3$xF+daKB@YkJUk+w>PrJZ0WB@iDSCdbqzfrD9JT0 z^Au;7u>07KsE%vtuQyH@2nkKo$xn;#M79x_o?FJA&Ye-EilP3E>US_}7My{?Cxp_x zGWK-sj3g#NT(J=nx^8qZgWpW*nUZgLDib2f{*Bpqa<(}QH*+{KOVVdyHQD3-NK03< zVFtB!w@{wFAnNBO>9Y_92eq@m!_e==f|jmk&KjX6Us3d(;Msx+fJaHP$V$+*a|@P- ze=h@6EOxfmfO_6O)wW>-`c)vXuN~sRS_O zAEG$3G?JKkj(k+zkBJzMqDcai#Y9c}7c_S!J_=hpo7i>iOQvQNMICgg%3FX{HYTG; zl8j`Q*>`l0kui-4O&tfQ%&&?Xcy_Y`o5hyYwk1izWRht)gEQulo`bk;?nq+FlFYr8 zYe=(Y$L6RkA)93^4hzqH^zR89_1n$A;r4m=VYk_%h?#E9;JELYA$6D}gUKwh^T_8D zT5ow251ZTGC&!%|yLFqck&XHYMpZ$cTZQ zk|bfWn6TJQ9PzgC+Gp#>ZP0&hei@V5%)FxcSgp|qYGq00_Svh+bmS!Lyd+DQtR~Dh zGaGB(Oj?jn#d}}9%?)$z#9?jFHMm`F%;u46t@Ec| zgirM*+|_b6(~L92&L8)^&W~RCK205s zr!}OxqmiHe&!aSU*R%HWe<341W7JLqFw17{F8=|!&Z!9pL6X62GozXno_+6MlOFW{ z-1Hl+oqY@G?(`8aT|scRO6K~eBuU678MDpIJ9{@I-RF4m!Tz_YD6GU{`Q{-6)7rIb z*PiOc!u%ynOPkKVp53@Dnb=G=bfKYYY9x71sy*2xBb!Y0DZRW~yOG8tjU4Pch!Buw zPa~iP`1;6xHrIX3`(M4o>tDXYs)`%9dhT^(W@O@UI7aQX5T>|`XzXpkqYmQN5;)W$ zfpl`+=umeXR^edI)bgYRyt?MkG<1EFEE1setrvQh;G3L8Hil*@R zmWS{KhLGgsJO!f#G?e}TV!*`ncfEqk{w-fd^9}OwtE>6N<-cZ1-V|&$TX^6acCTCr zfvT$b{eJv@KZ>H@_xr-62C$+s?S~x zZ=avaj79wXx?d)xomlZq_0vqxE@egerMTVhhy-Q$g9kzgbX`Z+bu>*2*G|E;G!wEc zBg=9^"^=cPT*acH2G?xFT^WtidDcNI?nZ@-U)`RDSZRX-hfCh_<@yzu^WbPsj0 z`usIyXJv;;8H>Lmzv_GH5}Fal@>vfE{GQ-oeBj(ixU}j@!`q1kZ`b^pFIzt6!3!TD zD>ExfV@%4II3U=G2Ts(pZuiqT%uY^tyW=M4@JFQrLn^+01#`g0s=3#5{nDFbCaA~f zp?c>=-rDmfH&@-og5re{wR1d!P!~E+{N-U3Rl%nlziJS=r=<+~@tpAS=q114f?3N9 zZ)YrgT=x;{x4poxu6&xD?3{?&GK5J>%n(#v<@5F}yjK4rIrb^|bsviALDRLEPUH{2 z>8biO{6i|rkRR2nvbgws<`&IodSMxEo13!282~gLYh+0A(AL>X!_j&+H+{gh<+rk| zY&lsOS-4!TaInWSGbozEliPld$3K{q%o!?U`~v~RkcoSiKEP%3CMI)k+VdeBcD=#h zU-TG-xrI2L&Ji`nq$g$wp=Sv9bk)*6c!)lKAGLA3M;;PzT0lcpf+9{;RJ4E|6mi-& zC%|WBRghuNpfJ6Nio&_%rRS68PQ&SRVzb$>SS&F=P&yhEP2riEr|4CVC*>K!P`#;~ zoYrrgdk1$ezsK-)hU5RXzQ&fukNM$6|3E=bL3pKNB>dG7(+Gs>V@=Z{1e~g>sH*zS zv42^{Y&K&ynKf)OAFS?NRX! zD46`g8vCvl#$?Yow!FsMb#HQ2#Z6pLb|D!V8QAUi(+a{AF((OBUFCzeYCb;n4!SPz zr~`&v$%v}4Jpp_kg)DO}x1D=8RmJlt%$yR}H;?rmWygUpd3X0lX603I`RtYCWaZ#; zxv<%6F$uyHF((;3fkA3Iwo~2m2PDaaEJ+NWe9tLX!8a1ZHMU4{F?i-cf||x1eBEBh;r@eMTzVyorY)f$yC5tE)(PQ~#5PDS(UsEQsGfPM`%prdO7q3I`|nGF7$nOPO2+tQIu zCd%`xD9tG&-Ib2R;lSZ=L=ZCd->IaK5QdAuKp+s_%?pXZkv2|-i$SZ^ip63{NDQWk znZlSDE&_F34~xK4g`gx!VIgRQ7)%i}g) Date: Mon, 12 Oct 2015 15:03:45 -0700 Subject: [PATCH 3/5] document how to change size of angular-ui-switch --- README.md | 22 ++++++++++++++++++++++ example/index.html | 4 ++-- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c7400e3..ded356b 100644 --- a/README.md +++ b/README.md @@ -79,6 +79,28 @@ You can completely change the design. All the magic is hidden inside two CSS cla } ``` +## Sizes + +You can change the sizes of the switch element via size. Giving it a value of small or large will result in adding switchery-small or switchery-large classes respectively, which will change the switch size. + +Not using this property will render the default sized switch element. + +```html +
+ +
{{ enabled }} +
+``` + +```html +
+ +
{{ enabled }} +
+``` + +![YoomJS](https://raw.githubusercontent.com/EskoCruz/angular-ui-switch/master/switch-size.png) + ## Publishing 1. Update version in `package.json` and `bower.json`. diff --git a/example/index.html b/example/index.html index 28a7b54..53d4576 100644 --- a/example/index.html +++ b/example/index.html @@ -47,7 +47,7 @@ Enabled: {{ disabled }}

- +

@@ -55,7 +55,7 @@ Enabled: {{ sizeSmall }}

- +

From 9969ebfb7403617990e0b970d8f75afa74faf581 Mon Sep 17 00:00:00 2001 From: Esko Cruzeta Date: Wed, 2 Dec 2015 07:15:31 -0800 Subject: [PATCH 4/5] change size of angular-ui-switch with class attribute 'sm' or 'lg' --- README.md | 20 +++++++++++++++++++- angular-ui-switch.css | 15 ++++++++------- angular-ui-switch.min.css | 2 +- example/app.js | 2 ++ example/index.html | 18 +++++++++++++++++- 5 files changed, 47 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index ded356b..4a10312 100644 --- a/README.md +++ b/README.md @@ -94,7 +94,25 @@ Not using this property will render the default sized switch element. ```html
- + +
{{ enabled }} +
+``` + +Alternatively you could just use a class attribute of `class="sm"` or `class="lg"`, which will change the switch size. + +Again, not using size element or class attributes property will render the default sized switch element. + +```html +
+ +
{{ enabled }} +
+``` + +```html +
+
{{ enabled }}
``` diff --git a/angular-ui-switch.css b/angular-ui-switch.css index aefc63d..f8085b6 100644 --- a/angular-ui-switch.css +++ b/angular-ui-switch.css @@ -83,33 +83,34 @@ /* Switchery sizes. */ +/* Switchery size shorthand classes */ -.switchery-small { +.switchery-small, .sm { border-radius: 20px; height: 20px; width: 33px; } -.switchery-small > small { +.switchery-small > small, .sm > small { height: 20px; width: 20px; } -.switch.switchery-small.checked small { +.switch.switchery-small.checked small, .switch.sm.checked small { left: 13px; } -.switchery-large { +.switchery-large, .lg { border-radius: 40px; height: 40px; width: 66px; } -.switchery-large > small { +.switchery-large > small, .lg > small { height: 40px; width: 40px; } -.switch.switchery-large.checked small { +.switch.switchery-large.checked small, .switch.lg.checked small { left: 26px; -} +} \ No newline at end of file diff --git a/angular-ui-switch.min.css b/angular-ui-switch.min.css index 2396285..fcfd9b8 100644 --- a/angular-ui-switch.min.css +++ b/angular-ui-switch.min.css @@ -1 +1 @@ -.switch{border:1px solid #dfdfdf;position:relative;display:inline-block;box-sizing:content-box;overflow:visible;width:52px;padding:0;margin:0;border-radius:20px;cursor:pointer;box-shadow:#dfdfdf 0 0 0 0 inset;-webkit-transition:.3s ease-out all;top:-1px}.switch,.switch small{background:#fff;height:30px;transition:.3s ease-out all}.switch.wide{width:80px}.switch small{border-radius:100%;box-shadow:0 1px 3px rgba(0,0,0,.4);width:30px;position:absolute;top:0;left:0;-webkit-transition:.3s ease-out all}.switch .off,.switch .on{z-index:0;position:absolute;top:25%}.switch.checked{background:#64bd63;border-color:#64bd63}.switch.checked small{left:22px}.switch.wide.checked small{left:52px}.switch .switch-text{font-family:Arial,Helvetica,sans-serif;font-size:13px}.switch .off{display:block;right:10%;color:#A9A9A9}.switch .on,.switch.checked .off{display:none}.switch .on{color:#fff;left:9%}.switch.checked .on{display:block}.switch.disabled{opacity:.5;cursor:not-allowed}.switchery-small{border-radius:20px;height:20px;width:33px}.switchery-small>small{height:20px;width:20px}.switch.switchery-small.checked small{left:13px}.switchery-large{border-radius:40px;height:40px;width:66px}.switchery-large>small{height:40px;width:40px}.switch.switchery-large.checked small{left:26px} \ No newline at end of file +.switch,.switch small{background:#fff;height:30px}.switch{border:1px solid #dfdfdf;position:relative;display:inline-block;box-sizing:content-box;overflow:visible;width:52px;padding:0;margin:0;border-radius:20px;cursor:pointer;box-shadow:#dfdfdf 0 0 0 0 inset;transition:.3s ease-out all;-webkit-transition:.3s ease-out all;top:-1px}.switch.wide{width:80px}.switch small{border-radius:100%;box-shadow:0 1px 3px rgba(0,0,0,.4);width:30px;position:absolute;top:0;left:0;transition:.3s ease-out all;-webkit-transition:.3s ease-out all}.switch .off,.switch .on{z-index:0;position:absolute;top:25%}.switch.checked{background:#64bd63;border-color:#64bd63}.switch.checked small{left:22px}.switch.wide.checked small{left:52px}.switch .switch-text{font-family:Arial,Helvetica,sans-serif;font-size:13px}.switch .off{display:block;right:10%;color:#A9A9A9}.switch .on,.switch.checked .off{display:none}.switch .on{color:#fff;left:9%}.switch.checked .on{display:block}.switch.disabled{opacity:.5;cursor:not-allowed}.sm,.switchery-small{border-radius:20px;height:20px;width:33px}.sm>small,.switchery-small>small{height:20px;width:20px}.switch.sm.checked small,.switch.switchery-small.checked small{left:13px}.lg,.switchery-large{border-radius:40px;height:40px;width:66px}.lg>small,.switchery-large>small{height:40px;width:40px}.switch.lg.checked small,.switch.switchery-large.checked small{left:26px} \ No newline at end of file diff --git a/example/app.js b/example/app.js index 39b6a39..c06fefe 100644 --- a/example/app.js +++ b/example/app.js @@ -7,6 +7,8 @@ angular.module('app', ['uiSwitch']) $scope.disabled = true; $scope.sizeSmall = true; $scope.sizeLarge = true; + $scope.sizeClassSmall = true; + $scope.sizeClassLarge = true; $scope.changeCallback = function() { diff --git a/example/index.html b/example/index.html index 53d4576..fbbdf1b 100644 --- a/example/index.html +++ b/example/index.html @@ -60,7 +60,23 @@

- Enabled: {{ sizeLarge }} + Enabled: {{ sizeLarge }} +

+ + +

+ +

+

+ Enabled: {{ sizeClassSmall }} +

+ + +

+ +

+

+ Enabled: {{ sizeClassLarge }}

From c6678e6629a98c06c83a97c596613e4093711a61 Mon Sep 17 00:00:00 2001 From: Esko Cruzeta Date: Sun, 17 Apr 2016 10:31:22 -0700 Subject: [PATCH 5/5] git ignore .idea files created by jetbrains --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 76a84fa..328d185 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules bower_components .DS_Store +.idea/ \ No newline at end of file