You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ma...@apache.org on 2020/11/12 04:18:50 UTC
[incubator-superset] branch master updated: Restructure chart
header to wrap nicely (#11643)
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 6ef4d2a Restructure chart header to wrap nicely (#11643)
6ef4d2a is described below
commit 6ef4d2a991d814d58bd6a450597711a0380e0072
Author: Kamil Gabryjelski <ka...@gmail.com>
AuthorDate: Thu Nov 12 05:18:04 2020 +0100
Restructure chart header to wrap nicely (#11643)
---
.../src/explore/components/ExploreChartHeader.jsx | 96 ++++++++++++----------
1 file changed, 51 insertions(+), 45 deletions(-)
diff --git a/superset-frontend/src/explore/components/ExploreChartHeader.jsx b/superset-frontend/src/explore/components/ExploreChartHeader.jsx
index 45f6e08..52af3df 100644
--- a/superset-frontend/src/explore/components/ExploreChartHeader.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartHeader.jsx
@@ -60,17 +60,21 @@ const StyledHeader = styled.div`
flex-direction: row;
align-items: center;
flex-wrap: wrap;
+ justify-content: space-between;
span[role='button'] {
display: flex;
height: 100%;
}
+ .title-panel {
+ display: flex;
+ align-items: center;
+ }
+
.right-button-panel {
display: flex;
- flex: 1 1 auto;
align-items: center;
- justify-content: flex-end;
> .btn-group {
flex: 0 0 auto;
@@ -132,50 +136,52 @@ export class ExploreChartHeader extends React.PureComponent {
this.props.chart.chartStatus,
);
return (
- <StyledHeader id="slice-header" className="clearfix panel-title-large">
- <EditableTitle
- title={this.getSliceName()}
- canEdit={!this.props.slice || this.props.can_overwrite}
- onSaveTitle={this.props.actions.updateChartTitle}
- />
-
- {this.props.slice && (
- <StyledButtons>
- <FaveStar
- itemId={this.props.slice.slice_id}
- fetchFaveStar={this.props.actions.fetchFaveStar}
- saveFaveStar={this.props.actions.saveFaveStar}
- isStarred={this.props.isStarred}
- showTooltip
- />
- <PropertiesModal
- show={this.state.isPropertiesModalOpen}
- onHide={this.closePropertiesModal}
- onSave={this.props.sliceUpdated}
- slice={this.props.slice}
- />
- <TooltipWrapper
- label="edit-desc"
- tooltip={t('Edit chart properties')}
- >
- <span
- role="button"
- tabIndex={0}
- className="edit-desc-icon"
- onClick={this.openProperiesModal}
- >
- <i className="fa fa-edit" />
- </span>
- </TooltipWrapper>
- </StyledButtons>
- )}
- {this.props.chart.sliceFormData && (
- <AlteredSliceTag
- className="altered"
- origFormData={this.props.chart.sliceFormData}
- currentFormData={formData}
+ <StyledHeader id="slice-header" className="panel-title-large">
+ <div className="title-panel">
+ <EditableTitle
+ title={this.getSliceName()}
+ canEdit={!this.props.slice || this.props.can_overwrite}
+ onSaveTitle={this.props.actions.updateChartTitle}
/>
- )}
+
+ {this.props.slice && (
+ <StyledButtons>
+ <FaveStar
+ itemId={this.props.slice.slice_id}
+ fetchFaveStar={this.props.actions.fetchFaveStar}
+ saveFaveStar={this.props.actions.saveFaveStar}
+ isStarred={this.props.isStarred}
+ showTooltip
+ />
+ <PropertiesModal
+ show={this.state.isPropertiesModalOpen}
+ onHide={this.closePropertiesModal}
+ onSave={this.props.sliceUpdated}
+ slice={this.props.slice}
+ />
+ <TooltipWrapper
+ label="edit-desc"
+ tooltip={t('Edit chart properties')}
+ >
+ <span
+ role="button"
+ tabIndex={0}
+ className="edit-desc-icon"
+ onClick={this.openProperiesModal}
+ >
+ <i className="fa fa-edit" />
+ </span>
+ </TooltipWrapper>
+ {this.props.chart.sliceFormData && (
+ <AlteredSliceTag
+ className="altered"
+ origFormData={this.props.chart.sliceFormData}
+ currentFormData={formData}
+ />
+ )}
+ </StyledButtons>
+ )}
+ </div>
<div className="right-button-panel">
{chartFinished && queryResponse && (
<RowCountLabel