ticket article attachments layout_ref

This commit is contained in:
Felix Niklas 2014-09-30 12:12:18 +02:00
parent e811cd173d
commit 8dfc709219
3 changed files with 148 additions and 16 deletions

View file

@ -157,5 +157,6 @@
<path d="M71.5,81 C102.70409,81 128,55.7040899 128,24.5 C128,-6.70408991 102.70409,-32 71.5,-32 C40.2959101,-32 15,-6.70408991 15,24.5 C15,55.7040899 40.2959101,81 71.5,81 Z" id="Oval-1-copy" stroke="#EEEEEE" opacity="0.33" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
<path d="M73,96 C113.316789,96 146,63.3167887 146,23 C146,-17.3167887 113.316789,-50 73,-50 C32.6832113,-50 0,-17.3167887 0,23 C0,63.3167887 32.6832113,96 73,96 Z" id="Oval-1-copy-2" stroke="#EEEEEE" opacity="0.21" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
</g>
<path d="M171.06066,275.954195 L171.202702,275.812154 L171.302365,275.637743 C171.414487,275.441529 171.551135,275.139765 171.678636,274.741324 C172.498746,272.17848 171.915105,269.18732 169.06066,266.332875 C166.243699,263.515914 163.118112,263.085348 160.328491,264.097711 C159.823841,264.280849 159.443803,264.472287 159.205002,264.621537 L159.050513,264.718093 L158.923629,264.848822 L142.423629,281.848822 L142.347668,281.933258 C142.158935,282.159738 141.914201,282.515622 141.675224,282.984613 C140.849092,284.605898 140.703461,286.396954 141.752299,288.09123 C142.076339,288.614679 142.505633,289.100791 143.039723,289.545867 C145.292783,291.423417 147.404521,291.890769 149.098516,291.442358 C149.341124,291.378139 149.532621,291.304275 149.67082,291.235176 L149.888539,291.126317 L150.06066,290.954195 L164.06066,276.954195 L164.5,276.514855 L164.5,275.893535 C164.5,275.259579 164.359026,274.413735 163.919766,273.535214 C163.698156,273.091994 163.414366,272.686581 163.06066,272.332875 C162.478935,271.75115 161.737193,271.469799 160.928583,271.427241 C160.327068,271.395582 159.731987,271.494762 159.15132,271.674969 C158.852797,271.767614 158.615784,271.863127 158.45787,271.937928 L158.229833,272.045946 L158.049687,272.222628 L147.649687,282.422628 L149.750313,284.564442 L160.150313,274.364442 L159.74213,274.649142 C159.780517,274.630958 159.889613,274.586994 160.040517,274.540162 C160.310615,274.456338 160.572677,274.412661 160.770907,274.423094 C160.889274,274.429324 160.929866,274.444721 160.93934,274.454195 C161.054384,274.569239 161.256262,274.58804 161.33934,274.754195 C161.532892,275.141299 161.499999,274.983741 161.499999,275.193535 L161.499999,275.393535 L147.93934,288.832875 L148.32918,288.551894 C148.086278,288.606979 147.74747,288.618798 147.311607,288.522337 C146.619626,288.369193 145.834748,287.96993 144.960277,287.241203 C144.667836,286.997503 144.452815,286.754023 144.303094,286.512166 C143.893415,285.850376 143.952546,285.123142 144.348213,284.346646 C144.475447,284.096949 144.596925,283.9203 144.652332,283.853812 L144.576371,283.938248 L161.076371,266.938248 L160.794998,267.165532 C160.864839,267.121882 161.059218,267.023967 161.351894,266.917754 C163.122972,266.275024 165.021733,266.536588 166.93934,268.454195 C168.959895,270.47475 169.313754,272.288278 168.821364,273.826996 C168.761365,274.014492 168.710513,274.12679 168.697635,274.149327 L168.93934,273.832875 L153.93934,288.832875 L156.06066,290.954195 L171.06066,275.954195 Z" id="paper-clip" fill="#D9D9D9" sketch:type="MSShapeGroup"></path>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 103 KiB

After

