opendev/gerrit
Code Issues Proposed changes

Tweak the appearance of the attention set icon

Browse Source 
Changes the SVG to paint the icon closer to the border such that we
don't create padding that we cannot get rid of later. When this is done
we can actually accept a whitespace between the icon and what comes
after it. That makes it easier to handle the icon in display:inline
layout.

Screenshot of new icon in account-label: https://imgur.com/a/EXej6N2

Change-Id: Ia4e48baa55ebd4723f546d7b2496c82d3fbef0bd
This commit is contained in:
Ben Rohlfs
2020-06-23 17:38:24 +02:00
parent 38761d7c93
commit 3a83e26cd9
2 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label_html.js
View File

@@ -49,7 +49,11 @@ export const htmlTemplate = html`
@apply --gr-account-label-text-hover-style;
}
iron-icon.attention {
width: 14px;
height: 14px;
vertical-align: top;
position: relative;
top: 3px;
}
iron-icon.status {
width: 14px;
@@ -68,16 +72,13 @@ export const htmlTemplate = html`
>
</gr-hovercard-account>
<template is="dom-if" if="[[showAttention]]">
<iron-icon class="attention" icon="gr-icons:attention"></iron-icon
><!--
--></template
><!--
--><template is="dom-if" if="[[!hideAvatar]]"
><!--
--><gr-avatar account="[[account]]" image-size="32"></gr-avatar>
<iron-icon class="attention" icon="gr-icons:attention"></iron-icon>
</template>
<template is="dom-if" if="[[!hideAvatar]]">
<gr-avatar account="[[account]]" image-size="32"></gr-avatar>
</template>
<span class="text">
<span class="name"> [[_computeName(account, _serverConfig)]]</span>
<span class="name">[[_computeName(account, _serverConfig)]]</span>
<template is="dom-if" if="[[!hideStatus]]">
<template is="dom-if" if="[[account.status]]">
<iron-icon class="status" icon="gr-icons:calendar"></iron-icon>

2
polygerrit-ui/app/elements/shared/gr-icons/gr-icons.js
View File

@@ -99,7 +99,7 @@ $_documentContainer.innerHTML = `<iron-iconset-svg name="gr-icons" size="24">
<!-- This is a custom PolyGerrit SVG -->
<g id="zeroState"><path d="M22 9V7h-2V5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-2h2v-2h-2v-2h2v-2h-2V9h2zm-4 10H4V5h14v14zM6 13h5v4H6zm6-6h4v3h-4zM6 7h5v5H6zm6 4h4v6h-4z"></path></g>
<!-- This SVG is an adaptation of material.io https://material.io/icons/#label_important-->
<g id="attention"><path d="M5.5 19 l9 0 c.67 0 1.27 -.33 1.63 -.84 L20.5 12 l-4.37 -6.16 c-.36 -.51 -.96 -.84 -1.63 -.84 l-9 0 L9 12 z"></path></g>
<g id="attention"><path d="M1 23 l13 0 c.67 0 1.27 -.33 1.63 -.84 l7.37 -10.16 l-7.37 -10.16 c-.36 -.51 -.96 -.84 -1.63 -.84 L1 1 L7 12 z"></path></g>
<!-- This SVG is a copy from material.io https://material.io/icons/#pets-->
<g id="pets"><circle cx="4.5" cy="9.5" r="2.5"/><circle cx="9" cy="5.5" r="2.5"/><circle cx="15" cy="5.5" r="2.5"/><circle cx="19.5" cy="9.5" r="2.5"/><path d="M17.34 14.86c-.87-1.02-1.6-1.89-2.48-2.91-.46-.54-1.05-1.08-1.75-1.32-.11-.04-.22-.07-.33-.09-.25-.04-.52-.04-.78-.04s-.53 0-.79.05c-.11.02-.22.05-.33.09-.7.24-1.28.78-1.75 1.32-.87 1.02-1.6 1.89-2.48 2.91-1.31 1.31-2.92 2.76-2.62 4.79.29 1.02 1.02 2.03 2.33 2.32.73.15 3.06-.44 5.54-.44h.18c2.48 0 4.81.58 5.54.44 1.31-.29 2.04-1.31 2.33-2.32.31-2.04-1.3-3.49-2.61-4.8z"/><path d="M0 0h24v24H0z" fill="none"/></g>
<!-- This SVG is a copy from material.io https://material.io/icons/#visibility-->