Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add scrollPageHeader

Browse source
This commit is contained in:
Felix Niklas 2014-10-01 13:57:36 +02:00
parent 6c54e1269d
commit d753be5ebb
9 changed files with 2067 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app/assets/javascripts/app/controllers/layout_ref.js.coffee
View file

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

12
app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
View file

@ -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

1773
app/assets/javascripts/app/lib/animations/skrollr.js Normal file
View file

File diff suppressed because it is too large Load diff

122
app/assets/javascripts/app/views/layout_ref/communication_overview.jst.eco
View file

@ -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>

21
app/assets/javascripts/app/views/ticket_zoom.jst.eco
View file

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

2
app/assets/javascripts/app/views/ticket_zoom/title.jst.eco
View file

@ -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>

1
app/assets/javascripts/application.js
View file

@ -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

3
app/assets/stylesheets/layout.css
View file

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

57
app/assets/stylesheets/zzz.css.erb
View file

@ -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;
border-bottom: none;
margin-bottom: 0;
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;
}
/*
----------------