highlight v0.1

This commit is contained in:
Felix Niklas 2015-03-10 21:11:36 +01:00
parent 8def4fd80e
commit 7039e601fe
13 changed files with 686 additions and 5710 deletions

View file

@ -789,4 +789,116 @@ class errorRef extends App.ControllerContent
App.Config.set( 'layout_ref/error', errorRef, 'Routes' )
class highlightRef extends App.ControllerContent
elements:
'.article-text': 'articles'
events:
'click .js-highlight': 'toggleHighlight'
'click .js-highlightColor': 'pickColor'
colors: [
{
name: 'Yellow'
color: "#f7e7b2"
},
{
name: 'Green'
color: "#bce7b6"
},
{
name: 'Blue'
color: "#b3ddf9"
},
{
name: 'Pink'
color: "#fea9c5"
},
{
name: 'Purple'
color: "#eac5ee"
}
]
activeColorIndex: 0
highlightClass: "textHighlight"
constructor: ->
super
rangy.init()
@setColor()
@render()
render: ->
@html App.view('layout_ref/highlight')
colors: @colors
activeColorIndex: @activeColorIndex
setColor: ->
if @applier
@applier.elementAttributes.style = "background: "+ @colors[@activeColorIndex].color
else
@applier = rangy.createClassApplier @highlightClass,
elementAttributes:
style: "background: "+ @colors[@activeColorIndex].color
if @isActive
@articles.attr('data-highlightcolor', @colors[@activeColorIndex].name)
toggleHighlight: (e) =>
if @isActive
$(e.currentTarget).removeClass('active')
@isActive = false
@articles.off('mouseup', @onMouseUp)
@articles.removeAttr('data-highlightcolor')
else
selection = window.getSelection()
# if there's already something selected,
# don't go into highlight mode
# just highlight the selected
if selection.isCollapsed
$(e.currentTarget).addClass('active')
@isActive = true
@articles.on('mouseup', @onMouseUp) #future: touchend
@articles.attr('data-highlightcolor', @colors[@activeColorIndex].name)
else
@highlight selection
pickColor: (e) =>
@$('.js-highlightColor .visibility-change.active').removeClass('active')
$(e.currentTarget).find('.visibility-change').addClass('active')
@activeColorIndex = $(e.currentTarget).attr('data-key')
@setColor()
onMouseUp: =>
@highlight window.getSelection()
#
# Highlight
# =========
#
# - only works when the selection starts and ends inside an article
# - clears highlights in selection
# - or highlights the selection
# - clears the selection
highlight: (selection) ->
return false if !@isInScope selection
# highlight and clear
@applier.toggleSelection()
# remove selection
selection.removeAllRanges()
isInScope: (selection) ->
true
clearHighlights: (selection) ->
false
App.Config.set( 'layout_ref/highlight', highlightRef, 'Routes' )
App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' )

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,310 @@
<div class="main flex">
<div class="ticketZoom">
<div class="ticketZoom-controls">
<div class="btn btn--action btn--split--first js-highlight centered visibility-change">
<div class="marker icon active" data-visible="active"></div>
<div class="marker icon" data-visible="normal"></div>
</div>
<div class="dropdown dropdown--actions">
<div class="btn btn--action btn--split--last btn--slim centered" id="highlight" data-toggle="dropdown" aria-expanded="true">
<div class="arrow down icon"></div>
</div>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<% for entry, i in @colors: %>
<li role="presentation">
<a role="menuitem" tabindex="-1" class="js-highlightColor" data-key="<%= i %>">
<span class="dropdown-iconSpacer">
<span class="color-swatch icon" style="background: <%= entry.color %>"></span>
</span>
<%= entry.name %>
<span class="dropdown-activeSpacer visibility-change<%= ' active' if i is @activeColorIndex %>">
<span class="white checkmark icon" data-visible="active"></span>
</span>
</a>
<% end %>
</ul>
</div>
<div class="pagination-counter">
<span class="pagination-item-current">1</span>/<span class="pagination-total-items">36</span>
</div>
<ul class="pagination">
<li>
<a class="centered" href="#" data-from="0" data-type="page">
<span class="left arrow icon"></span>
</a>
<li>
<a class="centered" href="#" data-from="1" data-type="page">
<span class="right arrow icon"></span>
</a>
</ul>
</li>
</div>
<div class="scrollPageHeader zIndex-9 horizontal center"
data-anchor-target=".ticketZoom .page-header"
data-128-top-bottom="transform: translateY(-64px);"
data-64-top-bottom="transform: translateY(0px);"
>
<small>Ticket# <span class="ticket-number">1002</span></small>
<div class="ticket-title flex">
<h1 contenteditable="true" class="ticket-title-update" data-placeholder="Enter Title...">Welcome to Zammad! We want to entertain you and your whole family!</h1>
</div>
<div class="pagination-counter">
<span class="pagination-item-current">1</span>/<span class="pagination-total-items">36</span>
</div>
<ul class="pagination">
<li>
<a class="centered" href="#" data-from="<%= @items_from - @items_per_page %>" data-type="page">
<span class="left arrow icon"></span>
</a>
<li>
<a class="centered" href="#" data-from="<%= @items_from + @items_per_page %>" data-type="page">
<span class="right arrow icon"></span>
</a>
</ul>
</div>
<div class="page-header horizontal">
<div class="flex vertical center">
<span class="avatar unique user-popover size-50" data-id="2" style="background-position: -92.79607555375712px -106.24902447601627px;" data-original-title="" title="">NB</span>
<div class="ticket-title">
<h1 contenteditable="true" class="ticket-title-update" data-placeholder="Enter Title...">Welcome to Zammad! We want to entertain you and your whole family!</h1>
</div>
<div class="ticket-meta">
<small class="task-subline">Ticket# <span class="ticket-number">10001</span> - erstellte <span class="humanTimeFromNow" data-time="2014-07-11T10:10:32.000Z" data-tooltip="11.07.2014 12:10">11.07.2014</span>
</small>
</div>
</div>
</div>
<div class="ticket-article">
<div class="ticket-article-item 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">
<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="textBubble">
<div class="bubble-arrow"></div>
<div class="textBubble-content">
<div class="article-text">
Welcome!
<br/>
Thank you for installing Zammad.<br/>
<br/>
You will find updates and patches at <a href="http://zammad.org/" title="http://zammad.org/" target="_blank">http://zammad.org/</a>. Online<br/>
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<br/>
use our forums at <a href="http://forums.zammad.org/" title="http://forums.zammad.org/" target="_blank">http://forums.zammad.org/</a><br/>
<br/>
Regards,<br/>
The <a href="http://Zammad.org" title="http://Zammad.org" target="_blank">Zammad.org</a> Project
</div>
<div class="textBubble-overflowContainer">
<div class="btn btn--text js-unfold"><%- @T('See more') %></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 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 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">
<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="textBubble"><div class="bubble-arrow"></div>
<div class="article-text">Hallp HP, du kannst dich nur einmal einloggen. Was machst du genau?</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 class="ticket-article-item 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">
<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="textBubble"><div class="bubble-arrow"></div><div class="article-text">Ich wollte mir die Lyrics von Maria herunterladen, aber ich schaff es einfach nicht, da raufzukommen. Schick mir bitte mein Passwort.
Grüße, Peter</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 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">
<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="textBubble">
<div class="bubble-arrow"></div>
<div class="textBubble-content"><div class="article-text">Lieber HP,<br>
anbei findest du die Midi Noten für Maria Maria "I Like it Loud".<br>
Wünsche dir einen guten Auftritt in Hamburg.<br>
<br>
Deine Frau bekommt ein Kind haben wir gehört.<br>
Gratulation dazu! Wir schicken dir was liebes.<br>
<br>
Und wenn du noch mal Probleme mit der Stimme hast sag bescheid ich kenn da ein Wundermittel.<br>
<br>
Das ist eine Pille von einem Druiden aus dem Bayerischen Wald. Die ölt einem so richtig die Stimmbänder.<br>
<br>
Verwende ich immer wenn ich meine Frau anschreien will. Die macht meinen Tenor richtig zum Löwen.<br>
<br>
Ach ja und dein Freund Tim. Richt dem mal aus dass er das doch bitte sein lassen soll mit den Anrufen.<br>
<br>Ich weiß schon dass ich ein hübscher bin. Aber ich hab ihm schon tausend mal gesagt, dass ich seine Gefühle leider nicht erwiedern kann.<br>
<br>
Bin verheiratet, hab Kind. Is doch offensichtlich, Junge!<br>
Alles gute,<br>
Oliver<br></div>
<div class="textBubble-overflowContainer">
<div class="btn btn--text js-unfold"><%- @T('See more') %></div>
</div>
</div>
<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.5 kb</div>
</div>
<div class="attachment horizontal">
<div class="attachment-name u-highlight">lyrics_I_Like_it_Loud.txt</div>
<div class="attachment-size">17.1 kb</div>
</div>
<div class="attachment horizontal">
<div class="attachment-name u-highlight">something with very long line which is slonger as the container arount it if you can see it I wish you a very happy day.txt</div>
<div class="attachment-size">17.1 kb</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>
</div>
</div>

