pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-06 13:57:40 -04:00
Code Issues Packages Projects Releases Wiki Activity

Restructure chart header to wrap nicely (#11643)

Browse Source
This commit is contained in:
Kamil Gabryjelski 2020-11-12 05:18:04 +01:00 committed by GitHub
parent 4a070cfceb
commit 6ef4d2a991
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 51 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
superset-frontend/src/explore/components/ExploreChartHeader.jsx
View File

@ -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