From b74aa037d5820756545ad90b61700a4a8cb5d852 Mon Sep 17 00:00:00 2001 From: Lisa P Date: Thu, 17 Sep 2015 14:22:00 +0200 Subject: [PATCH] refactor status-icon component and start rolling out new icons in the sidebar --- app/components/status-icon.coffee | 49 ++++++++---------- app/styles/app/layouts/branches.sass | 3 ++ app/styles/app/layouts/buildheader.sass | 3 -- app/styles/app/layouts/sidebar.sass | 14 ++--- app/styles/app/modules/tiles.sass | 54 +++++++++++--------- app/templates/components/branch-row.hbs | 13 ++++- app/templates/components/build-tile.hbs | 4 +- app/templates/components/repos-list-item.hbs | 19 ++++++- 8 files changed, 91 insertions(+), 68 deletions(-) diff --git a/app/components/status-icon.coffee b/app/components/status-icon.coffee index fbbe7c57..2668845e 100644 --- a/app/components/status-icon.coffee +++ b/app/components/status-icon.coffee @@ -4,47 +4,38 @@ StatusIconComponent = Ember.Component.extend tagName: 'span' classNames: ['status-icon', 'icon'] - classNameBindings: ['build.last_build.state', 'build.state'] + classNameBindings: ['status'] hasPassed: (-> - @get('build.last_build.state') == 'passed' || - @get('build.state') == 'passed' - ).property('build') + @get('status') == 'passed' + ).property('status') hasFailed: (-> - @get('build.last_build.state') == 'failed' || - @get('build.state') == 'failed' - ).property('build') + @get('status') == 'failed' + ).property('status') hasErrored: (-> - @get('build.last_build.state') == 'errored' || - @get('build.state') == 'errored' - ).property('build') + @get('status') == 'errored' + ).property('status') wasCanceled: (-> - @get('build.last_build.state') == 'canceled' || - @get('build.state') == 'canceled' - ).property('build') + @get('status') == 'canceled' + ).property('status') isRunning: (-> - @get('build.last_build.state') == 'started' || - @get('build.last_build.state') == 'queued' || - @get('build.last_build.state') == 'booting' || - @get('build.last_build.state') == 'received' || - @get('build.last_build.state') == 'created' || - @get('build.state') == 'started' || - @get('build.state') == 'queued' || - @get('build.state') == 'booting' || - @get('build.state') == 'received' || - @get('build.state') == 'created' - ).property('build') + @get('status') == 'started' || + @get('status') == 'queued' || + @get('status') == 'booting' || + @get('status') == 'received' || + @get('status') == 'created' + ).property('status') isEmpty: (-> - if @get('build.@type') == 'branch' - true if @get('build.last_build.state') == null - else if @get('build.@type') == 'build' - false if @get('build.state') != '' + if @get('status') == null || @get('status') == '' + true + else + false - ).property('build') + ).property('status') `export default StatusIconComponent` diff --git a/app/styles/app/layouts/branches.sass b/app/styles/app/layouts/branches.sass index a056f4c5..aeb10414 100644 --- a/app/styles/app/layouts/branches.sass +++ b/app/styles/app/layouts/branches.sass @@ -206,6 +206,9 @@ .dropup-item display: inline-block vertical-align: middle + .no-link + padding: .4em 0 + cursor: default .dropup--status @extend %dropup diff --git a/app/styles/app/layouts/buildheader.sass b/app/styles/app/layouts/buildheader.sass index 3438e459..d1050319 100644 --- a/app/styles/app/layouts/buildheader.sass +++ b/app/styles/app/layouts/buildheader.sass @@ -60,9 +60,6 @@ font-weight: 400 & span:hover + .tooltip display: block - ul - padding: 0 - margin: 0 .repo-main-commit position: relative diff --git a/app/styles/app/layouts/sidebar.sass b/app/styles/app/layouts/sidebar.sass index 7ed7b3c1..2cf87020 100644 --- a/app/styles/app/layouts/sidebar.sass +++ b/app/styles/app/layouts/sidebar.sass @@ -51,13 +51,13 @@ $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 + // .icon--hash + // width: 1.1em + // height: 1.3em .tabnav--sidebar diff --git a/app/styles/app/modules/tiles.sass b/app/styles/app/modules/tiles.sass index 309268f1..c73b6a79 100644 --- a/app/styles/app/modules/tiles.sass +++ b/app/styles/app/modules/tiles.sass @@ -1,12 +1,19 @@ -@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 +@mixin colorStatusIcons($color, $status) + .status-icon.#{$status} + svg g > * + fill: $color + +@mixin colorTiles($color, $status) + &.#{$status} + .tile-status + background-color: $color + .repo-header-title a, + .repo-build-status a, + .build-status a, + .tile-header, + .tile-header a + color: $color + @include colorStatusIcons($color, $status) .tile @extend %border-radius-4px @@ -23,21 +30,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') + @include colorTiles(#bfb502, 'queued') + @include colorTiles(#bfb502, 'booting') + @include colorTiles(#bfb502, 'received') + @include colorTiles(#bfb502, 'created') + + .status-icon .is-rotating + width: 17px; + height: 17px; + line-height: 1; @media #{$medium-up} height: 145px diff --git a/app/templates/components/branch-row.hbs b/app/templates/components/branch-row.hbs index fd806dba..3ba2ffa4 100644 --- a/app/templates/components/branch-row.hbs +++ b/app/templates/components/branch-row.hbs @@ -1,6 +1,6 @@
-

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

+

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

@@ -138,7 +138,16 @@
  • {{#if hasTriggered}} - build was triggered + + + + + + + + Build triggered {{else}} {{#if isTriggering}} {{loading-indicator}} diff --git a/app/templates/components/build-tile.hbs b/app/templates/components/build-tile.hbs index 6c493669..8ab70419 100644 --- a/app/templates/components/build-tile.hbs +++ b/app/templates/components/build-tile.hbs @@ -1,6 +1,8 @@ {{#if build.number}} {{#link-to "build" build.repository.slug build.id class="dropup-trigger"}} - {{status-icon build=build}} + {{status-icon status=build.state}} + + {{build.last_build.state}}
    {{request-icon build=build}} #{{build.number}}
    diff --git a/app/templates/components/repos-list-item.hbs b/app/templates/components/repos-list-item.hbs index 8b7f4b97..8a408f1a 100644 --- a/app/templates/components/repos-list-item.hbs +++ b/app/templates/components/repos-list-item.hbs @@ -1,7 +1,7 @@

    {{#if repo.slug}} - + {{status-icon status=repo.lastBuildState}} {{#link-to "repo" repo class="slug"}}{{repo.slug}}{{/link-to}} {{/if}}

    @@ -26,7 +26,22 @@

    - + + + + + + + + + Finished: {{format-time repo.lastBuildFinishedAt}}