Repository: aurora Updated Branches: refs/heads/master b1648aa48 -> 7d8e213cf
Clean up State Machine CSS to handle long messages Reviewed at https://reviews.apache.org/r/63064/ Project: http://git-wip-us.apache.org/repos/asf/aurora/repo Commit: http://git-wip-us.apache.org/repos/asf/aurora/commit/7d8e213c Tree: http://git-wip-us.apache.org/repos/asf/aurora/tree/7d8e213c Diff: http://git-wip-us.apache.org/repos/asf/aurora/diff/7d8e213c Branch: refs/heads/master Commit: 7d8e213cf71a228e9d53ecee939b8dac402b5a7b Parents: b1648aa Author: David McLaughlin <[email protected]> Authored: Tue Oct 17 13:13:31 2017 -0700 Committer: David McLaughlin <[email protected]> Committed: Tue Oct 17 13:13:31 2017 -0700 ---------------------------------------------------------------------- ui/src/main/js/components/StateMachine.js | 1 - ui/src/main/sass/components/_layout.scss | 8 +- ui/src/main/sass/components/_state-machine.scss | 121 +++++++++++-------- 3 files changed, 73 insertions(+), 57 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/aurora/blob/7d8e213c/ui/src/main/js/components/StateMachine.js ---------------------------------------------------------------------- diff --git a/ui/src/main/js/components/StateMachine.js b/ui/src/main/js/components/StateMachine.js index 2da85f7..94d8d62 100644 --- a/ui/src/main/js/components/StateMachine.js +++ b/ui/src/main/js/components/StateMachine.js @@ -4,7 +4,6 @@ import moment from 'moment'; function StateItem({ className, state, message, timestamp }) { return (<li className={className}> <div className='state-machine-item'> - <svg><circle className='state-machine-bullet' cx={6} cy={6} r={5} /></svg> <div className='state-machine-item-details'> <span className='state-machine-item-state'>{state}</span> <span className='state-machine-item-time'> http://git-wip-us.apache.org/repos/asf/aurora/blob/7d8e213c/ui/src/main/sass/components/_layout.scss ---------------------------------------------------------------------- diff --git a/ui/src/main/sass/components/_layout.scss b/ui/src/main/sass/components/_layout.scss index 4818ab2..103fbcb 100644 --- a/ui/src/main/sass/components/_layout.scss +++ b/ui/src/main/sass/components/_layout.scss @@ -76,7 +76,7 @@ } } -.success { +.content-icon-title.success { .content-icon-title-text { background-color: $colors_success !important; } @@ -86,7 +86,7 @@ } } -.error { +.content-icon-title.error { .content-icon-title-text { background-color: $colors_error !important; } @@ -96,7 +96,7 @@ } } -.highlight { +.content-icon-title.highlight { .content-icon-title-text { background-color: $colors_highlight !important; } @@ -106,7 +106,7 @@ } } -.attention { +.content-icon-title.attention { .content-icon-title-text { background-color: $colors_warning !important; } http://git-wip-us.apache.org/repos/asf/aurora/blob/7d8e213c/ui/src/main/sass/components/_state-machine.scss ---------------------------------------------------------------------- diff --git a/ui/src/main/sass/components/_state-machine.scss b/ui/src/main/sass/components/_state-machine.scss index 804746d..949aedc 100644 --- a/ui/src/main/sass/components/_state-machine.scss +++ b/ui/src/main/sass/components/_state-machine.scss @@ -1,88 +1,105 @@ .state-machine { position: relative; - margin-top: 20px; - padding-left: 120px; + padding-left: 100px; + margin: 20px 0px; ul { list-style-type: none; - padding: 0; } - ul:before { + li { + position:relative; + margin-bottom: 0; + min-height: 45px; + padding-bottom: 10px; + color: $secondary_font_color; + } + + li.active { + color: $primary_font_color; + } + + /* Bullets */ + li:after { + content: ''; + width: 11px; + height: 11px; + border-radius: 50%; + background-color: #EEE; + border: 2px solid #DDD; position: absolute; - top: 10px; - bottom: 25px; - display: block; - width: 3px; - content: ""; - background-color: $grid_color; + left: -20px; + top: 5px; } - ul.okay:before { - background: linear-gradient($grid_highlight_color, $grid_highlight_color, $colors_success); + li.active.error:after { + background-color: $colors_error_light; + border-color: $colors_error; } - ul.error:before { - background: linear-gradient($grid_highlight_color, $grid_highlight_color, $colors_error); + li.active.okay:after { + background-color: $colors_success_light; + border-color: $colors_success; } - ul.attention:before { - background: linear-gradient($grid_highlight_color, $grid_highlight_color, $colors_warning); + li.active.in-progress:after { + background-color: $colors_highlight_light; + border-color: $colors_highlight; } - ul.in-progress:before { - background: linear-gradient($grid_highlight_color, $grid_highlight_color, $colors_highlight); + li.active.attention:after { + background-color: $colors_warning_light; + border-color: $colors_warning; } - li { - margin: 20px 0px; - position: relative; - color: $secondary_font_color; - min-height: 30px; + /* Lines */ + li:before { + content:""; + position: absolute; + left: -16px; + background-color: #DDD; + height: 100%; + width: 3px; } - li.active { - color: $primary_font_color; + ul.okay li:nth-last-child(2):before { + background: linear-gradient($grid_highlight_color, $grid_highlight_color, $colors_success); } - .state-machine-item { - display: flex; - flex-direction: row; + ul.error li:nth-last-child(2):before { + background: linear-gradient($grid_highlight_color, $grid_highlight_color, $colors_error); } - svg { - width: 15px; - height: 15px; - margin-left: -4px; - margin-right: 5px; - display: inline-block; - margin-top: 4px; + ul.attention li:nth-last-child(2):before { + background: linear-gradient($grid_highlight_color, $grid_highlight_color, $colors_warning); + } + + ul.in-progress li:nth-last-child(2):before { + background: linear-gradient($grid_highlight_color, $grid_highlight_color, $colors_highlight); + } + + ul.error li:last-child:before { + background-color: $colors_error; } - .state-machine-bullet { - fill: $grid_color; - stroke: $grid_highlight_color; - stroke-width: 2; + ul.okay li:last-child:before { + background-color: $colors_success; } - .active.okay .state-machine-bullet { - fill: $colors_success_light; - stroke: $colors_success; + ul.attention li:last-child:before { + background-color: $colors_warning; } - .active.attention .state-machine-bullet { - fill: #f3bc88; - stroke: #FA9F47; + ul.in-progress li:last-child:before { + background-color: $colors_highlight; } - .active.error .state-machine-bullet { - fill: $colors_error_light; - stroke: $colors_error; + li:first-child:before { + top: 6px; } - .active.in-progress .state-machine-bullet { - fill: $colors_highlight_light; - stroke: $colors_highlight; + li:last-child:before { + height: 6px; } .state-machine-item-details { @@ -111,4 +128,4 @@ font-size: 12px; color: $secondary_font_color; } -} \ No newline at end of file +}
