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

fix delete icon (attachments)

Browse source
This commit is contained in:
Felix Niklas 2015-05-28 16:26:49 +02:00
parent 407231f5d7
commit 31760fac91
5 changed files with 51 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/assets/javascripts/app/views/generic/attachment.jst.eco
View file

@ -1,25 +1,25 @@
<div class="attachments"></div> <div class="attachments"></div>
<div class="article-attachment u-unclickable"> <div class="article-attachment">
<div class="attachmentPlaceholder"> <div class="attachmentPlaceholder">
<span class="attachmentPlaceholder-inputHolder u-highlight u-clickable fileUpload"> <span class="attachmentPlaceholder-inputHolder fileUpload">
<%- @T('select attachment..') %> <%- @T('select attachment..') %>
<input multiple="multiple" type="file" name="file" style=""> <input multiple="multiple" type="file" name="file" style="">
</span> </span>
</div> </div>
<div class="attachmentUpload hide u-clickable"> <div class="attachmentUpload hide">
<div class="horizontal"> <div class="horizontal">
<div class="u-highlight"> <div class="u-highlight">
<%- @T('Uploading') %> (<span class="js-percentage">0</span>%) ... <%- @T('Uploading') %> (<span class="js-percentage">0</span>%) ...
</div> </div>
<div class="attachmentUpload-cancel align-right js-cancel u-clickable"> <div class="attachmentUpload-cancel js-cancel">
<div class="delete icon"></div><%- @T('Cancel Upload') %> <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg></div><%- @T('Cancel Upload') %>
</div> </div>
</div> </div>
<div class="attachmentUpload-progressBar" style="width: 0%"></div> <div class="attachmentUpload-progressBar" style="width: 0%"></div>
</div> </div>
</div> </div>
<div class="fit dropArea"> <div class="fit dropArea">
<div class="dropArea-inner fit centered"> <div class="dropArea-inner">
<%- @T('Drop Files here') %> <%- @T('Drop Files here') %>
</div> </div>
</div> </div>

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

@ -1,7 +1,7 @@
<div class="attachment horizontal"> <div class="attachment">
<div class="attachment-name u-highlight"><%= @fileName %></div> <div class="attachment-name"><%= @fileName %></div>
<div class="attachment-size"><%= @fileSize %></div> <div class="attachment-size"><%= @fileSize %></div>
<div class="attachment-delete js-delete align-right u-clickable" data-id="<%= @store_id %>"> <div class="attachment-delete js-delete" data-id="<%= @store_id %>">
<div class="delete icon"></div><%- @T('Delete File') %> <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg><%- @T('Delete File') %>
</div> </div>
</div> </div>

20
app/assets/javascripts/app/views/layout_ref/communication_reply.jst.eco
View file

@ -14,45 +14,45 @@
<div class="js-textarea articleNewEdit-body" contenteditable="true"><%- @content %></div> <div class="js-textarea articleNewEdit-body" contenteditable="true"><%- @content %></div>
<!-- .textBubble grows with textarea (and expanding clone) --> <!-- .textBubble grows with textarea (and expanding clone) -->
<div class="attachments"></div> <div class="attachments"></div>
<!--
</div> <!-- <div>
<div class="attachment horizontal"> <div class="attachment horizontal">
<div class="attachment-name u-highlight">sega-genesis-box.gif</div> <div class="attachment-name u-highlight">sega-genesis-box.gif</div>
<div class="attachment-size">2.4mb</div> <div class="attachment-size">2.4mb</div>
<div class="attachment-delete js-delete align-right u-clickable"> <div class="attachment-delete js-delete align-right u-clickable">
<div class="delete icon"></div><%- @T('Delete File') %> <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg><%- @T('Delete File') %>
</div> </div>
</div> </div>
<div class="attachment horizontal"> <div class="attachment horizontal">
<div class="attachment-name u-highlight">license-key.txt</div> <div class="attachment-name u-highlight">license-key.txt</div>
<div class="attachment-size">7kb</div> <div class="attachment-size">7kb</div>
<div class="attachment-delete js-delete align-right u-clickable"> <div class="attachment-delete js-delete align-right u-clickable">
<div class="delete icon"></div><%- @T('Delete File') %> <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg><%- @T('Delete File') %>
</div> </div>
</div> </div>
</div> --> </div> -->
<div class="article-attachment u-unclickable"> <div class="article-attachment">
<div class="attachmentPlaceholder"> <div class="attachmentPlaceholder">
<span class="attachmentPlaceholder-hint">Antwort eingeben oder</span> <span class="attachmentPlaceholder-hint">Antwort eingeben oder</span>
<span class="attachmentPlaceholder-inputHolder u-highlight u-clickable"> <span class="attachmentPlaceholder-inputHolder">
Dateien wählen.. Dateien wählen..
<input multiple="multiple" type="file" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"> <input multiple="multiple" type="file" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;">
</span> </span>
</div> </div>
<div class="attachmentUpload hide u-clickable"> <div class="attachmentUpload hide">
<div class="horizontal"> <div class="horizontal">
<div class="u-highlight"> <div class="u-highlight">
<%- @T('Uploading') %> (<span class="js-percentage">0</span>%) ... <%- @T('Uploading') %> (<span class="js-percentage">0</span>%) ...
</div> </div>
<div class="attachmentUpload-cancel align-right js-cancel u-clickable"> <div class="attachmentUpload-cancel js-cancel">
<div class="delete icon"></div><%- @T('Cancel Upload') %> <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg><%- @T('Cancel Upload') %>
</div> </div>
</div> </div>
<div class="attachmentUpload-progressBar" style="width: 0%"></div> <div class="attachmentUpload-progressBar" style="width: 0%"></div>
</div> </div>
</div> </div>
<div class="fit dropArea"> <div class="fit dropArea">
<div class="dropArea-inner fit centered"> <div class="dropArea-inner">
<%- @T('Drop Files here') %> <%- @T('Drop Files here') %>
</div> </div>
</div> </div>

