From 8e5111da88963659c9a456f382d4672b86f78e85 Mon Sep 17 00:00:00 2001
From: Piotr Sarnacki <drogus@gmail.com>
Date: Tue, 21 Jan 2014 17:57:35 +0100
Subject: [PATCH] Convert switches in profile to components

---
 assets/scripts/app/components.coffee          |  9 +++++
 .../templates/components/travis-switch.hbs    |  5 +++
 .../app/templates/profile/tabs/hooks.hbs      |  8 +----
 assets/scripts/travis.coffee                  |  1 +
 assets/styles/components/travis-switch.sass   | 33 +++++++++++++++++
 assets/styles/profile/hooks.sass              | 35 -------------------
 6 files changed, 49 insertions(+), 42 deletions(-)
 create mode 100644 assets/scripts/app/components.coffee
 create mode 100644 assets/scripts/app/templates/components/travis-switch.hbs
 create mode 100644 assets/styles/components/travis-switch.sass

diff --git a/assets/scripts/app/components.coffee b/assets/scripts/app/components.coffee
new file mode 100644
index 00000000..da423edd
--- /dev/null
+++ b/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'))
diff --git a/assets/scripts/app/templates/components/travis-switch.hbs b/assets/scripts/app/templates/components/travis-switch.hbs
new file mode 100644
index 00000000..e7b20837
--- /dev/null
+++ b/assets/scripts/app/templates/components/travis-switch.hbs
@@ -0,0 +1,5 @@
+{{#if active}}
+  ON
+{{else}}
+  OFF
+{{/if}}
diff --git a/assets/scripts/app/templates/profile/tabs/hooks.hbs b/assets/scripts/app/templates/profile/tabs/hooks.hbs
index 8aec75ac..4f2b9cd0 100644
--- a/assets/scripts/app/templates/profile/tabs/hooks.hbs
+++ b/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">
-              {{#if hook.active}}
-                ON
-              {{else}}
-                OFF
-              {{/if}}
-            </a>
+            {{travis-switch action="toggle" target=hook}}
           </div>
         </li>
       {{else}}
diff --git a/assets/scripts/travis.coffee b/assets/scripts/travis.coffee
index 2491ca60..95770a69 100644
--- a/assets/scripts/travis.coffee
+++ b/assets/scripts/travis.coffee
@@ -167,6 +167,7 @@ require 'slider'
 require 'tailing'
 require 'templates'
 require 'views'
+require 'components'
 
 require 'config/locales'
 
diff --git a/assets/styles/components/travis-switch.sass b/assets/styles/components/travis-switch.sass
new file mode 100644
index 00000000..342aaac6
--- /dev/null
+++ b/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
diff --git a/assets/styles/profile/hooks.sass b/assets/styles/profile/hooks.sass
index 5566b966..cc639438 100644
--- a/assets/styles/profile/hooks.sass
+++ b/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