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

Improved css for attachment list and attachment list with preview.

Browse source
This commit is contained in:
Martin Edenhofer 2018-02-28 02:04:23 +01:00
parent c4c96d0f2b
commit 56c9d87ac9
3 changed files with 58 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/app/views/generic/attachment_item.jst.eco
View file

@ -1,4 +1,4 @@
<div class="attachment"> <div class="attachment attachment--row">
<div class="attachment-name"><%= @filename %></div> <div class="attachment-name"><%= @filename %></div>
<div class="attachment-size"><%= @humanFileSize(@size) %></div> <div class="attachment-size"><%= @humanFileSize(@size) %></div>
<div class="attachment-delete js-delete" data-id="<%= @id %>"> <div class="attachment-delete js-delete" data-id="<%= @id %>">

3
app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
View file

@ -57,8 +57,9 @@
<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: %>
<% if !@C('ui_ticket_zoom_attachments_preview'): %> <% if !@C('ui_ticket_zoom_attachments_preview'): %>
<div class="attachment"> <div class="attachment attachment--row">
<a class="attachment-name u-highlight" href="<%= App.Config.get('api_path') %>/ticket_attachment/<%= @article.ticket_id %>/<%= @article.id %>/<%= attachment.id %>?disposition=attachment" target="_blank" data-type="attachment"><%= attachment.filename %></a> <a class="attachment-name u-highlight" href="<%= App.Config.get('api_path') %>/ticket_attachment/<%= @article.ticket_id %>/<%= @article.id %>/<%= attachment.id %>?disposition=attachment" target="_blank" data-type="attachment"><%= attachment.filename %></a>
<div class="attachment-size"><%- @humanFileSize(attachment.size) %></div>
</div> </div>
<% else: %> <% else: %>
<a class="attachment attachment--preview" title="<%- attachment.preferences['Content-Type'] %>" target="_blank" href="<%= App.Config.get('api_path') %>/ticket_attachment/<%= @article.ticket_id %>/<%= @article.id %>/<%= attachment.id %>?disposition=attachment" data-type="attachment"<% if @canDownload(attachment.preferences['Content-Type']): %> download<% end %>> <a class="attachment attachment--preview" title="<%- attachment.preferences['Content-Type'] %>" target="_blank" href="<%= App.Config.get('api_path') %>/ticket_attachment/<%= @article.ticket_id %>/<%= @article.id %>/<%= attachment.id %>?disposition=attachment" data-type="attachment"<% if @canDownload(attachment.preferences['Content-Type']): %> download<% end %>>

68
app/assets/stylesheets/zammad.scss
View file

@ -4958,7 +4958,6 @@ footer {
font-size: 13px; font-size: 13px;
color: hsl(60,1%,34%); color: hsl(60,1%,34%);
font-weight: 500; font-weight: 500;
text-transform: uppercase;
padding: 0 7px; padding: 0 7px;
} }
@ -4971,7 +4970,7 @@ footer {
.attachments-block { .attachments-block {
margin-bottom: 12px; margin-bottom: 12px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@ -5324,10 +5323,19 @@ footer {
margin: 6px -12px 30px; margin: 6px -12px 30px;
} }
.attachment { .attachment.attachment--row {
display: block;
font-size: 13px; font-size: 13px;
padding: 1px 10px 1px 7px; padding: 1px 10px 1px 7px;
@include rtl(padding, 1px 7px 1px 10px);
cursor: default;
position: relative;
display: flex;
}
.attachment.attachment--preview {
display: block;
font-size: 13px;
padding: 9px 4px 9px 43px;
position: relative; position: relative;
min-height: 42px; min-height: 42px;
color: inherit; color: inherit;
@ -5339,10 +5347,6 @@ footer {
} }
} }
.attachment--preview {
padding: 9px 4px 9px 43px;
}
.attachment-icon { .attachment-icon {
position: absolute; position: absolute;
left: 0; left: 0;
@ -5361,20 +5365,20 @@ footer {
} }
} }
.attachment-name { .attachment--preview .attachment-name {
min-width: 0; min-width: 0;
display: block; display: block;
@extend .u-highlight; @extend .u-highlight;
word-break: break-all; word-break: break-all;
} }
.attachment-size { .attachment--preview .attachment-size {
white-space: nowrap; white-space: nowrap;
font-size: 11px; font-size: 11px;
color: hsl(200,8%,77%); color: hsl(200,8%,77%);
} }
.attachment-delete { .attachment--preview .attachment-delete {
color: hsl(198,19%,72%); color: hsl(198,19%,72%);
text-decoration: underline; text-decoration: underline;
display: none; display: none;
@ -5384,7 +5388,7 @@ footer {
user-select: none; user-select: none;
} }
.attachment:hover .attachment-delete { .attachment:hover .attachment--preview .attachment-delete {
padding: 0 10px 0 30px; padding: 0 10px 0 30px;
float: right; float: right;
display: block; display: block;
@ -5393,7 +5397,45 @@ footer {
background: linear-gradient(to right, hsla(200,20%,97%,0), hsla(200,20%,97%,1) 20px); background: linear-gradient(to right, hsla(200,20%,97%,0), hsla(200,20%,97%,1) 20px);
} }
.attachment-delete .icon { .attachment--preview .attachment-delete .icon {
fill: hsl(198,18%,72%);
width: 9px;
height: 9px;
@include bidi-style(margin-right, 5px, margin-left, 0);
}
.attachment--row .attachment-name {
@include bidi-style(margin-right, 5px, margin-left, 0);
min-width: 0;
@extend .u-highlight;
}
.attachment--row .attachment-size {
white-space: nowrap;
float: right;
@include bidi-style(margin-right, 10px, margin-left, 0);
}
.attachment--row .attachment-delete {
color: hsl(198,19%,72%);
text-decoration: underline;
display: none;
white-space: nowrap;
@include bidi-style(margin-left, auto, margin-right, 0);
cursor: pointer;
user-select: none;
}
.attachment:hover.attachment--row .attachment-delete {
padding: 0 10px 0 30px;
float: right;
display: block;
position: absolute;
right: 0;
background: linear-gradient(to right, hsla(200,20%,97%,0), hsla(200,20%,97%,1) 20px);
}
.attachment--row .attachment-delete .icon {
fill: hsl(198,18%,72%); fill: hsl(198,18%,72%);
width: 9px; width: 9px;
height: 9px; height: 9px;