diff --git a/app/components/status-icon.coffee b/app/components/status-icon.coffee index c17a356a..493c4b8f 100644 --- a/app/components/status-icon.coffee +++ b/app/components/status-icon.coffee @@ -22,4 +22,12 @@ StatusIconComponent = Ember.Component.extend @get('build.state') == 'canceled' ).property('build.state') + isRunning: (-> + @get('build.state') == 'started' || + @get('build.state') == 'queued' || + @get('build.state') == 'booting' || + @get('build.state') == 'received' || + @get('build.state') == 'created' + ).property('build.state') + `export default StatusIconComponent` diff --git a/app/controllers/branches.coffee b/app/controllers/branches.coffee index 06d2a622..77134a0d 100644 --- a/app/controllers/branches.coffee +++ b/app/controllers/branches.coffee @@ -5,7 +5,6 @@ BranchesController = Ember.Controller.extend defaultBranch: (-> - repos = @get('model') # repos = repos.filter (item, index) -> diff --git a/app/styles/app.scss b/app/styles/app.scss index 175173ce..091b7cb0 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -20,6 +20,7 @@ @import "app/components/sync-button"; @import "app/components/loading-indicator"; +@import "app/components/build-tile"; @import "app/animation/tractor"; diff --git a/app/styles/app/components/build-tile.sass b/app/styles/app/components/build-tile.sass new file mode 100644 index 00000000..4a97075b --- /dev/null +++ b/app/styles/app/components/build-tile.sass @@ -0,0 +1,61 @@ +@mixin buildTileColors($color, $bg, $status) + > .#{$status} + background-color: $bg + .icon-request g > * + fill: $color + &:hover + background-color: $color + .status-icon g > * + fill: $white + .status-icon .circle + border-color: $white + + @media #{$medium-up} + .dropup--status + border-color: $color + color: $color + &:before + background-color: $color + + +.build-tiles + height: 5.6rem + margin: 0 + padding: 0 + list-style: none + li + position: relative + display: inline-block + height: 100% + width: 18.8% + .status-icon + position: absolute + top: 0 + right: 0 + bottom: 0 + left: 0 + width: 2rem + height: 2rem + margin: auto + background-color: transparent + .is-rotating + width: 100% + height: 100% + line-height: 1.5 + .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(#ECCE4B, rgba(#ECCE4B, 0.4), 'started') + @include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.4), 'queued') + @include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.4), 'booting') + @include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.4), 'received') + @include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.4), 'created') diff --git a/app/styles/app/layouts/branches.sass b/app/styles/app/layouts/branches.sass index 19e64956..8ca940c1 100644 --- a/app/styles/app/layouts/branches.sass +++ b/app/styles/app/layouts/branches.sass @@ -10,28 +10,12 @@ .icon-request g > * fill: $color -@mixin buildTileColors($color, $bg, $status) - > .#{$status} - background-color: $bg - .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: $color - -.tabbody - ul - padding: 0 - margin: 0 - list-style: none +// .tabbody +// ul +// padding: 0 +// margin: 0 +// list-style: none .branch-row border: 1px solid $cream-dark @@ -198,7 +182,6 @@ @media #{$medium-up} top: -3em padding: .2em .3em - transform: translate(-1em, 0em); white-space: nowrap font-size: 14px; border: 1px solid $red-dark @@ -210,41 +193,29 @@ path fill: $teal-dark +// @todo refactor to status-icon module +.status-icon + .is-rotating + width: 17px + height: 19px + line-height: 1 + 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 2px #ECCE4B + border-radius: 50% + transform-origin: center center -// @todo refactor to build-tiles module -.build-tiles - height: 5.6rem - margin: 0 - padding: 0 - list-style: none - li - position: relative - display: inline-block - height: 100% - width: 18.8% - .status-icon - position: absolute - top: 0 - right: 0 - bottom: 0 - left: 0 - width: 2rem - height: 2rem - margin: auto - background-color: transparent - 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(#ECCE4B, rgba(#ECCE4B, 0.5), 'started') - @include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.5), 'queued') - @include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.5), 'booting') - @include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.5), 'received') - @include buildTileColors(#ECCE4B, rgba(#ECCE4B, 0.5), 'created') - +@keyframes rotation + 0% + transform: rotateZ(0deg) + 45%, 55% + transform: rotateZ(180deg) + 100% + transform: rotateZ(360deg) 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/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/templates/branches.hbs b/app/templates/branches.hbs index 3c2d4ea0..b5b0f92a 100644 --- a/app/templates/branches.hbs +++ b/app/templates/branches.hbs @@ -1,16 +1,14 @@
-

Default Branch

- -
-

Active Branches

- -
-

Inactive Branches

- -