pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-27 00:55:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

[common, DE] Connecting icons

Browse Source
This commit is contained in:
Dmitry-Ilyushechkin
2025-01-20 00:16:35 +03:00
parent ca795d6c4a
commit 507a092e1c
36 changed files with 972 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/common/mobile/lib/component/HighlightColorPalette.jsx
View File

@ -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}) => {
</div>
</ListItem>
<ListItem radio checked={(curColor && curColor === 'transparent')} onClick={() => changeColor('transparent')} title={t('Common.HighlightColorPalette.textNoFill')}>
{!isAndroid && <Icon slot="media" icon="icon-cancellation"></Icon>}
{!isAndroid &&
<SvgIcon slot="media" symbolId={IconCancellation.id} className={'icon icon-svg'} />
}
</ListItem>
</List>
)

9
apps/common/mobile/lib/component/ThemeColorPalette.jsx
View File

@ -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 => {
<div className='current-color-hsb-preview' style={{backgroundColor: `#${currentColor}`}}></div>
</div>
<a href='#' id='add-new-color' className='button button-round' onClick={()=>{addNewColor(stateColor)}}>
<Icon icon={'icon-plus'} slot="media" />
{Device.ios ?
<SvgIcon slot="media" symbolId={IconPlusIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconPlusAndroid.id} className={'icon icon-svg toolbar-icon'} />
}
</a>
</div>
</div>

32
apps/common/mobile/lib/pages/CollaborationPage.jsx
View File

@ -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 &&
<NavRight>
<Link sheetClose=".coauth__sheet">
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -26,22 +39,31 @@ const CollaborationPage = props => {
<List>
{(sharingSettingsUrl && !isForm) &&
<ListItem title={t('Common.Collaboration.textSharingSettings')} link="/sharing-settings/">
<Icon slot="media" icon="icon-sharing-settings"></Icon>
<SvgIcon slot="media" symbolId={IconSharingSettings.id} className={'icon icon-svg'} />
</ListItem>
}
{props.users.editUsers.length > 0 &&
<ListItem link={'/users/'} title={_t.textUsers}>
<Icon slot="media" icon="icon-users"></Icon>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconUsersIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconUsersAndroid.id} className={'icon icon-svg'} />
}
</ListItem>
}
{appOptions.canViewComments &&
<ListItem link='/comments/' title={_t.textComments}>
<Icon slot="media" icon="icon-insert-comment"></Icon>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconInsertCommentIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconInsertCommentAndroid.id} className={'icon icon-svg'} />
}
</ListItem>
}
{(window.editorType === 'de' && (appOptions.canReview || appOptions.canViewReview) && !isViewer) &&
<ListItem link={'/review/'} title={_t.textReview}>
<Icon slot="media" icon="icon-review"></Icon>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconReviewIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconReviewAndroid.id} className={'icon icon-svg'} />
}
</ListItem>
}
</List>

8
apps/common/mobile/lib/pages/UsersPage.jsx
View File

@ -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 &&
<NavRight>
<Link sheetClose=".coauth__sheet">
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}

3
apps/common/mobile/lib/view/ContextMenu.jsx
View File

@ -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 ?
<ListButton title={b.caption} key={index} onClick={e => this.props.onMenuItemClick(b.event)} /> :
<ListButton key={index} onClick={e => this.props.onMenuItemClick(b.event)}>
<Icon slot="media" icon={`icon_mask ${b.icon}`} />
<SvgIcon slot="media" symbolId={b.icon} className={'icon icon-svg icon-svg__mask'} />
</ListButton>
)}
</List>

22
apps/common/mobile/lib/view/Search.jsx
View File

@ -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 {
<div className="searchbar-inner">
<div className="buttons-row searchbar-inner__left">
<a id="idx-btn-search-settings" className="link icon-only no-fastclick" onClick={this.onSettingsClick}>
<i className="icon icon-settings" />
{Device.ios ?
<SvgIcon symbolId={IconSettingsIos.id} className='icon icon-svg' /> :
<SvgIcon symbolId={IconSettingsAndroid.id} className='icon icon-svg' />
}
</a>
</div>
<div className="searchbar-inner__center">
@ -326,10 +336,16 @@ class SearchView extends Component {
}
<div className="buttons-row">
<a className={"link icon-only prev no-fastclick " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_BACKWARD)}>
<i className="icon icon-prev" />
{Device.ios ?
<SvgIcon symbolId={IconPrevIos.id} className='icon icon-svg' /> :
<SvgIcon symbolId={IconPrevAndroid.id} className='icon icon-svg' />
}
</a>
<a className={"link icon-only next no-fastclick " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_FORWARD)}>
<i className="icon icon-next" />
{Device.ios ?
<SvgIcon symbolId={IconNextIos.id} className='icon icon-svg' /> :
<SvgIcon symbolId={IconNextAndroid.id} className='icon icon-svg' />
}
</a>
</div>
</div>

13
apps/common/mobile/lib/view/VersionHistory.jsx
View File

@ -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 ?
<NavRight>
<Link sheetClose="#version-history-sheet">
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
: !isNavigate &&
<NavRight>
<Link popoverClose="#version-history-popover">
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}

81
apps/common/mobile/lib/view/collaboration/Comments.jsx
View File

