diff --git a/.jshintrc b/.jshintrc index 08096eff..45569263 100644 --- a/.jshintrc +++ b/.jshintrc @@ -2,7 +2,8 @@ "predef": [ "document", "window", - "-Promise" + "-Promise", + "jQuery" ], "browser": true, "boss": true, diff --git a/Brocfile.js b/Brocfile.js deleted file mode 100644 index 1ff72870..00000000 --- a/Brocfile.js +++ /dev/null @@ -1,54 +0,0 @@ -/* global require, module */ - -var EmberApp = require('ember-cli/lib/broccoli/ember-app'); - -var fingerprint, - assetsHost; - -if (process.env.DISABLE_FINGERPRINTS) { - fingerprint = false; -} else { - fingerprint = { - extensions: ['js', 'css', 'png', 'jpg', 'gif', 'map', 'svg'] - }; - - if (assetsHost = process.env.ASSETS_HOST) { - if (assetsHost.substr(-1) !== '/') { - assetsHost = assetsHost + '/' - } - fingerprint.prepend = assetsHost - } -} - -var app = new EmberApp({ - fingerprint: fingerprint, - vendorFiles: { - // next line is needed to prevent ember-cli to load - // handlebars (it happens automatically in 0.1.x) - 'handlebars.js': null - } -}); - -app.import('bower_components/pusher/dist/pusher.js'); -app.import('bower_components/jquery-timeago/jquery.timeago.js'); -app.import('bower_components/visibilityjs/lib/visibility.core.js'); -app.import('bower_components/visibilityjs/lib/visibility.timers.js'); -app.import('bower_components/JavaScript-MD5/js/md5.js'); -app.import('vendor/ansiparse.js'); -app.import('vendor/log.js'); -app.import('vendor/customerio.js'); -app.import('bower_components/moment/moment.js'); -// Use `app.import` to add additional libraries to the generated -// output files. -// -// If you need to use different assets in different -// environments, specify an object as the first parameter. That -// object's keys should be the environment name and the values -// should be the asset to use in that environment. -// -// If the library that you are including contains AMD or ES6 -// modules that you would like to import into your application -// please specify an object with the list of modules as keys -// along with the exports of each module as its value. - -module.exports = app.toTree(); diff --git a/app/components/add-env-var.coffee b/app/components/add-env-var.coffee new file mode 100644 index 00000000..df96537e --- /dev/null +++ b/app/components/add-env-var.coffee @@ -0,0 +1,46 @@ +`import Ember from 'ember'` + +AddEnvVarComponent = Ember.Component.extend + + classNames: ['form--envvar'] + classNameBindings: ['nameIsBlank:form-error'] + + store: Ember.inject.service() + + isValid: () -> + if Ember.isBlank(@get('name')) + this.set('nameIsBlank', true) + false + else + true + + reset: -> + @setProperties(name: null, value: null, public: null) + + actions: + save: -> + return if @get('isSaving') + @set('isSaving', true) + + if @isValid() + env_var = @get('store').createRecord('env_var', + name: @get('name') + value: @get('value') + public: @get('public') + repo: @get('repo') + ) + + self = this + env_var.save().then => + @set('isSaving', false) + @reset() + , => + @set('isSaving', false) + else + @set('isSaving', false) + + nameChanged: -> + this.set('nameIsBlank', false) + + +`export default AddEnvVarComponent` diff --git a/app/components/add-ssh-key.coffee b/app/components/add-ssh-key.coffee new file mode 100644 index 00000000..38bada68 --- /dev/null +++ b/app/components/add-ssh-key.coffee @@ -0,0 +1,73 @@ +# `import Ember from 'ember'` + +AddSshKeyComponent = Ember.Component.extend + + classNames: ['form--sshkey'] + classNameBindings: ['valueError:form-error'] + + store: Ember.inject.service() + isSaving: false + + didInsertElement: () -> + id = @get('repo.id') + model = @get('store').recordForId('sshKey', id) + # TODO: this can be removed in favor of simply unloading record + # once https://github.com/emberjs/data/pull/2867 + # and https://github.com/emberjs/data/pull/2870 are merged + if model + @get('store').dematerializeRecord(model) + typeMap = @get('store').typeMapFor('sshKey') + idToRecord = typeMap.idToRecord + delete idToRecord[id] + + model = @get('store').createRecord('sshKey', id: id) + @set('model', model) + + isValid: () -> + if Ember.isBlank(@get('value')) + this.set('valueError', 'Value can\'t be blank.') + false + else + true + + reset: -> + @setProperties(description: null, value: null) + + valueChanged: (-> + this.set('valueError', false) + ).observes('value') + + addErrorsFromResponse: (errArr) -> + error = errArr[0] + if error.code == 'not_a_private_key' + this.set('valueError', 'This key is not a private key.') + else if error.code == 'key_with_a_passphrase' + this.set('valueError', 'The key can\'t have a passphrase.') + + actions: + + save: -> + this.set('valueError', false) + return if @get('isSaving') + @set('isSaving', true) + if @isValid() + + ssh_key = @get('model').setProperties( + description: @get('description') + value: @get('value') + ) + + ssh_key.save().then => + @set('isSaving', false) + @reset() + + @sendAction('sshKeyAdded', ssh_key) + , (error) => + @set('isSaving', false) + if error.errors + @addErrorsFromResponse(error.errors) + + else + @set('isSaving', false) + +`export default AddSshKeyComponent` diff --git a/app/components/env-var.coffee b/app/components/env-var.coffee new file mode 100644 index 00000000..61acca7e --- /dev/null +++ b/app/components/env-var.coffee @@ -0,0 +1,29 @@ +`import Ember from 'ember'` + +EnvVarComponent = Ember.Component.extend + + classNames: ['settings-envvar'] + classNameBindings: ['envVar.public:is-public'] + + isDeleting: false + + validates: + name: ['presence'] + + actionType: 'Save' + showValueField: Ember.computed.alias('public') + + value: ( (key, value) -> + if @get('envVar.public') + @get('envVar.value') + else + '••••••••••••••••' + ).property('envVar.value', 'envVar.public') + + actions: + delete: -> + return if @get('isDeleting') + @set('isDeleting', true) + @get('envVar').destroyRecord() + +`export default EnvVarComponent` diff --git a/app/components/hook-switch.coffee b/app/components/hook-switch.coffee index 18468089..7f76944f 100644 --- a/app/components/hook-switch.coffee +++ b/app/components/hook-switch.coffee @@ -2,7 +2,7 @@ HookSwitchComponent = Ember.Component.extend tagName: 'a' - classNames: ['travis-switch', 'switch'] + classNames: ['switch--icon'] classNameBindings: ['active'] activeBinding: "hook.active" diff --git a/app/components/limit-concurrent-builds.coffee b/app/components/limit-concurrent-builds.coffee new file mode 100644 index 00000000..e4eff2d8 --- /dev/null +++ b/app/components/limit-concurrent-builds.coffee @@ -0,0 +1,40 @@ +`import Ember from 'ember'` + +LimitConcurrentBuildsComponent = Ember.Component.extend + + classNames: ['limit-concurrent-builds'] + + description: (-> + description = "Limit concurrent jobs" + if @get('enabled') + description += " " + description + ).property('enabled') + + + actions: + toggle: -> + unless @get('enabled') + return if @get('value') == 0 + return if @get('isSaving') + @set('isSaving', true) + + savingFinished = => + @set('isSaving', false) + + @get('repo').saveSettings(maximum_number_of_builds: 0).then(savingFinished, savingFinished) + @set('value', 0) + + limitChanged: -> + repo = @get('repo') + limit = parseInt(@get('value')) + if limit + @set('isSaving', true) + savingFinished = => + @set('isSaving', false) + + repo.saveSettings(maximum_number_of_builds: limit). + then(savingFinished, savingFinished) + + +`export default LimitConcurrentBuildsComponent` diff --git a/app/components/loading-indicator.coffee b/app/components/loading-indicator.coffee index b53ac20a..a076ae52 100644 --- a/app/components/loading-indicator.coffee +++ b/app/components/loading-indicator.coffee @@ -2,7 +2,7 @@ LoadingIndicatorComponent = Ember.Component.extend tagName: 'div' - classNameBindings: ['center:loading-container'] + classNameBindings: ['center:loading-container', 'inline:inline-block'] center: false `export default LoadingIndicatorComponent` diff --git a/app/components/settings-switch.coffee b/app/components/settings-switch.coffee new file mode 100644 index 00000000..53677cce --- /dev/null +++ b/app/components/settings-switch.coffee @@ -0,0 +1,21 @@ +`import Ember from 'ember'` + +SettingsSwitchComponent = Ember.Component.extend + + tagName: 'a' + classNames: ['switch'] + classNameBindings: ['active'] + + click: -> + return if @get('isSaving') + @set('isSaving', true) + @toggleProperty('active') + setting = {} + setting[@get('key')] = @get('active') + @get('repo').saveSettings(setting).then => + @set('isSaving', false) + , => + @set('isSaving', false) + Travis.flash(error: 'There was an error while saving settings. Please try again.') + +`export default SettingsSwitchComponent` diff --git a/app/components/ssh-key.coffee b/app/components/ssh-key.coffee new file mode 100644 index 00000000..33475041 --- /dev/null +++ b/app/components/ssh-key.coffee @@ -0,0 +1,21 @@ +`import Ember from 'ember'` + +SshKeyComponent = Ember.Component.extend + + classNames: ['settings-sshkey'] + + isDeleting: false + + actions: + delete: -> + return if @get('isDeleting') + @set('isDeleting', true) + + deletingDone = => @set('isDeleting', false) + + @get('key').deleteRecord() + @get('key').save().then(deletingDone, deletingDone).then => + @sendAction('sshKeyDeleted') + + +`export default SshKeyComponent` diff --git a/app/controllers/settings.coffee b/app/controllers/settings.coffee new file mode 100644 index 00000000..c96cc4cc --- /dev/null +++ b/app/controllers/settings.coffee @@ -0,0 +1,18 @@ +`import Ember from 'ember'` + +SettingsController = Ember.Controller.extend + envVars: Ember.computed.filterBy('model.envVars', 'isNew', false) + + actions: + sshKeyAdded: (sshKey) -> + @set('model.customSshKey', sshKey) + + sshKeyDeleted: -> + @set('model.customSshKey', null) + + deactivate: -> + console.log('deactivate') + debugger + + +`export default SettingsController` diff --git a/app/initializers/userlike.coffee b/app/initializers/userlike.coffee new file mode 100644 index 00000000..e1c02e57 --- /dev/null +++ b/app/initializers/userlike.coffee @@ -0,0 +1,13 @@ +`import config from 'travis/config/environment'` + +initialize = (container) -> + + + userlikeData = {} + +UserlikeInitializer = + name: 'userlike' + initialize: initialize + +`export {initialize}` +`export default UserlikeInitializer` diff --git a/app/models/ssh-key.coffee b/app/models/ssh-key.coffee index 896712a3..8bb1f2fd 100644 --- a/app/models/ssh-key.coffee +++ b/app/models/ssh-key.coffee @@ -5,5 +5,6 @@ SshKey = Model.extend value: DS.attr() description: DS.attr() fingerprint: DS.attr() + isCustom: true `export default SshKey` diff --git a/app/routes/settings.coffee b/app/routes/settings.coffee index aeaae42c..33d63f16 100644 --- a/app/routes/settings.coffee +++ b/app/routes/settings.coffee @@ -1,8 +1,54 @@ `import TravisRoute from 'travis/routes/basic'` +`import Ajax from 'travis/utils/ajax'` +`import config from 'travis/config/environment'` Route = TravisRoute.extend needsAuth: true setupController: (controller, model) -> + @_super.apply(this, arguments) + controller.set('repo', @modelFor('repo')) @controllerFor('repo').activate('settings') + controller.set('concurrentBuildsLimit', !!model.settings.maximum_number_of_builds) + + fetchEnvVars: () -> + repo = @modelFor('repo') + repo.get('envVars.promise') + + fetchCustomSshKey: () -> + repo = @modelFor('repo') + self = this + @store.find('sshKey', repo.get('id')).then ( (result) -> result unless result.get('isNew') ), (xhr) -> + if xhr.status == 404 + # if there is no model, just return null. I'm not sure if this is the + # best answer, maybe we should just redirect to different route, like + # ssh_key.new or ssh_key.no_key + return false + + fetchSshKey: () -> + repo = @modelFor('repo') + Ajax.get "/repos/#{repo.get('id')}/key", (data) => + Ember.Object.create(fingerprint: data.fingerprint) + + fetchRepositoryActiveFlag: -> + repoId = @modelFor('repo').get('id') + apiEndpoint = config.apiEndpoint + + $.ajax("#{apiEndpoint}/v3/repo/#{repoId}", { + headers: { + Authorization: 'token ' + @auth.token() + } + }).then( (response) -> + response.active + ); + + model: () -> + return Ember.RSVP.hash({ + settings: @modelFor('repo').fetchSettings(), + envVars: this.fetchEnvVars(), + sshKey: this.fetchSshKey(), + customSshKey: this.fetchCustomSshKey(), + repositoryActive: this.fetchRepositoryActiveFlag() + }); + `export default Route` diff --git a/app/routes/settings/index.coffee b/app/routes/settings/index.coffee index a4bedd1a..d9845989 100644 --- a/app/routes/settings/index.coffee +++ b/app/routes/settings/index.coffee @@ -1,11 +1,37 @@ `import TravisRoute from 'travis/routes/basic'` +`import config from 'travis/config/environment'` Route = TravisRoute.extend titleToken: 'Settings' model: -> repo = @modelFor('repo') + repo.fetchSettings().then (settings) -> + + console.log(settings) repo.set('settings', settings) + # return { + + # settings: (-> + # $.ajax('https://api.travis-ci.org/v3/repos/#{repo.id}/settings', { + # headers: { + # Authorization: 'token ' + @auth.token() + # } + # }).then (response) -> + # console.log(response); + # return response + # ) + # env_vars: (-> + # $.ajax('/settings/env_vars?repository_id={repo.id}', { + # headers: { + # Authorization: 'token ' + @auth.token() + # } + # }).then (response) -> + # console.log(response); + # return response + # ) + # } + `export default Route` diff --git a/app/styles/app.scss b/app/styles/app.scss index 8d65e9c2..9542c65b 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -10,18 +10,19 @@ @import "app/auth"; @import "app/forms"; @import "app/github"; + @import "app/main/annotations"; @import "app/userlike"; @import "app/main/list"; @import "app/main/log"; -@import "app/main/sponsors"; +// @import "app/main/sponsors"; @import "app/misc"; @import "app/popup"; // @import "app/pro"; -@import "app/settings"; +// @import "app/settings"; -@import "app/components/travis-switch"; +// @import "app/components/travis-switch"; @import "app/components/sync-button"; @import "app/components/loading-indicator"; @@ -40,8 +41,10 @@ @import "app/modules/media"; @import "app/modules/switch"; @import "app/modules/memberlist"; +@import "app/modules/forms"; @import "app/modules/notice"; + @import "app/layout"; @import "app/layouts/dashboard"; @import "app/layouts/error"; @@ -61,3 +64,5 @@ @import "app/layouts/getting-started"; @import "app/layouts/first-sync"; @import "app/layouts/missing-notice"; +@import "app/layouts/settings"; + diff --git a/app/styles/app/_mixins/vars.sass b/app/styles/app/_mixins/vars.sass index c7a3c05d..37e869da 100644 --- a/app/styles/app/_mixins/vars.sass +++ b/app/styles/app/_mixins/vars.sass @@ -2,10 +2,7 @@ $font-size-ml: 18px $font-size-m: 16px $font-size-sm: 14px $line-height-m: 1.3 - -// colors -$teal1: #5BA5A4 -$teal2: #63A4A3 +$font-size-s: 12px $blue-grey: #404650 $blue-grey-light: #d8e2e6 @@ -34,7 +31,7 @@ $error-color: $fail-color $start-color: #D2C93B $start-bg-color: #D2CA24 $cancel-color: #A1A0A0 -$dropdown-color: $teal1 +$dropdown-color: $teal-light $created-color: #CDBC2C $dashboard-text-color: #9d9fa1 diff --git a/app/styles/app/components/loading-indicator.sass b/app/styles/app/components/loading-indicator.sass index 165035ba..80729325 100644 --- a/app/styles/app/components/loading-indicator.sass +++ b/app/styles/app/components/loading-indicator.sass @@ -26,6 +26,8 @@ text-align: center padding: 1.5em 1em +.inline-block + display: inline-block .loading-indicator--white @extend .loading-indicator diff --git a/app/styles/app/layouts/build-job.sass b/app/styles/app/layouts/build-job.sass index 9006b152..615196af 100644 --- a/app/styles/app/layouts/build-job.sass +++ b/app/styles/app/layouts/build-job.sass @@ -71,7 +71,7 @@ overflow: hidden .job-id width: grid-calc(3, 24) - border-right: solid 1px $grey-lighter + border-right: solid 1px $cream-dark .job-os width: grid-calc(1, 24) text-align: center diff --git a/app/styles/app/layouts/owner.sass b/app/styles/app/layouts/owner.sass index 47245fbe..afacf718 100644 --- a/app/styles/app/layouts/owner.sass +++ b/app/styles/app/layouts/owner.sass @@ -112,7 +112,7 @@ .active, .active:hover, position: relative - color: $teal2 + color: $teal-dark &:after content: "" position: absolute @@ -120,7 +120,7 @@ bottom: -0.25em width: 100% height: 2px - background-color: $teal1 + background-color: $teal-light .active font-weight: 600 diff --git a/app/styles/app/layouts/profile.sass b/app/styles/app/layouts/profile.sass index 2cec16ca..f9a135d5 100644 --- a/app/styles/app/layouts/profile.sass +++ b/app/styles/app/layouts/profile.sass @@ -152,7 +152,6 @@ p.profile-user-last vertical-align: middle .profile-settings display: inline-block - margin-left: 1rem; padding: .2em .2em .2em .5em; height: 28px; vertical-align: bottom; diff --git a/app/styles/app/layouts/settings.sass b/app/styles/app/layouts/settings.sass new file mode 100644 index 00000000..72bc903e --- /dev/null +++ b/app/styles/app/layouts/settings.sass @@ -0,0 +1,198 @@ + +.small-title + font-size: 18px + color: $teal-light + font-weight: 400 + +.settings + padding-top: .8em + +.settings-section + padding: 0 0 1em + margin-bottom: 3em + border-bottom: 2px solid #f2f3ef + &:last-of-type + border-bottom: none + .small-title + margin-top: 0 + + .switch + div + display: inline-block + +%settings-list + padding: 0 + margin: 0 + list-style: none + li + margin-bottom: 1rem + +.settings-list--columns + @extend %settings-list + li + @media #{$medium-up} + display: inline-block + width: grid-calc(11, 24) + +.settings-list--envvars + @extend %settings-list + +.settings-input + display: inline-block + margin-right: 1.4rem + vertical-align: middle + & + .label + vertical-align: middle + input + width: 80px + font-size: $font-size-s + text-align: center + +.limit-concurrent-builds + input + display: inline-block + width: 3em + height: 30px + margin: 0 .5em + text-align: center + box-shadow: none + +%settings-row + padding: .6em .5em + border-radius: 4px + background-color: #F6F5F5 + @media #{$medium-up} + height: 47px + +.settings-envvar + @extend %settings-row + +.settings-sshkey + @extend %settings-row + display: block + margin-bottom: 1rem + overflow: hidden + span + vertical-align: middle + @media #{$medium-up} + overflow: visible + +%settings-name-section + display: inline-block + position: relative + vertical-align: middle + overflow: hidden + white-space: nowrap + &:after + content: "" + @include fadeOut(right, -90deg, #F6F5F5) + +.ssh-key-name + @extend %settings-name-section + width: 100% + margin-bottom: 1em + .icon-key + @extend %icon + @extend .icon-key + width: 1.2em + height: 1.3em + + @media #{$medium-up} + width: 32% + margin-bottom: 0 + +.env-var-name + @extend %settings-name-section + width: 100% + margin-bottom: 1em + @media #{$medium-up} + width: grid-calc(6, 12) + margin-bottom: 0 + + +%settings-value-section + display: inline-block + vertical-align: middle + overflow: hidden + +.ssh-key-value + @extend %settings-value-section + word-break: break-all + .icon-fingerprint + @extend %icon + @extend .icon-fingerprint + width: 1.3em + height: 1.3em + margin-right: .5em + @media #{$medium-up} + width: grid-calc(6, 12) + word-break: normal + white-space: nowrap + +.env-var-value + @extend %settings-value-section + white-space: nowrap + width: 76% + @media #{$medium-up} + width: grid-calc(3, 12) + input + display: inline-block + width: 100% + padding: 0.7em 0.5em 0.7em 2.6em + border-radius: 4px + border: none + background-color: #eeedec + color: #8e8f8e + @extend .icon-lock + background: + size: 14px + repeat: no-repeat + position: 0.8em 0.7em + .is-public & + input + background-image: none; + padding: 0.4em 0 0.5em 0.9em; + font-size: 14px; + +%settings-action-section + display: inline-block + position: relative + float: right + width: 24% + vertical-align: middle + text-align: center + .icon-delete + @extend %icon + @extend .icon-delete + width: 1.1em + height: 1.6em + background-position: 0 4px + &:hover + .icon-delete + @extend .icon-delete-hover + @media #{$medium-up} + width: grid-calc(4, 24) + @media #{$xlarge-up} + width: grid-calc(4, 36) + +.env-var-action + @extend %settings-action-section + a + padding: 1em + +.ssh-key-action + @extend %settings-action-section + margin-top: 1em + @media #{$medium-up} + margin-top: 0 + .icon-delete + margin: .2em auto 0 + .icon-delete-disabled + @extend %icon + @extend .icon-delete-disabled + display: block + width: 1.1em + height: 1.3em + margin: .2em auto 0 + + diff --git a/app/styles/app/layouts/sidebar.sass b/app/styles/app/layouts/sidebar.sass index bb6fdfbd..7ed7b3c1 100644 --- a/app/styles/app/layouts/sidebar.sass +++ b/app/styles/app/layouts/sidebar.sass @@ -77,7 +77,7 @@ $sb-font-size: 14px #tab_new a:hover .icon--plus:after - color: $teal1 + color: $teal-light &:after bottom: -2px diff --git a/app/styles/app/modules/buttons.sass b/app/styles/app/modules/buttons.sass index 4d89ea33..d081c2a9 100644 --- a/app/styles/app/modules/buttons.sass +++ b/app/styles/app/modules/buttons.sass @@ -4,33 +4,28 @@ $button-border-color: #d4d4d4 -.button +.button, +.btn font-family: $font-family-sans-serif - font-size: $font-size-tiny - font-weight: normal position: relative overflow: visible display: inline-block padding: 5px 10px - border: 1px solid $button-border-color - margin: 0 - background-color: #E9E9E7 - background-clip: padding-box cursor: pointer outline: none text-decoration: none text-align: center - color: $gray-dark-3 + color: $white white-space: nowrap border-radius: 2px + background-color: $grey-lighter .button:hover, .button:focus, .button:active, .button.active border-color: $button-border-color - border-bottom-color: #2a65a0 - background-color: #40454f + background-color: $grey-medium text-decoration: none color: #fff @@ -85,9 +80,6 @@ $button-border-color: #d4d4d4 position: relative top: -0.15em -.btn - @extend .button - border-radius: 2px .button--green border: none font-size: $font-size-small diff --git a/app/styles/app/modules/forms.sass b/app/styles/app/modules/forms.sass new file mode 100644 index 00000000..82f8976d --- /dev/null +++ b/app/styles/app/modules/forms.sass @@ -0,0 +1,79 @@ + +%input-base + display: inline-block + width: 100% + padding: .4em .4em + border: 1px solid #eeedec + border-radius: 4px + color: #8e8f8e + font-size: $font-size-sm + +input[type="text"], +input[type="email"], +input[type="number"], +input[type="password"] + @extend %input-base + height: 32px + +textarea + @extend %input-base + + +.form-submit + display: inline-block + border: none + border-radius: 4px + padding: .5em .8em + color: $white + font-size: $font-size-sm + font-weight: 300 + background-color: $grey-lighter + &:hover + background-color: #3BA85D + cursor: pointer + + +.form--sshkey + .form-elem + margin-bottom: .5rem + @media #{$medium-up} + .form-elem + max-width: 460px + + +.form--envvar + .form-elem + display: inline-block + vertical-align: top + width: 100% + margin-bottom: 1em + .switch + .label + font-size: $font-size-s + width: 7rem; + line-height: 1.2; + + @media #{$medium-up} + .form-elem + margin-bottom: 0 + .form-elem:first-of-type, + .form-elem:nth-of-type(2) + width: 31.5% + margin-right: 1em + .form-elem:nth-of-type(3) + width: 24% + .form-elem:last-of-type + width: 6% + float: right + text-align: right + + +.form-error + .env-name, + .ssh-value + border: $fail-color 2px solid + .form-error-message + color: $fail-color + font-size: 14px + padding: .2em 0 + margin: 0 diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass index 64d3a814..87308f68 100644 --- a/app/styles/app/modules/icons.sass +++ b/app/styles/app/modules/icons.sass @@ -165,11 +165,26 @@ .icon--dismiss-grey background-image: inline-image('svg/dismiss.svg') -.icon-hook-on +%icon-hook-on background-image: inline-image('svg/hooks-on.svg') -.icon-hook-off +%icon-hook-off background-image: inline-image('svg/hooks-off.svg') +.icon-delete + background-image: inline-image('svg/delete.svg') + +.icon-delete-hover + background-image: inline-image('svg/delete-hover.svg') + +.icon-delete-disabled + background-image: inline-image('svg/delete-disabled.svg') + +.icon-key + background-image: inline-image('svg/key.svg') + +.icon-fingerprint + background-image: inline-image('svg/fingerprint.svg') + .icon--plus &:after content: "+" diff --git a/app/styles/app/modules/switch.sass b/app/styles/app/modules/switch.sass index b29ca7af..07079dfe 100644 --- a/app/styles/app/modules/switch.sass +++ b/app/styles/app/modules/switch.sass @@ -1,55 +1,85 @@ -.profile-switch - $switch-height: 28px - $switch-inner-height: 22px - $switch-width: 62px - $switch-inner-width: 27px +%switch + $switch-height: 32px + $switch-width: 80px - span - display: none + $switch-inner-width: 36px + $switch-inner-heigth: 26px - .switch - box-sizing: border-box - position: relative + .switch-inner + display: inline-block width: $switch-width height: $switch-height - background-color: #d1d1d1 + margin-right: 1em + padding: 3px 3px 3px 4px + vertical-align: middle + overflow: visible + background-color: #E2E1E2 + border-radius: 4px 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 + span 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 + height: $switch-inner-heigth + border-radius: 4px + background-color: #A5A4A4 + color: $white + text-align: center + font-weight: 300 + font-size: 12px + line-height: 2.2 - &.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 + span + display: inline-block + vertical-align: middle + + .label + vertical-align: middle + font-size: $font-size-m + color: $grey-medium + display: inline-block + &.label--small .label + width: 7em + font-size: 12px + line-height: 1.3 - &.disabled - cursor: default - pointer-events: none - opacity: .5 + .on + display: none + margin-left: 0 + .off + margin-left: 36px - .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 + .switch-inner + background-color: #B8D6B9 + span + background-color: #3BA85D + .on + display: inline-block + .off + display: none + + &.disabled + cursor: default + pointer-events: none + opacity: .5 + + +.switch + @extend %switch + +.switch--icon + @extend %switch + + .on, + .off + text-indent: 99%; + overflow: hidden; + white-space: nowrap; + background-size: 1.1em + background-position: 50% + background-repeat: no-repeat + .off + @extend %icon-hook-off + .on + @extend %icon-hook-on diff --git a/app/styles/app/modules/tabs.sass b/app/styles/app/modules/tabs.sass index a5889c10..1423673c 100644 --- a/app/styles/app/modules/tabs.sass +++ b/app/styles/app/modules/tabs.sass @@ -20,7 +20,7 @@ .active a, a:hover position: relative - color: $teal2 + color: $teal-dark &:after content: "" position: absolute @@ -28,7 +28,7 @@ bottom: -0.25em width: 100% height: 2px - background-color: $teal2 + background-color: $teal-dark .active a font-weight: 600 @@ -68,7 +68,7 @@ color: $grey-light padding: .5em 0 .active - color: $teal2 + color: $teal-dark @media #{$medium-up} border-bottom: solid $cream-dark 2px diff --git a/app/styles/app/modules/tooltips.sass b/app/styles/app/modules/tooltips.sass index db463507..4c6d783f 100644 --- a/app/styles/app/modules/tooltips.sass +++ b/app/styles/app/modules/tooltips.sass @@ -1,42 +1,85 @@ +%tooltip + &:hover .tooltip-bubble + transform: translateY(0) + opacity: 1 -$tooltip-grey: #6A6C6D + .tooltip-bubble + position: absolute + top: -2.8em + width: auto + height: 1.9em + margin: auto + padding: .3em .4em .3em + z-index: 5 + background-color: #818383 + border-radius: 4px + color: $white + font-size: $font-size-sm + line-height: 1.3 + text-align: center + white-space: nowrap + + transition: all 100ms ease + transform: translateY(20%) + opacity: 0 + + a + color: $white + &:hover + text-decoration: underline + + &:before + content: "" + position: absolute + bottom: -0.3em + width: 1em + height: 1em + transform: rotate(45deg) + z-index: -1 + background-color: #818383 .tooltip + @extend %tooltip + .tooltip-bubble + right: 0 + left: 0 + max-width: 5em + &:before + left: 40% + +.tooltip--height + @extend %tooltip + .tooltip-bubble + right: 0 + left: 0 + top: -4em + height: 3.2em + max-width: 8.6em + &:before + left: 45% + +.tooltip--jobs + @extend %tooltip + display: inline-block position: relative - display: none + .tooltip-bubble + top: -4.5em + left: -1.9em + height: 3.7em + &:before + left: 15% -.tooltip-inner - position: absolute - bottom: 0 - right: 0 - background: $tooltip-grey - color: $white - font-size: $font-size-small - line-height: 18px - text-align: center - padding: 8px 5px - @extend %border-radius-4px - - &:after - content: '' - position: absolute - top: 98% - right: 3em - width: 0 - height: 0 - border-top: 13px solid $tooltip-grey - border-right: 13px solid transparent - border-left: 13px solid transparent - - @media #{$small-only} - bottom: -2.5em - - @media #{$medium-up} - width: 18rem - -.tooltip-inner - height: 4.1em - top: -8em - left: 4em - &:after - left: 3.7em \ No newline at end of file +.tooltip--settings + @extend %tooltip + display: inline-block + position: relative + .icon + width: 1.2em + height: 1.2em + vertical-align: middle + .tooltip-bubble + top: -4em + left: -1.9em + height: 3.2em + &:before + left: 2em diff --git a/app/styles/app/userlike.sass b/app/styles/app/userlike.sass index e1f809bf..20622ffd 100644 --- a/app/styles/app/userlike.sass +++ b/app/styles/app/userlike.sass @@ -2,7 +2,7 @@ .feedback-button display: none position: fixed - right: 1% + right: 4% left: auto bottom: 0 margin: 0 diff --git a/app/templates/account.hbs b/app/templates/account.hbs index 3b56f897..e535d52c 100644 --- a/app/templates/account.hbs +++ b/app/templates/account.hbs @@ -22,7 +22,7 @@ {{/if}}
-

{{view.name}}

+

{{user.name}}

{{#if user.isSyncing}} @@ -94,7 +94,16 @@