suzanne.soy/travis-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor a lot of buttons so toggle log looks more consistent

Browse Source
This commit is contained in:
Lisa P 2015-12-10 16:01:20 +01:00
parent 10b0c62fc2
commit f445690fb5
6 changed files with 74 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/styles/app/layouts/repo.sass
View File

@ -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}

40
app/styles/app/main/log.sass
View File

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

12
app/styles/app/modules/buttons.sass
View File

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

24
app/styles/app/modules/icons.sass
View File

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

12
app/templates/components/log-content.hbs
View File

@ -30,15 +30,19 @@
<div class="log-notice">Hang tight, the log cannot be shown until the build has started.</div>
{{/if}}
<a class="toggle-log-button {{if logIsVisible 'hidden'}}" title="Display the log" {{action "toggleLog"}}><span class="icon-view--white" aria-hidden='true'></span>View log</a>
<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="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"}}><span class="icon-view" aria-hidden='true'></span>Hide log</a>
<a class="toggle-log-button--dark {{unless logIsVisible 'hidden'}}" title="Display the log" {{action "toggleLog"}}>{{eye-icon}}<span class="label-align">Hide log</span></a>
{{#if canRemoveLog}}
<a class="remove-log-button open-popup" {{action "removeLogPopup"}}>Remove log</a>
<a class="remove-log-button open-popup" {{action "removeLogPopup"}} title="Remove the log">
<span class="icon-remove-log" aria-hidden="true"></span><span class="label-align">Remove log</span></a>
{{/if}}
<a class="download-log-button" href={{plainTextLogUrl}}>Raw log</a>
<a class="download-log-button" href={{plainTextLogUrl}} title="Display the log in plaintext">
<span class="icon-download-log" aria-hiden="true"></span><span class="label-align">Raw log</span></a>
</div>
<div class="log-body">
{{#if showTailing}}

4
app/templates/components/repo-show-tools.hbs
View File

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