From 54688795e294669eca4e605611d6589b7a686fce Mon Sep 17 00:00:00 2001
From: Eymen Elkum <eymen.elkum@gmail.com>
Date: Thu, 30 Mar 2023 11:33:23 +0300
Subject: [PATCH] rtl vertical theme (#2678)

Co-authored-by: Eymen Elkum <eymen@eblasoft.com.tr>
---
 .../Resources/metadata/themes/EspoRtl.json    |   3 +-
 frontend/less/espo-rtl/layout-side.less       | 236 ++++++++++++++++++
 frontend/less/espo-rtl/main.less              |   1 +
 3 files changed, 239 insertions(+), 1 deletion(-)
 create mode 100644 frontend/less/espo-rtl/layout-side.less

diff --git a/application/Espo/Resources/metadata/themes/EspoRtl.json b/application/Espo/Resources/metadata/themes/EspoRtl.json
index 48ca966d6c..a23d68989e 100644
--- a/application/Espo/Resources/metadata/themes/EspoRtl.json
+++ b/application/Espo/Resources/metadata/themes/EspoRtl.json
@@ -6,7 +6,8 @@
             "type": "enum",
             "default": "top",
             "options": [
-                "top"
+                "top",
+                "side"
             ]
         }
     }
diff --git a/frontend/less/espo-rtl/layout-side.less b/frontend/less/espo-rtl/layout-side.less
new file mode 100644
index 0000000000..08bbabd0d6
--- /dev/null
+++ b/frontend/less/espo-rtl/layout-side.less
@@ -0,0 +1,236 @@
+body[data-navbar="side"] {
+    @media screen and (min-width: @screen-sm-min) {
+        &,
+        &.minimized.side-menu-opened {
+            #navbar .navbar {
+                .nav > li.more > .dropdown-menu,
+                .nav > li.more > .dropdown-menu > li.tab-group > ul.dropdown-menu,
+                .nav > li.tab-group > .dropdown-menu {
+                    left: auto;
+                    right: @navbar-width;
+                }
+
+                .nav > li.more > .dropdown-menu,
+                .nav > li.tab-group > .dropdown-menu {
+                    border-right-width: 0;
+                    border-left-width: var(--dropdown-border-width);
+                }
+
+                .nav li.tab-group {
+                    span.full-label {
+                        padding-left: 8px;
+                        padding-right: @navbar-tab-text-left-padding;
+                    }
+
+                    .group-caret {
+                        right: auto;
+                        left: 13px;
+                        transform: rotate(180deg);
+                    }
+                }
+
+                a.minimizer {
+                    margin-right: @navbar-tab-left-padding + 3px;
+                    margin-left: 0;
+                }
+
+                a.minimizer > span.left {
+                    display: none;
+                }
+
+                a.minimizer > span.right {
+                    display: inline;
+                }
+
+                .side-menu-backdrop {
+                    right: 0;
+                    margin-right: @navbar-width;
+                    left: 0;
+                    margin-left: 0;
+                }
+            }
+
+            #navbar {
+                .navbar-right {
+                    left: auto;
+                    right: 0;
+                    margin-right: @navbar-width;
+                    padding-left: @navbar-width;
+                    margin-left: 0;
+                    padding-right: 0;
+                }
+
+                ul.tabs {
+                    li {
+                        float: none !important;
+                    }
+
+                    li > a {
+                        padding-right: @navbar-tab-left-padding;
+                        padding-left: @navbar-tab-right-padding;
+                    }
+
+                    li.tab > a {
+                        padding-right: @navbar-tab-left-padding - @navbar-color-border-width;
+                        padding-left: @navbar-tab-right-padding;
+                    }
+                }
+            }
+        }
+
+        &.minimized.side-menu-opened {
+            #navbar > .navbar {
+                .navbar-logo-container {
+                    float: left;
+                }
+
+                a.minimizer > span.left {
+                    display: inline;
+                }
+
+                a.minimizer > span.right {
+                    display: none;
+                }
+
+                a.navbar-brand {
+                    float: right;
+                }
+            }
+        }
+    }
+
+    #navbar {
+        ul.tabs {
+            > li.more > ul > li > a > span.full-label {
+                padding-left: 0;
+                padding-right: @navbar-tab-text-left-padding;
+            }
+
+            > li a > span.full-label {
+                padding-left: 0;
+                padding-right: @navbar-tab-text-left-padding;
+            }
+        }
+
+        .navbar-header {
+            > a.minimizer span {
+                margin-right: 8px;
+                margin-left: 0;
+            }
+        }
+
+        .navbar li.tab > a {
+            border-right-width: @navbar-color-border-width;
+            border-right-style: solid;
+        }
+    }
+
+    @media screen and (min-width: @screen-sm-min) {
+        &.minimized {
+            #navbar {
+                .nav > li.more > ul.dropdown-menu,
+                .nav > li.tab-group > .dropdown-menu {
+                    left: auto;
+                    right: @navbar-minimized-width;
+                }
+
+                a.minimizer > span.left {
+                    display: inline;
+                }
+
+                a.minimizer > span.right {
+                    display: none;
+                }
+
+                ul.tabs {
+                    > li > a {
+                        padding-right: @navbar-tab-left-padding;
+                        padding-left: 0;
+                    }
+
+                    > li.tab > a {
+                        padding-right: @navbar-tab-left-padding - @navbar-color-border-width;
+                        padding-left: 0;
+                    }
+
+                    > li > a > span.short-label > .short-label-text {
+                        left: auto;
+                        right: -1px;
+                    }
+
+                    > li.tab-group .group-caret {
+                        left: 5px;
+                        right: auto;
+                    }
+                }
+
+                .navbar-right {
+                    margin-left: 0;
+                    padding-right: 0;
+                    margin-right: @navbar-minimized-width;
+                    padding-left: @navbar-minimized-width;
+                }
+            }
+
+            #content {
+                padding-left: 15px;
+                padding-right: @navbar-minimized-width + @container-padding;
+            }
+
+            #footer {
+                margin-left: 0;
+                margin-right: @navbar-minimized-width;
+            }
+
+            > .side-menu-backdrop {
+                margin-left: 0;
+                margin-right: @navbar-width;
+            }
+        }
+
+        &.has-navbar > .content {
+            padding-left: 15px;
+            padding-right: @navbar-width + @container-padding;
+        }
+
+        > footer {
+            margin-left: 0;
+            margin-right: @navbar-width;
+        }
+    }
+
+    .list-buttons-container .sticked-bar {
+        left: auto;
+        right: @navbar-width;
+    }
+
+    &.minimized .list-buttons-container .sticked-bar {
+        left: auto;
+        right: @navbar-minimized-width;
+    }
+
+    @media screen and (min-width: @screen-sm-min) {
+        .folders-container.sticked {
+            left: auto;
+            right: @navbar-width;
+        }
+    }
+
+    &.minimized {
+        @media screen and (min-width: @screen-sm-min) {
+            .folders-container.sticked {
+                left: auto;
+                right: @navbar-minimized-width;
+            }
+        }
+    }
+
+    @media screen and (min-width: @screen-sm-min) {
+        .notifications-badge-container {
+            > .notifications-button > .number-badge {
+                left: auto;
+                right: 22px;
+            }
+        }
+    }
+}
diff --git a/frontend/less/espo-rtl/main.less b/frontend/less/espo-rtl/main.less
index 70f25bf8c0..e19b461883 100644
--- a/frontend/less/espo-rtl/main.less
+++ b/frontend/less/espo-rtl/main.less
@@ -10,6 +10,7 @@
 @import "../espo/layout-side.less";
 @import "../espo/custom.less";
 @import "layout-top.less";
+@import "layout-side.less";
 @import "custom.less";
 @import "bootstrap-rtl/utilities-rtl.less";