From e6a0080c0eb679a897addc6d7a125c615893b13c Mon Sep 17 00:00:00 2001
From: yuri <yurak@list.ru>
Date: Mon, 3 Aug 2015 17:06:12 +0300
Subject: [PATCH] vertical theme

---
 .gitignore                                    |   1 +
 Gruntfile.js                                  |   8 +
 .../metadata/themes/EspoVertical.json         |   4 +
 frontend/client/res/templates/site/navbar.tpl |   2 +-
 frontend/client/src/views/site/navbar.js      | 148 ++++++++++--------
 frontend/less/espo-vertical/custom.less       |   1 +
 frontend/less/espo-vertical/main.less         |  11 ++
 frontend/less/espo-vertical/navbar.less       |  57 +++++++
 frontend/less/espo-vertical/variables.less    |   1 +
 frontend/less/espo/custom.less                |  13 --
 frontend/less/espo/main.less                  |   1 +
 frontend/less/espo/navbar.less                |  45 ++++++
 frontend/less/sacura/main.less                |   1 +
 13 files changed, 210 insertions(+), 83 deletions(-)
 create mode 100644 application/Espo/Resources/metadata/themes/EspoVertical.json
 create mode 100644 frontend/less/espo-vertical/custom.less
 create mode 100644 frontend/less/espo-vertical/main.less
 create mode 100644 frontend/less/espo-vertical/navbar.less
 create mode 100644 frontend/less/espo-vertical/variables.less
 create mode 100644 frontend/less/espo/navbar.less

diff --git a/.gitignore b/.gitignore
index b790bc680f..3f8b006fac 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,7 @@
 /main.html
 /frontend/client/css/bootstrap.css
 /frontend/client/css/espo.css
