diff --git a/app/static/css/queryBuilder.css b/app/static/css/queryBuilder.css new file mode 100644 index 00000000..4ff7eb9d --- /dev/null +++ b/app/static/css/queryBuilder.css @@ -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; +} diff --git a/app/static/js/CorpusAnalysis/QueryBuilder.js b/app/static/js/CorpusAnalysis/QueryBuilder.js index 42dc9968..e16a1e41 100644 --- a/app/static/js/CorpusAnalysis/QueryBuilder.js +++ b/app/static/js/CorpusAnalysis/QueryBuilder.js @@ -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 +=` -
- ${prettyText} - close -
- `.trim(); - - let buttonElement = builderElement.firstElementChild; + let buttonElement = Utils.elementFromString( + ` +
+ ${prettyText} + close +
+ ` + ); 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 + } - diff --git a/app/templates/_styles.html.j2 b/app/templates/_styles.html.j2 index 2c1ea8f8..cb047f8f 100644 --- a/app/templates/_styles.html.j2 +++ b/app/templates/_styles.html.j2 @@ -4,6 +4,7 @@ + {%- assets filters='pyscss', output='gen/app.%(version)s.css', diff --git a/app/templates/test/analyse_corpus.html.j2 b/app/templates/test/analyse_corpus.html.j2 index 514e3178..8f7374c9 100644 --- a/app/templates/test/analyse_corpus.html.j2 +++ b/app/templates/test/analyse_corpus.html.j2 @@ -4,7 +4,6 @@ a {color: #FFFFFF;} - {% 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 @@ -