From c5fa70776ba2fe42a47b5f018e643a4d09554acc Mon Sep 17 00:00:00 2001 From: Lisa P Date: Fri, 28 Aug 2015 16:28:47 -0400 Subject: [PATCH] add the branches things --- app/components/build-tile.coffee | 8 + app/components/request-icon.coffee | 23 +++ app/components/status-icon.coffee | 25 +++ app/styles/app/layouts/branches.sass | 56 +++++-- app/styles/app/modules/icons.sass | 12 +- app/templates/components/branch-row.hbs | 152 ++++++++++++++----- app/templates/components/build-tile.hbs | 6 + app/templates/components/request-icon.hbs | 41 +++++ app/templates/components/status-icon.hbs | 44 ++++++ public/images/line-icons/icon-api.svg | 10 ++ public/images/line-icons/icon-build.svg | 14 ++ public/images/line-icons/icon-cal.svg | 14 ++ public/images/line-icons/icon-cancelled.svg | 8 + public/images/line-icons/icon-commit.svg | 24 +++ public/images/line-icons/icon-errored.svg | 8 + public/images/line-icons/icon-failed.svg | 8 + public/images/line-icons/icon-no-builds.svg | 11 ++ public/images/line-icons/icon-passed.svg | 9 ++ public/images/line-icons/icon-pull.svg | 15 ++ public/images/line-icons/icon-push.svg | 8 + public/images/line-icons/icon-tofuburger.svg | 10 ++ public/images/line-icons/icon-trigger.svg | 8 + public/images/line-icons/icon-view.svg | 9 ++ 23 files changed, 467 insertions(+), 56 deletions(-) create mode 100644 app/components/build-tile.coffee create mode 100644 app/components/request-icon.coffee create mode 100644 app/components/status-icon.coffee create mode 100644 app/templates/components/build-tile.hbs create mode 100644 app/templates/components/request-icon.hbs create mode 100644 app/templates/components/status-icon.hbs create mode 100644 public/images/line-icons/icon-api.svg create mode 100644 public/images/line-icons/icon-build.svg create mode 100644 public/images/line-icons/icon-cal.svg create mode 100644 public/images/line-icons/icon-cancelled.svg create mode 100644 public/images/line-icons/icon-commit.svg create mode 100644 public/images/line-icons/icon-errored.svg create mode 100644 public/images/line-icons/icon-failed.svg create mode 100644 public/images/line-icons/icon-no-builds.svg create mode 100644 public/images/line-icons/icon-passed.svg create mode 100644 public/images/line-icons/icon-pull.svg create mode 100644 public/images/line-icons/icon-push.svg create mode 100644 public/images/line-icons/icon-tofuburger.svg create mode 100644 public/images/line-icons/icon-trigger.svg create mode 100644 public/images/line-icons/icon-view.svg 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/request-icon.coffee b/app/components/request-icon.coffee new file mode 100644 index 00000000..031a47a1 --- /dev/null +++ b/app/components/request-icon.coffee @@ -0,0 +1,23 @@ +`import Ember from 'ember'` + +RequestIconComponent = Ember.Component.extend + + tagName: 'span' + classNames: ['icon-request'] + classNameBindings: ['build.state'] + + isPush: (-> + @get('build.eventType') == 'push' + ).property('build.eventType') + + isPR: (-> + @get('build.eventType') == 'pull_request' + ).property('build.eventType') + + isAPI: (-> + @get('build.eventType') == 'api' + ).property('build.eventType') + + + +`export default RequestIconComponent` diff --git a/app/components/status-icon.coffee b/app/components/status-icon.coffee new file mode 100644 index 00000000..c17a356a --- /dev/null +++ b/app/components/status-icon.coffee @@ -0,0 +1,25 @@ +`import Ember from 'ember'` + +StatusIconComponent = Ember.Component.extend + + tagName: 'span' + classNames: ['status-icon'] + classNameBindings: ['build.state'] + + hasPassed: (-> + @get('build.state') == 'passed' + ).property('build.state') + + hasFailed: (-> + @get('build.state') == 'failed' + ).property('build.state') + + hasErrored: (-> + @get('build.state') == 'errored' + ).property('build.state') + + wasCanceled: (-> + @get('build.state') == 'canceled' + ).property('build.state') + +`export default StatusIconComponent` diff --git a/app/styles/app/layouts/branches.sass b/app/styles/app/layouts/branches.sass index 63dfdda9..d652b46a 100644 --- a/app/styles/app/layouts/branches.sass +++ b/app/styles/app/layouts/branches.sass @@ -6,17 +6,26 @@ color: $color &:hover border-color: $color + .status-icon g > *, + .icon-request g > * + fill: $color @mixin buildTileColors($color, $bg, $status) - .#{$status} + > .#{$status} background-color: $bg - a - color: $color + .icon-request g > * + fill: $color + &:hover + background-color: $color + .status-icon g > * + fill: $white + @media #{$medium-up} .dropup--status border-color: $color + color: $color &:before - background-color: $bg + background-color: $color .tabbody ul @@ -32,16 +41,15 @@ color: $grey-dark span - width: 1em - height: 1em - margin-right: .5em - background-color: #666 + width: 1.3em + height: 1.3em + margin-right: .2em display: inline-block vertical-align: middle .avatar - width: 15px - margin-right: .5em + width: 16px + margin-right: .7em border-radius: 50% vertical-align: middle @@ -89,7 +97,11 @@ .two-line @extend %row-element padding: .6em 0 - text-align: left + margin-left: 2em + text-align: left + + @media #{$medium-up} + margin-left: 0 .one-line @extend %row-element @@ -100,7 +112,7 @@ @media #{$medium-up} display: block -// @todo refactor into dropup +// @todo refactor into dropup module %dropup @media #{$medium-up} position: absolute @@ -145,6 +157,9 @@ padding: 0.3em 0.5em color: $white text-decoration: none + .icon-trigger path, + .icon-eye path + fill: $white @media #{$medium-up} padding: .4em @@ -154,6 +169,9 @@ display: block margin: 0 background-color: $white + .icon-trigger path, + .icon-eye path + fill: $grey-medium a display: block padding: 0.2em 0.5em @@ -162,6 +180,9 @@ &:hover background-color: $teal-dark color: $white + .icon-trigger path, + .icon-eye path + fill: $white &:before background-color: $teal-dark @@ -181,7 +202,11 @@ .dropup-trigger padding: 1em 0 + path + fill: $teal-dark + +// @todo refactor to build-tiles module .build-tiles height: 5.6rem margin: 0 @@ -192,15 +217,16 @@ display: inline-block height: 100% width: 18.8% - .icon-status + .status-icon position: absolute top: 0 right: 0 bottom: 0 left: 0 - width: 1.3rem - height: 1.3rem + width: 2rem + height: 2rem margin: auto + background-color: transparent a display: block height: 100% diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass index 6534f042..a31b007c 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: "+" @@ -211,7 +222,6 @@ .icon-flag background-image: inline-image('svg/notice-flag.svg') - .icon-receiving margin: 0.3rem 0.5rem; display: inline-block; diff --git a/app/templates/components/branch-row.hbs b/app/templates/components/branch-row.hbs index b6d176ea..f337f0a7 100644 --- a/app/templates/components/branch-row.hbs +++ b/app/templates/components/branch-row.hbs @@ -1,26 +1,88 @@
-

