refactor all things dashbaord
This commit is contained in:
Lisa P
parent
77dcbacd5e
commit
192ebce0c3
|
|
@ -1,6 +1,8 @@
|
|||
import Ember from 'ember';
|
||||
|
||||
export default Ember.Component.extend({
|
||||
|
||||
classNames: ['dashboard-filter'],
|
||||
actions: {
|
||||
toggleOrgFilter() {
|
||||
this.toggleProperty('showFilter');
|
||||
|
|
|
|||
|
|
@ -1,61 +1,26 @@
|
|||
.sync-button
|
||||
padding: 0.8em 0
|
||||
display: flex
|
||||
flex-direction: row-reverse
|
||||
vertical-align: middle
|
||||
.button
|
||||
padding: 5px 10px
|
||||
margin-left: .5em
|
||||
height: 25px
|
||||
position: relative
|
||||
z-index: 1
|
||||
background: #a6adad
|
||||
color: #ffffff
|
||||
font-size: 14px
|
||||
font-weight: $font-weight-normal
|
||||
height: 2.6rem
|
||||
padding: 0.6em 0.8em
|
||||
background-color: $agate-blue
|
||||
border: none
|
||||
border-radius: 2px
|
||||
line-height: 1
|
||||
font-size: 14px
|
||||
&:hover
|
||||
background: #8d9b9a
|
||||
cursor: pointer
|
||||
background-color: $oxide-blue
|
||||
|
||||
.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
|
||||
margin-right: .5em
|
||||
vertical-align: top
|
||||
|
||||
.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
|
||||
margin-right: .5em
|
||||
|
||||
.sync-last
|
||||
display: inline-block
|
||||
margin: 0
|
||||
font-size: 14px
|
||||
color: #848384
|
||||
margin: 0 1em 0
|
||||
color: $asphalt-grey
|
||||
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,
|
||||
.dashbaord-inactive
|
||||
.repo-list
|
||||
list-style: none
|
||||
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">
|
||||
{{#if orgs.isLoading}}
|
||||
{{loading-indicator}}
|
||||
{{else}}
|
||||
<a {{action 'toggleOrgFilter'}} title="">
|
||||
{{#if selected }}
|
||||
<img src="{{selected.avatar_url}}" alt="{{org.login}}">
|
||||
{{#if selected.name}}
|
||||
{{selected.name}}
|
||||
{{else}}
|
||||
{{selected.login}}
|
||||
{{/if}}
|
||||
<div class="filter-current">
|
||||
{{#if orgs.isLoading}}
|
||||
{{loading-indicator}}
|
||||
{{else}}
|
||||
<a {{action 'toggleOrgFilter'}} title="">
|
||||
{{#if selected }}
|
||||
<img src="{{selected.avatar_url}}" alt="{{org.login}}">
|
||||
{{#if selected.name}}
|
||||
{{selected.name}}
|
||||
{{else}}
|
||||
All organizations
|
||||
{{selected.login}}
|
||||
{{/if}}
|
||||
</a><span class="icon-arrow-down"></span>
|
||||
{{/if}}
|
||||
</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>
|
||||
{{else}}
|
||||
All organizations
|
||||
{{/if}}
|
||||
</a><span class="icon-arrow-down"></span>
|
||||
{{/if}}
|
||||
</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 }}
|
||||
<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
|
||||
</button>
|
||||
</div>
|
||||
{{else}}
|
||||
<button {{action 'sync'}} class="button">
|
||||
<span class="icon">
|
||||
<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
|
||||
<p class="sync-last">Last synced {{format-time user.syncedAt}}</p>
|
||||
<button {{action 'sync'}} class="button" type="button">
|
||||
<span class="icon-trigger"></span>Sync account
|
||||
</button>
|
||||
<p class="sync-last">last synced {{format-time user.syncedAt}}</p>
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -1,30 +1,33 @@
|
|||
<div id="filters" class="dashboard-filter">
|
||||
<div class="row">
|
||||
{{orgs-filter orgs=orgs selected=selectedOrg action="selectOrg"}}
|
||||
<div class="float-right">
|
||||
{{sync-button user=auth.currentUser}}
|
||||
</div>
|
||||
<div class="inner">
|
||||
<div class="dashboard-header">
|
||||
{{orgs-filter orgs=orgs selected=selectedOrg action="selectOrg"}}
|
||||
{{sync-button user=auth.currentUser}}
|
||||
</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 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