add hover colors and rewrite tower as component
This commit is contained in:
Lisa P
parent
36147b36a0
commit
5c99abfafc
24
app/components/broadcast-tower.coffee
Normal file
24
app/components/broadcast-tower.coffee
Normal file
|
|
@ -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`
|
||||
|
|
@ -48,6 +48,8 @@ Controller = Ember.Controller.extend
|
|||
broadcasts.set('content', receivedBroadcasts)
|
||||
broadcasts.set('isLoading', false)
|
||||
|
||||
console.log broadcasts
|
||||
|
||||
broadcasts
|
||||
).property('broadcasts')
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
37
app/templates/components/broadcast-tower.hbs
Normal file
37
app/templates/components/broadcast-tower.hbs
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user