Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE mobile] Add and change styles for rtl support

Browse source
This commit is contained in:
SergeyEzhin 2022-04-15 19:48:15 +04:00
parent a5af4c395c
commit 9cd94b8a44
12 changed files with 109 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
apps/common/mobile/resources/less/common-ios.less
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 {

5
apps/common/mobile/resources/less/common.less
View file

@ -74,6 +74,8 @@
.range-number {
color: @text-normal;
min-width: 60px;
text-align: right;
}
}
.page-content {
@ -173,6 +175,7 @@
.row.list .item-content {
padding-left: 0;
padding-right: 0;
min-height: 68px;
.item-inner{
padding: 0;
@ -184,7 +187,7 @@
}
.popover {
.list {
.page .list {
ul {
background-color: var(--f7-list-bg-color);
li:first-child, li:last-child {

69
apps/common/mobile/resources/less/common.rtl.less Normal file
View file

@ -0,0 +1,69 @@
.device-ios[dir=rtl] {
.app-layout {
.tab-buttons .tab-link:last-child {
border-radius: 5px 0 0 5px;
}
.tab-buttons .tab-link:first-child {
border-radius: 0 5px 5px 0;
}
.popover li:last-child .segmented a:first-child {
border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0;
}
.popover li:last-child .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: 10px;
}
#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;
}
}
}
@media (max-width: 550px) {
.device-ios[dir=rtl] .app-layout .searchbar-expandable.searchbar-enabled .searchbar-inner__right {
margin-right: 10px;
margin-left: 0;
}
}
.device-android[dir=rtl] {
}
[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;
}
}

9
apps/common/mobile/resources/less/icons.rtl.less Normal file
View file

@ -0,0 +1,9 @@
.device-ios[dir=rtl] {
i.icon.icon-next, i.icon.icon-prev, i.icon.icon-prev-change, i.icon.icon-next-change {
transform: scale(-1);
}
}
.device-android[dir=rtl] {
}

2
apps/documenteditor/mobile/src/app.js
View file

@ -16,7 +16,7 @@ window.$ = jQuery;
// Import Framework7 Styles
// import 'framework7/framework7-bundle.css';
// import 'framework7/framework7-bundle-rtl.css';
import 'framework7/framework7-bundle-rtl.css';
// Import Icons and App Custom Styles
// import '../css/icons.css';

2
apps/documenteditor/mobile/src/less/app.less
View file

@ -1,8 +1,8 @@
@import '../../../../../vendor/framework7-react/node_modules/framework7/framework7-bundle.less';
@import '../../../../../vendor/framework7-react/node_modules/framework7/less/mixins.less';
@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);

2
apps/documenteditor/mobile/src/less/app.rtl.less Normal file
View file

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

4
apps/documenteditor/mobile/src/view/edit/EditChart.jsx
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>

4
apps/documenteditor/mobile/src/view/edit/EditShape.jsx
View file

@ -205,7 +205,7 @@ const PageStyle = props => {
onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
></Range>
</div>
<div className='range-number' slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
<div className='range-number' slot='inner-end' dir="ltr">
{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 className='range-number' slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
<div className='range-number' slot='inner-end'>
{stateOpacity + ' %'}
</div>
</ListItem>

6
apps/documenteditor/mobile/src/view/edit/EditTable.jsx
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>

16
vendor/framework7-react/build/webpack.config.js vendored
View file

@ -4,8 +4,8 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// const WebpackRTLPlugin = require('webpack-rtl-plugin');
// const rtlcss = require('rtlcss');
const postcssRTLCSS = require('postcss-rtlcss');
const { Mode } = require('postcss-rtlcss/options');
// const postcssRTLCSS = require('postcss-rtlcss');
// const { Mode } = require('postcss-rtlcss/options');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
@ -107,9 +107,9 @@ module.exports = {
options: {
postcssOptions: {
path: path.resolve(__dirname, '..'),
plugins: [
postcssRTLCSS({mode: Mode.combined})
]
// plugins: [
// postcssRTLCSS({mode: Mode.combined})
// ]
},
},
},
@ -130,9 +130,9 @@ module.exports = {
options: {
postcssOptions: {
path: path.resolve(__dirname, '..'),
plugins: [
postcssRTLCSS({mode: Mode.combined})
]
// plugins: [
// postcssRTLCSS({mode: Mode.combined})
// ]
},
},
},

5
vendor/framework7-react/package.json vendored
View file

@ -38,10 +38,8 @@
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-i18next": "^11.8.5",
"rtlcss": "^3.5.0",
"swiper": "^6.4.8",
"template7": "^1.4.2",
"webpack-rtl-plugin": "^2.0.0"
"template7": "^1.4.2"
},
"devDependencies": {
"@babel/core": "^7.12.10",
@ -70,7 +68,6 @@
"ora": "^4.1.1",
"postcss-loader": "^6.2.1",
"postcss-preset-env": "^6.7.0",
"postcss-rtlcss": "^3.6.1",
"rimraf": "^3.0.2",
"style-loader": "^1.3.0",
"terser-webpack-plugin": "^5.1.3",