+/frontend/client/css/espo-vertical.css
 /frontend/client/css/sacura.css
 /tests/testData/cache/*
 composer.phar
diff --git a/Gruntfile.js b/Gruntfile.js
index 8421704491..ba523f227c 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -75,6 +75,14 @@ module.exports = function (grunt) {
                     'frontend/client/css/sacura.css': 'frontend/less/sacura/main.less',
                 },
             },
+            espoVertical: {
+                options: {
+                    yuicompress: true,
+                },
+                files: {
+                    'frontend/client/css/espo-vertical.css': 'frontend/less/espo-vertical/main.less',
+                },
+            },
         },
         cssmin: {
             minify: {
diff --git a/application/Espo/Resources/metadata/themes/EspoVertical.json b/application/Espo/Resources/metadata/themes/EspoVertical.json
new file mode 100644
index 0000000000..c9919fb565
--- /dev/null
+++ b/application/Espo/Resources/metadata/themes/EspoVertical.json
@@ -0,0 +1,4 @@
+{
+    "stylesheet": "client/css/espo-vertical.css",
+    "navbarHorizontalAdjustDisabled": true
+}
\ No newline at end of file
diff --git a/frontend/client/res/templates/site/navbar.tpl b/frontend/client/res/templates/site/navbar.tpl
index f60cfff024..8a4e84cd53 100644
--- a/frontend/client/res/templates/site/navbar.tpl
+++ b/frontend/client/res/templates/site/navbar.tpl
@@ -1,4 +1,4 @@
-<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+<div class="navbar navbar-inverse" role="navigation">
 
     <div class="navbar-header">
         <a class="navbar-brand" href="#"><img src="{{logoSrc}}"></a>
diff --git a/frontend/client/src/views/site/navbar.js b/frontend/client/src/views/site/navbar.js
index dc768bcecd..785c9216d9 100644
--- a/frontend/client/src/views/site/navbar.js
+++ b/frontend/client/src/views/site/navbar.js
@@ -112,86 +112,96 @@ Espo.define('Views.Site.Navbar', 'View', function (Dep) {
             this.selectTab(this.getRouter().getLast().controller);
 
             var self = this;
-            var $tabs = this.$el.find('ul.tabs');
-            var $more = $tabs.find('li.dropdown > ul');
 
-            $(window).on('resize.navbar', function() {
-                updateWidth();
-            });
+            var theme = this.getConfig().get('theme');
+            if (!this.getMetadata().get('themes.' + theme + '.navbarHorizontalAdjustDisabled')) {
+                var $tabs = this.$el.find('ul.tabs');
+                var $more = $tabs.find('li.dropdown > ul');
 
-
-            var hideOneTab = function () {
-                var count = $tabs.children().size();
-                var $one = $tabs.children().eq(count - 2);
-                $one.prependTo($more);
-            };
-            var unhideOneTab = function () {
-                var count = $tabs.children().size();
-                var $one = $more.children().eq(0);
-                if ($one.size()) {
-                    $one.insertAfter($tabs.children().eq(count - 2));
-                }
-            };
-
-            var tabCount = this.tabList.length;
-
-            var $navbar = $('#navbar .navbar');
-
-            var navbarNeededHeight = 45;
-
-            var moreWidth = $('#nav-more-tabs-dropdown').width();
-
-
-            var updateWidth = function () {
-                var windowWidth = $(window.document).width();
-
-                var windowWidth = window.innerWidth;
-
-                $more.children('li').each(function (i, li) {
-                    unhideOneTab();
+                $(window).on('resize.navbar', function() {
+                    updateWidth();
                 });
 
-                $more.parent().addClass('hide');
+                var hideOneTab = function () {
+                    var count = $tabs.children().size();
+                    var $one = $tabs.children().eq(count - 2);
+                    $one.prependTo($more);
+                };
+                var unhideOneTab = function () {
+                    var count = $tabs.children().size();
+                    var $one = $more.children().eq(0);
+                    if ($one.size()) {
+                        $one.insertAfter($tabs.children().eq(count - 2));
+                    }
+                };
 
-                if (windowWidth < 768) {
-                    return;
+                var tabCount = this.tabList.length;
+                var $navbar = $('#navbar .navbar');
+                var navbarNeededHeight = 45;
+                var moreWidth = $('#nav-more-tabs-dropdown').width();
+
+                var updateWidth = function () {
+                    var windowWidth = $(window.document).width();
+
+                    var windowWidth = window.innerWidth;
+
+                    $more.children('li').each(function (i, li) {
+                        unhideOneTab();
+                    });
+
+                    $more.parent().addClass('hide');
+
+                    if (windowWidth < 768) {
+                        return;
+                    }
+
+                    var headerWidth = this.$el.width();
+
+                    var maxWidth = headerWidth - 546 - moreWidth;
+
+                    var width = $tabs.width();
+                    while (width > maxWidth) {
+                        hideOneTab();
+                        width = $tabs.width();
+                    }
+
+                    if ($more.children().size() > 0) {
+                        $more.parent().removeClass('hide');
+                    }
+                }.bind(this);
+
+                var processUpdateWidth = function () {
+                    if ($navbar.height() > navbarNeededHeight) {
+                        updateWidth();
+                        setTimeout(function () {
+                            processUpdateWidth();
+                        }, 200);
+                    } else {
+                        setTimeout(function () {
+                            processUpdateWidth();
+                        }, 1000);
+                    }
+                };
+
+                if ($navbar.height() <= navbarNeededHeight) {
+                    $more.parent().addClass('hide');
                 }
 
-                var headerWidth = this.$el.width();
+                processUpdateWidth();
+            } else {
+                var $tabs = this.$el.find('ul.tabs');
+                var updateHeight = function () {
+                    var windowHeight = window.innerHeight;
 
-                var maxWidth = headerWidth - 546 - moreWidth;
+                    $tabs.css('height', (windowHeight - 130) + 'px');
+                }.bind(this);
 
-                var width = $tabs.width();
-                while (width > maxWidth) {
-                    hideOneTab();
-                    width = $tabs.width();
-                }
-
-                if ($more.children().size() > 0) {
-                    $more.parent().removeClass('hide');
-                }
-            }.bind(this);
-
-            var processUpdateWidth = function () {
-                if ($navbar.height() > navbarNeededHeight) {
-                    updateWidth();
-                    setTimeout(function () {
-                        processUpdateWidth();
-                    }, 200);
-                } else {
-                    setTimeout(function () {
-                        processUpdateWidth();
-                    }, 1000);
-                }
-            };
-
-            if ($navbar.height() <= navbarNeededHeight) {
-                $more.parent().addClass('hide');
+                $(window).on('resize.navbar', function() {
+                    updateHeight();
+                });
+                updateHeight();
             }
 
-
-            processUpdateWidth();
-
         },
 
         selectTab: function (name) {
diff --git a/frontend/less/espo-vertical/custom.less b/frontend/less/espo-vertical/custom.less
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/frontend/less/espo-vertical/custom.less
@@ -0,0 +1 @@
+
diff --git a/frontend/less/espo-vertical/main.less b/frontend/less/espo-vertical/main.less
new file mode 100644
index 0000000000..ab8226c37a
--- /dev/null
+++ b/frontend/less/espo-vertical/main.less
@@ -0,0 +1,11 @@
+@import "../espo/bootstrap/bootstrap.less";
+@import "../espo/variables.less";
+@import "variables.less";
+@import "../espo/mixins.less";
+
+@import "../espo/misc.less";
+@import "navbar.less";
+@import "../espo/custom.less";
+@import "custom.less";
+
+@import "../espo/bootstrap/utilities.less";
diff --git a/frontend/less/espo-vertical/navbar.less b/frontend/less/espo-vertical/navbar.less
new file mode 100644
index 0000000000..1e92b7fdfb
--- /dev/null
+++ b/frontend/less/espo-vertical/navbar.less
@@ -0,0 +1,57 @@
+body {
+    padding-top: 0;
+}
+
+#header .navbar {
+  top: 0;
+  border-width: 0 0 0 0;
+}
+
+#header {
+    width: 200px;
+}
+
+body > .content {
+    margin-left: 200px;
+}
+
+#header .navbar {
+  position: fixed;
+  z-index: @zindex-navbar-fixed;
+  width: 200px;
+  margin-bottom: 0px;
+  height: 100%;
+}
+
+#header ul.tabs li {
+  float: none;
+}
+
+#header ul.tabs {
+  width: 190px;
+  margin-left: -8px;
+  overflow-y: auto;
+}
+
+#header ul.tabs li.dropdown {
+  display: none;
+}
+
+#header .navbar-right {
+  position: fixed;
+  bottom: 20px;
+}
+
+#header .navbar-right .global-search-container {
+  float: none;
+}
+
+#header ul.navbar-nav li > a {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 12px;
+}
+
+#footer {
+  margin-left: 190px;
+}
\ No newline at end of file
diff --git a/frontend/less/espo-vertical/variables.less b/frontend/less/espo-vertical/variables.less
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/frontend/less/espo-vertical/variables.less
@@ -0,0 +1 @@
+
diff --git a/frontend/less/espo/custom.less b/frontend/less/espo/custom.less
index 88e9a5bbb3..ae30a8fbf3 100644
--- a/frontend/less/espo/custom.less
+++ b/frontend/less/espo/custom.less
@@ -146,10 +146,6 @@ table.table > thead th {
   }
 }
 
-body {
-    padding-top: 55px;
-}
-
 .navbar-brand {
     padding: 0;
 }
@@ -321,15 +317,6 @@ ul.dropdown-menu > li.checkbox:last-child {
     }
 }
 
-@media screen and (max-width: @screen-sm-min) {
-    .navbar-fixed-top {
-        position: static;
-    }
-    body {
-        padding-top: 0;
-    }
-}
-
 table.table > tbody td > .list-row-buttons button {
     position: relative;
     margin-top: 2px;
diff --git a/frontend/less/espo/main.less b/frontend/less/espo/main.less
index f2c33e0782..d576ae84d1 100644
--- a/frontend/less/espo/main.less
+++ b/frontend/less/espo/main.less
@@ -3,5 +3,6 @@
 @import "mixins.less";
 
 @import "misc.less";
+@import "navbar.less";
 @import "custom.less";
 @import "bootstrap/utilities.less";
diff --git a/frontend/less/espo/navbar.less b/frontend/less/espo/navbar.less
new file mode 100644
index 0000000000..4f3927521b
--- /dev/null
+++ b/frontend/less/espo/navbar.less
@@ -0,0 +1,45 @@
+#header .navbar {
+  .navbar-collapse {
+    max-height: @navbar-collapse-max-height;
+
+    @media (max-device-width: @screen-xs-min) and (orientation: landscape) {
+      max-height: 200px;
+    }
+  }
+}
+
+.navbar-collapse {
+  @media (min-width: @grid-float-breakpoint) {
+    .navbar & {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}
+
+
+#header .navbar {
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: @zindex-navbar-fixed;
+}
+
+#header .navbar {
+  top: 0;
+  border-width: 0 0 1px;
+}
+
+
+body {
+    padding-top: 55px;
+}
+
+@media screen and (max-width: @screen-sm-min) {
+  .navbar {
+      position: static;
+  }
+  body {
+      padding-top: 0;
+  }
+}
\ No newline at end of file
diff --git a/frontend/less/sacura/main.less b/frontend/less/sacura/main.less
index deae383cd0..cae062dc99 100644
--- a/frontend/less/sacura/main.less
+++ b/frontend/less/sacura/main.less
@@ -4,5 +4,6 @@
 @import "../espo/mixins.less";
 
 @import "../espo/misc.less";
+@import "../espo/navbar.less";
 @import "../espo/custom.less";
 @import "../espo/bootstrap/utilities.less";