fix: Show copy icon (apache#11847)

* Show copy icon * Fix eslint * Fix copy button on view query modal * Remove comments
bipinct · Dec 2, 2020 · 0728878 · 0728878
1 parent 618a73d
commit 0728878
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/superset-frontend/src/components/CopyToClipboard.jsx b/superset-frontend/src/components/CopyToClipboard.jsx
@@ -71,15 +71,11 @@ class CopyToClipboard extends React.Component {
   }
 
   getDecoratedCopyNode() {
-    return React.cloneElement(
-      this.props.copyNode,
-      {
-        style: { cursor: 'pointer' },
-        onClick: this.onClick,
-        onMouseOut: this.onMouseOut,
-      },
-      null,
-    );
+    return React.cloneElement(this.props.copyNode, {
+      style: { cursor: 'pointer' },
+      onClick: this.onClick,
+      onMouseOut: this.onMouseOut,
+    });
   }
 
   resetTooltipText() {

diff --git a/superset-frontend/src/explore/components/DisplayQueryButton.jsx b/superset-frontend/src/explore/components/DisplayQueryButton.jsx
@@ -75,6 +75,24 @@ const CopyButton = styled(Button)`
   && {
     margin-left: ${({ theme }) => theme.gridUnit * 2}px;
   }
+
+  i {
+    padding: 0;
+  }
+`;
+
+const CopyButtonViewQuery = styled(Button)`
+  padding: ${({ theme }) => theme.gridUnit / 2}px
+    ${({ theme }) => theme.gridUnit * 2.5}px;
+  font-size: ${({ theme }) => theme.typography.sizes.s}px;
+
+  && {
+    margin-bottom: 5px;
+  }
+
+  i {
+    padding: 0;
+  }
 `;
 
 export const DisplayQueryButton = props => {
@@ -188,9 +206,9 @@ export const DisplayQueryButton = props => {
             text={query}
             shouldShowText={false}
             copyNode={
-              <Button style={{ position: 'absolute', right: 20 }}>
+              <CopyButtonViewQuery>
                 <i className="fa fa-clipboard" />
-              </Button>
+              </CopyButtonViewQuery>
             }
           />
           <SyntaxHighlighter language={language} style={github}>