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

first iteration build header styles

Browse Source 
build header styles 2nd iteration

make job header use component too

cleanup templates and markup for repo page

styles for the repo header

rewrite styles for repo header, cleanup tabs
This commit is contained in:
Lisa P 2015-11-24 14:56:17 +01:00
parent 0176f9fb0c
commit 1ba9548ad0
28 changed files with 520 additions and 372 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/build-header.coffee
View File

@ -16,4 +16,8 @@ BuildHeaderComponent = Ember.Component.extend
gravatarImage(@get('commit.authorEmail'), 40) gravatarImage(@get('commit.authorEmail'), 40)
).property('commit.authorEmail') ).property('commit.authorEmail')
isJob: (->
if @get('item.build') then true else false
).property('item')
`export default BuildHeaderComponent` `export default BuildHeaderComponent`

5
app/components/repo-show-tabs.coffee
View File

@ -1,6 +1,11 @@
`import Ember from 'ember'` `import Ember from 'ember'`
RepoShowTabsComponent = Ember.Component.extend RepoShowTabsComponent = Ember.Component.extend
tagName: 'nav'
classNames: ['tabnav']
ariaRole: 'tablist'
# hrm. how to parametrize bind-attr? # hrm. how to parametrize bind-attr?
classCurrent: (-> classCurrent: (->
'active' if @get('tab') == 'current' 'active' if @get('tab') == 'current'

4
app/components/repo-show-tools.coffee
View File

@ -4,6 +4,8 @@
RepoShowToolsComponent = Ember.Component.extend RepoShowToolsComponent = Ember.Component.extend
popup: Ember.inject.service() popup: Ember.inject.service()
classNames: ['dropdown', 'dropdown--classic']
click: (event) -> click: (event) ->
if $(event.target).is('a') && $(event.target).parents('.dropdown-menu').length if $(event.target).is('a') && $(event.target).parents('.dropdown-menu').length
@closeMenu() @closeMenu()
@ -14,7 +16,7 @@ RepoShowToolsComponent = Ember.Component.extend
actions: actions:
menu: -> menu: ->
@get('popup').close() @get('popup').close()
$('#tools .menu').toggleClass('display') $('.menu.display').toggleClass('display')
return false return false
hasPermission: (-> hasPermission: (->

2
app/controllers/repo.coffee
View File

@ -5,6 +5,8 @@ Controller = Ember.Controller.extend
needs: ['repos', 'currentUser', 'build', 'job'] needs: ['repos', 'currentUser', 'build', 'job']
currentUserBinding: 'controllers.currentUser.model' currentUserBinding: 'controllers.currentUser.model'
classNames: ['repo']
build: Ember.computed.alias('controllers.build.build') build: Ember.computed.alias('controllers.build.build')
job: Ember.computed.alias('controllers.job.job') job: Ember.computed.alias('controllers.job.job')

4
app/styles/app/_mixins/colors.sass
View File

@ -5,6 +5,8 @@ $yellow: #e5da3f
$red: #d94341 $red: #d94341
$grey: #666 $grey: #666
$grey-light: #f1f1f1
$teal-light: $teal $teal-light: $teal
$teal-dark: $teal $teal-dark: $teal
$green-dark: $green $green-dark: $green
@ -12,7 +14,7 @@ $red-dark: $red
$white: #fff $white: #fff
$color-text: $grey $color-text: $grey
$color-text-log: #F1F1F1 $color-text-log: $grey-light
$color-bg-log-hover: #444 $color-bg-log-hover: #444
$color-bg-log-highlight: $grey $color-bg-log-highlight: $grey
$color-bg-log-fold: #333 $color-bg-log-fold: #333

15
app/styles/app/_mixins/mixins.sass
View File

@ -57,9 +57,6 @@
// @todo simplyfiy coloring mixins // @todo simplyfiy coloring mixins
@mixin colorRows($color, $status)
@mixin colorStatusIcons($color, $status) @mixin colorStatusIcons($color, $status)
.status-icon.#{$status} .status-icon.#{$status}
svg g > * svg g > *
@ -79,9 +76,9 @@
color: $color color: $color
@include colorStatusIcons($color, $status) @include colorStatusIcons($color, $status)
@mixin statusColors($color, $status, $color2: $color) @mixin statusColors($color, $status, $width, $color2: $color)
&.#{$status} &.#{$status}
background: linear-gradient(to right, $color2 0%, $color2 9px, white 9px, white 100%) no-repeat background: linear-gradient(to right, $color2 0%, $color2 $width, white $width, white 100%) no-repeat
.row-name, .row-name,
.row-request a, .row-request a,
.row-color a .row-color a
@ -100,3 +97,11 @@
.build-status .build-status
color: $color color: $color
@include colorStatusIcons($color, $status) @include colorStatusIcons($color, $status)
@mixin colorRows($color, $status, $width, $color2: $color)
&.#{$status}
background: linear-gradient(to right, $color2 0%, $color2 $width, white $width, white 100%) no-repeat
.#{$status},
.#{$status} a,
color: $color
@include colorStatusIcons($color, $status)

5
app/styles/app/base.sass
View File

@ -1,2 +1,7 @@
html,
body
line-height: 1.45 !important
strong strong
font-weight: 400 font-weight: 400

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

@ -0,0 +1,41 @@
.repo-title
margin: 0
font-size: 36px
font-weight: $font-weight-normal
a
color: #808080
&:hover,
&:active
text-decoration: underline
.repo-header
header
@media #{$medium-up}
display: flex
flex-flow: row wrap
justify-content: flex-start
align-items: center
.repo-gh
width: 28px
height: 28px
flex: 0 0 28px
margin: 0 1.2em
overflow: hidden
text-indent: 999%
white-space: nowrap
a
@extend %icon-github-circle
display: block
height: 100%
background:
size: 100%
repeat: no-repeat
.repo-navigation
margin: 1.9em 0 1.2em
@media #{$medium-up}
display: flex
flex-flow: row-reverse wrap
justify-content: space-between
border-bottom: 2px $cream-dark

7
app/styles/app/layouts/sidebar.sass
View File

@ -47,7 +47,7 @@ $sb-font-size: 14px
.active a:after, .active a:after,
a:hover:after a:hover:after
bottom: -3px bottom: -1px
.icon--plus .icon--plus
&:after &:after
@ -58,13 +58,11 @@ $sb-font-size: 14px
.icon--plus:after .icon--plus:after
color: $teal-light color: $teal-light
&:after &:after
bottom: -2px bottom: -1px
@media (min-width: #{lower-bound($large-range)}) @media (min-width: #{lower-bound($large-range)})
ul ul
height: 2em height: 2em
li
padding-right: 1em
@media #{$xxlarge-up} @media #{$xxlarge-up}
li li
@ -78,7 +76,6 @@ $sb-font-size: 14px
padding: 0 0 .35em padding: 0 0 .35em
margin-bottom: .8em margin-bottom: .8em
.sidebar-list .sidebar-list
margin-top: 1.4rem margin-top: 1.4rem
color: $grey-medium color: $grey-medium

6
app/styles/app/misc.sass
View File

@ -19,7 +19,6 @@
color: #c00 color: #c00
text-decoration: underline text-decoration: underline
.small-title .small-title
font-size: 18px font-size: 18px
color: $teal-light color: $teal-light
@ -27,3 +26,8 @@
.blank-list .blank-list
@include resetul @include resetul
.monospace
font-family: Monaco, monospace
font-size: 14px
line-height: 1

106
app/styles/app/modules/build-header.sass
View File

@ -1,3 +1,107 @@
.build-header .build-header
font-size: 16px
border: 1px solid $cream-dark
clear: both clear: both
@include colorRows($green, 'passed', 12px)
@include colorRows($red, 'failed', 12px)
@include colorRows($red, 'errored', 12px)
@include colorRows($grey, 'canceled', 12px)
@include colorRows($yellow, 'started', 12px, #e5da3f)
@include colorRows($yellow, 'queued', 12px, #e5da3f)
@include colorRows($yellow, 'booting', 12px, #e5da3f)
@include colorRows($yellow, 'received', 12px, #e5da3f)
@include colorRows($yellow, 'created', 12px, #e5da3f)
@media #{$medium-up}
display: flex
flex-flow: row no-wrap
justify-content: space-between
.build-commit,
.build-tools
padding-left: 2rem
.build-commit
@media #{$medium-up}
flex: 1 1 65%
padding-left: 2.5rem
.build-tools
padding: 1rem 0 1rem 3rem
overflow: auto
@media #{$medium-up}
flex: 0 0 40px
padding: 1rem 0 0
.build-info
padding-left: 3rem
@media #{$medium-up}
flex: 1 1 35%
.build-title,
.build-status
margin: 1rem 0
padding-left: 1rem
font-weight: $font-weight-normal
font-size: 16px
.status-icon
width: 1.7rem
height: 1.8rem
vertical-align: middle
.build-title
.status-icon
margin-left: -2rem
.commit-info
padding-left: 1rem
.commit-branch
margin-right: .5em
font-weight: $font-weight-bold
font-size: 16px
.build-status
padding-left: 0
.commit-author
margin: 1rem 0 .7rem
img
width: 20px
height: 20px
margin-right: .3em
border-radius: 50%
.commit-description
margin: 1rem 0
.list-icon
padding: 0
margin: 1rem 0
list-style: none
.commit-commit,
.commit-compare
@extend %icon-line-commit
padding-left: 1.5em
background:
size: auto 23px
repeat: no-repeat
position: -11px -1px
.commit-clock
@extend %icon-line-clock
padding-left: 1.5em
background:
size: auto 22px
repeat: no-repeat
position: 0 0
.commit-calendar
@extend %icon-line-calendar
padding-left: 1.5em
background:
size: auto 20px
repeat: no-repeat
position: 1px 1px

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

@ -122,11 +122,6 @@ $button-border-color: #d4d4d4
&:focus &:focus
background-color: #696867 background-color: #696867
.button-circle
width: 28px
height: 28px
border-radius: 50%
.button--showmore .button--showmore
height: auto height: auto
padding: 0.3em 0.7em padding: 0.3em 0.7em
@ -148,3 +143,48 @@ $button-border-color: #d4d4d4
&:focus, &:focus,
&:hover &:hover
background-color: lighten(#CD3A36, 10) background-color: lighten(#CD3A36, 10)
// new stuff
%circle-button
display: block
text-indent: 999%
overflow: hidden
width: 28px
height: 28px
border: solid 1px #E4E6E6
border-radius: 50%
&:hover
background-color: $teal
float: left
margin-right: 1rem
@media #{$medium-up}
float: none
margin-right: 0
margin-bottom: .5em
.button-circle-codeclimate
@extend %circle-button
background:
image: inline-image('icons/code-climate-icon.svg')
repeat: no-repeat
size: auto 100%
.button-circle-cancel
@extend %circle-button
@extend %icon-line-cross
background:
repeat: no-repeat
size: auto 100%
.button-circle-trigger
@extend %circle-button
@extend %icon-line-trigger
background:
position: 2px 1px
repeat: no-repeat
size: 24px 24px

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

@ -9,6 +9,7 @@
height: 1em height: 1em
@extend %icon @extend %icon
.icon-cal, .icon-cal,
.icon--cal, .icon--cal,
.icon-calendar .icon-calendar
@ -26,9 +27,6 @@
.icon--github .icon--github
background-image: inline-image('svg/commit-icon.svg') background-image: inline-image('svg/commit-icon.svg')
.icon--github-circle
background-image: inline-image('icons/github.svg')
.icon-hash, .icon-hash,
.icon--hash .icon--hash
background-image: inline-image('svg/build-number-icon.svg') background-image: inline-image('svg/build-number-icon.svg')
@ -87,29 +85,6 @@
background-image: inline-image('icons/remove-log-icon.svg') background-image: inline-image('icons/remove-log-icon.svg')
.icon--down .icon--down
background-image: inline-image('icons/end-of-log-icon.svg') background-image: inline-image('icons/end-of-log-icon.svg')
.icon--codeclimate
background-image: inline-image('icons/code-climate-icon.svg')
.icon-status.errored
background-image: inline-image('dashboard/status-errored.svg')
.icon-status.failed
background-image: inline-image('dashboard/status-failed.svg')
.icon-status.canceled
background-image: inline-image('dashboard/status-cancelled.svg')
.icon-status.passed
background-image: inline-image('dashboard/status-passed.svg')
.icon-status.started,
.icon-status.queued,
.icon-status.booting,
.icon-status.received,
.icon-status.created,
background-image: inline-image('dashboard/status-pending.svg')
.icon--env .icon--env
background-image: inline-image('svg/icon-environment-dark2.svg') background-image: inline-image('svg/icon-environment-dark2.svg')
@ -182,15 +157,36 @@
background-image: inline-image('svg/fingerprint.svg') background-image: inline-image('svg/fingerprint.svg')
%icon-line-calendar
background-image: inline-image('line-icons/icon-cal.svg')
.icon-line-cal .icon-line-cal
@extend %icon @extend %icon
background-image: inline-image('line-icons/icon-cal.svg') @extend %icon-line-calendar
%icon-line-clock
background-image: inline-image('line-icons/icon-clock.svg')
.icon-line-clock
@extend %icon
@extend %icon-line-clock
.icon-line-build .icon-line-build
@extend %icon @extend %icon
background-image: inline-image('line-icons/icon-build.svg') background-image: inline-image('line-icons/icon-build.svg')
%icon-line-commit
background-image: inline-image('line-icons/icon-commit.svg')
.icon-line-commit .icon-line-commit
@extend %icon @extend %icon
background-image: inline-image('line-icons/icon-commit.svg') @extend %icon-line-commit
%icon-line-cross
background-image: inline-image('line-icons/icon-failed.svg')
%icon-line-trigger
background-image: inline-image('line-icons/icon-trigger.svg')
%icon-github-circle
background-image: inline-image('icons/github.svg')
.icon--plus .icon--plus
&:after &:after

18
app/styles/app/modules/row.sass
View File

@ -76,12 +76,12 @@
display: inline-block display: inline-block
vertical-align: middle vertical-align: middle
@include statusColors($green-dark, 'passed') @include statusColors($green, 'passed', 10px)
@include statusColors($red-dark, 'failed') @include statusColors($red, 'failed', 10px)
@include statusColors($red-dark, 'errored') @include statusColors($red, 'errored', 10px)
@include statusColors($grey-medium, 'canceled') @include statusColors($grey, 'canceled', 10px)
@include statusColors(#bfb502, 'started', #e5da3f) @include statusColors($yellow, 'started', 10px, #e5da3f)
@include statusColors(#bfb502, 'queued', #e5da3f) @include statusColors($yellow, 'queued', 10px, #e5da3f)
@include statusColors(#bfb502, 'booting', #e5da3f) @include statusColors($yellow, 'booting', 10px, #e5da3f)
@include statusColors(#bfb502, 'received', #e5da3f) @include statusColors($yellow, 'received', 10px, #e5da3f)
@include statusColors(#bfb502, 'created', #e5da3f) @include statusColors($yellow, 'created', 10px, #e5da3f)

105
app/styles/app/modules/tabs.sass
View File

@ -4,59 +4,43 @@
font-size: $font-size-sm font-size: $font-size-sm
ul ul
@include resetul @include resetul
width: 100%
clear: both
@media #{$small-only}
margin-top: 2em margin-top: 2em
display: flex
flex-flow: row wrap
justify-content: space-between
width: 100%
@media #{$medium-up}
margin-top: 0
display: block
li li
@media #{$small-only} flex: 0 0 8em
margin-bottom: .8em text-align: center
margin: .5em 0
@media #{$medium-up}
display: inline-block
text-align: left
margin: 0 1.5em 0 0
a a
@extend %inline-block @extend %inline-block
width: 100% width: 100%
color: $grey-light color: $grey-light
padding: .2em 0 padding: 3px 0 4px
.active a, .active a,
a:hover a:hover
position: relative position: relative
color: $teal-dark color: $teal
&:after &:after
content: "" content: ""
position: absolute position: absolute
left: 0 left: 0
bottom: -0.25em bottom: -3px
width: 100% width: 100%
height: 2px height: 2px
background-color: $teal-dark background-color: $teal
.active a .active a
font-weight: 600 font-weight: $font-weight-bold
@media #{$medium-up}
ul
display: block
li
float: left
padding-right: 2em
// todo: switch to icon
#tab_build
position: relative
padding-left: 1em
&:before
content: ""
display: block
position: absolute
color: $grey-lighter
top: 0.4em
left: -0.7em
width: .7em
height: 1.3em
background:
size: 100%
repeat: no-repeat
@extend .icon-tab-arrow
.tabbody .tabbody
position: relative position: relative
@ -76,35 +60,6 @@
float: left float: left
margin-right: 1em margin-right: 1em
#main
.tabs
border-bottom: 3px solid #f5f5f6
li
height: 29px
background-color: #f5f5f6
margin-right: 0
overflow: hidden
&:hover
background-color: #e1e8eb
a
text-decoration: none
.active
display: block
background-color: $tab-active-bg
border-bottom-color: $tab-active-bg
&:hover
background-color: $tab-active-bg
a
color: #6c878e
@media #{$medium-up}
display: inline-block
#builds
a
display: inline
.tabs--main .tabs--main
#tab_build, #tab_build,
#tab_job, #tab_job,
@ -116,7 +71,19 @@
&.active &.active
display: inline-block display: inline-block
#profile #tab_build
#main position: relative
.tab @media #{$medium-up}
margin: 30px 0 0 12px left: .5em
.tab-arrow
display: inline-block
position: absolute
top: 5px
left: -19px
width: .7em
height: 1.3em
background:
size: 100%
repeat: no-repeat
@extend .icon-tab-arrow

14
app/templates/components/build-header.hbs
View File

@ -34,11 +34,11 @@
</ul> </ul>
<p class="commit-author"> <p class="commit-author">
{{#if commit.authorName}} {{#if commit.authorName}}
<img src={{urlAuthorGravatarImage}}>{{commit.authorName}} authored{{#if commit.authorIsCommitter}} and committed{{/if}} <img src={{urlAuthorGravatarImage}} alt="comitter avatar" aria-hidden="true"><span class="label-align">{{commit.authorName}} authored{{#if commit.authorIsCommitter}} and committed{{/if}}</span>
{{/if}} {{/if}}
{{#unless commit.authorIsCommitter}} {{#unless commit.authorIsCommitter}}
{{#if commit.committerName}} {{#if commit.committerName}}
<img src={{urlCommitterGravatarImage}}>{{commit.committerName}} committed <img src={{urlCommitterGravatarImage}} alt="comitter avatar" aria-hidden="true"><span class="label-align">{{commit.committerName}} committed</span>
{{/if}} {{/if}}
{{/unless}} {{/unless}}
</p> </p>
@ -47,8 +47,13 @@
<div class="build-info"> <div class="build-info">
<h3 class="build-status {{item.state}}"> <h3 class="build-status {{item.state}}">
{{#if isJob}}
{{#link-to "job" repo item}}
{{status-icon status=item.state}} #{{item.number}} {{humanize-state item.state}}{{/link-to}}
{{else}}
{{#link-to "build" repo item}} {{#link-to "build" repo item}}
{{status-icon status=item.state}} #{{item.number}} {{humanize-state item.state}}{{/link-to}} {{status-icon status=item.state}} #{{item.number}} {{humanize-state item.state}}{{/link-to}}
{{/if}}
</h3> </h3>
<ul class="list-icon"> <ul class="list-icon">
<li><span title="{{format-duration item.duration}}" class="commit-clock">{{#if item.isFinished}}ran{{else}}running{{/if}} for {{format-duration item.duration}}</span></li> <li><span title="{{format-duration item.duration}}" class="commit-clock">{{#if item.isFinished}}ran{{else}}running{{/if}} for {{format-duration item.duration}}</span></li>
@ -56,7 +61,10 @@
<li><span title="{{pretty-date item.finishedAt}}" class="commit-calendar">{{format-time item.finishedAt}}</span></li> <li><span title="{{pretty-date item.finishedAt}}" class="commit-calendar">{{format-time item.finishedAt}}</span></li>
</ul> </ul>
</div> </div>
<div class="build-tools"> <div class="build-tools">
{{#if isJob}}
{{repo-actions job=item repo=item.repo user=auth.currentUser}}
{{else}}
{{repo-actions build=item repo=item.repo user=user}} {{repo-actions build=item repo=item.repo user=user}}
{{/if}}
</div> </div>

8
app/templates/components/build-repo-actions.hbs
View File

@ -2,8 +2,8 @@
{{#if cancelling}} {{#if cancelling}}
{{loading-indicator height=true}} {{loading-indicator height=true}}
{{else}} {{else}}
<a href="#" {{action "cancel"}} class="button-circle" title="Cancel Build"> <a href="#" {{action "cancel"}} class="button-circle-cancel" title="Cancel Build">
<span class="icon icon--cancel"></span> Cancel build
</a> </a>
{{/if}} {{/if}}
{{/if}} {{/if}}
@ -12,8 +12,8 @@
{{#if restarting}} {{#if restarting}}
{{loading-indicator height=true}} {{loading-indicator height=true}}
{{else}} {{else}}
<a href="#" {{action "restart"}} class="button-circle" title="Restart Build"> <a href="#" {{action "restart"}} class="button-circle-trigger" title="Restart Build">
<span class="icon icon--trigger"></span> Trigger build
</a> </a>
{{/if}} {{/if}}
{{/if}} {{/if}}

8
app/templates/components/job-repo-actions.hbs
View File

@ -2,8 +2,8 @@
{{#if cancelling}} {{#if cancelling}}
{{loading-indicator height=true}} {{loading-indicator height=true}}
{{else}} {{else}}
<a href="#" {{action "cancel"}} class="button-circle" title="Cancel Job"> <a href="#" {{action "cancel"}} class="button-circle-cancel" title="Cancel Job">
<span class="icon icon--cancel"></span> Cancel Job
</a> </a>
{{/if}} {{/if}}
{{/if}} {{/if}}
@ -12,8 +12,8 @@
{{#if restarting}} {{#if restarting}}
{{loading-indicator height=true}} {{loading-indicator height=true}}
{{else}} {{else}}
<a href="#" {{action "restart"}} class="button-circle" title="Restart Job"> <a href="#" {{action "restart"}} class="button-circle-trigger" title="Restart Job">
<span class="icon icon--trigger"></span> Restart Job
</a> </a>
{{/if}} {{/if}}
{{/if}} {{/if}}

5
app/templates/components/repo-actions.hbs
View File

@ -10,9 +10,8 @@
{{#if displayCodeClimate}} {{#if displayCodeClimate}}
<a href="#" name="code-climate" <a href="#" name="code-climate"
{{action "codeClimatePopup"}} class="button-circle open-popup" {{action "codeClimatePopup"}} class="button-circle-codeclimate open-popup"
title="Test Coverage with Code Climate"> title="Test Coverage with Code Climate">Code Climate
<span class="icon icon--codeclimate"></span>
</a> </a>
{{/if}} {{/if}}

3
app/templates/components/repo-show-tabs.hbs
View File

@ -1,4 +1,3 @@
<div class="tabnav" role="tablist">
<ul class="tab tabs--main"> <ul class="tab tabs--main">
<li id="tab_current" class={{classCurrent}}> <li id="tab_current" class={{classCurrent}}>
{{#if repo.slug}} {{#if repo.slug}}
@ -31,6 +30,7 @@
<li id="tab_build" class={{classBuild}}> <li id="tab_build" class={{classBuild}}>
{{#if build.id}} {{#if build.id}}
{{#if repo.slug}} {{#if repo.slug}}
<span class="tab-arrow"></span>
{{#link-to "build" repo build}} {{#link-to "build" repo build}}
Build #{{build.number}} Build #{{build.number}}
{{/link-to}} {{/link-to}}
@ -80,4 +80,3 @@
{{/if}} {{/if}}
</li> </li>
</ul> </ul>
</div>

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

@ -1,5 +1,5 @@
<div class="dropdown dropdown--classic" id="tools"> <a href="#" {{action "menu"}} class="menu-popup-button dropdown-button btn" type="" title="open settings menu">
<a href="#" {{action "menu"}} class="menu-popup-button dropdown-button btn" type=""><span class="icon icon-cog-light"></span> Settings <span class="icon icon-arrow-down"></span></a> <span class="icon icon-cog-light"></span> Settings <span class="icon icon-arrow-down"></span></a>
<ul class="dropdown-menu menu"> <ul class="dropdown-menu menu">
{{#if displaySettingsLink}} {{#if displaySettingsLink}}
<li> <li>
@ -15,4 +15,3 @@
</li> </li>
{{/if}} {{/if}}
</ul> </ul>
</div>

61
app/templates/job.hbs
View File

@ -1,65 +1,6 @@
{{#if job.isLoaded}} {{#if job.isLoaded}}
<section class="tile tile--pass row {{job.state}}" {{!-- id="new-summary" --}}> {{build-header item=job user=auth.currentUser commit=job.commit}}
<div class="tile-status">
<span class="icon icon-status {{job.state}}" title={{job.state}}></span>
<span class="request-kind {{job.build.eventType}} icon" title={{job.build.eventType}}></span>
</div>
<div class="tile-main medium-8 columns">
<h2 class="repo-main-commit">
<small class="repo-main-branch" title={{job.commit.branch}}>{{job.commit.branch}}</small>
{{format-message job.commit.subject repoBinding=job.repo}}
</h2>
<div class="repo-main-description">
<pre class="body">{{format-message job.commit.body repoBinding=job.repo pre=true}}</pre>
</div>
<div class="tile-author">
{{#if job.commit.authorName}}
<img src={{view.urlAuthorGravatarImage}} />{{job.commit.authorName}} authored{{#if job.commit.authorIsCommitter}} and committed{{/if}}
{{/if}}
{{#unless job.commit.authorIsCommitter}}
{{#if job.commit.committerName}}
<img src={{view.urlCommitterGravatarImage}} />{{job.commit.committerName}} committed
{{/if}}
{{/unless}}
</div>
</div>
<div class="tile-additional medium-4 columns end">
<ul class="repo-main-info">
<li class="repo-build-status">
{{#link-to "job" repo job}}
<span class="icon icon--hash"></span>
{{job.number}} {{humanize-state job.state}}
{{/link-to}}
</li>
<li>
<a class="commit" href={{controller.urlGithubCommit}}><span class="icon icon--github"></span> Commit {{format-sha job.commit.sha}}</a>
</li>
<li>
{{#if job.build.pullRequest}}
<div class="compare"><a class="compare" href={{job.commit.compareUrl}}><span class="icon icon--github"></span> #{{job.build.pullRequestNumber}}: {{job.build.pullRequestTitle}}</a></div>
{{else}}
{{#if job.build.commit.compareUrl}}
<div class="compare"><a class="compare" href={{job.commit.compareUrl}}><span class="icon icon--github"></span> Compare {{short-compare-shas job.build.commit.compareUrl}}</a></div>
{{/if}}
{{/if}}
</li>
<li>
<span class="icon icon--clock"></span>
{{#if job.isFinished}}ran{{else}}running{{/if}} for {{format-duration job.duration}}
</li>
<li>
<span class="icon icon--cal"></span>
{{format-time job.finishedAt}}
</li>
</ul>
{{repo-actions job=job repo=job.repo user=auth.currentUser}}
</div>
</section>
{{view 'annotations' annotations=view.annotations}} {{view 'annotations' annotations=view.annotations}}

26
app/templates/repo.hbs
View File

@ -1,28 +1,28 @@
<div id="repo" class="{{view.className}} repo">
{{#if view.isEmpty}} {{#if view.isEmpty}}
{{repos-empty}} {{repos-empty}}
{{else}} {{else}}
{{#if repo.isLoaded}} {{#if repo.isLoaded}}
<article id="repo-header" class="repo-header passed"> <article class="repo-header">
<header> <header>
<h1 class="repo-header-title">{{#link-to "owner" repo.owner}}{{repo.owner}}{{/link-to}} / {{#link-to "repo" repo}}{{repo.name}}{{/link-to}}</h1> <h1 class="repo-title">{{#link-to "owner" repo.owner}}{{repo.owner}}{{/link-to}} / {{#link-to "repo" repo}}{{repo.name}}{{/link-to}}</h1>
<div class="repo-header-icons"> <div class="repo-gh">
<a href={{controller.urlGithub}}><span class="icon icon--github-circle"></span></a> <a href="{{controller.urlGithub}}" title="{{repo.name}} on Github">{{repo.name}} on Github</a>
<a href="#" id="status-image-popup" name="status-images" class="open-popup" {{action "statusImages" target=view}}> </div>
<img src={{view.statusImageUrl}} title="Build Status Images"/> <div class="repo-badge">
<a href="#" id="status-image-popup" title="build status image" name="status-images" class="open-popup" {{action "statusImages" target=view}}>
<img src={{view.statusImageUrl}} alt="Build Status Images"/>
</a> </a>
</div> </div>
<p class="description">{{description}}</p>
</header> </header>
<div class="repo-menus"> <main class="repo-main">
<div class="repo-menu-header"> <div class="repo-navigation">
{{repo-show-tools repo=repo build=build job=job tab=tab currentUser=auth.currentUser}} {{repo-show-tools repo=repo build=build job=job tab=tab currentUser=auth.currentUser}}
{{repo-show-tabs repo=repo tab=tab build=build job=job}} {{repo-show-tabs repo=repo tab=tab build=build job=job}}
</div> </div>
<div class="tabbody repo-main"> <div class="tabbody repo-body">
{{#if repo.active}} {{#if repo.active}}
{{outlet}} {{outlet}}
{{else}} {{else}}
@ -33,12 +33,10 @@
{{/if}} {{/if}}
{{/if}} {{/if}}
</div> </div>
</div> </main>
</article> </article>
{{else}} {{else}}
{{loading-indicator}} {{loading-indicator}}
{{/if}} {{/if}}
{{/if}} {{/if}}
</div>

11
public/images/line-icons/icon-cal.svg
View File

@ -1,14 +1,23 @@
<svg x="0px" y="0px" viewBox="0 0 20 20" xml:space="preserve"> <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<g id="Cal"> <g id="Cal">
<g>
<path fill="#A7AEAE" d="M16.7,2.5H3.3C3,2.5,2.8,2.7,2.8,3V17c0,0.3,0.2,0.5,0.5,0.5h13.4c0.3,0,0.5-0.2,0.5-0.5V3 <path fill="#A7AEAE" d="M16.7,2.5H3.3C3,2.5,2.8,2.7,2.8,3V17c0,0.3,0.2,0.5,0.5,0.5h13.4c0.3,0,0.5-0.2,0.5-0.5V3
C17.2,2.7,17,2.5,16.7,2.5z M16.2,3.4v3.1H3.8V3.4H16.2z M3.8,16.6v-9h12.5v9H3.8z"/> C17.2,2.7,17,2.5,16.7,2.5z M16.2,3.4v3.1H3.8V3.4H16.2z M3.8,16.6v-9h12.5v9H3.8z"/>
</g>
<g>
<path fill="#A7AEAE" d="M8.7,13.4c-0.1,0-0.3,0-0.4,0c0.2-0.2,0.4-0.4,0.5-0.6c0.2-0.2,0.3-0.4,0.5-0.6c0.1-0.2,0.2-0.4,0.3-0.6 <path fill="#A7AEAE" d="M8.7,13.4c-0.1,0-0.3,0-0.4,0c0.2-0.2,0.4-0.4,0.5-0.6c0.2-0.2,0.3-0.4,0.5-0.6c0.1-0.2,0.2-0.4,0.3-0.6
c0.1-0.2,0.1-0.4,0.1-0.6c0-0.2,0-0.4-0.1-0.6c-0.1-0.2-0.2-0.3-0.3-0.4C9.2,10,9.1,9.9,8.9,9.8C8.7,9.7,8.5,9.7,8.3,9.7 c0.1-0.2,0.1-0.4,0.1-0.6c0-0.2,0-0.4-0.1-0.6c-0.1-0.2-0.2-0.3-0.3-0.4C9.2,10,9.1,9.9,8.9,9.8C8.7,9.7,8.5,9.7,8.3,9.7
C8,9.7,7.7,9.8,7.5,9.9C7.2,10,7,10.2,6.8,10.4L7.3,11c0.1-0.1,0.2-0.2,0.4-0.3c0.1-0.1,0.3-0.1,0.4-0.1c0.2,0,0.4,0.1,0.5,0.2 C8,9.7,7.7,9.8,7.5,9.9C7.2,10,7,10.2,6.8,10.4L7.3,11c0.1-0.1,0.2-0.2,0.4-0.3c0.1-0.1,0.3-0.1,0.4-0.1c0.2,0,0.4,0.1,0.5,0.2
c0.1,0.1,0.2,0.3,0.2,0.5c0,0.2,0,0.3-0.1,0.5c-0.1,0.2-0.2,0.4-0.4,0.6c-0.2,0.2-0.4,0.4-0.6,0.7c-0.2,0.2-0.5,0.5-0.8,0.8v0.6 c0.1,0.1,0.2,0.3,0.2,0.5c0,0.2,0,0.3-0.1,0.5c-0.1,0.2-0.2,0.4-0.4,0.6c-0.2,0.2-0.4,0.4-0.6,0.7c-0.2,0.2-0.5,0.5-0.8,0.8v0.6
H10v-0.9H9.1C9,13.4,8.8,13.4,8.7,13.4z"/> H10v-0.9H9.1C9,13.4,8.8,13.4,8.7,13.4z"/>
</g>
<g>
<path fill="#A7AEAE" d="M10.6,10.7h2c-0.2,0.3-0.4,0.6-0.5,0.8c-0.1,0.3-0.3,0.6-0.4,0.8c-0.1,0.3-0.2,0.6-0.2,0.9 <path fill="#A7AEAE" d="M10.6,10.7h2c-0.2,0.3-0.4,0.6-0.5,0.8c-0.1,0.3-0.3,0.6-0.4,0.8c-0.1,0.3-0.2,0.6-0.2,0.9
c0,0.3-0.1,0.7-0.1,1h1c0-0.4,0-0.8,0.1-1.2c0-0.3,0.1-0.7,0.2-0.9c0.1-0.3,0.2-0.6,0.4-0.9c0.2-0.3,0.4-0.6,0.6-0.9V9.8h-3.1 c0,0.3-0.1,0.7-0.1,1h1c0-0.4,0-0.8,0.1-1.2c0-0.3,0.1-0.7,0.2-0.9c0.1-0.3,0.2-0.6,0.4-0.9c0.2-0.3,0.4-0.6,0.6-0.9V9.8h-3.1
V10.7z"/> V10.7z"/>
</g> </g>
</g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

13
public/images/line-icons/icon-clock.svg
View File

@ -1,9 +1,18 @@
<svg version="1.1" id="Layer_1" x="0px" y="0px" <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-289 191 20 20" style="enable-background:new -289 191 20 20;" xml:space="preserve"> viewBox="-289 191 20 20" style="enable-background:new -289 191 20 20;" xml:space="preserve">
<style type="text/css">
.st0{fill:#A5ACAD;}
</style>
<g> <g>
<path fill="#A5ACAD" class="st0" d="M-278.9,207.7c-3.7,0-6.7-3-6.7-6.7s3-6.7,6.7-6.7s6.7,3,6.7,6.7S-275.2,207.7-278.9,207.7z M-278.9,195.4 <g>
<path class="st0" d="M-278.9,207.7c-3.7,0-6.7-3-6.7-6.7s3-6.7,6.7-6.7s6.7,3,6.7,6.7S-275.2,207.7-278.9,207.7z M-278.9,195.4
c-3.1,0-5.6,2.5-5.6,5.6s2.5,5.6,5.6,5.6c3.1,0,5.6-2.5,5.6-5.6S-275.8,195.4-278.9,195.4z"/> c-3.1,0-5.6,2.5-5.6,5.6s2.5,5.6,5.6,5.6c3.1,0,5.6-2.5,5.6-5.6S-275.8,195.4-278.9,195.4z"/>
</g>
<g>
<path class="st0" d="M-276.7,203.1c-0.1,0-0.2,0-0.3-0.1l-2.4-1.5c-0.2-0.1-0.2-0.3-0.2-0.4v-3.8c0-0.3,0.2-0.5,0.5-0.5 <path class="st0" d="M-276.7,203.1c-0.1,0-0.2,0-0.3-0.1l-2.4-1.5c-0.2-0.1-0.2-0.3-0.2-0.4v-3.8c0-0.3,0.2-0.5,0.5-0.5
s0.5,0.2,0.5,0.5v3.5l2.1,1.4c0.2,0.2,0.3,0.5,0.2,0.7C-276.4,203-276.5,203.1-276.7,203.1z"/> s0.5,0.2,0.5,0.5v3.5l2.1,1.4c0.2,0.2,0.3,0.5,0.2,0.7C-276.4,203-276.5,203.1-276.7,203.1z"/>
</g> </g>
</g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 619 B

After

Width:  |  Height:  |  Size: 899 B

49
public/images/line-icons/icon-commit.svg
View File

@ -1,24 +1,31 @@
<svg x="0px" y="0px" viewBox="0 0 20 20" xml:space="preserve"> <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="960px" height="560px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<g id="Commit"> <g id="Commit">
<path fill="#A7AEAE" d="M7.8,17.5c-0.3,0-0.5-0.2-0.5-0.5l0-1c-0.4,0-1,0.1-1.4-0.1c-0.4-0.1-1.3-0.5-1.8-1.7 <path fill="#A7AEAE" d="M418.4,490c-8.4,0-14-5.6-14-14v-28c-11.2,0-28,2.8-39.2-2.8c-11.2-2.8-36.4-14-50.4-47.601
c-0.1-0.2-0.3-0.4-0.4-0.6c-0.1-0.1-0.2-0.3-0.3-0.4C3,12.8,3,12,3.3,11.5c0.3-0.4,0.7-0.5,1.2-0.3c0.7,0.2,1.1,0.9,1.4,1.3 c-2.8-5.6-8.4-11.199-11.2-16.8c-2.8-2.8-5.6-8.399-8.4-11.2C284,358.4,284,336,292.4,322c8.4-11.2,19.6-14,33.6-8.4
c0.1,0.1,0.1,0.2,0.2,0.2c0.4,0.4,1,0.3,1.4,0.1c0.1-0.1,0.2-0.2,0.3-0.3c-0.1,0-0.1,0-0.2,0c-0.7-0.1-1.3-0.4-1.9-0.7 c19.6,5.601,30.8,25.2,39.2,36.4c2.8,2.8,2.8,5.6,5.6,5.6c11.2,11.2,28,8.4,39.2,2.801c2.8-2.801,5.6-5.601,8.4-8.4
c-0.2-0.2-0.6-0.4-0.8-0.7c-0.3-0.3-0.5-0.7-0.7-1.2C4.1,9.4,4,9,3.9,8.5c0-0.4-0.1-0.9,0-1.4C4,6.5,4.2,6,4.5,5.5 c-2.801,0-2.801,0-5.601,0c-19.6-2.8-36.4-11.2-53.2-19.6c-5.6-5.601-16.8-11.2-22.4-19.601c-8.4-8.399-14-19.6-19.6-33.6
c0.1-0.1,0.1-0.2,0.2-0.3c0,0,0-0.1,0-0.1c-0.1-0.3-0.1-0.6-0.1-1c0-0.4,0.1-0.8,0.3-1.2C5,2.6,5.2,2.5,5.5,2.5 c-2.8-14-5.6-25.2-8.4-39.2c0-11.2-2.8-25.2,0-39.2C312,182,317.6,168,326,154c2.8-2.8,2.8-5.6,5.6-8.4v-2.8
c0.3,0,0.8,0.1,1.2,0.3c0.4,0.2,0.8,0.4,1.2,0.7c0.5-0.1,1-0.2,1.6-0.2c0.4,0,1.6,0,2,0c0.5,0,1,0.1,1.4,0.2l0.2-0.1 c-2.8-8.4-2.8-16.8-2.8-28c0-11.2,2.8-22.4,8.4-33.6C340,72.8,345.6,70,354,70s22.4,2.8,33.6,8.4C398.8,84,410,89.6,421.2,98
c0.2-0.1,0.5-0.3,0.7-0.4c0.4-0.2,0.7-0.3,1.1-0.3c0.1,0,0.2,0,0.3,0c0.3,0,0.5,0.1,0.6,0.4c0.2,0.6,0.4,1.2,0.2,2l0,0.1 c14-2.8,28-5.6,44.8-5.6c11.2,0,44.8,0,56,0c14,0,28,2.8,39.2,5.6l5.6-2.8c5.601-2.8,14-8.4,19.601-11.2
c0,0.1,0,0.2-0.1,0.3c0.5,0.6,0.7,1.3,0.8,2.1c0,0.3,0,0.6,0,0.9c0,0.5-0.1,1-0.2,1.4c-0.2,0.5-0.4,1-0.7,1.4 c11.199-5.6,19.6-8.4,30.8-8.4c2.8,0,5.6,0,8.399,0c8.4,0,14,2.8,16.801,11.2c5.6,16.8,11.199,33.6,5.6,56v2.8c0,2.8,0,5.6-2.8,8.4
c-0.3,0.4-0.7,0.6-1,0.8c-0.6,0.3-1.2,0.6-1.8,0.7c0.2,0.4,0.3,0.8,0.3,1.3c0,0,0,0,0,0c0,0.8,0,3.2,0,3.2c0,0.3-0.2,0.5-0.5,0.5 c14,16.8,19.6,36.4,22.399,58.8c0,8.4,0,16.8,0,25.2c0,14-2.8,28-5.6,39.2c-5.6,14-11.2,28-19.6,39.2
L7.8,17.5L7.8,17.5z M7.8,15.1c0.1,0,0.2,0,0.3,0.1c0.1,0.1,0.2,0.2,0.2,0.3l0,1l4.2,0c0-0.7,0-2.1,0-2.7c0-0.4-0.1-0.7-0.2-1 c-8.4,11.199-19.601,16.8-28,22.399C597.6,347.2,580.8,355.6,564,358.4c5.6,11.199,8.4,22.399,8.4,36.399l0,0
c-0.1-0.2-0.1-0.3-0.2-0.3l0.3-0.4l0,0L12,12.5c-0.1-0.1-0.1-0.3-0.1-0.5c0.1-0.2,0.2-0.3,0.4-0.3l0.3,0c0.7-0.1,1.3-0.3,1.9-0.7 c0,22.4,0,89.601,0,89.601c0,8.399-5.601,14-14,14L418.4,490L418.4,490z M536,350c-2.8-2.8-2.8-8.4-2.8-14
c0.3-0.2,0.6-0.4,0.7-0.6c0.2-0.3,0.4-0.6,0.5-1C15.9,9,15.9,8.6,16,8.1c0-0.2,0-0.5,0-0.7c-0.1-0.7-0.3-1.2-0.7-1.7 c2.8-5.6,5.6-8.4,11.2-8.4h8.399c19.601-2.8,36.4-8.399,53.2-19.6c8.4-5.6,16.8-11.2,19.6-16.8c5.601-8.4,11.2-16.8,14-28
c-0.2-0.2-0.2-0.4-0.1-0.6c0-0.1,0.1-0.2,0.1-0.3l0-0.1c0.1-0.4,0-0.8-0.1-1.2c0,0,0,0-0.1,0c-0.2,0-0.5,0.1-0.7,0.2 c5.601-11.2,5.601-22.4,8.4-36.4c0-5.6,0-14,0-19.6c-2.8-19.6-8.4-33.6-19.6-47.6c-5.601-5.6-5.601-11.2-2.801-16.8
c-0.2,0.1-0.4,0.2-0.7,0.4l-0.4,0.2c-0.1,0.1-0.3,0.1-0.4,0.1c-0.5-0.1-0.9-0.2-1.4-0.2c-0.4,0-1.5,0-1.9,0C9,4.1,8.5,4.2,8,4.4 c0-2.8,2.801-5.6,2.801-8.4v-2.8c2.8-11.2,0-22.4-2.801-33.6c0,0,0,0-2.8,0c-5.6,0-14,2.8-19.6,5.6
c-0.1,0-0.3,0-0.5-0.1C7.1,4,6.7,3.8,6.3,3.6C6.1,3.5,5.9,3.5,5.7,3.5C5.6,3.7,5.6,4,5.6,4.2c0,0.3,0,0.5,0.1,0.7 c-5.601,2.8-11.2,5.6-19.601,11.2l-11.199,5.6c-2.801,2.8-8.4,2.8-11.2,2.8c-14-2.8-25.2-5.6-39.2-5.6c-11.2,0-42,0-53.2,0
c0,0.1,0,0.1,0.1,0.2c0.1,0.2,0,0.4-0.1,0.5L5.5,5.8C5.5,5.9,5.4,6,5.3,6.1C5.1,6.4,4.9,6.8,4.8,7.3c-0.1,0.4,0,0.8,0,1.1 c-16.8-2.8-30.8,0-44.8,5.6c-2.8,0-8.4,0-14-2.8c-11.2-8.4-22.4-14-33.6-19.6c-5.6-2.8-11.2-2.8-16.8-2.8c-2.8,5.6-2.8,14-2.8,19.6
c0,0.4,0.1,0.8,0.2,1.2c0.1,0.4,0.3,0.7,0.5,0.9C5.8,10.7,6,10.9,6.2,11c0.5,0.3,1,0.5,1.6,0.6c0.2,0,0.7,0.1,0.7,0.1 c0,8.4,0,14,2.8,19.6c0,2.8,0,2.8,2.8,5.6c2.8,5.6,0,11.2-2.8,14l-5.6,5.6c0,2.8-2.8,5.6-5.6,8.4c-5.6,8.4-11.2,19.6-14,33.6
c0.1,0,0.3,0.1,0.3,0.2c0.1,0.1,0.1,0.2,0.1,0.4c0,0.1-0.3,1-0.9,1.4c-0.7,0.4-1.8,0.5-2.5-0.3c-0.1-0.1-0.2-0.2-0.3-0.3 c-2.8,11.2,0,22.4,0,30.8c0,11.2,2.8,22.4,5.6,33.6c2.8,11.2,8.4,19.601,14,25.2c8.4,5.6,14,11.2,19.6,14c14,8.4,28,14,44.8,16.8
c-0.2-0.3-0.6-0.8-1-1c-0.1,0-0.1,0-0.1,0c0,0,0,0-0.1,0.1c0,0.2,0,0.4,0.1,0.6c0.1,0.1,0.2,0.2,0.3,0.4c0.2,0.3,0.4,0.5,0.5,0.8 c5.6,0,19.6,2.8,19.6,2.8c2.8,0,8.4,2.801,8.4,5.601c2.8,2.8,2.8,5.6,2.8,11.2c0,2.8-8.4,28-25.2,39.199
c0.4,0.8,1,1.1,1.2,1.2C6.6,15.2,7.4,15.1,7.8,15.1C7.7,15.1,7.7,15.1,7.8,15.1z"/> c-19.6,11.2-50.4,14-70-8.399c-2.8-2.8-5.6-5.601-8.4-8.4c-5.6-8.399-16.8-22.399-28-28c-2.8,0-2.8,0-2.8,0s0,0-2.8,2.8
c0,5.601,0,11.2,2.8,16.801c2.8,2.8,5.6,5.6,8.4,11.199c5.6,8.4,11.2,14,14,22.4c11.2,22.4,28,30.8,33.6,33.6
c14,0,36.4-2.8,47.601-2.8c-2.801,0-2.801,0,0,0c2.8,0,5.6,0,8.399,2.8c2.8,2.801,5.601,5.601,5.601,8.4v28H550
c0-19.6,0-58.8,0-75.6c0-11.2-2.8-19.601-5.6-28C541.6,352.8,541.6,350,538.8,350"/>
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

4
public/images/line-icons/icon-failed.svg
View File

@ -1,7 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"> viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<g id="Failed"> <g id="Failed">
<path fill="##A7AEAE" d="M10.9,10l3.9-3.9c0.2-0.2,0.2-0.6,0-0.9c-0.2-0.2-0.6-0.2-0.9,0L10,9.1L6.1,5.2c-0.2-0.2-0.6-0.2-0.9,0 <path fill="#A7AEAE" d="M10.9,10l3.9-3.9c0.2-0.2,0.2-0.6,0-0.9c-0.2-0.2-0.6-0.2-0.9,0L10,9.1L6.1,5.2c-0.2-0.2-0.6-0.2-0.9,0
c-0.2,0.2-0.2,0.6,0,0.9L9.1,10l-3.9,3.9c-0.2,0.2-0.2,0.6,0,0.9C5.3,14.9,5.5,15,5.6,15s0.3-0.1,0.4-0.2l3.9-3.9l3.9,3.9 c-0.2,0.2-0.2,0.6,0,0.9L9.1,10l-3.9,3.9c-0.2,0.2-0.2,0.6,0,0.9C5.3,14.9,5.5,15,5.6,15s0.3-0.1,0.4-0.2l3.9-3.9l3.9,3.9
c0.1,0.1,0.3,0.2,0.4,0.2c0.2,0,0.3-0.1,0.4-0.2c0.2-0.2,0.2-0.6,0-0.9L10.9,10z"/> c0.1,0.1,0.3,0.2,0.4,0.2c0.2,0,0.3-0.1,0.4-0.2c0.2-0.2,0.2-0.6,0-0.9L10.9,10z"/>
</g> </g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 579 B

After

Width:  |  Height:  |  Size: 704 B

5
public/images/line-icons/icon-trigger.svg
View File

@ -1,4 +1,7 @@
<svg x="0px" y="0px" viewBox="0 0 20 20" xml:space="preserve"> <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<g id="Trigger"> <g id="Trigger">
<path fill="#A7AEAE" d="M17.2,7.9C17,7.6,16.6,7.7,16.3,8l-1,1.2C14.9,6,12.2,3.6,9,3.6c-3.6,0-6.4,2.9-6.4,6.4s2.9,6.4,6.4,6.4 <path fill="#A7AEAE" d="M17.2,7.9C17,7.6,16.6,7.7,16.3,8l-1,1.2C14.9,6,12.2,3.6,9,3.6c-3.6,0-6.4,2.9-6.4,6.4s2.9,6.4,6.4,6.4
c1.8,0,3.6-0.8,4.8-2.2c0.2-0.3,0.2-0.7-0.1-0.9c-0.3-0.2-0.7-0.2-0.9,0.1c-1,1.1-2.4,1.7-3.9,1.7c-2.8,0-5.1-2.3-5.1-5.1 c1.8,0,3.6-0.8,4.8-2.2c0.2-0.3,0.2-0.7-0.1-0.9c-0.3-0.2-0.7-0.2-0.9,0.1c-1,1.1-2.4,1.7-3.9,1.7c-2.8,0-5.1-2.3-5.1-5.1

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 590 B

After

Width:  |  Height:  |  Size: 856 B