Optimize css, add sizes, defaultSize

knownasilya · Oct 14, 2014 · 579bbdb · 579bbdb
1 parent f4bd85b
commit 579bbdb
Show file tree

Hide file tree

Showing 11 changed files with 259 additions and 58 deletions.
diff --git a/app/components/x-toggle.js b/app/components/x-toggle.js
@@ -11,26 +11,23 @@ export default Ember.Component.extend({
   theme: config.defaultTheme || 'default',
   off: 'Off',
   on: 'On',
+  size: config.defaultSize || 'medium',
   toggled: false,
 
-  inputClasses: on('init', observer('themeClass', 'inputCheckbox', function () {
-    var themeClass = this.get('themeClass');
-    var input = this.get('inputCheckbox');
-
-    if (input) {
-      var inputClasses = input.get('classNames') || [];
-
-      input.set('classNames', inputClasses.concat(['x-toggle', themeClass]));
-    }
-  })),
-
   themeClass: computed('theme', function () {
     var theme = this.get('theme') || 'default';
 
     return 'x-toggle-' + theme;
   }),
 
-  generatedId: computed(function () {
+  sizeClass: computed('size', 'themeClass', function () {
+    var size = this.get('size') || 'medium';
+    var themeClass = this.get('themeClass');
+
+    return themeClass + '-' + size;
+  }),
+
+  forId: computed(function () {
     return this.get('elementId') + '-x-toggle';
   }),
 

diff --git a/app/templates/components/x-toggle.hbs b/app/templates/components/x-toggle.hbs
@@ -1,2 +1,6 @@
-{{input id=generatedId type='checkbox' checked=toggled viewName='inputCheckbox'}}
-<label class='x-toggle-btn' {{bind-attr for=generatedId data-tg-off=off data-tg-on=on}}></label>
+{{input id=forId type='checkbox' checked=toggled class='x-toggle'}}
+<label {{bind-attr class=':x-toggle-btn themeClass sizeClass'
+  for=forId
+  data-tg-off=off
+  data-tg-on=on}}>
+</label>
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -1,8 +1,9 @@
-<h2 id='title'>Welcome to Ember.js</h2>
+<h2 id='title'>ember-cli-toggle</h2>
 
 {{outlet}}
 
 {{x-toggle toggle='checkboxToggled'}}
+{{x-toggle theme='default'}}
 {{x-toggle theme='light'}}
 {{x-toggle theme='ios'}}
 {{x-toggle theme='flat'}}
@@ -12,3 +13,39 @@
 <p>
   Is toggled: {{toggled}}
 </p>
+
+<div class="default-sizes sizes">
+  {{x-toggle size='small'}}
+  {{x-toggle size='medium'}}
+  {{x-toggle size='large'}}
+</div>
+
+<div class="light-sizes sizes">
+  {{x-toggle size='small' theme='light'}}
+  {{x-toggle size='medium' theme='light'}}
+  {{x-toggle size='large' theme='light'}}
+</div>
+
+<div class="ios-sizes sizes">
+  {{x-toggle size='small' theme='ios'}}
+  {{x-toggle size='medium' theme='ios'}}
+  {{x-toggle size='large' theme='ios'}}
+</div>
+
+<div class="flat-sizes sizes">
+  {{x-toggle size='small' theme='flat'}}
+  {{x-toggle size='medium' theme='flat'}}
+  {{x-toggle size='large' theme='flat'}}
+</div>
+
+<div class="flip-sizes sizes">
+  {{x-toggle size='small' theme='flip'}}
+  {{x-toggle size='medium' theme='flip'}}
+  {{x-toggle size='large' theme='flip'}}
+</div>
+
+<div class="skewed-sizes sizes">
+  {{x-toggle size='small' theme='skewed'}}
+  {{x-toggle size='medium' theme='skewed'}}
+  {{x-toggle size='large' theme='skewed'}}
+</div>
diff --git a/tests/dummy/config/environment.js b/tests/dummy/config/environment.js
@@ -20,9 +20,9 @@ module.exports = function(environment) {
 
     'ember-cli-toggle': {
       //includedThemes: ['light', 'ios', 'flip'],
-      excludedThemes: ['flip'],
-      defaultTheme: 'light',
-      defaultSize: 'm'
+      //excludedThemes: ['flip'],
+      //defaultTheme: 'light',
+      //defaultSize: 'small'
     }
   };
 

diff --git a/vendor/ember-cli-toggle/base.css b/vendor/ember-cli-toggle/base.css
@@ -33,7 +33,7 @@
   background: none;
 }
 
-.x-toggle + .x-toggle-btn {
+.x-toggle-btn {
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -46,20 +46,20 @@
   cursor: pointer;
 }
 
-.x-toggle + .x-toggle-btn:after,
-.x-toggle + .x-toggle-btn:before {
+.x-toggle-btn:after,
+.x-toggle-btn:before {
   position: relative;
   display: block;
   content: "";
   width: 50%;
   height: 100%;
 }
 
-.x-toggle + .x-toggle-btn:after {
+.x-toggle-btn:after {
   left: 0;
 }
 
-.x-toggle + .x-toggle-btn:before {
+.x-toggle-btn:before {
   display: none;
 }
 

diff --git a/vendor/ember-cli-toggle/themes/default.css b/vendor/ember-cli-toggle/themes/default.css
@@ -1,16 +1,33 @@
-.x-toggle-default + .x-toggle-btn {
+.x-toggle-default.x-toggle-btn {
   padding: 0.1em;
   background-color: #E7E7E7;
   border-radius: 0.2em;
   transition: background-color 0.2s;
 }
 
-.x-toggle-default:checked + .x-toggle-btn {
+.x-toggle:checked + .x-toggle-default.x-toggle-btn {
   background-color: #797979;
 }
 
-.x-toggle-default + .x-toggle-btn:after {
+.x-toggle-default.x-toggle-btn:after {
   background-color: #FFFFFF;
   transition: left 0.2s;
   border-radius: 0.2em;
 }
+
+.x-toggle-default-small {
+  width: 3em;
+  height: 1.6em;
+}
+
+.x-toggle-default.x-toggle-default-medium {
+  width: 4em;
+  height: 2.1em;
+  padding: 3px;
+}
+
+.x-toggle-default.x-toggle-default-large {
+  width: 4.7em;
+  height: 2.6em;
+  padding: 4px;
+}
diff --git a/vendor/ember-cli-toggle/themes/flat.css b/vendor/ember-cli-toggle/themes/flat.css
@@ -1,22 +1,42 @@
-.x-toggle-flat + .x-toggle-btn {
+.x-toggle-flat.x-toggle-btn {
   padding: 2px;
   -webkit-transition: all .2s ease;
           transition: all .2s ease;
   background: #fff;
   border: 4px solid #f2f2f2;
   border-radius: 2em;
 }
-.x-toggle-flat + .x-toggle-btn:after {
+
+.x-toggle-flat.x-toggle-btn:after {
   -webkit-transition: all .2s ease;
           transition: all .2s ease;
   background: #f2f2f2;
   content: "";
   border-radius: 1em;
 }
-.x-toggle-flat:checked + .x-toggle-btn {
+
+.x-toggle:checked + .x-toggle-flat.x-toggle-btn {
   border: 4px solid #7FC6A6;
 }
-.x-toggle-flat:checked + .x-toggle-btn:after {
+
+.x-toggle:checked + .x-toggle-flat.x-toggle-btn:after {
   left: 50%;
   background: #7FC6A6;
 }
+
+.x-toggle-flat-small {
+  width: 3em;
+  height: 1.6em;
+}
+
+.x-toggle-flat.x-toggle-flat-medium {
+  width: 4em;
+  height: 2.1em;
+  padding: 3px;
+}
+
+.x-toggle-flat.x-toggle-flat-large {
+  width: 4.7em;
+  height: 2.6em;
+  padding: 4px;
+}
diff --git a/vendor/ember-cli-toggle/themes/flip.css b/vendor/ember-cli-toggle/themes/flip.css
@@ -1,12 +1,14 @@
-.x-toggle-flip + .x-toggle-btn {
+.x-toggle-flip.x-toggle-btn {
   padding: 2px;
   -webkit-transition: all .2s ease;
           transition: all .2s ease;
   font-family: sans-serif;
   -webkit-perspective: 100px;
           perspective: 100px;
 }
-.x-toggle-flip + .x-toggle-btn:after, .x-toggle-flip + .x-toggle-btn:before {
+
+.x-toggle-flip.x-toggle-btn:after,
+.x-toggle-flip.x-toggle-btn:before {
   display: inline-block;
   -webkit-transition: all .4s ease;
           transition: all .4s ease;
@@ -23,31 +25,71 @@
           backface-visibility: hidden;
   border-radius: 4px;
 }
-.x-toggle-flip + .x-toggle-btn:after {
+
+.x-toggle-flip.x-toggle-btn:after {
   content: attr(data-tg-on);
   background: #02C66F;
   -webkit-transform: rotateY(-180deg);
           transform: rotateY(-180deg);
 }
-.x-toggle-flip + .x-toggle-btn:before {
+
+.x-toggle-flip.x-toggle-btn:before {
   background: #FF3A19;
   content: attr(data-tg-off);
 }
-.x-toggle-flip + .x-toggle-btn:active:before {
+
+.x-toggle-flip.x-toggle-btn:active:before {
   -webkit-transform: rotateY(-20deg);
           transform: rotateY(-20deg);
 }
-.x-toggle-flip:checked + .x-toggle-btn:before {
+
+.x-toggle:checked + .x-toggle-flip.x-toggle-btn:before {
   -webkit-transform: rotateY(180deg);
           transform: rotateY(180deg);
 }
-.x-toggle-flip:checked + .x-toggle-btn:after {
+
+.x-toggle:checked + .x-toggle-flip.x-toggle-btn:after {
   -webkit-transform: rotateY(0);
           transform: rotateY(0);
   left: 0;
   background: #7FC6A6;
 }
-.x-toggle-flip:checked + .x-toggle-btn:active:after {
+
+.x-toggle:checked + .x-toggle-flip.x-toggle-btn:active:after {
   -webkit-transform: rotateY(20deg);
           transform: rotateY(20deg);
 }
+
+.x-toggle-flip-small {
+  width: 3em;
+  height: 1.6em;
+}
+
+.x-toggle-flip.x-toggle-flip-small:before,
+.x-toggle-flip.x-toggle-flip-small:after {
+  line-height: 2.2em; 
+  font-size: 0.8em;
+}
+
+.x-toggle-flip.x-toggle-flip-medium {
+  width: 4em;
+  height: 2.1em;
+  padding: 3px;
+}
+
+.x-toggle-flip.x-toggle-flip-medium:before,
+.x-toggle-flip.x-toggle-flip-medium:after {
+  line-height: 2.3em; 
+}
+
+.x-toggle-flip.x-toggle-flip-large {
+  width: 4.7em;
+  height: 2.6em;
+  padding: 4px;
+}
+
+.x-toggle-flip.x-toggle-flip-large:before,
+.x-toggle-flip.x-toggle-flip-large:after {
+  line-height: 2.4em;
+  font-size: 1.1em;
+}
diff --git a/vendor/ember-cli-toggle/themes/ios.css b/vendor/ember-cli-toggle/themes/ios.css
@@ -1,30 +1,53 @@
-.x-toggle-ios + .x-toggle-btn {
+.x-toggle-ios.x-toggle-btn {
   background: #fbfbfb;
   border-radius: 2em;
   padding: 2px;
   -webkit-transition: all .4s ease;
           transition: all .4s ease;
   border: 1px solid #e8eae9;
 }
-.x-toggle-ios + .x-toggle-btn:after {
+
+.x-toggle-ios.x-toggle-btn:after {
   border-radius: 2em;
   background: #fbfbfb;
   -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
           transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
 }
-.x-toggle-ios + .x-toggle-btn:active {
+
+.x-toggle-ios.x-toggle-btn:active {
   box-shadow: inset 0 0 0 2em #e8eae9;
 }
-.x-toggle-ios + .x-toggle-btn:active:after {
+
+.x-toggle-ios.x-toggle-btn:active:after {
   padding-right: .8em;
 }
-.x-toggle-ios:checked + .x-toggle-btn {
+
+.x-toggle:checked + .x-toggle-ios.x-toggle-btn {
   background: #86d993;
 }
-.x-toggle-ios:checked + .x-toggle-btn:active {
+
+.x-toggle:checked + .x-toggle-ios.x-toggle-btn:active {
   box-shadow: none;
 }
-.x-toggle-ios:checked + .x-toggle-btn:active:after {
+
+.x-toggle:checked + .x-toggle-ios.x-toggle-btn:active:after {
   margin-left: -.8em;
 }
+
+.x-toggle-ios-small {
+  width: 3em;
+  height: 1.6em;
+}
+
+.x-toggle-ios.x-toggle-ios-medium {
+  width: 4em;
+  height: 2.1em;
+  padding: 3px;
+}
+
+.x-toggle-ios.x-toggle-ios-large {
+  width: 4.7em;
+  height: 2.6em;
+  padding: 4px;
+}