add scrollPageHeader

app/assets/javascripts/app/controllers/layout_ref.js.coffee

@@ -101,10 +101,23 @@ App.Config.set( 'layout_ref/content', Content, 'Routes' )
 
 
 class CommunicationOverview extends App.ControllerContent
+
   constructor: ->
     super
     @render()
 
+    @bindScrollPageHeader()
+
+  bindScrollPageHeader: ->
+    pageHeader = @$('.page-header')
+    scrollHolder = pageHeader.scrollParent()
+    scrollBody = scrollHolder.get(0).scrollHeight - scrollHolder.height()
+
+    if scrollBody > pageHeader.height()
+      skrollr.init
+        forceHeight: false
+        holder: scrollHolder.get(0)
+
   render: ->
     @html App.view('layout_ref/communication_overview')()
 

app/assets/javascripts/app/controllers/ticket_zoom.js.coffee

@@ -376,6 +376,18 @@ class App.TicketZoom extends App.Controller
 
     @autosaveStart()
   
+    @bindScrollPageHeader()
+
+  bindScrollPageHeader: ->
+    pageHeader = @$('.page-header')
+    scrollHolder = pageHeader.scrollParent()
+    scrollBody = scrollHolder.get(0).scrollHeight - scrollHolder.height()
+
+    if scrollBody > pageHeader.height()
+      skrollr.init
+        forceHeight: false
+        holder: scrollHolder.get(0)
+
 
   ArticleView: =>
     # show article

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

@@ -6,6 +6,43 @@
 
   <h2>Ticket Article</h2>
 
+  <div class="ticketZoom">
+    <div class="scrollPageHeader zIndex-9 horizontal center" 
+      data-anchor-target=".ticketZoom .page-header"
+      data-128-top-bottom="transform: translateY(-64px);"
+      data-64-top-bottom="transform: translateY(0px);"
+    >
+      <small>Ticket# <span class="ticket-number">1002</span></small>
+      <div class="ticket-title flex">
+        <h1 contenteditable="true" class="ticket-title-update" data-placeholder="Enter Title...">Welcome to Zammad! We want to entertain you and your whole family!</h1>
+      </div>
+      <div class="pagination-counter">
+        <span class="pagination-item-current">1</span>/<span class="pagination-total-items">36</span>
+      </div>
+      <ul class="pagination">
+        <li>
+          <a class="centered" href="#" data-from="<%= @items_from - @items_per_page %>" data-type="page">
+            <span class="left arrow icon"></span>
+          </a>
+        <li>
+          <a class="centered" href="#" data-from="<%= @items_from + @items_per_page %>" data-type="page">
+            <span class="right arrow icon"></span>
+          </a>
+      </ul>
+    </div>
+    <div class="page-header horizontal">
+      <div class="flex vertical center">
+        <span class="avatar unique user-popover  big" data-id="2" style="background-position: -92.79607555375712px -106.24902447601627px;" data-original-title="" title="">NB</span>
+        <div class="ticket-title">
+          <h1 contenteditable="true" class="ticket-title-update" data-placeholder="Enter Title...">Welcome to Zammad! We want to entertain you and your whole family!</h1>
+        </div>
+        <div class="ticket-meta">
+          <small class="task-subline">Ticket# <span class="ticket-number">10001</span> - erstellte <span class="humanTimeFromNow" data-time="2014-07-11T10:10:32.000Z" data-tooltip="11.07.2014 12:10">11.07.2014</span> 
+          </small>
+        </div>
+      </div>
+    </div>
+
     <div class="ticket-article">
       <div class="ticket-article-item bubble-grid customer phone" data-id="1" id="article-1">
         <div class="article-meta-clip top">
@@ -61,6 +98,90 @@ The <a href="http://Zammad.org" title="http://Zammad.org" target="_blank">Zammad
         <small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2014-07-11T10:10:32.000Z" data-tooltip="2014-07-11 12:10">2014-07-11</time></small>
       </div>
 