Width:  |  Height:  |  Size: 106 KiB

View file

@ -42,6 +42,121 @@
<hr>
<h2>Ticket Article</h2>
<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 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>Welcome!
Thank you for installing Zammad.
You will find updates and patches at <a href="http://zammad.org/" title="http://zammad.org/" target="_blank">http://zammad.org/</a>. Online
documentation is available at <a href="http://guides.zammad.org/" title="http://guides.zammad.org/" target="_blank">http://guides.zammad.org/</a>. You can also
use our forums at <a href="http://forums.zammad.org/" title="http://forums.zammad.org/" target="_blank">http://forums.zammad.org/</a>
Regards,
<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>
</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".
Wünsche dir einen guten Auftritt in Hamburg.
Alles gute,
Oliver
<div class="attachments">
<div class="paperclip icon"></div>
<h3>2 <%- @T('Attached Files') %></h3>
<div class="attachment horizontal">
<div class="attachment-name u-highlight">midinotes_view.jpg</div>
<div class="attachment-size">35.5kb</div>
</div>
<div class="attachment horizontal">
<div class="attachment-name u-highlight">lyrics_I_Like_it_Loud.txt</div>
<div class="attachment-size">17.1kb</div>
</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 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>
<hr>
<h2>Article Reply</h2>
<div class="ticket-edit">
@ -126,10 +241,7 @@
Albrecht &amp; Bertschler GmbH
<span class="recipientList-detail">- 4 Personen</span>
</div>
<div class="white right arrow icon"></div>
<li class="recipientList-entry u-clickable horizontal center js-organisation" data-organisation-id="BENCHMARKhumanresources">
<div class="white right arrow icon"></div> <li class="recipientList-entry u-clickable horizontal center js-organisation" data-organisation-id="BENCHMARKhumanresources">
<div class="recipientList-iconSpacer centered">
<div class="white organisation icon"></div>
</div>
@ -212,10 +324,7 @@
<div class="recipientList-name flex u-textTruncat">
<%- @T('Create new Customer') %>
</div>
</ul>
<ul class="recipientList-organisationMembers hide" id="AlbrechtBertschlerGmbG">
</ul> <ul class="recipientList-organisationMembers hide" id="AlbrechtBertschlerGmbG">
<li class="recipientList-controls u-clickable js-back">
<div class="recipientList-backClickArea centered">
<div class="recipientList-backButton">
@ -259,11 +368,7 @@
Katharina Nussman
<span class="recipientList-detail">- Albrecht &amp; Bertschler GmbG</span>
</div>
</ul>
<ul class="recipientList-organisationMembers hide" id="BENCHMARKhumanresources">
</ul> <ul class="recipientList-organisationMembers hide" id="BENCHMARKhumanresources">
<li class="recipientList-controls u-clickable js-back">
<div class="recipientList-backClickArea centered">
<div class="recipientList-backButton">
@ -330,9 +435,8 @@ Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit no
<li>item 4</li>
</ul>
<hr>
<h2>Ordered list</h2>
<ol>

View file

@ -1114,6 +1114,12 @@ ol.tabs li {
background-position: -141px -216px;
}
.paperclip.icon {
width: 31px;
height: 29px;
background-position: -141px -263px;
}
.stat-all-tickets.icon {
width: 48px;
height: 83px;
@ -2566,6 +2572,27 @@ footer {
box-shadow: none;
}
.ticket-article-item .attachments:not(:empty) {
white-space: normal;
margin: 0 -20px;
padding: 26px 20px 7px 72px;
position: relative;
}
.ticket-article-item .attachments h3 {
color: hsl(60,1%,34%);
letter-spacing: 0;
font-weight: bold;
padding: 0 7px;
margin: 0 0 4px;
}
.attachments .paperclip {
position: absolute;
left: 33px;
top: 27px;
}
.ticket-article-item .task-subline {
margin-top: 12px;
}
@ -2840,7 +2867,7 @@ footer {
.attachment {
font-size: 13px;
padding: 3px 10px 3px 7px;
padding: 1px 10px 1px 7px;
cursor: default;
}