From 772b4c1bd1794677526f9e31ce101438e477a477 Mon Sep 17 00:00:00 2001
From: Lukas Dattenberger <lukas.datte@gmail.com>
Date: Tue, 21 Jan 2020 16:57:52 +0100
Subject: [PATCH 1/3] fixed styling issues within the advanced search constum
 scope

---
 app/partials/advancedSearchModal.html          |  4 ++--
 src/stylesheets/general/modals.scss            |  1 +
 src/stylesheets/views/advancedSearchModal.scss | 17 ++++++++++++++++-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/app/partials/advancedSearchModal.html b/app/partials/advancedSearchModal.html
index b0a7d8c6..0cc4c58a 100644
--- a/app/partials/advancedSearchModal.html
+++ b/app/partials/advancedSearchModal.html
@@ -2,7 +2,7 @@
     <div class="modal" list-view-parent>
         <div class="close-modal" ng-click="$emit('closeModal')"></div>
 
-        <form ng-hide="showCustomScopeTab">
+        <form ng-hide="showCustomScopeTab" class="advanced-search">
             <h2>Advanced Search</h2>
             <section>
                 <label>
@@ -36,7 +36,7 @@ <h3>Filters
             </div>
         </form>
 
-        <form ng-show="showCustomScopeTab">
+        <form ng-show="showCustomScopeTab" class="custom-scope">
             <h2>Create Custom Scope</h2>
 
             <div class="flex">
diff --git a/src/stylesheets/general/modals.scss b/src/stylesheets/general/modals.scss
index f799586b..7b0d5222 100644
--- a/src/stylesheets/general/modals.scss
+++ b/src/stylesheets/general/modals.scss
@@ -7,6 +7,7 @@
   overflow-y: auto;
   z-index: 15;
   background-color: rgba($modal_shadow, 0.4);
