From 5c99abfafc0eda46fcfdc381d2b086f1731955f8 Mon Sep 17 00:00:00 2001
From: Lisa P <mail@lislis.de>
Date: Wed, 21 Oct 2015 16:55:44 +0200
Subject: [PATCH] add hover colors and rewrite tower as component

---
 app/components/broadcast-tower.coffee        | 24 +++++++++++++
 app/controllers/top.coffee                   |  2 ++
 app/styles/app/layouts/broadcasts.sass       | 28 ++++++++++-----
 app/templates/components/broadcast-tower.hbs | 37 ++++++++++++++++++++
 app/templates/top.hbs                        |  6 ++--
 5 files changed, 86 insertions(+), 11 deletions(-)
 create mode 100644 app/components/broadcast-tower.coffee
 create mode 100644 app/templates/components/broadcast-tower.hbs

diff --git a/app/components/broadcast-tower.coffee b/app/components/broadcast-tower.coffee
new file mode 100644
index 00000000..f817fc0f
--- /dev/null
+++ b/app/components/broadcast-tower.coffee
@@ -0,0 +1,24 @@
+`import Ember from 'ember'`
+
+BroadcastTowerComponent = Ember.Component.extend
+
+  classNames: ['broadcast']
+
+  isOpen: false
+
+  isEmpty: (->
+    @get('status') == ''
+  ).property('status')
+
+  actions:
+    toggleBroadcasts:() ->
+      @toggleProperty('isOpen')
+      @sendAction('toggleBroadcasts')
+
+      if @get('isOpen') == true
+        setTimeout => 
+          @toggleProperty('isOpen')
+          @sendAction('toggleBroadcasts')
+        , 10000
+
+`export default BroadcastTowerComponent`
diff --git a/app/controllers/top.coffee b/app/controllers/top.coffee
index b246fe8b..05c3f474 100644
--- a/app/controllers/top.coffee
+++ b/app/controllers/top.coffee
@@ -48,6 +48,8 @@ Controller = Ember.Controller.extend
         broadcasts.set('content', receivedBroadcasts)
         broadcasts.set('isLoading', false)
 
+        console.log broadcasts
+
       broadcasts
   ).property('broadcasts')
 
diff --git a/app/styles/app/layouts/broadcasts.sass b/app/styles/app/layouts/broadcasts.sass
index c3670478..55d9cb9d 100644
--- a/app/styles/app/layouts/broadcasts.sass
+++ b/app/styles/app/layouts/broadcasts.sass
@@ -97,16 +97,28 @@
 
 .icon-broadcast
   display: inline-block
-  width: 1em
-  height: 1.9em
-  background:
-    image: inline-image('line-icons/icon-broadcast-grey.svg')
-    repeat: no-repeat
-    size: 100%
+  width: 1.3em
+  height: 2em
   vertical-align: middle
+  .tower-path
+    fill: #AEAEAE
+  &:hover,
+  &.is-open
+    .tower-path
+      fill: #818181
 
   &.warning
-    background-image: inline-image('line-icons/icon-broadcast-red.svg')
+    .tower-path
+      fill: #DB4141
+    &:hover,
+    &.is-open
+      .tower-path
+        fill: #BA1717
 
   &.announcement