14
app/assets/javascripts/app/views/ticket_zoom/article_new.jst.eco
View file

@ -54,28 +54,28 @@
<div class="js-textarea articleNewEdit-body" contenteditable="true" data-name="body"><%- @article.body %></div> <div class="js-textarea articleNewEdit-body" contenteditable="true" data-name="body"><%- @article.body %></div>
<!-- .textBubble grows with textarea (and expanding clone) --> <!-- .textBubble grows with textarea (and expanding clone) -->
<div class="attachments"></div> <div class="attachments"></div>
<div class="article-attachment u-unclickable u-textTruncate"> <div class="article-attachment">
<div class="attachmentPlaceholder"> <div class="attachmentPlaceholder">
<span class="attachmentPlaceholder-hint"><%- @T('Enter Answer or') %></span> <span class="attachmentPlaceholder-hint"><%- @T('Enter Answer or') %></span>
<span class="attachmentPlaceholder-inputHolder u-highlight u-clickable"> <span class="attachmentPlaceholder-inputHolder">
<%- @T('select attachment..') %> <%- @T('select attachment..') %>
<input multiple="multiple" type="file" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"> <input multiple="multiple" type="file" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;">
</span> </span>
</div> </div>
<div class="attachmentUpload hide u-clickable"> <div class="attachmentUpload hide">
<div class="horizontal"> <div class="horizontal">
<div class="u-highlight"> <div class="u-highlight">
<%- @T('Uploading') %> (<span class="js-percentage">0</span>%) ... <%- @T('Uploading') %> (<span class="js-percentage">0</span>%) ...
</div> </div>
<div class="attachmentUpload-cancel align-right js-cancel u-clickable"> <div class="attachmentUpload-cancel js-cancel">
<div class="delete icon"></div><%- @T('Cancel Upload') %> <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg><%- @T('Cancel Upload') %>
</div> </div>
</div> </div>
<div class="attachmentUpload-progressBar" style="width: 0%"></div> <div class="attachmentUpload-progressBar" style="width: 0%"></div>
</div> </div>
</div> </div>
<div class="fit dropArea"> <div class="dropArea">
<div class="dropArea-inner fit centered"> <div class="dropArea-inner">
<%- @T('Drop Files here') %> <%- @T('Drop Files here') %>
</div> </div>
</div> </div>

26
app/assets/stylesheets/zammad.css.scss
View file

@ -3047,12 +3047,20 @@ footer {
font-size: 20px; font-size: 20px;
margin: 5px; margin: 5px;
display: none; display: none;
@extend .fit;
} }
.is-dropTarget .dropArea { .is-dropTarget .dropArea {
display: block; display: block;
} }
.dropArea-inner {
@extend .fit;
display: flex;
align-items: center;
justify-content: center;
}
.shortcut .dropdown-menu > .active > a { .shortcut .dropdown-menu > .active > a {
background: none; background: none;
} }
@ -3312,6 +3320,7 @@ footer {
padding: 10px 0; padding: 10px 0;
color: #b3b3b3; color: #b3b3b3;
overflow: hidden; overflow: hidden;
@extend .u-unclickable, .u-textTruncate;
} }
.attachments:not(:empty) { .attachments:not(:empty) {
@ -3325,6 +3334,7 @@ footer {
padding: 1px 10px 1px 7px; padding: 1px 10px 1px 7px;
cursor: default; cursor: default;
position: relative; position: relative;
display: flex;
} }
.attachment:hover { .attachment:hover {
@ -3334,6 +3344,7 @@ footer {
.attachment-name { .attachment-name {
margin-right: 5px; margin-right: 5px;
word-break: break-all; word-break: break-all;
@extend .u-highlight;
} }
.attachment-size { .attachment-size {
@ -3347,6 +3358,8 @@ footer {
text-decoration: underline; text-decoration: underline;
display: none; display: none;
white-space: nowrap; white-space: nowrap;
margin-left: auto;
@extend .u-clickable;
} }
.attachment:hover .attachment-delete { .attachment:hover .attachment-delete {
@ -3359,7 +3372,9 @@ footer {
} }
.attachment-delete .icon { .attachment-delete .icon {
opacity: 0.2; fill: hsl(198,18%,72%);
width: 9px;
height: 9px;
margin-right: 5px; margin-right: 5px;
} }
@ -3368,6 +3383,7 @@ footer {
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
vertical-align: bottom; vertical-align: bottom;
@extend .u-highlight, .u-clickable;
} }
.attachmentUpload { .attachmentUpload {
@ -3375,11 +3391,15 @@ footer {
} }
.attachmentUpload-cancel { .attachmentUpload-cancel {
@extend .u-clickable;
margin-left: auto;
text-decoration: underline; text-decoration: underline;
} }
.attachmentUpload .delete.icon { .attachmentUpload .icon {
opacity: 0.33; fill: hsl(198,18%,72%);
width: 9px;
height: 9px;
margin-right: 5px; margin-right: 5px;
} }