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 class CommunicationOverview extends App.ControllerContent
constructor: -> constructor: ->
super super
@render() @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: -> render: ->
@html App.view('layout_ref/communication_overview')() @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() @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: => ArticleView: =>
# show article # 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

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

@ -6,22 +6,59 @@
<h2>Ticket Article</h2> <h2>Ticket Article</h2>
<div class="ticket-article"> <div class="ticketZoom">
<div class="ticket-article-item bubble-grid customer phone" data-id="1" id="article-1"> <div class="scrollPageHeader zIndex-9 horizontal center"
<div class="article-meta-clip top"> data-anchor-target=".ticketZoom .page-header"
<div class="article-content-meta top hide"> data-128-top-bottom="transform: translateY(-64px);"
<div class="article-meta top"> data-64-top-bottom="transform: translateY(0px);"
<div class="horizontal article-meta-row" title="From: Zammad Feedback <feedback@zammad.org>"> >
<div class="article-meta-key u-textTruncate">From</div> <small>Ticket# <span class="ticket-number">1002</span></small>
<div class="article-meta-value flex u-textTruncate">Zammad Feedback &lt;feedback@zammad.org&gt;</div> <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">
<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>
</div> </div>
</div> <div class="article-content zIndex-1 horizontal reverse">
<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>
<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="flex bubble-gap internal-border"> <div class="text-bubble"><div class="bubble-arrow"></div>Welcome!
<div class="text-bubble"><div class="bubble-arrow"></div>Welcome!
Thank you for installing Zammad. Thank you for installing Zammad.
@ -32,88 +69,173 @@ use our forums at <a href="http://forums.zammad.org/" title="http://forums.zamma
Regards, Regards,
<a href="#" class="show_toogle">See more</a><div class="hide preview"> <a href="#" class="show_toogle">See more</a><div class="hide preview">
The <a href="http://Zammad.org" title="http://Zammad.org" target="_blank">Zammad.org</a> Project</div></div> The <a href="http://Zammad.org" title="http://Zammad.org" target="_blank">Zammad.org</a> Project</div></div>
</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>
<div class="article-meta-clip bottom">
<div class="article-content-meta bottom hide"> <div class="ticket-article-item bubble-grid agent note" data-id="23" id="article-23">
<div class="article-meta bottom"> <div class="article-meta-clip top">
<div class="horizontal article-meta-row"> <div class="article-content-meta top hide">
<div class="article-meta-key">Kanal</div> <div class="article-meta top">
<div class="article-meta-value"> <div class="horizontal article-meta-row" title="From: Felix Niklas">
<span class="white phone channel icon"></span> <div class="article-meta-key u-textTruncate">From</div>
phone <div class="article-meta-value flex u-textTruncate">Felix Niklas</div>
</div> </div>
</div> </div>
</div> </div>
<div class="article-actions horizontal stretch"> </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"> <a href="" data-type="internal" class="article-action u-clickable">
<span class="internal action icon"></span>set to internal <span class="internal action icon"></span>set to internal
</a> </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">
<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> </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>
<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="ticket-article-item bubble-grid customer phone" data-id="1" id="article-1">
<div class="flex bubble-gap internal-border"> <div class="article-meta-clip top">
<div class="text-bubble"><div class="bubble-arrow"></div>Lieber HP, <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">
<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>Lieber HP,
anbei findest du die Midi Noten für Maria Maria "I Like it Loud". anbei findest du die Midi Noten für Maria Maria "I Like it Loud".
Wünsche dir einen guten Auftritt in Hamburg. Wünsche dir einen guten Auftritt in Hamburg.
Alles gute, Alles gute,
Oliver Oliver
<div class="attachments"> <div class="attachments">
<div class="paperclip icon"></div> <div class="paperclip icon"></div>
<h3>2 <%- @T('Attached Files') %></h3> <h3>2 <%- @T('Attached Files') %></h3>
<div class="attachment horizontal"> <div class="attachment horizontal">
<div class="attachment-name u-highlight">midinotes_view.jpg</div> <div class="attachment-name u-highlight">midinotes_view.jpg</div>
<div class="attachment-size">35.5kb</div> <div class="attachment-size">35.5kb</div>
</div> </div>
<div class="attachment horizontal"> <div class="attachment horizontal">
<div class="attachment-name u-highlight">lyrics_I_Like_it_Loud.txt</div> <div class="attachment-name u-highlight">lyrics_I_Like_it_Loud.txt</div>
<div class="attachment-size">17.1kb</div> <div class="attachment-size">17.1kb</div>
</div> </div>
</div></div> </div></div>
</div>
</div> </div>
</div> <div class="article-meta-clip bottom">
<div class="article-meta-clip bottom"> <div class="article-content-meta bottom hide">
<div class="article-content-meta bottom hide"> <div class="article-meta bottom">
<div class="article-meta bottom"> <div class="horizontal article-meta-row">
<div class="horizontal article-meta-row"> <div class="article-meta-key">Kanal</div>
<div class="article-meta-key">Kanal</div> <div class="article-meta-value">
<div class="article-meta-value"> <span class="white note channel icon"></span>
<span class="white note channel icon"></span> note
note </div>
</div> </div>
</div> </div>
</div> <div class="article-actions horizontal stretch">
<div class="article-actions horizontal stretch"> <a href="" data-type="internal" class="article-action u-clickable">
<a href="" data-type="internal" class="article-action u-clickable"> <span class="internal action icon"></span>set to internal
<span class="internal action icon"></span>set to internal </a>
</a> </div>
</div> </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>
<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="flex u-positionOrigin horizontal">
<div class="main no-padding flex tabsSidebar-sidebarSpacer tabsSidebar-tabsSpacer"> <div class="main no-padding flex tabsSidebar-sidebarSpacer tabsSidebar-tabsSpacer">
<div class="ticketZoom"> <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="page-header horizontal">
<div class="flex vertical center"> <div class="flex vertical center">
<%- @ticket.customer.avatar(true) %> <%- @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.min.js
//= require ./app/lib/animations/velocity.ui.js //= require ./app/lib/animations/velocity.ui.js
//= require ./app/lib/animations/skrollr.js
//not_used= require_tree ./app/lib/spine //not_used= require_tree ./app/lib/spine
//= require ./app/lib/spine/spine.coffee //= require ./app/lib/spine/spine.coffee

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

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

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

