[DE] skeleton refactoring
This commit is contained in:
Maxim Kadushkin
parent
f6107e516e
commit
751fedc663
|
|
@ -36,9 +36,9 @@ Framework7.use(Framework7React)
|
|||
ReactDOM.render(
|
||||
<I18nextProvider i18n={i18n}>
|
||||
<Provider {...stores}>
|
||||
<Suspense fallback="">
|
||||
{/*<Suspense fallback="loading...">*/}
|
||||
<App />
|
||||
</Suspense>
|
||||
{/*</Suspense>*/}
|
||||
</Provider>
|
||||
</I18nextProvider>,
|
||||
document.getElementById('app'),
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ const ErrorController = inject('storeAppOptions')(({storeAppOptions, LoadingDocu
|
|||
});
|
||||
return () => {
|
||||
const api = Common.EditorApi.get();
|
||||
api.asc_unregisterCallback('asc_onError', onError);
|
||||
if ( api ) api.asc_unregisterCallback('asc_onError', onError);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -35,9 +35,11 @@ const LongActionsController = () => {
|
|||
|
||||
return ( () => {
|
||||
const api = Common.EditorApi.get();
|
||||
api.asc_unregisterCallback('asc_onStartAction', onLongActionBegin);
|
||||
api.asc_unregisterCallback('asc_onEndAction', onLongActionEnd);
|
||||
api.asc_unregisterCallback('asc_onOpenDocumentProgress', onOpenDocument);
|
||||
if ( api ) {
|
||||
api.asc_unregisterCallback('asc_onStartAction', onLongActionBegin);
|
||||
api.asc_unregisterCallback('asc_onEndAction', onLongActionEnd);
|
||||
api.asc_unregisterCallback('asc_onOpenDocumentProgress', onOpenDocument);
|
||||
}
|
||||
|
||||
Common.Notifications.off('preloader:endAction', onLongActionEnd);
|
||||
Common.Notifications.off('preloader:beginAction', onLongActionBegin);
|
||||
|
|
|
|||
|
|
@ -279,7 +279,7 @@ class MainController extends Component {
|
|||
});
|
||||
|
||||
Common.Notifications.trigger('engineCreated', this.api);
|
||||
Common.EditorApi = {get: () => this.api};
|
||||
// Common.EditorApi = {get: () => this.api};
|
||||
|
||||
// Set font rendering mode
|
||||
let value = LocalStorage.getItem("de-settings-fontrender");
|
||||
|
|
@ -405,7 +405,9 @@ class MainController extends Component {
|
|||
}
|
||||
|
||||
applyLicense () {
|
||||
const _t = this._t;
|
||||
const { t } = this.props;
|
||||
const _t = t('Main', {returnObjects:true});
|
||||
|
||||
const warnNoLicense = _t.warnNoLicense.replace(/%1/g, __COMPANY_NAME__);
|
||||
const warnNoLicenseUsers = _t.warnNoLicenseUsers.replace(/%1/g, __COMPANY_NAME__);
|
||||
const textNoLicenseTitle = _t.textNoLicenseTitle.replace(/%1/g, __COMPANY_NAME__);
|
||||
|
|
@ -851,6 +853,7 @@ class MainController extends Component {
|
|||
}
|
||||
|
||||
componentDidMount() {
|
||||
Common.EditorApi = {get: () => this.api};
|
||||
this.initSdk();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,17 +22,128 @@
|
|||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<link rel="apple-touch-icon" href="static/icons/apple-touch-icon.png">
|
||||
<link rel="icon" href="static/icons/favicon.png">
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
/*background-color: red;*/
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.skl-navbar {
|
||||
--box-logo-height: 26px;
|
||||
--skl-navbar-height: 44px;
|
||||
--skl-pixel-ratio: 1;
|
||||
}
|
||||
|
||||
.skl-navbar--md {
|
||||
--skl-navbar-height: 56px;
|
||||
}
|
||||
|
||||
.skl-pixel-ratio--2 {
|
||||
--skl-pixel-ratio: 2;
|
||||
}
|
||||
|
||||
.skl-navbar {
|
||||
height: calc(var(--skl-navbar-height) + var(--box-logo-height));
|
||||
width: 100%;
|
||||
/*background-color: #446995;*/
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.skl-navbar.skl-navbar--md {
|
||||
height: calc(56px + 26px);
|
||||
background-color: #446995;
|
||||
}
|
||||
|
||||
.skl-navbar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.skl-navbar:not(.skl-navbar--md)::before {
|
||||
background-color: rgba(0,0,0,0.25);
|
||||
display: block;
|
||||
z-index: 15;
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scaleY(calc(1 / var(--skl-pixel-ratio)));
|
||||
}
|
||||
|
||||
.skl-navbar.skl-navbar--md::before {
|
||||
right: 0;
|
||||
width: 100%;
|
||||
top: 100%;
|
||||
bottom: auto;
|
||||
height: 8px;
|
||||
pointer-events: none;
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%)
|
||||
}
|
||||
|
||||
.skl-lines {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.skl-line {
|
||||
height: 15px;
|
||||
margin: 30px;
|
||||
background: #e2e2e2;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
|
||||
animation: flickerAnimation 2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes flickerAnimation {
|
||||
0% { opacity:0.1; }
|
||||
50% { opacity:1; }
|
||||
100% { opacity:0.1; }
|
||||
}
|
||||
@-o-keyframes flickerAnimation{
|
||||
0% { opacity:0.1; }
|
||||
50% { opacity:1; }
|
||||
100% { opacity:0.1; }
|
||||
}
|
||||
@-moz-keyframes flickerAnimation{
|
||||
0% { opacity:0.1; }
|
||||
50% { opacity:1; }
|
||||
100% { opacity:0.1; }
|
||||
}
|
||||
@-webkit-keyframes flickerAnimation{
|
||||
0% { opacity:0.1; }
|
||||
50% { opacity:1; }
|
||||
100% { opacity:0.1; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- built styles file will be auto injected -->
|
||||
</head>
|
||||
<body>
|
||||
<section class="skl-container">
|
||||
<div class="skl-navbar"></div>
|
||||
<div class="skl-lines">
|
||||
<div class="skl-line"></div>
|
||||
<div class="skl-line"></div>
|
||||
<div class="skl-line"></div>
|
||||
</div>
|
||||
</section>
|
||||
<script>
|
||||
const isAndroid = /Android/.test(navigator.userAgent);
|
||||
if ( isAndroid && navigator.platform == 'Win32' )
|
||||
// Framework7 doesn't set Device.android flag when navigator.platform == 'Win32', change it for debug
|
||||
navigator.__defineGetter__('platform', () => 'Win32Debug');
|
||||
|
||||
let navbar = document.querySelector('.skl-navbar');
|
||||
if ( window.devicePixelRatio ) {
|
||||
if ( navbar ) {
|
||||
navbar.classList.add(`skl-pixel-ratio--${Math.floor(window.devicePixelRatio)}`);
|
||||
}
|
||||
}
|
||||
|
||||
if ( !isAndroid ) {
|
||||
const ua = navigator.userAgent;
|
||||
const iPad = ua.match(/(iPad).*OS\s([\d_]+)/);
|
||||
|
|
@ -43,6 +154,10 @@
|
|||
get: function () { return `iPad; CPU OS 11_0 ${ua}`; }
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if ( navbar ) {
|
||||
navbar.classList.add('skl-navbar--md');
|
||||
}
|
||||
}
|
||||
|
||||
const getUrlParams = () => {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,9 @@ i18n.use(initReactI18next)
|
|||
loadPath: './locale/{{lng}}.json'
|
||||
},
|
||||
interpolation: { escapeValue: false },
|
||||
react: {
|
||||
useSuspense: false,
|
||||
},
|
||||
});
|
||||
|
||||
export default i18n;
|
||||
|
|
@ -88,6 +88,10 @@ class MainPage extends Component {
|
|||
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));
|
||||
if ( $$('.skl-container').length ) {
|
||||
$$('.skl-container').remove();
|
||||
}
|
||||
|
||||
return (
|
||||
<Page name="home" className={`editor${ showLogo ? ' page-with-logo' : ''}`}>
|
||||
{/* Top Navbar */}
|
||||
|
|
|
|||
Loading…
Reference in a new issue