Some search enhancements and fixes.

This commit is contained in:
Felix Niklas 2018-11-06 22:24:29 +01:00 committed by Martin Edenhofer
parent c2f4755a6c
commit 0db8c28bd5
10 changed files with 167 additions and 35 deletions

View file

@ -18,7 +18,7 @@ class App.Navigation extends App.ControllerWidgetPermanent
'focus #global-search': 'searchFocus'
'blur #global-search': 'searchBlur'
'keyup #global-search': 'listNavigate'
'click .js-global-search-result': 'andClose'
'click .js-global-search-result': 'emptyAndClose'
'click .js-details-link': 'openExtendedSearch'
'change .js-menu .js-switch input': 'switch'
@ -159,25 +159,26 @@ class App.Navigation extends App.ControllerWidgetPermanent
type: 'personal'
)
renderResult: (result = []) =>
renderResult: (result = [], noChange) =>
if noChange
return
@removePopovers()
# remove result if not result exists
if _.isEmpty(result)
@searchContainer.removeClass('open')
@globalSearch.close()
@searchResult.html('')
@searchContainer.removeClass('loading').addClass('no-match')
@searchResult.html(App.view('navigation/no_result')())
return
@searchContainer.removeClass('no-match loading')
# build markup
html = App.view('navigation/result')(
result: result
)
@searchResult.html(html)
# show result list
@searchContainer.addClass('open')
@renderPopovers()
render: ->
@ -202,26 +203,22 @@ class App.Navigation extends App.ControllerWidgetPermanent
searchFocus: (e) =>
@query = '' # reset query cache
@searchContainer.addClass('focused')
App.PopoverProvidable.anyPopoversDestroy()
@search()
@searchContainer.addClass('focused')
searchBlur: (e) =>
# delay to be able to click x
update = =>
query = @searchInput.val().trim()
if !query
@emptyAndClose()
return
@searchContainer.removeClass('focused')
@delay(update, 100, 'removeFocused')
listNavigate: (e) =>
if e.keyCode is 27 # close on esc
@emptyAndClose()
@searchInput.blur()
return
else if e.keyCode is 38 # up
@nudge(e, -1)
@ -230,14 +227,13 @@ class App.Navigation extends App.ControllerWidgetPermanent
@nudge(e, 1)
return
else if e.keyCode is 13 # enter
if @$('.global-search-menu .js-details-link.is-hover').get(0)
@openExtendedSearch()
return
href = @$('.global-search-result .nav-tab.is-hover').attr('href')
return if !href
@navigate(href)
@emptyAndClose()
@searchInput.blur()
href = @$('.global-search-result .nav-tab.is-hover').attr('href')
if href
@navigate(href)
else
@openExtendedSearch()
@emptyAndClose()
return
# on other keys, show result
@ -281,25 +277,33 @@ class App.Navigation extends App.ControllerWidgetPermanent
@scrollToIfNeeded(prev, false)
emptyAndClose: =>
@query = ''
@searchInput.val('')
@searchContainer.removeClass('filled').removeClass('open').removeClass('focused')
@searchContainer.removeClass('focused filled open no-match loading')
@globalSearch.close()
@delayedRemoveAnyPopover()
andClose: =>
@query = ''
@searchInput.blur()
@searchContainer.removeClass('open')
@searchContainer.removeClass('open no-match loading')
@globalSearch.close()
@delayedRemoveAnyPopover()
search: =>
query = @searchInput.val().trim()
return if !query
return if query is @query
@searchContainer.toggleClass('filled', !!query)
# if we started a new search and already typed something in
if query != '' and @query == ''
@searchContainer.addClass('open no-match loading')
@query = query
@searchContainer.toggleClass('filled', !!@query)
if @query == ''
@searchContainer.removeClass('open')
return
@globalSearch.search(query: @query)
filterNavbar: (values, user, parent = null) ->
@ -399,11 +403,11 @@ class App.Navigation extends App.ControllerWidgetPermanent
url = params.url
type = params.type
if type is 'menu'
@$('.js-menu .is-active, .js-details-link.is-active').removeClass('is-active')
@$('.js-menu .is-active').removeClass('is-active')
else
@$('.is-active').removeClass('is-active')
return if !url || url is '#'
@$("[href=\"#{url}\"]").addClass('is-active')
@$(".js-menu [href=\"#{url}\"], .tasks [href=\"#{url}\"]").addClass('is-active')
recentViewNavbarItemsRebuild: =>

