From c7212174fb5b4f9370ea9a3466817852dec2235e Mon Sep 17 00:00:00 2001 From: Lisa P Date: Wed, 25 Nov 2015 15:57:57 +0100 Subject: [PATCH] style settings button MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit hover states for repo tool buttons style log buttons dont forget the small arrow iconå --- app/components/repo-show-tools.coffee | 12 ++--- app/styles/app/layouts/repo.sass | 51 +++++++++++++++++++- app/styles/app/main/log.sass | 23 +++++---- app/styles/app/modules/buttons.sass | 35 +++++++++++++- app/styles/app/modules/dropdown.sass | 47 ------------------ app/styles/app/modules/icons.sass | 15 +++--- app/styles/app/modules/tabs.sass | 2 +- app/templates/components/log-content.hbs | 6 +-- app/templates/components/repo-show-tools.hbs | 5 +- 9 files changed, 116 insertions(+), 80 deletions(-) diff --git a/app/components/repo-show-tools.coffee b/app/components/repo-show-tools.coffee index 0fd8f4bb..dd056154 100644 --- a/app/components/repo-show-tools.coffee +++ b/app/components/repo-show-tools.coffee @@ -4,20 +4,20 @@ RepoShowToolsComponent = Ember.Component.extend popup: Ember.inject.service() - classNames: ['dropdown', 'dropdown--classic'] + classNames: ['settings-menu'] + classNameBindings: ['isOpen:display'] + isOpen: false click: (event) -> - if $(event.target).is('a') && $(event.target).parents('.dropdown-menu').length + if $(event.target).is('a') && $(event.target).parents('.settings-dropdown').length @closeMenu() closeMenu: -> - $('.menu').removeClass('display') + @toggleProperty('isOpen') actions: menu: -> - @get('popup').close() - $('.menu.display').toggleClass('display') - return false + @toggleProperty('isOpen') hasPermission: (-> if permissions = @get('currentUser.permissions') diff --git a/app/styles/app/layouts/repo.sass b/app/styles/app/layouts/repo.sass index 48e7fe2a..c724462f 100644 --- a/app/styles/app/layouts/repo.sass +++ b/app/styles/app/layouts/repo.sass @@ -38,4 +38,53 @@ display: flex flex-flow: row-reverse wrap justify-content: space-between - border-bottom: 2px $cream-dark + border-bottom: 2px #f1f1f1 solid + + +$dropdown-button-height: 30px +$dropdown-button-margin: -9px + +.settings-button + display: block + height: $dropdown-button-height + padding: 0 2.5em + margin-top: $dropdown-button-margin + background: + color: white + border: 1px solid #f1f1f1 + color: $grey-light + border-radius: 2px + text-align: center + line-height: 2 + font-size: 14px + &:hover, + &:active + background-color: #f1f1f1 + +.settings-dropdown + display: none + position: absolute + top: $dropdown-button-height + ($dropdown-button-margin * .8) + width: 100% + padding: 0 + margin: 1px 0 0 + list-style: none + z-index: 60 + background-color: #f1f1f1 + a + display: block + padding: 0.5em 1em + font-size: 14px + color: $grey-light + &:hover + background-color: $grey + color: white + +.settings-menu + position: relative + &.display + .settings-button + background-color: #f1f1f1 + .settings-dropdown + display: block + diff --git a/app/styles/app/main/log.sass b/app/styles/app/main/log.sass index ab9d88f1..6c44b6a7 100644 --- a/app/styles/app/main/log.sass +++ b/app/styles/app/main/log.sass @@ -13,7 +13,16 @@ .tail-label display: none + padding: 0.1em 0.5em 0.1em 1.5em cursor: pointer + background: + color: $grey-light + repeat: no-repeat + size: auto 10px + position: 5px 5px + border-radius: 2px + color: #f1f1f1 + @extend %icon-arrow-down &:hover .tail-label @@ -35,14 +44,14 @@ height: 20px; width: 20px; vertical-align: middle - background-color: #696867; + background-color: $grey-light border-radius: 50%; &:after content: "" display: block height: 10px; width: 10px; - background: #F2F2F2; + background: #f1f1f1; border-radius: 50%; @extend %absolute-center @@ -62,16 +71,6 @@ color: #999 background: inline-image('ui/workers-close.svg') no-repeat right 6px - .icon - width: 1.3em - height: 1.1em - margin-right: 6px - vertical-align: middle - .icon--down - width: 0.7em - height: 0.9em - margin-right: 4px - .log-header height: 44px margin: 0 diff --git a/app/styles/app/modules/buttons.sass b/app/styles/app/modules/buttons.sass index 00261145..d50fd9ad 100644 --- a/app/styles/app/modules/buttons.sass +++ b/app/styles/app/modules/buttons.sass @@ -148,7 +148,6 @@ $button-border-color: #d4d4d4 // new stuff - %circle-button display: block text-indent: 999% @@ -180,6 +179,8 @@ $button-border-color: #d4d4d4 background: repeat: no-repeat size: auto 100% + &:hover + @extend %icon-line-cross-white .button-circle-trigger @extend %circle-button @@ -188,3 +189,35 @@ $button-border-color: #d4d4d4 position: 2px 1px repeat: no-repeat size: 24px 24px + &:hover + @extend %icon-line-trigger-white + + +%log-button + display: inline-block + height: 28px + padding: 0 1.1em 0 2.3em + border: 1px solid #f1f1f1 + color: #f1f1f1 + border-radius: 2px + text-align: center + line-height: 1.9 + font-size: 14px + font-weight: 300 + background: + repeat: no-repeat + size: auto 14px + position: 7px 6px + &:hover, + &:active + background-color: hotpink + +// log buttons +.remove-log-button + @extend %log-button + @extend %icon-remove-log + +.download-log-button + @extend %log-button + @extend %icon-download-log + diff --git a/app/styles/app/modules/dropdown.sass b/app/styles/app/modules/dropdown.sass index af929de1..ae8eef28 100644 --- a/app/styles/app/modules/dropdown.sass +++ b/app/styles/app/modules/dropdown.sass @@ -85,50 +85,3 @@ $dropdown-border: #C3D9DB &.is-open display: block - - - -.dropdown - position: relative -.dropdown--classic - width: 10.7rem - -.dropdown-button - height: 28px - background-color: $grey-lighter - border: none - color: $white - line-height: 1 - font-size: $font-size-normal - &:hover, - &:focus - background-color: #8b9595 - .icon-cog-light - position: relative - top: 0.15em - left: -0.2em - .icon-arrow-down - border-top-color: $white - - @media #{$medium-up} - float: right - -.dropdown-menu - @include resetul - @extend %border-bottom-4px - position: absolute - top: 29px // height of the button +1 - width: 100% - z-index: 70 - overflow: hidden - background-color: $grey-lighter - display: none - a - @extend %inline-block - width: 100% - padding: .4em 2em - color: $white - &:hover - background-color: darken($grey-lighter, 10) - &.display - display: block diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass index dddf90de..3c755f8a 100644 --- a/app/styles/app/modules/icons.sass +++ b/app/styles/app/modules/icons.sass @@ -79,11 +79,11 @@ .icon--trigger background-image: inline-image('icons/sync-account-icon.svg') -.icon--downloadLog +%icon-download-log background-image: inline-image('icons/download-log-icon.svg') -.icon--removeLog +%icon-remove-log background-image: inline-image('icons/remove-log-icon.svg') -.icon--down +%icon-arrow-down background-image: inline-image('icons/end-of-log-icon.svg') .icon--env @@ -180,10 +180,13 @@ @extend %icon-line-commit %icon-line-cross - background-image: inline-image('line-icons/icon-failed.svg') - + background-image: url('data:image/svg+xml;utf8,') +%icon-line-cross-white + background-image: url('data:image/svg+xml;utf8,') %icon-line-trigger - background-image: inline-image('line-icons/icon-trigger.svg') + background-image: url('data:image/svg+xml;utf8,') +%icon-line-trigger-white + background-image: url('data:image/svg+xml;utf8,') %icon-github-circle background-image: inline-image('icons/github.svg') diff --git a/app/styles/app/modules/tabs.sass b/app/styles/app/modules/tabs.sass index b2350cd1..d6d8b6e8 100644 --- a/app/styles/app/modules/tabs.sass +++ b/app/styles/app/modules/tabs.sass @@ -35,7 +35,7 @@ content: "" position: absolute left: 0 - bottom: -3px + bottom: -2px width: 100% height: 2px background-color: $teal diff --git a/app/templates/components/log-content.hbs b/app/templates/components/log-content.hbs index 777dedd7..b19f990f 100644 --- a/app/templates/components/log-content.hbs +++ b/app/templates/components/log-content.hbs @@ -31,15 +31,15 @@
{{#if canRemoveLog}} - Remove Log + Remove log {{/if}} - Download Log + Download log
{{#if showTailing}} - + {{#if job.isFinished}} Scroll to End of Log {{else}} diff --git a/app/templates/components/repo-show-tools.hbs b/app/templates/components/repo-show-tools.hbs index dc12461c..53e2a87f 100644 --- a/app/templates/components/repo-show-tools.hbs +++ b/app/templates/components/repo-show-tools.hbs @@ -1,6 +1,5 @@ - - Settings -
    +Settings +
      {{#if displaySettingsLink}}
    • {{#link-to "settings" repo}}Settings{{/link-to}}