From 1c87d754c8ae7a29d6c78f42248ca507a033173b Mon Sep 17 00:00:00 2001
From: Alexey Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Tue, 27 May 2025 12:47:20 +0300
Subject: [PATCH] [SSE] Skeleton formula bar for internal

---
 .../main/index_internal.html                  | 53 ++++++++++++++----
 .../main/index_internal.html.deploy           | 55 +++++++++++++++----
 2 files changed, 87 insertions(+), 21 deletions(-)

diff --git a/apps/spreadsheeteditor/main/index_internal.html b/apps/spreadsheeteditor/main/index_internal.html
index 251fa33a83..f28959a3b5 100644
--- a/apps/spreadsheeteditor/main/index_internal.html
+++ b/apps/spreadsheeteditor/main/index_internal.html
@@ -17,6 +17,14 @@
             --canvas-page-border: #555;
         }
 
+        .loadmask {
+            --sk-height-formula: 32px;
+            --sk-padding-formula: 4px 10px;
+            --sk-border-style-formula: none;
+            --sk-gap-formula-field: 28px;
+            --sk-border-radius-formula-field: 3px;
+        }
+
         .loadmask {
             left: 0;
             top: 0;
@@ -38,9 +46,13 @@
         }
 
         .loadmask > .skformula {
+            padding: 0 0 4px 0;
+            padding: var(--sk-padding-formula);
             height: 24px;
+            height: var(--sk-height-formula);
             background: #f7f7f7;
-            background: var(--background-toolbar, #f7f7f7);
+            background-color: var(--sk-background-toolbar, #f7f7f7);
+            box-sizing: border-box;
         }
 
         .loadmask > .skformula ul {
@@ -48,30 +60,51 @@
             font-size: 0;
             box-sizing: border-box;
             border-style: solid;
+            border-style: var(--sk-border-style-formula);
             border-width: 1px;
             border-width: var(--scaled-one-px-value, 1px);
             border-color: #cbcbcb transparent;
             border-color: var(--border-toolbar, #cbcbcb) transparent;
+            border-top: 0 none;
+            display: flex;
+            height: 100%;
         }
 
         .loadmask > .skformula li {
             display: inline-block;
             box-sizing: border-box;
-            height: 19px;
-            width: 100%;
-            margin-left: 20px;
             background: #fff;
             background: var(--background-normal, #fff);
-            border-style: solid;
-            border-width: 1px;
-            border-width: var(--scaled-one-px-value, 1px);
-            border-color: transparent #cbcbcb;
-            border-color: transparent var(--border-toolbar, #cbcbcb);
+            border-left: 1px solid #cbcbcb; 
+            border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); 
+            border-radius: 0px;
+            border-radius: var(--sk-border-radius-formula-field, 0px);
+            flex-grow: 1;
         }
 
         .loadmask > .skformula li:first-child {
             width: 100px;
-            margin-left: 0;
+            flex-grow: 0;
+            margin-right: 20px;
+            margin-right: var(--sk-gap-formula-field);
+            border-left: 0 none; 
+            border-right: 1px solid #cbcbcb; 
+            border-right: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); 
+        }
+
+        .rtl .loadmask > .skformula li {
+            border-left: 0 none; 
+            border-right: 1px solid #cbcbcb; 
+            border-right: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); 
+        }
+
+        .rtl .loadmask > .skformula li:first-child {
+            margin-right: 0;
+            margin-left: 20px;
+            margin-left: var(--sk-gap-formula-field);
+            border-right: 0 none; 
+            border-left: 1px solid #cbcbcb; 
+            border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); 
         }
 
         .loadmask > .placeholder {
diff --git a/apps/spreadsheeteditor/main/index_internal.html.deploy b/apps/spreadsheeteditor/main/index_internal.html.deploy
index 5b816a8824..aef1d85a7c 100644
--- a/apps/spreadsheeteditor/main/index_internal.html.deploy
+++ b/apps/spreadsheeteditor/main/index_internal.html.deploy
@@ -11,6 +11,14 @@
 
     <!-- splash -->
     <style type="text/css">
+        .loadmask {
+            --sk-height-formula: 32px;
+            --sk-padding-formula: 4px 10px;
+            --sk-border-style-formula: none;
+            --sk-gap-formula-field: 28px;
+            --sk-border-radius-formula-field: 3px;
+        }
+
         .loadmask {
             left: 0;
             top: 0;
@@ -32,9 +40,13 @@
         }
 
         .loadmask>.skformula {
+            padding: 0 0 4px 0;
+            padding: var(--sk-padding-formula);
             height: 24px;
+            height: var(--sk-height-formula);
             background: #f7f7f7;
-            background: var(--background-toolbar, #f7f7f7);
+            background-color: var(--sk-background-toolbar, #f7f7f7);
+            box-sizing: border-box;
         }
 
         .loadmask>.skformula ul {
@@ -42,30 +54,51 @@
             font-size: 0;
             box-sizing: border-box;
             border-style: solid;
+            border-style: var(--sk-border-style-formula);
             border-width: 1px;
             border-width: var(--scaled-one-px-value, 1px);
             border-color: #cbcbcb transparent;
             border-color: var(--border-toolbar, #cbcbcb) transparent;
+            border-top: 0 none;
+            display: flex;
+            height: 100%;
         }
 
         .loadmask>.skformula li {
             display: inline-block;
             box-sizing: border-box;
-            height: 19px;
-            width: 100%;
-            margin-left: 20px;
             background: #fff;
             background: var(--background-normal, #fff);
-            border-style: solid;
-            border-width: 1px;
-            border-width: var(--scaled-one-px-value, 1px);
-            border-color: #cbcbcb;
-            border-color: transparent var(--border-toolbar, #cbcbcb);
+            border-left: 1px solid #cbcbcb; 
+            border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); 
+            border-radius: 0px;
+            border-radius: var(--sk-border-radius-formula-field, 0px);
+            flex-grow: 1;
         }
 
-        .loadmask>.skformula li:first-child {
+        .loadmask > .skformula li:first-child {
             width: 100px;
-            margin-left: 0;
+            flex-grow: 0;
+            margin-right: 20px;
+            margin-right: var(--sk-gap-formula-field);
+            border-left: 0 none; 
+            border-right: 1px solid #cbcbcb; 
+            border-right: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); 
+        }
+
+        .rtl .loadmask > .skformula li {
+            border-left: 0 none; 
+            border-right: 1px solid #cbcbcb; 
+            border-right: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); 
+        }
+
+        .rtl .loadmask > .skformula li:first-child {
+            margin-right: 0;
+            margin-left: 20px;
+            margin-left: var(--sk-gap-formula-field);
+            border-right: 0 none; 
+            border-left: 1px solid #cbcbcb; 
+            border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); 
         }
 
         .loadmask > .placeholder {