mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 01:05:42 +00:00
New CSS File
This commit is contained in:
Inga Kirschnick
parent
b9e5939c1b
commit
20b1a96862
146
app/static/css/queryBuilder.css
Normal file
146
app/static/css/queryBuilder.css
Normal file
@ -0,0 +1,146 @@
|
||||
.modal-conent {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#concordance-query-builder {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
#concordance-query-builder nav {
|
||||
background-color: #6B3F89;
|
||||
margin-top: -25px;
|
||||
margin-left: -25px;
|
||||
width: 105%;
|
||||
}
|
||||
|
||||
#query-builder-nav{
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
#close-query-builder {
|
||||
margin-right: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#general-options-query-builder-tutorial-info-icon {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#your-query {
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
#insert-query-button {
|
||||
background-color: #00426f;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#structural-attr h6 {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
#add-structural-attribute-tutorial-info-icon {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#sentence {
|
||||
background-color:#FD9720;
|
||||
}
|
||||
|
||||
#entity {
|
||||
background-color: #A6E22D;
|
||||
}
|
||||
|
||||
#text-annotation {
|
||||
background-color: #2FBBAB;
|
||||
}
|
||||
|
||||
#no-value-metadata-message {
|
||||
padding-top: 25px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
#token-kind-selector {
|
||||
background-color: #f2eff7;
|
||||
padding: 15px;
|
||||
border-top-style: solid;
|
||||
border-color: #6B3F89;
|
||||
}
|
||||
|
||||
#token-kind-selector.s5 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#token-kind-selector h6 {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
#token-tutorial-info-icon {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#no-value-message {
|
||||
padding-top: 25px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
#token-edit-options h6 {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
#edit-options-tutorial-info-icon {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#incidence-modifiers-button a{
|
||||
background-color: #2FBBAB;
|
||||
}
|
||||
|
||||
#incidence-modifiers a{
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#ignore-case {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#or, #and {
|
||||
background-color: #fc0;
|
||||
}
|
||||
|
||||
#betweenNM {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
#query-builder-tutorial-modal {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
#query-builder-tutorial-modal ul {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#query-builder-tutorial {
|
||||
padding:15px;
|
||||
}
|
||||
|
||||
#scroll-up-button-query-builder-tutorial {
|
||||
background-color: #28B3D1;
|
||||
}
|
||||
|
||||
[data-type="start-sentence"], [data-type="end-sentence"] {
|
||||
background-color: #FD9720;
|
||||
}
|
||||
|
||||
[data-type="start-empty-entity"], [data-type="start-entity"], [data-type="end-entity"] {
|
||||
background-color: #A6E22D;
|
||||
}
|
||||
|
||||
[data-type="start-text-annotation"]{
|
||||
background-color: #2FBBAB;
|
||||
}
|
||||
|
||||
[data-type="token"] {
|
||||
background-color: #28B3D1;
|
||||
}
|
||||
@ -210,31 +210,14 @@ class ConcordanceQueryBuilder {
|
||||
window.location.href = '#query-container';
|
||||
this.elements.counter += 1;
|
||||
queryText = encodeURI(queryText);
|
||||
let chipColor = 'style="background-color:#';
|
||||
|
||||
// Sets chip color, depending on the type of element
|
||||
if (dataType === 'start-sentence' || dataType === 'end-sentence') {
|
||||
chipColor += 'FD9720';
|
||||
} else if (dataType === 'start-empty-entity' || dataType === 'start-entity' || dataType === 'end-entity') {
|
||||
chipColor += 'A6E22D';
|
||||
} else if (dataType === 'text-annotation') {
|
||||
chipColor += '2FBBAB';
|
||||
} else if (dataType === 'token') {
|
||||
chipColor += '28B3D1';
|
||||
} else {
|
||||
chipColor = '';
|
||||
}
|
||||
|
||||
// Creates a chip with the previously selected element. Is first created in the 'BuilderElement' and populated with an EventListener, then moved to 'yourQuery'.
|
||||
let builderElement = document.createElement('div');
|
||||
builderElement.innerHTML +=`
|
||||
<div class='chip' ${chipColor}' data-type='${dataType}' data-query='${queryText}' draggable='true' style='cursor:pointer;' ondragstart='concordanceQueryBuilder.dragStartHandler(event)' ondragend='concordanceQueryBuilder.dragEndHandler(event)'>
|
||||
${prettyText}
|
||||
<i class='material-icons close'>close</i>
|
||||
</div>
|
||||
`.trim();
|
||||
|
||||
let buttonElement = builderElement.firstElementChild;
|
||||
let buttonElement = Utils.elementFromString(
|
||||
`
|
||||
<div class='chip' data-type='${dataType}' data-query='${queryText}' draggable='true' style='cursor:pointer;' ondragstart='concordanceQueryBuilder.dragStartHandler(event)' ondragend='concordanceQueryBuilder.dragEndHandler(event)'>
|
||||
${prettyText}
|
||||
<i class='material-icons close'>close</i>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
buttonElement.addEventListener('click', () => {this.deleteAttr(buttonElement);});
|
||||
|
||||
// Ensures that metadata is always at the end of the query:
|
||||
@ -963,12 +946,6 @@ class ConcordanceQueryBuilder {
|
||||
this.hideEverything();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//#endregion Structural Attribute Builder Functions
|
||||
|
||||
|
||||
|
||||
|
||||
//#endregion Structural Attribute Builder Functions
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
<link href="{{ url_for('static', filename='css/materialize/sticky_footer.css') }}" media="screen,projection" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='css/materialize/fixes.css') }}" media="screen,projection" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='css/nopaque_icons.css') }}" media="screen,projection" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='css/queryBuilder.css') }}" media="screen,projection" rel="stylesheet">
|
||||
{%- assets
|
||||
filters='pyscss',
|
||||
output='gen/app.%(version)s.css',
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
a {color: #FFFFFF;}
|
||||
</style>
|
||||
|
||||
|
||||
{% block main_attribs %} class="service-scheme" data-service="corpus-analysis" id="corpus-analysis-app-container"{% endblock main_attribs %}
|
||||
|
||||
{% block page_content %}
|
||||
@ -82,19 +81,19 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="modal" id="concordance-query-builder" style="width:70%;">
|
||||
<div class="modal-content" style="overflow-x:hidden;">
|
||||
<div >
|
||||
<nav style="background-color:#6B3F89; margin-top:-25px; margin-left:-25px; width:105%;">
|
||||
<div class="nav-wrapper" style="padding-left:15px;">
|
||||
<a href="#!" class="brand-logo"><i class="material-icons">build</i>Query Builder</a>
|
||||
<i class="material-icons close right" style="margin-right: 50px; cursor:pointer;" id="close-query-builder">close</i>
|
||||
<a class="modal-trigger" href="#query-builder-tutorial-modal" >
|
||||
<i class="material-icons right tooltipped" id="query-builder-tutorial-info-icon" data-position="bottom" data-tooltip="Click here if you are unsure how to use the Query Builder <br>and want to find out what other options it offers.">help</i>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="modal" id="concordance-query-builder">
|
||||
<div class="modal-content">
|
||||
<div>
|
||||
<nav>
|
||||
<div class="nav-wrapper" id="query-builder-nav">
|
||||
<a href="#!" class="brand-logo"><i class="material-icons">build</i>Query Builder</a>
|
||||
<i class="material-icons close right" id="close-query-builder">close</i>
|
||||
<a class="modal-trigger" href="#query-builder-tutorial-modal" >
|
||||
<i class="material-icons right tooltipped" id="query-builder-tutorial-info-icon" data-position="bottom" data-tooltip="Click here if you are unsure how to use the Query Builder <br>and want to find out what other options it offers.">help</i>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<p></p>
|
||||
|
||||
@ -103,12 +102,12 @@
|
||||
<div class="row">
|
||||
<h6 class="col s2">Your Query:
|
||||
<a class="modal-trigger" href="#query-builder-tutorial-modal">
|
||||
<i class="material-icons left" id="general-options-query-builder-tutorial-info-icon" style="color:black;">help_outline</i></a>
|
||||
<i class="material-icons left" id="general-options-query-builder-tutorial-info-icon">help_outline</i></a>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s10 tooltipped" id="your-query" style="border-bottom-style: solid; border-bottom-width:1px;" data-position="bottom" data-tooltip="You can edit your query by deleting individual elements or moving them via drag and drop."></div>
|
||||
<a class="btn-small waves-effect waves-teal col s1" id="insert-query-button" style="background-color:#00426f; text-align:center">
|
||||
<div class="col s10 tooltipped" id="your-query" data-position="bottom" data-tooltip="You can edit your query by deleting individual elements or moving them via drag and drop."></div>
|
||||
<a class="btn-small waves-effect waves-teal col s1" id="insert-query-button">
|
||||
<i class="material-icons">send</i>
|
||||
</a>
|
||||
</div>
|
||||
@ -125,13 +124,13 @@
|
||||
|
||||
<div id="structural-attr" class="hide">
|
||||
<p></p>
|
||||
<h6 style="margin-left:15px;">Which structural attribute do you want to add to your query?<a class="modal-trigger" href="#query-builder-tutorial-modal"><i class="material-icons left" id="add-structural-attribute-tutorial-info-icon" style="color:black;">help_outline</i></a></h6>
|
||||
<h6>Which structural attribute do you want to add to your query?<a class="modal-trigger" href="#query-builder-tutorial-modal"><i class="material-icons left" id="add-structural-attribute-tutorial-info-icon">help_outline</i></a></h6>
|
||||
<p></p>
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<a class="btn-small waves-effect waves-light" id="sentence" style="background-color:#FD9720">sentence</a>
|
||||
<a class="btn-small waves-effect waves-light" id="entity" style="background-color:#A6E22D">entity</a>
|
||||
<a class="btn-small waves-effect waves-light" id="text-annotation" style="background-color:#2FBBAB">Meta Data</a>
|
||||
<a class="btn-small waves-effect waves-light" id="sentence">sentence</a>
|
||||
<a class="btn-small waves-effect waves-light" id="entity">entity</a>
|
||||
<a class="btn-small waves-effect waves-light" id="text-annotation">Meta Data</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -209,7 +208,7 @@
|
||||
<i class="material-icons right">send</i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="hide" id="no-value-metadata-message" style="padding-top:25px; margin-left:-20px;"><i>No value entered!</i></div>
|
||||
<div class="hide" id="no-value-metadata-message"><i>No value entered!</i></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -217,9 +216,9 @@
|
||||
|
||||
<div id="positional-attr" class="hide">
|
||||
<p></p>
|
||||
<div class="row" style="background-color:#f2eff7; padding:15px; border-top-style: solid; border-color:#6B3F89">
|
||||
<div class="col s5" style="margin-top:15px;">
|
||||
<h6 style="margin-left:15px;">Which kind of token are you looking for? <a class="modal-trigger" href="#query-builder-tutorial-modal"><i class="material-icons left" id="token-tutorial-info-icon" style="color:black;">help_outline</i></a></h6>
|
||||
<div class="row" id="token-kind-selector">
|
||||
<div class="col s5">
|
||||
<h6>Which kind of token are you looking for? <a class="modal-trigger" href="#query-builder-tutorial-modal"><i class="material-icons left" id="token-tutorial-info-icon">help_outline</i></a></h6>
|
||||
</div>
|
||||
<div class="input-field col s3">
|
||||
<select id="token-attr">
|
||||
@ -331,13 +330,13 @@
|
||||
<i class="material-icons right">send</i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="hide" id="no-value-message" style="padding-top:25px; margin-left:-20px;"><i>No value entered!</i></div>
|
||||
<div class="hide" id="no-value-message"><i>No value entered!</i></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="token-edit-options">
|
||||
<div class="row">
|
||||
<h6 style="margin-left:15px;">Options to edit your token: <a class="modal-trigger" href="#query-builder-tutorial-modal" style="color:black"><i class="material-icons left" id="edit-options-tutorial-info-icon">help_outline</i></a></h6>
|
||||
<h6>Options to edit your token: <a class="modal-trigger" href="#query-builder-tutorial-modal"><i class="material-icons left" id="edit-options-tutorial-info-icon">help_outline</i></a></h6>
|
||||
</div>
|
||||
<p></p>
|
||||
<div class="row">
|
||||
@ -346,7 +345,7 @@
|
||||
<a id="option-group" class="btn-small waves-effect waves-light tooltipped" data-position="top" data-tooltip="Find character sequences from a list of options">Option Group</a>
|
||||
</div>
|
||||
<div class="col s3 m3 l3 xl3" id="incidence-modifiers-button">
|
||||
<a class="dropdown-trigger btn-small waves-effect waves-light" href="#" data-target="incidence-modifiers" style="background-color:#2fbbab" data-position="top" data-tooltip="Incidence Modifiers are special characters or patterns, <br>which determine how often a character represented previously should occur.">incidence modifiers</a>
|
||||
<a class="dropdown-trigger btn-small waves-effect waves-light" href="#" data-target="incidence-modifiers" data-position="top" data-tooltip="Incidence Modifiers are special characters or patterns, <br>which determine how often a character represented previously should occur.">incidence modifiers</a>
|
||||
</div>
|
||||
|
||||
<ul id="incidence-modifiers" class="dropdown-content">
|
||||
@ -358,7 +357,7 @@
|
||||
</ul>
|
||||
|
||||
<div id="ignore-case-checkbox" class="col s2 m2 l2 xl2">
|
||||
<p id="ignore-case" style="margin-top:5px;">
|
||||
<p id="ignore-case">
|
||||
<label>
|
||||
<input type="checkbox" class="filled-in" />
|
||||
<span>Ignore Case</span>
|
||||
@ -366,17 +365,17 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="col s2 m2 l2 xl2" id="condition-container">
|
||||
<a class="btn-small tooltipped waves-effect waves-light" id="or" style="background-color:#fc0" data-position="bottom" data-tooltip="You can add another condition to your token. <br>At least one must be fulfilled">or</a>
|
||||
<a class="btn-small tooltipped waves-effect waves-light" id="and" style="background-color:#fc0" data-position="bottom" data-tooltip="You can add another condition to your token. <br>Both must be fulfilled">and</a>
|
||||
<a class="btn-small tooltipped waves-effect waves-light" id="or" data-position="bottom" data-tooltip="You can add another condition to your token. <br>At least one must be fulfilled">or</a>
|
||||
<a class="btn-small tooltipped waves-effect waves-light" id="and" data-position="bottom" data-tooltip="You can add another condition to your token. <br>Both must be fulfilled">and</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id ="exactlyN" class="modal">
|
||||
<div id="exactlyN" class="modal">
|
||||
<div class="row modal-content">
|
||||
<div class= "input-field col s10">
|
||||
<div class="input-field col s10">
|
||||
<i class="material-icons prefix">mode_edit</i>
|
||||
<input placeholder="type in a number for 'n'" type="text" id="n-input">
|
||||
</div>
|
||||
@ -388,7 +387,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id ="betweenNM" class="modal" style="width:60%;">
|
||||
<div id="betweenNM" class="modal">
|
||||
<div class="row modal-content">
|
||||
<div class= "input-field col s5">
|
||||
<i class="material-icons prefix">mode_edit</i>
|
||||
@ -410,17 +409,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal modal-fixed-footer" id="query-builder-tutorial-modal" style="width:60%;">
|
||||
<div class="modal modal-fixed-footer" id="query-builder-tutorial-modal">
|
||||
<div class="modal-content" >
|
||||
<div id="query-builder-tutorial-start"></div>
|
||||
<ul class="tabs" style="margin-top:10px;">
|
||||
<ul class="tabs">
|
||||
<li class="tab"><a class="active" href="#query-builder-tutorial">Query Builder Tutorial</a></li>
|
||||
{# <li class="tab"><a href="#qb-examples">Examples</a></li> #}
|
||||
<li class="tab"><a href="#cql-cb-tutorial">Corpus Query Language Tutorial</a></li>
|
||||
<li class="tab"><a href="#tagsets-cb-tutorial">Tagsets</a></li>
|
||||
</ul>
|
||||
|
||||
<div id="query-builder-tutorial" style="padding:15px;">
|
||||
<div id="query-builder-tutorial">
|
||||
{% include "main/manual/_09_query_builder.html.j2" %}
|
||||
</div>
|
||||
{# <div id="qb-examples"></div> #}
|
||||
@ -434,7 +433,7 @@
|
||||
{% include "main/manual/_10_tagsets.html.j2" %}
|
||||
</div>
|
||||
<div class="fixed-action-btn">
|
||||
<a class="btn-floating btn-large teal" id="scroll-up-button-query-builder-tutorial" href='#query-builder-tutorial-start' style="background:#28B3D1">
|
||||
<a class="btn-floating btn-large teal" id="scroll-up-button-query-builder-tutorial" href='#query-builder-tutorial-start'>
|
||||
<i class="large material-icons">arrow_upward</i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user