richard
/
doccano
mirror of https://github.com/doccano/doccano.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Refactor annotation templates

pull/10/head
Hironsan 6 years ago
parent
3c640456e8
commit
0bd3963428
4 changed files with 144 additions and 163 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 138
      app/server/templates/annotation/annotation_base.html
  2. 64
      app/server/templates/annotation/document_classification.html
  3. 56
      app/server/templates/annotation/seq2seq.html
  4. 49
      app/server/templates/annotation/sequence_labeling.html

138
app/server/templates/annotation/annotation_base.html
View File

@ -1,87 +1,89 @@
{% extends "base.html" %}
{% load static %}
{% block header %}
<link rel="stylesheet" type="text/css" href="{% static 'css/annotation.css' %}">
<link rel="stylesheet" href="{% static 'css/annotation.css' %}">
{% endblock %}
{% block content %}
<div class="columns" id="mail-app">
<aside class="column is-3 aside hero is-fullheight">
<div>
<aside class="column is-3 aside hero is-fullheight">
<div>
<div class="main" style="padding: 20px 20px">
<div class="field has-addons">
<div class="control is-expanded">
<input class="input" type="text" placeholder="Search document" v-model="searchQuery" @keyup.enter="submit" style="border-right:none;box-shadow: none;-webkit-box-shadow: none;">
</div>
<div class="main" style="padding: 20px 20px">
<div class="field has-addons">
<div class="control is-expanded">
<input class="input" type="text" placeholder="Search document" v-model="searchQuery" @keyup.enter="submit" style="border-right:none;box-shadow: none;-webkit-box-shadow: none;">
</div>
<div class="control">
<div class="dropdown is-hoverable is-right">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" style="border-left:none">
<span class="icon has-text-grey" style="padding-right:0;">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu" style="padding-top:0">
<div class="dropdown-content">
<a class="dropdown-item">
<label class="radio">
<input type="radio" value="all" v-model="picked" checked> All
</label>
</a>
<a class="dropdown-item">
<label class="radio">
<input type="radio" value="active" v-model="picked"> Active
</label>
</a>
<a class="dropdown-item">
<label class="radio">
<input type="radio" value="completed" v-model="picked"> Completed
</label>
</a>
</div>
</div>
</div>
</div>
<div class="control">
<div class="dropdown is-hoverable is-right">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" style="border-left:none">
<span class="icon has-text-grey" style="padding-right:0;">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu" style="padding-top:0">
<div class="dropdown-content">
<a class="dropdown-item">
<label class="radio">
<input type="radio" value="all" v-model="picked" checked> All
</label>
</a>
<a class="dropdown-item">
<label class="radio">
<input type="radio" value="active" v-model="picked"> Active
</label>
</a>
<a class="dropdown-item">
<label class="radio">
<input type="radio" value="completed" v-model="picked"> Completed
</label>
</a>
</div>
</div>
</div>
<div class="main">
<a href="#" class="item" v-for="(doc, index) in docs" v-bind:class="{ active: index == pageNumber }" v-on:click="pageNumber = index"
v-bind:data-preview-id="index">
<span class="icon">
<i class="fa fa-check" v-show="annotations[index] && annotations[index].length"></i>
</span>
<span class="name">[[ doc.text.slice(0, 40) ]]...</span>
</a>
</div>
</div>
</div>
</aside>
<div class="column is-7 is-offset-1 message hero is-fullheight" id="message-pane">
</div>
<div class="progress-bar">
<progress class="progress" v-bind:class="progressColor" v-bind:value="achievement" max="100">30%</progress>
</div>
<div class="main">
<a href="#" class="item" v-for="(doc, index) in docs" v-bind:class="{ active: index == pageNumber }" v-on:click="pageNumber = index"
v-bind:data-preview-id="index">
<span class="icon">
<i class="fa fa-check" v-show="annotations[index] && annotations[index].length"></i>
</span>
<span class="name">[[ doc.text.slice(0, 40) ]]...</span>
</a>
</div>
</div>
</aside>
<div class="column is-7 is-offset-1 message hero is-fullheight" id="message-pane">
{% block annotation-area %} {% endblock %}
<div class="progress-bar">
<progress class="progress" v-bind:class="progressColor" v-bind:value="achievement" max="100">30%</progress>
</div>
<div class="level" style="margin-top:30px;">
<a class="button level-left" v-on:click="prevPage" v-shortkey="{prev1: ['ctrl', 'p'], prev2: ['arrowup'], prev3: ['arrowleft']}" @shortkey="prevPage">
<span class="icon">
<i class="fas fa-chevron-left"></i>
</span>
<span>Prev</span>
</a>
{% block annotation-area %} {% endblock %}
<a class="button level-right" v-on:click="nextPage" v-shortkey="{next1: ['ctrl', 'n'], next2: ['arrowdown'], next3: ['arrowright']}" @shortkey="nextPage">
<span>Next</span>
<span class="icon">
<i class="fas fa-chevron-right"></i>
</span>
</a>
</div>
<div class="level" style="margin-top:30px;">
<a class="button level-left" v-on:click="prevPage" v-shortkey="{prev1: ['ctrl', 'p'], prev2: ['arrowup'], prev3: ['arrowleft']}"
@shortkey="prevPage">
<span class="icon">
<i class="fas fa-chevron-left"></i>
</span>
<span>Prev</span>
</a>
<a class="button level-right" v-on:click="nextPage" v-shortkey="{next1: ['ctrl', 'n'], next2: ['arrowdown'], next3: ['arrowright']}"
@shortkey="nextPage">
<span>Next</span>
<span class="icon">
<i class="fas fa-chevron-right"></i>
</span>
</a>
</div>
</div>
</div>
{% endblock %}

