pengjunjie/desktop-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/desktop-apps.git synced 2026-04-07 14:09:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

[start page] refactoring

Browse Source
This commit is contained in:
Maxim Kadushkin
2018-10-05 14:24:26 +03:00
parent 1c00b20eac
commit f82541762e
6 changed files with 91 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
common/loginpage/src/dlglogin.js
View File

@ -127,7 +127,7 @@ window.LoginDlg = function(opts) {
var _tpl = `<dialog class="dlg dlg-login">
<div class="title">
<label class="caption">Title</label>
<span class="tool close img-el"></span>
<span class="tool close"></span>
</div>
<div class="body"></div>
</dialog>`;

2
common/loginpage/src/panelabout.js
View File

@ -61,7 +61,7 @@
ViewAbout.prototype.constructor = ViewAbout;
ViewAbout.prototype.paneltemplate = function(args) {
var _opts = args.opts;
!!_opts.active && (_opts.edition = !!_opts.edition ? _opts.edition + '. ' + _opts.active : _opts.active);
!!_opts.active && (_opts.edition = !!_opts.edition ? _opts.edition + ' ' + _opts.active : _opts.active);
_opts.edition = !!_opts.edition ? `<div class="ver-edition">${_opts.edition}</div>` : '';
var _lang = utils.Lang;

71
common/loginpage/src/panelconnect.js
View File

@ -55,41 +55,44 @@
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 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>
var _html_empty_panel =
`<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>
</section>
</div>
</div>`;
var _html = `<div ${args.id} class="action-panel ${args.action}">
${_html_empty_panel}
<div id="box-portals">
<div class="flexbox">
<h3 class="table-caption">${_lang.portalListTitle}</h3>

8
common/loginpage/src/panelsettings.js
View File

@ -111,7 +111,7 @@
let me = this;
$userName.val(name).removeClass('error');
$btnApply.prop('disabled', false);
$btnApply.disable(false);
};
function _on_btn_apply(e) {
@ -128,7 +128,7 @@
}
sdk.command("settings:apply", JSON.stringify(_new_settings));
$btnApply.prop('disabled', true);
$btnApply.disable(true);
localStorage.setItem('username', _user_new_name);
localStorage.setItem('docopenmode', _doc_open_mode);
@ -142,8 +142,8 @@
function _on_txt_user_change(e) {
$userName.removeClass('error');
if ( $btnApply.prop('disabled') )
$btnApply.prop('disabled', false);
if ( $btnApply.isdisabled() )
$btnApply.disable(false);
};
function _on_lang_change(e) {

10
common/loginpage/src/utils.js
View File

@ -36,6 +36,16 @@
$.fn.hasScrollBar = function() {
return this.get(0).scrollHeight > this.height();
}
$.fn.extend({
disable: function(state) {
$(this).prop('disabled', state);
return this;
},
isdisabled: function() {
return !!$(this).prop('disabled');
}
});
})(jQuery);
var utils = {};

48
common/loginpage/src/window.less
View File

@ -48,19 +48,52 @@ dialog {
width: 100%;
top: @title-height;
bottom: 0;
padding: 20px 30px 30px;
}
.tool.close {
width:12px;
height:12px;
background-position: -108px 0;
border: 1px solid @color-gray-2;
width:14px;
height:14px;
/*border: 1px solid @color-gray-2;*/
cursor: pointer;
float: right;
margin-left: 10px;
position: relative;
&:before, &:after {
content: '';
position: absolute;
height: 2px;
width: 100%;
top: 50%;
left: 0;
margin-top: -1px;
background: #3a3a3a;
opacity: .8;
transition: transform .3s opacity .2s;
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
&:hover {
background-position-x:-118px;
transform: scale(1.1);
&:before {
opacity: 1;
/*transform: rotate(135deg);*/
}
&:after {
opacity: 1;
/*transform: rotate(45deg);*/
}
}
}
@ -96,11 +129,6 @@ dialog {
}
.dlg-login {
.body {
padding: 20px 30px 30px;
/*text-align: center;*/
}
.tbox {
margin: 12px 0;
}