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

Merge pull request 'fix/mobile-icons' (#322) from fix/mobile-icons into release/v9.0.0

Browse Source
This commit is contained in:
Maxim Kadushkin
2025-03-13 07:29:51 +00:00
parent 3a7a424012 2bfa790028
commit 87fe34fe35
52 changed files with 224 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,9 @@
import React, { useEffect, useState } from 'react'
import { f7, Icon } from 'framework7-react';
import { Device } from '../../../../common/mobile/utils/device';
import SvgIcon from '@common/lib/component/SvgIcon'
import IconPlusIos from '@common-ios-icons/icon-plus.svg?ios';
import IconPlusAndroid from '@common-android-icons/icon-plus.svg?android';
export const WheelColorPicker = ({ initialColor = '#ffffff', onSelectColor }) => {
const [color, setColor] = useState(initialColor);
@ -23,7 +27,10 @@ export const WheelColorPicker = ({ initialColor = '#ffffff', onSelectColor }) =>
<div className='current-color-hsb-preview' style={{ backgroundColor: initialColor }}/>
</div>
<a href='#' id='add-new-color' className='button button-round' onClick={() => onSelectColor(color)}>
<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 white' />
}
</a>
</div>
</div>

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

@ -30,7 +30,7 @@ const CollaborationPage = props => {
<Link sheetClose=".coauth__sheet">
{Device.ios ?
<SvgIcon slot="media" symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon slot="media" symbolId={IconExpandDownAndroid.id} className={'icon icon-svg down'} />
}
</Link>
</NavRight>

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

@ -20,7 +20,7 @@ const UsersPage = inject("users")(observer(props => {
<Link sheetClose=".coauth__sheet">
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg down'} />
}
</Link>
</NavRight>

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

@ -4,7 +4,7 @@ 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 IconExpandDownIos from '@common-ios-icons/icon-expand-down.svg?ios';
import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg';
const VersionHistoryView = inject('storeVersionHistory', 'users')(observer(props => {
@ -56,7 +56,7 @@ const VersionHistoryView = inject('storeVersionHistory', 'users')(observer(props
<Link sheetClose="#version-history-sheet">
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg down'} />
}
</Link>
</NavRight>
@ -65,7 +65,7 @@ const VersionHistoryView = inject('storeVersionHistory', 'users')(observer(props
<Link popoverClose="#version-history-popover">
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg down'} />
}
</Link>
</NavRight>

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

@ -733,7 +733,7 @@ const ViewComments = inject("storeComments", "storeAppOptions", "storeReview")(o
<Link sheetClose=".coauth__sheet">
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg down'} />
}
</Link>
</NavRight>

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

@ -35,7 +35,7 @@ const PageReview = props => {
<Link sheetClose=".coauth__sheet">
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg down'} />
}
</Link>
</NavRight>
@ -95,7 +95,7 @@ const DisplayMode = props => {
<Link sheetClose=".coauth__sheet">
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg down'} />
}
</Link>
</NavRight>
@ -150,7 +150,7 @@ const PageReviewChange = inject("storeAppOptions")(observer(props => {
<Link sheetClose=".coauth__sheet">
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg down'} />
}
</Link>
</NavRight>

2
apps/common/mobile/resources/icons/android/icon-accept-changes.svg
View File

@ -1 +1 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.3966 19.2877L21.6495 11L23 12.3562L13.3966 22L9 17.5849L10.3505 16.2288L13.3966 19.2877Z" fill="#40865C"/><path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 8L20.5 4.5L3.5 4.5L3.5 17.5L7 17.5L7 19L4 19C3.46792 19 2.97026 18.7973 2.56338 18.3918C2.18779 17.9864 2 17.5302 2 17L2 5C2 4.46978 2.18779 4.01364 2.56338 3.60819C2.97026 3.20273 3.4734 3 4.00549 3L20 3C21.1046 3 22 3.89543 22 5L22 8L20.5 8Z"/><path d="M6 8H18V9.5H6V8Z"/><path d="M6 12H16V13.5H6V12Z"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.3966 19.2877L21.6495 11L23 12.3562L13.3966 22L9 17.5849L10.3505 16.2288L13.3966 19.2877Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 8L20.5 4.5L3.5 4.5L3.5 17.5L7 17.5L7 19L4 19C3.46792 19 2.97026 18.7973 2.56338 18.3918C2.18779 17.9864 2 17.5302 2 17L2 5C2 4.46978 2.18779 4.01364 2.56338 3.60819C2.97026 3.20273 3.4734 3 4.00549 3L20 3C21.1046 3 22 3.89543 22 5L22 8L20.5 8Z"/><path d="M6 8H18V9.5H6V8Z"/><path d="M6 12H16V13.5H6V12Z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 568 B

After

Width:  |  Height:  |  Size: 553 B

2
apps/common/mobile/resources/icons/android/icon-reject-changes.svg
View File

@ -1 +1 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23 13.4099L19.4099 17L23 20.5901L21.5901 22L18 18.4099L14.4099 22L13 20.5901L16.5901 17L13 13.4099L14.4099 12L18 15.5901L21.5901 12L23 13.4099Z" fill="#C60915"/><path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 10L20.5 4.5L3.5 4.5L3.5 17.5L11 17.5L11 19L4 19C3.46792 19 2.97026 18.7973 2.56338 18.3918C2.18779 17.9864 2 17.5302 2 17L2 5C2 4.46978 2.18779 4.01364 2.56338 3.60819C2.97026 3.20273 3.4734 3 4.00549 3L20 3C21.1046 3 22 3.89543 22 5L22 10L20.5 10Z"/><path d="M6 8H18V9.5H6L6 8Z"/><path d="M6 12H11V13.5H6V12Z"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23 13.4099L19.4099 17L23 20.5901L21.5901 22L18 18.4099L14.4099 22L13 20.5901L16.5901 17L13 13.4099L14.4099 12L18 15.5901L21.5901 12L23 13.4099Z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 10L20.5 4.5L3.5 4.5L3.5 17.5L11 17.5L11 19L4 19C3.46792 19 2.97026 18.7973 2.56338 18.3918C2.18779 17.9864 2 17.5302 2 17L2 5C2 4.46978 2.18779 4.01364 2.56338 3.60819C2.97026 3.20273 3.4734 3 4.00549 3L20 3C21.1046 3 22 3.89543 22 5L22 10L20.5 10Z"/><path d="M6 8H18V9.5H6L6 8Z"/><path d="M6 12H11V13.5H6V12Z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 627 B

After

Width:  |  Height:  |  Size: 613 B

2
apps/common/mobile/resources/icons/common/icon-export.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g clip-path="url(#clip0_1590_4226)"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 8H10V9H5V22H20V9H15V8H21V23H4V8Z" fill="#27ABA3"/><path d="M12.9988 16H11.9988L11.9988 2L8.39883 5.7L7.69883 4.9L12.4988 0L17.2988 4.9L16.5988 5.7L12.9988 2L12.9988 16Z" fill="#27ABA3"/></g><defs><clipPath id="clip0_1590_4226"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g clip-path="url(#clip0_1590_4226)"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 8H10V9H5V22H20V9H15V8H21V23H4V8Z"/><path d="M12.9988 16H11.9988L11.9988 2L8.39883 5.7L7.69883 4.9L12.4988 0L17.2988 4.9L16.5988 5.7L12.9988 2L12.9988 16Z"/></g><defs><clipPath id="clip0_1590_4226"><rect width="24" height="24"/></clipPath></defs></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 466 B

After

Width:  |  Height:  |  Size: 423 B

2
apps/common/mobile/resources/icons/common/icon-image.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 9.00002C9 10.1046 8.10457 11 7 11C5.89543 11 5 10.1046 5 9.00002C5 7.89545 5.89543 7.00002 7 7.00002C8.10457 7.00002 9 7.89545 9 9.00002ZM8 9.00002C8 9.5523 7.55229 10 7 10C6.44772 10 6 9.5523 6 9.00002C6 8.44773 6.44772 8.00002 7 8.00002C7.55229 8.00002 8 8.44773 8 9.00002Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2 3.99997C2 9.99996 2.00005 13.9999 2 19.9999C12.4199 20.0008 22 19.9999 22 19.9999C22 19.9999 22 12.6325 22 3.99994C15.3333 4.00047 8.66667 4.00028 2 3.99997ZM21 5H3V16.2929L6.50001 12.7929L8.50001 14.7929L14.5 8.79286L21 15.2929V5ZM3.00001 19L3 17.7071L6.50001 14.2071L8.50001 16.2071L14.5 10.2071L21 16.7071L21 19H3.00001Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 9.00002C9 10.1046 8.10457 11 7 11C5.89543 11 5 10.1046 5 9.00002C5 7.89545 5.89543 7.00002 7 7.00002C8.10457 7.00002 9 7.89545 9 9.00002ZM8 9.00002C8 9.5523 7.55229 10 7 10C6.44772 10 6 9.5523 6 9.00002C6 8.44773 6.44772 8.00002 7 8.00002C7.55229 8.00002 8 8.44773 8 9.00002Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2 3.99997C2 9.99996 2.00005 13.9999 2 19.9999C12.4199 20.0008 22 19.9999 22 19.9999C22 19.9999 22 12.6325 22 3.99994C15.3333 4.00047 8.66667 4.00028 2 3.99997ZM21 5H3V16.2929L6.50001 12.7929L8.50001 14.7929L14.5 8.79286L21 15.2929V5ZM3.00001 19L3 17.7071L6.50001 14.2071L8.50001 16.2071L14.5 10.2071L21 16.7071L21 19H3.00001Z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 810 B

After

Width:  |  Height:  |  Size: 797 B

2
apps/common/mobile/resources/icons/ios/icon-accept-changes.svg
View File

@ -1 +1 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 20L9 17L8 18L12 22L22 12L21 11L12 20Z" fill="#40865C"/><path d="M19 9H5V8H19V9Z"/><path d="M16 12H5V11H16V12Z"/><path d="M14 15H5V14H14V15Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3 5H21V9H22V5V4H21H3H2V5V19V20H3H6V19H3V5Z"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 20L9 17L8 18L12 22L22 12L21 11L12 20Z" /><path d="M19 9H5V8H19V9Z"/><path d="M16 12H5V11H16V12Z"/><path d="M14 15H5V14H14V15Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3 5H21V9H22V5V4H21H3H2V5V19V20H3H6V19H3V5Z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 339 B

After

Width:  |  Height:  |  Size: 325 B

2
apps/common/mobile/resources/icons/ios/icon-reject-changes.svg
View File

@ -1 +1 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13 11L12 12L16 16L12 20L13 21L17 17L21 21L22 20L18 16L22 12L21 11L17 15L13 11Z" fill="#AA5252"/><path d="M19 9H5V8H19V9Z"/><path d="M10 12H5V11H10V12Z"/><path d="M10 15H5V14H10V15Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3 5H21V9H22V5V4H21H3H2V5V19V20H3H10V19H3V5Z"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13 11L12 12L16 16L12 20L13 21L17 17L21 21L22 20L18 16L22 12L21 11L17 15L13 11Z"/><path d="M19 9H5V8H19V9Z"/><path d="M10 12H5V11H10V12Z"/><path d="M10 15H5V14H10V15Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3 5H21V9H22V5V4H21H3H2V5V19V20H3H10V19H3V5Z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 378 B

After

Width:  |  Height:  |  Size: 363 B

2
apps/common/mobile/resources/less/common-material.less
View File

@ -256,7 +256,7 @@
color: @fill-white;
.icon-svg {
opacity: 1;
fill: var(--fill-white);
fill: @fill-white;
}
}
}

17
apps/common/mobile/resources/less/ios/icons.less
View File

@ -20,27 +20,12 @@
background: ~"url(@{common-image-path}/header/logo-ios.svg)" no-repeat center;
background-size: contain;
}
&.icon-show-password {
width: 25px;
height: 25px;
.encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.62546 12.5C7.1723 14.623 9.67579 16 12.5002 16C15.3246 16 17.8281 14.623 19.3749 12.5C17.8281 10.377 15.3246 9 12.5002 9C9.67579 9 7.1723 10.377 5.62546 12.5ZM20.5795 12.5C18.9043 9.79888 15.9123 8 12.5002 8C9.08806 8 6.09608 9.79888 4.4209 12.5C6.09608 15.2011 9.08806 17 12.5002 17C15.9123 17 18.9043 15.2011 20.5795 12.5Z"/><path d="M12.5002 10C13.8812 9.99654 14.9984 11.1189 15.0015 12.5C15.0046 13.8842 13.8843 15.0147 12.5002 15.0112C11.1195 15.0078 10.0083 13.8807 10.0114 12.5C10.0145 11.1224 11.1226 10.0035 12.5002 10Z"/></svg>', @text-secondary);
}
&.icon-hide-password {
width: 25px;
height: 25px;
.encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.3563 15.7651C11.7305 15.8154 12.1123 15.8414 12.5002 15.8414C15.3246 15.8414 17.8281 14.4644 19.3749 12.3414C18.6236 11.3102 18.166 10.7574 17.0361 10.1505L17.7591 9.41118C19.134 10.198 19.746 10.9975 20.5795 12.3414C18.9043 15.0425 15.9123 16.8414 12.5002 16.8414C11.8178 16.8414 11.1521 16.7695 10.5105 16.6327L11.3563 15.7651ZM8.12773 14.6323C7.14813 14.0435 6.29672 13.2627 5.62546 12.3414C7.1723 10.2184 9.67579 8.84141 12.5002 8.84141C13.0975 8.84141 13.2187 8.82442 13.7967 8.91092L14.721 8.06225C13.8906 7.82361 13.4176 7.8414 12.5148 7.84141H12.5002C9.08806 7.84141 6.09608 9.64029 4.4209 12.3414C5.17086 13.5507 6.18474 14.5791 7.38209 15.3462L8.12773 14.6323Z"/><path d="M16.0314 9.67145C15.7088 9.5343 15.3584 9.3959 15.0218 9.27392L9.15792 15.1593C9.49185 15.3022 9.83676 15.4243 10.191 15.5241L16.0314 9.67145Z"/><path d="M16.7904 8.91092C16.4786 8.76381 16.1396 8.6121 15.8163 8.47649L15.0218 9.27392C15.3584 9.3959 15.7088 9.5343 16.0314 9.67145L16.7904 8.91092Z"/><path d="M18.3454 7.35265L17.625 6.66113L15.8163 8.47649C16.1396 8.6121 16.4786 8.76381 16.7904 8.91092L18.3454 7.35265Z"/><path d="M9.39461 16.3222C9.05541 16.2049 8.72492 16.069 8.40438 15.9156L6.67677 17.6495L7.38209 18.3389L9.39461 16.3222Z"/><path d="M10.191 15.5241C9.83676 15.4243 9.49185 15.3022 9.15792 15.1593L8.40438 15.9156C8.72492 16.069 9.05541 16.2049 9.39461 16.3222L10.191 15.5241Z"/></svg>', @text-secondary);
}
&.icon-settings {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg viewBox="0 0 24 24" fill="@{brandColor}" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM15.5 12.25C15.5 11.5596 16.0596 11 16.75 11C17.4404 11 18 11.5596 18 12.25C18 12.9404 17.4404 13.5 16.75 13.5C16.0596 13.5 15.5 12.9404 15.5 12.25ZM12 11C11.3096 11 10.75 11.5596 10.75 12.25C10.75 12.9404 11.3096 13.5 12 13.5C12.6904 13.5 13.25 12.9404 13.25 12.25C13.25 11.5596 12.6904 11 12 11ZM7.25 11C6.55964 11 6 11.5596 6 12.25C6 12.9404 6.55964 13.5 7.25 13.5C7.94036 13.5 8.5 12.9404 8.5 12.25C8.5 11.5596 7.94036 11 7.25 11Z"/></svg>');
}
}
}
.icon-svg {
&.icon-svg__mask {
fill: var(--fill-white);
fill: @fill-white;
vertical-align: middle;
}
}

28
apps/common/mobile/resources/less/material/icons.less
View File

@ -11,16 +11,6 @@
background: ~"url(@{common-image-path}/header/logo-android.svg) no-repeat center";
background-size: contain;
}
&.icon-show-password {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.89362 9.89062C10.4865 9.29688 11.1887 9 12 9C12.8113 9 13.5135 9.29688 14.1064 9.89062C14.6993 10.4844 14.9957 11.1875 14.9957 12C14.9957 12.8125 14.6993 13.5156 14.1064 14.1094C13.5135 14.7031 12.8113 15 12 15C11.1887 15 10.4865 14.7031 9.89362 14.1094C9.30071 13.5156 9.00426 12.8125 9.00426 12C9.00426 11.1875 9.30071 10.4844 9.89362 9.89062ZM8.44255 15.5625C9.44114 16.5312 10.627 17.0156 12 17.0156C13.373 17.0156 14.5433 16.5312 15.5106 15.5625C16.5092 14.5625 17.0085 13.375 17.0085 12C17.0085 10.625 16.5092 9.45312 15.5106 8.48438C14.5433 7.48438 13.373 6.98438 12 6.98438C10.627 6.98438 9.44114 7.48438 8.44255 8.48438C7.47518 9.45312 6.99149 10.625 6.99149 12C6.99149 13.375 7.47518 14.5625 8.44255 15.5625ZM5.30638 6.5625C7.30355 5.1875 9.53475 4.5 12 4.5C14.4652 4.5 16.6965 5.1875 18.6936 6.5625C20.6908 7.9375 22.1262 9.75 23 12C22.1262 14.25 20.6908 16.0625 18.6936 17.4375C16.6965 18.8125 14.4652 19.5 12 19.5C9.53475 19.5 7.30355 18.8125 5.30638 17.4375C3.30922 16.0625 1.87376 14.25 1 12C1.87376 9.75 3.30922 7.9375 5.30638 6.5625Z"/></svg>', @text-secondary);
}
&.icon-hide-password {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11.8827 9.00494H12.0235C12.8365 9.00494 13.5402 9.30206 14.1343 9.8963C14.7285 10.4905 15.0256 11.1942 15.0256 12.0074V12.1951L11.8827 9.00494ZM7.56716 9.80247C7.1919 10.5531 7.00426 11.2881 7.00426 12.0074C7.00426 13.3835 7.48898 14.572 8.45842 15.5728C9.45913 16.5424 10.6475 17.0272 12.0235 17.0272C12.7427 17.0272 13.4776 16.8395 14.2281 16.4642L12.6802 14.916C12.43 14.9786 12.2111 15.0099 12.0235 15.0099C11.2104 15.0099 10.5068 14.7128 9.91258 14.1185C9.31841 13.5243 9.02132 12.8206 9.02132 12.0074C9.02132 11.8198 9.05259 11.6008 9.11514 11.3506L7.56716 9.80247ZM2.03198 4.26667L3.29851 3L21.0299 20.7333L19.7633 22C19.607 21.8436 19.1066 21.3588 18.2623 20.5457C17.4492 19.7325 16.8237 19.107 16.3859 18.6691C15.0412 19.2321 13.5871 19.5136 12.0235 19.5136C9.55295 19.5136 7.31699 18.8255 5.31557 17.4494C3.31414 16.0733 1.87562 14.2593 1 12.0074C1.78181 10.0683 3.03269 8.4107 4.75267 7.03457C4.3774 6.65926 3.84577 6.12757 3.15778 5.43951C2.50107 4.75144 2.1258 4.36049 2.03198 4.26667ZM12.0235 6.98765C11.398 6.98765 10.7882 7.11276 10.194 7.36296L8.03625 5.20494C9.25586 4.7358 10.5849 4.50123 12.0235 4.50123C14.494 4.50123 16.7143 5.1893 18.6844 6.56543C20.6859 7.94156 22.1244 9.75556 23 12.0074C22.2495 13.8527 21.108 15.4321 19.5757 16.7457L16.6674 13.837C16.9176 13.2428 17.0426 12.6329 17.0426 12.0074C17.0426 10.6313 16.5423 9.45844 15.5416 8.48889C14.5721 7.48807 13.3994 6.98765 12.0235 6.98765Z"/></svg>', @text-secondary);
}
}
.dropdown-list {
i.icon {
@ -34,17 +24,25 @@
.navbar {
.icon-svg {
fill: @toolbar-icons;
&.white {
fill: @fill-white;
}
&.inactive {
fill: @text-tertiary;
}
&.active {
fill: @brandColor;
}
&.close {
fill: @brandColor;
}
}
i.icon {
&.icon-back {
color: @toolbar-icons;
}
&.icon-settings {
width: 22px;
height: 22px;
.encoded-svg-mask('<svg viewBox="0 0 24 24" fill="@{toolbar-icons}" xmlns="http://www.w3.org/2000/svg"><path d="M12 3.25C11.0335 3.25 10.25 4.0335 10.25 5C10.25 5.9665 11.0335 6.75 12 6.75C12.9665 6.75 13.75 5.9665 13.75 5C13.75 4.0335 12.9665 3.25 12 3.25Z" fill="white"/><path d="M12 10.25C11.0335 10.25 10.25 11.0335 10.25 12C10.25 12.9665 11.0335 13.75 12 13.75C12.9665 13.75 13.75 12.9665 13.75 12C13.75 11.0335 12.9665 10.25 12 10.25Z" fill="white"/><path d="M12 17.25C11.0335 17.25 10.25 18.0335 10.25 19C10.25 19.9665 11.0335 20.75 12 20.75C12.9665 20.75 13.75 19.9665 13.75 19C13.75 18.0335 12.9665 17.25 12 17.25Z" fill="white"/></svg>', @toolbar-icons);
}
}
}
}

2
apps/documenteditor/mobile/resources/icons/common/icon-protect-doc.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 1L3 7V22H10V21H4V8H10V2H19V10H20V1H9ZM4.41422 7L9 2.41422V7H4.41422Z"/><g clip-path="url(#clip0_205_12376)"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.5002 15.5V15.5003C14.5001 15.6797 14.5002 15.8457 14.5008 16H14.5V17H13.5V16H13.5007C13.5001 15.8416 13.5001 15.675 13.5002 15.5C13.5002 13.567 15.0672 12 17.0002 12C18.9332 12 20.5002 13.567 20.5002 15.5C20.5002 15.675 20.5002 15.8416 20.4995 16H20.5V17H19.5V16H19.4994C19.5001 15.8457 19.5002 15.6795 19.5002 15.5C19.5002 14.1193 18.3809 13 17.0002 13C15.6195 13 14.5002 14.1193 14.5002 15.5ZM13.5 18H20.5C20.5 18 21 18 21 18.5V22.5C21 23 20.5 23 20.5 23H13.5C13.5 23 13 23 13 22.5V18.5C13 18 13.5 18 13.5 18ZM12 18C12 17 13 17 13 17H21C21 17 22 17 22 18V22.6667C22 23.3111 21.6443 24 21 24H13C13 24 12 24 12 23V18ZM17.5833 20.4023C17.7623 20.2421 17.875 20.0092 17.875 19.7501C17.875 19.2668 17.4832 18.8751 17 18.8751C16.5168 18.8751 16.125 19.2668 16.125 19.7501C16.125 20.0092 16.2377 20.2421 16.4167 20.4023V22.0834H17.5833V20.4023Z" fill="black"/></g><defs><clipPath id="clip0_205_12376"><rect width="12" height="12" fill="white" transform="translate(11 12)"/></clipPath></defs></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 1L3 7V22H10V21H4V8H10V2H19V10H20V1H9ZM4.41422 7L9 2.41422V7H4.41422Z"/><g clip-path="url(#clip0_205_12376)"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.5002 15.5V15.5003C14.5001 15.6797 14.5002 15.8457 14.5008 16H14.5V17H13.5V16H13.5007C13.5001 15.8416 13.5001 15.675 13.5002 15.5C13.5002 13.567 15.0672 12 17.0002 12C18.9332 12 20.5002 13.567 20.5002 15.5C20.5002 15.675 20.5002 15.8416 20.4995 16H20.5V17H19.5V16H19.4994C19.5001 15.8457 19.5002 15.6795 19.5002 15.5C19.5002 14.1193 18.3809 13 17.0002 13C15.6195 13 14.5002 14.1193 14.5002 15.5ZM13.5 18H20.5C20.5 18 21 18 21 18.5V22.5C21 23 20.5 23 20.5 23H13.5C13.5 23 13 23 13 22.5V18.5C13 18 13.5 18 13.5 18ZM12 18C12 17 13 17 13 17H21C21 17 22 17 22 18V22.6667C22 23.3111 21.6443 24 21 24H13C13 24 12 24 12 23V18ZM17.5833 20.4023C17.7623 20.2421 17.875 20.0092 17.875 19.7501C17.875 19.2668 17.4832 18.8751 17 18.8751C16.5168 18.8751 16.125 19.2668 16.125 19.7501C16.125 20.0092 16.2377 20.2421 16.4167 20.4023V22.0834H17.5833V20.4023Z"/></g><defs><clipPath id="clip0_205_12376"><rect width="12" height="12" transform="translate(11 12)"/></clipPath></defs></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

6
apps/documenteditor/mobile/src/less/icons-common.less
View File

@ -1,4 +1,10 @@
.icon-svg {
fill: @brand-word;
&.password-field__icon {
fill: @text-secondary;
}
&.white {
fill: @fill-white;
}
}

11
apps/documenteditor/mobile/src/less/icons-ios.less
View File

@ -1,19 +1,12 @@
.device-ios {
i.icon {
&.icon-expand-down {
width: 22px;
height: 22px;
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M20.5,6.5l1.1,1.1L11,18l0,0l0,0L0.5,7.5l1.1-1.1l9.5,9.5L20.5,6.5z"/></g></svg>');
}
}
.tab-link {
.icon-svg {
fill: var(--fill-white);
fill: @toolbar-segment;
}
}
.tab-link-active {
.icon-svg {
fill: var(--brand-text-on-brand);
fill: @brand-text-on-brand;
}
}
}

24
apps/documenteditor/mobile/src/less/icons-material.less
View File

@ -1,23 +1,13 @@
.device-android {
.navbar {
i.icon {
&.icon-expand-down {
width: 22px;
height: 22px;
.encoded-svg-mask('<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><polygon points="10.9,16.9 2,8.1 4.1,6 11.1,12.8 17.9,6 20,8.1 11.2,16.9 11.1,17 "/></g></svg>', @fill-white);
}
}
}
i.icon {
&.icon-expand-down {
width: 17px;
height: 17px;
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{brand-word}"><g><polygon points="10.9,16.9 2,8.1 4.1,6 11.1,12.8 17.9,6 20,8.1 11.2,16.9 11.1,17 "/></g></svg>');
}
}
.tab-link {
.icon-svg {
fill: var(--toolbar-tab-normal);
fill: @toolbar-tab-normal;
}
}
.icon-svg {
&.down {
fill: @fill-white;
}
}
}

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

@ -15,7 +15,8 @@ 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?ios';
import IconSettings from '@common-icons/icon-settings.svg';
import IconSettingsIos from '@common-ios-icons/icon-settings.svg?ios';
import IconSettingsAndroid from '@common-android-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';
@ -139,7 +140,11 @@ const ToolbarView = props => {
<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 iconOnly key='btn-settings' className={(props.disabledSettings || props.disabledControls || isDisconnected || isOpenModal) && 'disabled'} id='btn-settings' href={false} onClick={() => props.openOptions('settings')}>
{Device.ios ?
<SvgIcon symbolId={IconSettingsIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconSettingsAndroid.id} className={'icon icon-svg'} />
}</Link>
] : [
// /!Device.phone && <Link key='desktop-link' iconOnly href={false}
// className={isOpenModal || props.disabledControls ? 'disabled' : ''}
@ -147,16 +152,20 @@ const ToolbarView = props => {
// <SvgIcon symbolId={IconSwitchToDesktop.id}
// className={'icon icon-svg'} />
// </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 iconOnly key='prev-field-link' className={(props.disabledSettings || props.disabledControls || isDisconnected || isOpenModal) && 'disabled'} id='btn-prev-field' href={false} onClick={() => props.movePrevField()}><SvgIcon symbolId={IconPrevField.id} className={'icon icon-svg'} /></Link>,
<Link iconOnly key='next-field-link' className={(props.disabledSettings || props.disabledControls || isDisconnected || isOpenModal) && 'disabled'} id='btn-next-field' href={false} onClick={() => props.moveNextField()}><SvgIcon symbolId={IconNextField.id} className={'icon icon-svg'} /></Link>,
(props.canSubmitForms ?
[
<Link iconOnly key='btn-settings'
className={(props.disabledSettings || props.disabledControls || isDisconnected || isOpenModal) && 'disabled'}
href={false}
id='btn-settings'
onClick={() => props.openOptions('settings')}><SvgIcon slot="media" symbolId={IconSettings.id} className={'icon icon-svg'} /></Link>,
<Link iconOnly key='send-form-link'
onClick={() => props.openOptions('settings')}>
{Device.ios ?
<SvgIcon symbolId={IconSettingsIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconSettingsAndroid.id} className={'icon icon-svg'} />
}</Link>,
<Link key='send-form-link'
id='btn-submit-form'
className={(props.disabledSettings || props.disabledControls || isDisconnected || isOpenModal) && 'disabled'}
text={t("Toolbar.btnSend")} href={false}
@ -167,7 +176,11 @@ const ToolbarView = props => {
href={false} onClick={() => props.saveForm()}><SvgIcon slot="media" symbolId={IconSaveForm.id} className={'icon icon-svg'} /></Link>,
<Link iconOnly key='btn-settings'
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>
href={false} onClick={() => {props.openOptions('settings')}}>
{Device.ios ?
<SvgIcon symbolId={IconSettingsIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconSettingsAndroid.id} className={'icon icon-svg'} />
}</Link>
]
)
]}

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

@ -27,7 +27,7 @@ const PageLink = props => {
props.isNavigate ? f7.views.current.router.back() : props.closeModal('#add-link-popup', '#add-link-popover');
}}>
{Device.android &&
<SvgIcon symbolId={IconClose.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconClose.id} className={'icon icon-svg close'} />
}
</Link>
</NavLeft>
@ -36,11 +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 &&
{Device.android && (
stateLink.length < 1 ?
<SvgIcon symbolId={IconDoneDisabled.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconDone.id} className={'icon icon-svg'} />
}
<SvgIcon symbolId={IconDoneDisabled.id} className={'icon icon-svg inactive'} /> :
<SvgIcon symbolId={IconDone.id} className={'icon icon-svg active'} />
)}
</Link>
</NavRight>
</Navbar>

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

@ -44,7 +44,7 @@ const AddLayoutNavbar = ({ tabs, storeTableSettings }) => {
{Device.phone && <NavRight><Link popupClose=".add-popup">
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}</Link></NavRight>}
</Navbar>
)

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

@ -45,7 +45,7 @@ const PageCustomFillColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -111,7 +111,7 @@ const PageCustomBorderColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -150,7 +150,7 @@ const PageBorderColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -340,7 +340,7 @@ const PageDesign = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -389,7 +389,7 @@ const PageWrap = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -509,7 +509,7 @@ const PageReorder = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>

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

@ -41,11 +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 &&
{Device.android && (
stateLink.length < 1 ?
<SvgIcon symbolId={IconDoneDisabled.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconDone.id} className={'icon icon-svg'} />
}
<SvgIcon symbolId={IconDoneDisabled.id} className={'icon icon-svg inactive'} /> :
<SvgIcon symbolId={IconDone.id} className={'icon icon-svg active'} />
)}
</Link>
</NavRight>
</Navbar>

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

@ -70,7 +70,7 @@ const PageWrap = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -162,7 +162,7 @@ const PageWrappingStyle = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -260,7 +260,7 @@ const PageLinkSettings = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -299,7 +299,7 @@ const PageReplace = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -341,7 +341,7 @@ const PageReorder = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon slot="media" symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon slot="media" symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>

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

@ -50,7 +50,7 @@ const PageAdvancedSettings = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -99,11 +99,11 @@ const PageAdvancedSettings = props => {
<div slot='after'>
<Segmented>
<Button outline className='decrement item-link' onClick={() => {props.onSpinFirstLine(paragraphObj, true)}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
{isAndroid ? <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} /> : ' - '}
</Button>
{isAndroid && <label>{firstLine + ' ' + metricText}</label>}
<Button outline className='increment item-link' onClick={() => {props.onSpinFirstLine(paragraphObj, false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
{isAndroid ? <SvgIcon symbolId={IconExpandUp.id} className={'icon icon-svg'} /> : ' + '}
</Button>
</Segmented>
</div>
@ -153,7 +153,7 @@ const PageCustomBackColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -192,7 +192,7 @@ const PageBackgroundColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -277,7 +277,7 @@ const EditParagraphStyle = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>

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

@ -44,7 +44,7 @@ const PageCustomFillColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -110,7 +110,7 @@ const PageCustomBorderColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -149,7 +149,7 @@ const PageBorderColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -214,7 +214,7 @@ const PageStyle = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -305,7 +305,7 @@ const PageStyleNoFill = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -369,7 +369,7 @@ const PageWrap = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -492,7 +492,7 @@ const PageReplace = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -535,7 +535,7 @@ const PageReorder = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>

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

@ -60,7 +60,7 @@ const PageTableOptions = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -130,7 +130,7 @@ const PageWrap = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -269,7 +269,7 @@ const PageStyleOptions = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -325,7 +325,7 @@ const PageCustomFillColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -388,7 +388,7 @@ const PageCustomBorderColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -426,7 +426,7 @@ const PageBorderColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -560,7 +560,7 @@ const PageStyle = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>

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

@ -139,7 +139,7 @@ const PageEditStylesTableContents = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -178,7 +178,7 @@ const PageEditLeaderTableContents = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -227,7 +227,7 @@ const PageEditStructureTableContents = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>

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

@ -89,7 +89,7 @@ const PageFonts = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -180,7 +180,7 @@ const PageAdditionalFormatting = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -312,7 +312,7 @@ const PageBulletsAndNumbers = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -364,7 +364,7 @@ const PageLineSpacing = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -404,7 +404,7 @@ const PageCustomFontColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -440,7 +440,7 @@ const PageFontColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -485,7 +485,7 @@ const PageCustomBackColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -519,7 +519,7 @@ const PageHighlightColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -544,7 +544,7 @@ const PageOrientationTextShape = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>

9
apps/documenteditor/mobile/src/view/edit/EditingPage.jsx
View File

@ -11,6 +11,9 @@ import EditTableController from "../../controller/edit/EditTable";
import EditChartController from "../../controller/edit/EditChart";
import EditHeaderController from "../../controller/edit/EditHeader";
import EditTableContentsController from "../../controller/edit/EditTableContents";
import SvgIcon from '@common/lib/component/SvgIcon'
import IconExpandDownIos from '@common-ios-icons/icon-expand-down.svg?ios';
import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg';
const EmptyEditLayout = () => {
const { t } = useTranslation();
@ -41,7 +44,11 @@ const EditLayoutNavbar = ({ editors }) => {
</div> :
<NavTitle>{editors[0].caption}</NavTitle>
}
{Device.phone && <NavRight><Link icon='icon-expand-down' sheetClose></Link></NavRight>}
{Device.phone && <NavRight><Link sheetClose>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}</Link></NavRight>}
</Navbar>
)
};

3
apps/presentationeditor/mobile/src/less/icons-common.less
View File

@ -1,4 +1,7 @@
.icon-svg {
fill: @brand-slide;
&.white {
fill: @fill-white;;
}
}

2
apps/presentationeditor/mobile/src/less/icons-ios.less
View File

@ -3,7 +3,7 @@
.tab-link-active {
.icon-svg {
fill: var(--brand-text-on-brand);
fill: @brand-text-on-brand;
}
}
}

5
apps/presentationeditor/mobile/src/less/icons-material.less
View File

@ -9,5 +9,10 @@
//background: url('../../../../common/mobile/resources/img/header/logo-android.svg') no-repeat center;
}
}
.icon-svg {
&.down {
fill: @fill-white;
}
}
}
}

