diff --git a/apps/common/mobile/resources/img/header/header-logo.png b/apps/common/mobile/resources/img/header/header-logo.png new file mode 100644 index 000000000..bace6a100 Binary files /dev/null and b/apps/common/mobile/resources/img/header/header-logo.png differ diff --git a/apps/common/mobile/resources/img/header/header-logo@2x.png b/apps/common/mobile/resources/img/header/header-logo@2x.png new file mode 100644 index 000000000..57644434a Binary files /dev/null and b/apps/common/mobile/resources/img/header/header-logo@2x.png differ diff --git a/apps/documenteditor/mobile/index.html b/apps/documenteditor/mobile/index.html index 6ecc8a965..75f032d7d 100644 --- a/apps/documenteditor/mobile/index.html +++ b/apps/documenteditor/mobile/index.html @@ -61,12 +61,11 @@ margin: 0 auto; } - .loadmask > .brendpanel .loading-logo > i { + .loadmask > .brendpanel .loading-logo > img { display: inline-block; - width: 86px; - height: 20px; - background-image: url(http://192.168.3.191:8080/web-apps-pro/apps/common/main/resources/img/header/header-logo.png); - background-repeat: no-repeat; + max-width: 100px; + max-height: 20px; + opacity: 0; } .loadmask > .brendpanel .circle { @@ -121,7 +120,7 @@ -
+
diff --git a/apps/documenteditor/mobile/index_loader.html b/apps/documenteditor/mobile/index_loader.html new file mode 100644 index 000000000..7ec0537f5 --- /dev/null +++ b/apps/documenteditor/mobile/index_loader.html @@ -0,0 +1,265 @@ + + + + + + + + + + ONLYOFFICE Documents + + + + + + + + + + + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/apps/presentationeditor/main/index.reporter.html b/apps/presentationeditor/main/index.reporter.html index 7ac1b7fa5..71611b2dc 100644 --- a/apps/presentationeditor/main/index.reporter.html +++ b/apps/presentationeditor/main/index.reporter.html @@ -20,160 +20,128 @@ overflow: hidden; border: none; background-color: #f4f4f4; - z-index: 100; + z-index: 10000; } - .loader-page { + .loadmask { width: 100%; - height: 170px; - bottom: 42%; - position: absolute; - text-align: center; - line-height: 10px; + height: 100%; } - .loader-logo { - max-height: 160px; - margin-bottom: 10px; + .loadmask > .brendpanel { + width: 100%; + height: 56px; + background: #aa5252; } - .loader-page-romb { - width: 40px; + .loadmask > .brendpanel > div { + display: flex; + align-items: center; + } + + .loadmask > .brendpanel .loading-logo { + padding: 0 24px 0 12px; + max-width: 200px; + height: 20px; + } + + .loadmask > .brendpanel .loading-logo > img { display: inline-block; + max-width: 100px; + max-height: 20px; + opacity: 0; } - .loader-page-text { + .loadmask > .brendpanel .spacer { + margin-left: auto; + } + + .loadmask > .brendpanel .circle { + vertical-align: middle; + width: 20px; + height: 20px; + border-radius: 12px; + margin: 4px 10px; + background: rgba(255, 255, 255, 0.2); + } + + .loadmask > .brendpanel .rect { + vertical-align: middle; + width: 50px; + height: 12px; + border-radius: 3px; + margin: 0 10px; + background: rgba(255, 255, 255, 0.2); + } + + .loadmask > .placeholder { + display: flex; + flex-direction: column; + min-height: 100%; + margin: 0 100px; + } + + .loadmask > .placeholder .slide-h { + display: flex; + flex-direction: column; + justify-content: center; + flex-grow: 1; + max-width: 1350px; width: 100%; - bottom: 42%; + margin: 0 auto 56px; + } + .loadmask > .placeholder .slide-v { + display: flex; + position: relative; + flex-direction: column; + padding-bottom: 56.1333%; + } + + .loadmask > .placeholder .slide-container { position: absolute; - text-align: center; - color: #888; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - line-height: 20px; + height: 100%; + width: 100%; + background: #fbfbfb; + border: 1px solid #dfdfdf; + display: grid; + + -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; } - .loader-page-text-loading { - font-size: 14px; - } - - .loader-page-text-customer { - font-size: 16px; - margin-bottom: 5px; - } - - .romb { - width: 40px; - height: 40px; - -webkit-transform: rotate(135deg) skew(20deg, 20deg); - -moz-transform: rotate(135deg) skew(20deg, 20deg); - -ms-transform: rotate(135deg) skew(20deg, 20deg); - -o-transform: rotate(135deg) skew(20deg, 20deg); - position: absolute; - background: red; + .loadmask > .placeholder .slide-container > .line { + height: 30%; + margin: auto 120px; border-radius: 6px; - -webkit-animation: movedown 3s infinite ease; - -moz-animation: movedown 3s infinite ease; - -ms-animation: movedown 3s infinite ease; - -o-animation: movedown 3s infinite ease; - animation: movedown 3s infinite ease; + background: #f5f5f5; } - #blue { - z-index: 3; - background: #55bce6; - -webkit-animation-name: blue; - -moz-animation-name: blue; - -ms-animation-name: blue; - -o-animation-name: blue; - animation-name: blue; + .loadmask > .placeholder .slide-container > .line:nth-child(1) { + height: 40%; + margin: auto 80px; } - #red { - z-index:1; - background: #de7a59; - -webkit-animation-name: red; - -moz-animation-name: red; - -ms-animation-name: red; - -o-animation-name: red; - animation-name: red; + @keyframes flickerAnimation { + 0% { opacity:1; } + 50% { opacity:0.3; } + 100% { opacity:1; } } - - #green { - z-index: 2; - background: #a1cb5c; - -webkit-animation-name: green; - -moz-animation-name: green; - -ms-animation-name: green; - -o-animation-name: green; - animation-name: green; + @-o-keyframes flickerAnimation{ + 0% { opacity:1; } + 50% { opacity:0.3; } + 100% { opacity:1; } } - - @-webkit-keyframes red { - 0% { top:120px; background: #de7a59; } - 10% { top:120px; background: #F2CBBF; } - 14% { background: #f4f4f4; top:120px; } - 15% { background: #f4f4f4; top:0;} - 20% { background: #E6E4E4; } - 30% { background: #D2D2D2; } - 40% { top:120px; } - 100% { top:120px; background: #de7a59; } + @-moz-keyframes flickerAnimation{ + 0% { opacity:1; } + 50% { opacity:0.3; } + 100% { opacity:1; } } - - @keyframes red { - 0% { top:120px; background: #de7a59; } - 10% { top:120px; background: #F2CBBF; } - 14% { background: #f4f4f4; top:120px; } - 15% { background: #f4f4f4; top:0; } - 20% { background: #E6E4E4; } - 30% { background: #D2D2D2; } - 40% { top:120px; } - 100% { top:120px; background: #de7a59; } - } - - @-webkit-keyframes green { - 0% { top:110px; background: #a1cb5c; opacity:1; } - 10% { top:110px; background: #CBE0AC; opacity:1; } - 14% { background: #f4f4f4; top:110px; opacity:1; } - 15% { background: #f4f4f4; top:0; opacity:1; } - 20% { background: #f4f4f4; top:0; opacity:0; } - 25% { background: #EFEFEF; top:0; opacity:1; } - 30% { background:#E6E4E4; } - 70% { top:110px; } - 100% { top:110px; background: #a1cb5c; } - } - - @keyframes green { - 0% { top:110px; background: #a1cb5c; opacity:1; } - 10% { top:110px; background: #CBE0AC; opacity:1; } - 14% { background: #f4f4f4; top:110px; opacity:1; } - 15% { background: #f4f4f4; top:0; opacity:1; } - 20% { background: #f4f4f4; top:0; opacity:0; } - 25% { background: #EFEFEF; top:0; opacity:1; } - 30% { background:#E6E4E4; } - 70% { top:110px; } - 100% { top:110px; background: #a1cb5c; } - } - - @-webkit-keyframes blue { - 0% { top:100px; background: #55bce6; opacity:1; } - 10% { top:100px; background: #BFE8F8; opacity:1; } - 14% { background: #f4f4f4; top:100px; opacity:1; } - 15% { background: #f4f4f4; top:0; opacity:1; } - 20% { background: #f4f4f4; top:0; opacity:0; } - 25% { background: #f4f4f4; top:0; opacity:0; } - 45% { background: #EFEFEF; top:0; opacity:0.2; } - 100% { top:100px; background: #55bce6; } - } - - @keyframes blue { - 0% { top:100px; background: #55bce6; opacity:1; } - 10% { top:100px; background: #BFE8F8; opacity:1; } - 14% { background: #f4f4f4; top:100px; opacity:1; } - 15% { background: #f4f4f4; top:0; opacity:1; } - 20% { background: #f4f4f4; top:0; opacity:0; } - 25% { background: #f4f4f4; top:0; opacity:0; } - 45% { background: #EFEFEF; top:0; opacity:0.2; } - 100% { top:100px; background: #55bce6; } + @-webkit-keyframes flickerAnimation{ + 0% { opacity:1; } + 50% { opacity:0.3; } + 100% { opacity:1; } } @@ -223,53 +191,23 @@ var params = getUrlParams(), lang = (params["lang"] || 'en').split(/[\-\_]/)[0], - customer = params["customer"] ? ('
' + encodeUrlParam(params["customer"]) + '
') : '', - margin = (customer !== '') ? 50 : 20, - loading = 'Loading...', presenter = 'Presenter View', - logo = params["logo"] ? ((params["logo"] !== 'none') ? ('') : '') : null; + logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null; window.frameEditorId = params["frameEditorId"]; - - if ( lang == 'bg') { presenter = 'Изглед на презентатора'; loading = 'Зареждане...';} - else if ( lang == 'cs') { presenter = 'Zobrazení přednášejícího'; loading = 'Nahrávám...';} - else if ( lang == 'de') { presenter = 'Referentenansicht'; loading = 'Ladevorgang...';} - else if ( lang == 'es') { presenter = 'Vista del presentador'; loading = 'Cargando...';} - else if ( lang == 'fr') { presenter = 'Mode présentateur'; loading = 'Chargement en cours...';} - else if ( lang == 'it') { presenter = 'Visualizzazione del presenter'; loading = 'Caricamento in corso...';} - else if ( lang == 'pl') { presenter = 'Widok Prezentera'; loading = 'Ładowanie...';} - else if ( lang == 'pt') { presenter = 'Vista de apresentador'; loading = 'Carregando...';} - else if ( lang == 'ru') { presenter = 'Режим докладчика'; loading = 'Загрузка...';} - else if ( lang == 'sk') { presenter = 'Režim prezentácie'; loading = 'Nahrávam...';} - else if ( lang == 'sl') { loading = 'Nalaganje...';} + if ( lang == 'bg') { presenter = 'Изглед на презентатора';} + else if ( lang == 'cs') { presenter = 'Zobrazení přednášejícího';} + else if ( lang == 'de') { presenter = 'Referentenansicht';} + else if ( lang == 'es') { presenter = 'Vista del presentador';} + else if ( lang == 'fr') { presenter = 'Mode présentateur';} + else if ( lang == 'it') { presenter = 'Visualizzazione del presenter';} + else if ( lang == 'pl') { presenter = 'Widok Prezentera';} + else if ( lang == 'pt') { presenter = 'Vista de apresentador';} + else if ( lang == 'ru') { presenter = 'Режим докладчика';} + else if ( lang == 'sk') { presenter = 'Režim prezentácie';} else if ( lang == 'zh') { presenter = '演示者视图';} - else if ( lang == 'tr') { loading = 'Yükleniyor...';} - else if ( lang == 'hu') loading = 'Betöltés...'; - else if ( lang == 'ja') loading = '読み込み中...'; - else if ( lang == 'ko') loading = '로드 중...'; - else if ( lang == 'lv') loading = 'Ieladēšana ...'; - else if ( lang == 'nl') loading = 'Laden...'; - else if ( lang == 'uk') loading = 'Завантаження...'; - else if ( lang == 'vi') loading = 'Đang tải...'; - else if ( lang == 'zh') loading = '加载中...'; window.document.title = presenter; - - if (!stopLoading) - document.write( - '
' + - '
' + - ((logo!==null) ? logo : - '
' + - '
' + - '
' + - '
' + - '
') + - '
' + - '
' + customer + - '
' + loading + '
' + - '
' + - '
'); +
+
+ + + diff --git a/apps/presentationeditor/mobile/index.html b/apps/presentationeditor/mobile/index.html index 1e561ca77..597c63233 100644 --- a/apps/presentationeditor/mobile/index.html +++ b/apps/presentationeditor/mobile/index.html @@ -61,12 +61,11 @@ margin: 0 auto; } - .loadmask > .brendpanel .loading-logo > i { + .loadmask > .brendpanel .loading-logo > img { display: inline-block; - width: 86px; - height: 20px; - background-image: url(http://192.168.3.191:8080/web-apps-pro/apps/common/main/resources/img/header/header-logo.png); - background-repeat: no-repeat; + max-width: 100px; + max-height: 20px; + opacity: 0; } .loadmask > .brendpanel .circle { @@ -158,7 +157,7 @@
@@ -199,40 +198,21 @@ var params = getUrlParams(), lang = (params["lang"] || 'en').split(/[\-\_]/)[0], - customer = params["customer"] ? ('
' + encodeUrlParam(params["customer"]) + '
') : '', - margin = (customer !== '') ? 50 : 20, - loading = 'Loading...', - logo = params["logo"] ? ((params["logo"] !== 'none') ? ('') : '') : null; + logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null; window.frameEditorId = params["frameEditorId"]; - if ( lang == 'de') loading = 'Ladevorgang...'; - else if ( lang == 'es') loading = 'Cargando...'; - else if ( lang == 'fr') loading = 'Chargement en cours...'; - else if ( lang == 'it') loading = 'Caricamento in corso...'; - else if ( lang == 'pt') loading = 'Carregando...'; - else if ( lang == 'ru') loading = 'Загрузка...'; - else if ( lang == 'sl') loading = 'Nalaganje...'; - else if ( lang == 'tr') loading = 'Yükleniyor...'; - else if ( lang == 'bg') loading = 'Зареждане...'; - else if ( lang == 'cs') loading = 'Nahrávám...'; - else if ( lang == 'hu') loading = 'Betöltés...'; - else if ( lang == 'ja') loading = '読み込み中...'; - else if ( lang == 'ko') loading = '로드 중...'; - else if ( lang == 'lv') loading = 'Ieladēšana ...'; - else if ( lang == 'nl') loading = 'Laden...'; - else if ( lang == 'pl') loading = 'Ładowanie...'; - else if ( lang == 'sk') loading = 'Nahrávam...'; - else if ( lang == 'uk') loading = 'Завантаження...'; - else if ( lang == 'vi') loading = 'Đang tải...'; - else if ( lang == 'zh') loading = '加载中...'; - var brendpanel = document.getElementsByClassName('brendpanel')[0]; if (brendpanel) { if (/Android/.test(navigator.userAgent)) { brendpanel.classList.add('android'); } brendpanel.classList.add('visible'); + var elem = document.querySelector('.loading-logo img'); + if (elem) { + logo && (elem.setAttribute('src', logo)); + elem.style.opacity = 1; + } } var placeholder = document.getElementsByClassName('placeholder')[0]; if (placeholder && /Android/.test(navigator.userAgent)) { diff --git a/apps/presentationeditor/mobile/index_loader.html b/apps/presentationeditor/mobile/index_loader.html new file mode 100644 index 000000000..07c555eb9 --- /dev/null +++ b/apps/presentationeditor/mobile/index_loader.html @@ -0,0 +1,265 @@ + + + + + + + + + + ONLYOFFICE Presentations + + + + + + + + + + + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/index.html b/apps/spreadsheeteditor/mobile/index.html index 683514306..e883cdb55 100644 --- a/apps/spreadsheeteditor/mobile/index.html +++ b/apps/spreadsheeteditor/mobile/index.html @@ -57,12 +57,11 @@ margin: 0 auto; } - .loadmask > .brendpanel .loading-logo > i { + .loadmask > .brendpanel .loading-logo > img { display: inline-block; - width: 86px; - height: 20px; - background-image: url(http://192.168.3.191:8080/web-apps-pro/apps/common/main/resources/img/header/header-logo.png); - background-repeat: no-repeat; + max-width: 100px; + max-height: 20px; + opacity: 0; } .loadmask > .brendpanel .circle { @@ -137,7 +136,7 @@
@@ -172,40 +171,21 @@ var params = getUrlParams(), lang = (params["lang"] || 'en').split(/[\-\_]/)[0], - customer = params["customer"] ? ('
' + encodeUrlParam(params["customer"]) + '
') : '', - margin = (customer !== '') ? 50 : 20, - loading = 'Loading...', - logo = params["logo"] ? ((params["logo"] !== 'none') ? ('') : '') : null; + logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null; window.frameEditorId = params["frameEditorId"]; - if ( lang == 'de') loading = 'Ladevorgang...'; - else if ( lang == 'es') loading = 'Cargando...'; - else if ( lang == 'fr') loading = 'Chargement en cours...'; - else if ( lang == 'it') loading = 'Caricamento in corso...'; - else if ( lang == 'pt') loading = 'Carregando...'; - else if ( lang == 'ru') loading = 'Загрузка...'; - else if ( lang == 'sl') loading = 'Nalaganje...'; - else if ( lang == 'tr') loading = 'Yükleniyor...'; - else if ( lang == 'bg') loading = 'Зареждане...'; - else if ( lang == 'cs') loading = 'Nahrávám...'; - else if ( lang == 'hu') loading = 'Betöltés...'; - else if ( lang == 'ja') loading = '読み込み中...'; - else if ( lang == 'ko') loading = '로드 중...'; - else if ( lang == 'lv') loading = 'Ieladēšana ...'; - else if ( lang == 'nl') loading = 'Laden...'; - else if ( lang == 'pl') loading = 'Ładowanie...'; - else if ( lang == 'sk') loading = 'Nahrávam...'; - else if ( lang == 'uk') loading = 'Завантаження...'; - else if ( lang == 'vi') loading = 'Đang tải...'; - else if ( lang == 'zh') loading = '加载中...'; - var brendpanel = document.getElementsByClassName('brendpanel')[0]; if (brendpanel) { if (/Android/.test(navigator.userAgent)) { brendpanel.classList.add('android'); } brendpanel.classList.add('visible'); + var elem = document.querySelector('.loading-logo img'); + if (elem) { + logo && (elem.setAttribute('src', logo)); + elem.style.opacity = 1; + } } var placeholder = document.getElementsByClassName('placeholder')[0]; if (placeholder && /Android/.test(navigator.userAgent)) { diff --git a/apps/spreadsheeteditor/mobile/index_loader.html b/apps/spreadsheeteditor/mobile/index_loader.html new file mode 100644 index 000000000..02be1089c --- /dev/null +++ b/apps/spreadsheeteditor/mobile/index_loader.html @@ -0,0 +1,266 @@ + + + + + + + + + + ONLYOFFICE Spreadsheets + + + + + + + + + + + + +
+ + + + + + + + + + + \ No newline at end of file