This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new 713b0ae [cosmetic] TableSelector use <i> instead of <Button> for
refresh (#6783)
713b0ae is described below
commit 713b0ae4f4b3ccb41fa4977b5e8d1ab8ff0a4110
Author: Maxime Beauchemin <[email protected]>
AuthorDate: Fri Feb 1 12:01:30 2019 -0800
[cosmetic] TableSelector use <i> instead of <Button> for refresh (#6783)
* [cosmetic] TableSelector use <i> instead of <Button> for refresh
* Add ASF licenses
* css hover
* missing license
* remove license header
---
superset/assets/src/components/RefreshLabel.jsx | 35 +-----
superset/assets/src/components/RefreshLabel.less | 27 ++++
superset/assets/src/components/TableSelector.css | 24 ++++
superset/assets/src/components/TableSelector.jsx | 150 +++++++++++------------
4 files changed, 132 insertions(+), 104 deletions(-)
diff --git a/superset/assets/src/components/RefreshLabel.jsx
b/superset/assets/src/components/RefreshLabel.jsx
index cd5a6e0..855dc66 100644
--- a/superset/assets/src/components/RefreshLabel.jsx
+++ b/superset/assets/src/components/RefreshLabel.jsx
@@ -18,49 +18,26 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
-import { Label } from 'react-bootstrap';
import TooltipWrapper from './TooltipWrapper';
+import './RefreshLabel.less';
+
const propTypes = {
onClick: PropTypes.func,
- className: PropTypes.string,
tooltipContent: PropTypes.string.isRequired,
};
class RefreshLabel extends React.PureComponent {
- constructor(props) {
- super(props);
- this.state = {
- hovered: false,
- };
- }
-
- mouseOver() {
- this.setState({ hovered: true });
- }
-
- mouseOut() {
- this.setState({ hovered: false });
- }
-
render() {
- const labelStyle = this.state.hovered ? 'primary' : 'default';
- const tooltip = 'Click to ' + this.props.tooltipContent;
return (
<TooltipWrapper
- tooltip={tooltip}
+ tooltip={this.props.tooltipContent}
label="cache-desc"
>
- <Label
- className={this.props.className}
- bsStyle={labelStyle}
- style={{ fontSize: '13px', marginRight: '5px', cursor: 'pointer' }}
+ <i
+ className="RefreshLabel fa fa-refresh pointer"
onClick={this.props.onClick}
- onMouseOver={this.mouseOver.bind(this)}
- onMouseOut={this.mouseOut.bind(this)}
- >
- <i className="fa fa-refresh" />
- </Label>
+ />
</TooltipWrapper>);
}
}
diff --git a/superset/assets/src/components/RefreshLabel.less
b/superset/assets/src/components/RefreshLabel.less
new file mode 100644
index 0000000..3bf895b
--- /dev/null
+++ b/superset/assets/src/components/RefreshLabel.less
@@ -0,0 +1,27 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+@import "../../stylesheets/less/cosmo/variables.less";
+
+.RefreshLabel:hover {
+ color: @brand-primary;
+}
+
+.RefreshLabel {
+ color: @gray-light;
+}
diff --git a/superset/assets/src/components/TableSelector.css
b/superset/assets/src/components/TableSelector.css
new file mode 100644
index 0000000..b4636de
--- /dev/null
+++ b/superset/assets/src/components/TableSelector.css
@@ -0,0 +1,24 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+.TableSelector .fa-refresh {
+ padding-top: 7px
+}
+.TableSelector .refresh-col {
+ padding-left: 0px;
+}
diff --git a/superset/assets/src/components/TableSelector.jsx
b/superset/assets/src/components/TableSelector.jsx
index 6a0c401..9031d1a 100644
--- a/superset/assets/src/components/TableSelector.jsx
+++ b/superset/assets/src/components/TableSelector.jsx
@@ -20,12 +20,13 @@ import React from 'react';
import PropTypes from 'prop-types';
import Select from 'react-virtualized-select';
import createFilterOptions from 'react-select-fast-filter-options';
-import { ControlLabel, Col, Label } from 'react-bootstrap';
+import { ControlLabel, Col, Label, Row } from 'react-bootstrap';
import { t } from '@superset-ui/translation';
import { SupersetClient } from '@superset-ui/connection';
import AsyncSelect from './AsyncSelect';
import RefreshLabel from './RefreshLabel';
+import './TableSelector.css';
const propTypes = {
dbId: PropTypes.number.isRequired,
@@ -196,8 +197,16 @@ export default class TableSelector extends
React.PureComponent {
{db.database_name}
</span>);
}
- renderDatabaseSelect() {
+ renderSelectRow(select, refreshBtn) {
return (
+ <Row>
+ <Col md={11}>{select}</Col>
+ <Col md={1} className="refresh-col">{refreshBtn}</Col>
+ </Row>
+ );
+ }
+ renderDatabaseSelect() {
+ return this.renderSelectRow(
<AsyncSelect
dataEndpoint={
'/databaseasync/api/' +
@@ -225,30 +234,26 @@ export default class TableSelector extends
React.PureComponent {
renderSchema() {
return (
<div className="m-t-5">
- <div className="row">
- <div className="col-md-11 col-xs-11 p-r-2">
- <Select
- name="select-schema"
- placeholder={t('Select a schema (%s)',
this.state.schemaOptions.length)}
- options={this.state.schemaOptions}
- value={this.props.schema}
- valueRenderer={o => (
- <div>
- <span className="text-muted">{t('Schema:')}</span> {o.label}
- </div>
- )}
- isLoading={this.state.schemaLoading}
- autosize={false}
- onChange={this.changeSchema}
- />
- </div>
- <div className="col-md-1 col-xs-1 p-l-0 p-t-8">
- <RefreshLabel
- onClick={() => this.onDatabaseChange({ id: this.props.dbId },
true)}
- tooltipContent={t('force refresh schema list')}
- />
- </div>
- </div>
+ {this.renderSelectRow(
+ <Select
+ name="select-schema"
+ placeholder={t('Select a schema (%s)',
this.state.schemaOptions.length)}
+ options={this.state.schemaOptions}
+ value={this.props.schema}
+ valueRenderer={o => (
+ <div>
+ <span className="text-muted">{t('Schema:')}</span> {o.label}
+ </div>
+ )}
+ isLoading={this.state.schemaLoading}
+ autosize={false}
+ onChange={this.changeSchema}
+ />,
+ <RefreshLabel
+ onClick={() => this.onDatabaseChange({ id: this.props.dbId },
true)}
+ tooltipContent={t('Force refresh schema list')}
+ />,
+ )}
</div>
);
}
@@ -262,43 +267,37 @@ export default class TableSelector extends
React.PureComponent {
tableSelectDisabled = true;
}
const options = this.addOptionIfMissing(this.state.tableOptions,
this.state.tableName);
+ const select = this.props.schema ? (
+ <Select
+ name="select-table"
+ ref="selectTable"
+ isLoading={this.state.tableLoading}
+ placeholder={t('Select table or type table name')}
+ autosize={false}
+ onChange={this.changeTable}
+ filterOptions={this.state.filterOptions}
+ options={options}
+ value={this.state.tableName}
+ />) : (
+ <Select
+ async
+ name="async-select-table"
+ ref="selectTable"
+ placeholder={tableSelectPlaceholder}
+ disabled={tableSelectDisabled}
+ autosize={false}
+ onChange={this.changeTable}
+ value={this.state.tableName}
+ loadOptions={this.getTableNamesBySubStr}
+ />);
return (
<div className="m-t-5">
- <div className="row">
- <div className="col-md-11 col-xs-11 p-r-2">
- {this.props.schema ? (
- <Select
- name="select-table"
- ref="selectTable"
- isLoading={this.state.tableLoading}
- placeholder={t('Select table or type table name')}
- autosize={false}
- onChange={this.changeTable}
- filterOptions={this.state.filterOptions}
- options={options}
- value={this.state.tableName}
- />
- ) : (
- <Select
- async
- name="async-select-table"
- ref="selectTable"
- placeholder={tableSelectPlaceholder}
- disabled={tableSelectDisabled}
- autosize={false}
- onChange={this.changeTable}
- value={this.state.tableName}
- loadOptions={this.getTableNamesBySubStr}
- />
- )}
- </div>
- <div className="col-md-1 col-xs-1 p-l-0 p-t-8">
- <RefreshLabel
- onClick={() => this.changeSchema({ value: this.props.schema },
true)}
- tooltipContent={t('force refresh table list')}
- />
- </div>
- </div>
+ {this.renderSelectRow(
+ select,
+ <RefreshLabel
+ onClick={() => this.changeSchema({ value: this.props.schema },
true)}
+ tooltipContent={t('Force refresh table list')}
+ />)}
</div>);
}
renderSeeTableLabel() {
@@ -318,21 +317,22 @@ export default class TableSelector extends
React.PureComponent {
</div>);
}
render() {
- if (this.props.horizontal) {
- return (
- <div>
- <Col md={4}>{this.renderDatabaseSelect()}</Col>
- <Col md={4}>{this.renderSchema()}</Col>
- <Col md={4}>{this.renderTable()}</Col>
- </div>);
- }
return (
- <div>
- <div>{this.renderDatabaseSelect()}</div>
- <div className="m-t-5">{this.renderSchema()}</div>
- {this.props.sqlLabMode && this.renderSeeTableLabel()}
- <div className="m-t-5">{this.renderTable()}</div>
- </div>);
+ <div className="TableSelector">
+ {this.props.horizontal ?
+ <div>
+ <Col md={4}>{this.renderDatabaseSelect()}</Col>
+ <Col md={4}>{this.renderSchema()}</Col>
+ <Col md={4}>{this.renderTable()}</Col>
+ </div> :
+ <div>
+ <div>{this.renderDatabaseSelect()}</div>
+ <div className="m-t-5">{this.renderSchema()}</div>
+ {this.props.sqlLabMode && this.renderSeeTableLabel()}
+ <div className="m-t-5">{this.renderTable()}</div>
+ </div>}
+ </div>
+ );
}
}
TableSelector.propTypes = propTypes;
