Merge branch 'feature/mobile-apps-on-reactjs-de' into feature/mobile-apps-on-reactjs
This commit is contained in:
JuliaSvinareva
commit
586dbd5449
|
|
@ -1,6 +1,5 @@
|
|||
import React from 'react';
|
||||
import SearchView, {SearchSettingsView} from '../view/Search'
|
||||
|
||||
import {SearchView, SearchSettingsView} from '../view/Search';
|
||||
|
||||
const SearchController = props => {
|
||||
const onSearchQuery = params => {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { Toggle } from 'framework7-react';
|
|||
import { f7 } from 'framework7-react';
|
||||
import { Dom7 } from 'framework7';
|
||||
import { Device } from '../../../../common/mobile/utils/device';
|
||||
import { observable } from "mobx";
|
||||
import { observable, runInAction } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
|
||||
const searchOptions = observable({
|
||||
|
|
@ -24,18 +24,23 @@ class SearchSettingsView extends Component {
|
|||
|
||||
this.state = {
|
||||
useReplace: false,
|
||||
caseSensitive: false,
|
||||
markResults: false
|
||||
// caseSensitive: false,
|
||||
// markResults: false
|
||||
searchIn: 0,
|
||||
searchBy: 1,
|
||||
lookIn: 1,
|
||||
isMatchCase: false,
|
||||
isMatchCell: false
|
||||
};
|
||||
}
|
||||
|
||||
onFindReplaceClick(action) {
|
||||
searchOptions.usereplace = action == 'replace';
|
||||
runInAction(() => searchOptions.usereplace = action == 'replace');
|
||||
|
||||
this.setState({
|
||||
useReplace: searchOptions.usereplace
|
||||
});
|
||||
|
||||
|
||||
if (this.onReplaceChecked) {}
|
||||
}
|
||||
|
||||
|
|
@ -43,39 +48,43 @@ class SearchSettingsView extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const show_popover = true;
|
||||
const navbar =
|
||||
<Navbar title="Find and replace">
|
||||
{!show_popover &&
|
||||
<NavRight>
|
||||
<Link popupClose=".search-settings-popup">Done</Link>
|
||||
</NavRight>}
|
||||
</Navbar>;
|
||||
const show_popover = !Device.phone;
|
||||
// const navbar =
|
||||
// <Navbar title="Find and replace">
|
||||
// {!show_popover &&
|
||||
// <NavRight>
|
||||
// <Link popupClose=".search-settings-popup">Done</Link>
|
||||
// </NavRight>
|
||||
// }
|
||||
// </Navbar>;
|
||||
const extra = this.extraSearchOptions();
|
||||
const content =
|
||||
<View style={popoverStyle}>
|
||||
<Page>
|
||||
{navbar}
|
||||
<List>
|
||||
<ListItem radio title="Find" name="find-replace-checkbox" checked={!this.state.useReplace} onClick={e => this.onFindReplaceClick('find')} />
|
||||
<ListItem radio title="Find and replace" name="find-replace-checkbox" checked={this.state.useReplace} onClick={e => this.onFindReplaceClick('replace')} />
|
||||
</List>
|
||||
{ extra }
|
||||
</Page>
|
||||
<View style={show_popover ? popoverStyle : null}>
|
||||
{/* <Page> */}
|
||||
{/* {navbar} */}
|
||||
{extra}
|
||||
{/* </Page> */}
|
||||
</View>;
|
||||
return (
|
||||
show_popover ?
|
||||
<Popover id="idx-search-settings" className="popover__titled">{content}</Popover> :
|
||||
<Popup id="idx-search-settings">{content}</Popup>
|
||||
<Popup id="idx-search-settings" className="search-settings-popup">{content}</Popup>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@observer
|
||||
// @observer
|
||||
class SearchView extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
searchQuery: '',
|
||||
replaceQuery: ''
|
||||
};
|
||||
|
||||
const $$ = Dom7;
|
||||
|
||||
$$(document).on('page:init', (e, page) => {
|
||||
if ( page.name == 'home' ) {
|
||||
this.searchbar = f7.searchbar.create({
|
||||
|
|
@ -84,7 +93,7 @@ class SearchView extends Component {
|
|||
expandable: true,
|
||||
backdrop: false,
|
||||
on: {
|
||||
search: (bar, curval, prevval) => {
|
||||
search: (bar, curval, prevval) => {
|
||||
},
|
||||
enable: this.onSearchbarShow.bind(this, true),
|
||||
disable: this.onSearchbarShow.bind(this, false)
|
||||
|
|
@ -97,8 +106,9 @@ class SearchView extends Component {
|
|||
// return (m = /(iPad|iPhone|iphone).*?(OS |os |OS\_)(\d+((_|\.)\d)?((_|\.)\d)?)/.exec(ua)) ? parseFloat(m[3]) : 0;
|
||||
// }
|
||||
|
||||
const $$ = Dom7;
|
||||
const $editor = $$('#editor_sdk');
|
||||
// const $replaceLink = $$('#replace-link');
|
||||
|
||||
if (false /*iOSVersion() < 13*/) {
|
||||
// $editor.single('mousedown touchstart', _.bind(me.onEditorTouchStart, me));
|
||||
// $editor.single('mouseup touchend', _.bind(me.onEditorTouchEnd, me));
|
||||
|
|
@ -109,21 +119,23 @@ class SearchView extends Component {
|
|||
|
||||
$editor.on('pointerdown', this.onEditorTouchStart.bind(this));
|
||||
$editor.on('pointerup', this.onEditorTouchEnd.bind(this));
|
||||
// $replaceLink.on('click', this.onReplaceHold.bind(this));
|
||||
}
|
||||
});
|
||||
|
||||
this.onSettingsClick = this.onSettingsClick.bind(this);
|
||||
this.onSearchClick = this.onSearchClick.bind(this);
|
||||
this.onReplaceClick = this.onReplaceClick.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
const $$ = Dom7;
|
||||
this.$repalce = $$('#idx-replace-val');
|
||||
this.$replace = $$('#idx-replace-val');
|
||||
}
|
||||
|
||||
onSettingsClick(e) {
|
||||
if ( Device.phone ) {
|
||||
// f7.popup.open('.settings-popup');
|
||||
f7.popup.open('.search-settings-popup');
|
||||
} else f7.popover.open('#idx-search-settings', '#idx-btn-search-settings');
|
||||
}
|
||||
|
||||
|
|
@ -132,41 +144,79 @@ class SearchView extends Component {
|
|||
find: this.searchbar.query
|
||||
};
|
||||
|
||||
if ( searchOptions.usereplace )
|
||||
if (searchOptions.usereplace) {
|
||||
params.replace = this.$replace.val();
|
||||
}
|
||||
|
||||
return params;
|
||||
}
|
||||
|
||||
onSearchClick(action) {
|
||||
if ( this.searchbar && this.searchbar.query) {
|
||||
if ( this.props.onSearchQuery ) {
|
||||
if (this.searchbar && this.state.searchQuery) {
|
||||
if (this.props.onSearchQuery) {
|
||||
let params = this.searchParams();
|
||||
params.find = this.state.searchQuery;
|
||||
params.forward = action != SEARCH_BACKWARD;
|
||||
// console.log(params);
|
||||
|
||||
this.props.onSearchQuery(params);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onReplaceClick() {
|
||||
if (this.searchbar && this.state.searchQuery) {
|
||||
if (this.props.onReplaceQuery) {
|
||||
let params = this.searchParams();
|
||||
params.find = this.state.searchQuery;
|
||||
// console.log(params);
|
||||
|
||||
this.props.onReplaceQuery(params);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onReplaceAllClick() {
|
||||
if (this.searchbar && this.state.searchQuery) {
|
||||
if (this.props.onReplaceAllQuery) {
|
||||
let params = this.searchParams();
|
||||
params.find = this.state.searchQuery;
|
||||
// console.log(params);
|
||||
|
||||
this.props.onReplaceAllQuery(params);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onSearchbarShow(isshowed, bar) {
|
||||
if ( !isshowed ) {
|
||||
this.$repalce.val('');
|
||||
this.$replace.val('');
|
||||
}
|
||||
}
|
||||
|
||||
onEditorTouchStart(e) {
|
||||
this.startPoint = this.pointerPosition(e);
|
||||
// console.log(this.startPoint);
|
||||
}
|
||||
|
||||
onEditorTouchEnd(e) {
|
||||
const endPoint = this.pointerPosition(e);
|
||||
// console.log(endPoint);
|
||||
|
||||
if ( this.searchbar.enabled ) {
|
||||
const distance = (this.startPoint.x === undefined || this.startPoint.y === undefined) ? 0 :
|
||||
Math.sqrt((endPoint.x -= this.startPoint.x) * endPoint.x + (endPoint.y -= this.startPoint.y) * endPoint.y);
|
||||
if (this.searchbar.enabled) {
|
||||
let distance;
|
||||
|
||||
if ( distance < 1 ) {
|
||||
if(this.startPoint) {
|
||||
distance = (!!this.startPoint.x || !!this.startPoint.y) ? 0 :
|
||||
Math.sqrt((endPoint.x -= this.startPoint.x) * endPoint.x + (endPoint.y -= this.startPoint.y) * endPoint.y);
|
||||
} else {
|
||||
distance = 0;
|
||||
}
|
||||
|
||||
// const distance = (this.startPoint.x === undefined || this.startPoint.y === undefined) ? 0 :
|
||||
// Math.sqrt((endPoint.x -= this.startPoint.x) * endPoint.x + (endPoint.y -= this.startPoint.y) * endPoint.y);
|
||||
|
||||
if (distance < 1) {
|
||||
this.searchbar.disable();
|
||||
}
|
||||
}
|
||||
|
|
@ -178,8 +228,7 @@ class SearchView extends Component {
|
|||
const touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
|
||||
out.x = touch.pageX;
|
||||
out.y = touch.pageY;
|
||||
} else
|
||||
if ( e.type == 'mousedown' || e.type == 'mouseup' ) {
|
||||
} else if ( e.type == 'mousedown' || e.type == 'mouseup' ) {
|
||||
out.x = e.pageX;
|
||||
out.y = e.pageY;
|
||||
}
|
||||
|
|
@ -187,35 +236,66 @@ class SearchView extends Component {
|
|||
return out;
|
||||
}
|
||||
|
||||
changeSearchQuery(value) {
|
||||
this.setState({
|
||||
searchQuery: value
|
||||
});
|
||||
}
|
||||
|
||||
changeReplaceQuery(value) {
|
||||
this.setState({
|
||||
replaceQuery: value
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const usereplace = searchOptions.usereplace;
|
||||
const hidden = {display: "none"};
|
||||
const searchQuery = this.state.searchQuery;
|
||||
const replaceQuery = this.state.replaceQuery;
|
||||
const isIos = Device.ios;
|
||||
const { _t } = this.props;
|
||||
|
||||
if(this.searchbar && this.searchbar.enabled) {
|
||||
usereplace ? this.searchbar.el.classList.add('replace') : this.searchbar.el.classList.remove('replace');
|
||||
}
|
||||
|
||||
return (
|
||||
<form className="searchbar">
|
||||
<div className="searchbar-bg"></div>
|
||||
{isIos ? <div className="searchbar-bg"></div> : null}
|
||||
<div className="searchbar-inner">
|
||||
<div className="buttons-row">
|
||||
<div className="buttons-row searchbar-inner__left">
|
||||
<a id="idx-btn-search-settings" className="link icon-only" onClick={this.onSettingsClick}>
|
||||
<i className="icon icon-settings" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="searchbar-input-wrap">
|
||||
<input placeholder="Search" type="search" />
|
||||
<i className="searchbar-icon" />
|
||||
<span className="input-clear-button" />
|
||||
<div className="searchbar-inner__center">
|
||||
<div className="searchbar-input-wrap">
|
||||
<input placeholder={_t.textSearch} type="search" value={searchQuery}
|
||||
onChange={e => {this.changeSearchQuery(e.target.value)}} />
|
||||
{isIos ? <i className="searchbar-icon" /> : null}
|
||||
<span className="input-clear-button" />
|
||||
</div>
|
||||
<div className="searchbar-input-wrap" style={!usereplace ? hidden: null}>
|
||||
<input placeholder={_t.textReplace} type="search" id="idx-replace-val" value={replaceQuery}
|
||||
onChange={e => {this.changeReplaceQuery(e.target.value)}} />
|
||||
{isIos ? <i className="searchbar-icon" /> : null}
|
||||
<span className="input-clear-button" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="searchbar-input-wrap" style={!usereplace ? hidden: null}>
|
||||
<input placeholder="Replace" type="search" id="idx-replace-val" />
|
||||
<i className="searchbar-icon" />
|
||||
<span className="input-clear-button" />
|
||||
</div>
|
||||
<div className="buttons-row">
|
||||
<a className="link icon-only prev" onClick={e => this.onSearchClick(SEARCH_BACKWARD)}>
|
||||
<i className="icon icon-prev" />
|
||||
</a>
|
||||
<a className="link icon-only next" onClick={e => this.onSearchClick(SEARCH_FORWARD)}>
|
||||
<i className="icon icon-next" />
|
||||
</a>
|
||||
<div className="buttons-row searchbar-inner__right">
|
||||
<div className="buttons-row buttons-row-replace">
|
||||
<a id="replace-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceClick()}>{_t.textReplace}</a>
|
||||
<a id="replace-all-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceAllClick()}>{_t.textReplaceAll}</a>
|
||||
</div>
|
||||
<div className="buttons-row">
|
||||
<a className={"link icon-only prev " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_BACKWARD)}>
|
||||
<i className="icon icon-prev" />
|
||||
</a>
|
||||
<a className={"link icon-only next " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_FORWARD)}>
|
||||
<i className="icon icon-next" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -223,4 +303,6 @@ class SearchView extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export {SearchView as default, SearchView, SearchSettingsView};
|
||||
const SearchViewWithObserver = observer(SearchView);
|
||||
|
||||
export {SearchViewWithObserver as SearchView, SearchSettingsView};
|
||||
|
|
|
|||
|
|
@ -390,4 +390,70 @@
|
|||
background-color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
// Find and Replace
|
||||
|
||||
.navbar {
|
||||
.searchbar-input-wrap {
|
||||
margin-right: 10px;
|
||||
height: 28px;
|
||||
}
|
||||
.buttons-row-replace a {
|
||||
color: @themeColor;
|
||||
}
|
||||
}
|
||||
|
||||
.searchbar input[type=search] {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
border: none;
|
||||
appearance: none;
|
||||
border-radius: 5px;
|
||||
font-family: inherit;
|
||||
color: @black;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
padding: 0 8px;
|
||||
background-color: @white;
|
||||
padding: 0 28px;
|
||||
}
|
||||
|
||||
.searchbar-inner {
|
||||
&__right {
|
||||
.buttons-row a.next {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 550px)
|
||||
{
|
||||
.searchbar-expandable.searchbar-enabled {
|
||||
top: 0;
|
||||
.searchbar-inner {
|
||||
&__left {
|
||||
margin-right: 15px;
|
||||
}
|
||||
&__center {
|
||||
flex-direction: column;
|
||||
}
|
||||
&__right {
|
||||
flex-direction: column-reverse;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
&.replace {
|
||||
height: 88px;
|
||||
.searchbar-inner {
|
||||
&__center {
|
||||
.searchbar-input-wrap {
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -286,4 +286,116 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Find and Replace
|
||||
|
||||
.searchbar-inner {
|
||||
&__center {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
&__left {
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons-row-replace a {
|
||||
color: @white;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
.searchbar-input-wrap {
|
||||
height: 32px;
|
||||
margin-right: 10px;
|
||||
margin: 4px 0;
|
||||
}
|
||||
&-inner {
|
||||
overflow: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.searchbar .input-clear-button {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
&:after {
|
||||
color: @white;
|
||||
font-size: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.searchbar-icon {
|
||||
&:after {
|
||||
color: @white;
|
||||
font-size: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.searchbar input[type=search] {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
display: block;
|
||||
border: none;
|
||||
appearance: none;
|
||||
border-radius: 0;
|
||||
font-family: inherit;
|
||||
color: @white;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
padding: 0;
|
||||
border-bottom: 1px solid @white;
|
||||
height: 100%;
|
||||
padding: 0 36px 0 24px;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 center;
|
||||
opacity: 1;
|
||||
background-size: 24px 24px;
|
||||
transition-duration: .3s;
|
||||
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" fill="@{white}" height="24" viewBox="0 0 24 24" width="24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
|
||||
}
|
||||
|
||||
.searchbar input[type=search]::placeholder {
|
||||
color: @white;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
.searchbar-expandable.searchbar-enabled {
|
||||
top: 0;
|
||||
// height: 100%;
|
||||
.searchbar-inner {
|
||||
height: 100%;
|
||||
&__center {
|
||||
flex-direction: column;
|
||||
}
|
||||
&__right {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
&.replace {
|
||||
height: 96px;
|
||||
}
|
||||
}
|
||||
a.link {
|
||||
padding: 0 16px;
|
||||
}
|
||||
a.icon-only {
|
||||
width: auto;
|
||||
height: 48px;
|
||||
}
|
||||
.buttons-row-replace a {
|
||||
color: @white;
|
||||
}
|
||||
.searchbar .buttons-row {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 550px) {
|
||||
.searchbar-expandable.searchbar-enabled {
|
||||
.searchbar-inner {
|
||||
&__left {
|
||||
margin-right: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,16 +4,21 @@
|
|||
&.icon_mask {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
&.icon-prev {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M16,20.5L15,21.5L4.5,11l0,0l0,0L15,0.5L16,1.5L6.6,11L16,20.5z"/></g></svg>');
|
||||
.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="@{themeColor}"><g><path d="M16,20.5L15,21.5L4.5,11l0,0l0,0L15,0.5L16,1.5L6.6,11L16,20.5z"/></g></svg>');
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.icon-next {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M15.5,11L6,1.5l1.1-1.1L17.5,11l0,0l0,0L7.1,21.5L6,20.5L15.5,11z"/></g></svg>');
|
||||
.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="@{themeColor}"><g><path d="M15.5,11L6,1.5l1.1-1.1L17.5,11l0,0l0,0L7.1,21.5L6,20.5L15.5,11z"/></g></svg>');
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,16 +4,21 @@
|
|||
&.icon_mask {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
&.icon-prev {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.4219 7.40625L10.8281 12L15.4219 16.5938L14.0156 18L8.01562 12L14.0156 6L15.4219 7.40625Z" fill="@{themeColor}"/></svg>');
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
.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="@{white}"><g><polygon points="5.1,10.9 13.9,2 16,4.1 9.2,11.1 16,17.9 13.9,20 5.1,11.2 5,11.1 "/></g></svg>');
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.icon-next {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.98438 6L15.9844 12L9.98438 18L8.57812 16.5938L13.1719 12L8.57812 7.40625L9.98438 6Z" fill="@{themeColor}"/></svg>');
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
.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="@{white}"><g><polygon points="16.9,10.9 8.1,2 6,4.1 12.8,11.1 6,17.9 8.1,20 16.9,11.2 17,11.1 "/></g></svg>');
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,59 @@
|
|||
}
|
||||
}
|
||||
|
||||
.searchbar-input-wrap {
|
||||
margin-right: 10px;
|
||||
.searchbar-inner {
|
||||
&__center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
&__right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.searchbar-expandable {
|
||||
transition-duration: 0s;
|
||||
}
|
||||
|
||||
.buttons-row-replace {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: max-content;
|
||||
a {
|
||||
font-size: 15px;
|
||||
height: auto;
|
||||
display: block;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 550px)
|
||||
{
|
||||
.searchbar-expandable.searchbar-enabled {
|
||||
.searchbar-inner {
|
||||
&__left {
|
||||
min-width: 22px;
|
||||
max-width: 22px;
|
||||
}
|
||||
&__center {
|
||||
flex-direction: column;
|
||||
}
|
||||
&__right {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
&.replace {
|
||||
top: 0;
|
||||
.searchbar-inner {
|
||||
height: 100%;
|
||||
&__left {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -210,7 +210,13 @@
|
|||
"advDRMPassword": "Password",
|
||||
"closeButtonText": "Close File",
|
||||
"advDRMOptions": "Protected File",
|
||||
"txtProtected": "Once you enter the password and open the file, the current password to the file will be reset"
|
||||
"txtProtected": "Once you enter the password and open the file, the current password to the file will be reset",
|
||||
"textNoTextFound": "Text not found",
|
||||
"textReplace": "Replace",
|
||||
"textReplaceAll": "Replace All",
|
||||
"textCaseSensitive": "Case Sensitive",
|
||||
"textHighlightResults": "Highlight Results",
|
||||
"textSearch": "Search"
|
||||
},
|
||||
"Edit": {
|
||||
"textClose": "Close",
|
||||
|
|
@ -311,7 +317,6 @@
|
|||
"textAutomatic": "Automatic",
|
||||
"textAddCustomColor": "Add Custom Color",
|
||||
"textCustomColor": "Custom Color",
|
||||
"textBackground": "Background",
|
||||
"textFill": "Fill",
|
||||
"textBorder": "Border",
|
||||
"textEffects": "Effects",
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import React from 'react';
|
||||
import { List, ListItem, Toggle } from 'framework7-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';
|
||||
|
||||
import { withTranslation } from 'react-i18next';
|
||||
import { Device } from '../../../../common/mobile/utils/device';
|
||||
|
||||
class SearchSettings extends SearchSettingsView {
|
||||
constructor(props) {
|
||||
|
|
@ -18,21 +19,43 @@ class SearchSettings extends SearchSettingsView {
|
|||
|
||||
extraSearchOptions() {
|
||||
const anc_markup = super.extraSearchOptions();
|
||||
const show_popover = !Device.phone;
|
||||
const { t } = this.props;
|
||||
const _t = t("Settings", {returnObjects: true});
|
||||
|
||||
const markup = <List>
|
||||
<ListItem title="Case sensitive">
|
||||
const markup = (
|
||||
<Page>
|
||||
<Navbar title={_t.textFindAndReplace}>
|
||||
{!show_popover &&
|
||||
<NavRight>
|
||||
<Link popupClose=".search-settings-popup">{_t.textDone}</Link>
|
||||
</NavRight>
|
||||
}
|
||||
</Navbar>
|
||||
<List>
|
||||
<ListItem radio title={_t.textFind} name="find-replace-checkbox" checked={!this.state.useReplace} onClick={e => this.onFindReplaceClick('find')} />
|
||||
<ListItem radio title={_t.textFindAndReplace} name="find-replace-checkbox" checked={this.state.useReplace} onClick={e => this.onFindReplaceClick('replace')} />
|
||||
</List>
|
||||
<List>
|
||||
<ListItem title={_t.textCaseSensitive}>
|
||||
<Toggle slot="after" className="toggle-case-sensitive" />
|
||||
</ListItem>
|
||||
<ListItem title="Highlight results">
|
||||
<ListItem title={_t.textHighlightResults}>
|
||||
<Toggle slot="after" className="toggle-mark-results" defaultChecked onToggleChange={this.onToggleMarkResults} />
|
||||
</ListItem>
|
||||
</List>;
|
||||
</List>
|
||||
</Page>
|
||||
);
|
||||
|
||||
return {...anc_markup, ...markup};
|
||||
}
|
||||
}
|
||||
|
||||
class DESearchView extends SearchView {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
searchParams() {
|
||||
let params = super.searchParams();
|
||||
|
||||
|
|
@ -57,19 +80,39 @@ class DESearchView extends SearchView {
|
|||
}
|
||||
}
|
||||
|
||||
const Search = props => {
|
||||
const Search = withTranslation()(props => {
|
||||
const { t } = props;
|
||||
const _t = t('Settings', {returnObjects: true});
|
||||
|
||||
const onSearchQuery = params => {
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
if ( !params.replace ) {
|
||||
if ( !api.asc_findText(params.find, params.forward, params.caseSensitive, params.highlight) ) {
|
||||
f7.dialog.alert('there are no more results', e => {
|
||||
});
|
||||
if (params.find && params.find.length) {
|
||||
if (!api.asc_findText(params.find, params.forward, params.caseSensitive, params.highlight) ) {
|
||||
f7.dialog.alert(null, _t.textNoTextFound);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return <DESearchView onSearchQuery={onSearchQuery} />
|
||||
};
|
||||
const onReplaceQuery = params => {
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
export {Search, SearchSettings}
|
||||
if (params.find && params.find.length) {
|
||||
api.asc_replaceText(params.find, params.replace, false, params.caseSensitive, params.highlight);
|
||||
}
|
||||
}
|
||||
|
||||
const onReplaceAllQuery = params => {
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
if (params.find && params.find.length) {
|
||||
api.asc_replaceText(params.find, params.replace, true, params.caseSensitive, params.highlight);
|
||||
}
|
||||
}
|
||||
|
||||
return <DESearchView _t={_t} onSearchQuery={onSearchQuery} onReplaceQuery={onReplaceQuery} onReplaceAllQuery={onReplaceAllQuery} />
|
||||
});
|
||||
|
||||
const SearchSettingsWithTranslation = withTranslation()(SearchSettings);
|
||||
|
||||
export {Search, SearchSettingsWithTranslation as SearchSettings}
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
&.icon-search {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M19.5,16.8L16,13.3c0.7-1.1,1.1-2.4,1.1-3.8C17,5.4,13.6,2,9.5,2S2,5.4,2,9.5S5.4,17,9.5,17c1.4,0,2.7-0.4,3.8-1.1l3.5,3.5c0.7,0.7,1.9,0.7,2.6,0C20.2,18.7,20.2,17.6,19.5,16.8z M9.5,15.3c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8S12.7,15.3,9.5,15.3z"/></g></svg>');
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M19.5,16.8L16,13.3c0.7-1.1,1.1-2.4,1.1-3.8C17,5.4,13.6,2,9.5,2S2,5.4,2,9.5S5.4,17,9.5,17c1.4,0,2.7-0.4,3.8-1.1l3.5,3.5c0.7,0.7,1.9,0.7,2.6,0C20.2,18.7,20.2,17.6,19.5,16.8z M9.5,15.3c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8S12.7,15.3,9.5,15.3z"/></g></svg>');
|
||||
}
|
||||
&.icon-reader {
|
||||
width: 22px;
|
||||
|
|
|
|||
|
|
@ -70,15 +70,17 @@ export default class MainPage extends Component {
|
|||
<Link id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
|
||||
<Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
|
||||
</NavRight>
|
||||
{ Device.phone ? null : <Search /> }
|
||||
{/* { Device.phone ? null : <Search /> } */}
|
||||
<Search useSuspense={false} />
|
||||
</Navbar>
|
||||
{/* Page content */}
|
||||
<View id="editor_sdk">
|
||||
|
||||
|
||||
</View>
|
||||
{
|
||||
{/* {
|
||||
Device.phone ? null : <SearchSettings />
|
||||
}
|
||||
} */}
|
||||
<SearchSettings useSuspense={false} />
|
||||
{
|
||||
!this.state.editOptionsVisible ? null :
|
||||
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
|
||||
|
|
|
|||
|
|
@ -3,20 +3,20 @@ import {makeObservable, action, observable} from 'mobx';
|
|||
export class storeApplicationSettings {
|
||||
constructor() {
|
||||
makeObservable(this, {
|
||||
unitMeasurement: observable
|
||||
, isSpellChecking: observable
|
||||
, isNonprintingCharacters: observable
|
||||
, isHiddenTableBorders: observable
|
||||
, isComments: observable
|
||||
, isResolvedComments: observable
|
||||
, macrosMode: observable
|
||||
, changeSpellCheck: action
|
||||
, changeUnitMeasurement: action
|
||||
, changeNoCharacters: action
|
||||
, changeShowTableEmptyLine: action
|
||||
, changeDisplayComments: action
|
||||
, changeDisplayResolved: action
|
||||
, changeMacrosSettings: action
|
||||
unitMeasurement: observable,
|
||||
isSpellChecking: observable,
|
||||
isNonprintingCharacters: observable,
|
||||
isHiddenTableBorders: observable,
|
||||
isComments: observable,
|
||||
isResolvedComments: observable,
|
||||
macrosMode: observable,
|
||||
changeSpellCheck: action,
|
||||
changeUnitMeasurement: action,
|
||||
changeNoCharacters: action,
|
||||
changeShowTableEmptyLine: action,
|
||||
changeDisplayComments: action,
|
||||
changeDisplayResolved: action,
|
||||
changeMacrosSettings: action
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,22 @@
|
|||
import {action, observable, computed} from 'mobx';
|
||||
import {action, observable, computed, makeObservable} from 'mobx';
|
||||
|
||||
export class storeChartSettings {
|
||||
constructor() {
|
||||
makeObservable(this, {
|
||||
chartStyles: observable,
|
||||
fillColor: observable,
|
||||
borderColor: observable,
|
||||
clearChartStyles: action,
|
||||
updateChartStyles: action,
|
||||
styles: computed,
|
||||
types: computed,
|
||||
setFillColor: action,
|
||||
getFillColor: action,
|
||||
setBorderColor: action,
|
||||
initBorderColor: action
|
||||
});
|
||||
}
|
||||
|
||||
wrapTypesTransform () {
|
||||
const map = [
|
||||
{ ui:'inline', sdk: Asc.c_oAscWrapStyle2.Inline },
|
||||
|
|
@ -56,14 +72,18 @@ export class storeChartSettings {
|
|||
}
|
||||
|
||||
// style
|
||||
@observable chartStyles = null;
|
||||
@action clearChartStyles () {
|
||||
|
||||
chartStyles = null;
|
||||
|
||||
clearChartStyles () {
|
||||
this.chartStyles = null;
|
||||
}
|
||||
@action updateChartStyles (styles) {
|
||||
|
||||
updateChartStyles (styles) {
|
||||
this.chartStyles = styles;
|
||||
}
|
||||
@computed get styles () {
|
||||
|
||||
get styles () {
|
||||
if (!this.chartStyles) return null;
|
||||
const widthContainer = document.querySelector(".page-content").clientWidth;
|
||||
const columns = parseInt(widthContainer / 70); // magic
|
||||
|
|
@ -78,7 +98,8 @@ export class storeChartSettings {
|
|||
});
|
||||
return styles;
|
||||
}
|
||||
@computed get types () {
|
||||
|
||||
get types () {
|
||||
const types = [
|
||||
{ type: Asc.c_oAscChartTypeSettings.barNormal, thumb: 'chart-03.png'},
|
||||
{ type: Asc.c_oAscChartTypeSettings.barStacked, thumb: 'chart-02.png'},
|
||||
|
|
@ -120,10 +141,13 @@ export class storeChartSettings {
|
|||
}
|
||||
|
||||
// Fill Color
|
||||
@observable fillColor = undefined;
|
||||
|
||||
fillColor = undefined;
|
||||
|
||||
setFillColor (color) {
|
||||
this.fillColor = color;
|
||||
}
|
||||
|
||||
getFillColor (shapeProperties) {
|
||||
let fill = shapeProperties.get_fill();
|
||||
const fillType = fill.get_type();
|
||||
|
|
@ -144,10 +168,13 @@ export class storeChartSettings {
|
|||
}
|
||||
|
||||
// Border size and border color
|
||||
@observable borderColor;
|
||||
|
||||
borderColor;
|
||||
|
||||
setBorderColor (color) {
|
||||
this.borderColor = color;
|
||||
}
|
||||
|
||||
initBorderColor (stroke) {
|
||||
let color = 'transparent';
|
||||
if (stroke && stroke.get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) {
|
||||
|
|
@ -164,6 +191,7 @@ export class storeChartSettings {
|
|||
this.borderColor = color;
|
||||
return color;
|
||||
}
|
||||
|
||||
borderSizeTransform () {
|
||||
const _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,33 @@
|
|||
import { action, observable } from "mobx";
|
||||
import {action, observable, makeObservable} from "mobx";
|
||||
|
||||
export class storeDocumentInfo {
|
||||
@observable infoObj = {
|
||||
constructor() {
|
||||
makeObservable(this, {
|
||||
infoObj: observable,
|
||||
isLoaded: observable,
|
||||
dataDoc: observable,
|
||||
switchIsLoaded: action,
|
||||
changeCount: action,
|
||||
setDataDoc: action
|
||||
});
|
||||
}
|
||||
|
||||
infoObj = {
|
||||
pageCount: 0,
|
||||
wordsCount: 0,
|
||||
paragraphCount: 0,
|
||||
symbolsCount: 0,
|
||||
symbolsWSCount: 0,
|
||||
};
|
||||
@observable isLoaded = false;
|
||||
@observable dataDoc;
|
||||
|
||||
@action switchIsLoaded(value) {
|
||||
isLoaded = false;
|
||||
dataDoc;
|
||||
|
||||
switchIsLoaded(value) {
|
||||
this.isLoaded = value;
|
||||
}
|
||||
|
||||
@action changeCount(obj) {
|
||||
changeCount(obj) {
|
||||
if (obj) {
|
||||
if (obj.get_PageCount() > -1)
|
||||
this.infoObj.pageCount = obj.get_PageCount();
|
||||
|
|
@ -30,7 +42,7 @@ export class storeDocumentInfo {
|
|||
}
|
||||
}
|
||||
|
||||
@action setDataDoc(obj) {
|
||||
setDataDoc(obj) {
|
||||
this.dataDoc = obj;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,31 @@
|
|||
import {action, observable, computed} from 'mobx';
|
||||
import {action, observable, computed, makeObservable} from 'mobx';
|
||||
|
||||
export class storeDocumentSettings {
|
||||
@observable isPortrait = true;
|
||||
@action resetPortrait (isPortrait) {
|
||||
constructor() {
|
||||
makeObservable(this, {
|
||||
isPortrait: observable,
|
||||
widthDocument: observable,
|
||||
heightDocument: observable,
|
||||
allSchemes: observable,
|
||||
resetPortrait: action,
|
||||
changeDocSize: action,
|
||||
pageSizesIndex: computed,
|
||||
addSchemes: action
|
||||
});
|
||||
}
|
||||
|
||||
isPortrait = true;
|
||||
|
||||
resetPortrait (isPortrait) {
|
||||
this.isPortrait = isPortrait === true;
|
||||
}
|
||||
|
||||
//Document Formats
|
||||
@observable widthDocument;
|
||||
@observable heightDocument;
|
||||
@action changeDocSize (width, height) {
|
||||
|
||||
widthDocument;
|
||||
heightDocument;
|
||||
|
||||
changeDocSize (width, height) {
|
||||
let w = width;
|
||||
let h = height;
|
||||
if (!this.isPortrait) {
|
||||
|
|
@ -20,6 +36,7 @@ export class storeDocumentSettings {
|
|||
this.widthDocument = w;
|
||||
this.heightDocument = h;
|
||||
}
|
||||
|
||||
getPageSizesList () {
|
||||
const txtCm = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.cm);
|
||||
const pageSizes = [
|
||||
|
|
@ -43,7 +60,8 @@ export class storeDocumentSettings {
|
|||
];
|
||||
return pageSizes;
|
||||
}
|
||||
@computed get pageSizesIndex () {
|
||||
|
||||
get pageSizesIndex () {
|
||||
let w = this.widthDocument;
|
||||
let h = this.heightDocument;
|
||||
let ind = -1;
|
||||
|
|
@ -61,9 +79,9 @@ export class storeDocumentSettings {
|
|||
|
||||
// Color Schemes
|
||||
|
||||
@observable allSchemes;
|
||||
allSchemes;
|
||||
|
||||
@action addSchemes(arr) {
|
||||
addSchemes(arr) {
|
||||
this.allSchemes = arr;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,32 @@
|
|||
import {action, observable, computed} from 'mobx';
|
||||
import {action, observable, computed, makeObservable} from 'mobx';
|
||||
|
||||
export class storeFocusObjects {
|
||||
@observable _focusObjects = [];
|
||||
@observable _headerType = 1;
|
||||
constructor() {
|
||||
makeObservable(this, {
|
||||
_focusObjects: observable,
|
||||
_headerType: observable,
|
||||
resetFocusObjects: action,
|
||||
settings: computed,
|
||||
headerType: computed,
|
||||
headerObject: computed,
|
||||
paragraphObject: computed,
|
||||
shapeObject: computed,
|
||||
imageObject: computed,
|
||||
tableObject: computed,
|
||||
isTableInStack: computed,
|
||||
chartObject: computed,
|
||||
linkObject: computed
|
||||
});
|
||||
}
|
||||
|
||||
@action resetFocusObjects (objects) {
|
||||
_focusObjects = [];
|
||||
_headerType = 1;
|
||||
|
||||
resetFocusObjects (objects) {
|
||||
this._focusObjects = objects;
|
||||
}
|
||||
|
||||
@computed get settings() {
|
||||
get settings() {
|
||||
const _settings = [];
|
||||
for (let object of this._focusObjects) {
|
||||
let type = object.get_ObjectType();
|
||||
|
|
@ -34,7 +52,8 @@ export class storeFocusObjects {
|
|||
}
|
||||
return _settings.filter((value, index, self) => self.indexOf(value) === index);
|
||||
}
|
||||
@computed get headerType() {
|
||||
|
||||
get headerType() {
|
||||
for (let object of this._focusObjects) {
|
||||
const type = object.get_ObjectType();
|
||||
if (Asc.c_oAscTypeSelectElement.Header === type) {
|
||||
|
|
@ -43,7 +62,8 @@ export class storeFocusObjects {
|
|||
}
|
||||
return this._headerType;
|
||||
}
|
||||
@computed get headerObject() {
|
||||
|
||||
get headerObject() {
|
||||
const headers = [];
|
||||
for (let object of this._focusObjects) {
|
||||
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Header) {
|
||||
|
|
@ -57,7 +77,8 @@ export class storeFocusObjects {
|
|||
return undefined;
|
||||
}
|
||||
}
|
||||
@computed get paragraphObject() {
|
||||
|
||||
get paragraphObject() {
|
||||
const paragraphs = [];
|
||||
for (let object of this._focusObjects) {
|
||||
if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Paragraph) {
|
||||
|
|
@ -71,7 +92,8 @@ export class storeFocusObjects {
|
|||
return undefined;
|
||||
}
|
||||
}
|
||||
@computed get shapeObject() {
|
||||
|
||||
get shapeObject() {
|
||||
const shapes = [];
|
||||
for (let object of this._focusObjects) {
|
||||
if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) {
|
||||
|
|
@ -87,7 +109,8 @@ export class storeFocusObjects {
|
|||
return undefined;
|
||||
}
|
||||
}
|
||||
@computed get imageObject() {
|
||||
|
||||
get imageObject() {
|
||||
const images = [];
|
||||
for (let object of this._focusObjects) {
|
||||
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Image) {
|
||||
|
|
@ -104,7 +127,8 @@ export class storeFocusObjects {
|
|||
return undefined;
|
||||
}
|
||||
}
|
||||
@computed get tableObject() {
|
||||
|
||||
get tableObject() {
|
||||
const tables = [];
|
||||
for (let object of this._focusObjects) {
|
||||
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) {
|
||||
|
|
@ -118,7 +142,8 @@ export class storeFocusObjects {
|
|||
return undefined;
|
||||
}
|
||||
}
|
||||
@computed get isTableInStack() {
|
||||
|
||||
get isTableInStack() {
|
||||
for (let object of this._focusObjects) {
|
||||
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) {
|
||||
return true;
|
||||
|
|
@ -126,7 +151,8 @@ export class storeFocusObjects {
|
|||
}
|
||||
return false;
|
||||
}
|
||||
@computed get chartObject() {
|
||||
|
||||
get chartObject() {
|
||||
const charts = [];
|
||||
for (let object of this._focusObjects) {
|
||||
if (object.get_ObjectValue() && object.get_ObjectValue().get_ChartProperties()) {
|
||||
|
|
@ -140,7 +166,8 @@ export class storeFocusObjects {
|
|||
return undefined;
|
||||
}
|
||||
}
|
||||
@computed get linkObject() {
|
||||
|
||||
get linkObject() {
|
||||
const links = [];
|
||||
for (let object of this._focusObjects) {
|
||||
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,16 @@
|
|||
import {action, observable} from 'mobx';
|
||||
import {action, observable, makeObservable} from 'mobx';
|
||||
|
||||
export class storePalette {
|
||||
@observable customColors = [];
|
||||
constructor() {
|
||||
makeObservable(this, {
|
||||
customColors: observable,
|
||||
changeCustomColors: action
|
||||
});
|
||||
}
|
||||
|
||||
customColors = [];
|
||||
|
||||
@action changeCustomColors (colors) {
|
||||
changeCustomColors (colors) {
|
||||
this.customColors = colors;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +1,33 @@
|
|||
import {action, observable, computed} from 'mobx';
|
||||
import {action, observable, computed, makeObservable} from 'mobx';
|
||||
|
||||
export class storeParagraphSettings {
|
||||
@observable styles = [];
|
||||
@observable styleThumbSize = null;
|
||||
@observable styleName = undefined;
|
||||
constructor() {
|
||||
makeObservable(this, {
|
||||
styles: observable,
|
||||
styleThumbSize: observable,
|
||||
styleName: observable,
|
||||
backColor: observable,
|
||||
initEditorStyles: action,
|
||||
paragraphStyles: computed,
|
||||
changeParaStyleName: action,
|
||||
setBackColor: action,
|
||||
getBackgroundColor: action
|
||||
});
|
||||
}
|
||||
|
||||
@action initEditorStyles (styles) {
|
||||
styles = [];
|
||||
styleThumbSize = null;
|
||||
styleName = undefined;
|
||||
|
||||
initEditorStyles (styles) {
|
||||
this.styles = styles.get_MergedStyles();
|
||||
this.styleThumbSize = {
|
||||
width : styles.STYLE_THUMBNAIL_WIDTH,
|
||||
height : styles.STYLE_THUMBNAIL_HEIGHT
|
||||
};
|
||||
}
|
||||
@computed get paragraphStyles () {
|
||||
|
||||
get paragraphStyles () {
|
||||
let _styles = [];
|
||||
for (let style of this.styles) {
|
||||
_styles.push({
|
||||
|
|
@ -22,14 +37,17 @@ export class storeParagraphSettings {
|
|||
}
|
||||
return _styles;
|
||||
}
|
||||
@action changeParaStyleName (name) {
|
||||
|
||||
changeParaStyleName (name) {
|
||||
this.styleName = name;
|
||||
}
|
||||
|
||||
@observable backColor = undefined;
|
||||
backColor = undefined;
|
||||
|
||||
setBackColor (color) {
|
||||
this.backColor = color;
|
||||
}
|
||||
|
||||
getBackgroundColor (paragraphObject) {
|
||||
const shade = paragraphObject.get_Shade();
|
||||
let backColor = 'transparent';
|
||||
|
|
|
|||
|
|
@ -1,15 +1,24 @@
|
|||
import {action, observable, computed} from 'mobx';
|
||||
import {action, observable, makeObservable} from 'mobx';
|
||||
|
||||
export class storeReview {
|
||||
@observable displayMode = 'markup';
|
||||
constructor() {
|
||||
makeObservable(this, {
|
||||
displayMode: observable,
|
||||
dataChanges: observable,
|
||||
changeDisplayMode: action,
|
||||
changeArrReview: action
|
||||
});
|
||||
}
|
||||
|
||||
@action changeDisplayMode (mode) {
|
||||
displayMode = 'markup';
|
||||
|
||||
changeDisplayMode (mode) {
|
||||
this.displayMode = mode;
|
||||
}
|
||||
|
||||
@observable dataChanges = [];
|
||||
dataChanges = [];
|
||||
|
||||
@action changeArrReview (data) {
|
||||
changeArrReview (data) {
|
||||
this.dataChanges = data && data.length > 0 ? data : [];
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,17 @@
|
|||
import {action, observable, computed} from 'mobx';
|
||||
import {action, observable, computed, makeObservable} from 'mobx';
|
||||
|
||||
export class storeShapeSettings {
|
||||
constructor() {
|
||||
makeObservable(this, {
|
||||
fillColor: observable,
|
||||
borderColorView: observable,
|
||||
setFillColor: action,
|
||||
getFillColor: action,
|
||||
setBorderColor: action,
|
||||
initBorderColorView: action
|
||||
});
|
||||
}
|
||||
|
||||
getStyleGroups () {
|
||||
const styles = [
|
||||
{
|
||||
|
|
@ -136,6 +147,7 @@ export class storeShapeSettings {
|
|||
}
|
||||
return groups;
|
||||
}
|
||||
|
||||
wrapTypesTransform () {
|
||||
const map = [
|
||||
{ ui:'inline', sdk: Asc.c_oAscWrapStyle2.Inline },
|
||||
|
|
@ -191,10 +203,13 @@ export class storeShapeSettings {
|
|||
}
|
||||
|
||||
// Fill Color
|
||||
@observable fillColor = undefined;
|
||||
|
||||
fillColor = undefined;
|
||||
|
||||
setFillColor (color) {
|
||||
this.fillColor = color;
|
||||
}
|
||||
|
||||
getFillColor (shapeObject) {
|
||||
let fill = shapeObject.get_ShapeProperties().get_fill();
|
||||
const fillType = fill.get_type();
|
||||
|
|
@ -215,10 +230,13 @@ export class storeShapeSettings {
|
|||
}
|
||||
|
||||
// Border size and color
|
||||
@observable borderColorView;
|
||||
|
||||
borderColorView;
|
||||
|
||||
setBorderColor (color) {
|
||||
this.borderColorView = color;
|
||||
}
|
||||
|
||||
initBorderColorView (shapeObject) {
|
||||
const stroke = shapeObject.get_ShapeProperties().get_stroke();
|
||||
let color = 'transparent';
|
||||
|
|
@ -236,6 +254,7 @@ export class storeShapeSettings {
|
|||
this.borderColorView = color;
|
||||
return color;
|
||||
}
|
||||
|
||||
borderSizeTransform () {
|
||||
const _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6];
|
||||
|
||||
|
|
|
|||
|
|
@ -3,14 +3,25 @@ import {f7} from 'framework7-react';
|
|||
|
||||
export class storeTableSettings {
|
||||
constructor() {
|
||||
makeObservable(this)
|
||||
makeObservable(this, {
|
||||
_templates: observable,
|
||||
cellBorders: observable,
|
||||
cellBorderWidth: observable,
|
||||
cellBorderColor: observable,
|
||||
initTableTemplates: action,
|
||||
styles: computed,
|
||||
updateCellBorderWidth: action,
|
||||
updateCellBorderColor: action,
|
||||
});
|
||||
}
|
||||
|
||||
@observable _templates = [];
|
||||
@action initTableTemplates (templates) {
|
||||
_templates = [];
|
||||
|
||||
initTableTemplates (templates) {
|
||||
this._templates = templates;
|
||||
}
|
||||
@computed get styles () {
|
||||
|
||||
get styles () {
|
||||
let styles = [];
|
||||
for (let template of this._templates) {
|
||||
styles.push({
|
||||
|
|
@ -69,9 +80,10 @@ export class storeTableSettings {
|
|||
}
|
||||
|
||||
// Border style
|
||||
@observable cellBorders;
|
||||
@observable cellBorderWidth = 0.5;
|
||||
@observable cellBorderColor = '000000';
|
||||
|
||||
cellBorders;
|
||||
cellBorderWidth = 0.5;
|
||||
cellBorderColor = '000000';
|
||||
|
||||
borderSizeTransform () {
|
||||
const _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6];
|
||||
|
|
|
|||
|
|
@ -1,25 +1,64 @@
|
|||
import {action, observable, computed} from 'mobx';
|
||||
import {action, observable, computed, makeObservable} from 'mobx';
|
||||
|
||||
export class storeTextSettings {
|
||||
@observable fontsArray = [];
|
||||
@observable fontName = '';
|
||||
@observable fontSize = undefined;
|
||||
@observable isBold = false;
|
||||
@observable isItalic = false;
|
||||
@observable isUnderline = false;
|
||||
@observable isStrikethrough = false;
|
||||
@observable typeBaseline = undefined;
|
||||
@observable listType = undefined;
|
||||
@observable typeBullets = undefined;
|
||||
@observable typeNumbers = undefined;
|
||||
@observable paragraphAlign = undefined;
|
||||
@observable textColor = undefined;
|
||||
@observable customTextColors = [];
|
||||
@observable lineSpacing = undefined;
|
||||
@observable backgroundColor = undefined;
|
||||
constructor() {
|
||||
makeObservable(this, {
|
||||
fontsArray: observable,
|
||||
fontName: observable,
|
||||
fontSize: observable,
|
||||
isBold: observable,
|
||||
isItalic: observable,
|
||||
isUnderline: observable,
|
||||
isStrikethrough: observable,
|
||||
typeBaseline: observable,
|
||||
listType: observable,
|
||||
typeBullets: observable,
|
||||
typeNumbers: observable,
|
||||
paragraphAlign: observable,
|
||||
textColor: observable,
|
||||
customTextColors: observable,
|
||||
lineSpacing: observable,
|
||||
backgroundColor: observable,
|
||||
initEditorFonts: action,
|
||||
resetFontName: action,
|
||||
resetFontSize: action,
|
||||
resetIsBold: action,
|
||||
resetIsItalic: action,
|
||||
resetIsUnderline: action,
|
||||
resetIsStrikeout: action,
|
||||
resetTypeBaseline: action,
|
||||
isSuperscript: computed,
|
||||
isSubscript: computed,
|
||||
resetListType: action,
|
||||
resetBullets: action,
|
||||
resetNumbers: action,
|
||||
resetParagraphAlign: action,
|
||||
resetTextColor: action,
|
||||
changeCustomTextColors: action,
|
||||
resetLineSpacing: action,
|
||||
resetBackgroundColor: action
|
||||
});
|
||||
}
|
||||
|
||||
fontsArray = [];
|
||||
fontName = '';
|
||||
fontSize = undefined;
|
||||
isBold = false;
|
||||
isItalic = false;
|
||||
isUnderline = false;
|
||||
isStrikethrough = false;
|
||||
typeBaseline = undefined;
|
||||
listType = undefined;
|
||||
typeBullets = undefined;
|
||||
typeNumbers = undefined;
|
||||
paragraphAlign = undefined;
|
||||
textColor = undefined;
|
||||
customTextColors = [];
|
||||
lineSpacing = undefined;
|
||||
backgroundColor = undefined;
|
||||
|
||||
|
||||
@action initEditorFonts (fonts, select) {
|
||||
initEditorFonts (fonts, select) {
|
||||
let array = [];
|
||||
for (let font of fonts) {
|
||||
let fontId = font.asc_getFontId();
|
||||
|
|
@ -33,49 +72,49 @@ export class storeTextSettings {
|
|||
}
|
||||
this.fontsArray = array;
|
||||
}
|
||||
@action resetFontName (font) {
|
||||
resetFontName (font) {
|
||||
let name = (typeof font.get_Name) === "function" ? font.get_Name() : font.asc_getName();
|
||||
this.fontName = name;
|
||||
}
|
||||
@action resetFontSize (size) {
|
||||
resetFontSize (size) {
|
||||
this.fontSize = size;
|
||||
}
|
||||
@action resetIsBold (isBold) {
|
||||
resetIsBold (isBold) {
|
||||
this.isBold = isBold;
|
||||
}
|
||||
@action resetIsItalic (isItalic) {
|
||||
resetIsItalic (isItalic) {
|
||||
this.isItalic = isItalic;
|
||||
}
|
||||
@action resetIsUnderline (isUnderline) {
|
||||
resetIsUnderline (isUnderline) {
|
||||
this.isUnderline = isUnderline;
|
||||
}
|
||||
@action resetIsStrikeout (isStrikethrough) {
|
||||
resetIsStrikeout (isStrikethrough) {
|
||||
this.isStrikethrough = isStrikethrough;
|
||||
}
|
||||
|
||||
// vertical align
|
||||
@action resetTypeBaseline (typeBaseline) {
|
||||
resetTypeBaseline (typeBaseline) {
|
||||
this.typeBaseline = typeBaseline;
|
||||
}
|
||||
@computed get isSuperscript() {
|
||||
get isSuperscript() {
|
||||
return (this.typeBaseline === 1);
|
||||
}
|
||||
@computed get isSubscript() {
|
||||
get isSubscript() {
|
||||
return (this.typeBaseline === 2);
|
||||
}
|
||||
|
||||
// bullets
|
||||
@action resetListType (type) {
|
||||
resetListType (type) {
|
||||
this.listType = type;
|
||||
}
|
||||
@action resetBullets (type) {
|
||||
resetBullets (type) {
|
||||
this.typeBullets = type;
|
||||
}
|
||||
@action resetNumbers (type) {
|
||||
resetNumbers (type) {
|
||||
this.typeNumbers = type;
|
||||
}
|
||||
|
||||
@action resetParagraphAlign (align) {
|
||||
resetParagraphAlign (align) {
|
||||
let value;
|
||||
switch (align) {
|
||||
case 0:
|
||||
|
|
@ -94,7 +133,7 @@ export class storeTextSettings {
|
|||
this.paragraphAlign = value;
|
||||
}
|
||||
|
||||
@action resetTextColor (color) {
|
||||
resetTextColor (color) {
|
||||
let value;
|
||||
if (color) {
|
||||
if (color.get_auto()) {
|
||||
|
|
@ -113,16 +152,16 @@ export class storeTextSettings {
|
|||
this.textColor = value;
|
||||
}
|
||||
|
||||
@action changeCustomTextColors (colors) {
|
||||
changeCustomTextColors (colors) {
|
||||
this.customTextColors = colors;
|
||||
}
|
||||
|
||||
@action resetLineSpacing (vc) {
|
||||
resetLineSpacing (vc) {
|
||||
let line = (vc.get_Line() === null || vc.get_LineRule() === null || vc.get_LineRule() != 1) ? -1 : vc.get_Line();
|
||||
this.lineSpacing = line;
|
||||
}
|
||||
|
||||
@action resetBackgroundColor (color) {
|
||||
resetBackgroundColor (color) {
|
||||
let value;
|
||||
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
|
||||
value = {
|
||||
|
|
|
|||
|
|
@ -79,21 +79,21 @@ const PageAdvancedSettings = props => {
|
|||
</List>
|
||||
<List>
|
||||
<ListItem title={t('Edit.textSpaceBetweenParagraphs')}>
|
||||
<Toggle checked={spaceBetween} onToggleChange={() => {props.onSpaceBetween(!spaceBetween)}}/>
|
||||
<Toggle checked={spaceBetween} onChange={() => {props.onSpaceBetween(!spaceBetween)}}/>
|
||||
</ListItem>
|
||||
</List>
|
||||
<List>
|
||||
<ListItem title={t('Edit.textPageBreakBefore')}>
|
||||
<Toggle checked={breakBefore} onToggleChange={() => {props.onBreakBefore(!breakBefore)}}/>
|
||||
<Toggle checked={breakBefore} onChange={() => {props.onBreakBefore(!breakBefore)}}/>
|
||||
</ListItem>
|
||||
<ListItem title={t('Edit.textOrphanControl')}>
|
||||
<Toggle checked={orphanControl} onToggleChange={() => {props.onOrphan(!orphanControl)}}/>
|
||||
<Toggle checked={orphanControl} onChange={() => {props.onOrphan(!orphanControl)}}/>
|
||||
</ListItem>
|
||||
<ListItem title={t('Edit.textKeepLinesTogether')}>
|
||||
<Toggle checked={keepTogether} onToggleChange={() => {props.onKeepTogether(!keepTogether)}}/>
|
||||
<Toggle checked={keepTogether} onChange={() => {props.onKeepTogether(!keepTogether)}}/>
|
||||
</ListItem>
|
||||
<ListItem title={t('Edit.textKeepWithNext')}>
|
||||
<Toggle checked={keepWithNext} onToggleChange={() => {props.onKeepNext(!keepWithNext)}}/>
|
||||
<Toggle checked={keepWithNext} onChange={() => {props.onKeepNext(!keepWithNext)}}/>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
|
|
|
|||
|
|
@ -317,10 +317,10 @@ const PageWrap = props => {
|
|||
}
|
||||
<List>
|
||||
<ListItem title={_t.textMoveWithText} className={'inline' === wrapType ? 'disabled' : ''}>
|
||||
<Toggle checked={moveText} onToggleChange={() => {props.onMoveText(!moveText)}}/>
|
||||
<Toggle checked={moveText} onChange={() => {props.onMoveText(!moveText)}}/>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textAllowOverlap}>
|
||||
<Toggle checked={overlap} onToggleChange={() => {props.onOverlap(!overlap)}}/>
|
||||
<Toggle checked={overlap} onChange={() => {props.onOverlap(!overlap)}}/>
|
||||
</ListItem>
|
||||
</List>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -21,10 +21,10 @@ const PageTableOptions = props => {
|
|||
<Navbar title={_t.textOptions} backLink={_t.textBack} />
|
||||
<List>
|
||||
<ListItem title={_t.textRepeatAsHeaderRow} className={isRepeat === null ? 'disabled' : ''}>
|
||||
<Toggle checked={isRepeat} onToggleChange={() => {props.onOptionRepeat(!isRepeat)}}/>
|
||||
<Toggle checked={isRepeat} onChange={() => {props.onOptionRepeat(!isRepeat)}}/>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textResizeToFitContent}>
|
||||
<Toggle checked={isResize} onToggleChange={() => {props.onOptionResize(!isResize)}}/>
|
||||
<Toggle checked={isResize} onChange={() => {props.onOptionResize(!isResize)}}/>
|
||||
</ListItem>
|
||||
</List>
|
||||
<BlockTitle>{_t.textCellMargins}</BlockTitle>
|
||||
|
|
@ -79,7 +79,7 @@ const PageWrap = props => {
|
|||
</List>
|
||||
<List>
|
||||
<ListItem title={_t.textMoveWithText} className={'inline' === wrapType ? 'disabled' : ''}>
|
||||
<Toggle checked={moveText} onToggleChange={() => {props.onWrapMoveText(!moveText)}}/>
|
||||
<Toggle checked={moveText} onChange={() => {props.onWrapMoveText(!moveText)}}/>
|
||||
</ListItem>
|
||||
</List>
|
||||
{
|
||||
|
|
@ -189,24 +189,24 @@ const PageStyleOptions = props => {
|
|||
<Navbar title={_t.textOptions} backLink={_t.textBack}/>
|
||||
<List>
|
||||
<ListItem title={_t.textHeaderRow}>
|
||||
<Toggle checked={isFirstRow} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 0, !isFirstRow)}}/>
|
||||
<Toggle checked={isFirstRow} onChange={() => {props.onCheckTemplateChange(tableLook, 0, !isFirstRow)}}/>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textTotalRow}>
|
||||
<Toggle checked={isLastRow} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 1, !isLastRow)}}/>
|
||||
<Toggle checked={isLastRow} onChange={() => {props.onCheckTemplateChange(tableLook, 1, !isLastRow)}}/>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textBandedRow}>
|
||||
<Toggle checked={isBandHor} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 2, !isBandHor)}}/>
|
||||
<Toggle checked={isBandHor} onChange={() => {props.onCheckTemplateChange(tableLook, 2, !isBandHor)}}/>
|
||||
</ListItem>
|
||||
</List>
|
||||
<List>
|
||||
<ListItem title={_t.textFirstColumn}>
|
||||
<Toggle checked={isFirstCol} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 3, !isFirstCol)}}/>
|
||||
<Toggle checked={isFirstCol} onChange={() => {props.onCheckTemplateChange(tableLook, 3, !isFirstCol)}}/>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textLastColumn}>
|
||||
<Toggle checked={isLastCol} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 4, !isLastCol)}}/>
|
||||
<Toggle checked={isLastCol} onChange={() => {props.onCheckTemplateChange(tableLook, 4, !isLastCol)}}/>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textBandedColumn}>
|
||||
<Toggle checked={isBandVer} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 5, !isBandVer)}}/>
|
||||
<Toggle checked={isBandVer} onChange={() => {props.onCheckTemplateChange(tableLook, 5, !isBandVer)}}/>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
|
|
|
|||
|
|
@ -64,6 +64,14 @@ const SettingsList = inject("storeAppOptions")( observer( withTranslation()( pro
|
|||
props.onOptionClick(page)
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
if (Device.phone) {
|
||||
f7.sheet.close('.settings-popup', true);
|
||||
} else {
|
||||
f7.popover.close('#settings-popover');
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
});
|
||||
|
||||
|
|
@ -100,7 +108,7 @@ const SettingsList = inject("storeAppOptions")( observer( withTranslation()( pro
|
|||
{navbar}
|
||||
<List>
|
||||
{!props.inPopover &&
|
||||
<ListItem title={!_isEdit ? _t.textFind : _t.textFindAndReplace}>
|
||||
<ListItem title={!_isEdit ? _t.textFind : _t.textFindAndReplace} link="#" searchbarEnable='.searchbar' onClick={closeModal}>
|
||||
<Icon slot="media" icon="icon-search"></Icon>
|
||||
</ListItem>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,7 +71,14 @@
|
|||
"textAddress": "address:",
|
||||
"textEmail": "email:",
|
||||
"textTel": "tel:",
|
||||
"textPoweredBy": "Powered By"
|
||||
"textPoweredBy": "Powered By",
|
||||
"textReplaceAll": "Replace All",
|
||||
"textFind": "Find",
|
||||
"textSearch": "Search",
|
||||
"textCaseSensitive": "Case Sensitive",
|
||||
"textHighlight": "Highlight Results",
|
||||
"textReplace": "Replace",
|
||||
"textNoTextFound": "Text not Found"
|
||||
},
|
||||
"Add": {
|
||||
"textSlide": "Slide",
|
||||
|
|
@ -244,7 +251,15 @@
|
|||
"textRemoveLink": "Remove Link",
|
||||
"textDisplay": "Display",
|
||||
"textScreenTip": "Screen Tip",
|
||||
"textDefault": "Selected text"
|
||||
"textDefault": "Selected text",
|
||||
"textReplaceAll": "Replace All",
|
||||
"textFind": "Find",
|
||||
"textFindAndReplace": "Find and Replace",
|
||||
"textDone": "Done",
|
||||
"textSearch": "Search",
|
||||
"textCaseSensitive": "Case Sensitive",
|
||||
"textHighlight": "Highlight Results",
|
||||
"textNoTextFound": "Text not Found"
|
||||
}
|
||||
},
|
||||
"Common": {
|
||||
|
|
|
|||
100
apps/presentationeditor/mobile/src/controller/Search.jsx
Normal file
100
apps/presentationeditor/mobile/src/controller/Search.jsx
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
import React 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';
|
||||
import { withTranslation } from 'react-i18next';
|
||||
import { Device } from '../../../../common/mobile/utils/device';
|
||||
|
||||
class SearchSettings extends SearchSettingsView {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
extraSearchOptions() {
|
||||
const anc_markup = super.extraSearchOptions();
|
||||
const show_popover = !Device.phone;
|
||||
const { t } = this.props;
|
||||
const _t = t("View.Settings", {returnObjects: true});
|
||||
|
||||
const markup = (
|
||||
<Page>
|
||||
<Navbar title={_t.textFindAndReplace}>
|
||||
{!show_popover &&
|
||||
<NavRight>
|
||||
<Link popupClose=".search-settings-popup">{_t.textDone}</Link>
|
||||
</NavRight>
|
||||
}
|
||||
</Navbar>
|
||||
<List>
|
||||
<ListItem radio title={_t.textFind} name="find-replace-checkbox" checked={!this.state.useReplace} onClick={e => this.onFindReplaceClick('find')} />
|
||||
<ListItem radio title={_t.textFindAndReplace} name="find-replace-checkbox" checked={this.state.useReplace} onClick={e => this.onFindReplaceClick('replace')} />
|
||||
</List>
|
||||
<List>
|
||||
<ListItem title={_t.textCaseSensitive}>
|
||||
<Toggle slot="after" className="toggle-case-sensitive" />
|
||||
</ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
);
|
||||
|
||||
return {...anc_markup, ...markup};
|
||||
}
|
||||
}
|
||||
|
||||
class PESearchView extends SearchView {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
searchParams() {
|
||||
let params = super.searchParams();
|
||||
|
||||
const checkboxCaseSensitive = f7.toggle.get('.toggle-case-sensitive');
|
||||
const searchOptions = {
|
||||
caseSensitive: checkboxCaseSensitive.checked,
|
||||
};
|
||||
|
||||
return {...params, ...searchOptions};
|
||||
}
|
||||
|
||||
onSearchbarShow(isshowed, bar) {
|
||||
super.onSearchbarShow(isshowed, bar);
|
||||
}
|
||||
}
|
||||
|
||||
const Search = withTranslation()(props => {
|
||||
const { t } = props;
|
||||
const _t = t('View.Settings', {returnObjects: true});
|
||||
|
||||
const onSearchQuery = params => {
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
if (params.find && params.find.length) {
|
||||
if (!api.findText(params.find, params.forward, params.caseSensitive) ) {
|
||||
f7.dialog.alert(null, _t.textNoTextFound);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onReplaceQuery = params => {
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
if (params.find && params.find.length) {
|
||||
api.asc_replaceText(params.find, params.replace, false, params.caseSensitive);
|
||||
}
|
||||
}
|
||||
|
||||
const onReplaceAllQuery = params => {
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
if (params.find && params.find.length) {
|
||||
api.asc_replaceText(params.find, params.replace, true, params.caseSensitive);
|
||||
}
|
||||
}
|
||||
|
||||
return <PESearchView _t={_t} onSearchQuery={onSearchQuery} onReplaceQuery={onReplaceQuery} onReplaceAllQuery={onReplaceAllQuery} />
|
||||
});
|
||||
|
||||
const SearchSettingsWithTranslation = withTranslation()(SearchSettings);
|
||||
|
||||
export {Search, SearchSettingsWithTranslation as SearchSettings}
|
||||
|
|
@ -9,8 +9,14 @@ import { EditLink } from '../../view/edit/EditLink';
|
|||
class EditLinkController extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
this.onEditLink = this.onEditLink.bind(this);
|
||||
this.onRemoveLink = this.onRemoveLink.bind(this);
|
||||
this.initLink = this.initLink.bind(this);
|
||||
this.slidesCount = api.getCountPages();
|
||||
this.initLink();
|
||||
}
|
||||
|
||||
closeModal () {
|
||||
|
|
@ -21,6 +27,58 @@ class EditLinkController extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
initLink() {
|
||||
const api = Common.EditorApi.get();
|
||||
const linkObject = this.props.storeFocusObjects.linkObject;
|
||||
const url = linkObject.get_Value();
|
||||
const tooltip = linkObject.get_ToolTip();
|
||||
const display = linkObject.get_Text();
|
||||
|
||||
this.url = url;
|
||||
this.tooltip = tooltip;
|
||||
this.display = display;
|
||||
this.slideLink = 0;
|
||||
this.slideNum = 0;
|
||||
|
||||
let indAction;
|
||||
let slidesCount;
|
||||
let slideNum;
|
||||
|
||||
if(url === null || url === undefined || url === '') {
|
||||
this.typeLink = 1;
|
||||
}
|
||||
else {
|
||||
indAction = url.indexOf("ppaction://hlink");
|
||||
if(0 == indAction) {
|
||||
if (url == "ppaction://hlinkshowjump?jump=firstslide") {
|
||||
this.slideLink = 2;
|
||||
} else if (url == "ppaction://hlinkshowjump?jump=lastslide") {
|
||||
this.slideLink = 3;
|
||||
}
|
||||
else if (url == "ppaction://hlinkshowjump?jump=nextslide") {
|
||||
this.slideLink = 0;
|
||||
}
|
||||
else if (url == "ppaction://hlinkshowjump?jump=previousslide") {
|
||||
this.slideLink = 1;
|
||||
}
|
||||
else {
|
||||
this.slideLink = 4;
|
||||
slidesCount = api.getCountPages();
|
||||
let mask = "ppaction://hlinksldjumpslide",
|
||||
indSlide = url.indexOf(mask);
|
||||
if (0 == indSlide) {
|
||||
slideNum = parseInt(url.substring(mask.length));
|
||||
if (slideNum < 0) this.slideNum = 0;
|
||||
if (slideNum >= slidesCount) this.slideNum = slidesCount - 1;
|
||||
} else this.slideNum = 0;
|
||||
}
|
||||
this.typeLink = 0
|
||||
} else {
|
||||
this.typeLink = 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onEditLink(type, linkInfo) {
|
||||
const api = Common.EditorApi.get();
|
||||
const { t } = this.props;
|
||||
|
|
@ -102,13 +160,21 @@ class EditLinkController extends Component {
|
|||
render () {
|
||||
return (
|
||||
<EditLink
|
||||
initLink={this.initLink}
|
||||
typeLink={this.typeLink}
|
||||
url={this.url}
|
||||
display={this.display}
|
||||
tooltip={this.tooltip}
|
||||
slideLink={this.slideLink}
|
||||
slideNum={this.slideNum}
|
||||
onEditLink={this.onEditLink}
|
||||
onRemoveLink={this.onRemoveLink}
|
||||
slidesCount={this.slidesCount}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const EditLinkWithTranslation = withTranslation()(EditLinkController);
|
||||
const EditLinkWithTranslation = inject("storeFocusObjects")(observer(withTranslation()(EditLinkController)));
|
||||
|
||||
export {EditLinkWithTranslation as EditLinkController};
|
||||
|
|
@ -6,19 +6,35 @@ class PresentationSettingsController extends Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
this.initSlideSize = this.initSlideSize.bind(this);
|
||||
this.onSlideSize = this.onSlideSize.bind(this);
|
||||
this.initSlideSize();
|
||||
}
|
||||
|
||||
initSlideSize() {
|
||||
if (!this.init) {
|
||||
const api = Common.EditorApi.get();
|
||||
const slideSizes = [
|
||||
[9144000, 6858000, Asc.c_oAscSlideSZType.SzScreen4x3],
|
||||
[12192000, 6858000, Asc.c_oAscSlideSZType.SzCustom]
|
||||
];
|
||||
|
||||
this.props.storePresentationSettings.changeSizeIndex(api.get_PresentationWidth(), api.get_PresentationHeight());
|
||||
this.props.storePresentationSettings.initSlideSizes(slideSizes);
|
||||
this.init = true;
|
||||
}
|
||||
}
|
||||
|
||||
onSlideSize(slideSizeArr) {
|
||||
const api = Common.EditorApi.get();
|
||||
api.changeSlideSize(slideSizeArr[0], slideSizeArr[1]);
|
||||
|
||||
let ratio = slideSizeArr[1] / slideSizeArr[0];
|
||||
let currentHeight = this.props.storePresentationSettings.currentPageSize.height;
|
||||
let currentPageSize = {
|
||||
width: (currentHeight || slideSizeArr[1]) / ratio,
|
||||
height: currentHeight
|
||||
};
|
||||
// api.changeSlideSize(slideSizeArr[0], slideSizeArr[1], slideSizeArr[2]);
|
||||
api.changeSlideSize(currentPageSize.width, currentPageSize.height, slideSizeArr[2]);
|
||||
}
|
||||
|
||||
// Color Schemes
|
||||
|
|
|
|||
|
|
@ -1,12 +1,16 @@
|
|||
@themeColor: #aa5252;
|
||||
|
||||
@import '../../../../../vendor/framework7-react/node_modules/framework7/less/mixins.less';
|
||||
|
||||
@import '../../../../common/mobile/resources/less/_mixins.less';
|
||||
@import '../../../../common/mobile/resources/less/collaboration.less';
|
||||
@import '../../../../common/mobile/resources/less/common.less';
|
||||
@import '../../../../common/mobile/resources/less/common-ios.less';
|
||||
@import '../../../../common/mobile/resources/less/common-material.less';
|
||||
@import '../../../../common/mobile/resources/less/icons.less';
|
||||
@import '../../../../common/mobile/resources/less/dataview.less';
|
||||
@import '../../../../common/mobile/resources/less/about.less';
|
||||
@import '../../../../common/mobile/resources/less/search.less';
|
||||
@import './app-material.less';
|
||||
@import './app-ios.less';
|
||||
@import './icons-ios.less';
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@ import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-re
|
|||
import EditOptions from '../view/edit/Edit';
|
||||
import AddOptions from '../view/add/Add';
|
||||
import Settings from '../view/settings/Settings';
|
||||
import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx'
|
||||
import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx';
|
||||
import { Device } from '../../../../common/mobile/utils/device';
|
||||
import { Search, SearchSettings } from '../controller/Search';
|
||||
|
||||
export default class MainPage extends Component {
|
||||
constructor(props) {
|
||||
|
|
@ -58,12 +60,17 @@ export default class MainPage extends Component {
|
|||
<NavRight>
|
||||
<Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
|
||||
<Link id='btn-add' icon='icon-plus' href={false} onClick={e => this.handleClickToOpenOptions('add')}></Link>
|
||||
{ Device.phone ? null : <Link icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
|
||||
<Link id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
|
||||
<Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
|
||||
</NavRight>
|
||||
<Search useSuspense={false} />
|
||||
</Navbar>
|
||||
{/* Page content */}
|
||||
<View id="editor_sdk" />
|
||||
|
||||
<SearchSettings useSuspense={false} />
|
||||
|
||||
{
|
||||
!this.state.editOptionsVisible ? null :
|
||||
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
|
||||
|
|
|
|||
|
|
@ -5,68 +5,4 @@ export class storeLinkSettings {
|
|||
@action canAddHyperlink (value) {
|
||||
this.canAddLink = value;
|
||||
}
|
||||
|
||||
@observable typeLink;
|
||||
@action changeLinkType(value) {
|
||||
this.typeLink = value;
|
||||
}
|
||||
|
||||
@observable slideLink;
|
||||
@action changeSlideLink(value) {
|
||||
this.slideLink = value;
|
||||
}
|
||||
|
||||
@observable slideNum;
|
||||
@action changeSlideNum(value) {
|
||||
this.slideNum = value;
|
||||
}
|
||||
|
||||
@observable slideName;
|
||||
@action changeSlideName(value) {
|
||||
this.slideName = value;
|
||||
}
|
||||
|
||||
initCategory(linkObject) {
|
||||
const url = linkObject.get_Value();
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
let indAction;
|
||||
let slidesCount;
|
||||
let slideNum;
|
||||
|
||||
if(url === null || url === undefined || url === '') {
|
||||
this.changeLinkType(1);
|
||||
}
|
||||
else {
|
||||
indAction = url.indexOf("ppaction://hlink");
|
||||
if(0 == indAction) {
|
||||
if (url == "ppaction://hlinkshowjump?jump=firstslide") {
|
||||
this.changeSlideLink(2);
|
||||
} else if (url == "ppaction://hlinkshowjump?jump=lastslide") {
|
||||
this.changeSlideLink(3);
|
||||
}
|
||||
else if (url == "ppaction://hlinkshowjump?jump=nextslide") {
|
||||
this.changeSlideLink(0);
|
||||
}
|
||||
else if (url == "ppaction://hlinkshowjump?jump=previousslide") {
|
||||
this.changeSlideLink(1);
|
||||
}
|
||||
else {
|
||||
this.changeSlideLink(4);
|
||||
slidesCount = api.getCountPages();
|
||||
let mask = "ppaction://hlinksldjumpslide",
|
||||
indSlide = url.indexOf(mask);
|
||||
if (0 == indSlide) {
|
||||
slideNum = parseInt(url.substring(mask.length));
|
||||
if (slideNum < 0) this.changeSlideNum(0);
|
||||
if (slideNum >= slidesCount) this.changeSlideNum(slidesCount - 1);
|
||||
} else this.changeSlideNum(0);
|
||||
}
|
||||
this.changeLinkType(0);
|
||||
} else {
|
||||
this.changeLinkType(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,42 @@
|
|||
import {action, observable} from 'mobx';
|
||||
import {action, observable, makeObservable} from 'mobx';
|
||||
|
||||
export class storePresentationSettings {
|
||||
slideSize = [[254, 190.5], [254, 143]];
|
||||
@observable slideSizeIndex;
|
||||
|
||||
get getSlideSizes() {
|
||||
return this.slideSize;
|
||||
constructor() {
|
||||
makeObservable(this, {
|
||||
slideSizes: observable,
|
||||
currentPageSize: observable,
|
||||
slideSizeIndex: observable,
|
||||
allSchemes: observable,
|
||||
changeSizeIndex: action,
|
||||
addSchemes: action,
|
||||
initSlideSizes: action
|
||||
})
|
||||
}
|
||||
|
||||
@action changeSizeIndex(width, height) {
|
||||
this.slideSize.forEach((array, index) => {
|
||||
if(Math.abs(array[0] - width) < 0.001 && Math.abs((array[1] - height)) < 0.001) {
|
||||
slideSizes = [];
|
||||
currentPageSize;
|
||||
slideSizeIndex;
|
||||
|
||||
changeSizeIndex(width, height) {
|
||||
this.currentPageSize = {width, height};
|
||||
let ratio = height / width;
|
||||
|
||||
this.slideSizes.forEach((array, index) => {
|
||||
if(Math.abs(array[1] / array[0] - ratio) < 0.001) {
|
||||
this.slideSizeIndex = index;
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
initSlideSizes(value) {
|
||||
this.slideSizes = value;
|
||||
}
|
||||
|
||||
// Color Schemes
|
||||
|
||||
@observable allSchemes;
|
||||
allSchemes;
|
||||
|
||||
@action addSchemes(arr) {
|
||||
addSchemes(arr) {
|
||||
this.allSchemes = arr;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,15 +7,14 @@ import {Device} from "../../../../../common/mobile/utils/device";
|
|||
const PageTypeLink = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const storeLinkSettings = props.storeLinkSettings;
|
||||
const typeLink = storeLinkSettings.typeLink;
|
||||
const [typeLink, setTypeLink] = useState(props.curType);
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textLinkType} backLink={_t.textBack}/>
|
||||
<List>
|
||||
<ListItem title={_t.textExternalLink} radio checked={typeLink === 1} onClick={() => {storeLinkSettings.changeLinkType(1);}}></ListItem>
|
||||
<ListItem title={_t.textSlideInThisPresentation} radio checked={typeLink === 0} onClick={() => {storeLinkSettings.changeLinkType(0);}}></ListItem>
|
||||
<ListItem title={_t.textExternalLink} radio checked={typeLink === 1} onClick={() => {setTypeLink(1); props.changeType(1); props.initLink();}}></ListItem>
|
||||
<ListItem title={_t.textSlideInThisPresentation} radio checked={typeLink === 0} onClick={() => {setTypeLink(0); props.changeType(0); props.initLink();}}></ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
|
|
@ -25,23 +24,18 @@ const PageLinkTo = props => {
|
|||
const isAndroid = Device.android;
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const api = Common.EditorApi.get();
|
||||
const slidesCount = api.getCountPages();
|
||||
const storeLinkSettings = props.storeLinkSettings;
|
||||
const slideLink = storeLinkSettings.slideLink;
|
||||
// console.log(slideLink);
|
||||
// const slideNum = storeLinkSettings.slideNum;
|
||||
// const [stateTypeTo, setTypeTo] = useState(props.curTo);
|
||||
const slidesCount = props.slidesCount;
|
||||
const [stateTypeTo, setTypeTo] = useState(props.curTo);
|
||||
|
||||
const changeTypeTo = (type) => {
|
||||
storeLinkSettings.changeSlideLink(type);
|
||||
setTypeTo(type);
|
||||
props.changeTo(type);
|
||||
};
|
||||
|
||||
const [stateNumberTo, setNumberTo] = useState(0);
|
||||
|
||||
const changeNumber = (curNumber, isDecrement) => {
|
||||
storeLinkSettings.changeSlideLink(4);
|
||||
setTypeTo(4);
|
||||
let value;
|
||||
|
||||
if (isDecrement) {
|
||||
|
|
@ -51,7 +45,6 @@ const PageLinkTo = props => {
|
|||
}
|
||||
|
||||
setNumberTo(value);
|
||||
storeLinkSettings.changeSlideNum(value);
|
||||
props.changeTo(4, value);
|
||||
};
|
||||
|
||||
|
|
@ -59,10 +52,10 @@ const PageLinkTo = props => {
|
|||
<Page>
|
||||
<Navbar title={_t.textLinkTo} backLink={_t.textBack}/>
|
||||
<List>
|
||||
<ListItem title={_t.textNextSlide} radio checked={slideLink === 0} onClick={() => {changeTypeTo(0)}}></ListItem>
|
||||
<ListItem title={_t.textPreviousSlide} radio checked={slideLink === 1} onClick={() => {changeTypeTo(1)}}></ListItem>
|
||||
<ListItem title={_t.textFirstSlide} radio checked={slideLink === 2} onClick={() => {changeTypeTo(2)}}></ListItem>
|
||||
<ListItem title={_t.textLastSlide} radio checked={slideLink === 3} onClick={() => {changeTypeTo(3)}}></ListItem>
|
||||
<ListItem title={_t.textNextSlide} radio checked={stateTypeTo === 0} onClick={() => {changeTypeTo(0)}}></ListItem>
|
||||
<ListItem title={_t.textPreviousSlide} radio checked={stateTypeTo === 1} onClick={() => {changeTypeTo(1)}}></ListItem>
|
||||
<ListItem title={_t.textFirstSlide} radio checked={stateTypeTo === 2} onClick={() => {changeTypeTo(2)}}></ListItem>
|
||||
<ListItem title={_t.textLastSlide} radio checked={stateTypeTo === 3} onClick={() => {changeTypeTo(3)}}></ListItem>
|
||||
<ListItem title={_t.textSlideNumber}>
|
||||
{!isAndroid && <div slot='after-start'>{stateNumberTo + 1}</div>}
|
||||
<div slot='after'>
|
||||
|
|
@ -85,42 +78,44 @@ const PageLinkTo = props => {
|
|||
const PageLink = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const storeFocusObjects = props.storeFocusObjects;
|
||||
const storeLinkSettings = props.storeLinkSettings;
|
||||
const linkObject = storeFocusObjects.linkObject;
|
||||
|
||||
useEffect(() => {
|
||||
storeLinkSettings.initCategory(linkObject);
|
||||
}, [linkObject]);
|
||||
const url = props.url;
|
||||
const tooltip = props.tooltip;
|
||||
const display = props.display;
|
||||
const slideNum = props.slideNum;
|
||||
const slideLink = props.slideLink;
|
||||
const valueTypeLink = props.typeLink;
|
||||
|
||||
const url = linkObject.get_Value();
|
||||
const tooltip = linkObject.get_ToolTip();
|
||||
const display = linkObject.get_Text();
|
||||
const slideNum = storeLinkSettings.slideNum;
|
||||
const slideLink = storeLinkSettings.slideLink;
|
||||
const typeLink = storeLinkSettings.typeLink;
|
||||
|
||||
if(typeLink === 1) {
|
||||
storeLinkSettings.changeSlideName(_t.textNextSlide);
|
||||
storeLinkSettings.changeSlideLink(0);
|
||||
}
|
||||
const typesDisplayTo = {
|
||||
0: `${_t.textNextSlide}`,
|
||||
1: `${_t.textPreviousSlide}`,
|
||||
2: `${_t.textFirstSlide}`,
|
||||
3: `${_t.textLastSlide}`,
|
||||
4: `${_t.textSlide} ${slideNum + 1}`
|
||||
};
|
||||
|
||||
const [typeLink, setTypeLink] = useState(valueTypeLink);
|
||||
const textType = typeLink === 1 ? _t.textExternalLink : _t.textSlideInThisPresentation;
|
||||
|
||||
const changeType = (newType) => {
|
||||
setTypeLink(newType);
|
||||
};
|
||||
|
||||
const [link, setLink] = useState(typeLink !== 0 ? url : '');
|
||||
const [linkTo, setLinkTo] = useState(slideLink);
|
||||
const [displayTo, setDisplayTo] = useState(typesDisplayTo[slideLink]);
|
||||
const [numberTo, setNumberTo] = useState(slideNum);
|
||||
|
||||
const changeTo = (slideLink, number) => {
|
||||
switch (slideLink) {
|
||||
case 0 : storeLinkSettings.changeSlideName(_t.textNextSlide); break;
|
||||
case 1 : storeLinkSettings.changeSlideName(_t.textPreviousSlide); break;
|
||||
case 2 : storeLinkSettings.changeSlideName(_t.textFirstSlide); break;
|
||||
case 3 : storeLinkSettings.changeSlideName(_t.textLastSlide); break;
|
||||
case 4 : storeLinkSettings.changeSlideName(`${_t.textSlide} ${number + 1}`); storeLinkSettings.changeSlideNum(number);
|
||||
const changeTo = (type, number) => {
|
||||
setLinkTo(type);
|
||||
switch (type) {
|
||||
case 0 : setDisplayTo(_t.textNextSlide); break;
|
||||
case 1 : setDisplayTo(_t.textPreviousSlide); break;
|
||||
case 2 : setDisplayTo(_t.textFirstSlide); break;
|
||||
case 3 : setDisplayTo(_t.textLastSlide); break;
|
||||
case 4 : setDisplayTo(`${_t.textSlide} ${number + 1}`); setNumberTo(number); break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
changeTo(slideLink, slideNum);
|
||||
|
||||
const slideName = storeLinkSettings.slideName;
|
||||
const [screenTip, setScreenTip] = useState(tooltip);
|
||||
const displayDisabled = display !== false && display === null;
|
||||
const [stateDisplay, setDisplay] = useState(display !== false ? ((display !== null) ? display : _t.textDefault) : "");
|
||||
|
|
@ -130,7 +125,9 @@ const PageLink = props => {
|
|||
<Navbar title={_t.textLink} backLink={_t.textBack}/>
|
||||
<List inlineLabels className='inputs-list'>
|
||||
<ListItem link={'/edit-link-type/'} title={_t.textLinkType} after={textType} routeProps={{
|
||||
curType: typeLink
|
||||
changeType,
|
||||
curType: typeLink,
|
||||
initLink: props.initLink
|
||||
}} />
|
||||
{typeLink !== 0 ?
|
||||
<ListInput label={_t.textLink}
|
||||
|
|
@ -139,9 +136,11 @@ const PageLink = props => {
|
|||
value={link}
|
||||
onChange={(event) => {setLink(event.target.value)}}
|
||||
/> :
|
||||
<ListItem link={'/edit-link-to/'} title={_t.textLinkTo} after={slideName} routeProps={{
|
||||
<ListItem link={'/edit-link-to/'} title={_t.textLinkTo} after={displayTo} routeProps={{
|
||||
changeTo: changeTo,
|
||||
curTo: slideLink
|
||||
curTo: linkTo,
|
||||
initLink: props.initLink,
|
||||
slidesCount: props.slidesCount
|
||||
}}/>
|
||||
}
|
||||
<ListInput label={_t.textDisplay}
|
||||
|
|
@ -164,7 +163,7 @@ const PageLink = props => {
|
|||
onClick={() => {
|
||||
props.onEditLink(typeLink, (typeLink === 1 ?
|
||||
{url: link, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled } :
|
||||
{linkTo: slideLink, numberTo: slideNum, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled}));
|
||||
{linkTo: linkTo, numberTo: numberTo, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled}));
|
||||
}}
|
||||
/>
|
||||
<ListButton title={_t.textRemoveLink}
|
||||
|
|
@ -178,10 +177,6 @@ const PageLink = props => {
|
|||
)
|
||||
};
|
||||
|
||||
const EditLink = inject("storeFocusObjects", "storeLinkSettings")(observer(PageLink));
|
||||
const LinkTo = inject("storeFocusObjects", "storeLinkSettings")(observer(PageLinkTo));
|
||||
const TypeLink = inject("storeFocusObjects", "storeLinkSettings")(observer(PageTypeLink));
|
||||
|
||||
export {EditLink,
|
||||
LinkTo as PageLinkTo,
|
||||
TypeLink as PageTypeLink}
|
||||
export {PageLink as EditLink,
|
||||
PageLinkTo,
|
||||
PageTypeLink}
|
||||
|
|
@ -6,15 +6,13 @@ import { useTranslation } from "react-i18next";
|
|||
const PagePresentationSettings = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t("View.Settings", { returnObjects: true });
|
||||
props.initSlideSize();
|
||||
const store = props.storePresentationSettings;
|
||||
const slideSizeArr = store.getSlideSizes;
|
||||
const slideSizeIndex = store.slideSizeIndex;
|
||||
const storePresentationSettings = props.storePresentationSettings;
|
||||
const slideSizeArr = storePresentationSettings.slideSizes;
|
||||
const slideSizeIndex = storePresentationSettings.slideSizeIndex;
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textPresentationSettings} backLink={_t.textBack} />
|
||||
|
||||
<BlockTitle>{_t.textSlideSize}</BlockTitle>
|
||||
<List>
|
||||
<ListItem radio name="slide-size" checked={slideSizeIndex === 0}
|
||||
|
|
@ -22,7 +20,6 @@ const PagePresentationSettings = props => {
|
|||
<ListItem radio name="slide-size" checked={slideSizeIndex === 1}
|
||||
onChange={() => props.onSlideSize(slideSizeArr[1])} title={_t.mniSlideWide}></ListItem>
|
||||
</List>
|
||||
|
||||
<List mediaList>
|
||||
<ListItem title={_t.textColorSchemes} link="/color-schemes/" routeProps={{
|
||||
onColorSchemeChange: props.onColorSchemeChange,
|
||||
|
|
@ -38,8 +35,8 @@ const PagePresentationColorSchemes = props => {
|
|||
const curScheme = props.initPageColorSchemes();
|
||||
const [stateScheme, setScheme] = useState(curScheme);
|
||||
const _t = t('View.Settings', {returnObjects: true});
|
||||
const store = props.storePresentationSettings;
|
||||
const allSchemes = store.allSchemes;
|
||||
const storePresentationSettings = props.storePresentationSettings;
|
||||
const allSchemes = storePresentationSettings.allSchemes;
|
||||
|
||||
return (
|
||||
<Page>
|
||||
|
|
|
|||
|
|
@ -106,9 +106,9 @@ const SettingsList = withTranslation()(props => {
|
|||
{navbar}
|
||||
<List>
|
||||
{!props.inPopover &&
|
||||
<ListItem title={_t.textFindAndReplace}>
|
||||
<Icon slot="media" icon="icon-search"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textFindAndReplace} link="#" searchbarEnable='.searchbar' onClick={closeModal}>
|
||||
<Icon slot="media" icon="icon-search"></Icon>
|
||||
</ListItem>
|
||||
}
|
||||
<ListItem link="#" title={_t.textPresentationSettings} onClick={onoptionclick.bind(this, '/presentation-settings/')}>
|
||||
<Icon slot="media" icon="icon-setup"></Icon>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
&.icon-search {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M19.5,16.8L16,13.3c0.7-1.1,1.1-2.4,1.1-3.8C17,5.4,13.6,2,9.5,2S2,5.4,2,9.5S5.4,17,9.5,17c1.4,0,2.7-0.4,3.8-1.1l3.5,3.5c0.7,0.7,1.9,0.7,2.6,0C20.2,18.7,20.2,17.6,19.5,16.8z M9.5,15.3c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8S12.7,15.3,9.5,15.3z"/></g></svg>');
|
||||
.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="@{themeColor}"><g><path d="M19.5,16.8L16,13.3c0.7-1.1,1.1-2.4,1.1-3.8C17,5.4,13.6,2,9.5,2S2,5.4,2,9.5S5.4,17,9.5,17c1.4,0,2.7-0.4,3.8-1.1l3.5,3.5c0.7,0.7,1.9,0.7,2.6,0C20.2,18.7,20.2,17.6,19.5,16.8z M9.5,15.3c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8S12.7,15.3,9.5,15.3z"/></g></svg>');
|
||||
}
|
||||
&.icon-edit {
|
||||
width: 22px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue