From 192ebce0c385bd0482a3d8d81b3d652b019c8db2 Mon Sep 17 00:00:00 2001
From: Lisa P <mail@lislis.de>
Date: Wed, 17 Feb 2016 15:05:38 +0100
Subject: [PATCH 1/3] 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 @@
-<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>
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 }}
- <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}}
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 @@
-<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>
From 101a0ec71fbbc677311990eeb8a498ebf5812ca2 Mon Sep 17 00:00:00 2001
From: Lisa P <mail@lislis.de>
Date: Wed, 17 Feb 2016 15:18:58 +0100
Subject: [PATCH 2/3] sync button on dashbaord
---
app/styles/app/components/sync-button.sass | 21 ++++++++++++
app/styles/app/layouts/dashboard.sass | 2 ++
app/styles/app/layouts/profile.sass | 38 ++++++----------------
app/styles/app/mixins.sass | 4 +--
app/templates/components/sync-button.hbs | 2 +-
5 files changed, 36 insertions(+), 31 deletions(-)
diff --git a/app/styles/app/components/sync-button.sass b/app/styles/app/components/sync-button.sass
index da56a48d..cb4c8ed4 100644
--- a/app/styles/app/components/sync-button.sass
+++ b/app/styles/app/components/sync-button.sass
@@ -1,6 +1,10 @@
.sync-button
vertical-align: middle
+ display: flex
+ flex-flow: row-reverse wrap
.button
+ position: relative
+ z-index: 2
height: 2.6rem
padding: 0.6em 0.8em
background-color: $agate-blue
@@ -9,11 +13,27 @@
font-size: 14px
&:hover
background-color: $oxide-blue
+ .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
+
.loading-indicator--white
vertical-align: top
@@ -24,3 +44,4 @@
margin: 0 1em 0
color: $asphalt-grey
text-align: right
+ line-height: 2.6
diff --git a/app/styles/app/layouts/dashboard.sass b/app/styles/app/layouts/dashboard.sass
index a85daedd..66166a47 100644
--- a/app/styles/app/layouts/dashboard.sass
+++ b/app/styles/app/layouts/dashboard.sass
@@ -4,12 +4,14 @@
.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
margin-bottom: 5rem
diff --git a/app/styles/app/layouts/profile.sass b/app/styles/app/layouts/profile.sass
index d191f1e7..fb10e33b 100644
--- a/app/styles/app/layouts/profile.sass
+++ b/app/styles/app/layouts/profile.sass
@@ -13,23 +13,17 @@
header
h1
margin: 0 1.7rem 0 0
- color: #808080
- font-size: 35px
+ color: $asphalt-grey
+ font-size: 36px
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}
- .profile-header, .sync-button
+ .profile-header
display: inline-block
vertical-align: middle
.sync-button
- margin-top: .5em
+ float: right
+ margin-top: .4em
@media #{$large-up}
.profile-header
position: relative
@@ -39,13 +33,6 @@
&:after
@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
text-align: right
@@ -111,9 +98,8 @@
.profile-orgs
h1
- color: #898b8c
font-size: $font-size-sm
- border-bottom: solid 2px $cream-dark
+ border-bottom: solid 2px $pebble-grey
.profile-user
margin: 1rem 0 2rem
@@ -196,14 +182,10 @@ p.profile-user-last
.profile-additional
- border-top: solid 2px #f3f2f2
+ border-top: solid 2px $pebble-grey
.profile-text,
-.profile-additional p
- color: #adaaab
- line-height: $line-height-m
- a
- color: #adaaab
- text-decoration: underline
+.profile-additional
+ +linkStyle
.hooks-error
width: 100%;
diff --git a/app/styles/app/mixins.sass b/app/styles/app/mixins.sass
index 3d2fb2db..27e64b4f 100644
--- a/app/styles/app/mixins.sass
+++ b/app/styles/app/mixins.sass
@@ -48,12 +48,12 @@
=linkStyle
a
text-decoration: none
- border-bottom: 1px solid #bfc0c1
+ border-bottom: 1px solid $cement-grey
padding-bottom: 0.1rem
transition: color 200ms ease, border 200ms ease
&:hover,
&:active
- color: #303030
+ color: $cement-grey
text-decoration: none
border-color: transparent
diff --git a/app/templates/components/sync-button.hbs b/app/templates/components/sync-button.hbs
index c52668e0..ffac0beb 100644
--- a/app/templates/components/sync-button.hbs
+++ b/app/templates/components/sync-button.hbs
@@ -3,8 +3,8 @@
<span class="loading-indicator--white"><i></i><i></i><i></i></span>Syncing from GitHub
</div>
{{else}}
- <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}}
From dad5950142a1ee24257244d0466e4f112b2a9b72 Mon Sep 17 00:00:00 2001
From: Lisa P <mail@lislis.de>
Date: Wed, 17 Feb 2016 18:57:57 +0100
Subject: [PATCH 3/3] start fresh markup for prgs filter
---
app/components/orgs-filter.js | 2 +-
app/components/repo-show-tools.js | 2 +-
app/styles/app/layouts/dashboard.sass | 2 +-
app/styles/app/layouts/owner.sass | 62 ++------
app/styles/app/layouts/profile.sass | 16 +-
app/styles/app/layouts/repo.sass | 80 +---------
app/styles/app/modules/dropdown.sass | 150 +++++++++++--------
app/styles/app/modules/switch.sass | 12 +-
app/templates/components/orgs-filter.hbs | 65 ++++----
app/templates/components/repo-show-tools.hbs | 6 +-
10 files changed, 162 insertions(+), 235 deletions(-)
diff --git a/app/components/orgs-filter.js b/app/components/orgs-filter.js
index e456bc40..5432c3be 100644
--- a/app/components/orgs-filter.js
+++ b/app/components/orgs-filter.js
@@ -2,7 +2,7 @@ import Ember from 'ember';
export default Ember.Component.extend({
- classNames: ['dashboard-filter'],
+ classNames: ['organisation-filter'],
actions: {
toggleOrgFilter() {
this.toggleProperty('showFilter');
diff --git a/app/components/repo-show-tools.js b/app/components/repo-show-tools.js
index bc7e0fef..de63a3cf 100644
--- a/app/components/repo-show-tools.js
+++ b/app/components/repo-show-tools.js
@@ -3,7 +3,7 @@ import config from 'travis/config/environment';
export default Ember.Component.extend({
popup: Ember.inject.service(),
- classNames: ['settings-menu'],
+ classNames: ['option-button'],
classNameBindings: ['isOpen:display'],
isOpen: false,
diff --git a/app/styles/app/layouts/dashboard.sass b/app/styles/app/layouts/dashboard.sass
index 66166a47..214227e9 100644
--- a/app/styles/app/layouts/dashboard.sass
+++ b/app/styles/app/layouts/dashboard.sass
@@ -14,7 +14,7 @@
align-items: baseline
.dashboard-repos
- margin-bottom: 5rem
+ padding-bottom: 5rem
.dashboard-section
margin-bottom: 4rem
diff --git a/app/styles/app/layouts/owner.sass b/app/styles/app/layouts/owner.sass
index 3b8839cb..8f223750 100644
--- a/app/styles/app/layouts/owner.sass
+++ b/app/styles/app/layouts/owner.sass
@@ -1,9 +1,10 @@
.owner-header
+ display: flex
+ flex-flow: row wrap
+ justify-content: flex-start
+ align-items: center
padding: 0 $column-gutter/2
margin-bottom: 3rem
- color: #969496
- a
- color: #969496
.owner-title
margin: .3em 0 .2em
font-size: 36px
@@ -22,61 +23,26 @@
text-decoration: underline
img
border-radius: 50%
- background-color: #F4F3ED
-
- .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
+ background-color: $pebble-grey
.owner-avatar
- width: grid-calc(4, 12)
+ flex: 0 0 20%
@media #{$medium-up}
- width: grid-calc(2, 12)
+ flex: 0 0 17%
.owner-info
- width: grid-calc(7, 12)
+ flex: 1 0 75%
@media #{$medium-up}
- width: grid-calc(29, 36)
- position: relative
- overflow: hidden
- &:after
- content: ""
- @include fadeOut(right, -90deg, white)
+ flex: 1 0 80%
+ position: relative
+ overflow: hidden
+ &:after
+ content: ""
+ @include fadeOut(right, -90deg, white)
.tabs--owner
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
padding: 0
list-style-type: none
diff --git a/app/styles/app/layouts/profile.sass b/app/styles/app/layouts/profile.sass
index fb10e33b..05c838e5 100644
--- a/app/styles/app/layouts/profile.sass
+++ b/app/styles/app/layouts/profile.sass
@@ -131,9 +131,8 @@ p.profile-user-last
vertical-align: middle
.profile-settings
display: inline-block
- padding: .2em .2em .2em .5em;
- height: 28px;
- vertical-align: bottom;
+ padding: .2em .2em .2em .5em
+ height: 28px
.icon
width: 14px
height: 14px
@@ -145,7 +144,7 @@ p.profile-user-last
display: inline-block !important
.profile-repo
- border-radius: 4px
+ border-radius: 2px
position: relative
display: inline-block
width: grid-calc(13, 24)
@@ -162,21 +161,22 @@ p.profile-user-last
.sync-spinner
vertical-align: top
&:hover
- background-color: #ededec
+ background-color: $pebble-grey
&:after
content: ""
- @include fadeOut(right, -90deg, #ededec)
+ @include fadeOut(right, -90deg, $pebble-grey)
.active &:hover
- background-color: #e2eee2
+ background-color: $seed-green
&:after
content: ""
- @include fadeOut(right, -90deg, #e2eee2)
+ @include fadeOut(right, -90deg, $seed-green)
@media #{$medium-up}
width: grid-calc(18, 24)
height: 30px
&:hover
span
display: inline-block
+ color: $cement-grey
@media #{$large-up}
width: grid-calc(19, 24)
diff --git a/app/styles/app/layouts/repo.sass b/app/styles/app/layouts/repo.sass
index aabd00c3..f9a2ed13 100644
--- a/app/styles/app/layouts/repo.sass
+++ b/app/styles/app/layouts/repo.sass
@@ -42,78 +42,8 @@
justify-content: space-between
border-bottom: 2px #f1f1f1 solid
-
-$dropdown-button-height: 30px
-$dropdown-button-margin: -9px
-
-.settings-button
- 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
+ .option-button
+ width: 10em
+ margin-top: -9px
+ .option-dropdown a
+ padding-left: 2.4em
diff --git a/app/styles/app/modules/dropdown.sass b/app/styles/app/modules/dropdown.sass
index bb6b088a..c61b40b8 100644
--- a/app/styles/app/modules/dropdown.sass
+++ b/app/styles/app/modules/dropdown.sass
@@ -1,38 +1,42 @@
-$dropdown-border: #C3D9DB
-
-.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
+.option-button
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
max-width: 20px
max-height: 20px
@@ -41,39 +45,59 @@ $dropdown-border: #C3D9DB
border-radius: 50%
overflow: hidden
-.filter--org
- float: left
+.option-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
-.filter-current
- 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
+.option-dropdown
display: none
- li
- white-space: nowrap
+ 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: inline-block
- width: 100%
- padding: 10px 10px 10px 20px
+ display: block
+ padding: .5em 1em
+ font-size: 14px
+ color: $oxide-blue
&:hover
color: white
- background : $oxide-blue
- .is-selected
- a
- font-weight: 600
+ background-color: $oxide-blue
- &.is-open
+
+.option-search
+ input[type="text"]
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%
diff --git a/app/styles/app/modules/switch.sass b/app/styles/app/modules/switch.sass
index 860d86e8..ac62680c 100644
--- a/app/styles/app/modules/switch.sass
+++ b/app/styles/app/modules/switch.sass
@@ -13,15 +13,15 @@
padding: 3px 3px 3px 4px
vertical-align: middle
overflow: visible
- background-color: #E2E1E2
- border-radius: 4px
+ background-color: darken($pebble-grey, 10)
+ border-radius: 2px
border: none
cursor: pointer
span
width: $switch-inner-width
height: $switch-inner-heigth
- border-radius: 4px
- background-color: #A5A4A4
+ border-radius: 2px
+ background-color: $cement-grey
color: white
text-align: center
font-weight: 300
@@ -50,9 +50,9 @@
&.active
.switch-inner
- background-color: #B8D6B9
+ background-color: darken($seed-green, 10)
span
- background-color: #3BA85D
+ background-color: $turf-green
.on
display: inline-block
.off
diff --git a/app/templates/components/orgs-filter.hbs b/app/templates/components/orgs-filter.hbs
index 0ef4572e..03a7a4ca 100644
--- a/app/templates/components/orgs-filter.hbs
+++ b/app/templates/components/orgs-filter.hbs
@@ -1,34 +1,41 @@
-<div class="filter-current">
- {{#if orgs.isLoading}}
+<div class="option-button">
+ {{#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}}
+ <a href="#" title="" class="option-display" {{action 'toggleOrgFilter'}}>
+ <span class="label-align">
+ {{#if selected }}
+ <img src="{{selected.avatar_url}}" alt="{{org.login}}">
+ {{#if selected.name}}
+ {{selected.name}}
+ {{else}}
+ {{selected.login}}
+ {{/if}}
{{else}}
- {{selected.login}}
+ All organizations
{{/if}}
- {{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}}
+ </span><span class="option-tofu"></span>
</a>
- </li>
- {{/each}}
-</ul>
+ {{/if}}
+ <div class="option-dropdown {{if showFilter 'is-open'}}">
+ <div class="option-search">
+ <input type="text">
+ </div>
+ <div class="option-list">
+ {{#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}}
+ </div>
+ </div>
+</div>
diff --git a/app/templates/components/repo-show-tools.hbs b/app/templates/components/repo-show-tools.hbs
index 0638d21d..68c99b42 100644
--- a/app/templates/components/repo-show-tools.hbs
+++ b/app/templates/components/repo-show-tools.hbs
@@ -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="settings-tofu"></span>
+ <span class="option-tofu"></span>
</a>
-<ul class="settings-dropdown">
+<ul class="option-dropdown">
{{#if displaySettingsLink}}
<li>
{{#link-to "settings" repo}}Settings{{/link-to}}