10
apps/presentationeditor/mobile/src/view/add/AddLink.jsx
View File

@ -137,7 +137,7 @@ const PageLink = props => {
isNavigate ? f7.views.current.router.back() : props.closeModal('#add-link-popup', '#add-link-popover');
}}>
{Device.android &&
<SvgIcon symbolId={IconClose.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconClose.id} className={'icon icon-svg close'} />
}
</Link>
</NavLeft>
@ -148,11 +148,11 @@ const PageLink = props => {
{url: link, display: stateDisplay, displayDisabled, tip: screenTip } :
{linkTo: linkTo, numberTo: numberTo, display: stateDisplay, displayDisabled, tip: screenTip}));
}} text={Device.ios ? t('View.Add.textDone') : ''}>
{Device.android &&
{Device.android && (
link.length < 1 ?
<SvgIcon symbolId={IconDoneDisabled.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconDone.id} className={'icon icon-svg'} />
}
<SvgIcon symbolId={IconDoneDisabled.id} className={'icon icon-svg inactive'} /> :
<SvgIcon symbolId={IconDone.id} className={'icon icon-svg active'} />
)}
</Link>
</NavRight>
</Navbar>

2
apps/presentationeditor/mobile/src/view/add/AddingPage.jsx
View File

@ -37,7 +37,7 @@ const AddLayoutNavbar = ({ tabs }) => {
{Device.phone && <NavRight><Link popupClose=".add-popup">
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}</Link></NavRight> }
</Navbar>
)