View file

@ -4,6 +4,7 @@
<ul>
<li><a href="#layout_ref/highlight">Highlight</a></li>
<li>Content <a href="#layout_ref/content">Example</a></li>
<li>Content + Sidebar Right <a href="#layout_ref/content_sidebar_right">Example</a></li>
<li>Content + Sidebar Right not shown if screen resulution is lower then 1280px <a href="#layout_ref/content_sidebar_right_sidebar_optional">Example</a></li>

View file

@ -35,6 +35,11 @@
//= require ./app/lib/bootstrap/button.js
//= require ./app/lib/bootstrap/collapse.js
//= require ./app/lib/rangy/rangy-core.js
//= require ./app/lib/rangy/rangy-classapplier.js
//= require ./app/lib/rangy/rangy-textrange.js
//= require ./app/lib/rangy/rangy-highlighter.js
//= require_tree ./app/lib/base
//= require ./app/index.js.coffee

View file

@ -2785,13 +2785,6 @@ select[multiple].form-group-lg .form-control {
color: #333;
text-decoration: none;
}
.btn:active,
.btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {

View file

@ -271,6 +271,11 @@ span[data-tooltip]:hover:before {
border-color: rgba(0,0,0,.1);
outline: none !important;
&.btn--slim {
padding-left: 12px;
padding-right: 12px;
}
&.is-disabled {
pointer-events: none;
cursor: not-allowed;
@ -283,9 +288,17 @@ span[data-tooltip]:hover:before {
}
&.btn--action {
@extend label;
text-transform: uppercase;
color: hsl(0,0%,60%);
font-size: 12px;
letter-spacing: 0.1em;
height: 31px;
padding: 7px 11px 5px !important;
&.btn--slim {
padding-left: 7px !important;
padding-right: 7px !important;
}
}
&.btn--primary {
@ -344,6 +357,20 @@ span[data-tooltip]:hover:before {
margin-left: 20px;
}
}
&.btn--split--first {
border-radius: 3px 0 0 3px;
}
&.btn--split,
&.btn--split--last {
border-radius: 0;
border-left: none;
margin-left: 0;
}
&.btn--split--last {
border-radius: 0 3px 3px 0;
}
}
.btn + .btn {
@ -371,6 +398,42 @@ span[data-tooltip]:hover:before {
vertical-align: top;
}
.visibility-change {
/*
Interactive Visibility Change Classes:
<div class="visibility-change">
<div class="icon marker active" data-visible="active"></div>
<div class="icon marker" data-visible="hover"></div>
</div>
Important: HTML Order active > hover > normal
*/
[data-visible=active],
[data-visible=hover] {
display: none;
}
&.active [data-visible=active] {
display: block;
& ~ [data-visible=normal] {
display: none
}
}
&:hover [data-visible=hover] {
display: block;
& ~ [data-visible=normal] {
display: none
}
}
}
table {
table-layout: fixed;
}
@ -828,7 +891,7 @@ textarea,
}
.pagination-counter {
margin: 0 19px 0 10px;
margin: 0 19px;
line-height: 33px;
color: #9c9c9b;
}
@ -856,7 +919,7 @@ textarea,
@extend .self-start;
.btn {
margin: 0 9px 2px;
margin: 0 0 2px 9px;
}
}
@ -1664,14 +1727,24 @@ ol.tabs li {
}
.left.arrow.icon,
.right.arrow.icon {
.right.arrow.icon,
.down.arrow.icon,
.up.arrow.icon {
width: 8px;
height: 12px;
opacity: .39;
}
.down.arrow.icon,
.up.arrow.icon {
width: 12px;
height: 8px;
}
.disabled.left.arrow.icon,
.disabled.right.arrow.icon {
.disabled.right.arrow.icon,
.disabled.up.arrow.icon,
.disabled.down.arrow.icon {
opacity: .23;
}
@ -1679,18 +1752,34 @@ ol.tabs li {
background-position: 0 -307px;
}
.right.arrow.icon {
background-position: -9px -307px;
}
.white.left.arrow.icon {
background-position: -18px -307px;
}
.right.arrow.icon {
background-position: -9px -307px;
}
.white.right.arrow.icon {
background-position: -27px -307px;
}
.up.arrow.icon {
background-position: -119px -307px;
}
.white.up.arrow.icon {
background-position: -132px -307px;
}
.down.arrow.icon {
background-position: -145px -307px;
}
.white.down.arrow.icon {
background-position: -158px -307px;
}
.checkbox.icon {
min-height: 0; /* overwriting bootstrap */
margin: 0; /* overwriting bootstrap */
@ -1817,9 +1906,13 @@ ol.tabs li {
}
.checkmark.icon {
width: 16px;
width: 17px;
height: 15px;
background-position: -135px -347px;
background-position: -135px -348px;
}
.white.checkmark.icon {
background-position: -135px -364px;
}
.error.icon {
@ -1864,6 +1957,24 @@ ol.tabs li {
border-radius: 100%;
}
.marker.icon {
width: 17px;
height: 19px;
background-position: -167px -344px;
}
.marker.active.icon {
width: 17px;
height: 19px;
background-position: -167px -364px;
}
.color-swatch {
border-radius: 100%;
width: 11px;
height: 11px;
}
/*
* removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs
@ -3161,6 +3272,12 @@ footer {
background: #f8f9fa;
}
.ticketZoom-controls {
@extend .horizontal;
@extend .justify-end;
@extend .center;
}
.ticketZoom .page-header {
margin-top: 24px;
margin-bottom: 0;
@ -4288,6 +4405,8 @@ footer {
padding: 0;
min-width: 100%;
color: white;
text-transform: initial;
letter-spacing: 0;
background: hsl(234,10%,19%);
border-radius: 0;
border: none;
@ -4337,12 +4456,35 @@ footer {
display: block;
}
.dropdown.dropdown--actions li {
padding: 0;
}
.dropdown.dropdown--actions {
li {
padding: 0;
@extend .horizontal;
@extend .center;
}
.dropdown.dropdown--actions a {
@extend .u-clickable;
.dropdown-iconSpacer,
.dropdown-activeSpacer {
@extend .horizontal;
@extend .center;
}
.dropdown-iconSpacer {
width: 25px;
}
.dropdown-activeSpacer {
width: 34px;
margin-left: auto;
@extend .justify-end;
}
a {
@extend .u-clickable;
@extend .horizontal;
min-width: 100%;
padding: 3px 18px;
}
}
.recipientList,
@ -5083,6 +5225,22 @@ label + .wizard-buttonList {
}
}
[data-highlightcolor=Yellow]::selection { background: #f7e7b2; }
[data-highlightcolor=Yellow]::-moz-selection { background: #f7e7b2; }
[data-highlightcolor=Green]::selection { background: #bce7b6; }
[data-highlightcolor=Green]::-moz-selection { background: #bce7b6; }
[data-highlightcolor=Blue]::selection { background: #b3ddf9; }
[data-highlightcolor=Blue]::-moz-selection { background: #b3ddf9; }
[data-highlightcolor=Pink]::selection { background: #fea9c5; }
[data-highlightcolor=Pink]::-moz-selection { background: #fea9c5; }
[data-highlightcolor=Purple]::selection { background: #eac5ee; }
[data-highlightcolor=Purple]::-moz-selection { background: #eac5ee; }
.overview-navigator {
display: inherit;

View file

@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="341px" height="363px" viewBox="0 0 341 363" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<svg width="341px" height="383px" viewBox="0 0 341 383" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>Slice 1</title>
<title>sprite.svg</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="97" height="96"></rect>
@ -168,10 +168,10 @@
<path d="M141.170114,133.085219 L148.679484,136.687207 L151.975933,135.106013 L144.521486,131.53037 L141.170114,133.085219 Z M148.602528,129.629785 L155.779671,133.277424 L152.882876,134.666917 L145.440208,131.096924 L148.602528,129.629785 Z M141.002528,133.83506 L141.002528,141.087162 L148.266244,144.764439 L148.266244,137.476474 L141.002528,133.83506 Z M156.002528,141.331426 L148.973188,144.883319 L148.973188,137.414279 L156.002528,134.100753 L156.002528,141.331426 Z" id="package-white" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
<path d="M157,117 C157,116.447715 157.44892,116 158.007484,116 L170.992516,116 C171.548934,116 172,116.443865 172,117 C172,117.552285 171.55108,118 170.992516,118 L158.007484,118 C157.451066,118 157,117.556135 157,117 Z M157,121 C157,120.447715 157.44892,120 158.007484,120 L170.992516,120 C171.548934,120 172,120.443865 172,121 C172,121.552285 171.55108,122 170.992516,122 L158.007484,122 C157.451066,122 157,121.556135 157,121 Z M157,125 C157,124.447715 157.44892,124 158.007484,124 L170.992516,124 C171.548934,124 172,124.443865 172,125 C172,125.552285 171.55108,126 170.992516,126 L158.007484,126 C157.451066,126 157,125.556135 157,125 Z M157,129 C157,128.447715 157.44892,128 158.007484,128 L170.992516,128 C171.548934,128 172,128.443865 172,129 C172,129.552285 171.55108,130 170.992516,130 L158.007484,130 C157.451066,130 157,129.556135 157,129 Z" id="list-dark" fill="#808080" sketch:type="MSShapeGroup"></path>
<path d="M157,132 C157,131.447715 157.44892,131 158.007484,131 L170.992516,131 C171.548934,131 172,131.443865 172,132 C172,132.552285 171.55108,133 170.992516,133 L158.007484,133 C157.451066,133 157,132.556135 157,132 Z M157,136 C157,135.447715 157.44892,135 158.007484,135 L170.992516,135 C171.548934,135 172,135.443865 172,136 C172,136.552285 171.55108,137 170.992516,137 L158.007484,137 C157.451066,137 157,136.556135 157,136 Z M157,140 C157,139.447715 157.44892,139 158.007484,139 L170.992516,139 C171.548934,139 172,139.443865 172,140 C172,140.552285 171.55108,141 170.992516,141 L158.007484,141 C157.451066,141 157,140.556135 157,140 Z M157,144 C157,143.447715 157.44892,143 158.007484,143 L170.992516,143 C171.548934,143 172,143.443865 172,144 C172,144.552285 171.55108,145 170.992516,145 L158.007484,145 C157.451066,145 157,144.556135 157,144 Z" id="list-white" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
<path d="M2.70710678,312.292893 L2.71421284,313.699929 L7.61421284,308.699929 L6.18578716,307.300071 L1.28578716,312.300071 L0.592892858,313.007106 L1.29289322,313.707107 L6.19289322,318.607107 L7.60710678,317.192893 L2.70710678,312.292893 L2.70710678,312.292893 Z" id="arrow.left" fill="#000000" sketch:type="MSShapeGroup"></path>
<path d="M14.1928932,313.607107 L14.1857872,312.200071 L9.28578716,317.200071 L10.7142128,318.599929 L15.6142128,313.599929 L16.3071071,312.892894 L15.6071068,312.192893 L10.7071068,307.292893 L9.29289322,308.707107 L14.1928932,313.607107 L14.1928932,313.607107 Z" id="arrow.right" fill="#000000" sketch:type="MSShapeGroup"></path>
<path d="M20.7071068,312.292893 L20.7142128,313.699929 L25.6142128,308.699929 L24.1857872,307.300071 L19.2857872,312.300071 L18.5928929,313.007106 L19.2928932,313.707107 L24.1928932,318.607107 L25.6071068,317.192893 L20.7071068,312.292893 L20.7071068,312.292893 Z" id="white.arrow.left" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
<path d="M32.1857872,312.200071 L27.2857872,317.200071 L28.7142128,318.599929 L33.6142128,313.599929 L34.3071071,312.892894 L33.6071068,312.192893 L28.7071068,307.292893 L27.2928932,308.707107 L32.1928932,313.607107 L32.1857872,312.200071 L32.1857872,312.200071 Z" id="white.arrow.right" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
<path d="M3.49999997,313.007106 L7.61421284,308.699929 L6.18578716,307.300071 L1.28578716,312.300071 L0.592892858,313.007106 L1.29289322,313.707107 L6.19289322,318.607107 L7.60710678,317.192893 L3.49999997,313.007106 Z" id="arrow.left" fill="#000000" sketch:type="MSShapeGroup"></path>
<path d="M13.5000001,312.892894 L9.28578716,317.200071 L10.7142128,318.599929 L15.6142128,313.599929 L16.3071071,312.892894 L15.6071068,312.192893 L10.7071068,307.292893 L9.29289322,308.707107 L13.5000001,312.892894 Z" id="arrow.right" fill="#000000" sketch:type="MSShapeGroup"></path>
<path d="M25.6142128,308.699929 L24.1857872,307.300071 L19.2857872,312.300071 L18.5928929,313.007106 L19.2928932,313.707107 L24.1928932,318.607107 L25.6071068,317.192893 L21.5,313.007106 L25.6142128,308.699929 Z" id="white.arrow.left" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
<path d="M31.5000001,312.892894 L27.2857872,317.200071 L28.7142128,318.599929 L33.6142128,313.599929 L34.3071071,312.892894 L33.6071068,312.192893 L28.7071068,307.292893 L27.2928932,308.707107 L31.5000001,312.892894 Z" id="white.arrow.right" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
<path d="M36.5,307.5 L45.5,307.5 L45.5,316.5 L36.5,316.5 L36.5,307.5 L36.5,307.5 Z" id="checkbox" stroke="#CBCBCB" sketch:type="MSShapeGroup"></path>
<g id="checkox:checked" sketch:type="MSLayerGroup" transform="translate(47.000000, 307.000000)">
<path d="M0.5,0.5 L9.5,0.5 L9.5,9.5 L0.5,9.5 L0.5,0.5 L0.5,0.5 Z" id="checkbox" stroke="#000000" sketch:type="MSShapeGroup"></path>
@ -184,6 +184,10 @@
</g>
<path d="M86.8928943,315.114214 L92.6000011,309.407107 L91.1857875,307.992893 L86.9000011,312.292893 L82.6000011,307.992893 L81.1857875,309.407107 L86.8928943,315.114214 L86.8928943,315.114214 Z" id="select-arrow" fill="#C5C5C5" sketch:type="MSShapeGroup"></path>
<path d="M112.792894,307 L114.292894,310.411732 L117.792894,310.962011 L115.292894,313.713408 L115.892894,317.455307 L112.792894,315.694413 L109.692894,317.455307 L110.292894,313.713408 L107.792894,310.962011 L111.292894,310.411732 L112.792894,307 L112.792894,307 Z" id="bookmark-filled" fill="#FAAB00" sketch:type="MSShapeGroup"></path>
<path d="M137.407036,310.707035 L141.521249,306.399858 L140.092823,305 L135.192823,310 L134.499929,310.707035 L135.199929,311.407036 L140.099929,316.307036 L141.514143,314.892822 L137.407036,310.707035 Z" id="white.arrow.up" fill="#FFFFFF" sketch:type="MSShapeGroup" transform="translate(138.010589, 310.653518) rotate(-270.000000) translate(-138.010589, -310.653518) "></path>
<path d="M124.407036,310.707035 L128.521249,306.399858 L127.092823,305 L122.192823,310 L121.499929,310.707035 L122.199929,311.407036 L127.099929,316.307036 L128.514143,314.892822 L124.407036,310.707035 Z" id="arrow.up" fill="#000000" sketch:type="MSShapeGroup" transform="translate(125.010589, 310.653518) rotate(-270.000000) translate(-125.010589, -310.653518) "></path>
<path d="M151.641178,311.057143 L147.426965,315.36432 L148.855391,316.764178 L153.755391,311.764178 L154.448285,311.057143 L153.748285,310.357142 L148.848285,305.457142 L147.434071,306.871356 L151.641178,311.057143 Z" id="arrow.down" fill="#000000" sketch:type="MSShapeGroup" transform="translate(150.937625, 311.110660) rotate(-270.000000) translate(-150.937625, -311.110660) "></path>
<path d="M164.641178,311.057143 L160.426965,315.36432 L161.855391,316.764178 L166.755391,311.764178 L167.448285,311.057143 L166.748285,310.357142 L161.848285,305.457142 L160.434071,306.871356 L164.641178,311.057143 Z" id="white.arrow.down" fill="#FFFFFF" sketch:type="MSShapeGroup" transform="translate(163.937625, 311.110660) rotate(-270.000000) translate(-163.937625, -311.110660) "></path>
<path d="M99.792894,307.720062 L101.292894,311.131794 L104.792894,311.682073 L102.292894,314.43347 L102.892894,318.175369 L99.792894,316.414475 L96.692894,318.175369 L97.292894,314.43347 L94.792894,311.682073 L98.292894,311.131794 L99.792894,307.720062 L99.792894,307.720062 Z" id="bookmark-empty" stroke="#808080" opacity="0.3" sketch:type="MSShapeGroup"></path>
<path d="M4.63842857,325.446435 C6.0955925,325.446435 7.27685714,324.227209 7.27685714,322.723217 C7.27685714,321.219226 6.0955925,320 4.63842857,320 C3.18126464,320 2,321.219226 2,322.723217 C2,324.227209 3.18126464,325.446435 4.63842857,325.446435 L4.63842857,325.446435 L4.63842857,325.446435 Z M11.6386813,325.446957 C13.0959848,325.446957 14.2773626,324.227614 14.2773626,322.723478 C14.2773626,321.219343 13.0959848,320 11.6386813,320 C10.1813778,320 9,321.219343 9,322.723478 C9,324.227614 10.1813778,325.446957 11.6386813,325.446957 L11.6386813,325.446957 L11.6386813,325.446957 Z M17.6386813,325.446957 C19.0959848,325.446957 20.2773626,324.227614 20.2773626,322.723478 C20.2773626,321.219343 19.0959848,320 17.6386813,320 C16.1813778,320 15,321.219343 15,322.723478 C15,324.227614 16.1813778,325.446957 17.6386813,325.446957 L17.6386813,325.446957 L17.6386813,325.446957 Z M15.2232198,326.311217 L7.69893407,326.311217 C7.05594505,326.311217 6.53478022,326.84913 6.53478022,327.512261 L6.53478022,334.378348 C6.53478022,335.042261 7.05594505,335.579391 7.69893407,335.579391 L8.05707692,335.579391 L8.05707692,344.070696 L14.7278352,344.070696 L14.7278352,335.579391 L15.2232198,335.579391 C15.8662088,335.579391 16.3868681,335.042 16.3868681,334.378348 L16.3868681,327.512261 C16.3866154,326.849391 15.8662088,326.311217 15.2232198,326.311217 L15.2232198,326.311217 L15.2232198,326.311217 Z M4.89343956,334.378609 L4.89343956,327.512522 C4.89343956,327.083131 4.99024176,326.678783 5.15326374,326.311479 L1.26752747,326.311479 C0.625043956,326.311479 0.103879121,326.849392 0.103879121,327.512522 L0.103879121,334.378609 C0.103879121,335.042522 0.625043956,335.579653 1.26752747,335.579653 L1.62592308,335.579653 L1.62592308,344.070957 L6.41523077,344.070957 L6.41523077,336.953392 C5.51216484,336.472348 4.89343956,335.498522 4.89343956,334.378609 L4.89343956,334.378609 L4.89343956,334.378609 Z M21.7572418,326.311218 L17.7691429,326.311218 C17.9321648,326.678522 18.0292198,327.083131 18.0292198,327.512261 L18.0292198,334.378348 C18.0292198,335.554348 17.3468022,336.567566 16.3696813,337.020957 L16.3696813,344.070696 L21.2623626,344.070696 L21.2623626,335.579392 L21.756989,335.579392 C22.3997253,335.579392 22.9211429,335.042 22.9211429,334.378348 L22.9211429,327.512261 C22.9213956,326.849392 22.3997253,326.311218 21.7572418,326.311218 L21.7572418,326.311218 L21.7572418,326.311218 Z" id="dark-group" fill="#586066" sketch:type="MSShapeGroup"></path>
<path d="M42.9411437,320.857905 C42.8674423,320.340726 42.6070309,320.090217 42.0980002,320.034661 C41.9142382,320.015469 41.7285108,320.001327 41.5437661,320.001327 C36.1851864,319.999307 30.8266068,319.999307 25.4670445,320.003347 C25.219408,320.003347 24.969806,320.034661 24.7241349,320.077086 C24.3408878,320.139713 24.1237145,320.395272 24.0618054,320.781136 C24.0244634,321.013463 24.0028443,321.25286 24.0028443,321.489227 C23.9989136,325.132713 23.9998963,328.77721 24.0008789,332.420696 C24.0008789,332.524738 24.0028443,332.62979 24.0087404,332.733832 C24.0559093,333.546975 24.3389225,333.842939 25.1329317,333.858091 C26.1873524,333.877283 27.1995176,333.874252 28.2539383,333.880313 C28.476025,333.882333 28.9133197,333.880313 28.9133197,333.880313 L28.9133197,334.233854 C28.9133197,335.575287 28.9545925,336.91571 28.9585232,338.259164 C28.9595059,338.515733 28.9044755,338.830889 29.2061598,338.964224 C29.5009652,339.094529 29.694554,338.83998 29.8812641,338.66422 C31.5174341,337.133895 33.1565522,335.60559 34.7858434,334.068195 C34.9352115,333.927789 35.0855623,333.877283 35.2830819,333.878293 C37.2828452,333.882333 39.2826086,333.882333 41.2804066,333.880313 C41.5309911,333.880313 41.7825584,333.870212 42.0311777,333.846979 C42.6237365,333.794453 42.8733384,333.553036 42.958832,332.951007 C42.9843818,332.764136 42.9981394,332.572214 42.9981394,332.383322 C43.0001048,328.797412 43.0010874,325.210492 42.9981394,321.622562 C42.996174,321.369023 42.9765203,321.110434 42.9411437,320.857905 L42.9411437,320.857905 L42.9411437,320.857905 Z M27.9975446,324 C27.446616,324 27,324.443865 27,325 C27,325.552285 27.4463114,326 27.9975446,326 L35.0024554,326 C35.553384,326 36,325.556135 36,325 C36,324.447715 35.5536886,324 35.0024554,324 L27.9975446,324 L27.9975446,324 Z M28.0006529,328 C27.4480076,328 27,328.443865 27,329 C27,329.552285 27.4484532,330 28.0006529,330 L39.027347,330 C39.5799924,330 40.028,329.556135 40.028,329 C40.028,328.447715 39.5795467,328 39.027347,328 L28.0006529,328 L28.0006529,328 Z" id="dark-message" fill="#586066" sketch:type="MSShapeGroup"></path>
@ -198,7 +202,10 @@
<path d="M100.290434,348.295361 C100.679595,347.903479 101.312756,347.901273 101.704639,348.290434 C102.096521,348.679595 102.098728,349.312756 101.709566,349.704639 L96.8909934,354.556908 L101.703902,359.369816 C102.094426,359.760341 102.094426,360.393506 101.703902,360.78403 C101.313377,361.174554 100.680212,361.174554 100.289688,360.78403 L95.4817074,355.976049 L90.7095663,360.781562 C90.3204051,361.173444 89.6872439,361.175651 89.2953613,360.786489 C88.9034787,360.397328 88.9012726,359.764167 89.2904338,359.372284 L94.0674852,354.561827 L89.2127651,349.707107 C88.8222408,349.316583 88.8222408,348.683418 89.2127651,348.292893 C89.6032893,347.902369 90.2364543,347.902369 90.6269786,348.292893 L95.4767712,353.142686 L100.290434,348.295361 L100.290434,348.295361 Z" id="close" fill="#000000" sketch:type="MSShapeGroup"></path>
<path d="M119,353 C119,348.581722 115.418278,345 111,345 C106.581722,345 103,348.581722 103,353 C103,357.418278 106.581722,361 111,361 C115.418278,361 119,357.418278 119,353 L119,353 L119,353 Z M118,353 C118,349.134007 114.865993,346 111,346 C107.134007,346 104,349.134007 104,353 C104,356.865993 107.134007,360 111,360 C114.865993,360 118,356.865993 118,353 L118,353 L118,353 Z M111.860632,354.013214 C111.860632,352.717029 113.871954,352.839943 113.871954,351.029753 C113.871954,350.035266 113.067426,349.152519 111.368976,349.152519 C110.262748,349.152519 109.435872,349.610653 108.787779,350.359312 L109.927528,351.242059 C110.329793,350.783924 110.776753,350.560444 111.223714,350.560444 C111.71537,350.560444 112.005894,350.783924 112.005894,351.186189 C112.005894,352.102458 110.2404,352.035414 110.2404,353.957344 L110.2404,354.236694 L111.860632,354.236694 L111.860632,354.013214 L111.860632,354.013214 Z M111.067277,357.119508 C111.637152,357.119508 112.084112,356.661374 112.084112,356.102673 C112.084112,355.543973 111.637152,355.085838 111.067277,355.085838 C110.497403,355.085838 110.050442,355.543973 110.050442,356.102673 C110.050442,356.661374 110.497403,357.119508 111.067277,357.119508 L111.067277,357.119508 L111.067277,357.119508 Z" id="help" fill="#000000" sketch:type="MSShapeGroup"></path>
<path d="M124,349 L124,355 L130,355 L130,349 L124,349 L124,349 Z M134.071068,355 L119.928932,355 L127,362.071068 L134.071068,355 L134.071068,355 Z" id="download-white" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
<path d="M142.2,357.3 L138.996546,354.378886 L137.875432,353.38234 L135.88234,355.624568 L137.003454,356.621114 L141.503454,360.621114 L142.762683,361.740429 L143.728848,360.360194 L150.728848,350.360194 L151.589041,349.131346 L149.131346,347.410959 L148.271152,348.639806 L142.2,357.3 L142.2,357.3 Z" id="checkmark" fill="#38AE6A" sketch:type="MSShapeGroup"></path>
<path d="M142.202439,378.577087 C146.01226,370.441271 151.589041,366.335808 151.589041,366.335808 L151.589041,364.740014 C151.589041,364.740014 145.6755,367.346578 141.093408,373.461704 C141.093408,373.461704 138.959385,371.157363 137.741806,370.587413 C136.524227,370.017463 135.725842,371.975277 135.725842,371.975277 C135.725842,371.975277 138.75454,374.793316 142.202439,378.577087 Z" id=".white.checkmark" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
<path d="M142.202439,362.577087 C146.01226,354.441271 151.589041,350.335808 151.589041,350.335808 L151.589041,348.740014 C151.589041,348.740014 145.6755,351.346578 141.093408,357.461704 C141.093408,357.461704 138.959385,355.157363 137.741806,354.587413 C136.524227,354.017463 135.725842,355.975277 135.725842,355.975277 C135.725842,355.975277 138.75454,358.793316 142.202439,362.577087 Z" id="checkmark" fill="#38AE6A" sketch:type="MSShapeGroup"></path>
<path d="M164.370562,349.195361 C164.759723,348.803479 165.392884,348.801273 165.784767,349.190434 C166.17665,349.579595 166.178856,350.212756 165.789694,350.604639 L160.971122,355.456908 L165.78403,360.269816 C166.174554,360.660341 166.174554,361.293506 165.78403,361.68403 C165.393506,362.074554 164.760341,362.074554 164.369816,361.68403 L159.561836,356.876049 L154.789694,361.681562 C154.400533,362.073444 153.767372,362.075651 153.375489,361.686489 C152.983607,361.297328 152.981401,360.664167 153.370562,360.272284 L158.147613,355.461827 L153.292893,350.607107 C152.902369,350.216583 152.902369,349.583418 153.292893,349.192893 C153.683417,348.802369 154.316582,348.802369 154.707107,349.192893 L159.556899,354.042686 L164.370562,349.195361 L164.370562,349.195361 Z" id="error" fill="#F35910" sketch:type="MSShapeGroup"></path>
<path d="M174.377737,358.143262 L178.524039,346.233097 L173.861887,343.976923 C173.861887,343.976923 168.995307,352.078538 167.532146,354.825738 L174.377737,358.143262 L174.377737,358.143262 Z M174.068636,358.73749 C173.69432,359.183129 172.795208,360.056263 171.717791,359.72021 C170.293088,359.275837 170.706642,359.355707 170.706642,359.355707 L170.404616,360.086294 L167.848534,359.004205 L168.391268,358.145929 C168.391268,358.145929 166.37686,357.565985 167.205748,355.493067 L174.068636,358.73749 L174.068636,358.73749 Z M167.755887,359.980312 L167,361.813939 L169.781939,362.112795 L170.248109,361.206091 L167.755887,359.980312 Z M167.119967,362.318283 L183.856531,362.318283 L183.856531,362.777642 L167.119967,362.777642 L167.119967,362.318283 Z" id="marker" opacity="0.39" fill="#000000" sketch:type="MSShapeGroup"></path>
<path d="M174.377737,378.143262 L178.524039,366.233097 L173.861887,363.976923 C173.861887,363.976923 168.995307,372.078538 167.532146,374.825738 L174.377737,378.143262 L174.377737,378.143262 Z M174.068636,378.73749 C173.69432,379.183129 172.795208,380.056263 171.717791,379.72021 C170.293088,379.275837 170.706642,379.355707 170.706642,379.355707 L170.404616,380.086294 L167.848534,379.004205 L168.391268,378.145929 C168.391268,378.145929 166.37686,377.565985 167.205748,375.493067 L174.068636,378.73749 L174.068636,378.73749 Z M167.755887,379.980312 L167,381.813939 L169.781939,382.112795 L170.248109,381.206091 L167.755887,379.980312 Z M167.119967,382.318283 L183.856531,382.318283 L183.856531,382.777642 L167.119967,382.777642 L167.119967,382.318283 Z" id="marker-active" fill="#2596D9" sketch:type="MSShapeGroup"></path>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 115 KiB

After

Width:  |  Height:  |  Size: 119 KiB