Merge pull request #1724 from ONLYOFFICE/feature/rtl-support

Feature/rtl support
This commit is contained in:
maxkadushkin 2022-05-24 10:56:34 +03:00 committed by GitHub
commit 3225ab3d0a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
45 changed files with 874 additions and 173 deletions

View file

@ -3,11 +3,11 @@
.about {
.page-content {
text-align: center;
text-align: center /*rtl:ignore*/;
}
.content-block:first-child {
margin: 15px 0;
margin: 15px 0 /*rtl:append20px*/;
}
.content-block {

View file

@ -118,13 +118,13 @@
}
}
.list:first-child {
li:first-child {
a {
border-radius: 0;
}
}
}
// .list:first-child {
// li:first-child {
// a {
// border-radius: 0;
// }
// }
// }
.list:last-child {
li:last-child {

View file

@ -103,10 +103,10 @@
}
.add-popup {
.view{
.block-title{
margin-bottom: 0;
margin-top: 8px;
.view {
.block-title {
// margin-bottom: 0;
// margin-top: 8px;
}
.add-image, .inputs-list {
ul:after {
@ -116,7 +116,7 @@
}
}
.coauth__sheet{
.coauth__sheet {
max-height: 65%;
}

View file

@ -0,0 +1,220 @@
[dir="rtl"].device-android {
.app-layout {
.searchbar input {
padding-right: 24px;
padding-left: 36px;
background-position: right;
}
}
.wrap-comment, .comment-list{
.comment-header .initials {
margin-right: 0;
margin-left: 10px;
}
}
.actions-modal {
.actions-button-text {
text-align: right;
}
}
.navigation-sheet {
&__title {
padding-left: 0;
padding-right: 16px;
}
}
}
[dir="rtl"].device-ios .app-layout{
.subnavbar,.navbar .left a + a {
margin-right: 0;
}
.subnavbar,.navbar .right a + a {
margin-right: 0;
}
.tab-buttons {
.tab-link:first-child {
border-radius: 0px 5px 5px 0px;
}
.tab-link:last-child {
border-radius: 5px 0px 0px 5px;
}
}
.popover {
li:last-child, li:first-child {
.segmented a:first-child {
border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0;
}
.segmented a:last-child {
border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius);
}
}
}
.list {
.item-inner {
.item-after .segmented {
margin-left: 0px;
margin-right: 10px;
}
}
}
.searchbar-inner__right .buttons-row a.next {
margin-left: 0;
margin-right: 15px;
}
.searchbar-inner__left {
margin-right: 0;
margin-left: 10px;
}
.navbar .searchbar-input-wrap {
margin-left: 10px;
margin-right: 0;
}
.comment-list .item-content .item-inner .comment-header {
padding-left: 16px;
}
}
[dir="rtl"] {
.comment-list .item-content .item-inner{
padding-left: 0;
.comment-header {
.right {
justify-content: space-between;
.comment-resolve {
margin-right: 0px;
margin-left: 10px;
}
}
.name {
text-align: right;
}
}
}
.comment-quote {
border-right: 1px solid var(--text-secondary);
border-left: 0;
padding-left: 16px;
padding-right: 10px;
}
.comment-text, .reply-text {
padding-right: 0;
padding-left: 15px;
}
// .comment-list .item-content .item-inner .comment-header {
// padding-left: 16px;
// }
#add-comment-dialog .dialog .dialog-inner .wrap-comment .name, #edit-comment-dialog .dialog .dialog-inner .wrap-comment .name, #add-reply-dialog .dialog .dialog-inner .wrap-comment .name, #edit-reply-dialog .dialog .dialog-inner .wrap-comment .name, #add-comment-dialog .dialog .dialog-inner .wrap-comment .comment-date, #edit-comment-dialog .dialog .dialog-inner .wrap-comment .comment-date, #add-reply-dialog .dialog .dialog-inner .wrap-comment .comment-date, #edit-reply-dialog .dialog .dialog-inner .wrap-comment .comment-date, #add-comment-dialog .dialog .dialog-inner .wrap-comment .reply-date, #edit-comment-dialog .dialog .dialog-inner .wrap-comment .reply-date, #add-reply-dialog .dialog .dialog-inner .wrap-comment .reply-date, #edit-reply-dialog .dialog .dialog-inner .wrap-comment .reply-date {
text-align: right;
}
#view-comment-popover .page .page-content {
padding: 16px 0 60px 16px;
}
.wrap-comment {
padding: 16px 16px 0 24px;
}
.shapes {
.thumb {
transform: scaleX(-1);
}
}
.settings-popup,
#settings-popover{
.link {
display: inline;
}
}
#edit-table-style {
ul {
padding-right: 0;
}
}
.color-schemes-menu {
.item-title{
margin-right: 20px;
}
}
.list [slot="root-start"] {
padding: 15px 15px 0 0px;
}
.numbers, .bullets, .multilevels {
.item-content {
padding-right: 0;
}
}
.dataview .active::after {
left: -5px;
right: unset;
}
.popup .list .range-number, .popover .list .range-number, .sheet-modal .list .range-number {
text-align: left;
}
.popup .list .inner-range-title, .popover .list .inner-range-title, .sheet-modal .list .inner-range-title {
padding-left: 0;
padding-right: 15px;
}
#color-picker .right-block {
margin-left: 0px;
margin-right: 20px;
}
.page-review .toolbar #btn-reject-change {
margin-left: 0;
margin-right: 20px;
}
.list li.no-indicator .item-link .item-inner {
padding-right: 0;
}
}
@media (max-width: 550px) {
.device-ios[dir=rtl] .app-layout {
.searchbar-expandable.searchbar-enabled .searchbar-inner__right {
margin-right: 10px;
margin-left: 0;
}
.navbar .searchbar-input-wrap {
margin-left: 0;
}
}
.device-android[dir=rtl] .app-layout {
.searchbar-expandable.searchbar-enabled .searchbar-inner__left {
margin-right: 0;
margin-left: 33px;
}
}
}

View file