12
apps/presentationeditor/mobile/src/view/edit/EditChart.jsx
View File

@ -46,7 +46,7 @@ const PageCustomFillColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -117,7 +117,7 @@ const PageCustomBorderColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -158,7 +158,7 @@ const PageBorderColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -345,7 +345,7 @@ const PageDesign = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -384,7 +384,7 @@ const PageReorder = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -422,7 +422,7 @@ const PageAlign = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>

8
apps/presentationeditor/mobile/src/view/edit/EditImage.jsx
View File

@ -71,7 +71,7 @@ const PageReorder = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -113,7 +113,7 @@ const PageAlign = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -169,7 +169,7 @@ const PageReplace = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -220,7 +220,7 @@ const PageLinkSettings = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>

11
apps/presentationeditor/mobile/src/view/edit/EditLink.jsx
View File

@ -6,6 +6,7 @@ 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';
import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg';
import IconExpandUp from '@common-android-icons/icon-expand-up.svg';
@ -158,7 +159,7 @@ const PageLink = props => {
props.isNavigate ? f7.views.current.router.back() : props.closeModal();
}}>
{Device.android &&
<SvgIcon symbolId={IconClose.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconClose.id} className={'icon icon-svg close'} />
}
</Link>
</NavLeft>
@ -169,11 +170,11 @@ const PageLink = props => {
{url: link, display: stateDisplay, tip: screenTip, displayDisabled } :
{linkTo: linkTo, numberTo: numberTo, display: stateDisplay, tip: screenTip, displayDisabled}));
}} text={Device.ios ? t('View.Edit.textDone') : ''}>
{Device.android &&
{Device.android && (
link.length < 1 ?
<SvgIcon symbolId={IconDoneDisabled.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconDone.id} className={'icon icon-svg'} />
}
<SvgIcon symbolId={IconDoneDisabled.id} className={'icon icon-svg inactive'} /> :
<SvgIcon symbolId={IconDone.id} className={'icon icon-svg active'} />
)}
</Link>
</NavRight>
</Navbar>

