Merge pull request #1230 from ONLYOFFICE/feature/skeleton-optimize

Feature/skeleton optimize
This commit is contained in:
maxkadushkin 2021-10-06 14:25:22 +03:00 committed by GitHub
commit 0bd401884e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 267 additions and 51 deletions

View file

@ -206,10 +206,12 @@ class ContextMenuController extends Component {
Common.Notifications.off('document:ready', this.onDocumentReady);
const api = Common.EditorApi.get();
api.asc_unregisterCallback('asc_onShowPopMenu', this.onApiOpenContextMenu);
api.asc_unregisterCallback('asc_onHidePopMenu', this.onApiHideContextMenu);
api.asc_unregisterCallback('asc_onShowForeignCursorLabel', this.onApiShowForeignCursorLabel);
api.asc_unregisterCallback('asc_onHideForeignCursorLabel', this.onApiHideForeignCursorLabel);
if ( api ) {
api.asc_unregisterCallback('asc_onShowPopMenu', this.onApiOpenContextMenu);
api.asc_unregisterCallback('asc_onHidePopMenu', this.onApiHideContextMenu);
api.asc_unregisterCallback('asc_onShowForeignCursorLabel', this.onApiShowForeignCursorLabel);
api.asc_unregisterCallback('asc_onHideForeignCursorLabel', this.onApiHideForeignCursorLabel);
}
}
componentDidMount() {

View file

@ -31,10 +31,12 @@ const PluginsController = inject('storeAppOptions')(observer(props => {
return () => {
const api = Common.EditorApi.get();
api.asc_unregisterCallback("asc_onPluginShow", showPluginModal);
api.asc_unregisterCallback("asc_onPluginClose", pluginClose);
api.asc_unregisterCallback("asc_onPluginResize", pluginResize);
api.asc_unregisterCallback('asc_onPluginsInit', onPluginsInit);
if ( api ) {
api.asc_unregisterCallback("asc_onPluginShow", showPluginModal);
api.asc_unregisterCallback("asc_onPluginClose", pluginClose);
api.asc_unregisterCallback("asc_onPluginResize", pluginResize);
api.asc_unregisterCallback('asc_onPluginsInit', onPluginsInit);
}
};
});

View file

@ -0,0 +1,107 @@
body {
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%;
position: relative;
}
.skl-navbar.skl-navbar--md {
/*height: calc(56px + 26px);*/
}
.skl-navbar.skl-navbar--ios {
background-color: #f7f7f8;
}
.skl-navbar.skl-navbar--word.skl-navbar--md {
background-color: #446995;
}
.skl-navbar.skl-navbar--cell.skl-navbar--md {
background-color: #40865c;
}
.skl-navbar.skl-navbar--slide.skl-navbar--md {
background-color: #aa5252;
}
.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; }
}

View file

@ -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'),

View file

@ -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);
}
});

View file

@ -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);

View file

@ -282,7 +282,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");
@ -408,7 +408,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__);
@ -941,6 +943,7 @@ class MainController extends Component {
}
componentDidMount() {
Common.EditorApi = {get: () => this.api};
this.initSdk();
}
}

View file

@ -22,17 +22,37 @@
<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">
<% if (!htmlWebpackPlugin.options.skeleton.stylesheet) { %>
<link rel="stylesheet" href="../../common/mobile/resources/css/skeleton.css">
<% } else { %>
<style><%= htmlWebpackPlugin.options.skeleton.stylesheet %></style>
<% } %>
<!-- built styles file will be auto injected -->
</head>
<body>
<section class="skl-container">
<div class="skl-navbar skl-navbar--word"></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');
const element_add_class = (el, cls) => (el && el.classList.add(cls));
let navbar = document.querySelector('.skl-navbar');
if ( window.devicePixelRatio ) {
element_add_class(navbar, `skl-pixel-ratio--${Math.floor(window.devicePixelRatio)}`);
}
if ( !isAndroid ) {
const ua = navigator.userAgent;
const iPad = ua.match(/(iPad).*OS\s([\d_]+)/);
@ -42,7 +62,11 @@
Object.defineProperty(navigator, 'userAgent', {
get: function () { return `iPad; CPU OS 11_0 ${ua}`; }
});
} else {
element_add_class(navbar, `skl-navbar--ios`);
}
} else {
element_add_class(navbar, `skl-navbar--md`);
}
const getUrlParams = () => {

View file

@ -12,6 +12,9 @@ i18n.use(initReactI18next)
loadPath: './locale/{{lng}}.json'
},
interpolation: { escapeValue: false },
react: {
useSuspense: false,
},
});
export default i18n;

View file

@ -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 */}

View file

