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

Feature/fix bug reactjs
This commit is contained in:
maxkadushkin 2021-11-29 11:17:59 +03:00 committed by GitHub
commit cbc10ef0d1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 79 additions and 49 deletions

View file

@ -261,7 +261,7 @@ class SearchView extends Component {
</div>
<div className="searchbar-inner__center">
<div className="searchbar-input-wrap">
<input value={searchQuery} placeholder={_t.textSearch} type="search" maxLength="255"
<input className="searchbar-input" value={searchQuery} placeholder={_t.textSearch} type="search" maxLength="255"
onChange={e => {this.changeSearchQuery(e.target.value)}} />
{isIos ? <i className="searchbar-icon" /> : null}
<span className="input-clear-button" onClick={() => this.changeSearchQuery('')} />
@ -302,5 +302,6 @@ class SearchView extends Component {
}
const SearchViewWithObserver = observer(SearchView);
const SearchSettingsViewWithObserver = observer(SearchSettingsView);
export {SearchViewWithObserver as SearchView, SearchSettingsView};
export {SearchViewWithObserver as SearchView, SearchSettingsViewWithObserver as SearchSettingsView};

View file

@ -23,6 +23,7 @@ const AddCommentPopup = inject("storeComments")(observer(props => {
const _t = t('Common.Collaboration', {returnObjects: true});
useEffect(() => {
f7.popup.open('.add-comment-popup');
if(!Device.android) f7.input.focus('.input-comment');
});
const userInfo = props.userInfo;
const [stateText, setText] = useState('');
@ -59,7 +60,7 @@ const AddCommentPopup = inject("storeComments")(observer(props => {
<div className='name'>{userInfo.name}</div>
</div>
<div className='wrap-textarea'>
<Input type='textarea' placeholder={_t.textAddComment} autofocus value={stateText} onChange={(event) => {setText(event.target.value);}}></Input>
<Input className="input-comment" type='textarea' placeholder={_t.textAddComment} value={stateText} onChange={(event) => {setText(event.target.value);}}></Input>
</div>
</div>
</Popup>
@ -94,12 +95,13 @@ const AddCommentDialog = inject("storeComments")(observer(props => {
<div class='name'>${userInfo.name}</div>
</div>
<div class='wrap-textarea'>
<textarea id='comment-text' placeholder='${_t.textAddComment}' autofocus></textarea>
<textarea id='comment-text' placeholder='${_t.textAddComment}'></textarea>
</div>
</div>`,
on: {
opened: () => {
const cancel = document.getElementById('comment-cancel');
if(!Device.android) $$('#comment-text').focus();
cancel.addEventListener('click', () => {
f7.dialog.close();
props.closeAddComment();

View file

@ -231,47 +231,6 @@
}
}
// Theme
.slide-theme {
&__list {
margin: auto;
ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding-left: 18px;
padding-right: 18px;
padding-bottom: 14px;
}
}
.item-inner:after {
display: none;
}
.item-theme {
position: relative;
margin: 0;
box-shadow: 0 0 0 1px rgba(0,0,0,.15);
width: 88px;
height: 40px;
margin-top: 14px;
background-image: url(../img/themes/themes.png);
display: block;
background-repeat: no-repeat;
background-size: cover;
}
.item-theme.active:before {
content: '';
position: absolute;
width: 22px;
height: 22px;
right: -5px;
bottom: -5px;
z-index: 1;
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="#aa5252"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>');
}
}
// Transition
.slide-transition {

View file

@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect } from 'react';
import { List, ListItem, Toggle, Page, Navbar, NavRight, Link } from 'framework7-react';
import { SearchController, SearchView, SearchSettingsView } from '../../../../common/mobile/lib/controller/Search';
import { f7 } from 'framework7-react';
@ -25,6 +25,8 @@ class SearchSettings extends SearchSettingsView {
const _t = t("Settings", {returnObjects: true});
const storeAppOptions = this.props.storeAppOptions;
const isEdit = storeAppOptions.isEdit;
const storeReview = this.props.storeReview;
const displayMode = storeReview.displayMode;
const markup = (
<Page>
@ -37,7 +39,7 @@ class SearchSettings extends SearchSettingsView {
</Navbar>
<List>
<ListItem radio title={_t.textFind} name="find-replace-checkbox" checked={!this.state.useReplace} onClick={e => this.onFindReplaceClick('find')} />
{isEdit ? [
{isEdit && displayMode === 'markup' ? [
<ListItem key="replace" radio title={_t.textFindAndReplace} name="find-replace-checkbox" checked={this.state.useReplace}
onClick={e => this.onFindReplaceClick('replace')} />,
<ListItem key="replace-all" radio title={_t.textFindAndReplaceAll} name="find-replace-checkbox" checked={this.state.isReplaceAll}
@ -92,6 +94,14 @@ const Search = withTranslation()(props => {
const { t } = props;
const _t = t('Settings', {returnObjects: true});
useEffect(() => {
if (f7.searchbar.get('.searchbar')?.enabled && Device.phone) {
const api = Common.EditorApi.get();
$$('.searchbar-input').focus();
api.asc_enableKeyEvents(false);
}
});
const onSearchQuery = params => {
const api = Common.EditorApi.get();
@ -132,6 +142,6 @@ const Search = withTranslation()(props => {
return <DESearchView _t={_t} onSearchQuery={onSearchQuery} onchangeSearchQuery={onchangeSearchQuery} onReplaceQuery={onReplaceQuery} onReplaceAllQuery={onReplaceAllQuery} />
});
const SearchSettingsWithTranslation = inject("storeAppOptions")(observer(withTranslation()(SearchSettings)));
const SearchSettingsWithTranslation = inject("storeAppOptions", "storeReview")(observer(withTranslation()(SearchSettings)));
export {Search, SearchSettingsWithTranslation as SearchSettings}

View file

@ -69,6 +69,7 @@ const PageDocumentMargins = props => {
}
if(errorMsg) {
f7.popover.close('#settings-popover');
f7.dialog.alert(errorMsg, _t.notcriticalErrorTitle);
return;
}

View file

@ -1,4 +1,4 @@
import React from 'react';
import React, {useEffect} from 'react';
import { List, ListItem, Toggle, Page, Navbar, NavRight, Link } from 'framework7-react';
import { SearchController, SearchView, SearchSettingsView } from '../../../../common/mobile/lib/controller/Search';
import { f7 } from 'framework7-react';
@ -74,6 +74,14 @@ const Search = withTranslation()(props => {
const { t } = props;
const _t = t('View.Settings', {returnObjects: true});
useEffect(() => {
if (f7.searchbar.get('.searchbar')?.enabled && Device.phone) {
const api = Common.EditorApi.get();
$$('.searchbar-input').focus();
api.asc_enableKeyEvents(false);
}
});
const onSearchQuery = params => {
const api = Common.EditorApi.get();

View file

@ -99,3 +99,44 @@
.swiper-pagination-bullet-active{
background: @black;
}
// Theme
.slide-theme {
&__list {
margin: auto;
ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding-left: 18px;
padding-right: 18px;
padding-bottom: 14px;
}
}
.item-inner:after {
display: none;
}
.item-theme {
position: relative;
margin: 0;
box-shadow: 0 0 0 1px rgba(0,0,0,.15);
width: 88px;
height: 40px;
margin-top: 14px;
background-image: url('../../../../../../web-apps/apps/presentationeditor/mobile/dist/images/themes.png');
display: block;
background-repeat: no-repeat;
background-size: cover;
}
.item-theme.active:before {
content: '';
position: absolute;
width: 22px;
height: 22px;
right: -5px;
bottom: -5px;
z-index: 1;
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="#aa5252"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>');
}
}

View file

@ -137,6 +137,14 @@ const Search = withTranslation()(props => {
const { t } = props;
const _t = t('View.Settings', {returnObjects: true});
useEffect(() => {
if (f7.searchbar.get('.searchbar')?.enabled && Device.phone) {
const api = Common.EditorApi.get();
$$('.searchbar-input').focus();
api.asc_enableKeyEvents(false);
}
});
const onSearchQuery = params => {
const api = Common.EditorApi.get();