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

Merge pull request #1161 from ONLYOFFICE/feature/fix-bug-reactjs

Browse source 
Feature/fix bug reactjs
This commit is contained in:
maxkadushkin 2021-09-08 12:31:44 +03:00 committed by GitHub
parent cc5fd21f00 8bd16f1719
commit 0c96e16e6a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 113 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
apps/common/mobile/resources/less/common-material.less
View file

@ -35,6 +35,12 @@
--f7-touch-ripple-color: transparent;
}
.segmented {
.button {
--f7-touch-ripple-color: var(--f7-list-link-pressed-bg-color);
}
}
--f7-input-focused-border-color: @themeColor;
--f7-label-focused-text-color: @themeColor;

2
apps/documenteditor/mobile/src/view/Toolbar.jsx
View file

@ -35,7 +35,7 @@ const ToolbarView = props => {
})}
{ Device.phone ? null : <Link className={(props.disabledControls || props.readerMode) && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
{props.displayCollaboration && window.matchMedia("(min-width: 360px)").matches ? <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => props.openOptions('coauth')}></Link> : null}
<Link className={(props.disabledSettings || props.disabledControls) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={e => props.openOptions('settings')}></Link>
<Link className={(props.disabledSettings || props.disabledControls || isDisconnected) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={e => props.openOptions('settings')}></Link>
</NavRight>
</Fragment>
)

5
apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx
View file

@ -196,7 +196,8 @@ const EditParagraph = props => {
const paragraph = props.storeFocusObjects.paragraphObject;
const curBackColor = storeParagraphSettings.backColor ? storeParagraphSettings.backColor : storeParagraphSettings.getBackgroundColor(paragraph);
const background = curBackColor !== 'transparent' ? `#${(typeof curBackColor === "object" ? curBackColor.color : curBackColor)}` : curBackColor;
const activeStyle = Device.android ? 'link no-active-state' : 'no-active-state';
return (
<Fragment>
<List>
@ -222,7 +223,7 @@ const EditParagraph = props => {
}}></ListItem>
</List>
<BlockTitle>{_t.textParagraphStyles}</BlockTitle>
<List>
<List className={activeStyle}>
{paragraphStyles.map((style, index) => (
<ListItem
key={index}

37
apps/documenteditor/mobile/src/view/edit/EditText.jsx
View file

@ -1,4 +1,4 @@
import React, {Fragment, useState } from 'react';
import React, {Fragment, useEffect, useState } from 'react';
import {observer, inject} from "mobx-react";
import {f7, Swiper, View, SwiperSlide, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link} from 'framework7-react';
import { useTranslation } from 'react-i18next';
@ -24,35 +24,50 @@ const PageFonts = props => {
const spriteThumbs = storeTextSettings.spriteThumbs;
const arrayRecentFonts = storeTextSettings.arrayRecentFonts;
useEffect(() => {
setRecent(getImageUri(arrayRecentFonts));
return () => {
}
}, []);
const addRecentStorage = () => {
let arr = [];
arrayRecentFonts.forEach(item => arr.push(item));
setRecent(getImageUri(arrayRecentFonts));
LocalStorage.setItem('dde-settings-recent-fonts', JSON.stringify(arr));
}
const [stateRecent, setRecent] = useState([]);
const [vlFonts, setVlFonts] = useState({
vlData: {
items: [],
}
});
const getImageUri = fonts => {
return fonts.map(font => {
thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
return thumbCanvas.toDataURL();
});
};
const renderExternal = (vl, vlData) => {
setVlFonts((prevState) => {
let fonts = [...prevState.vlData.items];
fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items);
let images = getImageUri(fonts);
return {vlData: {
items: fonts,
images,
}}
});
};
const getImageUri = (font) => {
thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
return thumbCanvas.toDataURL();
}
return (
<Page>
<Navbar title={t('Edit.textFonts')} backLink={t('Edit.textBack')}>
@ -88,7 +103,7 @@ const PageFonts = props => {
storeTextSettings.changeFontFamily(item.name);
props.changeFontFamily(item.name);
}}>
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
<img src={stateRecent[index]} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
</ListItem>
))}
</List>
@ -105,7 +120,7 @@ const PageFonts = props => {
storeTextSettings.addFontToRecent(item);
addRecentStorage();
}}>
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
<img src={vlFonts.vlData.images[index]} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
</ListItem>
))}
</ul>

2
apps/presentationeditor/mobile/src/view/Toolbar.jsx
View file

@ -36,7 +36,7 @@ const ToolbarView = props => {
})}
{ Device.phone ? null : <Link className={props.disabledControls && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
{props.displayCollaboration && window.matchMedia("(min-width: 375px)").matches ? <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={() => props.openOptions('coauth')}></Link> : null}
<Link className={(props.disabledSettings || props.disabledControls) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link>
<Link className={(props.disabledSettings || props.disabledControls || isDisconnected) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link>
</NavRight>
</Fragment>
)

35
apps/presentationeditor/mobile/src/view/edit/EditText.jsx
View file

@ -1,4 +1,4 @@
import React, {Fragment, useState} from 'react';
import React, {Fragment, useState, useEffect} from 'react';
import {observer, inject} from "mobx-react";
import {f7, Swiper, View, SwiperSlide, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link} from 'framework7-react';
import { useTranslation } from 'react-i18next';
@ -196,35 +196,50 @@ const PageFonts = props => {
const spriteThumbs = storeTextSettings.spriteThumbs;
const arrayRecentFonts = storeTextSettings.arrayRecentFonts;
useEffect(() => {
setRecent(getImageUri(arrayRecentFonts));
return () => {
}
}, []);
const addRecentStorage = () => {
let arr = [];
arrayRecentFonts.forEach(item => arr.push(item));
setRecent(getImageUri(arrayRecentFonts));
LocalStorage.setItem('ppe-settings-recent-fonts', JSON.stringify(arr));
}
const [stateRecent, setRecent] = useState([]);
const [vlFonts, setVlFonts] = useState({
vlData: {
items: [],
}
});
const getImageUri = fonts => {
return fonts.map(font => {
thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
return thumbCanvas.toDataURL();
});
};
const renderExternal = (vl, vlData) => {
setVlFonts((prevState) => {
let fonts = [...prevState.vlData.items];
fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items);
let images = getImageUri(fonts);
return {vlData: {
items: fonts,
images,
}};
});
};
const getImageUri = (font) => {
thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
return thumbCanvas.toDataURL();
}
const paragraph = props.storeFocusObjects.paragraphObject;
if (!paragraph && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
@ -265,7 +280,7 @@ const PageFonts = props => {
<ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
props.changeFontFamily(item.name);
}}>
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
<img src={stateRecent[index]} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
</ListItem>
))}
</List>
@ -281,7 +296,7 @@ const PageFonts = props => {
storeTextSettings.addFontToRecent(item);
addRecentStorage();
}}>
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
<img src={vlFonts.vlData.images[index]} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
</ListItem>
))}
</ul>

