Element Target drag&drop + small improvements

This commit is contained in:
Inga Kirschnick
2023-11-22 12:50:08 +01:00
parent 691b2de5b2
commit afcb890ccf
4 changed files with 119 additions and 86 deletions

View File

@ -23,4 +23,15 @@
</div>
</form>
</div>
<div id="corpus-analysis-concordance-switch-to-query-builder-submit-modal" class="modal">
<div class="modal-content">
<h4>Switch to Query Builder</h4>
<p>Switching back to the query builder can cause elements the query builder does not recognize to become lost. Continue?</p>
</div>
<div class="modal-footer">
<a class="btn modal-close waves-effect waves-light">Cancel</a>
<a class="btn modal-close red waves-effect waves-light switch-action" data-switch-action="confirm">Switch to Query Builder</a>
</div>
</div>
{% endmacro %}

View File

@ -1,11 +1,18 @@
{% macro card_content(id_prefix) %}
<form id="corpus-analysis-concordance-query-builder-form">
<div class="row">
<div class="col s9" id="corpus-analysis-concordance-query-builder-input-field-container">
<div class="col s8" id="corpus-analysis-concordance-query-builder-input-field-container">
<div id="corpus-analysis-concordance-query-builder-input-field">
<p id="corpus-analysis-concordance-query-builder-input-field-placeholder">Click on the buttons below to build your query.</p>
<a class="query-element-target btn-floating btn-small blue-grey lighten-4 waves-effect waves-light tooltipped" style="margin-bottom:10px; margin-right:5px;" draggable="true" data-position="bottom" data-tooltip="Add a token to your query">
<i class="material-icons">add</i>
</a>
</div>
</div>
<div class="col s1 center-align">
<a class="btn-floating btn waves-effect waves-light red" id="corpus-analysis-concordance-delete-query-button" style="margin-top:18px;">
<i class="material-icons">delete</i>
</a>
</div>
<div class="input-field col s3">
<i class="material-icons prefix">arrow_forward</i>
<input class="validate corpus-analysis-action" id="corpus-analysis-concordance-form-subcorpus-name" name="subcorpus-name" type="text" required pattern="^[A-Z][a-z0-9\-]*" value="Last"></input>
@ -30,9 +37,9 @@
<div class="row">
<div class="col s12">
<p></p>
<a class="btn waves-effect waves-light tooltipped modal-trigger" href="#corpus-analysis-concordance-positional-attr-modal" data-position="bottom" data-tooltip="Search for any token, for example a word, a lemma or a part-of-speech tag">Add new token to your query</a>
<a class="btn waves-effect waves-light tooltipped modal-trigger" href="#corpus-analysis-concordance-structural-attr-modal" data-position="bottom" data-tooltip="Structure your query with structural attributes, for example sentences, entities or annotate the text">Add structural attributes to your query</a>
<a class="btn waves-effect waves-light tooltipped dropdown-trigger disabled" data-target="corpus-analysis-concordance-token-incidence-modifiers-dropdown" data-toggle-area="token-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>
<a class="btn-small waves-effect waves-light tooltipped modal-trigger" href="#corpus-analysis-concordance-positional-attr-modal" data-position="bottom" data-tooltip="Search for any token, for example a word, a lemma or a part-of-speech tag">Add new token to your query</a>
<a class="btn-small waves-effect waves-light tooltipped modal-trigger" href="#corpus-analysis-concordance-structural-attr-modal" data-position="bottom" data-tooltip="Structure your query with structural attributes, for example sentences, entities or annotate the text">Add structural attributes to your query</a>
<a class="btn-small waves-effect waves-light tooltipped dropdown-trigger disabled" data-target="corpus-analysis-concordance-token-incidence-modifiers-dropdown" data-toggle-area="token-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>
</div>
<div class="row">