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

create loading-indicator component and replace all instances of the non-component

Browse Source
This commit is contained in:
Lisa Passing 2015-05-28 13:52:44 +02:00
parent 1b1dbe3d15
commit 064f414da7
36 changed files with 102 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/loading-indicator.coffee Normal file
View File

@ -0,0 +1,8 @@
`import Ember from 'ember'`
LoadingIndicatorComponent = Ember.Component.extend
tagName: 'div'
classNameBindings: ['center:loading-container']
center: false
`export default LoadingIndicatorComponent`

3
app/styles/app.scss
View File

@ -11,7 +11,7 @@
@import "app/charm"; @import "app/charm";
@import "app/forms"; @import "app/forms";
@import "app/github"; @import "app/github";
@import "app/loading"; // @import "app/loading";
@import "app/main/annotations"; @import "app/main/annotations";
@import "app/main/list"; @import "app/main/list";
@ -25,6 +25,7 @@
@import "app/components/travis-switch"; @import "app/components/travis-switch";
@import "app/components/sync-button"; @import "app/components/sync-button";
@import "app/components/loading-indicator";
@import "app/modules/section"; @import "app/modules/section";
@import "app/modules/loader"; @import "app/modules/loader";

33
app/styles/app/components/loading-indicator.sass Normal file
View File

@ -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

32
app/styles/app/components/sync-button.sass
View File

@ -44,35 +44,3 @@
font-size: 12px font-size: 12px
color: #848384 color: #848384
text-align: right 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

4
app/styles/app/landing.sass
View File

@ -114,6 +114,10 @@
.sign-in-mascot .sign-in-mascot
padding-right: 10px padding-right: 10px
.loading-indicator--white
height: 1.4em;
line-height: 1;
margin-right: 0.5em;
.oss-testing .oss-testing
background-color: #ffffff background-color: #ffffff

2
app/styles/app/layouts/profile.sass
View File

@ -159,7 +159,7 @@ p.profile-user-last
white-space: nowrap white-space: nowrap
overflow: hidden overflow: hidden
vertical-align: middle vertical-align: middle
span:not(.sync-spinner) span:not(.loading-indicator)
display: none display: none
margin-left: 2rem margin-left: 2rem
font-size: $font-size-sm font-size: $font-size-sm

3
app/styles/app/modules/switch.sass
View File

@ -1,6 +1,5 @@
.profile-main .profile-switch
$switch-height: 28px $switch-height: 28px
$switch-inner-height: 22px $switch-inner-height: 22px
$switch-width: 62px $switch-width: 62px

6
app/templates/account.hbs
View File

