You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by GitBox <gi...@apache.org> on 2022/04/08 18:41:04 UTC
[GitHub] [airflow] bbovenzi opened a new pull request, #22866: Fix Grid view font sizing
bbovenzi opened a new pull request, #22866:
URL: https://github.com/apache/airflow/pull/22866
Too many font sizes in Grid view were being set to `10px` from how we define `html { }`. Across the rest of the UI, this is overwritten by the style in `body { }`, but not in the shadow root we had to create for the react sections. After resetting a default size, this enabled us to clean up a lot of manual styling.
Also included: Cleaned up the Details header panel to remove the need of `color="black"` which was inconsistent with the rest of our colors.
Before:
<img width="1193" alt="Screen Shot 2022-04-08 at 2 35 56 PM" src="https://user-images.githubusercontent.com/4600967/162501919-61149ae7-bf19-4b52-b37a-22dd0c07a550.png">
After:
<img width="1177" alt="Screen Shot 2022-04-08 at 2 35 24 PM" src="https://user-images.githubusercontent.com/4600967/162501974-7552940f-4876-4d95-8686-4972f62c2fec.png">
Before:
<img width="1195" alt="Screen Shot 2022-04-08 at 2 36 10 PM" src="https://user-images.githubusercontent.com/4600967/162502018-5c419f89-852d-47af-9e23-00199895e7cf.png">
After:
<img width="1181" alt="Screen Shot 2022-04-08 at 2 35 00 PM" src="https://user-images.githubusercontent.com/4600967/162502032-d7cd5a37-b414-4bff-9c9c-1cc6102a6de4.png">
---
**^ Add meaningful description above**
Read the **[Pull Request Guidelines](https://github.com/apache/airflow/blob/main/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/main/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.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] github-actions[bot] commented on pull request #22866: Fix Grid view font sizing
Posted by GitBox <gi...@apache.org>.
github-actions[bot] commented on PR #22866:
URL: https://github.com/apache/airflow/pull/22866#issuecomment-1093216072
The PR is likely OK to be merged with just subset of tests for default Python and Database versions without running the full matrix of tests, because it does not modify the core of Airflow. If the committers decide that the full tests matrix is needed, they will add the label 'full tests needed'. Then you should rebase to the latest main or amend the last commit of the PR, and push it with --force-with-lease.
--
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.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] bbovenzi commented on a diff in pull request #22866: Fix Grid view font sizing
Posted by GitBox <gi...@apache.org>.
bbovenzi commented on code in PR #22866:
URL: https://github.com/apache/airflow/pull/22866#discussion_r846531843
##########
airflow/www/static/js/tree/details/Header.jsx:
##########
@@ -72,22 +73,22 @@ const Header = () => {
const isTaskDetails = runId && taskId;
return (
- <Breadcrumb color="gray.300" mt={4}>
+ <Breadcrumb mt={4} separator={<Text color="gray.300">/</Text>}>
Review Comment:
It was auto-generated by the component before. This just replaced the default.
--
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.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] ashb commented on a diff in pull request #22866: Fix Grid view font sizing
Posted by GitBox <gi...@apache.org>.
ashb commented on code in PR #22866:
URL: https://github.com/apache/airflow/pull/22866#discussion_r846428575
##########
airflow/www/static/js/tree/details/Header.jsx:
##########
@@ -72,22 +73,22 @@ const Header = () => {
const isTaskDetails = runId && taskId;
return (
- <Breadcrumb color="gray.300" mt={4}>
+ <Breadcrumb mt={4} separator={<Text color="gray.300">/</Text>}>
Review Comment:
Where was the `/` before? (I saw it in the screenshots, but not the markup)
--
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.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] bbovenzi commented on a diff in pull request #22866: Fix Grid view font sizing
Posted by GitBox <gi...@apache.org>.
bbovenzi commented on code in PR #22866:
URL: https://github.com/apache/airflow/pull/22866#discussion_r846394502
##########
airflow/www/static/js/tree/details/Header.jsx:
##########
@@ -72,22 +73,22 @@ const Header = () => {
const isTaskDetails = runId && taskId;
return (
- <Breadcrumb color="gray.300" mt={4}>
+ <Breadcrumb mt={4} separator={<Text color="gray.300">/</Text>}>
Review Comment:
The Text node allows me to style just the `/` with `gray.300` instead of every child element and then having to manually set most children back to a darker color.
--
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.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] ryanahamilton commented on a diff in pull request #22866: Fix Grid view font sizing
Posted by GitBox <gi...@apache.org>.
ryanahamilton commented on code in PR #22866:
URL: https://github.com/apache/airflow/pull/22866#discussion_r846427491
##########
airflow/www/static/js/tree/details/Header.jsx:
##########
@@ -72,22 +73,22 @@ const Header = () => {
const isTaskDetails = runId && taskId;
return (
- <Breadcrumb color="gray.300" mt={4}>
+ <Breadcrumb mt={4} separator={<Text color="gray.300">/</Text>}>
Review Comment:
I'm not exactly sure what your compile markup looks like, but I'd guess you don't actually need/want a `<p></p>`?
```suggestion
<Breadcrumb mt={4} separator={<Box as="span" color="gray.300">/</Box>}>
```
##########
airflow/www/static/js/tree/index.jsx:
##########
@@ -51,11 +51,21 @@ const queryClient = new QueryClient({
},
});
+const theme = extendTheme({
+ components: {
+ Tooltip: {
+ baseStyle: {
+ fontSize: 'md',
+ },
+ },
+ },
+});
+
Review Comment:
When/if this gets larger, we'd probably want to move it to a dedicated file.
--
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.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] bbovenzi commented on a diff in pull request #22866: Fix Grid view font sizing
Posted by GitBox <gi...@apache.org>.
bbovenzi commented on code in PR #22866:
URL: https://github.com/apache/airflow/pull/22866#discussion_r846394502
##########
airflow/www/static/js/tree/details/Header.jsx:
##########
@@ -72,22 +73,22 @@ const Header = () => {
const isTaskDetails = runId && taskId;
return (
- <Breadcrumb color="gray.300" mt={4}>
+ <Breadcrumb mt={4} separator={<Text color="gray.300">/</Text>}>
Review Comment:
The Text node allows me to style just the `/` with `gray.300` instead of every child element and then having to manually set children back to a darker color.
--
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.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] ashb commented on a diff in pull request #22866: Fix Grid view font sizing
Posted by GitBox <gi...@apache.org>.
ashb commented on code in PR #22866:
URL: https://github.com/apache/airflow/pull/22866#discussion_r846391778
##########
airflow/www/static/js/tree/details/Header.jsx:
##########
@@ -72,22 +73,22 @@ const Header = () => {
const isTaskDetails = runId && taskId;
return (
- <Breadcrumb color="gray.300" mt={4}>
+ <Breadcrumb mt={4} separator={<Text color="gray.300">/</Text>}>
Review Comment:
The separator was `/` before? (Just wondering where the added `<Text>` node is needed
--
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.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] ashb merged pull request #22866: Fix Grid view font sizing
Posted by GitBox <gi...@apache.org>.
ashb merged PR #22866:
URL: https://github.com/apache/airflow/pull/22866
--
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.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org