64
app/server/templates/annotation/document_classification.html
View File

@ -1,47 +1,41 @@
{% extends "annotation/annotation_base.html" %}
{% load static %}
{% block annotation-area %}
<div class="card">
<header class="card-header">
<div class="card-header-title" style="padding:1.5rem;background-color:royalblue;">
<div class="field is-grouped is-grouped-multiline">
<div class="control" v-for="(label, item) in labels">
<div class="tags has-addons">
<a class="tag is-medium"
v-bind:style="{ color: label.text_color, backgroundColor: label.background_color }"
v-on:click="addLabel(label)"
v-shortkey.once="[ label.shortcut ]"
@shortkey="addLabel(label)">
[[ label.text ]]
</a>
<span class="tag is-medium">[[ label.shortcut ]]</span>
</div>
</div>
</div>
<header class="card-header">
<div class="card-header-title" style="padding:1.5rem;background-color:royalblue;">
<div class="field is-grouped is-grouped-multiline">
<div class="control" v-for="(label, item) in labels">
<div class="tags has-addons">
<a class="tag is-medium" v-bind:style="{ color: label.text_color, backgroundColor: label.background_color }" v-on:click="addLabel(label)"
v-shortkey.once="[ label.shortcut ]" @shortkey="addLabel(label)">
[[ label.text ]]
</a>
<span class="tag is-medium">[[ label.shortcut ]]</span>
</div>
</div>
</header>
</div>
</div>
</header>
<div class="card-content">
<div class="field is-grouped is-grouped-multiline">
<div class="control" v-for="(annotation, index) in annotations[pageNumber]">
<div class="tags has-addons">
<span class="tag is-medium"
v-bind:style="{ color: id2label[annotation.label].text_color, 'background-color': id2label[annotation.label].background_color }">
[[ id2label[annotation.label].text ]]
<button class="delete is-small" v-on:click="removeLabel(annotation)"></button>
</span>
</div>
</div>
</div>
<hr>
<div class="content" v-if="docs[pageNumber]">
[[ docs[pageNumber].text ]]
<div class="card-content">
<div class="field is-grouped is-grouped-multiline">
<div class="control" v-for="(annotation, index) in annotations[pageNumber]">
<div class="tags has-addons">
<span class="tag is-medium" v-bind:style="{ color: id2label[annotation.label].text_color, 'background-color': id2label[annotation.label].background_color }">
[[ id2label[annotation.label].text ]]
<button class="delete is-small" v-on:click="removeLabel(annotation)"></button>
</span>
</div>
</div>
</div>
<hr>
<div class="content" v-if="docs[pageNumber]">
[[ docs[pageNumber].text ]]
</div>
</div>
</div>
{% endblock %}
{% block footer %}
<script type="text/javascript" src="{% static 'bundle/document_classification.js' %}"></script>
<script src="{% static 'bundle/document_classification.js' %}"></script>
{% endblock %}

56
app/server/templates/annotation/seq2seq.html
View File