@ -28,7 +28,7 @@
{{#if user.isSyncing}} {{#if user.isSyncing}}
<div class="sync-button"> <div class="sync-button">
<button class="button is-syncing"> <button class="button is-syncing">
<span class="sync-spinner"><i></i><i></i><i></i></span>Syncing from GitHub <span class="loading-indicator--white"><i></i><i></i><i></i></span>Syncing from GitHub
</button> </button>
</div> </div>
{{else}} {{else}}
@ -94,7 +94,7 @@
<ul class="profile-hooklist"> <ul class="profile-hooklist">
{{#each hook in hooksWithoutAdmin}} {{#each hook in hooksWithoutAdmin}}
<li {{bind-attr class="hook.active:active :row"}}> <li {{bind-attr class="hook.active:active :row"}}>
<button class="switch disabled"></button> <button class="profile-switch disabled"></button>
<a {{bind-attr href="hook.urlGithub"}} rel="nofollow" class="profile-repo"> <a {{bind-attr href="hook.urlGithub"}} rel="nofollow" class="profile-repo">
{{hook.slug}} {{hook.slug}}
<span>{{hook.description}}</span> <span>{{hook.description}}</span>
@ -106,7 +106,7 @@
{{/if}} {{/if}}
{{else}} {{else}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span> {{loading-indicator}}
{{/if}} {{/if}}

2
app/templates/accounts-list/empty.hbs
View File

@ -1 +1 @@
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span> {{loading-indicator}}

6
app/templates/build.hbs
View File

@ -1,5 +1,5 @@
{{#if loading}} {{#if loading}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span> {{loading-indicator}}
{{else}} {{else}}
<section {{bind-attr class=":tile :tile--pass :row build.state"}}> <section {{bind-attr class=":tile :tile--pass :row build.state"}}>
<div class="tile-status"> <div class="tile-status">
@ -81,9 +81,7 @@
{{jobs-list jobs=build.requiredJobs repo=repo required="true"}} {{jobs-list jobs=build.requiredJobs repo=repo required="true"}}
{{jobs-list jobs=build.allowedFailureJobs repo=repo}} {{jobs-list jobs=build.allowedFailureJobs repo=repo}}
{{else}} {{else}}
<div class="spinner-container"> {{loading-indicator center=true}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
</div>
{{/if}} {{/if}}
{{else}} {{else}}
{{view 'log' job=build.jobs.firstObject}} {{view 'log' job=build.jobs.firstObject}}

4
app/templates/builds.hbs
View File

@ -56,10 +56,10 @@
<p> <p>
{{view 'show-more-button'}} {{view 'show-more-button'}}
{{#if isLoading}} {{#if isLoading}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span> {{loading-indicator}}
{{/if}} {{/if}}
</p> </p>
{{/if}} {{/if}}
{{else}} {{else}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span> {{loading-indicator}}
{{/if}} {{/if}}

4
app/templates/components/build-repo-actions.hbs
View File

@ -1,6 +1,6 @@
{{#if canCancel}} {{#if canCancel}}
{{#if cancelling}} {{#if cancelling}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span> {{loading-indicator}}
{{else}} {{else}}
<a href="#" {{action "cancel"}} class="button-circle" <a href="#" {{action "cancel"}} class="button-circle"
title="Cancel Build"> title="Cancel Build">
@ -11,7 +11,7 @@
{{#if canRestart}} {{#if canRestart}}
{{#if restarting}} {{#if restarting}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span> {{loading-indicator}}
{{else}} {{else}}
<a href="#" {{action "restart"}} class="button-circle" title="Restart Build"> <a href="#" {{action "restart"}} class="button-circle" title="Restart Build">
<span class="icon icon--trigger"></span> <span class="icon icon--trigger"></span>

4
app/templates/components/hooks-list-item.hbs
View File

@ -1,7 +1,7 @@
<div class="profile-hooks columns"> <div class="profile-hooks profile-switch columns">
{{hook-switch hook=hook onToggleError="handleToggleError" onToggle="resetErrors"}} {{hook-switch hook=hook onToggleError="handleToggleError" onToggle="resetErrors"}}
{{#if hook.isSaving}} {{#if hook.isSaving}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span> {{loading-indicator}}
{{else}} {{else}}
{{#link-to "settings" hook.ownerName hook.name class="profile-settings" title="Repository settings"}}<span class="icon icon--cog"></span>{{/link-to}} {{#link-to "settings" hook.ownerName hook.name class="profile-settings" title="Repository settings"}}<span class="icon icon--cog"></span>{{/link-to}}
{{/if}} {{/if}}

4
app/templates/components/job-repo-actions.hbs
View File

@ -1,6 +1,6 @@
{{#if canCancel}} {{#if canCancel}}
{{#if cancelling}} {{#if cancelling}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span> {{loading-indicator}}
{{else}} {{else}}
<a href="#" {{action "cancel"}} class="button-circle" title="Cancel Job"> <a href="#" {{action "cancel"}} class="button-circle" title="Cancel Job">
<span class="icon icon--cancel"></span> <span class="icon icon--cancel"></span>
@ -10,7 +10,7 @@
{{#if canRestart}} {{#if canRestart}}
{{#if restarting}} {{#if restarting}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span> {{loading-indicator}}
{{else}} {{else}}
<a href="#" {{action "restart"}} class="button-circle" title="Restart Job"> <a href="#" {{action "restart"}} class="button-circle" title="Restart Job">
<span class="icon icon--trigger"></span> <span class="icon icon--trigger"></span>

1
app/templates/components/loading-indicator.hbs Normal file
View File

@ -0,0 +1 @@
<span class="loading-indicator"><i></i><i></i><i></i></span>

2
app/templates/components/orgs-filter.hbs
View File

@ -1,7 +1,7 @@
<div class="filter filter--org"> <div class="filter filter--org">
<div class="filter-current"> <div class="filter-current">
{{#if orgs.isLoading}} {{#if orgs.isLoading}}
<span class="loading"></span> {{loading-indicator}}
{{else}} {{else}}
<a href="" title=""> <a href="" title="">
{{#if selected }} {{#if selected }}

2
app/templates/components/owner-sync-button.hbs
View File

@ -2,7 +2,7 @@
{{#if owner.isSyncing }} {{#if owner.isSyncing }}
<p> <p>
<button class="button" disabled="disabled"> <button class="button" disabled="disabled">
<span class="sync-spinner"><i></i><i></i><i></i></span>Syncing <span class="lading-indicator--white"><i></i><i></i><i></i></span>Syncing
</button> </button>
</p> </p>
{{else}} {{else}}

2
app/templates/components/sync-button.hbs
View File

@ -1,7 +1,7 @@
<div class="sync-button"> <div class="sync-button">
{{#if user.isSyncing }} {{#if user.isSyncing }}
<button class="button is-syncing"> <button class="button is-syncing">
<span class="sync-spinner"><i></i><i></i><i></i></span>Syncing from GitHub <span class="loading-indicator--white"><i></i><i></i><i></i></span>Syncing from GitHub
</button> </button>
{{else}} {{else}}
<p class="sync-last">last synced {{format-time user.syncedAt}}</p> <p class="sync-last">last synced {{format-time user.syncedAt}}</p>

13
app/templates/dashboard/loading.hbs
View File

@ -1,12 +1 @@
<div class="row"> {{loading-indicator center=true}}
<div class="small-centered columns" id="loader-container-large">
<div class="loader-large">
<div class="load-circle1"></div>
<div class="load-circle2"></div>
</div>
{{!-- <div class="load-text">
<p>Hold tight.<br>
We're consulting the internet.</p>
</div> --}}
</div>
</div>

2
app/templates/events/list.hbs
View File

@ -29,6 +29,6 @@
</tbody> </tbody>
</table> </table>
{{else}} {{else}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span> {{loading-indicator}}
{{/if}} {{/if}}

4
app/templates/home.hbs
View File

@ -9,7 +9,7 @@
<button {{action "signIn" target="auth"}} class="button"><img src="../images/landing-page/sign-in-mascot.svg" class="sign-in-mascot">Sign Up</button> <button {{action "signIn" target="auth"}} class="button"><img src="../images/landing-page/sign-in-mascot.svg" class="sign-in-mascot">Sign Up</button>
{{/if}} {{/if}}
{{#if auth.signingIn}} {{#if auth.signingIn}}
<button class="button"><span class="sync-spinner"><i></i><i></i><i></i></span>Signing In</button> <button class="button"><span class="loading-indicator--white"><i></i><i></i><i></i></span>Signing In</button>
{{/if}} {{/if}}
</div> </div>
@ -81,7 +81,7 @@
</div> </div>
</li> </li>
{{else}} {{else}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span> {{loading-indicator}}
{{/each}} {{/each}}
</ul> </ul>
</div> </div>

2
app/templates/job.hbs
View File

@ -67,6 +67,6 @@
{{else}} {{else}}
<div id="job"> <div id="job">
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span> {{loading-indicator}}
</div> </div>
{{/if}} {{/if}}

2
app/templates/jobs.hbs
View File

@ -75,7 +75,7 @@
{{/link-to}} {{/link-to}}
{{else}} {{else}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span> {{loading-indicator}}
{{/if}} {{/if}}
</div> </div>
{{/view}} {{/view}}

2
app/templates/jobs/log.hbs
View File

@ -1,5 +1,5 @@
{{#if view.log.isLoaded}} {{#if view.log.isLoaded}}
{{view 'pre' job=view.job log=view.log}} {{view 'pre' job=view.job log=view.log}}
{{else}} {{else}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span> {{loading-indicator}}
{{/if}} {{/if}}

2
app/templates/loading.hbs
View File

@ -1 +1 @@
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span> {{loading-indicator}}

2
app/templates/main/loading.hbs
View File

@ -1 +1 @@
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span> {{loading-indicator}}

2
app/templates/profile/loading.hbs
View File

@ -1 +1 @@
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span> {{loading-indicator}}

6
app/templates/queue.hbs
View File

@ -22,10 +22,8 @@
{{/each}} {{/each}}
{{else}} {{else}}
<div class="spinner-container">There are no jobs queued</div> <div class="loading-container">There are no jobs queued</div>
{{/if}} {{/if}}
{{else}} {{else}}
<div class="spinner-container"> {{loading-indicator center=true}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
</div>
{{/if}} {{/if}}

2
app/templates/repo.hbs
View File

@ -29,7 +29,7 @@
</article> </article>
{{else}} {{else}}
<span class="sync-spinner"><i></i><i></i><i></i></span> {{loading-indicator}}
{{/if}} {{/if}}
{{/if}} {{/if}}

2
app/templates/repo/loading.hbs
View File

@ -1 +1 @@
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span> {{loading-indicator}}

2
app/templates/repos-list/empty.hbs
View File

@ -1 +1 @@
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span> {{loading-indicator}}

4
app/templates/repos.hbs
View File

@ -64,9 +64,7 @@
{{/collection}} {{/collection}}
{{else}} {{else}}
<div class="spinner-container"> {{loading-indicator center=true}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
</div>
{{/if}} {{/if}}
</div> </div>
{{/if}} {{/if}}

6
app/templates/running-jobs.hbs
View File

@ -25,10 +25,8 @@
</div> </div>
{{/each}} {{/each}}
{{else}} {{else}}
<div class="spinner-container">There are no jobs running</div> <div class="loading-container">There are no jobs running</div>
{{/if}} {{/if}}
{{else}} {{else}}
<div class="spinner-container"> {{loading-indicator center="true"}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
</div>
{{/if}} {{/if}}

2
app/templates/settings/loading.hbs
View File

@ -1 +1 @@
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span> {{loading-indicator}}

2
app/templates/top.hbs
View File

@ -50,7 +50,7 @@
{{#link-to "profile" class="signed-in"}}{{userName}}<img {{bind-attr src="gravatarUrl"}}/>{{/link-to}} {{#link-to "profile" class="signed-in"}}{{userName}}<img {{bind-attr src="gravatarUrl"}}/>{{/link-to}}
{{/if}} {{/if}}
{{#if auth.signingIn}} {{#if auth.signingIn}}
<button class="signing-in button--signingin">Signing In <span class="sync-spinner"><i></i><i></i><i></i></span></button> <button class="signing-in button--signingin">Signing In <span class="loading-indicator--white"><i></i><i></i><i></i></span></button>
{{/if}} {{/if}}
</p> </p>
{{#if auth.signedIn}} {{#if auth.signedIn}}

15
tests/unit/components/loading-indicator-test.coffee Normal file
View File

@ -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'