16
apps/presentationeditor/mobile/src/view/edit/EditShape.jsx
View File

@ -164,7 +164,7 @@ const PageStyle = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -243,7 +243,7 @@ const PageCustomFillColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -294,7 +294,7 @@ const PageStyleNoFill = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -348,7 +348,7 @@ const PageReplace = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -391,7 +391,7 @@ const PageReorder = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -433,7 +433,7 @@ const PageAlign = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -500,7 +500,7 @@ const PageBorderColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -537,7 +537,7 @@ const PageCustomBorderColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>

14
apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx
View File

@ -58,7 +58,7 @@ const PageTheme = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -100,7 +100,7 @@ const PageLayout = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -251,7 +251,7 @@ const PageTransition = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -347,7 +347,7 @@ const PageEffect = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -385,7 +385,7 @@ const PageType= props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -443,7 +443,7 @@ const PageFillColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -484,7 +484,7 @@ const PageCustomFillColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>

14
apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
View File

@ -105,7 +105,7 @@ const PageStyleOptions = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -161,7 +161,7 @@ const PageCustomFillColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -228,7 +228,7 @@ const PageCustomBorderColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -268,7 +268,7 @@ const PageBorderColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -396,7 +396,7 @@ const PageStyle = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -445,7 +445,7 @@ const PageReorder = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -487,7 +487,7 @@ const PageAlign = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>

