diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 273b3e04d..0f0f114d6 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -1,7 +1,4 @@ -@white: #ffffff; -@black: #000000; - .device-ios { @blockTitleColor: #6d6d72; @@ -14,6 +11,8 @@ --f7-list-bg-color: @white; --f7-navbar-bg-color: #f7f7f8; + --f7-tabbar-link-inactive-color: @themeColor; + --f7-radio-active-color: @themeColor; --f7-toggle-active-color: @themeColor; --f7-range-bar-active-bg-color: @themeColor; @@ -272,7 +271,7 @@ } } - .red .list-button { + .button-red .list-button { color: red; } diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index 7462e4a1e..468c575c3 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -1,5 +1,217 @@ .device-android { + @tabLinkColor: rgba(255,255,255,.7); + @red: #f44336; + --f7-navbar-shadow-image: none; + --f7-radio-active-color: @themeColor; + --f7-toggle-active-color: @themeColor; + --f7-range-bar-active-bg-color: @themeColor; + --f7-range-knob-color: @themeColor; + --f7-range-knob-size: 16px; + + --f7-link-highlight-color: transparent; + --f7-touch-ripple-color: rgba(255,255,255,0.1); + + --f7-input-focused-border-color: @themeColor; + --f7-label-focused-text-color: @themeColor; + + // Buttons + .segmented { + .decrement, .increment { + display: flex; + border: none; + min-width: 40px; + margin-left: 0; + border-radius: 0; + height: 32px; + } + label { + color: @black; + margin: 0 5px; + line-height: 32px; + } + } + .button { + --f7-button-text-color: @themeColor; + text-align: center; + display: block; + border-radius: 2px; + line-height: 36px; + box-sizing: border-box; + appearance: none; + background: 0 0; + margin: 0; + height: 36px; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 14px; + text-transform: uppercase; + font-family: inherit; + cursor: pointer; + min-width: 64px; + padding: 0 8px; + position: relative; + overflow: hidden; + outline: 0; + border: none; + -webkit-transition-duration: .3s; + transition-duration: .3s; + -webkit-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); + } + .button-fill .list-button { + background-color: @themeColor; + color: @white; + height: 36px; + text-align: center; + line-height: 36px; + text-transform: uppercase; + font-size: 14px; + font-weight: 500; + border-radius: 2px; + margin: 20px 16px; + } + .button-raised .list-button { + box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); + } + .button-red .list-button { + background-color: @red; + } + // Tabs + .tab-buttons { + position: relative; + display: flex; + height: 100%; + width: 100%; + justify-content: space-between; + .tab-link { + height: 100%; + box-sizing: border-box; + padding-left: 0; + padding-right: 0; + font-size: 14px; + font-weight: 500; + text-transform: uppercase; + align-items: center; + color: @tabLinkColor; + &.tab-link-active { + color: @white; + } + } + .tab-link-highlight { + --f7-tabbar-link-active-border-color: rgba(255,255,255,0.5); + position: absolute; + left: 0; + bottom: 0; + height: 3px; + } + } + // List + .list { + li.no-indicator { + .item-link { + .item-inner:before { + content: none; + } + } + } + .item-link { + .item-inner { + .item-after { + color: @black; + } + } + } + &.inputs-list { + .item-input { + .item-inner { + display: block; + .item-label { + width: 100%; + font-size: 12px; + } + .item-input-wrap { + margin-left: 0; + } + } + } + } + .buttons { + box-sizing: border-box; + min-height: 48px; + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + .item-content { + width: 100%; + .item-inner { + padding-bottom: 0; + padding-top: 0; + .row { + width: 100%; + .button { + flex: 1; + font-size: 17px; + margin-left: 5px; + &:first-child { + margin-left: 0; + } + &.active { + color: @white; + background-color: @themeColor; + i.icon { + background-color: @white; + } + } + } + } + } + } + } + } + // Bullets and numbers + .bullets, + .numbers { + .page-content { + background: @white; + } + + .row { + justify-content: space-around; + } + + ul { + margin-top: 10px; + } + + li { + width: 70px; + height: 70px; + margin-right: 1px; + border: 1px solid @gray; + html.pixel-ratio-2 & { + border: 0.5px solid @gray; + } + html.pixel-ratio-3 & { + border: 0.33px solid @gray; + } + + .thumb { + width: 100%; + height: 100%; + background-color: @white; + background-size: cover; + + label { + width: 100%; + text-align: center; + position: absolute; + top: 34%; + } + } + } + } .popover__titled { .list:last-child { li:last-child { diff --git a/apps/documenteditor/mobile/src/css/app-material.less b/apps/documenteditor/mobile/src/css/app-material.less index 879f3a67c..ccf990944 100644 --- a/apps/documenteditor/mobile/src/css/app-material.less +++ b/apps/documenteditor/mobile/src/css/app-material.less @@ -21,4 +21,8 @@ align-items: center; width: auto; } + + .toggle input[type="checkbox"]:checked + .toggle-icon { + background-color: rgba(68,105,149,.5); + } } \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/css/app.less b/apps/documenteditor/mobile/src/css/app.less index 24c5dc0fb..c4e702a26 100644 --- a/apps/documenteditor/mobile/src/css/app.less +++ b/apps/documenteditor/mobile/src/css/app.less @@ -1,4 +1,7 @@ @themeColor: #446995; +@white: #ffffff; +@black: #000000; +@gray: #c4c4c4; @import '../../../../common/mobile/resources/less/_mixins.less'; @import '../../../../common/mobile/resources/less/collaboration.less'; diff --git a/apps/documenteditor/mobile/src/css/icons-material.less b/apps/documenteditor/mobile/src/css/icons-material.less index 2d8480742..a526819bc 100644 --- a/apps/documenteditor/mobile/src/css/icons-material.less +++ b/apps/documenteditor/mobile/src/css/icons-material.less @@ -26,13 +26,23 @@ height: 24px; .encoded-svg-background(''); } + &.icon-expand-down { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } } } i.icon { &.icon-expand-down { - width: 22px; - height: 22px; - .encoded-svg-background(''); + width: 17px; + height: 17px; + .encoded-svg-background(''); + } + &.icon-expand-up { + width: 17px; + height: 17px; + .encoded-svg-background(''); } //Settings &.icon-search { diff --git a/apps/documenteditor/mobile/src/view/edit/Edit.jsx b/apps/documenteditor/mobile/src/view/edit/Edit.jsx index 5f67b981d..06e1e674e 100644 --- a/apps/documenteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/documenteditor/mobile/src/view/edit/Edit.jsx @@ -117,14 +117,16 @@ const EmptyEditLayout = () => { }; const EditLayoutNavbar = ({ editors, inPopover }) => { + const isAndroid = Device.android; const { t } = useTranslation(); const _t = t('Edit', {returnObjects: true}); return ( { editors.length > 1 ? -
+
{editors.map((item, index) => {item.caption})} + {isAndroid && }
: { editors[0].caption } } diff --git a/apps/documenteditor/mobile/src/view/edit/EditChart.jsx b/apps/documenteditor/mobile/src/view/edit/EditChart.jsx index 9413c84e6..87eeeb8ae 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditChart.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditChart.jsx @@ -2,6 +2,7 @@ import React, {Fragment, useState} from 'react'; import {observer, inject} from "mobx-react"; import {List, ListItem, ListButton, Icon, Row, Col, Button, Page, Navbar, Segmented, BlockTitle, Toggle, Range} from 'framework7-react'; import { useTranslation } from 'react-i18next'; +import {Device} from '../../../../../common/mobile/utils/device'; const PageStyle = props => { return ( @@ -12,6 +13,7 @@ const PageStyle = props => { }; const PageWrap = props => { + const isAndroid = Device.android; const { t } = useTranslation(); const _t = t('Edit', {returnObjects: true}); const storeChartSettings = props.storeChartSettings; @@ -28,25 +30,25 @@ const PageWrap = props => { {props.onWrapType('inline')}}> - + {!isAndroid && } {props.onWrapType('square')}}> - + {!isAndroid && } {props.onWrapType('tight')}}> - + {!isAndroid && } {props.onWrapType('through')}}> - + {!isAndroid && } {props.onWrapType('top-bottom')}}> - + {!isAndroid && } {props.onWrapType('infront')}}> - + {!isAndroid && } {props.onWrapType('behind')}}> - + {!isAndroid && } { @@ -147,7 +149,7 @@ const EditChart = props => { }}> - {props.onRemoveChart()}} className='red'/> + {props.onRemoveChart()}} className='button-red button-fill button-raised'/> ) diff --git a/apps/documenteditor/mobile/src/view/edit/EditHeader.jsx b/apps/documenteditor/mobile/src/view/edit/EditHeader.jsx index 93b125f6f..63769fb49 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditHeader.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditHeader.jsx @@ -1,9 +1,11 @@ import React, { Fragment, useState } from 'react'; import { observer, inject } from "mobx-react"; -import { List, ListItem, Segmented, Button, Toggle, BlockTitle } from 'framework7-react'; +import { List, ListItem, Segmented, Button, Toggle, BlockTitle, Icon } from 'framework7-react'; import { useTranslation } from 'react-i18next'; +import {Device} from "../../../../../common/mobile/utils/device"; const EditHeader = props => { + const isAndroid = Device.android; const { t } = useTranslation(); const _t = t('Edit', {returnObjects: true}); const headerObject = props.storeFocusObjects.headerObject; @@ -35,11 +37,16 @@ const EditHeader = props => { {props.onNumberingContinue(!(startPageNumber<0), _startAt)}}/> -
{_startAt}
+ {!isAndroid &&
{_startAt}
}
- - + + {isAndroid && } +
diff --git a/apps/documenteditor/mobile/src/view/edit/EditHyperlink.jsx b/apps/documenteditor/mobile/src/view/edit/EditHyperlink.jsx index 251e1dd09..b05207cc8 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditHyperlink.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditHyperlink.jsx @@ -15,7 +15,7 @@ const EditHyperlink = props => { const [stateTip, setTip] = useState(tip); return ( - + { > - { + { props.onEditLink(stateLink, stateDisplay, stateTip) }}> - {props.onRemoveLink()}} className='red'/> + {props.onRemoveLink()}} className='button-red button-fill button-raised'/> ) diff --git a/apps/documenteditor/mobile/src/view/edit/EditImage.jsx b/apps/documenteditor/mobile/src/view/edit/EditImage.jsx index ddc0abbfb..bcc3f97ce 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditImage.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditImage.jsx @@ -3,8 +3,10 @@ import {observer, inject} from "mobx-react"; import {List, ListItem, ListInput, ListButton, Icon, Row, Col, Button, Page, Navbar, Segmented, BlockTitle, Toggle, Range} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {f7} from 'framework7-react'; +import {Device} from '../../../../../common/mobile/utils/device'; const PageWrap = props => { + const isAndroid = Device.android; const { t } = useTranslation(); const _t = t('Edit', {returnObjects: true}); const storeImageSettings = props.storeImageSettings; @@ -21,25 +23,25 @@ const PageWrap = props => { {props.onWrapType('inline')}}> - + {!isAndroid && } {props.onWrapType('square')}}> - + {!isAndroid && } {props.onWrapType('tight')}}> - + {!isAndroid && } {props.onWrapType('through')}}> - + {!isAndroid && } {props.onWrapType('top-bottom')}}> - + {!isAndroid && } {props.onWrapType('infront')}}> - + {!isAndroid && } {props.onWrapType('behind')}}> - + {!isAndroid && } { @@ -132,7 +134,7 @@ const PageLinkSettings = props => { - {onReplace()}}> + {onReplace()}}> ) @@ -204,8 +206,8 @@ const EditImage = props => { }}> - {props.onDefaulSize()}}/> - {props.onRemoveImage()}} className='red'/> + {props.onDefaulSize()}}/> + {props.onRemoveImage()}}/> ) diff --git a/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx b/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx index 0fc14cda8..2bcc9ddbf 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx @@ -1,9 +1,11 @@ import React, {Fragment, useState} from 'react'; import {observer, inject} from "mobx-react"; -import {List, ListItem, Icon, Row, Col, Button, Page, Navbar, Segmented, BlockTitle, Toggle} from 'framework7-react'; +import {List, ListItem, Icon, Button, Page, Navbar, Segmented, BlockTitle, Toggle} from 'framework7-react'; import { useTranslation } from 'react-i18next'; +import {Device} from '../../../../../common/mobile/utils/device'; const PageAdvancedSettings = props => { + const isAndroid = Device.android; const { t } = useTranslation(); const metricText = Common.Utils.Metric.getCurrentMetricName(); const storeFocusObjects = props.storeFocusObjects; @@ -32,29 +34,44 @@ const PageAdvancedSettings = props => { {t('Edit.textDistanceFromText')} -
{displayBefore}
+ {!isAndroid &&
{displayBefore}
}
- - + + {isAndroid && } +
-
{displayAfter}
+ {!isAndroid &&
{displayAfter}
}
- - + + {isAndroid && } +
-
{firstLine + ' ' + metricText}
+ {!isAndroid &&
{firstLine + ' ' + metricText}
}
- - + + {isAndroid && } +
diff --git a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx index 58095486e..782943f81 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx @@ -2,6 +2,7 @@ import React, {Fragment, useState} from 'react'; import {observer, inject} from "mobx-react"; import {List, ListItem, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, ListButton} from 'framework7-react'; import { useTranslation } from 'react-i18next'; +import {Device} from '../../../../../common/mobile/utils/device'; const PageStyle = props => { return ( @@ -12,6 +13,7 @@ const PageStyle = props => { }; const PageWrap = props => { + const isAndroid = Device.android; const { t } = useTranslation(); const _t = t('Edit', {returnObjects: true}); const storeShapeSettings = props.storeShapeSettings; @@ -28,25 +30,25 @@ const PageWrap = props => { {props.onWrapType('inline')}}> - + {!isAndroid && } {props.onWrapType('square')}}> - + {!isAndroid && } {props.onWrapType('tight')}}> - + {!isAndroid && } {props.onWrapType('through')}}> - + {!isAndroid && } {props.onWrapType('top-bottom')}}> - + {!isAndroid && } {props.onWrapType('infront')}}> - + {!isAndroid && } {props.onWrapType('behind')}}> - + {!isAndroid && } { @@ -184,7 +186,7 @@ const EditShape = props => { }}> - {props.onRemoveShape()}} className='red'/> + {props.onRemoveShape()}} className='button-red button-fill button-raised'/> ) diff --git a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx index d169b8537..077a1b5ea 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx @@ -2,6 +2,7 @@ import React, {Fragment, useState} from 'react'; import {observer, inject} from "mobx-react"; import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react'; import { useTranslation } from 'react-i18next'; +import {Device} from '../../../../../common/mobile/utils/device'; const PageTableOptions = props => { const { t } = useTranslation(); @@ -53,6 +54,7 @@ const PageWrap = props => { TABLE_ALIGN_CENTER: 1, TABLE_ALIGN_RIGHT: 2 }; + const isAndroid = Device.android; const { t } = useTranslation(); const _t = t('Edit', {returnObjects: true}); const storeTableSettings = props.storeTableSettings; @@ -68,10 +70,10 @@ const PageWrap = props => { {props.onWrapType(c_tableWrap.TABLE_WRAP_NONE)}}> - + {!isAndroid && } {props.onWrapType(c_tableWrap.TABLE_WRAP_PARALLEL)}}> - + {!isAndroid && } @@ -173,7 +175,7 @@ const EditTable = props => { - {props.onRemoveTable()}} className='red'> + {props.onRemoveTable()}} className='button-red button-fill button-raised'> { + const isAndroid = Device.android; const { t } = useTranslation(); const storeTextSettings = props.storeTextSettings; const size = storeTextSettings.fontSize; @@ -29,11 +31,16 @@ const PageFonts = props => { -
{displaySize}
+ {!isAndroid &&
{displaySize}
}
- - + + {isAndroid && } +
@@ -61,6 +68,7 @@ const PageFonts = props => { }; const PageAdditionalFormatting = props => { + const isAndroid = Device.android; const { t } = useTranslation(); const storeTextSettings = props.storeTextSettings; const storeFocusObjects = props.storeFocusObjects; @@ -85,11 +93,16 @@ const PageAdditionalFormatting = props => { -
{letterSpacing + ' ' + Common.Utils.Metric.getCurrentMetricName()}
+ {!isAndroid &&
{letterSpacing + ' ' + Common.Utils.Metric.getCurrentMetricName()}
}
- - + + {isAndroid && } +
@@ -196,6 +209,7 @@ const PageLineSpacing = props => { }; const EditText = props => { + const isAndroid = Device.android; const { t } = useTranslation(); const storeTextSettings = props.storeTextSettings; const fontName = storeTextSettings.fontName || t('Edit.textFonts'); @@ -222,11 +236,11 @@ const EditText = props => { - + {!isAndroid && } - + {!isAndroid && } { onAdditionalScript: props.onAdditionalScript, changeLetterSpacing: props.changeLetterSpacing }}> - + {!isAndroid && } @@ -267,17 +281,17 @@ const EditText = props => { - + {!isAndroid && } - + {!isAndroid && } - + {!isAndroid && } diff --git a/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx b/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx index ccde9ce09..b003e8b20 100644 --- a/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx +++ b/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx @@ -1,7 +1,8 @@ import React, {useState} from 'react'; import {observer, inject} from "mobx-react"; -import {Page, Navbar, List, ListItem, BlockTitle, Segmented, Button} from 'framework7-react'; +import {Page, Navbar, List, ListItem, BlockTitle, Segmented, Button, Icon} from 'framework7-react'; import { useTranslation } from 'react-i18next'; +import {Device} from '../../../../../common/mobile/utils/device'; const PageDocumentFormats = props => { const { t } = useTranslation(); @@ -28,6 +29,7 @@ const PageDocumentFormats = props => { }; const PageDocumentMargins = props => { + const isAndroid = Device.android; const { t } = useTranslation(); const _t = t('Settings', {returnObjects: true}); const metricText = Common.Utils.Metric.getMetricName(Common.Utils.Metric.getCurrentMetric()); @@ -64,38 +66,58 @@ const PageDocumentMargins = props => { -
{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateTop).toFixed(2)) + ' ' + metricText}
+ {!isAndroid &&
{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateTop).toFixed(2)) + ' ' + metricText}
}
- - + + {isAndroid && } +
-
{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateBottom).toFixed(2))+ ' ' + metricText}
+ {!isAndroid &&
{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateBottom).toFixed(2))+ ' ' + metricText}
}
- - + + {isAndroid && } +
-
{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateLeft).toFixed(2))+ ' ' + metricText}
+ {!isAndroid &&
{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateLeft).toFixed(2))+ ' ' + metricText}
}
- - + + {isAndroid && } +
-
{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateRight).toFixed(2))+ ' ' + metricText}
+ {!isAndroid &&
{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateRight).toFixed(2))+ ' ' + metricText}
}
- - + + {isAndroid && } +