View file

@ -45,10 +45,12 @@ class App.GlobalSearch extends App.Controller
renderTry: (result, query) =>
# if result hasn't changed, do not rerender
diff = false
if @lastQuery is query && @searchResultCache[query]
diff = difference(@searchResultCache[query].result, result)
return if diff isnt false && _.isEmpty(diff)
if _.isEmpty(diff)
@render(result, true)
return
@lastQuery = query
# cache search result

View file

@ -2,6 +2,7 @@
<form class="search-holder">
<input id="global-search" type="search" autocomplete="off">
<%- @Icon('magnifier') %>
<div class="search-loader"><%- @Icon('spinner-small') %></div>
<div class="empty-search js-emptySearch">
<%- @Icon('diagonal-cross') %>
</div>

View file

@ -0,0 +1,4 @@
<li class="global-search-detail-no-result alert alert--warning horizontal" role="alert">
<%- @Icon('mood-sad') %>
<span><%= @T('There is no match for your search.') %></span>
</li>

View file

@ -1,4 +1,4 @@
<div>
<div class="state-badge">
<%- @Icon(@object.icon(), @object.iconClass()) %> <span class="<%- @T(@object.iconTextClass()) %>"><%- @object.iconTitle() %></span>
</div>
<hr>

View file

@ -66,6 +66,7 @@
.icon-mood-bad { width: 60px; height: 59px; }
.icon-mood-good { width: 60px; height: 59px; }
.icon-mood-ok { width: 60px; height: 59px; }
.icon-mood-sad { width: 60px; height: 59px; }
.icon-mood-superbad { width: 60px; height: 59px; }
.icon-mood-supergood { width: 60px; height: 59px; }
.icon-mute { width: 16px; height: 16px; }
@ -97,6 +98,7 @@
.icon-signout { width: 15px; height: 19px; }
.icon-small-dot { width: 16px; height: 16px; }
.icon-sms { width: 17px; height: 17px; }
.icon-spinner-small { width: 15px; height: 15px; }
.icon-split { width: 16px; height: 17px; }
.icon-status-modified-outer-circle { width: 16px; height: 16px; }
.icon-status { width: 16px; height: 16px; }

View file

@ -2770,6 +2770,20 @@ ol.tabs li {
}
}
.icon-spinner-medium {
animation: spinIcon .9s steps(12) infinite;
}
.icon-spinner-small {
animation: spinIcon .9s steps(8) infinite;
}
@keyframes spinIcon {
to {
transform: rotate(-1turn);
}
}
.color-swatch {
padding: 2px;
margin: -2px 0 -4px;
@ -3424,12 +3438,25 @@ footer {
fill: $task-state-pending-color;
}
.state-badge {
display: flex;
align-items: center;
.icon-task-state {
margin-right: 2px;
margin-top: 0;
display: inline;
vertical-align: middle;
}
}
.search {
padding: 11px 5px 4px 10px;
@include rtl(padding, 11px 10px 4px 0px);
border-bottom: 1px solid rgba(240,250,255,.05);
flex-shrink: 0;
display: flex;
align-items: flex-start;
background-color: inherit;
}
@ -3437,7 +3464,8 @@ footer {
flex: 1;
border-radius: 15px;
position: relative;
transition: 240ms;
transition: margin-right 120ms;
will-change: margin-right;
}
.empty-search {
@ -3483,18 +3511,46 @@ footer {
-webkit-appearance: none;
}
.search .search-loader {
position: absolute;
top: 8px;
left: 10px;
z-index: 2;
opacity: 0;
transition: 0s;
transition: .1s 0s;
.icon {
fill: white;
opacity: 0.5;
}
}
.search.loading .search-loader {
opacity: 1;
transition: .2s .5s;
}
.search .icon-magnifier {
position: absolute;
top: 8px;
left: 10px;
@include bidi-style(left, 10px, right, auto);
z-index: 2;
opacity: 0.5;
opacity: .5;
fill: white;
transition: 0s;
transition: .1s 0s;
}
.search.loading .icon-magnifier {
opacity: 0;
transition: .2s .5s;
}
.search.focused .search-holder {
@include bidi-style(margin-right, -46px, margin-left, 0);
transition: margin-right 240ms;
@include bidi-style(margin-right, -59px, margin-left, 0);
}
.search.focused .logo {
@ -3560,6 +3616,10 @@ footer {
padding: 9px 15px 8px 0;
margin-bottom: 7px;
height: auto !important;
.no-match & {
display: none;
}
.nav-tab-icon {
width: 18px;
@ -3587,6 +3647,15 @@ footer {
list-style: none;
}
.global-search-detail-no-result {
margin: 0 10px;
.icon {
width: 30px;
height: 29px;
}
}
.user-menu {
padding: 0;
margin: 0;
@ -5848,6 +5917,11 @@ footer {
border-radius: 3px;
color: white;
border: none;
.icon {
margin-right: 10px;
fill: currentColor;
}
&.alert--info {
background: hsl(203,65%,55%);

View file

@ -460,6 +460,11 @@
mood-ok
</title>
<path d="M60 5.108c0-.82-.062-1.577-.187-2.396-.25-1.577-1.06-2.397-2.679-2.586C56.574.063 55.95 0 55.389 0H4.673c-.81 0-1.558.126-2.368.252C1.121.442.436 1.262.187 2.46.062 3.216 0 3.91 0 4.666V39.54c.125 2.522 1.06 3.468 3.551 3.468 3.303.063 6.792.063 10.156.063.686 0 1.807.063 1.807.063v1.072c0 4.162.062 8.324.062 12.486 0 .82 0 1.766.935 2.207.934.379 1.495-.378 2.056-.946a3177.51 3177.51 0 0 1 15.452-14.251c.498-.442.934-.568 1.557-.568h18.941c.81 0 1.558-.063 2.368-.126 1.869-.19 2.679-.883 2.928-2.775.062-.567.125-1.198.125-1.765C60 27.368 60 16.27 60 5.107zM22.718 18.453c0 2.448-2 4.394-4.375 4.394-2.437 0-4.375-2.009-4.375-4.394 0-2.448 2-4.393 4.375-4.393 2.375-.063 4.375 1.945 4.375 4.393zm23.125 0c0 2.448-2 4.394-4.375 4.394-2.437 0-4.375-2.009-4.375-4.394 0-2.448 2-4.393 4.375-4.393 2.375-.063 4.375 1.945 4.375 4.393zM36.77 32H23.231C22.554 32 22 31.325 22 30.5s.554-1.5 1.23-1.5h13.54c.676 0 1.23.675 1.23 1.5s-.554 1.5-1.23 1.5z" fill="#FAAB00" fill-rule="evenodd"/>
</symbol><symbol id="icon-mood-sad" viewBox="0 0 60 59">
<title>
mood-sad
</title>
<path d="M60 6.108c0-.82-.062-1.577-.187-2.396-.25-1.577-1.06-2.397-2.679-2.586C56.574 1.063 55.95 1 55.389 1H4.673c-.81 0-1.558.126-2.368.252C1.121 1.442.436 2.262.187 3.46.062 4.216 0 4.91 0 5.666V40.54c.125 2.522 1.06 3.468 3.551 3.468 3.303.063 6.73.063 10.032.063.685 0 1.744.063 1.744.063v1.072c0 4.162.125 8.324.187 12.486 0 .82.062 1.766.997 2.207.934.379 1.495-.378 2.056-.946a3177.51 3177.51 0 0 1 15.452-14.251c.498-.442.934-.568 1.557-.568h18.941c.81 0 1.558-.063 2.368-.126 1.869-.19 2.679-.883 2.928-2.775.062-.567.125-1.198.125-1.765C60 28.368 60 17.27 60 6.107zM18.781 21.336c-2.438 0-4.375-2.008-4.375-4.393 0-2.448 2-4.394 4.375-4.394 2.437 0 4.375 2.008 4.375 4.394.062 2.385-1.938 4.393-4.375 4.393zm27.562-4.393c0 2.447-2 4.393-4.375 4.393-2.437 0-4.375-2.008-4.375-4.393 0-2.448 2-4.394 4.375-4.394 2.375-.063 4.375 1.946 4.375 4.394zm-24.1 16.31c-.5-.439-.563-1.255-.063-1.757a10.764 10.764 0 0 1 8-3.515c3.063 0 5.938 1.255 8 3.515.438.502.438 1.318-.062 1.757-.5.44-1.313.44-1.75-.062-1.625-1.758-3.75-2.7-6.125-2.7-2.313 0-4.563 1.005-6.125 2.7-.563.502-1.375.502-1.875.062z" fill-rule="evenodd"/>
</symbol><symbol id="icon-mood-superbad" viewBox="0 0 60 59">
<title>
mood-superbad
@ -649,6 +654,20 @@
sms
</title>
<path d="M7.616 13.923L3.25 16.75l.714-3.847C1.582 11.69 0 9.546 0 7.105 0 3.319 3.806.25 8.5.25S17 3.319 17 7.105c0 3.786-3.806 6.855-8.5 6.855-.298 0-.593-.013-.884-.037zm-3.71-9.248c-.984 0-1.708.522-1.708 1.338 0 .689.39 1.117 1.448 1.438.69.208.868.361.868.703 0 .354-.287.568-.752.568-.47 0-.847-.167-1.195-.455L2 8.877c.39.367.977.661 1.797.661 1.181 0 1.878-.602 1.878-1.465 0-.856-.512-1.217-1.407-1.498-.738-.228-.915-.348-.915-.642 0-.295.246-.455.635-.455.382 0 .71.127 1.038.388l.52-.596c-.417-.388-.916-.595-1.64-.595zm6.729.114H9.214L8.55 7.933l-.71-3.144H6.427L6.07 9.425h1.093l.082-1.8c.028-.649.028-1.224-.02-1.906l.779 3.217h1.059l.73-3.217c-.034.575-.02 1.244.014 1.893l.082 1.813h1.1l-.355-4.636zm2.596-.114c-.984 0-1.708.522-1.708 1.338 0 .689.39 1.117 1.448 1.438.69.208.868.361.868.703 0 .354-.287.568-.752.568-.471 0-.847-.167-1.195-.455l-.567.61c.39.367.977.661 1.796.661 1.182 0 1.879-.602 1.879-1.465 0-.856-.512-1.217-1.407-1.498-.738-.228-.916-.348-.916-.642 0-.295.246-.455.636-.455.382 0 .71.127 1.038.388l.52-.596c-.418-.388-.916-.595-1.64-.595z" fill-rule="evenodd"/>
</symbol><symbol id="icon-spinner-small" viewBox="0 0 15 15">
<title>
spinner-small
</title>
<g fill-rule="evenodd">
<path d="M6.875.625a.625.625 0 1 1 1.25 0v2.5a.625.625 0 1 1-1.25 0v-2.5z" fill-opacity=".35" fill-rule="nonzero"/>
<path d="M11.92 2.197a.625.625 0 0 1 .883.884l-1.767 1.767a.625.625 0 1 1-.884-.884l1.767-1.767z" fill-opacity=".16" fill-rule="nonzero"/>
<path d="M14.375 6.875a.625.625 0 1 1 0 1.25h-2.5a.625.625 0 1 1 0-1.25h2.5z" fill="none"/>
<path d="M12.803 11.92a.625.625 0 0 1-.884.883l-1.767-1.767a.625.625 0 1 1 .884-.884l1.767 1.767z" fill-rule="nonzero"/>
<path d="M8.125 14.375a.625.625 0 1 1-1.25 0v-2.5a.625.625 0 1 1 1.25 0v2.5z" fill-opacity=".91" fill-rule="nonzero"/>
<path d="M3.08 12.803a.625.625 0 0 1-.883-.884l1.767-1.767a.625.625 0 1 1 .884.884l-1.767 1.767z" fill-opacity=".8" fill-rule="nonzero"/>
<path d="M.625 8.125a.625.625 0 1 1 0-1.25h2.5a.625.625 0 1 1 0 1.25h-2.5z" fill-opacity=".67" fill-rule="nonzero"/>
<path d="M2.197 3.08a.625.625 0 1 1 .884-.883l1.767 1.767a.625.625 0 0 1-.884.884L2.197 3.081z" fill-opacity=".52" fill-rule="nonzero"/>
</g>
</symbol><symbol id="icon-split" viewBox="0 0 16 17">
<title>
split

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 78 KiB

View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="60px" height="59px" viewBox="0 0 60 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.1 (57501) - http://www.bohemiancoding.com/sketch -->
<title>mood-sad</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="mood-sad" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M60,6.107871 C60,5.288089 59.937695,4.531367 59.813084,3.711585 C59.563863,2.135082 58.753894,1.315301 57.133956,1.12612 C56.573209,1.06306 55.950156,1 55.389408,1 L4.672897,1 C3.862928,1 3.115265,1.12612 2.305296,1.252241 C1.121495,1.441421 0.436137,2.261202 0.186916,3.459345 C0.062305,4.216067 0,4.909727 0,5.66645 L0,39.592798 L0,40.538699 C0.124611,43.061105 1.05919,44.007006 3.551402,44.007006 C6.853583,44.070067 10.280374,44.070067 13.582555,44.070067 C14.267913,44.070067 15.327103,44.133127 15.327103,44.133127 L15.327103,45.205149 C15.327103,49.367117 15.451713,53.529085 15.514019,57.691054 C15.514019,58.510835 15.576324,59.456737 16.510903,59.898158 C17.445483,60.276519 18.006231,59.519797 18.566978,58.952256 C23.738318,54.159687 28.847352,49.430177 34.018692,44.700667 C34.517134,44.259247 34.953271,44.133127 35.576324,44.133127 L54.517134,44.133127 C55.327103,44.133127 56.074766,44.070067 56.884735,44.007006 C58.753894,43.817826 59.563863,43.124164 59.813084,41.232361 C59.875389,40.664819 59.937695,40.034219 59.937695,39.466677 C60,28.368094 60,17.269513 60,6.107871 L60,6.107871 L60,6.107871 Z M18.780981,21.33617 C16.343481,21.33617 14.405981,19.32766 14.405981,16.942553 C14.405981,14.494681 16.405981,12.548936 18.780981,12.548936 C21.218481,12.548936 23.155981,14.557447 23.155981,16.942553 C23.218481,19.32766 21.218481,21.33617 18.780981,21.33617 L18.780981,21.33617 L18.780981,21.33617 Z M46.343481,16.942553 C46.343481,19.390425 44.343481,21.33617 41.968481,21.33617 C39.530981,21.33617 37.593481,19.32766 37.593481,16.942553 C37.593481,14.494681 39.593481,12.548936 41.968481,12.548936 C44.343481,12.48617 46.343481,14.494681 46.343481,16.942553 L46.343481,16.942553 L46.343481,16.942553 Z M22.2429886,33.2534644 C21.7429886,32.8141024 21.6804886,31.9981444 22.1804886,31.4960174 C24.2429886,29.2364424 27.1179886,27.9811234 30.1804886,27.9811234 C33.2429886,27.9811234 36.1179886,29.2364424 38.1804886,31.4960174 C38.6179886,31.9981444 38.6179886,32.8141024 38.1179886,33.2534644 C37.6179886,33.6928254 36.8054886,33.6928254 36.3679886,33.1906984 C34.7429886,31.4332514 32.6179886,30.4917614 30.2429886,30.4917614 C27.9304886,30.4917614 25.6804886,31.4960174 24.1179886,33.1906984 C23.5554886,33.6928254 22.7429886,33.6928254 22.2429886,33.2534644 L22.2429886,33.2534644 L22.2429886,33.2534644 Z" id="sad" fill="#50E3C2"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

View file

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>spinner-small</title>
<desc>Created with Sketch.</desc>
<g id="spinner-small" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M6.875,0.625 C6.875,0.279822031 7.15482203,0 7.5,0 C7.84517797,0 8.125,0.279822031 8.125,0.625 L8.125,3.125 C8.125,3.47017797 7.84517797,3.75 7.5,3.75 C7.15482203,3.75 6.875,3.47017797 6.875,3.125 L6.875,0.625 Z" id="Path" fill-opacity="0.35" fill="#50E3C2" fill-rule="nonzero"></path>
<path d="M10.8524756,2.27252436 C10.8524756,1.92734639 11.1322977,1.64752436 11.4774756,1.64752436 C11.8226536,1.64752436 12.1024756,1.92734639 12.1024756,2.27252436 L12.1024756,4.77252436 C12.1024756,5.11770232 11.8226536,5.39752436 11.4774756,5.39752436 C11.1322977,5.39752436 10.8524756,5.11770232 10.8524756,4.77252436 L10.8524756,2.27252436 Z" id="Path" fill-opacity="0.16" fill="#50E3C2" fill-rule="nonzero" transform="translate(11.477476, 3.522524) rotate(45.000000) translate(-11.477476, -3.522524) "></path>
<path d="M12.5,6.25 C12.5,5.90482203 12.779822,5.625 13.125,5.625 C13.470178,5.625 13.75,5.90482203 13.75,6.25 L13.75,8.75 C13.75,9.09517797 13.470178,9.375 13.125,9.375 C12.779822,9.375 12.5,9.09517797 12.5,8.75 L12.5,6.25 Z" id="Path" fill-opacity="0" fill="#50E3C2" fill-rule="nonzero" transform="translate(13.125000, 7.500000) rotate(90.000000) translate(-13.125000, -7.500000) "></path>
<path d="M10.8524756,10.2274756 C10.8524756,9.88229768 11.1322977,9.60247564 11.4774756,9.60247564 C11.8226536,9.60247564 12.1024756,9.88229768 12.1024756,10.2274756 L12.1024756,12.7274756 C12.1024756,13.0726536 11.8226536,13.3524756 11.4774756,13.3524756 C11.1322977,13.3524756 10.8524756,13.0726536 10.8524756,12.7274756 L10.8524756,10.2274756 Z" id="Path" fill="#50E3C2" fill-rule="nonzero" transform="translate(11.477476, 11.477476) rotate(135.000000) translate(-11.477476, -11.477476) "></path>
<path d="M6.875,11.875 C6.875,11.529822 7.15482203,11.25 7.5,11.25 C7.84517797,11.25 8.125,11.529822 8.125,11.875 L8.125,14.375 C8.125,14.720178 7.84517797,15 7.5,15 C7.15482203,15 6.875,14.720178 6.875,14.375 L6.875,11.875 Z" id="Path" fill-opacity="0.91" fill="#50E3C2" fill-rule="nonzero" transform="translate(7.500000, 13.125000) rotate(180.000000) translate(-7.500000, -13.125000) "></path>
<path d="M2.89752436,10.2274756 C2.89752436,9.88229768 3.17734639,9.60247564 3.52252436,9.60247564 C3.86770232,9.60247564 4.14752436,9.88229768 4.14752436,10.2274756 L4.14752436,12.7274756 C4.14752436,13.0726536 3.86770232,13.3524756 3.52252436,13.3524756 C3.17734639,13.3524756 2.89752436,13.0726536 2.89752436,12.7274756 L2.89752436,10.2274756 Z" id="Path" fill-opacity="0.8" fill="#50E3C2" fill-rule="nonzero" transform="translate(3.522524, 11.477476) rotate(225.000000) translate(-3.522524, -11.477476) "></path>
<path d="M1.25,6.25 C1.25,5.90482203 1.52982203,5.625 1.875,5.625 C2.22017797,5.625 2.5,5.90482203 2.5,6.25 L2.5,8.75 C2.5,9.09517797 2.22017797,9.375 1.875,9.375 C1.52982203,9.375 1.25,9.09517797 1.25,8.75 L1.25,6.25 Z" id="Path" fill-opacity="0.67" fill="#50E3C2" fill-rule="nonzero" transform="translate(1.875000, 7.500000) rotate(270.000000) translate(-1.875000, -7.500000) "></path>
<path d="M2.89752436,2.27252436 C2.89752436,1.92734639 3.17734639,1.64752436 3.52252436,1.64752436 C3.86770232,1.64752436 4.14752436,1.92734639 4.14752436,2.27252436 L4.14752436,4.77252436 C4.14752436,5.11770232 3.86770232,5.39752436 3.52252436,5.39752436 C3.17734639,5.39752436 2.89752436,5.11770232 2.89752436,4.77252436 L2.89752436,2.27252436 Z" id="Path" fill-opacity="0.52" fill="#50E3C2" fill-rule="nonzero" transform="translate(3.522524, 3.522524) rotate(315.000000) translate(-3.522524, -3.522524) "></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.9 KiB