mirror of
https://github.com/ONLYOFFICE/desktop-apps.git
synced 2026-04-07 14:09:22 +08:00
[start page] changed image for empty 'connect' panel
This commit is contained in:
Maxim Kadushkin
File diff suppressed because one or more lines are too long
BIN
common/loginpage/res/img/connect1.png
Normal file
BIN
common/loginpage/res/img/connect1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
common/loginpage/res/img/connect1@2x.png
Normal file
BIN
common/loginpage/res/img/connect1@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
common/loginpage/res/img/connect2.png
Normal file
BIN
common/loginpage/res/img/connect2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
common/loginpage/res/img/connect2@2x.png
Normal file
BIN
common/loginpage/res/img/connect2@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
BIN
common/loginpage/res/img/connect3.png
Normal file
BIN
common/loginpage/res/img/connect3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
common/loginpage/res/img/connect3@2x.png
Normal file
BIN
common/loginpage/res/img/connect3@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@ -93,6 +93,12 @@ l10n.en = {
|
||||
licPanelDescr: 'Your product key was sent to the email address specified during the purchase.'
|
||||
,checkUpdates: 'Check for updates'
|
||||
,strVersion: 'version'
|
||||
,emptySlide1Title: 'Share & collaborate'
|
||||
,emptySlide1Text: 'Choose between Fast or Strict real-time co-editing, chat in your doc, add documents or share it for review.'
|
||||
,emptySlide2Title: 'View or restore previous versions'
|
||||
,emptySlide2Text: 'Restore or just view previous versions of your document, track changes and their authors.'
|
||||
,emptySlide3Title: 'Store in the cloud'
|
||||
,emptySlide3Text: 'Store your documents in the ONLYOFFICE cloud and access them any time, from anywhere.'
|
||||
}
|
||||
|
||||
l10n.cs = {
|
||||
|
||||
@ -52,30 +52,51 @@
|
||||
|
||||
args.id&&(args.id=`id=${args.id}`)||(args.id='');
|
||||
|
||||
var _html = `<div ${args.id} class="action-panel ${args.action}">` +
|
||||
'<div id="box-empty-portals" class="empty flex-center">' +
|
||||
'<section class="center-box">'+
|
||||
`<h3 class="empty-title" style="margin:0 0 42px;">${_lang.portalEmptyTitle}</h3>`+
|
||||
'<img class="img-connect">' +
|
||||
`<h4 class="text-description" style="margin:38px 0 6px;color:#666666;">${_lang.portalEmptyDescr}</h4>` +
|
||||
'<div class="tools-connect">'+
|
||||
`<button class="btn primary newportal">${_lang.btnCreatePortal}</button>`+
|
||||
'<section class="link-connect">'+
|
||||
`<label>${_lang.textHavePortal}</label><a class="login link" href="#">${_lang.btnConnect}</a>`+
|
||||
'</section>'+
|
||||
'</div>'+
|
||||
'</section>'+
|
||||
'</div>'+
|
||||
'<div id="box-portals">' +
|
||||
'<div class="flexbox">'+
|
||||
`<h3 class="table-caption">${_lang.portalListTitle}</h3>`+
|
||||
'<div class="table-box flex-fill"><table class="table-files list"></table></div>'+
|
||||
'<div class="lst-tools">'+
|
||||
`<button id="btn-addportal" class="btn login">${_lang.btnAddPortal}</button>`+
|
||||
'</div>'+
|
||||
'</div>'+
|
||||
'</div>' +
|
||||
'</div>';
|
||||
var _html = `<div ${args.id} class="action-panel ${args.action}">
|
||||
<div id="box-empty-portals" class="empty flex-center">
|
||||
<section class="center-box">
|
||||
<h3 class="empty-title" style="margin:0 0 60px;">${_lang.portalEmptyTitle}</h3>
|
||||
<div class='carousel'>
|
||||
<figure class='carousel__slidebox'>
|
||||
<div class='carousel__slide'>
|
||||
<p class='carousel__slide__text title'>${_lang.emptySlide1Title}</p>
|
||||
<p class='carousel__slide__text descr'>${_lang.emptySlide1Text}</p>
|
||||
<img class='carousel__slide__img'>
|
||||
</div>
|
||||
<div class='carousel__slide'>
|
||||
<p class='carousel__slide__text title'>${_lang.emptySlide2Title}</p>
|
||||
<p class='carousel__slide__text descr'>${_lang.emptySlide2Text}</p>
|
||||
<img class='carousel__slide__img'>
|
||||
</div>
|
||||
<div class='carousel__slide active'>
|
||||
<p class='carousel__slide__text title'>${_lang.emptySlide3Title}</p>
|
||||
<p class='carousel__slide__text descr'>${_lang.emptySlide3Text}</p>
|
||||
<img class='carousel__slide__img'>
|
||||
</div>
|
||||
</figure>
|
||||
<nav class='carousel__scrolls'>
|
||||
<div class='carousel__scroll__btn prev' value='prev'></div>
|
||||
<div class='carousel__scroll__btn next' value='next'></div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="tools-connect">
|
||||
<button class="btn primary newportal">${_lang.btnCreatePortal}</button>
|
||||
<section class="link-connect">
|
||||
<label>${_lang.textHavePortal}</label><a class="login link" href="#">${_lang.btnConnect}</a>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div id="box-portals">
|
||||
<div class="flexbox">
|
||||
<h3 class="table-caption">${_lang.portalListTitle}</h3>
|
||||
<div class="table-box flex-fill"><table class="table-files list"></table></div>
|
||||
<div class="lst-tools">
|
||||
<button id="btn-addportal" class="btn login">${_lang.btnAddPortal}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
args.tplPage = _html;
|
||||
args.menu = '.main-column.tool-menu';
|
||||
@ -286,6 +307,60 @@
|
||||
window.sdk.execCommand('portal:create', '');
|
||||
};
|
||||
|
||||
let carousel = {};
|
||||
function _scrollCarousel(direction) {
|
||||
function __check_limits(v, max) {
|
||||
if ( v < 0 ) return max;
|
||||
else if ( v > max ) return 0;
|
||||
else return v;
|
||||
};
|
||||
|
||||
let _activeindex = carousel.$items.filter('.active').index();
|
||||
direction == 'next' ? ++_activeindex : --_activeindex;
|
||||
|
||||
_activeindex = __check_limits(_activeindex, carousel.$items.length - 1);
|
||||
|
||||
let _pre_index = _activeindex - 1,
|
||||
_pro_index = _activeindex + 1;
|
||||
|
||||
_pre_index = __check_limits(_pre_index, carousel.$items.length - 1);
|
||||
_pro_index = __check_limits(_pro_index, carousel.$items.length - 1);
|
||||
|
||||
carousel.$items.eq(_activeindex).addClass('migrate');
|
||||
if ( direction == 'next' ) {
|
||||
carousel.$items.filter('.pre-active').removeClass('pre-active').addClass('migrate');
|
||||
carousel.$items.eq(_pre_index).removeClass('migrate pre-active active pro-active').addClass('pre-active');
|
||||
} else {
|
||||
carousel.$items.filter('.pro-active').removeClass('pro-active').addClass('migrate');
|
||||
carousel.$items.eq(_pro_index).removeClass('migrate pre-active active pro-active').addClass('pro-active');
|
||||
}
|
||||
|
||||
carousel.$items.eq(_activeindex).removeClass('migrate pre-active pro-active').addClass('active');
|
||||
|
||||
if ( direction == 'next' )
|
||||
carousel.$items.eq(_pro_index).removeClass('migrate pre-active active pro-active').addClass('pro-active');
|
||||
else carousel.$items.eq(_pre_index).removeClass('migrate pre-active active pro-active').addClass('pre-active');
|
||||
};
|
||||
|
||||
function _initCarousel() {
|
||||
let _$panel = this.view.$panelNoPortals;
|
||||
carousel.$items = _$panel.find('.carousel__slide');
|
||||
let _activeindex = carousel.$items.filter('.active').index();
|
||||
|
||||
let _pre_index = _activeindex - 1,
|
||||
_pro_index = _activeindex + 1;
|
||||
|
||||
if ( _pre_index < 0 ) _pre_index = carousel.$items.length - 1;
|
||||
if ( _pro_index > carousel.$items.length - 1 ) _pro_index = 0;
|
||||
carousel.$items.eq(_pre_index).addClass('pre-active');
|
||||
carousel.$items.eq(_pro_index).addClass('pro-active');
|
||||
|
||||
_$panel.find('.carousel__scrolls > .carousel__scroll__btn')
|
||||
.on('click', e => {
|
||||
_scrollCarousel(e.target.getAttribute('value'));
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
baseController.prototype.init.apply(this, arguments);
|
||||
@ -341,6 +416,7 @@
|
||||
_init_collection.call(this);
|
||||
_update_portals.call(this);
|
||||
_init_ppmenu.call(this);
|
||||
_initCarousel.call(this);
|
||||
|
||||
$('body').on('click', '.login', e=>{
|
||||
_do_login.call(this);
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
|
||||
@color-header: #3d4a6b;
|
||||
|
||||
@img-path: '../res/img';
|
||||
|
||||
@col-width: 287px;
|
||||
|
||||
@ -661,13 +662,6 @@ li.menu-item {
|
||||
content: -webkit-image-set(data-uri('welcome_image.png') 1x, data-uri('welcome_image@2x.png') 2x);
|
||||
}
|
||||
|
||||
.img-connect {
|
||||
content: -webkit-image-set(data-uri('ads_share.png') 1x, data-uri('ads_share@2x.png') 2x);
|
||||
|
||||
width:720px;
|
||||
height:330px;
|
||||
}
|
||||
|
||||
/*.center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -703,13 +697,16 @@ li.menu-item {
|
||||
}
|
||||
|
||||
.center-box {
|
||||
width: 720px;
|
||||
width: 740px;
|
||||
}
|
||||
|
||||
.ads-list {
|
||||
margin: 60px auto 46px;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.activate {
|
||||
@ -802,4 +799,141 @@ li.menu-item {
|
||||
right: 120%;
|
||||
top: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
carousel
|
||||
*/
|
||||
@preslide-shift: 20%;
|
||||
@preslide-zoom: .9;
|
||||
.carousel {
|
||||
position: relative;
|
||||
|
||||
&__slidebox {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__slide {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transition: z-index 0ms .25s;
|
||||
padding: 20px 40px;
|
||||
|
||||
&.active {
|
||||
z-index: 3;
|
||||
|
||||
opacity: 1;
|
||||
transform: translateX(0%) scale(1);
|
||||
}
|
||||
|
||||
&.pro-active {
|
||||
opacity: .3;
|
||||
transform: translateX(@preslide-shift) scale(@preslide-zoom);
|
||||
}
|
||||
|
||||
&.pro-active, &.pre-active {
|
||||
&:not(.migrate) {
|
||||
box-shadow: 0px 3px 40px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
&.migrate {
|
||||
/*z-index: 2;*/
|
||||
}
|
||||
|
||||
&.migrate {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.pre-active {
|
||||
opacity: .3;
|
||||
transform: translateX(-@preslide-shift) scale(@preslide-zoom);
|
||||
}
|
||||
|
||||
&.migrate:not(.pro-active):not(.pre-active) {
|
||||
transform: translateX(0%) scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
&__slide {
|
||||
box-shadow: 0px 3px 40px rgba(0, 0, 0, 0.2);
|
||||
/*transition: 300ms 100ms cubic-bezier(0.17, 0.67, 0.55, 1);*/
|
||||
transition: 300ms 100ms cubic-bezier(0.15, 0.63, 0.4, 0.93);
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
&__slide:nth-of-type(1) > img {
|
||||
content: -webkit-image-set(data-uri('@{img-path}/connect1.png') 1x, data-uri('@{img-path}/connect1@2x.png') 2x);
|
||||
}
|
||||
|
||||
&__slide:nth-of-type(2) > img {
|
||||
content: -webkit-image-set(data-uri('@{img-path}/connect2.png') 1x, data-uri('@{img-path}/connect1@2x.png') 2x);
|
||||
}
|
||||
|
||||
&__slide:nth-of-type(3) > img {
|
||||
content: -webkit-image-set(data-uri('@{img-path}/connect3.png') 1x, data-uri('@{img-path}/connect1@2x.png') 2x);
|
||||
}
|
||||
|
||||
&__slide__text {
|
||||
margin: 0;
|
||||
max-width: 380px;
|
||||
color: @color-gray-light;
|
||||
|
||||
&.descr {
|
||||
font-size: 13px;
|
||||
margin: 10px 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&__scroll__btn {
|
||||
border-radius: 50%;
|
||||
background-color: #d7d7d7;
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color:#c3c3c3;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content:'';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border: 2px solid #fff;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
display: block;
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
&.prev {
|
||||
left: 0;
|
||||
&:after {
|
||||
transform: rotate(-45deg);
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.next {
|
||||
right: 0;
|
||||
|
||||
&:after {
|
||||
transform: rotate(135deg);
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user