New CSS File

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;
+}

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 +=`
-      <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
+  
 }
-