Skip to content

Commit

Permalink
Row & Column Advanced Issue Fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@anik
anik committed Nov 8, 2019
1 parent 33d455c commit 93a76cb
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 69 deletions.
7 changes: 6 additions & 1 deletion assets/reactjs/src/blocks/row/Edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,10 @@ class Edit extends Component {
//animation
animation,
//global
enablePosition,
selectPosition,
positionXaxis,
positionYaxis,
globalZindex,
hideTablet,
hideMobile,
Expand Down Expand Up @@ -312,9 +316,10 @@ class Edit extends Component {
<InspectorAdvancedControls>
<Toggle label={__('Column Reverse')} responsive value={rowReverse.values} onChange={val => setAttributes({ rowReverse: { values: val, openRowReverse: true } })} />
<TextControl label={__('CSS ID')} value={rowId} onChange={val => setAttributes({ rowId: val })} />
{globalSettingsPanel(enablePosition, selectPosition, positionXaxis, positionYaxis, globalZindex, hideTablet, hideMobile, globalCss, setAttributes, true)}
</InspectorAdvancedControls>

{globalSettingsPanel(globalZindex, hideTablet, hideMobile, globalCss, setAttributes)}


<div className={`qubely-section qubely-block-${uniqueId} ${(rowBg.bgimgParallax && rowBg.bgimgParallax == 'animated') ? 'qubely-section-parallax' : ''}`} {...rowId ? { id: rowId } : ''}>
<div className="qubley-padding-indicator">
Expand Down
6 changes: 5 additions & 1 deletion assets/reactjs/src/blocks/row/column/Edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -289,6 +289,10 @@ class Edit extends Component {
//animation
animation,
//global
enablePosition,
selectPosition,
positionXaxis,
positionYaxis,
globalZindex,
hideTablet,
hideMobile,
Expand Down Expand Up @@ -377,7 +381,7 @@ class Edit extends Component {
</Toolbar>
</BlockControls>

{globalSettingsPanel(globalZindex, hideTablet, hideMobile, globalCss, setAttributes)}
{globalSettingsPanel(enablePosition, selectPosition, positionXaxis, positionYaxis, globalZindex, hideTablet, hideMobile, globalCss, setAttributes)}

{rowWidth !== 0 &&
<ResizableBox
Expand Down
136 changes: 69 additions & 67 deletions assets/reactjs/src/components/fields/GlobalSettings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,77 +24,79 @@ export const globalAttributes = {
globalCss: { type: 'string', default: '', style: [{ selector: '' }] },
}

export function globalSettingsPanel(enablePosition, selectPosition, positionXaxis, positionYaxis, globalZindex, hideTablet, hideMobile, globalCss, setAttributes) {
return (
<InspectorAdvancedControls>
<Toggle
label={__('Enable Custom Position')}
value={enablePosition}
onChange={() => setAttributes({ enablePosition: !enablePosition })}
/>
{enablePosition &&
<Fragment>
<SelectControl
label={__('Select Position')}
value={selectPosition || ''}
options={[
{ label: __('Relative'), value: 'relative' },
{ label: __('Absolute'), value: 'absolute' },
{ label: __('Fixed'), value: 'fixed' }
]}
onChange={val => setAttributes({ selectPosition: val })}
export function globalSettingsPanel(enablePosition, selectPosition, positionXaxis, positionYaxis, globalZindex, hideTablet, hideMobile, globalCss, setAttributes, isReturn = false) {

const Output = <Fragment>
<Toggle
label={__('Enable Custom Position')}
value={enablePosition}
onChange={() => setAttributes({ enablePosition: !enablePosition })}
/>
{enablePosition &&
<Fragment>
<SelectControl
label={__('Select Position')}
value={selectPosition || ''}
options={[
{ label: __('Relative'), value: 'relative' },
{ label: __('Absolute'), value: 'absolute' },
{ label: __('Fixed'), value: 'fixed' }
]}
onChange={val => setAttributes({ selectPosition: val })}
/>
<Range
label={__('From X-axis')}
min={-2000}
max={2000}
step={1}
unit={['px', 'em', '%']}
responsive
// device={this.state.device}
// onDeviceChange={value => this.setState({ device: value })}
value={positionXaxis}
onChange={value => setAttributes({ positionXaxis: value })}
/>
<Range
label={__('From Y-axis')}
min={-2000}
max={2000}
step={1}
unit={['px', 'em', '%']}
responsive
// device={this.state.device}
// onDeviceChange={value => this.setState({ device: value })}
value={positionYaxis}
onChange={value => setAttributes({ positionYaxis: value })}
/>
</Fragment>
}
<Range
label={__('From X-axis')}
min={-2000}
max={2000}
step={1}
unit={['px', 'em', '%']}
responsive
// device={this.state.device}
// onDeviceChange={value => this.setState({ device: value })}
value={positionXaxis}
onChange={value => setAttributes({ positionXaxis: value })}
label={__('Z-Index')}
min={1}
max={10000}
value={globalZindex}
onChange={value => setAttributes({ globalZindex: value })}
/>
<Range
label={__('From Y-axis')}
min={-2000}
max={2000}
step={1}
unit={['px', 'em', '%']}
responsive
// device={this.state.device}
// onDeviceChange={value => this.setState({ device: value })}
value={positionYaxis}
onChange={value => setAttributes({ positionYaxis: value })}
<Toggle
label={__('Hide on Tablet')}
value={hideTablet}
onChange={() => setAttributes({ hideTablet: !hideTablet })}
/>
</Fragment>
}
<Range
label={__('Z-Index')}
min={1}
max={10000}
value={globalZindex}
onChange={value => setAttributes({ globalZindex: value })}
/>
<Toggle
label={__('Hide on Tablet')}
value={hideTablet}
onChange={() => setAttributes({ hideTablet: !hideTablet })}
/>
<Toggle
label={__('Hide on Phone')}
value={hideMobile}
onChange={() => setAttributes({ hideMobile: !hideMobile })} />
<Separator
label={__('Block Raw CSS')} />
<TextareaControl
value={globalCss}
rows={5}
placeholder={__('Use {{QUBELY}} before the selector to wrap element. Otherwise it works globally.')}
onChange={val => setAttributes({ globalCss: val })} />
</InspectorAdvancedControls>
)
<Toggle
label={__('Hide on Phone')}
value={hideMobile}
onChange={() => setAttributes({ hideMobile: !hideMobile })} />
<Separator
label={__('Block Raw CSS')} />
<TextareaControl
value={globalCss}
rows={5}
placeholder={__('Use {{QUBELY}} before the selector to wrap element. Otherwise it works globally.')}
onChange={val => setAttributes({ globalCss: val })} />
</Fragment>

return isReturn ? Output : <InspectorAdvancedControls>{Output}</InspectorAdvancedControls>

}

export function animationSettings(uniqueId, animation, setAttributes) {
Expand Down

0 comments on commit 93a76cb

Please sign in to comment.