16
apps/presentationeditor/mobile/src/view/edit/EditText.jsx
View File

@ -260,7 +260,7 @@ const PageOrientationTextShape = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -370,7 +370,7 @@ const PageFonts = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -466,7 +466,7 @@ const PageFontColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -507,7 +507,7 @@ const PageCustomFontColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -541,7 +541,7 @@ const PageHighlightColor = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -590,7 +590,7 @@ const PageAdditionalFormatting = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -794,7 +794,7 @@ const PageBulletsAndNumbers = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>
@ -856,7 +856,7 @@ const PageLineSpacing = props => {
<Link sheetClose='#edit-sheet'>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}
</Link>
</NavRight>

2
apps/presentationeditor/mobile/src/view/edit/EditingPage.jsx
View File

@ -43,7 +43,7 @@ const EditLayoutNavbar = ({ editors }) => {
{Device.phone && <NavRight><Link sheetClose>
{Device.ios ?
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
}</Link></NavRight> }
</Navbar>
)

5
apps/spreadsheeteditor/mobile/src/less/icons-common.less
View File

@ -85,7 +85,10 @@
.icon-svg {
fill: @brand-cell;
&.icon_function {
fill: var(--text-normal)
fill: @text-normal;
}
&.white {
fill: @fill-white;;
}
}

