From 064f414da74c53aeda9ed2335ea7c33bc2f4cbd6 Mon Sep 17 00:00:00 2001 From: Lisa Passing Date: Thu, 28 May 2015 13:52:44 +0200 Subject: [PATCH] create loading-indicator component and replace all instances of the non-component --- app/components/loading-indicator.coffee | 8 +++++ app/styles/app.scss | 3 +- .../app/components/loading-indicator.sass | 33 +++++++++++++++++++ app/styles/app/components/sync-button.sass | 32 ------------------ app/styles/app/landing.sass | 4 +++ app/styles/app/layouts/profile.sass | 2 +- app/styles/app/modules/switch.sass | 3 +- app/templates/account.hbs | 6 ++-- app/templates/accounts-list/empty.hbs | 2 +- app/templates/build.hbs | 6 ++-- app/templates/builds.hbs | 4 +-- .../components/build-repo-actions.hbs | 4 +-- app/templates/components/hooks-list-item.hbs | 4 +-- app/templates/components/job-repo-actions.hbs | 4 +-- .../components/loading-indicator.hbs | 1 + app/templates/components/orgs-filter.hbs | 2 +- .../components/owner-sync-button.hbs | 2 +- app/templates/components/sync-button.hbs | 2 +- app/templates/dashboard/loading.hbs | 13 +------- app/templates/events/list.hbs | 2 +- app/templates/home.hbs | 4 +-- app/templates/job.hbs | 2 +- app/templates/jobs.hbs | 2 +- app/templates/jobs/log.hbs | 2 +- app/templates/loading.hbs | 2 +- app/templates/main/loading.hbs | 2 +- app/templates/profile/loading.hbs | 2 +- app/templates/queue.hbs | 6 ++-- app/templates/repo.hbs | 2 +- app/templates/repo/loading.hbs | 2 +- app/templates/repos-list/empty.hbs | 2 +- app/templates/repos.hbs | 4 +-- app/templates/running-jobs.hbs | 6 ++-- app/templates/settings/loading.hbs | 2 +- app/templates/top.hbs | 2 +- .../components/loading-indicator-test.coffee | 15 +++++++++ 36 files changed, 102 insertions(+), 92 deletions(-) create mode 100644 app/components/loading-indicator.coffee create mode 100644 app/styles/app/components/loading-indicator.sass create mode 100644 app/templates/components/loading-indicator.hbs create mode 100644 tests/unit/components/loading-indicator-test.coffee diff --git a/app/components/loading-indicator.coffee b/app/components/loading-indicator.coffee new file mode 100644 index 00000000..b53ac20a --- /dev/null +++ b/app/components/loading-indicator.coffee @@ -0,0 +1,8 @@ +`import Ember from 'ember'` + +LoadingIndicatorComponent = Ember.Component.extend + tagName: 'div' + classNameBindings: ['center:loading-container'] + center: false + +`export default LoadingIndicatorComponent` diff --git a/app/styles/app.scss b/app/styles/app.scss index 818f6f74..828dbaf2 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -11,7 +11,7 @@ @import "app/charm"; @import "app/forms"; @import "app/github"; -@import "app/loading"; +// @import "app/loading"; @import "app/main/annotations"; @import "app/main/list"; @@ -25,6 +25,7 @@ @import "app/components/travis-switch"; @import "app/components/sync-button"; +@import "app/components/loading-indicator"; @import "app/modules/section"; @import "app/modules/loader"; diff --git a/app/styles/app/components/loading-indicator.sass b/app/styles/app/components/loading-indicator.sass new file mode 100644 index 00000000..165035ba --- /dev/null +++ b/app/styles/app/components/loading-indicator.sass @@ -0,0 +1,33 @@ +.loading-indicator + display: inline-block + vertical-align: middle + i + position: relative + display: inline-block + width: 8px + height: 8px + background-color: #A6ADAD + border-radius: 50% + line-height: 0 + transform-origin: center center + animation: bouncedelay 1.3s infinite linear + &:nth-child(2) + animation-delay: 0.3s + &:nth-child(3) + animation-delay: 0.6s + +@keyframes bouncedelay + 0%, 80%, 100% + transform: scale(0) + 40% + transform: scale(1.0) + +.loading-container + text-align: center + padding: 1.5em 1em + + +.loading-indicator--white + @extend .loading-indicator + i + background-color: $white \ No newline at end of file diff --git a/app/styles/app/components/sync-button.sass b/app/styles/app/components/sync-button.sass index 1e43cc0e..b0eddbd9 100644 --- a/app/styles/app/components/sync-button.sass +++ b/app/styles/app/components/sync-button.sass @@ -44,35 +44,3 @@ font-size: 12px color: #848384 text-align: right - -.sync-spinner - display: inline-block - vertical-align: middle - i - position: relative - display: inline-block - width: 8px - height: 8px - background-color: $white - border-radius: 50% - line-height: 0 - transform-origin: center center - animation: bouncedelay 1.3s infinite linear - &:nth-child(2) - animation-delay: 0.3s - &:nth-child(3) - animation-delay: 0.6s - -@keyframes bouncedelay - 0%, 80%, 100% - transform: scale(0) - 40% - transform: scale(1.0) - -.sync-spinner--grey - i - background-color: #A6ADAD - -.spinner-container - text-align: center - padding: 1.5em 1em diff --git a/app/styles/app/landing.sass b/app/styles/app/landing.sass index 00e5cfeb..ce186bfd 100644 --- a/app/styles/app/landing.sass +++ b/app/styles/app/landing.sass @@ -114,6 +114,10 @@ .sign-in-mascot padding-right: 10px + .loading-indicator--white + height: 1.4em; + line-height: 1; + margin-right: 0.5em; .oss-testing background-color: #ffffff diff --git a/app/styles/app/layouts/profile.sass b/app/styles/app/layouts/profile.sass index 5890bec9..d2f94471 100644 --- a/app/styles/app/layouts/profile.sass +++ b/app/styles/app/layouts/profile.sass @@ -159,7 +159,7 @@ p.profile-user-last white-space: nowrap overflow: hidden vertical-align: middle - span:not(.sync-spinner) + span:not(.loading-indicator) display: none margin-left: 2rem font-size: $font-size-sm diff --git a/app/styles/app/modules/switch.sass b/app/styles/app/modules/switch.sass index cef71fc7..b29ca7af 100644 --- a/app/styles/app/modules/switch.sass +++ b/app/styles/app/modules/switch.sass @@ -1,6 +1,5 @@ -.profile-main - +.profile-switch $switch-height: 28px $switch-inner-height: 22px $switch-width: 62px diff --git a/app/templates/account.hbs b/app/templates/account.hbs index 45eb1c2e..e77c6caf 100644 --- a/app/templates/account.hbs +++ b/app/templates/account.hbs @@ -28,7 +28,7 @@ {{#if user.isSyncing}}
{{else}} @@ -94,7 +94,7 @@ diff --git a/app/templates/job.hbs b/app/templates/job.hbs index 31e2d6b6..81b394e8 100644 --- a/app/templates/job.hbs +++ b/app/templates/job.hbs @@ -67,6 +67,6 @@ {{else}}
- + {{loading-indicator}}
{{/if}} diff --git a/app/templates/jobs.hbs b/app/templates/jobs.hbs index d443ef2f..166d3252 100644 --- a/app/templates/jobs.hbs +++ b/app/templates/jobs.hbs @@ -75,7 +75,7 @@ {{/link-to}} {{else}} - + {{loading-indicator}} {{/if}} {{/view}} diff --git a/app/templates/jobs/log.hbs b/app/templates/jobs/log.hbs index db076dea..4ae18401 100644 --- a/app/templates/jobs/log.hbs +++ b/app/templates/jobs/log.hbs @@ -1,5 +1,5 @@ {{#if view.log.isLoaded}} {{view 'pre' job=view.job log=view.log}} {{else}} - + {{loading-indicator}} {{/if}} diff --git a/app/templates/loading.hbs b/app/templates/loading.hbs index 1034d960..18503769 100644 --- a/app/templates/loading.hbs +++ b/app/templates/loading.hbs @@ -1 +1 @@ - +{{loading-indicator}} \ No newline at end of file diff --git a/app/templates/main/loading.hbs b/app/templates/main/loading.hbs index 295518d7..18503769 100644 --- a/app/templates/main/loading.hbs +++ b/app/templates/main/loading.hbs @@ -1 +1 @@ - \ No newline at end of file +{{loading-indicator}} \ No newline at end of file diff --git a/app/templates/profile/loading.hbs b/app/templates/profile/loading.hbs index 295518d7..18503769 100644 --- a/app/templates/profile/loading.hbs +++ b/app/templates/profile/loading.hbs @@ -1 +1 @@ - \ No newline at end of file +{{loading-indicator}} \ No newline at end of file diff --git a/app/templates/queue.hbs b/app/templates/queue.hbs index e780f625..ea147397 100644 --- a/app/templates/queue.hbs +++ b/app/templates/queue.hbs @@ -22,10 +22,8 @@ {{/each}} {{else}} - +
There are no jobs queued
{{/if}} {{else}} - + {{loading-indicator center=true}} {{/if}} diff --git a/app/templates/repo.hbs b/app/templates/repo.hbs index f2f7de4b..baa24ed0 100644 --- a/app/templates/repo.hbs +++ b/app/templates/repo.hbs @@ -29,7 +29,7 @@ {{else}} - + {{loading-indicator}} {{/if}} {{/if}} diff --git a/app/templates/repo/loading.hbs b/app/templates/repo/loading.hbs index 1034d960..18503769 100644 --- a/app/templates/repo/loading.hbs +++ b/app/templates/repo/loading.hbs @@ -1 +1 @@ - +{{loading-indicator}} \ No newline at end of file diff --git a/app/templates/repos-list/empty.hbs b/app/templates/repos-list/empty.hbs index 295518d7..18503769 100644 --- a/app/templates/repos-list/empty.hbs +++ b/app/templates/repos-list/empty.hbs @@ -1 +1 @@ - \ No newline at end of file +{{loading-indicator}} \ No newline at end of file diff --git a/app/templates/repos.hbs b/app/templates/repos.hbs index 95fafe87..f69e9684 100644 --- a/app/templates/repos.hbs +++ b/app/templates/repos.hbs @@ -64,9 +64,7 @@ {{/collection}} {{else}} - + {{loading-indicator center=true}} {{/if}} {{/if}} diff --git a/app/templates/running-jobs.hbs b/app/templates/running-jobs.hbs index bb97dcfd..f4bf43f7 100644 --- a/app/templates/running-jobs.hbs +++ b/app/templates/running-jobs.hbs @@ -25,10 +25,8 @@ {{/each}} {{else}} - +
There are no jobs running
{{/if}} {{else}} - + {{loading-indicator center="true"}} {{/if}} diff --git a/app/templates/settings/loading.hbs b/app/templates/settings/loading.hbs index 295518d7..18503769 100644 --- a/app/templates/settings/loading.hbs +++ b/app/templates/settings/loading.hbs @@ -1 +1 @@ - \ No newline at end of file +{{loading-indicator}} \ No newline at end of file diff --git a/app/templates/top.hbs b/app/templates/top.hbs index 748fcbd1..5b62d817 100644 --- a/app/templates/top.hbs +++ b/app/templates/top.hbs @@ -50,7 +50,7 @@ {{#link-to "profile" class="signed-in"}}{{userName}}{{/link-to}} {{/if}} {{#if auth.signingIn}} - + {{/if}}

{{#if auth.signedIn}} diff --git a/tests/unit/components/loading-indicator-test.coffee b/tests/unit/components/loading-indicator-test.coffee new file mode 100644 index 00000000..636946c0 --- /dev/null +++ b/tests/unit/components/loading-indicator-test.coffee @@ -0,0 +1,15 @@ +`import { test, moduleForComponent } from 'ember-qunit'` + +moduleForComponent 'loading-indicator', { + # specify the other units that are required for this test + # needs: ['component:foo', 'helper:bar'] +} + +test 'it renders', (assert) -> + + component = @subject(center: true) + + @append() + + ok component.$('span').hasClass('loading-indicator'), 'component has loading indicator class' + ok component.$().hasClass('loading-container'), 'indicator gets parent class if centered flag is given'