Convert switches in profile to components

assets/scripts/app/components.coffee

@@ -0,0 +1,9 @@
+Travis.TravisSwitchComponent = Ember.Component.extend
+  tagName: 'a'
+  classNames: ['travis-switch']
+  classNameBindings: ['active']
+
+  activeBinding: 'target.active'
+
+  click: ->
+    @sendAction('action', @get('target'))

assets/scripts/app/templates/components/travis-switch.hbs

@@ -0,0 +1,5 @@
+{{#if active}}
+  ON
+{{else}}
+  OFF
+{{/if}}

assets/scripts/app/templates/profile/tabs/hooks.hbs

@@ -24,13 +24,7 @@
 
           <div class="controls">
             <a {{bind-attr href="hook.urlGithubAdmin"}} class="github-admin tool-tip" title="Github service hooks admin page"></a>
-            <a {{action "toggle" hook}} class="switch">
+            {{travis-switch action="toggle" target=hook}}
-              {{#if hook.active}}
-                ON
-              {{else}}
-                OFF
-              {{/if}}
-            </a>
           </div>
         </li>
       {{else}}

assets/scripts/travis.coffee

@@ -167,6 +167,7 @@ require 'slider'
 require 'tailing'
 require 'templates'
 require 'views'
+require 'components'
 
 require 'config/locales'
 

assets/styles/components/travis-switch.sass

@@ -0,0 +1,33 @@
+.travis-switch
+  position: relative
+  display: block
+  width: 60px
+  height: 18px
+  margin: 0 10px 0 15px
+  padding: 0 10px 0 0
+  border: 1px solid #bdbdbd
+  line-height: 21px
+  font-size: 11px
+  color: #999
+  cursor: pointer
+  text-align: right
+  &:before
+    content: ""
+    position: absolute
+    top: -1px
+    left: -1px
+    width: 28px
+    height: 18px
+    background: #e9e9e7
+    border: 1px solid #bdbdbd
+
+.travis-switch.active
+  width: 56px
+  padding: 0 0 0 14px
+  background: #40454f
+  border: 1px solid #bdbdbd
+  color: #fff
+  text-align: left
+  &:before
+    left: auto
+    right: -1px

assets/styles/profile/hooks.sass

@@ -66,41 +66,6 @@
       padding-right: 0
       background: inline-image('ui/github-admin.png') no-repeat 3px 4px
 
-    .switch
-      position: relative
-      display: block
-      width: 60px
-      height: 18px
-      margin: 0 10px 0 15px
-      padding: 0 10px 0 0
-      border: 1px solid #bdbdbd
-      line-height: 21px
-      font-size: 11px
-      color: #999
-      cursor: pointer
-      text-align: right
-      &:before
-        content: ""
-        position: absolute
-        top: -1px
-        left: -1px
-        width: 28px
-        height: 18px
-        background: #e9e9e7
-        border: 1px solid #bdbdbd
-
-    &.active .switch
-      width: 56px
-      padding: 0 0 0 14px
-      background: #40454f
-      border: 1px solid #bdbdbd
-      color: #fff
-      text-align: left
-      &:before
-        left: auto
-        right: -1px
-
-
     &:hover
       > a
         color: $color-link-highlight