diff --git a/apps/common/mobile/lib/component/HighlightColorPalette.jsx b/apps/common/mobile/lib/component/HighlightColorPalette.jsx index 32980e2cf0..0f839bef03 100644 --- a/apps/common/mobile/lib/component/HighlightColorPalette.jsx +++ b/apps/common/mobile/lib/component/HighlightColorPalette.jsx @@ -2,6 +2,8 @@ import React from 'react'; import { f7, ListItem, List, Icon, Page } from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from '../../utils/device'; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconCancellation from '@common-icons/icon-cancellation.svg'; const HighlightColorPalette = ({changeColor, curColor}) => { const isAndroid = Device.android; @@ -27,7 +29,9 @@ const HighlightColorPalette = ({changeColor, curColor}) => { changeColor('transparent')} title={t('Common.HighlightColorPalette.textNoFill')}> - {!isAndroid && } + {!isAndroid && + + } ) diff --git a/apps/common/mobile/lib/component/ThemeColorPalette.jsx b/apps/common/mobile/lib/component/ThemeColorPalette.jsx index 6666bf4893..1ed52bead4 100644 --- a/apps/common/mobile/lib/component/ThemeColorPalette.jsx +++ b/apps/common/mobile/lib/component/ThemeColorPalette.jsx @@ -2,6 +2,10 @@ import React, { useState, useEffect } from 'react'; import { f7, ListItem, List, Icon } from 'framework7-react'; import { useTranslation } from 'react-i18next'; import { LocalStorage } from '../../utils/LocalStorage.mjs'; +import {Device} from '../../utils/device'; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconPlusIos from '@common-ios-icons/icon-plus.svg'; +import IconPlusAndroid from '@common-android-icons/icon-plus.svg'; const ThemeColors = ({ themeColors, onColorClick, curColor, isTypeColors, isTypeCustomColors }) => { return ( @@ -195,7 +199,10 @@ const CustomColorPicker = props => {
{addNewColor(stateColor)}}> - + {Device.ios ? + : + + } diff --git a/apps/common/mobile/lib/pages/CollaborationPage.jsx b/apps/common/mobile/lib/pages/CollaborationPage.jsx index 61fa7f8b9c..fef4050ce5 100644 --- a/apps/common/mobile/lib/pages/CollaborationPage.jsx +++ b/apps/common/mobile/lib/pages/CollaborationPage.jsx @@ -3,6 +3,16 @@ import { observer, inject } from "mobx-react"; import { List, ListItem, Navbar, NavRight, Page, Icon, Link } from 'framework7-react'; import { useTranslation } from 'react-i18next'; import { Device } from "../../utils/device"; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconExpandDownIos from '@common-ios-icons/icon-expand-down.svg'; +import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg'; +import IconReviewIos from '@common-ios-icons/icon-review.svg'; +import IconReviewAndroid from '@common-android-icons/icon-review.svg'; +import IconSharingSettings from '@common-icons/icon-sharing-settings.svg'; +import IconInsertCommentIos from '@common-ios-icons/icon-insert-comment.svg'; +import IconInsertCommentAndroid from '@common-android-icons/icon-insert-comment.svg'; +import IconUsersIos from '@common-ios-icons/icon-users.svg'; +import IconUsersAndroid from '@common-android-icons/icon-users.svg'; const CollaborationPage = props => { const { t } = useTranslation(); @@ -18,7 +28,10 @@ const CollaborationPage = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -26,22 +39,31 @@ const CollaborationPage = props => { {(sharingSettingsUrl && !isForm) && - + } {props.users.editUsers.length > 0 && - + {Device.ios ? + : + + } } {appOptions.canViewComments && - + {Device.ios ? + : + + } } {(window.editorType === 'de' && (appOptions.canReview || appOptions.canViewReview) && !isViewer) && - + {Device.ios ? + : + + } } diff --git a/apps/common/mobile/lib/pages/UsersPage.jsx b/apps/common/mobile/lib/pages/UsersPage.jsx index 87e9fd9192..10c832c0de 100644 --- a/apps/common/mobile/lib/pages/UsersPage.jsx +++ b/apps/common/mobile/lib/pages/UsersPage.jsx @@ -3,6 +3,9 @@ import { observer, inject } from "mobx-react"; import { List, ListItem, Navbar, NavRight, Page, Icon, Link } from 'framework7-react'; import { useTranslation } from 'react-i18next'; import { Device } from "../../utils/device"; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconExpandDownIos from '@common-ios-icons/icon-expand-down.svg'; +import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg'; const UsersPage = inject("users")(observer(props => { const { t } = useTranslation(); @@ -15,7 +18,10 @@ const UsersPage = inject("users")(observer(props => { {Device.phone && - + {Device.ios ? + : + + } } diff --git a/apps/common/mobile/lib/view/ContextMenu.jsx b/apps/common/mobile/lib/view/ContextMenu.jsx index 50e5fc1a20..2f494c59ba 100644 --- a/apps/common/mobile/lib/view/ContextMenu.jsx +++ b/apps/common/mobile/lib/view/ContextMenu.jsx @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import { Popover, List, ListItem, ListButton, Link, Icon, Actions, ActionsGroup, ActionsButton } from 'framework7-react'; import { f7 } from 'framework7-react'; import { useTranslation } from 'react-i18next'; +import SvgIcon from '@common/lib/component/SvgIcon'; const idContextMenuElement = "idx-context-menu-popover"; @@ -30,7 +31,7 @@ class ContextMenuView extends Component { !b.icon ? this.props.onMenuItemClick(b.event)} /> : this.props.onMenuItemClick(b.event)}> - + )} diff --git a/apps/common/mobile/lib/view/Search.jsx b/apps/common/mobile/lib/view/Search.jsx index 3fce29f818..283af4d7b8 100644 --- a/apps/common/mobile/lib/view/Search.jsx +++ b/apps/common/mobile/lib/view/Search.jsx @@ -4,6 +4,13 @@ import { Popover, Popup, View, f7 } from 'framework7-react'; import { Device } from '../../../../common/mobile/utils/device'; import { observable, runInAction } from "mobx"; import { observer } from "mobx-react"; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconSettingsIos from '@common-ios-icons/icon-settings.svg'; +import IconSettingsAndroid from '@common-android-icons/icon-settings.svg'; +import IconPrevIos from '@common-ios-icons/icon-prev.svg'; +import IconPrevAndroid from '@common-android-icons/icon-prev.svg'; +import IconNextIos from '@common-ios-icons/icon-next.svg'; +import IconNextAndroid from '@common-android-icons/icon-next.svg'; const searchOptions = observable({ usereplace: false, @@ -292,7 +299,10 @@ class SearchView extends Component {
- + {Device.ios ? + : + + }
@@ -326,10 +336,16 @@ class SearchView extends Component { }
this.onSearchClick(SEARCH_BACKWARD)}> - + {Device.ios ? + : + + } this.onSearchClick(SEARCH_FORWARD)}> - + {Device.ios ? + : + + }
diff --git a/apps/common/mobile/lib/view/VersionHistory.jsx b/apps/common/mobile/lib/view/VersionHistory.jsx index fe517f3d7c..286db19719 100644 --- a/apps/common/mobile/lib/view/VersionHistory.jsx +++ b/apps/common/mobile/lib/view/VersionHistory.jsx @@ -3,6 +3,9 @@ import { Page, Navbar, BlockTitle, List, ListItem, Icon, NavRight, Link } from " import { useTranslation } from "react-i18next"; import { observer, inject } from "mobx-react"; import { Device } from '../../utils/device'; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconExpandDownIos from '@common-ios-icons/icon-expand-down.svg'; +import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg'; const VersionHistoryView = inject('storeVersionHistory', 'users')(observer(props => { const { t } = useTranslation(); @@ -51,13 +54,19 @@ const VersionHistoryView = inject('storeVersionHistory', 'users')(observer(props {Device.phone ? - + {Device.ios ? + : + + } : !isNavigate && - + {Device.ios ? + : + + } } diff --git a/apps/common/mobile/lib/view/collaboration/Comments.jsx b/apps/common/mobile/lib/view/collaboration/Comments.jsx index 8c86a3776b..a738edc341 100644 --- a/apps/common/mobile/lib/view/collaboration/Comments.jsx +++ b/apps/common/mobile/lib/view/collaboration/Comments.jsx @@ -3,6 +3,20 @@ import {observer, inject} from "mobx-react"; import { f7, Popup, Sheet, Popover, Page, Toolbar, Navbar, NavLeft, NavRight, NavTitle, Link, Input, Icon, List, ListItem, Actions, ActionsGroup, ActionsButton } from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from '../../../utils/device'; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconDoneCommentWhite from '@common-android-icons/icon-done-comment-white.svg'; +import IconExpandDownIos from '@common-ios-icons/icon-expand-down.svg'; +import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg'; +import IconResolveCommentAndroid from '@common-android-icons/icon-resolve-comment.svg'; +import IconResolveCommentIos from '@common-ios-icons/icon-resolve-comment.svg'; +import IconResolveCommentCheckIos from '@common-ios-icons/icon-resolve-comment-check.svg'; +import IconResolveCommentCheckAndroid from '@common-android-icons/icon-resolve-comment-check.svg'; +import IconMenuCommentIos from '@common-ios-icons/icon-menu-comment.svg'; +import IconMenuCommentAndroid from '@common-android-icons/icon-menu-comment.svg'; +import IconPrevIos from '@common-ios-icons/icon-prev.svg'; +import IconPrevAndroid from '@common-android-icons/icon-prev.svg'; +import IconNextIos from '@common-ios-icons/icon-next.svg'; +import IconNextAndroid from '@common-android-icons/icon-next.svg'; // Utils const sliceQuote = (text) => { @@ -54,7 +68,7 @@ const AddCommentPopup = inject("storeComments")(observer(props => { props.onAddNewComment(stateText, false) }, 500); }}> - {Device.android ? : _t.textDone} + {Device.android ? : _t.textDone} @@ -236,7 +250,7 @@ const EditCommentPopup = inject("storeComments")(observer(({storeComments, comme }, 500); }} > - {Device.android ? : _t.textDone} + {Device.android ? : _t.textDone} @@ -381,7 +395,7 @@ const AddReplyPopup = inject("storeComments")(observer(({storeComments, userInfo onAddReply(comment, stateText); }, 500); }}> - {Device.android ? : _t.textDone} + {Device.android ? : _t.textDone} @@ -522,7 +536,7 @@ const EditReplyPopup = inject("storeComments")(observer(({storeComments, comment }, 500); }} > - {Device.android ? : _t.textDone} + {Device.android ? : _t.textDone} @@ -717,7 +731,10 @@ const ViewComments = inject("storeComments", "storeAppOptions", "storeReview")(o {Device.phone && - + {Device.ios ? + : + + } } @@ -740,11 +757,25 @@ const ViewComments = inject("storeComments", "storeAppOptions", "storeReview")(o
{isEdit && !viewMode &&
- {(comment.editable && displayMode === 'markup' && !wsProps?.Objects && (!isViewer || canEditComments) && isAvailableCommenting) &&
{onResolveComment(comment);}}>
} + {(comment.editable && displayMode === 'markup' && !wsProps?.Objects && (!isViewer || canEditComments) && isAvailableCommenting) &&
{onResolveComment(comment);}}> + {Device.ios ? + comment.resolved ? + : + + : + comment.resolved ? + : + + } +
+ } {(displayMode === 'markup' && !wsProps?.Objects && (!isViewer || canEditComments) && isAvailableCommenting) &&
{setComment(comment); openActionComment(true);}}> - + {Device.ios ? + : + + }
}
@@ -776,7 +807,10 @@ const ViewComments = inject("storeComments", "storeAppOptions", "storeReview")(o
{setComment(comment); setReply(reply); openActionReply(true);}} > - + {Device.ios ? + : + + }
} @@ -858,8 +892,18 @@ const CommentList = inject("storeComments", "storeAppOptions", "storeReview")(ob } {comments.length > 1 &&
- - + + {Device.ios ? + : + + } + + + {Device.ios ? + : + + } +
} @@ -877,7 +921,17 @@ const CommentList = inject("storeComments", "storeAppOptions", "storeReview")(ob {isEdit && !viewMode &&
- {(comment.editable && displayMode === 'markup' && !wsProps?.Objects && (!isViewer || canEditComments) && isAvailableCommenting) &&
{onResolveComment(comment);}}>
} + {(comment.editable && displayMode === 'markup' && !wsProps?.Objects && (!isViewer || canEditComments) && isAvailableCommenting) &&
{onResolveComment(comment);}}> + {Device.ios ? + comment.resolved ? + : + + : + comment.resolved ? + : + + } +
} {(displayMode === 'markup' && !wsProps?.Objects && (!isViewer || canEditComments) && isAvailableCommenting) &&
{openActionComment(true);}}> @@ -913,7 +967,10 @@ const CommentList = inject("storeComments", "storeAppOptions", "storeReview")(ob
{setReply(reply); openActionReply(true);}} > - + {Device.ios ? + : + + }
} diff --git a/apps/common/mobile/lib/view/collaboration/Review.jsx b/apps/common/mobile/lib/view/collaboration/Review.jsx index 39d9763817..1b978c02ce 100644 --- a/apps/common/mobile/lib/view/collaboration/Review.jsx +++ b/apps/common/mobile/lib/view/collaboration/Review.jsx @@ -4,6 +4,21 @@ import { Page, Navbar, NavRight, List, ListItem, Icon, Toggle, Toolbar, Link } f import { f7 } from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from "../../../utils/device"; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconExpandDownIos from '@common-ios-icons/icon-expand-down.svg'; +import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg'; +import IconReviewChangesIos from '@common-ios-icons/icon-review-changes.svg'; +import IconReviewChangesAndroid from '@common-android-icons/icon-review-changes.svg'; +import IconAcceptChangesIos from '@common-ios-icons/icon-accept-changes.svg'; +import IconAcceptChangesAndroid from '@common-android-icons/icon-accept-changes.svg'; +import IconRejectChangesIos from '@common-ios-icons/icon-reject-changes.svg'; +import IconRejectChangesAndroid from '@common-android-icons/icon-reject-changes.svg'; +import IconGotoIos from '@common-ios-icons/icon-goto.svg'; +import IconGotoAndroid from '@common-android-icons/icon-goto.svg'; +import IconPrevChangeIos from '@common-ios-icons/icon-prev-change.svg'; +import IconPrevChangeAndroid from '@common-android-icons/icon-prev-change.svg'; +import IconNextChangeIos from '@common-ios-icons/icon-next-change.svg'; +import IconNextChangeAndroid from '@common-android-icons/icon-next-change.svg'; const PageReview = props => { const { t } = useTranslation(); @@ -18,7 +33,10 @@ const PageReview = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -37,18 +55,27 @@ const PageReview = props => { - + {Device.ios ? + : + + } {canReview && !props.canUseReviewPermissions && !isProtected && {props.onAcceptAll();}}> - + {Device.ios ? + : + + } } {canReview && !props.canUseReviewPermissions && !isProtected && {props.onRejectAll();}}> - + {Device.ios ? + : + + } } @@ -66,7 +93,10 @@ const DisplayMode = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -118,7 +148,10 @@ const PageReviewChange = inject("storeAppOptions")(observer(props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -144,19 +177,29 @@ const PageReviewChange = inject("storeAppOptions")(observer(props => { {props.onDeleteChange()}}>{_t.textDelete} } - {props.goto && {props.onGotoNextChange()}}>} + {props.goto && {props.onGotoNextChange()}}> + {Device.ios ? + : + + }} {props.onPrevChange()}} className={isLockPrevNext && 'disabled'} - > + >{Device.ios ? + : + + } {props.onNextChange()}} className={isLockPrevNext && 'disabled'} - > + >{Device.ios ? + : + + } {change ? diff --git a/apps/common/mobile/resources/icons/android/icon-edit-settings.svg b/apps/common/mobile/resources/icons/android/icon-edit-settings.svg index 882113eb44..78f8fa637c 100644 --- a/apps/common/mobile/resources/icons/android/icon-edit-settings.svg +++ b/apps/common/mobile/resources/icons/android/icon-edit-settings.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/apps/common/mobile/resources/icons/ios/icon-linespacing.svg b/apps/common/mobile/resources/icons/common/icon-linespacing.svg similarity index 100% rename from apps/common/mobile/resources/icons/ios/icon-linespacing.svg rename to apps/common/mobile/resources/icons/common/icon-linespacing.svg diff --git a/apps/documenteditor/mobile/src/components/PasswordField/PasswordField.jsx b/apps/documenteditor/mobile/src/components/PasswordField/PasswordField.jsx index 0523ef8f2b..4ef1217912 100644 --- a/apps/documenteditor/mobile/src/components/PasswordField/PasswordField.jsx +++ b/apps/documenteditor/mobile/src/components/PasswordField/PasswordField.jsx @@ -1,5 +1,8 @@ import React, { useState } from 'react'; import { Device } from '../../../../../common/mobile/utils/device'; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconShowPasswordAndroid from '@common-android-icons/icon-show-password.svg'; +import IconHidePasswordAndroid from '@common-android-icons/icon-hide-password.svg'; const PasswordField = ({ label, placeholder, value, handlerChange, maxLength }) => { const [password, setPassword] = useState(value); @@ -22,9 +25,14 @@ const PasswordField = ({ label, placeholder, value, handlerChange, maxLength })
{label}
- {!isIos && - - } + {!isIos ? + + {isShowPassword ? + : + + } + + : null}
diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx index 6af89e79b4..b3977d2546 100644 --- a/apps/documenteditor/mobile/src/page/main.jsx +++ b/apps/documenteditor/mobile/src/page/main.jsx @@ -17,6 +17,9 @@ import Snackbar from '../components/Snackbar/Snackbar'; import { Themes } from '../../../../common/mobile/lib/controller/Themes'; import EditView from '../view/edit/Edit'; import VersionHistoryController from '../../../../common/mobile/lib/controller/VersionHistory'; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconEditMode from '@icons/icon-edit-mode.svg'; + export const MainContext = createContext(); @@ -352,7 +355,7 @@ const MainPage = inject('storeDocumentInfo', 'users', 'storeAppOptions', 'storeV >
turnOffViewerMode()}> - +
diff --git a/apps/documenteditor/mobile/src/view/ContextMenu.jsx b/apps/documenteditor/mobile/src/view/ContextMenu.jsx index c2c8411e2e..fb3b29f436 100644 --- a/apps/documenteditor/mobile/src/view/ContextMenu.jsx +++ b/apps/documenteditor/mobile/src/view/ContextMenu.jsx @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import { Popover, List, ListItem, ListButton, Link, Icon } from 'framework7-react'; import { f7 } from 'framework7-react'; +import SvgIcon from '@common/lib/component/SvgIcon'; class ContextMenuView extends Component { constructor(props) { @@ -27,7 +28,7 @@ class ContextMenuView extends Component { !!b.text ? this.props.onMenuItemClick(b.action)} /> : - + )} diff --git a/apps/documenteditor/mobile/src/view/DropdownList.jsx b/apps/documenteditor/mobile/src/view/DropdownList.jsx index 1b04171b38..d95e0ad1ae 100644 --- a/apps/documenteditor/mobile/src/view/DropdownList.jsx +++ b/apps/documenteditor/mobile/src/view/DropdownList.jsx @@ -2,6 +2,8 @@ import React, { Component, useEffect, useState } from 'react'; import { f7, Page, Navbar, List, ListItem, Popover, View, Link, Sheet, Icon, NavRight, BlockTitle, NavLeft, Popup } from "framework7-react"; import { Device } from '../../../../common/mobile/utils/device'; import { useTranslation } from 'react-i18next'; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconDone from '@common-android-icons/icon-done.svg'; const PageCustomOptionList = props => { const { t } = useTranslation(); @@ -93,7 +95,9 @@ const PageDropdownList = props => { - {Device.android && } + {Device.android && + + } diff --git a/apps/documenteditor/mobile/src/view/Toolbar.jsx b/apps/documenteditor/mobile/src/view/Toolbar.jsx index 744e1c61b2..1a823e5cb2 100644 --- a/apps/documenteditor/mobile/src/view/Toolbar.jsx +++ b/apps/documenteditor/mobile/src/view/Toolbar.jsx @@ -3,6 +3,21 @@ import { useTranslation } from 'react-i18next'; import { NavLeft, NavRight, Link } from 'framework7-react'; import { Device } from '../../../../common/mobile/utils/device'; import EditorUIController from '../lib/patch'; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconReturnIos from '@common-ios-icons/icon-return.svg'; +import IconReturnAndroid from '@common-android-icons/icon-return.svg'; +import IconStandardView from '@icons/icon-standard-view.svg'; +import IconSaveForm from '@icons/icon-save-form.svg'; +import IconMobileView from '@icons/icon-mobile-view.svg'; +import IconSearch from '@common-icons/icon-search.svg'; +import IconCollaboration from '@common-icons/icon-collaboration.svg'; +import IconVersionHistory from '@common-icons/icon-version-history.svg'; +import IconEditForAndroid from '@common-android-icons/icon-edit.svg'; +import IconEditForIos from '@common-ios-icons/icon-edit.svg'; +import IconSettings from '@common-icons/icon-settings.svg'; +import IconNextField from '@icons/icon-next-field.svg'; +import IconPrevField from '@icons/icon-prev-field.svg'; +import IconCheck from '@common-android-icons/icon-check.svg'; const ToolbarView = props => { const { t } = useTranslation(); @@ -32,7 +47,11 @@ const ToolbarView = props => { {(!isViewer && !isVersionHistoryMode) && - props.turnOnViewerMode()}> + props.turnOnViewerMode()}> + {Device.android && + + } + } {isVersionHistoryMode ? { @@ -43,7 +62,12 @@ const ToolbarView = props => { : null} {(props.isShowBack && isViewer && !isVersionHistoryMode) && - Common.Notifications.trigger('goback')}> + Common.Notifications.trigger('goback')}> + {Device.ios ? + : + + } + } {((Device.ios && props.isEdit && !isViewer && !isVersionHistoryMode) || (Device.ios && isEditableForms)) && @@ -72,12 +96,23 @@ const ToolbarView = props => { } {!isEditableForms ? [ ((isViewer || !Device.phone) && props.isMobileViewAvailable && !props.disabledControls && !isVersionHistoryMode) && - { + { props.changeMobileView(); props.openOptions('snackbar'); - }}>, + }}> + {isMobileView ? + : + + } + , (props.showEditDocument && !isViewer) && - , + + {Device.ios ? + + : + + } + , (props.isEdit && isAvailableExt && !isViewer && EditorUIController.getToolbarOptions && {EditorUIController.getToolbarOptions({ @@ -88,25 +123,31 @@ const ToolbarView = props => { ), (Device.phone ? null : - + + + ), (window.matchMedia("(min-width: 360px)").matches && !isForm && !isVersionHistoryMode ? - props.openOptions('coauth')}> + props.openOptions('coauth')}> + + : null), (isVersionHistoryMode ? - props.openOptions('history')}> + props.openOptions('history')}> + + : null), props.openOptions('settings')}> ] : [ - props.movePrevField()}>, - props.moveNextField()}>, + props.movePrevField()}>, + props.moveNextField()}>, (props.canSubmitForms ? [ props.openOptions('settings')}>, + onClick={() => props.openOptions('settings')}>, { ] : [ props.saveForm()}>, + href={false} onClick={() => props.saveForm()}>, {props.openOptions('settings')}}> + className={(props.disabledSettings || props.disabledControls || isDisconnected || isOpenModal) && 'disabled'} id='btn-settings' + href={false} onClick={() => {props.openOptions('settings')}}> ] ) ]} diff --git a/apps/documenteditor/mobile/src/view/add/AddImage.jsx b/apps/documenteditor/mobile/src/view/add/AddImage.jsx index 0f6361cb8b..fa9ca26785 100644 --- a/apps/documenteditor/mobile/src/view/add/AddImage.jsx +++ b/apps/documenteditor/mobile/src/view/add/AddImage.jsx @@ -2,6 +2,13 @@ import React, {useState} from 'react'; import {observer, inject} from "mobx-react"; import {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, BlockTitle} from 'framework7-react'; import { useTranslation } from 'react-i18next'; +import { Device } from '../../../../../common/mobile/utils/device'; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconImageLibraryIos from '@common-ios-icons/icon-image-library.svg'; +import IconImageLibraryAndroid from '@common-android-icons/icon-image-library.svg'; +import IconLinkIos from '@common-ios-icons/icon-link.svg'; +import IconLinkAndroid from '@common-android-icons/icon-link.svg'; + const PageLinkSettings = props => { const { t } = useTranslation(); @@ -37,12 +44,18 @@ const AddImage = props => { {props.onInsertByFile()}}> - + {Device.ios ? + : + + } - + {Device.ios ? + : + + } diff --git a/apps/documenteditor/mobile/src/view/add/AddLink.jsx b/apps/documenteditor/mobile/src/view/add/AddLink.jsx index d7bb3d8fff..67d4f511f8 100644 --- a/apps/documenteditor/mobile/src/view/add/AddLink.jsx +++ b/apps/documenteditor/mobile/src/view/add/AddLink.jsx @@ -2,6 +2,10 @@ import React, {useState} from 'react'; import {List, Page, Navbar, Icon, ListButton, ListInput, NavRight, Link, NavLeft, f7, NavTitle} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from "../../../../../common/mobile/utils/device"; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconClose from '@common-android-icons/icon-close.svg'; +import IconDone from '@common-android-icons/icon-done.svg'; +import IconDoneDisabled from '@common-android-icons/icon-done-disabled.svg'; const PageLink = props => { const { t } = useTranslation(); @@ -22,7 +26,9 @@ const PageLink = props => { { props.isNavigate ? f7.views.current.router.back() : props.closeModal('#add-link-popup', '#add-link-popover'); }}> - {Device.android && } + {Device.android && + + } {t('Add.textLinkSettings')} @@ -30,7 +36,11 @@ const PageLink = props => { { props.onInsertLink(stateLink, stateDisplay, stateTip); }} text={Device.ios ? t('Add.textDone') : ''}> - {Device.android && } + {Device.android && + stateLink.length < 1 ? + : + + } diff --git a/apps/documenteditor/mobile/src/view/add/AddOther.jsx b/apps/documenteditor/mobile/src/view/add/AddOther.jsx index 37a2b393bf..804cce7f68 100644 --- a/apps/documenteditor/mobile/src/view/add/AddOther.jsx +++ b/apps/documenteditor/mobile/src/view/add/AddOther.jsx @@ -3,6 +3,26 @@ import {observer, inject} from "mobx-react"; import {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, BlockTitle, Segmented, Button} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from "../../../../../common/mobile/utils/device"; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconPageBreakIos from '@common-ios-icons/icon-pagebreak.svg'; +import IconPageBreakAndroid from '@common-android-icons/icon-pagebreak.svg'; +import IconStringBreakIos from '@common-ios-icons/icon-stringbreak.svg'; +import IconStringBreakAndroid from '@common-android-icons/icon-stringbreak.svg'; +import IconSectionBreakIos from '@common-ios-icons/icon-sectionbreak.svg'; +import IconSectionBreakAndroid from '@common-android-icons/icon-sectionbreak.svg'; +import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg'; +import IconExpandUpAndroid from '@common-android-icons/icon-expand-up.svg'; +import IconInsertCommentIos from '@common-ios-icons/icon-insert-comment.svg'; +import IconInsertCommentAndroid from '@common-android-icons/icon-insert-comment.svg'; +import IconImage from '@common-icons/icon-image.svg'; +import IconLinkIos from '@common-ios-icons/icon-link.svg'; +import IconLinkAndroid from '@common-android-icons/icon-link.svg'; +import IconPageNumberIos from '@common-ios-icons/icon-pagenumber.svg'; +import IconPageNumberAndroid from '@common-android-icons/icon-pagenumber.svg'; +import IconTableContentsIos from '@ios-icons/icon-table-contents.svg'; +import IconTableContentsAndroid from '@android-icons/icon-table-contents.svg'; +import IconFootnoteIos from '@ios-icons/icon-footnote.svg'; +import IconFootnoteAndroid from '@android-icons/icon-footnote.svg'; const PageNumber = props => { const { t } = useTranslation(); @@ -33,17 +53,26 @@ const PageBreak = props => { { props.onPageBreak() }}> - + {Device.ios ? + : + + } { props.onColumnBreak(); }}> - + {Device.ios ? + : + + } - + {Device.ios ? + : + + } @@ -119,11 +148,15 @@ const PageFootnote = props => {
{isAndroid && }
@@ -187,21 +220,30 @@ const AddOther = props => { props.closeModal(); Common.Notifications.trigger('addcomment'); }}> - + {Device.ios ? + : + + } } - + {(isText && !disabledAddLink) && - + {Device.ios ? + : + + } } {!disabledAddPageNumber && - + {Device.ios ? + : + + } } {(isShape || isChart) || (isText && disabledAddBreak) ? null : @@ -210,12 +252,18 @@ const AddOther = props => { onColumnBreak: props.onColumnBreak, onInsertSectionBreak: props.onInsertSectionBreak }}> - + {Device.ios ? + : + + } } {!isHeader && - + {Device.ios ? + : + + } } {(isShape || isChart) || (isText && disabledAddFootnote) ? null : @@ -226,7 +274,10 @@ const AddOther = props => { onInsertFootnote: props.onInsertFootnote, initFootnoteStartAt: props.initFootnoteStartAt }}> - + {Device.ios ? + : + + } } diff --git a/apps/documenteditor/mobile/src/view/add/AddingPage.jsx b/apps/documenteditor/mobile/src/view/add/AddingPage.jsx index e66c79fe4c..2f7cdfa4bf 100644 --- a/apps/documenteditor/mobile/src/view/add/AddingPage.jsx +++ b/apps/documenteditor/mobile/src/view/add/AddingPage.jsx @@ -7,6 +7,7 @@ import { AddTableController } from "../../controller/add/AddTable"; import AddShapeController from "../../controller/add/AddShape"; import { AddOtherController } from "../../controller/add/AddOther"; import { MainContext } from '../../page/main'; +import SvgIcon from '@common/lib/component/SvgIcon'; const AddLayoutNavbar = ({ tabs, storeTableSettings }) => { const isAndroid = Device.android; @@ -26,7 +27,7 @@ const AddLayoutNavbar = ({ tabs, storeTableSettings }) => {
{tabs.map((item, index) => getTableStylesPreviews()} tabLink={"#" + item.id} tabLinkActive={index === 0}> - + )} {isAndroid && }
: diff --git a/apps/documenteditor/mobile/src/view/edit/EditChart.jsx b/apps/documenteditor/mobile/src/view/edit/EditChart.jsx index 20c31d37b6..dc15d8a052 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditChart.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditChart.jsx @@ -6,6 +6,23 @@ import {f7} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from '../../../../../common/mobile/utils/device'; import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx"; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconExpandDownIos from '@common-ios-icons/icon-expand-down.svg'; +import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg'; +import IconWrapInline from '@ios-icons/icon-wrap-inline.svg'; +import IconWrapSquare from '@ios-icons/icon-wrap-square.svg'; +import IconWrapTight from '@ios-icons/icon-wrap-tight.svg'; +import IconWrapThrough from '@ios-icons/icon-wrap-through.svg'; +import IconWrapTopBottom from '@ios-icons/icon-wrap-top-bottom.svg'; +import IconWrapInFront from '@ios-icons/icon-wrap-infront.svg'; +import IconWrapBehind from '@ios-icons/icon-wrap-behind.svg'; +import IconBlockAlignLeft from '@icons/icon-block-align-left.svg'; +import IconBlockAlignCenter from '@icons/icon-block-align-center.svg'; +import IconBlockAlignRight from '@icons/icon-block-align-right.svg'; +import IconMoveForeground from '@common-icons/icon-move-foreground.svg'; +import IconMoveBackground from '@common-icons/icon-move-background.svg'; +import IconMoveForward from '@common-icons/icon-move-forward.svg'; +import IconMoveBackward from '@common-icons/icon-move-backward.svg'; const PageCustomFillColor = props => { const { t } = useTranslation(); @@ -26,7 +43,10 @@ const PageCustomFillColor = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -89,7 +109,10 @@ const PageCustomBorderColor = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -125,7 +148,10 @@ const PageBorderColor = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -312,7 +338,10 @@ const PageDesign = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -358,32 +387,49 @@ const PageWrap = props => { {Device.phone && - + {Device.ios ? + : + + } } {props.onWrapType('inline')}}> - {!isAndroid && } + {!isAndroid && + + } {props.onWrapType('square')}}> - {!isAndroid && } + {!isAndroid && + + } {props.onWrapType('tight')}}> - {!isAndroid && } + {!isAndroid && + + } {props.onWrapType('through')}}> - {!isAndroid && } + {!isAndroid && + + } {props.onWrapType('top-bottom')}}> - {!isAndroid && } + {!isAndroid && + + } {props.onWrapType('infront')}}> - {!isAndroid && } + {!isAndroid && + + } {props.onWrapType('behind')}}> - {!isAndroid && } + {!isAndroid && + + } { @@ -397,19 +443,19 @@ const PageWrap = props => { onClick={() => { props.onAlign(Asc.c_oAscAlignH.Left) }}> - + { props.onAlign(Asc.c_oAscAlignH.Center) }}> - + { props.onAlign(Asc.c_oAscAlignH.Right) }}> - + @@ -461,23 +507,26 @@ const PageReorder = props => { {Device.phone && - + {Device.ios ? + : + + } } {props.onReorder('all-up')}} link='#' className='no-indicator'> - + {props.onReorder('all-down')}} link='#' className='no-indicator'> - + {props.onReorder('move-up')}} link='#' className='no-indicator'> - + {props.onReorder('move-down')}} link='#' className='no-indicator'> - + diff --git a/apps/documenteditor/mobile/src/view/edit/EditHeader.jsx b/apps/documenteditor/mobile/src/view/edit/EditHeader.jsx index 63769fb490..3e3d17e5df 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditHeader.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditHeader.jsx @@ -3,6 +3,9 @@ import { observer, inject } from "mobx-react"; import { List, ListItem, Segmented, Button, Toggle, BlockTitle, Icon } from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from "../../../../../common/mobile/utils/device"; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg'; +import IconExpandUp from '@common-android-icons/icon-expand-up.svg'; const EditHeader = props => { const isAndroid = Device.android; @@ -41,11 +44,15 @@ const EditHeader = props => {
{isAndroid && }
diff --git a/apps/documenteditor/mobile/src/view/edit/EditHyperlink.jsx b/apps/documenteditor/mobile/src/view/edit/EditHyperlink.jsx index aa29b262c9..d0ed886d14 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditHyperlink.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditHyperlink.jsx @@ -3,6 +3,10 @@ import {observer, inject} from "mobx-react"; import {List, ListInput, ListButton, Page, f7, Link, Navbar, NavLeft, NavTitle, NavRight, Icon} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from "../../../../../common/mobile/utils/device"; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconClose from '@common-android-icons/icon-close.svg'; +import IconDone from '@common-android-icons/icon-done.svg'; +import IconDoneDisabled from '@common-android-icons/icon-done-disabled.svg'; const EditHyperlink = props => { const { t } = useTranslation(); @@ -27,7 +31,9 @@ const EditHyperlink = props => { { props.isNavigate ? f7.views.current.router.back() : props.closeModal(); }}> - {Device.android && } + {Device.android && + + } {t('Add.textLinkSettings')} @@ -35,7 +41,11 @@ const EditHyperlink = props => { { props.onEditLink(stateLink, stateDisplay, stateTip); }} text={Device.ios ? t('Add.textDone') : ''}> - {Device.android && } + {Device.android && + stateLink.length < 1 ? + : + + } diff --git a/apps/documenteditor/mobile/src/view/edit/EditImage.jsx b/apps/documenteditor/mobile/src/view/edit/EditImage.jsx index 189baea818..4a5bec9a98 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditImage.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditImage.jsx @@ -4,6 +4,28 @@ import {List, ListItem, ListInput, ListButton, Icon, Page, Navbar, NavRight, Blo import { useTranslation } from 'react-i18next'; import {f7} from 'framework7-react'; import {Device} from '../../../../../common/mobile/utils/device'; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconExpandDownIos from '@common-ios-icons/icon-expand-down.svg'; +import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg'; +import IconTextAlignLeft from '@common-icons/icon-text-align-left.svg'; +import IconTextAlignCenter from '@common-icons/icon-text-align-center.svg'; +import IconTextAlignRight from '@common-icons/icon-text-align-right.svg'; +import IconWrapInline from '@ios-icons/icon-wrap-inline.svg'; +import IconWrapSquare from '@ios-icons/icon-wrap-square.svg'; +import IconWrapTight from '@ios-icons/icon-wrap-tight.svg'; +import IconWrapThrough from '@ios-icons/icon-wrap-through.svg'; +import IconWrapTopBottom from '@ios-icons/icon-wrap-top-bottom.svg'; +import IconWrapInfront from '@ios-icons/icon-wrap-infront.svg'; +import IconWrapBehind from '@ios-icons/icon-wrap-behind.svg'; +import IconImageLibraryIos from '@common-ios-icons/icon-image-library.svg'; +import IconImageLibraryAndroid from '@common-android-icons/icon-image-library.svg'; +import IconLinkIos from '@common-ios-icons/icon-link.svg'; +import IconLinkAndroid from '@common-android-icons/icon-link.svg'; +import IconMoveForeground from '@common-icons/icon-move-foreground.svg'; +import IconMoveBackground from '@common-icons/icon-move-background.svg'; +import IconMoveForward from '@common-icons/icon-move-forward.svg'; +import IconMoveBackward from '@common-icons/icon-move-backward.svg'; + const PageWrap = props => { const isAndroid = Device.android; @@ -46,7 +68,10 @@ const PageWrap = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -86,19 +111,19 @@ const PageWrap = props => { onClick={() => { props.onAlign(Asc.c_oAscAlignH.Left) }}> - + { props.onAlign(Asc.c_oAscAlignH.Center) }}> - + { props.onAlign(Asc.c_oAscAlignH.Right) }}> - + @@ -135,7 +160,10 @@ const PageWrappingStyle = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -146,49 +174,63 @@ const PageWrappingStyle = props => { props.setWrappingStyle('inline'); props.onWrapType('inline'); }}> - {!isAndroid && } + {!isAndroid && + + } { setWrapType('square'); props.setWrappingStyle('square'); props.onWrapType('square'); }}> - {!isAndroid && } + {!isAndroid && + + } { setWrapType('tight'); props.setWrappingStyle('tight'); props.onWrapType('tight'); }}> - {!isAndroid && } + {!isAndroid && + + } { setWrapType('through'); props.setWrappingStyle('through'); props.onWrapType('through'); }}> - {!isAndroid && } + {!isAndroid && + + } { setWrapType('top-bottom'); props.setWrappingStyle('top-bottom'); props.onWrapType('top-bottom'); }}> - {!isAndroid && } + {!isAndroid && + + } { setWrapType('infront'); props.setWrappingStyle('infront'); props.onWrapType('infront'); }}> - {!isAndroid && } + {!isAndroid && + + } { setWrapType('behind'); props.setWrappingStyle('behind'); props.onWrapType('behind'); }}> - {!isAndroid && } + {!isAndroid && + + } @@ -216,7 +258,10 @@ const PageLinkSettings = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -252,19 +297,28 @@ const PageReplace = props => { {Device.phone && - + {Device.ios ? + : + + } } {props.onReplaceByFile()}}> - + {Device.ios ? + : + + } - + {Device.ios ? + : + + } @@ -285,23 +339,26 @@ const PageReorder = props => { {Device.phone && - + {Device.ios ? + : + + } } {props.onReorder('all-up')}} className='no-indicator'> - + {props.onReorder('all-down')}} className='no-indicator'> - + {props.onReorder('move-up')}} className='no-indicator'> - + {props.onReorder('move-down')}} className='no-indicator'> - + diff --git a/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx b/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx index fa360438b8..c875ef5e2e 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx @@ -4,6 +4,12 @@ import {f7, List, ListItem, Icon, Button, Page, Navbar, NavRight, Segmented, Blo import { useTranslation } from 'react-i18next'; import {Device} from '../../../../../common/mobile/utils/device'; import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx'; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconCreateStyle from '@android-icons/icon-create-style.svg'; +import IconRemoveStyle from '@common-icons/icon-remove-style.svg'; +import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg'; +import IconExpandDownIos from '@common-ios-icons/icon-expand-down.svg'; +import IconExpandUp from '@common-android-icons/icon-expand-up.svg'; const PageAdvancedSettings = props => { const isAndroid = Device.android; @@ -42,7 +48,10 @@ const PageAdvancedSettings = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -54,11 +63,15 @@ const PageAdvancedSettings = props => {
{isAndroid && }
@@ -68,11 +81,15 @@ const PageAdvancedSettings = props => {
{isAndroid && }
@@ -134,7 +151,10 @@ const PageCustomBackColor = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -170,7 +190,10 @@ const PageBackgroundColor = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -252,7 +275,10 @@ const EditParagraphStyle = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -261,7 +287,9 @@ const EditParagraphStyle = props => { - {Device.android && } + {Device.android && + + } @@ -286,7 +314,7 @@ const EditParagraphStyle = props => { await storeParagraphSettings.changeParaStyleName('Normal'); await props.onStyleMenuDelete(style.name); }}> - + )} diff --git a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx index 896262720c..cf67d28ac5 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx @@ -5,6 +5,23 @@ import { f7 } from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from '../../../../../common/mobile/utils/device'; import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx"; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg'; +import IconExpandDownIos from '@common-ios-icons/icon-expand-down.svg'; +import IconWrapInline from '@ios-icons/icon-wrap-inline.svg'; +import IconWrapSquare from '@ios-icons/icon-wrap-square.svg'; +import IconWrapTight from '@ios-icons/icon-wrap-tight.svg'; +import IconWrapThrough from '@ios-icons/icon-wrap-through.svg'; +import IconWrapTopBottom from '@ios-icons/icon-wrap-top-bottom.svg'; +import IconWrapInfront from '@ios-icons/icon-wrap-infront.svg'; +import IconWrapBehind from '@ios-icons/icon-wrap-behind.svg'; +import IconTextAlignLeft from '@common-icons/icon-text-align-left.svg'; +import IconTextAlignCenter from '@common-icons/icon-text-align-center.svg'; +import IconTextAlignRight from '@common-icons/icon-text-align-right.svg'; +import IconMoveForeground from '@common-icons/icon-move-foreground.svg'; +import IconMoveBackground from '@common-icons/icon-move-background.svg'; +import IconMoveForward from '@common-icons/icon-move-forward.svg'; +import IconMoveBackward from '@common-icons/icon-move-backward.svg'; const PageCustomFillColor = props => { const { t } = useTranslation(); @@ -25,7 +42,10 @@ const PageCustomFillColor = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -88,7 +108,10 @@ const PageCustomBorderColor = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -124,7 +147,10 @@ const PageBorderColor = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -186,7 +212,10 @@ const PageStyle = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -274,7 +303,10 @@ const PageStyleNoFill = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -335,32 +367,49 @@ const PageWrap = props => { {Device.phone && - + {Device.ios ? + : + + } } {props.onWrapType('inline')}}> - {!isAndroid && } + {!isAndroid && + + } {props.onWrapType('square')}}> - {!isAndroid && } + {!isAndroid && + + } {props.onWrapType('tight')}}> - {!isAndroid && } + {!isAndroid && + + } {props.onWrapType('through')}}> - {!isAndroid && } + {!isAndroid && + + } {props.onWrapType('top-bottom')}}> - {!isAndroid && } + {!isAndroid && + + } {props.onWrapType('infront')}}> - {!isAndroid && } + {!isAndroid && + + } {props.onWrapType('behind')}}> - {!isAndroid && } + {!isAndroid && + + } {('behind' !== wrapType && 'infront' !== wrapType) && @@ -391,19 +440,19 @@ const PageWrap = props => { onClick={() => { props.onShapeAlign(Asc.c_oAscAlignH.Left) }}> - + { props.onShapeAlign(Asc.c_oAscAlignH.Center) }}> - + { props.onShapeAlign(Asc.c_oAscAlignH.Right) }}> - + @@ -441,7 +490,10 @@ const PageReplace = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -481,23 +533,26 @@ const PageReorder = props => { {Device.phone && - + {Device.ios ? + : + + } } {props.onReorder('all-up')}} className='no-indicator'> - + {props.onReorder('all-down')}} className='no-indicator'> - + {props.onReorder('move-up')}} className='no-indicator'> - + {props.onReorder('move-down')}} className='no-indicator'> - + diff --git a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx index 0436b7f072..9d062d1ffc 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx @@ -5,6 +5,31 @@ import { f7 } from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from '../../../../../common/mobile/utils/device'; import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx"; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconWrapTableInline from '@ios-icons/icon-wrap-table-inline.svg'; +import IconWrapTableFlow from '@ios-icons/icon-wrap-table-flow.svg'; +import IconBlockAlignLeft from '@icons/icon-block-align-left.svg'; +import IconBlockAlignCenter from '@icons/icon-block-align-center.svg'; +import IconBlockAlignRight from '@icons/icon-block-align-right.svg'; +import IconExpandDownIos from '@common-ios-icons/icon-expand-down.svg'; +import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg'; +import IconTableBordersAll from '@common-icons/icon-table-borders-all.svg'; +import IconTableBordersNone from '@common-icons/icon-table-borders-none.svg'; +import IconTableBordersInner from '@common-icons/icon-table-borders-inner.svg'; +import IconTableBordersOuter from '@common-icons/icon-table-borders-outer.svg'; +import IconTableBordersTop from '@common-icons/icon-table-borders-top.svg'; +import IconTableBordersBottom from '@common-icons/icon-table-borders-bottom.svg'; +import IconTableBordersLeft from '@common-icons/icon-table-borders-left.svg'; +import IconTableBordersRight from '@common-icons/icon-table-borders-right.svg'; +import IconTableBordersCenter from '@common-icons/icon-table-borders-center.svg'; +import IconTableBordersMiddle from '@common-icons/icon-table-borders-middle.svg'; +import IconTableAddColumnLeft from '@common-icons/icon-table-add-column-left.svg'; +import IconTableAddColumnRight from '@common-icons/icon-table-add-column-right.svg'; +import IconTableAddRowAbove from '@common-icons/icon-table-add-row-above.svg'; +import IconTableAddRowBelow from '@common-icons/icon-table-add-row-below.svg'; +import IconTableRemoveColumn from '@common-icons/icon-table-remove-column.svg'; +import IconTableRemoveRow from '@common-icons/icon-table-remove-row.svg'; + const PageTableOptions = props => { const { t } = useTranslation(); @@ -33,7 +58,10 @@ const PageTableOptions = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -100,17 +128,24 @@ const PageWrap = props => { {Device.phone && - + {Device.ios ? + : + + } } {props.onWrapType(c_tableWrap.TABLE_WRAP_NONE)}}> - {!isAndroid && } + {!isAndroid && + + } {props.onWrapType(c_tableWrap.TABLE_WRAP_PARALLEL)}}> - {!isAndroid && } + {!isAndroid && + + } @@ -129,19 +164,19 @@ const PageWrap = props => { onClick={() => { props.onWrapAlign(c_tableAlign.TABLE_ALIGN_LEFT) }}> - + { props.onWrapAlign(c_tableAlign.TABLE_ALIGN_CENTER) }}> - + { props.onWrapAlign(c_tableAlign.TABLE_ALIGN_RIGHT) }}> - + @@ -232,7 +267,10 @@ const PageStyleOptions = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -285,7 +323,10 @@ const PageCustomFillColor = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -345,7 +386,10 @@ const PageCustomBorderColor = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -380,7 +424,10 @@ const PageBorderColor = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -447,38 +494,38 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro @@ -511,7 +558,10 @@ const PageStyle = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -550,26 +600,27 @@ const EditTable = props => { diff --git a/apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx b/apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx index 7e3211fab9..c3fd263bf9 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx @@ -3,6 +3,10 @@ import {observer, inject} from "mobx-react"; import {f7, View, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link, ListButton, Toggle, Actions, ActionsButton, ActionsGroup} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from '../../../../../common/mobile/utils/device'; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg'; +import IconExpandDownIos from '@common-ios-icons/icon-expand-down.svg'; +import IconExpandUp from '@common-android-icons/icon-expand-up.svg'; const EditTableContents = props => { const { t } = useTranslation(); @@ -133,7 +137,10 @@ const PageEditStylesTableContents = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -169,7 +176,10 @@ const PageEditLeaderTableContents = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -215,7 +225,10 @@ const PageEditStructureTableContents = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -236,7 +249,9 @@ const PageEditStructureTableContents = props => { props.onLevelsChange(amountLevels - 1); } }}> - {isAndroid ? : ' - '} + {isAndroid ? + + : ' - '} {isAndroid && } @@ -271,7 +288,9 @@ const PageEditStructureTableContents = props => { props.addStyles(chosenStyles, style.name, style.value - 1); } }}> - {isAndroid ? : ' - '} + {isAndroid ? + + : ' - '} {isAndroid && } diff --git a/apps/documenteditor/mobile/src/view/edit/EditText.jsx b/apps/documenteditor/mobile/src/view/edit/EditText.jsx index f3cc00ce40..582842f108 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditText.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditText.jsx @@ -6,6 +6,23 @@ import {Device} from '../../../../../common/mobile/utils/device'; import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx'; import HighlightColorPalette from '../../../../../common/mobile/lib/component/HighlightColorPalette.jsx'; import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage.mjs'; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconTextOrientationHorizontal from '@common-icons/icon-text-orientation-horizontal.svg'; +import IconTextOrientationRotateDown from '@common-icons/icon-text-orientation-rotatedown.svg'; +import IconTextOrientationRotateUp from '@common-icons/icon-text-orientation-rotateup.svg'; +import IconTextColor from '@common-icons/icon-text-color.svg'; +import IconTextSelection from '@common-icons/icon-text-selection.svg'; +import IconTextAdditionalIos from '@common-icons/icon-text-additional.svg'; +import IconTextAlignLeft from '@common-icons/icon-text-align-left.svg'; +import IconTextAlignCenter from '@common-icons/icon-text-align-center.svg'; +import IconTextAlignRight from '@common-icons/icon-text-align-right.svg'; +import IconTextAlignJust from '@common-icons/icon-text-align-just.svg'; +import IconDeIndent from '@common-icons/icon-de-indent.svg'; +import IconInIndent from '@common-icons/icon-in-indent.svg'; +import IconTextOrientationAngleCount from '@common-icons/icon-text-orientation-anglecount.svg'; +import IconBullets from '@common-icons/icon-bullets.svg'; +import IconLineSpacing from '@common-icons/icon-linespacing.svg'; + const PageFonts = props => { const isAndroid = Device.android; @@ -68,7 +85,10 @@ const PageFonts = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -79,11 +99,15 @@ const PageFonts = props => {
{isAndroid && }
@@ -152,7 +176,10 @@ const PageAdditionalFormatting = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -171,11 +198,16 @@ const PageAdditionalFormatting = props => {
{isAndroid && }
@@ -277,7 +309,10 @@ const PageBulletsAndNumbers = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -326,7 +361,10 @@ const PageLineSpacing = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -363,7 +401,10 @@ const PageCustomFontColor = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -396,7 +437,10 @@ const PageFontColor = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -438,7 +482,10 @@ const PageCustomBackColor = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -469,7 +516,10 @@ const PageHighlightColor = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -491,7 +541,10 @@ const PageOrientationTextShape = props => { {Device.phone && - + {Device.ios ? + : + + } } @@ -504,7 +557,7 @@ const PageOrientationTextShape = props => { setDirectionTextShape(Asc.c_oAscVertDrawingText.normal); props.setOrientationTextShape(Asc.c_oAscVertDrawingText.normal); }}> - + { setDirectionTextShape(Asc.c_oAscVertDrawingText.vert); props.setOrientationTextShape(Asc.c_oAscVertDrawingText.vert); }}> - + { setDirectionTextShape(Asc.c_oAscVertDrawingText.vert270); props.setOrientationTextShape(Asc.c_oAscVertDrawingText.vert270); }}> - + @@ -594,7 +647,7 @@ const EditText = props => { onTextColor: props.onTextColor }}> {!isAndroid ? - {fontColorPreview} : + : fontColorPreview } @@ -602,7 +655,7 @@ const EditText = props => { onHighlightColor: props.onHighlightColor }}> {!isAndroid ? - {highlightColorPreview} : highlightColorPreview + : highlightColorPreview } { onAdditionalScript: props.onAdditionalScript, changeLetterSpacing: props.changeLetterSpacing }}> - {!isAndroid && } + {!isAndroid && + + } @@ -637,12 +692,12 @@ const EditText = props => { { props.onParagraphMove(true) }}> - + { props.onParagraphMove(false) }}> - + @@ -652,7 +707,9 @@ const EditText = props => { setOrientationTextShape: props.setOrientationTextShape, shapePr }}> - {!isAndroid && } + {!isAndroid && + + } } {!inSmartArt && !inSmartArtInternal && @@ -664,13 +721,17 @@ const EditText = props => { updateBulletsNumbers: props.updateBulletsNumbers }}>
{previewList}
- {!isAndroid && } + {!isAndroid && + + } } - {!isAndroid && } + {!isAndroid && + + } diff --git a/apps/documenteditor/mobile/src/view/settings/DocumentProtection.jsx b/apps/documenteditor/mobile/src/view/settings/DocumentProtection.jsx index 5742bf540b..5fcf376746 100644 --- a/apps/documenteditor/mobile/src/view/settings/DocumentProtection.jsx +++ b/apps/documenteditor/mobile/src/view/settings/DocumentProtection.jsx @@ -4,6 +4,8 @@ import { Device } from '../../../../../common/mobile/utils/device'; import { Page, Navbar, List, ListItem, BlockTitle, Toggle, NavRight, f7, Link, ListInput, Icon, Block } from "framework7-react"; import { useTranslation } from "react-i18next"; import PasswordField from '../../components/PasswordField/PasswordField'; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconCheck from '@common-android-icons/icon-check.svg'; const ProtectionDocumentView = props => { const { t } = useTranslation(); @@ -39,7 +41,9 @@ const ProtectionDocumentView = props => { - {Device.android && } + {Device.android && + + } diff --git a/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx b/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx index 1984a4b4b4..cd9b45879b 100644 --- a/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx +++ b/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx @@ -4,6 +4,9 @@ import {Page, Navbar, List, ListItem, BlockTitle, Segmented, Button, Icon} from import { useTranslation } from 'react-i18next'; import {Device} from '../../../../../common/mobile/utils/device'; import { f7 } from 'framework7-react'; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg'; +import IconExpandUp from '@common-android-icons/icon-expand-up.svg'; const PageDocumentFormats = props => { const { t } = useTranslation(); @@ -93,11 +96,15 @@ const PageDocumentMargins = props => {
{isAndroid && }
@@ -107,11 +114,15 @@ const PageDocumentMargins = props => {
{isAndroid && }
@@ -121,11 +132,15 @@ const PageDocumentMargins = props => {
{isAndroid && }
@@ -135,11 +150,15 @@ const PageDocumentMargins = props => {
{isAndroid && }
diff --git a/apps/documenteditor/mobile/src/view/settings/Download.jsx b/apps/documenteditor/mobile/src/view/settings/Download.jsx index 6898a4c120..3cc3997142 100644 --- a/apps/documenteditor/mobile/src/view/settings/Download.jsx +++ b/apps/documenteditor/mobile/src/view/settings/Download.jsx @@ -2,6 +2,19 @@ import React from 'react'; import { observer, inject } from "mobx-react"; import { Page, Navbar, List, ListItem, BlockTitle, Icon } from "framework7-react"; import { useTranslation } from "react-i18next"; +import SvgIcon from '@common/lib/component/SvgIcon'; +import SvgPdf from '@common-icons/formats/pdf.svg'; +import SvgPdfa from '@common-icons/formats/pdfa.svg'; +import SvgDocx from '@icons/formats/docx.svg'; +import SvgDotx from '@icons/formats/dotx.svg'; +import SvgEpub from '@icons/formats/epub.svg'; +import SvgFb2 from '@icons/formats/fb2.svg'; +import SvgHtml from '@icons/formats/html.svg'; +import SvgOdt from '@icons/formats/odt.svg'; +import SvgOtt from '@icons/formats/ott.svg'; +import SvgRtf from '@icons/formats/rtf.svg'; +import SvgTxt from '@icons/formats/txt.svg'; +import SvgDjvu from '@icons/formats/djvu.svg'; const Download = props => { const { t } = useTranslation(); @@ -20,44 +33,44 @@ const Download = props => { {!isDjvuFormat && props.onSaveFormat(Asc.c_oAscFileType.DOCX)}> - + } props.onSaveFormat(Asc.c_oAscFileType.PDF)}> - + {isDjvuFormat && props.onSaveFormat(Asc.c_oAscFileType.DJVU)}> - + } {!isEditableForms && !isDjvuFormat ? [ props.onSaveFormat(Asc.c_oAscFileType.PDFA)}> - + , props.onSaveFormat(Asc.c_oAscFileType.TXT)}> - + , props.onSaveFormat(Asc.c_oAscFileType.RTF)}> - + , props.onSaveFormat(Asc.c_oAscFileType.ODT)}> - + , props.onSaveFormat(Asc.c_oAscFileType.HTML)}> - + , props.onSaveFormat(Asc.c_oAscFileType.DOTX)}> - + , props.onSaveFormat(Asc.c_oAscFileType.OTT)}> - + , props.onSaveFormat(Asc.c_oAscFileType.FB2)}> - + , props.onSaveFormat(Asc.c_oAscFileType.EPUB)}> - + , ] : null} diff --git a/apps/documenteditor/mobile/src/view/settings/FileEncryption.jsx b/apps/documenteditor/mobile/src/view/settings/FileEncryption.jsx index 461a0de5ad..f22d1bdead 100644 --- a/apps/documenteditor/mobile/src/view/settings/FileEncryption.jsx +++ b/apps/documenteditor/mobile/src/view/settings/FileEncryption.jsx @@ -4,6 +4,8 @@ import { Device } from '../../../../../common/mobile/utils/device'; import { Page, Navbar, List, ListItem, BlockTitle, Toggle, NavRight, f7, Link, ListInput, Icon, Block } from "framework7-react"; import { useTranslation } from "react-i18next"; import PasswordField from '../../components/PasswordField/PasswordField'; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconCheck from '@common-android-icons/icon-check.svg'; const EncryptionView = inject("storeAppOptions")(observer(props => { const { t } = useTranslation(); @@ -42,7 +44,9 @@ const EncryptionView = inject("storeAppOptions")(observer(props => { - {Device.android && } + {Device.android && + + } diff --git a/apps/documenteditor/mobile/src/view/settings/Protection.jsx b/apps/documenteditor/mobile/src/view/settings/Protection.jsx index 2c08af3d52..83240772a6 100644 --- a/apps/documenteditor/mobile/src/view/settings/Protection.jsx +++ b/apps/documenteditor/mobile/src/view/settings/Protection.jsx @@ -2,6 +2,9 @@ import React, { useState } from 'react'; import { observer, inject } from "mobx-react"; import { Page, Navbar, List, ListItem, BlockTitle, Toggle, NavRight, f7, Link, ListInput, Icon, Block } from "framework7-react"; import { useTranslation } from "react-i18next"; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconProtectDocument from '@icons/icon-protect-doc.svg'; +import IconEncryptFile from '@icons/icon-encrypt-file.svg'; const ProtectionView = inject("storeAppOptions")(observer(props => { const { t } = useTranslation(); @@ -14,10 +17,11 @@ const ProtectionView = inject("storeAppOptions")(observer(props => { props.onProtectClick()} link="#"> - + + diff --git a/apps/documenteditor/mobile/src/view/settings/SettingsPage.jsx b/apps/documenteditor/mobile/src/view/settings/SettingsPage.jsx index 9b8efb7364..fc0bdfb082 100644 --- a/apps/documenteditor/mobile/src/view/settings/SettingsPage.jsx +++ b/apps/documenteditor/mobile/src/view/settings/SettingsPage.jsx @@ -5,6 +5,27 @@ import { observer, inject } from "mobx-react"; import { useTranslation } from 'react-i18next'; import { SettingsContext } from '../../controller/settings/Settings'; import { MainContext } from '../../page/main'; +import SvgIcon from '@common/lib/component/SvgIcon'; +import IconAddFavorites from '@icons/icon-add-favorites.svg'; +import IconRemoveFavorites from '@icons/icon-remove-favorites.svg'; +import IconClearFields from '@icons/icon-clear-fields.svg'; +import IconSearch from '@common-icons/icon-search.svg'; +import IconProtection from '@icons/icon-protection.svg'; +import IconVersionHistory from '@common-icons/icon-version-history.svg'; +import IconNavigation from '@icons/icon-navigation.svg'; +import IconCollaboration from '@common-icons/icon-collaboration.svg'; +import IconMobileView from '@icons/icon-mobile-view.svg'; +import IconSpellcheck from '@common-icons/icon-spellcheck.svg'; +import IconDocSetup from '@icons/icon-doc-setup.svg'; +import IconDownload from '@common-icons/icon-download.svg'; +import IconAppSettings from '@common-icons/icon-app-settings.svg'; +import IconExport from '@common-icons/icon-export.svg'; +import IconPrint from '@common-icons/icon-print.svg'; +import IconInfo from '@common-icons/icon-info.svg'; +import IconHelp from '@common-icons/icon-help.svg'; +import IconAbout from '@common-icons/icon-about.svg'; +import IconFeedbackForIos from '@common-ios-icons/icon-feedback.svg'; +import IconFeedbackForAndroid from '@common-android-icons/icon-feedback.svg'; const SettingsPage = inject("storeAppOptions", "storeReview", "storeDocumentInfo")(observer(props => { const { t } = useTranslation(); @@ -79,21 +100,25 @@ const SettingsPage = inject("storeAppOptions", "storeReview", "storeDocumentInfo {isEditableForms ? [ (isFavorite !== undefined && isFavorite !== null ? - + {isFavorite ? + + : + + } : ''), - + ] : null} {(Device.phone || isEditableForms) && - + } {(_isEdit && canProtect) && - + } {_isEdit && !isHistoryDisabled && canUseHistory && @@ -102,7 +127,7 @@ const SettingsPage = inject("storeAppOptions", "storeReview", "storeDocumentInfo onOpenOptions('history'); } }}> - + } {!isEditableForms ? @@ -111,24 +136,24 @@ const SettingsPage = inject("storeAppOptions", "storeReview", "storeDocumentInfo onOpenOptions('navigation'); } }}> - + : null} {window.matchMedia("(max-width: 359px)").matches ? { onOpenOptions('coauth'); }} className='no-indicator'> - + : null} {Device.sailfish && _isEdit && settingsContext.onOrthographyCheck()} className='no-indicator' link="#"> - + } {(appOptions.isMobileViewAvailable && ((Device.phone && !isViewer) || isEditableForms)) && - + { onOpenOptions('snackbar'); settingsContext.onChangeMobileView(); @@ -137,45 +162,51 @@ const SettingsPage = inject("storeAppOptions", "storeReview", "storeDocumentInfo } {(_isEdit && !isViewer) && - + } - + {_canDownload && - + {isEditableForms ? + : + + } } {_canDownloadOrigin && - + } {_canPrint && - + } {!(!_canDisplayInfo && isBranding) && - + } {_canHelp && - + } {_canAbout && - + } {_canFeedback && - + {Device.ios ? + : + + } } {canCloseEditor && diff --git a/vendor/framework7-react/build/webpack.config.js b/vendor/framework7-react/build/webpack.config.js index a9f3bccdc7..803fa0c8f5 100644 --- a/vendor/framework7-react/build/webpack.config.js +++ b/vendor/framework7-react/build/webpack.config.js @@ -41,6 +41,12 @@ const config = { alias: { '@': resolvePath(`../../apps/${editor}/mobile/src`), '@common': resolvePath('../../apps/common/mobile'), + '@icons': resolvePath(`../../apps/${editor}/mobile/resources/icons/common`), + '@ios-icons': resolvePath(`../../apps/${editor}/mobile/resources/icons/ios`), + '@android-icons': resolvePath(`../../apps/${editor}/mobile/resources/icons/android`), + '@common-icons': resolvePath('../../apps/common/mobile/resources/icons/common'), + '@common-ios-icons': resolvePath('../../apps/common/mobile/resources/icons/ios'), + '@common-android-icons': resolvePath('../../apps/common/mobile/resources/icons/android'), }, modules: [path.resolve(__dirname, '..', 'node_modules'), 'node_modules'], },