From 4e2d6b5da831b0f632f3ec403d1cc263ba183b4e Mon Sep 17 00:00:00 2001
From: alekseybobkov <aleksey.bobkov@gmail.com>
Date: Fri, 27 Jun 2014 00:17:22 +1100
Subject: [PATCH] Implemented the content tabs style, minor fixes in the
 back-end styling.

---
 modules/backend/assets/css/october.css        | 83 +++++++++++++++----
 modules/backend/assets/js/october.layout.js   |  9 +-
 .../assets/less/controls/breadcrumb.less      | 19 +++--
 .../backend/assets/less/controls/lists.less   | 10 ++-
 .../assets/less/controls/pagination.less      | 13 +--
 modules/backend/assets/less/controls/tab.less | 53 ++++++++++++
 .../backend/assets/less/core/variables.less   | 10 ++-
 .../lists/partials/_list_pagination.htm       |  2 +-
 modules/system/controllers/EmailTemplates.php |  1 -
 .../controllers/emailtemplates/index.htm      | 10 +--
 10 files changed, 172 insertions(+), 38 deletions(-)

diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css
index 18a0bf078..ac382a1a0 100644
--- a/modules/backend/assets/css/october.css
+++ b/modules/backend/assets/css/october.css
@@ -7856,6 +7856,11 @@ label {
 .control-list table.table.data .list-pagination {
   font-size: 14px;
   text-align: right;
+  padding-top: 20px;
+}
+.control-list table.table.data .list-pagination .loading-indicator div {
+  margin-left: 20px;
+  font-size: 12px;
 }
 table.table.data {
   font-size: 12px;
@@ -8079,7 +8084,7 @@ table.table.data tbody tr.safe td a,
 table.table.data tbody tr.special td a,
 table.table.data tbody tr.safe th a,
 table.table.data tbody tr.special th a {
-  font-style: italic;
+  color: #98a7a8;
 }
 table.table.data tfoot a {
   color: #666666;
@@ -10159,6 +10164,47 @@ body.dropdown-open .dropdown-overlay {
   margin-right: 0;
   padding-right: 0;
 }
+.control-tabs.content-tabs > ul.nav-tabs {
+  position: relative;
+}
+.control-tabs.content-tabs > ul.nav-tabs:before {
+  content: ' ';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: #e3e5e7;
+}
+.control-tabs.content-tabs > ul.nav-tabs li {
+  margin-right: 0;
+  border-right: 1px solid #e3e5e7;
+}
+.control-tabs.content-tabs > ul.nav-tabs li a {
+  font-size: 12px;
+  padding: 17px 20px;
+  margin: 0;
+  border: none;
+  text-transform: uppercase;
+  background: transparent;
+}
+.control-tabs.content-tabs > ul.nav-tabs li:last-child {
+  border-right: none;
+}
+.control-tabs.content-tabs > ul.nav-tabs li.active {
+  background: #ffffff;
+}
+.control-tabs.content-tabs > ul.nav-tabs li.active a {
+  font-weight: 600;
+}
+.control-tabs.content-tabs > ul.nav-tabs li.active:last-child {
+  border-right: 1px solid #e3e5e7;
+}
+.control-tabs.content-tabs > .tab-content > .tab-pane div.toolbar-widget {
+  background: #ffffff;
+  margin-top: -20px;
+  padding-top: 20px;
+}
 .hide-tabs .control-tabs ul.nav-tabs {
   display: none;
 }
@@ -10224,7 +10270,8 @@ body.dropdown-open .dropdown-overlay {
 }
 .control-pagination .page-iteration {
   margin-right: 4px;
-  font-size: 14px;
+  font-size: 12px;
+  color: #98a7a8;
 }
 .control-pagination .page-next,
 .control-pagination .page-back {
@@ -10234,14 +10281,16 @@ body.dropdown-open .dropdown-overlay {
 .control-pagination .page-next:before,
 .control-pagination .page-back:before {
   color: #666666;
-  font-size: 14px;
-  line-height: 14px;
+  font-size: 19px;
+  line-height: 19px;
   display: inline-block;
   vertical-align: baseline;
+  position: relative;
+  top: 2px;
 }
 .control-pagination a.page-next:hover:before,
 .control-pagination a.page-back:hover:before {
-  color: #222222;
+  color: #1795f1;
 }
 .control-pagination span.page-next:before,
 .control-pagination span.page-back:before {
@@ -10260,7 +10309,7 @@ body.dropdown-open .dropdown-overlay {
   text-decoration: inherit;
   -webkit-font-smoothing: antialiased;
   *margin-right: .3em;
-  content: "\f054";
+  content: "\f105";
 }
 .control-pagination .page-back:before {
   font-family: FontAwesome;
@@ -10269,7 +10318,7 @@ body.dropdown-open .dropdown-overlay {
   text-decoration: inherit;
   -webkit-font-smoothing: antialiased;
   *margin-right: .3em;
-  content: "\f053";
+  content: "\f104";
 }
 div.scoreboard {
   position: relative;
@@ -10652,10 +10701,11 @@ ul.status-list li span.status.info {
 .control-breadcrumb {
   font-size: 12px;
   text-transform: uppercase;
-  padding: 0 0 20px 0;
+  padding: 15px 20px;
+  margin: -20px -20px 20px -20px;
+  background-color: #2b343d;
 }
 .control-breadcrumb ul {
-  margin: 0;
   padding: 0;
 }
 .control-breadcrumb li {
@@ -10663,14 +10713,15 @@ ul.status-list li span.status.info {
   margin: 0;
   padding: 0;
   display: inline-block;
-  color: #999999;
+  color: #9da3a7;
+  letter-spacing: 0.05em;
 }
 .control-breadcrumb li a {
-  color: #405261;
+  color: #ecf0f1;
   text-decoration: none;
 }
 .control-breadcrumb li a:hover {
-  color: #999999;
+  color: #ecf0f1;
 }
 .control-breadcrumb li:after {
   font-size: 14px;
@@ -10679,7 +10730,7 @@ ul.status-list li span.status.info {
   margin-left: 6px;
   margin-right: 2px;
   vertical-align: baseline;
-  color: #405261;
+  color: #9da3a7;
   font-family: FontAwesome;
   font-weight: normal;
   font-style: normal;
@@ -10691,8 +10742,12 @@ ul.status-list li span.status.info {
 .control-breadcrumb li:last-child:after {
   content: '';
 }
+.control-breadcrumb + .content-tabs {
+  margin-top: -20px;
+}
 body.slim-container .control-breadcrumb {
-  padding: 0 20px 20px 20px;
+  margin-left: 0;
+  margin-right: 0;
 }
 div.control-popover {
   position: absolute;
diff --git a/modules/backend/assets/js/october.layout.js b/modules/backend/assets/js/october.layout.js
index f671dc6c1..a9c992c47 100644
--- a/modules/backend/assets/js/october.layout.js
+++ b/modules/backend/assets/js/october.layout.js
@@ -30,8 +30,15 @@
 
     $.oc.layout = new OctoberLayout()
 
-    $(document).ready($.oc.layout.updateLayout())
+    $(document).ready(function(){
+        $.oc.layout.updateLayout()
+
+        window.setTimeout($.oc.layout.updateLayout, 100)
+    })
     $(window).on('resize', function() {
         $.oc.layout.updateLayout()
     })
+    $(window).on('oc.updateUi', function() {
+        $.oc.layout.updateLayout()
+    })
 })(jQuery);
\ No newline at end of file
diff --git a/modules/backend/assets/less/controls/breadcrumb.less b/modules/backend/assets/less/controls/breadcrumb.less
index 235379ff5..77aa28600 100644
--- a/modules/backend/assets/less/controls/breadcrumb.less
+++ b/modules/backend/assets/less/controls/breadcrumb.less
@@ -1,22 +1,26 @@
 .control-breadcrumb {
     font-size: 12px;
     text-transform: uppercase;
-    padding: 0 0 20px 0;
+    padding: 15px 20px;
+    margin: -20px -20px 20px -20px;
+    background-color: @color-breadcrumb-background;
 
     ul { 
-        margin: 0; 
         padding: 0; 
     }
+
     li { 
         list-style: none;
         margin: 0;
         padding: 0;
         display: inline-block; 
         color: @color-breadcrumb-text-active;
+        letter-spacing: 0.05em;
+
         a {
             color: @color-breadcrumb-text;
             text-decoration: none;
-            &:hover { color: @color-breadcrumb-text-active; }
+            &:hover { color: @color-breadcrumb-text; }
         }
 
         &:after {
@@ -26,7 +30,7 @@
             margin-left: 6px;
             margin-right: 2px;
             vertical-align: baseline;
-            color: @color-breadcrumb-text;
+            color: @color-breadcrumb-text-active;
             .icon(@angle-right);
         }
 
@@ -34,10 +38,15 @@
             content:'';
         }
     }
+
+    + .content-tabs {
+        margin-top: -20px;
+    }
 }
 
 body.slim-container {
     .control-breadcrumb {
-        padding: 0 20px 20px 20px;
+        margin-left: 0;
+        margin-right: 0;
     }
 }
\ No newline at end of file
diff --git a/modules/backend/assets/less/controls/lists.less b/modules/backend/assets/less/controls/lists.less
index 618791ef3..2b23bce7b 100644
--- a/modules/backend/assets/less/controls/lists.less
+++ b/modules/backend/assets/less/controls/lists.less
@@ -112,6 +112,14 @@
         .list-pagination {
             font-size: 14px;
             text-align: right;
+            padding-top: 20px;
+
+            .loading-indicator {
+                div {
+                    margin-left: 20px;
+                    font-size: 12px;
+                }
+            }
         }
     }
 }
@@ -280,7 +288,7 @@ table.table.data {
 
         tr.safe, tr.special {
             td, th, td a, th a {
-                font-style: italic;
+                color: #98a7a8;
             }
         }
     }
diff --git a/modules/backend/assets/less/controls/pagination.less b/modules/backend/assets/less/controls/pagination.less
index 0642a83e1..63de2b0e6 100644
--- a/modules/backend/assets/less/controls/pagination.less
+++ b/modules/backend/assets/less/controls/pagination.less
@@ -6,17 +6,20 @@
     font-size: 0;
     .page-iteration {
         margin-right: 4px;
-        font-size: 14px;
+        font-size: 12px;
+        color: @color-pagination;
     }
     .page-next, .page-back {
         display: inline-block;
         padding: 10px 15px;
         &:before {
             color: @color-pagination-icon;
-            font-size: 14px;
-            line-height: 14px;
+            font-size: 19px;
+            line-height: 19px;
             display: inline-block;
             vertical-align: baseline;
+            position: relative;
+            top: 2px;
         }
     }
     a.page-next, a.page-back {
@@ -35,6 +38,6 @@
     .page-back {
         padding-right: 6px;
     }
-    .page-next:before { .icon(@chevron-right); }
-    .page-back:before { .icon(@chevron-left); }
+    .page-next:before { .icon(@angle-right); }
+    .page-back:before { .icon(@angle-left); }
 }
\ No newline at end of file
diff --git a/modules/backend/assets/less/controls/tab.less b/modules/backend/assets/less/controls/tab.less
index 2aa2de138..01ee686a9 100644
--- a/modules/backend/assets/less/controls/tab.less
+++ b/modules/backend/assets/less/controls/tab.less
@@ -243,6 +243,59 @@
             }
         }
     }
+
+    &.content-tabs {
+        > ul.nav-tabs { 
+            position: relative;
+
+            &:before {
+                content: ' ';
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                height: 1px;
+                background: @color-tab-content-border;
+            }
+
+            li {
+                margin-right: 0;
+                border-right: 1px solid @color-tab-content-border;
+
+                a {
+                    font-size: 12px;
+                    padding: 17px 20px;
+                    margin: 0;
+                    border: none;
+                    text-transform: uppercase;
+                    background: transparent;
+                }
+
+                &:last-child {
+                    border-right: none;
+                }
+
+                &.active {
+                    background: @color-tab-content-active-bg;
+                    a {
+                        font-weight: 600;
+                    }
+
+                    &:last-child {
+                        border-right: 1px solid @color-tab-content-border;
+                    }
+                }
+            }
+        }
+
+        > .tab-content > .tab-pane {
+            div.toolbar-widget {
+                background: @color-tab-content-active-bg;
+                margin-top: -20px;
+                padding-top: 20px;
+            }
+        }
+    }
 }
 
 &.hide-tabs {
diff --git a/modules/backend/assets/less/core/variables.less b/modules/backend/assets/less/core/variables.less
index edece3049..b61313761 100644
--- a/modules/backend/assets/less/core/variables.less
+++ b/modules/backend/assets/less/core/variables.less
@@ -132,6 +132,8 @@
 @color-tab-active-border:                    #5fb6f5;
 @color-tab-bg:                               #ffffff;
 @color-tab-active-marker:                    #ec8017;
+@color-tab-content-active-bg:                #ffffff;
+@color-tab-content-border:                   #e3e5e7;
 
 @color-ui-border:                            #d7d7d7;
 
@@ -159,8 +161,9 @@
 @color-scoreboard-positive:                  #95b753;
 @color-scoreboard-negative:                  #cc3300;
 
-@color-breadcrumb-text-active:               #999999;
-@color-breadcrumb-text:                      #405261;
+@color-breadcrumb-text-active:               #9da3a7;
+@color-breadcrumb-text:                      #ecf0f1;
+@color-breadcrumb-background:                #2b343d;
 
 @color-custom-input-icon:                    #666666;
 @color-custom-input-border:                  #999999;
@@ -194,8 +197,9 @@
 @color-filelist-cb-border:                   #cccccc;
 
 @color-pagination-icon:                      #666666;
-@color-pagination-hover:                     #222222;
+@color-pagination-hover:                     @link-color;
 @color-pagination-inactive:                  #b6b6b6;
+@color-pagination:                           #98a7a8;
 
 @color-fancy-master-tabs-bg:                 #d35400;
 @color-fancy-master-tabs-active-text:        #ffffff;
diff --git a/modules/backend/widgets/lists/partials/_list_pagination.htm b/modules/backend/widgets/lists/partials/_list_pagination.htm
index c583b8e7d..fa7c2a22d 100644
--- a/modules/backend/widgets/lists/partials/_list_pagination.htm
+++ b/modules/backend/widgets/lists/partials/_list_pagination.htm
@@ -1,6 +1,6 @@
 <div class="loading-indicator-container size-small pull-right">
     <div class="control-pagination">
-        <span class="page-iteration"><?= $pageFrom ?>-<?= $pageTo ?> of <?= $recordTotal ?></span>
+        <span class="page-iteration">Displayed records: <?= $pageFrom ?>-<?= $pageTo ?> of <?= $recordTotal ?></span>
         <?php if ($pageCurrent > 1): ?>
             <a
                 href="javascript:;"
diff --git a/modules/system/controllers/EmailTemplates.php b/modules/system/controllers/EmailTemplates.php
index 650465629..a23e4fb62 100644
--- a/modules/system/controllers/EmailTemplates.php
+++ b/modules/system/controllers/EmailTemplates.php
@@ -47,7 +47,6 @@ class EmailTemplates extends Controller
 
         EmailTemplate::syncAll();
         $this->getClassExtension('Backend.Behaviors.ListController')->index();
-        $this->bodyClass = null;
     }
 
     public function formBeforeSave($model)
diff --git a/modules/system/controllers/emailtemplates/index.htm b/modules/system/controllers/emailtemplates/index.htm
index a114a5d6c..3c655c6b0 100644
--- a/modules/system/controllers/emailtemplates/index.htm
+++ b/modules/system/controllers/emailtemplates/index.htm
@@ -6,21 +6,17 @@
 <?php Block::endPut() ?>
 
 
-<div class="control-tabs secondary" data-control="tab">
+<div class="control-tabs content-tabs" data-control="tab">
     <ul class="nav nav-tabs">
         <li class="active"><a href="#templates"><?= e(trans('system::lang.email_templates.templates')) ?></a></li>
         <li><a href="#templates"><?= e(trans('system::lang.email_templates.layouts')) ?></a></li>
     </ul>
     <div class="tab-content">
         <div class="tab-pane active">
-            <div class="list-preview">
-                <?= $this->listRender('templates') ?>
-            </div>
+            <?= $this->listRender('templates') ?>
         </div>
         <div class="tab-pane">
-            <div class="list-preview">
-                <?= $this->listRender('layouts') ?>
-            </div>
+            <?= $this->listRender('layouts') ?>
         </div>
     </div>
 </div>