@ -122,6 +122,9 @@ small {
[contenteditable]:focus { [contenteditable]:focus {
border-color: hsl(145,51%,45%); border-color: hsl(145,51%,45%);
} }
[contenteditable]:focus {
text-overflow: clip !important;
}
[contenteditable].invalid { [contenteditable].invalid {
border-color: #F92; border-color: #F92;
} }
@ -530,6 +533,10 @@ textarea,
color: #706f6f; color: #706f6f;
} }
.page-header {
border: none;
}
.page-header-title { .page-header-title {
margin-bottom: 15px; margin-bottom: 15px;
} }
@ -2404,12 +2411,16 @@ footer {
.ticketZoom .page-header { .ticketZoom .page-header {
margin-top: 62px; margin-top: 62px;
margin-bottom: 46px; margin-bottom: 0;
border-bottom: none; padding: 0;
}
.ticketZoom .ticket-article {
margin-top: 55px;
} }
.ticket-title { .ticket-title {
max-width: 90%; max-width: 596px;
} }
.ticket-title h1 { .ticket-title h1 {
@ -2964,13 +2975,16 @@ footer {
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
} }
.tabsSidebarSpace { .tabsSidebar-tabsSpacer {
padding-right: 62px !important; 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; margin-right: 0;
} }
@ -3125,7 +3139,6 @@ footer {
.box .page-header { .box .page-header {
text-align: center; text-align: center;
border-bottom: none;
margin: 0; margin: 0;
padding-bottom: 12px; padding-bottom: 12px;
} }
@ -3653,6 +3666,34 @@ footer {
margin-left: 15px; 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;
}
/* /*
---------------- ----------------