diff --git a/app/components/jobs-item.coffee b/app/components/jobs-item.coffee index dfe687f0..77bc96e2 100644 --- a/app/components/jobs-item.coffee +++ b/app/components/jobs-item.coffee @@ -7,15 +7,6 @@ JobsItemComponent = Ember.Component.extend classNameBindings: ['job.state'] classNames: ['jobs-item'] - isAnimating: (-> - state = @get('job.state') - animationStates = ['received', 'queued', 'started', 'booting'] - - unless animationStates.indexOf(state) == -1 - true - - ).property('job.state') - languages: (-> output = [] diff --git a/app/components/request-icon.coffee b/app/components/request-icon.coffee index 2d97aa28..1ac50c88 100644 --- a/app/components/request-icon.coffee +++ b/app/components/request-icon.coffee @@ -3,28 +3,23 @@ RequestIconComponent = Ember.Component.extend tagName: 'span' - classNames: ['icon-request', 'icon'] - classNameBindings: ['build.last_build.state', 'build.state'] + classNames: ['status-icon', 'icon'] + classNameBindings: ['event', 'state'] isPush: (-> - @get('build.last_build.event_type') == 'push' || - @get('build.event_type') == 'push' - ).property('build.last_build') + @get('event') == 'push' + ).property('event') isPR: (-> - @get('build.last_build.event_type') == 'pull_request' || - @get('build.event_type') == 'pull_request' - ).property('build.last_build') + @get('event') == 'pull_request' + ).property('event') isAPI: (-> - @get('build.last_build.event_type') == 'api' || - @get('build.event_type') == 'api' - ).property('build.last_build') + @get('event') == 'api' + ).property('event') isEmpty: (-> - true if @get('build.last_build') == null || @get('build') == null - ).property('build.last_build') - - + true if @get('event') == null || @get('event') == null + ).property('event') `export default RequestIconComponent` diff --git a/app/styles/app/_mixins/mixins.sass b/app/styles/app/_mixins/mixins.sass index 6a9def98..97133aa0 100644 --- a/app/styles/app/_mixins/mixins.sass +++ b/app/styles/app/_mixins/mixins.sass @@ -56,27 +56,12 @@ // @todo simplyfiy coloring mixins - -@mixin colorStatusIcons($color, $status) +=colorStatusIcons($color, $status) .status-icon.#{$status} svg g > * fill: $color -// @mixin colorTiles($color, $status, $extra-bg: $color) -// &.#{$status} -// border-color: $extra-bg -// .tile-status -// background-color: $color -// .repo-header-title a, -// .repo-build-status a, -// .build-status a, -// .tile-header, -// .tile-header a, -// .tile-title a -// color: $color -// @include colorStatusIcons($color, $status) - -@mixin statusColors($color, $status, $width, $color2: $color) +=statusColors($color, $status, $width, $color2: $color) &.#{$status} background: linear-gradient(to right, $color2 0%, $color2 $width, white $width, white 100%) no-repeat .row-name, @@ -98,10 +83,29 @@ color: $color @include colorStatusIcons($color, $status) -@mixin colorRows($color, $status, $width, $color2: $color) +=colorBg($color, $status, $width, $color2: white) &.#{$status} - background: linear-gradient(to right, $color2 0%, $color2 $width, white $width, white 100%) no-repeat - .#{$status}, - .#{$status} a, - color: $color + background: linear-gradient(to right, $color 0%, $color $width, $color2 $width, $color2 100%) no-repeat + +=colorLinks($color, $status, $building: false) + @if $building + .#{$status}, + .#{$status} a, + color: #beab04 + @else + .#{$status}, + .#{$status} a, + color: $color + +=colorRows($color, $status, $width, $is-building: false) + @include colorBg($color, $status, $width) + @include colorLinks($color, $status, $is-building) @include colorStatusIcons($color, $status) + +=colorJobs($color, $status, $width, $hover, $is-building: false) + &.#{$status} + @include colorLinks($color, $status, $is-building) + @include colorStatusIcons($color, $status) + &:hover, + &:active, + @include colorBg($color, $status, $width, $hover) diff --git a/app/styles/app/layouts/jobs.sass b/app/styles/app/layouts/jobs.sass index bd78f197..781a5677 100644 --- a/app/styles/app/layouts/jobs.sass +++ b/app/styles/app/layouts/jobs.sass @@ -2,7 +2,33 @@ .jobs-list + margin: 0 + padding: 0 + list-style: none + font-size: 16px +.jobs-item + border: 1px solid $cream-dark + margin-bottom: 5px + @include colorJobs($green, 'passed', 6px, rgba($green, .1)) + @include colorJobs($red, 'failed', 6px, rgba($red, .1)) + @include colorJobs($red, 'errored', 6px, rgba($red, .1)) + @include colorJobs($grey, 'canceled', 6px, rgba($grey, .1)) + @include colorJobs($yellow, 'started', 6px, rgba($yellow, .1), true) + @include colorJobs($yellow, 'queued', 6px, rgba($yellow, .1), true) + @include colorJobs($yellow, 'booting', 6px, rgba($yellow, .1), true) + @include colorJobs($yellow, 'received', 6px, rgba($yellow, .1), true) + @include colorJobs($yellow, 'created', 6px, rgba($yellow, .1), true) + + a + display: block + padding-left: 1em + @media #{$medium-up} + display: flex + flex-flow: row nowrap + justify-content: space-between + align-items: center + height: 34px .section-title font-size: 16px diff --git a/app/styles/app/layouts/repo.sass b/app/styles/app/layouts/repo.sass index c724462f..876c8a75 100644 --- a/app/styles/app/layouts/repo.sass +++ b/app/styles/app/layouts/repo.sass @@ -47,19 +47,38 @@ $dropdown-button-margin: -9px .settings-button display: block height: $dropdown-button-height - padding: 0 2.5em + padding: 0 0.7em 0 2.3em margin-top: $dropdown-button-margin 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 + width: 0.9em + height: 0.6em + margin-left: 1em + background: + size: 100% + repeat: no-repeat + @extend %icon-line-dropdown &:hover, - &:active - background-color: #f1f1f1 + &:active, + .display & + background-color: $teal + color: white + @extend %icon-line-cog-white + &:after + @extend %icon-line-dropdown-white .settings-dropdown display: none @@ -67,24 +86,22 @@ $dropdown-button-margin: -9px top: $dropdown-button-height + ($dropdown-button-margin * .8) width: 100% padding: 0 - margin: 1px 0 0 + margin: -1px 0 0 list-style: none z-index: 60 background-color: #f1f1f1 a display: block - padding: 0.5em 1em + padding: .4em 1em .5em 2.4em font-size: 14px color: $grey-light &:hover - background-color: $grey + background-color: $teal color: white .settings-menu position: relative &.display - .settings-button - background-color: #f1f1f1 .settings-dropdown display: block diff --git a/app/styles/app/main/log.sass b/app/styles/app/main/log.sass index 6e6c81eb..890dff13 100644 --- a/app/styles/app/main/log.sass +++ b/app/styles/app/main/log.sass @@ -16,10 +16,10 @@ padding: 0.1em 0.5em 0.1em 1.5em cursor: pointer background: - color: $grey-light + color: #777777 repeat: no-repeat - size: auto 10px - position: 5px 5px + size: auto 12px + position: 6px 4px border-radius: 2px color: #f1f1f1 @extend %icon-arrow-down diff --git a/app/styles/app/modules/build-header.sass b/app/styles/app/modules/build-header.sass index fca55303..25f9263d 100644 --- a/app/styles/app/modules/build-header.sass +++ b/app/styles/app/modules/build-header.sass @@ -7,22 +7,27 @@ @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) + @include colorRows($yellow, 'started', 12px, true) + @include colorRows($yellow, 'queued', 12px, true) + @include colorRows($yellow, 'booting', 12px, true) + @include colorRows($yellow, 'received', 12px, true) + @include colorRows($yellow, 'created', 12px, true) @media #{$medium-up} display: flex flex-flow: row no-wrap justify-content: space-between + a:hover, + a:active + text-decoration: underline + .build-commit, .build-tools padding-left: 2rem .build-commit + font-size: 16px @media #{$medium-up} flex: 1 1 65% padding-left: 2.5rem @@ -35,6 +40,7 @@ padding: 1rem 0 0 .build-info + font-size: 15px padding-left: 3rem @media #{$medium-up} flex: 1 1 35% @@ -56,6 +62,7 @@ margin-left: -2rem .commit-info + font-size: 15px padding-left: 1rem .commit-branch @@ -71,7 +78,7 @@ img width: 20px height: 20px - margin-right: .3em + margin-right: .5em border-radius: 50% .commit-description @@ -81,25 +88,26 @@ padding: 0 margin: 1rem 0 list-style: none + line-height: 1.7 .commit-commit, .commit-compare @extend %icon-line-commit - padding-left: 1.5em + padding-left: 1.7em background: size: auto 23px repeat: no-repeat position: -11px -1px .commit-clock @extend %icon-line-clock - padding-left: 1.5em + padding-left: 1.7em background: size: auto 22px repeat: no-repeat position: 0 0 .commit-calendar @extend %icon-line-calendar - padding-left: 1.5em + padding-left: 1.7em background: size: auto 20px repeat: no-repeat diff --git a/app/styles/app/modules/buttons.sass b/app/styles/app/modules/buttons.sass index d50fd9ad..5cb5ac5c 100644 --- a/app/styles/app/modules/buttons.sass +++ b/app/styles/app/modules/buttons.sass @@ -157,7 +157,7 @@ $button-border-color: #d4d4d4 border: solid 1px #E4E6E6 border-radius: 50% &:hover - background-color: $teal + border-color: $teal float: left margin-right: 1rem @@ -168,10 +168,13 @@ $button-border-color: #d4d4d4 .button-circle-codeclimate @extend %circle-button + @extend %icon-line-codeclimate background: - image: inline-image('icons/code-climate-icon.svg') repeat: no-repeat - size: auto 100% + size: auto 10px + position: 4px 8px + &:hover + @extend %icon-line-codeclimate-teal .button-circle-cancel @extend %circle-button @@ -180,7 +183,7 @@ $button-border-color: #d4d4d4 repeat: no-repeat size: auto 100% &:hover - @extend %icon-line-cross-white + @extend %icon-line-cross-teal .button-circle-trigger @extend %circle-button @@ -190,7 +193,7 @@ $button-border-color: #d4d4d4 repeat: no-repeat size: 24px 24px &:hover - @extend %icon-line-trigger-white + @extend %icon-line-trigger-teal %log-button @@ -208,16 +211,38 @@ $button-border-color: #d4d4d4 repeat: no-repeat size: auto 14px position: 7px 6px - &:hover, - &:active - background-color: hotpink // log buttons .remove-log-button @extend %log-button @extend %icon-remove-log + &:hover, + &:active + background-color: #d94341 .download-log-button @extend %log-button @extend %icon-download-log + &:hover, + &:active + background-color: #999a98 + +// popup buttons +@mixin buttons($bg-color) + display: inline-block + padding: .3em 1em + font-size: 20px + color: white + font-weight: $font-weight-light + border-radius: 2px + background-color: $bg-color + &:hover, + &:active + background-color: lighten($bg-color, 10) + +.button-delete + @include buttons($red) + +.button-cancel + @include buttons(#A0A8A8) diff --git a/app/styles/app/modules/dropdown.sass b/app/styles/app/modules/dropdown.sass index ae8eef28..ff683fe3 100644 --- a/app/styles/app/modules/dropdown.sass +++ b/app/styles/app/modules/dropdown.sass @@ -1,6 +1,3 @@ -/* - * Dashboard Activation Dropdown - */ $dropdown-border: #C3D9DB @@ -35,10 +32,6 @@ $dropdown-border: #C3D9DB border-left: solid 2px $dropdown-border; transform: rotate(45deg); - -/* - * Dashboard Organizations Dropdown - */ .filter position: relative img diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass index 3c755f8a..b5ab43eb 100644 --- a/app/styles/app/modules/icons.sass +++ b/app/styles/app/modules/icons.sass @@ -9,63 +9,12 @@ height: 1em @extend %icon - -.icon-cal, -.icon--cal, -.icon-calendar - background-image: inline-image('svg/finished-icon.svg') - -.icon-clock, -.icon--clock - background-image: inline-image('svg/duration-icon.svg') - -.icon-clock-dark, -.icon--clock-dark - background-image: inline-image('svg/duration-icon-dark2.svg') - -.icon-github, -.icon--github - background-image: inline-image('svg/commit-icon.svg') - -.icon-hash, -.icon--hash - background-image: inline-image('svg/build-number-icon.svg') - -.icon-hash-dark, -.icon--hash-dark - background-image: inline-image('svg/build-number-icon-dark2.svg') - .icon-cog, .icon--cog background-image: inline-image('svg/settings_gray.svg') &:hover background-image: inline-image('svg/settings_teal.svg') -.icon-cog-light - background-image: inline-image('icons/settings.svg') - -%icon-star-grey - background-image: inline-image('svg/icon-star-grey.svg') -%icon-star-yellow - background-image: inline-image('svg/icon-star-yellow.svg') -%icon-star-red - background-image: inline-image('svg/icon-star-red.svg') -%icon-star-green - background-image: inline-image('svg/icon-star-green.svg') - -.icon.push - background-image: inline-image('svg/push-icon.svg') - -.icon.pull_request - background-image: inline-image('svg/pull-request-icon.svg') - -.icon--grey.push, -.icon-push - background-image: inline-image('svg/icon-request-push.svg') -.icon--grey.pull_request, -.icon-pull_request - background-image: inline-image('svg/icon-request-pull.svg') - .icon-api, .icon.api background-image: inline-image('svg/api-white.svg') @@ -75,51 +24,16 @@ .icon--cancel background-image: inline-image('svg/off.svg') -.icon-sync, -.icon--trigger +.icon-sync background-image: inline-image('icons/sync-account-icon.svg') %icon-download-log - background-image: inline-image('icons/download-log-icon.svg') + background-image: url('data:image/svg+xml;utf8,') %icon-remove-log - background-image: inline-image('icons/remove-log-icon.svg') + background-image: url('data:image/svg+xml;utf8,') %icon-arrow-down - background-image: inline-image('icons/end-of-log-icon.svg') + background-image: url('data:image/svg+xml;utf8,') -.icon--env - background-image: inline-image('svg/icon-environment-dark2.svg') -.icon--job.failed, -.icon--job.rejected - background-image: inline-image('svg/icon-job-failed.svg') -.icon--job.passed, -.icon--job.accepted - background-image: inline-image('svg/icon-job-passed.svg') -.icon--job.errored - background-image: inline-image('svg/icon-job-errored.svg') -.icon--job.started, -.icon--job.queued, -.icon--job.booting, -.icon--job.received, -.icon--job.created, - background-image: inline-image('svg/icon-job-started.svg') -.icon--job.canceled - background-image: inline-image('svg/icon-job-canceled.svg') - -.icon--lang - background-image: inline-image('svg/icon-language-dark2.svg') -.icon--linux, -.icon.linux - background-image: inline-image('svg/icon-linux-dark2.svg') -.icon--mac, -.icon.mac -.icon.osx - background-image: inline-image('svg/icon-mac-dark2.svg') -.icon--eye - background-image: inline-image('svg/icon-showmore.svg') -.icon--question - background-image: inline-image('svg/icon-help.svg') - &:hover - background-image: inline-image('svg/icon-help-hover.svg') .icon-tab-arrow background-image: inline-image('svg/icon-tab-arrow.svg') @@ -179,17 +93,37 @@ @extend %icon @extend %icon-line-commit +%icon-line-cog + background-image: url('data:image/svg+xml;utf8,') +%icon-line-cog-white + background-image: url('data:image/svg+xml;utf8,') + +%icon-line-dropdown + background-image: url('data:image/svg+xml;utf8,') +%icon-line-dropdown-white + background-image: url('data:image/svg+xml;utf8,') + +%icon-line-codeclimate + background-image: url('data:image/svg+xml;utf8,') +%icon-line-codeclimate-teal + background-image: url('data:image/svg+xml;utf8,') + %icon-line-cross background-image: url('data:image/svg+xml;utf8,') %icon-line-cross-white background-image: url('data:image/svg+xml;utf8,') +%icon-line-cross-teal + background-image: url('data:image/svg+xml;utf8,') + %icon-line-trigger background-image: url('data:image/svg+xml;utf8,') %icon-line-trigger-white background-image: url('data:image/svg+xml;utf8,') +%icon-line-trigger-teal + background-image: url('data:image/svg+xml;utf8,') %icon-github-circle - background-image: inline-image('icons/github.svg') + background-image: url('data:image/svg+xml;utf8,') .icon--plus &:after diff --git a/app/styles/app/pages/home-pro.sass b/app/styles/app/pages/home-pro.sass index a40ae150..cda89f2f 100644 --- a/app/styles/app/pages/home-pro.sass +++ b/app/styles/app/pages/home-pro.sass @@ -36,95 +36,6 @@ $grey: #858585 max-width: 1024px padding: 0 $column-gutter/2 - %h1 - margin: 0 - font-size: 54px - font-weight: 300 - line-height: 1.2 - - .h1--grey - @extend %h1 - @include linkStyle - color: $grey !important - a - color: $grey - - .h1--teal - @extend %h1 - font-size: 64px - color: #408692 !important - - .h1--green - @extend %h1 - color: $green !important - - .h1--red - @extend %h1 - color: $red !important - - %h2 - margin: 0 0 .5em - font-size: 36px - font-weight: 300 - line-height: 1.3 - - .h2--grey - @extend %h2 - color: $grey - - .h2--green - @extend %h2 - color: $green - - .h2--red - @extend %h2 - color: $red - - .h2--teal - @extend %h2 - color: $teal - - %h3 - margin: .5em 0 - font-size: 22px - font-weight: 300 - - .h3 - @extend %h3 - - .h3--plans - @extend %h3 - font-size: 28px - text-align: center - line-height: 1.3 - - .h3--teal - @extend %h3 - color: $teal - - .h3--red - @extend %h3 - color: $red - - .h3--green - @extend %h3 - color: $green - - .h3--yellow - @extend %h3 - color: $yellow - - .text-big - @include linkStyle - font-size: 20px - font-weight: 300 - line-height: 1.55 - - .text-small - @include linkStyle - margin: 0 0 2.5em - font-size: 16px - .text-logo @extend .text-small line-height: 1.8 @@ -289,3 +200,93 @@ $grey: #858585 height: 3.5em width: 3.5em margin: 0 auto .5em + + +%h1 + margin: 0 + font-size: 54px + font-weight: 300 + line-height: 1.2 + +.h1--grey + @extend %h1 + @include linkStyle + color: $grey !important + a + color: $grey + +.h1--teal + @extend %h1 + font-size: 64px + color: #408692 !important + +.h1--green + @extend %h1 + color: $green !important + +.h1--red + @extend %h1 + color: $red !important + +%h2 + margin: 0 0 .5em + font-size: 36px + font-weight: 300 + line-height: 1.3 + +.h2--grey + @extend %h2 + color: $grey + +.h2--green + @extend %h2 + color: $green + +.h2--red + @extend %h2 + color: $red + +.h2--teal + @extend %h2 + color: $teal + +%h3 + margin: .5em 0 + font-size: 22px + font-weight: 300 + +.h3 + @extend %h3 + +.h3--plans + @extend %h3 + font-size: 28px + text-align: center + line-height: 1.3 + +.h3--teal + @extend %h3 + color: $teal + +.h3--red + @extend %h3 + color: $red + +.h3--green + @extend %h3 + color: $green + +.h3--yellow + @extend %h3 + color: $yellow + +.text-big + @include linkStyle + font-size: 20px + font-weight: 300 + line-height: 1.55 + +.text-small + @include linkStyle + margin: 0 0 2.5em + font-size: 16px diff --git a/app/styles/app/popup.sass b/app/styles/app/popup.sass index 466fc04c..d00a8ff8 100644 --- a/app/styles/app/popup.sass +++ b/app/styles/app/popup.sass @@ -1,15 +1,14 @@ %popup - width: 29em height: auto position: fixed top: 50% left: 50% transform: translate(-50%, -50%) - padding: 2.5em 2em + padding: 2.9em 2em color: #565656 z-index: 99 background-color: $white - border-radius: 4px + border-radius: 2px .help display: inline-block @@ -28,9 +27,8 @@ .popup @extend %popup display: none - width: 400px background-color: #fff - border: solid 10px $cream-dark + border: solid 10px #f1f1f1 &:before content: "" @@ -38,22 +36,20 @@ .close position: absolute display: block - right: 10px - top: 10px - width: 16px - height: 16px - @extend .icon - @extend .icon--dismiss-grey + right: 5px + top: 8px + width: 30px + height: 30px + text-indent: 999% + overflow: hidden + white-space: nowrap + @extend %icon-line-cross h4 margin-top: 0 font-size: 18px font-weight: bold color: $color-text - p - font-size: $font-size-sm - word-wrap: normal - pre background-color: $color-bg-pre margin: 0 @@ -61,6 +57,15 @@ border-radius: 4px overflow-x: scroll + .popup-title + margin-bottom: 0 + .popup-text + margin-top: 0 + text-align: center + .buttons + margin-top: 3rem + text-align: center + .status-images width: 100% @media #{$medium-up} @@ -83,32 +88,13 @@ p:last-child margin-top: 10px -#regenerate-key, -#remove-log-popup - .cancel - text-decoration: underline - p - text-align: center - .or - display: inline-block - margin: 20px 10px 0 10px - p:last-of-type - margin-bottom: 5px - a.button - font-size: 13px - strong - color: $red - -.status-images, #regenerate-key +.status-images input border: 1px solid $color-border-light width: 505px padding: 4px border-radius: 3px -#regenerate-key, #regeneration-success - width: 400px - #code-climate width: 100% ol diff --git a/app/templates/components/branch-row.hbs b/app/templates/components/branch-row.hbs index 1138fa64..6394768d 100644 --- a/app/templates/components/branch-row.hbs +++ b/app/templates/components/branch-row.hbs @@ -38,11 +38,11 @@
{{#if build.last_build}} {{#link-to "build" build.last_build.id}} - {{request-icon build=build}} + {{request-icon event=build.last_build.event_type state=build.last_build.state}} #{{build.last_build.number}} {{build.last_build.state}} {{/link-to}} {{else}} - {{request-icon build=build}} - + {{request-icon event=build.last_build.eventType state=build.last_build.state}} - {{/if}}
diff --git a/app/templates/components/build-header.hbs b/app/templates/components/build-header.hbs index 12db6e64..e865fa5a 100644 --- a/app/templates/components/build-header.hbs +++ b/app/templates/components/build-header.hbs @@ -49,10 +49,10 @@

{{#if isJob}} {{#link-to "job" repo item}} - {{status-icon status=item.state}} #{{item.number}} {{humanize-state item.state}}{{/link-to}} + {{request-icon event=item.build.event_type state=item.state}} #{{item.number}} {{humanize-state item.state}}{{/link-to}} {{else}} {{#link-to "build" repo item}} - {{status-icon status=item.state}} #{{item.number}} {{humanize-state item.state}}{{/link-to}} + {{request-icon event=item.event_type state=item.state}} #{{item.number}} {{humanize-state item.state}}{{/link-to}} {{/if}}