Merge branch 'feature/mobile-apps-on-reactjs' of https://github.com/ONLYOFFICE/web-apps into feature/mobile-apps-on-reactjs
This commit is contained in:
JuliaSvinareva
commit
f3c4af7914
16
apps/common/mobile/resources/less/search.less
Normal file
16
apps/common/mobile/resources/less/search.less
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
@statusBarBorderColor: #cbcbcb;
|
||||
|
||||
.navbar {
|
||||
.searchbar {
|
||||
background-color: var(--f7-navbar-bg-color);
|
||||
|
||||
.buttons-row {
|
||||
align-self: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.searchbar-bg {
|
||||
.hairline(bottom, @statusBarBorderColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +1,14 @@
|
|||
@themeColor: #446995;
|
||||
|
||||
@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/dataview.less';
|
||||
@import '../../../../common/mobile/resources/less/search.less';
|
||||
@import './app-material.less';
|
||||
@import './app-ios.less';
|
||||
@import './icons-ios.less';
|
||||
|
|
|
|||
|
|
@ -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="@{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 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>');
|
||||
}
|
||||
&.icon-reader {
|
||||
width: 22px;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import ReactDOM from 'react-dom';
|
|||
|
||||
// Import Framework7
|
||||
import Framework7 from 'framework7/framework7-lite.esm.bundle.js';
|
||||
import { Dom7 } from 'framework7';
|
||||
window.$$ = Dom7;
|
||||
|
||||
// Import Framework7-React Plugin
|
||||
import Framework7React from 'framework7-react';
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ 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 SearchView from '../view/search';
|
||||
import CollaborationView from '../../../../common/mobile/lib/view/Collaboration.jsx'
|
||||
|
||||
export default class Home extends Component {
|
||||
|
|
@ -58,9 +59,11 @@ export default class Home 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>
|
||||
<Link icon='icon-search' searchbarEnable='.searchbar' href={false}></Link>
|
||||
<Link 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>
|
||||
<SearchView />
|
||||
</Navbar>
|
||||
{/* Page content */}
|
||||
<View id="editor_sdk">
|
||||
|
|
|
|||
57
apps/documenteditor/mobile/src/view/search.jsx
Normal file
57
apps/documenteditor/mobile/src/view/search.jsx
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Searchbar, Link } from 'framework7-react';
|
||||
import { f7ready, f7 } from 'framework7-react';
|
||||
|
||||
export default class SearchView extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
$$(document).on('page:init', (e, page) => {
|
||||
if ( page.name == 'home' ) {
|
||||
f7.searchbar.create({
|
||||
el: '.searchbar',
|
||||
customSearch: true,
|
||||
expandable: true,
|
||||
backdrop: false,
|
||||
on: {
|
||||
search: (bar, curval, prevval) => {
|
||||
console.log('on search results ' + curval);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<form className="searchbar">
|
||||
<div className="searchbar-bg"></div>
|
||||
<div className="searchbar-inner">
|
||||
<div className="buttons-row">
|
||||
<a id="search-settings" className="link icon-only" onClick={e => console.log('search settings click')}>
|
||||
<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>
|
||||
<div className="buttons-row">
|
||||
<a className="link icon-only prev disabled">
|
||||
<i className="icon icon-prev" />
|
||||
</a>
|
||||
<a className="link icon-only next disabled">
|
||||
<i className="icon icon-next" />
|
||||
</a>
|
||||
</div>
|
||||
<span className="searchbar-disable-button">Cancel</span>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue