diff --git a/app/components/broadcast-tower.coffee b/app/components/broadcast-tower.coffee new file mode 100644 index 00000000..247c5e15 --- /dev/null +++ b/app/components/broadcast-tower.coffee @@ -0,0 +1,28 @@ +`import Ember from 'ember'` + +BroadcastTowerComponent = Ember.Component.extend + + classNames: ['broadcast'] + + isOpen: false + timeoutId: '' + + isEmpty: (-> + @get('status') == '' + ).property('status') + + actions: + toggleBroadcasts:() -> + @toggleProperty('isOpen') + @sendAction('toggleBroadcasts') + + if @get('isOpen') == true + @set('timeoutId', setTimeout => + @toggleProperty('isOpen') + @sendAction('toggleBroadcasts') + , 10000 + ) + else + clearTimeout(@get('timeoutId')) + +`export default BroadcastTowerComponent` diff --git a/app/controllers/repos.coffee b/app/controllers/repos.coffee index 66562125..2dded81f 100644 --- a/app/controllers/repos.coffee +++ b/app/controllers/repos.coffee @@ -51,7 +51,6 @@ Controller = Ember.Controller.extend Visibility.every @config.intervals.updateTimes, @updateTimes.bind(this) runningJobs: (-> - # TODO: this should also query for received jobs result = @store.filter('job', {}, (job) -> ['queued', 'started', 'received'].indexOf(job.get('state')) != -1 ) diff --git a/app/controllers/top.coffee b/app/controllers/top.coffee index 7ef3d5be..ee3b9c51 100644 --- a/app/controllers/top.coffee +++ b/app/controllers/top.coffee @@ -1,9 +1,14 @@ `import Ember from 'ember'` +`import Ajax from 'travis/utils/ajax'` +`import config from 'travis/config/environment'` Controller = Ember.Controller.extend needs: ['currentUser'] userBinding: 'controllers.currentUser.model' + store: Ember.inject.service() + currentUserBinding: 'auth.currentUser' + userName: (-> @get('user.name') || @get('user.login') ).property('user.login', 'user.name') @@ -12,10 +17,73 @@ Controller = Ember.Controller.extend "#{location.protocol}//www.gravatar.com/avatar/#{@get('user.gravatarId')}?s=48&d=mm" ).property('user.gravatarId') + broadcasts: (-> + + if @get('auth.signedIn') + broadcasts = Ember.ArrayProxy.create( + content: [], + lastBroadcastStatus: '', + isLoading: true + ) + apiEndpoint = config.apiEndpoint + options = {} + options.type = 'GET' + options.headers = { Authorization: "token #{@auth.token()}" } + + seenBroadcasts = Travis.storage.getItem('travis.seen_broadcasts') + if seenBroadcasts + seenBroadcasts = JSON.parse(seenBroadcasts) + else + seenBroadcasts = [] + + $.ajax("#{apiEndpoint}/v3/broadcasts", options).then (response) -> + if response.broadcasts.length + receivedBroadcasts = response.broadcasts.filter((broadcast) -> + unless broadcast.expired + if seenBroadcasts.indexOf(broadcast.id.toString()) == -1 + broadcast + ).map( (broadcast) -> + Ember.Object.create(broadcast) + ).reverse() + + if receivedBroadcasts.length + if receivedBroadcasts.findBy('category', 'warning') + broadcasts.set('lastBroadcastStatus', 'warning') + else if receivedBroadcasts.findBy('category', 'announcement') + broadcasts.set('lastBroadcastStatus', 'announcement') + else + broadcasts.set('lastBroadcastStatus', '') + + broadcasts.set('content', receivedBroadcasts) + broadcasts.set('isLoading', false) + + broadcasts + ).property('broadcasts') + actions: { toggleBurgerMenu: -> @toggleProperty('is-open') return false + + toggleBroadcasts: -> + @toggleProperty('showBroadcasts') + return false + + markBroadcastAsSeen: (broadcast) -> + id = broadcast.get('id').toString() + seenBroadcasts = Travis.storage.getItem('travis.seen_broadcasts') + if seenBroadcasts + seenBroadcasts = JSON.parse(seenBroadcasts) + else + seenBroadcasts = [] + seenBroadcasts.push(id) + Travis.storage.setItem('travis.seen_broadcasts', JSON.stringify(seenBroadcasts)) + @get('broadcasts.content').removeObject(broadcast) + unless @get('broadcasts.content').length + @set('broadcasts.lastBroadcastStatus', '') + else + @set('broadcasts.lastBroadcastStatus', @get('broadcasts.content')[0].category) + return false } showCta: (-> diff --git a/app/services/flashes.coffee b/app/services/flashes.coffee index db3ad895..6da8ad73 100644 --- a/app/services/flashes.coffee +++ b/app/services/flashes.coffee @@ -11,28 +11,11 @@ FlashesService = Ember.Service.extend @set('flashes', LimitedArray.create(limit: 1, content: [])) messages: (-> - broadcasts = @get('unseenBroadcasts') flashes = @get('flashes') model = [] - model.pushObjects(broadcasts) if broadcasts - model.pushObjects(flashes.toArray().reverse()) if flashes + model.pushObjects(flashes.toArray().reverse()) if flashes model.uniq() - ).property('unseenBroadcasts.[]', 'flashes.[]', 'unseenBroadcasts.length', 'flashes.length') - - unseenBroadcasts: (-> - @get('broadcasts').filter (broadcast) -> - !broadcast.get('isSeen') - ).property('broadcasts.[]', 'broadcasts.length') - - broadcasts: (-> - broadcasts = Ember.ArrayProxy.create(content: []) - - if @get('currentUser.id') - @get('store').find('broadcast').then (result) -> - broadcasts.pushObjects(result.toArray()) - - broadcasts - ).property('currentUser.id') + ).property('flashes.[]', 'flashes.length') loadFlashes: (msgs) -> for msg in msgs @@ -42,10 +25,6 @@ FlashesService = Ember.Service.extend Ember.run.later(this, (-> @get('flashes.content').removeObject(msg)), 15000) close: (msg) -> - if msg.constructor.modelName == "broadcast" - msg.setSeen() - @notifyPropertyChange('unseenBroadcasts') - else - @get('flashes').removeObject(msg) + @get('flashes').removeObject(msg) `export default FlashesService` diff --git a/app/styles/app.scss b/app/styles/app.scss index fa7db947..454f557d 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -24,6 +24,9 @@ @import "app/animation/tractor"; +@import "app/modules/logo"; +@import "app/modules/tofuburger"; +@import "app/modules/navigation"; @import "app/modules/row"; @import "app/modules/loader"; @import "app/modules/tiles"; @@ -53,6 +56,7 @@ @import "app/layouts/top"; @import "app/layouts/owner"; @import "app/layouts/branches"; +@import "app/layouts/broadcasts"; @import "app/landing"; @import "app/layouts/requests"; diff --git a/app/styles/app/_mixins/fonts.sass b/app/styles/app/_mixins/fonts.sass index 897a926e..ab3fc7c2 100644 --- a/app/styles/app/_mixins/fonts.sass +++ b/app/styles/app/_mixins/fonts.sass @@ -11,3 +11,5 @@ $line-height: 22px $line-height-log: 19px $font-weight-normal: 400 + +$top-height: 55px \ No newline at end of file diff --git a/app/styles/app/_mixins/vars.sass b/app/styles/app/_mixins/vars.sass index 37e869da..c23a6330 100644 --- a/app/styles/app/_mixins/vars.sass +++ b/app/styles/app/_mixins/vars.sass @@ -8,15 +8,6 @@ $blue-grey: #404650 $blue-grey-light: #d8e2e6 $light-gray: #e9e9e7 -$logo-red: #dc4136 - -$topbar-bg: $blue-grey -$topbar-bg-darker: #31363d -$topbar-height: 55px - -$main-repo-link-color: #50555b -$main-repo-hover-color: #607a84 - $travis-lint-color: #9b9d9e $travis-lint-bg: #fafafa diff --git a/app/styles/app/landing.sass b/app/styles/app/landing.sass index 3af2d3c2..73c53721 100644 --- a/app/styles/app/landing.sass +++ b/app/styles/app/landing.sass @@ -8,14 +8,12 @@ background-color: #fff .button--signin - margin-top: -4px background-color: #ffffff background-image: inline-image('landing-page/signingithub.svg') background-size: 16px 16px border: 2px solid #e4e7e7 color: #a0a8a8 .button--signingin - margin-top: -4px border: 2px solid #3FA75F .button--signin:hover background-color: #73c78d @@ -38,7 +36,7 @@ .landing margin: 0 auto 170px auto font-weight: 300 - overflow: hidden + overflow-x: hidden h1 font-size: 5em @@ -469,6 +467,8 @@ .landing-rows list-style: none margin: 0 + @media #{$small-only} + padding: 0 .landing-row .two-line diff --git a/app/styles/app/layout.sass b/app/styles/app/layout.sass index aa3851bb..014a1754 100644 --- a/app/styles/app/layout.sass +++ b/app/styles/app/layout.sass @@ -8,7 +8,12 @@ padding-left: 0 !important padding-right: 0 !important padding-top: 30px !important - overflow-y: auto + // overflow-y: auto + @media #{$medium-up} + .topbar + max-width: 1024px + margin: auto + padding: 0 .main, .profile-view @@ -31,16 +36,6 @@ background-color: $white border-right: 2px solid #f2f2f2 -.duration_label - display: inline-block - height: 11px - line-height: 13px - text-indent: 14px - margin-right: 1px - overflow: hidden - background: inline-image('ui/clock.svg') no-repeat 0px 0px - background-size: contain - #main position: relative padding: 1.8em $column-gutter/2 5em diff --git a/app/styles/app/layouts/broadcasts.sass b/app/styles/app/layouts/broadcasts.sass new file mode 100644 index 00000000..26ecf283 --- /dev/null +++ b/app/styles/app/layouts/broadcasts.sass @@ -0,0 +1,143 @@ +.broadcast + display: inline-block + height: $top-height + width: 40px + margin-left: 1em + line-height: $top-height + cursor: pointer + vertical-align: middle + @media #{$medium-up} + float: left + +.broadcasts + position: relative + background-color: $white + list-style: none + padding: 0 1em + margin: 0 auto .7em + border-radius: 2px + height: 0 + transform-origin: center center + opacity: 0 + z-index: -1 + will-change: opacity + transition: opacity 150ms ease + + &:after + content: "" + position: absolute + display: block + width: 14px + height: 14px + background: $white + top: -0.5em + left: 136px + transform: rotate(45deg) + border-top: solid 2px $cream-dark + border-left: solid 2px $cream-dark + li + border-bottom: solid 2px $cream-dark + &:last-of-type + border-bottom: none + p + margin: .5em 0 + padding-left: 1.5rem + font-size: .9em + word-wrap: break-word + a + display: inline + line-height: 1.45 + text-decoration: underline + + &.is-open + z-index: 80 + border: solid 2px $cream-dark + opacity: 1 + height: auto + + .icon-close + display: inline-block + width: 1.2em + height: 1.2em + float: right + background: + image: inline-image('line-icons/icon-failed.svg') + repeat: no-repeat + + @media #{$medium-up} + position: absolute + top: 3.3em + left: 145px + width: 27em + height: auto + z-index: 70 + margin-left: -0.7em + .centered & + left: 133px + &:after + left: 1rem + +.broadcast-status + display: inline-block + width: 10px + height: 10px + margin-right: .5rem + margin-left: -1.5rem + border-radius: 50% + background-color: $grey-medium + + &.warning + background-color: $red-dark + + &.announcement + background-color: $green-dark + + +.icon-broadcast + display: inline-block + width: 1.3em + height: 2em + vertical-align: middle + svg + overflow: visible + .tower-path + fill: #AEAEAE + &:hover, + &.is-open + .tower-path + fill: #818181 + + &.warning + .tower-path + fill: #DB4141 + &:hover, + &.is-open + .tower-path + fill: #BA1717 + + &.announcement + .tower-path + fill: #3CA85B + &:hover, + &.is-open + .tower-path + fill: #238C3E + + .radio-wave--right + .tower-path + transform-origin: left center + animation: pulsating-right 1.5s linear infinite + + .radio-wave--left + .tower-path + transform-origin: right center + animation: pulsating-left 1.5s linear infinite + + +@keyframes pulsating-right + 40% + transform: translateX(1px) scale(1.1) + +@keyframes pulsating-left + 40% + transform: translateX(-1px) scale(1.1) \ No newline at end of file diff --git a/app/styles/app/layouts/buildheader.sass b/app/styles/app/layouts/buildheader.sass index 0793a265..45d7d080 100644 --- a/app/styles/app/layouts/buildheader.sass +++ b/app/styles/app/layouts/buildheader.sass @@ -14,6 +14,7 @@ margin: 0 font-weight: 400 font-size: 35px + line-height: 1 a color: $grey-dark &:hover @@ -123,19 +124,22 @@ a display: block margin-bottom: .5em - text-align: center background-color: $grey-lighter + line-height: 24px &:hover background-color: darken($grey-medium, 10) .icon--trigger width: .95em - height: 1.2em + height: 1.3em + margin-left: 6px .icon--cancel width: 1em height: 1em + margin-left: 6px .icon--codeclimate width: 1.2em height: 1.1em + margin-left: 4px .build-os.linux text-transform: capitalize diff --git a/app/styles/app/layouts/dashboard.sass b/app/styles/app/layouts/dashboard.sass index f8a533c1..e0c160a5 100644 --- a/app/styles/app/layouts/dashboard.sass +++ b/app/styles/app/layouts/dashboard.sass @@ -16,7 +16,6 @@ margin: 3rem 0 5rem list-style-type: none - .dashboard-active li text-align: left .one-line diff --git a/app/styles/app/layouts/top.sass b/app/styles/app/layouts/top.sass index 50caa7e2..020b471a 100644 --- a/app/styles/app/layouts/top.sass +++ b/app/styles/app/layouts/top.sass @@ -1,4 +1,3 @@ -$top-height: 55px #auth #top .cta display: none @@ -32,133 +31,25 @@ $top-height: 55px @media #{$medium-up} display: block -.centered .cta - padding-right: 0 - -.logo - position: relative - margin: 0 1.5rem 0 1.3rem - float: left - a - display: block - width: 100px - height: $top-height - z-index: 999 - outline: none - text-indent: -9999px - transition: background-color 200ms ease - background: inline-image('svg/travis-ci-logo.svg') no-repeat 0 50% - - &:hover - background: $cream-light inline-image('svg/travis-ci-logo-hover.svg') no-repeat 50% - .centered & - margin-left: 0 - -.burger - overflow: auto - height: $top-height - @media #{$medium-up} - display: none - - .burger-btn - float: right - font-size: 50px - background: none - border: none - line-height: 1 - color: $grey-medium - outline: none !important - @include clearfix - &:hover - cursor: pointer - .top background-color: #eff0ec .topbar + height: $top-height + padding: 0 $column-gutter/2 + clear: both + overflow: hidden font-size: $font-size-m - background-color: #eff0ec color: $grey-medium - - .navigation - padding: 0 $column-gutter/2 - margin: 0 - height: 0 - list-style: none - overflow: hidden - &.is-open - height: auto - - .navigation-handle - position: relative - margin: 0 - - .navigation-sub - position: relative - - .navigation-nested - @include resetul - - a, - .navigation-handle - display: block - color: #898989 - font-size: $font-size-m - cursor: pointer - height: $top-height - line-height: $top-height + 2px - border: none + a + color: $grey-medium &:hover text-decoration: underline - - .profile - float: right - img - border-radius: 50%; - width: 2.7rem; - height: 2.7rem; - margin-left: 1rem; - transform: translateY(-0.1rem); - + &.has-autoheight + height: auto @media #{$medium-up} - &.row - height: $top-height - - .navigation - padding: 0 + &, + &.has-autoheight + position: relative height: $top-height overflow: visible - > li - display: inline-block - margin-right: 1rem - .centered & li.signed-out - .centered & li.signed-in - .centered & li.signing-in - margin-right: 0 - - a, - .navigation-handle span:not(.sync-spinner) - padding: 0 .2em - - .centered & .navigation li:last-child - margin-right: 0 - - .navigation-nested - display: none - position: absolute - top: $top-height - left: -1em - z-index: 90 - background-color: #eff0ec - a - height: 35px - line-height: 35px - padding: 0 2em - white-space: nowrap - &:hover - text-decoration: none - background-color: $cream-light - - .navigation-handle:hover + .navigation-nested, - .navigation-nested:hover - display: block diff --git a/app/styles/app/layouts/untitled b/app/styles/app/layouts/untitled new file mode 100644 index 00000000..ce1c8eb2 --- /dev/null +++ b/app/styles/app/layouts/untitled @@ -0,0 +1,17 @@ +.burger + overflow: auto + height: $top-height + @media #{$medium-up} + display: none + + .burger-btn + float: right + font-size: 50px + background: none + border: none + line-height: 1 + color: $grey-medium + outline: none !important + @include clearfix + &:hover + cursor: pointer \ No newline at end of file diff --git a/app/styles/app/modules/buttons.sass b/app/styles/app/modules/buttons.sass index d081c2a9..72d14d9b 100644 --- a/app/styles/app/modules/buttons.sass +++ b/app/styles/app/modules/buttons.sass @@ -123,8 +123,8 @@ $button-border-color: #d4d4d4 background-color: #696867 .button-circle - width: 1.7em - height: 1.7em + width: 28px + height: 28px border-radius: 50% .button--showmore diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass index bab6eaf2..434b2e6b 100644 --- a/app/styles/app/modules/icons.sass +++ b/app/styles/app/modules/icons.sass @@ -29,10 +29,6 @@ .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 background-image: inline-image('svg/build-number-icon.svg') @@ -59,25 +55,6 @@ %icon-star-green background-image: inline-image('svg/icon-star-green.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.push background-image: inline-image('svg/push-icon.svg') @@ -97,14 +74,6 @@ .icon--grey.api background-image: inline-image('svg/api-light-grey.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') - .icon--cancel background-image: inline-image('svg/off.svg') @@ -122,6 +91,26 @@ 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') .icon--job.failed, diff --git a/app/styles/app/modules/logo.sass b/app/styles/app/modules/logo.sass new file mode 100644 index 00000000..17f01410 --- /dev/null +++ b/app/styles/app/modules/logo.sass @@ -0,0 +1,21 @@ +.logo + position: relative + display: inline-block + height: $top-height + width: 100px + margin: 0 1.5rem 0 0 + vertical-align: middle + float: left + a + display: block + height: $top-height + z-index: 999 + outline: none + text-indent: -9999px + transition: background-color 200ms ease + background: inline-image('svg/travis-ci-logo.svg') no-repeat 0 50% + + &:hover + background: $cream-light inline-image('svg/travis-ci-logo-hover.svg') no-repeat 50% + .centered & + margin-left: 0 diff --git a/app/styles/app/modules/navigation.sass b/app/styles/app/modules/navigation.sass new file mode 100644 index 00000000..085f5ca3 --- /dev/null +++ b/app/styles/app/modules/navigation.sass @@ -0,0 +1,80 @@ +$nav-line-height: 35px + +.navigation-toggle + float: right + @media #{$medium-up} + display: none + +.navigation + height: 0 + will-change: height + transition: height 200ms ease + overflow: hidden + > ul + padding: 0 + margin: 0 + list-style: none + li + display: block + &.is-open + height: 100% + + @media #{$medium-up} + overflow: visible + > ul > li + display: inline-block + vertical-align: middle + margin-right: 1.5em + + .profile + font-size: $font-size-m + color: $grey-medium + text-align: right + line-height: $top-height + float: right + img + border-radius: 50% + width: 2.7rem + height: 2.7rem + margin-left: 1rem + @media #{$medium-up} + margin-right: 0 + + +.navigation-anchor + display: block + width: 100% + line-height: $nav-line-height + &:hover + text-decoration: underline + cursor: pointer + @media #{$medium-up} + line-height: $top-height + 1px // such magic wow + +.navigation-nested + margin: 0 + padding: 0 0 0 1em + list-style: none + line-height: $nav-line-height + + @media #{$medium-up} + display: none + position: absolute + padding: 0 0 0 0 + margin: -1px 0 0 -1em + z-index: 88 + background-color: #eff0ec + + li + display: block + text-align: left + a + display: block + padding: 0 2em + &:hover + text-decoration: none + background-color: $cream-light + +.navigation-anchor:hover ~ .navigation-nested, +.navigation-nested:hover + display: block diff --git a/app/styles/app/modules/tofuburger.sass b/app/styles/app/modules/tofuburger.sass new file mode 100644 index 00000000..0c153479 --- /dev/null +++ b/app/styles/app/modules/tofuburger.sass @@ -0,0 +1,16 @@ + +.tofuburger + height: $top-height + width: 30px + border: none + line-height: 1 + outline: none + text-indent: -9999px + background: + image: inline-image('line-icons/icon-tofuburger.svg') + size: 100% + position: center center + repeat: no-repeat + color: transparent + &:hover + cursor: pointer diff --git a/app/templates/components/broadcast-tower.hbs b/app/templates/components/broadcast-tower.hbs new file mode 100644 index 00000000..191c1b43 --- /dev/null +++ b/app/templates/components/broadcast-tower.hbs @@ -0,0 +1,41 @@ + + + {{#if isEmpty}} + + {{else}} + + {{/if}} + + diff --git a/app/templates/components/orgs-filter.hbs b/app/templates/components/orgs-filter.hbs index b929ac85..978f008a 100644 --- a/app/templates/components/orgs-filter.hbs +++ b/app/templates/components/orgs-filter.hbs @@ -34,4 +34,3 @@ {{/each}} - diff --git a/app/templates/layouts/profile.hbs b/app/templates/layouts/profile.hbs index 707b4192..33ed9f24 100644 --- a/app/templates/layouts/profile.hbs +++ b/app/templates/layouts/profile.hbs @@ -1,5 +1,5 @@