diff --git a/app/components/jobs-item.coffee b/app/components/jobs-item.coffee index d2a60524..eb87dcfc 100644 --- a/app/components/jobs-item.coffee +++ b/app/components/jobs-item.coffee @@ -7,6 +7,15 @@ JobsItemComponent = Ember.Component.extend classNameBindings: ['job.state'] classNames: ['tile', 'tile--jobs', 'row'] + isAnimating: (-> + state = @get('job.state') + animationStates = ['received', 'queued', 'started', 'booting'] + + unless animationStates.indexOf(state) == -1 + true + + ).property('job.state') + languages: (-> output = [] diff --git a/app/styles/app/layouts/build-job.sass b/app/styles/app/layouts/build-job.sass index 3e8c6886..615196af 100644 --- a/app/styles/app/layouts/build-job.sass +++ b/app/styles/app/layouts/build-job.sass @@ -38,6 +38,9 @@ .tile-status--job width: 2em + .svg-booting + margin: 0.7em 0.3em + .jobs-item padding: .1em 0 .icon diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass index 03c63cb3..6a43244a 100644 --- a/app/styles/app/modules/icons.sass +++ b/app/styles/app/modules/icons.sass @@ -121,22 +121,19 @@ .icon--env background-image: inline-image('svg/icon-environment-dark2.svg') -.icon--cross-red, .icon--job.failed, .icon--job.rejected background-image: inline-image('svg/icon-job-failed.svg') -.icon--check-green, .icon--job.passed, .icon--job.accepted background-image: inline-image('svg/icon-job-passed.svg') -.icon--error-grey, .icon--job.errored background-image: inline-image('svg/icon-job-errored.svg') .icon--job.started, -.icon--job.created, -.icon--job.received, .icon--job.queued, -.icon--started-yellow +.icon--job.booting, +.icon--job.received, +.icon--job.created, background-image: inline-image('svg/icon-job-started.svg') .icon--job.canceled background-image: inline-image('svg/icon-job-canceled.svg') @@ -210,3 +207,29 @@ .icon-flag background-image: inline-image('svg/notice-flag.svg') + + +.icon-receiving + margin: 0.3rem 0.5rem; + display: inline-block; + i + width: 4px + height: 4px + border-radius: 50% + display: inline-block + background-color: $start-bg-color + transform-origin: center center + animation: bubbleScale 1.2s infinite linear + i:nth-of-type(2) + animation-delay: 0.35s + i:nth-of-type(3) + animation-delay: 0.7s + + +@keyframes bubbleScale + 0%, 80%, 100% + transform: scale(0) + + 40% + transform: scale(1.0) + diff --git a/app/templates/components/jobs-item.hbs b/app/templates/components/jobs-item.hbs index 093678bd..701c8d09 100644 --- a/app/templates/components/jobs-item.hbs +++ b/app/templates/components/jobs-item.hbs @@ -1,6 +1,10 @@ {{#link-to "job" repo job}}
- + {{#if isAnimating}} + + {{else}} + + {{/if}}