ryanahamilton opened a new pull request #11195: URL: https://github.com/apache/airflow/pull/11195
Resolves #10953. A refreshed UI for the 2.0 release. The existing "theming" is a bit long in the tooth and this PR attempts to give it a modern look and some freshness to compliment all of the new features under the hood. The majority of the changes to UI have been done through updates to the Bootstrap theme contained in `bootstrap-theme.css`. These are simply overrides to the default stylings that are packaged with Bootstrap. I've tweaked, refactored, and cleaned up syntax across most of the view, script, and CSS files. I've highlighted outstanding questions in **bold** below. ## Color Implements a full refresh of the color palette based on the colors in the [brand book](https://cwiki.apache.org/confluence/display/AIRFLOW/Brandbook) (outlined in black below). Those colors have been expanded to a full color system robust enough to cover all aspects of the UI. **Where would the most ideal place to document this?** Out of scope for this PR, but I would typically put these all into CSS variables in a shared import file as documentation.  ## Iconography The current icon system (Bootstrap Glyficons) has been replaced with the [Material Design Icons](https://material.io/resources/icons/) (Apache license version 2.0). They have a clean, modern look, and a robust selection. Like Glyficons, It is implemented via webfont. I attempted (and would have preferred) to install it via NPM package, but it appears that it is not kept up-to-date with their CDN/downloadable libraries, so instead am serving it via static files. Most of the icons are very similar to their predecessors, others I've attempted to select the best representation possible based on the available set.  ## Typography The UI currently does not utilize either of the font-families (Rubik, Operator Mono) designated by the brand guidelines. I did some experimentation with these, but there were some immediate, glaring problems in regards to the overall widths of Rubik. I may follow-up with a partial implementation that only applies to headings. ## Global Header - Updated the global nav menus to open on hover instead of just on click. - Removed icons from the global nav items and their children (in drop-downs). They were implemented inconsistently and used the AppBuilder supplied FontAwesome icons. This simplifies the presentation and prevents us from mixing multiple conflicting-styled icon systems. - Removed the "About" navigation menu. It only contained a link to the "Version" view. Instead, I've taken the contents of the Version view and added a global footer that displays the same information. - Simplified the Time Zone selector by removing the day and seconds. The hours are the most relevant part of the timestamp when it comes to timezones. The constant motion of the changing seconds felt like a bit of a distraction. Tweaked the styling within the dropdown as well. - Replaced the current user's name with a circled monogram derived from their initials. **First and Last name appear to be required fields—are there any cases where there might not be values and need a fallback?** - I've partially removed the ability to define a custom background color of the navbar (`navbar_color`), it likely wouldn't translate well for users who currently utilizing it since the navbar was previously optimized for a dark background bar. Appears to be a bit of a superfluous feature. **Is it something we can remove completely in order to ensure a clean presentation, or does the support need to be left in?** - I threw a little interaction easter egg in there—can you spot it? **Before:**  **After:**  ## DAGs View (Home) - Updated the table presentation with a cleaner look that should be a bit more pleasing to look at. - Actions have been separated from links to better communicate their purpose. I do question wether the links should be here at all. They add a lot of visual noise and are certainly not intuitive for new users. | Before | After | |---|---| |  |  | ## DAG Views Most notable change across these views is the cleaned up run selection form fields. They now have a tidy presentation that is consistent across the views. I believe this further highlights the incongruence of the Task Instance navigation and why I've proposed #11089. **Before:**  **After:**  ## Flask AppBuilder CRUD Views These views are automatically generated by AppBuilder, so there isn't access to markup/icon modifications (hence why they still use the Font Awesome icons). It is reliant on Bootstrap markup/classes, so I was able to update the colors to utilize the new theming.  ## Misc. Added all non-vendor stylesheets to the Webpack configuration. This outputs them with a fingerprinted filename and ensures the latest version isn't missed by the client due to caching. ---------------------------------------------------------------- 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: [email protected]
