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

signin spinner, needs a better gif

Browse Source
This commit is contained in:
Sven Fuchs 2012-09-19 18:58:38 +02:00
parent d2bfd50f5a
commit 1b78187b2f
8 changed files with 142 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Gemfile.lock
View File

@ -22,7 +22,7 @@ GIT
GIT
remote: git://github.com/travis-ci/travis-api.git
revision: e5ed22843f93d26c383a92f696baf13e520e2f74
revision: 3ddb2da33b29542aa093bcf0d28b324e6b38dcd4
branch: sf-use-services
specs:
travis-api (0.0.1)

2
assets/javascripts/app/app.coffee
View File

@ -41,6 +41,7 @@ Travis.reopen
Travis.Auth.trySignIn()
signIn: ->
@set('signingIn', true)
Travis.Auth.signIn()
# TODO: this has to mov, no?
@render.apply(this, @get('returnTo') || ['home', 'index'])
@ -59,6 +60,7 @@ Travis.reopen
@store.load(Travis.User, data.user)
@store.loadMany(Travis.Account, data.accounts)
@set('currentUser', if data then Travis.User.find(data.user.id) else undefined)
@set('signingIn', false)
render: (name, action, params) ->
layout = @connectLayout(name)

35
assets/javascripts/app/templates/layouts/top.hbs
View File

@ -15,24 +15,19 @@
<li>
<a href="http://about.travis-ci.org/docs">Docs</a>
</li>
{{#if user}}
<li {{bindAttr class="view.classProfile"}}>
<a href="#" class="name">
<img {{bindAttr src="view.gravatarUrl"}}>
{{user.name}}
</a>
<ul>
<li>
<a href="/profile" class="profile" {{action route}}>{{t layouts.top.profile}}</a>
</li>
<li>
<a href="/" class="signout" {{action signOut target="Travis.app"}}>{{t layouts.top.sign_out}}</a>
</li>
</ul>
</li>
{{else}}
<li {{bindAttr class="view.classProfile"}}>
<a href="#" {{action signIn target="Travis.app"}}>{{t layouts.top.github_login}}</a>
</li>
{{/if}}
<li {{bindAttr class="view.classProfile"}}>
<p class="handle">
<a class="signed-in" href="#" class="name"><img {{bindAttr src="view.gravatarUrl"}}>{{user.name}}</a>
<a class="sign-in" href="#" {{action signIn target="Travis.app"}}>{{t layouts.top.github_login}}</a>
<span class="signing-in">Signing in</span>
</p>
<ul>
<li>
<a href="/profile" class="profile" {{action route}}>{{t layouts.top.profile}}</a>
</li>
<li>
<a href="/" class="signout" {{action signOut target="Travis.app"}}>{{t layouts.top.sign_out}}</a>
</li>
</ul>
</li>
</ul>

12
assets/javascripts/app/views/top.coffee
View File

@ -21,8 +21,16 @@ require 'travis/auth'
).property('tab')
classProfile: (->
if @get('tab') == 'profile' then 'profile active' else 'profile'
).property('tab')
classes = ['profile']
classes.push('active') if @get('tab') == 'profile'
if Travis.app.get('currentUser')
classes.push('signed-in')
else if Travis.app.get('signingIn')
classes.push('signing-in')
else
classes.push('sign-in')
classes.join(' ')
).property('tab', 'Travis.app.currentUser', 'Travis.app.signingIn')
showProfile: ->
$('#top .profile ul').show()

10
assets/javascripts/lib/travis/auth.coffee
View File

@ -34,11 +34,11 @@ $.extend Travis.Auth.prototype,
trySignIn: ->
@iframe.attr('src', "#{Travis.config.api_endpoint}/auth/post_message")
# TODO: use views
link = $("#navigation .profile")
html = link.html()
link.html("Signing in with GitHub...")
window.setTimeout((-> link.html(html)), @timeout)
# # TODO: use views
# link = $("#navigation .profile")
# html = link.html()
# link.html("Signing in with GitHub...")
# window.setTimeout((-> link.html(html)), @timeout)
newUser: ->
localStorage?.setItem("travisTrySignIn", "true")

93
assets/stylesheets/top.sass
View File

@ -17,7 +17,7 @@
ul
list-style-type: none
a
a, span
color: $color-link-top
text-decoration: none
@ -29,53 +29,72 @@
a
color: $color-link-top-highlight
a
a, span
display: block
padding: 0 15px
&:hover
color: $color-link-top-highlight
&.profile
position: relative
float: right
.profile
position: relative
float: right
width: 150px
img
position: absolute
top: 7px
left: 15px
width: 24px
height: 24px
@include border-radius(3px)
.handle
margin: 0
& > a
padding: 0 15px 0 54px
.signed-in, .signing-in, .sign-in
display: none
&.signed-in .signed-in
display: block
&.signing-in .signing-in
display: inline-block
&.sign-in .sign-in
display: block
&:hover > ul
.signed-in
padding-left: 54px
.signing-in
padding-right: 25px
background: inline-image('spinner.gif') no-repeat right 16px
img
position: absolute
top: 7px
left: 15px
width: 24px
height: 24px
@include border-radius(3px)
&.signed-in:hover > ul
display: block
ul
display: none
position: absolute
z-index: 300
top: 40px
width: 100%
background-color: $color-bg-dropdown
@include border-bottom-radius(6px)
@include single-box-shadow(rgba(black, 0.3), 2px, 2px, 10px)
li
display: block
float: left
clear: left
ul
display: none
position: absolute
z-index: 300
top: 40px
width: 100%
background-color: $color-bg-dropdown
@include border-bottom-radius(6px)
@include single-box-shadow(rgba(black, 0.3), 2px, 2px, 10px)
li:last-child a:hover
@include border-bottom-radius(4px)
li
display: block
li:last-child a:hover
@include border-bottom-radius(4px)
a
display: block
padding: 5px 0 5px 54px
line-height: 24px
white-space: nowrap
&:hover
background-color: $color-bg-dropdown-highlight
a
display: block
width: 96px
padding: 5px 0 5px 54px
line-height: 24px
white-space: nowrap
&:hover
background-color: $color-bg-dropdown-highlight
#home:not(.maximized)
#top

