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

Merge branch 'feature/mobile-apps-on-reactjs' of https://github.com/ONLYOFFICE/web-apps into feature/mobile-apps-on-reactjs

Browse source
This commit is contained in:
JuliaSvinareva 2020-12-28 23:13:34 +03:00
parent d8d040733b 58bc75cef3
commit 25150e6f36
4 changed files with 27 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
apps/common/mobile/lib/component/ThemeColorPalette.jsx
View file

@ -7,12 +7,12 @@ const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
<div className='palette'>
{themeColors.map((row, rowIndex) => {
return(
<div className='row' key={'row-'+rowIndex}>
<div key={`tc-row-${rowIndex}`} className='row'>
{row.map((effect, index) => {
return(
<a key={'tc-' + rowIndex + '-' + index}
<a key={`tc-${rowIndex}-${index}`}
className={curColor && curColor.color === effect.color && curColor.effectValue === effect.effectValue ? 'active' : ''}
style={{ background: '#' + effect.color}}
style={{ background: `#${effect.color}`}}
onClick={() => {onColorClick(effect.color, effect.effectId)}}
></a>
)
@ -30,13 +30,13 @@ const StandartColors = ({ options, standartColors, onColorClick, curColor }) =>
{standartColors.map((color, index) => {
return(
index === 0 && options.transparent ?
<a key={'sc-' + index}
className={'transparent' + ('transparent' === curColor ? ' active' : '')}
<a key={`sc-${index}`}
className={`transparent ${'transparent' === curColor ? 'active' : ''}`}
onClick={() => {onColorClick('transparent')}}
></a> :
<a key={'sc-' + index}
<a key={`sc-${index}`}
className={curColor && curColor === color ? ' active' : ''}
style={{ background: '#' + color}}
style={{ background: `#${color}` }}
onClick={() => {onColorClick(color)}}
></a>
)
@ -46,12 +46,12 @@ const StandartColors = ({ options, standartColors, onColorClick, curColor }) =>
};
const CustomColors = ({ options, customColors, onColorClick, curColor }) => {
const colors = customColors.length > 0 ? customColors : [];//dynamiColors;
const colors = customColors.length > 0 ? customColors : [];
const emptyItems = [];
if (colors.length < options.customcolors) {
for (let i = colors.length; i < options.customcolors; i++) {
emptyItems.push(<a key={'dc-empty' + i}
style={{background: '#ffffff'}}
emptyItems.push(<a className='empty-color'
key={`dc-empty${i}`}
onClick={() => {onColorClick('empty')}}
></a>)
}
@ -60,7 +60,7 @@ const CustomColors = ({ options, customColors, onColorClick, curColor }) => {
<div className='palette'>
{colors && colors.length > 0 && colors.map((color, index) => {
return(
<a key={'dc-' + index}
<a key={`dc-${index}`}
className={curColor && curColor === color ? 'active' : ''}
style={{background: '#' + color}}
onClick={() => {onColorClick(color)}}

12
apps/common/mobile/resources/less/common.less
View file

@ -3,7 +3,7 @@
@black: #000000;
@gray: #c4c4c4;
@green: #4cd964;
@background-normal: @white;
.popup, .popover, .sheet-modal {
.list:first-child {
@ -53,7 +53,7 @@
}
&.active {
.color-auto {
box-shadow: 0 0 0 1px @white, 0 0 0 4px @themeColor;
box-shadow: 0 0 0 1px @background-normal, 0 0 0 4px @themeColor;
border-radius: 1px;
}
}
@ -74,7 +74,7 @@
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 0 0 1px @white, 0 0 0 4px @themeColor;
box-shadow: 0 0 0 1px @background-normal, 0 0 0 4px @themeColor;
z-index: 1;
border-radius: 1px;
}
@ -91,6 +91,12 @@
display: flex;
}
}
.dynamic-colors {
.empty-color {
background-color: @background-normal;
}
}
}
#color-picker {

32
apps/documenteditor/mobile/src/css/app.less
View file

@ -10,38 +10,6 @@
@import './icons-ios.less';
@import './icons-material.less';
/* Left Panel right border when it is visible by breakpoint */
.panel-left.panel-in-breakpoint:before {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 1px;
background: rgba(0,0,0,0.1);
content: '';
z-index: 6000;
}
/* Hide navbar link which opens left panel when it is visible by breakpoint */
.panel-left.panel-in-breakpoint ~ .view .navbar .panel-open[data-panel="left"] {
display: none;
}
/*
Extra borders for main view and left panel for iOS theme when it behaves as panel (before breakpoint size)
*/
.ios .panel-left:not(.panel-in-breakpoint).panel-in ~ .view-main:before,
.ios .panel-left:not(.panel-in-breakpoint).panel-closing ~ .view-main:before {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 1px;
background: rgba(0,0,0,0.1);
content: '';
z-index: 6000;
}
:root {
--f7-popover-width: 360px;
}

42
apps/documenteditor/mobile/src/view/app.jsx
View file

@ -31,51 +31,9 @@ export default class extends React.Component {
return (
<App params={ this.state.f7params } >
{/* Left panel with cover effect when hidden */}
<Panel left cover themeDark visibleBreakpoint={960}>
<View>
<Page>
<Navbar title="Left Panel"/>
<BlockTitle>Left View Navigation</BlockTitle>
<List>
<ListItem link="/left-page-1/" title="Left Page 1"/>
<ListItem link="/left-page-2/" title="Left Page 2"/>
</List>
</Page>
</View>
</Panel>
{/* Right panel with reveal effect*/}
<Panel right reveal themeDark>
<View>
<Page>
<Navbar title="Right Panel"/>
<Block>Right panel content goes here</Block>
</Page>
</View>
</Panel>
{/* Your main view, should have "view-main" class */}
<View main className="safe-areas" url="/" />
<MainController />
{/* Popup */}
<Popup id="my-popup">
<View>
<Page>
<Navbar title="Popup">
<NavRight>
<Link popupClose>Close</Link>
</NavRight>
</Navbar>
<Block>
<p>Popup content goes here.</p>
</Block>
</Page>
</View>
</Popup>
</App>
)
}