doccano/app/server/templates/admin/label.html

{% extends "admin/admin_base.html" %}
{% load static %}
{% block content-area %}

<div class="card">
  <header class="card-header">
    <p class="card-header-title">
      Label editor
    </p>
    <a href="#" class="card-header-icon" aria-label="more options">
      <span class="icon">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </a>
  </header>

  <div class="card-content">
    <div class="has-text-right">
      <div class="field is-grouped is-grouped-multiline has-text-weight-bold pbrem075">
        <div class="control" v-for="label in labels">
          <div class="tags has-addons">
            <span class="tag is-medium" v-bind:style="{ color: label.text_color, 'background-color': label.background_color }">
              <button class="delete is-small tweaked-margin" @click="removeLabel(label)"></button>
              [[ label.text ]]
            </span>
            <span class="tag is-medium"><kbd>[[ label.shortcut | simpleShortcut ]]</kbd></span>
          </div>
        </div>
      </div>

      <div class="field is-horizontal bordered-row">
        <label class="label column is-3 mb0">Preview</label>
        <div class="control column is-6">
          <div class="tags has-addons has-text-weight-bold">
            <a class="tag is-medium" v-bind:style="{ color: textColor, backgroundColor: backgroundColor }">
              [[ labelText ]]
            </a>
            <span class="tag is-medium"><kbd>[[ combineKeys | simpleShortcut ]]</kbd></span>
          </div>
        </div>
      </div>

      <div class="field is-horizontal bordered-row">
        <div class="column is-3 mb0">
          <label class="label mb0">Label Name</label>
          <p class="is-small has-text-grey">required</p>
        </div>
        <div class="control column is-6">
          <input class="input" type="text" placeholder="Text input" v-model="labelText">
        </div>
      </div>

      <div class="field is-horizontal bordered-row">
        <div class="column is-3 mb0">
          <label class="label mb0">Shortcut Key</label>
          <p class="is-small has-text-grey">optional</p>
        </div>
        <div class="control column is-narrow">
          <div class="select">
            <select v-model="selectedKey">
              <option disabled value="">Please select one</option>
              {% for ch in 'abcdefghijklmnopqrstuvwxyz' %}
              <option>{{ ch }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="is-narrow">
          <input class="is-checkradio" type="checkbox" id="ctrl" value="ctrl" v-model="checkedKey">
          <label for="ctrl"><kbd>C: Ctrl</kbd></label>
        </div>
        <div class="is-narrow">
          <input class="is-checkradio" type="checkbox" id="shift" value="shift" v-model="checkedKey">
          <label for="shift"><kbd>S: Shift</kbd></label>
        </div>
      </div>

      <div class="field is-horizontal bordered-row">
        <div class="column is-3 mb0">
          <label class="label mb0">Background Color</label>
          <p class="is-small has-text-grey">optional</p>
        </div>
        <div class="control column is-6">
          <input class="input" type="color" v-model="backgroundColor">
        </div>
      </div>

      <div class="field is-horizontal bordered-row">
        <div class="column is-3 mb0">
          <label class="label mb0">Text Color</label>
          <p class="is-small has-text-grey">optional</p>
        </div>
        <div class="control column is-6">
          <input class="input" type="color" v-model="textColor">
        </div>
      </div>

      <div class="field is-grouped">
        <div class="control">
          <button class="button is-primary" @click="addLabel()">Add label</button>
        </div>
        <div class="control">
          <button class="button is-text" @click="reset()">Reset</button>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
{% block footer %}
<script src="{% static 'bundle/label.js' %}"></script>
{% endblock %}