[SSE mobile] Correct protection sheet

This commit is contained in:
SergeyEzhin 2021-10-08 21:58:57 +04:00
parent 0c145e9b6f
commit d1072fd3f9
8 changed files with 108 additions and 85 deletions

View file

@ -15,6 +15,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetIn
const isDisconnected = props.users.isDisconnected; const isDisconnected = props.users.isDisconnected;
const storeFocusObjects = props.storeFocusObjects; const storeFocusObjects = props.storeFocusObjects;
const focusOn = storeFocusObjects.focusOn;
const isObjectLocked = storeFocusObjects.isLocked; const isObjectLocked = storeFocusObjects.isLocked;
const isEditCell = storeFocusObjects.isEditCell; const isEditCell = storeFocusObjects.isEditCell;
const editFormulaMode = storeFocusObjects.editFormulaMode; const editFormulaMode = storeFocusObjects.editFormulaMode;
@ -157,6 +158,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetIn
onEditDocument={onEditDocument} onEditDocument={onEditDocument}
isDisconnected={isDisconnected} isDisconnected={isDisconnected}
worksheetProtection={worksheetProtection} worksheetProtection={worksheetProtection}
focusOn={focusOn}
/> />
) )
})); }));

View file

@ -30,6 +30,8 @@ class AddOtherController extends Component {
return ( return (
<AddOther closeModal={this.closeModal} <AddOther closeModal={this.closeModal}
hideAddComment={this.hideAddComment} hideAddComment={this.hideAddComment}
wsPropsHyperlinks={this.props.wsPropsHyperlinks}
wsPropsObjects={this.props.wsPropsObjects}
/> />
) )
} }

View file

@ -88,6 +88,10 @@ class MainPage extends Component {
render() { render() {
const appOptions = this.props.storeAppOptions; const appOptions = this.props.storeAppOptions;
const storeWorksheets = this.props.storeWorksheets;
const worksheetProtection = storeWorksheets.worksheetProtection;
const wsLock = worksheetProtection.wsLock;
const wsProps = worksheetProtection.wsProps;
const config = appOptions.config; const config = appOptions.config;
const showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo))); const showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
const showPlaceholder = !appOptions.isDocReady && (!config.customization || !(config.customization.loaderName || config.customization.loaderLogo)); const showPlaceholder = !appOptions.isDocReady && (!config.customization || !(config.customization.loaderName || config.customization.loaderLogo));
@ -115,11 +119,11 @@ class MainPage extends Component {
<SearchSettings useSuspense={false} /> <SearchSettings useSuspense={false} />
{ {
!this.state.editOptionsVisible ? null : !this.state.editOptionsVisible ? null :
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} /> <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} wsProps={wsProps} />
} }
{ {
!this.state.addOptionsVisible ? null : !this.state.addOptionsVisible ? null :
<AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} /> <AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} wsProps={wsProps} showOptions={this.state.addShowOptions} />
} }
{ {
!this.state.settingsVisible ? null : !this.state.settingsVisible ? null :
@ -145,4 +149,4 @@ class MainPage extends Component {
} }
} }
export default inject("storeAppOptions")(observer(MainPage)); export default inject("storeAppOptions", "storeWorksheets")(observer(MainPage));

View file

@ -6,6 +6,7 @@ import EditorUIController from '../lib/patch'
const ToolbarView = props => { const ToolbarView = props => {
const isDisconnected = props.isDisconnected; const isDisconnected = props.isDisconnected;
const worksheetProtection = props.worksheetProtection; const worksheetProtection = props.worksheetProtection;
const focusOn = props.focusOn;
const undo_box = props.isEdit && EditorUIController.toolbarOptions ? EditorUIController.toolbarOptions.getUndoRedo({ const undo_box = props.isEdit && EditorUIController.toolbarOptions ? EditorUIController.toolbarOptions.getUndoRedo({
disabledUndo: !props.isCanUndo || isDisconnected, disabledUndo: !props.isCanUndo || isDisconnected,
disabledRedo: !props.isCanRedo || isDisconnected, disabledRedo: !props.isCanRedo || isDisconnected,
@ -28,6 +29,7 @@ const ToolbarView = props => {
{props.isEdit && EditorUIController.toolbarOptions && EditorUIController.toolbarOptions.getEditOptions({ {props.isEdit && EditorUIController.toolbarOptions && EditorUIController.toolbarOptions.getEditOptions({
disabled: props.disabledEditControls || props.disabledControls || isDisconnected, disabled: props.disabledEditControls || props.disabledControls || isDisconnected,
worksheetProtection, worksheetProtection,
focusOn,
onEditClick: () => props.openOptions('edit'), onEditClick: () => props.openOptions('edit'),
onAddClick: () => props.openOptions('add') onAddClick: () => props.openOptions('add')
})} })}

View file

@ -57,6 +57,7 @@ const routes = [
const AddLayoutNavbar = ({ tabs, inPopover }) => { const AddLayoutNavbar = ({ tabs, inPopover }) => {
const isAndroid = Device.android; const isAndroid = Device.android;
return ( return (
<Navbar> <Navbar>
{tabs.length > 1 ? {tabs.length > 1 ?
@ -67,7 +68,7 @@ const AddLayoutNavbar = ({ tabs, inPopover }) => {
</Link>)} </Link>)}
{isAndroid && <span className='tab-link-highlight' style={{width: 100 / tabs.lenght + '%'}}></span>} {isAndroid && <span className='tab-link-highlight' style={{width: 100 / tabs.lenght + '%'}}></span>}
</div> : </div> :
<NavTitle>{ tabs[0].caption }</NavTitle> <NavTitle>{tabs[0].caption}</NavTitle>
} }
{ !inPopover && <NavRight><Link icon='icon-expand-down' popupClose=".add-popup"></Link></NavRight> } { !inPopover && <NavRight><Link icon='icon-expand-down' popupClose=".add-popup"></Link></NavRight> }
</Navbar> </Navbar>
@ -89,50 +90,54 @@ const AddLayoutContent = ({ tabs }) => {
const AddTabs = props => { const AddTabs = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Add', {returnObjects: true}); const _t = t('View.Add', {returnObjects: true});
const wsProps = props.wsProps;
const showPanels = props.showPanels; const showPanels = props.showPanels;
const tabs = []; const tabs = [];
if (!showPanels) { if(!wsProps.Objects) {
tabs.push({ if (!showPanels) {
caption: _t.textChart, tabs.push({
id: 'add-chart', caption: _t.textChart,
icon: 'icon-add-chart', id: 'add-chart',
component: <AddChartController/> icon: 'icon-add-chart',
}); component: <AddChartController/>
});
}
if (!showPanels || showPanels === 'function') {
tabs.push({
caption: _t.textFunction,
id: 'add-function',
icon: 'icon-add-formula',
component: <AddFunctionController onOptionClick={props.onOptionClick}/>
});
}
if (!showPanels || showPanels.indexOf('shape') > 0) {
tabs.push({
caption: _t.textShape,
id: 'add-shape',
icon: 'icon-add-shape',
component: <AddShapeController/>
});
}
if (showPanels && showPanels.indexOf('image') !== -1) {
tabs.push({
caption: _t.textImage,
id: 'add-image',
icon: 'icon-add-image',
component: <AddImageController inTabs={true}/>
});
}
} }
if (!showPanels || showPanels === 'function') { if (!showPanels && (!wsProps.InsertHyperlinks || !wsProps.Objects)) {
tabs.push({
caption: _t.textFunction,
id: 'add-function',
icon: 'icon-add-formula',
component: <AddFunctionController onOptionClick={props.onOptionClick}/>
});
}
if (!showPanels || showPanels.indexOf('shape') > 0) {
tabs.push({
caption: _t.textShape,
id: 'add-shape',
icon: 'icon-add-shape',
component: <AddShapeController/>
});
}
if (showPanels && showPanels.indexOf('image') !== -1) {
tabs.push({
caption: _t.textImage,
id: 'add-image',
icon: 'icon-add-image',
component: <AddImageController inTabs={true}/>
});
}
if (!showPanels) {
tabs.push({ tabs.push({
caption: _t.textOther, caption: _t.textOther,
id: 'add-other', id: 'add-other',
icon: 'icon-add-other', icon: 'icon-add-other',
component: <AddOtherController/> component: <AddOtherController wsPropsObjects={wsProps.Objects}
wsPropsHyperlinks={wsProps.InsertHyperlinks}/>
}); });
} }
if ((showPanels && showPanels === 'hyperlink') || props.isAddShapeHyperlink) { if (((showPanels && showPanels === 'hyperlink') || props.isAddShapeHyperlink) && !wsProps.InsertHyperlinks) {
tabs.push({ tabs.push({
caption: _t.textAddLink, caption: _t.textAddLink,
id: 'add-link', id: 'add-link',
@ -164,10 +169,10 @@ class AddView extends Component {
return ( return (
show_popover ? show_popover ?
<Popover id="add-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onclosed()}> <Popover id="add-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onclosed()}>
<AddTabs isAddShapeHyperlink={this.props.isAddShapeHyperlink} inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} showPanels={this.props.showPanels}/> <AddTabs isAddShapeHyperlink={this.props.isAddShapeHyperlink} wsProps={this.props.wsProps} inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} showPanels={this.props.showPanels}/>
</Popover> : </Popover> :
<Popup className="add-popup" onPopupClosed={() => this.props.onclosed()}> <Popup className="add-popup" onPopupClosed={() => this.props.onclosed()}>
<AddTabs isAddShapeHyperlink={this.props.isAddShapeHyperlink} onOptionClick={this.onoptionclick} showPanels={this.props.showPanels}/> <AddTabs isAddShapeHyperlink={this.props.isAddShapeHyperlink} wsProps={this.props.wsProps} onOptionClick={this.onoptionclick} showPanels={this.props.showPanels}/>
</Popup> </Popup>
) )
} }
@ -186,6 +191,7 @@ const Add = props => {
// component will unmount // component will unmount
} }
}); });
const onviewclosed = () => { const onviewclosed = () => {
if ( props.onclosed ) if ( props.onclosed )
props.onclosed(); props.onclosed();
@ -221,6 +227,7 @@ const Add = props => {
onclosed={onviewclosed} onclosed={onviewclosed}
showPanels={options ? options.panels : undefined} showPanels={options ? options.panels : undefined}
isAddShapeHyperlink = {isAddShapeHyperlink} isAddShapeHyperlink = {isAddShapeHyperlink}
wsProps={props.wsProps}
/> />
}; };

View file

@ -6,23 +6,26 @@ const AddOther = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Add', {returnObjects: true}); const _t = t('View.Add', {returnObjects: true});
const hideAddComment = props.hideAddComment(); const hideAddComment = props.hideAddComment();
const wsPropsHyperlinks = props.wsPropsHyperlinks;
const wsPropsObjects = props.wsPropsObjects;
return ( return (
<List> <List>
<ListItem title={_t.textImage} link={'/add-image/'}> <ListItem title={_t.textImage} className={wsPropsObjects && 'disabled'} link={'/add-image/'}>
<Icon slot="media" icon="icon-insimage"></Icon> <Icon slot="media" icon="icon-insimage"></Icon>
</ListItem> </ListItem>
{!hideAddComment && <ListItem title={_t.textComment} onClick={() => { {(!hideAddComment && !wsPropsObjects) && <ListItem title={_t.textComment} onClick={() => {
props.closeModal(); props.closeModal();
Common.Notifications.trigger('addcomment'); Common.Notifications.trigger('addcomment');
}}> }}>
<Icon slot="media" icon="icon-insert-comment"></Icon> <Icon slot="media" icon="icon-insert-comment"></Icon>
</ListItem>} </ListItem>}
<ListItem title={_t.textLink} link={'/add-link/'}> <ListItem title={_t.textSortAndFilter} className={wsPropsObjects && 'disabled'} link={'/add-sort-and-filter/'}>
<Icon slot="media" icon="icon-link"></Icon>
</ListItem>
<ListItem title={_t.textSortAndFilter} link={'/add-sort-and-filter/'}>
<Icon slot="media" icon="icon-sort"></Icon> <Icon slot="media" icon="icon-sort"></Icon>
</ListItem> </ListItem>
<ListItem title={_t.textLink} className={wsPropsHyperlinks && 'disabled'} link={'/add-link/'}>
<Icon slot="media" icon="icon-link"></Icon>
</ListItem>
</List> </List>
) )
}; };

View file

@ -329,6 +329,7 @@ const EditTabs = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const store = props.storeFocusObjects; const store = props.storeFocusObjects;
const wsProps = props.wsProps;
const settings = !store.focusOn ? [] : (store.focusOn === 'obj' ? store.objects : store.selections); const settings = !store.focusOn ? [] : (store.focusOn === 'obj' ? store.objects : store.selections);
let editors = []; let editors = [];
@ -345,41 +346,43 @@ const EditTabs = props => {
component: <EditCellController /> component: <EditCellController />
}) })
} }
if (settings.indexOf('shape') > -1) { if(!wsProps.Objects) {
editors.push({ if (settings.indexOf('shape') > -1) {
caption: _t.textShape, editors.push({
id: 'edit-shape', caption: _t.textShape,
component: <EditShapeController /> id: 'edit-shape',
}) component: <EditShapeController />
} })
if (settings.indexOf('image') > -1) { }
editors.push({ if (settings.indexOf('image') > -1) {
caption: _t.textImage, editors.push({
id: 'edit-image', caption: _t.textImage,
component: <EditImageController /> id: 'edit-image',
}) component: <EditImageController />
} })
if (settings.indexOf('text') > -1) { }
editors.push({ if (settings.indexOf('text') > -1) {
caption: _t.textText, editors.push({
id: 'edit-text', caption: _t.textText,
component: <EditTextController /> id: 'edit-text',
}) component: <EditTextController />
} })
if (settings.indexOf('chart') > -1) { }
editors.push({ if (settings.indexOf('chart') > -1) {
caption: _t.textChart, editors.push({
id: 'edit-chart', caption: _t.textChart,
component: <EditChartController /> id: 'edit-chart',
}) component: <EditChartController />
} })
if (settings.indexOf('hyperlink') > -1 || (props.hyperinfo && props.isAddShapeHyperlink)) { }
editors.push({ if (settings.indexOf('hyperlink') > -1 || (props.hyperinfo && props.isAddShapeHyperlink)) {
caption: _t.textHyperlink, editors.push({
id: 'edit-link', caption: _t.textHyperlink,
component: <EditLinkController /> id: 'edit-link',
}) component: <EditLinkController />
} })
}
}
} }
return ( return (
@ -403,10 +406,10 @@ const EditView = props => {
return ( return (
show_popover ? show_popover ?
<Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => props.onClosed()}> <Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => props.onClosed()}>
<EditTabsContainer isAddShapeHyperlink={props.isAddShapeHyperlink} hyperinfo={props.hyperinfo} inPopover={true} onOptionClick={onOptionClick} style={{height: '410px'}} /> <EditTabsContainer isAddShapeHyperlink={props.isAddShapeHyperlink} hyperinfo={props.hyperinfo} inPopover={true} wsProps={props.wsProps} onOptionClick={onOptionClick} style={{height: '410px'}} />
</Popover> : </Popover> :
<Sheet id="edit-sheet" push onSheetClosed={() => props.onClosed()}> <Sheet id="edit-sheet" push onSheetClosed={() => props.onClosed()}>
<EditTabsContainer isAddShapeHyperlink={props.isAddShapeHyperlink} hyperinfo={props.hyperinfo} onOptionClick={onOptionClick} /> <EditTabsContainer isAddShapeHyperlink={props.isAddShapeHyperlink} hyperinfo={props.hyperinfo} onOptionClick={onOptionClick} wsProps={props.wsProps} />
</Sheet> </Sheet>
) )
}; };
@ -433,7 +436,7 @@ const EditOptions = props => {
const isAddShapeHyperlink = api.asc_canAddShapeHyperlink(); const isAddShapeHyperlink = api.asc_canAddShapeHyperlink();
return ( return (
<EditView usePopover={!Device.phone} onClosed={onviewclosed} isAddShapeHyperlink={isAddShapeHyperlink} hyperinfo={hyperinfo} /> <EditView usePopover={!Device.phone} onClosed={onviewclosed} isAddShapeHyperlink={isAddShapeHyperlink} hyperinfo={hyperinfo} wsProps={props.wsProps} />
) )
}; };

View file

@ -44,7 +44,7 @@ const EditCell = props => {
onFontSize: props.onFontSize, onFontSize: props.onFontSize,
onFontClick: props.onFontClick onFontClick: props.onFontClick
}}/> }}/>
{!wsLock || !wsProps.FormatCells && {(!wsLock || !wsProps.FormatCells) &&
<> <>
<List> <List>
<ListItem className='buttons'> <ListItem className='buttons'>