@ -35,9 +35,9 @@ Framework7.use(Framework7React)
ReactDOM.render(
<I18nextProvider i18n={i18n}>
<Provider {...stores}>
<Suspense fallback="">
{/*<Suspense fallback="">*/}
<App />
</Suspense>
{/*</Suspense>*/}
</Provider>
</I18nextProvider>,
document.getElementById('app'),

View file

@ -40,8 +40,10 @@ class ContextMenu extends ContextMenuController {
super.componentWillUnmount();
const api = Common.EditorApi.get();
api.asc_unregisterCallback('asc_onShowComment', this.onApiShowComment);
api.asc_unregisterCallback('asc_onHideComment', this.onApiHideComment);
if ( api ) {
api.asc_unregisterCallback('asc_onShowComment', this.onApiShowComment);
api.asc_unregisterCallback('asc_onHideComment', this.onApiHideComment);
}
}

View file

@ -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);
}
});

View file

@ -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);

View file

@ -184,7 +184,6 @@ class MainController extends Component {
});
Common.Notifications.trigger('engineCreated', this.api);
Common.EditorApi = {get: () => this.api};
this.appOptions = {};
this.bindEvents();
@ -479,7 +478,9 @@ class MainController extends Component {
}
applyLicense () {
const _t = this._t;
const { t } = this.props;
const _t = t('Controller.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__);
@ -834,6 +835,7 @@ class MainController extends Component {
}
componentDidMount () {
Common.EditorApi = {get: () => this.api};
this.initSdk();
}
}

View file

@ -22,17 +22,32 @@
<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">
<% if (!htmlWebpackPlugin.options.skeleton.stylesheet) { %>
<link rel="stylesheet" href="../../common/mobile/resources/css/skeleton.css">
<% } else { %>
<style><%= htmlWebpackPlugin.options.skeleton.stylesheet %></style>
<% } %>
<!-- built styles file will be auto injected -->
</head>
<body>
<section class="skl-container">
<div class="skl-navbar skl-navbar--slide"></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');
const element_add_class = (el, cls) => (el && el.classList.add(cls));
let navbar = document.querySelector('.skl-navbar');
if ( window.devicePixelRatio ) {
element_add_class(navbar, `skl-pixel-ratio--${Math.floor(window.devicePixelRatio)}`);
}
if ( !isAndroid ) {
const ua = navigator.userAgent;
const iPad = ua.match(/(iPad).*OS\s([\d_]+)/);
@ -42,7 +57,11 @@
Object.defineProperty(navigator, 'userAgent', {
get: function () { return `iPad; CPU OS 11_0 ${ua}`; }
});
} else {
element_add_class(navbar, `skl-navbar--ios`);
}
} else {
element_add_class(navbar, `skl-navbar--md`);
}
const getUrlParams = () => {

View file

@ -12,6 +12,9 @@ i18n.use(initReactI18next)
loadPath: './locale/{{lng}}.json'
},
interpolation: { escapeValue: false },
react: {
useSuspense: false,
},
});
export default i18n;

View file

@ -89,6 +89,11 @@ class MainPage extends Component {
});
};
componentDidMount () {
if ( $$('.skl-container').length )
$$('.skl-container').remove();
}
render() {
const appOptions = this.props.storeAppOptions;
const config = appOptions.config;

View file

@ -36,9 +36,7 @@ Framework7.use(Framework7React);
ReactDOM.render(
<I18nextProvider i18n={i18n}>
<Provider {...stores}>
<Suspense fallback="">
<App />
</Suspense>
<App />
</Provider>
</I18nextProvider>,
document.getElementById('app'),

View file

@ -44,9 +44,11 @@ class ContextMenu extends ContextMenuController {
super.componentWillUnmount();
const api = Common.EditorApi.get();
api.asc_unregisterCallback('asc_onShowComment', this.onApiShowComment);
api.asc_unregisterCallback('asc_onHideComment', this.onApiHideComment);
api.asc_unregisterCallback('asc_onMouseMove', this.onApiMouseMove);
if ( api ) {
api.asc_unregisterCallback('asc_onShowComment', this.onApiShowComment);
api.asc_unregisterCallback('asc_onHideComment', this.onApiHideComment);
api.asc_unregisterCallback('asc_onMouseMove', this.onApiMouseMove);
}
}

View file

@ -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);
}
});

View file

