You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by GitBox <gi...@apache.org> on 2019/01/08 18:06:02 UTC
[GitHub] betodealmeida closed pull request #6593: Introduce a more visible
resize grabber to the SQL editor
betodealmeida closed pull request #6593: Introduce a more visible resize grabber to the SQL editor
URL: https://github.com/apache/incubator-superset/pull/6593
This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:
As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):
diff --git a/superset/assets/src/SqlLab/components/SqlEditor.jsx b/superset/assets/src/SqlLab/components/SqlEditor.jsx
index 0ed5e933e3..e00efa727a 100644
--- a/superset/assets/src/SqlLab/components/SqlEditor.jsx
+++ b/superset/assets/src/SqlLab/components/SqlEditor.jsx
@@ -82,7 +82,7 @@ class SqlEditor extends React.PureComponent {
onResize() {
const height = this.sqlEditorHeight();
const editorPaneHeight = this.props.queryEditor.height || 200;
- const splitPaneHandlerHeight = 15;
+ const splitPaneHandlerHeight = 8; // 4px of height + 4px of top-margin
this.setState({
editorPaneHeight,
southPaneHeight: height - editorPaneHeight - splitPaneHandlerHeight,
@@ -218,8 +218,8 @@ class SqlEditor extends React.PureComponent {
);
}
return (
- <div className="sql-toolbar clearfix" id="js-sql-toolbar">
- <div className="pull-left">
+ <div className="sql-toolbar" id="js-sql-toolbar">
+ <div>
<Form inline>
<span className="m-r-5">
<RunQueryActionButton
@@ -265,7 +265,7 @@ class SqlEditor extends React.PureComponent {
</span>
</Form>
</div>
- <div className="pull-right">
+ <div>
<TemplateParamsEditor
language="json"
onChange={(params) => {
diff --git a/superset/assets/src/SqlLab/components/SqlEditorLeftBar.jsx b/superset/assets/src/SqlLab/components/SqlEditorLeftBar.jsx
index fc38c37be6..933afa4704 100644
--- a/superset/assets/src/SqlLab/components/SqlEditorLeftBar.jsx
+++ b/superset/assets/src/SqlLab/components/SqlEditorLeftBar.jsx
@@ -168,7 +168,7 @@ class SqlEditorLeftBar extends React.PureComponent {
}
const database = this.props.database || {};
return (
- <div className="clearfix sql-toolbar">
+ <div className="clearfix">
<div>
<AsyncSelect
dataEndpoint={
diff --git a/superset/assets/src/SqlLab/main.less b/superset/assets/src/SqlLab/main.less
index 4dca6fdea2..1e148d1828 100644
--- a/superset/assets/src/SqlLab/main.less
+++ b/superset/assets/src/SqlLab/main.less
@@ -112,9 +112,16 @@ div.Workspace {
.p-t-10 {
padding-top: 10px;
}
-.sqllab-toolbar {
- padding-top: 5px;
- border-bottom: 1px solid #DDD;
+.sql-toolbar {
+ padding: 10px;
+ background-color: #e8e8e8;
+ display: flex;
+ justify-content: space-between;
+ border-bottom: 2px solid #ccc;
+
+ form {
+ margin-block-end: 0;
+ }
}
.no-shadow {
box-shadow: none;
@@ -168,56 +175,22 @@ div.Workspace {
background-color: transparent !important;
}
-.Resizer {
- background: @brand-primary;
- opacity: 0.5;
- z-index: 1;
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- -moz-background-clip: padding;
- -webkit-background-clip: padding;
- background-clip: padding-box;
-}
-
-.Resizer:hover {
- -webkit-transition: all 0.3s ease;
- transition: all 0.3s ease;
- opacity: 0.3;
-}
-
-.Resizer.horizontal {
- height: 10px;
- margin: -5px 0;
- border-top: 5px solid transparent;
- border-bottom: 5px solid transparent;
- cursor: row-resize;
- width: 100%;
- padding: 1px;
-}
-
-.Resizer.horizontal:hover {
- border-top: 5px solid @brand-primary;
- border-bottom: 5px solid @brand-primary;
-}
-
-.Resizer.vertical {
- width: 9px;
- margin: 0 -5px;
- border-left: 5px solid rgba(255, 255, 255, 0);
- border-right: 5px solid rgba(255, 255, 255, 0);
- cursor: col-resize;
-}
+.SqlEditor {
+ .Resizer {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ }
-.Resizer.vertical:hover {
- border-left: 5px solid rgba(0, 0, 0, 0.5);
- border-right: 5px solid rgba(0, 0, 0, 0.5);
-}
-.Resizer.disabled {
- cursor: not-allowed;
-}
-.Resizer.disabled:hover {
- border-color: transparent;
+ .Resizer.horizontal {
+ height: 4px;
+ border-top: 1px solid #ccc;
+ border-bottom: 1px solid #ccc;
+ cursor: row-resize;
+ width: 4%;
+ margin-top: 4px;
+ margin-left: 47%;
+ }
}
.popover{
@@ -243,7 +216,6 @@ div.tablePopover:hover {
}
.ace_editor {
border: 1px solid #ccc;
- margin: 0px 0px 10px 0px;
}
.Select-menu-outer {
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org