improve props

This commit is contained in:
SrGooglo 2023-07-08 18:27:07 +00:00
parent 3f7de0ef85
commit 0eb3449989
2 changed files with 26 additions and 10 deletions

View File

@ -124,16 +124,20 @@ export class PagePanelWithNavMenu extends React.Component {
app.history.replace(`${window.location.pathname}?type=${this.state.activeTab}`)
}
tabChange = (key) => {
if (this.props.onTabChange) {
this.props.onTabChange(key)
tabChange = async (key) => {
if (this.props.beforeTabChange) {
await this.props.beforeTabChange(key)
}
this.setState({ activeTab: key })
await this.setState({ activeTab: key })
if (this.props.useSetQueryType) {
this.replaceQueryTypeToCurrentTab()
}
if (this.props.onTabChange) {
this.props.onTabChange(key)
}
}
handleTabChange = async (key) => {
@ -230,6 +234,8 @@ export class PagePanelWithNavMenu extends React.Component {
<PagePanels
primaryPanelClassName={this.props.primaryPanelClassName}
panels={panels}
masked={this.props.masked}
no_top_padding={this.props.no_top_padding}
/>
</>
}
@ -262,7 +268,13 @@ export default class PagePanels extends React.Component {
}
return <div
className="pagePanels"
className={classnames(
"pagePanels",
{
["masked"]: this.props.masked,
["withTopPadding"]: !!!this.props.no_top_padding
}
)}
style={this.generateGridStyle()}
>
{

View File

@ -4,9 +4,11 @@
&.mobile {
&.page-panel-spacer {
.pagePanels {
.panel {
&.center {
padding-top: calc(@top_bar_height + @top_bar_padding * 2);
&.withTopPadding {
.panel {
&.center {
padding-top: calc(@top_bar_height + @top_bar_padding * 2);
}
}
}
}
@ -28,8 +30,10 @@
padding: 0;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 97%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 97%, transparent 100%);
&.masked {
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 97%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 97%, transparent 100%);
}
.panel {
width: 100%;