[GitHub] [airflow] ryanahamilton opened a new pull request #11550: Tree View TI swatch and legend visual tweaks

[GitBox]

ryanahamilton opened a new pull request #11550:
URL: https://github.com/apache/airflow/pull/11550


   <!--
   Thank you for contributing! Please make sure that your code changes
   are covered with tests. And in case of new features or big changes
   remember to adjust the documentation.
   
   Feel free to ping committers for the review!
   
   In case of existing issue, reference it using one of the following:
   
   closes: #ISSUE
   related: #ISSUE
   
   How to write a good git commit message:
   http://chris.beams.io/posts/git-commit/
   -->
   
   Tweaks the presentation of the Task Instance swatches within the tree view 
with very slightly rounded corners of the squares. The goal here being to give 
it a softer presentation that aligns closer to the other recent UI refresh 
updates.
   
   | Before | After |
   |---|---|
   | <img width="78" alt="Image 2020-10-15 at 11 17 42 AM" 
src="https://user-images.githubusercontent.com/3267/96150177-22881300-0ed8-11eb-901d-b0473339c065.png";>
  | <img width="75" alt="Image 2020-10-15 at 10 55 05 AM" 
src="https://user-images.githubusercontent.com/3267/96150216-287df400-0ed8-11eb-8de2-5fd2e4bc0e68.png";>
  |
   
   The following updates to the legends resulted in some refactoring of the 
markup/styles using more explicit patterns. I made necessary adjustments to the 
Graph view scripting to ensure the hover/click interactions continued working 
as expected.
   
   **Tree View Legend - Before:**
   
   <img width="1234" alt="Image 2020-10-15 at 11 17 22 AM" 
src="https://user-images.githubusercontent.com/3267/96150314-3f244b00-0ed8-11eb-91b1-55dc1c2aa23b.png";>
   
   **Tree View Legend - After:**
   
   - Adjusts spacing so it is more clear which label is associated with which 
swatch.
   - Removes the harsh black borders around the state items
   - Adds slight border-radius to match TIs in the Tree View graph
   - The order is changed because the previous styling used floated elements 
that reversed the actual order
   
   <img width="1235" alt="Image 2020-10-15 at 10 52 02 AM" 
src="https://user-images.githubusercontent.com/3267/96150343-451a2c00-0ed8-11eb-9479-ef407217db88.png";>
   
   **Graph View Legend - Before:**
   
   <img width="1235" alt="Image 2020-10-15 at 10 51 41 AM" 
src="https://user-images.githubusercontent.com/3267/96150356-46e3ef80-0ed8-11eb-82bc-367eed0b9b60.png";>
   
   **Graph View Legend - After:**
   - The order is changed because the previous styling used floated elements 
that reversed the actual order
   
   <img width="1234" alt="Image 2020-10-15 at 10 51 28 AM" 
src="https://user-images.githubusercontent.com/3267/96150365-49464980-0ed8-11eb-9f7e-5f67997764cc.png";>
   
   
   
   ---
   **^ Add meaningful description above**
   
   Read the **[Pull Request 
Guidelines](https://github.com/apache/airflow/blob/master/CONTRIBUTING.rst#pull-request-guidelines)**
 for more information.
   In case of fundamental code change, Airflow Improvement Proposal 
([AIP](https://cwiki.apache.org/confluence/display/AIRFLOW/Airflow+Improvements+Proposals))
 is needed.
   In case of a new dependency, check compliance with the [ASF 3rd Party 
License Policy](https://www.apache.org/legal/resolved.html#category-x).
   In case of backwards incompatible changes please leave a note in 
[UPDATING.md](https://github.com/apache/airflow/blob/master/UPDATING.md).
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org