diff --git a/app/styles/app.scss b/app/styles/app.scss index 5bccd51a..53cd7d5d 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -47,6 +47,7 @@ // @import "app/components/tiles"; @import "app/components/travis-switch"; @import "app/components/buttons"; +@import "app/components/icons"; @import "app/components/search"; @import "app/layout"; diff --git a/app/styles/app/_mixins/vars.sass b/app/styles/app/_mixins/vars.sass index 8a49e900..b392962a 100644 --- a/app/styles/app/_mixins/vars.sass +++ b/app/styles/app/_mixins/vars.sass @@ -18,11 +18,13 @@ $left-bg: $light-gray $right-bg: $light-gray // dashboard -$pass-color: #3ba85d -$fail-color: #d04729 -$error-color: #999999 -$start-color: #848032 +$pass-color: #3FA75F +$fail-color: #DB423C +$error-color: $fail-color +$start-color: #D2C93B $start-bg-color: #D2CA24 +$cancel-color: #A1A0A0 +$dropdown-color: #5FA5A4 $dashboard-text-color: #9d9fa1 diff --git a/app/styles/app/components/buttons.sass b/app/styles/app/components/buttons.sass index cf9682d1..bb568a24 100644 --- a/app/styles/app/components/buttons.sass +++ b/app/styles/app/components/buttons.sass @@ -66,7 +66,7 @@ $button-border-color: #d4d4d4 vertical-align: middle cursor: pointer background: - color: #39a85b + color: $pass-color image: inline-image('ui/github-signin.svg') repeat: no-repeat position: 95.5% 45% @@ -77,5 +77,18 @@ $button-border-color: #d4d4d4 background-image: inline-image('ui/spinner.svg') background-position: 92% 47% &:hover - background-color: #39a85b + background-color: $pass-color + + +.button + border-radius: 4px +.button--green + border: none + font-size: $font-size-small + color: $white + background-color: $pass-color + &:hover + background-color: #73c78d +.button--fixedwidth + width: 8em diff --git a/app/styles/app/components/icons.sass b/app/styles/app/components/icons.sass new file mode 100644 index 00000000..5cddec53 --- /dev/null +++ b/app/styles/app/components/icons.sass @@ -0,0 +1,43 @@ +.icon + display: inline-block + background: + size: 100% + repeat: no-repeat + +.icon-cal + background-image: inline-image('dashboard/cal.svg') + +.icon-github + background-image: inline-image('dashboard/github.svg') + +.icon-branch + background-image: inline-image('dashboard/branch.svg') + +.icon-hash + background-image: inline-image('dashboard/hash.svg') + +.icon-star + background-image: inline-image('dashboard/star-off.svg') + +.icon-error + background-image: inline-image('dashboard/status-errored.svg') + +.icon-fail + background-image: inline-image('dashboard/status-failed.svg') + +.icon-cancel + background-image: inline-image('dashboard/status-cancelled.svg') + +.icon-pass + background-image: inline-image('dashboard/status-passed.svg') + +.icon-started + background-image: inline-image('dashboard/status-pending.svg') + +.icon-lock + background-image: inline-image('dashboard/private-icon.svg') + +.icon-burger + background-image: inline-image('dashboard/burger.svg') + &:hover + background-image: inline-image('dashboard/burger-hover.svg') \ No newline at end of file diff --git a/app/styles/app/components/section.sass b/app/styles/app/components/section.sass index bef8bc06..8a751376 100644 --- a/app/styles/app/components/section.sass +++ b/app/styles/app/components/section.sass @@ -1,9 +1,10 @@ .section font-size: $font-size-normal - padding: .35em 0 + padding: .65em 0 0 .section--white background-color: $white .section--maxheight - max-height: 44px \ No newline at end of file + min-height: 3.3rem + max-height: 4rem \ No newline at end of file diff --git a/app/styles/app/layouts/dashboard.sass b/app/styles/app/layouts/dashboard.sass index 0ca0a439..90ccd2a0 100644 --- a/app/styles/app/layouts/dashboard.sass +++ b/app/styles/app/layouts/dashboard.sass @@ -8,6 +8,13 @@ $db-gray: #C9C9C9 +.dashboard + hr + max-width: 1024px + margin: auto + border-top: none + border-bottom: $db-gray dashed 1px + .wrapper-dashboard background-color: $wrapper-bg-color @@ -15,17 +22,20 @@ $db-gray: #C9C9C9 margin: 2em 0 3em .dashboard-active - margin: 0 0 3em - border-bottom: dashed 1px $db-gray + margin-bottom: 3em .dashboard-inactive - margin: 2em 0 5em + margin: 1.5em 0 5em + .db + h2, h3, p, button, .db-status + opacity: .7 .dashboard--empty padding: 2em 5em background: #E8E6DE color: $db-gray font-size: 20px + font-weight: 300 text-align: center @extend %br-4px @@ -46,10 +56,6 @@ $db-gray: #C9C9C9 top: 0 bottom: 0 margin: auto - width: 1.5em - height: 1.5em - background: pink - display: inline-block .db-repo padding-left: 4em @@ -65,6 +71,10 @@ $db-gray: #C9C9C9 border-top-left-radius: 4px border-bottom-left-radius: 4px + .icon + width: 1.1em + height: 1.1em + .icon-status left: 0 right: 0 @@ -76,6 +86,22 @@ $db-gray: #C9C9C9 right: 0 margin: auto bottom: -2em + opacity: .9 + +.db-controls + position: relative + transform: translateY(24%) + line-height: 3em + border-left: 1px solid $db-gray + p, + button + display: inline-block + button + margin-left: 1em + + .icon + width: 1.6em + height: 1.6em .db-job, .db-branch, @@ -83,20 +109,25 @@ $db-gray: #C9C9C9 .db-timeago position: relative padding-left: 2.2em - transform: translateY(24%) - line-height: 3em - -.db-job - border-left: 1px solid $db-gray .db-lock position: absolute left: -2.1em; top: 1.2em; + .icon + width: 1em + height: 1em +.db-activation + text-align: right + padding-right: 0 .db-burger + position: absolute; + top: 0 + right: 0 height: 100% + width: 4em .icon width: 2em height: 2em @@ -107,6 +138,30 @@ $db-gray: #C9C9C9 display: none +@mixin colorDbelements($color) + .db-status + background-color: $color + .db-repo + h2, h3, a + color: $color + .db-job + color: $color + a + color: $color + +.db--started + @include colorDbelements($start-color) +.db--fail + @include colorDbelements($fail-color) +.db--error + @include colorDbelements($error-color) +.db--cancel + @include colorDbelements($cancel-color) +.db--pass + @include colorDbelements($pass-color) +.db--inactive + @include colorDbelements($cancel-color) + // .current-org-avatar // display : inline-block // height : 20px diff --git a/app/templates/dashboard/repositories.hbs b/app/templates/dashboard/repositories.hbs index fef9da74..32f528af 100644 --- a/app/templates/dashboard/repositories.hbs +++ b/app/templates/dashboard/repositories.hbs @@ -82,16 +82,18 @@
9874 started
-master
-394348a
-in queue
-9874 started
-master
-394348a
-25 minutes ago
-9874 failed
+master
+394348a
+25 minutes ago
+9874 started
-master
-394348a
-1 hour ago
-9874 started
-master
-394348a
-3 hours ago
-9874 cancelled
+master
+394348a
+3 hours ago
+9874 started
-master
-394348a
-2 days ago
-9874
+394348a
+3 hours ago
+Not active
+ +Active
+ +