chat to ticket layout ref: style attachment

This commit is contained in:
Felix Niklas 2016-01-14 22:40:53 +01:00
parent 1d5a539abd
commit 5e667eb264
3 changed files with 21 additions and 30 deletions

View file

@ -1,7 +1,7 @@
<div class="newTicket newTicket--chatTicket"> <div class="newTicket newTicket--chatTicket">
<div class="box chatHistory"> <div class="box chatHistory">
<div class="page-header"> <div class="page-header">
<h1>Chat History</h1> <h1>Chat</h1>
</div> </div>
<!-- Hallo Martin. Achtung chat-body-holder--standalone klasse is wichtig --> <!-- Hallo Martin. Achtung chat-body-holder--standalone klasse is wichtig -->
<div class="page-content chat-body-holder chat-body-holder--standalone js-scrollHolder"> <div class="page-content chat-body-holder chat-body-holder--standalone js-scrollHolder">
@ -85,32 +85,13 @@
</div> </div>
<div class="controls"><div class="richtext form-control"> <div class="controls"><div class="richtext form-control">
<div contenteditable="true" id="TicketArticle_204825_body" data-name="body" class=""></div><div class="shortcut dropdown"><ul class="dropdown-menu" style="width: 360px; max-height: 200px;"><li><a>-</a></li></ul></div> <div contenteditable="true" id="TicketArticle_204825_body" data-name="body" class=""></div><div class="shortcut dropdown"><ul class="dropdown-menu" style="width: 360px; max-height: 200px;"><li><a>-</a></li></ul></div>
<div class="attachments"></div> <div class="attachments attachments--list">
<div class="article-attachment"> <%- @Icon('paperclip') %>
<div class="attachmentPlaceholder"> <div class="attachments-title">1 Attached File</div>
<span class="attachmentPlaceholder-inputHolder fileUpload"> <div class="attachment">
select attachment.. <div class="attachment-name u-highlight">Chat</div>
<input multiple="multiple" type="file" name="file" style=""> </div>
</span>
</div>
<div class="attachmentUpload hide">
<div class="horizontal">
<div class="u-highlight">
Uploading (<span class="js-percentage">0</span>%) ...
</div>
<div class="attachmentUpload-cancel js-cancel">
<svg class="icon icon-diagonal-cross "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/icons.svg#icon-diagonal-cross"></use></svg></div>Cancel Upload
</div>
</div>
<div class="attachmentUpload-progressBar" style="width: 0%"></div>
</div> </div>
<div class="fit dropArea">
<div class="dropArea-inner">
Drop Files here
</div>
</div></div>
<span class="help-inline"></span>
<span class="help-block"></span>
</div> </div>
</div></fieldset></div> </div></fieldset></div>
<div class="formset-inset"> <div class="formset-inset">

View file

@ -47,7 +47,7 @@
</div> </div>
</div> </div>
<% if !_.isEmpty( @article.attachments ): %> <% if !_.isEmpty( @article.attachments ): %>
<div class="attachments"> <div class="attachments attachments--list">
<%- @Icon('paperclip') %> <%- @Icon('paperclip') %>
<div class="attachments-title"><%- @article.attachments.length %> <%- @T('Attached Files') %></div> <div class="attachments-title"><%- @article.attachments.length %> <%- @T('Attached Files') %></div>
<% for attachment in @article.attachments: %> <% for attachment in @article.attachments: %>

View file

@ -1456,6 +1456,15 @@ input.time.time--12 {
background: none; background: none;
} }
.richtext.form-control .attachments.attachments--list:not(:empty) {
border-top: 1px solid rgba(0,0,0,.04);
white-space: normal;
margin: 0 -12px -14px;
padding: 25px 20px 7px 72px;
position: relative;
line-height: 1;
}
textarea.form-control { textarea.form-control {
height: 118px; height: 118px;
} }
@ -4311,7 +4320,7 @@ footer {
box-shadow: none; box-shadow: none;
} }
.ticket-article-item .attachments:not(:empty) { .attachments.attachments--list:not(:empty) {
border-top: 1px solid rgba(0,0,0,.04); border-top: 1px solid rgba(0,0,0,.04);
white-space: normal; white-space: normal;
margin: 0 -20px; margin: 0 -20px;
@ -4319,7 +4328,7 @@ footer {
position: relative; position: relative;
} }
.ticket-article-item .attachments .attachments-title { .attachments.attachments--list .attachments-title {
font-size: 13px; font-size: 13px;
color: hsl(60,1%,34%); color: hsl(60,1%,34%);
font-weight: bold; font-weight: bold;
@ -4327,7 +4336,7 @@ footer {
margin: 0 0 4px; margin: 0 0 4px;
} }
.attachments .icon-paperclip { .attachments .icon {
position: absolute; position: absolute;
left: 33px; left: 33px;
top: 27px; top: 27px;
@ -5073,6 +5082,7 @@ footer {
.box h1 { .box h1 {
margin-top: 10px; margin-top: 10px;
margin-bottom: 12px;
color: hsl(60,1%,34%); color: hsl(60,1%,34%);
flex: 1; flex: 1;
} }