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/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";

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

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

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

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

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

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

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

6
app/templates/account.hbs
View File

@ -28,7 +28,7 @@
{{#if user.isSyncing}}
<div class="sync-button">
<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>
</div>
{{else}}
@ -94,7 +94,7 @@
<ul class="profile-hooklist">
{{#each hook in hooksWithoutAdmin}}
<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">
{{hook.slug}}
<span>{{hook.description}}</span>
@ -106,7 +106,7 @@
{{/if}}
{{else}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
{{loading-indicator}}
{{/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}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
{{loading-indicator}}
{{else}}
<section {{bind-attr class=":tile :tile--pass :row build.state"}}>
<div class="tile-status">
@ -81,9 +81,7 @@
{{jobs-list jobs=build.requiredJobs repo=repo required="true"}}
{{jobs-list jobs=build.allowedFailureJobs repo=repo}}
{{else}}
<div class="spinner-container">
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
</div>
{{loading-indicator center=true}}
{{/if}}
{{else}}
{{view 'log' job=build.jobs.firstObject}}

4
app/templates/builds.hbs
View File

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

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

@ -1,6 +1,6 @@
{{#if canCancel}}
{{#if cancelling}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
{{loading-indicator}}
{{else}}
<a href="#" {{action "cancel"}} class="button-circle"
title="Cancel Build">
@ -11,7 +11,7 @@
{{#if canRestart}}
{{#if restarting}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
{{loading-indicator}}
{{else}}
<a href="#" {{action "restart"}} class="button-circle" title="Restart Build">
<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"}}
{{#if hook.isSaving}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
{{loading-indicator}}
{{else}}
{{#link-to "settings" hook.ownerName hook.name class="profile-settings" title="Repository settings"}}<span class="icon icon--cog"></span>{{/link-to}}
{{/if}}

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

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

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

@ -2,7 +2,7 @@
{{#if owner.isSyncing }}
<p>
<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>
</p>
{{else}}

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

@ -1,7 +1,7 @@
<div class="sync-button">
{{#if user.isSyncing }}
<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>
{{else}}
<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">
<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>
{{loading-indicator center=true}}

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

@ -29,6 +29,6 @@
</tbody>
</table>
{{else}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
{{loading-indicator}}
{{/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>
{{/if}}
{{#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}}
</div>
@ -81,7 +81,7 @@
</div>
</li>
{{else}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
{{loading-indicator}}
{{/each}}
</ul>
</div>

2
app/templates/job.hbs
View File

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

2
app/templates/jobs.hbs
View File

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

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

@ -1,5 +1,5 @@
{{#if view.log.isLoaded}}
{{view 'pre' job=view.job log=view.log}}
{{else}}
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
{{loading-indicator}}
{{/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}}
{{else}}
<div class="spinner-container">There are no jobs queued</div>
<div class="loading-container">There are no jobs queued</div>
{{/if}}
{{else}}
<div class="spinner-container">
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
</div>
{{loading-indicator center=true}}
{{/if}}

2
app/templates/repo.hbs
View File

@ -29,7 +29,7 @@
</article>
{{else}}
<span class="sync-spinner"><i></i><i></i><i></i></span>
{{loading-indicator}}
{{/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}}
{{else}}
<div class="spinner-container">
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
</div>
{{loading-indicator center=true}}
{{/if}}
</div>
{{/if}}

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

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