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 @@

travis-pro

travis-rubies

-

9874 started

-

master

-

394348a

-

in queue

-
- - +
+

9874 started

+

master

+

394348a

+

in queue

+
@@ -105,16 +107,18 @@

travis-pro

travis-pro-api

-

9874 started

-

master

-

394348a

-

25 minutes ago

-
- - +
+

9874 failed

+

master

+

394348a

+

25 minutes ago

+
@@ -128,16 +132,18 @@

travis-pro

travis-pro-hub

-

9874 started

-

master

-

394348a

-

1 hour ago

-
- - +
+

9874 errored

+

master

+

394348a

+

1 hour ago

+
@@ -151,16 +157,18 @@

travis-pro

travis-gatekeeper

-

9874 started

-

master

-

394348a

-

3 hours ago

-
- - +
+

9874 cancelled

+

master

+

394348a

+

3 hours ago

+
@@ -174,20 +182,58 @@

travis-pro

bubblewrap-mac-test

-

9874 started

-

master

-

394348a

-

2 days ago

-
- - +
+

9874 passed

+

master

+

394348a

+

2 days ago

+
+
+
+
+ +
+
+

travis-pro

+

travis-gatekeeper

+
+
+

9874

+

394348a

+

3 hours ago

+
+

Not active

+ +
+
+
+ +
+
+ +
+
+

travis-pro

+

bubblewrap-mac-test

+
+
+
+

Active

+ +
+
+
+
diff --git a/public/images/dashboard/branch.svg b/public/images/dashboard/branch.svg new file mode 100644 index 00000000..b9c16743 --- /dev/null +++ b/public/images/dashboard/branch.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/public/images/dashboard/burger-hover.svg b/public/images/dashboard/burger-hover.svg new file mode 100644 index 00000000..183dacc8 --- /dev/null +++ b/public/images/dashboard/burger-hover.svg @@ -0,0 +1,12 @@ + + + + + + + + diff --git a/public/images/dashboard/burger.svg b/public/images/dashboard/burger.svg new file mode 100644 index 00000000..4a8c319e --- /dev/null +++ b/public/images/dashboard/burger.svg @@ -0,0 +1,12 @@ + + + + + + + + diff --git a/public/images/dashboard/github.svg b/public/images/dashboard/github.svg new file mode 100644 index 00000000..35b96d33 --- /dev/null +++ b/public/images/dashboard/github.svg @@ -0,0 +1,13 @@ + + + + + + diff --git a/public/images/dashboard/hash.svg b/public/images/dashboard/hash.svg new file mode 100644 index 00000000..6eae15a3 --- /dev/null +++ b/public/images/dashboard/hash.svg @@ -0,0 +1,27 @@ + + + + + + + + diff --git a/public/images/dashboard/private-icon.svg b/public/images/dashboard/private-icon.svg index 2aafb6eb..b45505e1 100644 --- a/public/images/dashboard/private-icon.svg +++ b/public/images/dashboard/private-icon.svg @@ -1,12 +1,12 @@ - - - - - - - - + + + + + + + +