Merge branch 'release/v9.2.0' into feature/cef-update

common/loginpage/build/startpage.json

@@ -88,6 +88,7 @@
                     ,"../src/panels.js"
                     ,"../src/dialogabout.js"
                     ,"../src/dialogproviders.js"
+                    ,"../src/dialogpreview.js"
                 ],
                 "dest": "../deploy/build.js"
             }

common/loginpage/locale/el.js

@@ -59,6 +59,8 @@ l10n.el = {
     actAbout: 'Σχετικά',
     actSettings: 'Ρυθμίσεις',
     actTemplates: 'Πρότυπα',
+    actClouds: 'Δικτυακά',
+    actHome: 'Κεντρική',
     licKeyHolder: 'εισαγωγή κλειδιού ενεργοποίησης',
     btnActivate: 'Ενεργοποίηση',
     licGetLicense: 'Απόκτηση άδειας χρήσης τώρα',

common/loginpage/locale/en-GB.js

@@ -59,6 +59,7 @@ l10n.en_GB = {
     actAbout: 'About',
     actSettings: 'Settings',
     actTemplates: 'Templates',
+    actPreviewTemplates: 'Template',
     actClouds: 'Clouds',
     actHome: 'Home',
     licKeyHolder: 'input activation key',
@@ -129,9 +130,13 @@ l10n.en_GB = {
     tplNoResultsTitle: "Nothing found",
     tplNoResultsText: "No results matching your query could be found",
     tplErrorTLS: "Windows XP doesn't support current TLS 1.1 and TLS 1.2 protocol versions, so Cloud Templates cannot be used on this operating system.",
+    tplFree: "Free",
+    tplUseTemplate : 'Use this template',
+    tplFileSize: "File size",
+    tplFileType: "File type",
     colFileName: "File name",
     colLocation: 'Location',
     colLastOpened: 'Last opened',
-    labelDropFile: 'Drag you files here or',
+    labelDropFile: 'Drag your files here or',
     labelSelectFile: 'Select file',
 }

common/loginpage/providers/seafile/config.json

@@ -4,7 +4,8 @@
     "check": {
         "url": "/api2/server-info/"
     },
-    "editorPage": "regex:\/lib\/(?:[\w-]{32,})\/file\/.*\.(docx|pptx|xlsx|doc|ppt|xls|odt|fodt|odp|fodp|fods)$",
+    "editorPage": "regex:\/lib\/(?:[\w-]{32,})\/file\/.*\.(docx|pptx|xlsx|doc|ppt|xls|odt|fodt|odp|fodp|fods)",
+    "editorFrameSize": "finite",
     "cryptoSupport": "true",
     "icons": {
         "themeLight":{

common/loginpage/res/img/toolicons/1x/aichat.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 12C20 16.4183 16.4182 20 12 20C10.6907 20 9.45489 19.6855 8.36398 19.1279C8.12767 19.0071 7.85592 18.9683 7.59956 19.0369L4.81363 19.7823C4.447 19.8804 4.10904 19.5503 4.19847 19.1815L4.90796 16.2555C4.96713 16.0115 4.92988 15.7554 4.81895 15.5301C4.29455 14.4654 3.99997 13.2671 3.99997 12C3.99997 7.58175 7.58169 4.00002 12 4.00002M14.2183 6.80914L12.2673 7.5311C11.8319 7.69218 11.8319 8.30787 12.2673 8.46895L14.2183 9.19091C14.492 9.29219 14.7078 9.508 14.8091 9.78172L15.5311 11.7328C15.6922 12.1681 16.3078 12.1681 16.4689 11.7328L17.1909 9.78172C17.2922 9.508 17.508 9.29219 17.7817 9.19091L19.7327 8.46895C20.1681 8.30787 20.1681 7.69218 19.7327 7.5311L17.7817 6.80914C17.508 6.70786 17.2922 6.49205 17.1909 6.21833L16.4689 4.26728C16.3078 3.83197 15.6922 3.83197 15.5311 4.26728L14.8091 6.21833C14.7078 6.49205 14.492 6.70786 14.2183 6.80914ZM10.0286 12.6194L9.5069 12.8125C9.33278 12.8769 9.33278 13.1232 9.5069 13.1876L10.0286 13.3806C10.3023 13.4819 10.5181 13.6977 10.6194 13.9714L10.8124 14.4931C10.8769 14.6672 11.1231 14.6672 11.1876 14.4931L11.3806 13.9714C11.4819 13.6977 11.6977 13.4819 11.9714 13.3806L12.4931 13.1876C12.6672 13.1232 12.6672 12.8769 12.4931 12.8125L11.9714 12.6194C11.6977 12.5181 11.4819 12.3023 11.3806 12.0286L11.1876 11.5069C11.1231 11.3328 10.8769 11.3328 10.8124 11.5069L10.6194 12.0286C10.5181 12.3023 10.3023 12.5181 10.0286 12.6194Z" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

common/loginpage/res/img/toolicons/1x/plugin.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M5.5 9.5v-3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1Zm0 8v-3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1Zm8-8v-3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1Zm2.5 3.75a2.75 2.75 0 1 1 0 5.5 2.75 2.75 0 0 1 0-5.5Z" class="icon-gray-primary"/>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5 5.5L19.5 10.5L18.5 10.5C17.9696 10.5 17.4609 10.7107 17.0858 11.0858C16.7107 11.4609 16.5 11.9696 16.5 12.5C16.5 13.0304 16.7107 13.5391 17.0858 13.9142C17.4609 14.2893 17.9696 14.5 18.5 14.5L19.5 14.5L19.5 19.5L14.5 19.5L14.5 18.5C14.5 17.9696 14.2893 17.4609 13.9142 17.0858C13.5391 16.7107 13.0304 16.5 12.5 16.5C11.9696 16.5 11.4609 16.7107 11.0858 17.0858C10.7107 17.4609 10.5 17.9696 10.5 18.5L10.5 19.5L5.5 19.5L5.5 14.5L4.5 14.5C3.96957 14.5 3.46086 14.2893 3.08579 13.9142C2.71071 13.5391 2.5 13.0304 2.5 12.5C2.5 11.9696 2.71071 11.4609 3.08579 11.0858C3.46086 10.7107 3.96957 10.5 4.5 10.5L5.5 10.5L5.5 5.5L10.5 5.5L10.5 4.5C10.5 3.96957 10.7107 3.46086 11.0858 3.08579C11.4609 2.71072 11.9696 2.5 12.5 2.5C13.0304 2.5 13.5391 2.71071 13.9142 3.08579C14.2893 3.46086 14.5 3.96957 14.5 4.5L14.5 5.5L19.5 5.5Z" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

common/loginpage/res/img/toolicons/1x/settings.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none">
-    <path d="M8.5 9.5h5m0 0a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0Zm2 5h-4m0 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-5 4h11a1 1 0 0 0 1-1v-11a1 1 0 0 0-1-1h-11a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1Z" class="icon-gray-primary"/>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.5 8.5H12.5M12.5 8.5C12.5 9.60457 13.3954 10.5 14.5 10.5C15.6046 10.5 16.5 9.60457 16.5 8.5M12.5 8.5C12.5 7.39543 13.3954 6.5 14.5 6.5C15.6046 6.5 16.5 7.39543 16.5 8.5M18.5 15.5H11.5M11.5 15.5C11.5 16.6046 10.6046 17.5 9.5 17.5C8.39543 17.5 7.5 16.6046 7.5 15.5M11.5 15.5C11.5 14.3954 10.6046 13.5 9.5 13.5C8.39543 13.5 7.5 14.3954 7.5 15.5M16.5 8.5H18.5M7.5 15.5H5.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

common/loginpage/src/css/colors.less

@@ -7,7 +7,6 @@
     /*--background-button: #fff;*/
     --background-accent-button: #3483db;
     --background-primary-button: #444;
-    --background-scrim: fade(#000, 20%);
     --background-scroll-thumb: #e0e0e0;
     --background-action-panel: #fff;
     --background-icon-normal: #fff;
@@ -30,7 +29,6 @@
     --border-divider: #dfdfdf;
     --border-regular-control: #c0c0c0;
     --border-control-focus: #848484;
-    --border-error: #f62211;
     --border-sidebar: #f7f7f7;
     --border-sidebar-item: transparent;
     --border-sidebar-icon: #cbcbcb;
@@ -45,10 +43,9 @@
     --text-link: #445799;
     --text-inverse: #fff;
     --text-contrast-background: #fff;
-    --text-negative: #F87171;
+    --text-negative: var(--text-normal);
 
     --icon-normal: fade(#000, 80%);
-    --icon-success: #090;
 
     --disabled-element-opacity: .4;
     --theme-inverted-image-filter: none;
@@ -72,7 +69,6 @@
 @background-button: var(--background-button,#fff);
 @background-accent-button: var(--background-accent-button);
 @background-primary-button: var(--background-primary-button);
-@background-scrim: var(--background-scrim);
 @background-scroll-thumb: var(--background-scroll-thumb);
 @background-action-panel: var(--background-action-panel);
 @background-icon-normal: var(--background-icon-normal);
@@ -95,7 +91,6 @@
 @border-divider: var(--border-divider);
 @border-regular-control: var(--border-regular-control);
 @border-control-focus: var(--border-control-focus);
-@border-error: var(--border-error);
 @border-sidebar: var(--border-sidebar);
 @border-sidebar-item: var(--border-sidebar-item);
 @border-sidebar-icon: var(--border-sidebar-icon, transparent);
@@ -115,7 +110,6 @@
 @text-negative: var(--text-negative);
 
 @icon-normal: var(--icon-normal);
-@icon-success: var(--icon-success);
 
 @disabled-element-opacity: var(--disabled-element-opacity);
 @theme-inverted-image-filter: var(--theme-inverted-image-filter);

common/loginpage/src/css/colors_classic.less

@@ -6,7 +6,6 @@
         /*--background-button: #fff;*/
         /*--background-accent-button: #3483db;*/
         --background-primary-button: #a5a5a5;
-        /*--background-scrim: fade(#000, 20%);*/
         /*--background-scroll-thumb: #e0e0e0;*/
 
         --highlight-button-hover: #ebebeb;
@@ -25,7 +24,6 @@
         --border-divider: #cbcbcb;
         --border-regular-control: #cfcfcf;
         --border-control-focus: #848484;
-        --border-error: #d9534f;
 
         --text-normal: #444;
         --text-normal-pressed: #444;

common/loginpage/src/css/colors_contrast_dark.less

@@ -6,7 +6,6 @@
         --background-button: #1e1e1e;
         --background-primary-button: #e6e6e6;
         --background-accent-button: #3483db;
-        --background-scrim: fade(#000, 60%);
         --background-scroll-thumb: #424242;
         --background-action-panel: #212121;
         --background-icon-normal: #2a2a2a;
@@ -31,7 +30,6 @@
         --border-divider: #414141;
         --border-regular-control: #696969;
         --border-control-focus: #b8b8b8;
-        --border-error: #f62211;
         --border-sidebar: 0 none;
         --border-sidebar-icon: #616161;
 
@@ -42,7 +40,7 @@
         --text-link: #acbfff;
         --text-inverse: #121212;
         --text-contrast-background: #fff;
-        --text-negative: #f62211;
+        --text-negative: var(--text-normal);
 
         --icon-normal: #e8e8e8;
 

common/loginpage/src/css/colors_dark.less

@@ -6,7 +6,6 @@
         --background-button: #333;
         --background-primary-button: #ddd;
         --background-accent-button: #3483db;
-        --background-scrim: fade(#000, 60%);
         --background-scroll-thumb: #555;
         --background-action-panel: #333;
         --background-icon-normal: #333;
@@ -31,7 +30,6 @@
         --border-divider: #505050;
         --border-regular-control: #666666;
         --border-control-focus: #ccc;
-        --border-error: #f62211;
         --border-sidebar: #2a2a2a;
         --border-sidebar-icon: #616161;
 
@@ -42,7 +40,7 @@
         --text-link: #acbfff;
         --text-inverse: #333;
         --text-contrast-background: #fff;
-        --text-negative: #f62211;
+        --text-negative: var(--text-normal);
 
         --icon-normal: fade(#fff, 80%);
 

common/loginpage/src/css/colors_gray.less

@@ -7,7 +7,6 @@
         /*--background-button: #fff;*/
         --background-accent-button: #3483db;
         --background-primary-button: #444;
-        --background-scrim: fade(#000, 20%);
         --background-scroll-thumb: #e0e0e0;
         --background-action-panel: #fff;
 
@@ -29,7 +28,6 @@
         --border-divider: #dfdfdf;
         --border-regular-control: #c0c0c0;
         --border-control-focus: #848484;
-        --border-error: #f62211;
         --border-sidebar: #f7f7f7;
         --border-sidebar-item: transparent;
         --border-radius-sidebar-item: 8px;
@@ -42,10 +40,8 @@
         --text-link: #445799;
         --text-inverse: #fff;
         --text-contrast-background: #fff;
-        --text-negative: #991B1B;
 
         --icon-normal: fade(#000, 80%);
-        --icon-success: #090;
 
         --disabled-element-opacity: .4;
         --theme-inverted-image-filter: none;

common/loginpage/src/css/colors_night.less

@@ -6,7 +6,6 @@
         --background-button: #333;
         --background-primary-button: #ddd;
         --background-accent-button: #3483db;
-        --background-scrim: fade(#000, 60%);
         --background-scroll-thumb: #555;
         --background-action-panel: #404040;
         --background-icon-normal: #404040;
@@ -30,7 +29,6 @@
         --border-divider: #505050;
         --border-regular-control: #585858;
         --border-control-focus: #ccc;
-        --border-error: #f62211;
         --border-sidebar: var(--border-tabbar);
         --border-sidebar-icon: #585858;
 

common/loginpage/src/css/colors_white.less

@@ -8,7 +8,6 @@
         /*--background-button: #fff;*/
         --background-accent-button: #3483db;
         --background-primary-button: #3483db;
-        --background-scrim: fade(#000, 20%);
         --background-scroll-thumb: #e0e0e0;
         --background-action-panel: #fff;
         --background-icon-normal: #fff;
@@ -31,7 +30,6 @@
         --border-divider: #dfdfdf;
         --border-regular-control: #c0c0c0;
         --border-control-focus: #848484;
-        --border-error: #f62211;
         --border-sidebar: var(--background-normal);
         --border-sidebar-item: transparent;
         --border-sidebar-icon: var(--border-divider);
@@ -49,7 +47,6 @@
         --text-negative: #991B1B;
 
         --icon-normal: fade(#000, 80%);
-        --icon-success: #090;
 
         --disabled-element-opacity: .4;
         --theme-inverted-image-filter: none;

common/loginpage/src/css/component.less

@@ -560,8 +560,9 @@ input[type="radio"] {
 
 // Drag and drop zone
 .dnd-zone {
-    display: grid;
-    place-items: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     padding: 56px 0;
     border-radius: 12px;
     border: 1px dashed @border-regular-control;
@@ -617,14 +618,16 @@ input[type="radio"] {
         position: absolute;
         top: 14px;
         left: 10px;
-        padding: 1px 6px 0 6px;
+        display: flex;
+        height: 28px;
+        align-items: center;
+        padding: 0px 6px;
         border-radius: 6px;
         background: conic-gradient(from 225deg at 50% 50%, var(--format-bg-start) 0deg, var(--format-bg-end) 360deg);
 
         span {
             color: @text-contrast-background;
             font-size: 16px;
-            line-height: 28px;
             font-weight: 700;
         }
 
@@ -644,4 +647,13 @@ input[type="radio"] {
     .title {
         .text-normal();
     }
+}
+
+.win_xp {
+    .document-creation-item { 
+        .format-label {
+            background: var(--format-bg-winxp);
+        }
+    }
+    
 }

common/loginpage/src/css/styles.less

@@ -438,12 +438,236 @@ li.menu-item {
 
     .col-name {
       height: 32px;
+      .switch-svg();
 
       .icon {
-        width: 32px;
+        // width: 32px;
+        width: 24px;
         height: 32px;
       }
 
+      .icon.img-format {
+        display: inline-block;
+        background-size: auto;
+        &.docx {
+          .format-from-index(0);
+        }
+
+        &.doc {
+          .format-from-index(1);
+        }
+
+        &.odt {
+          .format-from-index(2);
+        }
+
+        &.rtf {
+          .format-from-index(3);
+        }
+
+        &.txt {
+          .format-from-index(4);
+        }
+
+        &.htm, &.html {
+          .format-from-index(5);
+        }
+
+        &.xlsx {
+          .format-from-index(6);
+        }
+
+        &.xls {
+          .format-from-index(7);
+        }
+
+        &.ods {
+          .format-from-index(8);
+        }
+
+        &.csv {
+          .format-from-index(9);
+        }
+
+        &.pptx {
+          .format-from-index(10);
+        }
+
+        &.ppt {
+          .format-from-index(11);
+        }
+
+        &.odp {
+          .format-from-index(12);
+        }
+
+        &.pdf {
+          .format-from-index(13);
+        }
+
+        &.djvu {
+          .format-from-index(14);
+        }
+
+        &.xps {
+          .format-from-index(15);
+        }
+
+        &.xml {
+          .format-from-index(16);
+        }
+
+        &.mht {
+          .format-from-index(17);
+        }
+
+        &.epub {
+          .format-from-index(18);
+        }
+
+        &.fb2 {
+          .format-from-index(19);
+        }
+
+        &.dotx {
+          .format-from-index(20);
+        }
+
+        &.xltx {
+          .format-from-index(21);
+        }
+
+        &.potx {
+          .format-from-index(22);
+        }
+
+        &.ott {
+          .format-from-index(23);
+        }
+
+        &.ots {
+          .format-from-index(24);
+        }
+
+        &.otp {
+          .format-from-index(25);
+        }
+
+        &.pps {
+          .format-from-index(26);
+        }
+
+        &.ppsx {
+          .format-from-index(27);
+        }
+
+        &.docxf {
+          .format-from-index(28);
+        }
+
+        &.oform {
+          .format-from-index(29);
+        }
+
+        &.xlsb {
+          .format-from-index(30);
+        }
+
+        &.docm {
+          .format-from-index(31);
+        }
+
+        &.dotm {
+          .format-from-index(32);
+        }
+
+        &.fodt {
+          .format-from-index(33);
+        }
+
+        &.xltm {
+          .format-from-index(34);
+        }
+
+        &.xlsm {
+          .format-from-index(35);
+        }
+
+        &.fods {
+          .format-from-index(36);
+        }
+
+        &.pptm {
+          .format-from-index(37);
+        }
+
+        &.ppsm {
+          .format-from-index(38);
+        }
+
+        &.potm {
+          .format-from-index(39);
+        }
+
+        &.fodp {
+          .format-from-index(40);
+        }
+
+        &.md {
+          .format-from-index(41);
+        }
+
+        &.neutral {
+          .format-from-index(42);
+        }
+
+        &.pages {
+          .format-from-index(43);
+        }
+
+        &.numbers {
+          .format-from-index(44);
+        }
+
+        &.key {
+          .format-from-index(45);
+        }
+
+        &.vsdx {
+          .format-from-index(46);
+        }
+
+        &.hwp {
+          .format-from-index(47);
+        }
+
+        &.hwpx {
+          .format-from-index(48);
+        }
+
+        &.odg {
+          .format-from-index(49);
+        }
+      }
+
+      .img-el {
+        display: inline-block;
+        &.folder {
+          height: 24px;
+          width: 28px;
+          background-position: -58px -48px;
+        }
+      }
+
+      .icon.shield, i.icon.img-el.shield {
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        top: 26px;
+        left: 29px;
+        background-position: -60px -76px;
+      }
+
       .name {
         white-space: nowrap;
         overflow: hidden;
@@ -487,11 +711,16 @@ li.menu-item {
       opacity: 0;
       display: flex;
       align-items: center;
+      
+      i.icon {
+        display: block; 
+      }
 
       button {
         color: @icon-normal;
         padding: 0;
         align-items: center;
+        .switch-svg();
 
         &:active {
           background: color-mix(in srgb, @icon-normal, 15%, transparent); // 555F65 15%
@@ -520,7 +749,7 @@ li.menu-item {
       background-color: @background-normal-element-light;
     }
 
-    &:hover:not(.unavail) {
+    &:hover {
       .col-more {
         opacity: 1;
       }
@@ -533,6 +762,13 @@ li.menu-item {
     &:active, &[data-active] {
       background-color: @highlight-button-pressed;
     }
+
+    &.unavail {
+      > :not(.col-more) {
+        opacity: 0.5;
+        -webkit-filter: grayscale(100%);
+      }
+    }
   }
 }
 
@@ -706,8 +942,11 @@ li.menu-item {
     margin-left: auto;
     margin-right: auto;
     .document-creation-grid {
-      padding-left: 104px;
-      padding-right: 112px;
+      @media (min-width: 1280px) {
+        padding-left: 104px;
+        padding-right: 112px;
+      }
+      
       > * {
         margin-right: 32px;
       }
@@ -795,7 +1034,7 @@ li.menu-item {
 #area-document-creation-grid {
   padding: 12px 16px 0; // 16px inner + outer 32px
   overflow-x: auto;
-  min-height: 184px;
+  min-height: 204px;
   overflow-y: hidden;
   margin-bottom: 40px;
 
@@ -1363,6 +1602,7 @@ li.menu-item {
 
 .main-column,
 .action-panel,
+.dlg,
 *
 {
     ::-webkit-scrollbar-track {
@@ -1880,6 +2120,7 @@ li.menu-item {
     .btn.btn--big.btn--svg.login {
       margin: 7px;
       padding: 0;
+      background-color: @background-action-panel;
     }
   }
 
@@ -1887,6 +2128,7 @@ li.menu-item {
     .btn.btn--big.btn--svg.login {
       width: 330px;
       height: 48px;
+      background-color: @background-action-panel;
     }
   }
 
@@ -1913,6 +2155,20 @@ li.menu-item {
 }
 
 .templates {
+    padding-left: 35px;
+    .rtl & { 
+      padding-left: 40; 
+      padding-right: 35px; 
+    } 
+
+    .flexbox.content-box > * {
+        padding-left: 5px;  
+        .rtl & { 
+          padding-left: 0; 
+          padding-right: 5px; 
+        }
+    }
+
     .table-caption {
         font-size: 20px;
         font-weight: bold;
@@ -1932,9 +2188,23 @@ li.menu-item {
     #idx-nav-templates {
         padding-top: 12px;
         text-align: left;
-        border-bottom: @scaled-one-px solid @border-divider;
+        position: relative;
+        &::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 5px;    
+            right: 0;   
+            height: 1px;
+            background-color: @border-divider;
+        }
+        
         .rtl & {
             text-align: right;
+            &::after {
+                left: 0;
+                right: 5px;  
+            }
         }
     }
 
@@ -2089,7 +2359,7 @@ li.menu-item {
                 left: 0px;
                 right: 6px;
                 bottom: 0;
-                height: 3px;
+                height: 4px;
                 background-color: @highlight-toolbar-tab-underline-document;
                 border-radius: 2px;
                 .rtl & {
@@ -2408,3 +2678,101 @@ li.menu-item {
         }
     }
 }
+
+.template-preview-body {
+  display: flex;
+
+  .img-container {
+    max-height: 80vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin-right: 16px;
+    flex-shrink: 0;
+    .rtl & {
+      margin-right: 0;
+      margin-left: 16px;
+    } 
+    
+    .icon {
+      display:none;
+    }
+    
+    .icon, .icon--default {
+      border: @scaled-one-px solid @border-divider;
+      border-radius: 4px;
+      width: 475px;
+      margin-right: 16px;
+      .rtl & {
+          margin-right: 0;
+          margin-left: 16px;
+        }
+    }
+  }
+
+  .description {
+    display: flex;
+    flex-direction: column;
+    
+    .name {
+      color: @text-normal;
+      font-weight: bold;
+      font-size: 14px;
+      margin: 4px 0 10px;
+    }
+    
+    .pricing, .descr, .file-info {
+      font-size: 12px;
+      color: @text-normal;
+      margin: 0 0 10px;
+    }
+    
+    .file-info {
+      display: flex;
+      justify-content: space-between;
+      margin-top: auto;
+    }
+
+    .file-info .value {
+      font-weight: bold;
+    }
+
+    .btn--landing { 
+      margin-left: auto;
+      margin-top: 10px;
+      border-radius: 4px;
+      .rtl & {
+        margin-left: 0;
+        margin-right: auto;
+      }
+    }
+  }
+  @media (max-width: 780px) {
+    flex-direction: column;
+
+    .img-container {
+      max-height: 30vh;
+      margin-right: 0;
+
+      .rtl & {
+        margin-left: 0;
+      }
+
+      .icon {
+        width: 100%;
+      }
+    }
+
+    .description {
+      .name,
+      .pricing,
+      .descr,
+      .file-info {
+        margin-bottom: 5px;
+      }
+
+      .btn--landing {
+        margin-top: 0;
+      }
+    } 
+  }
+}

common/loginpage/src/css/window.less

@@ -47,65 +47,90 @@ dialog {
         }
     }
 
-    &.dlg-about {
-        border-radius: 8px;
-        .title {
-            font-size: 18px;
-            font-weight: bold;
-            display: flex;
-            justify-content: space-between;
-            padding: 30px 16px 16px 32px;
-            border-bottom: none;
-            background: none;
-        }
-
-        .body {
-            padding: 0px 30px 28px;
-        }
-
-        .separator {
-            padding-top: 5px;
-            border-bottom: @scaled-one-px solid @border-divider;
-        }
-    }
-
-    &.dlg-providers, &.dlg-connect-to {
+    &.dlg {
         border-radius: 8px;
+        background-color: @background-action-panel;
         .title {
             border-bottom: initial;
             font-weight: bold;
-        }
-    }
-
-    &.dlg-providers {
-        overflow: hidden;
-        .title, .body,  .empty .btn.btn--big.btn--svg.login {
             background-color: @background-action-panel;
         }
-        .body {
-            padding: 10px 25px;
-        }
-    }
 
-    &.dlg-connect-to {
-        background-color: @background-action-panel;
-        will-change: transform;
-        .title {
-            height: 56px;
-            padding: 16px 16px 16px 32px;
-            .rtl &{
-                padding: 16px 32px 16px 16px;
+        &.dlg-about {
+            will-change: transform;
+            .title {
+                font-size: 18px;
+                display: flex;
+                justify-content: space-between;
+                padding: 30px 16px 16px 32px;
+                background: none;
+                .rtl &{
+                    padding: 30px 32px 16px 16px;
+                }
+            }
+
+            .body {
+                padding: 0px 30px 28px;
+                .separator {
+                    padding-top: 5px;
+                    border-bottom: @scaled-one-px solid @border-divider;
+                }
             }
         }
-        .body {
-            padding: 0 32px 16px;
+
+        &.dlg-template-preview {
+            overflow: hidden;
+            @media (max-width: 780px) {
+                max-width: 500px;
+                max-height: 90vh;
+            }
+            
+            .title {
+                height: 48px;
+                padding: 12px 16px;
+            }
+
+            .body {
+                padding: 0 24px 24px;
+                .separator {
+                    padding-top: 15px;
+                    border-top: @scaled-one-px solid @border-divider;
+                }
+            }
         }
-        .title, .body {
-            background-color: transparent;
+
+        &.dlg-providers {
+            overflow: hidden;
+            will-change: transform;
+            .body {
+                padding: 10px 25px;
+            }
         }
-        .box-cmp-select .btn, .tbox,
-        button.btn.btn--landing {
-            border-radius: 4px;
+
+        &.dlg-connect-to {
+            will-change: transform;
+            .title {
+                height: 56px;
+                padding: 16px 16px 16px 32px;
+                .rtl &{
+                    padding: 16px 32px 16px 16px;
+                }
+            }
+
+            .body {
+                padding: 0 32px 16px;
+                .btn, .tbox {
+                border-radius: 4px;
+                }
+
+                .box-cmp-select {
+                    width: 100%;
+                }
+            }
+
+            .title, .body {
+                background-color: transparent;
+            }
         }
     }
 
@@ -249,12 +274,6 @@ dialog {
     }
 }
 
-.dlg-connect-to {
-    .box-cmp-select {
-        width: 100%;
-    }
-}
-
 .lr-flex {
     display: flex;
     justify-content: space-between;
@@ -316,6 +335,3 @@ dialog {
     }
 }
 
-dialog.dlg-about {
-    will-change: transform;
-}

common/loginpage/src/dialogabout.js

@@ -1,12 +1,10 @@
 // +function() {
   function AboutDialog(params = {}) {
-    params = {...params, ...{
-                dialogClass: 'dlg-about',
-                titleText: utils.Lang.actAbout,
-                defaultWidth: 570,
-                onclose: params.onclose
-            }};
-
+    Object.assign(params, { dialogClass: 'dlg-about',
+                            titleText: utils.Lang.actAbout,
+                            defaultWidth: 570,
+                            onclose: params.onclose,
+                        });
     Dialog.call(this, params);
   }
 

common/loginpage/src/dialogconnect.js

@@ -59,7 +59,7 @@ window.DialogConnect = function(params) {
                                 </div>
                                 <div style="height:12px;"></div>
                                 <div class="lr-flex">
-                                    <!-- <a class="text-sub link newportal" target="popup" href="javascript:void(0)">${utils.Lang.linkCreatePortal}</a> -->
+                                    <a class="text-sub link newportal" target="popup" href="javascript:void(0)">${utils.Lang.linkCreatePortal}</a>
                                     <span />
                                     <div class="lr-flex">
                                         <img class="img-loader">
@@ -243,8 +243,7 @@ window.DialogConnect = function(params) {
             if ( !_url.startsWith('http') )
                 resolve({status:'skipped', response: {statusText: _url}});
             else {
-
-                const matches = (e) => (e.responseText || '').toLowerCase().includes(provider) || portal.toLowerCase().includes(provider);
+    
                 let fetchFuntion = $.ajax;
                 if (window.AscSimpleRequest && window.AscSimpleRequest.createRequest)
                     fetchFuntion = window.AscSimpleRequest.createRequest;
@@ -261,11 +260,6 @@ window.DialogConnect = function(params) {
                                 // skip checking response for tests
                                 // if ( !_model.entryPage )
                                     // JSON.parse(e.responseText)
-                                
-                                if (!matches(e)) {
-                                    reject({status:'invalid portal', response:e});
-                                    return;
-                                }
 
                                 resolve({status:status, response:e});
                             } catch (err) {

common/loginpage/src/dialogpreview.js

@@ -0,0 +1,71 @@
+function PreviewTemplateDialog(model, params = {}) {
+    const type = utils.parseFileFormat(model.type);
+    const size = formatSize(model.size);
+
+    const bodyTemplate = `
+        <div class="template-preview-body">
+            <div class="img-container">
+                <img class='icon--default' src="${model.icon}">
+                <img class="icon" src="${model.preview}" style="display:none;">
+            </div>
+            <div class="description">
+                <h3 class="name">${model.name}</h3>
+                <p class="pricing" l10n>${utils.Lang.tplFree}</p>
+                <p class="descr">${model.descr}</p>
+                <div class="file-info separator">
+                    <div>
+                        <span class="label" l10n>${utils.Lang.tplFileSize}:</span>
+                        <span class="value">${size}</span>
+                    </div>
+                    <div>
+                        <span class="label" l10n>${utils.Lang.tplFileType}:</span>
+                        <span class="value">${type}</span>
+                    </div>
+                </div>
+                <button class="btn btn--landing" l10n>${utils.Lang.tplUseTemplate}</button>
+            </div>
+        </div>
+    `;
+
+    function formatSize(size) {
+        if (!size) return '';
+        if (size < 1024) {
+            return Math.round(size) + ' kb';
+        } else {
+            return Math.round(size / 1024) + ' mb';
+        }
+    }
+
+    Object.assign(params, {
+        dialogClass: 'dlg-template-preview',
+        titleText: utils.Lang.actPreviewTemplates,
+        defaultWidth: 800,
+        bodyTemplate: bodyTemplate
+    });
+
+    Dialog.call(this, params);
+    this.model = model;
+}
+
+PreviewTemplateDialog.prototype = Object.create(Dialog.prototype);
+PreviewTemplateDialog.prototype.constructor = PreviewTemplateDialog;
+
+PreviewTemplateDialog.prototype.show = function(width) {
+    Dialog.prototype.show.call(this, width);
+
+    const {$el} = this.getElements();
+    const $img = $el.find('img.icon');
+    const $icon = $el.find('img.icon--default');
+
+    $img.on('load', () => {
+        $icon.hide();
+        $img.show();
+    });
+
+    $el.find('.btn.btn--landing').on('click', () => {
+        this.close();
+        window.sdk.openTemplate(this.model.path, this.model.fullName);
+    });
+};
+
+window.PreviewTemplateDialog = PreviewTemplateDialog;

common/loginpage/src/index.html

@@ -177,6 +177,7 @@
     <script type="text/javascript" src="panels.js"></script>
     <script type="text/javascript" src="dialogabout.js"></script>
     <script type="text/javascript" src="dialogproviders.js"></script>
+    <script type="text/javascript" src="dialogpreview.js"></script>
 
 
     <!-- debug begin -->

common/loginpage/src/locale.js

@@ -92,6 +92,7 @@ l10n.en = {
     actAbout: 'About',
     actSettings: 'Settings',
     actTemplates: 'Templates',
+    actPreviewTemplates: 'Template',
     actClouds: 'Clouds',
     actHome: 'Home',
     licKeyHolder: 'input activation key',
@@ -162,6 +163,10 @@ l10n.en = {
     tplNoResultsTitle: "Nothing found",
     tplNoResultsText: "No results matching your query could be found",
     tplErrorTLS: "Windows XP doesn't support current TLS 1.1 and TLS 1.2 protocol versions, so Cloud Templates cannot be used on this operating system.",
+    tplFree: "Free",
+    tplUseTemplate : 'Use this template',
+    tplFileSize: "File size",
+    tplFileType: "File type",
     colFileName: "File name",
     colLocation: 'Location',
     colLastOpened: 'Last opened',

common/loginpage/src/panelabout.js

@@ -67,7 +67,7 @@
         const strVersion = args.opts.commercial === true ? utils.Lang.strVersionCommercial : utils.Lang.strVersionCommunity;
 
         let _ext_ver = '';
-        if ( !!_opts.arch ) _ext_ver += `${_opts.arch == 'x64' ? 'x64' : 'x86'}`;
+        if ( !!_opts.arch ) _ext_ver += _opts.arch;
         if ( !!_opts.pkg ) _ext_ver += ` ${_opts.pkg}`;
         if ( !!_ext_ver ) _opts.version += ` (${_ext_ver.trim()})`;
 
@@ -124,6 +124,7 @@
 
     utils.fn.extend(ControllerAbout.prototype, (function() {
         let features = undefined;
+        let action = null;
 
         let _on_features_avalable = function (params) {
             if ( !!this.view ) {
@@ -186,7 +187,6 @@
 
                     if ( this.updates ) {
                         $('body').on('click', '.btn-update-action', e=>{
-                            const action = $(e.target).data('action');
                             sdk.execCommand('updates:action', action);
                         });
                     }
@@ -258,7 +258,7 @@
                     const $button = $('#idx-update-btnaction', this.view.$body);
                     if ( info.button.text ) {
                         $button.text(info.button.text);
-                        $button.attr("data-action", info.button.action);
+                        action = info.button.action;
                     }
 
                     if ( info.button.lock ) {
@@ -297,6 +297,12 @@
                 } else sdk.GetLocalFeatures = e => false;
 
                 CommonEvents.on('panel:show', onPanelShow.bind(this));
+                CommonEvents.on('lang:changed', () => {
+                    if (this.view) {
+                        this.view.$dialog.titleText = utils.Lang.actAbout;
+                        $('#idx-about-version span', this.view.$body).text(utils.Lang.strVersion);
+                    }
+                });
 
                 return this;
             },

common/loginpage/src/panelexternal.js

@@ -53,7 +53,7 @@
 
         let _html = `<div class="action-panel style--free ${args.action}">
                       <div class="flexbox">
-                        <iframe name="${args.id}" id="${args.id}" src="${args.url}"></iframe>
+                        <iframe name="${args.id}" id="${args.id}" src="${args.url}" allow="clipboard-read; clipboard-write"></iframe>
                       </div>
                     </div>`;
 
@@ -132,6 +132,16 @@
             /**/
             if ( panel_id.includes('\{B17BDC61\-') ) {
                 _encrype_workaround(_panel);
+            } else
+            if ( panel_id.includes('F2402876-659F-47FB-A646-67B49F2B5AAA') ||
+                    panel_id.includes('9DC93CDB-B576-4F0C-B55E-FCC9C48DD777') )
+            {
+                const $svgicon = _panel.$menuitem.find('svg.icon');
+                if ( $svgicon.length ) {
+                    $svgicon.data('iconname', 'aichat');
+                    $('use', $svgicon).attr('href', '#aichat');
+                }
+                _panel.$menuitem.find('i.icon').removeClass('plugin').addClass('aichat');
             }
             /**/
         };

common/loginpage/src/panelrecent.js

@@ -147,13 +147,15 @@
                             <svg class="icon" data-iconname="${info.type === 'folder' ? 'folder' : `${info.format}`}" data-precls="tool-icon">
                                 <use xlink:href="#${info.type === 'folder' ? 'folder-small' : info.format}"></use>
                             </svg>
-                            ${info.crypted ? `<svg class="icon" data-iconname="shield" data-precls="tool-icon">
+                            ${info.crypted ? `<svg class="icon shield" data-iconname="shield" data-precls="tool-icon">
                                                 <use xlink:href="#shield"></use>
                                               </svg>` : ''}
-                            ${!isSvgIcons ? `<i class="icon tool-icon ${info.type === 'folder' ? 'folder' : `${info.format}`}"></i>` :''}
+                            ${!isSvgIcons ? `<i class="icon ${info.type === 'folder' ? 'img-el folder' : `img-format ${info.format}`}"></i>` : ''}
+                            ${info.crypted && !isSvgIcons ? `<i class="icon img-el shield"></i>` : ''}
                         </div>
-                        <p class="name">${info.name}</p>
-                        <span class="ext">${info.ext}</span>
+                        <p class="name">
+                            ${info.name}<span class="ext">${info.ext}</span>
+                        </p>
                     </div>
                     <div class="col-location" title="${info.descr}">
 <!--              todo: icon here          -->
@@ -183,32 +185,43 @@
 
             // todo: rewrite cicon rescale
 
-            $('#box-recent .cicon').each(function () {
-                 elm = $(this);
-                 parent = elm.parent();
-                 if(parent.hasClass('crypted-svg') || parent.hasClass('crypted'))
-                     parent.toggleClass('crypted-svg crypted');
+            $('#box-recent .row.text-normal').each(function () {
+                let elm = $(this);
+                let iconContainer = elm.find('.col-name .icon').first();
+                let svgElem = iconContainer.find('svg.icon').first();
 
-                 if(!pasteSvg || !!$('svg',elm).length) return;
+                if (pasteSvg || !svgElem.length || iconContainer.find('i.icon').length) return;
 
-                 icoName = $('i.icon', elm).attr('class').split(' ').filter((cls) => cls != 'icon' && cls != 'img-format');
-                 elm.append($(`<svg class = "icon"><use xlink:href="#${icoName}"></use></svg>`));
-                 if(parent.hasClass('crypted-svg'))
-                     elm.append($('<svg class = "shield"><use xlink:href="#shield"></use></svg>'));
+                let icoName = svgElem.attr('data-iconname');
+                iconContainer.append(`<i class="icon img-format ${icoName}"></i>`);
+
+                if (iconContainer.find('.icon.shield').length) {
+                    iconContainer.append(`<i class="icon img-el shield"></i>`);
+                }
             });
 
-            $('#box-recent-folders td.cicon').each(function (){
-                elm=$(this)
-                parent = elm.parent();
-                if(parent.hasClass('crypted-svg') || parent.hasClass('crypted'))
-                    parent.toggleClass('crypted-svg crypted');
-                if(!pasteSvg || !!$('svg',elm).length) return;
+            $('.open-panel-container .row.text-normal').each(function () {
+                let elm = $(this);
+                let iconContainer = elm.find('.col-name .icon').first();
+                let svgElem = iconContainer.find('svg.icon').first();
 
-                elm.append($('<svg class = "icon  folder"> <use xlink:href="#folder-small"></use></svg>'));
-                if(parent.hasClass('crypted-svg'))
-                    elm.append($('<svg class = "shield"><use xlink:href="#shield"></use></svg>'));
+                if (pasteSvg || !svgElem.length || iconContainer.find('i.icon').length) return;
 
-                });
+                iconContainer.append(`<i class="icon img-el folder"></i>`);
+
+                if (iconContainer.find('.icon.shield').length) {
+                    iconContainer.append(`<i class="icon img-el shield"></i>`);
+                }
+            });
+
+            $('.col-more .btn-quick.more').each(function () {
+                let btn = $(this);
+                let svgElem = btn.find('svg.icon').first();
+
+                if (pasteSvg || !svgElem.length || btn.find('i.icon').length) return;
+
+                btn.append(`<i class="icon tool-icon more"></i>`);
+            });
         },
         updateListSize: function () {
             const windowBottom = $(window).height();
@@ -298,6 +311,7 @@
 
             if (collectionRecents.size() > 0 || collectionRecovers.size() > 0) {
                 this.dndZone.hide();
+                this.view.$panel.find('#area-welcome').hide();
             }
         };
 
@@ -314,18 +328,22 @@
         };
 
         var _on_recovers = function(params) {
-            collectionRecovers.empty();
+            if ( false )
+                window.sdk.command("recovery:update", JSON.stringify(params));
+            else {
+                collectionRecovers.empty();
 
-            var files = utils.fn.parseRecent(params);
-            for (let item of files) {
-                collectionRecovers.add( new FileModel(item) );
-            }
+                var files = utils.fn.parseRecent(params);
+                for (let item of files) {
+                    collectionRecovers.add( new FileModel(item) );
+                }
 
-            this.view.$boxRecovery.css('display', collectionRecovers.size() > 0 ? 'flex' : 'none');
-            // requestAnimationFrame(() => this.view.updateListSize());
+                this.view.$boxRecovery.css('display', collectionRecovers.size() > 0 ? 'flex' : 'none');
+                // requestAnimationFrame(() => this.view.updateListSize());
 
-            if (collectionRecents.size() > 0 || collectionRecovers.size() > 0) {
-                this.dndZone.hide();
+                if (collectionRecents.size() > 0 || collectionRecovers.size() > 0) {
+                    this.dndZone.hide();
+                }
             }
         };
 
@@ -333,13 +351,18 @@
             $(`#${model.uid}-more-btn`, view).click((e) => {
                 e.stopPropagation();
 
-                if (Menu.opened) {
-                    Menu.closeAll();
-                    return;
+                if (ppmenu.contextdata) {
+                    const m = ppmenu.contextdata;
+                    if (m.uid != model.uid)
+                        Menu.closeAll();
                 }
 
-                ppmenu.actionlist = actionList;
-                ppmenu.showUnderElem(e.currentTarget, model, $('body').hasClass('rtl') ? 'left' : 'right');
+                if (!Menu.opened) {
+                    ppmenu.actionlist = actionList;
+                    ppmenu.showUnderElem(e.currentTarget, model, $('body').hasClass('rtl') ? 'left' : 'right');
+                } else {
+                    Menu.closeAll();
+                }
             })
         }
 
@@ -447,16 +470,15 @@
             if (/\:forget/.test(action)) {
                 $('#' + data.uid, this.view.$panel).addClass('lost');
 
+                const count = collectionRecovers.size() + collectionRecents.size();
                 if (menu.actionlist === 'recent') {
                     window.sdk.LocalFileRemoveRecent(parseInt(data.fileid));
-                    if (collectionRecovers.size() === 0) {
-                        this.dndZone.show();
-                    }
                 } else {
                     window.sdk.LocalFileRemoveRecover(parseInt(data.fileid));
-                    if (collectionRecents.size() === 0) {
-                        this.dndZone.show();
-                    }
+                }
+
+                if ( !(count > 1) ) {
+                    this.dndZone.show();
                 }
             } else
             if (/\:explore/.test(action)) {
@@ -491,6 +513,7 @@
             }
         }
 
+
         return {
             init: function() {
                 baseController.prototype.init.apply(this, arguments);
@@ -542,6 +565,7 @@
                     console.log('portal authorized');
                 });
 
+
                 this.dndZone = new DnDFileZone();
                 this.dndZone.render(this.view.$panel.find("#area-dnd-file"));
 

common/loginpage/src/paneltemplates.js

@@ -218,7 +218,7 @@
 
                 collection.events.click.attach((col, model) => {
                     if (model.isCloud) {
-                        window.sdk.openTemplate(model.path, model.name);
+                        new PreviewTemplateDialog(model).show();
                     } else {
                         sdk.command('create:new', JSON.stringify({
                             template: {
@@ -314,10 +314,13 @@
                     const m = new FileTemplateModel({
                         uid: id,
                         name: info['name_form'],
+                        fullName: [info['name_form'], file_ext].join('.'),
                         descr: info['template_desc'],
+                        preview: info.card_prewiew ? info.card_prewiew.data.attributes.url : undefined,
                         path: info.file_oform ? info.file_oform.data[0].attributes.url : undefined,
                         type: utils.fileExtensionToFileFormat(file_ext),
                         icon: info.template_image ? info.template_image.data.attributes.formats.thumbnail.url : undefined,
+                        size: info.file_oform ? info.file_oform.data[0].attributes.size : undefined,
                         isCloud: true,
                     });
 
@@ -387,7 +390,6 @@
                             _loadTemplates.call(this, nl, page_num, fallBack);
                         } 
                     } else if (d.data && d.data.length === 0 && fallBack < 2) {
-                        _resetPagination.call(this);
                         _loadTemplates.call(this, nl, 0, fallBack + 1);
                     }
                 })
@@ -465,6 +467,7 @@
                 };
 
                 CommonEvents.on('lang:changed', (ol, nl) => {
+                    if (ol === nl) return;
                     _resetPagination.call(this);  
                     _reload_templates(nl);
                     _loadTemplates.call(this, nl);

common/loginpage/src/utils.js

@@ -406,7 +406,7 @@ utils.fn.parseRecent = function(arr, out = 'files') {
                 name: name,
                 descr: path,
                 date: _f_.modifyed,
-                path: fn,
+                path: $('<div>').html(fn).text(),
                 cloud: _f_.cloud,
             });