diff options
author | Phil Hughes <me@iamphill.com> | 2016-04-20 12:11:22 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2016-06-10 14:07:51 +0300 |
commit | dc6ec2adf82c2b2fe1ab6ef076432fd741d3afbb (patch) | |
tree | c5dd8fc7171503bff7b2f7819fa5451fa9f59e25 /app/assets | |
parent | cfc99bbd1390bc548a703fdc7857c7db5b0e7c13 (diff) |
CI build page UI update
Added sidebar
Removed elements not present in design
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/application.js.coffee | 4 | ||||
-rw-r--r-- | app/assets/javascripts/ci/build.coffee | 91 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/sidebar.scss | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 3 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/builds.scss | 91 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/issuable.scss | 6 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/xterm.scss | 19 |
7 files changed, 160 insertions, 58 deletions
diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index b28327ce12d..e0ca546350b 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -267,8 +267,8 @@ $ -> $(document).trigger('breakpoint:change', [bootstrapBreakpoint]) $(window) - .off "resize" - .on "resize", (e) -> + .off "resize.app" + .on "resize.app", (e) -> fitSidebarForSize() gl.awardsHandler = new AwardsHandler() diff --git a/app/assets/javascripts/ci/build.coffee b/app/assets/javascripts/ci/build.coffee index 98d05e41273..f763ba96e33 100644 --- a/app/assets/javascripts/ci/build.coffee +++ b/app/assets/javascripts/ci/build.coffee @@ -1,19 +1,31 @@ -class CiBuild +class @CiBuild @interval: null @state: null - constructor: (build_url, build_status, build_state) -> + constructor: (@build_url, @build_status, @state) -> clearInterval(CiBuild.interval) - @state = build_state + # Init breakpoint checker + @bp = Breakpoints.get() + @hideSidebar() + $('.js-build-sidebar').niceScroll() + $(document) + .off 'click', '.js-sidebar-build-toggle' + .on 'click', '.js-sidebar-build-toggle', @toggleSidebar - @initScrollButtonAffix() + $(window) + .off 'resize.build' + .on 'resize.build', @hideSidebar - if build_status == "running" || build_status == "pending" + if $('#build-trace').length + @getInitialBuildTrace() + @initScrollButtonAffix() + + if @build_status is "running" or @build_status is "pending" # # Bind autoscroll button to follow build output # - $("#autoscroll-button").bind "click", -> + $('#autoscroll-button').on 'click', -> state = $(this).data("state") if "enabled" is state $(this).data "state", "disabled" @@ -27,26 +39,37 @@ class CiBuild # Only valid for runnig build when output changes during time # CiBuild.interval = setInterval => - if window.location.href.split("#").first() is build_url - last_state = @state - $.ajax - url: build_url + "/trace.json?state=" + encodeURIComponent(@state) - dataType: "json" - success: (log) => - return unless last_state is @state - - if log.state and log.status is "running" - @state = log.state - if log.append - $('.fa-refresh').before log.html - else - $('#build-trace code').html log.html - $('#build-trace code').append '<i class="fa fa-refresh fa-spin"/>' - @checkAutoscroll() - else if log.status isnt build_status - Turbolinks.visit build_url + if window.location.href.split("#").first() is @build_url + @getBuildTrace() , 4000 + getInitialBuildTrace: -> + $.ajax + url: @build_url + dataType: 'json' + success: (build_data) -> + $('.js-build-output').html build_data.trace_html + + if build_data.status is 'success' or build_data.status is 'failed' + $('.js-build-refresh').remove() + + getBuildTrace: -> + $.ajax + url: "#{@build_url}/trace.json?state=#{encodeURIComponent(@state)}" + dataType: "json" + success: (log) => + if log.state + @state = log.state + + if log.status is "running" + if log.append + $('.js-build-output').append log.html + else + $('.js-build-output').html log.html + @checkAutoscroll() + else if log.status isnt @build_status + Turbolinks.visit @build_url + checkAutoscroll: -> $("html,body").scrollTop $("#build-trace").height() if "enabled" is $("#autoscroll-button").data("state") @@ -61,4 +84,22 @@ class CiBuild $body.outerHeight() - ($buildTrace.outerHeight() + $buildTrace.offset().top) ) -@CiBuild = CiBuild + shouldHideSidebar: -> + bootstrapBreakpoint = @bp.getBreakpointSize() + + bootstrapBreakpoint is 'xs' or bootstrapBreakpoint is 'sm' + + toggleSidebar: => + if @shouldHideSidebar() + $('.js-build-sidebar') + .toggleClass 'right-sidebar-expanded right-sidebar-collapsed' + + hideSidebar: => + if @shouldHideSidebar() + $('.js-build-sidebar') + .removeClass 'right-sidebar-expanded' + .addClass 'right-sidebar-collapsed' + else + $('.js-build-sidebar') + .removeClass 'right-sidebar-collapsed' + .addClass 'right-sidebar-expanded' diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 94985413746..06a688690f8 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -273,7 +273,9 @@ padding-right: 0; @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { - padding-right: $sidebar_collapsed_width; + &:not(.build-sidebar) { + padding-right: $sidebar_collapsed_width; + } } @media (min-width: $screen-md-min) { diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 99e3df119ed..847b2f80bdf 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -260,3 +260,6 @@ $calendar-header-color: #b8b8b8; $calendar-hover-bg: #ecf3fe; $calendar-border-color: rgba(#000, .1); $calendar-unselectable-bg: #faf9f9; + +$ci-output-bg: #1d1f21; +$ci-text-color: #c5c8c6; diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss index 44222e8e8a4..e8f1935d239 100644 --- a/app/assets/stylesheets/pages/builds.scss +++ b/app/assets/stylesheets/pages/builds.scss @@ -53,37 +53,92 @@ left: 70px; } } +} - .build-widget { - padding: 10px; - background: $background-color; - margin-bottom: 20px; - border-radius: 4px; +.build-header { + position: relative; + padding-right: 40px; - .title { - margin-top: 0; - color: #666; - line-height: 1.5; - } - .attr-name { - color: #777; - } + @media (min-width: $screen-sm-min) { + padding-right: 0; } - .alert-disabled { - background: $background-color; + a { + color: $gl-gray; - a { - color: #3084bb !important; + &:hover { + color: $gl-link-color; + text-decoration: none; } } + + code { + color: $code-color; + } + + .avatar { + float: none; + margin-right: 2px; + margin-left: 2px; + } } table.builds { - .build-link { a { color: $gl-dark-link-color; } } } + +.build-trace { + background: $ci-output-bg; + color: $ci-text-color; + white-space: pre; + overflow-x: auto; + font-size: 12px; + + .fa-refresh { + font-size: 24px; + } + + .bash { + display: block; + } +} + +.right-sidebar.build-sidebar { + padding-top: $gl-padding; + padding-bottom: $gl-padding; + + &.right-sidebar-collapsed { + display: none; + } + + .block { + width: 100%; + } + + .build-sidebar-header { + padding-top: 0; + + .gutter-toggle { + margin-top: 0; + } + } +} + +.build-detail-row { + margin-bottom: 5px; +} + +.build-light-text { + color: $gl-placeholder-color; +} + +.build-gutter-toggle { + position: absolute; + top: 50%; + right: 0; + margin-top: -17px; +} diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 787c387379e..ea453ce356a 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -29,7 +29,7 @@ } } -.issuable-sidebar { +.right-sidebar { a { color: inherit; } @@ -74,6 +74,10 @@ } } + .block-first { + padding-top: 0; + } + .title { color: $gl-text-color; margin-bottom: 10px; diff --git a/app/assets/stylesheets/pages/xterm.scss b/app/assets/stylesheets/pages/xterm.scss index 3f28e402929..8d855ce99b0 100644 --- a/app/assets/stylesheets/pages/xterm.scss +++ b/app/assets/stylesheets/pages/xterm.scss @@ -11,18 +11,15 @@ $magenta: #cd00cd; $cyan: #00cdcd; $white: #e5e5e5; - $l-black: #7f7f7f; - $l-red: #f00; - $l-green: #0f0; - $l-yellow: #ff0; - $l-blue: #5c5cff; - $l-magenta: #f0f; - $l-cyan: #0ff; - $l-white: #fff; + $l-black: #373b41; + $l-red: #c66; + $l-green: #b5bd68; + $l-yellow: #f0c674; + $l-blue: #81a2be; + $l-magenta: #b294bb; + $l-cyan: #8abeb7; + $l-white: $ci-text-color; - .term-bold { - font-weight: bold; - } .term-italic { font-style: italic; } |