add new icons and some env var styles

app/components/env-var.coffee

@@ -2,6 +2,7 @@
 
 EnvVarComponent = Ember.Component.extend
 
+  classNames: ['settings-envvar']
 
   name:   DS.attr()
   value:  DS.attr()

app/styles/app/layouts/settings.sass

@@ -49,30 +49,78 @@ $input-main-height: 30px
   .small-title
     margin-top: 0
 
-
+%settings-list
-.settings-list
   padding: 0
   margin: 0
   list-style: none
-
   li
     margin-bottom: 1rem
+
+.settings-list--columns
+  @extend %settings-list
+  li
     @media #{$medium-up}
       display: inline-block
       width: grid-calc(11, 24)
 
+.settings-list--envvars
+  @extend %settings-list
+
 .settings-input
-  display: inline-block;
+  display: inline-block
-  margin-right: 1rem;
+  margin-right: 1rem
   vertical-align: middle
   & + .label
     vertical-align: middle
   input
+    display: inline-block
+    height: 32px
+    width: 80px
     border: 1px solid #eeedec
     border-radius: 4px
+    font-size: $font-size-s
     color: #8e8f8e
     text-align: center
-    height: 32px;
+
-    display: inline-block;
+.settings-envvar
-    width: 80px;
+  padding: .6em .5em
-    
+  border-radius: 4px
+  background-color: #F6F5F5
+
+.env-var-name
+  display: inline-block
+  vertical-align: middle
+  @media #{$medium-up}
+    width: grid-calc(6, 12)
+
+.env-var-value
+  display: inline-block
+  input
+    display: inline-block
+    width: 100%
+    padding: 0.7em 0.5em 0.7em 2.2em
+    border-radius: 4px
+    border: none
+    background-color: #eeedec
+    color: #8e8f8e
+    @extend .icon-lock
+    background:
+      size: 14px
+      repeat: no-repeat
+      position: 0.4em 0.7em
+  @media #{$medium-up}
+    width: grid-calc(3, 12)
+
+.env-var-action
+  display: inline-block
+  text-align: right
+  line-height: 2
+
+  .icon-delete
+    @extend %icon
+    @extend .icon-delete
+    width: 1.1em
+    height: 1.3em
+  @media #{$medium-up}
+    width: grid-calc(1, 24)
+    float: right

app/styles/app/modules/icons.sass

@@ -177,6 +177,21 @@
 .icon-hook-off
   background-image: inline-image('svg/hooks-off.svg')
 
+.icon-delete
+  background-image: inline-image('svg/delete.svg')
+  
+.icon-delete-hover
+  background-image: inline-image('svg/delete-hover.svg')
+
+.icon-delete-disabled
+  background-image: inline-image('svg/delete-disabled.svg')
+
+.icon-key
+  background-image: inline-image('svg/key.svg')
+
+.icon-fingerprint
+  background-image: inline-image('svg/fingerprint.svg')
+
 .icon--plus
   &:after
     content: "+"

app/templates/components/env-var.hbs

@@ -1 +1,13 @@
-<p>this is an env-var</p>
+
+<div class="env-var-name">THIS_IS_THE_ENV_NAME</div>
+<div class="env-var-value">
+  <input type="pw" value="••••••••••••••••" readonly="readonly">
+</div>
+<div class="env-var-action">
+  <a href="#" title="">
+    <span class="icon-delete"></span>
+    <p class="tooltip">
+      <span>Delete</span>
+    </p>
+  </a>
+</div>

app/templates/settings.hbs

@@ -3,7 +3,7 @@
   <section class="settings-section">
     <h2 class="small-title">General Settings</h2>
 
-    <ul class="settings-list">
+    <ul class="settings-list--columns">
       <li>{{settings-switch}}</li>
       <li>
         <div class="settings-input"><input type="text" pattern="/^[0-9]+$/" value="4"></div><span class="label">Concurrent jobs</span>
@@ -17,8 +17,12 @@
   <section class="settings-section">
     <h2 class="small-title">Environment Variables</h2>
 
-    {{env-var}}
+    <ul class="settings-list--envvars">
-
+      <li>{{env-var}}</li>
+      <li>{{env-var}}</li>
+      <li>{{env-var}}</li>
+      <li>{{env-var}}</li>
+    </ul>
 
   </section>
 {{#if config.endpoints.sshKey}}

public/images/svg/delete-disabled.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 13.2 16.3" enable-background="new 0 0 13.2 16.3" xml:space="preserve">
+<g>
+	<polygon fill="#DFE0E1" points="1.3,4.6 2.4,11.8 9.1,4.6 	"/>
+	<path fill="#DFE0E1" d="M3.2,15.4c0.3,0.4,0.8,0.9,1.7,0.9c1,0,3.7,0,4.7,0c1.9,0,2.1-1.9,2.1-1.9l1.6-9.7h0L3.2,15.4z"/>
+	<path fill="#DFE0E1" d="M9,0.9C8.9-0.1,8,0,8,0H6.4c0,0-0.9-0.1-1,0.9H1.9c0,0-0.8-0.1-1.3,0.7c-0.5,0.9-1.1,1.5,0,1.5
+		c0.5,0,6,0,9.8,0l2.1-2.2H9z"/>
+</g>
+</svg>

public/images/svg/delete-hover.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 14.5 16" enable-background="new 0 0 14.5 16" xml:space="preserve">
+<g>
+	<path fill="#EA3D3D" d="M1.3,4.6l1.6,9.7c0,0,0.1,1.9,2.1,1.9c1,0,3.7,0,4.7,0c1.9,0,2.1-1.9,2.1-1.9l1.6-9.7H1.3z"/>
+	<path fill="#EA3D3D" d="M13.8,1.6c-0.5-0.8-1.3-0.7-1.3-0.7H9C8.9-0.1,8,0,8,0H6.4c0,0-0.9-0.1-1,0.9H1.9c0,0-0.8-0.1-1.3,0.7
+		c-0.5,0.9-1.1,1.5,0,1.5c0.8,0,12.5,0,13.2,0C14.9,3.1,14.3,2.5,13.8,1.6z"/>
+</g>
+</svg>

public/images/svg/delete.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 14.5 16" enable-background="new 0 0 14.5 16" xml:space="preserve">
+<g>
+	<path fill="#C2C3C5" d="M1.3,4.5l1.6,9.6c0,0,0.1,1.9,2.1,1.9c1,0,3.7,0,4.7,0c1.9,0,2.1-1.9,2.1-1.9l1.6-9.6H1.3z"/>
+	<path fill="#C2C3C5" d="M13.8,1.6c-0.5-0.8-1.3-0.7-1.3-0.7H9C8.9-0.1,8,0,8,0H6.4c0,0-0.9-0.1-1,0.9H1.9c0,0-0.8-0.1-1.3,0.7
+		c-0.5,0.9-1.1,1.5,0,1.5c0.8,0,12.5,0,13.2,0C14.9,3.1,14.3,2.5,13.8,1.6z"/>
+</g>
+</svg>

public/images/svg/fingerprint.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<g>
+				<path fill="#ADADAD" d="M0.4,9.8c-0.1,0-0.2-0.1-0.2-0.2C-0.7,5.3,2.1,1,6.4,0.2c4.3-0.9,8.6,1.9,9.4,6.3c0,0.1-0.1,0.2-0.2,0.3
+					c-0.1,0-0.2-0.1-0.3-0.2c-0.8-4.1-4.8-6.7-8.9-5.9C2.4,1.4-0.2,5.4,0.6,9.5C0.6,9.6,0.6,9.7,0.4,9.8C0.4,9.8,0.4,9.8,0.4,9.8z"
+					/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<path fill="#ADADAD" d="M15.8,8.4C15.8,8.4,15.8,8.4,15.8,8.4c-0.1,0-0.2-0.1-0.2-0.2c0-0.5,0-1.1-0.1-1.6
+					c0-0.1,0.1-0.2,0.2-0.3c0.1,0,0.2,0.1,0.3,0.2C16,7,16,7.6,16,8.2C16,8.3,15.9,8.4,15.8,8.4z"/>
+			</g>
+			<g>
+				<path fill="#ADADAD" d="M0.5,10.1c-0.1,0-0.2-0.1-0.2-0.2c0-0.1-0.1-0.2-0.1-0.3c0-0.1,0.1-0.2,0.2-0.3c0.1,0,0.2,0.1,0.3,0.2
+					c0,0.1,0,0.2,0.1,0.3C0.7,9.9,0.6,10.1,0.5,10.1C0.5,10.1,0.5,10.1,0.5,10.1z"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<path fill="#ADADAD" d="M6,15.7c-0.1,0-0.1,0-0.2-0.1c-0.1-0.1-0.1-0.2,0-0.3c1.8-2,2.5-4.7,2-7.3c0-0.1,0.1-0.2,0.2-0.3
+			c0.1,0,0.2,0.1,0.3,0.2c0.6,2.8-0.2,5.6-2.1,7.7C6.1,15.7,6.1,15.7,6,15.7z"/>
+	</g>
+	<g>
+		<path fill="#ADADAD" d="M8.3,16c0,0-0.1,0-0.1,0C8,15.9,8,15.7,8.1,15.6c1.6-2.4,2.2-5.2,1.6-8l0-0.1C9.6,7.2,9.3,6.8,9,6.6
+			C8.6,6.3,8.1,6.2,7.7,6.3C7.2,6.4,6.8,6.7,6.6,7.1C6.3,7.4,6.3,7.8,6.3,8.2l0,0.1c0.5,2.4-0.3,4.9-2.1,6.5C4.1,15,4,15,3.9,14.9
+			c-0.1-0.1-0.1-0.2,0-0.3c1.6-1.5,2.4-3.7,2-5.9l0,0l0-0.2c-0.1-0.6,0-1.2,0.3-1.6C6.5,6.3,7,6,7.6,5.9c0.6-0.1,1.2,0,1.6,0.3
+			C9.7,6.5,10,7,10.1,7.6l0,0.2l0,0c0.5,2.9-0.1,5.7-1.7,8.1C8.4,16,8.3,16,8.3,16z"/>
+	</g>
+	<g>
+		<path fill="#ADADAD" d="M10.8,15.5c0,0-0.1,0-0.1,0c-0.1-0.1-0.2-0.2-0.1-0.3c1.2-2.5,1.5-5.2,1-7.9l0-0.1C11.1,5.3,9.2,4,7.3,4.4
+			C5.3,4.8,4.1,6.7,4.4,8.6l0,0.1c0.4,1.9-0.3,3.8-1.8,5c-0.1,0.1-0.2,0.1-0.3,0c-0.1-0.1-0.1-0.2,0-0.3c1.3-1.1,1.9-2.7,1.6-4.4
+			l0-0.1C3.5,6.6,5,4.4,7.2,4c2.2-0.4,4.4,1,4.9,3.2l0,0.1l0,0c0.5,2.7,0.2,5.5-1.1,8C11,15.4,10.9,15.5,10.8,15.5z"/>
+	</g>
+	<g>
+		<path fill="#ADADAD" d="M13.5,13.7C13.5,13.7,13.5,13.7,13.5,13.7c-0.2,0-0.3-0.2-0.2-0.3c0.6-2.1,0.6-4.3,0.2-6.4l0-0.1
+			c-0.6-3-3.6-5-6.6-4.4C3.9,3.1,2,6,2.5,9l0,0.1c0.2,1.1-0.2,2.3-1.1,3c-0.1,0.1-0.2,0.1-0.3,0c-0.1-0.1-0.1-0.2,0-0.3
+			c0.7-0.6,1.1-1.6,0.9-2.5l0-0.1C1.4,5.9,3.5,2.7,6.8,2.1c3.2-0.6,6.4,1.4,7.1,4.6l0,0l0,0.2c0.5,2.3,0.4,4.5-0.2,6.7
+			C13.7,13.6,13.6,13.7,13.5,13.7z"/>
+	</g>
+</g>
+</svg>

public/images/svg/key.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 14.5 16" enable-background="new 0 0 14.5 16" xml:space="preserve">
+<g>
+	<path fill="#C2C3C5" d="M9.5,7.5c0.4-0.2,0.8-0.4,1.2-0.7c1.7-1.5,1.7-4.1,0-5.6c-1.7-1.5-4.6-1.5-6.3,0c-1.7,1.5-1.7,4.1,0,5.6
+		C4.7,7,5.1,7.3,5.5,7.5l0,1.3L7,10.1l-1.5,1.4l0,0L7,12.8l-1.5,1.4l0,0l2,1.8l0,0h0l2-1.8L9.5,7.5z M6.4,3.7
+		c-0.6-0.5-0.6-1.4,0-1.9s1.5-0.5,2.1,0s0.6,1.4,0,1.9C8,4.2,7,4.2,6.4,3.7z"/>
+</g>
+</svg>