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

refactor status-icon component and start rolling out new icons in the sidebar

Browse Source
This commit is contained in:
Lisa P 2015-09-17 14:22:00 +02:00
parent 8b7a316ebf
commit b74aa037d5
8 changed files with 91 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,47 +4,38 @@ StatusIconComponent = Ember.Component.extend
tagName: 'span'
classNames: ['status-icon', 'icon']
classNameBindings: ['build.last_build.state', 'build.state']
classNameBindings: ['status']
hasPassed: (->
@get('build.last_build.state') == 'passed' ||
@get('build.state') == 'passed'
).property('build')
@get('status') == 'passed'
).property('status')
hasFailed: (->
@get('build.last_build.state') == 'failed' ||
@get('build.state') == 'failed'
).property('build')
@get('status') == 'failed'
).property('status')
hasErrored: (->
@get('build.last_build.state') == 'errored' ||
@get('build.state') == 'errored'
).property('build')
@get('status') == 'errored'
).property('status')
wasCanceled: (->
@get('build.last_build.state') == 'canceled' ||
@get('build.state') == 'canceled'
).property('build')
@get('status') == 'canceled'
).property('status')
isRunning: (->
@get('build.last_build.state') == 'started' ||
@get('build.last_build.state') == 'queued' ||
@get('build.last_build.state') == 'booting' ||
@get('build.last_build.state') == 'received' ||
@get('build.last_build.state') == 'created' ||
@get('build.state') == 'started' ||
@get('build.state') == 'queued' ||
@get('build.state') == 'booting' ||
@get('build.state') == 'received' ||
@get('build.state') == 'created'
).property('build')
@get('status') == 'started' ||
@get('status') == 'queued' ||
@get('status') == 'booting' ||
@get('status') == 'received' ||
@get('status') == 'created'
).property('status')
isEmpty: (->
if @get('build.@type') == 'branch'
true if @get('build.last_build.state') == null
else if @get('build.@type') == 'build'
false if @get('build.state') != ''
if @get('status') == null || @get('status') == ''
true
else
false
).property('build')
).property('status')
`export default StatusIconComponent`

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

@ -206,6 +206,9 @@
.dropup-item
display: inline-block
vertical-align: middle
.no-link
padding: .4em 0
cursor: default
.dropup--status
@extend %dropup

3
app/styles/app/layouts/buildheader.sass
View File

@ -60,9 +60,6 @@
font-weight: 400
& span:hover + .tooltip
display: block
ul
padding: 0
margin: 0
.repo-main-commit
position: relative

14
app/styles/app/layouts/sidebar.sass
View File

@ -51,13 +51,13 @@ $sb-font-size: 14px
width: 22%
a:hover
text-decoration: underline
.icon:not(.icon--hash)
width: 0.9em
height: 1.1em
margin-right: .3em
.icon--hash
width: 1.1em
height: 1.3em
.icon
width: 1.3em
height: 1.4em
margin-right: .1em
// .icon--hash
// width: 1.1em
// height: 1.3em
.tabnav--sidebar

54
app/styles/app/modules/tiles.sass
View File

