Make action links actual icons.

This change pushes the cog menu to the top, where it belongs, as it
now only includes repository-relevant actions. The icons now reflect
things relating to the build/job itself, and have replace the cog
meny.

assets/scripts/app/templates/builds/show.hbs

@@ -42,7 +42,6 @@
           <dd class="committer"><a {{bindAttr href="controller.urlCommitter"}}>{{commit.committerName}}</a></dd>
         {{/if}}
       </div>
-      {{view Travis.RepoActionsView}}
     {{/with}}
 
     

assets/scripts/app/templates/jobs/show.hbs

@@ -41,7 +41,6 @@
             <dd class="committer"><a {{bindAttr href="controller.urlCommitter"}}>{{commit.committerName}}</a></dd>
           {{/if}}
         </div>
-        {{view Travis.RepoActionsView}}
       {{/with}}
       <dt>{{t jobs.message}}</dt>
       <dd class="message">{{formatMessage job.commit.message repoBinding=job.repo}}</dd>

assets/scripts/app/templates/repos/show.hbs

@@ -7,12 +7,13 @@
         <div id="repo-header">
           <h3>{{#linkTo "repo" this}}{{slug}}{{/linkTo}}</h3>
           <div class="github-icon"><a {{bindAttr href="controller.urlGithub"}}><img src="/images/icons/github.png" width="21" height="21"/></a></div>
+          {{view Travis.RepoShowToolsView}}
         </div>
 
         <p class="description">{{description}}</p>
 
         {{view Travis.RepoShowTabsView}}
-        {{view Travis.RepoShowToolsView}}
+        {{view Travis.RepoActionsView}}
       {{/with}}
 
       <div class="tab">

assets/scripts/app/templates/repos/show/actions.hbs

@@ -1,37 +1,42 @@
 <div id="actions">
   <ul>
-    <li>
-      <a href="#" name="status-images" class="open-popup" {{action "statusImages" target="view"}}>Status Images</a>
+    {{#if view.displayStatusImages}}
+    <li id="status-image-popup">
+      <a href="#" name="status-images" class="open-popup" {{action "statusImages" target="view"}} style="margin-top: 0px;">
+        <img {{bindAttr src="view.statusImageUrl"}} title="Build Status Images"/>
+      </a>
     </li>
+    {{/if}}
     {{#if view.displayCancelBuild}}
-      <li>
+      <li class="icon">
         <a href="#" {{action "cancelBuild" target="view"}}
-          {{bindAttr class="view.canCancelBuild::disabled"}}>Cancel Build</a>
+          {{bindAttr class="view.canCancelBuild::disabled"}}><img class="icon" src="/images/icons/off.png" width="20" title="Cancel Build"></a>
       </li>
     {{/if}}
     {{#if view.displayCancelJob}}
-      <li>
+      <li class="icon">
         <a href="#" {{action "cancelJob" target="view"}}
-          {{bindAttr class="view.canCancelJob::disabled"}}>Cancel Job</a>
+          {{bindAttr class="view.canCancelJob::disabled"}}><img class="icon" width="20" src="/images/icons/off.png" title="Cancel Job"/></a>
       </li>
     {{/if}}
     {{#if view.displayRequeueBuild}}
-      <li>
+      <li class="icon">
         <a href="#" {{action "requeueBuild" target="view"}}
-          {{bindAttr class="view.canRequeueBuild::disabled"}}>Restart Build</a>
+          {{bindAttr class="view.canRequeueBuild::disabled"}}><img class="icon" src="/images/icons/repeat.png" width="20"
+          title="Restart Build"></a>
       </li>
     {{/if}}
     {{#if view.displayRequeueJob}}
-      <li>
+      <li class="icon">
         <a href="#" {{action "requeueJob" target="view"}}
-          {{bindAttr class="view.canRequeueJob::disabled"}}>Restart Job</a>
+          {{bindAttr class="view.canRequeueJob::disabled"}}><img src="/images/icons/repeat.png" width="20" title="Restart Job"></a>
       </li>
     {{/if}}
     {{!TODO: for some reason showDownloadLog, which just delegates to jobIdForLog
              does not refresh 'if' properly, need further investigation}}
     {{#if view.jobIdForLog}}
-      <li>
-        <a class="download-log" {{bindAttr href="view.plainTextLogUrl"}}>Download Log</a>
+      <li class="icon">
+        <a class="download-log" {{bindAttr href="view.plainTextLogUrl"}}><img class="icon" src="/images/icons/align-justify.png" width="20" title="Download Log"/></a>
       </li>
     {{/if}}
   </ul>

assets/scripts/app/templates/repos/show/tools.hbs

@@ -1,5 +1,6 @@
 <div id="tools">
-  <a href="#" {{action "menu" target="view"}}></a>
+  <a href="#" {{action "menu" target="view"}} class="menu-popup-button"></a>
+
   <ul class="menu">
    {{#if view.displayRegenerateKey}}
       <li>
@@ -11,6 +12,7 @@
       </li>
     {{/if}}
   </ul>
+
 </div>
 
 <div id="regenerate-key" class="popup">

assets/scripts/app/views/repo/show.coffee

@@ -118,9 +118,18 @@ Travis.reopen
     repoBinding: 'controller.repo'
     buildBinding: 'controller.build'
     jobBinding: 'controller.job'
-    tabBinding: 'controller.controllers.repo.tab'
+    tabBinding: 'controller.tab'
+    slugBinding: 'controller.repo.slug'
     currentUserBinding: 'controller.currentUser'
 
+    statusImageUrl: (->
+      "/#{@get('slug')}.png"
+    ).property('slug')
+
+    displayStatusImages: (->
+      @get('hasPermission')
+    ).property('hasPermission')
+
     requeue: ->
       @get('build').requeue()
 
@@ -150,13 +159,6 @@ Travis.reopen
           else
             Travis.flash(error: 'An error occured when canceling the job')
 
-    statusImages: ->
-      @popupCloseAll()
-      view = Travis.StatusImagesView.create(toolsView: this)
-      Travis.View.currentPopupView = view
-      view.appendTo($('body'))
-      event.stopPropagation()
-
     hasPermission: (->
       if permissions = @get('currentUser.permissions')
         permissions.contains parseInt(@get('repo.id'))
@@ -223,3 +225,12 @@ Travis.reopen
     requeueJob: ->
       if @get('canRequeueJob')
         @get('job').requeue()
+
+    statusImages: ->
+      @popupCloseAll()
+      view = Travis.StatusImagesView.create(toolsView: this)
+      Travis.View.currentPopupView = view
+      view.appendTo($('body'))
+      event.stopPropagation()
+
+

assets/styles/layout.sass

@@ -55,7 +55,7 @@ html, body
   -moz-box-flex: 4
   -webkit-box-flex: 4
   position: relative
-  min-width: 630px
+  min-width: 760px
   padding: 20px 40px 80px 30px
 
 #right

assets/styles/main/tools.sass

@@ -4,13 +4,16 @@
   position: relative
   float: right
   top: 2px
-  & > a
+  width: 200px
+
+  & > a.menu-popup-button
     display: block
     width: 39px
     height: 21px
     margin-top: -27px
     background: inline-image('ui/tools-button.png') no-repeat
     cursor: pointer
+    float: right
 
   .menu
     display: none
@@ -37,8 +40,50 @@
   float: right
   text-align: right
 
-  a
-    &.disabled
-      cursor: default
-      color: $color-link-disabled
-      text-decoration: none
+  li#status-image-popup
+    opacity: 0.5
+    &:hover
+      opacity: 1.0
+
+  li.icon
+    a
+      -webkit-border-radius: .5em
+      -moz-border-radius: .5em
+      border-radius: .5em
+      -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2)
+      -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2)
+      box-shadow: 0 1px 2px rgba(0,0,0,0.2)
+      display: inline-block
+      width: 22px
+      height: 20px
+      position: relative
+      top: -2px
+      cursor: pointer
+      color: #fef4e9
+      border: solid 1px #afafaf
+      background: #eee
+      background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee))
+      background: -moz-linear-gradient(top,  #fff,  #eee)
+      filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20')
+      text-align: center
+      margin-left: 5px
+
+      img
+        width: 15px
+        height: 15px
+        margin-top: 3px
+        margin-left: 0px
+      
+      &:hover
+        opacity: 1.0
+
+      &.disabled
+        opacity: 0.6
+        display: none
+        visibility: hidden
+
+  ul
+    margin-top: -27px
+
+    li
+      display: inline