2
apps/spreadsheeteditor/mobile/src/less/icons-ios.less
View File

@ -4,7 +4,7 @@
.tab-link-active {
.icon-svg {
fill: var(--brand-text-on-brand);
fill: @brand-text-on-brand;
}
i.icon {
&.icon-link {

3
apps/spreadsheeteditor/mobile/src/less/icons-material.less
View File

@ -20,5 +20,8 @@
//background: url('../../../../common/mobile/resources/img/header/logo-android.svg') no-repeat center;
}
}
.icon-svg {
fill: @toolbar-icons;
}
}
}

3
apps/spreadsheeteditor/mobile/src/less/statusbar.less
View File

@ -74,9 +74,6 @@
height: 18px;
vertical-align: middle;
}
.icon-list {
color: @brand-cell;
}
}
}

2
apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx
View File

@ -245,7 +245,7 @@ const StatusbarView = inject('storeAppOptions', 'storeWorksheets', 'users')(obse
<Link href={false} id="idx-btn-all-list-tab" className={`tab${isDisabledEditSheet || isDisconnected || isWorkbookLocked ? ' disabled' : ''}`} onClick={(e) => f7.popover.open('#idx-all-list', e.target)}>
{isAndroid ?
<SvgIcon symbolId={IconListBold.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconList.id} className={'icon-svg icon-list'} />}
<SvgIcon symbolId={IconList.id} className={'icon icon-svg'} />}
</Link>
</div>
}

