diff --git a/app/components/log-content.js b/app/components/log-content.js
index 14110bc4..0fd30781 100644
--- a/app/components/log-content.js
+++ b/app/components/log-content.js
@@ -60,6 +60,7 @@ Object.defineProperty(Log.Limit.prototype, 'limited', {
export default Ember.Component.extend({
popup: Ember.inject.service(),
+ logIsVisible: false,
currentUserBinding: 'auth.currentUser',
didInsertElement() {
@@ -220,6 +221,10 @@ export default Ember.Component.extend({
this.get('popup').open('remove-log-popup');
return false;
}
+ },
+
+ toggleLog() {
+ this.toggleProperty('logIsVisible');
}
},
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 68e88824..dd07d913 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -14,7 +14,6 @@
@import "app/userlike";
-@import "app/main/log";
@import "app/misc";
@import "app/popup";
@@ -57,6 +56,7 @@
@import "app/layouts/repo";
@import "app/layouts/jobs";
@import "app/layouts/pull-requests";
+@import "app/main/log";
@import "app/layouts/requests";
@import "app/layouts/caches";
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 890dff13..f20172ab 100644
--- a/app/styles/app/main/log.sass
+++ b/app/styles/app/main/log.sass
@@ -1,4 +1,3 @@
-
.log
position: relative
margin-top: 35px
@@ -41,18 +40,18 @@
.tail-status
position: relative
display: inline-block
- height: 20px;
- width: 20px;
+ height: 20px
+ width: 20px
vertical-align: middle
background-color: $grey-light
- border-radius: 50%;
+ border-radius: 50%
&:after
content: ""
display: block
- height: 10px;
- width: 10px;
- background: #f1f1f1;
- border-radius: 50%;
+ height: 10px
+ width: 10px
+ background: #f1f1f1
+ border-radius: 50%
@extend %absolute-center
&.active .tail-status
@@ -78,16 +77,70 @@
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
+ &.is-visible
+ display: block
+ @media #{$medium-up}
+ 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 #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
+ border-color: $teal
+ color: $teal
+ .icon-eye
+ path
+ fill: $teal
+ circle
+ stroke: $teal
+ fill: transparent
+
+.toggle-log-button--dark
+ @extend %log-button
+ .icon-eye
+ margin-right: .3em
+ path
+ fill: #f1f1f1
+ circle
+ stroke: #f1f1f1
+ fill: #f1f1f1
+ &:hover,
+ &:active
+ background-color: #999a98
.log-body
position: relative
- max-height: 20vh
- overflow: scroll
- @media #{$medium-up}
- max-height: none
- overflow: auto
pre
clear: left
diff --git a/app/styles/app/modules/buttons.sass b/app/styles/app/modules/buttons.sass
index 9b51f96b..c71199fe 100644
--- a/app/styles/app/modules/buttons.sass
+++ b/app/styles/app/modules/buttons.sass
@@ -176,30 +176,29 @@ $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
+ display: none
+ @media #{$medium-up}
+ display: inline-block
.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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 12.4"><style>.st0{fill:%23f1f1f1;}</style><g id="downloadlog"><path class="st0" d="M5.1 11.3c-.4 0-.7-.3-.7-.7V.6c0-.3.3-.6.7-.6.4 0 .7.3.7.7v10c-.1.4-.4.6-.7.6z"/><path class="st0" d="M5.1 12.4c-.2 0-.3-.1-.5-.2L.2 7.8c-.3-.3-.3-.7 0-.9s.7-.3.9 0L5 10.8l4-3.9c.3-.3.7-.3.9 0s.3.7 0 .9l-4.4 4.4c-.1.1-.3.2-.4.2zM14.1 2.1H7.9c-.4 0-.7-.3-.7-.7s.3-.7.7-.7h6.2c.4 0 .7.3.7.7s-.3.7-.7.7zM14.3 5.3H7.9c-.4 0-.6-.3-.6-.7 0-.4.2-.6.6-.6h6.4c.4 0 .7.2.7.6 0 .4-.3.7-.7.7zM14.3 8.5h-2.4c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2.4c.4 0 .7.3.7.7 0 .4-.3.7-.7.7zM13 11.6H9.2c-.4 0-.7-.3-.7-.7s.3-.7.7-.7H13c.4 0 .7.3.7.7s-.4.7-.7.7z"/></g></svg>')
+.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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 10.9"><style>.st0{fill:%23f1f1f1;}</style><g id="removelog"><path class="st0" d="M12.3 1.8h1.9c.3 0 .6-.3.6-.6s-.3-.6-.6-.6h-1.9c-.3 0-.6.3-.6.6 0 .4.3.6.6.6zM9.7 3.5c-.3 0-.6.3-.6.6s.3.6.6.6h4.8c.3 0 .6-.3.6-.6s-.3-.6-.6-.6H9.7zM14.4 6.3H9.7c-.3 0-.6.3-.6.6s.3.6.6.6h4.7c.3 0 .6-.3.6-.6 0-.4-.3-.6-.6-.6zM13.2 9.1h-.7c-.3 0-.6.3-.6.6s.3.6.6.6h.7c.3 0 .6-.3.6-.6 0-.4-.3-.6-.6-.6z"/><path class="st0" d="M6.3 5.4L10.7 1c.2-.2.2-.6 0-.9-.2-.2-.6-.2-.9 0L5.4 4.5 1.1.2C.9 0 .5 0 .2.2s-.2.6 0 .9l4.4 4.4L.2 9.8c-.2.2-.2.6 0 .9.1.1.3.2.4.2s.3-.1.4-.2l4.4-4.4 4.4 4.4c.1.1.3.2.4.2.2 0 .3-.1.4-.2.2-.2.2-.6 0-.9L6.3 5.4z"/></g></svg>')
+.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 a71c5d2e..002aaf62 100644
--- a/app/templates/components/log-content.hbs
+++ b/app/templates/components/log-content.hbs
@@ -26,40 +26,47 @@
{{#if job.notStarted}}
<div class="log-notice">Hang tight, the log cannot be shown until the build has started.</div>
- {{/if}}
+ {{else}}
+ <a class="toggle-log-button {{if logIsVisible 'hidden'}}" title="Display the log" {{action "toggleLog"}}>
+ {{eye-icon}}
+ <span class="label-align">View log</span></a>
- <div class="{{if job.notStarted 'hidden'}}">
- <menu class="log-header">
- {{#if canRemoveLog}}
- <a class="remove-log-button open-popup" {{action "removeLogPopup"}}>Remove log</a>
- {{/if}}
- <a class="download-log-button" href={{plainTextLogUrl}}>Download log</a>
- </menu>
- <div class="log-body">
- {{#if showTailing}}
- <a href="#" id="tail" class="log-tail" {{action "toggleTailing"}}>
- <span class="tail-status"></span>
- <span class="tail-label">
- {{#if job.isFinished}}
- Scroll to End of Log
- {{else}}
- Follow Log
- {{/if}}
- </span>
- </a>
- {{/if}}
+ <div class="log-main {{if logIsVisible 'is-visible'}} {{if job.notStarted 'hidden'}}">
+ <div class="log-header">
+ <a class="toggle-log-button--dark {{unless logIsVisible 'hidden'}}" title="Display the log" {{action "toggleLog"}}>{{eye-icon}}Hide log</a>
+ {{#if canRemoveLog}}
+ <a class="remove-log-button open-popup" {{action "removeLogPopup"}} title="Remove the log">
+ <span class="icon-remove-log" aria-hidden="true"></span>Remove log</a>
+ {{/if}}
+ <a class="download-log-button" href={{plainTextLogUrl}} title="Display the log in plaintext">
+ <span class="icon-download-log" aria-hiden="true"></span>Raw log</a>
+ </div>
+ <div class="log-body">
+ {{#if showTailing}}
+ <a href="#" id="tail" class="log-tail" {{action "toggleTailing"}}>
+ <span class="tail-status"></span>
+ <span class="tail-label">
+ {{#if job.isFinished}}
+ Scroll to End of Log
+ {{else}}
+ Follow Log
+ {{/if}}
+ </span>
+ </a>
+ {{/if}}
- <pre id="log" class="ansi"></pre>
+ <pre id="log" class="ansi"></pre>
- {{#if showToTop}}
- <a href='#' class="to-top" {{action "toTop"}}>Top</a>
- {{/if}}
+ {{#if showToTop}}
+ <a href='#' class="to-top" {{action "toTop"}}>Top</a>
+ {{/if}}
+ </div>
</div>
- </div>
- {{#if limited}}
- <p class="warning">
- This log is too long to be displayed. Please reduce the verbosity of your
- build or download the <a href={{plainTextLogUrl}}>raw log</a>.
- </p>
+ {{#if limited}}
+ <p class="warning">
+ This log is too long to be displayed. Please reduce the verbosity of your
+ build or download the <a href={{plainTextLogUrl}}>raw log</a>.
+ </p>
+ {{/if}}
{{/if}}
</section>
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 @@
-<a {{action "menu"}} class="settings-button" type="" title="Open settings menu">Settings</a>
+<a {{action "menu"}} class="settings-button" type="" title="Open settings menu">
+ <span class="icon-settings" aria-hidden="true"></span>
+ <span class="label-align">Settings</span></a>
<ul class="settings-dropdown">
{{#if displaySettingsLink}}
<li>