[DE PE SSE mobile] Corrected display collaboration

This commit is contained in:
SergeyEzhin 2021-04-28 01:15:16 +03:00
parent 1d51be59a6
commit 072f84a27c
13 changed files with 59 additions and 26 deletions

View file

@ -336,7 +336,8 @@
"textHighlightResults": "Highlight Results", "textHighlightResults": "Highlight Results",
"textSearch": "Search", "textSearch": "Search",
"textMarginsW": "Left and right margins are too high for a given page width", "textMarginsW": "Left and right margins are too high for a given page width",
"textMarginsH": "Top and bottom margins are too high for a given page height" "textMarginsH": "Top and bottom margins are too high for a given page height",
"textCollaboration": "Collaboration"
}, },
"Edit": { "Edit": {
"textClose": "Close", "textClose": "Close",

View file

@ -71,7 +71,7 @@ const Settings = props => {
window.open(url, "_blank"); window.open(url, "_blank");
}; };
return <SettingsView usePopover={!Device.phone} onclosed={onviewclosed} onReaderMode={onReaderMode} onPrint={onPrint} showHelp={showHelp}/> return <SettingsView usePopover={!Device.phone} openOptions={props.openOptions} onclosed={onviewclosed} onReaderMode={onReaderMode} onPrint={onPrint} showHelp={showHelp}/>
}; };
export default inject("storeAppOptions")(observer(Settings)); export default inject("storeAppOptions")(observer(Settings));

View file