10
apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx
View File

@ -102,7 +102,7 @@ const AddLink = props => {
isNavigate ? f7.views.current.router.back() : props.closeModal('#add-link-popup', '#add-link-popover');
}}>
{Device.android &&
<SvgIcon symbolId={IconClose.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconClose.id} className={'icon icon-svg close'} />
}
</Link>
</NavLeft>
@ -113,11 +113,11 @@ const AddLink = props => {
{type: 'ext', url: link, text: stateDisplayText} :
{type: 'int', url: range, sheet: curSheet.caption, text: stateDisplayText});
}} text={Device.ios ? t('View.Add.textDone') : ''}>
{Device.android &&
{Device.android && (
link.length < 1 ?
<SvgIcon symbolId={IconDoneDisabled.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconDone.id} className={'icon icon-svg'} />
}
<SvgIcon symbolId={IconDoneDisabled.id} className={'icon icon-svg inactive'} /> :
<SvgIcon symbolId={IconDone.id} className={'icon icon-svg active'} />
)}
</Link>
</NavRight>
</Navbar>

10
apps/spreadsheeteditor/mobile/src/view/edit/EditLink.jsx
View File

@ -121,7 +121,7 @@ const EditLink = props => {
props.isNavigate ? f7.views.current.router.back() : props.closeModal();
}}>
{Device.android &&
<SvgIcon symbolId={IconClose.id} className={'icon icon-svg'} />
<SvgIcon symbolId={IconClose.id} className={'icon icon-svg close'} />
}
</Link>
</NavLeft>
@ -132,11 +132,11 @@ const EditLink = props => {
{type: 1, url: link, text: stateDisplayText, tooltip: screenTip} :
{type: 2, url: range, sheet: curSheet, text: stateDisplayText, tooltip: screenTip});
}} text={Device.ios ? t('View.Edit.textDone') : ''}>
{Device.android &&
{Device.android && (
link.length < 1 ?
<SvgIcon symbolId={IconDoneDisabled.id} className={'icon icon-svg'} /> :
<SvgIcon symbolId={IconDone.id} className={'icon icon-svg'} />
}
<SvgIcon symbolId={IconDoneDisabled.id} className={'icon icon-svg inactive'} /> :
<SvgIcon symbolId={IconDone.id} className={'icon icon-svg active'} />
)}
</Link>
</NavRight>
</Navbar>