-    background-image: inline-image('line-icons/icon-broadcast-green.svg')
+    .tower-path
+      fill: #3CA85B
+    &:hover,
+    &.is-open
+      .tower-path
+        fill: #238C3E
diff --git a/app/templates/components/broadcast-tower.hbs b/app/templates/components/broadcast-tower.hbs
new file mode 100644
index 00000000..9f123fa9
--- /dev/null
+++ b/app/templates/components/broadcast-tower.hbs
@@ -0,0 +1,37 @@
+<span class="icon-broadcast {{status}} {{if isOpen 'is-open'}}" title="broadcasts" {{action 'toggleBroadcasts'}}>
+
+  {{#if isEmpty}}
+    <svg version="1.1" id="Layer_1" x="0px" y="0px"
+       viewBox="0 0 16 25" xml:space="preserve">
+    <g>
+      <path class="tower-path" d="M0.989,18.732l0.92-2.247l3.926,0.663V20h0.868l-0.001-2.852l3.926-0.663l0.92,2.247h0.989L8.167,8.078
+        H7.183l0.004,0.011H5.351l0.004-0.011H4.37L0,18.732H0.989z M6.702,16.288l-0.003-3.877l2.461,0.492l1.131,2.759L6.702,16.288z
+         M2.246,15.662l1.131-2.759l2.459-0.492l-0.001,3.877L2.246,15.662z M8.794,12.015l-2.095-0.483L6.698,8.92h0.827L8.794,12.015z
+         M5.836,8.92v2.612l-2.093,0.482L5.012,8.92H5.836z"/>
+      <path class="tower-path" d="M6.246,6.437c1.082,0,1.962-0.88,1.962-1.964c0-1.085-0.88-1.964-1.962-1.964
+        c-1.087,0-1.966,0.879-1.966,1.964C4.28,5.557,5.159,6.437,6.246,6.437z"/>
+    </g>
+    </svg>
+  {{else}}
+    <svg version="1.1" id="Layer_1" x="0px" y="0px"
+       viewBox="0 0 16 25" xml:space="preserve">
+    <g>
+      <path class="tower-path" d="M0.989,18.732l0.92-2.247l3.926,0.663V20h0.868l-0.001-2.852l3.926-0.663l0.92,2.247h0.989L8.167,8.078
+        H7.183l0.004,0.011H5.351l0.004-0.011H4.37L0,18.732H0.989z M6.702,16.288l-0.003-3.877l2.461,0.492l1.131,2.759L6.702,16.288z
+         M2.246,15.662l1.131-2.759l2.459-0.492l-0.001,3.877L2.246,15.662z M8.794,12.015l-2.095-0.483L6.698,8.92h0.827L8.794,12.015z
+         M5.836,8.92v2.612l-2.093,0.482L5.012,8.92H5.836z"/>
+      <path class="tower-path" d="M10.035,8.32l0.606,0.606c2.267-2.355,2.263-6.58-0.016-8.927l-0.591,0.593
+        C11.992,2.781,11.99,6.115,10.035,8.32z"/>
+      <path class="tower-path" d="M8.631,1.995C9.823,3.41,9.824,5.496,8.635,6.922l0.606,0.606c1.522-1.766,1.524-4.394,0-6.144L8.631,1.995
+        z"/>
+      <path class="tower-path" d="M1.855,8.927L2.462,8.32C0.507,6.115,0.506,2.781,2.463,0.593L1.872,0C-0.407,2.347-0.41,6.571,1.855,8.927
+        z"/>
+      <path class="tower-path" d="M3.257,1.385c-1.524,1.75-1.523,4.378-0.001,6.144l0.606-0.606C2.674,5.496,2.674,3.41,3.866,1.995
+        L3.257,1.385z"/>
+      <path class="tower-path" d="M6.246,6.437c1.082,0,1.962-0.88,1.962-1.964c0-1.085-0.88-1.964-1.962-1.964
+        c-1.087,0-1.966,0.879-1.966,1.964C4.28,5.557,5.159,6.437,6.246,6.437z"/>
+    </g>
+    </svg>
+  {{/if}}
+
+</span>
diff --git a/app/templates/top.hbs b/app/templates/top.hbs
index 370f6c55..bdddd184 100644
--- a/app/templates/top.hbs
+++ b/app/templates/top.hbs
@@ -6,9 +6,9 @@
   </div>
 
 {{#if auth.signedIn}}
-  <div class="broadcast">
-    <span class="icon-broadcast {{broadcasts.lastBroadcastStatus}}" title="broadcasts" {{action 'toggleBroadcasts'}}></span>
-  </div>
+
+  {{broadcast-tower toggleBroadcasts="toggleBroadcasts" status=broadcasts.lastBroadcastStatus}}
+
   <ul class="broadcasts {{if showBroadcasts 'is-open'}}">
   {{#each broadcasts.content as |broadcast|}}
     <li><p><span class="broadcast-status {{broadcast.category}}" title="Transmitted on {{broadcast.updated_at}}"></span> {{{broadcast.message}}} <a {{action 'markBroadcastAsSeen' broadcast}} class="icon-close"></a></p></li>