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

work on booting state icons

Browse Source
This commit is contained in:
Lisa P 2015-09-08 13:28:31 +02:00
parent b3c966b245
commit 05f9b0df7e
10 changed files with 132 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/status-icon.coffee
View File

@ -22,4 +22,12 @@ StatusIconComponent = Ember.Component.extend
@get('build.state') == 'canceled'
).property('build.state')
isRunning: (->
@get('build.state') == 'started' ||
@get('build.state') == 'queued' ||
@get('build.state') == 'booting' ||
@get('build.state') == 'received' ||
@get('build.state') == 'created'
).property('build.state')
`export default StatusIconComponent`

1
app/controllers/branches.coffee
View File

@ -5,7 +5,6 @@
BranchesController = Ember.Controller.extend
defaultBranch: (->
repos = @get('model')
# repos = repos.filter (item, index) ->

1
app/styles/app.scss
View File

@ -20,6 +20,7 @@
@import "app/components/sync-button";
@import "app/components/loading-indicator";
@import "app/components/build-tile";
@import "app/animation/tractor";

61
app/styles/app/components/build-tile.sass Normal file
View File

@ -0,0 +1,61 @@
@mixin buildTileColors($color, $bg, $status)
> .#{$status}
background-color: $bg
.icon-request g > *
fill: $color
&:hover
background-color: $color
.status-icon g > *
fill: $white
.status-icon .circle
border-color: $white
@media #{$medium-up}
.dropup--status
border-color: $color
color: $color
&:before
background-color: $color
.build-tiles
height: 5.6rem
margin: 0
padding: 0
list-style: none
li
position: relative
display: inline-block
height: 100%
width: 18.8%
.status-icon
position: absolute
top: 0
right: 0
bottom: 0
left: 0
width: 2rem
height: 2rem
margin: auto
background-color: transparent
.is-rotating
width: 100%
height: 100%
line-height: 1.5
.circle
width: 8px
height: 8px
a
display: block
height: 100%
text-align: center
@include buildTileColors(#44A662, #F5FBF6, 'passed')
@include buildTileColors(#D94341, #FFF7F5, 'failed')
@include buildTileColors(#D94341, #FFF7F5, 'errored')
@include buildTileColors(#A1A0A0, #F5F5F5, 'canceled')
@include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.4), 'started')
@include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.4), 'queued')
@include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.4), 'booting')
@include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.4), 'received')
@include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.4), 'created')

87
app/styles/app/layouts/branches.sass
View File

@ -10,28 +10,12 @@
.icon-request g > *
fill: $color
@mixin buildTileColors($color, $bg, $status)
> .#{$status}
background-color: $bg
.icon-request g > *
fill: $color
&:hover
background-color: $color
.status-icon g > *
fill: $white
@media #{$medium-up}
.dropup--status
border-color: $color
color: $color
&:before
background-color: $color
.tabbody
ul
padding: 0
margin: 0
list-style: none
// .tabbody
// ul
// padding: 0
// margin: 0
// list-style: none
.branch-row
border: 1px solid $cream-dark
@ -198,7 +182,6 @@
@media #{$medium-up}
top: -3em
padding: .2em .3em
transform: translate(-1em, 0em);
white-space: nowrap
font-size: 14px;
border: 1px solid $red-dark
@ -210,41 +193,29 @@
path
fill: $teal-dark
// @todo refactor to status-icon module
.status-icon
.is-rotating
width: 17px
height: 19px
line-height: 1
transform-origin: center center
will-change: transform
animation: rotation 3s infinite ease
.circle
display: inline-block
vertical-align: middle
width: 5px
height: 5px
border: solid 2px #ECCE4B
border-radius: 50%
transform-origin: center center
// @todo refactor to build-tiles module
.build-tiles
height: 5.6rem
margin: 0
padding: 0
list-style: none
li
position: relative
display: inline-block
height: 100%
width: 18.8%
.status-icon
position: absolute
top: 0
right: 0
bottom: 0
left: 0
width: 2rem
height: 2rem
margin: auto
background-color: transparent
a
display: block
height: 100%
text-align: center
@include buildTileColors(#44A662, #F5FBF6, 'passed')
@include buildTileColors(#D94341, #FFF7F5, 'failed')
@include buildTileColors(#D94341, #FFF7F5, 'errored')
@include buildTileColors(#A1A0A0, #F5F5F5, 'canceled')
@include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.5), 'started')
@include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.5), 'queued')
@include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.5), 'booting')
@include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.5), 'received')
@include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.5), 'created')
@keyframes rotation
0%
transform: rotateZ(0deg)
45%, 55%
transform: rotateZ(180deg)
100%
transform: rotateZ(360deg)

5
app/styles/app/layouts/settings.sass
View File

@ -1,9 +1,4 @@
.small-title
font-size: 18px
color: $teal-light
font-weight: 400
.settings
padding-top: .8em

9
app/styles/app/misc.sass
View File

@ -18,3 +18,12 @@
a
color: #c00
text-decoration: underline
.small-title
font-size: 18px
color: $teal-light
font-weight: 400
.blank-list
@include resetul

17
app/templates/branches.hbs
View File

@ -1,16 +1,14 @@
<section>
<h2>Default Branch</h2>
<ul>
<h2 class="small-title">Default Branch</h2>
<ul class="blank-list">
{{branch-row build=defaultBranch}}
</ul>
</section>
<section>
<h2>Active Branches</h2>
<ul>
<h2 class="small-title">Active Branches</h2>
<ul class="blank-list">
{{#each branch in activeBranches}}
{{branch-row build=branch}}
{{else}}
@ -20,9 +18,8 @@
</section>
<section>
<h2>Inactive Branches</h2>
<ul>
<h2 class="small-title">Inactive Branches</h2>
<ul class="blank-list">
{{#each branch in inactiveBranches}}
{{branch-row build=branch}}
{{else}}
@ -36,4 +33,4 @@
{{!-- {{else}}
{{loading-indicator}}
{{/if}} --}}
{{/if}} --}}

20
app/templates/components/branch-row.hbs
View File

@ -137,13 +137,15 @@
</div>
</div>
<div class="one-line">
{{#unless isLoading }}
<ul class="build-tiles">
{{#each buildTile in getLast5Builds}}
{{build-tile build=buildTile}}
{{/each}}
</ul>
{{else}}
{{loading-indicator}}
{{/unless}}
<ul class="build-tiles">
{{#unless isLoading }}
<ul class="build-tiles">
{{#each buildTile in getLast5Builds}}
{{build-tile build=buildTile}}
{{/each}}
</ul>
{{else}}
{{loading-indicator}}
{{/unless}}
</ul>
</div>

6
app/templates/components/status-icon.hbs
View File

@ -42,3 +42,9 @@
</svg>
{{/if}}
{{#if isRunning}}
<div class="is-rotating">
<span class="circle"></span>
<span class="circle"></span>
</div>
{{/if}}