diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index fd53af7de..d5415fd06 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -836,6 +836,12 @@ input[type="number"]::-webkit-inner-spin-button { overflow: hidden; } +// Statusbar + +.statusbar .statusbar--box-tabs > ul > .locked a { + box-shadow: inset 0 2px red; +} + diff --git a/apps/documenteditor/mobile/src/view/add/AddLink.jsx b/apps/documenteditor/mobile/src/view/add/AddLink.jsx index d5b6a2eda..1dade24c8 100644 --- a/apps/documenteditor/mobile/src/view/add/AddLink.jsx +++ b/apps/documenteditor/mobile/src/view/add/AddLink.jsx @@ -24,16 +24,20 @@ const PageLink = props => { type="text" placeholder={_t.textLink} value={stateLink} - onChange={(event) => {setLink(event.target.value); - if(stateAutoUpdate) setDisplay(event.target.value); }} + onChange={(event) => { + setLink(event.target.value); + if((!stateDisplay || stateDisplay === stateLink) && stateAutoUpdate) setDisplay(event.target.value); + }} > {setDisplay(event.target.value); - setAutoUpdate(event.target.value == ''); }} + onChange={(event) => { + setDisplay(event.target.value); + setAutoUpdate(event.target.value == ''); + }} > { value={link} onChange={(event) => { setLink(event.target.value); - if(stateAutoUpdate) setDisplay(event.target.value); + if((!stateDisplay || stateDisplay === link) && stateAutoUpdate) setDisplay(event.target.value); }} /> : { placeholder={_t.textDisplay} value={stateDisplay} disabled={displayDisabled} - onChange={(event) => {setDisplay(event.target.value); - setAutoUpdate(event.target.value == ''); }} + onChange={(event) => { + setDisplay(event.target.value); + setAutoUpdate(event.target.value == ''); + }} /> { - const sheets = props.sheets; - const storeFocusObjects = props.storeFocusObjects; - +const StatusbarController = inject('sheets', 'storeFocusObjects', 'users')(observer(props => { + const {sheets, storeFocusObjects, users} = props; + useEffect(() => { Common.Notifications.on('engineCreated', api => { api.asc_registerCallback('asc_onWorkbookLocked', (locked) => { @@ -23,11 +22,17 @@ const StatusbarController = inject('sheets', 'storeFocusObjects')(observer(props api.asc_registerCallback('asc_onSheetsChanged', onApiSheetsChanged); api.asc_registerCallback('asc_onActiveSheetChanged', onApiActiveSheetChanged); api.asc_registerCallback('asc_onHidePopMenu', onApiHideTabContextMenu); - // api.asc_registerCallback('asc_onUpdateTabColor', onApiUpdateTabColor); + api.asc_registerCallback('asc_onUpdateTabColor', onApiUpdateTabColor); + // api.asc_registerCallback('asc_onCoAuthoringDisconnect', onApiDisconnect); }); Common.Notifications.on('document:ready', onApiSheetsChanged); + // Common.Notifications.on('api:disconnect', onApiDisconnect); }); + const onApiDisconnect = () => { + users.resetDisconnected(true); + } + const onApiSheetsChanged = () => { const api = Common.EditorApi.get(); const sheets_count = api.asc_getWorksheetsCount(); @@ -49,6 +54,8 @@ const StatusbarController = inject('sheets', 'storeFocusObjects')(observer(props } sheets.resetSheets(items); + + updateTabsColors(); }; const onApiActiveSheetChanged = (index) => { @@ -62,6 +69,51 @@ const StatusbarController = inject('sheets', 'storeFocusObjects')(observer(props f7.popover.close('.document-menu.modal-in', false); } + + const loadTabColor = sheetindex => { + const api = Common.EditorApi.get(); + let tab = sheets.sheets.find(sheet => sheet.index === sheetindex); + + if (tab) { + setTabLineColor(tab, api.asc_getWorksheetTabColor(sheetindex)); + } + + }; + + const onApiUpdateTabColor = index => { + loadTabColor(index); + }; + + const setTabLineColor = (tab, color) => { + if (tab) { + if (null !== color) { + color = '#' + Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); + } else { + color = ''; + } + + if (color.length) { + if (!tab.active) { + color = '0px 4px 0 ' + Common.Utils.RGBColor(color).toRGBA(0.7) + ' inset'; + } else { + color = '0px 4px 0 ' + color + ' inset'; + } + + $$('.sheet-tabs .tab a').eq(tab.index).css('box-shadow', color); + } else { + $$('.sheet-tabs .tab a').eq(tab.index).css('box-shadow', ''); + } + } + }; + + const updateTabsColors = () => { + const api = Common.EditorApi.get(); + + sheets.sheets.forEach(model => { + setTabLineColor(model, api.asc_getWorksheetTabColor(model.index)); + }); + }; + return null; })); @@ -69,7 +121,6 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(observer(props => const {sheets, storeAppOptions, users} = props; const {t} = useTranslation(); const _t = t('Statusbar', {returnObjects: true}); - const isEdit = storeAppOptions.isEdit; const isDisconnected = users.isDisconnected; @@ -85,51 +136,6 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(observer(props => }; }, []); - // const loadTabColor = sheetindex => { - // const api = Common.EditorApi.get(); - // let tab = sheets.sheets.find(sheet => sheet.index === sheetindex); - - // if (tab) { - // setTabLineColor(tab, api.asc_getWorksheetTabColor(sheetindex)); - // } - - // }; - - // const onApiUpdateTabColor = index => { - // loadTabColor(index); - // }; - - // const setTabLineColor = (tab, color) => { - // console.log(color); - // if (tab) { - // if (null !== color) { - // color = '#' + Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); - // } else { - // color = ''; - // } - - // if (color.length) { - // if (!tab.active) { - // color = '0px 4px 0 ' + Common.Utils.RGBColor(color).toRGBA(0.7) + ' inset'; - // } else { - // color = '0px 4px 0 ' + color + ' inset'; - // } - - // $$('.sheet-tabs .tab a').eq(tab.index).css('box-shadow', color); - // } else { - // $$('.sheet-tabs .tab a').eq(tab.index).css('box-shadow', ''); - // } - // } - // }; - - // const updateTabsColors = () => { - // const api = Common.EditorApi.get(); - - // sheets.sheets.forEach(model => { - // setTabLineColor(model, api.asc_getWorksheetTabColor(model.index)); - // }); - // }; - const onTabClicked = i => { const model = sheets.at(i); const api = Common.EditorApi.get(); @@ -150,7 +156,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(observer(props => let index = 0, name; while(++index < 1000) { - name = /*this.strSheet*/ 'Sheet' + index; + name = _t.textSheet + index; if (items.indexOf(name.toLowerCase()) < 0) break; } @@ -174,7 +180,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(observer(props => if (index == api.asc_getActiveWorksheetIndex()) { if (!opened) { - if (isEdit && !isDisconnected) { + if (isEdit && !sheets.isWorkbookLocked) { api.asc_closeCellEditor(); f7.popover.open('#idx-tab-context-menu-popover', target); } @@ -325,15 +331,11 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(observer(props => }; return ( - ) })); diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/AddFunction.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/AddFunction.jsx index 5c6a4a525..8e9d6cae4 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/add/AddFunction.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/add/AddFunction.jsx @@ -10,6 +10,11 @@ import {AddFunction} from '../../view/add/AddFunction'; class _FunctionGroups extends Component { constructor (props) { super(props); + + Common.Notifications.on('changeFuncLang', () => { + this.api = Common.EditorApi.get(); + this.init(); + }); } componentDidMount() { Common.Notifications.on('document:ready', () => { diff --git a/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx b/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx index 92dd49864..8d85d8e71 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx @@ -77,6 +77,7 @@ class ApplicationSettingsController extends Component { onFormulaLangChange(value) { LocalStorage.setItem("sse-settings-func-lang", value); this.initRegSettings(); + Common.Notifications.trigger('changeFuncLang'); } onRegSettings(regCode) { diff --git a/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx b/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx index 5e19d53b6..0b566123f 100644 --- a/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx @@ -2,118 +2,27 @@ import React, { Fragment } from 'react'; import { View, Link, Icon, Popover, List, ListButton, Actions, ActionsGroup, ActionsButton } from 'framework7-react'; import { useTranslation } from 'react-i18next'; import { Device } from '../../../../common/mobile/utils/device'; +import { inject, observer } from 'mobx-react'; const viewStyle = { height: 30 }; -const StatusbarView = props => { +const StatusbarView = inject('storeAppOptions', 'sheets')(observer(props => { const { t } = useTranslation(); const _t = t('Statusbar', {returnObjects: true}); const isAndroid = Device.android; const isPhone = Device.isPhone; - const { isEdit, allSheets, hiddenSheets, isWorkbookLocked } = props; + const {sheets, storeAppOptions} = props; + const allSheets = sheets.sheets; + const hiddenSheets = sheets.hiddenWorksheets(); + const isWorkbookLocked = sheets.isWorkbookLocked; + const isEdit = storeAppOptions.isEdit; - const getTabColor = model => { - let color = model.color; - - if (color) { - color = '#' + Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); - } else { - color = ''; - } - - if (color.length) { - if (!model.active) { - color = '0px 4px 0 ' + Common.Utils.RGBColor(color).toRGBA(0.7) + ' inset'; - } else { - color = '0px 4px 0 ' + color + ' inset'; - } - } - - return color; - } - - // const $boxTabs = $$('.sheet-tabs'); - // const $statusBar = $$('.statusbar'); - - // $boxTabs.on('touchstart', onTouchStart); - // $boxTabs.on('touchmove', onTouchMove); - // $boxTabs.on('touchend', onTouchEnd); - - // let touch = {}; - - // function hasInvisible() { - // let _left_bound_ = $boxTabs.offset().left, - // _right_bound_ = $boxTabs.width() + _left_bound_ - $statusBar.width(); - // // _right_bound_ = _left_bound_ + $boxTabs.width(); - - // // console.log(_left_bound_); - // console.log(_right_bound_); - - // let tab = $$('.sheet-tabs li')[0]; - // let rect = tab.getBoundingClientRect(); - - // if (!(rect.left < _left_bound_)) { - // // tab = $$('.sheet-tabs li')[$$('.sheet-tabs li').length - 1]; - // // rect = tab.getBoundingClientRect(); - - // // if (!((rect.right).toFixed(2) > _right_bound_)) - // // return false; - // if(_right_bound_ <= 0) { - // return false; - // } - // } - - // return true; - // } - - // function onTouchStart(e) { - // if (hasInvisible()) { - // console.log(e); - // let touches = e.changedTouches; - // touch.startx = touches[0].clientX; - // touch.scrollx = $boxTabs.scrollLeft(); - // // console.log(touch.scrollx); - - // touch.timer = setTimeout(function () { - // // touch.longtouch = true; - // }, 500); - // // e.preventDefault(); - // } - // } - - // function onTouchMove(e) { - // if (touch.startx !== undefined) { - // // console.log(e); - // let touches = e.changedTouches; - - // if (touch.longtouch) {} - // else { - // if (touch.timer) clearTimeout(touch.timer), delete touch.timer; - // let valueLeft = touch.scrollx + (touch.startx - touches[0].clientX); - // console.log(valueLeft); - // // $boxTabs.scrollLeft(valueLeft); - // - // } - - // // e.preventDefault(); - // } - // } - - // function onTouchEnd(e) { - // if (touch.startx !== undefined) { - // // console.log(e); - // touch.longtouch = false; - // delete touch.startx; - // // e.preventDefault(); - // } - // } - - return ( + return ( -
+
@@ -122,8 +31,8 @@ const StatusbarView = props => {
    {allSheets.map((model,i) => model.hidden ? null : -
  • props.onTabClick(i, e.target)}> - {model.name} +
  • props.onTabClick(i, e.target)}> + {model.name}
    • )} @@ -189,6 +98,6 @@ const StatusbarView = props => { ) : null} ) -}; +})); export {StatusbarView}; diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx index d300691eb..75fbe135d 100644 --- a/apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx @@ -89,7 +89,7 @@ const AddLinkView = props => { value={link} onChange={(event) => { setLink(event.target.value); - if(stateAutoUpdate) setDisplayText(event.target.value); + if((!stateDisplayText || stateDisplayText === link) && stateAutoUpdate) setDisplayText(event.target.value); }} className={isIos ? 'list-input-right' : ''} /> @@ -115,8 +115,10 @@ const AddLinkView = props => { placeholder={_t.textDisplay} value={stateDisplayText} disabled={displayDisabled} - onChange={(event) => {setDisplayText(event.target.value); - setAutoUpdate(event.target.value == ''); }} + onChange={(event) => { + setDisplayText(event.target.value); + setAutoUpdate(event.target.value == ''); + }} className={isIos ? 'list-input-right' : ''} />