+  padding: 0 20px; /*Modals don't touch the border of the window*/
 
   .modal {
     position: relative;
diff --git a/src/stylesheets/views/advancedSearchModal.scss b/src/stylesheets/views/advancedSearchModal.scss
index bdbca53c..97e303eb 100644
--- a/src/stylesheets/views/advancedSearchModal.scss
+++ b/src/stylesheets/views/advancedSearchModal.scss
@@ -1,6 +1,7 @@
 .advanced-search-modal {
   .modal {
-    max-width: 700px;
+    max-width: 90vw;
+    width: fit-content;
   }
 
   form .input-label {
@@ -42,12 +43,26 @@
     align-items: flex-start;
     justify-content: stretch;
     margin-top: 4px;
+    margin-right: -20px;
+    flex-wrap: wrap;
 
     > div {
       flex: 1;
+      min-width: 340px;
+      margin-right: 20px;
     }
   }
 
+  .advanced-search {
+    max-width: 90vw;
+    width: 700px;
+  }
+
+  .custom-scope {
+    max-width: 90vw;
+    width: fit-content;
+  }
+
   list-view {
     overflow-y: auto;
     max-height: 400px;

From d093b2eb55318c188bbf105b0a9414320880a035 Mon Sep 17 00:00:00 2001
From: Lukas Dattenberger <lukas.datte@gmail.com>
Date: Tue, 21 Jan 2020 20:50:44 +0100
Subject: [PATCH 2/3] reworked adcanced search custom scope. You can now filter
 files and signatures.

---
 app/partials/advancedSearchModal.html         | 42 +++++++--
 .../Views/edit/advancedSearchModal.js         | 45 +++++++++-
 .../views/advancedSearchModal.scss            | 86 +++++++++++++++++++
 3 files changed, 164 insertions(+), 9 deletions(-)

diff --git a/app/partials/advancedSearchModal.html b/app/partials/advancedSearchModal.html
index 0cc4c58a..60612387 100644
--- a/app/partials/advancedSearchModal.html
+++ b/app/partials/advancedSearchModal.html
@@ -7,8 +7,10 @@ <h2>Advanced Search</h2>
             <section>
                 <label>
                     <span class="input-label">Scope</span>
-                    <select ng-model="searchScope" ng-options="scope for scope in searchScopes" ng-change="searchScopeChanged()"></select>
-                    <span class="edit-custom-scope" ng-click="showCustomScopeTab = true" title="Edit custom scope" ng-show="searchScope === 'Custom'"></span>
+                    <select ng-model="searchScope" ng-options="scope for scope in searchScopes"
+                            ng-change="searchScopeChanged()"></select>
+                    <span class="edit-custom-scope" ng-click="showCustomScopeTab = true" title="Edit custom scope"
+                          ng-show="searchScope === 'Custom'"></span>
                 </label>
             </section>
 
@@ -16,7 +18,7 @@ <h3>Filters
                 <span class="actions">
                     <button class="action-btn positive small" ng-click="addFilter()">Add Filter</button>
                     <button class="action-btn small" ng-click="$broadcast('importFilters')">Import</button>
-                    <button class="action-btn small"  ng-click="$broadcast('exportFilters')">Export</button>
+                    <button class="action-btn small" ng-click="$broadcast('exportFilters')">Export</button>
                 </span>
             </h3>
             <section>
@@ -43,16 +45,42 @@ <h2>Create Custom Scope</h2>
                 <div>
                     <h3>Files</h3>
                     <list-view items="customScope.files">
-                        <input type="checkbox" ng-model="$parent.item.active" />
-                        {{::$parent.item.filename}}
+                        <label ng-show="$parent.item.visible">
+                            <input type="checkbox" ng-model="$parent.item.active"/>
+                            {{::$parent.item.filename}}
+                        </label>
                     </list-view>
+                    <div class="styled-text-input">
+                        <input type=text name="npc-mod-filter" id="adv-filter-files" ng-model="fileFilter"
+                               placeholder="Filter" ng-change="filterFiles(fileFilter)"/>
+                        <label for="adv-filter-files">Filter (RegEx)</label>
+                    </div>
+
+                    <div class="list-commands">
+                        <button class="action-btn positive" ng-click="removeFilterFiles()">Remove Filter</button>
+                        <button class="action-btn positive" ng-click="allVisible(customScope.files, true)">Check All</button>
+                        <button class="action-btn positive" ng-click="allVisible(customScope.files, false)">Uncheck All</button>
+                    </div>
                 </div>
                 <div>
                     <h3>Groups</h3>
                     <list-view items="customScope.groups">
-                        <input type="checkbox" ng-model="$parent.item.active" />
-                        {{::$parent.item.signature}} - {{::$parent.item.name}}
+                        <label ng-show="$parent.item.visible">
+                            <input type="checkbox" ng-model="$parent.item.active"/>
+                            {{::$parent.item.signature}} - {{::$parent.item.name}}
+                        </label>
                     </list-view>
+
+                    <div class="styled-text-input">
+                        <input type=text name="npc-mod-filter" id="adv-filter-groups" ng-model="groupFilter"
+                               placeholder="Filter" ng-change="filterGroups(groupFilter)"/>
+                        <label for="adv-filter-groups">Filter (RegEx)</label>
+                    </div>
+                    <div class="list-commands">
+                        <button class="action-btn positive" ng-click="removeFilterGroups()">Remove Filter</button>
+                        <button class="action-btn positive" ng-click="allVisible(customScope.groups, true)">Check All</button>
+                        <button class="action-btn positive" ng-click="allVisible(customScope.groups, false)">Uncheck All</button>
+                    </div>
                 </div>
             </div>
 
diff --git a/src/javascripts/Views/edit/advancedSearchModal.js b/src/javascripts/Views/edit/advancedSearchModal.js
index 86b05258..eab010c6 100644
--- a/src/javascripts/Views/edit/advancedSearchModal.js
+++ b/src/javascripts/Views/edit/advancedSearchModal.js
@@ -32,7 +32,8 @@ ngapp.controller('advancedSearchModalController', function($scope, searchService
     let getCustomScopeFiles = function() {
         return xelib.GetLoadedFileNames().map(filename => ({
             filename: filename,
-            active: true
+            active: true,
+            visible: true
         }));
     };
 
@@ -41,7 +42,8 @@ ngapp.controller('advancedSearchModalController', function($scope, searchService
         return Object.keys(map).sort().map(signature => ({
             signature: signature,
             name: map[signature],
-            active: true
+            active: true,
+            visible: true
         }));
     };
 
@@ -89,6 +91,45 @@ ngapp.controller('advancedSearchModalController', function($scope, searchService
         $scope.$broadcast('keyDown', e);
     };
 
+    function atLeastOneRegexMatch(regEx, string) {
+        try {
+            const reg = new RegExp(regEx, 'i');
+            const exec = reg.exec(string);
+            return exec !== null;
+        } catch (e) {
+            return false;
+        }
+    }
+
+    $scope.allVisible = function(items, newState) {
+        items.forEach((item) => {
+            if(item.visible)
+                item.active = newState;
+        });
+    }
+
+    $scope.filterFiles = function(filter) {
+        $scope.customScope.files.forEach((file) => {
+            file.visible = !filter || atLeastOneRegexMatch(filter, file.filename);
+        });
+    }
+
+    $scope.filterGroups = function(filter) {
+        $scope.customScope.groups.forEach((group) => {
+            group.visible = !filter || atLeastOneRegexMatch(filter, group.signature + " - " + group.name);
+        });
+    }
+
+    $scope.removeFilterFiles = function() {
+        $scope.filterFiles();
+        $scope.fileFilter = "";
+    }
+
+    $scope.removeFilterGroups = function() {
+        $scope.filterGroups();
+        $scope.groupFilter = "";
+    }
+
     // initialization
     let nodes = $scope.modalOptions.nodes,
         node = nodes[0],
diff --git a/src/stylesheets/views/advancedSearchModal.scss b/src/stylesheets/views/advancedSearchModal.scss
index 97e303eb..dc674d20 100644
--- a/src/stylesheets/views/advancedSearchModal.scss
+++ b/src/stylesheets/views/advancedSearchModal.scss
@@ -61,12 +61,17 @@
   .custom-scope {
     max-width: 90vw;
     width: fit-content;
+
+    .list-item.selected {
+      background: unset;
+    }
   }
 
   list-view {
     overflow-y: auto;
     max-height: 400px;
     display: block;
+    height: 400px;
   }
 
   reference-select {
@@ -134,4 +139,85 @@
       }
     }
   }
+
+
+  .styled-text-input {
+    position: relative;
+    padding: 15px 0 0;
+    margin-top: 10px;
+    $accent-color: desaturate($positive, 0.1);
+
+    input {
+      font-family: inherit;
+      width: 100%;
+      border: 0;
+      border-bottom: 2px solid $accent-color;
+      outline: 0;
+      font-size: 1rem;
+      /*color: #fff;*/
+      padding: 7px 0;
+      background: transparent;
+      transition: border-color 0.2s;
+
+      &::placeholder {
+        color: transparent;
+      }
+
+      &:placeholder-shown ~ label {
+        font-size: 1rem;
+        cursor: text;
+        top: 25px;
+      }
+
+      &:focus {
+        /*padding-bottom: 6px;*/
+        font-weight: 700;
+        border-width: 3px;
+        margin-bottom: -1px;
+        border-image: linear-gradient(to right, $accent-color, transparentize($accent-color, 0.5));
+        border-image-slice: 1;
+      }
+
+      &:focus ~ label {
+        position: absolute;
+        top: 0;
+        display: block;
+        transition: 0.2s;
+        font-size: 1rem;
+        color: $accent-color;
+        font-weight: 700;
+      }
+
+    }
+
+    label {
+      position: absolute;
+      top: 0;
+      display: block;
+      transition: 0.2s;
+      font-size: 1rem;
+      /*color: #9b9b9b;*/
+    }
+  }
+
+  .list-commands {
+    display: flex;
+    align-items: stretch;
+    justify-content: stretch;
+    margin: 4px 0;
+
+    .action-btn {
+      color: $secondary_action;
+      font-size: 0.9rem;
+      flex: 1;
+
+      &:first-child {
+        margin-left: 0;
+      }
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
 }

From eca5b598d406d8ac1963601261518dab9140636b Mon Sep 17 00:00:00 2001
From: Lukas Dattenberger <lukas.datte@gmail.com>
Date: Tue, 21 Jan 2020 21:30:16 +0100
Subject: [PATCH 3/3] Ranamed some Function and added missing ;

---
 app/partials/advancedSearchModal.html            | 12 ++++++------
 .../Views/edit/advancedSearchModal.js            | 16 ++++++++--------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/app/partials/advancedSearchModal.html b/app/partials/advancedSearchModal.html
index 60612387..f5c3491e 100644
--- a/app/partials/advancedSearchModal.html
+++ b/app/partials/advancedSearchModal.html
@@ -57,9 +57,9 @@ <h3>Files</h3>
                     </div>
 
                     <div class="list-commands">
-                        <button class="action-btn positive" ng-click="removeFilterFiles()">Remove Filter</button>
-                        <button class="action-btn positive" ng-click="allVisible(customScope.files, true)">Check All</button>
-                        <button class="action-btn positive" ng-click="allVisible(customScope.files, false)">Uncheck All</button>
+                        <button class="action-btn positive" ng-click="removeFilterForFiles()">Remove Filter</button>
+                        <button class="action-btn positive" ng-click="newStateForVisible(customScope.files, true)">Check All</button>
+                        <button class="action-btn positive" ng-click="newStateForVisible(customScope.files, false)">Uncheck All</button>
                     </div>
                 </div>
                 <div>
@@ -77,9 +77,9 @@ <h3>Groups</h3>
                         <label for="adv-filter-groups">Filter (RegEx)</label>
                     </div>
                     <div class="list-commands">
-                        <button class="action-btn positive" ng-click="removeFilterGroups()">Remove Filter</button>
-                        <button class="action-btn positive" ng-click="allVisible(customScope.groups, true)">Check All</button>
-                        <button class="action-btn positive" ng-click="allVisible(customScope.groups, false)">Uncheck All</button>
+                        <button class="action-btn positive" ng-click="removeFilterForGroups()">Remove Filter</button>
+                        <button class="action-btn positive" ng-click="newStateForVisible(customScope.groups, true)">Check All</button>
+                        <button class="action-btn positive" ng-click="newStateForVisible(customScope.groups, false)">Uncheck All</button>
                     </div>
                 </div>
             </div>
diff --git a/src/javascripts/Views/edit/advancedSearchModal.js b/src/javascripts/Views/edit/advancedSearchModal.js
index eab010c6..acf12605 100644
--- a/src/javascripts/Views/edit/advancedSearchModal.js
+++ b/src/javascripts/Views/edit/advancedSearchModal.js
@@ -101,34 +101,34 @@ ngapp.controller('advancedSearchModalController', function($scope, searchService
         }
     }
 
-    $scope.allVisible = function(items, newState) {
+    $scope.newStateForVisible = function(items, newState) {
         items.forEach((item) => {
             if(item.visible)
                 item.active = newState;
         });
-    }
+    };
 
     $scope.filterFiles = function(filter) {
         $scope.customScope.files.forEach((file) => {
             file.visible = !filter || atLeastOneRegexMatch(filter, file.filename);
         });
-    }
+    };
 
     $scope.filterGroups = function(filter) {
         $scope.customScope.groups.forEach((group) => {
             group.visible = !filter || atLeastOneRegexMatch(filter, group.signature + " - " + group.name);
         });
-    }
+    };
 
-    $scope.removeFilterFiles = function() {
+    $scope.removeFilterForFiles = function() {
         $scope.filterFiles();
         $scope.fileFilter = "";
-    }
+    };
 
-    $scope.removeFilterGroups = function() {
+    $scope.removeFilterForGroups = function() {
         $scope.filterGroups();
         $scope.groupFilter = "";
-    }
+    };
 
     // initialization
     let nodes = $scope.modalOptions.nodes,