2
public/javascripts/application.js
View File

File diff suppressed because one or more lines are too long

75
public/stylesheets/application.css
View File

@ -6585,7 +6585,7 @@ table.list .red .number a {
list-style-type: none;
}
/* line 20, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top a {
#top a, #top span {
color: #cccccc;
text-decoration: none;
}
@ -6602,21 +6602,51 @@ table.list .red .number a {
color: white;
}
/* line 32, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top li a {
#top li a, #top li span {
display: block;
padding: 0 15px;
}
/* line 35, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top li a:hover {
#top li a:hover, #top li span:hover {
color: white;
}
/* line 38, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top li.profile {
#top .profile {
position: relative;
float: right;
width: 150px;
}
/* line 42, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top li.profile img {
/* line 43, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top .profile .handle {
margin: 0;
}
/* line 46, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top .profile .signed-in, #top .profile .signing-in, #top .profile .sign-in {
display: none;
}
/* line 48, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top .profile.signed-in .signed-in {
display: block;
}
/* line 50, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top .profile.signing-in .signing-in {
display: inline-block;
}
/* line 52, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top .profile.sign-in .sign-in {
display: block;
}
/* line 55, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top .profile .signed-in {
padding-left: 54px;
}
/* line 57, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top .profile .signing-in {
padding-right: 25px;
background: url('data:image/gif;base64,R0lGODlhEAAIAPMHAP///+vr66CgoN7e3rW1tYuLi/X19Wtra3t7e87OzsbGxqGhodfX142NjZaWlqurqyH/C05FVFNDQVBFMi4wAwEAAAAh/hoiQ3JlYXRlZCB3aXRoIENoaW1wbHkuY29tIgAh+QQACgD/ACwAAAAAEAAIAAADKXiq0P7glHmglRSMPUDgBlZUQ/B5ZhBOo2Z2qSqSL2qumaEbwK7PFkgCACH5BAAKAP8ALAAAAAAQAAgAAAQwsKCJwLkH6F2Er0dRZJvWfZaYBUNrnAKoAkEdvF6cjrSNoyGe7QaT8QxIpISyI5UiACH5BAAKAP8ALAAAAAAQAAgAAAQvcIkpALoInL0F+Y41ZUdhHh4oCqRZoB8RIqPmwirN2mcqr61ebFYrnSQUC4b3igAAIfkEAAoA/wAsAAAAABAACAAABDAQyCmqACijQpYnQEMQDWZxSgqKpFmhajiWyEmkyjq7ApzLrdqr8wHSThOKBaMpRAAAIfkEAAoA/wAsAAAAABAACAAABDMQyEmBuGKxxBl4y/IADmEKzKAmwMItpEmg6sC6CVye6dq+MV7tBtzNNp1PaGQUVJ6YTAQAIfkEAAoA/wAsAAAAABAACAAABC8QyEmrBSknQJYnxiAGgCIqnKKCQUuaA0qoCuuWZ7oa7pvPO4PQgNFwPAvCZQmIAAAh+QQACgD/ACwAAAAAEAAIAAAEKRDISau1LGlmhg+A5wGJyAUoOKADaRqpyrremYZzWRs8D/QGQGZzKQIiACH5BAAKAP8ALAAAAAAQAAgAAAMhCLrc/iyMGcCcQNLAueVD1o3eAIpk90koZ7wvABvyDEEJADs=') no-repeat right 16px;
}
/* line 61, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top .profile img {
position: absolute;
top: 7px;
left: 15px;
@ -6628,16 +6658,12 @@ table.list .red .number a {
-o-border-radius: 3px;
border-radius: 3px;
}
/* line 50, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top li.profile > a {
padding: 0 15px 0 54px;
}
/* line 53, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top li.profile:hover > ul {
/* line 69, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top .profile.signed-in:hover > ul {
display: block;
}
/* line 56, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top li.profile ul {
/* line 72, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top .profile ul {
display: none;
position: absolute;
z-index: 300;
@ -6654,12 +6680,14 @@ table.list .red .number a {
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}
/* line 66, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top li.profile ul li {
/* line 82, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top .profile ul li {
display: block;
float: left;
clear: left;
}
/* line 69, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top li.profile ul li:last-child a:hover {
/* line 87, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top .profile ul li:last-child a:hover {
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
@ -6667,19 +6695,20 @@ table.list .red .number a {
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}
/* line 72, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top li.profile ul a {
/* line 90, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top .profile ul a {
display: block;
width: 96px;
padding: 5px 0 5px 54px;
line-height: 24px;
white-space: nowrap;
}
/* line 77, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top li.profile ul a:hover {
/* line 96, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#top .profile ul a:hover {
background-color: #666666;
}
/* line 81, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
/* line 100, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
#home:not(.maximized) #top {
padding-right: 140px;
}