{{build.commit.branch}}

+

{{status-icon build=build}}{{build.commit.branch}}

-
~buildcount~ builds
+
+ + + + + + + + ~ builds
{{#link-to "build" build.repo build}} - {{build.number}} {{build.state}} + {{request-icon build=build}} + #{{build.number}} {{build.state}} {{/link-to}}
-
{{format-time build.finishedAt}}
+
+ + + + + + + + + + {{format-time build.finishedAt}}
-
{{format-sha build.commit.sha}}
+
+ + + + + + + + + {{format-sha build.commit.sha}}
avatar{{build.commit.committerName}}
@@ -28,48 +90,58 @@
-
+
+ + + + + + + + +
    -
  • - - -
    - #23872 -
    -     -
    • -
  • - -
    - #23872 -
    -
    • -
  • - -
    - #23872 -
    -
    • -
  • - -
    - #23872 -
    -
    • -
  • - -
    - #23872 -
    -
    • + {{build-tile build=build}} + {{build-tile build=build}} + {{build-tile build=build}} + {{build-tile build=build}} + {{build-tile build=build}}
diff --git a/app/templates/components/build-tile.hbs b/app/templates/components/build-tile.hbs new file mode 100644 index 00000000..d2c640b1 --- /dev/null +++ b/app/templates/components/build-tile.hbs @@ -0,0 +1,6 @@ + + {{status-icon build=build}} +
+ {{request-icon build=build}} #{{build.number}} +
+ diff --git a/app/templates/components/request-icon.hbs b/app/templates/components/request-icon.hbs new file mode 100644 index 00000000..051ed431 --- /dev/null +++ b/app/templates/components/request-icon.hbs @@ -0,0 +1,41 @@ +{{#if isPush}} + + + + + +{{/if}} + +{{#if isPR}} + + + + + + +{{/if}} + +{{#if isAPI}} + + + + + +{{/if}} diff --git a/app/templates/components/status-icon.hbs b/app/templates/components/status-icon.hbs new file mode 100644 index 00000000..fe6b5c9c --- /dev/null +++ b/app/templates/components/status-icon.hbs @@ -0,0 +1,44 @@ + +{{#if hasPassed}} + + + + + +{{/if}} + +{{#if hasFailed}} + + + + + +{{/if}} + +{{#if wasCanceled}} + + + + + +{{/if}} + +{{#if hasErrored}} + + + + + + +{{/if}} + diff --git a/public/images/line-icons/icon-api.svg b/public/images/line-icons/icon-api.svg new file mode 100644 index 00000000..b626ff8c --- /dev/null +++ b/public/images/line-icons/icon-api.svg @@ -0,0 +1,10 @@ + + + + + diff --git a/public/images/line-icons/icon-build.svg b/public/images/line-icons/icon-build.svg new file mode 100644 index 00000000..86ca24e4 --- /dev/null +++ b/public/images/line-icons/icon-build.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/public/images/line-icons/icon-cal.svg b/public/images/line-icons/icon-cal.svg new file mode 100644 index 00000000..7b6846b1 --- /dev/null +++ b/public/images/line-icons/icon-cal.svg @@ -0,0 +1,14 @@ + + + + + + + diff --git a/public/images/line-icons/icon-cancelled.svg b/public/images/line-icons/icon-cancelled.svg new file mode 100644 index 00000000..eaddd71c --- /dev/null +++ b/public/images/line-icons/icon-cancelled.svg @@ -0,0 +1,8 @@ + + + + + diff --git a/public/images/line-icons/icon-commit.svg b/public/images/line-icons/icon-commit.svg new file mode 100644 index 00000000..0e73d9cf --- /dev/null +++ b/public/images/line-icons/icon-commit.svg @@ -0,0 +1,24 @@ + + + + + diff --git a/public/images/line-icons/icon-errored.svg b/public/images/line-icons/icon-errored.svg new file mode 100644 index 00000000..470f2f88 --- /dev/null +++ b/public/images/line-icons/icon-errored.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/public/images/line-icons/icon-failed.svg b/public/images/line-icons/icon-failed.svg new file mode 100644 index 00000000..f8321d14 --- /dev/null +++ b/public/images/line-icons/icon-failed.svg @@ -0,0 +1,8 @@ + + + + + diff --git a/public/images/line-icons/icon-no-builds.svg b/public/images/line-icons/icon-no-builds.svg new file mode 100644 index 00000000..3a9f2ee9 --- /dev/null +++ b/public/images/line-icons/icon-no-builds.svg @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/public/images/line-icons/icon-passed.svg b/public/images/line-icons/icon-passed.svg new file mode 100644 index 00000000..03886858 --- /dev/null +++ b/public/images/line-icons/icon-passed.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/public/images/line-icons/icon-pull.svg b/public/images/line-icons/icon-pull.svg new file mode 100644 index 00000000..b89de964 --- /dev/null +++ b/public/images/line-icons/icon-pull.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/public/images/line-icons/icon-push.svg b/public/images/line-icons/icon-push.svg new file mode 100644 index 00000000..0b41fc5b --- /dev/null +++ b/public/images/line-icons/icon-push.svg @@ -0,0 +1,8 @@ + + + + + diff --git a/public/images/line-icons/icon-tofuburger.svg b/public/images/line-icons/icon-tofuburger.svg new file mode 100644 index 00000000..ea96c076 --- /dev/null +++ b/public/images/line-icons/icon-tofuburger.svg @@ -0,0 +1,10 @@ + + + + + + + diff --git a/public/images/line-icons/icon-trigger.svg b/public/images/line-icons/icon-trigger.svg new file mode 100644 index 00000000..92930768 --- /dev/null +++ b/public/images/line-icons/icon-trigger.svg @@ -0,0 +1,8 @@ + + + + + diff --git a/public/images/line-icons/icon-view.svg b/public/images/line-icons/icon-view.svg new file mode 100644 index 00000000..198c0ab6 --- /dev/null +++ b/public/images/line-icons/icon-view.svg @@ -0,0 +1,9 @@ + + + + + +