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

Implemented attachment preview in ticket zoom and optional an dedicated sidebar to show all attachments if whole ticket. Thanks to @mrflix.

Browse source
This commit is contained in:
Martin Edenhofer 2018-02-20 07:47:32 +01:00
parent fa53eeb33a
commit b0597ad04d
20 changed files with 501 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/assets/javascripts/app/controllers/ticket_zoom/article_view.coffee
View file

@ -82,6 +82,7 @@ class ArticleViewItem extends App.ObserverController
'click .textBubble a': 'stopPropagation'
'click .js-toggleFold': 'toggleFold'
'click .richtext-content img': 'imageView'
'click .attachments img': 'imageView'
constructor: ->
super
@ -178,9 +179,9 @@ class ArticleViewItem extends App.ObserverController
)
return
@html App.view('ticket_zoom/article_view')(
ticket: @ticket
article: article
isCustomer: @permissionCheck('ticket.customer')
ticket: @ticket
article: article
isCustomer: @permissionCheck('ticket.customer')
)
new App.WidgetAvatar(

34
app/assets/javascripts/app/controllers/ticket_zoom/sidebar_article_attachments.coffee Normal file
View file

@ -0,0 +1,34 @@
class SidebarArticleAttachments extends App.Controller
sidebarItem: =>
return if !@Config.get('ui_ticket_zoom_sidebar_article_attachments')
@item = {
name: 'attachment'
badgeIcon: 'paperclip'
sidebarHead: 'Attachments'
sidebarCallback: @showObjects
sidebarActions: []
}
@item
showObjects: (el) =>
@el = el
if !@ticket || _.isEmpty(@ticket.article_ids)
@el.html("<div>#{App.i18n.translateInline('none')}</div>")
return
html = ''
for ticket_article_id, index in @ticket.article_ids
article = App.TicketArticle.find(ticket_article_id)
if article && article.attachments && !_.isEmpty(article.attachments)
html = App.view('ticket_zoom/sidebar_article_attachment')(article: article) + html
@el.html(html)
@el.delegate('.js-attachments img', 'click', (e) =>
@imageView(e)
)
imageView: (e) ->
e.preventDefault()
e.stopPropagation()
new App.TicketZoomArticleImageView(image: $(e.target).get(0).outerHTML)
App.Config.set('900-ArticleAttachments', SidebarArticleAttachments, 'TicketZoomSidebar')

37
app/assets/javascripts/app/index.coffee
View file

@ -136,6 +136,43 @@ class App extends Spine.Controller
return marked(string)
App.i18n.translateContent(string)
ContentTypeIcon: (contentType) ->
icons =
# image
'image/jpeg': 'file-image'
'image/jpg': 'file-image'
'image/png': 'file-image'
'image/svg': 'file-image'
# documents
'application/pdf': 'file-pdf'
'application/msword': 'file-word' # .doc, .dot
'application/vnd.ms-word': 'file-word'
'application/vnd.oasis.opendocument.text': 'file-word'
'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'file-word' # .docx
'application/vnd.openxmlformats-officedocument.wordprocessingml.template': 'file-word' # .dotx
'application/vnd.ms-excel': 'file-excel' # .xls
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'file-excel' # .xlsx
'application/vnd.oasis.opendocument.spreadsheet': 'file-excel'
'application/vnd.ms-powerpoint': 'file-powerpoint' # .ppt
'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'file-powerpoint' # .pptx
'application/vnd.oasis.opendocument.presentation': 'file-powerpoint'
'text/plain': 'file-text'
'text/html': 'file-code'
'application/json': 'file-code'
'message/rfc822': 'file-email'
# code
'application/json': 'file-code'
# text
'text/plain': 'file-text'
'text/rtf': 'file-text'
# archives
'application/gzip': 'file-archive'
'application/zip': 'file-archive'
return icons[contentType]
canDownload: (contentType) ->
contentType != 'text/html'
@viewPrint: (object, attributeName, attributes, table) ->
if !attributes
attributes = {}

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

@ -56,10 +56,27 @@
<%- @Icon('paperclip') %>
<div class="attachments-title"><%- @article.attachments.length %> <%- @T('Attached Files') %></div>
<% for attachment in @article.attachments: %>
<div class="attachment">
<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>
<% if !@C('ui_ticket_zoom_attachments_preview'): %>
<div class="attachment">
<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>
<% 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 %>>
<div class="attachment-icon">
<% if attachment.preferences && attachment.preferences['Content-Type'] && @ContentTypeIcon(attachment.preferences['Content-Type']): %>
<% if attachment.preferences['Content-Type'].match(/image\/(png|jpg|jpeg)/i): %>
<img src="<%= App.Config.get('api_path') %>/ticket_attachment/<%= @article.ticket_id %>/<%= @article.id %>/<%= attachment.id %>">
<% else: %>
<%- @Icon( @ContentTypeIcon(attachment.preferences['Content-Type']) ) %>
<% end %>
<% else: %>
<%- @Icon('file-unknown') %>
<% end %>
</div>
<span class="attachment-name u-highlight"><%= attachment.filename %></span>
<div class="attachment-size"><%- @humanFileSize(attachment.size) %></div>
</a>
<% end %>
<% end %>
</div>
<% end %>

20
app/assets/javascripts/app/views/ticket_zoom/sidebar_article_attachment.jst.eco Normal file
View file

@ -0,0 +1,20 @@
<div class="attachments-block js-attachments">
<div class="attachments-block-headline"><%- @humanTime(@article.created_at) %></div>
<% for attachment in @article.attachments: %>
<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 %>>
<div class="attachment-icon">
<% if attachment.preferences && attachment.preferences['Content-Type'] && @ContentTypeIcon(attachment.preferences['Content-Type']): %>
<% if attachment.preferences['Content-Type'].match(/image\/(png|jpg|jpeg)/i): %>
<img src="<%= App.Config.get('api_path') %>/ticket_attachment/<%= @article.ticket_id %>/<%= @article.id %>/<%= attachment.id %>">
<% else: %>
<%- @Icon( @ContentTypeIcon(attachment.preferences['Content-Type']) ) %>
<% end %>
<% else: %>
<%- @Icon('file-unknown') %>
<% end %>
</div>
<span class="attachment-name u-highlight"><%= attachment.filename %></span>
<div class="attachment-size"><%- @humanFileSize(attachment.size) %></div>
</a>
<% end %>
</div>

8
app/assets/stylesheets/svg-dimensions.css
View file

@ -22,6 +22,14 @@
.icon-eyedropper { width: 17px; height: 17px; }
.icon-facebook-button { width: 29px; height: 24px; }
.icon-facebook { width: 17px; height: 17px; }
.icon-file-archive { width: 24px; height: 31px; }
.icon-file-code { width: 24px; height: 31px; }
.icon-file-email { width: 24px; height: 31px; }
.icon-file-excel { width: 24px; height: 31px; }
.icon-file-pdf { width: 24px; height: 31px; }
.icon-file-powerpoint { width: 24px; height: 31px; }
.icon-file-unknown { width: 24px; height: 31px; }
.icon-file-word { width: 24px; height: 31px; }
.icon-form { width: 17px; height: 17px; }
.icon-forward { width: 16px; height: 17px; }
.icon-full-logo { width: 175px; height: 50px; }

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

@ -4957,17 +4957,34 @@ footer {
.attachments.attachments--list .attachments-title {
font-size: 13px;
color: hsl(60,1%,34%);
font-weight: bold;
font-weight: 500;
text-transform: uppercase;
padding: 0 7px;
margin: 0 0 4px;
}
.attachments .icon-paperclip {
position: absolute;
left: 33px;
top: 27px;
fill: hsl(240,1%,84%);
}
.attachments-block {
margin-bottom: 12px;
&:last-child {
margin-bottom: 0;
}
&-headline {
font-size: 13px;
color: hsl(60,1%,34%);
font-weight: 500;
text-transform: uppercase;
margin: 0 7px;
}
}
.ticket-article-item .task-subline {
margin-top: 12px;
}
@ -5281,11 +5298,7 @@ footer {
border: none;
outline: none;
resize: none;
}
.articleNewEdit-body {
height: auto;
min-height: 38px;
}
.article-new .bubble-arrow:after {
@ -5312,28 +5325,53 @@ footer {
}
.attachment {
display: block;
font-size: 13px;
padding: 1px 10px 1px 7px;
@include rtl(padding, 1px 7px 1px 10px);
cursor: default;
position: relative;
display: flex;
min-height: 42px;
color: inherit;
align-items: center;
border-bottom: 1px solid hsl(0,0%,96%);
&:last-child {
border-bottom: none;
}
}
.attachment:hover {
background: hsl(200,20%,97%);
}
.attachment--preview {
padding: 9px 4px 9px 43px;
}
.attachment-icon {
position: absolute;
left: 0;
top: 9px;
width: 38px;
text-align: center;
svg {
vertical-align: bottom;
}
img {
width: 30px;
height: 30px;
object-fit: cover;
}
}
.attachment-name {
@include bidi-style(margin-right, 5px, margin-left, 0);
min-width: 0;
display: block;
@extend .u-highlight;
word-break: break-all;
}
.attachment-size {
white-space: nowrap;
float: right;
@include bidi-style(margin-right, 10px, margin-left, 0);
font-size: 11px;
color: hsl(200,8%,77%);
}
.attachment-delete {

BIN
contrib/icon-sprite.sketch
View file

Binary file not shown.

61
db/migrate/20180220000001_setting_attachment_preview.rb Normal file
View file

@ -0,0 +1,61 @@
class SettingAttachmentPreview < ActiveRecord::Migration[5.1]
def up
# return if it's a new setup
return if !Setting.find_by(name: 'system_init_done')
Setting.create_if_not_exists(
title: 'Sidebar Attachments',
name: 'ui_ticket_zoom_attachments_preview',
area: 'UI::TicketZoom::Preview',
description: 'Enables preview of attachments.',
options: {
form: [
{
display: '',
null: true,
name: 'ui_ticket_zoom_attachments_preview',
tag: 'boolean',
translate: true,
options: {
true => 'yes',
false => 'no',
},
},
],
},
state: false,
preferences: {
prio: 400,
permission: ['admin.ui'],
},
frontend: true
)
Setting.create_if_not_exists(
title: 'Sidebar Attachments',
name: 'ui_ticket_zoom_sidebar_article_attachments',
area: 'UI::TicketZoom::Preview',
description: 'Enables a sidebar to show an overview of all attachments.',
options: {
form: [
{
display: '',
null: true,
name: 'ui_ticket_zoom_sidebar_article_attachments',
tag: 'boolean',
translate: true,
options: {
true => 'yes',
false => 'no',
},
},
],
},
state: false,
preferences: {
prio: 500,
permission: ['admin.ui'],
},
frontend: true
)
end
end

55
db/seeds/settings.rb
View file

@ -698,6 +698,61 @@ Setting.create_if_not_exists(
},
frontend: true
)
Setting.create_if_not_exists(
title: 'Sidebar Attachments',
name: 'ui_ticket_zoom_attachments_preview',
area: 'UI::TicketZoom::Preview',
description: 'Enables preview of attachments.',
options: {
form: [
{
display: '',
null: true,
name: 'ui_ticket_zoom_attachments_preview',
tag: 'boolean',
translate: true,
options: {
true => 'yes',
false => 'no',
},
},
],
},
state: false,
preferences: {
prio: 400,
permission: ['admin.ui'],
},
frontend: true
)
Setting.create_if_not_exists(
title: 'Sidebar Attachments',
name: 'ui_ticket_zoom_sidebar_article_attachments',
area: 'UI::TicketZoom::Preview',
description: 'Enables a sidebar to show an overview of all attachments.',
options: {
form: [
{
display: '',
null: true,
name: 'ui_ticket_zoom_sidebar_article_attachments',
tag: 'boolean',
translate: true,
options: {
true => 'yes',
false => 'no',
},
},
],
},
state: false,
preferences: {
prio: 500,
permission: ['admin.ui'],
},
frontend: true
)
Setting.create_if_not_exists(
title: 'Set notes for ticket create types.',
name: 'ui_ticket_create_notes',

77
public/assets/images/icons.svg
View file

@ -1,4 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-arrow-down" viewBox="0 0 13 7">
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs>
<path d="M10 0v1h2V0h12v31H0V0h10z" id="a"/>
</defs><symbol id="icon-arrow-down" viewBox="0 0 13 7">
<title>
arrow-down
</title>
@ -137,6 +139,77 @@
facebook
</title>
<path d="M1.805 1C1.302 1 1 1.403 1 1.805v13.39c0 .503.403.805.805.805h7.25v-5.84H7.04V7.847h2.014V6.134c0-1.913 1.208-3.02 2.92-3.02.805 0 1.51.1 1.71.1V5.23h-1.207c-.907 0-1.108.403-1.108 1.108v1.41h2.214l-.302 2.314H11.37V16h3.825c.503 0 .805-.403.805-.806V1.704c0-.3-.403-.704-.805-.704H1.805z" fill-rule="evenodd"/>
</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">
<title>
file-archive
</title>
<g fill="none" fill-rule="evenodd">
<mask id="b" fill="#fff">
<use xlink:href="#a"/>
</mask>
<path d="M2 1c-.552 0-1 .448-1 1v27c0 .552.448 1 1 1h20c.552 0 1-.448 1-1V2c0-.552-.448-1-1-1H2zm0-1h20c1.105 0 2 .895 2 2v27c0 1.105-.895 2-2 2H2c-1.105 0-2-.895-2-2V2C0 .895.895 0 2 0z" mask="url(#b)" fill="#DFE5E8" fill-rule="nonzero"/>
<path d="M12 0h2v1h-2V0zm-2 1h2v1h-2V1zm2 1h2v1h-2V2zm-2 1h2v1h-2V3zm2 1h2v1h-2V4zm-2 1h2v1h-2V5zm2 1h2v1h-2V6zm-2 1h2v1h-2V7zm2 1h2v1h-2V8zm-2 1h2v1h-2V9zm2 1h2v1h-2v-1zm-2 1h2v1h-2v-1zm2 1h2v1h-2v-1zm-2 1h2v1h-2v-1zm2 1h2v1h-2v-1zM10 15h4v3c0 .552-.448 1-1 1h-2c-.552 0-1-.448-1-1v-3zm1 2v1h2v-1h-2z" fill="#DFE5E8"/>
</g>
</symbol><symbol id="icon-file-code" viewBox="0 0 24 31">
<title>
file-code
</title>
<g fill="#DFE5E8" fill-rule="evenodd">
<path d="M2 1c-.552 0-1 .448-1 1v27c0 .552.448 1 1 1h20c.552 0 1-.448 1-1V2c0-.552-.448-1-1-1H2zm0-1h20c1.105 0 2 .895 2 2v27c0 1.105-.895 2-2 2H2c-1.105 0-2-.895-2-2V2C0 .895.895 0 2 0z" fill-rule="nonzero"/>
<path d="M9.986 9v2c-.71 0-1 .444-1 1v2c0 1.497-.235 1.723-1.373 1.918.988.182 1.373.698 1.373 2.082v2c0 .556.303 1 1 1v2c-2.67 0-3-1.43-3-3v-2c0-.856-.328-1-.986-1v-2c.658 0 .986-.144.986-1v-2c0-1.583.33-3 3-3zM14 9v2c.71 0 1 .444 1 1v2c0 1.497.234 1.723 1.373 1.918C15.385 16.1 15 16.616 15 18v2c0 .556-.303 1-1 1v2c2.67 0 3-1.43 3-3v-2c0-.856.327-1 .986-1v-2c-.66 0-.986-.144-.986-1v-2c0-1.583-.33-3-3-3z"/>
</g>
</symbol><symbol id="icon-file-email" viewBox="0 0 24 31">
<title>
file-email
</title>
<g fill="#DFE5E8" fill-rule="evenodd">
<path d="M2 1c-.552 0-1 .448-1 1v27c0 .552.448 1 1 1h20c.552 0 1-.448 1-1V2c0-.552-.448-1-1-1H2zm0-1h20c1.105 0 2 .895 2 2v27c0 1.105-.895 2-2 2H2c-1.105 0-2-.895-2-2V2C0 .895.895 0 2 0z" fill-rule="nonzero"/>
<path d="M8.93 16.83c0 .17-.01.41-.03.57H5.62c.1.95.55 1.21 1.2 1.21.43 0 .81-.15 1.27-.47l.65.88c-.53.42-1.21.74-2.07.74-1.77 0-2.67-1.14-2.67-2.8 0-1.59.87-2.85 2.48-2.85 1.52 0 2.45 1 2.45 2.72zm-1.55-.38v-.07c-.01-.72-.23-1.22-.86-1.22-.53 0-.83.33-.91 1.29h1.77zm8.33-2.34c.82 0 1.39.59 1.39 1.6v3.88h-1.58v-3.61c0-.56-.21-.71-.45-.71-.34 0-.58.25-.81.69v3.63h-1.58v-3.61c0-.56-.21-.71-.45-.71-.33 0-.58.25-.81.69v3.63H9.84v-5.31h1.38l.11.62c.41-.52.89-.79 1.54-.79.59 0 1.04.3 1.25.84.42-.55.91-.84 1.59-.84zm3.99 5.65c-.92 0-1.46-.55-1.46-1.52v-6.07l1.58-.17v6.18c0 .22.08.33.27.33.11 0 .19-.02.26-.05l.31 1.12c-.24.1-.58.18-.96.18z"/>
</g>
</symbol><symbol id="icon-file-excel" viewBox="0 0 24 31">
<title>
file-excel
</title>
<g fill="none" fill-rule="evenodd">
<path d="M2 1c-.552 0-1 .448-1 1v27c0 .552.448 1 1 1h20c.552 0 1-.448 1-1V2c0-.552-.448-1-1-1H2zm0-1h20c1.105 0 2 .895 2 2v27c0 1.105-.895 2-2 2H2c-1.105 0-2-.895-2-2V2C0 .895.895 0 2 0z" fill="#DFE5E8" fill-rule="nonzero"/>
<path fill="#08743B" d="M7 10l3.5 6L7 22h3l2-4.5 2 4.5h3l-3.5-6 3.5-6h-3l-2 4.5-2-4.5"/>
</g>
</symbol><symbol id="icon-file-pdf" viewBox="0 0 24 31">
<title>
file-pdf
</title>
<g fill="none" fill-rule="evenodd">
<path d="M2 1c-.552 0-1 .448-1 1v27c0 .552.448 1 1 1h20c.552 0 1-.448 1-1V2c0-.552-.448-1-1-1H2zm0-1h20c1.105 0 2 .895 2 2v27c0 1.105-.895 2-2 2H2c-1.105 0-2-.895-2-2V2C0 .895.895 0 2 0z" fill="#DFE5E8" fill-rule="nonzero"/>
<path d="M11.936 10.347c-.097.905-.414 2.554-1.032 4.173-.616 1.622-1.53 3.21-2.325 4.39-.798 1.178-1.48 1.943-2 2.386-.518.44-.88.56-1.114.6-.233.04-.34 0-.405-.118-.062-.118-.083-.315-.03-.55.053-.235.18-.51.542-.864.36-.354.956-.785 1.785-1.188.83-.402 1.89-.775 2.762-1.03.87-.257 1.55-.394 2.145-.5.595-.11 1.104-.188 1.604-.227.5-.04.987-.04 1.466 0 .478.038.945.116 1.348.215.406.097.745.217 1.042.402.3.187.552.44.68.726s.128.6.022.825c-.105.227-.318.364-.563.44-.246.08-.522.1-.85 0-.33-.097-.713-.313-1.116-.598-.405-.284-.83-.638-1.382-1.187-.553-.55-1.232-1.298-1.807-2.023-.572-.727-1.04-1.434-1.357-2.033-.32-.6-.49-1.09-.627-1.582-.138-.49-.244-.98-.287-1.422-.044-.443.036-1.86.674-2.125.64-.265.916.416.822 1.29z" stroke="#FF3601" stroke-width=".75" stroke-linejoin="round"/>
</g>
</symbol><symbol id="icon-file-powerpoint" viewBox="0 0 24 31">
<title>
file-powerpoint
</title>
<g fill="none" fill-rule="evenodd">
<path d="M2 1c-.552 0-1 .448-1 1v27c0 .552.448 1 1 1h20c.552 0 1-.448 1-1V2c0-.552-.448-1-1-1H2zm0-1h20c1.105 0 2 .895 2 2v27c0 1.105-.895 2-2 2H2c-1.105 0-2-.895-2-2V2C0 .895.895 0 2 0z" fill="#DFE5E8" fill-rule="nonzero"/>
<g fill="#D04423">
<path d="M12 10v6h6c0 3.314-2.686 6-6 6s-6-2.686-6-6 2.686-6 6-6z"/>
<path d="M13 9c3.314 0 6 2.686 6 6h-6V9z"/>
</g>
</g>
</symbol><symbol id="icon-file-unknown" viewBox="0 0 24 31">
<title>
file-unknown
</title>
<g fill="#DFE5E8" fill-rule="evenodd">
<path d="M2 1c-.552 0-1 .448-1 1v27c0 .552.448 1 1 1h20c.552 0 1-.448 1-1V2c0-.552-.448-1-1-1H2zm0-1h20c1.105 0 2 .895 2 2v27c0 1.105-.895 2-2 2H2c-1.105 0-2-.895-2-2V2C0 .895.895 0 2 0z" fill-rule="nonzero"/>
<path d="M12.025 8.916c2.79 0 4.168 1.413 4.168 3.073 0 2.896-3.16 2.79-3.16 4.574v.23h-3.11v-.336c0-3.11 2.614-2.967 2.614-4.133 0-.442-.318-.69-.9-.69-.62 0-1.255.337-1.838.955l-2.173-1.696c.99-1.165 2.367-1.978 4.398-1.978zm-.53 9.36c1.007 0 1.82.832 1.82 1.82 0 .99-.813 1.82-1.82 1.82-1.007 0-1.82-.83-1.82-1.82 0-.988.813-1.82 1.82-1.82z"/>
</g>
</symbol><symbol id="icon-file-word" viewBox="0 0 24 31">
<title>
file-word
</title>
<g fill="none" fill-rule="evenodd">
<path d="M2 1c-.552 0-1 .448-1 1v27c0 .552.448 1 1 1h20c.552 0 1-.448 1-1V2c0-.552-.448-1-1-1H2zm0-1h20c1.105 0 2 .895 2 2v27c0 1.105-.895 2-2 2H2c-1.105 0-2-.895-2-2V2C0 .895.895 0 2 0z" fill="#DFE5E8" fill-rule="nonzero"/>
<path d="M4 11h16v2H4v-2zm0 4h16v2H4v-2zm0 4h9v2H4v-2z" fill="#285497"/>
</g>
</symbol><symbol id="icon-form" viewBox="0 0 17 17">
<title>
form
@ -408,7 +481,7 @@
<title>
paperclip
</title>
<path d="M25.453 5.938c.062.996-.218 1.898-.84 2.707L13.32 23.112c-.986 1.307-2.32 2.054-4 2.24-1.68.25-3.173-.155-4.48-1.213-1.306-1.06-2.053-2.428-2.24-4.108-.186-1.68.218-3.173 1.214-4.48l7.934-10.08-2.054-1.603-7.84 10.095C.36 15.832-.23 17.947.08 20.312c.25 2.427 1.307 4.356 3.174 5.787 1.805 1.43 3.92 2.053 6.347 1.866 2.417-.31 4.31-1.4 5.68-3.267l11.386-14.47c1.048-1.367 1.478-2.923 1.292-4.665-.25-1.753-1.053-3.158-2.412-4.216C24.176.29 22.653-.146 20.973.04c-1.743.187-3.143.965-4.2 2.333L5.867 16.392c-.684.87-.964 1.867-.84 2.987.125 1.057.623 1.928 1.494 2.612.81.685 1.774.965 2.894.84 1.12-.186 1.992-.684 2.614-1.493l7.45-9.522-2.052-1.587-7.452 9.522c-.186.31-.466.467-.84.467-.373.06-.715-.032-1.026-.28-.374-.188-.56-.5-.56-.935 0-.373.093-.715.28-1.026L18.826 3.96c.622-.81 1.462-1.275 2.52-1.4.996-.062 1.898.218 2.707.84.81.622 1.276 1.468 1.4 2.536z" fill="#D5D5D6" fill-rule="evenodd"/>
<path d="M24.613 8.645L13.32 23.115c-.986 1.306-2.32 2.052-4 2.24-1.68.248-3.173-.157-4.48-1.214-1.306-1.057-2.053-2.426-2.24-4.107-.186-1.68.218-3.173 1.214-4.48l7.934-10.08-2.054-1.604-7.84 10.096C.36 15.833-.23 17.95.08 20.313.33 22.74 1.387 24.67 3.254 26.1c1.805 1.432 3.92 2.054 6.347 1.868 2.417-.31 4.31-1.4 5.68-3.267l11.386-14.468c1.048-1.37 1.478-2.925 1.292-4.667-.25-1.753-1.053-3.158-2.412-4.216C24.176.29 22.653-.146 20.973.04c-1.743.187-3.143.965-4.2 2.334L5.867 16.393c-.684.87-.964 1.867-.84 2.987.125 1.058.623 1.93 1.494 2.614.81.684 1.774.964 2.894.84 1.12-.187 1.992-.685 2.614-1.494l7.45-9.52-2.052-1.588-7.452 9.52c-.186.312-.466.468-.84.468-.373.062-.715-.03-1.026-.28-.374-.187-.56-.498-.56-.933 0-.374.093-.716.28-1.027L18.826 3.962c.622-.808 1.462-1.275 2.52-1.4.996-.062 1.898.218 2.707.84.81.623 1.276 1.468 1.4 2.536.062.996-.218 1.898-.84 2.707z" fill-rule="evenodd"/>
</symbol><symbol id="icon-pen" viewBox="0 0 16 16">
<title>
pen

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 72 KiB

22
public/assets/images/icons/file-archive.svg Normal file
View file

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="31px" viewBox="0 0 24 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
<title>file-archive</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M10,0 L10,1 L12,1 L12,0 L24,0 L24,31 L0,31 L0,0 L10,0 Z" id="path-1"></path>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="file-archive">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Combined-Shape"></g>
<g id="file-background" mask="url(#mask-2)" fill="#DFE5E8" fill-rule="nonzero">
<path d="M2,1 C1.44771525,1 1,1.44771525 1,2 L1,29 C1,29.5522847 1.44771525,30 2,30 L22,30 C22.5522847,30 23,29.5522847 23,29 L23,2 C23,1.44771525 22.5522847,1 22,1 L2,1 Z M2,0 L22,0 C23.1045695,-2.02906125e-16 24,0.8954305 24,2 L24,29 C24,30.1045695 23.1045695,31 22,31 L2,31 C0.8954305,31 1.3527075e-16,30.1045695 0,29 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="border"></path>
</g>
<path d="M12,0 L14,0 L14,1 L12,1 L12,0 Z M10,1 L12,1 L12,2 L10,2 L10,1 Z M12,2 L14,2 L14,3 L12,3 L12,2 Z M10,3 L12,3 L12,4 L10,4 L10,3 Z M12,4 L14,4 L14,5 L12,5 L12,4 Z M10,5 L12,5 L12,6 L10,6 L10,5 Z M12,6 L14,6 L14,7 L12,7 L12,6 Z M10,7 L12,7 L12,8 L10,8 L10,7 Z M12,8 L14,8 L14,9 L12,9 L12,8 Z M10,9 L12,9 L12,10 L10,10 L10,9 Z M12,10 L14,10 L14,11 L12,11 L12,10 Z M10,11 L12,11 L12,12 L10,12 L10,11 Z M12,12 L14,12 L14,13 L12,13 L12,12 Z M10,13 L12,13 L12,14 L10,14 L10,13 Z M12,14 L14,14 L14,15 L12,15 L12,14 Z" id="zip-line" fill="#DFE5E8"></path>
<path d="M10,15 L14,15 L14,18 C14,18.5522847 13.5522847,19 13,19 L11,19 C10.4477153,19 10,18.5522847 10,18 L10,15 Z M11,17 L11,18 L13,18 L13,17 L11,17 Z" id="zip-line-end" fill="#DFE5E8"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

15
public/assets/images/icons/file-code.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="31px" viewBox="0 0 24 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
<title>file-code</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="file-code" fill="#DFE5E8">
<g id="file-background" fill-rule="nonzero">
<path d="M2,1 C1.44771525,1 1,1.44771525 1,2 L1,29 C1,29.5522847 1.44771525,30 2,30 L22,30 C22.5522847,30 23,29.5522847 23,29 L23,2 C23,1.44771525 22.5522847,1 22,1 L2,1 Z M2,0 L22,0 C23.1045695,-2.02906125e-16 24,0.8954305 24,2 L24,29 C24,30.1045695 23.1045695,31 22,31 L2,31 C0.8954305,31 1.3527075e-16,30.1045695 0,29 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="border"></path>
</g>
<path d="M9.98554878,9 L9.98554878,11 C9.27587136,11 8.98554878,11.4436405 8.98554878,12 L8.98554878,14 C8.98554878,15.4972334 8.75109512,15.7234952 7.61290323,15.9182656 C8.60064353,16.0996056 8.98554878,16.616234 8.98554878,18 L8.98554878,20 C8.98554878,20.5563595 9.28877459,21 9.98554878,21 L9.98554878,23 C7.31458104,23 6.98554878,21.5692192 6.98554878,20 L6.98554878,18 C6.98554878,17.1440622 6.65806452,17 6,17 L6,15 C6.65806452,15 6.98554878,14.8559378 6.98554878,14 L6.98554878,12 C6.98554878,10.4165151 7.31458104,9 9.98554878,9 Z M14,9 L14,11 C14.7096774,11 15,11.4436405 15,12 L15,14 C15,15.4972334 15.2344537,15.7234952 16.3726456,15.9182656 C15.3849052,16.0996056 15,16.616234 15,18 L15,20 C15,20.5563595 14.6967742,21 14,21 L14,23 C16.6709677,23 17,21.5692192 17,20 L17,18 C17,17.1440622 17.3274843,17 17.9855488,17 L17.9855488,15 C17.3274843,15 17,14.8559378 17,14 L17,12 C17,10.4165151 16.6709677,9 14,9 Z" id="{-}"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

15
public/assets/images/icons/file-email.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="31px" viewBox="0 0 24 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
<title>file-email</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="file-email" fill="#DFE5E8">
<g id="file-background" fill-rule="nonzero">
<path d="M2,1 C1.44771525,1 1,1.44771525 1,2 L1,29 C1,29.5522847 1.44771525,30 2,30 L22,30 C22.5522847,30 23,29.5522847 23,29 L23,2 C23,1.44771525 22.5522847,1 22,1 L2,1 Z M2,0 L22,0 C23.1045695,-2.02906125e-16 24,0.8954305 24,2 L24,29 C24,30.1045695 23.1045695,31 22,31 L2,31 C0.8954305,31 1.3527075e-16,30.1045695 0,29 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="border"></path>
</g>
<path d="M8.93,16.83 C8.93,17 8.92,17.24 8.9,17.4 L5.62,17.4 C5.72,18.35 6.17,18.61 6.82,18.61 C7.25,18.61 7.63,18.46 8.09,18.14 L8.74,19.02 C8.21,19.44 7.53,19.76 6.67,19.76 C4.9,19.76 4,18.62 4,16.96 C4,15.37 4.87,14.11 6.48,14.11 C8,14.11 8.93,15.11 8.93,16.83 Z M7.38,16.45 L7.38,16.38 C7.37,15.66 7.15,15.16 6.52,15.16 C5.99,15.16 5.69,15.49 5.61,16.45 L7.38,16.45 Z M15.71,14.11 C16.53,14.11 17.1,14.7 17.1,15.71 L17.1,19.59 L15.52,19.59 L15.52,15.98 C15.52,15.42 15.31,15.27 15.07,15.27 C14.73,15.27 14.49,15.52 14.26,15.96 L14.26,19.59 L12.68,19.59 L12.68,15.98 C12.68,15.42 12.47,15.27 12.23,15.27 C11.9,15.27 11.65,15.52 11.42,15.96 L11.42,19.59 L9.84,19.59 L9.84,14.28 L11.22,14.28 L11.33,14.9 C11.74,14.38 12.22,14.11 12.87,14.11 C13.46,14.11 13.91,14.41 14.12,14.95 C14.54,14.4 15.03,14.11 15.71,14.11 Z M19.7,19.76 C18.78,19.76 18.24,19.21 18.24,18.24 L18.24,12.17 L19.82,12 L19.82,18.18 C19.82,18.4 19.9,18.51 20.09,18.51 C20.2,18.51 20.28,18.49 20.35,18.46 L20.66,19.58 C20.42,19.68 20.08,19.76 19.7,19.76 Z" id="eml"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

15
public/assets/images/icons/file-excel.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="31px" viewBox="0 0 24 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
<title>file-excel</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="file-excel">
<g id="file-background" fill="#DFE5E8" fill-rule="nonzero">
<path d="M2,1 C1.44771525,1 1,1.44771525 1,2 L1,29 C1,29.5522847 1.44771525,30 2,30 L22,30 C22.5522847,30 23,29.5522847 23,29 L23,2 C23,1.44771525 22.5522847,1 22,1 L2,1 Z M2,0 L22,0 C23.1045695,-2.02906125e-16 24,0.8954305 24,2 L24,29 C24,30.1045695 23.1045695,31 22,31 L2,31 C0.8954305,31 1.3527075e-16,30.1045695 0,29 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="border"></path>
</g>
<polygon id="Path-5" fill="#08743B" points="7 10 10.5 16 7 22 10 22 12 17.5 14 22 17 22 13.5 16 17 10 14 10 12 14.5 10 10"></polygon>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

15
public/assets/images/icons/file-pdf.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="31px" viewBox="0 0 24 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
<title>file-pdf</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="file-pdf">
<g id="file-background" fill="#DFE5E8" fill-rule="nonzero">
<path d="M2,1 C1.44771525,1 1,1.44771525 1,2 L1,29 C1,29.5522847 1.44771525,30 2,30 L22,30 C22.5522847,30 23,29.5522847 23,29 L23,2 C23,1.44771525 22.5522847,1 22,1 L2,1 Z M2,0 L22,0 C23.1045695,-2.02906125e-16 24,0.8954305 24,2 L24,29 C24,30.1045695 23.1045695,31 22,31 L2,31 C0.8954305,31 1.3527075e-16,30.1045695 0,29 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="border"></path>
</g>
<path d="M11.9361423,10.346989 C11.8391423,11.251989 11.5221423,12.900989 10.9041423,14.519989 C10.2881423,16.141989 9.37514227,17.729989 8.57914227,18.909989 C7.78214227,20.087989 7.10114227,20.852989 6.58114227,21.295989 C6.06214227,21.736989 5.69914227,21.854989 5.46614227,21.894989 C5.23314227,21.934989 5.12714227,21.894989 5.06114227,21.777989 C4.99814227,21.659989 4.97714227,21.462989 5.03014227,21.226989 C5.08314227,20.992989 5.21114227,20.716989 5.57214227,20.363989 C5.93214227,20.009989 6.52814227,19.578989 7.35714227,19.175989 C8.18614227,18.773989 9.24814227,18.400989 10.1191423,18.144989 C10.9901423,17.888989 11.6701423,17.751989 12.2651423,17.644989 C12.8601423,17.536989 13.3691423,17.457989 13.8691423,17.418989 C14.3691423,17.378989 14.8571423,17.378989 15.3361423,17.418989 C15.8141423,17.457989 16.2811423,17.535989 16.6841423,17.634989 C17.0901423,17.731989 17.4291423,17.851989 17.7261423,18.036989 C18.0251423,18.223989 18.2781423,18.477989 18.4071423,18.762989 C18.5341423,19.048989 18.5341423,19.362989 18.4281423,19.587989 C18.3231423,19.814989 18.1101423,19.951989 17.8651423,20.028989 C17.6191423,20.108989 17.3431423,20.127989 17.0141423,20.028989 C16.6841423,19.930989 16.3021423,19.714989 15.8991423,19.429989 C15.4951423,19.145989 15.0701423,18.791989 14.5181423,18.242989 C13.9651423,17.691989 13.2861423,16.944989 12.7111423,16.219989 C12.1381423,15.492989 11.6701423,14.785989 11.3531423,14.186989 C11.0341423,13.587989 10.8641423,13.096989 10.7261423,12.604989 C10.5881423,12.113989 10.4821423,11.624989 10.4391423,11.182989 C10.3961423,10.739989 10.4755541,9.32235642 11.1140758,9.05779049 C11.7525975,8.79322456 12.0301423,9.47398903 11.9361423,10.346989 Z" id="Shape" stroke="#FF3601" stroke-width="0.75" stroke-linejoin="round"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

18
public/assets/images/icons/file-powerpoint.svg Normal file
View file

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="31px" viewBox="0 0 24 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
<title>file-powerpoint</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="file-powerpoint">
<g id="file-background" fill="#DFE5E8" fill-rule="nonzero">
<path d="M2,1 C1.44771525,1 1,1.44771525 1,2 L1,29 C1,29.5522847 1.44771525,30 2,30 L22,30 C22.5522847,30 23,29.5522847 23,29 L23,2 C23,1.44771525 22.5522847,1 22,1 L2,1 Z M2,0 L22,0 C23.1045695,-2.02906125e-16 24,0.8954305 24,2 L24,29 C24,30.1045695 23.1045695,31 22,31 L2,31 C0.8954305,31 1.3527075e-16,30.1045695 0,29 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="border"></path>
</g>
<g id="pie-+-piece" transform="translate(6.000000, 9.000000)" fill="#D04423">
<path d="M6,1 L6,7 L12,7 C12,10.3137085 9.3137085,13 6,13 C2.6862915,13 0,10.3137085 0,7 C0,3.6862915 2.6862915,1 6,1 Z" id="pie"></path>
<path d="M7,0 C10.3137085,0 13,2.6862915 13,6 L7,6 L7,0 Z" id="piece"></path>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

15
public/assets/images/icons/file-unknown.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="31px" viewBox="0 0 24 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
<title>file-unknown</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="file-unknown" fill="#DFE5E8">
<g id="file-background" fill-rule="nonzero">
<path d="M2,1 C1.44771525,1 1,1.44771525 1,2 L1,29 C1,29.5522847 1.44771525,30 2,30 L22,30 C22.5522847,30 23,29.5522847 23,29 L23,2 C23,1.44771525 22.5522847,1 22,1 L2,1 Z M2,0 L22,0 C23.1045695,-2.02906125e-16 24,0.8954305 24,2 L24,29 C24,30.1045695 23.1045695,31 22,31 L2,31 C0.8954305,31 1.3527075e-16,30.1045695 0,29 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="border"></path>
</g>
<path d="M12.0248098,8.916 C14.8155707,8.916 16.193288,10.3290435 16.193288,11.9893696 C16.193288,14.8861087 13.0316033,14.7801304 13.0316033,16.5640978 L13.0316033,16.7937174 L9.92290761,16.7937174 L9.92290761,16.4581196 C9.92290761,13.3494239 12.537038,13.4907283 12.537038,12.3249674 C12.537038,11.8833913 12.2191033,11.6361087 11.6362228,11.6361087 C11.0180163,11.6361087 10.3821467,11.9717065 9.7992663,12.589913 L7.62671196,10.8942609 C8.61584239,9.7285 9.99355978,8.916 12.0248098,8.916 Z M11.4949185,18.277413 C12.501712,18.277413 13.314212,19.1075761 13.314212,20.0967065 C13.314212,21.085837 12.501712,21.916 11.4949185,21.916 C10.488125,21.916 9.675625,21.085837 9.675625,20.0967065 C9.675625,19.1075761 10.488125,18.277413 11.4949185,18.277413 Z" id="?"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

15
public/assets/images/icons/file-word.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="31px" viewBox="0 0 24 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
<title>file-word</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="file-word">
<g id="file-background" fill="#DFE5E8" fill-rule="nonzero">
<path d="M2,1 C1.44771525,1 1,1.44771525 1,2 L1,29 C1,29.5522847 1.44771525,30 2,30 L22,30 C22.5522847,30 23,29.5522847 23,29 L23,2 C23,1.44771525 22.5522847,1 22,1 L2,1 Z M2,0 L22,0 C23.1045695,-2.02906125e-16 24,0.8954305 24,2 L24,29 C24,30.1045695 23.1045695,31 22,31 L2,31 C0.8954305,31 1.3527075e-16,30.1045695 0,29 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="border"></path>
</g>
<path d="M4,11 L20,11 L20,13 L4,13 L4,11 Z M4,15 L20,15 L20,17 L4,17 L4,15 Z M4,19 L13,19 L13,21 L4,21 L4,19 Z" id="Combined-Shape" fill="#285497"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

6
public/assets/images/icons/paperclip.svg
View file

@ -1,12 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40.2 (33826) - http://www.bohemiancoding.com/sketch -->
<!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
<title>paperclip</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="paperclip" fill="#D5D5D6">
<path d="M25.4530542,5.93790159 C25.51528,6.93351517 25.2352637,7.83578997 24.6130052,8.644726 L13.3190137,23.1122358 C12.3337711,24.4189786 11.0011009,25.1656888 9.32100296,25.3523663 C7.64090505,25.6012697 6.14748469,25.1968017 4.84074187,24.1389623 C3.53399905,23.0811229 2.78728887,21.7121542 2.60061132,20.0320563 C2.41393378,18.3519584 2.81840179,16.858538 3.81401537,15.5517952 L11.7478111,5.47120773 L9.69435805,3.86889213 L1.85390114,13.9650361 C0.360480778,15.8318115 -0.230664783,17.9474904 0.0804644593,20.3120726 C0.329367853,22.7388807 1.38720728,24.667882 3.25398273,26.0990765 C5.05853234,27.530271 7.17421119,28.1525295 9.60101928,27.965852 C12.0174564,27.6547227 13.9101593,26.5657704 15.279128,24.6989949 L26.6664582,10.2314851 C27.7139267,8.86251647 28.1443221,7.30687026 27.9576446,5.5645465 C27.7087412,3.81185177 26.9049907,2.40658469 25.546393,1.34874527 C24.1774243,0.290905842 22.652891,-0.144675098 20.9727931,0.0420024477 C19.2304693,0.228679993 17.8303877,1.0065031 16.7725483,2.37547177 L5.86746837,16.3918441 C5.18298404,17.263006 4.90296772,18.2586196 5.02741942,19.3786849 C5.15187111,20.4365243 5.6496779,21.3076862 6.52083978,21.9921705 C7.32977581,22.6766548 8.29427646,22.9566712 9.41434174,22.8322195 C10.534407,22.6455419 11.4055689,22.1477351 12.0278274,21.3387991 L19.4793727,11.8182443 L17.4259197,10.2314851 L9.97437437,19.75204 C9.78769683,20.0631692 9.50768051,20.2187338 9.13432542,20.2187338 C8.76097033,20.2809597 8.41872816,20.1876209 8.10759892,19.9387175 C7.73424383,19.75204 7.54756628,19.4409107 7.54756628,19.0053298 C7.54756628,18.6319747 7.64090505,18.2897325 7.8275826,17.9786033 L18.8260013,3.9622309 C19.4482598,3.15329487 20.2883088,2.68660101 21.3461482,2.56214931 C22.3417618,2.49992346 23.2440366,2.77993978 24.0529726,3.40219827 C24.8619086,4.02445675 25.3286025,4.86969119 25.4530542,5.93790159 L25.4530542,5.93790159 Z" id="Shape"></path>
<g id="paperclip" fill="#50E3C2">
<path d="M24.6130052,8.64529365 L13.3190137,23.1137534 C12.3337711,24.420582 11.0011009,25.1673413 9.32100296,25.3540311 C7.64090505,25.6029508 6.14748469,25.1984562 4.84074187,24.1405473 C3.53399905,23.0826384 2.78728887,21.7135799 2.60061132,20.0333717 C2.41393378,18.3531634 2.81840179,16.859645 3.81401537,15.5528164 L11.7478111,5.47156699 L9.69435805,3.86914618 L1.85390114,13.965953 C0.360480778,15.8328511 -0.230664783,17.9486689 0.0804644593,20.3134064 C0.329367853,22.7403738 1.38720728,24.6695018 3.25398273,26.1007903 C5.05853234,27.5320788 7.17421119,28.1543781 9.60101928,27.9676883 C12.0174564,27.6565386 13.9101593,26.5675148 15.279128,24.7006167 L26.6664582,10.232157 C27.7139267,8.86309842 28.1443221,7.30735006 27.9576446,5.56491189 C27.7087412,3.81210207 26.9049907,2.40674272 25.546393,1.34883383 C24.1774243,0.290924944 22.652891,-0.144684598 20.9727931,0.0420052058 C19.2304693,0.228695009 17.8303877,1.00656919 16.7725483,2.37562775 L5.86746837,16.3929205 C5.18298404,17.2641396 4.90296772,18.2598185 5.02741942,19.3799573 C5.15187111,20.4378662 5.6496779,21.3090853 6.52083978,21.9936146 C7.32977581,22.6781439 8.29427646,22.9581786 9.41434174,22.8337187 C10.534407,22.6470289 11.4055689,22.1491894 12.0278274,21.3402003 L19.4793727,11.8190203 L17.4259197,10.232157 L9.97437437,19.753337 C9.78769683,20.0644866 9.50768051,20.2200615 9.13432542,20.2200615 C8.76097033,20.2822914 8.41872816,20.1889465 8.10759892,19.9400268 C7.73424383,19.753337 7.54756628,19.4421873 7.54756628,19.0065777 C7.54756628,18.6331981 7.64090505,18.2909335 7.8275826,17.9797838 L18.8260013,3.96249108 C19.4482598,3.15350193 20.2883088,2.68677742 21.3461482,2.56231755 C22.3417618,2.50008762 23.2440366,2.78012232 24.0529726,3.40242167 C24.8619086,4.02472101 25.3286025,4.87001096 25.4530542,5.9382915 C25.51528,6.93397045 25.2352637,7.8363045 24.6130052,8.64529365 Z" id="Shape"></path>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB