From bd6e1e347b0567dd80bc03d81d34b56da9eebe67 Mon Sep 17 00:00:00 2001 From: Lisa Passing Date: Thu, 2 Jul 2015 17:50:26 +0200 Subject: [PATCH] put styles on ssh-key settings --- app/components/ssh-key.coffee | 4 +- app/styles/app.scss | 6 +- app/styles/app/layouts/settings.sass | 115 +++++++++++++++++++++------ app/templates/components/ssh-key.hbs | 36 ++++++++- app/templates/settings.hbs | 16 ++++ 5 files changed, 147 insertions(+), 30 deletions(-) diff --git a/app/components/ssh-key.coffee b/app/components/ssh-key.coffee index 939f29dc..72eb23f7 100644 --- a/app/components/ssh-key.coffee +++ b/app/components/ssh-key.coffee @@ -1,5 +1,7 @@ `import Ember from 'ember'` -SshKeyComponent = Ember.Component.extend() +SshKeyComponent = Ember.Component.extend + + classNames: ['settings-sshkey'] `export default SshKeyComponent` diff --git a/app/styles/app.scss b/app/styles/app.scss index 699c03dc..42507ce7 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -9,13 +9,13 @@ @import "app/ansi"; @import "app/auth"; @import "app/charm"; -@import "app/forms"; -@import "app/github"; +// @import "app/forms"; +// @import "app/github"; @import "app/main/annotations"; @import "app/main/list"; @import "app/main/log"; -@import "app/main/sponsors"; +// @import "app/main/sponsors"; @import "app/misc"; @import "app/popup"; // @import "app/pro"; diff --git a/app/styles/app/layouts/settings.sass b/app/styles/app/layouts/settings.sass index 9e9aa55c..8411fbfa 100644 --- a/app/styles/app/layouts/settings.sass +++ b/app/styles/app/layouts/settings.sass @@ -120,7 +120,6 @@ $input-main-height: 30px .env-var-action position: relative display: inline-block - line-height: 2 width: grid-calc(2, 24) float: right @@ -132,30 +131,96 @@ $input-main-height: 30px height: 1.3em margin: .2em auto 0 - .tooltip - display: none - position: absolute - right: 0 - left: 0 - top: -2.7em - width: 4.2em - margin: auto - padding: 0 .8em - z-index: 5 - background-color: #818383 - border-radius: 4px - color: $white - &:before - content: "" - position: absolute - bottom: -0.3em - left: 39% - width: 1em - height: 1em - transform: rotate(45deg) - z-index: -1 - background-color: #818383 + &:hover + .icon-delete + @extend .icon-delete-hover + .tooltip + display: block +.tooltip + display: none + position: absolute + right: 0 + left: 0 + top: -2.7em + width: auto + margin: auto + padding: .2em .8em .3em + z-index: 5 + background-color: #818383 + border-radius: 4px + color: $white + white-space: nowrap + &:before + content: "" + position: absolute + bottom: -0.3em + left: 39% + width: 1em + height: 1em + transform: rotate(45deg) + z-index: -1 + background-color: #818383 + +.settings-sshkey + display: block + margin-bottom: 1rem + padding: .6em .5em + border-radius: 4px + background-color: #F6F5F5 + + span + vertical-align: middle + +.ssh-key-name + display: inline-block + position: relative + vertical-align: middle + width: 40% + white-space: nowrap + overflow: hidden + .icon-key + @extend %icon + @extend .icon-key + width: 1.2em + height: 1.3em + &:after + content: "" + @include fadeOut(right, -90deg, #F6F5F5) + +.ssh-key-value + display: inline-block + vertical-align: middle + width: grid-calc(3, 12) + text-align: right + white-space: nowrap + .icon-fingerprint + @extend %icon + @extend .icon-fingerprint + width: 1.3em + height: 1.3em + margin-right: .5em + +.ssh-key-action + display: inline-block + position: relative + vertical-align: middle + width: grid-calc(2, 24) + float: right + .icon-delete + @extend %icon + @extend .icon-delete + display: block + width: 1.1em + height: 1.3em + margin: .2em auto 0 + .icon-delete-disabled + @extend %icon + @extend .icon-delete-disabled + display: block + width: 1.1em + height: 1.3em + margin: .2em auto 0 &:hover .icon-delete @extend .icon-delete-hover @@ -181,7 +246,7 @@ $input-main-height: 30px @media #{$medium-up} .form-elem:first-of-type, .form-elem:nth-of-type(2) - width: 32% + width: 31.5% margin-right: 1em .form-elem:nth-of-type(3) width: 24% diff --git a/app/templates/components/ssh-key.hbs b/app/templates/components/ssh-key.hbs index 437eda01..cb3e6214 100644 --- a/app/templates/components/ssh-key.hbs +++ b/app/templates/components/ssh-key.hbs @@ -1 +1,35 @@ -

This is an ssh key

+{{#if custom}} +
+ + TRAVIS_PRIVATE_KEY +
+
+ + e1:b1:83:06:7e:51:6d:5e:e0:e0:60:96:ca:ac:3d:8a +
+
+ + +

+ Delete +

+ +
+{{else}} +
+ + no custom key set +
+
+ + e1:b1:83:06:7e:51:6d:5e:e0:e0:60:96:ca:ac:3d:8a +
+
+ + +

+ Default keys cannot be deleted +

+ +
+{{/if}} diff --git a/app/templates/settings.hbs b/app/templates/settings.hbs index 0f1e170b..52b1192a 100644 --- a/app/templates/settings.hbs +++ b/app/templates/settings.hbs @@ -48,6 +48,22 @@

SSH Key

{{ssh-key}} + {{ssh-key custom=true}} + +
+ Add custom SSH Key +
+
+ +
+
+ +
+
+ +
+
+
{{/if}}