diff --git a/app/components/branch-row.coffee b/app/components/branch-row.coffee new file mode 100644 index 00000000..43437095 --- /dev/null +++ b/app/components/branch-row.coffee @@ -0,0 +1,91 @@ +`import Ember from 'ember'` +`import { gravatarImage } from 'travis/utils/urls'` +`import { githubCommit as githubCommitUrl } from 'travis/utils/urls'` +`import TravisRoute from 'travis/routes/basic'` +`import config from 'travis/config/environment'` + +BranchRowComponent = Ember.Component.extend + routing: Ember.inject.service('-routing') + tagName: 'li' + classNameBindings: ['build.last_build.state'] + classNames: ['branch-row', 'row-li'] + isLoading: false + isTriggering: false + hasTriggered: false + + urlGithubCommit: (-> + githubCommitUrl(@get('build.repository.slug'), @get('build.last_build.commit.sha')) + ).property('build.last_build') + + getLast5Builds: (-> + + lastBuilds = Ember.ArrayProxy.create( + content: [{}, {}, {}, {}, {}] + isLoading: true, + count: 0 + ) + + if !@get('build.last_build') + lastBuilds.set('isLoading', false) + else + apiEndpoint = config.apiEndpoint + repoId = @get('build.repository.id') + branchName = @get('build.name') + + options = {} + if @get('auth.signedIn') + options.headers = { Authorization: "token #{@auth.token()}" } + + $.ajax("#{apiEndpoint}/v3/repo/#{repoId}/builds?branch.name=#{branchName}&limit=5", options).then (response) -> + array = response.builds.map( (build) -> + Ember.Object.create(build) + ) + if array.length < 5 + for i in [1..5 - array.length] by 1 + array.push({}) + + lastBuilds.set('count', response['@pagination'].count) + lastBuilds.set('content', array) + lastBuilds.set('isLoading', false) + + lastBuilds + ).property() + + canTrigger: (-> + if !@get('auth.signedIn') + false + else + permissions = @get('auth.currentUser.permissions') + if permissions.contains parseInt(@get('build.repository.id')) + true + else + false + ).property() + + triggerBuild: (-> + apiEndpoint = config.apiEndpoint + repoId = @get('build.repository.id') + options = { + type: 'POST', + body: { + request: { + branch: @get('build.name') + } + } + } + if @get('auth.signedIn') + options.headers = { Authorization: "token #{@auth.token()}" } + $.ajax("#{apiEndpoint}/v3/repo/#{repoId}/requests", options).then (response) => + @set('isTriggering', false) + @set('hasTriggered', true) + ) + + actions: + tiggerBuild: (branch) -> + @set('isTriggering', true) + @triggerBuild() + + viewAllBuilds: (branch) -> + @get('routing').transitionTo('builds') + +`export default BranchRowComponent` diff --git a/app/components/build-tile.coffee b/app/components/build-tile.coffee new file mode 100644 index 00000000..cd2d79ae --- /dev/null +++ b/app/components/build-tile.coffee @@ -0,0 +1,8 @@ +`import Ember from 'ember'` + +BuildTileComponent = Ember.Component.extend + + tagName: 'li' + classNameBindings: ['build.state'] + +`export default BuildTileComponent` diff --git a/app/components/dashboard-row.coffee b/app/components/dashboard-row.coffee new file mode 100644 index 00000000..62379a05 --- /dev/null +++ b/app/components/dashboard-row.coffee @@ -0,0 +1,55 @@ +`import Ember from 'ember'` +`import { githubCommit as githubCommitUrl } from 'travis/utils/urls'` +`import config from 'travis/config/environment'` + +DashboardRowComponent = Ember.Component.extend + + tagName: 'li' + classNameBindings: ['repo.default_branch.last_build.state'] + classNames: ['dashboard-row', 'row-li'] + isLoading: false + isTriggering: false + hasTriggered: false + + urlGithubCommit: (-> + githubCommitUrl(@get('repo.slug'), @get('repo.default_branch.last_build.commit.sha')) + ).property('repo') + + # canTrigger: (-> + # if !@get('auth.signedIn') + # false + # else + # permissions = @get('auth.currentUser.permissions') + # if permissions.contains parseInt(@get('build.repository.id')) + # true + # else + # false + # ).property() + + # triggerBuild: (-> + # apiEndpoint = config.apiEndpoint + # repoId = @get('build.repository.id') + # options = { + # type: 'POST', + # body: { + # request: { + # branch: @get('build.name') + # } + # } + # } + # if @get('auth.signedIn') + # options.headers = { Authorization: "token #{@auth.token()}" } + # $.ajax("#{apiEndpoint}/v3/repo/#{repoId}/requests", options).then (response) => + # @set('isTriggering', false) + # @set('hasTriggered', true) + # ) + + actions: + tiggerBuild: (branch) -> + @set('isTriggering', true) + @triggerBuild() + + # viewAllBuilds: (branch) -> + # @get('routing').transitionTo('builds') + +`export default DashboardRowComponent` diff --git a/app/components/landing-row.coffee b/app/components/landing-row.coffee new file mode 100644 index 00000000..cdc405a8 --- /dev/null +++ b/app/components/landing-row.coffee @@ -0,0 +1,12 @@ +`import Ember from 'ember'` +`import { githubCommit as githubCommitUrl } from 'travis/utils/urls'` +`import TravisRoute from 'travis/routes/basic'` +`import config from 'travis/config/environment'` + +LandingRowComponent = Ember.Component.extend + + tagName: 'li' + classNameBindings: ['repo.lastBuildState'] + classNames: ['landing-row', 'row-li'] + +`export default LandingRowComponent` diff --git a/app/components/owner-repo-tile.coffee b/app/components/owner-repo-tile.coffee index 1f491361..d98020a1 100644 --- a/app/components/owner-repo-tile.coffee +++ b/app/components/owner-repo-tile.coffee @@ -3,7 +3,7 @@ OwnerRepoTileComponent = Ember.Component.extend tagName: 'li' - classNames: ['owner-tile'] + classNames: ['owner-tile', 'row-li'] classNameBindings: ['repo.default_branch.last_build.state'] ownerName: (-> diff --git a/app/components/request-icon.coffee b/app/components/request-icon.coffee new file mode 100644 index 00000000..2d97aa28 --- /dev/null +++ b/app/components/request-icon.coffee @@ -0,0 +1,30 @@ +`import Ember from 'ember'` + +RequestIconComponent = Ember.Component.extend + + tagName: 'span' + classNames: ['icon-request', 'icon'] + classNameBindings: ['build.last_build.state', 'build.state'] + + isPush: (-> + @get('build.last_build.event_type') == 'push' || + @get('build.event_type') == 'push' + ).property('build.last_build') + + isPR: (-> + @get('build.last_build.event_type') == 'pull_request' || + @get('build.event_type') == 'pull_request' + ).property('build.last_build') + + isAPI: (-> + @get('build.last_build.event_type') == 'api' || + @get('build.event_type') == 'api' + ).property('build.last_build') + + isEmpty: (-> + true if @get('build.last_build') == null || @get('build') == null + ).property('build.last_build') + + + +`export default RequestIconComponent` diff --git a/app/components/status-icon.coffee b/app/components/status-icon.coffee new file mode 100644 index 00000000..5ba1a048 --- /dev/null +++ b/app/components/status-icon.coffee @@ -0,0 +1,44 @@ +`import Ember from 'ember'` + +StatusIconComponent = Ember.Component.extend + + tagName: 'span' + classNames: ['status-icon', 'icon'] + classNameBindings: ['status'] + + hasPassed: (-> + @get('status') == 'passed' + ).property('status') + + hasFailed: (-> + @get('status') == 'failed' + ).property('status') + + hasErrored: (-> + @get('status') == 'errored' + ).property('status') + + wasCanceled: (-> + @get('status') == 'canceled' + ).property('status') + + isRunning: (-> + @get('status') == 'started' || + @get('status') == 'queued' || + @get('status') == 'booting' || + @get('status') == 'received' || + @get('status') == 'created' + ).property('status') + + isEmpty: (-> + unless @get('status') + true + else + if @get('status') == '' + true + else + false + + ).property('status') + +`export default StatusIconComponent` diff --git a/app/components/sync-button.coffee b/app/components/sync-button.coffee index 8e2c4bd2..26825fb2 100644 --- a/app/components/sync-button.coffee +++ b/app/components/sync-button.coffee @@ -1,6 +1,8 @@ `import Ember from 'ember'` Component = Ember.Component.extend + + classNames: ["sync-button"] actions: { sync: -> @get('user').sync() diff --git a/app/controllers/branches.coffee b/app/controllers/branches.coffee new file mode 100644 index 00000000..47d9de78 --- /dev/null +++ b/app/controllers/branches.coffee @@ -0,0 +1,30 @@ +`import Ember from 'ember'` +`import { gravatarImage } from 'travis/utils/urls'` +`import GithubUrlPropertievs from 'travis/mixins/github-url-properties'` + +BranchesController = Ember.Controller.extend + + defaultBranch: (-> + repos = @get('model') + output = repos.filter (item, index) -> + item if item.repository.default_branch.name == undefined + output[0] + ).property('model') + + activeBranches: (-> + repos = @get('model') + repos = repos.filter (item, index) -> + item if item.exists_on_github == true && item.repository.default_branch.name != undefined + .sortBy('last_build.finished_at') + .reverse() + ).property('model') + + inactiveBranches: (-> + repos = @get('model') + repos = repos.filter (item, index) -> + item if item.exists_on_github == false + .sortBy('last_build.finished_at') + .reverse() + ).property('model') + +`export default BranchesController` diff --git a/app/controllers/dashboard/repositories.coffee b/app/controllers/dashboard/repositories.coffee index f7c27196..cdeae39b 100644 --- a/app/controllers/dashboard/repositories.coffee +++ b/app/controllers/dashboard/repositories.coffee @@ -10,6 +10,11 @@ Controller = Ember.Controller.extend filter = @get('filter') repos = @get('model') org = @get('org') + + repos = repos.filter (item, index) -> + item.get('default_branch.last_build') != null + .sortBy('default_branch.last_build.finished_at') + .reverse() if org repos = repos.filter (item, index) -> diff --git a/app/controllers/settings.coffee b/app/controllers/settings.coffee index 55aee2b7..2b2ff314 100644 --- a/app/controllers/settings.coffee +++ b/app/controllers/settings.coffee @@ -10,9 +10,4 @@ SettingsController = Ember.Controller.extend sshKeyDeleted: -> @set('model.customSshKey', null) - # deactivate: -> - # console.log('deactivate') - # debugger - - `export default SettingsController` diff --git a/app/router.coffee b/app/router.coffee index 8808ad21..7dfb7326 100644 --- a/app/router.coffee +++ b/app/router.coffee @@ -46,11 +46,11 @@ Router.map -> @route 'search', path: '/search/:phrase' @resource 'repo', path: '/:owner/:name', -> @route 'index', path: '/' + @resource 'branches', path: '/branches' @resource 'build', path: '/builds/:build_id' @resource 'job', path: '/jobs/:job_id' @resource 'builds', path: '/builds' @resource 'pullRequests', path: '/pull_requests' - @resource 'branches', path: '/branches' @resource 'requests', path: '/requests' @resource 'caches', path: '/caches' if config.endpoints.caches @resource 'request', path: '/requests/:request_id' diff --git a/app/routes/branches.coffee b/app/routes/branches.coffee index c58239b4..164cf6eb 100644 --- a/app/routes/branches.coffee +++ b/app/routes/branches.coffee @@ -1,5 +1,26 @@ -`import AbstractBuildsRoute from 'travis/routes/abstract-builds'` +`import Ember from 'ember'` +`import TravisRoute from 'travis/routes/basic'` +`import config from 'travis/config/environment'` + +Route = TravisRoute.extend + + model: (params) -> + apiEndpoint = config.apiEndpoint + repoId = @modelFor('repo').get('id') + + options = {} + if @get('auth.signedIn') + options.headers = { Authorization: "token #{@auth.token()}" } + + $.ajax("#{apiEndpoint}/v3/repo/#{repoId}/branches?include=build.commit", options).then (response) -> + response.branches + + activate: () -> + $('.tab.tabs--main li').removeClass('active') + $('#tab_branches').addClass('active') + + deactivate: () -> + $('#tab_branches').removeClass('active') -Route = AbstractBuildsRoute.extend(contentType: 'branches') `export default Route` diff --git a/app/routes/dashboard/repositories.coffee b/app/routes/dashboard/repositories.coffee index 1cc081e3..93976fd5 100644 --- a/app/routes/dashboard/repositories.coffee +++ b/app/routes/dashboard/repositories.coffee @@ -7,8 +7,7 @@ Route = TravisRoute.extend filter: { replace: true } model: -> apiEndpoint = config.apiEndpoint - $.ajax(apiEndpoint + '/v3/repos?repository.active=true', { - # $.ajax(apiEndpoint + '/v3/#{params.owner}?include=user.repositories,organization.repositories,build.commit', { + $.ajax(apiEndpoint + '/v3/repos?repository.active=true&include=build.commit', { headers: { Authorization: 'token ' + @auth.token() } diff --git a/app/routes/owner/repositories.coffee b/app/routes/owner/repositories.coffee index 404c2574..6304f923 100644 --- a/app/routes/owner/repositories.coffee +++ b/app/routes/owner/repositories.coffee @@ -13,6 +13,6 @@ Route = TravisRoute.extend options = {} if @get('auth.signedIn') options.headers = { Authorization: "token #{@auth.token()}" } - $.ajax(config.apiEndpoint + "/v3/owner/#{transition.params.owner.owner}?include=user.repositories,organization.repositories,build.commit,repository.active", options) + $.ajax(config.apiEndpoint + "/v3/repos?repository.active=true&include=user.repositories,organization.repositories,build.commit", options) `export default Route` diff --git a/app/routes/settings/index.coffee b/app/routes/settings/index.coffee index d9845989..bb33bbe5 100644 --- a/app/routes/settings/index.coffee +++ b/app/routes/settings/index.coffee @@ -9,29 +9,6 @@ Route = TravisRoute.extend 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 9ebba52f..fa7db947 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -20,10 +20,11 @@ @import "app/components/sync-button"; @import "app/components/loading-indicator"; +@import "app/components/build-tile"; @import "app/animation/tractor"; -@import "app/modules/section"; +@import "app/modules/row"; @import "app/modules/loader"; @import "app/modules/tiles"; @import "app/modules/buttons"; @@ -51,6 +52,7 @@ @import "app/layouts/profile"; @import "app/layouts/top"; @import "app/layouts/owner"; +@import "app/layouts/branches"; @import "app/landing"; @import "app/layouts/requests"; diff --git a/app/styles/app/_mixins/fonts.sass b/app/styles/app/_mixins/fonts.sass index 2696241b..897a926e 100644 --- a/app/styles/app/_mixins/fonts.sass +++ b/app/styles/app/_mixins/fonts.sass @@ -10,4 +10,4 @@ $font-size-tiniest: 10px $line-height: 22px $line-height-log: 19px - +$font-weight-normal: 400 diff --git a/app/styles/app/_mixins/mixins.sass b/app/styles/app/_mixins/mixins.sass index 96a48c7f..5280c306 100644 --- a/app/styles/app/_mixins/mixins.sass +++ b/app/styles/app/_mixins/mixins.sass @@ -29,17 +29,6 @@ padding: 0 list-style: none -%border-radius-4px - border-radius: 4px - -%border-top-4px - border-top-left-radius: 4px - border-top-right-radius: 4px - -%border-bottom-4px - border-bottom-left-radius: 4px - border-bottom-right-radius: 4px - %absolute-center position: absolute top: 0 @@ -64,3 +53,47 @@ font-size: $font-size-sm color: $grey-medium font-weight: 400 + + +// @todo simplyfiy coloring mixins + +@mixin colorStatusIcons($color, $status) + .status-icon.#{$status} + svg g > * + fill: $color + +@mixin colorTiles($color, $status, $extra-bg: $color) + &.#{$status} + border-color: $extra-bg + .tile-status + background-color: $color + .repo-header-title a, + .repo-build-status a, + .build-status a, + .tile-header, + .tile-header a, + .tile-title a + color: $color + @include colorStatusIcons($color, $status) + +@mixin statusColors($color, $status, $color2: $color) + &.#{$status} + background: linear-gradient(to right, $color2 0%, $color2 9px, white 9px, white 100%) no-repeat + .row-name, + .row-request a, + .row-color a + color: $color + &:hover + border-color: $color + .row-name .status-icon g > *, + .row-request .icon-request g > * + fill: $color + + .build a, + .repo-title a + color: $color + &:hover + border-color: $color + .build-status + color: $color + @include colorStatusIcons($color, $status) diff --git a/app/styles/app/components/build-tile.sass b/app/styles/app/components/build-tile.sass new file mode 100644 index 00000000..b796c827 --- /dev/null +++ b/app/styles/app/components/build-tile.sass @@ -0,0 +1,72 @@ +@mixin buildTileColors($color, $bg, $status, $extra-hover: $color) + > .#{$status} + background-color: $bg + .icon-request g > *, + .status-icon g > * + fill: $color + &:hover + background-color: $extra-hover + .status-icon.#{$status} g > * + fill: $white + .status-icon .circle + border-color: $white + + @media #{$medium-up} + .dropup--status + border-color: $extra-hover + color: $color + &:before + background-color: $color + + +.build-tiles + height: 4.7em + margin: 0 + padding: 0 + clear: both + list-style: none + li + position: relative + height: 100% + float: left + width: 20% + background-color: #F7F7F7 + border-right: 1px solid $white + &:last-of-type + border-right: none + .status-icon + position: absolute + top: 0 + right: 0 + bottom: 0 + left: 0 + width: 2.5rem !important + height: 2.5rem !important + margin: auto !important + background-color: transparent + .is-rotating + position: absolute + top: 0 + bottom: 0 + right: 0 + left: 0 + margin: auto + width: 1.3em + height: 1.1em + .circle + width: 8px + height: 8px + a + display: block + height: 100% + text-align: center + + @include buildTileColors(#44A662, #F5FBF6, 'passed') + @include buildTileColors(#D94341, #FFF7F5, 'failed') + @include buildTileColors(#D94341, #FFF7F5, 'errored') + @include buildTileColors(#A1A0A0, #F5F5F5, 'canceled') + @include buildTileColors(#bfb502, #fdfcee, 'started', #e2c913) + @include buildTileColors(#bfb502, #fdfcee, 'queued', #e2c913) + @include buildTileColors(#bfb502, #fdfcee, 'booting', #e2c913) + @include buildTileColors(#bfb502, #fdfcee, 'received', #e2c913) + @include buildTileColors(#bfb502, #fdfcee, 'created', #e2c913) diff --git a/app/styles/app/components/sync-button.sass b/app/styles/app/components/sync-button.sass index b0eddbd9..a74b1ea5 100644 --- a/app/styles/app/components/sync-button.sass +++ b/app/styles/app/components/sync-button.sass @@ -1,14 +1,20 @@ .sync-button padding: 0.8em 0 - button - @extend %border-radius-4px - padding: 0 10px - max-width: 98px - min-height: 25px + display: flex + flex-direction: row-reverse + .button + padding: 5px 10px margin-left: .5em + height: 25px + position: relative + z-index: 1 background: #a6adad color: #ffffff + font-size: 14px + font-weight: $font-weight-normal border: none + border-radius: 2px + line-height: 1 &:hover background: #8d9b9a cursor: pointer @@ -16,17 +22,17 @@ &.is-syncing background: #c6b93d color: $white - padding: 0 10px - max-width: 160px .icon - position: relative - top: -0.1em - width: 1em + width: 1.1em height: 1.2em vertical-align: middle - .icon, - .sync-spinner + svg path + fill: $white + .icon margin-right: .5em + .loading-indicator--white + margin-right: .5em + vertical-align: top .profile-main .sync-button @@ -41,6 +47,15 @@ .sync-last display: inline-block margin: 0 - font-size: 12px + font-size: 14px color: #848384 text-align: right + + pointer-events: none + transform: translateX(50%) + opacity: 0 + transition: transform 200ms ease, opacity 100ms ease + + .button:hover ~ & + transform: translateX(0) + opacity: 1 diff --git a/app/styles/app/landing.sass b/app/styles/app/landing.sass index fce7bb90..3af2d3c2 100644 --- a/app/styles/app/landing.sass +++ b/app/styles/app/landing.sass @@ -462,41 +462,17 @@ overflow: auto transform: translateY(7%) - -.tiles-landing - .db - padding: .4em 0 - background-color: $white - border-radius: 4px - p - font-size: $font-size-m - line-height: 1.6 - color: #828282 - .db-controls - padding-left: 3.7rem - .icon - width: 1em - height: 1.1em - .icon-branch - width: 1.2em - height: .7em - .db-status - .icon - width: 1.2em - height: 1.2em - .db-repo - padding-left: 3.7rem - h2 - font-size: 22px - line-height: 25px - margin-bottom: .5em - .db-job, .db-branch, .db-commit, .db-timeago - padding-left: 1.4em - .db-job a - color: #828282 !important - &:hover - text-decoration: underline - .landing-page .navigation-nested background-color: $white + +.landing-rows + list-style: none + margin: 0 + +.landing-row + .two-line + padding-left: 2rem + h2 + padding-left: .5rem + font-size: 18px diff --git a/app/styles/app/layouts/branches.sass b/app/styles/app/layouts/branches.sass new file mode 100644 index 00000000..ba31a64f --- /dev/null +++ b/app/styles/app/layouts/branches.sass @@ -0,0 +1,223 @@ + +.branches + .small-title + margin: 1.5em 0 0.7em + +.branch-row + + .avatar + display: inline-block + width: 16px + height: 16px + margin-right: .7em + border-radius: 50% + vertical-align: middle + background-color: #E9EBEB + + @media #{$medium-up} + display: flex + justify-content: space-between + & > div:first-of-type + width: 30% + padding-left: 1em + & > div:nth-of-type(2) + width: 20% + & > div:nth-of-type(3) + width: 20% + // & > div:nth-of-type(4) + // width: 5% + & > div:nth-of-type(4) + width: 28% + @media #{$large-up} + & > div:nth-of-type(2) + width: 21% + & > div:nth-of-type(3) + width: 21% + // & > div:nth-of-type(4) + // width: 2em + & > div:nth-of-type(4) + width: 25% + + .row-last-build + @media #{$medium-up} + padding-left: 1em + &:before + content: ""; + display: block; + width: 1px; + background-color: #EFF0EC; + position: absolute; + height: 3.7em; + margin-left: -1em; + +// @todo refactor into dropup module +%dropup + @media #{$medium-up} + position: absolute + display: none + z-index: 5 + background-color: $white + border-radius: 2px + + &:after, + &:before + content: "" + position: absolute + display: block + width: 7px + height: 7px + left: 0 + right: 0 + margin: 0 auto + transform: rotate(45deg) + &:after + background-color: $white + .dropup-trigger:hover ~ &, + .dropup-trigger:hover &, + &:hover + display: block + +.dropup--blue + @extend %dropup + &:before + background-color: $teal-dark + bottom: -5px + &:after + bottom: -4px + ul + margin: 0 + padding: 0 + list-style-type: none + text-align: center + li + display: inline-block + margin: 2em 0 + background: $teal-dark + border-radius: 2px + a + display: inline-block + padding: 0.3em 0.5em + color: $white + text-decoration: none + line-height: 1 + .icon-trigger path, + .icon-eye path + fill: $white + + @media #{$medium-up} + width: 10em + left: 0 + padding: .4em + transform: translate(-42%, -170%) + border: 1px solid $teal-dark + li + display: block + margin: 0 + background-color: $white + border-radius: 0 + cursor: pointer + .icon-trigger path, + .icon-eye path + fill: #A7AEAE + a + display: block + padding: 0.3em .5em 0.4em + text-decoration: none + color: $grey-dark + line-height: 1.4 + &:hover + color: $white + background-color: $teal-dark + .icon-trigger path, + .icon-eye path + fill: $white + + .dropup-item + display: inline-block + vertical-align: middle + .no-link + padding: .4em 0 + cursor: default + +.dropup--status + @extend %dropup + left: 0 + right: 0 + margin: auto + display: none + &:after + bottom: -3px + &:before + bottom: -4px + @media #{$medium-up} + top: -2.3em + width: 4.8em + padding: .1em .1em + white-space: nowrap + font-size: 14px; + border: 1px solid $red-dark + &:before + background-color: $red-dark + +.dropup-trigger + padding: 1em 0 + path + fill: $teal-dark + +// @todo refactor to status-icon module +.status-icon + .is-rotating + width: 17px + height: 19px + line-height: 0.9 + text-align: center + transform-origin: center center + will-change: transform + animation: rotation 3s infinite ease + .circle + display: inline-block + vertical-align: middle + width: 5px + height: 5px + border: solid 1px #bfb502 + border-radius: 50% + transform-origin: center center + +@keyframes rotation + 0% + transform: rotateZ(0deg) + 45%, 55% + transform: rotateZ(180deg) + 100% + transform: rotateZ(360deg) + +.is-relative + position: relative + +span.nobuilds-tigger, +a.nobuilds-tigger + position: absolute + top: 0 + left: 0 + right: 0 + bottom: 0 + height: 2em + width: 11em + margin: auto + padding: 0.35em 0.5em 0.2em + line-height: 1 + text-align: center + border: 1px solid #E4E6E6 + border-radius: 2px + background-color: #fff + .icon-trigger + height: 1.4em !important + +a.nobuilds-tigger + &:hover + background: #A6ADAD + color: white + .icon-trigger svg path + fill: #fff + + diff --git a/app/styles/app/layouts/dashboard.sass b/app/styles/app/layouts/dashboard.sass index 8fbbc463..f8a533c1 100644 --- a/app/styles/app/layouts/dashboard.sass +++ b/app/styles/app/layouts/dashboard.sass @@ -1,224 +1,54 @@ -/* - * Dashboard List - */ - -@mixin colorDbelements($color, $icon) - .db-status - background-color: $color - .icon-star - @extend %icon-star-#{$icon} - .db-repo - h2, h3, a - color: $color - .db-job - color: $color - a - color: $color - -$db-gray: #C9C9C9 -$db-text-color: #ACAAAA .dashboard - color: $grey-medium - hr + .centered + margin: auto max-width: 1024px - margin: auto - border-top: none - border-bottom: $db-gray dashed 1px -.dashboard--empty - padding: 2em 5em - background: $cream-light - color: #979597 - font-size: 20px - font-weight: 400 - text-align: center - @extend border-radius-4px - p .icon - width: 1.5em - height: 1.5em - transform: translate(-20%, 18%) - .icon-star - @extend %icon-star-grey - -.db - @include resetul - margin: auto - position: relative - margin-bottom: 1em - background: $cream-light - @extend border-radius-4px - - h2, h3, p - margin: 0 - font-weight: 400 - white-space: nowrap - - p - font-size: $font-size-m - - .icon - position: absolute - left: 0 - top: 0 - bottom: 0 - margin: auto - - &.started, - &.created - @include colorDbelements($start-color, yellow) - &.failed - @include colorDbelements($fail-color, red) - &.errored - @include colorDbelements($error-color, red) - &.canceled - @include colorDbelements($cancel-color, grey) - &.passed - @include colorDbelements($pass-color, green) - &.inactive - @include colorDbelements($cancel-color, grey) - -.db-repo - padding-left: 3em - transform: translateY(0.4em) - overflow: hidden - margin-bottom: 1em - &:after - content: "" - @include fadeOut(right, -90deg, $cream-light) +.dashboard-filter + padding: 0 $column-gutter/2 + font-size: 16px + font-weight: $font-weight-normal @media #{$medium-up} - margin-bottom: 0 + padding: 0 -.db-status - position: absolute; - top: 0 - left: 0 - height: 100% - width: 2.5em - border-top-left-radius: 4px - border-bottom-left-radius: 4px +.dashboard-active + padding: 0 + margin: 3rem 0 5rem + list-style-type: none - .icon - width: 1.1em - height: 1.1em - right: 0 - .icon-status - top: -6em - .icon-star - top: 1.7em - opacity: .9 -.db-controls - line-height: 2.2 - p, - button - display: inline-block - button - margin-left: 1em - a:hover - text-decoration: underline +.dashboard-active li + text-align: left + .one-line + margin-left: 2em + text-align: left + .two-line + padding: .1em 0 + .row-item h2 + font-size: 18px - .icon - width: 1em - height: 1.1em - .icon-branch - width: 1.3em - height: .8em - -.db-job, -.db-branch, -.db-commit, -.db-timeago - position: relative - padding-left: 1.5em - z-index: 30 - overflow: hidden - -.db-branch - position: relative - &:after - content: "" - @include fadeOut(right, -90deg, $cream-light) - -.db-lock - position: absolute - left: -2.1em; - top: 1.2em; - .icon - width: 1em - height: 1em - -.db-activation - margin: 1em 0 .5em - text-align: right - padding-right: 0 @media #{$medium-up} - margin: 0 + & > div:first-of-type + width: 30% + position: relative + padding-left: 1em + &:after + content: "" + @include fadeOut(right, -90deg, $white) -.db-burger - position: absolute; - top: 0 - right: 0 - height: 4em - width: 4em - cursor: pointer - z-index: 30 - .icon - width: 2em - height: 2em - right: 0 + & > div:nth-of-type(2) + width: 27% + & > div:nth-of-type(3) + width: 20% + & > div:nth-of-type(4) + width: 20% -.dropdown--db - display: none + h2 + padding-left: 1.5em + .one-line + margin-left: 0 -.db-burger:hover ~ .dropdown--db, -.dropdown--db:hover - display: block - -.dashboard-starred, -.dashboard-active, -.dashboard-inactive - padding: 0 3em - margin: 3em 0 3em - -.dashboard-starred - .db - padding-bottom: .2em - @media #{$medium-up} - width: grid-calc(17, 36) - &:nth-child(2n) - float: right - &:nth-child(2n + 1) - float: left - .db-controls - padding-left: 3em - -.dashboard-active, -.dashboard-inactive - .db-repo, - .db-controls - padding-left: 4em - @media #{$medium-up} - .db - height: 57px - .db-repo - padding-left: 4em - .db-controls - padding: 0 4em 0 2em - line-height: 3em - transform: translateY(26%) - border-left: 1px solid $cream-dark - .db-burger - height: 100% - .db-status - .icon-status - top: -2em - -.dashboard-inactive - margin-bottom: 5e3 - .db - h2, h3, p, button, .db-status - opacity: .7 - -.dashboard .topbar - background-color: transparent !important + .dropup--blue + li + border: none + transform: translate(-19%, -170%) diff --git a/app/styles/app/layouts/owner.sass b/app/styles/app/layouts/owner.sass index 2c81884c..f599efe3 100644 --- a/app/styles/app/layouts/owner.sass +++ b/app/styles/app/layouts/owner.sass @@ -82,112 +82,21 @@ padding: 0 list-style-type: none -%one-line - font-size: 16px - font-weight: 400 - vertical-align: middle - margin: 0 - display: inline-block - * - display: inline-block - font-size: inherit - font-weight: 400 - vertical-align: middle - margin: 0 - padding: 0 - line-height: 1 - -@mixin statusColors($color, $status) - &.#{$status} - background: linear-gradient(to right, $color 0%, $color 9px, transparent 10px, transparent 100%) no-repeat; - .build a, - .repo-title a - color: $color - &:hover - border-color: $color - .build-status - color: $color - - -.owner-tile - padding: .8em 0 .8em 2em - margin-bottom: .5em - border: #F2F0F0 solid 1px - - a - text-decoration: none - &:hover - span - text-decoration: underline - .repo-title a:hover - text-decoration: underline - - .icon--job, - .icon-push, - .icon-pull_request, - .icon-calendar, - .icon-hash, - .icon-github - width: 1em - height: 1.1em - margin-right: .5em - background-repeat: no-repeat - background-size: 100% - - .icon--job - height: 1em - margin-top: .1em - .icon-push - margin-top: .6em .build-status text-transform: capitalize - .repo - @extend %one-line - white-space: nowrap - width: grid-calc(9, 12) - .build - @extend %one-line - width: grid-calc(5, 12) - .branch - @extend %one-line - width: grid-calc(6, 12) - .commit - @extend %one-line - width: grid-calc(6, 12) - .duration - @extend %one-line - width: grid-calc(12, 12) +.owner-tile + padding: .4em 0 .3em @media #{$medium-up} - display: flex - flex-direction: row - flex-flow: space-between - align-items: baseline - height: 3.8em - padding: .8em 0 - - .build - width: grid-calc(2, 12) - .branch - width: grid-calc(2, 12) - .commit - width: grid-calc(2, 12) - .duration - width: grid-calc(4, 12) - .repo - width: grid-calc(4, 12) - margin-left: 2em - - - @include statusColors($green-dark, 'passed') - @include statusColors($red-dark, 'failed') - @include statusColors($red-dark, 'errored') - @include statusColors($grey-medium, 'canceled') - @include statusColors(#ECCE4B, 'started') - @include statusColors(#ECCE4B, 'queued') - @include statusColors(#ECCE4B, 'booting') - @include statusColors(#ECCE4B, 'received') - @include statusColors(#ECCE4B, 'created') - - + & > div:first-of-type + width: 30% + padding-left: 1em + & > div:nth-of-type(2) + width: 10% + & > div:nth-of-type(3) + width: 15% + & > div:nth-of-type(4) + width: 15% + & > div:nth-of-type(5) + width: 24% diff --git a/app/styles/app/layouts/settings.sass b/app/styles/app/layouts/settings.sass index 72bc903e..6ddaabca 100644 --- a/app/styles/app/layouts/settings.sass +++ b/app/styles/app/layouts/settings.sass @@ -1,9 +1,4 @@ -.small-title - font-size: 18px - color: $teal-light - font-weight: 400 - .settings padding-top: .8em diff --git a/app/styles/app/layouts/sidebar.sass b/app/styles/app/layouts/sidebar.sass index 7ed7b3c1..1b77a76e 100644 --- a/app/styles/app/layouts/sidebar.sass +++ b/app/styles/app/layouts/sidebar.sass @@ -1,11 +1,6 @@ $sb-grey: #f2f2f2 $sb-font-size: 14px -@mixin colorSidebarTiles($color) - border-color: $color - a - color: $color - .tile--sidebar height: auto padding: 0.6em 0.5em @@ -16,17 +11,6 @@ $sb-font-size: 14px li:last-child & margin-bottom: 0 - &.failed, - &.errored - @include colorSidebarTiles($fail-color) - &.passed - @include colorSidebarTiles($pass-color) - &.started, - &.created, - &.received, - &.queued - @include colorSidebarTiles($created-color) - h2, p margin: 0 font-size: $sb-font-size @@ -51,14 +35,10 @@ $sb-font-size: 14px width: 22% a:hover text-decoration: underline - .icon:not(.icon--hash) - width: 0.9em - height: 1.1em - margin-right: .3em - .icon--hash - width: 1.1em - height: 1.3em - + .icon + width: 1.3em + height: 1.4em + margin-right: .1em .tabnav--sidebar font-size: $sb-font-size diff --git a/app/styles/app/misc.sass b/app/styles/app/misc.sass index 0a6e4bb0..414a75c8 100644 --- a/app/styles/app/misc.sass +++ b/app/styles/app/misc.sass @@ -18,3 +18,12 @@ a color: #c00 text-decoration: underline + + +.small-title + font-size: 18px + color: $teal-light + font-weight: 400 + +.blank-list + @include resetul diff --git a/app/styles/app/modules/dropdown.sass b/app/styles/app/modules/dropdown.sass index 1f1ea8a1..ee34d863 100644 --- a/app/styles/app/modules/dropdown.sass +++ b/app/styles/app/modules/dropdown.sass @@ -55,6 +55,8 @@ $dropdown-border: #C3D9DB .filter-current padding: .9em 0 cursor: pointer + a + color: $teal-dark .filter-dropdown @include resetul @@ -62,9 +64,10 @@ $dropdown-border: #C3D9DB top: 3em min-width: 14em background-color: $white - border-radius: 4px + border-radius: 2px overflow: hidden - box-shadow: 2px 1px 4px 0px rgba(148,145,138,0.4) + border: 1px solid $cream-dark + border-top: none z-index: 40 display: none li @@ -75,7 +78,7 @@ $dropdown-border: #C3D9DB padding: 10px 10px 10px 20px &:hover color: $white - background : #5e869a + background : $teal-dark .is-selected a font-weight: 600 diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass index 6534f042..bab6eaf2 100644 --- a/app/styles/app/modules/icons.sass +++ b/app/styles/app/modules/icons.sass @@ -192,6 +192,17 @@ .icon-fingerprint background-image: inline-image('svg/fingerprint.svg') + +.icon-line-cal + @extend %icon + background-image: inline-image('line-icons/icon-cal.svg') +.icon-line-build + @extend %icon + background-image: inline-image('line-icons/icon-build.svg') +.icon-line-commit + @extend %icon + background-image: inline-image('line-icons/icon-commit.svg') + .icon--plus &:after content: "+" @@ -206,12 +217,11 @@ margin-left : 5px border-left : 5px solid transparent border-right : 5px solid transparent - border-top : 5px solid $dashboard-text-color + border-top : 5px solid $teal-dark .icon-flag background-image: inline-image('svg/notice-flag.svg') - .icon-receiving margin: 0.3rem 0.5rem; display: inline-block; diff --git a/app/styles/app/modules/row.sass b/app/styles/app/modules/row.sass new file mode 100644 index 00000000..06fd5619 --- /dev/null +++ b/app/styles/app/modules/row.sass @@ -0,0 +1,87 @@ +.fade-out + @media #{$medium-up} + white-space: nowrap + position:relative + overflow: hidden + &:after + content: "" + @include fadeOut(right, -90deg, $white, 30%) + +.label-align + vertical-align: middle + line-height: 1.5 + +.row-li + border: 1px solid $cream-dark + font-size: 16px + margin-bottom: .3rem + color: $grey-dark + background: linear-gradient(to right, #CACECE 0%, #CACECE 9px, white 10px, white 100%) no-repeat + + h2, h3 + margin: 0 + font-weight: $font-weight-normal + font-size: 16px + + .row-header + width: 100% + + .row-item + margin: .2em + font-size: 16px + font-weight: $font-weight-normal + white-space: nowrap + overflow: hidden + padding-left: 1em + a + color: $grey-dark + text-decoration: none + &:hover + text-decoration: underline + + @media #{$medium-up} + display: inline-block + padding-left: 0 + + %row-element + vertical-align: middle + @media #{$medium-up} + display: inline-block + .row-item + vertical-align: middle + + .two-line + @extend %row-element + padding: .4em 0 + margin-left: 2em + text-align: left + + @media #{$medium-up} + margin-left: 0 + + .one-line + @extend %row-element + .row-item + display: inline-block + .row-nav + display: none + text-align: center + @media #{$medium-up} + display: block + + .icon + width: 1.3em + height: 1.3em + margin-right: .2em + display: inline-block + vertical-align: middle + + @include statusColors($green-dark, 'passed') + @include statusColors($red-dark, 'failed') + @include statusColors($red-dark, 'errored') + @include statusColors($grey-medium, 'canceled') + @include statusColors(#bfb502, 'started', #e5da3f) + @include statusColors(#bfb502, 'queued', #e5da3f) + @include statusColors(#bfb502, 'booting', #e5da3f) + @include statusColors(#bfb502, 'received', #e5da3f) + @include statusColors(#bfb502, 'created', #e5da3f) diff --git a/app/styles/app/modules/section.sass b/app/styles/app/modules/section.sass deleted file mode 100644 index 4bdd6285..00000000 --- a/app/styles/app/modules/section.sass +++ /dev/null @@ -1,8 +0,0 @@ -.section - font-size: $font-size-normal - -.section--white - background-color: $white - -.section--maxheight - height: 3.3em diff --git a/app/styles/app/modules/tiles.sass b/app/styles/app/modules/tiles.sass index 309268f1..4b6e2449 100644 --- a/app/styles/app/modules/tiles.sass +++ b/app/styles/app/modules/tiles.sass @@ -1,12 +1,3 @@ -@mixin colorTiles($color) - .tile-status - background-color: $color - .repo-header-title a, - .repo-build-status a, - .build-status a, - .tile-header, - .tile-header a - color: $color .tile @extend %border-radius-4px @@ -23,21 +14,20 @@ height: 0.9em &:not(.tile--jobs) - &.started, - &.created, - &.received, - &.queued - @include colorTiles($start-color) - &.failed - @include colorTiles($fail-color) - &.errored - @include colorTiles($error-color) - &.canceled - @include colorTiles($cancel-color) - &.passed - @include colorTiles($pass-color) - &.inactive - @include colorTiles($cancel-color) + @include colorTiles($green-dark, 'passed') + @include colorTiles($red-dark, 'failed') + @include colorTiles($red-dark, 'errored') + @include colorTiles($grey-medium, 'canceled') + @include colorTiles(#bfb502, 'started', #e5da3f) + @include colorTiles(#bfb502, 'queued', #e5da3f) + @include colorTiles(#bfb502, 'booting', #e5da3f) + @include colorTiles(#bfb502, 'received', #e5da3f) + @include colorTiles(#bfb502, 'created', #e5da3f) + + .status-icon .is-rotating + width: 17px; + height: 17px; + line-height: 1; @media #{$medium-up} height: 145px diff --git a/app/templates/account.hbs b/app/templates/account.hbs index 93a0d8f0..abfc6c97 100644 --- a/app/templates/account.hbs +++ b/app/templates/account.hbs @@ -73,7 +73,7 @@
-