aurora-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From dmclaugh...@apache.org
Subject aurora git commit: Clean up State Machine CSS to handle long messages
Date Tue, 17 Oct 2017 20:13:45 GMT
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 <david@dmclaughlin.com>
Authored: Tue Oct 17 13:13:31 2017 -0700
Committer: David McLaughlin <david@dmclaughlin.com>
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
+}


Mime
View raw message