Merge branch 'interface' of github.com:martini/zammad into interface

app/assets/javascripts/app/views/agent_ticket_create.jst.eco

@@ -1,49 +1,51 @@
-<div class="main no-padding flex tabsSidebarSpace">
+<div class="tabsSidebar-holder">
-  <div class="newTicket">
+  <div class="main no-padding flex tabsSidebarSpace">
-    <div class="box">
+    <div class="newTicket">
-      <div class="page-header">
+      <div class="box">
-        <h1><%- @T( @head ) %></h1>
+        <div class="page-header">
+          <h1><%- @T( @head ) %></h1>
+        </div>
+
+        <ul class="horizontal tabs type-tabs">
+
+          <li class="tab u-textTruncate" data-type="phone-in">
+            <div class="gray received-calls channel icon"></div>
+            <%- @T( 'Received Call' ) %>
+          </li>
+
+          <li class="tab u-textTruncate" data-type="phone-out">
+            <div class="gray outbound-calls channel icon"></div>
+            <%- @T( 'Outbound Call' ) %>
+          </li>
+
+         <li class="tab u-textTruncate" data-type="email-out">
+            <div class="gray email channel icon"></div>
+            <%- @T( 'Send E-Mail' ) %>
+          </li>
+        </ul>
+
+        <form role="form" class="ticket-create">
+          <input type="hidden" name="formSenderType"/>
+
+          <div class="ticket-form-top"></div>
+          <div class="article-form-top"></div>
+
+          <div class="formset-inset">
+            <div class="ticket-form-middle horizontal two-columns"></div>
+            <div class="ticket-form-bottom"></div>
+          </div>
+
+          <div class="form-actions horizontal">
+            <a class="subtle-link standalone cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
+            <button type="submit" class="btn btn--success submit align-right"><%- @T( 'Create' ) %></button>
+          </div>
+        </form>
       </div>
-
-      <ul class="horizontal tabs type-tabs">
-
-        <li class="tab u-textTruncate" data-type="phone-in">
-          <div class="gray received-calls channel icon"></div>
-          <%- @T( 'Received Call' ) %>
-        </li>
-
-        <li class="tab u-textTruncate" data-type="phone-out">
-          <div class="gray outbound-calls channel icon"></div>
-          <%- @T( 'Outbound Call' ) %>
-        </li>
-
-       <li class="tab u-textTruncate" data-type="email-out">
-          <div class="gray email channel icon"></div>
-          <%- @T( 'Send E-Mail' ) %>
-        </li>
-      </ul>
-
-      <form role="form" class="ticket-create">
-        <input type="hidden" name="formSenderType"/>
-
-        <div class="ticket-form-top"></div>
-        <div class="article-form-top"></div>
-
-        <div class="formset-inset">
-          <div class="ticket-form-middle horizontal two-columns"></div>
-          <div class="ticket-form-bottom"></div>
-        </div>
-
-        <div class="form-actions horizontal">
-          <a class="subtle-link standalone cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
-          <button type="submit" class="btn btn--success submit align-right"><%- @T( 'Create' ) %></button>
-        </div>
-      </form>
     </div>
   </div>
-</div>
 
-<div class="tabsSidebar vertical"></div>
+  <div class="tabsSidebar vertical"></div>
+</div>
 <!--
 <div class="sidebar">
   <div class="widgets">

app/assets/javascripts/app/views/layout_ref/content_sidebar_tabs_right.jst.eco

@@ -1,17 +1,19 @@
-<div class="main flex tabsSidebarSpace">
+<div class="tabsSidebar-holder flex horizontal">
-  <h1>content</h1>
+  <div class="main flex tabsSidebarSpace">
+    <h1>content</h1>
 
-  <p>
+    <p>
-Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
+  Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
-  </p>
+    </p>
 
-  <p>
+    <p>
-Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
+  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
-  </p>
+    </p>
 
-  <p>
+    <p>
-Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
+  Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
-  </p>
+    </p>
+  </div>
+
+  <div class="tabsSidebar vertical"></div>
 </div>
-
-<div class="tabsSidebar vertical"></div>

app/assets/javascripts/app/views/ticket_zoom.jst.eco

@@ -1,4 +1,4 @@
-<div class="flex vertical">
+<div class="tabsSidebar-holder flex vertical">
   <div class="flex u-positionOrigin horizontal">
     <div class="main no-padding flex tabsSidebarSpace">
       <div class="ticketZoom">

app/assets/javascripts/app/views/user.jst.eco

@@ -12,7 +12,7 @@
 </div>
 
 <div class="userSearch horizontal center">
-  <input type="text" class="js-search flex" name="search" placeholder="<%- @T('Search for users') %>">
+  <input type="text" class="js-search form-control flex" name="search" placeholder="<%- @T('Search for users') %>">
   <div class="userSearch-label"><%- @T('Filter') %>:</div>
   <div class="tabs tabs-wide horizontal">
     <% for role in @roles: %>

app/assets/javascripts/app/views/user_zoom.jst.eco

@@ -1,4 +1,4 @@
-<div class="flex vertical">
+<div class="tabsSidebar-holder flex vertical">
   <div class="flex u-positionOrigin horizontal">
     <div class="main flex tabsSidebarSpace">
       <div class="userZoom">

app/assets/stylesheets/zzz.css.erb

@@ -441,15 +441,11 @@ textarea,
   outline: none;
 }
 
-  input[type=text]:focus,
+  .form-control:focus {
-  input[type=password]:focus,
-  input[type=email]:focus,
-  textarea:focus {
     border-color: hsl(200,71%,59%);
     box-shadow: 0 0 0 3px hsl(201,62%,90%);
   }
 
-  .form-control:focus,
   .tokenfield.focus {
     box-shadow: none;
     border-color: hsl(0,0%,90%);
@@ -1619,7 +1615,6 @@ footer {
     right: 0;
     top: 0;
     width: 50px;
-    padding-left: 12px;
     height: 100%;
     visibility: hidden;
   }
@@ -2380,6 +2375,7 @@ footer {
   }
 
     .ticket-title h1 {
+      max-width: 350px;
       margin-top: 15px;
       margin-bottom: 8px;
       text-align: center;
@@ -2844,6 +2840,11 @@ footer {
   margin-right: 0;
 }
 
+.tabsSidebar-holder {
+  overflow: hidden;
+  position: relative;
+}
+
 .tabsSidebar .sidebar {
   width: 280px;
   border-left: 1px solid #e6e6e6;
@@ -3439,19 +3440,19 @@ footer {
 }
 
 [contenteditable] {
+  margin: -1px;
   display: block;
   white-space: pre-wrap;
   outline-style: none;
-}
+  border: 1px solid transparent;
-[contenteditable]:hover, [contenteditable]:focus {
-  margin: -1px;
-  border: 1px dotted hsl(145,51%,45%);
   border-radius: 3px;
 }
+[contenteditable]:hover,
+[contenteditable]:focus {
+  border-color: hsl(145,51%,45%);
+}
 [contenteditable].invalid {
-  margin: -1px;
+  border-color: #F92;
-  border: 1px dotted #F92;
-  border-radius: 3px;
 }
 [contenteditable] > .placeholder {
   color: #999;
@@ -3473,6 +3474,49 @@ footer {
   margin: 0;
 }
 
+.nav-tabs {
+  border-bottom: none; 
+}
+
+.nav-tabs li {
+  margin: 0;
+}
+
+.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%);
+}
+
 /*
 
   ----------------