@ -1,12 +1,19 @@
@mixin colorTiles($color)
.tile-status
background-color: $color
.repo-header-title a,
.repo-build-status a,
.build-status a,
.tile-header,
.tile-header a
color: $color
@mixin colorStatusIcons($color, $status)
.status-icon.#{$status}
svg g > *
fill: $color
@mixin colorTiles($color, $status)
&.#{$status}
.tile-status
background-color: $color
.repo-header-title a,
.repo-build-status a,
.build-status a,
.tile-header,
.tile-header a
color: $color
@include colorStatusIcons($color, $status)
.tile
@extend %border-radius-4px
@ -23,21 +30,20 @@
height: 0.9em
&:not(.tile--jobs)
&.started,
&.created,
&.received,
&.queued
@include colorTiles($start-color)
&.failed
@include colorTiles($fail-color)
&.errored
@include colorTiles($error-color)
&.canceled
@include colorTiles($cancel-color)
&.passed
@include colorTiles($pass-color)
&.inactive
@include colorTiles($cancel-color)
@include colorTiles($green-dark, 'passed')
@include colorTiles($red-dark, 'failed')
@include colorTiles($red-dark, 'errored')
@include colorTiles($grey-medium, 'canceled')
@include colorTiles(#bfb502, 'started')
@include colorTiles(#bfb502, 'queued')
@include colorTiles(#bfb502, 'booting')
@include colorTiles(#bfb502, 'received')
@include colorTiles(#bfb502, 'created')
.status-icon .is-rotating
width: 17px;
height: 17px;
line-height: 1;
@media #{$medium-up}
height: 145px

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

@ -1,6 +1,6 @@
<div class="two-line">
<div class="branch-name">
<h2 class="row-item">{{status-icon build=build}}{{build.name}}</h2>
<h2 class="row-item">{{status-icon status=build.last_build.state}}{{build.name}}</h2>
</div>
<div class="branch-builds">
<div class="row-item">
@ -138,7 +138,16 @@
<ul>
<li>
{{#if hasTriggered}}
<span class="dropup-item">build was triggered</span>
<span class="icon">
<svg version="1.1" id="Layer_1" x="0px" y="0px"
viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<g id="Passed">
<path fill="#A7AEAE" d="M9.6,14.4c-0.1,0-0.3-0.1-0.4-0.1l-4-3.3c-0.3-0.2-0.3-0.6-0.1-0.9S5.8,9.8,6.1,10l3.4,2.8l4.9-7.5
C14.6,5,15,4.9,15.3,5.1c0.3,0.2,0.4,0.6,0.2,0.9l-5.3,8.1C10.1,14.3,9.9,14.4,9.6,14.4C9.7,14.4,9.7,14.4,9.6,14.4z"/>
</g>
</svg>
</span>
<span class="dropup-item no-link">Build triggered</span>
{{else}}
{{#if isTriggering}}
{{loading-indicator}}

4
app/templates/components/build-tile.hbs
View File

@ -1,6 +1,8 @@
{{#if build.number}}
{{#link-to "build" build.repository.slug build.id class="dropup-trigger"}}
{{status-icon build=build}}
{{status-icon status=build.state}}
{{build.last_build.state}}
<div class="dropup--status">
{{request-icon build=build}} #{{build.number}}
</div>

19
app/templates/components/repos-list-item.hbs
View File

@ -1,7 +1,7 @@
<div class="tile tile--sidebar {{repo.lastBuildState}}">
<h2 class="tile-title">
{{#if repo.slug}}
<span class="icon icon--job {{repo.lastBuildState}}"></span>
{{status-icon status=repo.lastBuildState}}
{{#link-to "repo" repo class="slug"}}{{repo.slug}}{{/link-to}}
{{/if}}
</h2>
@ -26,7 +26,22 @@
</p>
<p>
<span class="icon icon--cal"></span>
<span class="icon">
<svg viewBox="2 2 17 17">
<g id="Cal">
<path fill="#A7AEAE" d="M16.7,2.5H3.3C3,2.5,2.8,2.7,2.8,3V17c0,0.3,0.2,0.5,0.5,0.5h13.4c0.3,0,0.5-0.2,0.5-0.5V3
C17.2,2.7,17,2.5,16.7,2.5z M16.2,3.4v3.1H3.8V3.4H16.2z M3.8,16.6v-9h12.5v9H3.8z"/>
<path fill="#A7AEAE" d="M8.7,13.4c-0.1,0-0.3,0-0.4,0c0.2-0.2,0.4-0.4,0.5-0.6c0.2-0.2,0.3-0.4,0.5-0.6c0.1-0.2,0.2-0.4,0.3-0.6
c0.1-0.2,0.1-0.4,0.1-0.6c0-0.2,0-0.4-0.1-0.6c-0.1-0.2-0.2-0.3-0.3-0.4C9.2,10,9.1,9.9,8.9,9.8C8.7,9.7,8.5,9.7,8.3,9.7
C8,9.7,7.7,9.8,7.5,9.9C7.2,10,7,10.2,6.8,10.4L7.3,11c0.1-0.1,0.2-0.2,0.4-0.3c0.1-0.1,0.3-0.1,0.4-0.1c0.2,0,0.4,0.1,0.5,0.2
c0.1,0.1,0.2,0.3,0.2,0.5c0,0.2,0,0.3-0.1,0.5c-0.1,0.2-0.2,0.4-0.4,0.6c-0.2,0.2-0.4,0.4-0.6,0.7c-0.2,0.2-0.5,0.5-0.8,0.8v0.6
H10v-0.9H9.1C9,13.4,8.8,13.4,8.7,13.4z"/>
<path fill="#A7AEAE" d="M10.6,10.7h2c-0.2,0.3-0.4,0.6-0.5,0.8c-0.1,0.3-0.3,0.6-0.4,0.8c-0.1,0.3-0.2,0.6-0.2,0.9
c0,0.3-0.1,0.7-0.1,1h1c0-0.4,0-0.8,0.1-1.2c0-0.3,0.1-0.7,0.2-0.9c0.1-0.3,0.2-0.6,0.4-0.9c0.2-0.3,0.4-0.6,0.6-0.9V9.8h-3.1
V10.7z"/>
</g>
</svg>
</span>
Finished:
<abbr class="finished_at timeago" title={{lastBuildFinishedAt}}>
{{format-time repo.lastBuildFinishedAt}}