From 0b206d013a25d52278f837d187062b2a27a36842 Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Thu, 30 Mar 2017 16:01:34 -0700 Subject: [PATCH 01/37] add buttons and view for ssh keys --- .../styles/scss/modals/modals-settings.scss | 1 + .../viewPopoverAccountMenu.jade | 8 ++++++++ .../forms/SSHKeysForm/SSHKeysForm.jade | 1 + .../modals/settingsModal/settingsModalView.jade | 16 +++++++++++++++- 4 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade diff --git a/client/assets/styles/scss/modals/modals-settings.scss b/client/assets/styles/scss/modals/modals-settings.scss index 4650901c7..0149838cd 100644 --- a/client/assets/styles/scss/modals/modals-settings.scss +++ b/client/assets/styles/scss/modals/modals-settings.scss @@ -1,4 +1,5 @@ .modal-settings { + max-width: 630px; overflow: hidden; @include media(xs) { diff --git a/client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade b/client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade index e5be70f1f..507f49ad2 100644 --- a/client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade +++ b/client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade @@ -60,6 +60,14 @@ width = "24" ) | Slack Integration + li.list-item.popover-list-item( + ng-click = "actions.openSettingsModal('SSHKeys')" + ) + svg.iconnables + use( + xlink:href = "#icons-key" + ) + | SSH Keys ul.list.popover-list( ng-class = "{'list-secondary': !data.currentOrg.isPersonalAccount()}" ) diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade new file mode 100644 index 000000000..271290f47 --- /dev/null +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade @@ -0,0 +1 @@ +| SSH Keys diff --git a/client/directives/modals/settingsModal/settingsModalView.jade b/client/directives/modals/settingsModal/settingsModalView.jade index e4b0b35de..88fc44866 100644 --- a/client/directives/modals/settingsModal/settingsModalView.jade +++ b/client/directives/modals/settingsModal/settingsModalView.jade @@ -1,5 +1,5 @@ .modal-backdrop.in - .modal-dialog.modal-md.modal-settings + .modal-dialog.modal-settings header.grid-block.vertical.align-center.modal-header .container-title-wrapper .server-status-card-pop-over.no-touching @@ -59,6 +59,15 @@ width = "24" ) .btn-text.grid-content Slack Integration + button.btn.btn-radio.grid-block.vertical( + ng-class = "{'active': SEMC.currentTab === 'SSHKeys'}" + ng-click = "SEMC.currentTab = 'SSHKeys'" + ) + svg.iconnables.grid-content + use( + xlink:href = "#icons-key" + ) + .btn-text.grid-content SSH Keys section.modal-body.js-animate @@ -80,6 +89,11 @@ ng-if = "SEMC.currentTab === 'slackIntegration'" ) + div( + ng-if = "SEMC.currentTab === 'SSHKeys'" + ng-include = "'SSHKeysForm'" + ) + footer.modal-footer.clearfix.js-animate( ng-if = "SEMC.showFooter" ) From 556924fa51fa62f9dd99b547450fba7d29e04683 Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Mon, 17 Apr 2017 13:47:21 -0700 Subject: [PATCH 02/37] add ssh form contents --- .../styles/scss/modals/modals-settings.scss | 32 +++++++++++++++++++ .../forms/SSHKeysForm/SSHKeysForm.jade | 29 ++++++++++++++++- 2 files changed, 60 insertions(+), 1 deletion(-) diff --git a/client/assets/styles/scss/modals/modals-settings.scss b/client/assets/styles/scss/modals/modals-settings.scss index 0149838cd..f0a2b5174 100644 --- a/client/assets/styles/scss/modals/modals-settings.scss +++ b/client/assets/styles/scss/modals/modals-settings.scss @@ -135,3 +135,35 @@ } } } + +.form-ssh { + + .list-item { + font-size: 13px; + height: 90px; + } + + .avatar { + background-color: $gray-lighter; + border-radius: $input-border-radius; + height: 24px; + width: 24px; + } + + .btn { + color: $gray-dark; + flex: 0 0 110px; + + .iconnables { + flex: 0 0 18px; + margin-right: 2px; + } + } + + .authorized { + background-color: transparent; + border-color: transparent; + color: $gray; + pointer-events: none; + } +} diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade index 271290f47..d1279e836 100644 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade @@ -1 +1,28 @@ -| SSH Keys +.modal-form.form-ssh + .text-gray.padding-left-sm.padding-right-sm.strong SSH Keys + .text-gray.padding-left-sm.padding-right-sm.small All keys will be added to each container at build time. Keys can be deleted from + a.link your SSH key settings + | on GitHub. + .list-bordered.margin-top-sm.padding-left-sm.padding-right-sm + .grid-block.align-center.list-item + .avatar.grid-block.shrink + .grid-block.vertical.padding-left-sm.padding-right-sm + .text-gray.strong Add your user key + .text-gray User keys let your project access its private dependencies on GitHub. + .btn.gray.btn-xs.grid-block.shrink.align-center + svg.iconnables.icons-octicons-github + use( + xlink:href = "#icons-octicons-github" + ) + | Authorize… + .grid-block.align-center.list-item.padding-top-sm.padding-bottom-sm + .avatar.grid-block.shrink + .grid-block.vertical.padding-left-sm.padding-right-sm + .strong Myztiq user key (Runnable) + .monospace.text-gray.text-overflow 40:71:04:a8:3b:ea:a8:90:f6:99:6c:7a:22:f7:c0:15 + .btn.btn-xs.grid-block.shrink.align-center.authorized + svg.iconnables.icons-check + use( + xlink:href = "#icons-check" + ) + | Authorized From bb0f884752de9f87056588a03b2ddfe2e139e8cb Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Mon, 17 Apr 2017 15:24:00 -0700 Subject: [PATCH 03/37] add mockup key data --- .../styles/scss/modals/modals-settings.scss | 12 ++++--- .../forms/SSHKeysForm/SSHKeysForm.jade | 36 ++++++++++++++----- 2 files changed, 35 insertions(+), 13 deletions(-) diff --git a/client/assets/styles/scss/modals/modals-settings.scss b/client/assets/styles/scss/modals/modals-settings.scss index f0a2b5174..d8d52ce8c 100644 --- a/client/assets/styles/scss/modals/modals-settings.scss +++ b/client/assets/styles/scss/modals/modals-settings.scss @@ -144,15 +144,17 @@ } .avatar { - background-color: $gray-lighter; border-radius: $input-border-radius; - height: 24px; - width: 24px; + } + + // img.avatar.unauthorized + .unauthorized { + opacity: .5; } .btn { color: $gray-dark; - flex: 0 0 110px; + flex: 0 0 110px; // make all buttons the same width .iconnables { flex: 0 0 18px; @@ -160,7 +162,7 @@ } } - .authorized { + .btn-authorized { background-color: transparent; border-color: transparent; color: $gray; diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade index d1279e836..65ae3f081 100644 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade @@ -1,11 +1,24 @@ -.modal-form.form-ssh +.modal-form.form-ssh( + ng-init = "keys = [\ + {username: 'Myztiq', fingerprint: '40:71:04:a8:3b:ea:a8:90:f6:99:6c:7a:22:f7:c0:15', avatar: 'https://avatars1.githubusercontent.com/u/495765'},\ + {username: 'podviaznikov', fingerprint: 'e2:81:ae:03:43:1a:ba:cf:4e:e0:79:37:69:40:58:56', avatar: 'https://avatars1.githubusercontent.com/u/429706'}\ + ]" +) .text-gray.padding-left-sm.padding-right-sm.strong SSH Keys .text-gray.padding-left-sm.padding-right-sm.small All keys will be added to each container at build time. Keys can be deleted from - a.link your SSH key settings + a.link( + href = "#" + target = "_blank" + ) your SSH key settings | on GitHub. .list-bordered.margin-top-sm.padding-left-sm.padding-right-sm + //- if current user's key doesn't exist .grid-block.align-center.list-item - .avatar.grid-block.shrink + img.grid-block.shrink.avatar.unauthorized( + src = "https://avatars1.githubusercontent.com/u/7440805" + width = "24" + height = "24" + ) .grid-block.vertical.padding-left-sm.padding-right-sm .text-gray.strong Add your user key .text-gray User keys let your project access its private dependencies on GitHub. @@ -15,12 +28,19 @@ xlink:href = "#icons-octicons-github" ) | Authorize… - .grid-block.align-center.list-item.padding-top-sm.padding-bottom-sm - .avatar.grid-block.shrink + //- all user keys; if current user's key exists, list it at the top + .grid-block.align-center.list-item.padding-top-sm.padding-bottom-sm( + ng-repeat = "key in keys" + ) + img.grid-block.shrink.avatar( + src = "{{key.avatar}}" + width = "24" + height = "24" + ) .grid-block.vertical.padding-left-sm.padding-right-sm - .strong Myztiq user key (Runnable) - .monospace.text-gray.text-overflow 40:71:04:a8:3b:ea:a8:90:f6:99:6c:7a:22:f7:c0:15 - .btn.btn-xs.grid-block.shrink.align-center.authorized + .strong {{key.username}} user key (Runnable) + .monospace.text-gray.text-overflow {{key.fingerprint}} + .btn.btn-xs.grid-block.shrink.align-center.btn-authorized svg.iconnables.icons-check use( xlink:href = "#icons-check" From b286f45af1ac58a35b5b27cc353c99e074f00488 Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Mon, 17 Apr 2017 16:04:59 -0700 Subject: [PATCH 04/37] add listening state + clean up --- .../styles/scss/modals/modals-settings.scss | 23 +++++---- .../forms/SSHKeysForm/SSHKeysForm.jade | 51 ++++++++++++++----- .../settingsModal/settingsModalView.jade | 2 +- 3 files changed, 52 insertions(+), 24 deletions(-) diff --git a/client/assets/styles/scss/modals/modals-settings.scss b/client/assets/styles/scss/modals/modals-settings.scss index d8d52ce8c..1548e9673 100644 --- a/client/assets/styles/scss/modals/modals-settings.scss +++ b/client/assets/styles/scss/modals/modals-settings.scss @@ -143,23 +143,23 @@ height: 90px; } - .avatar { + .img { border-radius: $input-border-radius; } // img.avatar.unauthorized - .unauthorized { + .img-unauthorized { opacity: .5; } - .btn { - color: $gray-dark; - flex: 0 0 110px; // make all buttons the same width + .spinner-wrapper { + height: 24px; + width: 24px; + } - .iconnables { - flex: 0 0 18px; - margin-right: 2px; - } + // a.btn.gray + .gray { + color: $gray-dark; } .btn-authorized { @@ -168,4 +168,9 @@ color: $gray; pointer-events: none; } + + .iconnables { + flex: 0 0 18px; + margin-right: 2px; + } } diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade index 65ae3f081..79adecd22 100644 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade @@ -11,35 +11,58 @@ target = "_blank" ) your SSH key settings | on GitHub. - .list-bordered.margin-top-sm.padding-left-sm.padding-right-sm - //- if current user's key doesn't exist - .grid-block.align-center.list-item - img.grid-block.shrink.avatar.unauthorized( + ol.list-bordered.margin-top-sm.padding-left-sm.padding-right-sm + + //- if no key exists for the current user + li.grid-block.align-center.list-item( + ng-init = "listening = false" + ) + //- normal state + img.grid-block.shrink.img.img-unauthorized( + height = "24" + ng-if = "!listening" src = "https://avatars1.githubusercontent.com/u/7440805" width = "24" - height = "24" ) - .grid-block.vertical.padding-left-sm.padding-right-sm - .text-gray.strong Add your user key - .text-gray User keys let your project access its private dependencies on GitHub. - .btn.gray.btn-xs.grid-block.shrink.align-center + .grid-block.vertical.padding-left-sm.padding-right-sm( + ng-if = "!listening" + ) + p.text-gray.strong Add your user key + p.text-gray User keys let your project access its private dependencies on GitHub. + + //- listening state + .grid-block.shrink.align-center.justify-center.spinner-wrapper.spinner-sm.spinner-gray( + ng-if = "listening" + ng-include = "'spinner'" + ) + p.grid-block.align-center.padding-left-sm.padding-right-sm.text-gray( + ng-if = "listening" + ) Listening for authorization… + + a.btn.gray.btn-xs.grid-block.shrink.noscroll.align-center( + ng-click = "listening = !listening" + ) svg.iconnables.icons-octicons-github use( xlink:href = "#icons-octicons-github" ) | Authorize… + + //- show if instead of "authorize…" button if user is authorized but no key exists + //- .btn.gray.btn-xs.grid-block.shrink Create Key + //- all user keys; if current user's key exists, list it at the top - .grid-block.align-center.list-item.padding-top-sm.padding-bottom-sm( + li.grid-block.align-center.list-item.padding-top-sm.padding-bottom-sm( ng-repeat = "key in keys" ) - img.grid-block.shrink.avatar( + img.grid-block.shrink.img( + height = "24" src = "{{key.avatar}}" width = "24" - height = "24" ) .grid-block.vertical.padding-left-sm.padding-right-sm - .strong {{key.username}} user key (Runnable) - .monospace.text-gray.text-overflow {{key.fingerprint}} + p.strong {{key.username}} user key (Runnable) + p.monospace.text-gray.text-overflow {{key.fingerprint}} .btn.btn-xs.grid-block.shrink.align-center.btn-authorized svg.iconnables.icons-check use( diff --git a/client/directives/modals/settingsModal/settingsModalView.jade b/client/directives/modals/settingsModal/settingsModalView.jade index f884b6120..138cea083 100644 --- a/client/directives/modals/settingsModal/settingsModalView.jade +++ b/client/directives/modals/settingsModal/settingsModalView.jade @@ -1,5 +1,5 @@ .modal-backdrop.in - .modal-dialog.modal-settings + .modal-dialog.modal-settings.modal-lg header.grid-block.vertical.align-center.modal-header .container-title-wrapper .server-status-card-pop-over.no-touching From 9b2218947a7a480db8a662372f10d0264be9dc3c Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Mon, 17 Apr 2017 16:28:27 -0700 Subject: [PATCH 05/37] update label --- .../forms/SSHKeysForm/SSHKeysForm.jade | 117 +++++++++--------- 1 file changed, 59 insertions(+), 58 deletions(-) diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade index 79adecd22..8d81cea73 100644 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade @@ -4,68 +4,69 @@ {username: 'podviaznikov', fingerprint: 'e2:81:ae:03:43:1a:ba:cf:4e:e0:79:37:69:40:58:56', avatar: 'https://avatars1.githubusercontent.com/u/429706'}\ ]" ) - .text-gray.padding-left-sm.padding-right-sm.strong SSH Keys - .text-gray.padding-left-sm.padding-right-sm.small All keys will be added to each container at build time. Keys can be deleted from - a.link( - href = "#" - target = "_blank" - ) your SSH key settings - | on GitHub. - ol.list-bordered.margin-top-sm.padding-left-sm.padding-right-sm + .label + .label-col.full-width SSH Keys + p.small.padding-left-xxs.padding-right-xxs All keys will be added to each container at build time. Keys can be deleted from + a.link( + href = "#" + target = "_blank" + ) your SSH key settings + | on GitHub. + ol.list-bordered.margin-top-sm.padding-left-sm.padding-right-sm - //- if no key exists for the current user - li.grid-block.align-center.list-item( - ng-init = "listening = false" - ) - //- normal state - img.grid-block.shrink.img.img-unauthorized( - height = "24" - ng-if = "!listening" - src = "https://avatars1.githubusercontent.com/u/7440805" - width = "24" + //- if no key exists for the current user + li.grid-block.align-center.list-item( + ng-init = "listening = false" ) - .grid-block.vertical.padding-left-sm.padding-right-sm( - ng-if = "!listening" - ) - p.text-gray.strong Add your user key - p.text-gray User keys let your project access its private dependencies on GitHub. + //- normal state + img.grid-block.shrink.img.img-unauthorized( + height = "24" + ng-if = "!listening" + src = "https://avatars1.githubusercontent.com/u/7440805" + width = "24" + ) + .grid-block.vertical.padding-left-sm.padding-right-sm( + ng-if = "!listening" + ) + p.text-gray.strong Add your user key + p.text-gray User keys let your project access its private dependencies on GitHub. - //- listening state - .grid-block.shrink.align-center.justify-center.spinner-wrapper.spinner-sm.spinner-gray( - ng-if = "listening" - ng-include = "'spinner'" - ) - p.grid-block.align-center.padding-left-sm.padding-right-sm.text-gray( - ng-if = "listening" - ) Listening for authorization… + //- listening state + .grid-block.shrink.align-center.justify-center.spinner-wrapper.spinner-sm.spinner-gray( + ng-if = "listening" + ng-include = "'spinner'" + ) + p.grid-block.align-center.padding-left-sm.padding-right-sm.text-gray( + ng-if = "listening" + ) Listening for authorization… - a.btn.gray.btn-xs.grid-block.shrink.noscroll.align-center( - ng-click = "listening = !listening" - ) - svg.iconnables.icons-octicons-github - use( - xlink:href = "#icons-octicons-github" - ) - | Authorize… + a.btn.gray.btn-xs.grid-block.shrink.noscroll.align-center( + ng-click = "listening = !listening" + ) + svg.iconnables.icons-octicons-github + use( + xlink:href = "#icons-octicons-github" + ) + | Authorize… - //- show if instead of "authorize…" button if user is authorized but no key exists - //- .btn.gray.btn-xs.grid-block.shrink Create Key + //- show if instead of "authorize…" button if user is authorized but no key exists + //- .btn.gray.btn-xs.grid-block.shrink Create Key - //- all user keys; if current user's key exists, list it at the top - li.grid-block.align-center.list-item.padding-top-sm.padding-bottom-sm( - ng-repeat = "key in keys" - ) - img.grid-block.shrink.img( - height = "24" - src = "{{key.avatar}}" - width = "24" + //- all user keys; if current user's key exists, list it at the top + li.grid-block.align-center.list-item.padding-top-sm.padding-bottom-sm( + ng-repeat = "key in keys" ) - .grid-block.vertical.padding-left-sm.padding-right-sm - p.strong {{key.username}} user key (Runnable) - p.monospace.text-gray.text-overflow {{key.fingerprint}} - .btn.btn-xs.grid-block.shrink.align-center.btn-authorized - svg.iconnables.icons-check - use( - xlink:href = "#icons-check" - ) - | Authorized + img.grid-block.shrink.img( + height = "24" + src = "{{key.avatar}}" + width = "24" + ) + .grid-block.vertical.padding-left-sm.padding-right-sm + p.strong {{key.username}} user key (Runnable) + p.monospace.text-gray.text-overflow {{key.fingerprint}} + .btn.btn-xs.grid-block.shrink.align-center.btn-authorized + svg.iconnables.icons-check + use( + xlink:href = "#icons-check" + ) + | Authorized From bb91cf6dfd9753ed5350d30f1a72373bd9e037ab Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Tue, 18 Apr 2017 10:59:36 -0700 Subject: [PATCH 06/37] remove specific modal width --- client/assets/styles/scss/modals/modals-settings.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/client/assets/styles/scss/modals/modals-settings.scss b/client/assets/styles/scss/modals/modals-settings.scss index 1548e9673..fedc6c418 100644 --- a/client/assets/styles/scss/modals/modals-settings.scss +++ b/client/assets/styles/scss/modals/modals-settings.scss @@ -1,5 +1,4 @@ .modal-settings { - max-width: 630px; overflow: hidden; @include media(xs) { From fa69af39d3f9331c739c820592598be13aa10c3d Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Tue, 18 Apr 2017 11:08:46 -0700 Subject: [PATCH 07/37] add feature flag --- client/assets/styles/scss/modals/modals-settings.scss | 1 - .../popoverAccountMenu/viewPopoverAccountMenu.jade | 1 + client/directives/modals/settingsModal/settingsModalView.jade | 3 ++- client/services/featureFlagService.js | 1 + 4 files changed, 4 insertions(+), 2 deletions(-) diff --git a/client/assets/styles/scss/modals/modals-settings.scss b/client/assets/styles/scss/modals/modals-settings.scss index fedc6c418..ea86b661e 100644 --- a/client/assets/styles/scss/modals/modals-settings.scss +++ b/client/assets/styles/scss/modals/modals-settings.scss @@ -146,7 +146,6 @@ border-radius: $input-border-radius; } - // img.avatar.unauthorized .img-unauthorized { opacity: .5; } diff --git a/client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade b/client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade index e33ac485e..b129e698a 100644 --- a/client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade +++ b/client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade @@ -63,6 +63,7 @@ | Slack Integration li.list-item.popover-list-item( ng-click = "actions.openSettingsModal('SSHKeys')" + ng-if = "$root.featureFlags.composeSSHKeys" ) svg.iconnables use( diff --git a/client/directives/modals/settingsModal/settingsModalView.jade b/client/directives/modals/settingsModal/settingsModalView.jade index 138cea083..e3574762f 100644 --- a/client/directives/modals/settingsModal/settingsModalView.jade +++ b/client/directives/modals/settingsModal/settingsModalView.jade @@ -1,5 +1,5 @@ .modal-backdrop.in - .modal-dialog.modal-settings.modal-lg + .modal-dialog.modal-md.modal-settings header.grid-block.vertical.align-center.modal-header .container-title-wrapper .server-status-card-pop-over.no-touching @@ -63,6 +63,7 @@ button.btn.btn-radio.grid-block.vertical( ng-class = "{'active': SEMC.currentTab === 'SSHKeys'}" ng-click = "SEMC.currentTab = 'SSHKeys'" + ng-if = "$root.featureFlags.composeSSHKeys" ) svg.iconnables.grid-content use( diff --git a/client/services/featureFlagService.js b/client/services/featureFlagService.js index 76f6eaa47..a88f8996f 100644 --- a/client/services/featureFlagService.js +++ b/client/services/featureFlagService.js @@ -19,6 +19,7 @@ function featureFlags( composeNav: true, composeNewService: true, composeHistory: true, + composeSSHKeys: false, composeTestingUpdate: false, connections: false, contingencyPlan: false, From 2c9b81d6a28a54cb6ecda9a96d7d82c807e81bfb Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Tue, 18 Apr 2017 13:07:11 -0700 Subject: [PATCH 08/37] update key icon --- client/templates/svg/svgDefs.jade | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/client/templates/svg/svgDefs.jade b/client/templates/svg/svgDefs.jade index 8453271ea..c22f287c2 100755 --- a/client/templates/svg/svgDefs.jade +++ b/client/templates/svg/svgDefs.jade @@ -225,13 +225,7 @@ svg(xmlns='http://www.w3.org/2000/svg') rect(x='6.397', y='8.385', fill='#AD8850', width='0.692', height='2.077') rect(x='8.474', y='11.846', fill='#AD8850', width='0.692', height='4.154') symbol#icons-key(viewBox='0 0 18 18') - path(fill='#FFF', opacity='0', d='M2.354,17.449c-0.499-0.002-0.965-0.196-1.313-0.549C0.69,16.546,0.498,16.078,0.5,15.581L0.549,2.355C0.553,1.332,1.388,0.5,2.411,0.5l13.235,0.05c0.497,0.002,0.964,0.198,1.315,0.551c0.35,0.353,0.541,0.821,0.539,1.318l-0.051,13.226c-0.004,1.022-0.838,1.854-1.858,1.854l0,0L2.354,17.449z') - path(fill='#F2C172', d='M12,4h-1V3H6v1H5v5h1v1h2v2H7v1h1v1H6v2h2h2v-6h1V9h1V4z M7,8V5h3v3H7z') - rect(x='11', y='9', fill='#AD8850', width='1', height='1') - rect(x='12', y='4', fill='#AD8850', width='1', height='5') - rect(x='11', y='3', fill='#AD8850', width='1', height='1') - rect(x='7', y='5', fill='#AD8850', width='1', height='3') - rect(x='10', y='10', fill='#AD8850', width='1', height='6') + path(d='M15.627,2.286A4.242,4.242,0,0,0,8.876,7.27L1.131,15.014,2.9,16.782l1.414-1.414L5.9,16.959l1.768-1.816L6.081,13.5l1.591,1.639,1.768-1.72L7.849,11.832l2.795-2.794a4.283,4.283,0,0,0,2,.5A4.2,4.2,0,0,0,15.627,8.3,4.257,4.257,0,0,0,15.627,2.286Zm-3,4.505a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12.622,6.791Z', style='fill:#fec785;stroke:#cb9f6a;stroke-linecap:round;stroke-miterlimit:10') symbol#icons-launch(viewBox='0 0 12.523 12.533') path(d='M3.059,11.928c0.479-0.479,0.522-1.071-0.436-2.029s-1.55-0.915-2.029-0.436c-1,1.052-0.436,2.9-0.436,2.9S2.033,12.954,3.059,11.928z') path(d='M12.523,0C10.605,0,9.009,0.668,5.8,2.565c-2.433-0.818-3.983-0.344-5.298,0.97l1.857,1.857c-1.385,1.385-1.15,1.679,0.972,3.8c1.945,1.945,2.249,2.249,3.663,0.835l1.994,1.994c1.358-1.358,1.814-2.947,0.891-5.528C11.734,3.311,12.523,2.102,12.523,0z') From 086d8282fdf32b7ae00e3b879762820b9b16295d Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Tue, 18 Apr 2017 13:25:51 -0700 Subject: [PATCH 09/37] responsive fixes --- client/assets/styles/scss/modals/modals-settings.scss | 3 ++- .../modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/client/assets/styles/scss/modals/modals-settings.scss b/client/assets/styles/scss/modals/modals-settings.scss index ea86b661e..b818a74ed 100644 --- a/client/assets/styles/scss/modals/modals-settings.scss +++ b/client/assets/styles/scss/modals/modals-settings.scss @@ -139,7 +139,8 @@ .list-item { font-size: 13px; - height: 90px; + min-height: 90px; + padding: $sm 0; } .img { diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade index 8d81cea73..8cb2931c0 100644 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade @@ -53,7 +53,7 @@ //- .btn.gray.btn-xs.grid-block.shrink Create Key //- all user keys; if current user's key exists, list it at the top - li.grid-block.align-center.list-item.padding-top-sm.padding-bottom-sm( + li.grid-block.align-center.list-item( ng-repeat = "key in keys" ) img.grid-block.shrink.img( From 9a97c05aa2e8e973d481b20addd62f16677e634c Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Tue, 18 Apr 2017 14:52:26 -0700 Subject: [PATCH 10/37] add state for creating key --- .../styles/scss/modals/modals-settings.scss | 16 +++++++++++----- .../forms/SSHKeysForm/SSHKeysForm.jade | 12 +++++++++++- 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/client/assets/styles/scss/modals/modals-settings.scss b/client/assets/styles/scss/modals/modals-settings.scss index b818a74ed..554a9b45c 100644 --- a/client/assets/styles/scss/modals/modals-settings.scss +++ b/client/assets/styles/scss/modals/modals-settings.scss @@ -141,6 +141,11 @@ font-size: 13px; min-height: 90px; padding: $sm 0; + + > .spinner-wrapper { + height: 24px; + width: 24px; + } } .img { @@ -151,14 +156,15 @@ opacity: .5; } - .spinner-wrapper { - height: 24px; - width: 24px; - } - // a.btn.gray .gray { color: $gray-dark; + + .spinner-wrapper { + height: 12px; + width: 12px; + margin-right: 3px; + } } .btn-authorized { diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade index 8cb2931c0..981ab460b 100644 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade @@ -50,7 +50,17 @@ | Authorize… //- show if instead of "authorize…" button if user is authorized but no key exists - //- .btn.gray.btn-xs.grid-block.shrink Create Key + //- .btn.gray.btn-xs.grid-block.align-center.shrink( + //- ng-click = "creating = !creating" + //- ng-disabled = "creating" + //- ng-init = "creating = false" + //- ) + .spinner-wrapper.spinner-sm.spinner-gray( + ng-include = "'spinner'" + ng-if = "creating" + ) + | {{creating ? 'Creating…' : 'Create Key'}} + //- all user keys; if current user's key exists, list it at the top li.grid-block.align-center.list-item( From a7c5388b6ad167d965bf67710123a958195c74dd Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Tue, 18 Apr 2017 17:38:30 -0700 Subject: [PATCH 11/37] add ssh auth confirmation view --- client/assets/styles/scss/index.scss | 1 + .../assets/styles/scss/modals/modals-settings.scss | 2 +- .../assets/styles/scss/modals/modals-ssh-auth.scss | 8 ++++++++ .../popoverAccountMenu/viewPopoverAccountMenu.jade | 5 +++++ .../modals/redirectingModal/SSHAuthView.jade | 13 +++++++++++++ client/services/featureFlagService.js | 1 + 6 files changed, 29 insertions(+), 1 deletion(-) create mode 100644 client/assets/styles/scss/modals/modals-ssh-auth.scss create mode 100644 client/directives/modals/redirectingModal/SSHAuthView.jade diff --git a/client/assets/styles/scss/index.scss b/client/assets/styles/scss/index.scss index d196c0330..10a26cfd8 100755 --- a/client/assets/styles/scss/index.scss +++ b/client/assets/styles/scss/index.scss @@ -151,6 +151,7 @@ @import "modals/modals-repository-details"; @import "modals/modals-server-select"; @import "modals/modals-settings"; +@import "modals/modals-ssh-auth"; // popovers @import "popover/popover"; diff --git a/client/assets/styles/scss/modals/modals-settings.scss b/client/assets/styles/scss/modals/modals-settings.scss index 554a9b45c..356d7143a 100644 --- a/client/assets/styles/scss/modals/modals-settings.scss +++ b/client/assets/styles/scss/modals/modals-settings.scss @@ -162,8 +162,8 @@ .spinner-wrapper { height: 12px; - width: 12px; margin-right: 3px; + width: 12px; } } diff --git a/client/assets/styles/scss/modals/modals-ssh-auth.scss b/client/assets/styles/scss/modals/modals-ssh-auth.scss new file mode 100644 index 000000000..28497a358 --- /dev/null +++ b/client/assets/styles/scss/modals/modals-ssh-auth.scss @@ -0,0 +1,8 @@ +.modal-ssh-auth .runnabear { + left: 0; + margin: 0 auto; + position: absolute; + right: 0; + top: -119px; + z-index: 1; +} diff --git a/client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade b/client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade index b129e698a..cae8f95b4 100644 --- a/client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade +++ b/client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade @@ -162,3 +162,8 @@ ng-if = "flag === 'gitHubScope'" style = "position: absolute; right: 9px; top: 6px;" ) Go + button.btn.btn-xs.gray( + internal-modal-helper = "SSHAuthView" + ng-if = "flag === 'composeSSHAuthView'" + style = "position: absolute; right: 9px; top: 6px;" + ) Go diff --git a/client/directives/modals/redirectingModal/SSHAuthView.jade b/client/directives/modals/redirectingModal/SSHAuthView.jade new file mode 100644 index 000000000..00ab63292 --- /dev/null +++ b/client/directives/modals/redirectingModal/SSHAuthView.jade @@ -0,0 +1,13 @@ +.grid-block.align-center.justify-center.modal-backdrop.modal-ssh-auth + .modal-dialog.modal-sm + img.grid-block.shrink.img.runnabear( + height = "130" + src = "/build/images/runnabear-waving-1.png" + width = "230" + ) + header.modal-header + h1.modal-heading Authorized! + section.modal-body + .text-center.text-gray.padding-md You successfully authorized with GitHub 👍 + br + | We’ll automatically close this window. diff --git a/client/services/featureFlagService.js b/client/services/featureFlagService.js index a88f8996f..99b9bc427 100644 --- a/client/services/featureFlagService.js +++ b/client/services/featureFlagService.js @@ -20,6 +20,7 @@ function featureFlags( composeNewService: true, composeHistory: true, composeSSHKeys: false, + composeSSHAuthView: false, composeTestingUpdate: false, connections: false, contingencyPlan: false, From 8fe2fbf4c63f7eb479e345480f327991391a5e3d Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Tue, 18 Apr 2017 17:47:25 -0700 Subject: [PATCH 12/37] consistent naming --- .../popoverAccountMenu/viewPopoverAccountMenu.jade | 2 +- .../composeSSHAuthView.jade} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename client/directives/modals/{redirectingModal/SSHAuthView.jade => composeSSHAuthView/composeSSHAuthView.jade} (100%) diff --git a/client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade b/client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade index cae8f95b4..6b7b04351 100644 --- a/client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade +++ b/client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade @@ -163,7 +163,7 @@ style = "position: absolute; right: 9px; top: 6px;" ) Go button.btn.btn-xs.gray( - internal-modal-helper = "SSHAuthView" + internal-modal-helper = "composeSSHAuthView" ng-if = "flag === 'composeSSHAuthView'" style = "position: absolute; right: 9px; top: 6px;" ) Go diff --git a/client/directives/modals/redirectingModal/SSHAuthView.jade b/client/directives/modals/composeSSHAuthView/composeSSHAuthView.jade similarity index 100% rename from client/directives/modals/redirectingModal/SSHAuthView.jade rename to client/directives/modals/composeSSHAuthView/composeSSHAuthView.jade From 70c923c003bed358b56fec22c459521406b4d2c6 Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Tue, 18 Apr 2017 17:48:20 -0700 Subject: [PATCH 13/37] clarify comment --- .../modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade index 981ab460b..696c088ea 100644 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade @@ -49,7 +49,7 @@ ) | Authorize… - //- show if instead of "authorize…" button if user is authorized but no key exists + //- show instead of "authorize…" button if user is authorized but no key exists (and not listening) //- .btn.gray.btn-xs.grid-block.align-center.shrink( //- ng-click = "creating = !creating" //- ng-disabled = "creating" From 9989a575d4122774ecaec5ef0657887ce4b26d10 Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Wed, 19 Apr 2017 09:48:50 -0700 Subject: [PATCH 14/37] update SSH keys form markup --- .../forms/SSHKeysForm/SSHKeysForm.jade | 82 ------------------- .../forms/SSHKeysForm/SSHKeysFormView.jade | 82 +++++++++++++++++++ .../settingsModal/settingsModalView.jade | 4 +- 3 files changed, 84 insertions(+), 84 deletions(-) delete mode 100644 client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade create mode 100644 client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade deleted file mode 100644 index 696c088ea..000000000 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysForm.jade +++ /dev/null @@ -1,82 +0,0 @@ -.modal-form.form-ssh( - ng-init = "keys = [\ - {username: 'Myztiq', fingerprint: '40:71:04:a8:3b:ea:a8:90:f6:99:6c:7a:22:f7:c0:15', avatar: 'https://avatars1.githubusercontent.com/u/495765'},\ - {username: 'podviaznikov', fingerprint: 'e2:81:ae:03:43:1a:ba:cf:4e:e0:79:37:69:40:58:56', avatar: 'https://avatars1.githubusercontent.com/u/429706'}\ - ]" -) - .label - .label-col.full-width SSH Keys - p.small.padding-left-xxs.padding-right-xxs All keys will be added to each container at build time. Keys can be deleted from - a.link( - href = "#" - target = "_blank" - ) your SSH key settings - | on GitHub. - ol.list-bordered.margin-top-sm.padding-left-sm.padding-right-sm - - //- if no key exists for the current user - li.grid-block.align-center.list-item( - ng-init = "listening = false" - ) - //- normal state - img.grid-block.shrink.img.img-unauthorized( - height = "24" - ng-if = "!listening" - src = "https://avatars1.githubusercontent.com/u/7440805" - width = "24" - ) - .grid-block.vertical.padding-left-sm.padding-right-sm( - ng-if = "!listening" - ) - p.text-gray.strong Add your user key - p.text-gray User keys let your project access its private dependencies on GitHub. - - //- listening state - .grid-block.shrink.align-center.justify-center.spinner-wrapper.spinner-sm.spinner-gray( - ng-if = "listening" - ng-include = "'spinner'" - ) - p.grid-block.align-center.padding-left-sm.padding-right-sm.text-gray( - ng-if = "listening" - ) Listening for authorization… - - a.btn.gray.btn-xs.grid-block.shrink.noscroll.align-center( - ng-click = "listening = !listening" - ) - svg.iconnables.icons-octicons-github - use( - xlink:href = "#icons-octicons-github" - ) - | Authorize… - - //- show instead of "authorize…" button if user is authorized but no key exists (and not listening) - //- .btn.gray.btn-xs.grid-block.align-center.shrink( - //- ng-click = "creating = !creating" - //- ng-disabled = "creating" - //- ng-init = "creating = false" - //- ) - .spinner-wrapper.spinner-sm.spinner-gray( - ng-include = "'spinner'" - ng-if = "creating" - ) - | {{creating ? 'Creating…' : 'Create Key'}} - - - //- all user keys; if current user's key exists, list it at the top - li.grid-block.align-center.list-item( - ng-repeat = "key in keys" - ) - img.grid-block.shrink.img( - height = "24" - src = "{{key.avatar}}" - width = "24" - ) - .grid-block.vertical.padding-left-sm.padding-right-sm - p.strong {{key.username}} user key (Runnable) - p.monospace.text-gray.text-overflow {{key.fingerprint}} - .btn.btn-xs.grid-block.shrink.align-center.btn-authorized - svg.iconnables.icons-check - use( - xlink:href = "#icons-check" - ) - | Authorized diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade new file mode 100644 index 000000000..f11c3a03d --- /dev/null +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade @@ -0,0 +1,82 @@ +section.label-description + .label-col SSH Keys + .small.text-gray All keys will be added to each container at build time. Keys can be deleted from + a.link( + href = "#" + target = "_blank" + ) your SSH key settings + | on GitHub. + +ol.list-bordered.padding-left-sm.padding-right-sm( + ng-init = "keys = [\ + {username: 'Myztiq', fingerprint: '40:71:04:a8:3b:ea:a8:90:f6:99:6c:7a:22:f7:c0:15', avatar: 'https://avatars1.githubusercontent.com/u/495765'},\ + {username: 'podviaznikov', fingerprint: 'e2:81:ae:03:43:1a:ba:cf:4e:e0:79:37:69:40:58:56', avatar: 'https://avatars1.githubusercontent.com/u/429706'}\ + ]" +) + + //- if no key exists for the current user + li.grid-block.align-center.list-item( + ng-init = "listening = false" + ) + //- normal state + img.grid-block.shrink.img.img-unauthorized( + height = "24" + ng-if = "!listening" + src = "https://avatars1.githubusercontent.com/u/7440805" + width = "24" + ) + .grid-block.vertical.padding-left-sm.padding-right-sm( + ng-if = "!listening" + ) + p.text-gray.strong Add your user key + p.text-gray User keys let your project access its private dependencies on GitHub. + + //- listening state + .grid-block.shrink.align-center.justify-center.spinner-wrapper.spinner-sm.spinner-gray( + ng-if = "listening" + ng-include = "'spinner'" + ) + p.grid-block.align-center.padding-left-sm.padding-right-sm.text-gray( + ng-if = "listening" + ) Listening for authorization… + + a.btn.gray.btn-xs.grid-block.shrink.noscroll.align-center( + ng-click = "listening = !listening" + ) + svg.iconnables.icons-octicons-github + use( + xlink:href = "#icons-octicons-github" + ) + | Authorize… + + //- show instead of "authorize…" button if user is authorized but no key exists (and not listening) + //- .btn.gray.btn-xs.grid-block.align-center.shrink( + //- ng-click = "creating = !creating" + //- ng-disabled = "creating" + //- ng-init = "creating = false" + //- ) + .spinner-wrapper.spinner-sm.spinner-gray( + ng-include = "'spinner'" + ng-if = "creating" + ) + | {{creating ? 'Creating…' : 'Create Key'}} + + + //- all user keys; if current user's key exists, list it at the top + li.grid-block.align-center.list-item( + ng-repeat = "key in keys" + ) + img.grid-block.shrink.img( + height = "24" + src = "{{key.avatar}}" + width = "24" + ) + .grid-block.vertical.padding-left-sm.padding-right-sm + p.strong {{key.username}} user key (Runnable) + p.monospace.text-gray.text-overflow {{key.fingerprint}} + .btn.btn-xs.grid-block.shrink.align-center.btn-authorized + svg.iconnables.icons-check + use( + xlink:href = "#icons-check" + ) + | Authorized diff --git a/client/directives/modals/settingsModal/settingsModalView.jade b/client/directives/modals/settingsModal/settingsModalView.jade index e3574762f..28249802d 100644 --- a/client/directives/modals/settingsModal/settingsModalView.jade +++ b/client/directives/modals/settingsModal/settingsModalView.jade @@ -91,9 +91,9 @@ ng-if = "SEMC.currentTab === 'slackIntegration'" ) - div( + .modal-form.form-ssh( ng-if = "SEMC.currentTab === 'SSHKeys'" - ng-include = "'SSHKeysForm'" + ng-include = "'SSHKeysFormView'" ) footer.modal-footer.clearfix.js-animate( From 9d4b443243fcd69b25b40abea65df6c6be7ed8b1 Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Wed, 19 Apr 2017 15:02:46 -0700 Subject: [PATCH 15/37] update empty state --- .../styles/scss/modals/modals-settings.scss | 16 +++++++++----- .../forms/SSHKeysForm/SSHKeysFormView.jade | 22 ++++++++----------- client/templates/svg/svgDefs.jade | 4 +++- 3 files changed, 23 insertions(+), 19 deletions(-) diff --git a/client/assets/styles/scss/modals/modals-settings.scss b/client/assets/styles/scss/modals/modals-settings.scss index 356d7143a..7433706de 100644 --- a/client/assets/styles/scss/modals/modals-settings.scss +++ b/client/assets/styles/scss/modals/modals-settings.scss @@ -142,6 +142,12 @@ min-height: 90px; padding: $sm 0; + > .iconnables { + width: 24px; + height: 24px; + padding: 3px; + } + > .spinner-wrapper { height: 24px; width: 24px; @@ -156,6 +162,11 @@ opacity: .5; } + .btn .iconnables { + flex: 0 0 18px; + margin-right: 2px; + } + // a.btn.gray .gray { color: $gray-dark; @@ -173,9 +184,4 @@ color: $gray; pointer-events: none; } - - .iconnables { - flex: 0 0 18px; - margin-right: 2px; - } } diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade index f11c3a03d..a1880b6f9 100644 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade @@ -19,17 +19,14 @@ ol.list-bordered.padding-left-sm.padding-right-sm( ng-init = "listening = false" ) //- normal state - img.grid-block.shrink.img.img-unauthorized( - height = "24" - ng-if = "!listening" - src = "https://avatars1.githubusercontent.com/u/7440805" - width = "24" - ) + svg.grid-block.shrink.iconnables.icons-key-empty + use( + xlink:href = "#icons-key-empty" + ) .grid-block.vertical.padding-left-sm.padding-right-sm( ng-if = "!listening" ) - p.text-gray.strong Add your user key - p.text-gray User keys let your project access its private dependencies on GitHub. + p.text-gray Add your user key so your project can access private dependencies. //- listening state .grid-block.shrink.align-center.justify-center.spinner-wrapper.spinner-sm.spinner-gray( @@ -66,11 +63,10 @@ ol.list-bordered.padding-left-sm.padding-right-sm( li.grid-block.align-center.list-item( ng-repeat = "key in keys" ) - img.grid-block.shrink.img( - height = "24" - src = "{{key.avatar}}" - width = "24" - ) + svg.grid-block.shrink.iconnables.icons-key + use( + xlink:href = "#icons-key" + ) .grid-block.vertical.padding-left-sm.padding-right-sm p.strong {{key.username}} user key (Runnable) p.monospace.text-gray.text-overflow {{key.fingerprint}} diff --git a/client/templates/svg/svgDefs.jade b/client/templates/svg/svgDefs.jade index c22f287c2..53b35a08f 100755 --- a/client/templates/svg/svgDefs.jade +++ b/client/templates/svg/svgDefs.jade @@ -225,7 +225,9 @@ svg(xmlns='http://www.w3.org/2000/svg') rect(x='6.397', y='8.385', fill='#AD8850', width='0.692', height='2.077') rect(x='8.474', y='11.846', fill='#AD8850', width='0.692', height='4.154') symbol#icons-key(viewBox='0 0 18 18') - path(d='M15.627,2.286A4.242,4.242,0,0,0,8.876,7.27L1.131,15.014,2.9,16.782l1.414-1.414L5.9,16.959l1.768-1.816L6.081,13.5l1.591,1.639,1.768-1.72L7.849,11.832l2.795-2.794a4.283,4.283,0,0,0,2,.5A4.2,4.2,0,0,0,15.627,8.3,4.257,4.257,0,0,0,15.627,2.286Zm-3,4.505a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12.622,6.791Z', style='fill:#fec785;stroke:#cb9f6a;stroke-linecap:round;stroke-miterlimit:10') + path(d='M15.627,2.286A4.242,4.242,0,0,0,8.876,7.27L1.131,15.014,2.9,16.782l1.414-1.414L5.9,16.959l1.768-1.816L6.081,13.5l1.591,1.639,1.768-1.72L7.849,11.832l2.795-2.794a4.283,4.283,0,0,0,2,.5A4.2,4.2,0,0,0,15.627,8.3,4.257,4.257,0,0,0,15.627,2.286Zm-3,4.505a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12.622,6.791Z', style='fill:#fec785;stroke:#cb9f6a') + symbol#icons-key-empty(viewBox='0 0 18 18') + path(d='M15.627,2.286A4.242,4.242,0,0,0,8.876,7.27L1.131,15.014,2.9,16.782l1.414-1.414L5.9,16.959l1.768-1.816L6.081,13.5l1.591,1.639,1.768-1.72L7.849,11.832l2.795-2.794a4.283,4.283,0,0,0,2,.5A4.2,4.2,0,0,0,15.627,8.3,4.257,4.257,0,0,0,15.627,2.286Zm-3,4.505a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12.622,6.791Z', style='fill:#fff;stroke:#bbb') symbol#icons-launch(viewBox='0 0 12.523 12.533') path(d='M3.059,11.928c0.479-0.479,0.522-1.071-0.436-2.029s-1.55-0.915-2.029-0.436c-1,1.052-0.436,2.9-0.436,2.9S2.033,12.954,3.059,11.928z') path(d='M12.523,0C10.605,0,9.009,0.668,5.8,2.565c-2.433-0.818-3.983-0.344-5.298,0.97l1.857,1.857c-1.385,1.385-1.15,1.679,0.972,3.8c1.945,1.945,2.249,2.249,3.663,0.835l1.994,1.994c1.358-1.358,1.814-2.947,0.891-5.528C11.734,3.311,12.523,2.102,12.523,0z') From 833936a4d2b8b5563a827789b487d96128fddf5a Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Wed, 19 Apr 2017 15:11:06 -0700 Subject: [PATCH 16/37] merge master --- .../assets/styles/scss/components/wells.scss | 5 ++ .../styles/scss/forms/forms-inputs.scss | 3 +- .../styles/scss/forms/forms-payment.scss | 13 +-- .../styles/scss/forms/forms-registry.scss | 24 ++++++ client/assets/styles/scss/index.scss | 1 + .../styles/scss/modals/modals-settings.scss | 20 +++-- .../styles/scss/views/views-new-service.scss | 4 + .../viewPopoverAccountMenu.jade | 21 +++-- .../forms/billingForm/billingForm.jade | 17 ++-- .../showPaymentForm/showPaymentForm.jade | 2 +- .../privateRegistryFormView.jade | 86 +++++++++++++++++++ .../settingsModal/settingsModalView.jade | 39 ++++++--- client/services/featureFlagService.js | 1 + client/templates/svg/svgDefs.jade | 6 ++ 14 files changed, 196 insertions(+), 46 deletions(-) create mode 100644 client/assets/styles/scss/forms/forms-registry.scss create mode 100644 client/directives/modals/settingsModal/forms/privateRegistryForm/privateRegistryFormView.jade diff --git a/client/assets/styles/scss/components/wells.scss b/client/assets/styles/scss/components/wells.scss index 2db5a068e..c5fb03f22 100644 --- a/client/assets/styles/scss/components/wells.scss +++ b/client/assets/styles/scss/components/wells.scss @@ -67,6 +67,11 @@ box-shadow: inset 0 0 0 1px $red; } + &.invalid { + border-color: $red; + box-shadow: inset 0 0 0 1px $red; + } + .label-checkbox { height: 36px; line-height: 36px; diff --git a/client/assets/styles/scss/forms/forms-inputs.scss b/client/assets/styles/scss/forms/forms-inputs.scss index a19e0cd53..e8beecb64 100644 --- a/client/assets/styles/scss/forms/forms-inputs.scss +++ b/client/assets/styles/scss/forms/forms-inputs.scss @@ -80,12 +80,13 @@ input { // placeholder &::placeholder { - color: $gray; + color: $gray-light; } } // sizes .input { + color: $gray-dark; height: $input-md; line-height: $input-line-height-md; diff --git a/client/assets/styles/scss/forms/forms-payment.scss b/client/assets/styles/scss/forms/forms-payment.scss index a9a600c03..6e74e4d96 100644 --- a/client/assets/styles/scss/forms/forms-payment.scss +++ b/client/assets/styles/scss/forms/forms-payment.scss @@ -4,7 +4,7 @@ &.padding-md, > .padding-md { @include media(xxs) { - padding: 15px; + padding: $sm; } @include media(xxxs) { @@ -15,17 +15,12 @@ .well-payment { // if server side error - &.invalid { - border-color: $red; - box-shadow: inset 0 0 0 1px $red; - - > .red { - margin-bottom: 15px; - } + &.invalid > .red { + margin-bottom: $sm; } > .grid-block + .grid-block { - margin-top: 15px; + margin-top: $sm; } // payment summary diff --git a/client/assets/styles/scss/forms/forms-registry.scss b/client/assets/styles/scss/forms/forms-registry.scss new file mode 100644 index 000000000..cf03f5cca --- /dev/null +++ b/client/assets/styles/scss/forms/forms-registry.scss @@ -0,0 +1,24 @@ +.form-registry { + + // error msg + .red { + padding: $sm $sm 0; + } + + .well { + border-radius: $input-border-radius-lg; + + > .label { + margin-bottom: 0; + + + .label { + margin-top: 0; + padding-top: 0; + } + } + } + + .footer { + border-top: 1px solid $gray-lighter; + } +} diff --git a/client/assets/styles/scss/index.scss b/client/assets/styles/scss/index.scss index 10a26cfd8..c7c17c321 100755 --- a/client/assets/styles/scss/index.scss +++ b/client/assets/styles/scss/index.scss @@ -107,6 +107,7 @@ @import "forms/forms-github"; @import "forms/forms-payment"; @import "forms/forms-plan"; +@import "forms/forms-registry"; @import "forms/forms-table-vars"; @import "forms/forms-trial"; @import "forms/forms-whitelist"; diff --git a/client/assets/styles/scss/modals/modals-settings.scss b/client/assets/styles/scss/modals/modals-settings.scss index 7433706de..04480c07e 100644 --- a/client/assets/styles/scss/modals/modals-settings.scss +++ b/client/assets/styles/scss/modals/modals-settings.scss @@ -10,13 +10,18 @@ min-height: 32px; } - .modal-header .orange { - border: 0; - border-radius: 15px; - font-size: 11px; - font-weight: $weight-normal; - height: 15px; - padding: 0 5px; + .modal-header { + padding-left: 0; + padding-right: 0; + + .orange { + border: 0; + border-radius: 15px; + font-size: 11px; + font-weight: $weight-normal; + height: 15px; + padding: 0 5px; + } } .modal-body { @@ -89,7 +94,6 @@ } .list-teammates-pending { - background-image: repeating-linear-gradient(60deg, #f9f9f9, #f9f9f9 18px, transparent 18px, transparent 36px); + .list-teammates-pending { margin-top: 15px; diff --git a/client/assets/styles/scss/views/views-new-service.scss b/client/assets/styles/scss/views/views-new-service.scss index e6215c017..a475c86ca 100644 --- a/client/assets/styles/scss/views/views-new-service.scss +++ b/client/assets/styles/scss/views/views-new-service.scss @@ -53,6 +53,10 @@ border-top: 1px solid $gray-lighter; } + &:not(:first-child) + .label { + padding-top: 0; + } + + .label { margin-top: 0; } diff --git a/client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade b/client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade index 6b7b04351..8f72a7075 100644 --- a/client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade +++ b/client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade @@ -37,21 +37,22 @@ ) | {{data.currentOrg.poppa.trialDaysRemaining() + ' days left'}} li.list-item.popover-list-item( - ng-click = "actions.openSettingsModal('teamManagement')" + ng-click = "actions.openSettingsModal('githubIntegration')" ) svg.iconnables use( - xlink:href = "#icons-team" + xlink:href = "#icons-octicons-github-gray" ) - | Teammates + | PR Bot li.list-item.popover-list-item( - ng-click = "actions.openSettingsModal('githubIntegration')" + ng-click = "actions.openSettingsModal('privateRegistry')" + ng-if = "$root.featureFlags.privateRegistry" ) svg.iconnables use( - xlink:href = "#icons-octicons-github-gray" + xlink:href = "#icons-private-registry" ) - | PR Bot + | Private Registry li.list-item.popover-list-item( ng-click = "actions.openSettingsModal('slackIntegration')" ) @@ -70,6 +71,14 @@ xlink:href = "#icons-key" ) | SSH Keys + li.list-item.popover-list-item( + ng-click = "actions.openSettingsModal('teamManagement')" + ) + svg.iconnables + use( + xlink:href = "#icons-team" + ) + | Teammates ul.list.popover-list( ng-class = "{'list-secondary': !data.currentOrg.isPersonalAccount()}" ) diff --git a/client/directives/modals/settingsModal/forms/billingForm/billingForm.jade b/client/directives/modals/settingsModal/forms/billingForm/billingForm.jade index 082b40e0a..c7b2d2083 100644 --- a/client/directives/modals/settingsModal/forms/billingForm/billingForm.jade +++ b/client/directives/modals/settingsModal/forms/billingForm/billingForm.jade @@ -11,38 +11,37 @@ name = "billingForm" ) .grid-block.vertical.align-center.form-trial.padding-md.fade( - ng-class = "{'in': isActivePanel()}" - trial-form from-modal = 'true' + ng-class = "{'in': isActivePanel()}" ng-if = "currentOrg.poppa.isInTrial() && !currentOrg.poppa.attrs.hasPaymentMethod" + trial-form ) .grid-block.vertical.form-plan.fade( ng-class = "{'in': isActivePanel()}" + ng-if = "currentOrg.poppa.isInTrial() && !currentOrg.poppa.attrs.hasPaymentMethod" ng-init = "state.hasDuration = false" - plan-status-form ng-show = "!$root.isLoading.billingForm" - ng-if = "currentOrg.poppa.isInTrial() && !currentOrg.poppa.attrs.hasPaymentMethod" + plan-status-form ) - .grid-block.vertical.form-plan.label.padding-sm.fade( ng-class = "{'in': isActivePanel()}" - show-plan-form ng-if = "!currentOrg.poppa.isInTrial() || (currentOrg.poppa.isInTrial() && currentOrg.poppa.attrs.hasPaymentMethod)" + show-plan-form ) .grid-block.vertical.label.padding-sm.fade( ng-class = "{'in': isActivePanel()}" - show-payment-form ng-if = "!currentOrg.poppa.isInTrial() || (currentOrg.poppa.isInTrial() && currentOrg.poppa.attrs.hasPaymentMethod)" + show-payment-form ) .grid-block.vertical.label.padding-sm.fade( - ng-class = "{'in': isActivePanel()}" billing-history-form + ng-class = "{'in': isActivePanel()}" ng-if = "!currentOrg.poppa.isInTrial() || (currentOrg.poppa.isInTrial() && currentOrg.poppa.attrs.hasPaymentMethod)" ) .grid-block.vertical.label.padding-sm.fade( ng-class = "{'in': isActivePanel()}" - ng-include = "'disableOrgForm'" ng-if = "!currentOrg.poppa.isInTrial() || (currentOrg.poppa.isInTrial() && currentOrg.poppa.attrs.hasPaymentMethod)" + ng-include = "'disableOrgForm'" ) animated-panel( name = "planStatusForm" diff --git a/client/directives/modals/settingsModal/forms/billingForm/showPaymentForm/showPaymentForm.jade b/client/directives/modals/settingsModal/forms/billingForm/showPaymentForm/showPaymentForm.jade index 73798e724..a8e0b267d 100644 --- a/client/directives/modals/settingsModal/forms/billingForm/showPaymentForm/showPaymentForm.jade +++ b/client/directives/modals/settingsModal/forms/billingForm/showPaymentForm/showPaymentForm.jade @@ -1,7 +1,7 @@ .clearfix .label-col.full-width Payment Info label.grid-block.vertical.well.well-summary( - ng-class = "{flash: hasUpdated}" + ng-class = "{'flash': hasUpdated}" ) .grid-block.align-center.padding-sm .grid-block.vertical diff --git a/client/directives/modals/settingsModal/forms/privateRegistryForm/privateRegistryFormView.jade b/client/directives/modals/settingsModal/forms/privateRegistryForm/privateRegistryFormView.jade new file mode 100644 index 000000000..1f67ee7b4 --- /dev/null +++ b/client/directives/modals/settingsModal/forms/privateRegistryForm/privateRegistryFormView.jade @@ -0,0 +1,86 @@ +section.label-description + .label-col Private Registry + .small.text-gray If you push your images to a private registry, you can safely store your credentials to use those images on Runnable. + a.link( + href = "//runnable.com/docs" + target = "_blank" + ) Learn more + | . + +form.grid-block.vertical.well.gray.ignore-margin( + name = "privateRegistryForm" + ng-class = "{'invalid': state.invalidCredentials}" + ng-if = "!state.authorized" + ng-init = "state.authorized = null" +) + p.red.small.text-center( + ng-if = "state.invalidCredentials" + ) We couldn’t validate your credentials. + br + | Please check them and try again. + label.padding-sm.label + .padding-xxs.small.label-sm Registry URL + input.input.input-md.input-validate( + name = "data.url" + ng-disabled = "state.saving" + ng-model = "data.url" + ng-required = "true" + placeholder = "https://index.docker.io/v1/" + spellcheck = "false" + type = "url" + ) + small.grid-block.padding-xxs.small Add the URL for the registry you use. This could be from Docker Hub or a private registry. + label.padding-sm.label + .padding-xxs.small.label-sm Username + input.input.input-md.input-validate( + name = "data.username" + ng-disabled = "state.saving" + ng-model = "data.username" + ng-required = "true" + spellcheck = "false" + ) + label.padding-sm.label + .padding-xxs.small.label-sm Password + input.input.input-md.input-validate( + autocomplete = "new-password" + name = "data.password" + ng-disabled = "state.saving" + ng-model = "data.password" + ng-required = "true" + spellcheck = "false" + type = "password" + ) + footer.margin-top-sm.padding-sm.grid-block.footer( + ng-class = "{\ + 'justify-justified': state.authorized,\ + 'justify-right': !state.authorized\ + }" + ) + button.btn.btn-md.gray.btn-cancel( + ng-if = "state.authorized" + ) Back + button.grid-block.shrink.align-center.btn.btn-md.green( + ng-click = "state.saving = true" + ng-disabled = "state.saving || privateRegistryForm.$invalid" + ng-init = "state.saving = null" + ) + .spinner-wrapper.spinner-sm.spinner-white( + ng-if = "state.saving" + ng-include = "'spinner'" + ) + span Verify & Save + +section.padding-sm.grid-block.align-center.well.white.ignore-margin( + ng-if = "state.authorized" + ng-init = "registryCredentials = [\ + {username: 'dockerfan88', url: 'https://index.docker.io/v1/'}\ + ]" +) + svg.margin-right-xxs.text-green.grid-block.shrink.iconnables.icons-check + use( + xlink:href = "#icons-check" + ) + .grid-block.vertical + p.small.weight-strong.text-overflow Authorized {{registryCredentials[0].username}} + small.small.text-gray.text-overflow {{registryCredentials[0].url}} + button.btn.btn-xs.gray.margin-left-xxs Change diff --git a/client/directives/modals/settingsModal/settingsModalView.jade b/client/directives/modals/settingsModal/settingsModalView.jade index 28249802d..b94fc9017 100644 --- a/client/directives/modals/settingsModal/settingsModalView.jade +++ b/client/directives/modals/settingsModal/settingsModalView.jade @@ -33,23 +33,24 @@ ) .btn-text.grid-content Billing button.btn.btn-radio.grid-block.vertical( - ng-class = "{'active': SEMC.currentTab === 'teamManagement'}" - ng-click = "SEMC.currentTab = 'teamManagement'" + ng-class = "{'active': SEMC.currentTab === 'githubIntegration'}" + ng-click = "SEMC.currentTab = 'githubIntegration'" ) svg.iconnables.grid-content use( - xlink:href = "#icons-team" + xlink:href = "#icons-octicons-github-gray" ) - .btn-text.grid-content Teammates + .btn-text.grid-content PR Bot button.btn.btn-radio.grid-block.vertical( - ng-class = "{'active': SEMC.currentTab === 'githubIntegration'}" - ng-click = "SEMC.currentTab = 'githubIntegration'" + ng-class = "{'active': SEMC.currentTab === 'privateRegistry'}" + ng-click = "SEMC.currentTab = 'privateRegistry'" + ng-if = "$root.featureFlags.privateRegistry" ) svg.iconnables.grid-content use( - xlink:href = "#icons-octicons-github-gray" + xlink:href = "#icons-private-registry" ) - .btn-text.grid-content PR Bot + .btn-text.grid-content Private Registry button.btn.btn-radio.grid-block.vertical( ng-class = "{'active': SEMC.currentTab === 'slackIntegration'}" ng-click = "SEMC.currentTab = 'slackIntegration'" @@ -70,6 +71,15 @@ xlink:href = "#icons-key" ) .btn-text.grid-content SSH Keys + button.btn.btn-radio.grid-block.vertical( + ng-class = "{'active': SEMC.currentTab === 'teamManagement'}" + ng-click = "SEMC.currentTab = 'teamManagement'" + ) + svg.iconnables.grid-content + use( + xlink:href = "#icons-team" + ) + .btn-text.grid-content Teammates section.modal-body.js-animate @@ -78,15 +88,16 @@ billing-form ) - team-management-form( - ng-if = "SEMC.currentTab === 'teamManagement'" - ) - div( ng-if = "SEMC.currentTab === 'githubIntegration'" ng-include = "'gitHubForm'" ) + .grid-block.vertical.modal-form.no-border.form-registry( + ng-if = "$root.featureFlags.privateRegistry && SEMC.currentTab === 'privateRegistry'" + ng-include = "'privateRegistryFormView'" + ) + slack-integration-form( ng-if = "SEMC.currentTab === 'slackIntegration'" ) @@ -96,6 +107,10 @@ ng-include = "'SSHKeysFormView'" ) + team-management-form( + ng-if = "SEMC.currentTab === 'teamManagement'" + ) + footer.modal-footer.clearfix.js-animate( ng-if = "SEMC.showFooter" ) diff --git a/client/services/featureFlagService.js b/client/services/featureFlagService.js index 99b9bc427..85ac5618d 100644 --- a/client/services/featureFlagService.js +++ b/client/services/featureFlagService.js @@ -54,6 +54,7 @@ function featureFlags( navListFilter: false, nextPayment: false, // show the next payment date under payment summary optionsInModal: false, // allows delete in modal + privateRegistry: false, renameContainer: false, saveToolbar: false, teamManagement: false, diff --git a/client/templates/svg/svgDefs.jade b/client/templates/svg/svgDefs.jade index 53b35a08f..246c59d59 100755 --- a/client/templates/svg/svgDefs.jade +++ b/client/templates/svg/svgDefs.jade @@ -297,6 +297,12 @@ svg(xmlns='http://www.w3.org/2000/svg') polygon(fill='#808080', points='6.5,13.5 6.5,11.5 5.5,11.5 5.5,10.5 3.5,10.5 3.5,3.5 14.5,3.5 14.5,10.5 12.5,10.5 12.5,11.5 11.5,11.5 11.5,13.5 ') path(fill='#666666', d='M14.1,3.9v6.2H13h-0.9V11v0.1H12h-0.9V12v1.1H6.9V12v-0.9H6H5.9V11v-0.9H5H3.9V3.9H14.1 M15,3H3v8h2v1h1v2h6v-2h1v-1h2V3L15,3z') rect(x='4', y='4', fill='#DB970D', width='10', height='1') + symbol#icons-private-registry(viewBox='0 0 18 18') + path(d='M9,0a5.722,5.722,0,1,0,5.722,5.722A5.722,5.722,0,0,0,9,0ZM9,7.99a2.268,2.268,0,1,1,2.268-2.268A2.268,2.268,0,0,1,9,7.99Z', fill='#ebebeb') + path(d='M9,1.134A4.589,4.589,0,1,1,4.411,5.722,4.594,4.594,0,0,1,9,1.134M9,0a5.722,5.722,0,1,0,5.722,5.722A5.722,5.722,0,0,0,9,0Z', opacity='0.2') + rect(x='1.329', y='6.059', width='15.343', height='11.941', rx='3.402', ry='3.402', fill='#ffc880') + path(d='M11.882,11.456a2.866,2.866,0,0,0-5.363-.823,2.169,2.169,0,0,0,.134,4.333h5.1a1.757,1.757,0,0,0,.124-3.51Z', fill='#cc9f69') + path(d='M13.27,7.193a2.27,2.27,0,0,1,2.268,2.268V14.6a2.27,2.27,0,0,1-2.268,2.268H4.73A2.27,2.27,0,0,1,2.463,14.6V9.461A2.27,2.27,0,0,1,4.73,7.193H13.27m0-1.134H4.73a3.4,3.4,0,0,0-3.4,3.4V14.6A3.4,3.4,0,0,0,4.73,18H13.27a3.4,3.4,0,0,0,3.4-3.4V9.461a3.4,3.4,0,0,0-3.4-3.4Z', opacity='0.2') symbol#icons-pull-request(viewBox='0 0 30 30') path(d='M12.6,7.1c0.5,0.5,0.8,1.1,0.8,1.9c0,0.5-0.1,0.9-0.4,1.3s-0.6,0.7-1,0.9V20c0.4,0.2,0.7,0.6,1,0.9s0.4,0.8,0.4,1.3c0,0.8-0.3,1.4-0.8,1.9S11.4,25,10.7,25c-0.8,0-1.4-0.3-1.9-0.8S8,23.1,8,22.3c0-0.5,0.1-0.9,0.4-1.3s0.6-0.7,1-0.9v-8.7c-0.4-0.2-0.7-0.6-1-0.9S8,9.5,8,9c0-0.8,0.3-1.4,0.8-1.9s1.1-0.8,1.9-0.8C11.4,6.3,12.1,6.6,12.6,7.1z M11.6,9.9C11.9,9.7,12,9.4,12,9s-0.1-0.7-0.4-0.9S11,7.7,10.7,7.7S10,7.8,9.7,8.1S9.4,8.6,9.4,9s0.1,0.7,0.4,0.9s0.6,0.4,0.9,0.4C11,10.3,11.4,10.2,11.6,9.9z M11.6,23.3c0.2-0.2,0.4-0.6,0.4-0.9s-0.1-0.7-0.4-0.9S11,21,10.7,21s-0.7,0.1-0.9,0.4S9.4,22,9.4,22.3s0.1,0.7,0.4,0.9s0.6,0.4,0.9,0.4C11,23.7,11.4,23.5,11.6,23.3z M23.6,21c0.2,0.4,0.4,0.8,0.4,1.3c0,0.8-0.3,1.4-0.8,1.9S22.1,25,21.3,25c-0.8,0-1.4-0.3-1.9-0.8s-0.8-1.1-0.8-1.9c0-0.5,0.1-0.9,0.4-1.3c0.2-0.4,0.6-0.7,1-0.9v-8.4c0-0.3-0.2-0.7-0.4-0.9c-0.3-0.3-0.6-0.4-0.9-0.4h-1.3V13l-4-4l4-4v2.7c0,0,0,0,0.2,0h1.2c1,0,2,0.5,2.8,1.3c0.8,0.8,1.2,1.7,1.2,2.8v4.9c0,2.1,0,3.2,0,3.4C23.1,20.3,23.4,20.6,23.6,21z M22.3,23.3c0.2-0.2,0.4-0.6,0.4-0.9s-0.1-0.7-0.4-0.9S21.7,21,21.3,21s-0.7,0.1-0.9,0.4S20,22,20,22.3s0.1,0.7,0.4,0.9s0.6,0.4,0.9,0.4C21.7,23.7,22,23.5,22.3,23.3z') symbol#icons-redirect(viewBox='0 0 16 35.173') From c0b9766c87bf274d7c845ecdc3f900ae4232f489 Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Wed, 19 Apr 2017 16:00:11 -0700 Subject: [PATCH 17/37] use external link icon instead of ellipsis --- .../styles/scss/modals/modals-settings.scss | 26 +++++++++++-------- .../forms/SSHKeysForm/SSHKeysFormView.jade | 6 ++++- 2 files changed, 20 insertions(+), 12 deletions(-) diff --git a/client/assets/styles/scss/modals/modals-settings.scss b/client/assets/styles/scss/modals/modals-settings.scss index 04480c07e..06ab6a5b0 100644 --- a/client/assets/styles/scss/modals/modals-settings.scss +++ b/client/assets/styles/scss/modals/modals-settings.scss @@ -158,17 +158,8 @@ } } - .img { - border-radius: $input-border-radius; - } - - .img-unauthorized { - opacity: .5; - } - - .btn .iconnables { - flex: 0 0 18px; - margin-right: 2px; + .btn-xs { + padding: 0 3px; } // a.btn.gray @@ -188,4 +179,17 @@ color: $gray; pointer-events: none; } + + .icons-check, + .icons-octicons-github { + flex: 0 0 18px; + margin-right: 2px; + } + + .icons-link-external-alt { + height: 9px; + margin-left: 3px; + top: 1px; + width: 9px; + } } diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade index a1880b6f9..8e46fbc8f 100644 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade @@ -44,7 +44,11 @@ ol.list-bordered.padding-left-sm.padding-right-sm( use( xlink:href = "#icons-octicons-github" ) - | Authorize… + | Authorize + svg.iconnables.icons-link-external-alt + use( + xlink:href = "#icons-link-external-alt" + ) //- show instead of "authorize…" button if user is authorized but no key exists (and not listening) //- .btn.gray.btn-xs.grid-block.align-center.shrink( From 0c1ece9c0543e4a96b5a7a4d87708d59706c57e8 Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Wed, 19 Apr 2017 16:05:15 -0700 Subject: [PATCH 18/37] fix empty state + match button widths --- .../assets/styles/scss/modals/modals-settings.scss | 13 ++++--------- .../forms/SSHKeysForm/SSHKeysFormView.jade | 4 +++- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/client/assets/styles/scss/modals/modals-settings.scss b/client/assets/styles/scss/modals/modals-settings.scss index 06ab6a5b0..afde705a3 100644 --- a/client/assets/styles/scss/modals/modals-settings.scss +++ b/client/assets/styles/scss/modals/modals-settings.scss @@ -146,20 +146,16 @@ min-height: 90px; padding: $sm 0; - > .iconnables { - width: 24px; - height: 24px; - padding: 3px; - } - + > .icons-key, > .spinner-wrapper { height: 24px; + padding: 3px; width: 24px; } } .btn-xs { - padding: 0 3px; + flex: 0 0 114px; } // a.btn.gray @@ -188,8 +184,7 @@ .icons-link-external-alt { height: 9px; - margin-left: 3px; - top: 1px; + margin-left: 4px; width: 9px; } } diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade index 8e46fbc8f..0d6ff773f 100644 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade @@ -19,7 +19,9 @@ ol.list-bordered.padding-left-sm.padding-right-sm( ng-init = "listening = false" ) //- normal state - svg.grid-block.shrink.iconnables.icons-key-empty + svg.grid-block.shrink.iconnables.icons-key( + ng-if = "!listening" + ) use( xlink:href = "#icons-key-empty" ) From 3bbba8361e32afadc38b95003948609e6a1dc38f Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Wed, 19 Apr 2017 17:00:56 -0700 Subject: [PATCH 19/37] add button templates --- .../styles/scss/modals/modals-settings.scss | 2 +- .../forms/SSHKeysForm/SSHAuthorizeButton.jade | 19 ++++++++ .../forms/SSHKeysForm/SSHCreateButton.jade | 5 ++ .../forms/SSHKeysForm/SSHKeysFormView.jade | 48 +++++++------------ 4 files changed, 41 insertions(+), 33 deletions(-) create mode 100644 client/directives/modals/settingsModal/forms/SSHKeysForm/SSHAuthorizeButton.jade create mode 100644 client/directives/modals/settingsModal/forms/SSHKeysForm/SSHCreateButton.jade diff --git a/client/assets/styles/scss/modals/modals-settings.scss b/client/assets/styles/scss/modals/modals-settings.scss index afde705a3..e820db780 100644 --- a/client/assets/styles/scss/modals/modals-settings.scss +++ b/client/assets/styles/scss/modals/modals-settings.scss @@ -154,7 +154,7 @@ } } - .btn-xs { + .btn-xs:not(.btn-create-key) { flex: 0 0 114px; } diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHAuthorizeButton.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHAuthorizeButton.jade new file mode 100644 index 000000000..800a93191 --- /dev/null +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHAuthorizeButton.jade @@ -0,0 +1,19 @@ +svg.iconnables.icons-octicons-github( + ng-if = "!state.authorized" +) + use( + xlink:href = "#icons-octicons-github" + ) +svg.iconnables.icons-check( + ng-if = "state.authorized" +) + use( + xlink:href = "#icons-check" + ) +| {{state.authorized ? 'Authorized' : "Authorize"}} +svg.iconnables.icons-link-external-alt( + ng-if = "!state.authorized" +) + use( + xlink:href = "#icons-link-external-alt" + ) diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHCreateButton.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHCreateButton.jade new file mode 100644 index 000000000..a0745966f --- /dev/null +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHCreateButton.jade @@ -0,0 +1,5 @@ +.spinner-wrapper.spinner-sm.spinner-gray( + ng-if = "state.creating" + ng-include = "'spinner'" +) +| {{creating ? 'Creating…' : 'Create Key'}} diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade index 0d6ff773f..84c49aeef 100644 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade @@ -17,6 +17,7 @@ ol.list-bordered.padding-left-sm.padding-right-sm( //- if no key exists for the current user li.grid-block.align-center.list-item( ng-init = "listening = false" + ng-if = "!state.authorized" ) //- normal state svg.grid-block.shrink.iconnables.icons-key( @@ -25,10 +26,9 @@ ol.list-bordered.padding-left-sm.padding-right-sm( use( xlink:href = "#icons-key-empty" ) - .grid-block.vertical.padding-left-sm.padding-right-sm( + p.text-gray.padding-left-sm.padding-right-sm( ng-if = "!listening" - ) - p.text-gray Add your user key so your project can access private dependencies. + ) Add your user key so your project can access private dependencies. //- listening state .grid-block.shrink.align-center.justify-center.spinner-wrapper.spinner-sm.spinner-gray( @@ -39,31 +39,17 @@ ol.list-bordered.padding-left-sm.padding-right-sm( ng-if = "listening" ) Listening for authorization… - a.btn.gray.btn-xs.grid-block.shrink.noscroll.align-center( - ng-click = "listening = !listening" + a.grid-block.shrink.noscroll.align-center.btn.gray.btn-xs( + ng-disabled = "state.authorized" + ng-if = "!state.everAuthorized" + ng-include = "'SSHAuthorizeButton'" ) - svg.iconnables.icons-octicons-github - use( - xlink:href = "#icons-octicons-github" - ) - | Authorize - svg.iconnables.icons-link-external-alt - use( - xlink:href = "#icons-link-external-alt" - ) - - //- show instead of "authorize…" button if user is authorized but no key exists (and not listening) - //- .btn.gray.btn-xs.grid-block.align-center.shrink( - //- ng-click = "creating = !creating" - //- ng-disabled = "creating" - //- ng-init = "creating = false" - //- ) - .spinner-wrapper.spinner-sm.spinner-gray( - ng-include = "'spinner'" - ng-if = "creating" - ) - | {{creating ? 'Creating…' : 'Create Key'}} + a.grid-block.shrink.noscroll.align-center.btn.gray.btn-xs.btn-create-key( + ng-disabled = "state.creating" + ng-if = "state.everAuthorized && !state.authorized" + ng-include = "'SSHCreateButton'" + ) //- all user keys; if current user's key exists, list it at the top li.grid-block.align-center.list-item( @@ -76,9 +62,7 @@ ol.list-bordered.padding-left-sm.padding-right-sm( .grid-block.vertical.padding-left-sm.padding-right-sm p.strong {{key.username}} user key (Runnable) p.monospace.text-gray.text-overflow {{key.fingerprint}} - .btn.btn-xs.grid-block.shrink.align-center.btn-authorized - svg.iconnables.icons-check - use( - xlink:href = "#icons-check" - ) - | Authorized + a.grid-block.shrink.noscroll.align-center.btn.gray.btn-xs.btn-authorized( + ng-include = "'SSHAuthorizeButton'" + ng-init = "state.authorized = true" + ) From 55a35adc121c99fdb01279e18a57c1e97806abac Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Wed, 19 Apr 2017 17:05:52 -0700 Subject: [PATCH 20/37] update description --- .../settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade index 84c49aeef..ceb262338 100644 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade @@ -1,11 +1,11 @@ section.label-description .label-col SSH Keys - .small.text-gray All keys will be added to each container at build time. Keys can be deleted from + .small.text-gray Keys will be added to containers at build and run time, and can be a.link( href = "#" target = "_blank" - ) your SSH key settings - | on GitHub. + ) managed on GitHub + | . ol.list-bordered.padding-left-sm.padding-right-sm( ng-init = "keys = [\ From a50035d46f4284bc4c74e381931889b489700f84 Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Wed, 19 Apr 2017 17:08:11 -0700 Subject: [PATCH 21/37] update auth view --- .../modals/composeSSHAuthView/composeSSHAuthView.jade | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/directives/modals/composeSSHAuthView/composeSSHAuthView.jade b/client/directives/modals/composeSSHAuthView/composeSSHAuthView.jade index 00ab63292..b3b7e217d 100644 --- a/client/directives/modals/composeSSHAuthView/composeSSHAuthView.jade +++ b/client/directives/modals/composeSSHAuthView/composeSSHAuthView.jade @@ -8,6 +8,6 @@ header.modal-header h1.modal-heading Authorized! section.modal-body - .text-center.text-gray.padding-md You successfully authorized with GitHub 👍 + p.text-center.text-gray.padding-md You successfully authorized with GitHub. 👍 br | We’ll automatically close this window. From b203a5b5fa9690c86b90914fcb28c8657a392538 Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Wed, 19 Apr 2017 17:12:56 -0700 Subject: [PATCH 22/37] add github link --- .../modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade index ceb262338..6f19df914 100644 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade @@ -2,7 +2,7 @@ section.label-description .label-col SSH Keys .small.text-gray Keys will be added to containers at build and run time, and can be a.link( - href = "#" + href = "https://github.com/settings/keys" target = "_blank" ) managed on GitHub | . From a68dff0874d602b0f4560b8ea35df57d965c20f6 Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Thu, 20 Apr 2017 11:41:44 -0700 Subject: [PATCH 23/37] responsive fix --- .../styles/scss/modals/modals-settings.scss | 30 +++++++++++++++++++ .../forms/SSHKeysForm/SSHKeysFormView.jade | 14 ++------- 2 files changed, 32 insertions(+), 12 deletions(-) diff --git a/client/assets/styles/scss/modals/modals-settings.scss b/client/assets/styles/scss/modals/modals-settings.scss index e820db780..ea7846fcb 100644 --- a/client/assets/styles/scss/modals/modals-settings.scss +++ b/client/assets/styles/scss/modals/modals-settings.scss @@ -146,16 +146,42 @@ min-height: 90px; padding: $sm 0; + @include media(xxs) { + align-items: flex-start; + flex-direction: column; + min-height: 0; + } + > .icons-key, > .spinner-wrapper { height: 24px; padding: 3px; width: 24px; + + @include media(xxs) { + bottom: 15px; + position: absolute; + right: 0; + } + } + } + + .p { + padding: 0 15px; + + @include media(xxs) { + max-width: 100%; + padding: 0; } } .btn-xs:not(.btn-create-key) { flex: 0 0 114px; + + @include media(xxs) { + flex: 0 0 auto; + margin-top: 9px; + } } // a.btn.gray @@ -174,6 +200,10 @@ border-color: transparent; color: $gray; pointer-events: none; + + @include media(xxs) { + padding: 0; + } } .icons-check, diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade index 6f19df914..fb0da6292 100644 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade @@ -19,32 +19,22 @@ ol.list-bordered.padding-left-sm.padding-right-sm( ng-init = "listening = false" ng-if = "!state.authorized" ) - //- normal state svg.grid-block.shrink.iconnables.icons-key( ng-if = "!listening" ) use( xlink:href = "#icons-key-empty" ) - p.text-gray.padding-left-sm.padding-right-sm( - ng-if = "!listening" - ) Add your user key so your project can access private dependencies. - - //- listening state .grid-block.shrink.align-center.justify-center.spinner-wrapper.spinner-sm.spinner-gray( ng-if = "listening" ng-include = "'spinner'" ) - p.grid-block.align-center.padding-left-sm.padding-right-sm.text-gray( - ng-if = "listening" - ) Listening for authorization… - + p.grid-block.p.text-gray {{listening ? "Listening for authorization…" : "Add your user key so your project can access private dependencies."}} a.grid-block.shrink.noscroll.align-center.btn.gray.btn-xs( ng-disabled = "state.authorized" ng-if = "!state.everAuthorized" ng-include = "'SSHAuthorizeButton'" ) - a.grid-block.shrink.noscroll.align-center.btn.gray.btn-xs.btn-create-key( ng-disabled = "state.creating" ng-if = "state.everAuthorized && !state.authorized" @@ -59,7 +49,7 @@ ol.list-bordered.padding-left-sm.padding-right-sm( use( xlink:href = "#icons-key" ) - .grid-block.vertical.padding-left-sm.padding-right-sm + .grid-block.vertical.p p.strong {{key.username}} user key (Runnable) p.monospace.text-gray.text-overflow {{key.fingerprint}} a.grid-block.shrink.noscroll.align-center.btn.gray.btn-xs.btn-authorized( From 82e2fc63671903024e7eb26b04fcc15034b45768 Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Fri, 21 Apr 2017 09:16:02 -0700 Subject: [PATCH 24/37] add specific user name --- .../forms/SSHKeysForm/SSHKeysFormView.jade | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade index fb0da6292..b24281212 100644 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade @@ -16,24 +16,32 @@ ol.list-bordered.padding-left-sm.padding-right-sm( //- if no key exists for the current user li.grid-block.align-center.list-item( - ng-init = "listening = false" + ng-init = "state.listening = false" ng-if = "!state.authorized" ) svg.grid-block.shrink.iconnables.icons-key( - ng-if = "!listening" + ng-if = "!state.listening" ) use( xlink:href = "#icons-key-empty" ) .grid-block.shrink.align-center.justify-center.spinner-wrapper.spinner-sm.spinner-gray( - ng-if = "listening" + ng-if = "state.listening" ng-include = "'spinner'" ) - p.grid-block.p.text-gray {{listening ? "Listening for authorization…" : "Add your user key so your project can access private dependencies."}} + p.grid-block.p.text-gray( + ng-if = "state.listening" + ) Listening for authorization… + p.grid-block.p.text-gray( + ng-if = "!state.listening" + ) Add the user key for + span.weight-strong runnabro + | so your project can access private dependencies. a.grid-block.shrink.noscroll.align-center.btn.gray.btn-xs( ng-disabled = "state.authorized" ng-if = "!state.everAuthorized" ng-include = "'SSHAuthorizeButton'" + ng-click = "state.listening = !state.listening" ) a.grid-block.shrink.noscroll.align-center.btn.gray.btn-xs.btn-create-key( ng-disabled = "state.creating" @@ -50,7 +58,7 @@ ol.list-bordered.padding-left-sm.padding-right-sm( xlink:href = "#icons-key" ) .grid-block.vertical.p - p.strong {{key.username}} user key (Runnable) + p.strong {{key.username}} user key p.monospace.text-gray.text-overflow {{key.fingerprint}} a.grid-block.shrink.noscroll.align-center.btn.gray.btn-xs.btn-authorized( ng-include = "'SSHAuthorizeButton'" From 956a08911c8c7dc5be0b292c080a329d7b81b38c Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Fri, 21 Apr 2017 09:37:08 -0700 Subject: [PATCH 25/37] add loading state --- .../forms/SSHKeysForm/SSHKeysFormView.jade | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade index b24281212..5c901b462 100644 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade @@ -13,11 +13,16 @@ ol.list-bordered.padding-left-sm.padding-right-sm( {username: 'podviaznikov', fingerprint: 'e2:81:ae:03:43:1a:ba:cf:4e:e0:79:37:69:40:58:56', avatar: 'https://avatars1.githubusercontent.com/u/429706'}\ ]" ) + //- loading state + //- li.grid-block.align-center.justify-center.list-item + .spinner-wrapper.spinner-sm.spinner-gray( + ng-include = "'spinner'" + ) //- if no key exists for the current user li.grid-block.align-center.list-item( - ng-init = "state.listening = false" ng-if = "!state.authorized" + ng-init = "state.listening = false" ) svg.grid-block.shrink.iconnables.icons-key( ng-if = "!state.listening" @@ -32,13 +37,12 @@ ol.list-bordered.padding-left-sm.padding-right-sm( p.grid-block.p.text-gray( ng-if = "state.listening" ) Listening for authorization… - p.grid-block.p.text-gray( + p.p.text-gray( ng-if = "!state.listening" ) Add the user key for span.weight-strong runnabro | so your project can access private dependencies. a.grid-block.shrink.noscroll.align-center.btn.gray.btn-xs( - ng-disabled = "state.authorized" ng-if = "!state.everAuthorized" ng-include = "'SSHAuthorizeButton'" ng-click = "state.listening = !state.listening" From eb3228496f62a79f061f8f57fdeb05a0aa5d9d07 Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Fri, 21 Apr 2017 09:49:14 -0700 Subject: [PATCH 26/37] add style for new keys --- client/assets/styles/scss/modals/modals-settings.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/client/assets/styles/scss/modals/modals-settings.scss b/client/assets/styles/scss/modals/modals-settings.scss index ea7846fcb..baaa16a8f 100644 --- a/client/assets/styles/scss/modals/modals-settings.scss +++ b/client/assets/styles/scss/modals/modals-settings.scss @@ -152,6 +152,16 @@ min-height: 0; } + &.recently-added { + background-color: $blue-lighter; + border-color: $blue-light; + box-shadow: inset 0 0 0 $input-border-lg $blue-light; + margin: -$input-border (-($sm + $input-border)); + padding-left: $sm; + padding-right: $sm; + z-index: 1; + } + > .icons-key, > .spinner-wrapper { height: 24px; From 44d433927b94139b63c8f7eb2a1629ad4a3f356f Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Fri, 21 Apr 2017 09:58:33 -0700 Subject: [PATCH 27/37] update empty state copy --- .../modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade index 5c901b462..df32b3fc3 100644 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade @@ -39,7 +39,7 @@ ol.list-bordered.padding-left-sm.padding-right-sm( ) Listening for authorization… p.p.text-gray( ng-if = "!state.listening" - ) Add the user key for + ) Add a user key for span.weight-strong runnabro | so your project can access private dependencies. a.grid-block.shrink.noscroll.align-center.btn.gray.btn-xs( From 6b980564c9e4d43c420bb2e81542e51bb968b48e Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Fri, 21 Apr 2017 11:18:59 -0700 Subject: [PATCH 28/37] update recently added state --- client/assets/styles/scss/modals/modals-settings.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/client/assets/styles/scss/modals/modals-settings.scss b/client/assets/styles/scss/modals/modals-settings.scss index baaa16a8f..f0c884e7f 100644 --- a/client/assets/styles/scss/modals/modals-settings.scss +++ b/client/assets/styles/scss/modals/modals-settings.scss @@ -156,9 +156,10 @@ background-color: $blue-lighter; border-color: $blue-light; box-shadow: inset 0 0 0 $input-border-lg $blue-light; + height: 90px + $input-border * 2; margin: -$input-border (-($sm + $input-border)); - padding-left: $sm; - padding-right: $sm; + padding-left: $sm + $input-border; + padding-right: $sm + $input-border; z-index: 1; } From 012ac0152c0ed5e3ee696a2fd4864ed23b2bdeda Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Fri, 21 Apr 2017 11:19:27 -0700 Subject: [PATCH 29/37] title case --- .../modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade index df32b3fc3..eeffccbf9 100644 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade @@ -62,7 +62,7 @@ ol.list-bordered.padding-left-sm.padding-right-sm( xlink:href = "#icons-key" ) .grid-block.vertical.p - p.strong {{key.username}} user key + p.strong {{key.username}} User Key p.monospace.text-gray.text-overflow {{key.fingerprint}} a.grid-block.shrink.noscroll.align-center.btn.gray.btn-xs.btn-authorized( ng-include = "'SSHAuthorizeButton'" From 42eee7fc61e69ed517427c2d65e512b64578d5bc Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Fri, 21 Apr 2017 11:42:41 -0700 Subject: [PATCH 30/37] fix border color on recently added state --- client/assets/styles/scss/modals/modals-settings.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/assets/styles/scss/modals/modals-settings.scss b/client/assets/styles/scss/modals/modals-settings.scss index f0c884e7f..cbe88fc14 100644 --- a/client/assets/styles/scss/modals/modals-settings.scss +++ b/client/assets/styles/scss/modals/modals-settings.scss @@ -154,7 +154,7 @@ &.recently-added { background-color: $blue-lighter; - border-color: $blue-light; + border-color: transparent; box-shadow: inset 0 0 0 $input-border-lg $blue-light; height: 90px + $input-border * 2; margin: -$input-border (-($sm + $input-border)); From c0551f22a6e660de5acbf1ece723718cea95c3a0 Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Fri, 21 Apr 2017 13:12:26 -0700 Subject: [PATCH 31/37] remove loading state --- .../settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade | 5 ----- 1 file changed, 5 deletions(-) diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade index eeffccbf9..7d3f08fdb 100644 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade @@ -13,11 +13,6 @@ ol.list-bordered.padding-left-sm.padding-right-sm( {username: 'podviaznikov', fingerprint: 'e2:81:ae:03:43:1a:ba:cf:4e:e0:79:37:69:40:58:56', avatar: 'https://avatars1.githubusercontent.com/u/429706'}\ ]" ) - //- loading state - //- li.grid-block.align-center.justify-center.list-item - .spinner-wrapper.spinner-sm.spinner-gray( - ng-include = "'spinner'" - ) //- if no key exists for the current user li.grid-block.align-center.list-item( From 598df22274554a27466afde4a471b7789204b2ca Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Fri, 21 Apr 2017 13:19:03 -0700 Subject: [PATCH 32/37] remove negative margins + fix recently added state --- .../styles/scss/modals/modals-settings.scss | 22 ++++++++++++------- .../forms/SSHKeysForm/SSHKeysFormView.jade | 2 +- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/client/assets/styles/scss/modals/modals-settings.scss b/client/assets/styles/scss/modals/modals-settings.scss index cbe88fc14..8fe350cca 100644 --- a/client/assets/styles/scss/modals/modals-settings.scss +++ b/client/assets/styles/scss/modals/modals-settings.scss @@ -144,7 +144,7 @@ .list-item { font-size: 13px; min-height: 90px; - padding: $sm 0; + padding: $sm; @include media(xxs) { align-items: flex-start; @@ -156,11 +156,17 @@ background-color: $blue-lighter; border-color: transparent; box-shadow: inset 0 0 0 $input-border-lg $blue-light; - height: 90px + $input-border * 2; - margin: -$input-border (-($sm + $input-border)); - padding-left: $sm + $input-border; - padding-right: $sm + $input-border; + margin: -$input-border; + min-height: 90px + $input-border * 2; + padding: $sm + $input-border; z-index: 1; + + @include media(xxs) { + .icons-key { + bottom: $sm + $input-border; + right: $sm + $input-border; + } + } } > .icons-key, @@ -170,15 +176,15 @@ width: 24px; @include media(xxs) { - bottom: 15px; + bottom: $sm; position: absolute; - right: 0; + right: $sm; } } } .p { - padding: 0 15px; + padding: 0 $sm; @include media(xxs) { max-width: 100%; diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade index 7d3f08fdb..84014bf93 100644 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade @@ -7,7 +7,7 @@ section.label-description ) managed on GitHub | . -ol.list-bordered.padding-left-sm.padding-right-sm( +ol.list-bordered( ng-init = "keys = [\ {username: 'Myztiq', fingerprint: '40:71:04:a8:3b:ea:a8:90:f6:99:6c:7a:22:f7:c0:15', avatar: 'https://avatars1.githubusercontent.com/u/495765'},\ {username: 'podviaznikov', fingerprint: 'e2:81:ae:03:43:1a:ba:cf:4e:e0:79:37:69:40:58:56', avatar: 'https://avatars1.githubusercontent.com/u/429706'}\ From 5743e044e694276e56121f0573e164363be73c0e Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Fri, 21 Apr 2017 13:33:19 -0700 Subject: [PATCH 33/37] fix indentation --- client/templates/svg/svgDefs.jade | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/templates/svg/svgDefs.jade b/client/templates/svg/svgDefs.jade index 246c59d59..502350d05 100755 --- a/client/templates/svg/svgDefs.jade +++ b/client/templates/svg/svgDefs.jade @@ -226,8 +226,8 @@ svg(xmlns='http://www.w3.org/2000/svg') rect(x='8.474', y='11.846', fill='#AD8850', width='0.692', height='4.154') symbol#icons-key(viewBox='0 0 18 18') path(d='M15.627,2.286A4.242,4.242,0,0,0,8.876,7.27L1.131,15.014,2.9,16.782l1.414-1.414L5.9,16.959l1.768-1.816L6.081,13.5l1.591,1.639,1.768-1.72L7.849,11.832l2.795-2.794a4.283,4.283,0,0,0,2,.5A4.2,4.2,0,0,0,15.627,8.3,4.257,4.257,0,0,0,15.627,2.286Zm-3,4.505a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12.622,6.791Z', style='fill:#fec785;stroke:#cb9f6a') - symbol#icons-key-empty(viewBox='0 0 18 18') - path(d='M15.627,2.286A4.242,4.242,0,0,0,8.876,7.27L1.131,15.014,2.9,16.782l1.414-1.414L5.9,16.959l1.768-1.816L6.081,13.5l1.591,1.639,1.768-1.72L7.849,11.832l2.795-2.794a4.283,4.283,0,0,0,2,.5A4.2,4.2,0,0,0,15.627,8.3,4.257,4.257,0,0,0,15.627,2.286Zm-3,4.505a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12.622,6.791Z', style='fill:#fff;stroke:#bbb') + symbol#icons-key-empty(viewBox='0 0 18 18') + path(d='M15.627,2.286A4.242,4.242,0,0,0,8.876,7.27L1.131,15.014,2.9,16.782l1.414-1.414L5.9,16.959l1.768-1.816L6.081,13.5l1.591,1.639,1.768-1.72L7.849,11.832l2.795-2.794a4.283,4.283,0,0,0,2,.5A4.2,4.2,0,0,0,15.627,8.3,4.257,4.257,0,0,0,15.627,2.286Zm-3,4.505a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12.622,6.791Z', style='fill:#fff;stroke:#bbb') symbol#icons-launch(viewBox='0 0 12.523 12.533') path(d='M3.059,11.928c0.479-0.479,0.522-1.071-0.436-2.029s-1.55-0.915-2.029-0.436c-1,1.052-0.436,2.9-0.436,2.9S2.033,12.954,3.059,11.928z') path(d='M12.523,0C10.605,0,9.009,0.668,5.8,2.565c-2.433-0.818-3.983-0.344-5.298,0.97l1.857,1.857c-1.385,1.385-1.15,1.679,0.972,3.8c1.945,1.945,2.249,2.249,3.663,0.835l1.994,1.994c1.358-1.358,1.814-2.947,0.891-5.528C11.734,3.311,12.523,2.102,12.523,0z') From ebbff1c9610dd451d99cba79568582a581151295 Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Fri, 21 Apr 2017 13:41:41 -0700 Subject: [PATCH 34/37] fix creating state --- .../settingsModal/forms/SSHKeysForm/SSHCreateButton.jade | 4 ++-- .../settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade | 6 ++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHCreateButton.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHCreateButton.jade index a0745966f..9d7d2e958 100644 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHCreateButton.jade +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHCreateButton.jade @@ -1,5 +1,5 @@ .spinner-wrapper.spinner-sm.spinner-gray( - ng-if = "state.creating" + ng-if = "state.creatingKey" ng-include = "'spinner'" ) -| {{creating ? 'Creating…' : 'Create Key'}} +| {{state.creatingKey ? 'Creating…' : 'Create Key'}} diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade index 84014bf93..e3400d6f9 100644 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade @@ -38,14 +38,16 @@ ol.list-bordered( span.weight-strong runnabro | so your project can access private dependencies. a.grid-block.shrink.noscroll.align-center.btn.gray.btn-xs( + ng-click = "state.listening = !state.listening" ng-if = "!state.everAuthorized" ng-include = "'SSHAuthorizeButton'" - ng-click = "state.listening = !state.listening" ) a.grid-block.shrink.noscroll.align-center.btn.gray.btn-xs.btn-create-key( - ng-disabled = "state.creating" + ng-click = "state.creatingKey = !state.creatingKey" + ng-disabled = "state.creatingKey" ng-if = "state.everAuthorized && !state.authorized" ng-include = "'SSHCreateButton'" + ng-init = "state.creatingKey = false" ) //- all user keys; if current user's key exists, list it at the top From 84a48bde0c97151d6f5c8ff6cf5a5838814c8b64 Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Fri, 21 Apr 2017 13:50:01 -0700 Subject: [PATCH 35/37] update authed modal --- .../styles/scss/modals/modals-ssh-auth.scss | 23 +++++++++++++------ .../composeSSHAuthView.jade | 4 ++-- 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/client/assets/styles/scss/modals/modals-ssh-auth.scss b/client/assets/styles/scss/modals/modals-ssh-auth.scss index 28497a358..4d48014c7 100644 --- a/client/assets/styles/scss/modals/modals-ssh-auth.scss +++ b/client/assets/styles/scss/modals/modals-ssh-auth.scss @@ -1,8 +1,17 @@ -.modal-ssh-auth .runnabear { - left: 0; - margin: 0 auto; - position: absolute; - right: 0; - top: -119px; - z-index: 1; +.modal-ssh-auth { + + .padding-md { + @include media(xxs) { + padding: $sm; + } + } + + .runnabear { + left: 0; + margin: 0 auto; + position: absolute; + right: 0; + top: -119px; + z-index: 1; + } } diff --git a/client/directives/modals/composeSSHAuthView/composeSSHAuthView.jade b/client/directives/modals/composeSSHAuthView/composeSSHAuthView.jade index b3b7e217d..b00821d81 100644 --- a/client/directives/modals/composeSSHAuthView/composeSSHAuthView.jade +++ b/client/directives/modals/composeSSHAuthView/composeSSHAuthView.jade @@ -9,5 +9,5 @@ h1.modal-heading Authorized! section.modal-body p.text-center.text-gray.padding-md You successfully authorized with GitHub. 👍 - br - | We’ll automatically close this window. + br.hidden-xs + | We’ll automatically close this window. From 2f3ac2333eabbaf6dd445c0ef59af2a16d652a71 Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Fri, 21 Apr 2017 16:51:17 -0700 Subject: [PATCH 36/37] add orgs to key names --- .../forms/SSHKeysForm/SSHKeysFormView.jade | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade index e3400d6f9..a657286b1 100644 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade @@ -8,10 +8,13 @@ section.label-description | . ol.list-bordered( - ng-init = "keys = [\ - {username: 'Myztiq', fingerprint: '40:71:04:a8:3b:ea:a8:90:f6:99:6c:7a:22:f7:c0:15', avatar: 'https://avatars1.githubusercontent.com/u/495765'},\ - {username: 'podviaznikov', fingerprint: 'e2:81:ae:03:43:1a:ba:cf:4e:e0:79:37:69:40:58:56', avatar: 'https://avatars1.githubusercontent.com/u/429706'}\ - ]" + ng-init = "\ + keys = [\ + {username: 'Myztiq', fingerprint: '40:71:04:a8:3b:ea:a8:90:f6:99:6c:7a:22:f7:c0:15', avatar: 'https://avatars1.githubusercontent.com/u/495765'},\ + {username: 'podviaznikov', fingerprint: 'e2:81:ae:03:43:1a:ba:cf:4e:e0:79:37:69:40:58:56', avatar: 'https://avatars1.githubusercontent.com/u/429706'}\ + ];\ + currentOrg = 'CodeNow'\ + " ) //- if no key exists for the current user @@ -59,7 +62,9 @@ ol.list-bordered( xlink:href = "#icons-key" ) .grid-block.vertical.p - p.strong {{key.username}} User Key + p.strong.text-overflow( + title = "{{key.username}} User Key for {{currentOrg}}" + ) {{key.username}} User Key for {{currentOrg}} p.monospace.text-gray.text-overflow {{key.fingerprint}} a.grid-block.shrink.noscroll.align-center.btn.gray.btn-xs.btn-authorized( ng-include = "'SSHAuthorizeButton'" From e54742c4480caf8ac04421a0aa4efb202ba9482a Mon Sep 17 00:00:00 2001 From: Taylor Dolan Date: Fri, 21 Apr 2017 17:07:07 -0700 Subject: [PATCH 37/37] add documentation link --- .../settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade index a657286b1..2ee3e19a7 100644 --- a/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade +++ b/client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade @@ -1,6 +1,11 @@ section.label-description .label-col SSH Keys - .small.text-gray Keys will be added to containers at build and run time, and can be + .small.text-gray Keys will be added to containers at build and run time + a.link( + href = "#" + target = "_blank" + ) using ssh-agent + | , and can be a.link( href = "https://github.com/settings/keys" target = "_blank"