style pre, start with chat widget tabs

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

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'

app/assets/javascripts/app/views/channel/chat.jst.eco

@@ -4,7 +4,54 @@
   </div>
 </div>
 <div class="page-content">
-  <p><%- @T('You can embedd this widget into your web page to allow visitors to directly chat with you.') %></p>
+  <p><%- @T('You can create chat widgets for your webpages to allow visitors to chat with you.') %></p>
+
+  <% if _.isEmpty(@chats): %>
+  <p><%- @T('You have no configured chat\'s right now.') %></p>
+<% else: %>
+  <table class="settings-list">
+    <thead>
+      <tr>
+        <th style="white-space: nowrap;"><%- @T('Name') %></th>
+        <th style="white-space: nowrap;"><%- @T('Note') %></th>
+        <th style="white-space: nowrap;"><%- @T('Max Queue') %></th>
+        <th style="white-space: nowrap;"><%- @T('Delete') %></th>
+      </tr>
+    </thead>
+    <tbody>
+<% for chat in @chats: %>
+      <tr data-id="<%= chat.id %>">
+        <td>
+          <label class="inline-label">
+            <a class="js-edit is-clickable"><%= chat.name %></a>
+          </label>
+        <td>
+          <label class="inline-label">
+            <%= chat.note %>
+          </label>
+        <td>
+          <label class="inline-label">
+            <%= chat.max_queue %>
+          </label>
+        <td>
+          <div class="settings-list-rowControls">
+            <div class="btn btn--text js-remove">
+              <%- @Icon('trash') %> <%- @T('Remove') %>
+            </div>
+          </div>
+<% end %>
+      <tr class="settings-list-controlRow">
+        <td>
+        <td>
+        <td>
+        <td>
+          <div class="btn btn--text js-add">
+            <%- @Icon('plus-small') %> <%- @T('Add') %>
+          </div>
+
+    </tbody>
+  </table>
+<% end %>
   
   <h2><%- @T('Designer') %></h2>
 
@@ -129,11 +176,10 @@
             </label>
       </tbody>
     </table>
-  </div>
 
-  <p><%- @T('You need to add the following Java Script code snipped to your web page') %>:
+    <p><%- @T('You need to add the following Java Script code snipped to your web page') %>:
 
-  <pre>
+    <pre>
 &lt;script src="<%= @baseurl %>/assets/chat/chat.min.js"&gt;&lt;/script&gt;
 
 &lt;script&gt;
@@ -147,55 +193,4 @@ $(function() {
 
   <div class="js-settings"></div>
 
-  <hr>
-
-  <h2><%- @T('Topics') %></h2>
-
-<% if _.isEmpty(@chats): %>
-  <p><%- @T('You have no configured chat\'s right now.') %></p>
-<% else: %>
-  <table class="settings-list">
-    <thead>
-      <tr>
-        <th style="white-space: nowrap;"><%- @T('Name') %></th>
-        <th style="white-space: nowrap;"><%- @T('Note') %></th>
-        <th style="white-space: nowrap;"><%- @T('Max Queue') %></th>
-        <th style="white-space: nowrap;"><%- @T('Delete') %></th>
-      </tr>
-    </thead>
-    <tbody>
-<% for chat in @chats: %>
-      <tr data-id="<%= chat.id %>">
-        <td>
-          <label class="inline-label">
-            <a class="js-edit is-clickable"><%= chat.name %></a>
-          </label>
-        <td>
-          <label class="inline-label">
-            <%= chat.note %>
-          </label>
-        <td>
-          <label class="inline-label">
-            <%= chat.max_queue %>
-          </label>
-        <td>
-          <div class="settings-list-rowControls">
-            <div class="btn btn--text js-remove">
-              <%- @Icon('trash') %> <%- @T('Remove') %>
-            </div>
-          </div>
-<% end %>
-      <tr class="settings-list-controlRow">
-        <td>
-        <td>
-        <td>
-        <td>
-          <div class="btn btn--text js-add">
-            <%- @Icon('plus-small') %> <%- @T('Add') %>
-          </div>
-
-    </tbody>
-  </table>
-<% end %>
-
 </div>

app/assets/javascripts/app/views/generic/tabs.jst.eco

@@ -4,10 +4,17 @@
   </div>
 </div>
 <div class="page-content">
-  <ul class="nav nav-tabs" role="tablist">
-    <% for tab in @tabs: %>
-      <li><a href="#<%= tab.target %>" role="tab" data-toggle="tab"><%- @T( tab.name ) %></a></li>
+  <div class="page-tabs">
+    <ul class="nav nav-tabs" role="tablist">
+      <% for tab in @tabs: %>
+        <li><a href="#<%= tab.target %>" role="tab" data-toggle="tab"><%- @T( tab.name ) %></a></li>
+      <% end %>
+    </ul>
+    <% if @addTab: %>
+    <div class="btn btn--success btn--quad">
+      <%- @Icon('plus') %>
+    </div>
     <% end %>
-  </ul>
+  </div>
   <div class="tab-content"></div>
 </div>

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;

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));
     }
   }
 }