From 192ebce0c385bd0482a3d8d81b3d652b019c8db2 Mon Sep 17 00:00:00 2001 From: Lisa P Date: Wed, 17 Feb 2016 15:05:38 +0100 Subject: [PATCH] refactor all things dashbaord --- app/components/orgs-filter.js | 2 + app/styles/app/components/sync-button.sass | 63 +++++---------------- app/styles/app/layouts/dashboard.sass | 26 ++++++++- app/templates/components/orgs-filter.hbs | 64 +++++++++++----------- app/templates/components/sync-button.hbs | 19 ++----- app/templates/dashboard/repositories.hbs | 59 ++++++++++---------- 6 files changed, 107 insertions(+), 126 deletions(-) diff --git a/app/components/orgs-filter.js b/app/components/orgs-filter.js index 7434cefe..e456bc40 100644 --- a/app/components/orgs-filter.js +++ b/app/components/orgs-filter.js @@ -1,6 +1,8 @@ import Ember from 'ember'; export default Ember.Component.extend({ + + classNames: ['dashboard-filter'], actions: { toggleOrgFilter() { this.toggleProperty('showFilter'); diff --git a/app/styles/app/components/sync-button.sass b/app/styles/app/components/sync-button.sass index 51ea1bcf..da56a48d 100644 --- a/app/styles/app/components/sync-button.sass +++ b/app/styles/app/components/sync-button.sass @@ -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 diff --git a/app/styles/app/layouts/dashboard.sass b/app/styles/app/layouts/dashboard.sass index 279608b7..a85daedd 100644 --- a/app/styles/app/layouts/dashboard.sass +++ b/app/styles/app/layouts/dashboard.sass @@ -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 diff --git a/app/templates/components/orgs-filter.hbs b/app/templates/components/orgs-filter.hbs index 978f008a..0ef4572e 100644 --- a/app/templates/components/orgs-filter.hbs +++ b/app/templates/components/orgs-filter.hbs @@ -1,36 +1,34 @@ -
-
- {{#if orgs.isLoading}} - {{loading-indicator}} - {{else}} - - {{#if selected }} - {{org.login}} - {{#if selected.name}} - {{selected.name}} - {{else}} - {{selected.login}} - {{/if}} +
+ {{#if orgs.isLoading}} + {{loading-indicator}} + {{else}} + + {{#if selected }} + {{org.login}} + {{#if selected.name}} + {{selected.name}} {{else}} - All organizations + {{selected.login}} {{/if}} - - {{/if}} -
- + {{else}} + All organizations + {{/if}} + + {{/if}}
+ diff --git a/app/templates/components/sync-button.hbs b/app/templates/components/sync-button.hbs index 12281407..c52668e0 100644 --- a/app/templates/components/sync-button.hbs +++ b/app/templates/components/sync-button.hbs @@ -1,19 +1,10 @@ {{#if user.isSyncing }} - +
{{else}} - -

last synced {{format-time user.syncedAt}}

{{/if}} diff --git a/app/templates/dashboard/repositories.hbs b/app/templates/dashboard/repositories.hbs index 86789f33..a9dcecad 100644 --- a/app/templates/dashboard/repositories.hbs +++ b/app/templates/dashboard/repositories.hbs @@ -1,30 +1,33 @@ -
-
- {{orgs-filter orgs=orgs selected=selectedOrg action="selectOrg"}} -
- {{sync-button user=auth.currentUser}} -
+
+
+ {{orgs-filter orgs=orgs selected=selectedOrg action="selectOrg"}} + {{sync-button user=auth.currentUser}} +
+ +
+ +
+

Starred repositories

+
+ You can keep track of your favorite repositories here once you start starring! +
+
+ +
+

All repositories

+
    + {{#each filteredRepositories as |repo|}} + {{dashboard-row repo=repo}} + {{else}} + {{no-repos}} + {{/each}} +
+
+ +
+

Inactive repositories

+
    +
+
- -
- {{!--
-
-
-

Want to keep an eye on certain projects? Star repositories below to add them in this section.

-
-
-
--}} - -
    - {{#each filteredRepositories as |repo|}} - {{dashboard-row repo=repo}} - {{else}} - {{no-repos}} - {{/each}} -
- {{!--
--}} - -
    -
-