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

Merge pull request #463 from travis-ci/lp-le-dash

Browse Source 
Updating some UI elements
This commit is contained in:
Lisa P 2016-02-22 11:35:49 +00:00
commit 4fc13503d5
14 changed files with 254 additions and 341 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/orgs-filter.js
View File

@ -1,6 +1,8 @@
import Ember from 'ember'; import Ember from 'ember';
export default Ember.Component.extend({ export default Ember.Component.extend({
classNames: ['organisation-filter'],
actions: { actions: {
toggleOrgFilter() { toggleOrgFilter() {
this.toggleProperty('showFilter'); this.toggleProperty('showFilter');

2
app/components/repo-show-tools.js
View File

@ -3,7 +3,7 @@ import config from 'travis/config/environment';
export default Ember.Component.extend({ export default Ember.Component.extend({
popup: Ember.inject.service(), popup: Ember.inject.service(),
classNames: ['settings-menu'], classNames: ['option-button'],
classNameBindings: ['isOpen:display'], classNameBindings: ['isOpen:display'],
isOpen: false, isOpen: false,

80
app/styles/app/components/sync-button.sass
View File

@ -1,61 +1,47 @@
.sync-button .sync-button
padding: 0.8em 0 vertical-align: middle
display: flex display: flex
flex-direction: row-reverse flex-flow: row-reverse wrap
.button .button
padding: 5px 10px
margin-left: .5em
height: 25px
position: relative position: relative
z-index: 1 z-index: 2
background: #a6adad height: 2.6rem
color: #ffffff padding: 0.6em 0.8em
font-size: 14px background-color: $agate-blue
font-weight: $font-weight-normal
border: none border: none
border-radius: 2px border-radius: 2px
line-height: 1 font-size: 14px
&:hover &:hover
background: #8d9b9a background-color: $oxide-blue
cursor: pointer .sync-last
position: relative
z-index: -1
transition: transform 150ms ease, opacity 250ms ease
transform: translateX(80%)
opacity: 0
.button:hover ~ .sync-last
transform: translateX(0)
opacity: 1
z-index: 1
.is-syncing
background-color: $oxide-blue
.icon-trigger
@extend %icon-line-trigger-white
@extend %icon
width: 1.5em
height: 1.5em
margin-right: 0.3em
&.is-syncing
background: #c6b93d
color: white
.icon
width: 1.1em
height: 1.2em
vertical-align: middle
svg path
fill: white
.icon
margin-right: .5em
.loading-indicator--white .loading-indicator--white
margin-right: .5em
vertical-align: top vertical-align: top
margin-right: .5em
.profile-main
.sync-button
button
max-width: none
font-size: $font-size-sm
.sync-last
font-size: $font-size-sm
color: #adaaab
margin-left: .8rem
.sync-last .sync-last
display: inline-block display: inline-block
margin: 0 margin: 0 1em 0
font-size: 14px color: $asphalt-grey
color: #848384
text-align: right text-align: right
line-height: 2.6
pointer-events: none
transform: translateX(50%)
opacity: 0
transition: transform 200ms ease, opacity 100ms ease
.button:hover ~ &
transform: translateX(0)
opacity: 1

28
app/styles/app/layouts/dashboard.sass
View File

@ -1,4 +1,28 @@
.dashboard-active, .repo-list
.dashbaord-inactive
list-style: none list-style: none
padding: 0 padding: 0
.dashboard-header
width: 100%
display: flex
flex-flow: column-reverse wrap
justify-content: space-between
padding: 2em 0
@media #{$medium-up}
flex-direction: row
align-items: baseline
.dashboard-repos
padding-bottom: 5rem
.dashboard-section
margin-bottom: 4rem
.starred-empty
border: dotted 1px $pebble-grey
border-radius: 2px
text-align: center
padding: 2rem 0
font-size: 20px
color: $cement-grey

62
app/styles/app/layouts/owner.sass
View File

@ -1,9 +1,10 @@
.owner-header .owner-header
display: flex
flex-flow: row wrap
justify-content: flex-start
align-items: center
padding: 0 $column-gutter/2 padding: 0 $column-gutter/2
margin-bottom: 3rem margin-bottom: 3rem
color: #969496
a
color: #969496
.owner-title .owner-title
margin: .3em 0 .2em margin: .3em 0 .2em
font-size: 36px font-size: 36px
@ -22,61 +23,26 @@
text-decoration: underline text-decoration: underline
img img
border-radius: 50% border-radius: 50%
background-color: #F4F3ED background-color: $pebble-grey
.sync-button
margin-top: .8rem
p, button
margin: 0
.sync-last
color: #969496
font-size: $font-size-sm
.owner-avatar,
.owner-info
@extend %inline-block
vertical-align: middle
.owner-avatar .owner-avatar
width: grid-calc(4, 12) flex: 0 0 20%
@media #{$medium-up} @media #{$medium-up}
width: grid-calc(2, 12) flex: 0 0 17%
.owner-info .owner-info
width: grid-calc(7, 12) flex: 1 0 75%
@media #{$medium-up} @media #{$medium-up}
width: grid-calc(29, 36) flex: 1 0 80%
position: relative position: relative
overflow: hidden overflow: hidden
&:after &:after
content: "" content: ""
@include fadeOut(right, -90deg, white) @include fadeOut(right, -90deg, white)
.tabs--owner .tabs--owner
padding : 0 $column-gutter/2 padding : 0 $column-gutter/2
.active,
.active:hover,
position: relative
color: $oxide-blue
&:after
content: ""
position: absolute
left: 0
bottom: -0.25em
width: 100%
height: 2px
background-color: $oxide-blue
.active
font-weight: 600
.tabnav--owner
margin-bottom: 1.5rem
@media #{$medium-up}
height: 2.2em
border-bottom: solid 2px $cream-dark
.owner-tiles .owner-tiles
padding: 0 padding: 0
list-style-type: none list-style-type: none

54
app/styles/app/layouts/profile.sass
View File

@ -13,23 +13,17 @@
header header
h1 h1
margin: 0 1.7rem 0 0 margin: 0 1.7rem 0 0
color: #808080 color: $asphalt-grey
font-size: 35px font-size: 36px
font-weight: 400 font-weight: 400
line-height: 1.45
p:not(.sync-last)
font-size: $font-size-sm
color: $cement-grey
margin: 2rem 0 1rem 0
a
color: $cement-grey
text-decoration: underline
@media #{$medium-up} @media #{$medium-up}
.profile-header, .sync-button .profile-header
display: inline-block display: inline-block
vertical-align: middle vertical-align: middle
.sync-button .sync-button
margin-top: .5em float: right
margin-top: .4em
@media #{$large-up} @media #{$large-up}
.profile-header .profile-header
position: relative position: relative
@ -39,13 +33,6 @@
&:after &:after
@include fadeOut(right, -90deg, white) @include fadeOut(right, -90deg, white)
.loading-indicator--white
vertical-align: top
margin-right: .5em
p
font-size: $font-size-m
color: $cement-grey
.cta-btn .cta-btn
text-align: right text-align: right
@ -111,9 +98,8 @@
.profile-orgs .profile-orgs
h1 h1
color: #898b8c
font-size: $font-size-sm font-size: $font-size-sm
border-bottom: solid 2px $cream-dark border-bottom: solid 2px $pebble-grey
.profile-user .profile-user
margin: 1rem 0 2rem margin: 1rem 0 2rem
@ -145,9 +131,8 @@ p.profile-user-last
vertical-align: middle vertical-align: middle
.profile-settings .profile-settings
display: inline-block display: inline-block
padding: .2em .2em .2em .5em; padding: .2em .2em .2em .5em
height: 28px; height: 28px
vertical-align: bottom;
.icon .icon
width: 14px width: 14px
height: 14px height: 14px
@ -159,7 +144,7 @@ p.profile-user-last
display: inline-block !important display: inline-block !important
.profile-repo .profile-repo
border-radius: 4px border-radius: 2px
position: relative position: relative
display: inline-block display: inline-block
width: grid-calc(13, 24) width: grid-calc(13, 24)
@ -176,34 +161,31 @@ p.profile-user-last
.sync-spinner .sync-spinner
vertical-align: top vertical-align: top
&:hover &:hover
background-color: #ededec background-color: $pebble-grey
&:after &:after
content: "" content: ""
@include fadeOut(right, -90deg, #ededec) @include fadeOut(right, -90deg, $pebble-grey)
.active &:hover .active &:hover
background-color: #e2eee2 background-color: $seed-green
&:after &:after
content: "" content: ""
@include fadeOut(right, -90deg, #e2eee2) @include fadeOut(right, -90deg, $seed-green)
@media #{$medium-up} @media #{$medium-up}
width: grid-calc(18, 24) width: grid-calc(18, 24)
height: 30px height: 30px
&:hover &:hover
span span
display: inline-block display: inline-block
color: $cement-grey
@media #{$large-up} @media #{$large-up}
width: grid-calc(19, 24) width: grid-calc(19, 24)
.profile-additional .profile-additional
border-top: solid 2px #f3f2f2 border-top: solid 2px $pebble-grey
.profile-text, .profile-text,
.profile-additional p .profile-additional
color: #adaaab +linkStyle
line-height: $line-height-m
a
color: #adaaab
text-decoration: underline
.hooks-error .hooks-error
width: 100%; width: 100%;

80
app/styles/app/layouts/repo.sass
View File

@ -42,78 +42,8 @@
justify-content: space-between justify-content: space-between
border-bottom: 2px #f1f1f1 solid border-bottom: 2px #f1f1f1 solid
.option-button
$dropdown-button-height: 30px width: 10em
$dropdown-button-margin: -9px margin-top: -9px
.option-dropdown a
.settings-button padding-left: 2.4em
display: block
height: $dropdown-button-height
padding: 0
border: 1px solid $pebble-grey
color: $asphalt-grey
border-radius: 2px
text-align: center
line-height: 2
font-size: 14px
cursor: pointer
.label-align
padding: 0 1em
&:hover,
&:active,
// .display &,
.settings-menu:hover &
color: $oxide-blue
border-color: $oxide-blue
.settings-tofu
border-color: $oxide-blue
background-image: inline-image('/line-icons/icon-tofuburger-teal.svg')
@media #{$medium-up}
margin-top: $dropdown-button-margin
.settings-dropdown
display: none
position: absolute
top: $dropdown-button-height + ($dropdown-button-margin * .8)
width: 100%
padding: 0
margin: 6px 0 0
list-style: none
z-index: 60
background-color: white
border: 1px solid $oxide-blue
a
display: block
padding: .4em 1em .5em 2.4em
font-size: 14px
color: $oxide-blue
&:hover
color: white
background-color: $oxide-blue
@media #{$medium-up}
margin-top: -3px
.settings-tofu
width: 2em
height: 2em
display: inline-block
vertical-align: top
background:
image: inline-image('/line-icons/icon-tofuburger.svg')
repeat: no-repeat
size: 20px
position: 50%
@media #{$medium-up}
border-left: 1px solid $pebble-grey
.settings-menu
position: relative
@media #{$small-only}
&.display
.settings-dropdown
display: block
@media #{$medium-up}
&:hover
.settings-dropdown
display: block

4
app/styles/app/mixins.sass
View File

@ -48,12 +48,12 @@
=linkStyle =linkStyle
a a
text-decoration: none text-decoration: none
border-bottom: 1px solid #bfc0c1 border-bottom: 1px solid $cement-grey
padding-bottom: 0.1rem padding-bottom: 0.1rem
transition: color 200ms ease, border 200ms ease transition: color 200ms ease, border 200ms ease
&:hover, &:hover,
&:active &:active
color: #303030 color: $cement-grey
text-decoration: none text-decoration: none
border-color: transparent border-color: transparent

150
app/styles/app/modules/dropdown.sass
View File

@ -1,38 +1,42 @@
$dropdown-border: #C3D9DB .option-button
.dropdown--db
@include resetul
border-radius: 4px
position: absolute
padding: .8em .5em
z-index: 90
width: 12.5em;
right: 0;
top: 4em;
border: 2px $oxide-blue solid;
background-color: white
display: none
a
display: block
padding: 0.4em 1em .2em
&:hover
background-color: $oxide-blue
color: white
&:before
content: ""
width: 1.2em
height: 1.2em
display: block
position: absolute
top: -0.7em;
right: 1.1em;
background-color: white
border-top: solid 2px $oxide-blue;
border-left: solid 2px $oxide-blue;
transform: rotate(45deg);
.filter
position: relative position: relative
width: 17em
@media #{$small-only}
&.display
.option-dropdown
display: block
@media #{$medium-up}
&:hover
.option-dropdown
display: block
.option-display
color: $oxide-blue
border-color: $oxide-blue
.option-tofu
border-color: $oxide-blue
background-image: inline-image('/line-icons/icon-tofuburger-teal.svg')
$dropdown-button-height: 30px
$dropdown-button-margin: -9px
.option-display
display: flex
height: $dropdown-button-height
padding: 0
border: 1px solid $pebble-grey
color: $asphalt-grey
border-radius: 2px
text-align: center
line-height: 2
font-size: 14px
cursor: pointer
text-align: left
white-space: nowrap
.label-align
flex-grow: 1
padding: 0 1em
line-height: 2
overflow: hidden
img img
max-width: 20px max-width: 20px
max-height: 20px max-height: 20px
@ -41,39 +45,59 @@ $dropdown-border: #C3D9DB
border-radius: 50% border-radius: 50%
overflow: hidden overflow: hidden
.filter--org .option-tofu
float: left width: 2em
height: 2em
display: inline-block
vertical-align: top
background:
image: inline-image('/line-icons/icon-tofuburger.svg')
repeat: no-repeat
size: 20px
position: 50%
@media #{$medium-up}
border-left: 1px solid $pebble-grey
.filter-current .option-dropdown
padding: .9em 0
cursor: pointer
a
color: $oxide-blue
.filter-dropdown
@include resetul
position: absolute
top: 3em
min-width: 14em
background-color: white
border-radius: 2px
overflow: hidden
border: 1px solid $cream-dark
border-top: none
z-index: 40
display: none display: none
li position: absolute
white-space: nowrap top: $dropdown-button-height + ($dropdown-button-margin * .8)
width: 100%
padding: 0
margin: 6px 0 0
list-style: none
z-index: 60
background-color: white
border: 1px solid $oxide-blue
a a
display: inline-block display: block
width: 100% padding: .5em 1em
padding: 10px 10px 10px 20px font-size: 14px
color: $oxide-blue
&:hover &:hover
color: white color: white
background : $oxide-blue background-color: $oxide-blue
.is-selected
a
font-weight: 600
&.is-open
.option-search
input[type="text"]
display: block display: block
padding-left: 1em
outline: none
border-bottom: 1px solid $oxide-blue
border-radius: 0
.option-list
list-style: none
padding: 0
margin: 0
a
color: $asphalt-grey
cursor: pointer
img
width: 22px
height: 22px
vertical-align: top
margin-right: .3em
border-radius: 50%

12
app/styles/app/modules/switch.sass
View File

@ -13,15 +13,15 @@
padding: 3px 3px 3px 4px padding: 3px 3px 3px 4px
vertical-align: middle vertical-align: middle
overflow: visible overflow: visible
background-color: #E2E1E2 background-color: darken($pebble-grey, 10)
border-radius: 4px border-radius: 2px
border: none border: none
cursor: pointer cursor: pointer
span span
width: $switch-inner-width width: $switch-inner-width
height: $switch-inner-heigth height: $switch-inner-heigth
border-radius: 4px border-radius: 2px
background-color: #A5A4A4 background-color: $cement-grey
color: white color: white
text-align: center text-align: center
font-weight: 300 font-weight: 300
@ -50,9 +50,9 @@
&.active &.active
.switch-inner .switch-inner
background-color: #B8D6B9 background-color: darken($seed-green, 10)
span span
background-color: #3BA85D background-color: $turf-green
.on .on
display: inline-block display: inline-block
.off .off

37
app/templates/components/orgs-filter.hbs
View File

@ -1,9 +1,9 @@
<div class="filter filter--org"> <div class="option-button">
<div class="filter-current"> {{#if orgs.isLoading}}
{{#if orgs.isLoading}} {{loading-indicator}}
{{loading-indicator}} {{else}}
{{else}} <a href="#" title="" class="option-display" {{action 'toggleOrgFilter'}}>
<a {{action 'toggleOrgFilter'}} title=""> <span class="label-align">
{{#if selected }} {{#if selected }}
<img src="{{selected.avatar_url}}" alt="{{org.login}}"> <img src="{{selected.avatar_url}}" alt="{{org.login}}">
{{#if selected.name}} {{#if selected.name}}
@ -14,14 +14,18 @@
{{else}} {{else}}
All organizations All organizations
{{/if}} {{/if}}
</a><span class="icon-arrow-down"></span> </span><span class="option-tofu"></span>
{{/if}} </a>
</div> {{/if}}
<ul class="filter-dropdown {{if showFilter 'is-open'}}"> <div class="option-dropdown {{if showFilter 'is-open'}}">
{{#if selected }} <div class="option-search">
<li><a title="" {{action 'select'}}>All organizations</a></li> <input type="text">
{{/if}} </div>
{{#each orgs as |org|}} <div class="option-list">
{{#if selected }}
<li><a title="" {{action 'select'}}>All organizations</a></li>
{{/if}}
{{#each orgs as |org|}}
<li> <li>
<a title="" {{action 'select' org}}><img src="{{org.avatar_url}}" alt=""> <a title="" {{action 'select' org}}><img src="{{org.avatar_url}}" alt="">
{{#if org.name }} {{#if org.name }}
@ -31,6 +35,7 @@
{{/if}} {{/if}}
</a> </a>
</li> </li>
{{/each}} {{/each}}
</ul> </div>
</div>
</div> </div>

6
app/templates/components/repo-show-tools.hbs
View File

@ -1,8 +1,8 @@
<a {{action "menu"}} class="settings-button" type="" title="Show more options"> <a {{action "menu"}} class="option-display" type="" title="Show more options">
<span class="label-align">More options</span> <span class="label-align">More options</span>
<span class="settings-tofu"></span> <span class="option-tofu"></span>
</a> </a>
<ul class="settings-dropdown"> <ul class="option-dropdown">
{{#if displaySettingsLink}} {{#if displaySettingsLink}}
<li> <li>
{{#link-to "settings" repo}}Settings{{/link-to}} {{#link-to "settings" repo}}Settings{{/link-to}}

19
app/templates/components/sync-button.hbs
View File

@ -1,19 +1,10 @@
{{#if user.isSyncing }} {{#if user.isSyncing }}
<button class="button is-syncing"> <div class="button is-syncing">
<span class="loading-indicator--white"><i></i><i></i><i></i></span>Syncing from GitHub <span class="loading-indicator--white"><i></i><i></i><i></i></span>Syncing from GitHub
</button> </div>
{{else}} {{else}}
<button {{action 'sync'}} class="button"> <button {{action 'sync'}} class="button" type="button">
<span class="icon"> <span class="icon-trigger"></span>Sync account
<svg x="0px" y="0px" viewBox="0 1 18 18" xml:space="preserve">
<g id="Trigger">
<path fill="#A7AEAE" d="M17.2,7.9C17,7.6,16.6,7.7,16.3,8l-1,1.2C14.9,6,12.2,3.6,9,3.6c-3.6,0-6.4,2.9-6.4,6.4s2.9,6.4,6.4,6.4
c1.8,0,3.6-0.8,4.8-2.2c0.2-0.3,0.2-0.7-0.1-0.9c-0.3-0.2-0.7-0.2-0.9,0.1c-1,1.1-2.4,1.7-3.9,1.7c-2.8,0-5.1-2.3-5.1-5.1
S6.1,4.9,9,4.9c2.7,0,4.9,2.1,5.1,4.7l-1.7-1.1c-0.3-0.2-0.7-0.1-0.9,0.2s-0.1,0.7,0.2,0.9l2.8,1.8c0,0,0,0,0,0
c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1c0,0,0.1,0,0.1-0.1c0,0,0.1-0.1,0.1-0.1l2-2.4C17.6,8.5,17.5,8.1,17.2,7.9z"/>
</g>
</svg>
</span>Sync account
</button> </button>
<p class="sync-last">last synced {{format-time user.syncedAt}}</p> <p class="sync-last">Last synced {{format-time user.syncedAt}}</p>
{{/if}} {{/if}}

59
app/templates/dashboard/repositories.hbs
View File

@ -1,30 +1,33 @@
<div id="filters" class="dashboard-filter"> <div class="inner">
<div class="row"> <div class="dashboard-header">
{{orgs-filter orgs=orgs selected=selectedOrg action="selectOrg"}} {{orgs-filter orgs=orgs selected=selectedOrg action="selectOrg"}}
<div class="float-right"> {{sync-button user=auth.currentUser}}
{{sync-button user=auth.currentUser}} </div>
</div>
<div class="dashboard-repos">
<section class="dashboard-section dashboard-starred">
<h2 class="small-title">Starred repositories</h2>
<div class="starred-empty">
<span>You can keep track of your favorite repositories here once you start starring!</span>
</div>
</section>
<section class="dashboard-section dashboard-active">
<h2 class="small-title">All repositories</h2>
<ul class="repo-list">
{{#each filteredRepositories as |repo|}}
{{dashboard-row repo=repo}}
{{else}}
{{no-repos}}
{{/each}}
</ul>
</section>
<section class="dashboard-section dashboard-inactive">
<h2 class="small-title">Inactive repositories</h2>
<ul class="repo-list">
</ul>
</section>
</div> </div>
</div> </div>
<div class="dashboard wrapper-main">
{{!-- <section class="dashboard-starred">
<div class="row">
<div class="dashboard--empty">
<p><span class="icon icon-star"></span>Want to keep an eye on certain projects? Star repositories below to add them in this section.</p>
</div>
</div>
</section> --}}
<ul class="dashboard-active">
{{#each filteredRepositories as |repo|}}
{{dashboard-row repo=repo}}
{{else}}
{{no-repos}}
{{/each}}
</ul>
{{!-- <hr> --}}
<ul class="dashboard-inactive">
</ul>
</div>