From 3ef64f09102491140eb458898c5e7f1ae5aa6182 Mon Sep 17 00:00:00 2001 From: Lisa P Date: Mon, 21 Sep 2015 18:56:00 +0200 Subject: [PATCH] start redoing dashboard --- app/components/dashboard-row.coffee | 55 ++++ app/routes/dashboard/repositories.coffee | 3 +- app/styles/app/_mixins/mixins.sass | 8 +- app/styles/app/layouts/branches.sass | 4 +- app/styles/app/layouts/dashboard.sass | 277 ++++++--------------- app/templates/components/branch-row.hbs | 16 +- app/templates/components/dashboard-row.hbs | 151 +++++++++++ app/templates/dashboard/repositories.hbs | 45 +--- 8 files changed, 303 insertions(+), 256 deletions(-) create mode 100644 app/components/dashboard-row.coffee create mode 100644 app/templates/components/dashboard-row.hbs diff --git a/app/components/dashboard-row.coffee b/app/components/dashboard-row.coffee new file mode 100644 index 00000000..410c4e81 --- /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.last_build.state'] + classNames: ['dashboard-row'] + isLoading: false + isTriggering: false + hasTriggered: false + + urlGithubCommit: (-> + githubCommitUrl(@get('repo.slug'), @get('repo.default_branch.last_build.commit.sha')) + ).property('repo.last_build') + + # 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/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/styles/app/_mixins/mixins.sass b/app/styles/app/_mixins/mixins.sass index 9c245cd8..dc8ae160 100644 --- a/app/styles/app/_mixins/mixins.sass +++ b/app/styles/app/_mixins/mixins.sass @@ -91,13 +91,13 @@ @mixin statusColors($color, $status, $color2: $color) &.#{$status} background: linear-gradient(to right, $color2 0%, $color2 9px, white 10px, white 100%) no-repeat - .branch-name, - .branch-request a + .row-name, + .row-request a color: $color &:hover border-color: $color - .branch-name .status-icon g > *, - .branch-request .icon-request g > * + .row-name .status-icon g > *, + .row-request .icon-request g > * fill: $color .build a, diff --git a/app/styles/app/layouts/branches.sass b/app/styles/app/layouts/branches.sass index e3bb9f14..083247f8 100644 --- a/app/styles/app/layouts/branches.sass +++ b/app/styles/app/layouts/branches.sass @@ -101,13 +101,13 @@ @extend %row-element .row-item display: inline-block - .branch-nav + .row-nav display: none text-align: center @media #{$medium-up} display: block -.branch-last-build +.row-last-build @media #{$medium-up} padding-left: 1em &:before diff --git a/app/styles/app/layouts/dashboard.sass b/app/styles/app/layouts/dashboard.sass index 8fbbc463..5a8aec0a 100644 --- a/app/styles/app/layouts/dashboard.sass +++ b/app/styles/app/layouts/dashboard.sass @@ -1,224 +1,95 @@ -/* - * 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 + +@mixin colorDashboardTiles($color, $status, $color2: $color) + &.#{$status} + .row-request 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 +.dashboard-active li -.db - @include resetul - margin: auto - position: relative - margin-bottom: 1em - background: $cream-light - @extend border-radius-4px + padding: 0 + margin: 0 + list-style-type: none - h2, h3, p - margin: 0 - font-weight: 400 - white-space: nowrap - - p - font-size: $font-size-m + border: 1px solid $cream-dark + font-size: 16px + text-align: left + margin-bottom: .3rem + color: $grey-dark + background: linear-gradient(to right, #CACECE 0%, #CACECE 9px, white 10px, white 100%) no-repeat .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) - @media #{$medium-up} - margin-bottom: 0 - -.db-status - position: absolute; - top: 0 - left: 0 - height: 100% - width: 2.5em - border-top-left-radius: 4px - border-bottom-left-radius: 4px - - .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 - - .icon - width: 1em - height: 1.1em - .icon-branch width: 1.3em - height: .8em + height: 1.3em + margin-right: .2em + display: inline-block + vertical-align: middle -.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} + h2, h3 margin: 0 + font-weight: 300 -.db-burger - position: absolute; - top: 0 - right: 0 - height: 4em - width: 4em - cursor: pointer - z-index: 30 - .icon - width: 2em - height: 2em - right: 0 + h3 + font-size: 16px -.dropdown--db - display: none + h2 + padding-left: 1.5em + font-size: 18px -.db-burger:hover ~ .dropdown--db, -.dropdown--db:hover - display: block + .row-item + margin: .2em + font-size: 16px + font-weight: 300 + white-space: nowrap + overflow: hidden + a + color: $grey-dark + text-decoration: none + &:hover + text-decoration: underline -.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 + & > div:first-of-type + width: 27% + position: relative + padding-left: 1em + &:after + content: "" + @include fadeOut(right, -90deg, $white) + & > div:nth-of-type(2) + width: 25% + & > div:nth-of-type(3) + width: 18% + & > div:nth-of-type(4) + width: 18% + & > div:nth-of-type(5) + width: 10% + + + @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) + + @include colorDashboardTiles($green-dark, 'passed') + @include colorDashboardTiles($red-dark, 'failed') + @include colorDashboardTiles($red-dark, 'errored') + @include colorDashboardTiles($grey-medium, 'canceled') + @include colorDashboardTiles(#bfb502, 'started', #e5da3f) + @include colorDashboardTiles(#bfb502, 'queued', #e5da3f) + @include colorDashboardTiles(#bfb502, 'booting', #e5da3f) + @include colorDashboardTiles(#bfb502, 'received', #e5da3f) + @include colorDashboardTiles(#bfb502, 'created', #e5da3f) -.dashboard-inactive - margin-bottom: 5e3 - .db - h2, h3, p, button, .db-status - opacity: .7 -.dashboard .topbar - background-color: transparent !important diff --git a/app/templates/components/branch-row.hbs b/app/templates/components/branch-row.hbs index 08c653c7..4f62166d 100644 --- a/app/templates/components/branch-row.hbs +++ b/app/templates/components/branch-row.hbs @@ -1,9 +1,9 @@
-
+

