diff --git a/app/partials/advancedSearchModal.html b/app/partials/advancedSearchModal.html index b0a7d8c6..f5c3491e 100644 --- a/app/partials/advancedSearchModal.html +++ b/app/partials/advancedSearchModal.html @@ -2,13 +2,15 @@ -
+

Create Custom Scope

Files

- - {{::$parent.item.filename}} + +
+ + +
+ +
+ + + +

Groups

- - {{::$parent.item.signature}} - {{::$parent.item.name}} + + +
+ + +
+
+ + + +
diff --git a/src/javascripts/Views/edit/advancedSearchModal.js b/src/javascripts/Views/edit/advancedSearchModal.js index 86b05258..acf12605 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.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.removeFilterForFiles = function() { + $scope.filterFiles(); + $scope.fileFilter = ""; + }; + + $scope.removeFilterForGroups = function() { + $scope.filterGroups(); + $scope.groupFilter = ""; + }; + // initialization let nodes = $scope.modalOptions.nodes, node = nodes[0], 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..dc674d20 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,9 +43,27 @@ 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-item.selected { + background: unset; } } @@ -52,6 +71,7 @@ overflow-y: auto; max-height: 400px; display: block; + height: 400px; } reference-select { @@ -119,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; + } + } + } + }