From 10b0c62fc2fe1250d77618e9ed159a1c1923e585 Mon Sep 17 00:00:00 2001 From: Lisa P Date: Wed, 9 Dec 2015 17:53:56 +0100 Subject: [PATCH 1/4] make log toggle on mobile --- app/components/log-content.js | 5 +++ app/styles/app.scss | 2 +- app/styles/app/main/log.sass | 52 ++++++++++++++++++------ app/styles/app/modules/buttons.sass | 3 ++ app/templates/components/log-content.hbs | 13 ++++-- 5 files changed, 58 insertions(+), 17 deletions(-) diff --git a/app/components/log-content.js b/app/components/log-content.js index 14110bc4..c557734d 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('ligIsVisible'); } }, 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/main/log.sass b/app/styles/app/main/log.sass index 890dff13..d3fa9fcd 100644 --- a/app/styles/app/main/log.sass +++ b/app/styles/app/main/log.sass @@ -41,18 +41,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 @@ -81,13 +81,41 @@ a margin-left: .4em +.log-main + display: none + &.is-visible + display: block + @media #{$medium-up} + display: block + +[class^="toggle-log-button"] + @media #{$medium-up} + display: none !important + +.toggle-log-button + border: 1px solid $grey + padding: .5em 1em + border-radius: 2px + display: block + text-align: center + &.hidden + display: none + &:hover, + &:active + background: $grey + color: white + +.toggle-log-button--dark + @extend %log-button + @extend %icon-line-eye + background-size: auto 21px; + background-position: 6px 2px; + &: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..1825d03c 100644 --- a/app/styles/app/modules/buttons.sass +++ b/app/styles/app/modules/buttons.sass @@ -196,6 +196,9 @@ $button-border-color: #d4d4d4 &:hover, &:active background-color: #d94341 + display: none + @media #{$medium-up} + display: inline-block .download-log-button @extend %log-button diff --git a/app/templates/components/log-content.hbs b/app/templates/components/log-content.hbs index a71c5d2e..baa6cdae 100644 --- a/app/templates/components/log-content.hbs +++ b/app/templates/components/log-content.hbs @@ -1,5 +1,7 @@ {{remove-log-popup job=job}} + +
{{#if auth.signedIn}} @@ -28,13 +30,16 @@
Hang tight, the log cannot be shown until the build has started.
{{/if}} -
- + View log + +
+
+ Hide log {{#if canRemoveLog}} Remove log {{/if}} - Download log -
+ Raw log +
{{#if showTailing}} From f445690fb5a93c7bff777fa1be9b593bb1570b23 Mon Sep 17 00:00:00 2001 From: Lisa P Date: Thu, 10 Dec 2015 16:01:20 +0100 Subject: [PATCH 2/4] 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}}
  • From 8d2ca774d02f3e4ba384c55f4003c17e3f75deb9 Mon Sep 17 00:00:00 2001 From: Lisa P Date: Fri, 11 Dec 2015 14:38:28 +0100 Subject: [PATCH 3/4] fix template logic if job has not yet started --- app/templates/components/log-content.hbs | 80 ++++++++++++------------ 1 file changed, 39 insertions(+), 41 deletions(-) diff --git a/app/templates/components/log-content.hbs b/app/templates/components/log-content.hbs index 13fee04a..002aaf62 100644 --- a/app/templates/components/log-content.hbs +++ b/app/templates/components/log-content.hbs @@ -1,7 +1,5 @@ {{remove-log-popup job=job}} - -
    {{#if auth.signedIn}} @@ -28,47 +26,47 @@ {{#if job.notStarted}}
    Hang tight, the log cannot be shown until the build has started.
    - {{/if}} + {{else}} + + {{eye-icon}} + View log - - {{eye-icon}} - View log +
    +
    + {{eye-icon}}Hide log + {{#if canRemoveLog}} + + Remove log + {{/if}} + + Raw log +
    +
    + {{#if showTailing}} + + + + {{#if job.isFinished}} + Scroll to End of Log + {{else}} + Follow Log + {{/if}} + + + {{/if}} -
    -
    - {{eye-icon}}Hide log - {{#if canRemoveLog}} - - Remove log - {{/if}} - - Raw log + 
    
+
+        {{#if showToTop}}
+          Top
+        {{/if}}
+      
    
     
    
-    
    
-      {{#if showTailing}}
-        
-          
-          
-            {{#if job.isFinished}}
-              Scroll to End of Log
-            {{else}}
-              Follow Log
-            {{/if}}
-          
-        
-      {{/if}}
-
-      
    
-
-      {{#if showToTop}}
-        Top
-      {{/if}}
-    
    
-  
    
-  {{#if limited}}
-    
    
-      This log is too long to be displayed. Please reduce the verbosity of your
-      build or download the raw log.
-    
    
+    {{#if limited}}
+      
    
+        This log is too long to be displayed. Please reduce the verbosity of your
+        build or download the raw log.
+      
    
+    {{/if}}
   {{/if}}
 
    

From 1233eba3e860a9e521c941c500b08ed95ab2d877 Mon Sep 17 00:00:00 2001
From: Lisa P 
Date: Tue, 5 Jan 2016 14:44:27 +0100
Subject: [PATCH 4/4] fix log

---
 app/components/log-content.js | 2 +-
 app/styles/app/main/log.sass  | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/components/log-content.js b/app/components/log-content.js
index c557734d..0fd30781 100644
--- a/app/components/log-content.js
+++ b/app/components/log-content.js
@@ -224,7 +224,7 @@ export default Ember.Component.extend({
     },
 
     toggleLog() {
-      this.toggleProperty('ligIsVisible');
+      this.toggleProperty('logIsVisible');
     }
   },
 
diff --git a/app/styles/app/main/log.sass b/app/styles/app/main/log.sass
index a3acd167..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
@@ -78,7 +77,7 @@
   text-align: right
   background-color: $log-header-bg
   @extend %border-top-4px
-  
+
   @media #{$small-only}
     display: flex
   a