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

Added KB icon modifiers to categories and answers in editor mode.

Browse source
This commit is contained in:
Mantas Masalskis 2019-06-06 03:23:45 +02:00 committed by Martin Edenhofer
parent 0244ac9a87
commit 97e3d0b4f0
25 changed files with 235 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/assets/javascripts/app/controllers/knowledge_base/search_item.coffee
View file

@ -12,7 +12,8 @@ class App.KnowledgeBaseSearchItem extends App.Controller
data: ->
output = @details || {}
output['url'] = @object?.uiUrl("search-return/#{@pathSuffix}") || '#'
output['url'] = @object?.uiUrl("search-return/#{@pathSuffix}") || '#'
output['state'] = @object.parent().attributesForRendering(App.KnowledgeBaseLocale.localeFor(@object)).state
output
render: ->

4
app/assets/javascripts/app/lib/app_post/utils.coffee
View file

@ -952,9 +952,9 @@ class App.Utils
path = if window.svgPolyfill then '' else 'assets/images/icons.svg'
"<svg class=\"icon icon-#{name} #{className}\"><use xlink:href=\"#{path}#icon-#{name}\" /></svg>"
@fontIcon: (name, font) ->
@fontIcon: (name, font, className = '') ->
@loadIconFont(font)
"<i class=\"icon\" data-font=\"#{font}\">#{String.fromCharCode('0x'+ name)}</i>"
"<i class=\"icon #{className}\" data-font=\"#{font}\">#{String.fromCharCode('0x'+ name)}</i>"
@loadIconFont: (font) ->
el = $("[data-icon-font=\"#{font}\"]")

8
app/assets/javascripts/app/lib/mixins/knowledge_base_can_be_published.coffee
View file

@ -29,13 +29,7 @@ InstanceMethods =
@["#{state}_at"]
can_be_published_state_css: ->
switch @can_be_published_state()
when 'archived'
'label-danger'
when 'published'
'label-success'
when 'draft'
'label-subtle'
"state-#{@can_be_published_state()}"
can_be_published_quick_actions: ->
switch @can_be_published_state()

8
app/assets/javascripts/app/lib/mixins/knowledge_base_translatable.coffee
View file

@ -40,8 +40,11 @@ InstanceMethods =
else
attrs.editorOnly = false
attrs.state = @visibilityState(kb_locale)
if @ instanceof App.KnowledgeBaseAnswer
attrs.icon = 'knowledge-base-answer'
attrs.icon = 'knowledge-base-answer'
attrs.state = @can_be_published_state()
if options.isEditor
attrs.editorOnly = !@is_internally_published(kb_locale)
@ -53,9 +56,6 @@ InstanceMethods =
# else if attrs.editorOnly
# 'kb-item--invisible'
attrs.className = if attrs.editorOnly
'kb-item--invisible'
attrs.icons = {}
if attrs.missingTranslation

19
app/assets/javascripts/app/lib/mixins/view_helpers.coffee
View file

@ -142,8 +142,8 @@ App.ViewHelpers =
Icon: (name, className = '') ->
App.Utils.icon(name, className)
fontIcon: (name, font) ->
App.Utils.fontIcon(name, font)
fontIcon: (name, font, className = '') ->
App.Utils.fontIcon(name, font, className)
# define richtext helper
RichText: (string) ->
@ -199,3 +199,18 @@ App.ViewHelpers =
return false if _.isEmpty(contentType)
return true if contentType.match(/image\/(png|jpg|jpeg|gif)/i)
false
# icon with modifier based on visibility state
# params: className, iconset, addStateClass
iconWithModifier: (item, params) ->
if !params.className
params.className = ''
if params.addStateClass
params.className += " state-#{item.state}"
App.view('knowledge_base/_icon_with_modifier')(
item: item
className: params.className
iconset: params.iconset
)

8
app/assets/javascripts/app/models/knowledge_base_category.coffee
View file