+      <div class="ticket-article-item bubble-grid agent note" data-id="23" id="article-23">      
+        <div class="article-meta-clip top">
+          <div class="article-content-meta top hide">
+            <div class="article-meta top">
+              <div class="horizontal article-meta-row" title="From: Felix Niklas">
+                <div class="article-meta-key u-textTruncate">From</div>
+                <div class="article-meta-value flex u-textTruncate">Felix Niklas</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="article-content zIndex-1 horizontal">
+          <span class="avatar user-popover " data-id="3" style="background-image: url(api/v1/users/image/bb100af55234cf61fb6f207636f095f8)" data-placement="right" data-original-title="" title=""></span>
+          <div class="flex bubble-gap internal-border">
+            <div class="text-bubble"><div class="bubble-arrow"></div>Hallp HP, du kannst dich nur einmal einloggen. Was machst du genau?</div>
+          </div>
+        </div>
+        <div class="article-meta-clip bottom">
+          <div class="article-content-meta bottom hide">
+            <div class="article-meta bottom">
+              <div class="horizontal article-meta-row">
+                <div class="article-meta-key">Kanal</div>
+                <div class="article-meta-value">
+                  <span class="white note channel icon"></span>
+                  note
+                </div>
+              </div>
+            </div>
+            <div class="article-actions horizontal stretch">
+              <a href="" data-type="internal" class="article-action u-clickable">
+                <span class="internal action icon"></span>set to internal
+              </a>
+            </div>
+          </div>
+        </div>
+        <small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2014-08-05T13:34:01.000Z" data-tooltip="2014-08-05 15:34">2014-08-05</time></small>
+      </div>
+
+      <div class="ticket-article-item bubble-grid customer phone" data-id="1" id="article-1">
+        <div class="article-meta-clip top">
+          <div class="article-content-meta top hide">
+            <div class="article-meta top">
+              <div class="horizontal article-meta-row" title="From: Zammad Feedback <feedback@zammad.org>">
+                <div class="article-meta-key u-textTruncate">From</div>
+                <div class="article-meta-value flex u-textTruncate">Zammad Feedback &lt;feedback@zammad.org&gt;</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="article-content zIndex-1 horizontal reverse">
+          <span class="avatar unique user-popover " data-id="2" style="background-position: -96.5079185759074px -112.28590086669901px;" data-placement="left" data-original-title="" title="">NB</span>
+          <div class="flex bubble-gap internal-border">
+            <div class="text-bubble"><div class="bubble-arrow"></div>Ich wollte mir die Lyrics von Maria herunterladen, aber ich schaff es einfach nicht, da raufzukommen. Schick mir bitte mein Passwort.
+
+Grüße, Peter</div>
+          </div>
+        </div>
+        <div class="article-meta-clip bottom">
+          <div class="article-content-meta bottom hide">
+            <div class="article-meta bottom">
+              <div class="horizontal article-meta-row">
+                <div class="article-meta-key">Kanal</div>
+                <div class="article-meta-value">
+                  <span class="white phone channel icon"></span>
+                  phone
+                </div>
+              </div>
+            </div>
+            <div class="article-actions horizontal stretch">
+                <a href="" data-type="internal" class="article-action u-clickable">
+                  <span class="internal action icon"></span>set to internal
+                </a>
+                <a href="#" data-type="reply" class="article-action u-clickable">
+                  <span class="reply action icon"></span>reply
+                </a>
+                <a href="#ticket/create/1/1" data-type="split" class="article-action u-clickable">
+                  <span class="split action icon"></span>split
+                </a>
+            </div>
+          </div>
+        </div>
+        <small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2014-07-11T10:10:32.000Z" data-tooltip="2014-07-11 12:10">2014-07-11</time></small>
+      </div>
+
       <div class="ticket-article-item bubble-grid agent note" data-id="23" id="article-23">      
         <div class="article-meta-clip top">
           <div class="article-content-meta top hide">
@@ -116,5 +237,6 @@ Oliver
         <small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2014-08-05T13:34:01.000Z" data-tooltip="2014-08-05 15:34">2014-08-05</time></small>
       </div>
     </div>
+  </div>
 
 </div>

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

@@ -2,6 +2,27 @@
   <div class="flex u-positionOrigin horizontal">
     <div class="main no-padding flex tabsSidebar-sidebarSpacer tabsSidebar-tabsSpacer">
       <div class="ticketZoom">
