suzanne.soy/travis-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rewrite icon template logic

Browse Source
This commit is contained in:
Lisa P 2015-10-23 12:17:26 +02:00
parent 68cee22a76
commit 64a580f299
3 changed files with 29 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/broadcast-tower.coffee
View File

@ -7,10 +7,6 @@ BroadcastTowerComponent = Ember.Component.extend
isOpen: false
timeoutId: ''
isEmpty: (->
@get('status') == ''
).property('status')
actions:
toggleBroadcasts:() ->
@toggleProperty('isOpen')

9
app/styles/app/layouts/broadcasts.sass
View File

@ -102,6 +102,9 @@
overflow: visible
.tower-path
fill: #AEAEAE
.radio-wave--right,
.radio-wave--left
display: none
&:hover,
&.is-open
.tower-path
@ -123,6 +126,12 @@
.tower-path
fill: #238C3E
&.announcement,
&.warning
.radio-wave--right,
.radio-wave--left
display: block
.radio-wave--right
.tower-path
transform-origin: left center

54
app/templates/components/broadcast-tower.hbs
View File

@ -1,41 +1,27 @@
<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="-1 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"/>
<svg version="1.1" id="Layer_1" x="0px" y="0px"
viewBox="-1 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"/>
<g class="radio-wave--right">
<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"/>
</g>
</svg>
{{else}}
<svg version="1.1" id="Layer_1" x="0px" y="0px"
viewBox="-1 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"/>
<g class="radio-wave--right">
<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
<g class="radio-wave--left">
<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"/>
</g>
<g class="radio-wave--left">
<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"/>
</g>
<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"/>
<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"/>
</g>
</svg>
{{/if}}
<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>
</span>