diff --git a/media/icon-person.svg b/media/icon-person.svg new file mode 100644 index 0000000..1f14611 --- /dev/null +++ b/media/icon-person.svg @@ -0,0 +1 @@ +<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="M4.9 6.825a.875.875 0 1 0 0 1.75.875.875 0 0 0 0-1.75zm4.2 0a.875.875 0 1 0 0 1.75.875.875 0 0 0 0-1.75zM7 0C3.136 0 0 3.136 0 7s3.136 7 7 7 7-3.136 7-7-3.136-7-7-7zm0 12.6A5.607 5.607 0 0 1 1.4 7c0-.203.014-.406.035-.602a7.043 7.043 0 0 0 3.647-3.759 6.982 6.982 0 0 0 7.287 2.779c.147.497.231 1.029.231 1.582 0 3.087-2.513 5.6-5.6 5.6z" fill="#999C9E" fill-rule="evenodd"/></svg> diff --git a/media/icon-tag.svg b/media/icon-tag.svg new file mode 100644 index 0000000..0ce47e8 --- /dev/null +++ b/media/icon-tag.svg @@ -0,0 +1 @@ +<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="M13.587 6.706l-6.3-6.3A1.391 1.391 0 0 0 6.3 0H1.4C.63 0 0 .63 0 1.4v4.9c0 .385.154.735.413.994l6.3 6.3c.252.252.602.406.987.406s.735-.154.987-.413l4.9-4.9c.259-.252.413-.602.413-.987s-.161-.742-.413-.994zM2.45 3.5c-.581 0-1.05-.469-1.05-1.05 0-.581.469-1.05 1.05-1.05.581 0 1.05.469 1.05 1.05 0 .581-.469 1.05-1.05 1.05z" fill="#999C9E" fill-rule="evenodd"/></svg> diff --git a/media/icon-time.svg b/media/icon-time.svg new file mode 100644 index 0000000..65cb330 --- /dev/null +++ b/media/icon-time.svg @@ -0,0 +1 @@ +<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill="#999C9E" fill-rule="evenodd"><path d="M6.993 0A6.997 6.997 0 0 0 0 7c0 3.864 3.129 7 6.993 7A7.004 7.004 0 0 0 14 7c0-3.864-3.136-7-7.007-7zM7 12.6A5.598 5.598 0 0 1 1.4 7c0-3.094 2.506-5.6 5.6-5.6s5.6 2.506 5.6 5.6-2.506 5.6-5.6 5.6z"/><path d="M7.35 3.5H6.3v4.2l3.675 2.205.525-.861-3.15-1.869z"/></g></svg> diff --git a/src/services/logic-readout-service.js b/src/services/logic-readout-service.js index 5ba630b..ade8732 100644 --- a/src/services/logic-readout-service.js +++ b/src/services/logic-readout-service.js @@ -4,6 +4,7 @@ var _ = require('lodash'), /** * Wrap logic groups in a div + * * @param {string} content * @return {string} */ @@ -23,8 +24,8 @@ function wrapUp(content) { * @return {String} */ function createReadout(element, name, value) { - var logicIconSet = references.tpl.get('.space-logic-icon-set'), - iconSelector = `.${name.replace('logic', '').toLowerCase()}-icon`, + var logicIconSet = references.tpl.get('.clay-space-edit-icons'), + iconSelector = `.icon-${name.replace('logic', '').toLowerCase()}`, icon = dom.find(logicIconSet, iconSelector); return `<span class="logic-group">${icon.outerHTML} ${value}</span>`; @@ -33,6 +34,7 @@ function createReadout(element, name, value) { /** * Iterate over all data attributes and create * readouts for any prefixed with 'logic' + * * @param {Element} element * @return {String} */ diff --git a/src/styleguide/styles.scss b/src/styleguide/styles.scss index 012b8aa..689120b 100644 --- a/src/styleguide/styles.scss +++ b/src/styleguide/styles.scss @@ -51,7 +51,7 @@ $UI_BUTTON: #694C79; vertical-align: text-top; } - & > .logic-icon { + & > .readout-icon { margin-right: 5px; } } diff --git a/template.nunjucks b/template.nunjucks index c16052d..c278bb6 100644 --- a/template.nunjucks +++ b/template.nunjucks @@ -1,12 +1,12 @@ {% if locals.edit %} <div data-uri="{{ _ref or _self }}" class="clay-space-edit"> - {# styles #} + {# Styles #} <style> {{ ('node_modules/clay-space-edit/dist/clay-space-edit.css')| includeFile | safe }} </style> - {# scripts #} + {# Scripts #} <script> {{ ('node_modules/clay-space-edit/dist/clay-space-edit.js')| includeFile | safe }} </script> @@ -34,5 +34,13 @@ </button> </template> + {# Readout Icons #} + {# Need more icons? Submit a PR to https://github.com/nymag/clay-space-edit with the icon #} + <template class="clay-space-edit-icons"> + <span class="readout-icon icon-tags">{% include 'public/media/components/clay-space-edit/icon-tag.svg' %}</span> + <span class="readout-icon icon-time">{% include 'public/media/components/clay-space-edit/icon-time.svg' %}</span> + <span class="readout-icon icon-person">{% include 'public/media/components/clay-space-edit/icon-person.svg' %}</span> + </template> + </div> {% endif %}