UX: New bell icons for notification/tracking statuses

This commit is contained in:
Kris 2019-12-19 14:39:29 -05:00
parent b445e0e76a
commit 2ad40d5f71
4 changed files with 24 additions and 8 deletions

View File

@ -6,11 +6,11 @@ const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
let _renderers = [];
const REPLACEMENTS = {
"d-tracking": "circle",
"d-muted": "times-circle",
"d-regular": "far-circle",
"d-watching": "exclamation-circle",
"d-watching-first": "far-dot-circle",
"d-tracking": "bell",
"d-muted": "discourse-bell-slash",
"d-regular": "far-bell",
"d-watching": "discourse-bell-exclamation",
"d-watching-first": "discourse-bell-one",
"d-drop-expanded": "caret-down",
"d-drop-collapsed": "caret-right",
"d-unliked": "far-heart",
@ -33,7 +33,7 @@ const REPLACEMENTS = {
"notification.linked": "link",
"notification.granted_badge": "certificate",
"notification.topic_reminder": "far-clock",
"notification.watching_first_post": "far-dot-circle",
"notification.watching_first_post": "discourse-bell-one",
"notification.group_message_summary": "users",
"notification.post_approved": "check",
"notification.membership_request_accepted": "user-plus",

View File

@ -2,7 +2,7 @@
.d-icon.d-icon-d-muted,
.d-icon.d-icon-d-watching-first,
.d-icon.d-icon-d-watching-first-post {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-high;
}
.d-icon.d-icon-d-tracking,

View File

@ -57,6 +57,9 @@ module SvgSprite
"crosshairs",
"cube",
"desktop",
"discourse-bell-exclamation",
"discourse-bell-one",
"discourse-bell-slash",
"discourse-compress",
"discourse-expand",
"download",

View File

@ -11,7 +11,20 @@ Additional SVG icons
<symbol id="discourse-expand" viewBox="0 0 1792 1792">
<path d="M883 1056q0 13-10 23l-332 332 144 144q19 19 19 45t-19 45-45 19h-448q-26 0-45-19t-19-45v-448q0-26 19-45t45-19 45 19l144 144 332-332q10-10 23-10t23 10l114 114q10 10 10 23zm781-864v448q0 26-19 45t-45 19-45-19l-144-144-332 332q-10 10-23 10t-23-10l-114-114q-10-10-10-23t10-23l332-332-144-144q-19-19-19-45t19-45 45-19h448q26 0 45 19t19 45z"></path>
</symbol>
<!-- "Discourse Bookmark Clock" is a Discourse derivative of https://fontawesome.com/icons/bookmark -->
<symbol id="discourse-bookmark-clock" viewBox="0 0 536 512">
<path d="M215.86 143.33A168.09 168.09 0 01296 0H48A48 48 0 000 48v464l192-112 192 112V315.53c-94-.04-168.14-79.33-168.14-172.2z M392.45 0a144 144 0 10144 144 143.91 143.91 0 00-144-144zm64 150.3a9.77 9.77 0 01-9.7 9.7h-60.6a9.77 9.77 0 01-9.7-9.7V73.7a9.77 9.77 0 019.7-9.7h12.6a9.77 9.77 0 019.7 9.7V128h38.3a9.77 9.77 0 019.7 9.7z"/>
</symbol>
</symbol>
<!-- "Discourse Bell Exclamation" is a Discourse derivative of https://fontawesome.com/icons/bell and https://fontawesome.com/icons/exclamation -->
<symbol id='discourse-bell-exclamation' viewBox="0 0 448 512">
<path d="M439.4 362.3c-19.3-20.8-55.5-52-55.5-154.3 0-77.7-54.5-139.9-127.9-155.2V32c0-17.7-14.3-32-32-32s-32 14.3-32 32v20.8C118.6 68.1 64.1 130.3 64.1 208c0 102.3-36.2 133.5-55.5 154.3-6 6.4-8.6 14.1-8.6 21.7.1 16.4 13 32 32.1 32h383.8c19.1 0 32-15.6 32.1-32 .1-7.6-2.6-15.3-8.6-21.7zM201.7 116.6h44.6c6.5 0 11.7 5.5 11.4 12l-6.5 123.8c-.3 6.1-5.3 10.9-11.4 10.9h-31.6c-6.1 0-11.1-4.8-11.4-10.9l-6.5-123.8c-.3-6.6 4.9-12 11.4-12zM224 361.3c-18.6 0-33.7-15.1-33.7-33.7s15.1-33.7 33.7-33.7 33.7 15.1 33.7 33.7-15.1 33.7-33.7 33.7zM224 512c35.3 0 64-28.7 64-64H160c0 35.3 28.7 64 64 64z"/>
</symbol>
<!-- Discourse Bell One" is a Discourse derivative of https://fontawesome.com/icons/bell -->
<symbol id='discourse-bell-one' viewBox="0 0 448 512">
<path d="M224 512c35.3 0 64-28.7 64-64H160c0 35.3 28.7 64 64 64zM439.4 362.3c-19.3-20.8-55.5-52-55.5-154.3 0-77.7-54.5-139.9-127.9-155.2V32c0-17.7-14.3-32-32-32s-32 14.3-32 32v20.8C118.6 68.1 64.1 130.3 64.1 208c0 102.3-36.2 133.5-55.5 154.3-6 6.4-8.6 14.1-8.6 21.7.1 16.4 13 32 32.1 32h383.8c19.1 0 32-15.6 32.1-32 .1-7.6-2.6-15.3-8.6-21.7zm-145.2-28c0 8.6-7 15.5-15.5 15.5h-97c-8.6 0-15.5-7-15.5-15.5v-15.8c0-8.6 7-15.5 15.5-15.5h27.1V192.5l-5.1 3.1c-6 6.1-15.9 6.2-22 .1l-11.2-11.1c-6.1-6-6.2-15.9-.1-22l31.6-31.9c3.2-3.2 7.4-4.7 11.5-4.6h26.6c8.6 0 11.5 7 11.5 15.5v161.3h27.1c8.6 0 15.5 7 15.5 15.5v15.9z"/>
</symbol>
<!-- "Discourse Bell Slash" is a version of https://fontawesome.com/icons/bell-slash?style=regular that has been modified to be more consistent with the width of other bell icons -->
<symbol id='discourse-bell-slash' viewBox="0 0 448 512">
<path d="M442.7 396.2L36.5 70.7c-6.9-5.5-17-4.4-22.5 2.5L4 85.6c-5.5 6.9-4.4 17 2.5 22.5l406.2 325.5c6.9 5.5 17 4.4 22.5-2.5l10-12.5c5.5-6.9 3.7-17.7-3.2-23.2l.7.8zM67.5 368c16.7-22 34.5-55.8 41.4-110.6l-45.5-35.6C60.2 312.6 27 342.5 8.6 362.3 2.6 368.7 0 376.4 0 384c.1 16.4 13 32 32.1 32h279.7l-61.4-48H67.5zM224 96c61.9 0 112 50.1 112 112 0 .2-.1.4-.1.6 0 16.8 1.2 31.8 2.8 45.7l59.5 46.5c-8.3-22.1-14.3-51.5-14.3-92.9 0-77.7-54.5-139.9-127.9-155.2V32c0-17.7-14.3-32-32-32s-32 14.3-32 32v20.8c-26 5.4-49.4 16.9-69.1 32.7l38.2 29.8C179 103.2 200.6 96 224 96zm0 416c35.3 0 64-28.6 64-64H160c0 35.4 28.7 64 64 64z"/>
</symbol>
</svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB