diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index d1d3b0c81..01f84986a 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -886,14 +886,13 @@ input[type="number"]::-webkit-inner-spin-button { } .functions-list { - max-height: 175px; + max-height: 200px; width: 360px; overflow-y: auto; overflow-x: hidden; - background-color: @white; + background-color: @background-primary; &__mobile { position: absolute; - top: 30px; right: 0; left: 0; width: 100%; @@ -916,6 +915,54 @@ input[type="number"]::-webkit-inner-spin-button { } } +// Function List Popover + +#idx-functions-list { + width: 350px; + .popover-inner { + .navbars { + .right .link { + font-weight: 600; + } + .navbar-bg { + background: @background-secondary; + &::after { + background: @background-menu-divider; + } + } + } + .page-function-info{ + .navbar { + .navbar-bg::after { + background: @background-menu-divider; + } + .navbar-inner{ + background: @background-secondary; + .title { + color: @text-normal; + } + .right .link { + color: @brandColor; + font-weight: 600; + } + .icon-back::after { + color: @brandColor; + } + } + } + .function-info { + p { + color: @text-secondary; + } + h3 { + font-weight: 500; + color: @text-normal; + } + } + } + } +} + // Highlight Colors .highlight-palette { diff --git a/apps/spreadsheeteditor/mobile/src/controller/CellEditor.jsx b/apps/spreadsheeteditor/mobile/src/controller/CellEditor.jsx index f67658762..d78b7fa7d 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/CellEditor.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/CellEditor.jsx @@ -38,7 +38,7 @@ const CellEditor = props => { const onFormulaCompleteMenu = funcArr => { setFuncArr(funcArr); - if(!Device.isPhone && funcArr) { + if(funcArr) { f7.popover.open('#idx-functions-list', '#idx-list-target'); } else { f7.popover.close('#idx-functions-list'); diff --git a/apps/spreadsheeteditor/mobile/src/less/app.less b/apps/spreadsheeteditor/mobile/src/less/app.less index b9a01b802..322d2a7c7 100644 --- a/apps/spreadsheeteditor/mobile/src/less/app.less +++ b/apps/spreadsheeteditor/mobile/src/less/app.less @@ -59,7 +59,7 @@ } .page-function-info { &.page-content, .page-content { - background-color: @white; + background-color: @background-primary; } } diff --git a/apps/spreadsheeteditor/mobile/src/view/CellEditor.jsx b/apps/spreadsheeteditor/mobile/src/view/CellEditor.jsx index 64e6bd957..776947056 100644 --- a/apps/spreadsheeteditor/mobile/src/view/CellEditor.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/CellEditor.jsx @@ -51,23 +51,8 @@ const FunctionsList = props => { onClick={(e) => { e.stopPropagation(); let functionInfo = functions[elem.name]; - if(functionInfo) { - if(isPhone) { - f7.dialog.create({ - title: functionInfo.caption, - content: `

${functionInfo.caption} ${functionInfo.args}

${functionInfo.descr}

`, - buttons: [ - {text: t('View.Add.textCancel')}, - { - text: t('View.Add.textInsert'), - onClick: () => props.insertFormula(elem.name, elem.type) - } - ] - }).open(); - } else { - f7.views.current.router.navigate('/function-info/', {props: {functionInfo, functionObj: elem, insertFormula: props.insertFormula}}); - } + f7.views.current.router.navigate('/function-info/', {props: {functionInfo, functionObj: elem, insertFormula: props.insertFormula}}); } }}> @@ -114,16 +99,8 @@ const CellEditorView = props => {
- {funcArr && funcArr.length ? - isPhone && - - : null} - {!isPhone && + { { closeByOutsideClick={true} > {funcArr && funcArr.length ? - +