diff --git a/app/components/branch-row.coffee b/app/components/branch-row.coffee new file mode 100644 index 00000000..d6759804 --- /dev/null +++ b/app/components/branch-row.coffee @@ -0,0 +1,5 @@ +`import Ember from 'ember'` + +BranchRowComponent = Ember.Component.extend() + +`export default BranchRowComponent` diff --git a/app/controllers/builds.coffee b/app/controllers/builds.coffee index 956c9dbb..f89bba63 100644 --- a/app/controllers/builds.coffee +++ b/app/controllers/builds.coffee @@ -41,6 +41,10 @@ Controller = Ember.ArrayController.extend false ).property('tab', 'repo.builds', 'repo.branches') + displayNewBranchRows: (-> + true if @get('tab') == 'branches' + ).property('tab', 'repo.builds', 'repo.branches') + noticeData: (-> return { repo: @get('repo'), diff --git a/app/styles/app.scss b/app/styles/app.scss index 9ebba52f..175173ce 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -51,6 +51,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/layouts/branches.sass b/app/styles/app/layouts/branches.sass new file mode 100644 index 00000000..b71b2afd --- /dev/null +++ b/app/styles/app/layouts/branches.sass @@ -0,0 +1,171 @@ + +.branch-row + border: 1px solid $cream-dark + font-size: 16px + text-align: right + + span + width: 1em + height: 1em + margin-right: .5em + background-color: #666 + display: inline-block + vertical-align: middle + + .avatar + border-radius: 50% + margin-right: .5em + vertical-align: middle + + .row-item + margin: .2em + font-size: 16px + font-weight: 400 + a + color: $grey-dark + text-decoration: none + &:hover + text-decoration: underline + + @media #{$medium-up} + & > div:first-of-type + width: 25% + & > 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(5) + width: 26% + + +%row-element + vertical-align: middle + @media #{$medium-up} + display: inline-block + .row-item + vertical-align: middle + +.two-line + @extend %row-element + padding: .6em 0 + text-align: left + +.one-line + @extend %row-element + .row-item + display: inline-block + .branch-nav + display: none + @media #{$medium-up} + display: block + +// @todo refactor into dropup +%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: .6em + height: .6em + left: 46% + transform: rotate(45deg) + &:before + bottom: -0.4em + &:after + bottom: -0.3em; + background-color: $white + .dropup-trigger:hover ~ &, + .dropup-trigger:hover &, + &:hover + display: block + +.dropup--blue + @extend %dropup + 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 + + @media #{$medium-up} + padding: .4em + transform: translate(-2.7em, -8.2em) + border: 1px solid $teal-dark + li + display: block + margin: 0 + background-color: $white + a + display: block + padding: 0.2em 0.5em + text-decoration: none + color: $grey-dark + &:hover + background-color: $teal-dark + color: $white + + &:before + background-color: $teal-dark + +.dropup--status + @extend %dropup + display: none + @media #{$medium-up} + top: -3em + padding: .2em .3em + transform: translate(-1em, 0em); + white-space: nowrap + font-size: 14px; + border: 1px solid $red-dark + &:before + background-color: $red-dark + +.dropup-trigger + padding: 1em 0 + +.build-tiles + height: 4.8rem + margin: 0 + padding: 0 + list-style: none + li + position: relative + display: inline-block + height: 100% + width: 18.8% + background-color: #999 + .icon-status + position: absolute + top: 0 + right: 0 + bottom: 0 + left: 0 + width: 1.3rem + height: 1.3rem + margin: auto + a + display: block + height: 100% + text-align: center + + diff --git a/app/templates/builds.hbs b/app/templates/builds.hbs index 86b77799..95670fc6 100644 --- a/app/templates/builds.hbs +++ b/app/templates/builds.hbs @@ -1,6 +1,12 @@ {{#if content.isLoaded}} {{#each controller as |build|}} - {{builds-item build=build}} + + {{#if displayNewBranchRows}} + {{branch-row build=build}} + {{else}} + {{builds-item build=build}} + {{/if}} + {{else}} {{no-builds repo=noticeData isPR=displayPullRequests isBranch=displayBranches}} {{/each}} diff --git a/app/templates/components/branch-row.hbs b/app/templates/components/branch-row.hbs new file mode 100644 index 00000000..669b6ab8 --- /dev/null +++ b/app/templates/components/branch-row.hbs @@ -0,0 +1,68 @@ +
  • +
    +
    +

    master

    +
    +
    +
    6 builds
    +
    +
    +
    +
    +
    #2937 failed
    +
    +
    +
    2 days ago
    +
    +
    +
    +
    +
    1cbc26
    +
    +
    +
    Mr. T
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + +
    +