From 4fe30e49187114d1d7ce3a2f416cb6d1acb2c976 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Tue, 17 Nov 2015 15:52:50 +0100 Subject: [PATCH] style pre, start with chat widget tabs --- .../_application_controller_generic.coffee | 5 +- .../app/controllers/_channel/chat.coffee | 27 ++++- .../app/views/channel/chat.jst.eco | 105 +++++++++--------- .../app/views/generic/tabs.jst.eco | 15 ++- app/assets/stylesheets/bootstrap.css | 25 ----- app/assets/stylesheets/zammad.scss | 38 ++++++- 6 files changed, 123 insertions(+), 92 deletions(-) diff --git a/app/assets/javascripts/app/controllers/_application_controller_generic.coffee b/app/assets/javascripts/app/controllers/_application_controller_generic.coffee index 26aec5a88..5e773c4a7 100644 --- a/app/assets/javascripts/app/controllers/_application_controller_generic.coffee +++ b/app/assets/javascripts/app/controllers/_application_controller_generic.coffee @@ -368,6 +368,7 @@ class App.ControllerTabs extends App.Controller header: @header subHeader: @subHeader tabs: @tabs + addTab: @addTab ) # insert content @@ -381,8 +382,8 @@ class App.ControllerTabs extends App.Controller new tab.controller( params ) # check if tabs need to be hidden - if @tabs.length <= 1 - @el.find('.nav-tabs').addClass('hide') + # if @tabs.length <= 1 + # @el.find('.page-tabs').addClass('hide') # set last or first tab to active @lastActiveTab = @Config.get('lastTab') diff --git a/app/assets/javascripts/app/controllers/_channel/chat.coffee b/app/assets/javascripts/app/controllers/_channel/chat.coffee index 0fa62b067..5f0a9c59a 100644 --- a/app/assets/javascripts/app/controllers/_channel/chat.coffee +++ b/app/assets/javascripts/app/controllers/_channel/chat.coffee @@ -1,4 +1,29 @@ -class App.ChannelChat extends App.Controller +class App.ChannelChat extends App.ControllerTabs + header: 'Chat Widget' + addTab: true + + constructor: -> + super + + @title @header, true + + @tabs = [ + { + name: 'company.com/sales', + target: 'company-com-sales', + controller: App.ChannelChatDesigner, + }, + { + name: 'company.com', + target: 'company-com', + controller: App.ChannelChatDesigner, + } + ] + + @render() + + +class App.ChannelChatDesigner extends App.Controller events: 'click .js-add': 'new' 'click .js-edit': 'edit' diff --git a/app/assets/javascripts/app/views/channel/chat.jst.eco b/app/assets/javascripts/app/views/channel/chat.jst.eco index c54cd54fd..291f7c75c 100644 --- a/app/assets/javascripts/app/views/channel/chat.jst.eco +++ b/app/assets/javascripts/app/views/channel/chat.jst.eco @@ -4,7 +4,54 @@
-

<%- @T('You can embedd this widget into your web page to allow visitors to directly chat with you.') %>

+

<%- @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') %>

@@ -129,11 +176,10 @@ -
-

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

<%- @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>
@@ -147,55 +193,4 @@ $(function() {
 
   

 
-  

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

-
-<% 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 %>
-
 
diff --git a/app/assets/javascripts/app/views/generic/tabs.jst.eco b/app/assets/javascripts/app/views/generic/tabs.jst.eco
index 089c06bb0..c21af9951 100644
--- a/app/assets/javascripts/app/views/generic/tabs.jst.eco
+++ b/app/assets/javascripts/app/views/generic/tabs.jst.eco
@@ -4,10 +4,17 @@
   
 
 

-  
+  

   

 
\ No newline at end of file
diff --git a/app/assets/stylesheets/bootstrap.css b/app/assets/stylesheets/bootstrap.css
index 846daf1d7..c9b1dd9d2 100644
--- a/app/assets/stylesheets/bootstrap.css
+++ b/app/assets/stylesheets/bootstrap.css
@@ -706,31 +706,6 @@ kbd kbd {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
-pre {
-  display: block;
-  padding: 9.5px;
-  margin: 0 0 10px;
-  font-size: 13px;
-  line-height: 1.42857143;
-  color: #333;
-  word-break: break-all;
-  word-wrap: break-word;
-  background-color: #f5f5f5;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
-pre code {
-  padding: 0;
-  font-size: inherit;
-  color: inherit;
-  white-space: pre-wrap;
-  background-color: transparent;
-  border-radius: 0;
-}
-.pre-scrollable {
-  max-height: 340px;
-  overflow-y: scroll;
-}
 .container {
   padding-right: 15px;
   padding-left: 15px;
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index d08f03b64..54133bae3 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -246,6 +246,29 @@ blockquote {
   z-index: 1;
 }
 
+pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 20px;
+  font-size: 13px;
+  line-height: 1.42857143;
+  color: #333;
+  word-break: break-all;
+  word-wrap: break-word;
+  background: hsl(197,20%,93%);
+  border: 1px solid hsl(198,18%,86%);
+  border-radius: 3px;
+  box-shadow: 0 1px 3px rgba(0,0,0,.05) inset;
+}
+pre code {
+  padding: 0;
+  font-size: inherit;
+  color: inherit;
+  white-space: pre-wrap;
+  background-color: transparent;
+  border-radius: 0;
+}
+
 .textarea::placeholder,
 .form-control::placeholder,
 .token-input::placeholder {
@@ -1808,6 +1831,15 @@ kbd {
   color: initial;
 }
 
+.page-tabs {
+  display: flex;
+  margin: 28px 0 50px;
+  
+  .btn {
+    margin-left: auto;
+  }
+}
+
 .page-body--two-column {
   display: flex;
 }
@@ -5639,10 +5671,6 @@ footer {
   border-color: hsl(0,0%,90%);
 }
 
-.main .nav-tabs:first-child {
-  margin: 28px 0 50px;
-}
-
 .tab-content {
   margin-top: 20px;
 }
@@ -7438,7 +7466,7 @@ output {
     padding-top: 11px;
     
     &.is-selected {
-      background: linear-gradient(hsla(199,30%,40%,.08), hsla(199,30%,40%,.03));
+      background: linear-gradient(hsla(202,50%,20%,0.1), hsla(202,50%,20%,.03));
     }
   }
 }