From dd319b343eec8777d532241864540e113d5b0acd Mon Sep 17 00:00:00 2001 From: Lisa Passing Date: Fri, 17 Jul 2015 17:58:27 +0200 Subject: [PATCH 1/3] add svg animation of received state --- app/components/jobs-item.coffee | 5 +++++ app/styles/app.scss | 2 ++ app/styles/app/animations/booting-state.sass | 18 ++++++++++++++++++ app/styles/app/layouts/build-job.sass | 3 +++ app/styles/app/modules/icons.sass | 1 - app/templates/components/jobs-item.hbs | 12 +++++++++++- 6 files changed, 39 insertions(+), 2 deletions(-) create mode 100644 app/styles/app/animations/booting-state.sass diff --git a/app/components/jobs-item.coffee b/app/components/jobs-item.coffee index d2a60524..249ddab1 100644 --- a/app/components/jobs-item.coffee +++ b/app/components/jobs-item.coffee @@ -7,6 +7,11 @@ JobsItemComponent = Ember.Component.extend classNameBindings: ['job.state'] classNames: ['tile', 'tile--jobs', 'row'] + isBooting: (-> + if @get('job.state') == 'received' + return true + ).property('job.state') + languages: (-> output = [] diff --git a/app/styles/app.scss b/app/styles/app.scss index f0f266bc..8d65e9c2 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -25,6 +25,8 @@ @import "app/components/sync-button"; @import "app/components/loading-indicator"; +@import "app/animations/booting-state"; + @import "app/modules/section"; @import "app/modules/loader"; @import "app/modules/tiles"; diff --git a/app/styles/app/animations/booting-state.sass b/app/styles/app/animations/booting-state.sass new file mode 100644 index 00000000..6c68fb80 --- /dev/null +++ b/app/styles/app/animations/booting-state.sass @@ -0,0 +1,18 @@ +.svg-booting + .bubble + transform-origin: center center + animation: bubbleScale 1.2s infinite linear + + .bubble:nth-of-type(2) + animation-delay: 0.35s + + .bubble: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/styles/app/layouts/build-job.sass b/app/styles/app/layouts/build-job.sass index 3926191f..9006b152 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 ec27b927..89a0b4cf 100644 --- a/app/styles/app/modules/icons.sass +++ b/app/styles/app/modules/icons.sass @@ -134,7 +134,6 @@ background-image: inline-image('svg/icon-job-errored.svg') .icon--job.started, .icon--job.created, -.icon--job.received, .icon--job.queued, .icon--started-yellow background-image: inline-image('svg/icon-job-started.svg') diff --git a/app/templates/components/jobs-item.hbs b/app/templates/components/jobs-item.hbs index 093678bd..a7a4a676 100644 --- a/app/templates/components/jobs-item.hbs +++ b/app/templates/components/jobs-item.hbs @@ -1,6 +1,16 @@ {{#link-to "job" repo job}}
- + {{#if isBooting}} + + + + + + + + {{else}} + + {{/if}}

From e2be355054fd0d8c1292f828013439dba3e9106b Mon Sep 17 00:00:00 2001 From: Lisa Passing Date: Fri, 17 Jul 2015 18:26:34 +0200 Subject: [PATCH 2/3] change states that animate --- app/components/jobs-item.coffee | 10 +++++++--- app/styles/app/modules/icons.sass | 8 +------- app/templates/components/jobs-item.hbs | 2 +- 3 files changed, 9 insertions(+), 11 deletions(-) diff --git a/app/components/jobs-item.coffee b/app/components/jobs-item.coffee index 249ddab1..eb87dcfc 100644 --- a/app/components/jobs-item.coffee +++ b/app/components/jobs-item.coffee @@ -7,9 +7,13 @@ JobsItemComponent = Ember.Component.extend classNameBindings: ['job.state'] classNames: ['tile', 'tile--jobs', 'row'] - isBooting: (-> - if @get('job.state') == 'received' - return true + isAnimating: (-> + state = @get('job.state') + animationStates = ['received', 'queued', 'started', 'booting'] + + unless animationStates.indexOf(state) == -1 + true + ).property('job.state') languages: (-> diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass index 89a0b4cf..64d3a814 100644 --- a/app/styles/app/modules/icons.sass +++ b/app/styles/app/modules/icons.sass @@ -121,21 +121,15 @@ .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.queued, -.icon--started-yellow +.icon--job.created background-image: inline-image('svg/icon-job-started.svg') .icon--job.canceled background-image: inline-image('svg/icon-job-canceled.svg') diff --git a/app/templates/components/jobs-item.hbs b/app/templates/components/jobs-item.hbs index a7a4a676..44cd01ad 100644 --- a/app/templates/components/jobs-item.hbs +++ b/app/templates/components/jobs-item.hbs @@ -1,6 +1,6 @@ {{#link-to "job" repo job}}

- {{#if isBooting}} + {{#if isAnimating}} From 63d8db46921c22439b02f8310d5785e7c3c05f3b Mon Sep 17 00:00:00 2001 From: Lisa Passing Date: Thu, 23 Jul 2015 17:35:58 +0200 Subject: [PATCH 3/3] switch from svg to css animation --- app/styles/app.scss | 2 -- app/styles/app/animations/booting-state.sass | 18 ----------- app/styles/app/modules/icons.sass | 32 +++++++++++++++++++- app/templates/components/jobs-item.hbs | 8 +---- 4 files changed, 32 insertions(+), 28 deletions(-) delete mode 100644 app/styles/app/animations/booting-state.sass diff --git a/app/styles/app.scss b/app/styles/app.scss index 9542c65b..21280bee 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -26,8 +26,6 @@ @import "app/components/sync-button"; @import "app/components/loading-indicator"; -@import "app/animations/booting-state"; - @import "app/modules/section"; @import "app/modules/loader"; @import "app/modules/tiles"; diff --git a/app/styles/app/animations/booting-state.sass b/app/styles/app/animations/booting-state.sass deleted file mode 100644 index 6c68fb80..00000000 --- a/app/styles/app/animations/booting-state.sass +++ /dev/null @@ -1,18 +0,0 @@ -.svg-booting - .bubble - transform-origin: center center - animation: bubbleScale 1.2s infinite linear - - .bubble:nth-of-type(2) - animation-delay: 0.35s - - .bubble: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/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass index 87308f68..6a43244a 100644 --- a/app/styles/app/modules/icons.sass +++ b/app/styles/app/modules/icons.sass @@ -129,7 +129,11 @@ background-image: inline-image('svg/icon-job-passed.svg') .icon--job.errored background-image: inline-image('svg/icon-job-errored.svg') -.icon--job.created +.icon--job.started, +.icon--job.queued, +.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') @@ -203,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 44cd01ad..701c8d09 100644 --- a/app/templates/components/jobs-item.hbs +++ b/app/templates/components/jobs-item.hbs @@ -1,13 +1,7 @@ {{#link-to "job" repo job}}
{{#if isAnimating}} - - - - - - - + {{else}} {{/if}}