signin spinner, needs a better gif

Gemfile.lock

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

assets/javascripts/app/app.coffee

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

assets/javascripts/app/templates/layouts/top.hbs

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

assets/javascripts/app/views/top.coffee

@@ -21,8 +21,16 @@ require 'travis/auth'
     ).property('tab')
 
     classProfile: (->
-      if @get('tab') == 'profile' then 'profile active' else 'profile'
+      classes = ['profile']
-    ).property('tab')
+      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()

assets/javascripts/lib/travis/auth.coffee

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

assets/stylesheets/top.sass

@@ -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
+  .profile
-      position: relative
+    position: relative
-      float: right
+    float: right
+    width: 150px
 
-      img
+    .handle
-        position: absolute
+      margin: 0
-        top: 7px
-        left: 15px
-        width: 24px
-        height: 24px
-        @include border-radius(3px)
 
-      & > a
+    .signed-in, .signing-in, .sign-in
-        padding: 0 15px 0 54px
+      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
+      li:last-child a:hover
-        display: none
+        @include border-bottom-radius(4px)
-        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
+      a
-          display: block
+        display: block
-
+        width: 96px
-        li:last-child a:hover
+        padding: 5px 0 5px 54px
-          @include border-bottom-radius(4px)
+        line-height: 24px
-
+        white-space: nowrap
-        a
+        &:hover
-          display: block
+          background-color: $color-bg-dropdown-highlight
-          padding: 5px 0 5px 54px
-          line-height: 24px
-          white-space: nowrap
-          &:hover
-            background-color: $color-bg-dropdown-highlight
 
 #home:not(.maximized)
   #top

public/stylesheets/application.css

@@ -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 */
+/* line 43, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
-#top li.profile img {
+#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 */
+/* line 69, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
-#top li.profile > a {
+#top .profile.signed-in:hover > ul {
-  padding: 0 15px 0 54px;
-}
-/* line 53, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
-#top li.profile:hover > ul {
   display: block;
 }
-/* line 56, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
+/* line 72, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
-#top li.profile ul {
+#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 */
+/* line 82, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
-#top li.profile ul li {
+#top .profile ul li {
   display: block;
+  float: left;
+  clear: left;
 }
-/* line 69, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
+/* line 87, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
-#top li.profile ul li:last-child a:hover {
+#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 */
+/* line 90, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
-#top li.profile ul a {
+#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 */
+/* line 96, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/top.sass */
-#top li.profile ul a:hover {
+#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;
 }