+        <div class="scrollPageHeader tabsSidebar-sidebarSpacer zIndex-9 horizontal center"
+          data-anchor-target=".ticketZoom .page-header"
+          data-128-top-bottom="transform: translateY(-64px);"
+          data-64-top-bottom="transform: translateY(0px);"
+        >
+          <small><%- @C('ticket_hook') %> <span class="ticket-number"><%- @ticket.number %></span></small>
+          <div class="ticket-title flex"></div>
+          <div class="pagination-counter">
+            <span class="pagination-item-current">1</span>/<span class="pagination-total-items">36</span>
+          </div>
+          <ul class="pagination">
+            <li>
+              <a class="centered" href="#" data-from="<%= @items_from - @items_per_page %>" data-type="page">
+                <span class="left arrow icon"></span>
+              </a>
+            <li>
+              <a class="centered" href="#" data-from="<%= @items_from + @items_per_page %>" data-type="page">
+                <span class="right arrow icon"></span>
+              </a>
+          </ul>
+        </div>
         <div class="page-header horizontal">
           <div class="flex vertical center">
             <%- @ticket.customer.avatar(true) %>

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

@@ -1 +1 @@
-<h1><span contenteditable="true" class="ticket-title-update" data-placeholder="<%= @T('Enter Title...') %>"><%= @P( @ticket.title ) %></span></h1>
+<h1 contenteditable="true" class="ticket-title-update" data-placeholder="<%= @T('Enter Title...') %>"><%= @P( @ticket.title ) %></h1>

app/assets/javascripts/application.js

@@ -11,6 +11,7 @@
 
 //= require ./app/lib/animations/velocity.min.js
 //= require ./app/lib/animations/velocity.ui.js
+//= require ./app/lib/animations/skrollr.js
 
 //not_used= require_tree ./app/lib/spine
 //= require ./app/lib/spine/spine.coffee

app/assets/stylesheets/layout.css

@@ -5,6 +5,9 @@
   display: -webkit-flex;
   display: flex;
 }
+.horizontal.hide, .vertical.hide, .centered.hide {
+  display: none;
+}
 
 .horizontal {
   -webkit-box-orient: horizontal;

app/assets/stylesheets/zzz.css.erb

@@ -122,6 +122,9 @@ small {
 [contenteditable]:focus {
   border-color: hsl(145,51%,45%);
 }
+[contenteditable]:focus {
+  text-overflow: clip !important;
+}
 [contenteditable].invalid {
   border-color: #F92;
 }
@@ -530,6 +533,10 @@ textarea,
   color: #706f6f;
 }
 
+.page-header {
+  border: none;
+}
+
 .page-header-title {
   margin-bottom: 15px;
 }
@@ -2404,12 +2411,16 @@ footer {
 
 .ticketZoom .page-header {
   margin-top: 62px;
-  margin-bottom: 46px;
+  margin-bottom: 0;
-  border-bottom: none;
+  padding: 0;
+}
+
+.ticketZoom .ticket-article {
+  margin-top: 55px;
 }
 
   .ticket-title {
-    max-width: 90%;
+    max-width: 596px;
   }
 
     .ticket-title h1 {
@@ -2964,13 +2975,16 @@ footer {
     border-radius: 0 4px 4px 0;
   }
 
-.tabsSidebarSpace {
+.tabsSidebar-tabsSpacer {
   padding-right: 62px !important;
-  margin-right: 280px;
-  transition: 500ms;
 }
 
-.tabsSidebarSpace.is-closed {
+.tabsSidebar-sidebarSpacer {
+  margin-right: 280px;
+  transition: margin 500ms;
+}
+
+.tabsSidebar-sidebarSpacer.is-closed {
   margin-right: 0;
 }
 
@@ -3125,7 +3139,6 @@ footer {
 
   .box .page-header {
     text-align: center;
-    border-bottom: none;
     margin: 0;
     padding-bottom: 12px;
   }
@@ -3653,6 +3666,34 @@ footer {
   margin-left: 15px;
 }
 
+.scrollPageHeader {
+  background: white;
+  border-bottom: 1px solid hsl(0,0%,78%);
+  height: 64px;
+  left: 260px;
+  padding: 0 22px;
+  position: fixed;
+  right: 0;
+  top: 0;
+  transform: translateY(-64px);
+}
+
+  .scrollPageHeader small {
+    color: hsl(198,19%,72%);
+  }
+
+  .scrollPageHeader .ticket-title {
+    max-width: initial;
+  }
+
+  .scrollPageHeader h1 {
+    font-size: 19px;
+    margin: 0 15px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
 /*
 
   ----------------