From f82541762ee514920c8f7851f6c2d74df33c146f Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Fri, 5 Oct 2018 14:24:26 +0300
Subject: [PATCH] [start page] refactoring

---
 common/loginpage/src/dlglogin.js      |  2 +-
 common/loginpage/src/panelabout.js    |  2 +-
 common/loginpage/src/panelconnect.js  | 71 ++++++++++++++-------------
 common/loginpage/src/panelsettings.js |  8 +--
 common/loginpage/src/utils.js         | 10 ++++
 common/loginpage/src/window.less      | 48 ++++++++++++++----
 6 files changed, 91 insertions(+), 50 deletions(-)

diff --git a/common/loginpage/src/dlglogin.js b/common/loginpage/src/dlglogin.js
index f012d93e6..f722c1347 100644
--- a/common/loginpage/src/dlglogin.js
+++ b/common/loginpage/src/dlglogin.js
@@ -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>`;
diff --git a/common/loginpage/src/panelabout.js b/common/loginpage/src/panelabout.js
index c3aefbe54..4da575d77 100644
--- a/common/loginpage/src/panelabout.js
+++ b/common/loginpage/src/panelabout.js
@@ -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;
diff --git a/common/loginpage/src/panelconnect.js b/common/loginpage/src/panelconnect.js
index 94b641c28..5278839e4 100644
--- a/common/loginpage/src/panelconnect.js
+++ b/common/loginpage/src/panelconnect.js
@@ -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>
diff --git a/common/loginpage/src/panelsettings.js b/common/loginpage/src/panelsettings.js
index 0b14ebebb..37c801406 100644
--- a/common/loginpage/src/panelsettings.js
+++ b/common/loginpage/src/panelsettings.js
@@ -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) {
diff --git a/common/loginpage/src/utils.js b/common/loginpage/src/utils.js
index f4028c8dd..672959c1e 100644
--- a/common/loginpage/src/utils.js
+++ b/common/loginpage/src/utils.js
@@ -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 = {};
diff --git a/common/loginpage/src/window.less b/common/loginpage/src/window.less
index a5b721aa3..d6d72862a 100644
--- a/common/loginpage/src/window.less
+++ b/common/loginpage/src/window.less
@@ -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;
     }