suzanne.soy/travis-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

start implementing new branches

Browse Source
This commit is contained in:
Lisa P 2015-08-27 17:42:45 -04:00
parent 58f540457b
commit 05b22c40e0
6 changed files with 256 additions and 1 deletions
app
components
branch-row.coffee
controllers
builds.coffee
styles
app.scss
app/layouts
branches.sass
templates
builds.hbs
components
branch-row.hbs

5
app/components/branch-row.coffee Normal file
View File

@ -0,0 +1,5 @@
`import Ember from 'ember'`
BranchRowComponent = Ember.Component.extend()
`export default BranchRowComponent`

4
app/controllers/builds.coffee
View File

@ -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'),

1
app/styles/app.scss
View File

@ -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";

171
app/styles/app/layouts/branches.sass Normal file
View File

@ -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

8
app/templates/builds.hbs
View File

@ -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}}

68
app/templates/components/branch-row.hbs Normal file
View File

@ -0,0 +1,68 @@
<li class="branch-row failed">
<div class="two-line">
<div class="branch-name">
<h2 class="row-item"><span class="icon-status failed"></span>master</h2>
</div>
<div class="branch-builds">
<div class="row-item"><a href="#"><span class="icon-crane"></span>6 builds</a></div>
</div>
</div>
<div class="two-line">
<div class="branch-request">
<div class="row-item"><a href="#"><span class="icon-request push"></span>#2937 failed</a></div>
</div>
<div class="branch-calendar">
<div class="row-item"><a href="#"><span class="icon-calendar"></span>2 days ago</a></div>
</div>
</div>
<div class="two-line">
<div class="branch-commit">
<div class="row-item"><a href="#"><span class="icon-request push"></span>1cbc26</a></div>
</div>
<div class="branch-commiter">
<div class="row-item"><img src="//placehold.it/15x15" alt="" class="avatar">Mr. T</div>
</div>
</div>
<div class="one-line">
<div class="branch-nav dropup-trigger">
<div class="row-item"><a href="#"><span class="icon-tofu"></span></a></div>
</div>
<div class="dropup--blue">
<ul>
<li><a href="#"><span class="icon-trigger"></span>Trigger a build</a></li>
<li><a href="#"><span class="icon-eye"></span>View all builds</a></li>
</ul>
</div>
</div>
<div class="one-line">
<ul class="build-tiles">
<li class="passed">
<a href="#" class="dropup-trigger">
<span class="icon-status failed"></span>
<div class="dropup--status">
<span class="icon-request push"></span> #23872
</div>
</a>
</li>
<li class="passed">
<a href="#" class="dropup-trigger"><span class="icon-status passed"></span></a>
<div class="dropup--status">
<span class="icon-request push"></span> #23872
</div>
</li>
<li class="passed">
<a href="#" class="dropup-trigger"><span class="icon-status canceled"></span></a>
<div class="dropup dropup--status">
<span class="icon-request push"></span> #23872
</div>
</li>
<li class="passed">
<a href="#" class="dropup-trigger"><span class="icon-status errored"></span></a>
<div class="dropup--status">
<span class="icon-request push"></span> #23872
</div>
</li>
<li class=""></li>
</ul>
</div>
</li>