2
apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx
View file

@ -30,7 +30,7 @@ const ToolbarView = props => {
})}
{ Device.phone ? null : <Link className={(props.disabledControls || props.disabledSearch) && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
{props.displayCollaboration && window.matchMedia("(min-width: 360px)").matches ? <Link className={(props.disabledControls || props.disabledCollaboration) && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={() => props.openOptions('coauth')}></Link> : null}
<Link className={(props.disabledSettings || props.disabledControls) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link>
<Link className={(props.disabledSettings || props.disabledControls || isDisconnected) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link>
</NavRight>
</Fragment>
)

35
apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
View file

@ -1,4 +1,4 @@
import React, {Fragment, useState} from 'react';
import React, {Fragment, useState, useEffect} from 'react';
import {observer, inject} from "mobx-react";
import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle} from 'framework7-react';
import { useTranslation } from 'react-i18next';
@ -138,35 +138,50 @@ const PageFontsCell = props => {
const spriteCols = storeTextSettings.spriteCols;
const spriteThumbs = storeTextSettings.spriteThumbs;
useEffect(() => {
setRecent(getImageUri(arrayRecentFonts));
return () => {
}
}, []);
const addRecentStorage = () => {
let arr = [];
arrayRecentFonts.forEach(item => arr.push(item));
setRecent(getImageUri(arrayRecentFonts));
LocalStorage.setItem('sse-settings-recent-fonts', JSON.stringify(arr));
}
const [stateRecent, setRecent] = useState([]);
const [vlFonts, setVlFonts] = useState({
vlData: {
items: [],
}
});
const getImageUri = fonts => {
return fonts.map(font => {
thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
return thumbCanvas.toDataURL();
});
};
const renderExternal = (vl, vlData) => {
setVlFonts((prevState) => {
let fonts = [...prevState.vlData.items];
fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items);
let images = getImageUri(fonts);
return {vlData: {
items: fonts,
images,
}};
});
};
const getImageUri = (font) => {
thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
return thumbCanvas.toDataURL();
}
const storeFocusObjects = props.storeFocusObjects;
if ((storeFocusObjects.focusOn !== 'cell') && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
@ -205,7 +220,7 @@ const PageFontsCell = props => {
<ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
props.onFontClick(item.name);
}}>
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
<img src={stateRecent[index]} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
</ListItem>
))}
</List>
@ -221,7 +236,7 @@ const PageFontsCell = props => {
storeTextSettings.addFontToRecent(item);
addRecentStorage();
}}>
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
<img src={vlFonts.vlData.images[index]} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
</ListItem>
))}
</ul>

35
apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx
View file

@ -1,4 +1,4 @@
import React, {Fragment, useState} from 'react';
import React, {Fragment, useState, useEffect} from 'react';
import {observer, inject} from "mobx-react";
import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link} from 'framework7-react';
import { useTranslation } from 'react-i18next';
@ -109,35 +109,50 @@ const PageFonts = props => {
const spriteThumbs = storeTextSettings.spriteThumbs;
const arrayRecentFonts = storeTextSettings.arrayRecentFonts;
useEffect(() => {
setRecent(getImageUri(arrayRecentFonts));
return () => {
}
}, []);
const addRecentStorage = () => {
let arr = [];
arrayRecentFonts.forEach(item => arr.push(item));
setRecent(getImageUri(arrayRecentFonts));
LocalStorage.setItem('sse-settings-recent-fonts', JSON.stringify(arr));
}
const [stateRecent, setRecent] = useState([]);
const [vlFonts, setVlFonts] = useState({
vlData: {
items: [],
}
});
const getImageUri = fonts => {
return fonts.map(font => {
thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
return thumbCanvas.toDataURL();
});
};
const renderExternal = (vl, vlData) => {
setVlFonts((prevState) => {
let fonts = [...prevState.vlData.items];
fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items);
let images = getImageUri(fonts);
return {vlData: {
items: fonts,
images,
}};
});
};
const getImageUri = (font) => {
thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
return thumbCanvas.toDataURL();
}
return (
<Page>
<Navbar title={_t.textFonts} backLink={_t.textBack}>
@ -170,7 +185,7 @@ const PageFonts = props => {
<ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
props.changeFontFamily(item.name);
}}>
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
<img src={stateRecent[index]} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
</ListItem>
))}
</List>
@ -186,7 +201,7 @@ const PageFonts = props => {
storeTextSettings.addFontToRecent(item);
addRecentStorage();
}}>
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
<img src={vlFonts.vlData.images[index]} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
</ListItem>
))}
</ul>