{{status-icon status=build.last_build.state}} {{build.name}}

-
+
@@ -33,8 +33,8 @@
-
-
+
+
{{#if build.last_build}} {{#link-to "build" build.repository.slug build.last_build.id}} @@ -46,7 +46,7 @@ {{/if}}
-
+
@@ -74,7 +74,7 @@
-
+
@@ -111,7 +111,7 @@ {{/if}}
-
+
{{#if build.last_build}} avatar{{build.last_build.commit.committer.name}} @@ -126,7 +126,7 @@ {{#if canTrigger}} {{#if build.last_build}} -
+
diff --git a/app/templates/components/dashboard-row.hbs b/app/templates/components/dashboard-row.hbs new file mode 100644 index 00000000..11c9066f --- /dev/null +++ b/app/templates/components/dashboard-row.hbs @@ -0,0 +1,151 @@ + +
+
+

{{status-icon status=repo.last_build.state}} {{repo.owner.login}}

+

{{repo.name}}

+
+
+ +
+
+
+ {{!-- {{#link-to "build" repo.slug repo.default_branch.last_build.id}} --}} + {{request-icon build=repo.last_build}} + #{{repo.last_build.number}} {{repo.last_build.state}} on {{repo.default_branch.name}} + {{!-- {{/link-to}} --}} +
+
+
+ +
+
+
+ + + + + + + + + {{format-sha repo.last_build.commit.sha}} + +
+
+
+ +
+
+
+ + + + + + + + + + + {{#if repo.last_build}} + {{format-time repo.last_build.finished_at}} + {{else}} + - + {{/if}} +
+
+
+ +
+
+
+ + + + + + + + +
+
+ {{!--
+ +
--}} +
diff --git a/app/templates/dashboard/repositories.hbs b/app/templates/dashboard/repositories.hbs index c5ad82c8..235821f3 100644 --- a/app/templates/dashboard/repositories.hbs +++ b/app/templates/dashboard/repositories.hbs @@ -7,51 +7,22 @@
-
-
+
+ {{!--

Want to keep an eye on certain projects? Star repositories below to add them in this section.

-
- -
+
--}} +
    {{#each repo in filteredRepositories}} -
    - {{#if repo.private }} -
    - {{/if}} -
    - - -
    -
    -

    {{repo.owner.login}}

    -

    {{#link-to "repo" repo.owner.login repo.name}}{{repo.name}}{{/link-to}}

    -
    -
    -

    - {{#link-to "build" repo.owner.login repo.name repo.last_build.id}} - {{repo.last_build.number}} {{repo.last_build.state}} - {{/link-to}}

    -

    master

    -

    394348a

    -

    {{format-time repo.last_build.finished_at}}

    -
    -
    - -
    - -
    + {{dashboard-row repo=repo}} {{/each}} -
+
-
-
+
    +