From f117c939dd27ecec8bf19f11f614999bb4466476 Mon Sep 17 00:00:00 2001 From: Lisa P Date: Mon, 23 Nov 2015 17:45:32 +0100 Subject: [PATCH 01/19] rewrite markup for buildheader fill in status icons --- app/styles/app.scss | 9 +- app/styles/app/layouts/repo.sass | 0 app/styles/app/modules/build-header.sass | 0 app/templates/build.hbs | 113 +++++++++++------------ 4 files changed, 59 insertions(+), 63 deletions(-) create mode 100644 app/styles/app/layouts/repo.sass create mode 100644 app/styles/app/modules/build-header.sass diff --git a/app/styles/app.scss b/app/styles/app.scss index c44215bc..76d94260 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -30,7 +30,7 @@ @import "app/modules/navigation"; @import "app/modules/row"; @import "app/modules/loader"; -@import "app/modules/tiles"; +// @import "app/modules/tiles"; @import "app/modules/buttons"; @import "app/modules/icons"; @import "app/modules/search"; @@ -43,21 +43,22 @@ @import "app/modules/memberlist"; @import "app/modules/forms"; @import "app/modules/notice"; +@import "app/modules/build-header"; @import "app/layout"; @import "app/layouts/dashboard"; @import "app/layouts/error"; @import "app/layouts/footer"; -@import "app/layouts/buildheader"; -@import "app/layouts/build-job"; +// @import "app/layouts/buildheader"; +// @import "app/layouts/build-job"; @import "app/layouts/sidebar"; -@import "app/layouts/build-job"; @import "app/layouts/sidebar"; @import "app/layouts/profile"; @import "app/layouts/top"; @import "app/layouts/owner"; @import "app/layouts/branches"; @import "app/layouts/broadcasts"; +@import "app/layouts/repo"; @import "app/layouts/requests"; @import "app/layouts/caches"; diff --git a/app/styles/app/layouts/repo.sass b/app/styles/app/layouts/repo.sass new file mode 100644 index 00000000..e69de29b diff --git a/app/styles/app/modules/build-header.sass b/app/styles/app/modules/build-header.sass new file mode 100644 index 00000000..e69de29b diff --git a/app/templates/build.hbs b/app/templates/build.hbs index 4e9766ca..1210c06c 100644 --- a/app/templates/build.hbs +++ b/app/templates/build.hbs @@ -1,73 +1,68 @@ {{#if loading}} {{loading-indicator}} {{else}} -
-
- - -
-
-