@ -19,7 +19,7 @@ const FilterOptionsController = memo( () => {
api.asc_registerCallback('asc_onSetAFDialog',onApiFilterOptions);
}
if ( !Common.EditorApi ) {
if ( !Common.EditorApi.get() ) {
Common.Notifications.on('document:ready',onDocumentReady);
} else {
onDocumentReady();
@ -28,7 +28,9 @@ const FilterOptionsController = memo( () => {
return () => {
Common.Notifications.off('document:ready', onDocumentReady);
const api = Common.EditorApi.get();
api.asc_unregisterCallback('asc_onSetAFDialog',onApiFilterOptions);
if ( api ) {
api.asc_unregisterCallback('asc_onSetAFDialog', onApiFilterOptions);
}
}
}, []);

View file

@ -36,10 +36,12 @@ 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);
api.asc_unregisterCallback('asc_onConfirmAction', onConfirmAction);
if ( api ) {
api.asc_unregisterCallback('asc_onStartAction', onLongActionBegin);
api.asc_unregisterCallback('asc_onEndAction', onLongActionEnd);
api.asc_unregisterCallback('asc_onOpenDocumentProgress', onOpenDocument);
api.asc_unregisterCallback('asc_onConfirmAction', onConfirmAction);
}
Common.Notifications.off('preloader:endAction', onLongActionEnd);
Common.Notifications.off('preloader:beginAction', onLongActionBegin);

View file

@ -20,6 +20,7 @@ import About from "../../../../common/mobile/lib/view/About";
import PluginsController from '../../../../common/mobile/lib/controller/Plugins.jsx';
import EncodingController from "./Encoding";
import { StatusbarController } from "./Statusbar";
import { useTranslation } from 'react-i18next';
@inject(
"users",
@ -281,7 +282,6 @@ class MainController extends Component {
});
Common.Notifications.trigger('engineCreated', this.api);
Common.EditorApi = {get: () => this.api};
this.appOptions = {};
this.bindEvents();
@ -507,8 +507,10 @@ class MainController extends Component {
}
applyLicense () {
const _t = this._t;
const warnNoLicense = _t.warnNoLicense.replace(/%1/g, __COMPANY_NAME__);
const { t } = this.props;
const _t = t('Controller.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__);
const warnLicenseExceeded = _t.warnLicenseExceeded.replace(/%1/g, __COMPANY_NAME__);
@ -851,6 +853,7 @@ class MainController extends Component {
}
componentDidMount() {
Common.EditorApi = {get: () => this.api};
this.initSdk();
}
}

View file

@ -22,17 +22,32 @@
<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">
<% if (!htmlWebpackPlugin.options.skeleton.stylesheet) { %>
<link rel="stylesheet" href="../../common/mobile/resources/css/skeleton.css">
<% } else { %>
<style><%= htmlWebpackPlugin.options.skeleton.stylesheet %></style>
<% } %>
<!-- built styles file will be auto injected -->
</head>
<body>
<section class="skl-container ">
<div class="skl-navbar skl-navbar--cell"></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');
const element_add_class = (el, cls) => (el && el.classList.add(cls));
let navbar = document.querySelector('.skl-navbar');
if ( window.devicePixelRatio ) {
element_add_class(navbar, `skl-pixel-ratio--${Math.floor(window.devicePixelRatio)}`);
}
if ( !isAndroid ) {
const ua = navigator.userAgent;
const iPad = ua.match(/(iPad).*OS\s([\d_]+)/);
@ -42,7 +57,11 @@
Object.defineProperty(navigator, 'userAgent', {
get: function () { return `iPad; CPU OS 11_0 ${ua}`; }
});
} else {
element_add_class(navbar, `skl-navbar--ios`);
}
} else {
element_add_class(navbar, `skl-navbar--md`);
}
const getUrlParams = () => {

View file

@ -12,6 +12,9 @@ i18n.use(initReactI18next)
loadPath: './locale/{{lng}}.json'
},
interpolation: { escapeValue: false },
react: {
useSuspense: false,
},
});
export default i18n;

View file

@ -91,6 +91,9 @@ 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' : ''}`}>

View file

@ -89,6 +89,7 @@ module.exports = {
{
test: /\.css$/,
exclude: [/skeleton\.css$/i],
use: [
(env === 'development' ? 'style-loader' : {
loader: MiniCssExtractPlugin.loader,
@ -188,6 +189,9 @@ module.exports = {
// new webpack.NamedModulesPlugin(),
]),
// new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: 'css/[name].css',
}),
new HtmlWebpackPlugin({
filename: `../../../apps/${editor}/mobile/index.html`,
template: `../../apps/${editor}/mobile/src/index_dev.html`,
@ -200,9 +204,9 @@ module.exports = {
removeStyleLinkTypeAttributes: true,
useShortDoctype: true
} : false,
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css',
skeleton: {
stylesheet: env === 'development' ? undefined : fs.readFileSync(`../../apps/common/mobile/resources/css/skeleton.css`),
},
}),
new CopyWebpackPlugin({
patterns: [