Merge pull request #1914 from ONLYOFFICE/feature/fix-bugs

Feature/fix bugs
This commit is contained in:
maxkadushkin 2022-08-26 10:46:10 +03:00 committed by GitHub
commit 1c6d91074f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 194 additions and 56 deletions

View file

@ -677,7 +677,7 @@ const ViewComments = inject("storeComments", "storeAppOptions", "storeReview")(o
</div>
{isEdit && !viewMode &&
<div className='right'>
{(comment.editable && displayMode === 'markup' && !wsProps?.Objects) && <div className='comment-resolve' onClick={() => {!isViewer && onResolveComment(comment);}}><Icon icon={comment.resolved ? 'icon-resolve-comment check' : 'icon-resolve-comment'} /></div> }
{(comment.editable && displayMode === 'markup' && !wsProps?.Objects && !isViewer) && <div className='comment-resolve' onClick={() => {onResolveComment(comment);}}><Icon icon={comment.resolved ? 'icon-resolve-comment check' : 'icon-resolve-comment'} /></div> }
{(displayMode === 'markup' && !wsProps?.Objects && !isViewer) &&
<div className='comment-menu'
onClick={() => {setComment(comment); openActionComment(true);}}>
@ -808,7 +808,7 @@ const CommentList = inject("storeComments", "storeAppOptions", "storeReview")(ob
</div>
{isEdit && !viewMode &&
<div className='right'>
{(comment.editable && displayMode === 'markup' && !wsProps?.Objects) && <div className='comment-resolve' onClick={() => {!isViewer && onResolveComment(comment);}}><Icon icon={comment.resolved ? 'icon-resolve-comment check' : 'icon-resolve-comment'}/></div>}
{(comment.editable && displayMode === 'markup' && !wsProps?.Objects && !isViewer) && <div className='comment-resolve' onClick={() => {onResolveComment(comment);}}><Icon icon={comment.resolved ? 'icon-resolve-comment check' : 'icon-resolve-comment'}/></div>}
{(displayMode === 'markup' && !wsProps?.Objects && !isViewer) &&
<div className='comment-menu'
onClick={() => {openActionComment(true);}}>
@ -822,43 +822,43 @@ const CommentList = inject("storeComments", "storeAppOptions", "storeReview")(ob
{comment.quote && <div className='comment-quote'>{sliceQuote(comment.quote)}</div>}
<div className='comment-text'><pre>{pickLink(comment.comment)}</pre></div>
{comment.replies.length > 0 &&
<ul className='reply-list'>
{comment.replies.map((reply, indexReply) => {
return (
<li key={`reply-${indexReply}`}
className='reply-item'
>
<div className='item-content'>
<div className='item-inner'>
<div className='item-title'>
<div slot='header' className='reply-header'>
<div className='left'>
{isAndroid && <div className='initials' style={{backgroundColor: `${reply.userColor ? reply.userColor : '#cfcfcf'}`}}>{reply.userInitials}</div>}
<div>
<div className='user-name'>{reply.parsedName}</div>
<div className='reply-date'>{reply.date}</div>
</div>
</div>
{isEdit && !viewMode && reply.editable && !isViewer &&
<div className='right'>
<div className='reply-menu'
onClick={() => {setReply(reply); openActionReply(true);}}
>
<Icon icon='icon-menu-comment'/>
<ul className='reply-list'>
{comment.replies.map((reply, indexReply) => {
return (
<li key={`reply-${indexReply}`}
className='reply-item'
>
<div className='item-content'>
<div className='item-inner'>
<div className='item-title'>
<div slot='header' className='reply-header'>
<div className='left'>
{isAndroid && <div className='initials' style={{backgroundColor: `${reply.userColor ? reply.userColor : '#cfcfcf'}`}}>{reply.userInitials}</div>}
<div>
<div className='user-name'>{reply.parsedName}</div>
<div className='reply-date'>{reply.date}</div>
</div>
</div>
}
</div>
<div slot='footer'>
<div className='reply-text'><pre>{pickLink(reply.reply)}</pre></div>
{isEdit && !viewMode && reply.editable && !isViewer &&
<div className='right'>
<div className='reply-menu'
onClick={() => {setReply(reply); openActionReply(true);}}
>
<Icon icon='icon-menu-comment'/>
</div>
</div>
}
</div>
<div slot='footer'>
<div className='reply-text'><pre>{pickLink(reply.reply)}</pre></div>
</div>
</div>
</div>
</div>
</div>
</li>
)
})}
</ul>
</li>
)
})}
</ul>
}
</div>
</ListItem>

View file

@ -677,6 +677,8 @@
"dlgLeaveTitleText": "You leave the application",
"leaveButtonText": "Leave this Page",
"stayButtonText": "Stay on this page",
"textOk": "OK"
"textOk": "OK",
"textSwitchedMobileView": "Switched to Mobile view",
"textSwitchedStandardView": "Switched to Standard view"
}
}

View file

@ -0,0 +1,13 @@
import React from 'react';
const Snackbar = props => {
return (
<div className="snackbar">
<div className="snackbar__content">
<p className="snackbar__text">{props.text}</p>
</div>
</div>
)
}
export default Snackbar;

View file

@ -124,7 +124,7 @@ class MainController extends Component {
docInfo = new Asc.asc_CDocInfo();
docInfo.put_Id(data.doc.key);
docInfo.put_Url(data.doc.url);
// docInfo.put_DirectUrl(data.doc.directUrl);
docInfo.put_DirectUrl(data.doc.directUrl);
docInfo.put_Title(data.doc.title);
docInfo.put_Format(data.doc.fileType);
docInfo.put_VKey(data.doc.vkey);
@ -273,7 +273,7 @@ class MainController extends Component {
this.api.Resize();
this.api.zoomFitToWidth();
this.api.asc_GetDefaultTableStyles && setTimeout(() => {this.api.asc_GetDefaultTableStyles()}, 1);
this.api.ChangeReaderMode();
this.applyLicense();
Common.Notifications.trigger('document:ready');

View file

@ -29,6 +29,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto
const showEditDocument = !appOptions.isEdit && appOptions.canEdit && appOptions.canRequestEditRights;
const docInfo = props.storeDocumentInfo;
const docExt = docInfo.dataDoc ? docInfo.dataDoc.fileType : '';
const docTitle = docInfo.dataDoc ? docInfo.dataDoc.title : '';
useEffect(() => {
@ -151,8 +152,10 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto
return (
<ToolbarView openOptions={props.openOptions}
closeOptions={props.closeOptions}
isEdit={appOptions.isEdit}
docTitle={docTitle}
docExt={docExt}
isShowBack={isShowBack}
onBack={onBack}
isCanUndo={isCanUndo}

View file

@ -88,14 +88,15 @@ const Settings = props => {
appOptions.changeMobileView();
api.ChangeReaderMode();
if (Device.phone) {
if(Device.phone) {
closeModal();
}
}
return <SettingsView usePopover={!Device.phone}
openOptions={props.openOptions}
onclosed={props.onclosed}
closeOptions={props.closeOptions}
// onclosed={props.onclosed}
onPrint={onPrint}
showHelp={showHelp}
showFeedback={showFeedback}

View file

@ -1,5 +1,4 @@
.ios {
// Stepper
.content-block.stepper-block {
margin: 20px 0;
@ -58,5 +57,36 @@
.back-reader-mode {
margin-left: 10px;
}
// Snackbar
.snackbar {
max-width: 195px;
max-height: 48px;
position: absolute;
bottom: 24px;
left: calc(50% - 195px / 2);
background: rgba(0, 0, 0, .9);
border-radius: 4px;
z-index: 1000000;
&__content {
padding: 15px 16.5px;
}
&__text {
margin: 0;
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 18px;
letter-spacing: -0.078px;
color: @fill-white;
text-align: center;
}
}
@media(max-width: 450px) {
.snackbar {
bottom: 50px;
}
}
}

View file

@ -105,4 +105,42 @@
}
}
}
// Snackbar
.snackbar {
position: absolute;
width: 344px;
max-height: 48px;
left: calc(50% - 344px / 2);
bottom: 16px;
background: #333333;
border-radius: 4px;
z-index: 1000000;
&__content {
padding: 14px 16px;
}
&__text {
margin: 0;
color: @fill-white;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.25px;
text-align: center;
}
}
@media(max-width: 450px) {
.snackbar {
width: auto;
max-width: 100%;
left: 16px;
right: 16px;
bottom: 8px;
&__text {
text-align: left;
}
}
}
}

View file

@ -328,3 +328,19 @@
}
}
// Snackbar animation
.snackbar-enter {
opacity: 0;
}
.snackbar-enter-active {
opacity: 1;
transition: opacity 300ms;
}
.snackbar-exit {
opacity: 1;
}
.snackbar-exit-active {
opacity: 0;
transition: opacity 300ms;
}

View file

@ -1,9 +1,10 @@
import React, { Component } from 'react';
import { CSSTransition } from 'react-transition-group';
import { f7, Link } from 'framework7-react';
import { Page, View, Navbar, Subnavbar, Icon } from 'framework7-react';
import { observer, inject } from "mobx-react";
import { withTranslation } from 'react-i18next';
import EditOptions from '../view/edit/Edit';
import AddOptions from '../view/add/Add';
import Settings from '../controller/settings/Settings';
@ -13,6 +14,7 @@ import { Search, SearchSettings } from '../controller/Search';
import ContextMenu from '../controller/ContextMenu';
import { Toolbar } from "../controller/Toolbar";
import NavigationController from '../controller/settings/Navigation';
import Snackbar from "../components/Snackbar/Snackbar";
class MainPage extends Component {
constructor(props) {
@ -23,7 +25,8 @@ class MainPage extends Component {
addShowOptions: null,
settingsVisible: false,
collaborationVisible: false,
navigationVisible: false
navigationVisible: false,
snackbarVisible: false
};
}
@ -49,6 +52,9 @@ class MainPage extends Component {
} else if( opts === 'navigation') {
this.state.navigationVisible && (opened = true);
newState.navigationVisible = true;
} else if( opts === 'snackbar') {
this.state.snackbarVisible && (opened = true);
newState.snackbarVisible = true;
}
for (let key in this.state) {
@ -82,6 +88,8 @@ class MainPage extends Component {
return {collaborationVisible: false};
else if( opts == 'navigation')
return {navigationVisible: false}
else if( opts == 'snackbar')
return {snackbarVisible: false}
});
if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
f7.navbar.show('.main-navbar');
@ -91,9 +99,9 @@ class MainPage extends Component {
};
render() {
const { t } = this.props;
const appOptions = this.props.storeAppOptions;
// const isViewer = appOptions.isViewer;
// console.log(isViewer);
const isMobileView = appOptions.isMobileView;
const config = appOptions.config;
let showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
@ -165,9 +173,10 @@ class MainPage extends Component {
!this.state.addOptionsVisible ? null :
<AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
}
{/*onclosed={this.handleOptionsViewClosed.bind(this, 'settings')}*/}
{
!this.state.settingsVisible ? null :
<Settings openOptions={this.handleClickToOpenOptions.bind(this)} onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
<Settings openOptions={this.handleClickToOpenOptions.bind(this)} closeOptions={this.handleOptionsViewClosed.bind(this)} />
}
{
!this.state.collaborationVisible ? null :
@ -177,10 +186,21 @@ class MainPage extends Component {
!this.state.navigationVisible ? null :
<NavigationController onclosed={this.handleOptionsViewClosed.bind(this, 'navigation')} />
}
{
<CSSTransition
in={this.state.snackbarVisible}
timeout={500}
classNames="snackbar"
mountOnEnter
unmountOnExit
>
<Snackbar text={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")} />
</CSSTransition>
}
{appOptions.isDocReady && <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} />}
</Page>
)
}
}
export default inject("storeAppOptions")(observer(MainPage));
export default inject("storeAppOptions")(observer(withTranslation()(MainPage)));

View file

@ -35,7 +35,7 @@ export class storeAppOptions {
isEdit = false;
isMobileView = false;
isMobileView = true;
changeMobileView() {
this.isMobileView = !this.isMobileView;
}

View file

@ -2,11 +2,13 @@ import React, {Fragment} from 'react';
import { useTranslation } from 'react-i18next';
import {NavLeft, NavRight, NavTitle, Link, Icon} from 'framework7-react';
import { Device } from '../../../../common/mobile/utils/device';
import EditorUIController from '../lib/patch'
import EditorUIController from '../lib/patch';
const ToolbarView = props => {
const { t } = useTranslation();
const isDisconnected = props.isDisconnected;
const docExt = props.docExt;
const isAvailableExt = docExt && docExt !== 'djvu' && docExt !== 'pdf' && docExt !== 'xps';
const disableEditBtn = props.isObjectLocked || props.stateDisplayMode || props.disabledEditControls || isDisconnected;
const isViewer = props.isViewer;
const isMobileView = props.isMobileView;
@ -44,16 +46,22 @@ const ToolbarView = props => {
onUndoClick: props.onUndo,
onRedoClick: props.onRedo
})}
{(isViewer || !Device.phone) && <Link className={props.disabledControls ? 'disabled' : ''} icon={isMobileView ? 'icon-standard-view' : 'icon-mobile-view'} href={false} onClick={() => props.changeMobileView()}></Link>}
{(isViewer || !Device.phone) && isAvailableExt && <Link className={props.disabledControls ? 'disabled' : ''} icon={isMobileView ? 'icon-standard-view' : 'icon-mobile-view'} href={false} onClick={() => {
props.changeMobileView();
props.openOptions('snackbar');
setTimeout(() => {
props.closeOptions('snackbar');
}, 500);
}}></Link>}
{(props.showEditDocument && !isViewer) &&
<Link className={props.disabledControls ? 'disabled' : ''} icon='icon-edit' href={false} onClick={props.onEditDocument}></Link>
}
{props.isEdit && !isViewer && EditorUIController.getToolbarOptions && EditorUIController.getToolbarOptions({
{props.isEdit && isAvailableExt && !isViewer && EditorUIController.getToolbarOptions && EditorUIController.getToolbarOptions({
disabled: disableEditBtn || props.disabledControls,
onEditClick: e => props.openOptions('edit'),
onAddClick: e => props.openOptions('add')
})}
{isViewer && <Link icon='icon-edit-mode' className={(props.disabledSettings || props.disabledControls || isDisconnected) && 'disabled'} href={false} onClick={() => props.turnOffViewerMode()}></Link>}
{isViewer && isAvailableExt && <Link icon='icon-edit-mode' className={(props.disabledSettings || props.disabledControls || isDisconnected) && 'disabled'} href={false} onClick={() => props.turnOffViewerMode()}></Link>}
{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 || isDisconnected) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={e => props.openOptions('settings')}></Link>

View file

@ -163,7 +163,13 @@ const SettingsList = inject("storeAppOptions", "storeReview")(observer(props =>
{!isViewer && Device.phone &&
<ListItem title={t('Settings.textMobileView')}>
<Icon slot="media" icon="icon-mobile-view"></Icon>
<Toggle checked={isMobileView} onToggleChange={() => props.onChangeMobileView()} />
<Toggle checked={isMobileView} onToggleChange={() => {
props.onChangeMobileView();
props.openOptions('snackbar');
setTimeout( () => {
props.closeOptions('snackbar');
}, 1000);
}} />
</ListItem>
}
{(_isEdit && !isViewer) &&
@ -230,11 +236,11 @@ class SettingsView extends Component {
const show_popover = this.props.usePopover;
return (
show_popover ?
<Popover id="settings-popover" closeByOutsideClick={false} className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
<SettingsList inPopover={true} onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} style={{height: '410px'}} onChangeMobileView={this.props.onChangeMobileView} onPrint={this.props.onPrint} showHelp={this.props.showHelp} showFeedback={this.props.showFeedback} onOrthographyCheck={this.props.onOrthographyCheck} onDownloadOrigin={this.props.onDownloadOrigin}/>
<Popover id="settings-popover" closeByOutsideClick={false} className="popover__titled" onPopoverClosed={() => this.props.closeOptions('settings')}>
<SettingsList inPopover={true} onOptionClick={this.onoptionclick} closeOptions={this.props.closeOptions} openOptions={this.props.openOptions} style={{height: '410px'}} onChangeMobileView={this.props.onChangeMobileView} onPrint={this.props.onPrint} showHelp={this.props.showHelp} showFeedback={this.props.showFeedback} onOrthographyCheck={this.props.onOrthographyCheck} onDownloadOrigin={this.props.onDownloadOrigin}/>
</Popover> :
<Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}>
<SettingsList onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} onChangeMobileView={this.props.onChangeMobileView} onPrint={this.props.onPrint} showHelp={this.props.showHelp} showFeedback={this.props.showFeedback} onOrthographyCheck={this.props.onOrthographyCheck} onDownloadOrigin={this.props.onDownloadOrigin}/>
<Popup className="settings-popup" onPopupClosed={() => this.props.closeOptions('settings')}>
<SettingsList onOptionClick={this.onoptionclick} closeOptions={this.props.closeOptions} openOptions={this.props.openOptions} onChangeMobileView={this.props.onChangeMobileView} onPrint={this.props.onPrint} showHelp={this.props.showHelp} showFeedback={this.props.showFeedback} onOrthographyCheck={this.props.onOrthographyCheck} onDownloadOrigin={this.props.onDownloadOrigin}/>
</Popup>
)
}

View file

@ -38,6 +38,7 @@
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-i18next": "^11.8.5",
"react-transition-group": "^4.4.5",
"swiper": "^8.2.4",
"template7": "^1.4.2"
},