- {{#if build.pullRequest}} - Pull Request #{{build.pullRequestNumber}} - {{build.pullRequestTitle}} - {{else}} - {{build.commit.branch}} - {{format-message build.commit.subject repo=build.repo}} - {{/if}} -

-
+
+
+

+ {{status-icon status=build.state}} {{#if build.pullRequest}} -

{{format-message build.commit.subject repo=build.repo}}

+ Pull Request #{{build.pullRequestNumber}} + {{build.pullRequestTitle}} + {{else}} + {{build.commit.branch}} + {{format-message build.commit.subject repo=build.repo}} {{/if}} - 
{{format-message build.commit.body repo=build.repo pre=true}}
-

-
- {{#if commit.authorName}} - {{commit.authorName}} authored{{#if commit.authorIsCommitter}} and committed{{/if}} - {{/if}} - {{#unless commit.authorIsCommitter}} - {{#if commit.committerName}} - {{commit.committerName}} committed - {{/if}} - {{/unless}} + +
+

+ {{#if build.pullRequest}} + {{format-message build.commit.subject repo=build.repo}}
+ {{/if}} + {{format-message build.commit.body repo=build.repo pre=true}} +

+ +

+ {{#if commit.authorName}} + {{commit.authorName}} authored{{#if commit.authorIsCommitter}} and committed{{/if}} + {{/if}} + {{#unless commit.authorIsCommitter}} + {{#if commit.committerName}} + {{commit.committerName}} committed + {{/if}} + {{/unless}} +

-
-
    -
  • {{#link-to "build" repo build}} - - {{build.number}} {{humanize-state build.state}}{{/link-to}} -
    • -
  • - - - Commit {{format-sha commit.sha}} - -
    • -
  • - {{#if build.pullRequest}} - #{{build.pullRequestNumber}}: {{build.pullRequestTitle}} - {{else}} - {{#if build.commit.compareUrl}} - - - Compare {{short-compare-shas build.commit.compareUrl}} - {{/if}} - {{/if}} -
    • -
  • - - {{#if build.isFinished}}ran{{else}}running{{/if}} for {{format-duration build.duration}} -
    • -
  • - - {{format-time build.finishedAt}} -
    • +
    +

    + {{#link-to "build" repo build}} + {{status-icon status=build.state}} #{{build.number}} {{humanize-state build.state}}{{/link-to}} +

    +
      +
    • {{#if build.isFinished}}ran{{else}}running{{/if}} for {{format-duration build.duration}}
      • + {{!--
    • Elapsed time
      • --}} +
    • {{format-time build.finishedAt}}
    +
    +
    {{repo-actions build=build repo=build.repo user=auth.currentUser}}
From 613e1dac802202cc5f856451325e46905e429832 Mon Sep 17 00:00:00 2001 From: Lisa P Date: Tue, 24 Nov 2015 12:55:02 +0100 Subject: [PATCH 02/19] make component for build header --- app/components/build-header.coffee | 19 +++++++ app/controllers/build.coffee | 8 --- app/templates/build.hbs | 65 +---------------------- app/templates/components/build-header.hbs | 62 +++++++++++++++++++++ 4 files changed, 82 insertions(+), 72 deletions(-) create mode 100644 app/components/build-header.coffee create mode 100644 app/templates/components/build-header.hbs diff --git a/app/components/build-header.coffee b/app/components/build-header.coffee new file mode 100644 index 00000000..8f85adb8 --- /dev/null +++ b/app/components/build-header.coffee @@ -0,0 +1,19 @@ +`import Ember from 'ember'` +`import { gravatarImage } from 'travis/utils/urls'` +`import GithubUrlPropertievs from 'travis/mixins/github-url-properties'` + +BuildHeaderComponent = Ember.Component.extend + + tagName: 'section' + classNames: ['build-header'] + classNameBindings: ['item.state'] + + urlCommitterGravatarImage: (-> + gravatarImage(@get('commit.committerEmail'), 40) + ).property('commit.committerEmail') + + urlAuthorGravatarImage: (-> + gravatarImage(@get('commit.authorEmail'), 40) + ).property('commit.authorEmail') + +`export default BuildHeaderComponent` diff --git a/app/controllers/build.coffee b/app/controllers/build.coffee index b25d61b1..6470f9a0 100644 --- a/app/controllers/build.coffee +++ b/app/controllers/build.coffee @@ -21,14 +21,6 @@ Controller = Ember.Controller.extend GithubUrlPropertievs, @get('build.isLoading') ).property('build.isLoading') - urlCommitterGravatarImage: (-> - gravatarImage(@get('commit.committerEmail'), 40) - ).property('commit.committerEmail') - - urlAuthorGravatarImage: (-> - gravatarImage(@get('commit.authorEmail'), 40) - ).property('commit.authorEmail') - buildStateDidChange: (-> if @get('sendFaviconStateChanges') @send('faviconStateDidChange', @get('build.state')) diff --git a/app/templates/build.hbs b/app/templates/build.hbs index 1210c06c..41e53594 100644 --- a/app/templates/build.hbs +++ b/app/templates/build.hbs @@ -2,70 +2,7 @@ {{loading-indicator}} {{else}} -
-
-

- {{status-icon status=build.state}} - {{#if build.pullRequest}} - Pull Request #{{build.pullRequestNumber}} - {{build.pullRequestTitle}} - {{else}} - {{build.commit.branch}} - {{format-message build.commit.subject repo=build.repo}} - {{/if}} -

-
-

- {{#if build.pullRequest}} - {{format-message build.commit.subject repo=build.repo}}
- {{/if}} - {{format-message build.commit.body repo=build.repo pre=true}} -

- -

- {{#if commit.authorName}} - {{commit.authorName}} authored{{#if commit.authorIsCommitter}} and committed{{/if}} - {{/if}} - {{#unless commit.authorIsCommitter}} - {{#if commit.committerName}} - {{commit.committerName}} committed - {{/if}} - {{/unless}} -

-
-
- -
-

- {{#link-to "build" repo build}} - {{status-icon status=build.state}} #{{build.number}} {{humanize-state build.state}}{{/link-to}} -

-
    -
  • {{#if build.isFinished}}ran{{else}}running{{/if}} for {{format-duration build.duration}}
    • - {{!--
  • Elapsed time
    • --}} -
  • {{format-time build.finishedAt}}
    • -
-
- -
- {{repo-actions build=build repo=build.repo user=auth.currentUser}} -
-
+ {{build-header item=build user=auth.currentUser commit=commit}} {{#unless build.isMatrix}} {{view 'annotations' annotations=build.jobs.firstObject.annotations}} diff --git a/app/templates/components/build-header.hbs b/app/templates/components/build-header.hbs new file mode 100644 index 00000000..05133880 --- /dev/null +++ b/app/templates/components/build-header.hbs @@ -0,0 +1,62 @@ +
+

+ {{status-icon status=item.state}} + {{#if item.pullRequest}} + Pull Request #{{item.pullRequestNumber}} + {{item.pullRequestTitle}} + {{else}} + {{item.commit.branch}} + {{format-message item.commit.subject repo=item.repo}} + {{/if}} +

+
+

+ {{#if item.pullRequest}} + {{format-message item.commit.subject repo=item.repo}}
+ {{/if}} + {{format-message item.commit.body repo=item.repo pre=true}} +

+ +

+ {{#if commit.authorName}} + {{commit.authorName}} authored{{#if commit.authorIsCommitter}} and committed{{/if}} + {{/if}} + {{#unless commit.authorIsCommitter}} + {{#if commit.committerName}} + {{commit.committerName}} committed + {{/if}} + {{/unless}} +

+
+
+ +
+

+ {{#link-to "build" repo item}} + {{status-icon status=item.state}} #{{item.number}} {{humanize-state item.state}}{{/link-to}} +

+
    +
  • {{#if item.isFinished}}ran{{else}}running{{/if}} for {{format-duration item.duration}}
    • + {{!--
  • Elapsed time
    • --}} +
  • {{format-time item.finishedAt}}
    • +
+
+ +
+ {{repo-actions build=item repo=item.repo user=user}} +
From 0176f9fb0cf73d38660a462caf5b5fafe1eb1fb7 Mon Sep 17 00:00:00 2001 From: Lisa P Date: Tue, 24 Nov 2015 13:12:44 +0100 Subject: [PATCH 03/19] remove unused color variables remove old icons --- app/styles/app/_mixins/colors.sass | 139 +----- app/styles/app/_mixins/fonts.sass | 2 + app/styles/app/_mixins/mixins.sass | 3 + app/styles/app/modules/build-header.sass | 3 + public/images/dashboard/branch.svg | 11 - public/images/dashboard/burger-hover.svg | 12 - public/images/dashboard/burger.svg | 12 - public/images/dashboard/cal.svg | 22 - public/images/dashboard/footer-logo.svg | 491 ------------------- public/images/dashboard/github.svg | 13 - public/images/dashboard/health-stats.svg | 18 - public/images/dashboard/private-icon.svg | 12 - public/images/dashboard/search-icon.svg | 13 - public/images/dashboard/star-off.svg | 8 - public/images/dashboard/star-on.svg | 8 - public/images/dashboard/status-cancelled.svg | 10 - public/images/dashboard/status-errored.svg | 10 - public/images/dashboard/status-failed.svg | 9 - public/images/dashboard/status-passed.svg | 11 - public/images/dashboard/status-pending.svg | 11 - public/images/dashboard/time.svg | 14 - 21 files changed, 26 insertions(+), 806 deletions(-) delete mode 100644 public/images/dashboard/branch.svg delete mode 100644 public/images/dashboard/burger-hover.svg delete mode 100644 public/images/dashboard/burger.svg delete mode 100644 public/images/dashboard/cal.svg delete mode 100644 public/images/dashboard/footer-logo.svg delete mode 100644 public/images/dashboard/github.svg delete mode 100644 public/images/dashboard/health-stats.svg delete mode 100644 public/images/dashboard/private-icon.svg delete mode 100644 public/images/dashboard/search-icon.svg delete mode 100644 public/images/dashboard/star-off.svg delete mode 100644 public/images/dashboard/star-on.svg delete mode 100644 public/images/dashboard/status-cancelled.svg delete mode 100644 public/images/dashboard/status-errored.svg delete mode 100644 public/images/dashboard/status-failed.svg delete mode 100644 public/images/dashboard/status-passed.svg delete mode 100644 public/images/dashboard/status-pending.svg delete mode 100644 public/images/dashboard/time.svg diff --git a/app/styles/app/_mixins/colors.sass b/app/styles/app/_mixins/colors.sass index eb27c7b4..ad84d218 100644 --- a/app/styles/app/_mixins/colors.sass +++ b/app/styles/app/_mixins/colors.sass @@ -1,128 +1,25 @@ -$brighten-1: rgba(255, 255, 255, 0.05) -$brighten-2: rgba(255, 255, 255, 0.15) -$black: #000 +$teal: #40a3ad +$green: #44a662 +$yellow: #e5da3f +$red: #d94341 +$grey: #666 + +$teal-light: $teal +$teal-dark: $teal +$green-dark: $green +$red-dark: $red $white: #fff +$color-text: $grey -$green: #038035 -$green-lighter: #368c2a -$green-light-1: #dcffdc -$green-light-3: #fafffa - -$red: #cc0000 -$red-lighter: #cc3d3d -$red-medium-1: #c7371a -$red-light-1: #ffdcdc -$red-light-3: #fffafa - -$yellow: #e7d100 -$yellow-lighter: #e7d100 -$yellow-light-1: #ffffe1 -$yellow-light-2: #fffcf4 - -$gray-dark-1: #333 -$gray-dark-2: #444 -$gray-dark-3: #666 -$gray-dark-4: #777 -$gray-medium-1: #999 -$gray-medium-2: #aaa -$gray-medium-3: #c4cbcc -$gray-light-1: #ddd -$gray-light-2: #efefef -$gray-light-3: #f2f2eb -$gray-light-4: #fdfdfd - -$green-light: #73c78d -$green-dark: #3FA75F -$red-light: #D7625F -$red-dark: #DB423C -$teal-light: #63A4A3 -$teal-dark: #5BA5A4 - -$slate-blue-1: #e1e2e6 -$slate-blue-2: #e5e8ee -$slate-blue-3: #f2f4f9 -$slate-blue-4: #fafbfc -$slate-yellow-1: #7f7f75 -$slate-yellow-2: #bab9a7 - - -$color-text: $gray-dark-3 -$color-text-light: $gray-medium-1 -$color-text-lighter: $gray-medium-2 $color-text-log: #F1F1F1 - -$color-link: $gray-dark-3 -$color-link-highlight: $red-medium-1 -$color-link-sponsor: #575c7c -$color-link-top: $gray-medium-3 -$color-link-top-highlight: #ADC7D0 -$color-link-disabled: $gray-medium-1 - -$color-bg-dark: $slate-blue-2 -$color-bg-light: $gray-light-1 -$color-bg-input: $white -$color-bg-link-top: $black -$color-bg-dropdown: #40454f -$color-bg-dropdown-highlight: #30343b -$color-bg-pre: $gray-light-2 -$color-bg-tab: $gray-light-3 -$color-bg-tab-hover: $white -$color-bg-tab-active: $white -$color-bg-log: #222222 -$color-bg-log-fold: $gray-dark-1 -$color-bg-log-hover: $gray-dark-2 -$color-bg-log-highlight: $gray-dark-3 -$color-bg-log-fold-highlight: $gray-dark-4 -$color-bg-slider: $slate-blue-3 -$color-bg-left: #fbfbfa -$color-bg-list-odd: $white -$color-bg-list-even: $gray-light-3 -$color-bg-hooks-odd: $slate-blue-4 -$color-bg-hooks-even: $white -$color-bg-menu: $gray-light-4 -$color-bg-menu-hover: $gray-light-3 -$color-bg-tools-pane: $slate-blue-3 -$color-bg-right: $slate-blue-3 -$color-bg-sidebar-box: $white - -$color-border-normal: $gray-medium-3 -$color-border-light: $gray-light-1 -$color-border-log: $gray-light-1 -$color-border-slider-normal: $slate-blue-2 -$color-border-slider-light: $gray-medium-1 -$color-border-slider-hover: $slate-blue-1 - -$color-text-status-passed: $green -$color-bg-status-passed: $green-lighter -$color-text-status-failed: $red -$color-bg-status-failed: $red-lighter -$color-text-status-pending: $color-link -$color-bg-status-pending: $yellow-lighter -$color-text-status-gray: $color-link -$color-bg-status-gray: $gray-medium-2 - -$color-bg-status-waiting: $green-lighter -$color-bg-status-errored: $red-lighter -$color-bg-status-stopped: $gray-medium-1 - -$color-bg-job: $yellow-light-2 -$color-bg-job-highlight: $yellow-light-1 -$color-bg-job-passed: $green-light-3 -$color-bg-job-passed-highlight: $green-light-1 -$color-bg-job-failed: $red-light-3 -$color-bg-job-failed-highlight: $red-light-1 -$color-bg-job-gray: $gray-light-4 -$color-bg-job-gray-highlight: $gray-light-3 - -$color-bg-list-info: $yellow-light-2 -$color-text-list-info: $slate-yellow-1 -$color-shadow-list-info: $slate-yellow-2 - -$color-bg-flash-success: #7ea35a -$color-bg-flash-notice: #a57829 -$color-bg-flash-error: #a53230 -$color-bg-flash-broadcast: #55777f +$color-bg-log-hover: #444 +$color-bg-log-highlight: $grey +$color-bg-log-fold: #333 +$color-bg-log-fold-highlight: #777 +$color-bg-pre: #efefef +$color-border-light: #ddd +$color-link: $grey $ansi-black: #4E4E4E $ansi-black-bold: #7C7C7C diff --git a/app/styles/app/_mixins/fonts.sass b/app/styles/app/_mixins/fonts.sass index ab3fc7c2..bab1b795 100644 --- a/app/styles/app/_mixins/fonts.sass +++ b/app/styles/app/_mixins/fonts.sass @@ -10,6 +10,8 @@ $font-size-tiniest: 10px $line-height: 22px $line-height-log: 19px +$font-weight-light: 300 $font-weight-normal: 400 +$font-weight-bold: 600 $top-height: 55px \ No newline at end of file diff --git a/app/styles/app/_mixins/mixins.sass b/app/styles/app/_mixins/mixins.sass index 5280c306..21481fdf 100644 --- a/app/styles/app/_mixins/mixins.sass +++ b/app/styles/app/_mixins/mixins.sass @@ -57,6 +57,9 @@ // @todo simplyfiy coloring mixins +@mixin colorRows($color, $status) + + @mixin colorStatusIcons($color, $status) .status-icon.#{$status} svg g > * diff --git a/app/styles/app/modules/build-header.sass b/app/styles/app/modules/build-header.sass index e69de29b..d2cfa72e 100644 --- a/app/styles/app/modules/build-header.sass +++ b/app/styles/app/modules/build-header.sass @@ -0,0 +1,3 @@ + +.build-header + clear: both diff --git a/public/images/dashboard/branch.svg b/public/images/dashboard/branch.svg deleted file mode 100644 index 2d2beace..00000000 --- a/public/images/dashboard/branch.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - diff --git a/public/images/dashboard/burger-hover.svg b/public/images/dashboard/burger-hover.svg deleted file mode 100644 index 183dacc8..00000000 --- a/public/images/dashboard/burger-hover.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - diff --git a/public/images/dashboard/burger.svg b/public/images/dashboard/burger.svg deleted file mode 100644 index 4a8c319e..00000000 --- a/public/images/dashboard/burger.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - diff --git a/public/images/dashboard/cal.svg b/public/images/dashboard/cal.svg deleted file mode 100644 index 30f0454d..00000000 --- a/public/images/dashboard/cal.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - diff --git a/public/images/dashboard/footer-logo.svg b/public/images/dashboard/footer-logo.svg deleted file mode 100644 index 22249b81..00000000 --- a/public/images/dashboard/footer-logo.svg +++ /dev/null @@ -1,491 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/images/dashboard/github.svg b/public/images/dashboard/github.svg deleted file mode 100644 index 35b96d33..00000000 --- a/public/images/dashboard/github.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - diff --git a/public/images/dashboard/health-stats.svg b/public/images/dashboard/health-stats.svg deleted file mode 100644 index a45aecd1..00000000 --- a/public/images/dashboard/health-stats.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/public/images/dashboard/private-icon.svg b/public/images/dashboard/private-icon.svg deleted file mode 100644 index b45505e1..00000000 --- a/public/images/dashboard/private-icon.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - diff --git a/public/images/dashboard/search-icon.svg b/public/images/dashboard/search-icon.svg deleted file mode 100644 index c4dd1104..00000000 --- a/public/images/dashboard/search-icon.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - diff --git a/public/images/dashboard/star-off.svg b/public/images/dashboard/star-off.svg deleted file mode 100644 index c4254ca1..00000000 --- a/public/images/dashboard/star-off.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - diff --git a/public/images/dashboard/star-on.svg b/public/images/dashboard/star-on.svg deleted file mode 100644 index c4821b5b..00000000 --- a/public/images/dashboard/star-on.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - diff --git a/public/images/dashboard/status-cancelled.svg b/public/images/dashboard/status-cancelled.svg deleted file mode 100644 index 54c1aa35..00000000 --- a/public/images/dashboard/status-cancelled.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - diff --git a/public/images/dashboard/status-errored.svg b/public/images/dashboard/status-errored.svg deleted file mode 100644 index 90aada76..00000000 --- a/public/images/dashboard/status-errored.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - diff --git a/public/images/dashboard/status-failed.svg b/public/images/dashboard/status-failed.svg deleted file mode 100644 index dbda4c98..00000000 --- a/public/images/dashboard/status-failed.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - diff --git a/public/images/dashboard/status-passed.svg b/public/images/dashboard/status-passed.svg deleted file mode 100644 index 4d07dfe3..00000000 --- a/public/images/dashboard/status-passed.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - diff --git a/public/images/dashboard/status-pending.svg b/public/images/dashboard/status-pending.svg deleted file mode 100644 index 388d1801..00000000 --- a/public/images/dashboard/status-pending.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - diff --git a/public/images/dashboard/time.svg b/public/images/dashboard/time.svg deleted file mode 100644 index ef5f24fe..00000000 --- a/public/images/dashboard/time.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - From 1ba9548ad0ad09d8a6da28ee489eb161c3ac64c8 Mon Sep 17 00:00:00 2001 From: Lisa P Date: Tue, 24 Nov 2015 14:56:17 +0100 Subject: [PATCH 04/19] first iteration build header styles 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 --- app/components/build-header.coffee | 4 + app/components/repo-show-tabs.coffee | 5 + app/components/repo-show-tools.coffee | 4 +- app/controllers/repo.coffee | 2 + app/styles/app/_mixins/colors.sass | 4 +- app/styles/app/_mixins/mixins.sass | 15 +- app/styles/app/base.sass | 5 + app/styles/app/layouts/repo.sass | 41 +++++ app/styles/app/layouts/sidebar.sass | 7 +- app/styles/app/misc.sass | 6 +- app/styles/app/modules/build-header.sass | 106 +++++++++++- app/styles/app/modules/buttons.sass | 50 +++++- app/styles/app/modules/icons.sass | 52 +++--- app/styles/app/modules/row.sass | 18 +- app/styles/app/modules/tabs.sass | 105 ++++-------- app/templates/components/build-header.hbs | 20 ++- .../components/build-repo-actions.hbs | 8 +- app/templates/components/job-repo-actions.hbs | 8 +- app/templates/components/repo-actions.hbs | 5 +- app/templates/components/repo-show-tabs.hbs | 159 +++++++++--------- app/templates/components/repo-show-tools.hbs | 31 ++-- app/templates/job.hbs | 61 +------ app/templates/repo.hbs | 68 ++++---- public/images/line-icons/icon-cal.svg | 13 +- public/images/line-icons/icon-clock.svg | 13 +- public/images/line-icons/icon-commit.svg | 53 +++--- public/images/line-icons/icon-failed.svg | 12 +- public/images/line-icons/icon-trigger.svg | 17 +- 28 files changed, 520 insertions(+), 372 deletions(-) diff --git a/app/components/build-header.coffee b/app/components/build-header.coffee index 8f85adb8..61c4a7cb 100644 --- a/app/components/build-header.coffee +++ b/app/components/build-header.coffee @@ -16,4 +16,8 @@ BuildHeaderComponent = Ember.Component.extend gravatarImage(@get('commit.authorEmail'), 40) ).property('commit.authorEmail') + isJob: (-> + if @get('item.build') then true else false + ).property('item') + `export default BuildHeaderComponent` diff --git a/app/components/repo-show-tabs.coffee b/app/components/repo-show-tabs.coffee index aa15b348..8bbf8e46 100644 --- a/app/components/repo-show-tabs.coffee +++ b/app/components/repo-show-tabs.coffee @@ -1,6 +1,11 @@ `import Ember from 'ember'` RepoShowTabsComponent = Ember.Component.extend + + tagName: 'nav' + classNames: ['tabnav'] + ariaRole: 'tablist' + # hrm. how to parametrize bind-attr? classCurrent: (-> 'active' if @get('tab') == 'current' diff --git a/app/components/repo-show-tools.coffee b/app/components/repo-show-tools.coffee index c5101af8..0fd8f4bb 100644 --- a/app/components/repo-show-tools.coffee +++ b/app/components/repo-show-tools.coffee @@ -4,6 +4,8 @@ RepoShowToolsComponent = Ember.Component.extend popup: Ember.inject.service() + classNames: ['dropdown', 'dropdown--classic'] + click: (event) -> if $(event.target).is('a') && $(event.target).parents('.dropdown-menu').length @closeMenu() @@ -14,7 +16,7 @@ RepoShowToolsComponent = Ember.Component.extend actions: menu: -> @get('popup').close() - $('#tools .menu').toggleClass('display') + $('.menu.display').toggleClass('display') return false hasPermission: (-> diff --git a/app/controllers/repo.coffee b/app/controllers/repo.coffee index 6ae60aa3..4c4be4cd 100644 --- a/app/controllers/repo.coffee +++ b/app/controllers/repo.coffee @@ -5,6 +5,8 @@ Controller = Ember.Controller.extend needs: ['repos', 'currentUser', 'build', 'job'] currentUserBinding: 'controllers.currentUser.model' + classNames: ['repo'] + build: Ember.computed.alias('controllers.build.build') job: Ember.computed.alias('controllers.job.job') diff --git a/app/styles/app/_mixins/colors.sass b/app/styles/app/_mixins/colors.sass index ad84d218..74987765 100644 --- a/app/styles/app/_mixins/colors.sass +++ b/app/styles/app/_mixins/colors.sass @@ -5,6 +5,8 @@ $yellow: #e5da3f $red: #d94341 $grey: #666 +$grey-light: #f1f1f1 + $teal-light: $teal $teal-dark: $teal $green-dark: $green @@ -12,7 +14,7 @@ $red-dark: $red $white: #fff $color-text: $grey -$color-text-log: #F1F1F1 +$color-text-log: $grey-light $color-bg-log-hover: #444 $color-bg-log-highlight: $grey $color-bg-log-fold: #333 diff --git a/app/styles/app/_mixins/mixins.sass b/app/styles/app/_mixins/mixins.sass index 21481fdf..48374955 100644 --- a/app/styles/app/_mixins/mixins.sass +++ b/app/styles/app/_mixins/mixins.sass @@ -57,9 +57,6 @@ // @todo simplyfiy coloring mixins -@mixin colorRows($color, $status) - - @mixin colorStatusIcons($color, $status) .status-icon.#{$status} svg g > * @@ -79,9 +76,9 @@ color: $color @include colorStatusIcons($color, $status) -@mixin statusColors($color, $status, $color2: $color) +@mixin statusColors($color, $status, $width, $color2: $color) &.#{$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-request a, .row-color a @@ -100,3 +97,11 @@ .build-status color: $color @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) diff --git a/app/styles/app/base.sass b/app/styles/app/base.sass index eeb1c84b..c6107005 100644 --- a/app/styles/app/base.sass +++ b/app/styles/app/base.sass @@ -1,2 +1,7 @@ + +html, +body + line-height: 1.45 !important + strong font-weight: 400 diff --git a/app/styles/app/layouts/repo.sass b/app/styles/app/layouts/repo.sass index e69de29b..48e7fe2a 100644 --- a/app/styles/app/layouts/repo.sass +++ b/app/styles/app/layouts/repo.sass @@ -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 diff --git a/app/styles/app/layouts/sidebar.sass b/app/styles/app/layouts/sidebar.sass index 1e133d45..78c069f7 100644 --- a/app/styles/app/layouts/sidebar.sass +++ b/app/styles/app/layouts/sidebar.sass @@ -47,7 +47,7 @@ $sb-font-size: 14px .active a:after, a:hover:after - bottom: -3px + bottom: -1px .icon--plus &:after @@ -58,13 +58,11 @@ $sb-font-size: 14px .icon--plus:after color: $teal-light &:after - bottom: -2px + bottom: -1px @media (min-width: #{lower-bound($large-range)}) ul height: 2em - li - padding-right: 1em @media #{$xxlarge-up} li @@ -78,7 +76,6 @@ $sb-font-size: 14px padding: 0 0 .35em margin-bottom: .8em - .sidebar-list margin-top: 1.4rem color: $grey-medium diff --git a/app/styles/app/misc.sass b/app/styles/app/misc.sass index 414a75c8..96bd2d5b 100644 --- a/app/styles/app/misc.sass +++ b/app/styles/app/misc.sass @@ -19,7 +19,6 @@ color: #c00 text-decoration: underline - .small-title font-size: 18px color: $teal-light @@ -27,3 +26,8 @@ .blank-list @include resetul + +.monospace + font-family: Monaco, monospace + font-size: 14px + line-height: 1 diff --git a/app/styles/app/modules/build-header.sass b/app/styles/app/modules/build-header.sass index d2cfa72e..fca55303 100644 --- a/app/styles/app/modules/build-header.sass +++ b/app/styles/app/modules/build-header.sass @@ -1,3 +1,107 @@ - .build-header + font-size: 16px + border: 1px solid $cream-dark 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 + diff --git a/app/styles/app/modules/buttons.sass b/app/styles/app/modules/buttons.sass index 72d14d9b..00261145 100644 --- a/app/styles/app/modules/buttons.sass +++ b/app/styles/app/modules/buttons.sass @@ -122,11 +122,6 @@ $button-border-color: #d4d4d4 &:focus background-color: #696867 -.button-circle - width: 28px - height: 28px - border-radius: 50% - .button--showmore height: auto padding: 0.3em 0.7em @@ -148,3 +143,48 @@ $button-border-color: #d4d4d4 &:focus, &:hover 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 diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass index 434b2e6b..dddf90de 100644 --- a/app/styles/app/modules/icons.sass +++ b/app/styles/app/modules/icons.sass @@ -9,6 +9,7 @@ height: 1em @extend %icon + .icon-cal, .icon--cal, .icon-calendar @@ -26,9 +27,6 @@ .icon--github background-image: inline-image('svg/commit-icon.svg') -.icon--github-circle - background-image: inline-image('icons/github.svg') - .icon-hash, .icon--hash background-image: inline-image('svg/build-number-icon.svg') @@ -87,29 +85,6 @@ background-image: inline-image('icons/remove-log-icon.svg') .icon--down 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 background-image: inline-image('svg/icon-environment-dark2.svg') @@ -182,15 +157,36 @@ background-image: inline-image('svg/fingerprint.svg') +%icon-line-calendar + background-image: inline-image('line-icons/icon-cal.svg') .icon-line-cal @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 @extend %icon background-image: inline-image('line-icons/icon-build.svg') + +%icon-line-commit + background-image: inline-image('line-icons/icon-commit.svg') .icon-line-commit @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 &:after diff --git a/app/styles/app/modules/row.sass b/app/styles/app/modules/row.sass index 06fd5619..7a5d5392 100644 --- a/app/styles/app/modules/row.sass +++ b/app/styles/app/modules/row.sass @@ -76,12 +76,12 @@ display: inline-block vertical-align: middle - @include statusColors($green-dark, 'passed') - @include statusColors($red-dark, 'failed') - @include statusColors($red-dark, 'errored') - @include statusColors($grey-medium, 'canceled') - @include statusColors(#bfb502, 'started', #e5da3f) - @include statusColors(#bfb502, 'queued', #e5da3f) - @include statusColors(#bfb502, 'booting', #e5da3f) - @include statusColors(#bfb502, 'received', #e5da3f) - @include statusColors(#bfb502, 'created', #e5da3f) + @include statusColors($green, 'passed', 10px) + @include statusColors($red, 'failed', 10px) + @include statusColors($red, 'errored', 10px) + @include statusColors($grey, 'canceled', 10px) + @include statusColors($yellow, 'started', 10px, #e5da3f) + @include statusColors($yellow, 'queued', 10px, #e5da3f) + @include statusColors($yellow, 'booting', 10px, #e5da3f) + @include statusColors($yellow, 'received', 10px, #e5da3f) + @include statusColors($yellow, 'created', 10px, #e5da3f) diff --git a/app/styles/app/modules/tabs.sass b/app/styles/app/modules/tabs.sass index 1423673c..b2350cd1 100644 --- a/app/styles/app/modules/tabs.sass +++ b/app/styles/app/modules/tabs.sass @@ -4,59 +4,43 @@ font-size: $font-size-sm ul @include resetul + margin-top: 2em + display: flex + flex-flow: row wrap + justify-content: space-between width: 100% - clear: both - @media #{$small-only} - margin-top: 2em + @media #{$medium-up} + margin-top: 0 + display: block li - @media #{$small-only} - margin-bottom: .8em + flex: 0 0 8em + text-align: center + margin: .5em 0 + @media #{$medium-up} + display: inline-block + text-align: left + margin: 0 1.5em 0 0 + a @extend %inline-block width: 100% color: $grey-light - padding: .2em 0 + padding: 3px 0 4px .active a, a:hover position: relative - color: $teal-dark + color: $teal &:after content: "" position: absolute left: 0 - bottom: -0.25em + bottom: -3px width: 100% height: 2px - background-color: $teal-dark + background-color: $teal .active a - font-weight: 600 - - @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 - + font-weight: $font-weight-bold .tabbody position: relative @@ -76,35 +60,6 @@ float: left 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 #tab_build, #tab_job, @@ -116,7 +71,19 @@ &.active display: inline-block -#profile - #main - .tab - margin: 30px 0 0 12px +#tab_build + position: relative + @media #{$medium-up} + 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 diff --git a/app/templates/components/build-header.hbs b/app/templates/components/build-header.hbs index 05133880..12db6e64 100644 --- a/app/templates/components/build-header.hbs +++ b/app/templates/components/build-header.hbs @@ -34,11 +34,11 @@

{{#if commit.authorName}} - {{commit.authorName}} authored{{#if commit.authorIsCommitter}} and committed{{/if}} + {{commit.authorName}} authored{{#if commit.authorIsCommitter}} and committed{{/if}} {{/if}} {{#unless commit.authorIsCommitter}} {{#if commit.committerName}} - {{commit.committerName}} committed + {{commit.committerName}} committed {{/if}} {{/unless}}

@@ -47,8 +47,13 @@

- {{#link-to "build" repo item}} - {{status-icon status=item.state}} #{{item.number}} {{humanize-state item.state}}{{/link-to}} + {{#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}} + {{status-icon status=item.state}} #{{item.number}} {{humanize-state item.state}}{{/link-to}} + {{/if}}

  • {{#if item.isFinished}}ran{{else}}running{{/if}} for {{format-duration item.duration}}
    • @@ -56,7 +61,10 @@
  • {{format-time item.finishedAt}}
-
- {{repo-actions build=item repo=item.repo user=user}} + {{#if isJob}} + {{repo-actions job=item repo=item.repo user=auth.currentUser}} + {{else}} + {{repo-actions build=item repo=item.repo user=user}} + {{/if}}
diff --git a/app/templates/components/build-repo-actions.hbs b/app/templates/components/build-repo-actions.hbs index d1534e80..ab51a2ff 100644 --- a/app/templates/components/build-repo-actions.hbs +++ b/app/templates/components/build-repo-actions.hbs @@ -2,8 +2,8 @@ {{#if cancelling}} {{loading-indicator height=true}} {{else}} - - + + Cancel build {{/if}} {{/if}} @@ -12,8 +12,8 @@ {{#if restarting}} {{loading-indicator height=true}} {{else}} - - + + Trigger build {{/if}} {{/if}} diff --git a/app/templates/components/job-repo-actions.hbs b/app/templates/components/job-repo-actions.hbs index 62548e53..dd9830f7 100644 --- a/app/templates/components/job-repo-actions.hbs +++ b/app/templates/components/job-repo-actions.hbs @@ -2,8 +2,8 @@ {{#if cancelling}} {{loading-indicator height=true}} {{else}} - - + + Cancel Job {{/if}} {{/if}} @@ -12,8 +12,8 @@ {{#if restarting}} {{loading-indicator height=true}} {{else}} - - + + Restart Job {{/if}} {{/if}} diff --git a/app/templates/components/repo-actions.hbs b/app/templates/components/repo-actions.hbs index 3ba1fddd..c0df0fad 100644 --- a/app/templates/components/repo-actions.hbs +++ b/app/templates/components/repo-actions.hbs @@ -10,9 +10,8 @@ {{#if displayCodeClimate}} - + {{action "codeClimatePopup"}} class="button-circle-codeclimate open-popup" + title="Test Coverage with Code Climate">Code Climate {{/if}} diff --git a/app/templates/components/repo-show-tabs.hbs b/app/templates/components/repo-show-tabs.hbs index 670869db..8070abee 100644 --- a/app/templates/components/repo-show-tabs.hbs +++ b/app/templates/components/repo-show-tabs.hbs @@ -1,83 +1,82 @@ -
-
    -
  • - {{#if repo.slug}} - {{#link-to "repo" repo current-when="repo.index"}} - Current - {{/link-to}} - {{/if}} -
    • -
  • - {{#if repo.slug}} - {{#link-to "branches" repo}} - Branches - {{/link-to}} - {{/if}} -
    • -
  • - {{#if repo.slug}} - {{#link-to "builds" repo}} - Build History - {{/link-to}} - {{/if}} -
    • -
  • - {{#if repo.slug}} - {{#link-to "pullRequests" repo}} - Pull Requests - {{/link-to}} - {{/if}} -
    • -
  • - {{#if build.id}} - {{#if repo.slug}} - {{#link-to "build" repo build}} - Build #{{build.number}} - {{/link-to}} - {{/if}} - {{/if}} -
    • -
  • - {{#if job.id}} - {{#if repo.slug}} - {{#link-to "job" repo job}} - Job #{{job.number}} - {{/link-to}} - {{/if}} - {{/if}} -
    • -
  • - {{#if repo.slug}} - {{#link-to "settings" repo}} - Settings - {{/link-to}} - {{/if}} -
    • -
  • - {{#if repo.slug}} - {{#link-to "requests" repo}} - Requests - {{/link-to}} - {{/if}} -
    • - {{#if config.caches_enabled}} -
  • - {{#if repo.slug}} - {{#link-to "caches" repo}} - Caches - {{/link-to}} - {{/if}} -
    • +
      +
    • + {{#if repo.slug}} + {{#link-to "repo" repo current-when="repo.index"}} + Current + {{/link-to}} {{/if}} - -
    • - {{#if request.id}} - {{#if repo.slug}} - {{#link-to "request" repo request}} - Request #{{request.id}} - {{/link-to}} - {{/if}} +
      • +
    • + {{#if repo.slug}} + {{#link-to "branches" repo}} + Branches + {{/link-to}} + {{/if}} +
      • +
    • + {{#if repo.slug}} + {{#link-to "builds" repo}} + Build History + {{/link-to}} + {{/if}} +
      • +
    • + {{#if repo.slug}} + {{#link-to "pullRequests" repo}} + Pull Requests + {{/link-to}} + {{/if}} +
      • +
    • + {{#if build.id}} + {{#if repo.slug}} + + {{#link-to "build" repo build}} + Build #{{build.number}} + {{/link-to}} + {{/if}} + {{/if}} +
      • +
    • + {{#if job.id}} + {{#if repo.slug}} + {{#link-to "job" repo job}} + Job #{{job.number}} + {{/link-to}} + {{/if}} + {{/if}} +
      • +
    • + {{#if repo.slug}} + {{#link-to "settings" repo}} + Settings + {{/link-to}} + {{/if}} +
      • +
    • + {{#if repo.slug}} + {{#link-to "requests" repo}} + Requests + {{/link-to}} + {{/if}} +
      • + {{#if config.caches_enabled}} +
    • + {{#if repo.slug}} + {{#link-to "caches" repo}} + Caches + {{/link-to}} {{/if}}
      • -
    -
+ {{/if}} + +
  • + {{#if request.id}} + {{#if repo.slug}} + {{#link-to "request" repo request}} + Request #{{request.id}} + {{/link-to}} + {{/if}} + {{/if}} +
    • + diff --git a/app/templates/components/repo-show-tools.hbs b/app/templates/components/repo-show-tools.hbs index 5300edd9..dc12461c 100644 --- a/app/templates/components/repo-show-tools.hbs +++ b/app/templates/components/repo-show-tools.hbs @@ -1,18 +1,17 @@ -
    - Settings -
      - {{#if displaySettingsLink}} -
    • - {{#link-to "settings" repo}}Settings{{/link-to}} -
      • - {{/if}} + + Settings +
        + {{#if displaySettingsLink}}
      • - {{#link-to "requests" repo}}Requests{{/link-to}} + {{#link-to "settings" repo}}Settings{{/link-to}}
        • - {{#if displayCachesLink}} -
      • - {{#link-to "caches" repo}}Caches{{/link-to}} -
        • - {{/if}} -
      -
    + {{/if}} +
  • + {{#link-to "requests" repo}}Requests{{/link-to}} +
    • + {{#if displayCachesLink}} +
  • + {{#link-to "caches" repo}}Caches{{/link-to}} +
    • + {{/if}} + diff --git a/app/templates/job.hbs b/app/templates/job.hbs index 62d4c79f..84af3edc 100644 --- a/app/templates/job.hbs +++ b/app/templates/job.hbs @@ -1,65 +1,6 @@ {{#if job.isLoaded}} -
    -
    - - -
    - -
    -

    - {{job.commit.branch}} - {{format-message job.commit.subject repoBinding=job.repo}} -

    -
    - 
    {{format-message job.commit.body repoBinding=job.repo pre=true}}
    -
    -
    - {{#if job.commit.authorName}} - {{job.commit.authorName}} authored{{#if job.commit.authorIsCommitter}} and committed{{/if}} - {{/if}} - {{#unless job.commit.authorIsCommitter}} - {{#if job.commit.committerName}} - {{job.commit.committerName}} committed - {{/if}} - {{/unless}} -
    -
    - -
    - - - {{repo-actions job=job repo=job.repo user=auth.currentUser}} - -
    -
    + {{build-header item=job user=auth.currentUser commit=job.commit}} {{view 'annotations' annotations=view.annotations}} diff --git a/app/templates/repo.hbs b/app/templates/repo.hbs index 6aacd734..dd441bb0 100644 --- a/app/templates/repo.hbs +++ b/app/templates/repo.hbs @@ -1,44 +1,42 @@ -
    - {{#if view.isEmpty}} - {{repos-empty}} - {{else}} +{{#if view.isEmpty}} + {{repos-empty}} +{{else}} - {{#if repo.isLoaded}} -
    -
    -

    {{#link-to "owner" repo.owner}}{{repo.owner}}{{/link-to}} / {{#link-to "repo" repo}}{{repo.name}}{{/link-to}}

    -
    - - - - -
    -

    {{description}}

    -
    -
    -
    - {{repo-show-tools repo=repo build=build job=job tab=tab currentUser=auth.currentUser}} + {{#if repo.isLoaded}} +
    +
    +

    {{#link-to "owner" repo.owner}}{{repo.owner}}{{/link-to}} / {{#link-to "repo" repo}}{{repo.name}}{{/link-to}}

    +
    + {{repo.name}} on Github +
    +
    + + Build Status Images + +
    +
    +
    +
    + {{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}} -
    -
    - {{#if repo.active}} + {{repo-show-tabs repo=repo tab=tab build=build job=job}} +
    +
    + {{#if repo.active}} + {{outlet}} + {{else}} + {{#if repo.lastBuildId}} {{outlet}} {{else}} - {{#if repo.lastBuildId}} - {{outlet}} - {{else}} - {{not-active user=currentUser repo=repo}} - {{/if}} + {{not-active user=currentUser repo=repo}} {{/if}} -
    + {{/if}}
    -
    - - {{else}} - {{loading-indicator}} - {{/if}} + + + {{else}} + {{loading-indicator}} {{/if}} -
    +{{/if}} diff --git a/public/images/line-icons/icon-cal.svg b/public/images/line-icons/icon-cal.svg index 7b6846b1..96d40ad6 100644 --- a/public/images/line-icons/icon-cal.svg +++ b/public/images/line-icons/icon-cal.svg @@ -1,14 +1,23 @@ - - + + + + + + + + + + diff --git a/public/images/line-icons/icon-clock.svg b/public/images/line-icons/icon-clock.svg index 132af39a..b2834604 100644 --- a/public/images/line-icons/icon-clock.svg +++ b/public/images/line-icons/icon-clock.svg @@ -1,9 +1,18 @@ - + + + + - + + + diff --git a/public/images/line-icons/icon-commit.svg b/public/images/line-icons/icon-commit.svg index 0e73d9cf..946930c9 100644 --- a/public/images/line-icons/icon-commit.svg +++ b/public/images/line-icons/icon-commit.svg @@ -1,24 +1,31 @@ - - - - + + + + + + + diff --git a/public/images/line-icons/icon-failed.svg b/public/images/line-icons/icon-failed.svg index c524eaaa..4ace72b8 100644 --- a/public/images/line-icons/icon-failed.svg +++ b/public/images/line-icons/icon-failed.svg @@ -1,8 +1,10 @@ + + - - - + + + diff --git a/public/images/line-icons/icon-trigger.svg b/public/images/line-icons/icon-trigger.svg index 92930768..804aab41 100644 --- a/public/images/line-icons/icon-trigger.svg +++ b/public/images/line-icons/icon-trigger.svg @@ -1,8 +1,11 @@ - - - - + + + + + + From c7212174fb5b4f9370ea9a3466817852dec2235e Mon Sep 17 00:00:00 2001 From: Lisa P Date: Wed, 25 Nov 2015 15:57:57 +0100 Subject: [PATCH 05/19] style settings button MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit hover states for repo tool buttons style log buttons dont forget the small arrow iconå --- app/components/repo-show-tools.coffee | 12 ++--- app/styles/app/layouts/repo.sass | 51 +++++++++++++++++++- app/styles/app/main/log.sass | 23 +++++---- app/styles/app/modules/buttons.sass | 35 +++++++++++++- app/styles/app/modules/dropdown.sass | 47 ------------------ app/styles/app/modules/icons.sass | 15 +++--- app/styles/app/modules/tabs.sass | 2 +- app/templates/components/log-content.hbs | 6 +-- app/templates/components/repo-show-tools.hbs | 5 +- 9 files changed, 116 insertions(+), 80 deletions(-) diff --git a/app/components/repo-show-tools.coffee b/app/components/repo-show-tools.coffee index 0fd8f4bb..dd056154 100644 --- a/app/components/repo-show-tools.coffee +++ b/app/components/repo-show-tools.coffee @@ -4,20 +4,20 @@ RepoShowToolsComponent = Ember.Component.extend popup: Ember.inject.service() - classNames: ['dropdown', 'dropdown--classic'] + classNames: ['settings-menu'] + classNameBindings: ['isOpen:display'] + isOpen: false click: (event) -> - if $(event.target).is('a') && $(event.target).parents('.dropdown-menu').length + if $(event.target).is('a') && $(event.target).parents('.settings-dropdown').length @closeMenu() closeMenu: -> - $('.menu').removeClass('display') + @toggleProperty('isOpen') actions: menu: -> - @get('popup').close() - $('.menu.display').toggleClass('display') - return false + @toggleProperty('isOpen') hasPermission: (-> if permissions = @get('currentUser.permissions') diff --git a/app/styles/app/layouts/repo.sass b/app/styles/app/layouts/repo.sass index 48e7fe2a..c724462f 100644 --- a/app/styles/app/layouts/repo.sass +++ b/app/styles/app/layouts/repo.sass @@ -38,4 +38,53 @@ display: flex flex-flow: row-reverse wrap justify-content: space-between - border-bottom: 2px $cream-dark + border-bottom: 2px #f1f1f1 solid + + +$dropdown-button-height: 30px +$dropdown-button-margin: -9px + +.settings-button + display: block + height: $dropdown-button-height + padding: 0 2.5em + margin-top: $dropdown-button-margin + background: + color: white + border: 1px solid #f1f1f1 + color: $grey-light + border-radius: 2px + text-align: center + line-height: 2 + font-size: 14px + &:hover, + &:active + background-color: #f1f1f1 + +.settings-dropdown + display: none + position: absolute + top: $dropdown-button-height + ($dropdown-button-margin * .8) + width: 100% + padding: 0 + margin: 1px 0 0 + list-style: none + z-index: 60 + background-color: #f1f1f1 + a + display: block + padding: 0.5em 1em + font-size: 14px + color: $grey-light + &:hover + background-color: $grey + 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 ab9d88f1..6c44b6a7 100644 --- a/app/styles/app/main/log.sass +++ b/app/styles/app/main/log.sass @@ -13,7 +13,16 @@ .tail-label display: none + padding: 0.1em 0.5em 0.1em 1.5em cursor: pointer + background: + color: $grey-light + repeat: no-repeat + size: auto 10px + position: 5px 5px + border-radius: 2px + color: #f1f1f1 + @extend %icon-arrow-down &:hover .tail-label @@ -35,14 +44,14 @@ height: 20px; width: 20px; vertical-align: middle - background-color: #696867; + background-color: $grey-light border-radius: 50%; &:after content: "" display: block height: 10px; width: 10px; - background: #F2F2F2; + background: #f1f1f1; border-radius: 50%; @extend %absolute-center @@ -62,16 +71,6 @@ color: #999 background: inline-image('ui/workers-close.svg') no-repeat right 6px - .icon - width: 1.3em - height: 1.1em - margin-right: 6px - vertical-align: middle - .icon--down - width: 0.7em - height: 0.9em - margin-right: 4px - .log-header height: 44px margin: 0 diff --git a/app/styles/app/modules/buttons.sass b/app/styles/app/modules/buttons.sass index 00261145..d50fd9ad 100644 --- a/app/styles/app/modules/buttons.sass +++ b/app/styles/app/modules/buttons.sass @@ -148,7 +148,6 @@ $button-border-color: #d4d4d4 // new stuff - %circle-button display: block text-indent: 999% @@ -180,6 +179,8 @@ $button-border-color: #d4d4d4 background: repeat: no-repeat size: auto 100% + &:hover + @extend %icon-line-cross-white .button-circle-trigger @extend %circle-button @@ -188,3 +189,35 @@ $button-border-color: #d4d4d4 position: 2px 1px repeat: no-repeat size: 24px 24px + &:hover + @extend %icon-line-trigger-white + + +%log-button + display: inline-block + height: 28px + padding: 0 1.1em 0 2.3em + border: 1px solid #f1f1f1 + color: #f1f1f1 + border-radius: 2px + text-align: center + line-height: 1.9 + font-size: 14px + font-weight: 300 + background: + 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 + +.download-log-button + @extend %log-button + @extend %icon-download-log + diff --git a/app/styles/app/modules/dropdown.sass b/app/styles/app/modules/dropdown.sass index af929de1..ae8eef28 100644 --- a/app/styles/app/modules/dropdown.sass +++ b/app/styles/app/modules/dropdown.sass @@ -85,50 +85,3 @@ $dropdown-border: #C3D9DB &.is-open display: block - - - -.dropdown - position: relative -.dropdown--classic - width: 10.7rem - -.dropdown-button - height: 28px - background-color: $grey-lighter - border: none - color: $white - line-height: 1 - font-size: $font-size-normal - &:hover, - &:focus - background-color: #8b9595 - .icon-cog-light - position: relative - top: 0.15em - left: -0.2em - .icon-arrow-down - border-top-color: $white - - @media #{$medium-up} - float: right - -.dropdown-menu - @include resetul - @extend %border-bottom-4px - position: absolute - top: 29px // height of the button +1 - width: 100% - z-index: 70 - overflow: hidden - background-color: $grey-lighter - display: none - a - @extend %inline-block - width: 100% - padding: .4em 2em - color: $white - &:hover - background-color: darken($grey-lighter, 10) - &.display - display: block diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass index dddf90de..3c755f8a 100644 --- a/app/styles/app/modules/icons.sass +++ b/app/styles/app/modules/icons.sass @@ -79,11 +79,11 @@ .icon--trigger background-image: inline-image('icons/sync-account-icon.svg') -.icon--downloadLog +%icon-download-log background-image: inline-image('icons/download-log-icon.svg') -.icon--removeLog +%icon-remove-log background-image: inline-image('icons/remove-log-icon.svg') -.icon--down +%icon-arrow-down background-image: inline-image('icons/end-of-log-icon.svg') .icon--env @@ -180,10 +180,13 @@ @extend %icon-line-commit %icon-line-cross - background-image: inline-image('line-icons/icon-failed.svg') - + background-image: url('data:image/svg+xml;utf8,') +%icon-line-cross-white + background-image: url('data:image/svg+xml;utf8,') %icon-line-trigger - background-image: inline-image('line-icons/icon-trigger.svg') + background-image: url('data:image/svg+xml;utf8,') +%icon-line-trigger-white + background-image: url('data:image/svg+xml;utf8,') %icon-github-circle background-image: inline-image('icons/github.svg') diff --git a/app/styles/app/modules/tabs.sass b/app/styles/app/modules/tabs.sass index b2350cd1..d6d8b6e8 100644 --- a/app/styles/app/modules/tabs.sass +++ b/app/styles/app/modules/tabs.sass @@ -35,7 +35,7 @@ content: "" position: absolute left: 0 - bottom: -3px + bottom: -2px width: 100% height: 2px background-color: $teal diff --git a/app/templates/components/log-content.hbs b/app/templates/components/log-content.hbs index 777dedd7..b19f990f 100644 --- a/app/templates/components/log-content.hbs +++ b/app/templates/components/log-content.hbs @@ -31,15 +31,15 @@
    {{#if canRemoveLog}} - Remove Log + Remove log {{/if}} - Download Log + Download log
    {{#if showTailing}} - + {{#if job.isFinished}} Scroll to End of Log {{else}} diff --git a/app/templates/components/repo-show-tools.hbs b/app/templates/components/repo-show-tools.hbs index dc12461c..53e2a87f 100644 --- a/app/templates/components/repo-show-tools.hbs +++ b/app/templates/components/repo-show-tools.hbs @@ -1,6 +1,5 @@ - - Settings -
      +Settings +
        {{#if displaySettingsLink}}
      • {{#link-to "settings" repo}}Settings{{/link-to}} From a6e6cb041899dff4c56b59309807725fc1c00a31 Mon Sep 17 00:00:00 2001 From: Lisa P Date: Wed, 25 Nov 2015 17:17:43 +0100 Subject: [PATCH 06/19] make adjustment to logs to take up less space on mobile --- app/styles/app/main/log.sass | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/styles/app/main/log.sass b/app/styles/app/main/log.sass index 6c44b6a7..6e6c81eb 100644 --- a/app/styles/app/main/log.sass +++ b/app/styles/app/main/log.sass @@ -83,6 +83,12 @@ .log-body position: relative + max-height: 20vh + overflow: scroll + @media #{$medium-up} + max-height: none + overflow: auto + pre clear: left min-height: 42px @@ -96,7 +102,6 @@ background-color: #2a2a2a counter-reset: line-numbering margin-top: 0 - @extend %border-bottom-4px .cut padding: 20px 15px 0 55px From fd885304f6fa517b7e6aeaa359a79b2b47a9242f Mon Sep 17 00:00:00 2001 From: Lisa P Date: Wed, 25 Nov 2015 17:20:06 +0100 Subject: [PATCH 07/19] remove old build header styles delete old job styles cleanup templates and prepare for jobs list --- app/components/jobs-item.coffee | 2 +- app/components/jobs-list.coffee | 4 + app/styles/app.scss | 4 +- app/styles/app/_mixins/mixins.sass | 26 ++-- app/styles/app/layouts/build-job.sass | 129 -------------------- app/styles/app/layouts/buildheader.sass | 152 ------------------------ app/styles/app/layouts/jobs.sass | 11 ++ app/templates/components/jobs-list.hbs | 8 +- 8 files changed, 33 insertions(+), 303 deletions(-) delete mode 100644 app/styles/app/layouts/build-job.sass delete mode 100644 app/styles/app/layouts/buildheader.sass create mode 100644 app/styles/app/layouts/jobs.sass diff --git a/app/components/jobs-item.coffee b/app/components/jobs-item.coffee index eb87dcfc..dfe687f0 100644 --- a/app/components/jobs-item.coffee +++ b/app/components/jobs-item.coffee @@ -5,7 +5,7 @@ JobsItemComponent = Ember.Component.extend tagName: 'li' classNameBindings: ['job.state'] - classNames: ['tile', 'tile--jobs', 'row'] + classNames: ['jobs-item'] isAnimating: (-> state = @get('job.state') diff --git a/app/components/jobs-list.coffee b/app/components/jobs-list.coffee index 65e26d5d..9ecf3b2b 100644 --- a/app/components/jobs-list.coffee +++ b/app/components/jobs-list.coffee @@ -1,6 +1,10 @@ `import Ember from 'ember'` JobsListComponent = Ember.Component.extend + + tagName: 'section' + classNames: ['jobs'] + jobTableId: Ember.computed(-> if @get('required') 'jobs' diff --git a/app/styles/app.scss b/app/styles/app.scss index 76d94260..fdf959ee 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -49,9 +49,6 @@ @import "app/layouts/dashboard"; @import "app/layouts/error"; @import "app/layouts/footer"; -// @import "app/layouts/buildheader"; -// @import "app/layouts/build-job"; -@import "app/layouts/sidebar"; @import "app/layouts/sidebar"; @import "app/layouts/profile"; @import "app/layouts/top"; @@ -59,6 +56,7 @@ @import "app/layouts/branches"; @import "app/layouts/broadcasts"; @import "app/layouts/repo"; +@import "app/layouts/jobs"; @import "app/layouts/requests"; @import "app/layouts/caches"; diff --git a/app/styles/app/_mixins/mixins.sass b/app/styles/app/_mixins/mixins.sass index 48374955..6a9def98 100644 --- a/app/styles/app/_mixins/mixins.sass +++ b/app/styles/app/_mixins/mixins.sass @@ -62,19 +62,19 @@ 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 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) &.#{$status} diff --git a/app/styles/app/layouts/build-job.sass b/app/styles/app/layouts/build-job.sass deleted file mode 100644 index 8d431a02..00000000 --- a/app/styles/app/layouts/build-job.sass +++ /dev/null @@ -1,129 +0,0 @@ - -@mixin colorJobs($color, $color-bg) - .job-id - color: $color - &:hover - background-color: $color-bg - .job-anchor, - .job-env, - .job-lang - background-color: $color-bg - .job-env - &:after - content: none - .job-anchor, - .job-lang - &:after - @include fadeOut(right, -90deg, $color-bg) - -.job-anchor - position: relative - -.build-title - .icon--question - width: 1.3em; - height: 1.3em; - transform: translate(0.3em, 0.2em); - cursor: pointer - -// job matrix -.tile--jobs - @extend .tile--xs - font-size: $font-size-sm - padding-left: 3.5rem - p - white-space: normal - a - color: $grey-medium - .tile-status--job - width: 2em - - .svg-booting - margin: 0.7em 0.3em - - .jobs-item - padding: .1em 0 - .icon - height: 1.2em - margin-right: .1em - .job-os .icon - height: 1.3em - .icon--lang - height: 1em - width: 1.4em - .icon--env - width: 1.1em - .icon.api - height: 1.5em - - @media #{$medium-up} - height: 36px - p - white-space: nowrap - .icon--lang, - .icon--env - margin-right: .4em - .jobs-item - position: relative - float: left - white-space: nowrap - padding: 0 - overflow: hidden - .job-id - width: grid-calc(3, 24) - border-right: solid 1px $cream-dark - .job-os - width: grid-calc(1, 24) - text-align: center - .job-lang - width: grid-calc(6, 24) - &:after - @include fadeOut(right, -90deg, $cream-light) - .job-anchor - width: grid-calc(14, 24) - &:after - @include fadeOut(right, -90deg, $cream-light) - z-index: 999 - .job-env - min-width: grid-calc(16, 24) - width: grid-calc(16, 24) - &:after - @include fadeOut(right, -90deg, $cream-light) - &:hover - position: absolute - width: auto - padding-right: 1em - z-index: 88 - .job-duration - width: grid-calc(8, 24) - max-width: 165px - float: right - - @media #{$xlarge-up} - .job-id - width: grid-calc(2, 24) - .job-os - margin: 0 1em - .job-lang - width: grid-calc(4, 24) - margin-right: 2em - - &.failed, - &.errored - @include colorJobs($fail-color, #fbebe6) - &.passed - @include colorJobs($pass-color, #e5efe4) - &.canceled - @include colorJobs($cancel-color, #e5e5e5) - &.started, - &.created, - &.received, - &.queued - @include colorJobs($created-color, #f4efd8) - -.is-empty - opacity: .5 - -.jobs-list - @include resetul - diff --git a/app/styles/app/layouts/buildheader.sass b/app/styles/app/layouts/buildheader.sass deleted file mode 100644 index 421ccc42..00000000 --- a/app/styles/app/layouts/buildheader.sass +++ /dev/null @@ -1,152 +0,0 @@ - -.repo - font-size: $font-size-m - color: $grey-medium - -.repo-header - header - margin: .5rem 0 2.6rem - > * - vertical-align: middle - -.repo-header-title - @extend %inline-block - margin: 0 - font-weight: 400 - font-size: 35px - line-height: 1 - a - color: $grey-dark - &:hover - text-decoration: underline - -.repo-header-icons - line-height: 1 - vertical-align: middle - a - @extend %inline-block - height: 1.7em - margin-left: .7em - .icon - width: 1.5em - height: 100% - position: relative - top: 0.65em - - @media #{$medium-up} - @extend %inline-block - -.repo-menus - @media #{$medium-up} - .dropdown - position: absolute - top: -0.8em - right: 0 - z-index: 50 - .tabnav - position: absolute - top: -0.4em - .repo-menu-header - position: relative - height: 1.6em - margin-bottom: 1em - border-bottom: solid $cream-dark 2px - -.repo-main - .button--showmore - margin-top: 2em - .build-title - margin-top: 2.5rem - font-size: $font-size-sm - font-weight: 400 - & span:hover + .tooltip - display: block - -.repo-main-commit - position: relative - padding-bottom: 0.5em - font-weight: 400 - color: $grey-dark - &, - small - margin: 0 - font-size: $font-size-m - line-height: 1 - small - margin-right: .3em - font-weight: 600 - @media #{$medium-up} - white-space: nowrap - overflow: hidden - &:after - @include fadeOut(right, -90deg, $cream-light) - -.repo-main-description - p - margin: 0 - @media #{$medium-up} - position: relative - height: 4.9em - overflow: hidden - &:after - @include fadeOut(bottom, 0deg, $cream-light) - - .body - display: block - font-size: 13px - font-family: Monaco, monospace - margin-top: 0.6em - overflow: hidden - word-break: break-word - white-space: pre-wrap - -.repo-main-info - @include resetul - position: relative - padding-right: 2em - margin-right: 1.4em - border-right: $cream-dark 1px solid - line-height: $line-height-m - overflow: hidden - &:after - @include fadeOut(right, -90deg, $cream-light) - white-space: nowrap - &:hover - text-decoration: underline - li - white-space: nowrap - -.repo-main-tools - position: absolute - top: 0 - bottom: 0 - right: 0 - a - display: block - margin-bottom: .5em - background-color: $grey-lighter - line-height: 24px - &:hover - background-color: darken($grey-medium, 10) - .icon--trigger - width: 15px - height: 19px - margin-left: 6px - .icon--cancel - width: 16px - height: 16px - margin-left: 6px - .icon--codeclimate - width: 1.2em - height: 1.1em - margin-left: 4px - -.build-os.linux - text-transform: capitalize -.build-os.osx - text-transform: uppercase - -.build-list - padding: 0 - margin: 0 - diff --git a/app/styles/app/layouts/jobs.sass b/app/styles/app/layouts/jobs.sass new file mode 100644 index 00000000..bd78f197 --- /dev/null +++ b/app/styles/app/layouts/jobs.sass @@ -0,0 +1,11 @@ +.jobs + + +.jobs-list + + +.section-title + font-size: 16px + color: $grey + font-weight: 400 + margin: 3rem 0 1rem \ No newline at end of file diff --git a/app/templates/components/jobs-list.hbs b/app/templates/components/jobs-list.hbs index aa686c43..80b77179 100644 --- a/app/templates/components/jobs-list.hbs +++ b/app/templates/components/jobs-list.hbs @@ -1,12 +1,11 @@ {{#if jobs.length}} -
        {{#if required}} -

        Build Jobs

        +

        Build Jobs

        {{else}} -

        Allowed Failures +

        Allowed Failures
        - +

        These are jobs you can allow to fail
        without failing your entire build

        @@ -17,5 +16,4 @@ {{jobs-item job=job repo=repo}} {{/each}}
      -
    {{/if}} From fe36e018ce5b5079fbb315c5a683371042226cfa Mon Sep 17 00:00:00 2001 From: Lisa P Date: Wed, 25 Nov 2015 18:54:59 +0100 Subject: [PATCH 08/19] start flexboxify job list implement Justine\'s feedback remove regenerate key popup styles add new icons, refactor request-icon component use correct property name --- app/components/jobs-item.coffee | 9 - app/components/request-icon.coffee | 25 +-- app/styles/app/_mixins/mixins.sass | 48 ++--- app/styles/app/layouts/jobs.sass | 26 +++ app/styles/app/layouts/repo.sass | 33 +++- app/styles/app/main/log.sass | 6 +- app/styles/app/modules/build-header.sass | 26 ++- app/styles/app/modules/buttons.sass | 41 +++- app/styles/app/modules/dropdown.sass | 7 - app/styles/app/modules/icons.sass | 116 +++--------- app/styles/app/pages/home-pro.sass | 179 +++++++++--------- app/styles/app/popup.sass | 56 ++---- app/templates/components/branch-row.hbs | 4 +- app/templates/components/build-header.hbs | 4 +- app/templates/components/build-tile.hbs | 2 +- app/templates/components/dashboard-row.hbs | 2 +- app/templates/components/jobs-item.hbs | 71 +++---- app/templates/components/owner-repo-tile.hbs | 2 +- app/templates/components/remove-log-popup.hbs | 15 +- public/images/line-icons/icon-arrow-down.svg | 11 ++ .../images/line-icons/icon-arrow-dropdown.svg | 12 ++ public/images/line-icons/icon-arrow-tabs.svg | 12 ++ public/images/line-icons/icon-codeclimate.svg | 20 ++ public/images/line-icons/icon-downloadlog.svg | 32 ++++ .../images/line-icons/icon-github-outline.svg | 31 +++ public/images/line-icons/icon-removelog.svg | 21 ++ public/images/line-icons/icon-settings.svg | 24 +++ remove-log-popup.coffee | 10 - 28 files changed, 481 insertions(+), 364 deletions(-) create mode 100644 public/images/line-icons/icon-arrow-down.svg create mode 100644 public/images/line-icons/icon-arrow-dropdown.svg create mode 100644 public/images/line-icons/icon-arrow-tabs.svg create mode 100644 public/images/line-icons/icon-codeclimate.svg create mode 100644 public/images/line-icons/icon-downloadlog.svg create mode 100644 public/images/line-icons/icon-github-outline.svg create mode 100644 public/images/line-icons/icon-removelog.svg create mode 100644 public/images/line-icons/icon-settings.svg delete mode 100644 remove-log-popup.coffee 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}}