@ -93,7 +93,7 @@ class MainPage extends Component {
} }
{ {
!this.state.settingsVisible ? null : !this.state.settingsVisible ? null :
<Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} /> <Settings openOptions={this.handleClickToOpenOptions} onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
} }
{ {
!this.state.collaborationVisible ? null : !this.state.collaborationVisible ? null :

View file

@ -24,7 +24,7 @@ const ToolbarView = props => {
onAddClick: e => props.openOptions('add') onAddClick: e => props.openOptions('add')
})} })}
{ Device.phone ? null : <Link className={(props.disabledControls || props.readerMode) && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> } { Device.phone ? null : <Link className={(props.disabledControls || props.readerMode) && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
{props.displayCollaboration && <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => props.openOptions('coauth')}></Link>} {props.displayCollaboration && window.matchMedia("(min-width: 390px)").matches ? <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => props.openOptions('coauth')}></Link> : null}
<Link className={(props.disabledSettings || props.disabledControls) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={e => props.openOptions('settings')}></Link> <Link className={(props.disabledSettings || props.disabledControls) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={e => props.openOptions('settings')}></Link>
</NavRight> </NavRight>
</Fragment> </Fragment>

View file

@ -71,12 +71,17 @@ const SettingsList = inject("storeAppOptions")(observer(props => {
const closeModal = () => { const closeModal = () => {
if (Device.phone) { if (Device.phone) {
f7.sheet.close('.settings-popup', true); f7.sheet.close('.settings-popup', false);
} else { } else {
f7.popover.close('#settings-popover'); f7.popover.close('#settings-popover', false);
} }
}; };
const onOpenCollaboration = async () => {
await closeModal();
await props.openOptions('coauth');
}
useEffect(() => { useEffect(() => {
}); });
@ -117,6 +122,11 @@ const SettingsList = inject("storeAppOptions")(observer(props => {
<Icon slot="media" icon="icon-search"></Icon> <Icon slot="media" icon="icon-search"></Icon>
</ListItem> </ListItem>
} }
{window.matchMedia("(max-width: 389px)").matches ?
<ListItem title={_t.textCollaboration} link="#" onClick={onOpenCollaboration}>
<Icon slot="media" icon="icon-collaboration"></Icon>
</ListItem>
: null}
{_canReader && {_canReader &&
<ListItem title={_t.textReaderMode}> {/*ToDo*/} <ListItem title={_t.textReaderMode}> {/*ToDo*/}
<Icon slot="media" icon="icon-reader"></Icon> <Icon slot="media" icon="icon-reader"></Icon>
@ -182,10 +192,10 @@ class SettingsView extends Component {
return ( return (
show_popover ? show_popover ?
<Popover id="settings-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}> <Popover id="settings-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
<SettingsList inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} onReaderMode={this.props.onReaderMode} onPrint={this.props.onPrint} showHelp={this.props.showHelp}/> <SettingsList inPopover={true} onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} style={{height: '410px'}} onReaderMode={this.props.onReaderMode} onPrint={this.props.onPrint} showHelp={this.props.showHelp}/>
</Popover> : </Popover> :
<Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}> <Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}>
<SettingsList onOptionClick={this.onoptionclick} onReaderMode={this.props.onReaderMode} onPrint={this.props.onPrint} showHelp={this.props.showHelp}/> <SettingsList onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} onReaderMode={this.props.onReaderMode} onPrint={this.props.onPrint} showHelp={this.props.showHelp}/>
</Popup> </Popup>
) )
} }

View file

@ -200,7 +200,8 @@
"textCaseSensitive": "Case Sensitive", "textCaseSensitive": "Case Sensitive",
"textHighlight": "Highlight Results", "textHighlight": "Highlight Results",
"textReplace": "Replace", "textReplace": "Replace",
"textNoTextFound": "Text not Found" "textNoTextFound": "Text not Found",
"textCollaboration": "Collaboration"
}, },
"Add": { "Add": {
"textSlide": "Slide", "textSlide": "Slide",

View file

@ -95,7 +95,7 @@ class MainPage extends Component {
} }
{ {
!this.state.settingsVisible ? null : !this.state.settingsVisible ? null :
<Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} /> <Settings openOptions={this.handleClickToOpenOptions} onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
} }
{ {
!this.state.collaborationVisible ? null : !this.state.collaborationVisible ? null :

View file

@ -25,7 +25,7 @@ const ToolbarView = props => {
onAddClick: () => props.openOptions('add') onAddClick: () => props.openOptions('add')
})} })}
{ Device.phone ? null : <Link className={props.disabledControls && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> } { Device.phone ? null : <Link className={props.disabledControls && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
{props.displayCollaboration && <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={() => props.openOptions('coauth')}></Link>} {props.displayCollaboration && window.matchMedia("(min-width: 390px)").matches ? <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={() => props.openOptions('coauth')}></Link> : null}
<Link className={(props.disabledSettings || props.disabledControls) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link> <Link className={(props.disabledSettings || props.disabledControls) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link>
</NavRight> </NavRight>
</Fragment> </Fragment>

View file

@ -70,12 +70,17 @@ const SettingsList = withTranslation()(props => {
const closeModal = () => { const closeModal = () => {
if (Device.phone) { if (Device.phone) {
f7.sheet.close('.settings-popup', true); f7.sheet.close('.settings-popup', false);
} else { } else {
f7.popover.close('#settings-popover'); f7.popover.close('#settings-popover', false);
} }
}; };
const onOpenCollaboration = async () => {
await closeModal();
await props.openOptions('coauth');
}
const onPrint = () => { const onPrint = () => {
closeModal(); closeModal();
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
@ -112,6 +117,11 @@ const SettingsList = withTranslation()(props => {
<Icon slot="media" icon="icon-search"></Icon> <Icon slot="media" icon="icon-search"></Icon>
</ListItem> </ListItem>
} }
{window.matchMedia("(max-width: 389px)").matches ?
<ListItem title={_t.textCollaboration} link="#" onClick={onOpenCollaboration}>
<Icon slot="media" icon="icon-collaboration"></Icon>
</ListItem>
: null}
<ListItem link="#" title={_t.textPresentationSettings} onClick={onoptionclick.bind(this, '/presentation-settings/')}> <ListItem link="#" title={_t.textPresentationSettings} onClick={onoptionclick.bind(this, '/presentation-settings/')}>
<Icon slot="media" icon="icon-setup"></Icon> <Icon slot="media" icon="icon-setup"></Icon>
</ListItem> </ListItem>
@ -152,13 +162,14 @@ class SettingsView extends Component {
render() { render() {
const show_popover = this.props.usePopover; const show_popover = this.props.usePopover;
return ( return (
show_popover ? show_popover ?
<Popover id="settings-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}> <Popover id="settings-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
<SettingsList inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} /> <SettingsList inPopover={true} openOptions={this.props.openOptions} onOptionClick={this.onoptionclick} style={{height: '410px'}} />
</Popover> : </Popover> :
<Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}> <Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}>
<SettingsList onOptionClick={this.onoptionclick} /> <SettingsList onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} />
</Popup> </Popup>
) )
} }
@ -174,13 +185,12 @@ const Settings = props => {
} }
}); });
const onviewclosed = () => { const onviewclosed = () => {
if ( props.onclosed ) if (props.onclosed)
props.onclosed(); props.onclosed();
}; };
return <SettingsView usePopover={!Device.phone} onclosed={onviewclosed} /> return <SettingsView usePopover={!Device.phone} onclosed={onviewclosed} openOptions={props.openOptions} />
}; };
export default Settings; export default Settings;

