diff --git a/app/routes/settings/index.coffee b/app/routes/settings/index.coffee index a4bedd1a..325b1fb7 100644 --- a/app/routes/settings/index.coffee +++ b/app/routes/settings/index.coffee @@ -5,7 +5,16 @@ Route = TravisRoute.extend model: -> repo = @modelFor('repo') + console.log('######### YEHA ###############') repo.fetchSettings().then (settings) -> + + console.log(settings) repo.set('settings', settings) + # return Ember.RSVP.hash({ + # settings: repo.fetchSettings(), + # envVars: repo.envVars(), + # sshKey: repo.sshKey() + # }) + `export default Route` diff --git a/app/styles/app.scss b/app/styles/app.scss index 344aaa5f..699c03dc 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -21,7 +21,7 @@ // @import "app/pro"; // @import "app/settings"; -@import "app/components/travis-switch"; +// @import "app/components/travis-switch"; @import "app/components/sync-button"; @import "app/components/loading-indicator"; diff --git a/app/styles/app/_mixins/vars.sass b/app/styles/app/_mixins/vars.sass index c7a3c05d..9e70afe0 100644 --- a/app/styles/app/_mixins/vars.sass +++ b/app/styles/app/_mixins/vars.sass @@ -2,6 +2,7 @@ $font-size-ml: 18px $font-size-m: 16px $font-size-sm: 14px $line-height-m: 1.3 +$font-size-s: 12px // colors $teal1: #5BA5A4 diff --git a/app/styles/app/layouts/settings.sass b/app/styles/app/layouts/settings.sass index 4bd93130..f6ed552e 100644 --- a/app/styles/app/layouts/settings.sass +++ b/app/styles/app/layouts/settings.sass @@ -1,4 +1,3 @@ -// If you'd no longer like to run this project on Travis CI you can deactivate it now.
You will be able to reactivate it in the future if you'd like to. $add-green: #3AA95E $add-green-hover: #3BA85D @@ -15,16 +14,6 @@ $deactivate-bg: #e93d3c $heading-color: #63a4a3 $heading-size: 18px -$switch-height: 32px -$switch-size: 11px -$switch-color: $white - -$switch-descr-size: 16px -$switch-descr-color: #8e8f8e - -$switch-descr-inline-size: 12px -$switch-descr-inline-color: #8e8f8e - $input-border: 1px solid #eeedec $input-radius: 4px $input-color: #8e8f8e @@ -40,3 +29,50 @@ $env-vars-radius: 4px $env-vars-pw-bg: #eeedec $input-main-height: 30px + + +.small-title + font-size: 18px + color: $heading-color + font-weight: 400 + + +.settings + padding-top: .8em + +.settings-section + padding: 0 0 1em + margin-bottom: 1.5em + border-bottom: $setting-section-border + &:last-of-type + border-bottom: none + .small-title + margin-top: 0 + + +.settings-list + padding: 0 + margin: 0 + list-style: none + + li + margin-bottom: 1rem + @media #{$medium-up} + display: inline-block + width: grid-calc(11, 24) + +.settings-input + display: inline-block; + margin-right: 1rem; + vertical-align: middle + & + .label + vertical-align: middle + input + border: 1px solid #eeedec + border-radius: 4px + color: #8e8f8e + text-align: center + height: 32px; + display: inline-block; + width: 80px; + \ No newline at end of file diff --git a/app/styles/app/modules/switch.sass b/app/styles/app/modules/switch.sass index b29ca7af..ca91e119 100644 --- a/app/styles/app/modules/switch.sass +++ b/app/styles/app/modules/switch.sass @@ -1,55 +1,106 @@ -.profile-switch +%switch $switch-height: 28px $switch-inner-height: 22px $switch-width: 62px $switch-inner-width: 27px + box-sizing: border-box + position: relative + width: $switch-width + height: $switch-height + background-color: #d1d1d1 + border: none + cursor: pointer + @extend %border-radius-4px + &:before + content: none + &:after + content: "" + display: block + position: absolute + top: ($switch-height - $switch-inner-height) / 2 + right: ($switch-width - ($switch-inner-width * 2)) / 2 + height: $switch-inner-height + width: $switch-inner-width + background-color: #919191 + background-repeat: no-repeat + background-size: 14px 14px + background-position: 6px + transition: right 200ms ease + @extend .icon-hook-off + @extend %border-radius-4px + + &.active + background-color: #b6d5b6 + &:after + right: $switch-width - $switch-inner-width - (($switch-width - ($switch-inner-width * 2)) / 2) + background-color: #39a85b + @extend .icon-hook-on + + &.disabled + cursor: default + pointer-events: none + opacity: .5 + + .active &.disabled + background-color: #b6d5b6 + &:after + right: $switch-width - $switch-inner-width - (($switch-width - ($switch-inner-width * 2)) / 2) + background-color: #39a85b + @extend .icon-hook-on + + + +.profile-switch span display: none .switch - box-sizing: border-box - position: relative - width: $switch-width + @extend %switch + + +// NEW SWITCH +.settings-switch + $switch-width: 80px + $switch-height: 32px + + div + display: inline-block height: $switch-height - background-color: #d1d1d1 - border: none - cursor: pointer - @extend %border-radius-4px - &:before - content: none - &:after - content: "" - display: block - position: absolute - top: ($switch-height - $switch-inner-height) / 2 - right: ($switch-width - ($switch-inner-width * 2)) / 2 - height: $switch-inner-height - width: $switch-inner-width - background-color: #919191 - background-repeat: no-repeat - background-size: 14px 14px - background-position: 6px - transition: right 200ms ease - @extend .icon-hook-off - @extend %border-radius-4px + width: $switch-width + margin-right: 1em + padding: 3px 3px 3px 4px + vertical-align: middle; + font-size: $font-size-s + border-radius: 4px + background-color: #E2E1E2 + span + display: inline-block + width: 36px + height: 26px + vertical-align: middle; + border-radius: 4px + background-color: #A5A4A4 + color: $white + text-align: center; + font-weight: 300; + line-height: 2.2; + .label + vertical-align: middle; + font-size: $font-size-m + color: $grey-medium + .on + display: none + margin-left: 0 - &.active - background-color: #b6d5b6 - &:after - right: $switch-width - $switch-inner-width - (($switch-width - ($switch-inner-width * 2)) / 2) - background-color: #39a85b - @extend .icon-hook-on - - &.disabled - cursor: default - pointer-events: none - opacity: .5 - - .active &.disabled - background-color: #b6d5b6 - &:after - right: $switch-width - $switch-inner-width - (($switch-width - ($switch-inner-width * 2)) / 2) - background-color: #39a85b - @extend .icon-hook-on + &.active + div + background-color: #B8D6B9 + span + background-color: #3BA85D + .on + display: inline-block + margin-left: 36px + .off + display: none diff --git a/app/templates/settings.hbs b/app/templates/settings.hbs index 73f1054a..2c2bf0c6 100644 --- a/app/templates/settings.hbs +++ b/app/templates/settings.hbs @@ -1,24 +1,42 @@
-

General Settings

+

General Settings

+ + +
-

Environment Variables

+

Environment Variables

+ + {{env-var}} + +
{{#if config.endpoints.sshKey}}
-

SSH Key

+

SSH Key

+ + {{ssh-key}}
{{/if}}
-

Deactivate Repository

+

Deactivate Repository

+

If you'd no longer like to run this project on Travis CI you can deactivate it now.
You will be able to reactivate it in the future if you'd like to.

+ Deactivate Repository
-
+{{!--
{{outlet}} -
+
--}}