@ -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 ? <Icon icon='icon-done-comment-white'/> : _t.textDone}
{Device.android ? <SvgIcon symbolId={IconDoneCommentWhite.id} className={'icon icon-svg icon icon-svg__white'} /> : _t.textDone}
</Link>
</NavRight>
</Navbar>
@ -236,7 +250,7 @@ const EditCommentPopup = inject("storeComments")(observer(({storeComments, comme
}, 500);
}}
>
{Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone}
{Device.android ? <SvgIcon symbolId={IconDoneCommentWhite.id} className={'icon icon-svg icon icon-svg__white'} /> : _t.textDone}
</Link>
</NavRight>
</Navbar>
@ -381,7 +395,7 @@ const AddReplyPopup = inject("storeComments")(observer(({storeComments, userInfo
onAddReply(comment, stateText);
}, 500);
}}>
{Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone}
{Device.android ? <SvgIcon symbolId={IconDoneCommentWhite.id} className={'icon icon-svg icon icon-svg__white'} /> : _t.textDone}
</Link>
</NavRight>
</Navbar>
@ -522,7 +536,7 @@ const EditReplyPopup = inject("storeComments")(observer(({storeComments, comment
}, 500);
}}
>
{Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone}
{Device.android ? <SvgIcon symbolId={IconDoneCommentWhite.id} className={'icon icon-svg icon icon-svg__white'} /> : _t.textDone}
</Link>
</NavRight>
</Navbar>
@ -717,7 +731,10 @@ const ViewComments = inject("storeComments", "storeAppOptions", "storeReview")(o
{Device.phone &&
<NavRight>
<Link sheetClose=".coauth__sheet">
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -740,11 +757,25 @@ const ViewComments = inject("storeComments", "storeAppOptions", "storeReview")(o
</div>
{isEdit && !viewMode &&
<div className='right'>
{(comment.editable && displayMode === 'markup' && !wsProps?.Objects && (!isViewer || canEditComments) && isAvailableCommenting) && <div className='comment-resolve' onClick={() => {onResolveComment(comment);}}><Icon icon={comment.resolved ? 'icon-resolve-comment check' : 'icon-resolve-comment'} /></div> }
{(comment.editable && displayMode === 'markup' && !wsProps?.Objects && (!isViewer || canEditComments) && isAvailableCommenting) && <div className='comment-resolve' onClick={() => {onResolveComment(comment);}}>
{Device.ios ?
comment.resolved ?
<SvgIcon symbolId={IconResolveCommentCheckIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconResolveCommentIos.id} className={'icon icon-svg'} />
:
comment.resolved ?
<SvgIcon symbolId={IconResolveCommentCheckAndroid.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconResolveCommentAndroid.id} className={'icon icon-svg'} />
}
</div>
}
{(displayMode === 'markup' && !wsProps?.Objects && (!isViewer || canEditComments) && isAvailableCommenting) &&
<div className='comment-menu'
onClick={() => {setComment(comment); openActionComment(true);}}>
<Icon icon='icon-menu-comment'/>
{Device.ios ?
<SvgIcon symbolId={IconMenuCommentIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconMenuCommentAndroid.id} className={'icon icon-svg'} />
}
</div>
}
</div>
@ -776,7 +807,10 @@ const ViewComments = inject("storeComments", "storeAppOptions", "storeReview")(o
<div className='reply-menu'
onClick={() => {setComment(comment); setReply(reply); openActionReply(true);}}
>
<Icon icon='icon-menu-comment'/>
{Device.ios ?
<SvgIcon symbolId={IconMenuCommentIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconMenuCommentAndroid.id} className={'icon icon-svg'} />
}
</div>
</div>
}
@ -858,8 +892,18 @@ const CommentList = inject("storeComments", "storeAppOptions", "storeReview")(ob
}
{comments.length > 1 &&
<div className='comment-navigation row'>
<Link href='#' onClick={onViewPrevComment}><Icon slot='media' icon='icon-prev'/></Link>
<Link href='#' onClick={onViewNextComment}><Icon slot='media' icon='icon-next'/></Link>
<Link href='#' onClick={onViewPrevComment}>
{Device.ios ?
<SvgIcon symbolId={IconPrevIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconPrevAndroid.id} className={'icon icon-svg'} />
}
</Link>
<Link href='#' onClick={onViewNextComment}>
{Device.ios ?
<SvgIcon symbolId={IconNextIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconNextAndroid.id} className={'icon icon-svg'} />
}
</Link>
</div>
}
</Toolbar>
@ -877,7 +921,17 @@ const CommentList = inject("storeComments", "storeAppOptions", "storeReview")(ob
</div>
{isEdit && !viewMode &&
<div className='right'>
{(comment.editable && displayMode === 'markup' && !wsProps?.Objects && (!isViewer || canEditComments) && isAvailableCommenting) && <div className='comment-resolve' onClick={() => {onResolveComment(comment);}}><Icon icon={comment.resolved ? 'icon-resolve-comment check' : 'icon-resolve-comment'}/></div>}
{(comment.editable && displayMode === 'markup' && !wsProps?.Objects && (!isViewer || canEditComments) && isAvailableCommenting) && <div className='comment-resolve' onClick={() => {onResolveComment(comment);}}>
{Device.ios ?
comment.resolved ?
<SvgIcon symbolId={IconResolveCommentCheckIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconResolveCommentIos.id} className={'icon icon-svg'} />
:
comment.resolved ?
<SvgIcon symbolId={IconResolveCommentCheckAndroid.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconResolveCommentAndroid.id} className={'icon icon-svg'} />
}
</div>}
{(displayMode === 'markup' && !wsProps?.Objects && (!isViewer || canEditComments) && isAvailableCommenting) &&
<div className='comment-menu'
onClick={() => {openActionComment(true);}}>
@ -913,7 +967,10 @@ const CommentList = inject("storeComments", "storeAppOptions", "storeReview")(ob
<div className='reply-menu'
onClick={() => {setReply(reply); openActionReply(true);}}
>
<Icon icon='icon-menu-comment'/>
{Device.ios ?
<SvgIcon symbolId={IconMenuCommentIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconMenuCommentAndroid.id} className={'icon icon-svg'} />
}
</div>
</div>
}

61
apps/common/mobile/lib/view/collaboration/Review.jsx
View File

@ -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 &&
<NavRight>
<Link sheetClose=".coauth__sheet">
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -37,18 +55,27 @@ const PageReview = props => {
</List>
<List>
<ListItem title={_t.textReviewChange} link={'/review-change/'}>
<Icon slot="media" icon="icon-review-changes"></Icon>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconReviewChangesIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconReviewChangesAndroid.id} className={'icon icon-svg'} />
}
</ListItem>
{canReview && !props.canUseReviewPermissions && !isProtected &&
<ListItem title={_t.textAcceptAllChanges} link='#'
className={'no-indicator' + (isDisableAllSettings ? ' disabled' : '')} onClick={() => {props.onAcceptAll();}}>
<Icon slot="media" icon="icon-accept-changes"></Icon>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconAcceptChangesIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconAcceptChangesAndroid.id} className={'icon icon-svg'} />
}
</ListItem>
}
{canReview && !props.canUseReviewPermissions && !isProtected &&
<ListItem title={_t.textRejectAllChanges} link='#'
className={'no-indicator' + (isDisableAllSettings ? ' disabled' : '')} onClick={() => {props.onRejectAll();}}>
<Icon slot="media" icon="icon-reject-changes"></Icon>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconRejectChangesIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconRejectChangesAndroid.id} className={'icon icon-svg'} />
}
</ListItem>
}
</List>
@ -66,7 +93,10 @@ const DisplayMode = props => {
{Device.phone &&
<NavRight>
<Link sheetClose=".coauth__sheet">
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -118,7 +148,10 @@ const PageReviewChange = inject("storeAppOptions")(observer(props => {
{Device.phone &&
<NavRight>
<Link sheetClose=".coauth__sheet">
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -144,19 +177,29 @@ const PageReviewChange = inject("storeAppOptions")(observer(props => {
<Link href='#' id="btn-delete-change" onClick={() => {props.onDeleteChange()}}>{_t.textDelete}</Link>
</span>
}
{props.goto && <Link href='#' id='btn-goto-change' onClick={() => {props.onGotoNextChange()}}><Icon slot='media' icon='icon-goto'/></Link>}
{props.goto && <Link href='#' id='btn-goto-change' onClick={() => {props.onGotoNextChange()}}>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconGotoIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconGotoAndroid.id} className={'icon icon-svg'} />
}</Link>}
</span>
<span className='next-prev row'>
<Link id='btn-prev-change'
href='#'
onClick={() => {props.onPrevChange()}}
className={isLockPrevNext && 'disabled'}
><Icon slot='media' icon='icon-prev-change'/></Link>
>{Device.ios ?
<SvgIcon slot="media" symbolId={IconPrevChangeIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconPrevChangeAndroid.id} className={'icon icon-svg'} />
}</Link>
<Link id='btn-next-change'
href='#'
onClick={() => {props.onNextChange()}}
className={isLockPrevNext && 'disabled'}
><Icon slot='media' icon='icon-next-change'/></Link>
>{Device.ios ?
<SvgIcon slot="media" symbolId={IconNextChangeIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconNextChangeAndroid.id} className={'icon icon-svg'} />
}</Link>
</span>
</Toolbar>
{change ?

2
apps/common/mobile/resources/icons/android/icon-edit-settings.svg
View File

@ -1 +1 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22"><g><path d="M2.5 15L8 1h2l4.4146 11.2574-1.6009 1.6008L12.12012 12h-6.25L4.75 15zM9 3.66998L6.62012 10h4.75976z" clip-rule="evenodd" fill="#fff" fill-rule="evenodd"/><path d="M10 19.50035V22h2.49965l7.37231-7.37231-2.49965-2.49965zm11.805-6.80572c.26-.25997.26-.67991 0-.93987l-1.5598-1.559787c-.25992-.259964-.67986-.259964-.93983 0L18.08554 11.4148l2.49966 2.49966z" fill="#fff"/></g></svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22"><g><path d="M2.5 15L8 1h2l4.4146 11.2574-1.6009 1.6008L12.12012 12h-6.25L4.75 15zM9 3.66998L6.62012 10h4.75976z" clip-rule="evenodd" fill-rule="evenodd"/><path d="M10 19.50035V22h2.49965l7.37231-7.37231-2.49965-2.49965zm11.805-6.80572c.26-.25997.26-.67991 0-.93987l-1.5598-1.559787c-.25992-.259964-.67986-.259964-.93983 0L18.08554 11.4148l2.49966 2.49966z"/></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 509 B

After

Width:  |  Height:  |  Size: 485 B

0
apps/common/mobile/resources/icons/ios/icon-linespacing.svg → apps/common/mobile/resources/icons/common/icon-linespacing.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 373 B

After

Width:  |  Height:  |  Size: 373 B

14
apps/documenteditor/mobile/src/components/PasswordField/PasswordField.jsx
View File

@ -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 })
<div className='item-title item-label password-field__label'>{label}</div>
<div className='item-input-wrap password-field__wrap'>
<input type={isShowPassword ? 'type' : 'password'} placeholder={placeholder} value={password} onChange={handlePasswordChange} className='password-field__input' maxLength={maxLength || null} />
{!isIos &&
<i className={`icon password-field__icon ${isShowPassword ? 'icon-hide-password' : 'icon-show-password'}`} onClick={toggleShowPassword}></i>
}
{!isIos ?
<span onClick={toggleShowPassword}>
{isShowPassword ?
<SvgIcon symbolId={IconHidePasswordAndroid.id} className='password-field__icon icon icon-svg' /> :
<SvgIcon symbolId={IconShowPasswordAndroid.id} className='password-field__icon icon icon-svg' />
}
</span>
: null}
</div>
</div>
</div>

5
apps/documenteditor/mobile/src/page/main.jsx
View File

@ -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
>
<div className="fab fab-right-bottom" onClick={() => turnOffViewerMode()}>
<a href="#">
<i className="icon icon-edit-mode"></i>
<SvgIcon symbolId={IconEditMode.id} className="icon icon-svg" />
</a>
</div>
</CSSTransition>

3
apps/documenteditor/mobile/src/view/ContextMenu.jsx
View File

@ -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 ?
<ListButton className="asd" title={b.text} key={index} onClick={e => this.props.onMenuItemClick(b.action)} /> :
<ListButton className="asd" title={b.text} key={index}>
<Icon slot="media" icon={`icon_mask ${b.icon}`} />
<SvgIcon slot="media" symbolId={b.icon} className={'icon icon-svg icon-svg__mask'} />
</ListButton>
)}
</List>

6
apps/documenteditor/mobile/src/view/DropdownList.jsx
View File

@ -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 => {
<Navbar title={t('Edit.textChooseAnOption')} className='navbar-dropdown-list'>
<NavRight>
<Link text={Device.ios ? t('Edit.textDone') : ''} onClick={props.closeModal}>
{Device.android && <Icon icon='icon-done' />}
{Device.android &&
<SvgIcon slot="media" symbolId={IconDone.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
</Navbar>

71
apps/documenteditor/mobile/src/view/Toolbar.jsx
View File

@ -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 => {
<Fragment>
<NavLeft>
{(!isViewer && !isVersionHistoryMode) &&
<Link text={Device.ios ? t("Toolbar.textOk") : ''} icon={Device.android ? 'icon-check' : null} className='back-reader-mode' onClick={() => props.turnOnViewerMode()}></Link>
<Link text={Device.ios ? t("Toolbar.textOk") : ''} className='back-reader-mode' onClick={() => props.turnOnViewerMode()}>
{Device.android &&
<SvgIcon slot="media" symbolId={IconCheck.id} className={'icon icon-svg'} />
}
</Link>
}
{isVersionHistoryMode ?
<a href="#" className='btn-close-history' onClick={(e) => {
@ -43,7 +62,12 @@ const ToolbarView = props => {
</a>
: null}
{(props.isShowBack && isViewer && !isVersionHistoryMode) &&
<Link className={`btn-doc-back${(props.disabledControls || isOpenModal) && ' disabled'}`} icon='icon-return' onClick={() => Common.Notifications.trigger('goback')}></Link>
<Link className={`btn-doc-back${(props.disabledControls || isOpenModal) && ' disabled'}`} onClick={() => Common.Notifications.trigger('goback')}>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconReturnIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconReturnAndroid.id} className={'icon icon-svg'} />
}
</Link>
}
{((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) &&
<Link key='toggle-view-link' className={isOpenModal ? 'disabled' : ''} icon={isMobileView ? 'icon-standard-view' : 'icon-mobile-view'} href={false} onClick={() => {
<Link key='toggle-view-link' className={isOpenModal ? 'disabled' : ''} href={false} onClick={() => {
props.changeMobileView();
props.openOptions('snackbar');
}}></Link>,
}}>
{isMobileView ?
<SvgIcon slot="media" symbolId={IconStandardView.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconMobileView.id} className={'icon icon-svg'} />
}
</Link>,
(props.showEditDocument && !isViewer) &&
<Link key='edit-link' className={(props.disabledControls || isOpenModal) && 'disabled'} icon='icon-edit' href={false} onClick={props.onEditDocument}></Link>,
<Link key='edit-link' className={(props.disabledControls || isOpenModal) && 'disabled'} href={false} onClick={props.onEditDocument}>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconEditForIos.id} className={'icon icon-svg'} />
:
<SvgIcon slot="media" symbolId={IconEditForAndroid.id} className={'icon icon-svg'} />
}
</Link>,
(props.isEdit && isAvailableExt && !isViewer && EditorUIController.getToolbarOptions &&
<Fragment key='editing-buttons'>
{EditorUIController.getToolbarOptions({
@ -88,25 +123,31 @@ const ToolbarView = props => {
</Fragment>
),
(Device.phone ? null :
<Link key='search-link' className={(props.disabledControls || props.readerMode || isOpenModal) && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link>
<Link key='search-link' className={(props.disabledControls || props.readerMode || isOpenModal) && 'disabled'} searchbarEnable='.searchbar' href={false}>
<SvgIcon slot="media" symbolId={IconSearch.id} className={'icon icon-svg'} />
</Link>
),
(window.matchMedia("(min-width: 360px)").matches && !isForm && !isVersionHistoryMode ?
<Link key='coauth-link' className={(props.disabledControls || isOpenModal) && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={() => props.openOptions('coauth')}></Link>
<Link key='coauth-link' className={(props.disabledControls || isOpenModal) && 'disabled'} id='btn-coauth' href={false} onClick={() => props.openOptions('coauth')}>
<SvgIcon slot="media" symbolId={IconCollaboration.id} className={'icon icon-svg'} />
</Link>
: null),
(isVersionHistoryMode ?
<Link key='history-link' id='btn-open-history' icon='icon-version-history' href={false} className={isOpenModal && 'disabled'} onClick={() => props.openOptions('history')}></Link>
<Link key='history-link' id='btn-open-history' href={false} className={isOpenModal && 'disabled'} onClick={() => props.openOptions('history')}>
<SvgIcon slot="media" symbolId={IconVersionHistory.id} className={'icon icon-svg'} />
</Link>
: null),
<Link key='btn-settings' className={(props.disabledSettings || props.disabledControls || isDisconnected || isOpenModal) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link>
] : [
<Link key='prev-field-link' className={(props.disabledSettings || props.disabledControls || isDisconnected || isOpenModal) && 'disabled'} id='btn-prev-field' icon='icon-prev-field' href={false} onClick={() => props.movePrevField()}></Link>,
<Link key='next-field-link' className={(props.disabledSettings || props.disabledControls || isDisconnected || isOpenModal) && 'disabled'} id='btn-next-field' icon='icon-next-field' href={false} onClick={() => props.moveNextField()}></Link>,
<Link key='prev-field-link' className={(props.disabledSettings || props.disabledControls || isDisconnected || isOpenModal) && 'disabled'} id='btn-prev-field' href={false} onClick={() => props.movePrevField()}><SvgIcon slot="media" symbolId={IconPrevField.id} className={'icon icon-svg'} /></Link>,
<Link key='next-field-link' className={(props.disabledSettings || props.disabledControls || isDisconnected || isOpenModal) && 'disabled'} id='btn-next-field' href={false} onClick={() => props.moveNextField()}><SvgIcon slot="media" symbolId={IconNextField.id} className={'icon icon-svg'} /></Link>,
(props.canSubmitForms ?
[
<Link key='btn-settings'
className={(props.disabledSettings || props.disabledControls || isDisconnected || isOpenModal) && 'disabled'}
icon='icon-settings' href={false}
href={false}
id='btn-settings'
onClick={() => props.openOptions('settings')}></Link>,
onClick={() => props.openOptions('settings')}><SvgIcon slot="media" symbolId={IconSettings.id} className={'icon icon-svg'} /></Link>,
<Link key='send-form-link'
id='btn-submit-form'
className={(props.disabledSettings || props.disabledControls || isDisconnected || isOpenModal) && 'disabled'}
@ -115,10 +156,10 @@ const ToolbarView = props => {
] : [
<Link key='save-form-link'
className={(props.disabledSettings || props.disabledControls || isDisconnected || isOpenModal) && 'disabled'}
icon='icon-save-form' href={false} onClick={() => props.saveForm()}></Link>,
href={false} onClick={() => props.saveForm()}><SvgIcon slot="media" symbolId={IconSaveForm.id} className={'icon icon-svg'} /></Link>,
<Link key='btn-settings'
className={(props.disabledSettings || props.disabledControls || isDisconnected || isOpenModal) && 'disabled'} id='btn-settings' icon='icon-settings'
href={false} onClick={() => {props.openOptions('settings')}}></Link>
className={(props.disabledSettings || props.disabledControls || isDisconnected || isOpenModal) && 'disabled'} id='btn-settings'
href={false} onClick={() => {props.openOptions('settings')}}> <SvgIcon slot="media" symbolId={IconSettings.id} className={'icon icon-svg'} /></Link>
]
)
]}

17
apps/documenteditor/mobile/src/view/add/AddImage.jsx
View File

@ -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 => {
<Navbar title={_t.textInsertImage} backLink={_t.textBack}></Navbar>
<List>
<ListItem title={_t.textPictureFromLibrary} onClick={() => {props.onInsertByFile()}}>
<Icon slot="media" icon="icon-image-library"></Icon>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconImageLibraryIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconImageLibraryAndroid.id} className={'icon icon-svg'} />
}
</ListItem>
<ListItem title={_t.textPictureFromURL} link={'/add-image-from-url/'} routeProps={{
onInsertByUrl: props.onInsertByUrl
}}>
<Icon slot="media" icon="icon-link"></Icon>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconLinkIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconLinkAndroid.id} className={'icon icon-svg'} />
}
</ListItem>
</List>
</Page>

14
apps/documenteditor/mobile/src/view/add/AddLink.jsx
View File

@ -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 => {
<Link text={Device.ios ? t('Add.textCancel') : ''} onClick={() => {
props.isNavigate ? f7.views.current.router.back() : props.closeModal('#add-link-popup', '#add-link-popover');
}}>
{Device.android && <Icon icon='icon-close' />}
{Device.android &&
<SvgIcon slot="media" symbolId={IconClose.id} className={'icon icon-svg'} />
}
</Link>
</NavLeft>
<NavTitle>{t('Add.textLinkSettings')}</NavTitle>
@ -30,7 +36,11 @@ const PageLink = props => {
<Link className={`${stateLink.length < 1 && 'disabled'}`} onClick={() => {
props.onInsertLink(stateLink, stateDisplay, stateTip);
}} text={Device.ios ? t('Add.textDone') : ''}>
{Device.android && <Icon icon={stateLink.length < 1 ? 'icon-done-disabled' : 'icon-done'} />}
{Device.android &&
stateLink.length < 1 ?
<SvgIcon slot="media" symbolId={IconDoneDisabled.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconDone.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
</Navbar>

75
apps/documenteditor/mobile/src/view/add/AddOther.jsx
View File

@ -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 => {
<ListItem title={_t.textPageBreak} link='#' className='no-indicator' onClick={() => {
props.onPageBreak()
}}>
<Icon slot="media" icon="icon-pagebreak"></Icon>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconPageBreakIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconPageBreakAndroid.id} className={'icon icon-svg'} />
}
</ListItem>
<ListItem title={_t.textColumnBreak} link='#' className='no-indicator' onClick={() => {
props.onColumnBreak();
}}>
<Icon slot="media" icon="icon-stringbreak"></Icon>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconStringBreakIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconStringBreakAndroid.id} className={'icon icon-svg'} />
}
</ListItem>
<ListItem title={_t.textSectionBreak} link={'/add-section-break/'} routeProps={{
onInsertSectionBreak: props.onInsertSectionBreak
}}>
<Icon slot="media" icon="icon-sectionbreak"></Icon>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconSectionBreakIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconSectionBreakAndroid.id} className={'icon icon-svg'} />
}
</ListItem>
</List>
</Page>
@ -119,11 +148,15 @@ const PageFootnote = props => {
<div slot='after'>
<Segmented>
<Button outline className='decrement item-link' onClick={() => {setStartAt(props.onFootnoteStartAt(stateStartAt, true))}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
{isAndroid ?
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
: ' - '}
</Button>
{isAndroid && <label>{stateStartAt}</label>}
<Button outline className='increment item-link' onClick={() => {setStartAt(props.onFootnoteStartAt(stateStartAt, false))}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
{isAndroid ?
<SvgIcon symbolId={IconExpandUpAndroid.id} className={'icon icon-svg'} />
: ' + '}
</Button>
</Segmented>
</div>
@ -187,21 +220,30 @@ const AddOther = props => {
props.closeModal();
Common.Notifications.trigger('addcomment');
}}>
<Icon slot="media" icon="icon-insert-comment"></Icon>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconInsertCommentIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconInsertCommentAndroid.id} className={'icon icon-svg'} />
}
</ListItem>}
<ListItem title={_t.textImage} link='/add-image/'>
<Icon slot="media" icon="icon-image"></Icon>
<SvgIcon slot="media" symbolId={IconImage.id} className={'icon icon-svg'} />
</ListItem>
{(isText && !disabledAddLink) && <ListItem title={_t.textLink} href={isHyperLink ? '/edit-link/' : '/add-link/'} routeProps={{
isNavigate: true
}}>
<Icon slot="media" icon="icon-link"></Icon>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconLinkIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconLinkAndroid.id} className={'icon icon-svg'} />
}
</ListItem>}
{!disabledAddPageNumber &&
<ListItem title={_t.textPageNumber} link={'/add-page-number/'} routeProps={{
onInsertPageNumber: props.onInsertPageNumber
}}>
<Icon slot="media" icon="icon-pagenumber"></Icon>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconPageNumberIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconPageNumberAndroid.id} className={'icon icon-svg'} />
}
</ListItem>
}
{(isShape || isChart) || (isText && disabledAddBreak) ? null :
@ -210,12 +252,18 @@ const AddOther = props => {
onColumnBreak: props.onColumnBreak,
onInsertSectionBreak: props.onInsertSectionBreak
}}>
<Icon slot="media" icon="icon-sectionbreak"></Icon>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconSectionBreakIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconSectionBreakAndroid.id} className={'icon icon-svg'} />
}
</ListItem>
}
{!isHeader &&
<ListItem title={_t.textTableContents} link="/add-table-contents/">
<Icon slot="media" icon="icon-table-contents"></Icon>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconTableContentsIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconTableContentsAndroid.id} className={'icon icon-svg'} />
}
</ListItem>
}
{(isShape || isChart) || (isText && disabledAddFootnote) ? null :
@ -226,7 +274,10 @@ const AddOther = props => {
onInsertFootnote: props.onInsertFootnote,
initFootnoteStartAt: props.initFootnoteStartAt
}}>
<Icon slot="media" icon="icon-footnote"></Icon>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconFootnoteIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconFootnoteAndroid.id} className={'icon icon-svg'} />
}
</ListItem>
}
</List>

