diff --git a/app/components/jobs-item.coffee b/app/components/jobs-item.coffee index d8069bda..d2a60524 100644 --- a/app/components/jobs-item.coffee +++ b/app/components/jobs-item.coffee @@ -3,7 +3,7 @@ `import { languageConfigKeys } from 'travis/utils/keys-map';` JobsItemComponent = Ember.Component.extend - tagName: 'div' + tagName: 'li' classNameBindings: ['job.state'] classNames: ['tile', 'tile--jobs', 'row'] @@ -15,7 +15,18 @@ JobsItemComponent = Ember.Component.extend if version = config[key] output.push(languageName + ': ' + version) + gemfile = @get('job.config.gemfile') + if gemfile && @get('job.config.env') + output.push "Gemfile: #{gemfile}" + output.join(' ') ).property('job.config') + environment: (-> + if env = @get('job.config.env') + env + else if gemfile = @get('job.config.gemfile') + "Gemfile: #{gemfile}" + ).property('job.config.env', 'job.config.gemfile') + `export default JobsItemComponent` diff --git a/app/components/travis-switch.coffee b/app/components/travis-switch.coffee index a9e98a0c..2f990612 100644 --- a/app/components/travis-switch.coffee +++ b/app/components/travis-switch.coffee @@ -2,7 +2,7 @@ Component = Ember.Component.extend tagName: 'a' - classNames: ['travis-switch'] + classNames: ['travis-switch', 'switch'] classNameBindings: ['_active:active'] # TODO: how to handle overriding properties to diff --git a/app/controllers/account.coffee b/app/controllers/account.coffee index c4c5af45..f060c8da 100644 --- a/app/controllers/account.coffee +++ b/app/controllers/account.coffee @@ -47,4 +47,9 @@ Controller = Ember.ObjectController.extend @config.show_repos_hint == 'public' ) .property() + billingUrl: (-> + id = if @get('model.type') == 'user' then 'user' else @get('model.login') + "#{@get('config').billingEndpoint}/subscriptions/#{id}" + ).property('model.login', 'model.type') + `export default Controller` diff --git a/app/controllers/accounts.coffee b/app/controllers/accounts.coffee index 427549ec..d778bd6d 100644 --- a/app/controllers/accounts.coffee +++ b/app/controllers/accounts.coffee @@ -3,4 +3,8 @@ Controller = Ember.ArrayController.extend tab: 'accounts' + userName: (-> + @get('user.name') || @get('user.login') + ).property('user.login', 'user.name') + `export default Controller` diff --git a/app/models/account.coffee b/app/models/account.coffee index 8f371962..5ace3ea6 100644 --- a/app/models/account.coffee +++ b/app/models/account.coffee @@ -4,6 +4,7 @@ Account = Model.extend name: DS.attr() type: DS.attr() + avatarUrl: DS.attr() reposCount: DS.attr('number') subscribed: DS.attr('boolean') education: DS.attr('boolean') diff --git a/app/routes/account.coffee b/app/routes/account.coffee index 884e8509..3a440e03 100644 --- a/app/routes/account.coffee +++ b/app/routes/account.coffee @@ -2,7 +2,10 @@ Route = TravisRoute.extend titleToken: (model) -> - model.get('name') || model.get('login') + if model + model.get('name') || model.get('login') + else + 'Account' setupController: (controller, account) -> @_super.apply this, arguments diff --git a/app/routes/accounts.coffee b/app/routes/accounts.coffee index cda2db79..127fbb41 100644 --- a/app/routes/accounts.coffee +++ b/app/routes/accounts.coffee @@ -4,6 +4,15 @@ Route = TravisRoute.extend model: -> @store.find('account', { all: true }) + setupController: (controller, model) -> + user = model.filterBy('type', 'user')[0] + orgs = model.filterBy('type', 'organization') + + controller.set('user', user) + controller.set('organizations', orgs) + + controller.set('model', model) + renderTemplate: -> @_super.apply(this, arguments) @render 'profile_accounts', outlet: 'left', into: 'profile' diff --git a/app/styles/app.scss b/app/styles/app.scss index 041628c0..ef25d7a6 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -15,8 +15,8 @@ @import "app/getting_started"; @import "app/github"; -@import "app/left/list"; -@import "app/left"; +// @import "app/left/list"; +// @import "app/left"; @import "app/loading"; @import "app/main/annotations"; @import "app/landing"; @@ -28,8 +28,8 @@ @import "app/misc"; @import "app/popup"; @import "app/pro"; -@import "app/profile/hooks"; -@import "app/profile"; +// @import "app/profile/hooks"; +// @import "app/profile"; @import "app/requests"; // @import "app/right/lists"; // @import "app/right/sponsors"; @@ -51,6 +51,8 @@ @import "app/modules/tabs"; @import "app/modules/tooltips"; @import "app/modules/flash"; +@import "app/modules/media"; +@import "app/modules/switch"; @import "app/layout"; @import "app/layouts/dashboard"; @@ -61,4 +63,6 @@ @import "app/layouts/sidebar"; @import "app/layouts/build-job"; @import "app/layouts/sidebar"; -@import "app/top"; +@import "app/layouts/profile"; +@import "app/layouts/top"; +// @import "app/top"; diff --git a/app/styles/app/components/sync-button.sass b/app/styles/app/components/sync-button.sass index a3dd009b..900a2bb7 100644 --- a/app/styles/app/components/sync-button.sass +++ b/app/styles/app/components/sync-button.sass @@ -29,6 +29,16 @@ .sync-spinner margin-right: .5em +.profile-main + .sync-button + button + max-width: none + font-size: $font-size-sm + .sync-last + font-size: $font-size-sm + color: #adaaab + margin-left: .8rem + .sync-last display: inline-block margin: 0 diff --git a/app/styles/app/layout.sass b/app/styles/app/layout.sass index 358cf42a..e75034fb 100644 --- a/app/styles/app/layout.sass +++ b/app/styles/app/layout.sass @@ -2,6 +2,13 @@ .centered .row max-width: 1024px + .main + margin: auto + max-width: 1024px + padding-left: 0 !important + padding-right: 0 !important + padding-top: 30px !important + .main, .profile-view diff --git a/app/styles/app/layouts/build-job.sass b/app/styles/app/layouts/build-job.sass index e439e783..f28cdd66 100644 --- a/app/styles/app/layouts/build-job.sass +++ b/app/styles/app/layouts/build-job.sass @@ -121,3 +121,7 @@ .is-empty opacity: .5 + +.jobs-list + @include resetul + diff --git a/app/styles/app/layouts/profile.sass b/app/styles/app/layouts/profile.sass new file mode 100644 index 00000000..2c0e5a54 --- /dev/null +++ b/app/styles/app/layouts/profile.sass @@ -0,0 +1,183 @@ +.profile + font-size: $font-size-sm + font-weight: 400 + + +.profile-main + header + h1 + margin: 0 1.7rem 0 0 + color: #808080 + font-size: 35px + font-weight: 400 + line-height: 1.45 + p:not(.sync-last) + font-size: $font-size-sm + color: #adaaab + margin: 2rem 0 1rem 0 + a + color: #adaaab + text-decoration: underline + @media #{$medium-up} + .profile-header, .sync-button, .ember-view + display: inline-block + vertical-align: middle + .sync-button + margin-top: .5em + @media #{$large-up} + .profile-header + position: relative + white-space: nowrap; + max-width: 77%; + overflow: hidden; + &:after + @include fadeOut(right, -90deg, $white) + + .cta-btn + text-align: right + @media #{$large-up} + position: absolute + top: 1rem + right: 0 + +.profile-getstarted + position: relative + margin-bottom: 3rem + background-color: $cream-light + @extend %border-radius-4px + ol + @include resetul + padding: 1em 0 + figure + margin: 0 + figcaption + width: 90% + margin: auto + padding: 0 0 0 2.8em + img + display: block + margin: 0 auto 1em + + .dismiss + position: absolute + top: 0 + right: 0 + padding: .5em + z-index: 99 + @media #{$medium-up} + li:not(:last-child) + img + padding: 0 3.2em + border-right: solid 2px #f3f2f2 + +.profile-orgs, +.profile-user + + .media-elem + width: 14% + img + width: 2.6rem + height: 2.6rem + border-radius: 50% + .media-body + width: 86% + p + margin: 0 + ul + @include resetul + li + margin: 1.5rem 0 2.5rem + a + @extend %inline-block + width: 100% + &:hover + h1, h2 + text-decoration: underline + +.profile-user h1, +.profile-orgs h2 + font-size: $font-size-sm + margin: 0 + font-weight: 600 + line-height: 1 + +.profile-orgs + h1 + color: #898b8c + font-size: $font-size-sm + border-bottom: solid 2px #f3f2f2 + +.profile-user + margin: 1rem 0 2rem + +p.profile-user-last + margin-top: .5em + + +.profile-orglist + @media #{$large-up} + padding-right: 10em + aside + padding: 0 + +.profile-hooklist + @include resetul + font-size: $font-size-m + color: #7a7a7a + li + clear: both + margin-bottom: .8em + overflow: auto + > div + width: grid-calc(10, 24) + @media #{$medium-up} + width: grid-calc(7, 24) + @media #{$large-up} + width: grid-calc(5, 24) + .switch + display: inline-block + .profile-settings + display: inline-block + margin-left: 1rem; + padding: .2em .2em .2em .5em; + height: 28px; + vertical-align: bottom; + .icon + width: 14px + height: 14px + +.profile-repo + @extend %border-radius-4px + position: relative + width: grid-calc(14, 24) + padding: .25em .5em .3em + white-space: nowrap + overflow: hidden + span:not(.sync-spinner) + display: none + margin-left: 2rem + font-size: $font-size-sm + color: #484849 + .sync-spinner + vertical-align: top + &:hover + background-color: #ededec + &:after + content: "" + @include fadeOut(right, -90deg, #ededec) + .active &:hover + background-color: #e2eee2 + &:after + content: "" + @include fadeOut(right, -90deg, #e2eee2) + @media #{$medium-up} + width: grid-calc(17, 24) + height: 30px + &:hover + span + display: inline-block + @media #{$large-up} + width: grid-calc(19, 24) + + + diff --git a/app/styles/app/layouts/top.sass b/app/styles/app/layouts/top.sass new file mode 100644 index 00000000..d4df65c5 --- /dev/null +++ b/app/styles/app/layouts/top.sass @@ -0,0 +1,120 @@ +$top-height: 55px + +.logo + position: relative + margin: 0 1.5rem 0 1.3rem + float: left + a + display: block + width: 100px + height: $top-height + z-index: 999 + border: none !important + text-indent : -9999px + transition: background-color 200ms ease + background : inline-image('svg/travis-ci-logo.svg') no-repeat 0 50% + &:hover + background : $cream-light inline-image('svg/travis-ci-logo-hover.svg') no-repeat 50% + .centered & + margin-left: 0 + +.burger + overflow: auto + height: $top-height + @media #{$medium-up} + display: none + + .burger-btn + float: right + font-size: 50px + background: none + border: none + line-height: 1 + color: $grey1 + outline: none !important + @include clearfix + &:hover + cursor: pointer + + +.topbar + font-size: $font-size-m + background-color: #eff0ec + color: $grey1 + + a + display: block + color: #898989 + border-bottom: solid 1px #eff0ec + padding: 0 .2em + font-size: $font-size-m + + @media #{$small-only} + .navigation + height: 0 + overflow: hidden + &.is-open + height: auto + a + padding: .5em 1em + + .navigation, + .navigation-nested + @include resetul + + .navigation-handle + position: relative + margin: 0 + + .navigation--profile + img + border-radius: 50%; + width: 2.7rem; + height: 2.7rem; + margin-left: 1rem; + transform: translateY(-0.1rem); + + .navigation-sub + position: relative + + @media #{$medium-up} + height: $top-height + + .navigation + height: $top-height + > li + display: inline-block + margin-right: 1rem + a + height: $top-height + line-height: $top-height + 2px + border: none + &:hover + text-decoration: underline + + .navigation--profile + float: right + + .navigation--profile.signed-out, + .navigation--profile.signing-in + line-height: $top-height - 5px + + .navigation-nested + display: none + position: absolute + top: $top-height + left: -1em + z-index: 90 + background-color: #eff0ec + a + height: 35px + line-height: 35px + padding: 0 2em + white-space: nowrap + &:hover + text-decoration: none + background-color: $cream-light + + .navigation-handle:hover + .navigation-nested, + .navigation-nested:hover + display: block diff --git a/app/styles/app/modules/buttons.sass b/app/styles/app/modules/buttons.sass index 079305aa..53dbb6f7 100644 --- a/app/styles/app/modules/buttons.sass +++ b/app/styles/app/modules/buttons.sass @@ -52,39 +52,37 @@ $button-border-color: #d4d4d4 border: 1px solid #40454F cursor: pointer -#top - .button--signin, - .button--signingin - display: inline-block - margin-right: 1em - color: $white - font-size: $font-size-small - line-height: 1 +.button--signin, +.button--signingin + display: inline-block + color: $white + font-size: $font-size-small + line-height: 1 + text-decoration: none + border-radius: 4px + border: none + vertical-align: middle + background: + color: $pass-color + +.button--signin + padding: 0.6em 2em 0.55em 0.6em + cursor: pointer + background: + image: inline-image('ui/github-signin.svg') + repeat: no-repeat + position: 95.5% 45% + &:hover + background-color: #73c78d text-decoration: none - border-radius: 4px - border: none - vertical-align: middle - background: - color: $pass-color - .button--signin - padding: 0.6em 2em 0.55em 0.6em - cursor: pointer - background: - image: inline-image('ui/github-signin.svg') - repeat: no-repeat - position: 95.5% 45% - &:hover - background-color: #73c78d - text-decoration: none - - .button--signingin - padding: 0.6em 0.6em 0.45em - span - display: inline-block - padding: 0 .2em - position: relative - top: -0.15em +.button--signingin + padding: 0.6em 0.6em 0.45em + span + display: inline-block + padding: 0 .2em + position: relative + top: -0.15em .btn @extend .button @@ -99,6 +97,25 @@ $button-border-color: #d4d4d4 .button--fixedwidth width: 8em +.btn-activate, +.btn-activated + font-size: $font-size-sm + border: none + // padding-right: 2.5em + &:hover + background-color: $grey2 + +.btn-activated + background-color: #39a85b + color: $white + // @extend .icon-hook-on + // background: + // repeat: no-repeat + // position: 92% 45% + &:hover + background-color: darken(#39a85b, 10) + + // temp #auth #navigation .button--signin, #auth #navigation .button--signingin diff --git a/app/styles/app/modules/dropdown.sass b/app/styles/app/modules/dropdown.sass index c4c0a6a6..10fa393f 100644 --- a/app/styles/app/modules/dropdown.sass +++ b/app/styles/app/modules/dropdown.sass @@ -101,7 +101,7 @@ $dropdown-border: #C3D9DB &:hover, &:focus background-color: lighten($grey, 10) - .icon--cog + .icon-cog-light position: relative top: 0.15em left: -0.2em diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass index 8564d57b..c13230aa 100644 --- a/app/styles/app/modules/icons.sass +++ b/app/styles/app/modules/icons.sass @@ -39,6 +39,11 @@ .icon-cog, .icon--cog + background-image: inline-image('svg/settings_gray.svg') + &:hover + background-image: inline-image('svg/settings_teal.svg') + +.icon-cog-light background-image: inline-image('icons/settings.svg') .icon-star @@ -140,6 +145,13 @@ .icon--dismiss-red background-image: inline-image('svg/icon-error-dismiss.svg') +.icon--dismiss-grey + background-image: inline-image('svg/dismiss.svg') + +.icon-hook-on + background-image: inline-image('svg/hooks-on.svg') +.icon-hook-off + background-image: inline-image('svg/hooks-off.svg') .icon--plus &:after diff --git a/app/styles/app/modules/media.sass b/app/styles/app/modules/media.sass new file mode 100644 index 00000000..1f0ae843 --- /dev/null +++ b/app/styles/app/modules/media.sass @@ -0,0 +1,15 @@ + +.media, +.media-body + overflow: hidden + zoom: 1 + +.media-elem + float: left + margin-right: 0 + img + display: block + +.media-body + float: right + margin-left: 0 \ No newline at end of file diff --git a/app/styles/app/modules/switch.sass b/app/styles/app/modules/switch.sass new file mode 100644 index 00000000..cef71fc7 --- /dev/null +++ b/app/styles/app/modules/switch.sass @@ -0,0 +1,56 @@ + +.profile-main + + $switch-height: 28px + $switch-inner-height: 22px + $switch-width: 62px + $switch-inner-width: 27px + + span + display: none + + .switch + 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 diff --git a/app/styles/app/tabs.sass b/app/styles/app/tabs.sass index 37d04e95..9990abe7 100644 --- a/app/styles/app/tabs.sass +++ b/app/styles/app/tabs.sass @@ -4,73 +4,73 @@ */ -.tabs - @include resetul - li - height: 28px - vertical-align: top - background-color: $tab-nav-inactive-bg - border-radius: 4px 4px 0px 0px - padding: 0 12px 0 12px - margin-right: 10px - white-space: nowrap - cursor: pointer - @media #{$medium-up} - height: 29px - li - display: inline-block - &:hover - background-color: $tab-nav-inactive-bg-hover +// .tabs +// @include resetul +// li +// height: 28px +// vertical-align: top +// background-color: $tab-nav-inactive-bg +// border-radius: 4px 4px 0px 0px +// padding: 0 12px 0 12px +// margin-right: 10px +// white-space: nowrap +// cursor: pointer +// @media #{$medium-up} +// height: 29px +// li +// display: inline-block +// &:hover +// background-color: $tab-nav-inactive-bg-hover - .active - background-color: $color-bg-tab-active - border-bottom-color: $color-bg-tab-active +// .active +// background-color: $color-bg-tab-active +// border-bottom-color: $color-bg-tab-active - a - color: $color-text - font-weight: 600 +// a +// color: $color-text +// font-weight: 600 - h5 - margin: 0 - font-size: $font-size-small - font-weight: normal - line-height: 30px - text-align: center +// h5 +// margin: 0 +// font-size: $font-size-small +// font-weight: normal +// line-height: 30px +// text-align: center - a - display: block - color: #a8a9ab +// a +// display: block +// color: #a8a9ab -#left +// #left - .tabs - margin: -28px 20px 0 15px +// .tabs +// margin: -28px 20px 0 15px - #tab_search:not(.active) - display: none +// #tab_search:not(.active) +// display: none - #tab_recent.hidden - display: none +// #tab_recent.hidden +// display: none - #tab_owned - display: none - #tab_owned.display - display: inline-block - #tab_new - display: none - height: 25px - width: 26px - margin-top: 3px - float: right - margin-right: 0 - padding: 0 5px 0 5px +// #tab_owned +// display: none +// #tab_owned.display +// display: inline-block +// #tab_new +// display: none +// height: 25px +// width: 26px +// margin-top: 3px +// float: right +// margin-right: 0 +// padding: 0 5px 0 5px - h5 - line-height: 25px +// h5 +// line-height: 25px - #tab_new.display - display: inline-block +// #tab_new.display +// display: inline-block #main .tabs diff --git a/app/templates/account.hbs b/app/templates/account.hbs index 54c9119e..82b7c163 100644 --- a/app/templates/account.hbs +++ b/app/templates/account.hbs @@ -1,42 +1,90 @@ -

- {{#if config.pro}} - We're only showing your private repositories below. - You can find your public projects on travis-ci.org. - {{else}} - We're only showing your public repositories below. - You can find your private projects on travis-ci.com. - {{/if}} -

- -

- Enable your projects below by flicking the switch, add a .travis.yml to your project, and push a new commit to - GitHub. -

- {{#if allHooks.isLoaded}} +
+ +
+

{{view.name}}

+
+ {{#if user.isSyncing}} -

- Please wait while we synchronize your data from GitHub -

+
+ +
+
{{else}} -

- Last synchronized from GitHub: {{format-time user.syncedAt}} - - Sync now - -

+
+ +

last synced {{format-time user.syncedAt}}

+
+ {{#if config.billingEndpoint}} +
+ {{#if view.subscribed}} + + Subscription active! + + {{else}} + {{#if view.education}} + + Educational account! + + {{else}} + + Sign up this account! + + {{/if}} + {{/if}} +
+ {{/if}} + {{#if config.pro}} +

We're only showing your private repositories. You can find your public projects on travis-ci.org.

+ {{else}} +

We're only showing your public repositories. You can find your private projects on travis-ci.com.

+ {{/if}} -