14
apps/spreadsheeteditor/mobile/src/view/settings/Download.jsx
View File

@ -20,25 +20,25 @@ const Download = props => {
<BlockTitle>{_t.textDownloadAs}</BlockTitle>
<List>
<ListItem title="XLSX" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.XLSX)}>
<SvgIcon symbolId={IconFormatXlsx.id} className={'icon icon-svg'} />
<SvgIcon slot="media" symbolId={IconFormatXlsx.id} className={'icon icon-svg'} />
</ListItem>
<ListItem title="PDF" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.PDF)}>
<SvgIcon symbolId={IconFormatPdf.id} className={'icon icon-svg'} />
<SvgIcon slot="media" symbolId={IconFormatPdf.id} className={'icon icon-svg'} />
</ListItem>
<ListItem title="PDF/A" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.PDFA)}>
<SvgIcon symbolId={IconFormatPdfa.id} className={'icon icon-svg'} />
<SvgIcon slot="media" symbolId={IconFormatPdfa.id} className={'icon icon-svg'} />
</ListItem>
<ListItem title="ODS" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.ODS)}>
<SvgIcon symbolId={IconFormatOds.id} className={'icon icon-svg'} />
<SvgIcon slot="media" symbolId={IconFormatOds.id} className={'icon icon-svg'} />
</ListItem>
<ListItem title="CSV" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.CSV)}>
<SvgIcon symbolId={IconFormatCsv.id} className={'icon icon-svg'} />
<SvgIcon slot="media" symbolId={IconFormatCsv.id} className={'icon icon-svg'} />
</ListItem>
<ListItem title="XLTX" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.XLTX)}>
<SvgIcon symbolId={IconFormatXltx.id} className={'icon icon-svg'} />
<SvgIcon slot="media" symbolId={IconFormatXltx.id} className={'icon icon-svg'} />
</ListItem>
<ListItem title="OTS" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.OTS)}>
<SvgIcon symbolId={IconFormatOts.id} className={'icon icon-svg'} />
<SvgIcon slot="media" symbolId={IconFormatOts.id} className={'icon icon-svg'} />
</ListItem>
</List>
</Page>