Ssh key form styling and polishing

assets/scripts/app/controllers/ssh_key.coffee

@@ -2,6 +2,8 @@ require 'travis/validations'
 
 Travis.SshKeyController = Ember.ObjectController.extend Travis.Validations,
   isEditing: false
+  isSaving: false
+  isDeleting: false
   defaultKey: null
 
   needs: ['repo']
@@ -17,15 +19,26 @@ Travis.SshKeyController = Ember.ObjectController.extend Travis.Validations,
       @set('isEditing', true)
 
     save: ->
+      return if @get('isSaving')
+      @set('isSaving', true)
+
       if @isValid()
         @get('model').save().then =>
           @set('isEditing', false)
+          @set('isSaving', false)
         , (xhr) =>
+          @set('isSaving', false)
           if xhr.status == 422
             @addErrorsFromResponse(JSON.parse(xhr.response)['errors'])
+      else
+        @set('isSaving', false)
 
     delete: ->
-      @get('model').deleteRecord().then =>
+      return if @get('isDeleting')
+      @set('isDeleting', true)
+
+      deletingDone = => @set('isDeleting', false)
+      @get('model').deleteRecord().then(deletingDone, deletingDone).then =>
         @set('model', null)
 
     cancel: ->

assets/scripts/app/templates/ssh_key.hbs

@@ -1,25 +1,24 @@
 {{#if model}}
   {{#if isEditing}}
-    <form {{action "save" on="submit"}}>
-      <p>Description: {{input value=description}}</p>
-      <p>Value: {{textarea value=value}} {{travis-errors "value"}}</p>
-
-      <p>
-        {{input type="submit" value="Save"}} or <a href="#" {{action "cancel"}}>Cancel</a>
-      </p>
-    </form>
+    {{partial "ssh_key/form"}}
   {{else}}
-    <p>
-      Ssh key is set.<br/>
+    <div class="ssh-key">
+      <p>Ssh key is set.</p>
       {{#if description}}
-        Description: {{description}}<br/>
+        <div class="row">
+          <span class="label">Description:</label>
+          <span class="value">{{description}}</span>
+        </div>
       {{/if}}
-      Fingerprint: {{fingerprint}}
-    </p>
-    <p>
-      <a href="#" {{action "delete"}}>Delete</a>
-      <a href="#" {{action "edit"}}>Edit</a>
-    </p>
+      <div class="row">
+        <span class="label">Fingerprint:</label>
+        <span class="value">{{fingerprint}}</span>
+      </div>
+    <div class="actions">
+      <a href="#" {{action "delete"}} {{bind-attr class=":delete-ssh-key isDeleting:deleting"}}>
+        Delete
+      </a>
+    </div>
   {{/if}}
 {{else}}
   <p>
@@ -27,5 +26,5 @@
     Currently used key has a following fingerprint: {{defaultKey.fingerprint}}
   </p>
 
-  <p><a {{action "add"}} href="#">Add a custom ssh key</a></p>
+  <a {{action "add"}} href="#" class="add-ssh-key">Add a custom ssh key</a>
 {{/if}}

assets/scripts/app/templates/ssh_key/_form.hbs

@@ -0,0 +1,16 @@
+<form class="ssh-key" {{action "save" on="submit"}}>
+  <div class="field">
+    <label>Description:</label>
+    {{input value=description}}
+  </div>
+  {{#travis-field "name"}}
+    <label class="value">Value:</label>
+    {{textarea value=value}} {{travis-errors "value"}}
+  {{/travis-field}}
+
+  <div class="actions">
+    <input type="submit" {{bind-attr value=actionType class=":submit-ssh-key isSaving:saving" disabled=isSaving}} />
+    <span class="or">or</span>
+    <a href="#" class="cancel-ssh-key" {{action "cancel"}}>Cancel</a>
+  </div>
+</form>

assets/styles/settings.sass

@@ -26,26 +26,58 @@
       text-align: center
 
   .invalid
-    input
+    input, textarea
       border-width: 1px
       border-color: #ffb6c1
       background: rgb(252, 227, 230)
 
-  form.env-var
+  form.env-var, form.ssh-key
     margin-top: 20px
 
     .field
-      height: 33px
+      padding-bottom: 10px
+    .field:after
+      visibility: hidden
+      display: block
+      font-size: 0
+      content: " "
+      clear: both
+      height: 0
+
+    label
+      display: inline-block
+
+  form.env-var
     label
       width: 40px
+  form.ssh-key
+    span.error
+      display: block
+      margin-left: 76px
+    label
+      width: 73px
+    label.value
+      float: left
+    textarea
+      margin-left: 3px
+      width: 580px
+      height: 250px
       display: inline-block
+      padding: 0 5px 0 5px
+      background-color: #fff
+      border: 1px solid #ddd
+      line-height: 17px
+      font-size: 13px
+      color: #999999
+      text-align: left
 
   span.error
     display: inline-block
     margin-left: 10px
     color: #a80000
 
-  .env-var input[type=submit].saving, .env-var .delete-var.deleting
+  .env-var input[type=submit].saving, .ssh-key input[type=submit].saving,
+  .env-var .delete-var.deleting, .delete-ssh-key.deleting
     background-color: #bbb
     background-image: inline-image('ui/round-spinner.svg')
     background-repeat: no-repeat
@@ -54,7 +86,7 @@
     text-indent: -9999px
 
 
-  a.add-env-var
+  .add-env-var, .add-ssh-key
     color: #ffffff
     background-color: #97a3aa
     border-radius: 4px
@@ -63,7 +95,7 @@
     line-height: 70px
     cursor: pointer
 
-  .add-env-var:hover
+  .add-env-var:hover, .add-ssh-key:hover
     background-color: #7c878d
 
   input
@@ -81,7 +113,7 @@
   form.env-var .actions
     margin-bottom: 35px
 
-  input.submit-env-var
+  input.submit-env-var, input.submit-ssh-key
     color: #ffffff
     background-color: #7ea35a
     border-radius: 4px
@@ -92,13 +124,13 @@
     margin-right: 6px
     cursor: pointer
 
-  .submit-env-var:hover
+  .submit-env-var:hover, .submit-ssh-key:hover
     background-color: #6f924f
 
-  .cancel-env-var
+  .cancel-env-var, .cancel-ssh-key
     margin-left: 3px
 
-  .cancel-env-var:hover
+  .cancel-env-var:hover, .cancel-ssh-key:hover
     text-decoration: underline
 
   input[type="checkbox"]
@@ -118,7 +150,7 @@
   .edit-var:hover
     background-color: #a4a5a4
 
-  .delete-var
+  .delete-var, .delete-ssh-key
     display: inline-block
     margin: 6px 0 15px 0
     color: #ffffff
@@ -128,7 +160,7 @@
     font-size: 13px
     cursor: pointer
 
-  .delete-var:hover
+  .delete-var:hover, .delete-ssh-key:hover
     background-color: #820b0b
 
   ul.env-vars