From 4730fdaffe3e7175bcc431b61492fe641b01af48 Mon Sep 17 00:00:00 2001 From: Arash Afghahi Date: Thu, 4 Feb 2021 18:46:56 -0500 Subject: [PATCH 1/8] button fix --- .../src/SqlLab/components/RunQueryActionButton.tsx | 6 +++++- superset-frontend/src/common/components/Dropdown.tsx | 11 +++++++++-- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx index 1208de330a73f..a4fc86b72f0a3 100644 --- a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx +++ b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx @@ -109,7 +109,11 @@ const RunQueryActionButton = ({ overlay: overlayCreateAsMenu, icon: ( ), diff --git a/superset-frontend/src/common/components/Dropdown.tsx b/superset-frontend/src/common/components/Dropdown.tsx index ff9dba8e67eb5..fe4454c8bd340 100644 --- a/superset-frontend/src/common/components/Dropdown.tsx +++ b/superset-frontend/src/common/components/Dropdown.tsx @@ -82,14 +82,18 @@ const StyledDropdownButton = styled.div` margin: 0; width: 120px; } - &:last-of-type { + :disabled { + background-color: ${({ theme }) => theme.colors.grayscale.light2}; + color: ${({ theme }) => theme.colors.grayscale.base}; + } + &:nth-child(2) { margin: 0; border-radius: ${({ theme }) => `0 ${theme.gridUnit}px ${theme.gridUnit}px 0`}; width: ${({ theme }) => theme.gridUnit * 9}px; &:before, &:hover:before { - border-left: 1px solid ${({ theme }) => theme.colors.grayscale.light5}; + border-left: 2px solid ${({ theme }) => theme.colors.grayscale.light5}; content: ''; display: block; height: 23px; @@ -98,6 +102,9 @@ const StyledDropdownButton = styled.div` top: ${({ theme }) => theme.gridUnit * 0.75}px; width: ${({ theme }) => theme.gridUnit * 0.25}px; } + :disabled:before { + border-left: 1px solid ${({ theme }) => theme.colors.grayscale.base}; + } } } } From 983eae0476d9a40632b4a5625babf3637930feb2 Mon Sep 17 00:00:00 2001 From: Arash Afghahi Date: Thu, 4 Feb 2021 20:28:23 -0500 Subject: [PATCH 2/8] tooltips disabled when it is disabled, border width changed --- .../src/SqlLab/components/RunQueryActionButton.tsx | 11 +++++++---- superset-frontend/src/common/components/Dropdown.tsx | 2 +- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx index a4fc86b72f0a3..8a08aa97c94e1 100644 --- a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx +++ b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx @@ -91,17 +91,20 @@ const RunQueryActionButton = ({ ? (DropdownButton as React.FC) : Button; + const isDisabled = !sql.trim(); + return ( onClick(shouldShowStopBtn, allowAsync, runQuery, stopQuery) } - disabled={!sql.trim()} + disabled={isDisabled} tooltip={ - shouldShowStopBtn + sql.trim() && + (shouldShowStopBtn ? t('Stop running (Ctrl + x)') - : t('Run query (Ctrl + Return)') + : t('Run query (Ctrl + Return)')) } cta {...(overlayCreateAsMenu @@ -110,7 +113,7 @@ const RunQueryActionButton = ({ icon: ( theme.gridUnit * 9}px; &:before, &:hover:before { - border-left: 2px solid ${({ theme }) => theme.colors.grayscale.light5}; + border-left: 1px solid ${({ theme }) => theme.colors.grayscale.light5}; content: ''; display: block; height: 23px; From c4b00f2783de2c74fe062d4e88cd88132f1826b7 Mon Sep 17 00:00:00 2001 From: Arash Afghahi Date: Thu, 4 Feb 2021 20:56:47 -0500 Subject: [PATCH 3/8] added isDisabled to tooltip --- .../src/SqlLab/components/RunQueryActionButton.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx index 8a08aa97c94e1..c2534c6352e47 100644 --- a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx +++ b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx @@ -101,10 +101,10 @@ const RunQueryActionButton = ({ } disabled={isDisabled} tooltip={ - sql.trim() && - (shouldShowStopBtn - ? t('Stop running (Ctrl + x)') - : t('Run query (Ctrl + Return)')) + (!isDisabled && + (shouldShowStopBtn + ? t('Stop running (Ctrl + x)') + : t('Run query (Ctrl + Return)'))) as string } cta {...(overlayCreateAsMenu From f9a0b88b6e739a28c1209d7b369fb33417b998b0 Mon Sep 17 00:00:00 2001 From: Arash Afghahi Date: Mon, 8 Feb 2021 12:53:22 -0500 Subject: [PATCH 4/8] worked on transition times --- superset-frontend/src/common/components/Dropdown.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/superset-frontend/src/common/components/Dropdown.tsx b/superset-frontend/src/common/components/Dropdown.tsx index 0dc18833e93da..90ed0b516cda9 100644 --- a/superset-frontend/src/common/components/Dropdown.tsx +++ b/superset-frontend/src/common/components/Dropdown.tsx @@ -76,6 +76,7 @@ const StyledDropdownButton = styled.div` line-height: 13px; outline: none; text-transform: uppercase; + transition: background-color 500ms; &:first-of-type { border-radius: ${({ theme }) => `${theme.gridUnit}px 0 0 ${theme.gridUnit}px`}; @@ -87,6 +88,7 @@ const StyledDropdownButton = styled.div` color: ${({ theme }) => theme.colors.grayscale.base}; } &:nth-child(2) { + transition: background-color 0ms; margin: 0; border-radius: ${({ theme }) => `0 ${theme.gridUnit}px ${theme.gridUnit}px 0`}; From 42318dd641367abbab388441f6c02385f70ccb44 Mon Sep 17 00:00:00 2001 From: Arash Afghahi Date: Mon, 8 Feb 2021 14:53:20 -0500 Subject: [PATCH 5/8] cleaned up transition to be local instead of global --- .../src/SqlLab/components/RunQueryActionButton.tsx | 1 + superset-frontend/src/common/components/Dropdown.tsx | 6 ++---- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx index c2534c6352e47..053d7392aa083 100644 --- a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx +++ b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx @@ -69,6 +69,7 @@ const onClick = ( const StyledButton = styled.span` button { line-height: 13px; + transition: background-color 0ms; &:last-of-type { margin-right: ${({ theme }) => theme.gridUnit * 2}px; } diff --git a/superset-frontend/src/common/components/Dropdown.tsx b/superset-frontend/src/common/components/Dropdown.tsx index 90ed0b516cda9..9b4738ed69619 100644 --- a/superset-frontend/src/common/components/Dropdown.tsx +++ b/superset-frontend/src/common/components/Dropdown.tsx @@ -76,19 +76,17 @@ const StyledDropdownButton = styled.div` line-height: 13px; outline: none; text-transform: uppercase; - transition: background-color 500ms; &:first-of-type { border-radius: ${({ theme }) => `${theme.gridUnit}px 0 0 ${theme.gridUnit}px`}; margin: 0; width: 120px; } - :disabled { + &:disabled { background-color: ${({ theme }) => theme.colors.grayscale.light2}; color: ${({ theme }) => theme.colors.grayscale.base}; } &:nth-child(2) { - transition: background-color 0ms; margin: 0; border-radius: ${({ theme }) => `0 ${theme.gridUnit}px ${theme.gridUnit}px 0`}; @@ -104,7 +102,7 @@ const StyledDropdownButton = styled.div` top: ${({ theme }) => theme.gridUnit * 0.75}px; width: ${({ theme }) => theme.gridUnit * 0.25}px; } - :disabled:before { + &:disabled:before { border-left: 1px solid ${({ theme }) => theme.colors.grayscale.base}; } } From bb983958a736a3e1ee684f381602874d8cb0a4e9 Mon Sep 17 00:00:00 2001 From: Arash Afghahi Date: Mon, 8 Feb 2021 15:06:54 -0500 Subject: [PATCH 6/8] made it local --- superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx index 053d7392aa083..042e90b04086a 100644 --- a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx +++ b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx @@ -70,6 +70,7 @@ const StyledButton = styled.span` button { line-height: 13px; transition: background-color 0ms; + // this is to over ride a previous transition built into the component &:last-of-type { margin-right: ${({ theme }) => theme.gridUnit * 2}px; } From 40f15cd2f822f256586155fb0db1a5ba9cfa4656 Mon Sep 17 00:00:00 2001 From: Arash Afghahi Date: Mon, 8 Feb 2021 15:19:44 -0500 Subject: [PATCH 7/8] linted --- .../src/SqlLab/components/RunQueryActionButton.tsx | 2 +- superset-frontend/src/common/components/Dropdown.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx index 042e90b04086a..18f2ebaba6e8e 100644 --- a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx +++ b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx @@ -69,8 +69,8 @@ const onClick = ( const StyledButton = styled.span` button { line-height: 13px; - transition: background-color 0ms; // this is to over ride a previous transition built into the component + transition: background-color 0ms; &:last-of-type { margin-right: ${({ theme }) => theme.gridUnit * 2}px; } diff --git a/superset-frontend/src/common/components/Dropdown.tsx b/superset-frontend/src/common/components/Dropdown.tsx index 9b4738ed69619..3a9ff8dbb1b15 100644 --- a/superset-frontend/src/common/components/Dropdown.tsx +++ b/superset-frontend/src/common/components/Dropdown.tsx @@ -65,7 +65,6 @@ const MenuDotsWrapper = styled.div` padding: ${({ theme }) => theme.gridUnit * 2}px; padding-left: ${({ theme }) => theme.gridUnit}px; `; - const StyledDropdownButton = styled.div` .ant-btn-group { button.ant-btn { From 6aa99c3f333d6e1450bc34cd8245789e8f9d9f14 Mon Sep 17 00:00:00 2001 From: Arash Date: Wed, 10 Feb 2021 09:46:09 -0500 Subject: [PATCH 8/8] trying to resolve a conflict --- superset-frontend/src/common/components/Dropdown.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/superset-frontend/src/common/components/Dropdown.tsx b/superset-frontend/src/common/components/Dropdown.tsx index 3a9ff8dbb1b15..9b4738ed69619 100644 --- a/superset-frontend/src/common/components/Dropdown.tsx +++ b/superset-frontend/src/common/components/Dropdown.tsx @@ -65,6 +65,7 @@ const MenuDotsWrapper = styled.div` padding: ${({ theme }) => theme.gridUnit * 2}px; padding-left: ${({ theme }) => theme.gridUnit}px; `; + const StyledDropdownButton = styled.div` .ant-btn-group { button.ant-btn {