@ -72,8 +72,10 @@
padding: 15px 0 0 15px;
}
[slot="inner-end"] {
.range-number {
color: @text-normal;
min-width: 60px;
text-align: right;
}
}
.page-content {
@ -186,6 +188,7 @@
.row.list .item-content {
padding-left: 0;
padding-right: 0;
min-height: 68px;
.item-inner{
padding: 0;
@ -197,7 +200,7 @@
}
.popover {
.page {
.page .list {
ul {
background-color: var(--f7-list-bg-color);
li:first-child, li:last-child {

View file

@ -0,0 +1,204 @@
.device-ios[dir=rtl] {
.app-layout {
.subnavbar,.navbar .left a + a {
margin-right: 0;
}
.subnavbar,.navbar .right a + a {
margin-right: 0;
}
.tab-buttons {
.tab-link:last-child {
border-radius: 5px 0 0 5px;
}
.tab-link:first-child {
border-radius: 0 5px 5px 0;
}
}
.popover {
li:last-child, li:first-child {
.segmented a:first-child {
border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0;
}
.segmented a:last-child {
border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius);
}
}
}
.list .item-inner .item-after .segmented {
margin-right: 10px;
margin-left: 0;
}
#editor-navbar.navbar .right a + a, #editor-navbar.navbar .left a + a {
margin-right: 0;
}
.searchbar-inner__right .buttons-row a.next {
margin-left: 0;
margin-right: 15px;
}
.searchbar-inner__left {
margin-right: 0;
margin-left: 10px;
}
.navbar .searchbar-input-wrap {
margin-left: 10px;
margin-right: 0;
}
}
.comment-list .item-content .item-inner .comment-header {
padding-left: 16px;
}
}
.device-android[dir=rtl] {
.app-layout {
.searchbar input {
padding-right: 24px;
padding-left: 36px;
background-position: right;
}
}
.wrap-comment, .comment-list{
.comment-header .initials {
margin-right: 0;
margin-left: 10px;
}
}
.actions-modal {
.actions-button-text {
text-align: right;
}
}
.comment-list .item-content .item-inner .comment-header {
padding-left: 0;
}
.navigation-sheet {
&__title {
padding-left: 0;
padding-right: 16px;
}
}
}
[dir=rtl] {
.color-schemes-menu .item-title {
margin-right: 20px;
}
.popup .list .range-number, .popover .list .range-number, .sheet-modal .list .range-number {
text-align: left;
}
.popup .list .inner-range-title, .popover .list .inner-range-title, .sheet-modal .list .inner-range-title {
padding-left: 0;
padding-right: 15px;
}
#color-picker .right-block {
margin-right: 20px;
}
.page-review .toolbar #btn-reject-change {
margin-left: 0;
margin-right: 20px;
}
.list li.no-indicator .item-link .item-inner {
padding-right: 0;
padding-left: 15px;
}
.numbers, .bullets, .multilevels {
.item-content {
padding-right: 0;
}
}
.settings-popup, #settings-popover{
.link {
display: inline;
}
}
.comment-list {
.item-content .item-inner {
padding-left: 0;
.comment-header {
padding-right: 0;
.right {
justify-content: space-between;
.comment-resolve {
margin-right: 0px;
margin-left: 10px;
}
}
.name {
text-align: right;
}
}
}
.comment-quote {
border-right: 1px solid var(--text-secondary);
border-left: 0;
padding-left: 16px;
padding-right: 10px;
}
.comment-text, .reply-text {
padding-right: 0;
padding-left: 15px;
}
}
#add-comment-dialog .dialog .dialog-inner .wrap-comment .name, #edit-comment-dialog .dialog .dialog-inner .wrap-comment .name, #add-reply-dialog .dialog .dialog-inner .wrap-comment .name, #edit-reply-dialog .dialog .dialog-inner .wrap-comment .name, #add-comment-dialog .dialog .dialog-inner .wrap-comment .comment-date, #edit-comment-dialog .dialog .dialog-inner .wrap-comment .comment-date, #add-reply-dialog .dialog .dialog-inner .wrap-comment .comment-date, #edit-reply-dialog .dialog .dialog-inner .wrap-comment .comment-date, #add-comment-dialog .dialog .dialog-inner .wrap-comment .reply-date, #edit-comment-dialog .dialog .dialog-inner .wrap-comment .reply-date, #add-reply-dialog .dialog .dialog-inner .wrap-comment .reply-date, #edit-reply-dialog .dialog .dialog-inner .wrap-comment .reply-date {
text-align: right;
}
#view-comment-popover .page .page-content {
padding: 16px 0 60px 16px;
}
.wrap-comment {
padding: 16px 16px 0 24px;
}
.inline-labels .item-label + .item-input-wrap, .inline-label .item-label + .item-input-wrap, .inline-labels .item-floating-label + .item-input-wrap, .inline-label .item-floating-label + .item-input-wrap {
margin-right: 0;
}
}
@media (max-width: 550px) {
.device-ios[dir=rtl] {
.app-layout {
.searchbar-expandable.searchbar-enabled .searchbar-inner__right {
margin-right: 10px;
margin-left: 0;
}
.navbar .searchbar-input-wrap {
margin-left: 0;
}
}
}
.device-android[dir=rtl] {
.app-layout {
.searchbar-expandable.searchbar-enabled .searchbar-inner__left {
margin-right: 0;
margin-left: 33px;
}
}
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -597,6 +597,10 @@
"textLoading": "Loading...",
"textLocation": "Location",
"textMacrosSettings": "Macros Settings",
"textDirection": "Direction",
"textLeftToRight": "Left To Right",
"textRightToLeft": "Right To Left",
"textRestartApplication": "Please restart the application for the changes to take effect",
"textMargins": "Margins",
"textMarginsH": "Top and bottom margins are too high for a given page height",
"textMarginsW": "Left and right margins are too wide for a given page width",

View file

@ -15,19 +15,27 @@ window.jQuery = jQuery;
window.$ = jQuery;
// Import Framework7 Styles
import 'framework7/framework7-bundle.css';
const htmlElem = document.querySelector('html');
const direction = LocalStorage.getItem('mode-direction');
direction === 'rtl' ? htmlElem.setAttribute('dir', 'rtl') : htmlElem.setAttribute('dir', 'ltr');
import(`framework7/framework7-bundle${direction === 'rtl' ? '-rtl' : ''}.css`);
// Import Icons and App Custom Styles
// import '../css/icons.css';
import './less/app.less';
import('./less/app.less');
// Import App Component
import App from './view/app';
import { I18nextProvider } from 'react-i18next';
import i18n from './lib/i18n';
import { Provider } from 'mobx-react'
import { stores } from './store/mainStore'
import { LocalStorage } from '../../../common/mobile/utils/LocalStorage';
// Init F7 React Plugin
Framework7.use(Framework7React)

View file

@ -63,6 +63,10 @@ class ApplicationSettingsController extends Component {
LocalStorage.setItem("de-mobile-macros-mode", value);
}
changeDirection(value) {
LocalStorage.setItem('mode-direction', value);
}
render() {
return (
<ApplicationSettings
@ -73,6 +77,7 @@ class ApplicationSettingsController extends Component {
switchDisplayComments={this.switchDisplayComments}
switchDisplayResolved={this.switchDisplayResolved}
setMacrosSettings={this.setMacrosSettings}
changeDirection={this.changeDirection}
/>
)
}

View file

@ -20,7 +20,6 @@
<% } else { %>
<style><%= htmlWebpackPlugin.options.skeleton.stylesheet %></style>
<% } %>
<!-- built styles file will be auto injected -->
</head>
<body>

View file

@ -2,6 +2,7 @@
@import '../../../../common/mobile/resources/less/_mixins.less';
@import '../../../../common/mobile/resources/less/colors-table.less';
@import '../../../../common/mobile/resources/less/colors-table-dark.less';
@import './app.rtl.less';
@brandColor: var(--brand-word);

View file

@ -0,0 +1,2 @@
@import '../../../../common/mobile/resources/less/common.rtl.less';
@import '../../../../common/mobile/resources/less/icons.rtl.less';

View file

@ -19,6 +19,8 @@ export class storeApplicationSettings {
changeDisplayComments: action,
changeDisplayResolved: action,
changeMacrosSettings: action,
directionMode: observable,
changeDirectionMode: action,
changeMacrosRequest: action
})
}
@ -30,6 +32,13 @@ export class storeApplicationSettings {
isComments = false;
isResolvedComments = false;
macrosMode = 0;
directionMode = LocalStorage.getItem('mode-direction') || 'ltr';
changeDirectionMode(value) {
this.directionMode = value;
}
macrosRequest = 0;
changeUnitMeasurement(value) {

View file

@ -275,7 +275,7 @@ const PageChartBorder = props => {
onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
></Range>
</div>
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
<div className='range-number' slot='inner-end'>
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
</div>
</ListItem>
@ -435,7 +435,7 @@ const PageWrap = props => {
onRangeChanged={(value) => {props.onWrapDistance(value)}}
></Range>
</div>
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
<div className='range-number' slot='inner-end'>
{stateDistance + ' ' + metricText}
</div>
</ListItem>

View file

@ -205,7 +205,7 @@ const PageStyle = props => {
onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
></Range>
</div>
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
<div className='range-number' slot='inner-end'>
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
</div>
</ListItem>
@ -229,7 +229,7 @@ const PageStyle = props => {
onRangeChanged={(value) => {props.onOpacity(value)}}
></Range>
</div>
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
<div className='range-number' slot='inner-end'>
{stateOpacity + ' %'}
</div>
</ListItem>

View file

@ -55,7 +55,7 @@ const PageTableOptions = props => {
onRangeChanged={(value) => {props.onCellMargins(value)}}
></Range>
</div>
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
<div className='range-number' slot='inner-end'>
{stateDistance + ' ' + metricText}
</div>
</ListItem>
@ -160,7 +160,7 @@ const PageWrap = props => {
onRangeChanged={(value) => {props.onWrapDistance(value)}}
></Range>
</div>
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
<div className='range-number' slot='inner-end'>
{stateDistance + ' ' + metricText}
</div>
</ListItem>
@ -434,7 +434,7 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
onRangeChanged={(value) => {storeTableSettings.updateCellBorderWidth(borderSizeTransform.sizeByIndex(value));}}
></Range>
</div>
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
<div className='range-number' slot='inner-end'>
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
</div>
</ListItem>

View file

@ -236,24 +236,29 @@ const PageNumbers = observer( props => {
props.getIconsBulletsAndNumbers($$('.item-number'), 1);
}, []);
return(
return (
<View className='numbers dataview'>
<List className="row" style={{listStyle: 'none'}}>
{numberArrays.map(number => (
<ListItem key={'number-' + number.subtype} data-type={number.subtype} className={(number.subtype === typeNumbers) &&
(storeTextSettings.listType === 1 || storeTextSettings.listType === -1) ? 'active' : ''}
onClick={() => {
storeTextSettings.resetNumbers(number.subtype);
props.onNumber(number.subtype);
}}>
<div id={`id-numbers-${number.subtype}`} className='item-number'>
</div>
</ListItem>
))}
</List>
{numberArrays.map((numbers, index) => (
<List className="row" style={{listStyle: 'none'}} key={'numbers-' + index}>
{numbers.map((number) => (
<ListItem key={'number-' + number.type} data-type={number.type} className={(number.type === typeNumbers) &&
(storeTextSettings.listType === 1 || storeTextSettings.listType === -1) ? 'active' : ''}
onClick={() => {
storeTextSettings.resetNumbers(number.type);
props.onNumber(number.type);
}}>
{number.thumb.length < 1 ?
<Icon className="thumb" style={{position: 'relative'}}>
<label>{t('Edit.textNone')}</label>
</Icon> :
<Icon className="thumb" icon={`icon-numbers-${number.type}`} />
}
</ListItem>
))}
</List>
))}
</View>
)
);
});
const PageMultiLevel = observer( props => {

View file

@ -1,6 +1,6 @@
import React, {Fragment, useState} from "react";
import { observer, inject } from "mobx-react";
import { Page, Navbar, List, ListItem, BlockTitle, Toggle } from "framework7-react";
import { Page, Navbar, List, ListItem, BlockTitle, Toggle, f7 } from "framework7-react";
import { useTranslation } from "react-i18next";
import { Themes } from '../../../../../common/mobile/lib/controller/Themes.js';
@ -99,6 +99,10 @@ const PageApplicationSettings = props => {
</ListItem>
</List>
<List mediaList>
<ListItem title={t('Settings.textDirection')} link="/direction/" routeProps={{changeDirection: props.changeDirection}}></ListItem>
</List>
{_isShowMacros &&
<List mediaList>
<ListItem title={_t.textMacrosSettings} link="/macros-settings/" routeProps={{
@ -110,6 +114,38 @@ const PageApplicationSettings = props => {
);
};
const PageDirection = props => {
const { t } = useTranslation();
const _t = t("Settings", { returnObjects: true });
const store = props.storeApplicationSettings;
const directionMode = store.directionMode;
const changeDirection = value => {
store.changeDirectionMode(value);
props.changeDirection(value);
f7.dialog.create({
title: _t.notcriticalErrorTitle,
text: t('Settings.textRestartApplication'),
buttons: [
{
text: _t.textOk
}
]
}).open();
};
return (
<Page>
<Navbar title={t('Settings.textDirection')} backLink={_t.textBack} />
<List mediaList>
<ListItem radio name="direction" title={t('Settings.textLeftToRight')} checked={directionMode === 'ltr'} onChange={() => changeDirection('ltr')}></ListItem>
<ListItem radio name="direction" title={t('Settings.textRightToLeft')} checked={directionMode === 'rtl'} onChange={() => changeDirection('rtl')}></ListItem>
</List>
</Page>
);
}
const PageMacrosSettings = props => {
const { t } = useTranslation();
const _t = t("Settings", { returnObjects: true });
@ -138,5 +174,6 @@ const PageMacrosSettings = props => {
const ApplicationSettings = inject("storeApplicationSettings", "storeAppOptions", "storeReview")(observer(PageApplicationSettings));
const MacrosSettings = inject("storeApplicationSettings")(observer(PageMacrosSettings));
const Direction = inject("storeApplicationSettings")(observer(PageDirection));
export {ApplicationSettings, MacrosSettings};
export {ApplicationSettings, MacrosSettings, Direction};

View file

@ -10,7 +10,7 @@ import DocumentInfoController from "../../controller/settings/DocumentInfo";
import { DownloadController } from "../../controller/settings/Download";
import ApplicationSettingsController from "../../controller/settings/ApplicationSettings";
import { DocumentFormats, DocumentMargins, DocumentColorSchemes } from "./DocumentSettings";
import { MacrosSettings } from "./ApplicationSettings";
import { MacrosSettings, Direction } from "./ApplicationSettings";
import About from '../../../../../common/mobile/lib/view/About';
import NavigationController from '../../controller/settings/Navigation';
@ -61,6 +61,13 @@ const routes = [
{
path: '/navigation/',
component: NavigationController
},
// Direction
{
path: '/direction/',
component: Direction
}
];

View file

@ -474,7 +474,11 @@
"txtScheme6": "Concourse",
"txtScheme7": "Equity",
"txtScheme8": "Flow",
"txtScheme9": "Foundry"
"txtScheme9": "Foundry",
"textOk": "Ok",
"textRTL": "RTL",
"textRestartApplication": "Please restart the application for the changes to take effect",
"notcriticalErrorTitle": "Warning"
}
}
}

View file

@ -14,11 +14,14 @@ import jQuery from 'jquery';
window.jQuery = jQuery;
window.$ = jQuery;
// Import Framework7 Styles
import 'framework7/framework7-bundle.css';
// Import Framework7 or Framework7-RTL Styles
let direction = LocalStorage.getItem('mode-direction');
direction === 'rtl' ? $$('html').attr('dir', 'rtl') : $$('html').removeAttr('dir')
import(`framework7/framework7-bundle${direction === 'rtl' ? '-rtl' : ''}.css`)
// Import App Custom Styles
import './less/app.less';
import('./less/app.less');
// Import App Component
import App from './page/app';
@ -27,6 +30,7 @@ import i18n from './lib/i18n.js';
import { Provider } from 'mobx-react'
import { stores } from './store/mainStore'
import { LocalStorage } from '../../../common/mobile/utils/LocalStorage';
// Init F7 React Plugin
Framework7.use(Framework7React)

View file

@ -0,0 +1,19 @@
@import '../../../../common/mobile/resources/less/common-rtl.less';
@import '../../../../common/mobile/\/resources/less/icons.rtl.less';
[dir="rtl"] {
.slide-theme .item-theme.active:before {
left: -5px;
right: unset;
}
.slide-layout {
.item-inner:before {
left: 11px;
right: unset;
}
.row img {
transform: scaleX(-1);
}
}
}

View file

@ -2,6 +2,7 @@
@import '../../../../common/mobile/resources/less/_mixins.less';
@import '../../../../common/mobile/resources/less/colors-table.less';
@import '../../../../common/mobile/resources/less/colors-table-dark.less';
@import './app-rtl.less';
@brandColor: var(--brand-slide);

View file

@ -285,7 +285,7 @@ const PageChartBorder = props => {
onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
></Range>
</div>
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
<div className='range-number' slot='inner-end'>
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
</div>
</ListItem>

View file

@ -162,7 +162,7 @@ const PageStyle = props => {
onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
></Range>
</div>
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
<div className='range-number' slot='inner-end'>
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
</div>
</ListItem>
@ -186,7 +186,7 @@ const PageStyle = props => {
onRangeChanged={(value) => {props.onOpacity(value)}}
></Range>
</div>
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
<div className='range-number' slot='inner-end'>
{stateOpacity + ' %'}
</div>
</ListItem>
@ -281,7 +281,7 @@ const PageStyleNoFill = props => {
onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
></Range>
</div>
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
<div className='range-number' slot='inner-end'>
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
</div>
</ListItem>

View file

@ -297,7 +297,7 @@ const PageTransition = props => {
onRangeChanged={(value) => {props.onDelay(value)}}
></Range>
</div>
<div slot='inner-end' style={{minWidth: '75px', textAlign: 'right'}}>
<div className='range-number' slot='inner-end'>
{stateRange + ' ' + _t.textSec}
</div>
</ListItem>

View file

@ -280,7 +280,7 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
onRangeChanged={(value) => {storeTableSettings.updateCellBorderWidth(borderSizeTransform.sizeByIndex(value));}}
></Range>
</div>
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
<div className='range-number' slot='inner-end'>
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
</div>
</ListItem>
@ -539,7 +539,7 @@ const EditTable = props => {
onRangeChanged={(value) => {props.onOptionMargin(value)}}
></Range>
</div>
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
<div className='range-number' slot='inner-end'>
{stateDistance + ' ' + metricText}
</div>
</ListItem>

View file

@ -564,22 +564,27 @@ const PageNumbers = observer(props => {
return (
<View className='numbers dataview'>
<List className="row" style={{listStyle: 'none'}}>
{numberArrays.map( number => (
<ListItem key={'number-' + number.subtype} data-type={number.subtype} className={(number.subtype === typeNumbers) &&
(storeTextSettings.listType === 1 || storeTextSettings.listType === -1) ? 'active' : ''}
onClick={() => {
storeTextSettings.resetNumbers(number.subtype);
props.onNumber(number.subtype);
}}>
<div id={number.id} className='item-number'>
</div>
</ListItem>
))}
</List>
{numberArrays.map((numbers, index) => (
<List className="row" style={{listStyle: 'none'}} key={'numbers-' + index}>
{numbers.map((number) => (
<ListItem key={'number-' + number.type} data-type={number.type} className={(number.type === typeNumbers) &&
(storeTextSettings.listType === 1 || storeTextSettings.listType === -1) ? 'active' : ''}
onClick={() => {
storeTextSettings.resetNumbers(number.type);
props.onNumber(number.type);
}}>
{number.thumb.length < 1 ?
<Icon className="thumb" style={{position: 'relative'}}>
<label>{_t.textNone}</label>
</Icon> :
<Icon className="thumb" icon={`icon-numbers-${number.type}`} />
}
</ListItem>
))}
</List>
))}
</View>
)
);
});
const PageBulletsAndNumbers = props => {

View file

@ -1,8 +1,9 @@
import React, {Fragment, useState} from "react";
import { observer, inject } from "mobx-react";
import { Page, Navbar, List, ListItem, BlockTitle, Toggle } from "framework7-react";
import {f7, Page, Navbar, List, ListItem, BlockTitle, Toggle } from "framework7-react";
import { useTranslation } from "react-i18next";
import { Themes } from '../../../../../common/mobile/lib/controller/Themes.js';
import { LocalStorage } from "../../../../../common/mobile/utils/LocalStorage.js";
const PageApplicationSettings = props => {
const { t } = useTranslation();
@ -51,6 +52,7 @@ const PageApplicationSettings = props => {
</Toggle>
</ListItem>
</List>
<RTLSetting />
</Fragment>
}
{/* {_isShowMacros && */}
@ -64,6 +66,38 @@ const PageApplicationSettings = props => {
);
};
const RTLSetting = () => {
const { t } = useTranslation();
const _t = t("View.Settings", { returnObjects: true });
let direction = LocalStorage.getItem('mode-direction');
const [isRTLMode, setRTLMode] = useState(direction === 'rtl' ? true : false);
const switchRTLMode = rtl => {
LocalStorage.setItem("mode-direction", rtl ? 'rtl' : 'ltr');
f7.dialog.create({
title: t('View.Settings.notcriticalErrorTitle'),
text: t('View.Settings.textRestartApplication'),
buttons: [
{
text: t('View.Settings.textOk')
}
]
}).open();
}
return (
<List>
<ListItem title={t('View.Settings.textRTL')}>
<Toggle checked={isRTLMode}
onToggleChange={toggle => {switchRTLMode(!toggle), setRTLMode(!toggle)}}>
</Toggle>
</ListItem>
</List>
)
}
const PageMacrosSettings = props => {
const { t } = useTranslation();
const _t = t("View.Settings", { returnObjects: true });

View file

@ -682,7 +682,11 @@
"txtSemicolon": "Semicolon",
"txtSpace": "Space",
"txtTab": "Tab",
"warnDownloadAs": "If you continue saving in this format all features except the text will be lost.<br>Are you sure you want to continue?"
"warnDownloadAs": "If you continue saving in this format all features except the text will be lost.<br>Are you sure you want to continue?",
"textLeftToRight": "Left To Right",
"textRightToLeft": "Right To Left",
"textDirection": "Direction",
"textRestartApplication": "Please restart the application for the changes to take effect"
}
}
}

View file

@ -15,10 +15,17 @@ window.jQuery = jQuery;
window.$ = jQuery;
// Import Framework7 Styles
import 'framework7/framework7-bundle.css';
const htmlElem = document.querySelector('html');
const direction = LocalStorage.getItem('mode-direction');
direction === 'rtl' ? htmlElem.setAttribute('dir', 'rtl') : htmlElem.setAttribute('dir', 'ltr');
import(`framework7/framework7-bundle${direction === 'rtl' ? '-rtl' : ''}.css`);
// Import App Custom Styles
import './less/app.less';
import('./less/app.less');
import '../../../../../sdkjs/cell/css/main-mobile.css'
// Import App Component
@ -28,6 +35,7 @@ import i18n from './lib/i18n.js';
import { Provider } from 'mobx-react';
import { stores } from './store/mainStore';
import { LocalStorage } from '../../../common/mobile/utils/LocalStorage';
// Init F7 React Plugin
Framework7.use(Framework7React);

View file

@ -88,6 +88,10 @@ class ApplicationSettingsController extends Component {
Common.Notifications.trigger('changeRegSettings');
}
changeDirection(value) {
LocalStorage.setItem('mode-direction', value);
}
render() {
return (
<ApplicationSettings
@ -100,6 +104,7 @@ class ApplicationSettingsController extends Component {
onChangeMacrosSettings={this.onChangeMacrosSettings}
onFormulaLangChange={this.onFormulaLangChange}
onRegSettings={this.onRegSettings}
changeDirection={this.changeDirection}
/>
)
}

View file

@ -3,6 +3,7 @@
@import '../../../../common/mobile/resources/less/_mixins.less';
@import '../../../../common/mobile/resources/less/colors-table.less';
@import '../../../../common/mobile/resources/less/colors-table-dark.less';
@import './app.rtl.less';
// @themeColor: #40865c;
@brandColor: var(--brand-cell);

View file

@ -0,0 +1,2 @@
@import '../../../../common/mobile/resources/less/common.rtl.less';
@import '../../../../common/mobile/resources/less/icons.rtl.less';

View file

@ -78,9 +78,9 @@
}
}
// Formats
i.icon {
// Formats
&.icon-format-xlsx {
width: 22px;
height: 22px;
@ -106,4 +106,37 @@ i.icon {
height: 22px;
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 1C2.34315 1 1 2.34315 1 4V20C1 21.6569 2.34315 23 4 23H20C21.6569 23 23 21.6569 23 20V4C23 2.34315 21.6569 1 20 1H4ZM5 7.5H9V8.5H5V7.5ZM5 11.5H9V12.5H5V11.5ZM9 15.5H5V16.5H9V15.5ZM14 7.5H10V8.5H14V7.5ZM14 11.5H10V12.5H14V11.5ZM10 15.5H14V16.5H10V15.5ZM15 7.5H19V8.5H15V7.5ZM15 11.5H19V12.5H15V11.5ZM19 15.5H15V16.5H19V15.5Z" fill="#757575"/></svg>');
}
// Text orientation
&.icon-text-orientation-horizontal {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.51367 10.75H11.269L8.06905 2H6.36276L3.25 10.75H4.96174L5.62136 8.76245H8.81589L9.51367 10.75ZM7.19682 4.04127L8.29801 7.2882H6.11744L7.19682 4.04127ZM16.0002 2H12.8057V10.75H15.5259C16.5544 10.742 17.2031 10.7221 17.4721 10.6903C17.9009 10.6386 18.2607 10.5013 18.5515 10.2785C18.8458 10.0517 19.0766 9.75125 19.2438 9.37722C19.4146 8.9992 19.5 8.61124 19.5 8.21334C19.5 7.70799 19.3692 7.2683 19.1075 6.89427C18.8458 6.52024 18.4715 6.25563 17.9845 6.10044C18.3298 5.92934 18.6023 5.67269 18.8022 5.33049C19.0057 4.98829 19.1075 4.61227 19.1075 4.20242C19.1075 3.82441 19.0257 3.4842 18.8622 3.18179C18.6986 2.8754 18.4933 2.63068 18.2462 2.44765C18.0027 2.26461 17.7247 2.14524 17.4121 2.08953C17.1032 2.02984 16.6326 2 16.0002 2ZM14.4193 5.47971L14.4193 3.45634L15.346 3.45634C16.1056 3.45634 16.5653 3.46629 16.7252 3.48619C16.9942 3.522 17.1959 3.62545 17.3303 3.79656C17.4684 3.96368 17.5375 4.18253 17.5375 4.4531C17.5375 4.73562 17.4575 4.96442 17.2976 5.1395C17.1414 5.3106 16.9251 5.41405 16.6489 5.44986C16.4963 5.46976 16.1056 5.47971 15.4769 5.47971H14.4193ZM14.4193 9.27575V6.93605H15.7222C16.4563 6.93605 16.9324 6.97783 17.1504 7.06139C17.3721 7.14495 17.5411 7.27825 17.6574 7.46129C17.7737 7.64433 17.8319 7.86716 17.8319 8.12977C17.8319 8.44014 17.7555 8.68884 17.6029 8.87585C17.4539 9.05889 17.2595 9.17428 17.0196 9.22203C16.8633 9.25784 16.4945 9.27575 15.913 9.27575H14.4193ZM17.9829 13.25L21.5023 17.0829L22 17.625L21.5023 18.1671L17.9829 22L16.9875 20.9159L19.3053 18.3916H2V16.8584H19.3053L16.9875 14.3341L17.9829 13.25Z" fill="@{brandColor}"/></svg>');
}
&.icon-text-orientation-anglecount {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M22 8.71927H16.3964V10.0783L19.7586 10.0783L8.55143 20.9162L9.67214 22L20.597 11.1439V14.4301L22 14.4301V8.71927Z" fill="@{brandColor}"/><path d="M10.6577 11.3859L9.54484 12.462L7.84242 11.6713L5.81718 13.6298L6.65905 15.2527L5.57385 16.3022L2 9.02933L3.08174 7.98323L10.6577 11.3859ZM6.57946 11.085L3.82288 9.76944L5.19705 12.4218L6.57946 11.085Z" fill="@{brandColor}"/><path d="M6.08463 5.07929L8.10987 3.12078C8.51077 2.73309 8.82806 2.46285 9.06174 2.31005C9.2952 2.15259 9.54714 2.05532 9.81755 2.01826C10.0903 1.97896 10.3756 2.0031 10.6735 2.09068C10.9689 2.17582 11.2364 2.33426 11.4761 2.56602C11.7359 2.81728 11.9098 3.1102 11.9977 3.44478C12.0879 3.77712 12.0778 4.10158 11.9674 4.41815C12.3746 4.21472 12.7796 4.14745 13.1826 4.21634C13.5857 4.28523 13.9473 4.47458 14.2677 4.7844C14.52 5.02835 14.7118 5.31856 14.8432 5.65504C14.9743 5.98684 15.0185 6.31251 14.9756 6.63204C14.9326 6.9469 14.7915 7.25165 14.5524 7.54628C14.4021 7.73067 14.0034 8.14059 13.3564 8.77602L11.6319 10.4438L6.08463 5.07929ZM8.03089 4.98287L9.31365 6.22336L9.98412 5.57498C10.3827 5.18952 10.6241 4.94389 10.7083 4.83812C10.8607 4.64682 10.9322 4.45082 10.9228 4.25012C10.9131 4.04474 10.8188 3.85545 10.6397 3.68225C10.4681 3.51636 10.2856 3.42452 10.0921 3.40673C9.89838 3.38427 9.70492 3.44451 9.51172 3.58743C9.39773 3.67327 9.09996 3.94903 8.61842 4.4147L8.03089 4.98287ZM10.2369 7.11622L11.7202 8.55065L12.6672 7.63489C13.0358 7.2784 13.2583 7.04126 13.3347 6.9235C13.4565 6.74717 13.5066 6.55722 13.485 6.35365C13.4632 6.14541 13.354 5.94616 13.1572 5.75587C12.9907 5.59487 12.8126 5.4939 12.6228 5.45299C12.433 5.41207 12.2414 5.43395 12.0479 5.51864C11.8567 5.60109 11.5283 5.86736 11.0629 6.31744L10.2369 7.11622Z" fill="@{brandColor}"/></svg>');
}
&.icon-text-orientation-angleclock {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.2807 22L15.2807 16.3964L13.9217 16.3964L13.9217 19.7586L3.08379 8.55143L2 9.67214L12.8561 20.597L9.56995 20.597L9.56994 22L15.2807 22Z" fill="@{brandColor}"/><path d="M12.6141 10.6577L11.538 9.54484L12.3287 7.84242L10.3702 5.81718L8.74726 6.65905L7.69782 5.57385L14.9707 2L16.0168 3.08174L12.6141 10.6577ZM12.915 6.57946L14.2306 3.82288L11.5782 5.19705L12.915 6.57946Z" fill="@{brandColor}"/><path d="M18.9207 6.08463L20.8792 8.10987C21.2669 8.51077 21.5372 8.82806 21.6899 9.06174C21.8474 9.2952 21.9447 9.54714 21.9817 9.81755C22.021 10.0903 21.9969 10.3756 21.9093 10.6735C21.8242 10.9689 21.6657 11.2364 21.434 11.4761C21.1827 11.7359 20.8898 11.9098 20.5552 11.9977C20.2229 12.0879 19.8984 12.0778 19.5819 11.9674C19.7853 12.3746 19.8525 12.7796 19.7837 13.1826C19.7148 13.5857 19.5254 13.9473 19.2156 14.2677C18.9716 14.52 18.6814 14.7118 18.345 14.8432C18.0132 14.9743 17.6875 15.0185 17.368 14.9756C17.0531 14.9326 16.7484 14.7915 16.4537 14.5524C16.2693 14.4021 15.8594 14.0034 15.224 13.3564L13.5562 11.6319L18.9207 6.08463ZM19.0171 8.03089L17.7766 9.31365L18.425 9.98412C18.8105 10.3827 19.0561 10.6241 19.1619 10.7083C19.3532 10.8607 19.5492 10.9322 19.7499 10.9228C19.9553 10.9131 20.1445 10.8188 20.3178 10.6397C20.4836 10.4681 20.5755 10.2856 20.5933 10.0921C20.6157 9.89838 20.5555 9.70492 20.4126 9.51172C20.3267 9.39773 20.051 9.09996 19.5853 8.61842L19.0171 8.03089ZM16.8838 10.2369L15.4494 11.7202L16.3651 12.6672C16.7216 13.0358 16.9587 13.2583 17.0765 13.3347C17.2528 13.4565 17.4428 13.5066 17.6463 13.485C17.8546 13.4632 18.0538 13.354 18.2441 13.1572C18.4051 12.9907 18.5061 12.8126 18.547 12.6228C18.5879 12.433 18.566 12.2414 18.4814 12.0479C18.3989 11.8567 18.1326 11.5283 17.6826 11.0629L16.8838 10.2369Z" fill="@{brandColor}"/></svg>');
}
&.icon-text-orientation-vertical {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.10359 22.0648L11.0819 18.5454L9.95669 17.55L7.33664 19.8678L7.33664 1.9375L5.7453 1.9375L5.7453 19.8678L3.12525 17.55L2 18.5454L5.97834 22.0648L6.54097 22.5625L7.10359 22.0648Z" fill="@{brandColor}"/><path d="M14.513 13.1875L17.8287 13.1875C18.4851 13.1875 18.9736 13.2173 19.2942 13.277C19.6186 13.3327 19.9072 13.4521 20.1599 13.6351C20.4164 13.8182 20.6295 14.0629 20.7993 14.3693C20.969 14.6717 21.0539 15.0119 21.0539 15.3899C21.0539 15.7998 20.9483 16.1758 20.737 16.518C20.5296 16.8602 20.2467 17.1168 19.8883 17.2879C20.3938 17.4431 20.7823 17.7077 21.0539 18.0818C21.3255 18.4558 21.4613 18.8955 21.4613 19.4008C21.4613 19.7987 21.3726 20.1867 21.1954 20.5647C21.0218 20.9387 20.7823 21.2392 20.4768 21.466C20.175 21.6888 19.8015 21.8261 19.3564 21.8778C19.0773 21.9096 18.404 21.9295 17.3365 21.9375L14.513 21.9375L14.513 13.1875ZM16.1878 14.6438L16.1878 16.6672L17.2855 16.6672C17.9381 16.6672 18.3436 16.6573 18.502 16.6374C18.7887 16.6016 19.0132 16.4981 19.1754 16.327C19.3413 16.1519 19.4243 15.9231 19.4243 15.6406C19.4243 15.37 19.3527 15.1512 19.2093 14.9841C19.0697 14.813 18.8604 14.7095 18.5813 14.6737C18.4153 14.6538 17.9381 14.6438 17.1497 14.6438L16.1878 14.6438ZM16.1878 18.1235L16.1878 20.4632L17.7382 20.4632C18.3417 20.4632 18.7246 20.4453 18.8868 20.4095C19.1358 20.3618 19.3376 20.2464 19.4922 20.0634C19.6507 19.8763 19.7299 19.6276 19.7299 19.3173C19.7299 19.0547 19.6695 18.8318 19.5488 18.6488C19.4281 18.4658 19.2527 18.3325 19.0226 18.2489C18.7963 18.1653 18.3021 18.1235 17.5401 18.1235L16.1878 18.1235Z" fill="@{brandColor}"/><path d="M22 10.6875L20.1781 10.6875L19.4538 8.69995L16.1381 8.69995L15.4534 10.6875L13.6768 10.6875L16.9076 1.9375L18.6786 1.9375L22 10.6875ZM18.9163 7.2257L17.7733 3.97877L16.653 7.2257L18.9163 7.2257Z" fill="@{brandColor}"/></svg>');
}
&.icon-text-orientation-rotateup {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.9142 2.48263L2 5.89535L3.1071 6.86061L5.68491 4.61307L5.68491 22L7.25059 22L7.25059 4.61307L9.82839 6.86061L10.9355 5.89535L7.0213 2.48263L6.46775 2L5.9142 2.48263Z" fill="@{brandColor}"/><path d="M21.9277 12.5942L21.8993 14.2496L19.9679 14.9391L19.9162 17.9517L21.8256 18.5424L21.7979 20.1567L13.3952 17.3594L13.4228 15.7502L21.9277 12.5942ZM18.5353 15.4508L15.3807 16.5406L18.5 17.5072L18.5353 15.4508Z" fill="@{brandColor}"/><path d="M13.4994 11.0787L13.5511 8.06604C13.5614 7.46968 13.5978 7.02537 13.6605 6.7331C13.7194 6.43747 13.8392 6.1734 14.0199 5.94087C14.2008 5.70492 14.4405 5.50741 14.7391 5.34834C15.0339 5.18933 15.3639 5.10684 15.7291 5.10087C16.1251 5.0944 16.4867 5.18442 16.814 5.37095C17.1413 5.55405 17.3849 5.80704 17.5446 6.12994C17.7024 5.66822 17.9641 5.31103 18.3296 5.05835C18.6952 4.80567 19.1221 4.67534 19.6103 4.66736C19.9947 4.66107 20.3681 4.73549 20.7306 4.8906C21.0892 5.04235 21.3757 5.25524 21.59 5.52927C21.8006 5.79994 21.9274 6.13708 21.9704 6.54069C21.9968 6.79381 22.0056 7.40527 21.9966 8.37509V11.0787H13.4994ZM14.9325 9.53393L16.8872 9.50197L16.9043 8.50461C16.9145 7.91168 16.9112 7.5434 16.8945 7.39976C16.8643 7.13985 16.7679 6.93756 16.6051 6.79289C16.4386 6.64485 16.2188 6.57306 15.9459 6.57752C15.6845 6.5818 15.472 6.65037 15.3083 6.78325C15.1408 6.91277 15.0376 7.10462 14.9986 7.35881C14.9768 7.50993 14.9598 7.94364 14.9475 8.65996L14.9325 9.53393ZM18.2941 9.47896L20.5545 9.442L20.5786 8.03336C20.588 7.48499 20.5767 7.1374 20.5446 6.99059C20.5024 6.76514 20.3941 6.58359 20.2196 6.44597C20.0414 6.30497 19.8024 6.23693 19.5026 6.24183C19.2489 6.24598 19.0327 6.30434 18.854 6.4169C18.6753 6.52947 18.5437 6.69095 18.4594 6.90133C18.3752 7.10829 18.3271 7.55794 18.3152 8.25026L18.2941 9.47896Z" fill="@{brandColor}"/></svg>');
}
&.icon-text-orientation-rotatedown {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.0213 21.5174L10.9355 18.1047L9.82839 17.1394L7.25058 19.3869L7.25059 2L5.68491 2L5.68491 19.3869L3.1071 17.1394L2 18.1047L5.91419 21.5174L6.46774 22L7.0213 21.5174Z" fill="@{brandColor}"/><path d="M13.4675 11.4058L13.4959 9.75035L15.4273 9.06091L15.479 6.04827L13.5695 5.45761L13.5972 3.84333L22 6.64062L21.9724 8.24976L13.4675 11.4058ZM16.8599 8.54922L20.0145 7.45944L16.8952 6.49282L16.8599 8.54922Z" fill="@{brandColor}"/><path d="M21.8957 12.9213L21.844 15.934C21.8338 16.5303 21.7974 16.9746 21.7347 17.2669C21.6758 17.5625 21.556 17.8266 21.3752 18.0591C21.1944 18.2951 20.9547 18.4926 20.656 18.6517C20.3612 18.8107 20.0312 18.8932 19.6661 18.8991C19.2701 18.9056 18.9085 18.8156 18.5812 18.6291C18.2538 18.446 18.0103 18.193 17.8506 17.8701C17.6928 18.3318 17.4311 18.689 17.0655 18.9417C16.7 19.1943 16.2731 19.3247 15.7849 19.3326C15.4005 19.3389 15.0271 19.2645 14.6646 19.1094C14.306 18.9577 14.0195 18.7448 13.8051 18.4707C13.5946 18.2001 13.4678 17.8629 13.4248 17.4593C13.3984 17.2062 13.3896 16.5947 13.3986 15.6249L13.3986 12.9213L21.8957 12.9213ZM20.4627 14.4661L18.508 14.498L18.4909 15.4954C18.4807 16.0883 18.484 16.4566 18.5007 16.6002C18.5309 16.8601 18.6273 17.0624 18.7901 17.2071C18.9566 17.3552 19.1764 17.4269 19.4493 17.4225C19.7107 17.4182 19.9232 17.3496 20.0869 17.2167C20.2544 17.0872 20.3576 16.8954 20.3965 16.6412C20.4184 16.4901 20.4354 16.0564 20.4477 15.34L20.4627 14.4661ZM17.101 14.521L14.8407 14.558L14.8166 15.9666C14.8071 16.515 14.8185 16.8626 14.8505 17.0094C14.8928 17.2349 15.0011 17.4164 15.1755 17.554C15.3537 17.695 15.5928 17.7631 15.8926 17.7582C16.1463 17.754 16.3625 17.6957 16.5412 17.5831C16.7199 17.4705 16.8514 17.3091 16.9358 17.0987C17.02 16.8917 17.0681 16.4421 17.08 15.7497L17.101 14.521Z" fill="@{brandColor}"/></svg>');
}
}

View file

@ -381,37 +381,6 @@
height: 24px;
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.00049 18C7.00049 18.8284 6.32892 19.5 5.50049 19.5C4.67206 19.5 4.00049 18.8284 4.00049 18C4.00049 17.1716 4.67206 16.5 5.50049 16.5C6.32892 16.5 7.00049 17.1716 7.00049 18ZM13.5005 18C13.5005 18.8284 12.8289 19.5 12.0005 19.5C11.1721 19.5 10.5005 18.8284 10.5005 18C10.5005 17.1716 11.1721 16.5 12.0005 16.5C12.8289 16.5 13.5005 17.1716 13.5005 18ZM18.5005 19.5C19.3289 19.5 20.0005 18.8284 20.0005 18C20.0005 17.1716 19.3289 16.5 18.5005 16.5C17.6721 16.5 17.0005 17.1716 17.0005 18C17.0005 18.8284 17.6721 19.5 18.5005 19.5Z" fill="@{brandColor}"/></svg>');
}
// Text orientation
&.icon-text-orientation-horizontal {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.51367 10.75H11.269L8.06905 2H6.36276L3.25 10.75H4.96174L5.62136 8.76245H8.81589L9.51367 10.75ZM7.19682 4.04127L8.29801 7.2882H6.11744L7.19682 4.04127ZM16.0002 2H12.8057V10.75H15.5259C16.5544 10.742 17.2031 10.7221 17.4721 10.6903C17.9009 10.6386 18.2607 10.5013 18.5515 10.2785C18.8458 10.0517 19.0766 9.75125 19.2438 9.37722C19.4146 8.9992 19.5 8.61124 19.5 8.21334C19.5 7.70799 19.3692 7.2683 19.1075 6.89427C18.8458 6.52024 18.4715 6.25563 17.9845 6.10044C18.3298 5.92934 18.6023 5.67269 18.8022 5.33049C19.0057 4.98829 19.1075 4.61227 19.1075 4.20242C19.1075 3.82441 19.0257 3.4842 18.8622 3.18179C18.6986 2.8754 18.4933 2.63068 18.2462 2.44765C18.0027 2.26461 17.7247 2.14524 17.4121 2.08953C17.1032 2.02984 16.6326 2 16.0002 2ZM14.4193 5.47971L14.4193 3.45634L15.346 3.45634C16.1056 3.45634 16.5653 3.46629 16.7252 3.48619C16.9942 3.522 17.1959 3.62545 17.3303 3.79656C17.4684 3.96368 17.5375 4.18253 17.5375 4.4531C17.5375 4.73562 17.4575 4.96442 17.2976 5.1395C17.1414 5.3106 16.9251 5.41405 16.6489 5.44986C16.4963 5.46976 16.1056 5.47971 15.4769 5.47971H14.4193ZM14.4193 9.27575V6.93605H15.7222C16.4563 6.93605 16.9324 6.97783 17.1504 7.06139C17.3721 7.14495 17.5411 7.27825 17.6574 7.46129C17.7737 7.64433 17.8319 7.86716 17.8319 8.12977C17.8319 8.44014 17.7555 8.68884 17.6029 8.87585C17.4539 9.05889 17.2595 9.17428 17.0196 9.22203C16.8633 9.25784 16.4945 9.27575 15.913 9.27575H14.4193ZM17.9829 13.25L21.5023 17.0829L22 17.625L21.5023 18.1671L17.9829 22L16.9875 20.9159L19.3053 18.3916H2V16.8584H19.3053L16.9875 14.3341L17.9829 13.25Z" fill="@{brandColor}"/></svg>');
}
&.icon-text-orientation-anglecount {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M22 8.71927H16.3964V10.0783L19.7586 10.0783L8.55143 20.9162L9.67214 22L20.597 11.1439V14.4301L22 14.4301V8.71927Z" fill="@{brandColor}"/><path d="M10.6577 11.3859L9.54484 12.462L7.84242 11.6713L5.81718 13.6298L6.65905 15.2527L5.57385 16.3022L2 9.02933L3.08174 7.98323L10.6577 11.3859ZM6.57946 11.085L3.82288 9.76944L5.19705 12.4218L6.57946 11.085Z" fill="@{brandColor}"/><path d="M6.08463 5.07929L8.10987 3.12078C8.51077 2.73309 8.82806 2.46285 9.06174 2.31005C9.2952 2.15259 9.54714 2.05532 9.81755 2.01826C10.0903 1.97896 10.3756 2.0031 10.6735 2.09068C10.9689 2.17582 11.2364 2.33426 11.4761 2.56602C11.7359 2.81728 11.9098 3.1102 11.9977 3.44478C12.0879 3.77712 12.0778 4.10158 11.9674 4.41815C12.3746 4.21472 12.7796 4.14745 13.1826 4.21634C13.5857 4.28523 13.9473 4.47458 14.2677 4.7844C14.52 5.02835 14.7118 5.31856 14.8432 5.65504C14.9743 5.98684 15.0185 6.31251 14.9756 6.63204C14.9326 6.9469 14.7915 7.25165 14.5524 7.54628C14.4021 7.73067 14.0034 8.14059 13.3564 8.77602L11.6319 10.4438L6.08463 5.07929ZM8.03089 4.98287L9.31365 6.22336L9.98412 5.57498C10.3827 5.18952 10.6241 4.94389 10.7083 4.83812C10.8607 4.64682 10.9322 4.45082 10.9228 4.25012C10.9131 4.04474 10.8188 3.85545 10.6397 3.68225C10.4681 3.51636 10.2856 3.42452 10.0921 3.40673C9.89838 3.38427 9.70492 3.44451 9.51172 3.58743C9.39773 3.67327 9.09996 3.94903 8.61842 4.4147L8.03089 4.98287ZM10.2369 7.11622L11.7202 8.55065L12.6672 7.63489C13.0358 7.2784 13.2583 7.04126 13.3347 6.9235C13.4565 6.74717 13.5066 6.55722 13.485 6.35365C13.4632 6.14541 13.354 5.94616 13.1572 5.75587C12.9907 5.59487 12.8126 5.4939 12.6228 5.45299C12.433 5.41207 12.2414 5.43395 12.0479 5.51864C11.8567 5.60109 11.5283 5.86736 11.0629 6.31744L10.2369 7.11622Z" fill="@{brandColor}"/></svg>');
}
&.icon-text-orientation-angleclock {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.2807 22L15.2807 16.3964L13.9217 16.3964L13.9217 19.7586L3.08379 8.55143L2 9.67214L12.8561 20.597L9.56995 20.597L9.56994 22L15.2807 22Z" fill="@{brandColor}"/><path d="M12.6141 10.6577L11.538 9.54484L12.3287 7.84242L10.3702 5.81718L8.74726 6.65905L7.69782 5.57385L14.9707 2L16.0168 3.08174L12.6141 10.6577ZM12.915 6.57946L14.2306 3.82288L11.5782 5.19705L12.915 6.57946Z" fill="@{brandColor}"/><path d="M18.9207 6.08463L20.8792 8.10987C21.2669 8.51077 21.5372 8.82806 21.6899 9.06174C21.8474 9.2952 21.9447 9.54714 21.9817 9.81755C22.021 10.0903 21.9969 10.3756 21.9093 10.6735C21.8242 10.9689 21.6657 11.2364 21.434 11.4761C21.1827 11.7359 20.8898 11.9098 20.5552 11.9977C20.2229 12.0879 19.8984 12.0778 19.5819 11.9674C19.7853 12.3746 19.8525 12.7796 19.7837 13.1826C19.7148 13.5857 19.5254 13.9473 19.2156 14.2677C18.9716 14.52 18.6814 14.7118 18.345 14.8432C18.0132 14.9743 17.6875 15.0185 17.368 14.9756C17.0531 14.9326 16.7484 14.7915 16.4537 14.5524C16.2693 14.4021 15.8594 14.0034 15.224 13.3564L13.5562 11.6319L18.9207 6.08463ZM19.0171 8.03089L17.7766 9.31365L18.425 9.98412C18.8105 10.3827 19.0561 10.6241 19.1619 10.7083C19.3532 10.8607 19.5492 10.9322 19.7499 10.9228C19.9553 10.9131 20.1445 10.8188 20.3178 10.6397C20.4836 10.4681 20.5755 10.2856 20.5933 10.0921C20.6157 9.89838 20.5555 9.70492 20.4126 9.51172C20.3267 9.39773 20.051 9.09996 19.5853 8.61842L19.0171 8.03089ZM16.8838 10.2369L15.4494 11.7202L16.3651 12.6672C16.7216 13.0358 16.9587 13.2583 17.0765 13.3347C17.2528 13.4565 17.4428 13.5066 17.6463 13.485C17.8546 13.4632 18.0538 13.354 18.2441 13.1572C18.4051 12.9907 18.5061 12.8126 18.547 12.6228C18.5879 12.433 18.566 12.2414 18.4814 12.0479C18.3989 11.8567 18.1326 11.5283 17.6826 11.0629L16.8838 10.2369Z" fill="@{brandColor}"/></svg>');
}
&.icon-text-orientation-vertical {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.10359 22.0648L11.0819 18.5454L9.95669 17.55L7.33664 19.8678L7.33664 1.9375L5.7453 1.9375L5.7453 19.8678L3.12525 17.55L2 18.5454L5.97834 22.0648L6.54097 22.5625L7.10359 22.0648Z" fill="@{brandColor}"/><path d="M14.513 13.1875L17.8287 13.1875C18.4851 13.1875 18.9736 13.2173 19.2942 13.277C19.6186 13.3327 19.9072 13.4521 20.1599 13.6351C20.4164 13.8182 20.6295 14.0629 20.7993 14.3693C20.969 14.6717 21.0539 15.0119 21.0539 15.3899C21.0539 15.7998 20.9483 16.1758 20.737 16.518C20.5296 16.8602 20.2467 17.1168 19.8883 17.2879C20.3938 17.4431 20.7823 17.7077 21.0539 18.0818C21.3255 18.4558 21.4613 18.8955 21.4613 19.4008C21.4613 19.7987 21.3726 20.1867 21.1954 20.5647C21.0218 20.9387 20.7823 21.2392 20.4768 21.466C20.175 21.6888 19.8015 21.8261 19.3564 21.8778C19.0773 21.9096 18.404 21.9295 17.3365 21.9375L14.513 21.9375L14.513 13.1875ZM16.1878 14.6438L16.1878 16.6672L17.2855 16.6672C17.9381 16.6672 18.3436 16.6573 18.502 16.6374C18.7887 16.6016 19.0132 16.4981 19.1754 16.327C19.3413 16.1519 19.4243 15.9231 19.4243 15.6406C19.4243 15.37 19.3527 15.1512 19.2093 14.9841C19.0697 14.813 18.8604 14.7095 18.5813 14.6737C18.4153 14.6538 17.9381 14.6438 17.1497 14.6438L16.1878 14.6438ZM16.1878 18.1235L16.1878 20.4632L17.7382 20.4632C18.3417 20.4632 18.7246 20.4453 18.8868 20.4095C19.1358 20.3618 19.3376 20.2464 19.4922 20.0634C19.6507 19.8763 19.7299 19.6276 19.7299 19.3173C19.7299 19.0547 19.6695 18.8318 19.5488 18.6488C19.4281 18.4658 19.2527 18.3325 19.0226 18.2489C18.7963 18.1653 18.3021 18.1235 17.5401 18.1235L16.1878 18.1235Z" fill="@{brandColor}"/><path d="M22 10.6875L20.1781 10.6875L19.4538 8.69995L16.1381 8.69995L15.4534 10.6875L13.6768 10.6875L16.9076 1.9375L18.6786 1.9375L22 10.6875ZM18.9163 7.2257L17.7733 3.97877L16.653 7.2257L18.9163 7.2257Z" fill="@{brandColor}"/></svg>');
}
&.icon-text-orientation-rotateup {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.9142 2.48263L2 5.89535L3.1071 6.86061L5.68491 4.61307L5.68491 22L7.25059 22L7.25059 4.61307L9.82839 6.86061L10.9355 5.89535L7.0213 2.48263L6.46775 2L5.9142 2.48263Z" fill="@{brandColor}"/><path d="M21.9277 12.5942L21.8993 14.2496L19.9679 14.9391L19.9162 17.9517L21.8256 18.5424L21.7979 20.1567L13.3952 17.3594L13.4228 15.7502L21.9277 12.5942ZM18.5353 15.4508L15.3807 16.5406L18.5 17.5072L18.5353 15.4508Z" fill="@{brandColor}"/><path d="M13.4994 11.0787L13.5511 8.06604C13.5614 7.46968 13.5978 7.02537 13.6605 6.7331C13.7194 6.43747 13.8392 6.1734 14.0199 5.94087C14.2008 5.70492 14.4405 5.50741 14.7391 5.34834C15.0339 5.18933 15.3639 5.10684 15.7291 5.10087C16.1251 5.0944 16.4867 5.18442 16.814 5.37095C17.1413 5.55405 17.3849 5.80704 17.5446 6.12994C17.7024 5.66822 17.9641 5.31103 18.3296 5.05835C18.6952 4.80567 19.1221 4.67534 19.6103 4.66736C19.9947 4.66107 20.3681 4.73549 20.7306 4.8906C21.0892 5.04235 21.3757 5.25524 21.59 5.52927C21.8006 5.79994 21.9274 6.13708 21.9704 6.54069C21.9968 6.79381 22.0056 7.40527 21.9966 8.37509V11.0787H13.4994ZM14.9325 9.53393L16.8872 9.50197L16.9043 8.50461C16.9145 7.91168 16.9112 7.5434 16.8945 7.39976C16.8643 7.13985 16.7679 6.93756 16.6051 6.79289C16.4386 6.64485 16.2188 6.57306 15.9459 6.57752C15.6845 6.5818 15.472 6.65037 15.3083 6.78325C15.1408 6.91277 15.0376 7.10462 14.9986 7.35881C14.9768 7.50993 14.9598 7.94364 14.9475 8.65996L14.9325 9.53393ZM18.2941 9.47896L20.5545 9.442L20.5786 8.03336C20.588 7.48499 20.5767 7.1374 20.5446 6.99059C20.5024 6.76514 20.3941 6.58359 20.2196 6.44597C20.0414 6.30497 19.8024 6.23693 19.5026 6.24183C19.2489 6.24598 19.0327 6.30434 18.854 6.4169C18.6753 6.52947 18.5437 6.69095 18.4594 6.90133C18.3752 7.10829 18.3271 7.55794 18.3152 8.25026L18.2941 9.47896Z" fill="@{brandColor}"/></svg>');
}
&.icon-text-orientation-rotatedown {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.0213 21.5174L10.9355 18.1047L9.82839 17.1394L7.25058 19.3869L7.25059 2L5.68491 2L5.68491 19.3869L3.1071 17.1394L2 18.1047L5.91419 21.5174L6.46774 22L7.0213 21.5174Z" fill="@{brandColor}"/><path d="M13.4675 11.4058L13.4959 9.75035L15.4273 9.06091L15.479 6.04827L13.5695 5.45761L13.5972 3.84333L22 6.64062L21.9724 8.24976L13.4675 11.4058ZM16.8599 8.54922L20.0145 7.45944L16.8952 6.49282L16.8599 8.54922Z" fill="@{brandColor}"/><path d="M21.8957 12.9213L21.844 15.934C21.8338 16.5303 21.7974 16.9746 21.7347 17.2669C21.6758 17.5625 21.556 17.8266 21.3752 18.0591C21.1944 18.2951 20.9547 18.4926 20.656 18.6517C20.3612 18.8107 20.0312 18.8932 19.6661 18.8991C19.2701 18.9056 18.9085 18.8156 18.5812 18.6291C18.2538 18.446 18.0103 18.193 17.8506 17.8701C17.6928 18.3318 17.4311 18.689 17.0655 18.9417C16.7 19.1943 16.2731 19.3247 15.7849 19.3326C15.4005 19.3389 15.0271 19.2645 14.6646 19.1094C14.306 18.9577 14.0195 18.7448 13.8051 18.4707C13.5946 18.2001 13.4678 17.8629 13.4248 17.4593C13.3984 17.2062 13.3896 16.5947 13.3986 15.6249L13.3986 12.9213L21.8957 12.9213ZM20.4627 14.4661L18.508 14.498L18.4909 15.4954C18.4807 16.0883 18.484 16.4566 18.5007 16.6002C18.5309 16.8601 18.6273 17.0624 18.7901 17.2071C18.9566 17.3552 19.1764 17.4269 19.4493 17.4225C19.7107 17.4182 19.9232 17.3496 20.0869 17.2167C20.2544 17.0872 20.3576 16.8954 20.3965 16.6412C20.4184 16.4901 20.4354 16.0564 20.4477 15.34L20.4627 14.4661ZM17.101 14.521L14.8407 14.558L14.8166 15.9666C14.8071 16.515 14.8185 16.8626 14.8505 17.0094C14.8928 17.2349 15.0011 17.4164 15.1755 17.554C15.3537 17.695 15.5928 17.7631 15.8926 17.7582C16.1463 17.754 16.3625 17.6957 16.5412 17.5831C16.7199 17.4705 16.8514 17.3091 16.9358 17.0987C17.02 16.8917 17.0681 16.4421 17.08 15.7497L17.101 14.521Z" fill="@{brandColor}"/></svg>');
}
}
.tab-link-active {

View file

@ -329,37 +329,6 @@
height: 24px;
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="#FFFFFF"/></svg>');
}
// Text orientation
&.icon-text-orientation-horizontal {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.51367 10.75H11.269L8.06905 2H6.36276L3.25 10.75H4.96174L5.62136 8.76245H8.81589L9.51367 10.75ZM7.19682 4.04127L8.29801 7.2882H6.11744L7.19682 4.04127ZM16.0002 2H12.8057V10.75H15.5259C16.5544 10.742 17.2031 10.7221 17.4721 10.6903C17.9009 10.6386 18.2607 10.5013 18.5515 10.2785C18.8458 10.0517 19.0766 9.75125 19.2438 9.37722C19.4146 8.9992 19.5 8.61124 19.5 8.21334C19.5 7.70799 19.3692 7.2683 19.1075 6.89427C18.8458 6.52024 18.4715 6.25563 17.9845 6.10044C18.3298 5.92934 18.6023 5.67269 18.8022 5.33049C19.0057 4.98829 19.1075 4.61227 19.1075 4.20242C19.1075 3.82441 19.0257 3.4842 18.8622 3.18179C18.6986 2.8754 18.4933 2.63068 18.2462 2.44765C18.0027 2.26461 17.7247 2.14524 17.4121 2.08953C17.1032 2.02984 16.6326 2 16.0002 2ZM14.4193 5.47971L14.4193 3.45634L15.346 3.45634C16.1056 3.45634 16.5653 3.46629 16.7252 3.48619C16.9942 3.522 17.1959 3.62545 17.3303 3.79656C17.4684 3.96368 17.5375 4.18253 17.5375 4.4531C17.5375 4.73562 17.4575 4.96442 17.2976 5.1395C17.1414 5.3106 16.9251 5.41405 16.6489 5.44986C16.4963 5.46976 16.1056 5.47971 15.4769 5.47971H14.4193ZM14.4193 9.27575V6.93605H15.7222C16.4563 6.93605 16.9324 6.97783 17.1504 7.06139C17.3721 7.14495 17.5411 7.27825 17.6574 7.46129C17.7737 7.64433 17.8319 7.86716 17.8319 8.12977C17.8319 8.44014 17.7555 8.68884 17.6029 8.87585C17.4539 9.05889 17.2595 9.17428 17.0196 9.22203C16.8633 9.25784 16.4945 9.27575 15.913 9.27575H14.4193ZM17.9829 13.25L21.5023 17.0829L22 17.625L21.5023 18.1671L17.9829 22L16.9875 20.9159L19.3053 18.3916H2V16.8584H19.3053L16.9875 14.3341L17.9829 13.25Z" fill="@{brandColor}"/></svg>');
}
&.icon-text-orientation-anglecount {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M22 8.71927H16.3964V10.0783L19.7586 10.0783L8.55142 20.9162L9.67214 22L20.597 11.1439V14.4301L22 14.4301V8.71927Z" fill="@{brandColor}"/><path d="M10.6577 11.3859L9.54484 12.462L7.84242 11.6713L5.81718 13.6298L6.65905 15.2527L5.57385 16.3022L2 9.02933L3.08174 7.98323L10.6577 11.3859ZM6.57946 11.085L3.82288 9.76944L5.19705 12.4218L6.57946 11.085Z" fill="@{brandColor}"/><path d="M6.08462 5.07929L8.10986 3.12078C8.51077 2.73309 8.82806 2.46285 9.06174 2.31005C9.2952 2.15259 9.54714 2.05532 9.81755 2.01826C10.0903 1.97896 10.3756 2.0031 10.6735 2.09068C10.9689 2.17582 11.2364 2.33426 11.4761 2.56602C11.7359 2.81728 11.9098 3.1102 11.9977 3.44478C12.0879 3.77712 12.0778 4.10158 11.9674 4.41815C12.3746 4.21472 12.7796 4.14745 13.1826 4.21634C13.5857 4.28523 13.9473 4.47458 14.2677 4.7844C14.52 5.02835 14.7118 5.31856 14.8432 5.65504C14.9743 5.98684 15.0184 6.31251 14.9756 6.63204C14.9326 6.9469 14.7915 7.25165 14.5524 7.54628C14.4021 7.73067 14.0034 8.14059 13.3564 8.77602L11.6319 10.4438L6.08462 5.07929ZM8.03089 4.98287L9.31365 6.22336L9.98412 5.57498C10.3827 5.18952 10.6241 4.94389 10.7082 4.83812C10.8607 4.64682 10.9322 4.45082 10.9228 4.25012C10.9131 4.04474 10.8188 3.85545 10.6397 3.68225C10.4681 3.51636 10.2856 3.42452 10.0921 3.40673C9.89838 3.38427 9.70492 3.44451 9.51172 3.58743C9.39773 3.67327 9.09996 3.94903 8.61842 4.4147L8.03089 4.98287ZM10.2369 7.11622L11.7202 8.55065L12.6672 7.63489C13.0358 7.2784 13.2583 7.04126 13.3347 6.9235C13.4565 6.74717 13.5066 6.55722 13.485 6.35365C13.4632 6.14541 13.354 5.94616 13.1572 5.75587C12.9907 5.59487 12.8126 5.4939 12.6228 5.45299C12.433 5.41207 12.2414 5.43395 12.0479 5.51864C11.8567 5.60109 11.5283 5.86736 11.0629 6.31744L10.2369 7.11622Z" fill="@{brandColor}"/></svg>');
}
&.icon-text-orientation-angleclock {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.2807 22L15.2807 16.3964L13.9217 16.3964L13.9217 19.7586L3.08379 8.55143L2 9.67214L12.8561 20.597L9.56995 20.597L9.56994 22L15.2807 22Z" fill="@{brandColor}"/><path d="M12.6141 10.6577L11.538 9.54484L12.3287 7.84242L10.3702 5.81718L8.74726 6.65905L7.69782 5.57385L14.9707 2L16.0168 3.08174L12.6141 10.6577ZM12.915 6.57946L14.2306 3.82288L11.5782 5.19705L12.915 6.57946Z" fill="@{brandColor}"/><path d="M18.9207 6.08463L20.8792 8.10987C21.2669 8.51077 21.5372 8.82806 21.6899 9.06174C21.8474 9.2952 21.9447 9.54714 21.9817 9.81755C22.021 10.0903 21.9969 10.3756 21.9093 10.6735C21.8242 10.9689 21.6657 11.2364 21.434 11.4761C21.1827 11.7359 20.8898 11.9098 20.5552 11.9977C20.2229 12.0879 19.8984 12.0778 19.5819 11.9674C19.7853 12.3746 19.8525 12.7796 19.7837 13.1826C19.7148 13.5857 19.5254 13.9473 19.2156 14.2677C18.9716 14.52 18.6814 14.7118 18.345 14.8432C18.0132 14.9743 17.6875 15.0185 17.368 14.9756C17.0531 14.9326 16.7484 14.7915 16.4537 14.5524C16.2693 14.4021 15.8594 14.0034 15.224 13.3564L13.5562 11.6319L18.9207 6.08463ZM19.0171 8.03089L17.7766 9.31365L18.425 9.98412C18.8105 10.3827 19.0561 10.6241 19.1619 10.7083C19.3532 10.8607 19.5492 10.9322 19.7499 10.9228C19.9553 10.9131 20.1445 10.8188 20.3178 10.6397C20.4836 10.4681 20.5755 10.2856 20.5933 10.0921C20.6157 9.89838 20.5555 9.70492 20.4126 9.51172C20.3267 9.39773 20.051 9.09996 19.5853 8.61842L19.0171 8.03089ZM16.8838 10.2369L15.4494 11.7202L16.3651 12.6672C16.7216 13.0358 16.9587 13.2583 17.0765 13.3347C17.2528 13.4565 17.4428 13.5066 17.6463 13.485C17.8546 13.4632 18.0538 13.354 18.2441 13.1572C18.4051 12.9907 18.5061 12.8126 18.547 12.6228C18.5879 12.433 18.566 12.2414 18.4814 12.0479C18.3989 11.8567 18.1326 11.5283 17.6826 11.0629L16.8838 10.2369Z" fill="@{brandColor}"/></svg>');
}
&.icon-text-orientation-vertical {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.10359 22.0648L11.0819 18.5454L9.95669 17.55L7.33664 19.8678L7.33664 1.9375L5.7453 1.9375L5.7453 19.8678L3.12525 17.55L2 18.5454L5.97834 22.0648L6.54097 22.5625L7.10359 22.0648Z" fill="@{brandColor}"/><path d="M14.513 13.1875L17.8287 13.1875C18.4851 13.1875 18.9736 13.2173 19.2942 13.277C19.6186 13.3327 19.9072 13.4521 20.1599 13.6351C20.4164 13.8182 20.6295 14.0629 20.7993 14.3693C20.969 14.6717 21.0539 15.0119 21.0539 15.3899C21.0539 15.7998 20.9483 16.1758 20.737 16.518C20.5296 16.8602 20.2467 17.1168 19.8883 17.2879C20.3938 17.4431 20.7823 17.7077 21.0539 18.0818C21.3255 18.4558 21.4613 18.8955 21.4613 19.4008C21.4613 19.7987 21.3726 20.1867 21.1954 20.5647C21.0218 20.9387 20.7823 21.2392 20.4768 21.466C20.175 21.6888 19.8015 21.8261 19.3564 21.8778C19.0773 21.9096 18.404 21.9295 17.3365 21.9375L14.513 21.9375L14.513 13.1875ZM16.1878 14.6438L16.1878 16.6672L17.2855 16.6672C17.9381 16.6672 18.3436 16.6573 18.502 16.6374C18.7887 16.6016 19.0132 16.4981 19.1754 16.327C19.3413 16.1519 19.4243 15.9231 19.4243 15.6406C19.4243 15.37 19.3527 15.1512 19.2093 14.9841C19.0697 14.813 18.8604 14.7095 18.5813 14.6737C18.4153 14.6538 17.9381 14.6438 17.1497 14.6438L16.1878 14.6438ZM16.1878 18.1235L16.1878 20.4632L17.7382 20.4632C18.3417 20.4632 18.7246 20.4453 18.8868 20.4095C19.1358 20.3618 19.3376 20.2464 19.4922 20.0634C19.6507 19.8763 19.7299 19.6276 19.7299 19.3173C19.7299 19.0547 19.6695 18.8318 19.5488 18.6488C19.4281 18.4658 19.2527 18.3325 19.0226 18.2489C18.7963 18.1653 18.3021 18.1235 17.5401 18.1235L16.1878 18.1235Z" fill="@{brandColor}"/><path d="M22 10.6875L20.1781 10.6875L19.4538 8.69995L16.1381 8.69995L15.4534 10.6875L13.6768 10.6875L16.9076 1.9375L18.6786 1.9375L22 10.6875ZM18.9163 7.2257L17.7733 3.97877L16.653 7.2257L18.9163 7.2257Z" fill="@{brandColor}"/></svg>');
}
&.icon-text-orientation-rotateup {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.9142 2.48263L2 5.89535L3.1071 6.86061L5.68491 4.61307L5.68491 22L7.25059 22L7.25059 4.61307L9.82839 6.86061L10.9355 5.89535L7.0213 2.48263L6.46775 2L5.9142 2.48263Z" fill="@{brandColor}"/><path d="M21.9277 12.5942L21.8993 14.2496L19.9679 14.9391L19.9162 17.9517L21.8256 18.5424L21.7979 20.1567L13.3952 17.3594L13.4228 15.7502L21.9277 12.5942ZM18.5353 15.4508L15.3807 16.5406L18.5 17.5072L18.5353 15.4508Z" fill="@{brandColor}"/><path d="M13.4994 11.0787L13.5511 8.06604C13.5614 7.46968 13.5978 7.02537 13.6605 6.7331C13.7194 6.43747 13.8392 6.1734 14.0199 5.94087C14.2008 5.70492 14.4405 5.50741 14.7391 5.34834C15.0339 5.18933 15.3639 5.10684 15.7291 5.10087C16.1251 5.0944 16.4867 5.18442 16.814 5.37095C17.1413 5.55405 17.3849 5.80704 17.5446 6.12994C17.7024 5.66822 17.9641 5.31103 18.3296 5.05835C18.6952 4.80567 19.1221 4.67534 19.6103 4.66736C19.9947 4.66107 20.3681 4.73549 20.7306 4.8906C21.0892 5.04235 21.3757 5.25524 21.59 5.52927C21.8006 5.79994 21.9274 6.13708 21.9704 6.54069C21.9968 6.79381 22.0056 7.40527 21.9966 8.37509V11.0787H13.4994ZM14.9325 9.53393L16.8872 9.50197L16.9043 8.50461C16.9145 7.91168 16.9112 7.5434 16.8945 7.39976C16.8643 7.13985 16.7679 6.93756 16.6051 6.79289C16.4386 6.64485 16.2188 6.57306 15.9459 6.57752C15.6845 6.5818 15.472 6.65037 15.3083 6.78325C15.1408 6.91277 15.0376 7.10462 14.9986 7.35881C14.9768 7.50993 14.9598 7.94364 14.9475 8.65996L14.9325 9.53393ZM18.2941 9.47896L20.5545 9.442L20.5786 8.03336C20.588 7.48499 20.5767 7.1374 20.5446 6.99059C20.5024 6.76514 20.3941 6.58359 20.2196 6.44597C20.0414 6.30497 19.8024 6.23693 19.5026 6.24183C19.2489 6.24598 19.0327 6.30434 18.854 6.4169C18.6753 6.52947 18.5437 6.69095 18.4594 6.90133C18.3752 7.10829 18.3271 7.55794 18.3152 8.25026L18.2941 9.47896Z" fill="@{brandColor}"/></svg>');
}
&.icon-text-orientation-rotatedown {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.0213 21.5174L10.9355 18.1047L9.82839 17.1394L7.25058 19.3869L7.25059 2L5.68491 2L5.68491 19.3869L3.1071 17.1394L2 18.1047L5.91419 21.5174L6.46774 22L7.0213 21.5174Z" fill="@{brandColor}"/><path d="M13.4675 11.4058L13.4959 9.75035L15.4273 9.06091L15.479 6.04827L13.5695 5.45761L13.5972 3.84333L22 6.64062L21.9724 8.24976L13.4675 11.4058ZM16.8599 8.54922L20.0145 7.45944L16.8952 6.49282L16.8599 8.54922Z" fill="@{brandColor}"/><path d="M21.8957 12.9213L21.844 15.934C21.8338 16.5303 21.7974 16.9746 21.7347 17.2669C21.6758 17.5625 21.556 17.8266 21.3752 18.0591C21.1944 18.2951 20.9547 18.4926 20.656 18.6517C20.3612 18.8107 20.0312 18.8932 19.6661 18.8991C19.2701 18.9056 18.9085 18.8156 18.5812 18.6291C18.2538 18.446 18.0103 18.193 17.8506 17.8701C17.6928 18.3318 17.4311 18.689 17.0655 18.9417C16.7 19.1943 16.2731 19.3247 15.7849 19.3326C15.4005 19.3389 15.0271 19.2645 14.6646 19.1094C14.306 18.9577 14.0195 18.7448 13.8051 18.4707C13.5946 18.2001 13.4678 17.8629 13.4248 17.4593C13.3984 17.2062 13.3896 16.5947 13.3986 15.6249L13.3986 12.9213L21.8957 12.9213ZM20.4627 14.4661L18.508 14.498L18.4909 15.4954C18.4807 16.0883 18.484 16.4566 18.5007 16.6002C18.5309 16.8601 18.6273 17.0624 18.7901 17.2071C18.9566 17.3552 19.1764 17.4269 19.4493 17.4225C19.7107 17.4182 19.9232 17.3496 20.0869 17.2167C20.2544 17.0872 20.3576 16.8954 20.3965 16.6412C20.4184 16.4901 20.4354 16.0564 20.4477 15.34L20.4627 14.4661ZM17.101 14.521L14.8407 14.558L14.8166 15.9666C14.8071 16.515 14.8185 16.8626 14.8505 17.0094C14.8928 17.2349 15.0011 17.4164 15.1755 17.554C15.3537 17.695 15.5928 17.7631 15.8926 17.7582C16.1463 17.754 16.3625 17.6957 16.5412 17.5831C16.7199 17.4705 16.8514 17.3091 16.9358 17.0987C17.02 16.8917 17.0681 16.4421 17.08 15.7497L17.101 14.521Z" fill="@{brandColor}"/></svg>');
}
&.icon-plus {
width: 22px;
height: 22px;

View file

@ -24,10 +24,13 @@ export class storeApplicationSettings {
changeDisplayComments: action,
changeDisplayResolved: action,
changeRefStyle: action,
changeFormulaLang: action
changeFormulaLang: action,
directionMode: observable,
changeDirectionMode: action
});
}
directionMode = LocalStorage.getItem('mode-direction') || 'ltr';
unitMeasurement = Common.Utils.Metric.getCurrentMetric();
macrosMode = 0;
macrosRequest = 0;
@ -39,6 +42,10 @@ export class storeApplicationSettings {
isComments = true;
isResolvedComments = true;
changeDirectionMode(value) {
this.directionMode = value;
}
getFormulaLanguages() {
const dataLang = [
{ value: 'en', displayValue: 'English', exampleValue: ' SUM; MIN; MAX; COUNT' },

View file

@ -1,6 +1,6 @@
import React, {Fragment, useState} from "react";
import { observer, inject } from "mobx-react";
import { Page, Navbar, List, ListItem, BlockTitle, Toggle, Icon } from "framework7-react";
import { Page, Navbar, List, ListItem, BlockTitle, Toggle, Icon, f7 } from "framework7-react";
import { useTranslation } from "react-i18next";
import { Themes } from '../../../../../common/mobile/lib/controller/Themes.js';
@ -97,6 +97,10 @@ const PageApplicationSettings = props => {
</Toggle>
</ListItem>
</List>
<List mediaList>
<ListItem title={t("View.Settings.textDirection")} link="/direction/" routeProps={{changeDirection: props.changeDirection}}></ListItem>
</List>
{/* } */}
{/* {_isShowMacros && */}
<List>
@ -109,6 +113,38 @@ const PageApplicationSettings = props => {
);
};
const PageDirection = props => {
const { t } = useTranslation();
const _t = t("View.Settings", { returnObjects: true });
const store = props.storeApplicationSettings;
const directionMode = store.directionMode;
const changeDirection = value => {
store.changeDirectionMode(value);
props.changeDirection(value);
f7.dialog.create({
title: _t.notcriticalErrorTitle,
text: t('View.Settings.textRestartApplication'),
buttons: [
{
text: _t.textOk
}
]
}).open();
};
return (
<Page>
<Navbar title={t('View.Settings.textDirection')} backLink={_t.textBack} />
<List mediaList>
<ListItem radio name="direction" title={t('View.Settings.textLeftToRight')} checked={directionMode === 'ltr'} onChange={() => changeDirection('ltr')}></ListItem>
<ListItem radio name="direction" title={t('View.Settings.textRightToLeft')} checked={directionMode === 'rtl'} onChange={() => changeDirection('rtl')}></ListItem>
</List>
</Page>
);
}
const PageRegionalSettings = props => {
const { t } = useTranslation();
const _t = t("View.Settings", { returnObjects: true });
@ -194,10 +230,12 @@ const ApplicationSettings = inject("storeApplicationSettings", "storeAppOptions"
const MacrosSettings = inject("storeApplicationSettings")(observer(PageMacrosSettings));
const RegionalSettings = inject("storeApplicationSettings")(observer(PageRegionalSettings));
const FormulaLanguage = inject("storeApplicationSettings")(observer(PageFormulaLanguage));
const Direction = inject("storeApplicationSettings")(observer(PageDirection));
export {
ApplicationSettings,
MacrosSettings,
RegionalSettings,
FormulaLanguage
FormulaLanguage,
Direction
};

View file

@ -12,6 +12,7 @@ import {SpreadsheetColorSchemes, SpreadsheetFormats, SpreadsheetMargins} from '.
import {MacrosSettings, RegionalSettings, FormulaLanguage} from './ApplicationSettings.jsx';
// import SpreadsheetAbout from './SpreadsheetAbout.jsx';
import About from '../../../../../common/mobile/lib/view/About';
import { Direction } from '../../../../../spreadsheeteditor/mobile/src/view/settings/ApplicationSettings';
const routes = [
{
@ -61,6 +62,10 @@ const routes = [
{
path: '/about/',
component: About
},
{
path: '/direction/',
component: Direction
}
];

View file

@ -98,14 +98,14 @@ module.exports = {
}
}),
'css-loader',
{
loader: 'postcss-loader',
options: {
config: {
path: path.resolve(__dirname, '..'),
}
},
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
path: path.resolve(__dirname, '..'),
}
}
},
],
},
{
@ -117,27 +117,27 @@ module.exports = {
publicPath: '../'
}
}),
'css-loader?url=false',
{
loader: 'postcss-loader',
options: {
config: {
path: path.resolve(__dirname, '..'),
}
},
},
{
loader: "less-loader",
options: {
lessOptions: {
javascriptEnabled: true,
globalVars: {
"common-image-path": env === 'production' ? `../../../${editor}/mobile/resources/img` : '../../common/mobile/resources/img',
"app-image-path": env === 'production' ? '../resources/img' : './resources/img',
}
'css-loader?url=false',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
path: path.resolve(__dirname, '..'),
}
}
},
{
loader: "less-loader",
options: {
lessOptions: {
javascriptEnabled: true,
globalVars: {
"common-image-path": env === 'production' ? `../../../${editor}/mobile/resources/img` : '../../common/mobile/resources/img',
"app-image-path": env === 'production' ? '../resources/img' : './resources/img',
}
}
},
}
},
],
},
{
@ -198,6 +198,10 @@ module.exports = {
new MiniCssExtractPlugin({
filename: 'css/[name].css',
}),
// new WebpackRTLPlugin({
// filename: 'css/[name].rtl.css',
// diffOnly: true
// }),
new HtmlWebpackPlugin({
filename: `../../../apps/${editor}/mobile/index.html`,
template: `../../apps/${editor}/mobile/src/index_dev.html`,

View file

@ -33,6 +33,7 @@
"framework7-react": "^6.0.4",
"i18next": "^19.8.4",
"i18next-fetch-backend": "^3.0.0",
"postcss": "^8.4.12",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
@ -65,7 +66,7 @@
"mobx": "^6.1.8",
"mobx-react": "^7.1.0",
"ora": "^4.1.1",
"postcss-loader": "^3.0.0",
"postcss-loader": "^5.3.0",
"postcss-preset-env": "^6.7.0",
"rimraf": "^3.0.2",
"style-loader": "^1.3.0",

View file

@ -1,5 +1,6 @@
module.exports = (ctx) => ({
plugins: {
'postcss-preset-env': {},
'postcss-preset-env': {}
},
});