@ -1,38 +1,32 @@
{% extends "annotation/annotation_base.html" %} {% load static %} {% block annotation-area %}
{% extends "annotation/annotation_base.html" %}
{% load static %}
{% block annotation-area %}
<div class="card" style="background-color:royalblue;color:white;font-weight:bold;">
<div class="card-content">
<div class="content" v-if="docs[pageNumber]">
[[ docs[pageNumber].text ]]
</div>
<div class="card-content">
<div class="content" v-if="docs[pageNumber]">
[[ docs[pageNumber].text ]]
</div>
</div>
</div>
<section class="todoapp">
<header class="header">
<input class="textarea new-todo"
type="text"
placeholder="What is your response?"
v-model="newTodo"
@keyup.enter="addTodo">
</header>
<section class="main" v-cloak>
<ul class="todo-list">
<li v-for="todo in annotations[pageNumber]" class="todo" :key="todo.id" :class="{ editing: todo == editedTodo }">
<div class="view">
<label @dblclick="editTodo(todo)">[[ todo.text ]]</label>
<button class="delete destroy is-large" @click="removeTodo(todo)"></button>
</div>
<input class="textarea edit"
type="text"
v-model="todo.text"
v-todo-focus="todo == editedTodo"
@blur="doneEdit(todo)"
@keyup.enter="doneEdit(todo)"
@keyup.esc="cancelEdit(todo)">
</li>
</ul>
</section>
<header class="header">
<input class="textarea new-todo" type="text" placeholder="What is your response?" v-model="newTodo" @keyup.enter="addTodo">
</header>
<section class="main" v-cloak>
<ul class="todo-list">
<li v-for="todo in annotations[pageNumber]" class="todo" :key="todo.id" :class="{ editing: todo == editedTodo }">
<div class="view">
<label @dblclick="editTodo(todo)">[[ todo.text ]]</label>
<button class="delete destroy is-large" @click="removeTodo(todo)"></button>
</div>
<input class="textarea edit" type="text" v-model="todo.text" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)"
@keyup.esc="cancelEdit(todo)">
</li>
</ul>
</section>
</section>
{% endblock %} {% block footer %}
<script type="text/javascript" src="{% static 'bundle/seq2seq.js' %}"></script>
{% endblock %}
{% block footer %}
<script src="{% static 'bundle/seq2seq.js' %}"></script>
{% endblock %}

49
app/server/templates/annotation/sequence_labeling.html
View File

@ -1,39 +1,30 @@
{% extends "annotation/annotation_base.html" %}
{% load static %}
{% block annotation-area %}
<div class="card">
<header class="card-header">
<div class="card-header-title" style="padding:1.5rem;background-color:royalblue;">
<div class="field is-grouped is-grouped-multiline">
<div class="control" v-for="label in labels">
<div class="tags has-addons">
<a class="tag is-medium"
v-bind:style="{ color: label.text_color, backgroundColor: label.background_color }"
v-on:click="annotate(label.id)"
v-shortkey.once="[ label.shortcut ]"
@shortkey="annotate(label.id)">
[[ label.text ]]
</a>
<span class="tag is-medium">[[ label.shortcut ]]</span>
</div>
</div>
</div>
</div>
</header>
<div class="card-content">
<div class="content" v-if="docs[pageNumber] && annotations[pageNumber]">
<annotator ref="annotator"
v-bind:labels="labels"
v-bind:entity-positions="annotations[pageNumber]"
v-bind:text="docs[pageNumber].text"
@remove-label="removeLabel"
@add-label="addLabel"></annotator>
<header class="card-header">
<div class="card-header-title" style="padding:1.5rem;background-color:royalblue;">
<div class="field is-grouped is-grouped-multiline">
<div class="control" v-for="label in labels">
<div class="tags has-addons">
<a class="tag is-medium" v-bind:style="{ color: label.text_color, backgroundColor: label.background_color }" v-on:click="annotate(label.id)"
v-shortkey.once="[ label.shortcut ]" @shortkey="annotate(label.id)">
[[ label.text ]]
</a>
<span class="tag is-medium">[[ label.shortcut ]]</span>
</div>
</div>
</div>
</div>
</header>
<div class="card-content">
<div class="content" v-if="docs[pageNumber] && annotations[pageNumber]">
<annotator ref="annotator" v-bind:labels="labels" v-bind:entity-positions="annotations[pageNumber]" v-bind:text="docs[pageNumber].text"
@remove-label="removeLabel" @add-label="addLabel"></annotator>
</div>
</div>
</div>
{% endblock %}
{% block footer %}
<script type="text/javascript" src="{% static 'bundle/sequence_labeling.js' %}"></script>
<script src="{% static 'bundle/sequence_labeling.js' %}"></script>
{% endblock %}
Write Preview
Loading…
Cancel
Save