From e9732c965e9f8fb160fbac9971851842945bf086 Mon Sep 17 00:00:00 2001 From: Lisa Passing Date: Wed, 4 Mar 2015 18:02:49 +0100 Subject: [PATCH] rewrite build header --- app/styles/app.scss | 8 +- app/styles/app/_mixins/mixins.sass | 12 +- app/styles/app/_mixins/vars.sass | 8 +- app/styles/app/components/sync-button.sass | 4 + app/styles/app/layouts/buildheader.sass | 100 ++++++++++++ app/styles/app/modules/buttons.sass | 5 + app/styles/app/modules/dropdown.sass | 39 +++++ app/styles/app/modules/icons.sass | 54 +++++-- app/styles/app/modules/tabs.sass | 47 ++++++ app/styles/app/modules/tiles.sass | 170 +++++---------------- app/templates/repo.hbs | 60 +++++++- app/templates/repo/loading.hbs | 2 +- app/templates/repos-list/empty.hbs | 2 +- app/templates/repos/show/actions.hbs | 40 ++++- app/templates/repos/show/tabs.hbs | 12 +- app/templates/repos/show/tools.hbs | 11 +- 16 files changed, 411 insertions(+), 163 deletions(-) create mode 100644 app/styles/app/layouts/buildheader.sass create mode 100644 app/styles/app/modules/tabs.sass diff --git a/app/styles/app.scss b/app/styles/app.scss index 12b80bf3..0fd4a38b 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -24,7 +24,7 @@ @import "app/main/repository"; @import "app/main/sponsors"; @import "app/main/summary"; -@import "app/main/tools"; +// @import "app/main/tools"; @import "app/main"; @import "app/maximize"; @import "app/misc"; @@ -47,14 +47,16 @@ @import "app/modules/section"; @import "app/modules/loader"; -// @import "app/modules/tiles"; +@import "app/modules/tiles"; @import "app/modules/buttons"; @import "app/modules/icons"; @import "app/modules/search"; @import "app/modules/dropdown"; +@import "app/modules/tabs"; @import "app/layout"; @import "app/layouts/dashboard"; @import "app/layouts/error"; @import "app/layouts/footer"; -@import "app/top"; \ No newline at end of file +@import "app/layouts/buildheader"; +@import "app/top"; diff --git a/app/styles/app/_mixins/mixins.sass b/app/styles/app/_mixins/mixins.sass index 8286d9d5..e801d908 100644 --- a/app/styles/app/_mixins/mixins.sass +++ b/app/styles/app/_mixins/mixins.sass @@ -47,4 +47,14 @@ right: 0 left: 0 bottom: 0 - margin: auto \ No newline at end of file + margin: auto + +%inline-block + display: inline-block + +@mixin colorTiles($color) + .tile-status + background-color: $color + .repo-header-title a, + .repo-build-status + color: $color \ No newline at end of file diff --git a/app/styles/app/_mixins/vars.sass b/app/styles/app/_mixins/vars.sass index 49d1bf7a..42618fd6 100644 --- a/app/styles/app/_mixins/vars.sass +++ b/app/styles/app/_mixins/vars.sass @@ -56,4 +56,10 @@ $tab-nav-inactive-bg-hover: $white $tab-active-bg: $blue-grey-light // log -$log-header-bg: #444444 \ No newline at end of file +$log-header-bg: #444444 + +// new build header +$font-size-xxl: 30px +$grey: #A6ADAD +$cream-light: #FAFAF8 +$cream-dark: lighten(mix(#F7F7F4, $grey), 10) diff --git a/app/styles/app/components/sync-button.sass b/app/styles/app/components/sync-button.sass index eb67c4e5..1ca1d752 100644 --- a/app/styles/app/components/sync-button.sass +++ b/app/styles/app/components/sync-button.sass @@ -59,3 +59,7 @@ transform: scale(0) 40% transform: scale(1.0) + +.sync-spinner--grey + i + background-color: #A6ADAD \ No newline at end of file diff --git a/app/styles/app/layouts/buildheader.sass b/app/styles/app/layouts/buildheader.sass new file mode 100644 index 00000000..1abad603 --- /dev/null +++ b/app/styles/app/layouts/buildheader.sass @@ -0,0 +1,100 @@ + +.repo + font-size: $font-size-normal + color: $grey + a + color: $grey + +.repo-header + header + margin: 1rem 0 2rem + > * + vertical-align: middle + + &.started, + &.created + @include colorTiles($start-color) + &.failed + @include colorTiles($fail-color) + &.errored + @include colorTiles($error-color) + &.canceled + @include colorTiles($cancel-color) + &.passed + @include colorTiles($pass-color) + &.inactive + @include colorTiles($cancel-color) + +.repo-header-title + @extend %inline-block + margin: 0 + font-weight: 400 + font-size: $font-size-xxl + + +.repo-header-icons + a + @extend %inline-block + height: 1.7em + .icon + width: 1.7em + height: 100% + + @media #{$medium-up} + @extend %inline-block + +.repo-menus + + @media #{$medium-up} + .dropdown + float: right + .tabnav + float: left + .tabbody + clear: both + margin-top: 4px + +.repo-main-commit + &, + small + margin: 0 + font-weight: 400 + font-size: $font-size-big + color: #818181 + line-height: 1 + small + margin-right: .3em + font-weight: 600 + +.repo-main-author + @media #{$medium-up} + position: absolute + bottom: 0 + +.repo-main-info + @include resetul + padding-right: 2em + margin-right: 1.4em + border-right: $cream-dark 1px solid + line-height: 1.8 + .icon + margin-right: .3em + +.repo-main-tools + position: absolute + top: 0 + bottom: 0 + right: 0 + a + display: block + margin-bottom: .5em + text-align: center + background-color: $grey + &:hover + background-color: darken($grey, 10) + .icon + width: 1em + height: 1.4em + vertical-align: middle + .icon--codeclimate + width: 1.2em diff --git a/app/styles/app/modules/buttons.sass b/app/styles/app/modules/buttons.sass index b5047de4..138f6469 100644 --- a/app/styles/app/modules/buttons.sass +++ b/app/styles/app/modules/buttons.sass @@ -117,3 +117,8 @@ $button-border-color: #d4d4d4 background-color: lighten(#696867, 10) &:focus background-color: #696867 + +.button-circle + width: 1.7em + height: 1.7em + border-radius: 50% diff --git a/app/styles/app/modules/dropdown.sass b/app/styles/app/modules/dropdown.sass index 4ed6ca55..145bc599 100644 --- a/app/styles/app/modules/dropdown.sass +++ b/app/styles/app/modules/dropdown.sass @@ -83,3 +83,42 @@ $dropdown-border: #C3D9DB .filter-current:hover ~ .filter-dropdown, .filter-dropdown:hover display: block + + + +.dropdown + position: relative +.dropdown--classic + width: 10.7rem + overflow: auto + +.dropdown-button + background-color: $grey + border: none + color: $white + font-size: $font-size-normal + &:hover + background-color: darken($grey, 10) + .icon-arrow-down + border-top-color: $white + + @media #{$medium-up} + float: right + +.dropdown-menu + @include resetul + @include border-bottom-radius(4px) + position: absolute + top: 29px // height of the button + width: 100% + overflow: hidden + background-color: $grey + a + @extend %inline-block + width: 100% + padding: .4em 2em + color: $white + &:hover + background-color: darken($grey, 10) + + display: none diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass index 38afa40e..f41ae728 100644 --- a/app/styles/app/modules/icons.sass +++ b/app/styles/app/modules/icons.sass @@ -1,21 +1,38 @@ .icon + width: 1em + height: 1em display: inline-block background: size: 100% repeat: no-repeat -.icon-cal +.icon-cal, +.icon--cal background-image: inline-image('dashboard/cal.svg') -.icon-github +.icon-clock, +.icon--clock + background-image: inline-image('ui/clock.svg') + +.icon-github, +.icon--github background-image: inline-image('dashboard/github.svg') -.icon-branch +.icon--github-circle + background-image: inline-image('icons/github.svg') + +.icon-branch, +.icon--branch background-image: inline-image('dashboard/branch.svg') -.icon-hash +.icon-hash, +.icon--hash background-image: inline-image('dashboard/hash.svg') +.icon-cog, +.icon--cog + background-image: inline-image('icons/settings.svg') + .icon-star background-image: inline-image('dashboard/star-off.svg') @@ -34,6 +51,9 @@ .icon.started background-image: inline-image('dashboard/status-pending.svg') +.icon.push + background-image: inline-image('icons/push.svg') + .icon-lock background-image: inline-image('dashboard/private-icon.svg') @@ -42,6 +62,20 @@ &:hover background-image: inline-image('dashboard/burger-hover.svg') +.icon-sync, +.icon--trigger + background-image: inline-image('icons/sync-account-icon.svg') + +.icon--downloadLog + background-image: inline-image('icons/download-log-icon.svg') +.icon--removeLog + 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-arrow-down width : 0 height : 0 @@ -50,14 +84,4 @@ margin-left : 5px border-left : 5px solid transparent border-right : 5px solid transparent - border-top : 5px solid $dashboard-text-color - -.icon-sync - background-image: inline-image('icons/sync-account-icon.svg') - -.icon--downloadLog - background-image: inline-image('icons/download-log-icon.svg') -.icon--removeLog - background-image: inline-image('icons/remove-log-icon.svg') -.icon--down - background-image: inline-image('icons/end-of-log-icon.svg') \ No newline at end of file + border-top : 5px solid $dashboard-text-color \ No newline at end of file diff --git a/app/styles/app/modules/tabs.sass b/app/styles/app/modules/tabs.sass new file mode 100644 index 00000000..56fc22f1 --- /dev/null +++ b/app/styles/app/modules/tabs.sass @@ -0,0 +1,47 @@ + +.tabnav + ul + @include resetul + @include border-top-radius(4px) + width: 100% + background-color: $cream-light + clear: both + overflow: auto + @media #{$small-only} + margin-top: 2em + li + &:first-child a + border-top-left-radius: 4px + &:last-child a + border-top-right-radius: 4px + a + @extend %inline-block + width: 100% + border: 2px solid transparent + padding: .3em 1em .2em + + .active + a + border-top-color: $cream-dark + border-left-color: $cream-dark + border-right-color: $cream-dark + background-color: $white + &:after + content: none + + @media #{$medium-up} + ul + @extend %inline-block + li + float: left + a + &:after + content: "" + position: relative + left: 1.35em + display: inline-block + width: 2px + height: 10px + background-color: $cream-dark + li:last-child a:after + content: none \ No newline at end of file diff --git a/app/styles/app/modules/tiles.sass b/app/styles/app/modules/tiles.sass index 7d499f1f..9461dfb6 100644 --- a/app/styles/app/modules/tiles.sass +++ b/app/styles/app/modules/tiles.sass @@ -1,139 +1,43 @@ -/* - * tile component as seen on dashboard - */ - -.tiles - background : #f4f3ea - padding : 30px 0 10px 0 - .columns + .columns:last-child - float: left - .tile + @extend border-radius-4px position: relative - margin-bottom : 20px - padding : 0 10px 0 0 - min-height : 125px - background : $white - color : $dashboard-text-color - font-size : 14px - border-radius : 4px - overflow: hidden + padding: .8rem .8rem .8rem 3rem + background-color: $cream-light - &:after - content: "" + @media #{$medium-up} + height: 145px + + .tile-main + height: 100% + img + width: 16px + height: 16px + +// todo refactor +.tile-main + @media #{$xlarge-up} + @include grid-column(9) + +.tile-additional + @media #{$xlarge-up} + @include grid-column(3) + + +.tile-status + position: absolute + top: 0 + bottom: 0 + left: 0 + width: 2.5em + height: 100% + border-top-left-radius: 4px + border-bottom-left-radius: 4px + .icon display: block - position: absolute - top: 0 - right: 0 - bottom: 0 - width: 3em - background: linear-gradient(90deg, rgba($white, .2), $white 50%, $white) - - .duration, .finished - margin-top : 8px - background-repeat: no-repeat - background-position: 0 1px - background-size : 11px 11px - text-indent : 15px - - .duration - background-image: url('/images/dashboard/time.svg') - line-height : 13px - - .finished - background-image: url('/images/dashboard/cal.svg') - line-height : 14px - - .build-status - margin: 5px 0 0 - - .build-information - padding: 8px 0 6px 45px - - .org - margin : 0 - - .repo - font-size : 20px - display : inline-block - margin : 0 - max-width : 250px - white-space : nowrap - line-height : 20px - text-overflow : ellipsis - - .star-feature - position : absolute - top : 0 - right : 0 - background : url('/images/dashboard/star-on.svg') no-repeat 7px 10px - background-size : 20px 20px - - .build-bar - position: absolute - background: - repeat: no-repeat - position: 7px 10px - size: 20px 20px - min-height : 100% - width : 33px - border-radius : 4px 0 0 4px - -.repo a:hover, -.build-status a:hover, -.repo a:active, -.build-status a:active - text-decoration: underline -.repo a:focus, -.build-status a:focus - outline: 1px dotted - -.passed - .build-bar - background: - color: $pass-color - image: url('/images/dashboard/status-passed.svg') - .org, - .repo a, - .build-status a - color: $pass-color - -.failed - .build-bar - background: - color: $fail-color - image: url('/images/dashboard/status-failed.svg') - .org, - .repo a, - .build-status a - color: $fail-color - -.started - .build-bar - background: - color: $start-bg-color - image: url('/images/dashboard/status-pending.svg') - .org, - .repo a, - .build-status a - color: $start-color + width: 1.1em + height: 1.1em + margin: .5em auto 1.1em -.errored - .build-bar - background: - color: $error-color - image: url('/images/dashboard/status-errored.svg') - .org, - .repo a, - .build-status a - color: $error-color - -.if_private - display : inline-block - background : url('/images/dashboard/private-icon.svg') no-repeat 0 0 - background-size : contain - height : 12px - width : 9px - margin-left : 5px - text-indent : -9999px +.tile-additional + position: relative diff --git a/app/templates/repo.hbs b/app/templates/repo.hbs index 537ae360..6fd1b535 100644 --- a/app/templates/repo.hbs +++ b/app/templates/repo.hbs @@ -1,9 +1,61 @@ -
+
{{#if view.isEmpty}} {{view 'repos-empty'}} {{else}} {{#if repo.isLoaded}} -
+ +
+
+

{{#link-to "repo" repo}}{{repo.slug}}{{/link-to}}

+
+ + + + +
+

{{description}}

+
+
+ + {{view 'repo-show-tools'}} + + {{view 'repo-show-tabs'}} + +
+
+
+ + +
+ +
+

master Merge pull request #398 from craigcitro/quieter-mac

+
+ Something someting something +
+
+ Hiro Asari authored and commited +
+
+ +
+
    +
  • 234 passed
    • +
  • Commit 324eabf2
    • +
  • Compare 22323...233
    • +
  • ran for 16 sec
    • +
  • 12 minutes ago
    • +
+ + {{view 'repo-actions'}} + +
+
+
+
+ +
+ {{!--

{{#link-to "repo" repo}}{{repo.slug}}{{/link-to}}

@@ -22,9 +74,9 @@
{{outlet}} -
+
--}} {{else}} -
Loading
+ {{/if}} {{/if}}
diff --git a/app/templates/repo/loading.hbs b/app/templates/repo/loading.hbs index 0277cf2e..295518d7 100644 --- a/app/templates/repo/loading.hbs +++ b/app/templates/repo/loading.hbs @@ -1 +1 @@ -
Loading
+ \ No newline at end of file diff --git a/app/templates/repos-list/empty.hbs b/app/templates/repos-list/empty.hbs index 0277cf2e..17d193b2 100644 --- a/app/templates/repos-list/empty.hbs +++ b/app/templates/repos-list/empty.hbs @@ -1 +1 @@ -
Loading
+
Loading
\ No newline at end of file diff --git a/app/templates/repos/show/actions.hbs b/app/templates/repos/show/actions.hbs index cc25c5f0..13a783cb 100644 --- a/app/templates/repos/show/actions.hbs +++ b/app/templates/repos/show/actions.hbs @@ -1,4 +1,40 @@ -
+
+ + + + {{#if view.displayCancelBuild}} + + {{/if}} + {{#if view.displayCancelJob}} + + {{/if}} + {{#if view.displayRequeueBuild}} + {{#if view.requeueing}} + + {{else}} + + {{/if}} + {{/if}} + {{#if view.displayRequeueJob}} + {{#if view.requeueing}} + + {{else}} + + {{/if}} + {{/if}} + {{#if view.displayCodeClimate}} + + {{/if}} +
+ + +{{!--
    {{#if view.displayCancelBuild}}
  • @@ -41,7 +77,7 @@ {{/if}}
-
+
--}}