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 @@ -
- {{#if orgs.isLoading}} +
+ {{#if orgs.isLoading}} {{loading-indicator}} {{else}} - - {{#if selected }} - {{org.login}} - {{#if selected.name}} - {{selected.name}} + + + {{#if selected }} + {{org.login}} + {{#if selected.name}} + {{selected.name}} + {{else}} + {{selected.login}} + {{/if}} {{else}} - {{selected.login}} + All organizations {{/if}} - {{else}} - All organizations - {{/if}} - - {{/if}} -
- + {{/if}} +
+
+ +
+
+ {{#if selected }} +
  • All organizations
    • + {{/if}} + {{#each orgs as |org|}} +
  • + + {{#if org.name }} + {{org.name}} + {{else}} + {{org.login}} + {{/if}} + +
    • + {{/each}} +
    +
    +
    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 @@ - + More options - + -