[SSE mobile] Add skeleton
This commit is contained in:
parent
2355a62aa7
commit
cd396f147f
|
@ -380,6 +380,8 @@ class MainController extends Component {
|
|||
|
||||
Common.Gateway.documentReady();
|
||||
f7.emit('resize');
|
||||
|
||||
appOptions.changeDocReady(true);
|
||||
}
|
||||
|
||||
applyMode (appOptions) {
|
||||
|
|
|
@ -43,3 +43,42 @@
|
|||
background-color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
// Skeleton of workbook
|
||||
|
||||
.doc-placeholder {
|
||||
padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-subnavbar-offset, 0px));
|
||||
overflow: hidden;
|
||||
background: #fbfbfb;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #dfdfdf;
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: 0;
|
||||
z-index: 6000;
|
||||
|
||||
> .columns {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
background: linear-gradient(90deg, #d5d5d5 0px, rgba(0,0,0,0) 1px) 0 0,
|
||||
linear-gradient(rgba(0,0,0,0) 19px, #d5d5d5 20px) 0 0,
|
||||
linear-gradient( #f1f1f1 0px, #f1f1f1 20px) 0 0 repeat-x;
|
||||
background-size: 80px 20px;
|
||||
|
||||
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
|
||||
-moz-animation: flickerAnimation 2s infinite ease-in-out;
|
||||
-o-animation: flickerAnimation 2s infinite ease-in-out;
|
||||
animation: flickerAnimation 2s infinite ease-in-out;
|
||||
|
||||
&:first-child {
|
||||
background: linear-gradient(#f1f1f1 19px, #d5d5d5 20px) 0 0;
|
||||
background-size: 20px 20px;
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -72,6 +72,7 @@ class MainPage extends Component {
|
|||
const appOptions = this.props.storeAppOptions;
|
||||
const config = appOptions.config;
|
||||
const showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
|
||||
const showPlaceholder = !appOptions.isDocReady && (!config.customization || !(config.customization.loaderName || config.customization.loaderLogo));
|
||||
return (
|
||||
<Page name="home" className={`editor${ showLogo ? ' page-with-logo' : ''}`}>
|
||||
{/* Top Navbar */}
|
||||
|
@ -85,6 +86,13 @@ class MainPage extends Component {
|
|||
<CellEditor onClickToOpenAddOptions={(panels, button) => this.handleClickToOpenOptions('add', {panels: panels, button: button})}/>
|
||||
{/* Page content */}
|
||||
<View id="editor_sdk" />
|
||||
{showPlaceholder ?
|
||||
<div className="doc-placeholder">
|
||||
<div className="columns"></div>
|
||||
<div className="columns"></div>
|
||||
</div> :
|
||||
null
|
||||
}
|
||||
<SearchSettings useSuspense={false} />
|
||||
{
|
||||
!this.state.editOptionsVisible ? null :
|
||||
|
|
|
@ -9,7 +9,10 @@ export class storeAppOptions {
|
|||
setPermissionOptions: action,
|
||||
|
||||
lostEditingRights: observable,
|
||||
changeEditingRights: action
|
||||
changeEditingRights: action,
|
||||
|
||||
isDocReady: observable,
|
||||
changeDocReady: action
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -22,6 +25,11 @@ export class storeAppOptions {
|
|||
this.lostEditingRights = value;
|
||||
}
|
||||
|
||||
isDocReady = false;
|
||||
changeDocReady (value) {
|
||||
this.isDocReady = value;
|
||||
}
|
||||
|
||||
setConfigOptions (config, _t) {
|
||||
this.config = config;
|
||||
this.customization = config.customization;
|
||||
|
|
Loading…
Reference in a new issue