@ -141,6 +141,14 @@ class App.KnowledgeBaseCategory extends App.Model
record.findDeepAnswer(callback)
)
visibilityState: (kb_locale) ->
if @visiblePublicly(kb_locale)
'published'
else if @visibleInternally(kb_locale)
'internal'
else
'draft'
visibleInternally: (kb_locale) =>
@findDeepAnswer( (record) ->
record.is_internally_published(kb_locale)

8
app/assets/javascripts/app/views/knowledge_base/_icon_with_modifier.jst.eco Normal file
View file

@ -0,0 +1,8 @@
<span class="modified-icon <%= @className %>">
<% if @item.iconFont: %>
<%- @fontIcon(@item.icon, @iconset, 'section-inner-icon') %>
<% else: %>
<%- @Icon(@item.icon, 'section-inner-icon') %>
<% end %>
<%- @Icon("#{@item.state}-modifier", 'modified-icon-modifier') %>
</span>

8
app/assets/javascripts/app/views/knowledge_base/_reader_list_item.jst.eco
View file

@ -1,10 +1,6 @@
<a href="<%- @item.url %>">
<span class="section-inner">
<% if @item.iconFont: %>
<%- @fontIcon(@item.icon, @iconset) %>
<% else: %>
<%- @Icon(@item.icon) %>
<% end %>
<span><%= @item.title %></span>
<%- @iconWithModifier(@item, className: 'section-inner-icon-holder', iconset: @iconset, addStateClass: true) %>
<span><%= @item.title %></span>
</span>
</a>

6
app/assets/javascripts/app/views/knowledge_base/content_can_be_published_header_suffix.jst.eco
View file

@ -2,14 +2,14 @@
<span class="<%= @object.can_be_published_state_css() %>"><span class="label-text"><%- @T(@object.can_be_published_state()) %></span></span>
<% if @object.can_be_published_internal_in_future(): %>
<span class="label-warning"><span class="label-text"><%- @T('Will be internal') %> <%= @humanTime @object.internal_at %></span></span>
<span class="label-warning"><span class="label-text"><%- @T('Will be internal') %> <%- @humanTime(@object.internal_at) %></span></span>
<% end %>
<% if @object.can_be_published_publish_in_future(): %>
<span class="label-warning"><span class="label-text"><%- @T('Will be published') %> <%= @humanTime @object.published_at %></span></span>
<span class="label-warning"><span class="label-text"><%- @T('Will be published') %> <%- @humanTime(@object.published_at) %></span></span>
<% end %>
<% if @object.can_be_published_archive_in_future(): %>
<span class="label-warning"><span class="label-text"><%- @T('Will be archived') %> <%- @humanTime @object.archived_at %></span></span>
<span class="label-warning"><span class="label-text"><%- @T('Will be archived') %> <%- @humanTime(@object.archived_at) %></span></span>
<% end %>
</span>

8
app/assets/javascripts/app/views/knowledge_base/navigation.jst.eco
View file

@ -1,12 +1,8 @@
<nav class="breadcrumbs">
<% for item in @crumbs: %>
<a class="breadcrumb" <% if item.url: %>href="<%= item.url %><% end %>">
<% if icon = item.icon: %>
<% if item.iconFont: %>
<%- @fontIcon(icon, @iconset) %>
<% else: %>
<%- @Icon(icon) %>
<% end %>
<% if item.icon: %>
<%- @iconWithModifier(item, iconset: @iconset) %>
<% end %>
<%= item.title %>

8
app/assets/javascripts/app/views/knowledge_base/search_item.jst.eco
View file

@ -1,14 +1,10 @@
<a href="<%= @data.url %>">
<span class="section-inner">
<% if @data.fontName: %>
<%- @fontIcon(@data.iconName, @data.fontName) %>
<% else: %>
<%- @Icon(@data.iconName) %>
<% end %>
<%- @iconWithModifier(@data, className: 'section-inner-icon-holder', iconset: @iconset, addStateClass: true) %>
<span class="section-inner-text">
<span class="section-inner-title"><%- @data.title %></span>
<span class="section-inner-detail">
<span class="section-inner-date"><%- @humanTime(@data.date) %></span> <%- @data.body %>
<span class="section-inner-date"><%- @humanTime(@data.date) %></span> <% if @data.body: %><span class="section-inner-body"><%- @data.body %></span><% end %>
</span>
</span>
</span>

1
app/assets/javascripts/app/views/knowledge_base/sidebar/generic_list.jst.eco
View file

@ -16,6 +16,7 @@
<% for elem in @items: %>
<li>
<a href="<%= elem.url %>" class="<%= elem.className %>">
<%- @iconWithModifier(elem, className: 'section-inner-icon-holder', iconset: @iconset, addStateClass: true) %>
<span class="u-textTruncate"><%= elem.title %></span>
<% if elem.icons: %>

2
app/assets/javascripts/knowledge_base_public/search.js
View file

@ -78,7 +78,7 @@
this.setSubtitle(data.subtitle)
this.setPreview(data.body)
this.setURL(data.url)
this.setIcon(data.iconName, data.type)
this.setIcon(data.icon, data.type)
}
this.setTitle = function(text) {

5
app/assets/stylesheets/knowledge_base.scss
View file

@ -163,6 +163,11 @@ ol {
background: hsl(19,90%,51%);
}
&[data-color="grey"] {
color: hsl(45,98%,17%);
background: hsl(0,0%,80%);
}
&-tag {
font-weight: bold;
margin-right: 17px;

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

@ -1,3 +1,4 @@
.icon-archived-modifier { width: 9px; height: 9px; }
.icon-arrow-down { width: 13px; height: 7px; }
.icon-arrow-left { width: 7px; height: 13px; }
.icon-arrow-right { width: 7px; height: 13px; }
@ -19,6 +20,7 @@
.icon-diagonal-cross { width: 13px; height: 13px; }
.icon-document { width: 16px; height: 16px; }
.icon-download { width: 14px; height: 13px; }
.icon-draft-modifier { width: 9px; height: 9px; }
.icon-draggable { width: 16px; height: 16px; }
.icon-dropdown-list { width: 19px; height: 14px; }
.icon-email-button { width: 29px; height: 24px; }
@ -51,6 +53,7 @@
.icon-inactive-organization { width: 16px; height: 16px; }
.icon-inactive-user { width: 16px; height: 16px; }
.icon-info { width: 5px; height: 11px; }
.icon-internal-modifier { width: 9px; height: 9px; }
.icon-italic { width: 12px; height: 12px; }
.icon-knowledge-base-answer { width: 16px; height: 16px; }
.icon-knowledge-base { width: 24px; height: 24px; }

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

@ -1530,6 +1530,10 @@ table {
color: $supergood-color;
}
.label-highlight {
color: $highlight-color;
}
.label-warning {
color: $ok-color;
}
@ -1542,6 +1546,19 @@ table {
color: hsl(0,0%,80%);
}
.state-archived,
.state-draft {
color: hsl(0,0%,68%);
}
.state-published {
color: $supergood-color;
}
.state-internal {
color: $highlight-color;
}
fieldset {
margin: 0 -4px;
@extend .clearfix;
@ -2360,6 +2377,41 @@ input.has-error {
}
}
.modified-icon {
position: relative;
line-height: 1;
display: block;
.nav-pills > li > a & {
align-self: center;
}
.icon {
fill: currentColor;
}
.modified-icon-modifier {
bottom: 0;
right: 0;
position: absolute;
z-index: 1;
fill: white;
margin: 0 -2px -1px 0;
.nav-pills > li:hover > a & {
fill: #f2f2f3;
}
}
.icon-knowledge-base-answer + .modified-icon-modifier {
margin: 0 -1px 2px 0;
}
.icon-published-modifier {
display: none;
}
}
kbd {
background: hsl(200,8%,90%);
border-radius: 3px;
@ -10286,14 +10338,22 @@ output {
}
}
.icon {
.modified-icon {
margin-right: 3px;
display: inline-block;
vertical-align: middle;
line-height: 1;
}
&-icon {
fill: currentColor;
width: 20px;
height: 20px;
object-fit: contain;
margin-right: 3px;
vertical-align: middle;
line-height: 1;
}
.modified-icon-modifier {
fill: hsl(210,14%,94%);
}
}
@ -10892,11 +10952,10 @@ span.is-disabled {
}
&[data-state="archived"] {
color: $superbad-color;
border-color: transparentize($superbad-color, .65);
border-color: hsl(0,0%,80%);
.btn {
border-color: transparentize($superbad-color, .65);
border-color: hsl(0,0%,80%);
}
}
@ -10942,7 +11001,7 @@ span.is-disabled {
border-bottom: 1px solid hsl(0,0%,90%);
padding: 7px;
.breadcrumb:not(:first-child) .icon {
.breadcrumb:not(:first-child) .breadcrumb-icon {
width: 16px;
height: 16px;
}
@ -11050,6 +11109,9 @@ span.is-disabled {
[data-font] {
font-size: 60px;
}
.modified-icon {
margin: 10px 0 20px;
}
@ -11082,6 +11144,12 @@ span.is-disabled {
[data-font] {
font-size: 42px;
}
.modified-icon-modifier {
width: 18px;
height: 18px;
margin: 0 -6px -2px 0;
}
}
}
@ -11096,6 +11164,12 @@ span.is-disabled {
[data-font] {
font-size: 60px;
}
.modified-icon-modifier {
width: 22.5px;
height: 22.5px;
margin: 0 -8px -5px 0;
}
}
}
}
@ -11120,6 +11194,7 @@ span.is-disabled {
.section-inner {
position: relative;
display: flex;
align-items: flex-start;
padding: 10px 14px;
margin: 10px;
background: white;
@ -11149,6 +11224,10 @@ span.is-disabled {
content: " — ";
color: hsl(60,1%,34%);
}
&:only-child:after {
content: "";
}
}
&-detail {
@ -11156,28 +11235,30 @@ span.is-disabled {
margin-top: 5px;
}
[data-font],
.icon {
&-icon {
flex-shrink: 0;
}
&-holder {
margin-right: 11px;
margin-top: 1px;
.nav-pills & {
margin-right: 7px;
}
}
[data-font] {
font-size: 16px;
line-height: 1;
margin-right: 12px;
}
&[data-font] {
font-size: 16px;
line-height: 1;
}
.icon {
fill: currentColor;
color: $highlight-color;
margin: 1px 10px 0 2px;
}
svg.icon {
width: 16px;
height: 16px;
object-fit: contain;
object-position: center top;
&.icon {
fill: currentColor;
width: 16px;
height: 16px;
object-fit: contain;
object-position: center top;
}
}
em {

16
app/controllers/knowledge_base/search_controller.rb
View file

@ -87,7 +87,7 @@ class KnowledgeBase::SearchController < ApplicationController
{
id: object.id,
type: object.class.name,
iconName: 'knowledge-base-answer',
icon: 'knowledge-base-answer',
date: object.updated_at,
url: url,
title: meta.dig(:highlight, 'title')&.first || object.title,
@ -113,7 +113,7 @@ class KnowledgeBase::SearchController < ApplicationController
fontName: object.category.knowledge_base.iconset,
date: object.updated_at,
url: url,
iconName: object.category.category_icon,
icon: object.category.category_icon,
subtitle: strip_tags(parent_category_translation&.title.presence),
title: meta.dig(:highlight, 'title')&.first || strip_tags(object.title)
}
@ -130,12 +130,12 @@ class KnowledgeBase::SearchController < ApplicationController
end
{
id: object.id,
type: object.class.name,
iconName: 'knowledge-base',
date: object.updated_at,
url: url,
title: meta.dig(:highlight, 'title')&.first || strip_tags(object.title)
id: object.id,
type: object.class.name,
icon: 'knowledge-base',
date: object.updated_at,
url: url,
title: meta.dig(:highlight, 'title')&.first || strip_tags(object.title)
}
end

2
app/helpers/knowledge_base_helper.rb
View file

@ -150,7 +150,7 @@ module KnowledgeBaseHelper
when :published
'green'
when :archived
'red'
'grey'
end
end

2
app/views/knowledge_base/public/answers/show.html.erb
View file

@ -4,7 +4,7 @@ data-available-locales='<%= @object_locales.map(&:locale).join(',') %>'>
<article class="article">
<div class="container">
<h1>
<%= @object.translation.title %> <%= visibility_note(@object) %>
<%= @object.translation.title %>
</h1>
<div class="article-content">

2
app/views/knowledge_base/public/categories/index.html.erb
View file

@ -7,7 +7,7 @@
<% if @object %>
<h1>
<%= @object.translation.title %> <%= visibility_note(@object) %>
<%= @object.translation.title %>
</h1>
<% end %>

BIN
contrib/icon-sprite.sketch
View file

Binary file not shown.

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

@ -1,6 +1,14 @@
<?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">
</defs><symbol id="icon-archived-modifier" viewBox="0 0 9 9">
<title>
archived-modifier
</title>
<g fill-rule="evenodd">
<path d="M9 2H1v7h8z"/>
<path d="M2.25 3h6.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-6.5A.25.25 0 0 1 2 3.75v-.5A.25.25 0 0 1 2.25 3zm0 1.5h6.5V9h-6.5V4.5zM5.5 6a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" fill="currentColor"/>
</g>
</symbol><symbol id="icon-arrow-down" viewBox="0 0 13 7">
<title>
arrow-down
</title>
@ -122,6 +130,14 @@
download
</title>
<path d="M4 0v6h6V0H4zm10 6H0l7 7 7-7z" fill-rule="evenodd"/>
</symbol><symbol id="icon-draft-modifier" viewBox="0 0 9 9">
<title>
draft-modifier
</title>
<g fill-rule="evenodd">
<path d="M5.325 0L2 5.975l.014 3.009H5.5L9 2.979V0z"/>
<path d="M6.978 1.058c-.206-.142-.477-.074-.606.152l-.322.56 1.56 1.073.322-.56a.509.509 0 0 0-.138-.664l-.816-.561zM4.834 7.685l2.543-4.434-1.561-1.074-2.543 4.435 1.561 1.073zM3 8.984l.815-.472.756-.438-1.505-1.036-.032.938L3 8.984z" fill="currentColor"/>
</g>
</symbol><symbol id="icon-draggable" viewBox="0 0 16 16">
<title>
draggable
@ -371,6 +387,14 @@
info
</title>
<path d="M2.321 4h1.17c.281 0 .45.127.45.408 0 .226-.028.465-.07.69l-.465 2.55c-.056.282-.113.563-.14.845-.015.14 0 .282.041.408.043.184.183.282.367.254.155-.014.295-.07.45-.127.113-.042.226-.127.338-.169.17-.07.324.056.268.226a.584.584 0 0 1-.17.281c-.436.437-.957.704-1.577.704-.295 0-.577 0-.873-.042-.479-.07-1.084-.662-1-1.282.057-.436.127-.859.197-1.281.127-.747.254-1.493.395-2.24.014-.042.014-.098.014-.14 0-.31-.099-.423-.409-.465-.126-.014-.267-.028-.394-.07-.155-.057-.225-.17-.211-.296.014-.127.098-.212.267-.24C1.054 4 1.152 4 1.237 4h1.084zm1.874-1.989c0 .662-.535 1.197-1.183 1.197-.662 0-1.198-.549-1.198-1.21C1.814 1.334 2.35.8 3.012.8c.662 0 1.183.535 1.183 1.211z" fill-rule="evenodd"/>
</symbol><symbol id="icon-internal-modifier" viewBox="0 0 9 9">
<title>
internal-modifier
</title>
<g fill-rule="evenodd">
<path d="M6 1H4a2 2 0 0 0-2 2v1h-.019A1 1 0 0 0 1 5v4h8V5a1 1 0 0 0-1-1V3a2 2 0 0 0-2-2z"/>
<path d="M2.543 5c-.3 0-.543.227-.543.499V8.5c0 .276.243.499.543.499h4.914c.3 0 .543-.227.543-.499V5.5C8 5.223 7.757 5 7.457 5H2.543zm1.261-.857l-.003-.053v-.017a1.44 1.44 0 0 1 .094-.616c.154-.378.477-.6 1.105-.6s.95.222 1.104.6c.084.206.108.433.096.617l-.001.016-.003.053V5h.797v-.857l-.003.053.005-.064c.02-.309-.017-.666-.16-1.018C6.553 2.42 5.94 2 5 2c-.942 0-1.553.42-1.835 1.114a2.318 2.318 0 0 0-.155 1.082l-.003-.053V5h.797v-.857z" fill="currentColor"/>
</g>
</symbol><symbol id="icon-italic" viewBox="0 0 12 12">
<title>
italic

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 82 KiB

After

Width:  |  Height:  |  Size: 84 KiB

10
public/assets/images/icons/archived-modifier.svg Normal file
View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="9px" height="9px" viewBox="0 0 9 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
<title>archived-modifier</title>
<desc>Created with Sketch.</desc>
<g id="archived-modifier" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon id="backdrop" fill="#50E3C2" points="9 2 1 2 1 9 9 9"></polygon>
<path d="M2.25,3 L8.75,3 C8.88807119,3 9,3.11192881 9,3.25 L9,3.75 C9,3.88807119 8.88807119,4 8.75,4 L2.25,4 C2.11192881,4 2,3.88807119 2,3.75 L2,3.25 C2,3.11192881 2.11192881,3 2.25,3 Z M2.25,4.5 L8.75,4.5 L8.75,9 L2.25,9 L2.25,4.5 Z M5.5,6 C5.77614237,6 6,5.77614237 6,5.5 C6,5.22385763 5.77614237,5 5.5,5 C5.22385763,5 5,5.22385763 5,5.5 C5,5.77614237 5.22385763,6 5.5,6 Z" id="archive" fill="#BD10E0"></path>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 935 B

10
public/assets/images/icons/draft-modifier.svg Normal file
View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="9px" height="9px" viewBox="0 0 9 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
<title>draft-modifier</title>
<desc>Created with Sketch.</desc>
<g id="draft-modifier" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon id="backdrop" fill="#50E3C2" points="5.32542447 0 2 5.97510428 2.01377692 8.98393373 5.5 8.98393373 9 2.97937742 9 1.94808009e-18"></polygon>
<path d="M6.9782802,1.05773353 C6.77241149,0.91623667 6.50121443,0.984345235 6.37152196,1.20952588 L6.0499425,1.76996961 L7.61059124,2.84333946 L7.93241176,2.28342371 C8.06162209,2.05771509 8.00015076,1.76046609 7.79428205,1.61923321 L6.9782802,1.05773353 Z M4.83401538,7.68511924 L7.37748229,3.25119889 L5.8158693,2.17730106 L3.27336665,6.61227735 L4.83401538,7.68511924 Z M3,8.98393373 L3.81455546,8.51218952 L4.57149662,8.0744996 L3.06581049,7.03808788 L3.03447216,7.97603256 L3,8.98393373 Z" id="Shape" fill="#BD10E0"></path>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

10
public/assets/images/icons/internal-modifier.svg Normal file
View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="9px" height="9px" viewBox="0 0 9 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
<title>internal-modifier</title>
<desc>Created with Sketch.</desc>
<g id="internal-modifier" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M6,1 L4,1 C2.8954305,1 2,1.8954305 2,3 L2,4 L1.98142504,4.00034509 C1.43647484,4.01046926 1,4.45512832 1,5.00017256 L1,9 L9,9 L9,5 C9,4.44771525 8.55228475,4 8,4 L8,4 L8,3 C8,1.8954305 7.1045695,1 6,1 Z" id="backdrop" fill="#50E3C2"></path>
<path d="M2.54304227,5 C2.24312829,5 2,5.226518 2,5.498515 L2,8.501485 C2,8.776807 2.24263836,9 2.54304227,9 L7.45695773,9 C7.75687171,9 8,8.773482 8,8.501485 L8,5.498515 C8,5.223193 7.75736164,5 7.45695773,5 L2.54304227,5 L2.54304227,5 Z M3.80443612,4.1428574 L3.80134315,4.0895678 C3.80172235,4.093541 3.80089692,4.0845272 3.80017743,4.0733042 C3.78841658,3.8898488 3.81176646,3.6630332 3.89537646,3.4574126 C4.04912795,3.0792944 4.37190046,2.8571426 4.99979846,2.8571426 C5.62772463,2.8571432 5.95060766,3.079331 6.10447932,3.4575044 C6.18817469,3.6632042 6.21157,3.8900828 6.19983886,4.0735154 C6.19912435,4.0846874 6.19830429,4.0936634 6.19868349,4.0896836 L6.195604,4.1428574 L6.195604,5 L6.9927,5 L6.9927,4.1428574 L6.98962057,4.1960306 C6.99164766,4.1778788 6.99329932,4.1598002 6.99505657,4.1323232 C7.01483217,3.8231054 6.97801452,3.4660628 6.83473606,3.113924 C6.55266377,2.4206696 5.941348,2 4.99979852,2 C4.05822069,2 3.44696058,2.4207056 3.16504515,3.1140158 C3.02189378,3.4660658 2.98514532,3.823031 3.00496869,4.132253 C3.00673555,4.1598134 3.00839635,4.1779496 3.01043309,4.196147 L3.00734012,4.1428574 L3.00734012,5 L3.80443612,5 L3.80443612,4.1428574 L3.80443612,4.1428574 Z" id="internal" fill="#BD10E0"></path>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB