From f445690fb5a93c7bff777fa1be9b593bb1570b23 Mon Sep 17 00:00:00 2001 From: Lisa P Date: Thu, 10 Dec 2015 16:01:20 +0100 Subject: [PATCH] refactor a lot of buttons so toggle log looks more consistent --- app/styles/app/layouts/repo.sass | 14 +++---- app/styles/app/main/log.sass | 40 ++++++++++++++++---- app/styles/app/modules/buttons.sass | 12 ++---- app/styles/app/modules/icons.sass | 24 ++++++++++-- app/templates/components/log-content.hbs | 12 ++++-- app/templates/components/repo-show-tools.hbs | 4 +- 6 files changed, 74 insertions(+), 32 deletions(-) diff --git a/app/styles/app/layouts/repo.sass b/app/styles/app/layouts/repo.sass index a8ccb4e8..566521ae 100644 --- a/app/styles/app/layouts/repo.sass +++ b/app/styles/app/layouts/repo.sass @@ -50,19 +50,13 @@ $dropdown-button-margin: -9px .settings-button display: block height: $dropdown-button-height - padding: 0 0.7em 0 2.3em - background: - color: white - repeat: no-repeat - size: auto 14px - position: 11px 7px + padding: 0 0.7em border: 1px solid #f1f1f1 color: $grey-light border-radius: 2px text-align: center line-height: 2 font-size: 14px - @extend %icon-line-cog &:after content: "" display: inline-block @@ -73,13 +67,17 @@ $dropdown-button-margin: -9px size: 100% repeat: no-repeat @extend %icon-line-dropdown + .icon-settings + width: .9em + margin-right: .3em &:hover, &:active, // .display &, .settings-menu:hover & color: $teal border-color: $teal - @extend %icon-line-cog-teal + .icon-settings + @extend %icon-line-cog-teal &:after @extend %icon-line-dropdown-teal @media #{$medium-up} diff --git a/app/styles/app/main/log.sass b/app/styles/app/main/log.sass index d3fa9fcd..a3acd167 100644 --- a/app/styles/app/main/log.sass +++ b/app/styles/app/main/log.sass @@ -78,8 +78,13 @@ text-align: right background-color: $log-header-bg @extend %border-top-4px + + @media #{$small-only} + display: flex a margin-left: .4em + @media #{$small-only} + flex-grow: 1 .log-main display: none @@ -89,27 +94,48 @@ display: block [class^="toggle-log-button"] + .icon-eye + vertical-align: middle + display: inline-block @media #{$medium-up} display: none !important .toggle-log-button - border: 1px solid $grey - padding: .5em 1em + border: 1px solid #f1f1f1 + padding: .3em 1em border-radius: 2px display: block + color: #8d8d8d text-align: center + .icon-eye + height: 1.8em + path + fill: #949899 + circle + stroke: #949899 + fill: #fff &.hidden display: none &:hover, &:active - background: $grey - color: white + border-color: $teal + color: $teal + .icon-eye + path + fill: $teal + circle + stroke: $teal + fill: transparent .toggle-log-button--dark @extend %log-button - @extend %icon-line-eye - background-size: auto 21px; - background-position: 6px 2px; + .icon-eye + margin-right: .3em + path + fill: #f1f1f1 + circle + stroke: #f1f1f1 + fill: #f1f1f1 &:hover, &:active background-color: #999a98 diff --git a/app/styles/app/modules/buttons.sass b/app/styles/app/modules/buttons.sass index 1825d03c..c71199fe 100644 --- a/app/styles/app/modules/buttons.sass +++ b/app/styles/app/modules/buttons.sass @@ -176,23 +176,20 @@ $button-border-color: #d4d4d4 %log-button display: inline-block height: 28px - padding: 0 0.8em 0 2.3em + padding: 0 0.8em border: 1px solid #f1f1f1 color: #f1f1f1 border-radius: 2px text-align: center - line-height: 1.9 + line-height: 1.8 font-size: 14px font-weight: 300 - background: - repeat: no-repeat - size: auto 14px - position: 7px 6px + [class^="icon"] + margin-right: .3em // log buttons .remove-log-button @extend %log-button - @extend %icon-remove-log &:hover, &:active background-color: #d94341 @@ -202,7 +199,6 @@ $button-border-color: #d4d4d4 .download-log-button @extend %log-button - @extend %icon-download-log &:hover, &:active background-color: #999a98 diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass index 573f9071..2f93e8fd 100644 --- a/app/styles/app/modules/icons.sass +++ b/app/styles/app/modules/icons.sass @@ -11,9 +11,24 @@ @extend %icon %icon-download-log - background-image: inline-image('line-icons/icon-downloadlog.svg') + background-image: url('data:image/svg+xml;utf8,') +.icon-download-log + @extend %icon + @extend %icon-download-log + width: 1.5em + height: 1.1em + vertical-align: middle + background-size: auto 14px %icon-remove-log - background-image: inline-image('line-icons/icon-removelog.svg') + background-image: url('data:image/svg+xml;utf8,') +.icon-remove-log + @extend %icon + @extend %icon-remove-log + width: 1.5em + height: 1.1em + vertical-align: middle + background-size: auto 14px + %icon-arrow-down background-image: inline-image('line-icons/icon-arrow-down.svg') @@ -126,7 +141,7 @@ .icon-question width: 1em height: 1em - background: + background: repeat: no-repeat position: 4px 2px size: auto 10px @@ -158,6 +173,8 @@ @extend %icon-line-cog width: 1em height: 1em + vertical-align: middle + display: inline-block background: repeat: no-repeat position: 0 0 @@ -261,4 +278,3 @@ 40% transform: scale(1.0) - diff --git a/app/templates/components/log-content.hbs b/app/templates/components/log-content.hbs index baa6cdae..13fee04a 100644 --- a/app/templates/components/log-content.hbs +++ b/app/templates/components/log-content.hbs @@ -30,15 +30,19 @@
Hang tight, the log cannot be shown until the build has started.
{{/if}} - View log + + {{eye-icon}} + View log
- Hide log + {{eye-icon}}Hide log {{#if canRemoveLog}} - Remove log + + Remove log {{/if}} - Raw log + + Raw log
{{#if showTailing}} diff --git a/app/templates/components/repo-show-tools.hbs b/app/templates/components/repo-show-tools.hbs index 8e74c33d..77c44247 100644 --- a/app/templates/components/repo-show-tools.hbs +++ b/app/templates/components/repo-show-tools.hbs @@ -1,4 +1,6 @@ -Settings + + + Settings
    {{#if displaySettingsLink}}