3
apps/documenteditor/mobile/src/view/add/AddingPage.jsx
View File

@ -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 }) => {
<div className='tab-buttons tabbar'>
{tabs.map((item, index) =>
<Link key={"de-link-" + item.id} onClick={() => getTableStylesPreviews()} tabLink={"#" + item.id} tabLinkActive={index === 0}>
<Icon slot="media" icon={item.icon}></Icon>
<SvgIcon slot="media" symbolId={item.icon} className={'icon icon-svg'} />
</Link>)}
{isAndroid && <span className='tab-link-highlight' style={{width: 100 / tabs.lenght + '%'}}></span>}
</div> :

89
apps/documenteditor/mobile/src/view/edit/EditChart.jsx
View File

@ -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 &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -89,7 +109,10 @@ const PageCustomBorderColor = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -125,7 +148,10 @@ const PageBorderColor = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -312,7 +338,10 @@ const PageDesign = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -358,32 +387,49 @@ const PageWrap = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
</Navbar>
<List>
<ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-inline"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconWrapInline.id} className={'icon icon-svg'} />
}
</ListItem>
<ListItem title={_t.textSquare} radio checked={wrapType === 'square'} onClick={() => {props.onWrapType('square')}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-square"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconWrapSquare.id} className={'icon icon-svg'} />
}
</ListItem>
<ListItem title={_t.textTight} radio checked={wrapType === 'tight'} onClick={() => {props.onWrapType('tight')}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-tight"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconWrapTight.id} className={'icon icon-svg'} />
}
</ListItem>
<ListItem title={_t.textThrough} radio checked={wrapType === 'through'} onClick={() => {props.onWrapType('through')}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-through"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconWrapThrough.id} className={'icon icon-svg'} />
}
</ListItem>
<ListItem title={_t.textTopAndBottom} radio checked={wrapType === 'top-bottom'} onClick={() => {props.onWrapType('top-bottom')}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-top-bottom"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconWrapTopBottom.id} className={'icon icon-svg'} />
}
</ListItem>
<ListItem title={_t.textInFront} radio checked={wrapType === 'infront'} onClick={() => {props.onWrapType('infront')}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-infront"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconWrapInFront.id} className={'icon icon-svg'} />
}
</ListItem>
<ListItem title={_t.textBehind} radio checked={wrapType === 'behind'} onClick={() => {props.onWrapType('behind')}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-behind"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconWrapBehind.id} className={'icon icon-svg'} />
}
</ListItem>
</List>
{
@ -397,19 +443,19 @@ const PageWrap = props => {
onClick={() => {
props.onAlign(Asc.c_oAscAlignH.Left)
}}>
<Icon slot="media" icon="icon-block-align-left"></Icon>
<SvgIcon symbolId={IconBlockAlignLeft.id} className={'icon icon-svg'} />
</a>
<a className={'button' + (align === Asc.c_oAscAlignH.Center ? ' active' : '')}
onClick={() => {
props.onAlign(Asc.c_oAscAlignH.Center)
}}>
<Icon slot="media" icon="icon-block-align-center"></Icon>
<SvgIcon symbolId={IconBlockAlignCenter.id} className={'icon icon-svg'} />
</a>
<a className={'button' + (align === Asc.c_oAscAlignH.Right ? ' active' : '')}
onClick={() => {
props.onAlign(Asc.c_oAscAlignH.Right)
}}>
<Icon slot="media" icon="icon-block-align-right"></Icon>
<SvgIcon symbolId={IconBlockAlignRight.id} className={'icon icon-svg'} />
</a>
</div>
</ListItem>
@ -461,23 +507,26 @@ const PageReorder = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
</Navbar>
<List>
<ListItem title={_t.textBringToForeground} onClick={() => {props.onReorder('all-up')}} link='#' className='no-indicator'>
<Icon slot="media" icon="icon-move-foreground"></Icon>
<SvgIcon symbolId={IconMoveForeground.id} className={'icon icon-svg'} />
</ListItem>
<ListItem title={_t.textSendToBackground} onClick={() => {props.onReorder('all-down')}} link='#' className='no-indicator'>
<Icon slot="media" icon="icon-move-background"></Icon>
<SvgIcon symbolId={IconMoveBackground.id} className={'icon icon-svg'} />
</ListItem>
<ListItem title={_t.textMoveForward} onClick={() => {props.onReorder('move-up')}} link='#' className='no-indicator'>
<Icon slot="media" icon="icon-move-forward"></Icon>
<SvgIcon symbolId={IconMoveForward.id} className={'icon icon-svg'} />
</ListItem>
<ListItem title={_t.textMoveBackward} onClick={() => {props.onReorder('move-down')}} link='#' className='no-indicator'>
<Icon slot="media" icon="icon-move-backward"></Icon>
<SvgIcon symbolId={IconMoveBackward.id} className={'icon icon-svg'} />
</ListItem>
</List>
</Page>

11
apps/documenteditor/mobile/src/view/edit/EditHeader.jsx
View File

@ -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 => {
<div slot='after'>
<Segmented>
<Button outline className='decrement item-link' onClick={() => {props.onStartAt(_startAt, true)}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
{isAndroid ?
<SvgIcon slot="media" symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
: ' - '}
</Button>
{isAndroid && <label>{_startAt}</label>}
<Button outline className='increment item-link' onClick={() => {props.onStartAt(_startAt, false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
{isAndroid ?
<SvgIcon slot="media" symbolId={IconExpandUp.id} className={'icon icon-svg'} />
: ' + '}
</Button>
</Segmented>
</div>

14
apps/documenteditor/mobile/src/view/edit/EditHyperlink.jsx
View File

@ -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 => {
<Link text={Device.ios ? t('Add.textCancel') : ''} onClick={() => {
props.isNavigate ? f7.views.current.router.back() : props.closeModal();
}}>
{Device.android && <Icon icon='icon-close' />}
{Device.android &&
<SvgIcon symbolId={IconClose.id} className={'icon icon-svg'} />
}
</Link>
</NavLeft>
<NavTitle>{t('Add.textLinkSettings')}</NavTitle>
@ -35,7 +41,11 @@ const EditHyperlink = props => {
<Link className={`${stateLink.length < 1 && 'disabled'}`} onClick={() => {
props.onEditLink(stateLink, stateDisplay, stateTip);
}} text={Device.ios ? t('Add.textDone') : ''}>
{Device.android && <Icon icon={stateLink.length < 1 ? 'icon-done-disabled' : 'icon-done'} />}
{Device.android &&
stateLink.length < 1 ?
<SvgIcon symbolId={IconDoneDisabled.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconDone.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
</Navbar>

99
apps/documenteditor/mobile/src/view/edit/EditImage.jsx
View File

@ -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 &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -86,19 +111,19 @@ const PageWrap = props => {
onClick={() => {
props.onAlign(Asc.c_oAscAlignH.Left)
}}>
<Icon slot="media" icon="icon-text-align-left"></Icon>
<SvgIcon symbolId={IconTextAlignLeft.id} className={'icon icon-svg'} />
</a>
<a className={'button' + (align === Asc.c_oAscAlignH.Center ? ' active' : '')}
onClick={() => {
props.onAlign(Asc.c_oAscAlignH.Center)
}}>
<Icon slot="media" icon="icon-text-align-center"></Icon>
<SvgIcon symbolId={IconTextAlignCenter.id} className={'icon icon-svg'} />
</a>
<a className={'button' + (align === Asc.c_oAscAlignH.Right ? ' active' : '')}
onClick={() => {
props.onAlign(Asc.c_oAscAlignH.Right)
}}>
<Icon slot="media" icon="icon-text-align-right"></Icon>
<SvgIcon symbolId={IconTextAlignRight.id} className={'icon icon-svg'} />
</a>
</div>
</ListItem>
@ -135,7 +160,10 @@ const PageWrappingStyle = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -146,49 +174,63 @@ const PageWrappingStyle = props => {
props.setWrappingStyle('inline');
props.onWrapType('inline');
}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-inline"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconWrapInline.id} className={'icon icon-svg'} />
}
</ListItem>
<ListItem title={_t.textSquare} radio checked={wrapType === 'square'} onClick={() => {
setWrapType('square');
props.setWrappingStyle('square');
props.onWrapType('square');
}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-square"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconWrapSquare.id} className={'icon icon-svg'} />
}
</ListItem>
<ListItem title={_t.textTight} radio checked={wrapType === 'tight'} onClick={() => {
setWrapType('tight');
props.setWrappingStyle('tight');
props.onWrapType('tight');
}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-tight"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconWrapTight.id} className={'icon icon-svg'} />
}
</ListItem>
<ListItem title={_t.textThrough} radio checked={wrapType === 'through'} onClick={() => {
setWrapType('through');
props.setWrappingStyle('through');
props.onWrapType('through');
}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-through"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconWrapThrough.id} className={'icon icon-svg'} />
}
</ListItem>
<ListItem title={_t.textTopAndBottom} radio checked={wrapType === 'top-bottom'} onClick={() => {
setWrapType('top-bottom');
props.setWrappingStyle('top-bottom');
props.onWrapType('top-bottom');
}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-top-bottom"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconWrapTopBottom.id} className={'icon icon-svg'} />
}
</ListItem>
<ListItem title={_t.textInFront} radio checked={wrapType === 'infront'} onClick={() => {
setWrapType('infront');
props.setWrappingStyle('infront');
props.onWrapType('infront');
}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-infront"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconWrapInfront.id} className={'icon icon-svg'} />
}
</ListItem>
<ListItem title={_t.textBehind} radio checked={wrapType === 'behind'} onClick={() => {
setWrapType('behind');
props.setWrappingStyle('behind');
props.onWrapType('behind');
}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-behind"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconWrapBehind.id} className={'icon icon-svg'} />
}
</ListItem>
</List>
</Page>
@ -216,7 +258,10 @@ const PageLinkSettings = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -252,19 +297,28 @@ const PageReplace = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
</Navbar>
<List>
<ListItem title={_t.textPictureFromLibrary} onClick={() => {props.onReplaceByFile()}}>
<Icon slot="media" icon="icon-image-library"></Icon>
{Device.ios ?
<SvgIcon symbolId={IconImageLibraryIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconImageLibraryAndroid.id} className={'icon icon-svg'} />
}
</ListItem>
<ListItem title={_t.textPictureFromURL} link='/edit-image-link/' routeProps={{
onReplaceByUrl: props.onReplaceByUrl
}}>
<Icon slot="media" icon="icon-link"></Icon>
{Device.ios ?
<SvgIcon symbolId={IconLinkIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconLinkAndroid.id} className={'icon icon-svg'} />
}
</ListItem>
</List>
</Page>
@ -285,23 +339,26 @@ const PageReorder = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
</Navbar>
<List>
<ListItem title={_t.textBringToForeground} link='#' onClick={() => {props.onReorder('all-up')}} className='no-indicator'>
<Icon slot="media" icon="icon-move-foreground"></Icon>
<SvgIcon symbolId={IconMoveForeground.id} className={'icon icon-svg'} />
</ListItem>
<ListItem title={_t.textSendToBackground} link='#' onClick={() => {props.onReorder('all-down')}} className='no-indicator'>
<Icon slot="media" icon="icon-move-background"></Icon>
<SvgIcon symbolId={IconMoveBackground.id} className={'icon icon-svg'} />
</ListItem>
<ListItem title={_t.textMoveForward} link='#' onClick={() => {props.onReorder('move-up')}} className='no-indicator'>
<Icon slot="media" icon="icon-move-forward"></Icon>
<SvgIcon symbolId={IconMoveForward.id} className={'icon icon-svg'} />
</ListItem>
<ListItem title={_t.textMoveBackward} link='#' onClick={() => {props.onReorder('move-down')}} className='no-indicator'>
<Icon slot="media" icon="icon-move-backward"></Icon>
<SvgIcon symbolId={IconMoveBackward.id} className={'icon icon-svg'} />
</ListItem>
</List>
</Page>

48
apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx
View File

@ -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 &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -54,11 +63,15 @@ const PageAdvancedSettings = props => {
<div slot='after'>
<Segmented>
<Button outline className='decrement item-link' onClick={() => {props.onDistanceBefore(spaceBefore, true)}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
{isAndroid ?
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
: ' - '}
</Button>
{isAndroid && <label>{displayBefore}</label>}
<Button outline className='increment item-link' onClick={() => {props.onDistanceBefore(spaceBefore, false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
{isAndroid ?
<SvgIcon symbolId={IconExpandUp.id} className={'icon icon-svg'} />
: ' + '}
</Button>
</Segmented>
</div>
@ -68,11 +81,15 @@ const PageAdvancedSettings = props => {
<div slot='after'>
<Segmented>
<Button outline className='decrement item-link' onClick={() => {props.onDistanceAfter(spaceAfter, true)}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
{isAndroid ?
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
: ' - '}
</Button>
{isAndroid && <label>{displayAfter}</label>}
<Button outline className='increment item-link' onClick={() => {props.onDistanceAfter(spaceAfter, false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
{isAndroid ?
<SvgIcon symbolId={IconExpandUp.id} className={'icon icon-svg'} />
: ' + '}
</Button>
</Segmented>
</div>
@ -134,7 +151,10 @@ const PageCustomBackColor = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -170,7 +190,10 @@ const PageBackgroundColor = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -252,7 +275,10 @@ const EditParagraphStyle = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -261,7 +287,9 @@ const EditParagraphStyle = props => {
<ListItem className="create-style-link" title={t('Edit.textCreateTextStyle')} href="/create-text-style/" routeProps={{
onSaveStyle: props.onSaveStyle
}}>
{Device.android && <Icon slot="media" icon="icon-create-style"></Icon>}
{Device.android &&
<SvgIcon symbolId={IconCreateStyle.id} className={'icon icon-svg'} />
}
</ListItem>
</List>
<List>
@ -286,7 +314,7 @@ const EditParagraphStyle = props => {
await storeParagraphSettings.changeParaStyleName('Normal');
await props.onStyleMenuDelete(style.name);
}}>
<Icon icon="icon-remove-style" />
<SvgIcon symbolId={IconRemoveStyle.id} className={'icon icon-svg'} />
</Link>
</div>
)}

99
apps/documenteditor/mobile/src/view/edit/EditShape.jsx
View File

@ -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 &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -88,7 +108,10 @@ const PageCustomBorderColor = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -124,7 +147,10 @@ const PageBorderColor = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -186,7 +212,10 @@ const PageStyle = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -274,7 +303,10 @@ const PageStyleNoFill = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -335,32 +367,49 @@ const PageWrap = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
</Navbar>
<List>
<ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-inline"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconWrapInline.id} className={'icon icon-svg'} />
}
</ListItem>
<ListItem title={_t.textSquare} radio checked={wrapType === 'square'} onClick={() => {props.onWrapType('square')}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-square"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconWrapSquare.id} className={'icon icon-svg'} />
}
</ListItem>
<ListItem title={_t.textTight} radio checked={wrapType === 'tight'} onClick={() => {props.onWrapType('tight')}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-tight"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconWrapTight.id} className={'icon icon-svg'} />
}
</ListItem>
<ListItem title={_t.textThrough} radio checked={wrapType === 'through'} onClick={() => {props.onWrapType('through')}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-through"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconWrapThrough.id} className={'icon icon-svg'} />
}
</ListItem>
<ListItem title={_t.textTopAndBottom} radio checked={wrapType === 'top-bottom'} onClick={() => {props.onWrapType('top-bottom')}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-top-bottom"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconWrapTopBottom.id} className={'icon icon-svg'} />
}
</ListItem>
<ListItem title={_t.textInFront} radio checked={wrapType === 'infront'} onClick={() => {props.onWrapType('infront')}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-infront"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconWrapInfront.id} className={'icon icon-svg'} />
}
</ListItem>
<ListItem title={_t.textBehind} radio checked={wrapType === 'behind'} onClick={() => {props.onWrapType('behind')}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-behind"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconWrapBehind.id} className={'icon icon-svg'} />
}
</ListItem>
</List>
{('behind' !== wrapType && 'infront' !== wrapType) &&
@ -391,19 +440,19 @@ const PageWrap = props => {
onClick={() => {
props.onShapeAlign(Asc.c_oAscAlignH.Left)
}}>
<Icon slot="media" icon="icon-text-align-left"></Icon>
<SvgIcon symbolId={IconTextAlignLeft.id} className={'icon icon-svg'} />
</a>
<a className={'button' + (align === Asc.c_oAscAlignH.Center ? ' active' : '')}
onClick={() => {
props.onShapeAlign(Asc.c_oAscAlignH.Center)
}}>
<Icon slot="media" icon="icon-text-align-center"></Icon>
<SvgIcon symbolId={IconTextAlignCenter.id} className={'icon icon-svg'} />
</a>
<a className={'button' + (align === Asc.c_oAscAlignH.Right ? ' active' : '')}
onClick={() => {
props.onShapeAlign(Asc.c_oAscAlignH.Right)
}}>
<Icon slot="media" icon="icon-text-align-right"></Icon>
<SvgIcon symbolId={IconTextAlignRight.id} className={'icon icon-svg'} />
</a>
</div>
</ListItem>
@ -441,7 +490,10 @@ const PageReplace = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -481,23 +533,26 @@ const PageReorder = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
</Navbar>
<List>
<ListItem title={_t.textBringToForeground} link='#' onClick={() => {props.onReorder('all-up')}} className='no-indicator'>
<Icon slot="media" icon="icon-move-foreground"></Icon>
<SvgIcon symbolId={IconMoveForeground.id} className={'icon icon-svg'} />
</ListItem>
<ListItem title={_t.textSendToBackground} link='#' onClick={() => {props.onReorder('all-down')}} className='no-indicator'>
<Icon slot="media" icon="icon-move-background"></Icon>
<SvgIcon symbolId={IconMoveBackground.id} className={'icon icon-svg'} />
</ListItem>
<ListItem title={_t.textMoveForward} link='#' onClick={() => {props.onReorder('move-up')}} className='no-indicator'>
<Icon slot="media" icon="icon-move-forward"></Icon>
<SvgIcon symbolId={IconMoveForward.id} className={'icon icon-svg'} />
</ListItem>
<ListItem title={_t.textMoveBackward} link='#' onClick={() => {props.onReorder('move-down')}} className='no-indicator'>
<Icon slot="media" icon="icon-move-backward"></Icon>
<SvgIcon symbolId={IconMoveBackward.id} className={'icon icon-svg'} />
</ListItem>
</List>
</Page>

107
apps/documenteditor/mobile/src/view/edit/EditTable.jsx
View File

@ -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 &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -100,17 +128,24 @@ const PageWrap = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
</Navbar>
<List>
<ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onChange={() => {props.onWrapType(c_tableWrap.TABLE_WRAP_NONE)}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-table-inline"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconWrapTableInline.id} className={'icon icon-svg'} />
}
</ListItem>
<ListItem title={_t.textFlow} radio checked={wrapType === 'flow'} onChange={() => {props.onWrapType(c_tableWrap.TABLE_WRAP_PARALLEL)}}>
{!isAndroid && <Icon slot="media" icon="icon-wrap-table-flow"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconWrapTableFlow.id} className={'icon icon-svg'} />
}
</ListItem>
</List>
<List>
@ -129,19 +164,19 @@ const PageWrap = props => {
onClick={() => {
props.onWrapAlign(c_tableAlign.TABLE_ALIGN_LEFT)
}}>
<Icon slot="media" icon="icon-block-align-left"></Icon>
<SvgIcon symbolId={IconBlockAlignLeft.id} className={'icon icon-svg'} />
</a>
<a className={'button' + (align === c_tableAlign.TABLE_ALIGN_CENTER ? ' active' : '')}
onClick={() => {
props.onWrapAlign(c_tableAlign.TABLE_ALIGN_CENTER)
}}>
<Icon slot="media" icon="icon-block-align-center"></Icon>
<SvgIcon symbolId={IconBlockAlignCenter.id} className={'icon icon-svg'} />
</a>
<a className={'button' + (align === c_tableAlign.TABLE_ALIGN_RIGHT ? ' active' : '')}
onClick={() => {
props.onWrapAlign(c_tableAlign.TABLE_ALIGN_RIGHT)
}}>
<Icon slot="media" icon="icon-block-align-right"></Icon>
<SvgIcon symbolId={IconBlockAlignRight.id} className={'icon icon-svg'} />
</a>
</div>
</ListItem>
@ -232,7 +267,10 @@ const PageStyleOptions = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -285,7 +323,10 @@ const PageCustomFillColor = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -345,7 +386,10 @@ const PageCustomBorderColor = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -380,7 +424,10 @@ const PageBorderColor = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -447,38 +494,38 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
<ListItem className='buttons table-presets'>
<div className="row">
<a className={'item-link button'} onClick={() => {onBorderType("lrtbcm")}}>
<Icon slot="media" icon="icon-table-borders-all"></Icon>
<SvgIcon symbolId={IconTableBordersAll.id} className={'icon icon-svg'} />
</a>
<a className={'item-link button'} onClick={() => {onBorderType("")}}>
<Icon slot="media" icon="icon-table-borders-none"></Icon>
<SvgIcon symbolId={IconTableBordersNone.id} className={'icon icon-svg'} />
</a>
<a className={'item-link button'} onClick={() => {onBorderType("cm")}}>
<Icon slot="media" icon="icon-table-borders-inner"></Icon>
<SvgIcon symbolId={IconTableBordersInner.id} className={'icon icon-svg'} />
</a>
<a className={'item-link button'} onClick={() => {onBorderType("lrtb")}}>
<Icon slot="media" icon="icon-table-borders-outer"></Icon>
<SvgIcon symbolId={IconTableBordersOuter.id} className={'icon icon-svg'} />
</a>
<a className={'item-link button'} onClick={() => {onBorderType("l")}}>
<Icon slot="media" icon="icon icon-table-borders-left"></Icon>
<SvgIcon symbolId={IconTableBordersLeft.id} className={'icon icon-svg'} />
</a>
</div>
</ListItem>
<ListItem className='buttons table-presets'>
<div className="row">
<a className={'item-link button'} onClick={() => {onBorderType("c")}}>
<Icon slot="media" icon="icon-table-borders-center"></Icon>
<SvgIcon symbolId={IconTableBordersCenter.id} className={'icon icon-svg'} />
</a>
<a className={'item-link button'} onClick={() => {onBorderType("r")}}>
<Icon slot="media" icon="icon-table-borders-right"></Icon>
<SvgIcon symbolId={IconTableBordersRight.id} className={'icon icon-svg'} />
</a>
<a className={'item-link button'} onClick={() => {onBorderType("t")}}>
<Icon slot="media" icon="icon-table-borders-top"></Icon>
<SvgIcon symbolId={IconTableBordersTop.id} className={'icon icon-svg'} />
</a>
<a className={'item-link button'} onClick={() => {onBorderType("m")}}>
<Icon slot="media" icon="icon-table-borders-middle"></Icon>
<SvgIcon symbolId={IconTableBordersMiddle.id} className={'icon icon-svg'} />
</a>
<a className={'item-link button'} onClick={() => {onBorderType("b")}}>
<Icon slot="media" icon="icon-table-borders-bottom"></Icon>
<SvgIcon symbolId={IconTableBordersBottom.id} className={'icon icon-svg'} />
</a>
</div>
</ListItem>
@ -511,7 +558,10 @@ const PageStyle = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -550,26 +600,27 @@ const EditTable = props => {
<ListItem className='buttons'>
<div className="row">
<a className={'item-link button'} onClick={() => {props.onAddColumnLeft()}}>
<Icon slot="media" icon="icon-table-add-column-left"></Icon>
<SvgIcon symbolId={IconTableAddColumnLeft.id} className={'icon icon-svg'} />
</a>
<a className={'item-link button'} onClick={() => {props.onAddColumnRight()}}>
<Icon slot="media" icon="icon-table-add-column-right"></Icon>
<SvgIcon symbolId={IconTableAddColumnRight.id} className={'icon icon-svg'} />
</a>
<a className={'item-link button'} onClick={() => {props.onAddRowAbove()}}>
<Icon slot="media" icon="icon-table-add-row-above"></Icon>
<SvgIcon symbolId={IconTableAddRowAbove.id} className={'icon icon-svg'} />
</a>
<a className={'item-link button'} onClick={() => {props.onAddRowBelow()}}>
<Icon slot="media" icon="icon-table-add-row-below"></Icon>
<SvgIcon symbolId={IconTableAddRowBelow.id} className={'icon icon-svg'} />
</a>
</div>
</ListItem>
<ListItem className='buttons'>
<div className="row">
<a className={'item-link button'} onClick={() => {props.onRemoveColumn()}}>
<Icon slot="media" icon="icon-table-remove-column"></Icon>
<SvgIcon symbolId={IconTableRemoveColumn.id} className={'icon icon-svg'} />
</a>
<a className={'item-link button'} onClick={() => {props.onRemoveRow()}}>
<Icon slot="media" icon="icon icon-table-remove-row"></Icon>
<SvgIcon symbolId={IconTableRemoveRow.id} className={'icon icon-svg'} />
</a>
</div>
</ListItem>

35
apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx
View File

@ -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 &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -169,7 +176,10 @@ const PageEditLeaderTableContents = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -215,7 +225,10 @@ const PageEditStructureTableContents = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -236,7 +249,9 @@ const PageEditStructureTableContents = props => {
props.onLevelsChange(amountLevels - 1);
}
}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
{isAndroid ?
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
: ' - '}
</Button>
{isAndroid && <label>{amountLevels === -1 ? '-' : amountLevels}</label>}
<Button outline className='increment item-link' onClick={() => {
@ -250,7 +265,9 @@ const PageEditStructureTableContents = props => {
}
}
}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
{isAndroid ?
<SvgIcon symbolId={IconExpandUp.id} className={'icon icon-svg'} />
: ' + '}
</Button>
</Segmented>
</div>
@ -271,7 +288,9 @@ const PageEditStructureTableContents = props => {
props.addStyles(chosenStyles, style.name, style.value - 1);
}
}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
{isAndroid ?
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
: ' - '}
</Button>
{isAndroid && <label>{style.value === 0 ? '' : style.value}</label>}
<Button outline className='increment item-link' onClick={() => {
@ -281,7 +300,9 @@ const PageEditStructureTableContents = props => {
props.addStyles(chosenStyles, style.name, style.value + 1);
}
}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
{isAndroid ?
<SvgIcon symbolId={IconExpandUp.id} className={'icon icon-svg'} />
: ' + '}
</Button>
</Segmented>
</div>

117
apps/documenteditor/mobile/src/view/edit/EditText.jsx
View File

@ -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 &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -79,11 +99,15 @@ const PageFonts = props => {
<div slot='after'>
<Segmented>
<Button outline className='decrement item-link' onClick={() => {props.changeFontSize(size, true)}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
{isAndroid ?
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
: ' - '}
</Button>
{isAndroid && <label>{displaySize}</label>}
<Button outline className='increment item-link' onClick={() => {props.changeFontSize(size, false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
{isAndroid ?
<SvgIcon symbolId={IconExpandUp.id} className={'icon icon-svg'} />
: ' + '}
</Button>
</Segmented>
</div>
@ -152,7 +176,10 @@ const PageAdditionalFormatting = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -171,11 +198,16 @@ const PageAdditionalFormatting = props => {
<div slot='after'>
<Segmented>
<Button outline className='decrement item-link' onClick={() => {props.changeLetterSpacing(letterSpacing, true)}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
{isAndroid ?
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
: ' - '}
</Button>
{isAndroid && <label>{(Number.isInteger(letterSpacing) ? letterSpacing : letterSpacing.toFixed(2)) + ' ' + Common.Utils.Metric.getCurrentMetricName()}</label>}
<Button outline className='increment item-link' onClick={() => {props.changeLetterSpacing(letterSpacing, false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Button>
</Segmented>
</div>
@ -277,7 +309,10 @@ const PageBulletsAndNumbers = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -326,7 +361,10 @@ const PageLineSpacing = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -363,7 +401,10 @@ const PageCustomFontColor = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -396,7 +437,10 @@ const PageFontColor = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -438,7 +482,10 @@ const PageCustomBackColor = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -469,7 +516,10 @@ const PageHighlightColor = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -491,7 +541,10 @@ const PageOrientationTextShape = props => {
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
}
</Link>
</NavRight>
}
@ -504,7 +557,7 @@ const PageOrientationTextShape = props => {
setDirectionTextShape(Asc.c_oAscVertDrawingText.normal);
props.setOrientationTextShape(Asc.c_oAscVertDrawingText.normal);
}}>
<Icon slot="media" icon="icon-text-orientation-horizontal"></Icon>
<SvgIcon symbolId={IconTextOrientationHorizontal.id} className={'icon icon-svg'} />
</ListItem>
<ListItem title={t('Edit.textRotateTextDown')} radio
checked={directionTextShape === Asc.c_oAscVertDrawingText.vert}
@ -513,7 +566,7 @@ const PageOrientationTextShape = props => {
setDirectionTextShape(Asc.c_oAscVertDrawingText.vert);
props.setOrientationTextShape(Asc.c_oAscVertDrawingText.vert);
}}>
<Icon slot="media" icon="icon-text-orientation-rotatedown"></Icon>
<SvgIcon symbolId={IconTextOrientationRotateDown.id} className={'icon icon-svg'} />
</ListItem>
<ListItem title={t('Edit.textRotateTextUp')} radio
checked={directionTextShape === Asc.c_oAscVertDrawingText.vert270}
@ -522,7 +575,7 @@ const PageOrientationTextShape = props => {
setDirectionTextShape(Asc.c_oAscVertDrawingText.vert270);
props.setOrientationTextShape(Asc.c_oAscVertDrawingText.vert270);
}}>
<Icon slot="media" icon="icon-text-orientation-rotateup"></Icon>
<SvgIcon symbolId={IconTextOrientationRotateUp.id} className={'icon icon-svg'} />
</ListItem>
</List>
</Page>
@ -594,7 +647,7 @@ const EditText = props => {
onTextColor: props.onTextColor
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-color">{fontColorPreview}</Icon> :
<SvgIcon symbolId={IconTextColor.id} className={'icon icon-svg'} /> :
fontColorPreview
}
</ListItem>
@ -602,7 +655,7 @@ const EditText = props => {
onHighlightColor: props.onHighlightColor
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-selection">{highlightColorPreview}</Icon> : highlightColorPreview
<SvgIcon symbolId={IconTextSelection.id} className={'icon icon-svg'} /> : highlightColorPreview
}
</ListItem>
<ListItem title={t("Edit.textAdditionalFormatting")} link="/edit-text-add-formatting/" routeProps={{
@ -611,23 +664,25 @@ const EditText = props => {
onAdditionalScript: props.onAdditionalScript,
changeLetterSpacing: props.changeLetterSpacing
}}>
{!isAndroid && <Icon slot="media" icon="icon-text-additional"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconTextAdditionalIos.id} className={'icon icon-svg'} />
}
</ListItem>
</List>
<List>
<ListItem className='buttons'>
<div className="row">
<a className={'button' + (paragraphAlign === 'left' ? ' active' : '')} onClick={() => {props.onParagraphAlign('left')}}>
<Icon slot="media" icon="icon-text-align-left"></Icon>
<SvgIcon symbolId={IconTextAlignLeft.id} className={'icon icon-svg'} />
</a>
<a className={'button' + (paragraphAlign === 'center' ? ' active' : '')} onClick={() => {props.onParagraphAlign('center')}}>
<Icon slot="media" icon="icon-text-align-center"></Icon>
<SvgIcon symbolId={IconTextAlignCenter.id} className={'icon icon-svg'} />
</a>
<a className={'button' + (paragraphAlign === 'right' ? ' active' : '')} onClick={() => {props.onParagraphAlign('right')}}>
<Icon slot="media" icon="icon-text-align-right"></Icon>
<SvgIcon symbolId={IconTextAlignRight.id} className={'icon icon-svg'} />
</a>
<a className={'button' + (paragraphAlign === 'just' ? ' active' : '')} onClick={() => {props.onParagraphAlign('just')}}>
<Icon slot="media" icon="icon-text-align-just"></Icon>
<SvgIcon symbolId={IconTextAlignJust.id} className={'icon icon-svg'} />
</a>
</div>
</ListItem>
@ -637,12 +692,12 @@ const EditText = props => {
<a className='button item-link' onClick={() => {
props.onParagraphMove(true)
}}>
<Icon slot="media" icon="icon-de-indent"></Icon>
<SvgIcon symbolId={IconDeIndent.id} className={'icon icon-svg'} />
</a>
<a className='button item-link' onClick={() => {
props.onParagraphMove(false)
}}>
<Icon slot="media" icon="icon-in-indent"></Icon>
<SvgIcon symbolId={IconInIndent.id} className={'icon icon-svg'} />
</a>
</div>
</ListItem>
@ -652,7 +707,9 @@ const EditText = props => {
setOrientationTextShape: props.setOrientationTextShape,
shapePr
}}>
{!isAndroid && <Icon slot="media" icon="icon-text-orientation-anglecount"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconTextOrientationAngleCount.id} className={'icon icon-svg'} />
}
</ListItem>
}
{!inSmartArt && !inSmartArtInternal &&
@ -664,13 +721,17 @@ const EditText = props => {
updateBulletsNumbers: props.updateBulletsNumbers
}}>
<div className="preview">{previewList}</div>
{!isAndroid && <Icon slot="media" icon="icon-bullets"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconBullets.id} className={'icon icon-svg'} />
}
</ListItem>
}
<ListItem title={t("Edit.textLineSpacing")} link='/edit-text-line-spacing/' routeProps={{
onLineSpacing: props.onLineSpacing
}}>
{!isAndroid && <Icon slot="media" icon="icon-linespacing"></Icon>}
{!isAndroid &&
<SvgIcon symbolId={IconLineSpacing.id} className={'icon icon-svg'} />
}
</ListItem>
</List>
</Fragment>

6
apps/documenteditor/mobile/src/view/settings/DocumentProtection.jsx
View File

@ -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 => {
<Navbar title={t('Settings.textProtectDocument')} backLink={_t.textBack}>
<NavRight>
<Link text={isIos && t('Settings.textSave')} className={isDisabledProtection && 'disabled'} onClick={changeHanlder}>
{Device.android && <Icon icon='icon-check'/>}
{Device.android &&
<SvgIcon symbolId={IconCheck.id} className='icon icon-svg' />
}
</Link>
</NavRight>
</Navbar>

35
apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx
View File

@ -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 => {
<div slot='after'>
<Segmented>
<Button outline className='decrement item-link' onClick={() => {onChangeMargins('top', true)}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
{isAndroid ?
<SvgIcon symbolId={IconExpandDownAndroid.id} className='icon icon-svg' />
: ' - '}
</Button>
{isAndroid && <label>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateTop).toFixed(2)) + ' ' + metricText}</label>}
<Button outline className='increment item-link' onClick={() => {onChangeMargins('top', false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
{isAndroid ?
<SvgIcon symbolId={IconExpandUp.id} className='icon icon-svg' />
: ' + '}
</Button>
</Segmented>
</div>
@ -107,11 +114,15 @@ const PageDocumentMargins = props => {
<div slot='after'>
<Segmented>
<Button outline className='decrement item-link' onClick={() => {onChangeMargins('bottom', true)}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
{isAndroid ?
<SvgIcon symbolId={IconExpandDownAndroid.id} className='icon icon-svg' />
: ' - '}
</Button>
{isAndroid && <label>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateBottom).toFixed(2))+ ' ' + metricText}</label>}
<Button outline className='increment item-link' onClick={() => {onChangeMargins('bottom', false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
{isAndroid ?
<SvgIcon symbolId={IconExpandUp.id} className='icon icon-svg' />
: ' + '}
</Button>
</Segmented>
</div>
@ -121,11 +132,15 @@ const PageDocumentMargins = props => {
<div slot='after'>
<Segmented>
<Button outline className='decrement item-link' onClick={() => {onChangeMargins('left', true)}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
{isAndroid ?
<SvgIcon symbolId={IconExpandDownAndroid.id} className='icon icon-svg' />
: ' - '}
</Button>
{isAndroid && <label>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateLeft).toFixed(2))+ ' ' + metricText}</label>}
<Button outline className='increment item-link' onClick={() => {onChangeMargins('left', false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
{isAndroid ?
<SvgIcon symbolId={IconExpandUp.id} className='icon icon-svg' />
: ' + '}
</Button>
</Segmented>
</div>
@ -135,11 +150,15 @@ const PageDocumentMargins = props => {
<div slot='after'>
<Segmented>
<Button outline className='decrement item-link' onClick={() => {onChangeMargins('right', true)}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
{isAndroid ?
<SvgIcon symbolId={IconExpandDownAndroid.id} className='icon icon-svg' />
: ' - '}
</Button>
{isAndroid && <label>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateRight).toFixed(2))+ ' ' + metricText}</label>}
<Button outline className='increment item-link' onClick={() => {onChangeMargins('right', false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
{isAndroid ?
<SvgIcon symbolId={IconExpandUp.id} className='icon icon-svg' />
: ' + '}
</Button>
</Segmented>
</div>

37
apps/documenteditor/mobile/src/view/settings/Download.jsx
View File

@ -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 => {
<List>
{!isDjvuFormat &&
<ListItem title="DOCX" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.DOCX)}>
<Icon slot="media" icon="icon-format-docx"></Icon>
<SvgIcon slot="media" symbolId={SvgDocx.id} className={'icon icon-svg '} />
</ListItem>
}
<ListItem title="PDF" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.PDF)}>
<Icon slot="media" icon="icon-format-pdf"></Icon>
<SvgIcon slot="media" symbolId={SvgPdf.id} className={'icon icon-svg '} />
</ListItem>
{isDjvuFormat &&
<ListItem title="DJVU" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.DJVU)}>
<Icon slot="media" icon="icon-format-djvu"></Icon>
<SvgIcon slot="media" symbolId={SvgDjvu.id} className={'icon icon-svg '} />
</ListItem>
}
{!isEditableForms && !isDjvuFormat ? [
<ListItem title="PDF/A" key="PDF/A" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.PDFA)}>
<Icon slot="media" icon="icon-format-pdfa"></Icon>
<SvgIcon slot="media" symbolId={SvgPdfa.id} className={'icon icon-svg '} />
</ListItem>,
<ListItem title="TXT" key="TXT" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.TXT)}>
<Icon slot="media" icon="icon-format-txt"></Icon>
<SvgIcon slot="media" symbolId={SvgTxt.id} className={'icon icon-svg '} />
</ListItem>,
<ListItem title="RTF" key="RTF" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.RTF)}>
<Icon slot="media" icon="icon-format-rtf"></Icon>
<SvgIcon slot="media" symbolId={SvgRtf.id} className={'icon icon-svg '} />
</ListItem>,
<ListItem title="ODT" key="ODT" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.ODT)}>
<Icon slot="media" icon="icon-format-odt"></Icon>
<SvgIcon slot="media" symbolId={SvgOdt.id} className={'icon icon-svg '} />
</ListItem>,
<ListItem title="HTML" key="HTML" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.HTML)}>
<Icon slot="media" icon="icon-format-html"></Icon>
<SvgIcon slot="media" symbolId={SvgHtml.id} className={'icon icon-svg '} />
</ListItem>,
<ListItem title="DOTX" key="DOTX" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.DOTX)}>
<Icon slot="media" icon="icon-format-dotx"></Icon>
<SvgIcon slot="media" symbolId={SvgDotx.id} className={'icon icon-svg '} />
</ListItem>,
<ListItem title="OTT" key="OTT" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.OTT)}>
<Icon slot="media" icon="icon-format-ott"></Icon>
<SvgIcon slot="media" symbolId={SvgOtt.id} className={'icon icon-svg '} />
</ListItem>,
<ListItem title="FB2" key="FB2" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.FB2)}>
<Icon slot="media" icon="icon-format-fb2"></Icon>
<SvgIcon slot="media" symbolId={SvgFb2.id} className={'icon icon-svg '} />
</ListItem>,
<ListItem title="EPUB" key="EPUB" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.EPUB)}>
<Icon slot="media" icon="icon-format-epub"></Icon>
<SvgIcon slot="media" symbolId={SvgEpub.id} className={'icon icon-svg '} />
</ListItem>,
]
: null}

6
apps/documenteditor/mobile/src/view/settings/FileEncryption.jsx
View File

@ -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 => {
<Navbar title={t('Settings.textEncryptFile')} backLink={_t.textBack}>
<NavRight>
<Link text={isIos && t('Settings.textSave')} className={isDisabledEncryption && 'disabled'} onClick={changeHanlder}>
{Device.android && <Icon icon='icon-check'/>}
{Device.android &&
<SvgIcon symbolId={IconCheck.id} className='icon icon-svg' />
}
</Link>
</NavRight>
</Navbar>

6
apps/documenteditor/mobile/src/view/settings/Protection.jsx
View File

@ -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 => {
<Navbar title={t('Settings.textProtection')} backLink={_t.textBack} />
<List>
<ListItem title={isProtected ? t('Settings.textUnprotect') : t('Settings.textProtectDocument')} onClick={() => props.onProtectClick()} link="#">
<Icon slot="media" icon="icon-protect-document" />
<SvgIcon symbolId={IconProtectDocument.id} className='icon icon-svg' />
</ListItem>
<ListItem title={t('Settings.textEncryptFile')} link="/encrypt">
<Icon slot="media" icon="icon-encrypt-file" />
<SvgIcon symbolId={IconEncryptFile.id} className='icon icon-svg' />
</ListItem>
</List>
</Page>

67
apps/documenteditor/mobile/src/view/settings/SettingsPage.jsx
View File

@ -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 ?
<ListItem key='add-to-favorites-link' title={isFavorite ? t('Settings.textRemoveFromFavorites') : t('Settings.textAddToFavorites')} link='#' className='no-indicator' onClick={settingsContext.toggleFavorite}>
<Icon slot="media" icon={isFavorite ? "icon-remove-favorites" : "icon-add-favorites"}></Icon>
{isFavorite ?
<SvgIcon slot="media" symbolId={IconRemoveFavorites.id} className={'icon icon-svg'} />
:
<SvgIcon slot="media" symbolId={IconAddFavorites.id} className={'icon icon-svg'} />
}
</ListItem>
: ''),
<ListItem key='clear-all-fields-link' title={t('Settings.textClearAllFields')} link='#' className='no-indicator' onClick={settingsContext.clearAllFields}>
<Icon slot="media" icon="icon-clear-fields"></Icon>
<SvgIcon slot="media" symbolId={IconClearFields.id} className={'icon icon-svg'} />
</ListItem>
] : null}
{(Device.phone || isEditableForms) &&
<ListItem title={!_isEdit || isViewer ? _t.textFind : _t.textFindAndReplace} link='#' searchbarEnable='.searchbar' onClick={settingsContext.closeModal} className='no-indicator'>
<Icon slot="media" icon="icon-search"></Icon>
<SvgIcon slot="media" symbolId={IconSearch.id} className={'icon icon-svg'} />
</ListItem>
}
{(_isEdit && canProtect) &&
<ListItem title={t('Settings.textProtection')} link="/protection">
<Icon slot="media" icon="icon-protection" />
<SvgIcon slot="media" symbolId={IconProtection.id} className={'icon icon-svg'} />
</ListItem>
}
{_isEdit && !isHistoryDisabled && canUseHistory &&
@ -102,7 +127,7 @@ const SettingsPage = inject("storeAppOptions", "storeReview", "storeDocumentInfo
onOpenOptions('history');
}
}}>
<Icon slot="media" icon="icon-version-history"></Icon>
<SvgIcon slot="media" symbolId={IconVersionHistory.id} className={'icon icon-svg'} />
</ListItem>
}
{!isEditableForms ?
@ -111,24 +136,24 @@ const SettingsPage = inject("storeAppOptions", "storeReview", "storeDocumentInfo
onOpenOptions('navigation');
}
}}>
<Icon slot="media" icon="icon-navigation"></Icon>
<SvgIcon slot="media" symbolId={IconNavigation.id} className={'icon icon-svg'} />
</ListItem>
: null}
{window.matchMedia("(max-width: 359px)").matches ?
<ListItem title={_t.textCollaboration} link="#" onClick={() => {
onOpenOptions('coauth');
}} className='no-indicator'>
<Icon slot="media" icon="icon-collaboration"></Icon>
<SvgIcon slot="media" symbolId={IconCollaboration.id} className={'icon icon-svg '} />
</ListItem>
: null}
{Device.sailfish && _isEdit &&
<ListItem title={_t.textSpellcheck} onClick={() => settingsContext.onOrthographyCheck()} className='no-indicator' link="#">
<Icon slot="media" icon="icon-spellcheck"></Icon>
<SvgIcon slot="media" symbolId={IconSpellcheck.id} className={'icon icon-svg'} />
</ListItem>
}
{(appOptions.isMobileViewAvailable && ((Device.phone && !isViewer) || isEditableForms)) &&
<ListItem title={t('Settings.textMobileView')}>
<Icon slot="media" icon="icon-mobile-view"></Icon>
<SvgIcon slot="media" symbolId={IconMobileView.id} className={'icon icon-svg'} />
<Toggle checked={isMobileView} onToggleChange={() => {
onOpenOptions('snackbar');
settingsContext.onChangeMobileView();
@ -137,45 +162,51 @@ const SettingsPage = inject("storeAppOptions", "storeReview", "storeDocumentInfo
}
{(_isEdit && !isViewer) &&
<ListItem title={_t.textDocumentSettings} disabled={displayMode !== 'markup'} link='/document-settings/'>
<Icon slot="media" icon="icon-doc-setup"></Icon>
<SvgIcon slot="media" symbolId={IconDocSetup.id} className={'icon icon-svg'} />
</ListItem>
}
<ListItem title={_t.textApplicationSettings} link="/application-settings/">
<Icon slot="media" icon="icon-app-settings"></Icon>
<SvgIcon slot="media" symbolId={IconAppSettings.id} className={'icon icon-svg'} />
</ListItem>
{_canDownload &&
<ListItem title={isEditableForms ? t('Settings.textExport') : _t.textDownload} link="/download/">
<Icon slot="media" icon={isEditableForms ? "icon-export" : "icon-download"}></Icon>
{isEditableForms ?
<SvgIcon slot="media" symbolId={IconExport.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconDownload.id} className={'icon icon-svg'} />
}
</ListItem>
}
{_canDownloadOrigin &&
<ListItem title={_t.textDownload} link="#" onClick={settingsContext.onDownloadOrigin} className='no-indicator'>
<Icon slot="media" icon="icon-download"></Icon>
<SvgIcon slot="media" symbolId={IconDownload.id} className={'icon icon-svg'} />
</ListItem>
}
{_canPrint &&
<ListItem title={_t.textPrint} onClick={settingsContext.onPrint} link='#' className='no-indicator'>
<Icon slot="media" icon="icon-print"></Icon>
<SvgIcon slot="media" symbolId={IconPrint.id} className={'icon icon-svg'} />
</ListItem>
}
{!(!_canDisplayInfo && isBranding) &&
<ListItem title={_t.textDocumentInfo} link="/document-info/">
<Icon slot="media" icon="icon-info"></Icon>
<SvgIcon slot="media" symbolId={IconInfo.id} className={'icon icon-svg'} />
</ListItem>
}
{_canHelp &&
<ListItem title={_t.textHelp} link="#" className='no-indicator' onClick={settingsContext.showHelp}>
<Icon slot="media" icon="icon-help"></Icon>
<SvgIcon slot="media" symbolId={IconHelp.id} className={'icon icon-svg'} />
</ListItem>
}
{_canAbout &&
<ListItem title={_t.textAbout} link="/about/">
<Icon slot="media" icon="icon-about"></Icon>
<SvgIcon slot="media" symbolId={IconAbout.id} className={'icon icon-svg'} />
</ListItem>
}
{_canFeedback &&
<ListItem title={t('Settings.textFeedback')} link="#" className='no-indicator' onClick={settingsContext.showFeedback}>
<Icon slot="media" icon="icon-feedback"></Icon>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconFeedbackForIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconFeedbackForAndroid.id} className={'icon icon-svg'} />
}
</ListItem>
}
{canCloseEditor &&

6
vendor/framework7-react/build/webpack.config.js vendored
View File

@ -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'],
},