refactor all things dashbaord
This commit is contained in:
Lisa P
parent
77dcbacd5e
commit
192ebce0c3
|
|
@ -1,6 +1,8 @@
|
||||||
import Ember from 'ember';
|
import Ember from 'ember';
|
||||||
|
|
||||||
export default Ember.Component.extend({
|
export default Ember.Component.extend({
|
||||||
|
|
||||||
|
classNames: ['dashboard-filter'],
|
||||||
actions: {
|
actions: {
|
||||||
toggleOrgFilter() {
|
toggleOrgFilter() {
|
||||||
this.toggleProperty('showFilter');
|
this.toggleProperty('showFilter');
|
||||||
|
|
|
||||||
|
|
@ -1,61 +1,26 @@
|
||||||
.sync-button
|
.sync-button
|
||||||
padding: 0.8em 0
|
vertical-align: middle
|
||||||
display: flex
|
|
||||||
flex-direction: row-reverse
|
|
||||||
.button
|
.button
|
||||||
padding: 5px 10px
|
height: 2.6rem
|
||||||
margin-left: .5em
|
padding: 0.6em 0.8em
|
||||||
height: 25px
|
background-color: $agate-blue
|
||||||
position: relative
|
|
||||||
z-index: 1
|
|
||||||
background: #a6adad
|
|
||||||
color: #ffffff
|
|
||||||
font-size: 14px
|
|
||||||
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
|
|
||||||
|
.is-syncing
|
||||||
|
background-color: $oxide-blue
|
||||||
|
|
||||||
|
.icon-trigger
|
||||||
|
|
||||||
&.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
|
||||||
|
|
||||||
pointer-events: none
|
|
||||||
transform: translateX(50%)
|
|
||||||
opacity: 0
|
|
||||||
transition: transform 200ms ease, opacity 100ms ease
|
|
||||||
|
|
||||||
.button:hover ~ &
|
|
||||||
transform: translateX(0)
|
|
||||||
opacity: 1
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,26 @@
|
||||||
.dashboard-active,
|
.repo-list
|
||||||
.dashbaord-inactive
|
|
||||||
list-style: none
|
list-style: none
|
||||||
padding: 0
|
padding: 0
|
||||||
|
|
||||||
|
|
||||||
|
.dashboard-header
|
||||||
|
display: flex
|
||||||
|
flex-flow: column-reverse wrap
|
||||||
|
justify-content: space-between
|
||||||
|
padding: 2em 0
|
||||||
|
@media #{$medium-up}
|
||||||
|
flex-direction: row
|
||||||
|
|
||||||
|
.dashboard-repos
|
||||||
|
margin-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
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,34 @@
|
||||||
<div class="filter filter--org">
|
<div class="filter-current">
|
||||||
<div class="filter-current">
|
{{#if orgs.isLoading}}
|
||||||
{{#if orgs.isLoading}}
|
{{loading-indicator}}
|
||||||
{{loading-indicator}}
|
{{else}}
|
||||||
{{else}}
|
<a {{action 'toggleOrgFilter'}} title="">
|
||||||
<a {{action 'toggleOrgFilter'}} title="">
|
{{#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}}
|
{{selected.name}}
|
||||||
{{selected.name}}
|
|
||||||
{{else}}
|
|
||||||
{{selected.login}}
|
|
||||||
{{/if}}
|
|
||||||
{{else}}
|
{{else}}
|
||||||
All organizations
|
{{selected.login}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</a><span class="icon-arrow-down"></span>
|
{{else}}
|
||||||
{{/if}}
|
All organizations
|
||||||
</div>
|
{{/if}}
|
||||||
<ul class="filter-dropdown {{if showFilter 'is-open'}}">
|
</a><span class="icon-arrow-down"></span>
|
||||||
{{#if selected }}
|
{{/if}}
|
||||||
<li><a title="" {{action 'select'}}>All organizations</a></li>
|
|
||||||
{{/if}}
|
|
||||||
{{#each orgs as |org|}}
|
|
||||||
<li>
|
|
||||||
<a title="" {{action 'select' org}}><img src="{{org.avatar_url}}" alt="">
|
|
||||||
{{#if org.name }}
|
|
||||||
{{org.name}}
|
|
||||||
{{else}}
|
|
||||||
{{org.login}}
|
|
||||||
{{/if}}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{{/each}}
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
<ul class="filter-dropdown {{if showFilter 'is-open'}}">
|
||||||
|
{{#if selected }}
|
||||||
|
<li><a title="" {{action 'select'}}>All organizations</a></li>
|
||||||
|
{{/if}}
|
||||||
|
{{#each orgs as |org|}}
|
||||||
|
<li>
|
||||||
|
<a title="" {{action 'select' org}}><img src="{{org.avatar_url}}" alt="">
|
||||||
|
{{#if org.name }}
|
||||||
|
{{org.name}}
|
||||||
|
{{else}}
|
||||||
|
{{org.login}}
|
||||||
|
{{/if}}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{{/each}}
|
||||||
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -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">
|
<p class="sync-last">Last synced {{format-time user.syncedAt}}</p>
|
||||||
<span class="icon">
|
<button {{action 'sync'}} class="button" type="button">
|
||||||
<svg x="0px" y="0px" viewBox="0 1 18 18" xml:space="preserve">
|
<span class="icon-trigger"></span>Sync account
|
||||||
<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>
|
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user