settings: tags management

[carlosescri]

Add / Remove / Modify Tags.

Each tag has this properties:

• Name
• CSS Color (rgb(,,), #...)
• Switch (ON/OFF): Display this tag in listings.

If a tag's switch is ON then it will be displayed in listings under the customer's name.

HTML

This must be split into a partial for later reuse.

{% for entity in table_rows %}
  <tr data-link="{{ path('invoice_edit', { 'id': entity.id }) }}">
    ...
    <td class="with-tags">
      {{ entity.getCustomerName }}

      <ul class="unstyled tags">
        <li><a href="#" class="tag tag-delinquent-customer">delinquent customer</a>,</li>
        <li><a href="#" class="tag tag-semaphore">semaphore</a>,</li>
        <li><a href="#" class="tag tag-mytag">mytag</a>,</li>
        <li><a href="#" class="tag tag-other-tag">other tag</a>,</li>
        <li><a href="#" class="tag tag-green">green</a></li>
      </ul>
    </td>
    ...
  </tr>
{% endfor %}

CSS

These styles should be added to /css/siwapp-files/siwapp.tables.less:

<style type="text/css" media="screen">

  td.with-tags {
    line-height:1em;

    .tags {
      font-size:11px;
      margin:0;

      li {
        display:inline;
        line-height:12px;

        .tag {
          margin:0;
          text-transform:lowercase;
          color:#696969;
        }

        .tag + .tag {
          margin-left:3px;
        }
      }
    }
  }

</style>

User styles could be added to the page inside the stylesheets block:

{% block stylesheets %}
  {{ parent() }}

  <style type="text/css" media="screen">
  {% for tag in user_tags %}
    .tag-{{ tag.slug }} { color:{{ tag.color }}; }
  {% endfor %}
  </style>
{% endblock %}

Better if you use a partial or a custom URL to generate all the tag colors:

<link rel="stylesheet" href="/dynamic/css/tags" type="text/css" />

@Gissues:{"order":33.333333333333314,"status":"backlog"}