Trim status image modal.

Closes https://github.com/travis-ci/travis-ci/issues/1900

assets/scripts/app/helpers.coffee

@@ -1,3 +1,4 @@
 require 'helpers/handlebars'
 require 'helpers/helpers'
 require 'helpers/urls'
+require 'helpers/status_image_formatter'

assets/scripts/app/helpers/status_image_formatter.coffee

@@ -0,0 +1,50 @@
+@Travis.StatusImageFormatter =
+  slug: null
+  url: null
+  branch: null
+
+  format: (version, slug, branch) ->
+    @slug = slug
+    @branch = branch
+    @url = @urlRepo()
+
+    switch version
+      when 'Image URL' then @statusImageUrl()
+      when 'Markdown' then @markdownStatusImage()
+      when 'Textile' then @textileStatusImage()
+      when 'RDOC' then @rdocStatusImage()
+      when 'AsciiDoc' then @asciidocStatusImage()
+      when 'Rst' then @rstStatusImage()
+      when 'POD' then @podStatusImage()
+
+  urlRepo: (->
+    "https://#{location.host}/#{@slug}"
+  )
+
+  statusImageUrl: (->
+    Travis.Urls.statusImage(@slug, @branch)
+  )
+
+  markdownStatusImage: (->
+    "[![Build Status](#{@statusImageUrl()})](#{@url})"
+  )
+
+  textileStatusImage: (->
+    "!#{@statusImageUrl()}!:#{@url}"
+  )
+
+  rdocStatusImage: (->
+    "{<img src=\"#{@statusImageUrl()}\" alt=\"Build Status\" />}[#{@url}]"
+  )
+
+  asciidocStatusImage: (->
+    "image:#{@statusImageUrl()}[\"Build Status\", link=\"#{@url}\"]"
+  )
+
+  rstStatusImage: (->
+    ".. image:: #{@statusImageUrl()}\n    :target: #{@url}"
+  )
+
+  podStatusImage: (->
+    "=for HTML <a href=\"#{@url}\"><img src=\"#{@statusImageUrl()}\"></a>"
+  )

assets/scripts/app/templates/status_images.hbs

@@ -7,31 +7,8 @@
     <span class="loading"></span>
   {{/if}}
 </p>
+
 <p>
-  <label>Image URL:</label>
-  <input type="text" class="url" {{bind-attr value="view.statusImageUrl"}}></input>
-</p>
-<p>
-  <label>Markdown:</label>
-  <input type="text" class="markdown" {{bind-attr value="view.markdownStatusImage"}}></input>
-</p>
-<p>
-  <label>Textile:</label>
-  <input type="text" class="textile" {{bind-attr value="view.textileStatusImage"}}></input>
-</p>
-<p>
-  <label>RDOC:</label>
-  <input type="text" class="rdoc" {{bind-attr value="view.rdocStatusImage"}}></input>
-</p>
-<p>
-  <label>AsciiDoc:</label>
-  <input type="text" class="asciidoc" {{bind-attr value="view.asciidocStatusImage"}}></input>
-</p>
-<p>
-  <label>Rst:</label>
-  <input type="text" class="rst" {{bind-attr value="view.rstStatusImage"}}></input>
-</p>
-<p>
-  <label>POD:</label>
-  <input type="text" class="pod" {{bind-attr value="view.podStatusImage"}}></input>
+  <label>{{view Ember.Select contentBinding="view.formats" selectionBinding="view.statusImageFormat"}}</label>
+  <input type="text" onclick="this.select()" class="url" {{bind-attr value="view.statusString"}}></input>
 </p>

assets/scripts/app/views/status_images.coffee

@@ -9,10 +9,21 @@ Travis.StatusImagesView = Em.View.extend
   jobBinding:   'toolsView.job'
   branchesBinding: 'repo.branches'
 
+  formats: [
+    'Image URL',
+    'Markdown',
+    'Textile',
+    'RDOC',
+    'AsciiDoc',
+    'Rst',
+    'POD'
+  ]
+
   didInsertElement: ->
     @_super.apply(this, arguments)
 
     @setStatusImageBranch()
+    @setStatusImageFormat()
     @show()
 
   show: ->
@@ -21,9 +32,9 @@ Travis.StatusImagesView = Em.View.extend
   close: ->
     @destroy()
 
-  urlRepo: (->
-    "https://#{location.host}/#{@get('repo.slug')}"
-  ).property('repo.slug')
+  setStatusImageFormat: (->
+    @set('statusImageFormat', @formats[0])
+  )
 
   setStatusImageBranch: (->
     if @get('repo.branches.isLoaded')
@@ -32,30 +43,7 @@ Travis.StatusImagesView = Em.View.extend
       @set('statusImageBranch', null)
   ).observes('repo.branches', 'repo.branches.isLoaded', 'build.commit.branch')
 
-  statusImageUrl: (->
-    Travis.Urls.statusImage(@get('repo.slug'), @get('statusImageBranch.commit.branch'))
-  ).property('repo.slug', 'statusImageBranch')
+  statusString: (->
+    Travis.StatusImageFormatter.format(@get('statusImageFormat'), @get('repo.slug'), @get('statusImageBranch.commit.branch'))
+  ).property('statusImageFormat', 'repo.slug', 'statusImageBranch.commit.branch')
 
-  markdownStatusImage: (->
-    "[![Build Status](#{@get('statusImageUrl')})](#{@get('urlRepo')})"
-  ).property('statusImageUrl')
-
-  textileStatusImage: (->
-    "!#{@get('statusImageUrl')}!:#{@get('urlRepo')}"
-  ).property('statusImageUrl')
-
-  rdocStatusImage: (->
-    "{<img src=\"#{@get('statusImageUrl')}\" alt=\"Build Status\" />}[#{@get('urlRepo')}]"
-  ).property('statusImageUrl')
-
-  asciidocStatusImage: (->
-    "image:#{@get('statusImageUrl')}[\"Build Status\", link=\"#{@get('urlRepo')}\"]"
-  ).property('statusImageUrl')
-
-  rstStatusImage: (->
-    ".. image:: #{@get('statusImageUrl')}   :target: #{@get('urlRepo')}"
-  ).property('statusImageUrl')
-
-  podStatusImage: (->
-    "=for HTML <a href=\"#{@get('urlRepo')}\"><img src=\"#{@get('statusImageUrl')}\"></a>"
-  ).property('statusImageUrl')

assets/styles/app/popup.sass

@@ -49,11 +49,11 @@
   p
     margin: 10px 0
     label
-      width: 80px
+      width: 100px
       display: inline-block
     input
       border: 1px solid $color-border-light
-      width: 505px
+      width: 485px
       padding: 4px
       @include border-radius(3px)