Merge pull request #418 from travis-ci/lp-mobile-log

Mobile log

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');
     }
   },
 

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";

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
+  padding: 0 0.7em
-  background:
-    color: white
-    repeat: no-repeat
-    size: auto 14px
-    position: 11px 7px
   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}

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;
+      height: 20px
-      width: 20px;
+      width: 20px
       vertical-align: middle
       background-color: $grey-light
-      border-radius: 50%;
+      border-radius: 50%
       &:after
         content: ""
         display: block
-        height: 10px;
+        height: 10px
-        width: 10px;
+        width: 10px
-        background: #f1f1f1;
+        background: #f1f1f1
-        border-radius: 50%;
+        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

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:
+  [class^="icon"]
-    repeat: no-repeat
+    margin-right: .3em
-    size: auto 14px
-    position: 7px 6px
 
 // 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

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)
-

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'}}">
+    <div class="log-main {{if logIsVisible 'is-visible'}} {{if job.notStarted 'hidden'}}">
-    <menu class="log-header">
+      <div class="log-header">
-      {{#if canRemoveLog}}
+        <a class="toggle-log-button--dark {{unless logIsVisible 'hidden'}}" title="Display the log" {{action "toggleLog"}}>{{eye-icon}}Hide log</a>
-        <a class="remove-log-button open-popup" {{action "removeLogPopup"}}>Remove log</a>
+        {{#if canRemoveLog}}
-      {{/if}}
+          <a class="remove-log-button open-popup" {{action "removeLogPopup"}} title="Remove the log">
-      <a class="download-log-button" href={{plainTextLogUrl}}>Download log</a>
+            <span class="icon-remove-log" aria-hidden="true"></span>Remove log</a>
-    </menu>
+        {{/if}}
-    <div class="log-body">
+        <a class="download-log-button" href={{plainTextLogUrl}} title="Display the log in plaintext">
-      {{#if showTailing}}
+          <span class="icon-download-log" aria-hiden="true"></span>Raw log</a>
-        <a href="#" id="tail" class="log-tail" {{action "toggleTailing"}}>
+      </div>
-          <span class="tail-status"></span>
+      <div class="log-body">
-          <span class="tail-label">
+        {{#if showTailing}}
-            {{#if job.isFinished}}
+          <a href="#" id="tail" class="log-tail" {{action "toggleTailing"}}>
-              Scroll to End of Log
+            <span class="tail-status"></span>
-            {{else}}
+            <span class="tail-label">
-              Follow Log
+              {{#if job.isFinished}}
-            {{/if}}
+                Scroll to End of Log
-          </span>
+              {{else}}
-        </a>
+                Follow Log
-      {{/if}}
+              {{/if}}
+            </span>
+          </a>
+        {{/if}}
 
-      <pre id="log" class="ansi"></pre>
+        <pre id="log" class="ansi"></pre>
 
-      {{#if showToTop}}
+        {{#if showToTop}}
-        <a href='#' class="to-top" {{action "toTop"}}>Top</a>
+          <a href='#' class="to-top" {{action "toTop"}}>Top</a>
-      {{/if}}
+        {{/if}}
+      </div>
     </div>
-  </div>
+    {{#if limited}}
-  {{#if limited}}
+      <p class="warning">
-    <p class="warning">
+        This log is too long to be displayed. Please reduce the verbosity of your
-      This log is too long to be displayed. Please reduce the verbosity of your
+        build or download the <a href={{plainTextLogUrl}}>raw log</a>.
-      build or download the <a href={{plainTextLogUrl}}>raw log</a>.
+      </p>
-    </p>
+    {{/if}}
   {{/if}}
 </section>

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>