View file

@ -490,7 +490,8 @@
"textFormulas": "Formulas", "textFormulas": "Formulas",
"textValues": "Values", "textValues": "Values",
"textNoTextFound": "Text not found", "textNoTextFound": "Text not found",
"textReplaceAll": "Replace All" "textReplaceAll": "Replace All",
"textCollaboration": "Collaboration"
} }
}, },
"Statusbar": { "Statusbar": {

View file

@ -88,7 +88,7 @@ class MainPage extends Component {
} }
{ {
!this.state.settingsVisible ? null : !this.state.settingsVisible ? null :
<Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} /> <Settings openOptions={this.handleClickToOpenOptions} onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
} }
{ {
!this.state.collaborationVisible ? null : !this.state.collaborationVisible ? null :

View file

@ -23,7 +23,7 @@ const ToolbarView = props => {
onAddClick: () => props.openOptions('add') onAddClick: () => props.openOptions('add')
})} })}
{ Device.phone ? null : <Link className={props.disabledControls && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> } { Device.phone ? null : <Link className={props.disabledControls && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
{props.displayCollaboration && <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={() => props.openOptions('coauth')}></Link>} {props.displayCollaboration && window.matchMedia("(min-width: 390px)").matches ? <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={() => props.openOptions('coauth')}></Link> : null}
<Link className={(props.disabledSettings || props.disabledControls) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link> <Link className={(props.disabledSettings || props.disabledControls) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link>
</NavRight> </NavRight>
</Fragment> </Fragment>

View file

@ -78,12 +78,17 @@ const SettingsList = withTranslation()(props => {
const closeModal = () => { const closeModal = () => {
if (Device.phone) { if (Device.phone) {
f7.sheet.close('.settings-popup', true); f7.sheet.close('.settings-popup', false);
} else { } else {
f7.popover.close('#settings-popover'); f7.popover.close('#settings-popover', false);
} }
}; };
const onOpenCollaboration = async () => {
await closeModal();
await props.openOptions('coauth');
}
const onPrint = () => { const onPrint = () => {
closeModal(); closeModal();
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
@ -121,6 +126,11 @@ const SettingsList = withTranslation()(props => {
<Icon slot="media" icon="icon-search"></Icon> <Icon slot="media" icon="icon-search"></Icon>
</ListItem> </ListItem>
} }
{window.matchMedia("(max-width: 389px)").matches ?
<ListItem title={_t.textCollaboration} link="#" onClick={onOpenCollaboration}>
<Icon slot="media" icon="icon-collaboration"></Icon>
</ListItem>
: null}
<ListItem link="#" title={_t.textSpreadsheetSettings} onClick={onoptionclick.bind(this, '/spreadsheet-settings/')}> <ListItem link="#" title={_t.textSpreadsheetSettings} onClick={onoptionclick.bind(this, '/spreadsheet-settings/')}>
<Icon slot="media" icon="icon-table-settings"></Icon> <Icon slot="media" icon="icon-table-settings"></Icon>
</ListItem> </ListItem>
@ -164,10 +174,10 @@ class SettingsView extends Component {
return ( return (
show_popover ? show_popover ?
<Popover id="settings-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}> <Popover id="settings-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
<SettingsList inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} /> <SettingsList inPopover={true} openOptions={this.props.openOptions} onOptionClick={this.onoptionclick} style={{height: '410px'}} />
</Popover> : </Popover> :
<Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}> <Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}>
<SettingsList onOptionClick={this.onoptionclick} /> <SettingsList onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} />
</Popup> </Popup>
) )
} }
@ -189,7 +199,7 @@ const Settings = props => {
props.onclosed(); props.onclosed();
}; };
return <SettingsView usePopover={!Device.phone} onclosed={onviewclosed} /> return <SettingsView usePopover={!Device.phone} onclosed={onviewclosed} openOptions={props.openOptions} />
}; };
export default Settings; export default Settings;