From c294fba2e33148eed571d837143e12e50679e9b3 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Tue, 17 Nov 2015 17:01:52 +0100 Subject: [PATCH] rework nav-tab design --- .../_application_controller_generic.coffee | 1 + .../app/views/channel/chat.jst.eco | 330 +++++++++--------- .../app/views/generic/tabs.jst.eco | 12 +- app/assets/stylesheets/bootstrap.css | 71 +--- app/assets/stylesheets/zammad.scss | 73 ++-- 5 files changed, 205 insertions(+), 282 deletions(-) diff --git a/app/assets/javascripts/app/controllers/_application_controller_generic.coffee b/app/assets/javascripts/app/controllers/_application_controller_generic.coffee index 5e773c4a7..0dc5a13ce 100644 --- a/app/assets/javascripts/app/controllers/_application_controller_generic.coffee +++ b/app/assets/javascripts/app/controllers/_application_controller_generic.coffee @@ -363,6 +363,7 @@ class App.ControllerTabs extends App.Controller super render: -> + @el.addClass 'main--tabs' @html App.view('generic/tabs')( header: @header diff --git a/app/assets/javascripts/app/views/channel/chat.jst.eco b/app/assets/javascripts/app/views/channel/chat.jst.eco index 291f7c75c..32bccbcf2 100644 --- a/app/assets/javascripts/app/views/channel/chat.jst.eco +++ b/app/assets/javascripts/app/views/channel/chat.jst.eco @@ -1,196 +1,188 @@ -
-
-

<%- @T('Chat Widget') %>

+

<%- @T('You can create chat widgets for your webpages to allow visitors to chat with you.') %>

+ +<% if _.isEmpty(@chats): %> +

<%- @T('You have no configured chat\'s right now.') %>

+<% else: %> + + + + + + + + + + +<% for chat in @chats: %> + + + +
<%- @T('Name') %><%- @T('Note') %><%- @T('Max Queue') %><%- @T('Delete') %>
+ + + + + + +
+
+ <%- @Icon('trash') %> <%- @T('Remove') %> +
+
+<% end %> +
+ + + +
+ <%- @Icon('plus-small') %> <%- @T('Add') %> +
+ +
+<% end %> + +

<%- @T('Designer') %>

+ +
+ +
+
+
iPhone 6
+
<%- @T('Fit Width') %>
+
MacBook
+
-
-

<%- @T('You can create chat widgets for your webpages to allow visitors to chat with you.') %>

- <% if _.isEmpty(@chats): %> -

<%- @T('You have no configured chat\'s right now.') %>

-<% else: %> +
+
+
+ +
+
+
+ + +
+
+
+
+ <%- @T('Online') %> + + + + +
+
+ + + <%- @T('John Smith') %> + +
+
+ + <%- @T('Chat with us!') %> +
+
+
+
<%- @T('Today') %> 14:45
+
+ <%- @T('Hello! I need help with your product.') %> +
+
+ <%- @T('Hi! Which one of our products?') %> +
+
+
+ + +
+
+
+
+
+ +
+
+
+
+ +
+
+ +
+ <%- @T('Shown when the chat is closed.') %> +
+
+
+ +
+
+ +
+ <%- @T('Can be in any CSS color format.') %> +
+
+
+ +
+
+ +
+ <%- @T('The default font size is 12px.') %> +
+
+ +
+ - - - - + -<% for chat in @chats: %> - + -
<%- @T('Name') %><%- @T('Note') %><%- @T('Max Queue') %><%- @T('Delete') %><%- @T('Option') %>
+
- - - -
-
- <%- @Icon('trash') %> <%- @T('Remove') %> -
-
-<% end %> -
- - - -
- <%- @Icon('plus-small') %> <%- @T('Add') %> -
-
-<% end %> - -

<%- @T('Designer') %>

-
- -
-
-
iPhone 6
-
<%- @T('Fit Width') %>
-
MacBook
-
-
-
- -
-
- - - -
-
- - -
-
-
-
- <%- @T('Online') %> - - - - -
-
- - - <%- @T('John Smith') %> - -
-
- - <%- @T('Chat with us!') %> -
-
-
-
<%- @T('Today') %> 14:45
-
- <%- @T('Hello! I need help with your product.') %> -
-
- <%- @T('Hi! Which one of our products?') %> -
-
-
- - -
-
-
-
-
+

<%- @T('You need to add the following Java Script code snipped to your web page') %>: -

-
-
-
- -
-
- -
- <%- @T('Shown when the chat is closed.') %> -
-
-
- -
-
- -
- <%- @T('Can be in any CSS color format.') %> -
-
-
- -
-
- -
- <%- @T('The default font size is 12px.') %> -
-
- -
- - - - - - - - - - - -
<%- @T('Option') %>
- -
- -
- -

<%- @T('You need to add the following Java Script code snipped to your web page') %>: - - 

+  
 <script src="<%= @baseurl %>/assets/chat/chat.min.js"></script>
 
 <script>
 $(function() {
-  new ZammadChat({
+new ZammadChat({
 
-  });
+});
 });
 </script>

-  
+
 
-  

-
-
+
\ No newline at end of file diff --git a/app/assets/javascripts/app/views/generic/tabs.jst.eco b/app/assets/javascripts/app/views/generic/tabs.jst.eco index c21af9951..32a353e6b 100644 --- a/app/assets/javascripts/app/views/generic/tabs.jst.eco +++ b/app/assets/javascripts/app/views/generic/tabs.jst.eco @@ -2,6 +2,13 @@

<%- @T( @header ) %> <%- @T( @subHeader ) %>

+ <% if @addTab: %> +
+
+ <%- @Icon('plus') %> +
+
+ <% end %>
@@ -10,11 +17,6 @@
  • <%- @T( tab.name ) %>
    • <% end %> - <% if @addTab: %> -
    - <%- @Icon('plus') %> -
    - <% end %>
    \ No newline at end of file diff --git a/app/assets/stylesheets/bootstrap.css b/app/assets/stylesheets/bootstrap.css index c9b1dd9d2..38b204b96 100644 --- a/app/assets/stylesheets/bootstrap.css +++ b/app/assets/stylesheets/bootstrap.css @@ -2491,7 +2491,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .nav > li > a:hover, .nav > li > a:focus { text-decoration: none; - background-color: #eee; } .nav > li.disabled > a { color: #777; @@ -2518,75 +2517,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .nav > li > a > img { max-width: none; } -.nav-tabs { - border-bottom: 1px solid #ddd; -} -.nav-tabs > li { - float: left; - margin-bottom: -1px; -} -.nav-tabs > li > a { - margin-right: 2px; - line-height: 1.42857143; - border: 1px solid transparent; - border-radius: 4px 4px 0 0; -} -.nav-tabs > li > a:hover { - border-color: #eee #eee #ddd; -} -.nav-tabs > li.active > a, -.nav-tabs > li.active > a:hover, -.nav-tabs > li.active > a:focus { - color: #555; - cursor: default; - background-color: #fff; - border: 1px solid #ddd; - border-bottom-color: transparent; -} -.nav-tabs.nav-justified { - width: 100%; - border-bottom: 0; -} -.nav-tabs.nav-justified > li { - float: none; -} -.nav-tabs.nav-justified > li > a { - margin-bottom: 5px; - text-align: center; -} -.nav-tabs.nav-justified > .dropdown .dropdown-menu { - top: auto; - left: auto; -} -@media (min-width: 768px) { - .nav-tabs.nav-justified > li { - display: table-cell; - width: 1%; - } - .nav-tabs.nav-justified > li > a { - margin-bottom: 0; - } -} -.nav-tabs.nav-justified > li > a { - margin-right: 0; - border-radius: 4px; -} -.nav-tabs.nav-justified > .active > a, -.nav-tabs.nav-justified > .active > a:hover, -.nav-tabs.nav-justified > .active > a:focus { - border: 1px solid #ddd; -} -@media (min-width: 768px) { - .nav-tabs.nav-justified > li > a { - border-bottom: 1px solid #ddd; - border-radius: 4px 4px 0 0; - } - .nav-tabs.nav-justified > .active > a, - .nav-tabs.nav-justified > .active > a:hover, - .nav-tabs.nav-justified > .active > a:focus { - border-bottom-color: #fff; - } -} + .nav-pills > li { float: left; } diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index 54133bae3..3a624f240 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -1831,9 +1831,30 @@ kbd { color: initial; } +.main--tabs .page-header { + background: hsl(200,12%,90%); + padding: 20px; + overflow: hidden; + margin: 0; +} + +.main--tabs .page-content { + padding: 20px; +} + .page-tabs { display: flex; - margin: 28px 0 50px; + margin: -20px -20px 50px; + padding: 0 20px; + background: hsl(200,12%,90%); + border-bottom: 1px solid hsl(200,12%,87%); + + .nav-tabs li.active { + background: hsl(210,17%,98%); + border-bottom-color: hsl(210,17%,98%); + margin-bottom: -1px; + padding-bottom: 1px; + } .btn { margin-left: auto; @@ -3351,9 +3372,10 @@ footer { position: relative; } - .main.no-padding { - padding: 0; - } +.main--tabs, +.main.no-padding { + padding: 0; +} .tooltip { font-family: inherit; @@ -5629,46 +5651,21 @@ footer { } .nav-tabs { - border-bottom: none; + display: flex; + margin-left: 1px; } .nav-tabs li { margin: 0; + border-radius: 3px 3px 0 0; + border: 1px solid hsl(200,12%,87%); + border-bottom-color: transparent; + background: hsl(197,14%,93%); + margin-left: -1px; } -.nav-tabs > li > a, -.nav-tabs > li > a:hover, -.nav-tabs > li > a:focus { - background: white; - border-radius: 0; - border: 1px solid hsl(0,0%,90%); - color: hsl(0,0%,70%); - height: 40px; - margin: 0; -} - -.nav-tabs > li:not(:last-child):not(:only-child) > a { - border-right: none; -} - -.nav-tabs > li:first-child > a { - border-radius: 5px 0 0 5px; -} - -.nav-tabs > li:last-child > a { - border-radius: 0 5px 5px 0; -} - -.nav-tabs > li:only-child > a { - border-radius: 5px; -} - -.nav-tabs > li.active > a, -.nav-tabs > li.active > a:hover, -.nav-tabs > li.active > a:focus { - background: hsl(206,7%,28%); - color: white; - border-color: hsl(0,0%,90%); +.nav-tabs li.active { + position: relative; } .tab-content {