mirror of https://github.com/doccano/doccano.git
Hironsan
6 years ago
2 changed files with 301 additions and 0 deletions
Split View
Diff Options
@ -0,0 +1,179 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
|
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
<title>Forum - Free Bulma template</title> |
|||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" |
|||
crossorigin="anonymous" /> |
|||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet"> |
|||
<!-- Bulma Version 0.6.2--> |
|||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" integrity="sha256-2k1KVsNPRXxZOsXQ8aqcZ9GOOwmJTMoOB5o5Qp1d6/s=" |
|||
crossorigin="anonymous" /> |
|||
<link rel="stylesheet" type="text/css" href="../static/forum.css"> |
|||
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> |
|||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> |
|||
</head> |
|||
|
|||
<body> |
|||
<nav class="navbar is-white"> |
|||
<div class="container"> |
|||
<div class="navbar-brand"> |
|||
<a class="navbar-item" href="../"> |
|||
<img src="../static/images/logo.png" width="40" height="48">doccano |
|||
</a> |
|||
</div> |
|||
<div id="topNav" class="navbar-menu"> |
|||
<div class="navbar-end"> |
|||
<div class="navbar-item"> |
|||
<div class="field is-grouped"> |
|||
<p class="control"> |
|||
<a class="button is-small"> |
|||
<span class="icon"> |
|||
<i class="fa fa-user-plus"></i> |
|||
</span> |
|||
<span> |
|||
Register |
|||
</span> |
|||
</a> |
|||
</p> |
|||
<p class="control"> |
|||
<a class="button is-small is-primary is-outlined"> |
|||
<span class="icon"> |
|||
<i class="fa fa-user"></i> |
|||
</span> |
|||
<span>Login</span> |
|||
</a> |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</nav> |
|||
|
|||
<section class="container" id="root"> |
|||
<div class="columns"> |
|||
|
|||
<div class="column is-8"> |
|||
<tabs> |
|||
<tab name="Document" :selected="true"> |
|||
<div class="box content"> |
|||
<article class="post"> |
|||
<h4> |
|||
<div class="field is-grouped is-grouped-multiline"> |
|||
<div class="control" v-for="(label, index) in items[cur].labels"> |
|||
<div class="tags has-addons"> |
|||
<span class="tag is-grey"> |
|||
<button class="delete is-small" v-on:click="deleteLabel(index)"></button> |
|||
[[label.text]] |
|||
</span> |
|||
<span class="tag is-primary" v-if="label.prob">[[label.prob]]</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</h4> |
|||
<div class="media"> |
|||
<div class="media-content"> |
|||
<div class="content"> |
|||
<p> |
|||
[[ items[cur]['text'] ]] |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</article> |
|||
</div> |
|||
</tab> |
|||
|
|||
<tab name="Guideline"> |
|||
<div class="box content"> |
|||
<article class="post"> |
|||
<h4> |
|||
Annotation Guideline |
|||
</h4> |
|||
<div class="media"> |
|||
<div class="media-content"> |
|||
<div class="content"> |
|||
<p> |
|||
[[ guideline ]] |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</article> |
|||
</div> |
|||
</tab> |
|||
|
|||
</tabs> |
|||
</div> |
|||
|
|||
|
|||
<div class="column is-4"> |
|||
<tabs> |
|||
<tab name="Annotation" :selected="true"> |
|||
<div class="box content"> |
|||
|
|||
<div> |
|||
<a class="button is-primary" href="#">Active Learn</a> |
|||
</div> |
|||
|
|||
<aside class="menu" style="padding-top:1rem;"> |
|||
<p class="menu-label" style="padding-left:0;"> |
|||
Progress |
|||
</p> |
|||
<p> |
|||
<a class="button is-info is-small" style="height:1.5em;">3 in set</a> |
|||
<a class="button is-success is-small" style="height:1.5em;">0 done</a> |
|||
<a class="button is-danger is-small" style="height:1.5em;">3 remaining</a> |
|||
</p> |
|||
</aside> |
|||
|
|||
<aside class="menu" style="padding-top:1rem;"> |
|||
<p class="menu-label" style="padding-left:0;"> |
|||
Tags |
|||
</p> |
|||
<div class="tags"> |
|||
<a class="tag is-grey" v-for="label in labels" v-on:click="addLabel(label.text)">[[label.text]]</a> |
|||
</div> |
|||
</aside> |
|||
</div> |
|||
</tab> |
|||
|
|||
<tab name="History"> |
|||
<div class="box content"> |
|||
<div class="field"> |
|||
<label class="label">Search</label> |
|||
<div class="control"> |
|||
<input class="input" type="text" placeholder="Text input"> |
|||
</div> |
|||
</div> |
|||
<div class="card" v-for="n in 10"> |
|||
<div class="card-content"> |
|||
<div class="content"> |
|||
<p> |
|||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. |
|||
</p> |
|||
<div class="tags"> |
|||
<a class="tag is-grey">Label1</a> |
|||
<a class="tag is-grey">Label2</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</tab> |
|||
</tabs> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</section> |
|||
|
|||
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> |
|||
<script type="text/javascript" src="main.js"></script> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,122 @@ |
|||
Vue.component('tabs', { |
|||
template: `
|
|||
<div> |
|||
<div class="tabs is-boxed is-right" style="margin-bottom:0;"> |
|||
<ul> |
|||
<li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }"> |
|||
<a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
|
|||
<div class="tabs-details"> |
|||
<slot></slot> |
|||
</div> |
|||
</div> |
|||
`,
|
|||
|
|||
data() { |
|||
return { |
|||
tabs: [] |
|||
}; |
|||
}, |
|||
|
|||
created() { |
|||
this.tabs = this.$children; |
|||
}, |
|||
|
|||
methods: { |
|||
selectTab(selectedTab) { |
|||
this.tabs.forEach(tab => { |
|||
tab.isActive = (tab.name == selectedTab.name); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
}); |
|||
|
|||
Vue.component('tab', { |
|||
template: `
|
|||
<div v-show="isActive"><slot></slot></div> |
|||
`,
|
|||
|
|||
props: { |
|||
name: { |
|||
required: true |
|||
}, |
|||
selected: { |
|||
default: false |
|||
}, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
isActive: false |
|||
} |
|||
}, |
|||
|
|||
computed: { |
|||
href() { |
|||
return '#' + this.name.toLowerCase().replace(/ /g, '-') |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
this.isActive = this.selected |
|||
} |
|||
|
|||
}); |
|||
|
|||
new Vue({ |
|||
el: '#root', |
|||
delimiters: ['[[', ']]'], |
|||
data: { |
|||
cur: 0, |
|||
items: [ //[],
|
|||
{ |
|||
"id": 10, |
|||
"labels": [{ |
|||
"text": "Prefecture", |
|||
"prob": 0.98 |
|||
}, { |
|||
"text": "Domestic Region", |
|||
"prob": 0.58 |
|||
}], |
|||
"text": 'Hokkaido, formerly known as Ezo, Yezo, Yeso, or Yesso, is the second largest island of Japan, and the largest and northernmost prefecture. The Tsugaru Strait separates Hokkaido from Honshu.[1] The two islands are connected by the undersea railway Seikan Tunnel. The largest city on Hokkaido is its capital, Sapporo, which is also its only ordinance-designated city. About 43 km north of Hokkaido lies Sakhalin Island, Russia, whereas to its east and north-east are the disputed Kuril Islands.' |
|||
} |
|||
], |
|||
labels: [{ |
|||
'text': 'Prefecture' |
|||
}, { |
|||
'text': 'Organization' |
|||
}, { |
|||
'text': 'Domestic Region' |
|||
}, { |
|||
'text': 'Location' |
|||
}, { |
|||
'text': 'Money' |
|||
}, { |
|||
'text': 'Other' |
|||
}], |
|||
guideline: 'Here is the Annotation Guideline Text' |
|||
}, |
|||
|
|||
methods: { |
|||
addLabel: function (label) { |
|||
var label = { |
|||
'text': label, |
|||
'prob': null |
|||
}; |
|||
this.items[this.cur]['labels'].push(label); |
|||
}, |
|||
deleteLabel: function (index) { |
|||
this.items[this.cur]['labels'].splice(index, 1) |
|||
}, |
|||
nextPage: function () { |
|||
this.cur += 1 |
|||
}, |
|||
prevPage: function () { |
|||
this.cur -= 1 |
|||
} |
|||
} |
|||
}); |
|||
Write
Preview
Loading…
Cancel
Save