From 73241efdc829b75903bf29128ffde7d42d54b37f Mon Sep 17 00:00:00 2001 From: Shivam Dave Date: Tue, 30 Jun 2015 13:20:46 -0700 Subject: [PATCH 001/109] [Fix] Fixes bundle Changes the persistance to the example version. --- platform/persistence/elastic/bundle.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/platform/persistence/elastic/bundle.json b/platform/persistence/elastic/bundle.json index e7dfa1ab9d..2e3be8e1df 100644 --- a/platform/persistence/elastic/bundle.json +++ b/platform/persistence/elastic/bundle.json @@ -17,7 +17,7 @@ }, { "key": "ELASTIC_ROOT", - "value": "http://localhost:9200", + "value": "/elastic", "priority": "fallback" }, { From d9a1b9d530c9f62b37447e3780c074cbedaa5dea Mon Sep 17 00:00:00 2001 From: slhale Date: Tue, 4 Aug 2015 13:03:34 -0700 Subject: [PATCH 002/109] [Search] Moving files Moved the elasticsearch provider to platform/persistence/elastic. Then moved the search aggregator and the generic provider into a services folder within the search folder. --- platform/persistence/elastic/bundle.json | 6 ++++++ .../elastic/src/ElasticSearchProvider.js} | 6 +++--- .../elastic/test/ElasticSearchProviderSpec.js} | 4 ++-- platform/persistence/elastic/test/suite.json | 3 ++- platform/search/bundle.json | 12 +++--------- .../{providers => services}/GenericSearchProvider.js | 0 .../src/{workers => services}/GenericSearchWorker.js | 0 .../search/src/{ => services}/SearchAggregator.js | 0 .../GenericSearchProviderSpec.js | 0 .../{workers => services}/GenericSearchWorkerSpec.js | 0 .../test/{ => services}/SearchAggregatorSpec.js | 0 11 files changed, 16 insertions(+), 15 deletions(-) rename platform/{search/src/providers/ElasticsearchSearchProvider.js => persistence/elastic/src/ElasticSearchProvider.js} (97%) rename platform/{search/test/providers/ElasticsearchSearchProviderSpec.js => persistence/elastic/test/ElasticSearchProviderSpec.js} (97%) rename platform/search/src/{providers => services}/GenericSearchProvider.js (100%) rename platform/search/src/{workers => services}/GenericSearchWorker.js (100%) rename platform/search/src/{ => services}/SearchAggregator.js (100%) rename platform/search/test/{providers => services}/GenericSearchProviderSpec.js (100%) rename platform/search/test/{workers => services}/GenericSearchWorkerSpec.js (100%) rename platform/search/test/{ => services}/SearchAggregatorSpec.js (100%) diff --git a/platform/persistence/elastic/bundle.json b/platform/persistence/elastic/bundle.json index e7dfa1ab9d..5b47fc8d21 100644 --- a/platform/persistence/elastic/bundle.json +++ b/platform/persistence/elastic/bundle.json @@ -8,6 +8,12 @@ "type": "provider", "implementation": "ElasticPersistenceProvider.js", "depends": [ "$http", "$q", "PERSISTENCE_SPACE", "ELASTIC_ROOT", "ELASTIC_PATH" ] + }, + { + "provides": "searchService", + "type": "provider", + "implementation": "ElasticSearchProvider.js", + "depends": [ "$http", "objectService", "ELASTIC_ROOT" ] } ], "constants": [ diff --git a/platform/search/src/providers/ElasticsearchSearchProvider.js b/platform/persistence/elastic/src/ElasticSearchProvider.js similarity index 97% rename from platform/search/src/providers/ElasticsearchSearchProvider.js rename to platform/persistence/elastic/src/ElasticSearchProvider.js index 9ab415c671..c2bf88b991 100644 --- a/platform/search/src/providers/ElasticsearchSearchProvider.js +++ b/platform/persistence/elastic/src/ElasticSearchProvider.js @@ -22,7 +22,7 @@ /*global define*/ /** - * Module defining ElasticsearchSearchProvider. Created by shale on 07/16/2015. + * Module defining ElasticSearchProvider. Created by shale on 07/16/2015. */ define( [], @@ -46,7 +46,7 @@ define( * @param ROOT the constant ELASTIC_ROOT which allows us to * interact with ElasticSearch. */ - function ElasticsearchSearchProvider($http, objectService, ROOT) { + function ElasticSearchProvider($http, objectService, ROOT) { // Add the fuzziness operator to the search term function addFuzziness(searchTerm, editDistance) { @@ -207,6 +207,6 @@ define( } - return ElasticsearchSearchProvider; + return ElasticSearchProvider; } ); \ No newline at end of file diff --git a/platform/search/test/providers/ElasticsearchSearchProviderSpec.js b/platform/persistence/elastic/test/ElasticSearchProviderSpec.js similarity index 97% rename from platform/search/test/providers/ElasticsearchSearchProviderSpec.js rename to platform/persistence/elastic/test/ElasticSearchProviderSpec.js index 8ba25ed2be..f9135d2a23 100644 --- a/platform/search/test/providers/ElasticsearchSearchProviderSpec.js +++ b/platform/persistence/elastic/test/ElasticSearchProviderSpec.js @@ -25,8 +25,8 @@ * SearchSpec. Created by shale on 07/31/2015. */ define( - ["../../src/providers/ElasticsearchSearchProvider"], - function (ElasticsearchSearchProvider) { + ["../../src/providers/ElasticSearchProvider"], + function (ElasticSearchProvider) { "use strict"; // JSLint doesn't like underscore-prefixed properties, diff --git a/platform/persistence/elastic/test/suite.json b/platform/persistence/elastic/test/suite.json index cc8dc2ce0c..85b407eb73 100644 --- a/platform/persistence/elastic/test/suite.json +++ b/platform/persistence/elastic/test/suite.json @@ -1,4 +1,5 @@ [ "ElasticIndicator", - "ElasticPersistenceProvider" + "ElasticPersistenceProvider", + "ElasticSearchProvider" ] diff --git a/platform/search/bundle.json b/platform/search/bundle.json index 56c2b24f5b..bd6fe46225 100644 --- a/platform/search/bundle.json +++ b/platform/search/bundle.json @@ -31,26 +31,20 @@ { "provides": "searchService", "type": "provider", - "implementation": "providers/GenericSearchProvider.js", + "implementation": "services/GenericSearchProvider.js", "depends": [ "$q", "objectService", "workerService", "roots[]" ] }, - { - "provides": "searchService", - "type": "provider", - "implementation": "providers/ElasticsearchSearchProvider.js", - "depends": [ "$http", "objectService", "ELASTIC_ROOT" ] - }, { "provides": "searchService", "type": "aggregator", - "implementation": "SearchAggregator.js", + "implementation": "services/SearchAggregator.js", "depends": [ "$q" ] } ], "workers": [ { "key": "genericSearchWorker", - "scriptUrl": "workers/GenericSearchWorker.js", + "scriptUrl": "services/GenericSearchWorker.js", "depends": [ "objectService" ] } ] diff --git a/platform/search/src/providers/GenericSearchProvider.js b/platform/search/src/services/GenericSearchProvider.js similarity index 100% rename from platform/search/src/providers/GenericSearchProvider.js rename to platform/search/src/services/GenericSearchProvider.js diff --git a/platform/search/src/workers/GenericSearchWorker.js b/platform/search/src/services/GenericSearchWorker.js similarity index 100% rename from platform/search/src/workers/GenericSearchWorker.js rename to platform/search/src/services/GenericSearchWorker.js diff --git a/platform/search/src/SearchAggregator.js b/platform/search/src/services/SearchAggregator.js similarity index 100% rename from platform/search/src/SearchAggregator.js rename to platform/search/src/services/SearchAggregator.js diff --git a/platform/search/test/providers/GenericSearchProviderSpec.js b/platform/search/test/services/GenericSearchProviderSpec.js similarity index 100% rename from platform/search/test/providers/GenericSearchProviderSpec.js rename to platform/search/test/services/GenericSearchProviderSpec.js diff --git a/platform/search/test/workers/GenericSearchWorkerSpec.js b/platform/search/test/services/GenericSearchWorkerSpec.js similarity index 100% rename from platform/search/test/workers/GenericSearchWorkerSpec.js rename to platform/search/test/services/GenericSearchWorkerSpec.js diff --git a/platform/search/test/SearchAggregatorSpec.js b/platform/search/test/services/SearchAggregatorSpec.js similarity index 100% rename from platform/search/test/SearchAggregatorSpec.js rename to platform/search/test/services/SearchAggregatorSpec.js From 5711b2b241e3199c7197b050c3fd8e5774cae5a3 Mon Sep 17 00:00:00 2001 From: slhale Date: Tue, 4 Aug 2015 13:04:52 -0700 Subject: [PATCH 003/109] [Search] Fixed file paths --- .../persistence/elastic/test/ElasticSearchProviderSpec.js | 4 ++-- platform/search/test/services/GenericSearchProviderSpec.js | 2 +- platform/search/test/services/GenericSearchWorkerSpec.js | 2 +- platform/search/test/services/SearchAggregatorSpec.js | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/platform/persistence/elastic/test/ElasticSearchProviderSpec.js b/platform/persistence/elastic/test/ElasticSearchProviderSpec.js index f9135d2a23..decb1a5c98 100644 --- a/platform/persistence/elastic/test/ElasticSearchProviderSpec.js +++ b/platform/persistence/elastic/test/ElasticSearchProviderSpec.js @@ -25,7 +25,7 @@ * SearchSpec. Created by shale on 07/31/2015. */ define( - ["../../src/providers/ElasticSearchProvider"], + ["../src/ElasticSearchProvider"], function (ElasticSearchProvider) { "use strict"; @@ -68,7 +68,7 @@ define( [ "getId", "getModel" ] ); - provider = new ElasticsearchSearchProvider(mockHttp, mockObjectService, ""); + provider = new ElasticSearchProvider(mockHttp, mockObjectService, ""); provider.query(' test "query" ', 0, undefined, 1000); }); diff --git a/platform/search/test/services/GenericSearchProviderSpec.js b/platform/search/test/services/GenericSearchProviderSpec.js index 00f4e4ba36..31c374bbfc 100644 --- a/platform/search/test/services/GenericSearchProviderSpec.js +++ b/platform/search/test/services/GenericSearchProviderSpec.js @@ -25,7 +25,7 @@ * SearchSpec. Created by shale on 07/31/2015. */ define( - ["../../src/providers/GenericSearchProvider"], + ["../../src/services/GenericSearchProvider"], function (GenericSearchProvider) { "use strict"; diff --git a/platform/search/test/services/GenericSearchWorkerSpec.js b/platform/search/test/services/GenericSearchWorkerSpec.js index 67e482b218..3edafa537b 100644 --- a/platform/search/test/services/GenericSearchWorkerSpec.js +++ b/platform/search/test/services/GenericSearchWorkerSpec.js @@ -31,7 +31,7 @@ define( describe("The generic search worker ", function () { // If this test fails, make sure this path is correct - var worker = new Worker('platform/search/src/workers/GenericSearchWorker.js'), + var worker = new Worker('platform/search/src/services/GenericSearchWorker.js'), numObjects = 5; beforeEach(function () { diff --git a/platform/search/test/services/SearchAggregatorSpec.js b/platform/search/test/services/SearchAggregatorSpec.js index cf35e2928e..3205f0f9ec 100644 --- a/platform/search/test/services/SearchAggregatorSpec.js +++ b/platform/search/test/services/SearchAggregatorSpec.js @@ -25,7 +25,7 @@ * SearchSpec. Created by shale on 07/31/2015. */ define( - ["../src/SearchAggregator"], + ["../../src/services/SearchAggregator"], function (SearchAggregator) { "use strict"; From 077a0ce3e329b210baa13307538190a05155a2e9 Mon Sep 17 00:00:00 2001 From: slhale Date: Tue, 4 Aug 2015 13:05:59 -0700 Subject: [PATCH 004/109] [Search] Changed array to dictionary for faster lookup times in the search aggregator's filterDuplicated function. --- platform/search/src/services/SearchAggregator.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/platform/search/src/services/SearchAggregator.js b/platform/search/src/services/SearchAggregator.js index d5e41c67a7..c68adb53ff 100644 --- a/platform/search/src/services/SearchAggregator.js +++ b/platform/search/src/services/SearchAggregator.js @@ -46,12 +46,12 @@ define( // Remove duplicate objects that have the same ID. Modifies the passed // array, and returns the number that were removed. function filterDuplicates(results, total) { - var ids = [], + var ids = {}, numRemoved = 0, i; for (i = 0; i < results.length; i += 1) { - if (ids.indexOf(results[i].id) !== -1) { + if (ids[results[i].id]) { // If this result's ID is already there, remove the object results.splice(i, 1); numRemoved += 1; @@ -60,7 +60,7 @@ define( i -= 1; } else { // Otherwise add the ID to the list of the ones we have seen - ids.push(results[i].id); + ids[results[i].id] = true; } } From 15e39e00c2164fd5c010832bcdcdd5e83f0d9665 Mon Sep 17 00:00:00 2001 From: slhale Date: Tue, 4 Aug 2015 13:07:47 -0700 Subject: [PATCH 005/109] [Search] Search aggregator return type The search service returns objects containing searchResult objects. --- platform/persistence/elastic/src/ElasticSearchProvider.js | 2 +- platform/search/src/services/GenericSearchProvider.js | 2 +- platform/search/src/services/SearchAggregator.js | 4 +++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/platform/persistence/elastic/src/ElasticSearchProvider.js b/platform/persistence/elastic/src/ElasticSearchProvider.js index c2bf88b991..f8150ddafc 100644 --- a/platform/persistence/elastic/src/ElasticSearchProvider.js +++ b/platform/persistence/elastic/src/ElasticSearchProvider.js @@ -183,7 +183,7 @@ define( * promise for a result object that has the format * {hits: searchResult[], total: number, timedOut: boolean} * where a searchResult has the format - * {id: domainObject ID, object: domainObject, score: number} + * {id: string, object: domainObject, score: number} * * Notes: * * The order of the results is from highest to lowest score, diff --git a/platform/search/src/services/GenericSearchProvider.js b/platform/search/src/services/GenericSearchProvider.js index 84d41bbde4..977e6443e0 100644 --- a/platform/search/src/services/GenericSearchProvider.js +++ b/platform/search/src/services/GenericSearchProvider.js @@ -201,7 +201,7 @@ define( * Returns a promise for a result object that has the format * {hits: searchResult[], total: number, timedOut: boolean} * where a searchResult has the format - * {id: domainObject ID, object: domainObject, score: number} + * {id: string, object: domainObject, score: number} * * Notes: * * The order of the results is not guarenteed. diff --git a/platform/search/src/services/SearchAggregator.js b/platform/search/src/services/SearchAggregator.js index c68adb53ff..da267214bf 100644 --- a/platform/search/src/services/SearchAggregator.js +++ b/platform/search/src/services/SearchAggregator.js @@ -128,7 +128,9 @@ define( /** * Sends a query to each of the providers. Returns a promise for * a result object that has the format - * {hits: domainObject[], total: number} + * {hits: searchResult[], total: number, timedOut: boolean} + * where a searchResult has the format + * {id: string, object: domainObject, score: number} * * @param inputText The text input that is the query. * @param maxResults (optional) The maximum number of results From eab140df4804d2a28322f10fa962790b5ee6287d Mon Sep 17 00:00:00 2001 From: slhale Date: Tue, 4 Aug 2015 13:10:29 -0700 Subject: [PATCH 006/109] [Search] Generic search roots constant Made a constant for the generic search roots, rather than depending on roots[]. --- platform/search/bundle.json | 9 ++++++++- .../search/src/services/GenericSearchProvider.js | 13 ++++--------- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/platform/search/bundle.json b/platform/search/bundle.json index bd6fe46225..5ae12ce943 100644 --- a/platform/search/bundle.json +++ b/platform/search/bundle.json @@ -2,6 +2,13 @@ "name": "Search", "description": "Allows the user to search through the file tree.", "extensions": { + "constants": [ + { + "key": "GENERIC_SEARCH_ROOTS", + "value": [ "ROOT" ], + "priority": "fallback" + } + ], "controllers": [ { "key": "SearchController", @@ -32,7 +39,7 @@ "provides": "searchService", "type": "provider", "implementation": "services/GenericSearchProvider.js", - "depends": [ "$q", "objectService", "workerService", "roots[]" ] + "depends": [ "$q", "objectService", "workerService", "GENERIC_SEARCH_ROOTS" ] }, { "provides": "searchService", diff --git a/platform/search/src/services/GenericSearchProvider.js b/platform/search/src/services/GenericSearchProvider.js index 977e6443e0..8fa0feb863 100644 --- a/platform/search/src/services/GenericSearchProvider.js +++ b/platform/search/src/services/GenericSearchProvider.js @@ -43,9 +43,10 @@ define( * domain objects can be gotten. * @param {WorkerService} workerService The service which allows * more easy creation of web workers. - * @param {roots[]} roots An array of all the root domain objects. + * @param {GENERIC_SEARCH_ROOTS} ROOTS An array of the root + * domain objects' IDs. */ - function GenericSearchProvider($q, objectService, workerService, roots) { + function GenericSearchProvider($q, objectService, workerService, ROOTS) { var worker = workerService.run('genericSearchWorker'), pendingQueries = {}; // pendingQueries is a dictionary with the key value pairs st @@ -142,14 +143,8 @@ define( // Converts the filetree into a list function getItems(timeout) { - var rootIds = [], - i; - for (i = 0; i < roots.length; i += 1) { - rootIds.push(roots[i].id); - } - // Aquire root objects - objectService.getObjects(rootIds).then(function (objectsById) { + objectService.getObjects(ROOTS).then(function (objectsById) { var objects = [], id; From d82be0deef2e102ad6c0b3662734f122ba36e52d Mon Sep 17 00:00:00 2001 From: slhale Date: Tue, 4 Aug 2015 13:14:20 -0700 Subject: [PATCH 007/109] [Search] Remove unused parameter --- platform/search/src/services/GenericSearchProvider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/platform/search/src/services/GenericSearchProvider.js b/platform/search/src/services/GenericSearchProvider.js index 8fa0feb863..0806d41dc7 100644 --- a/platform/search/src/services/GenericSearchProvider.js +++ b/platform/search/src/services/GenericSearchProvider.js @@ -142,7 +142,7 @@ define( } // Converts the filetree into a list - function getItems(timeout) { + function getItems() { // Aquire root objects objectService.getObjects(ROOTS).then(function (objectsById) { var objects = [], From c9acfc9f893e039c4b62d37c547782f019dcf603 Mon Sep 17 00:00:00 2001 From: slhale Date: Tue, 4 Aug 2015 16:40:31 -0700 Subject: [PATCH 008/109] [Search] Tweak controller loading Changed the controller to update the tree display status when the search result promise is fufilled, not before making the search query. Also chagned the loading increment from 5 to 20. --- .../search/src/controllers/SearchController.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/platform/search/src/controllers/SearchController.js b/platform/search/src/controllers/SearchController.js index cd07b83ee5..0a49e1adf5 100644 --- a/platform/search/src/controllers/SearchController.js +++ b/platform/search/src/controllers/SearchController.js @@ -28,7 +28,7 @@ define(function () { "use strict"; var INITIAL_LOAD_NUMBER = 20, - LOAD_INCREMENT = 5; + LOAD_INCREMENT = 20; function SearchController($scope, searchService) { // Starting amount of results to load. Will get increased. @@ -42,13 +42,6 @@ define(function () { // We are starting to load. loading = true; - // Update whether the file tree should be displayed - if (inputText === '' || inputText === undefined) { - $scope.ngModel.search = false; - } else { - $scope.ngModel.search = true; - } - if (!maxResults) { // Reset 'load more' numResults = INITIAL_LOAD_NUMBER; @@ -59,6 +52,13 @@ define(function () { fullResults = result; $scope.results = result.hits.slice(0, numResults); + // Update whether the file tree should be displayed + if (inputText === '' || inputText === undefined) { + $scope.ngModel.search = false; + } else { + $scope.ngModel.search = true; + } + // Now we are done loading. loading = false; }); From e43e14ec00b5ca003484ed7b7ad5446b5bf1715a Mon Sep 17 00:00:00 2001 From: slhale Date: Tue, 4 Aug 2015 16:45:23 -0700 Subject: [PATCH 009/109] [Search] Remove unused dependency Removed the generic search worker's dependency on the object service, which it does not use. --- platform/search/bundle.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/platform/search/bundle.json b/platform/search/bundle.json index 5ae12ce943..3dba92c859 100644 --- a/platform/search/bundle.json +++ b/platform/search/bundle.json @@ -51,8 +51,7 @@ "workers": [ { "key": "genericSearchWorker", - "scriptUrl": "services/GenericSearchWorker.js", - "depends": [ "objectService" ] + "scriptUrl": "services/GenericSearchWorker.js" } ] } From 5fa6db72d27a38e98c12789a579d89e03d2ef26f Mon Sep 17 00:00:00 2001 From: slhale Date: Tue, 4 Aug 2015 16:50:50 -0700 Subject: [PATCH 010/109] [Search] More controller tweaking --- platform/search/src/controllers/SearchController.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/platform/search/src/controllers/SearchController.js b/platform/search/src/controllers/SearchController.js index 0a49e1adf5..1ecccd5c2d 100644 --- a/platform/search/src/controllers/SearchController.js +++ b/platform/search/src/controllers/SearchController.js @@ -42,6 +42,12 @@ define(function () { // We are starting to load. loading = true; + // Update whether the file tree should be displayed + // Hide tree only when starting search + if (inputText !== '' && inputText !== undefined) { + $scope.ngModel.search = true; + } + if (!maxResults) { // Reset 'load more' numResults = INITIAL_LOAD_NUMBER; @@ -53,10 +59,9 @@ define(function () { $scope.results = result.hits.slice(0, numResults); // Update whether the file tree should be displayed + // Reveal tree only when finishing search if (inputText === '' || inputText === undefined) { $scope.ngModel.search = false; - } else { - $scope.ngModel.search = true; } // Now we are done loading. From 6407a66d30c9565c5e9b8de74d34d2b94c2b4435 Mon Sep 17 00:00:00 2001 From: slhale Date: Wed, 5 Aug 2015 10:26:16 -0700 Subject: [PATCH 011/109] [Search] Worker test correction Removed unused parameter. Made path to worker not relative. --- platform/search/test/services/GenericSearchWorkerSpec.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/platform/search/test/services/GenericSearchWorkerSpec.js b/platform/search/test/services/GenericSearchWorkerSpec.js index 3edafa537b..b95ec5a1bb 100644 --- a/platform/search/test/services/GenericSearchWorkerSpec.js +++ b/platform/search/test/services/GenericSearchWorkerSpec.js @@ -19,19 +19,19 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/*global define,describe,it,expect,runs,waitsFor,beforeEach,jasmine,Worker*/ +/*global define,describe,it,expect,runs,waitsFor,beforeEach,jasmine,Worker,require*/ /** * SearchSpec. Created by shale on 07/31/2015. */ define( [], - function (GenericSearchWorker) { + function () { "use strict"; describe("The generic search worker ", function () { // If this test fails, make sure this path is correct - var worker = new Worker('platform/search/src/services/GenericSearchWorker.js'), + var worker = new Worker(require.toUrl('platform/search/src/services/GenericSearchWorker.js')), numObjects = 5; beforeEach(function () { From 8923f23f70968755768b39458364c391ceb1724a Mon Sep 17 00:00:00 2001 From: slhale Date: Thu, 6 Aug 2015 09:49:29 -0700 Subject: [PATCH 012/109] [Search] New item indexer This one (hopefully) doesn't fill up the call stack when there are lots of items. --- .../src/services/GenericSearchProvider.js | 33 +++++++++---------- 1 file changed, 15 insertions(+), 18 deletions(-) diff --git a/platform/search/src/services/GenericSearchProvider.js b/platform/search/src/services/GenericSearchProvider.js index 0806d41dc7..f5fd54e094 100644 --- a/platform/search/src/services/GenericSearchProvider.js +++ b/platform/search/src/services/GenericSearchProvider.js @@ -120,24 +120,21 @@ define( worker.onmessage = handleResponse; - // Helper function for getItems(). Indexes the tree. - function itemsHelper(children, i) { - // Index the current node - indexItem(children[i]); + // Helper function for getItems(). Indexes the tree. + function indexItems(nodes) { + var i; - if (i >= children.length) { - // Done! - return children; - } else if (children[i].hasCapability('composition')) { - // This child has children - return children[i].getCapability('composition').invoke().then(function (grandchildren) { - // Add grandchildren to the end of the list - // They will also be checked for composition - return itemsHelper(children.concat(grandchildren), i + 1); - }); - } else { - // This child is a leaf - return itemsHelper(children, i + 1); + for (i = 0; i < nodes.length; i += 1) { + // Index each item with the web worker + indexItem(nodes[i]); + + if (nodes[i].hasCapability('composition')) { + // This node has children + nodes[i].getCapability('composition').invoke().then(function (children) { + // Index the children + indexItems(children); + }); + } } } @@ -154,7 +151,7 @@ define( } // Index all of the roots' descendents - itemsHelper(objects, 0); + indexItems(objects); }); } From e729a966c74c77951bfb22b6cb918102a6414674 Mon Sep 17 00:00:00 2001 From: slhale Date: Thu, 6 Aug 2015 10:12:34 -0700 Subject: [PATCH 013/109] [Search] Type checking Added type checking for arrays to indexItems. --- .../src/services/GenericSearchProvider.js | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/platform/search/src/services/GenericSearchProvider.js b/platform/search/src/services/GenericSearchProvider.js index f5fd54e094..3d8ac39251 100644 --- a/platform/search/src/services/GenericSearchProvider.js +++ b/platform/search/src/services/GenericSearchProvider.js @@ -122,20 +122,23 @@ define( // Helper function for getItems(). Indexes the tree. function indexItems(nodes) { - var i; - - for (i = 0; i < nodes.length; i += 1) { + console.log('nodes', nodes); + nodes.forEach(function (node) { // Index each item with the web worker - indexItem(nodes[i]); + indexItem(node); - if (nodes[i].hasCapability('composition')) { + if (node.hasCapability('composition')) { // This node has children - nodes[i].getCapability('composition').invoke().then(function (children) { - // Index the children - indexItems(children); + node.getCapability('composition').invoke().then(function (children) { + // Index the children + if (children.constructor === Array) { + indexItems(children); + } else { + indexItems([children]); + } }); } - } + }); } // Converts the filetree into a list From 44dce05ec523d07053ec7c20ebde8a519a14fa0c Mon Sep 17 00:00:00 2001 From: slhale Date: Thu, 6 Aug 2015 10:12:44 -0700 Subject: [PATCH 014/109] [Search] Correct test file paths --- platform/search/test/suite.json | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/platform/search/test/suite.json b/platform/search/test/suite.json index dc90ba2d07..d6faf47e5c 100644 --- a/platform/search/test/suite.json +++ b/platform/search/test/suite.json @@ -1,8 +1,7 @@ [ "controllers/SearchController", "controllers/SearchItemController", - "SearchAggregator", - "providers/ElasticsearchSearchProvider", - "providers/GenericSearchProvider", - "workers/GenericSearchWorker" + "services/SearchAggregator", + "services/GenericSearchProvider", + "services/GenericSearchWorker" ] From 1a4d7618c1ce4884eff165887ca15e83975131a7 Mon Sep 17 00:00:00 2001 From: slhale Date: Thu, 6 Aug 2015 10:23:03 -0700 Subject: [PATCH 015/109] [Search] Infinite cycle check in indexItems in the generic provider. --- .../src/services/GenericSearchProvider.js | 31 +++++++++++-------- 1 file changed, 18 insertions(+), 13 deletions(-) diff --git a/platform/search/src/services/GenericSearchProvider.js b/platform/search/src/services/GenericSearchProvider.js index 3d8ac39251..5c1b724c2b 100644 --- a/platform/search/src/services/GenericSearchProvider.js +++ b/platform/search/src/services/GenericSearchProvider.js @@ -48,6 +48,7 @@ define( */ function GenericSearchProvider($q, objectService, workerService, ROOTS) { var worker = workerService.run('genericSearchWorker'), + indexed = {}, pendingQueries = {}; // pendingQueries is a dictionary with the key value pairs st // the key is the timestamp and the value is the promise @@ -122,21 +123,25 @@ define( // Helper function for getItems(). Indexes the tree. function indexItems(nodes) { - console.log('nodes', nodes); nodes.forEach(function (node) { - // Index each item with the web worker - indexItem(node); + var id = node.getId(); - if (node.hasCapability('composition')) { - // This node has children - node.getCapability('composition').invoke().then(function (children) { - // Index the children - if (children.constructor === Array) { - indexItems(children); - } else { - indexItems([children]); - } - }); + if (!indexed[id]) { + // Index each item with the web worker + indexItem(node); + indexed[id] = true; + + if (node.hasCapability('composition')) { + // This node has children + node.getCapability('composition').invoke().then(function (children) { + // Index the children + if (children.constructor === Array) { + indexItems(children); + } else { + indexItems([children]); + } + }); + } } }); } From e0a0d293faa0d77362622b90eb41531abeb8f4fe Mon Sep 17 00:00:00 2001 From: slhale Date: Thu, 6 Aug 2015 10:35:57 -0700 Subject: [PATCH 016/109] [Search] Update test Fully calls through the controller's search(). --- platform/search/test/controllers/SearchControllerSpec.js | 1 + 1 file changed, 1 insertion(+) diff --git a/platform/search/test/controllers/SearchControllerSpec.js b/platform/search/test/controllers/SearchControllerSpec.js index e05ab6c17b..56aa1e4618 100644 --- a/platform/search/test/controllers/SearchControllerSpec.js +++ b/platform/search/test/controllers/SearchControllerSpec.js @@ -117,6 +117,7 @@ define( // Flag should be flase with empty input mockScope.ngModel.input = ""; controller.search(); + mockPromise.then.mostRecentCall.args[0]({hits: [], total: 0}); expect(mockScope.ngModel.search).toEqual(false); }); }); From ee2d7efae2d4d46a6d22be7951b374b55bf42a91 Mon Sep 17 00:00:00 2001 From: slhale Date: Thu, 6 Aug 2015 15:01:17 -0700 Subject: [PATCH 017/109] [Search] Index checks for changes When indexing items initially, the generic provider listens for mutations in case an item's composition changes, so it can then index the new children. --- .../src/services/GenericSearchProvider.js | 27 ++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/platform/search/src/services/GenericSearchProvider.js b/platform/search/src/services/GenericSearchProvider.js index 5c1b724c2b..068f304321 100644 --- a/platform/search/src/services/GenericSearchProvider.js +++ b/platform/search/src/services/GenericSearchProvider.js @@ -124,14 +124,15 @@ define( // Helper function for getItems(). Indexes the tree. function indexItems(nodes) { nodes.forEach(function (node) { - var id = node.getId(); + var id = node && node.getId && node.getId(); + // If we have not yet indexed this item, index it if (!indexed[id]) { // Index each item with the web worker indexItem(node); indexed[id] = true; - - if (node.hasCapability('composition')) { + + if (node.hasCapability && node.hasCapability('composition')) { // This node has children node.getCapability('composition').invoke().then(function (children) { // Index the children @@ -143,6 +144,26 @@ define( }); } } + + // Watch for changes to this item, in case it gets new children + if (node && node.hasCapability && node.hasCapability('mutation')) { + node.getCapability('mutation').listen(function (listener) { + if (listener && listener.composition) { + // If the node was mutated to have children, get the child domain objects + objectService.getObjects(listener.composition).then(function (objectsById) { + var objects = [], + id; + + // Get each of the domain objects in objectsById + for (id in objectsById) { + objects.push(objectsById[id]); + } + + indexItems(objects); + }); + } + }); + } }); } From 1d2cd4745c8e22d9d6eb9510e0f76f8c06354b90 Mon Sep 17 00:00:00 2001 From: slhale Date: Thu, 6 Aug 2015 15:01:45 -0700 Subject: [PATCH 018/109] [Search] Update tests Updated generic provider test for more general mock capability object. --- .../services/GenericSearchProviderSpec.js | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/platform/search/test/services/GenericSearchProviderSpec.js b/platform/search/test/services/GenericSearchProviderSpec.js index 31c374bbfc..acd5414d81 100644 --- a/platform/search/test/services/GenericSearchProviderSpec.js +++ b/platform/search/test/services/GenericSearchProviderSpec.js @@ -25,7 +25,7 @@ * SearchSpec. Created by shale on 07/31/2015. */ define( - ["../../src/services/GenericSearchProvider"], + ["../src/GenericSearchProvider"], function (GenericSearchProvider) { "use strict"; @@ -35,8 +35,8 @@ define( mockObjectService, mockObjectPromise, mockDomainObjects, - mockComposition, - mockCompositionPromise, + mockCapability, + mockCapabilityPromise, mockWorkerService, mockWorker, mockRoots = ['root1', 'root2'], @@ -83,30 +83,31 @@ define( mockDomainObjects[i] = ( jasmine.createSpyObj( "domainObject", - [ "getId", "getModel", "hasCapability", "getCapability"] + [ "getId", "getModel", "hasCapability", "getCapability" ] ) ); mockDomainObjects[i].getId.andReturn(i); + mockDomainObjects[i].getCapability.andReturn(mockCapability); } // Give the first object children mockDomainObjects[0].hasCapability.andReturn(true); - mockComposition = jasmine.createSpyObj( - "composition", - [ "invoke" ] + mockCapability = jasmine.createSpyObj( + "capability", + [ "invoke", "listen" ] ); - mockCompositionPromise = jasmine.createSpyObj( + mockCapabilityPromise = jasmine.createSpyObj( "promise", [ "then", "catch" ] ); - mockComposition.invoke.andReturn(mockCompositionPromise); - mockDomainObjects[0].getCapability.andReturn(mockComposition); + mockCapability.invoke.andReturn(mockCapabilityPromise); + mockDomainObjects[0].getCapability.andReturn(mockCapability); provider = new GenericSearchProvider(mockQ, mockObjectService, mockWorkerService, mockRoots); }); it("indexes tree on initialization", function () { mockObjectPromise.then.mostRecentCall.args[0](mockDomainObjects); - mockCompositionPromise.then.mostRecentCall.args[0](mockDomainObjects[1]); + mockCapabilityPromise.then.mostRecentCall.args[0](mockDomainObjects[1]); expect(mockObjectService.getObjects).toHaveBeenCalled(); expect(mockWorker.postMessage).toHaveBeenCalled(); From 7141c2818ab3ed1bbec68d4e6ac34e614932ceb5 Mon Sep 17 00:00:00 2001 From: slhale Date: Thu, 6 Aug 2015 16:59:09 -0700 Subject: [PATCH 019/109] [Search] Search icon near input Added a search icon next to the search bar input. --- platform/commonUI/general/res/css/tree.css | 44 ++++++++++++------- .../general/res/sass/search/_search.scss | 14 +++++- platform/search/res/templates/search.html | 26 +++++++++-- 3 files changed, 62 insertions(+), 22 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 97109f37a7..3cc9fb088a 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -277,13 +277,23 @@ ul.tree { top: 23px; margin-top: 10px; } /* line 36, ../sass/search/_search.scss */ - .search-holder .search .search-input { + .search-holder .search .search-bar { width: 100%; } - /* line 40, ../sass/search/_search.scss */ + /* line 39, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-icon { + color: #0099cc; + float: left; + font-size: 20px; + margin-right: 2px; } + /* line 46, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-input { + width: 120px; + float: left; } + /* line 52, ../sass/search/_search.scss */ .search-holder .search .search-scroll { top: 25px; overflow-y: auto; } - /* line 47, ../sass/search/_search.scss */ + /* line 59, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item { -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s; @@ -293,10 +303,10 @@ ul.tree { border-radius: 2px; padding-top: 4px; padding-bottom: 2px; } - /* line 61, ../sass/search/_search.scss */ + /* line 73, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 65, ../sass/search/_search.scss */ + /* line 77, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label .title-label { display: inline-block; position: absolute; @@ -308,47 +318,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 87, ../sass/search/_search.scss */ + /* line 99, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected { background: #005177; color: #fff; } - /* line 91, ../sass/search/_search.scss */ + /* line 103, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .view-control { color: #0099cc; } - /* line 94, ../sass/search/_search.scss */ + /* line 106, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { color: #fff; } - /* line 101, ../sass/search/_search.scss */ + /* line 113, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 104, ../sass/search/_search.scss */ + /* line 116, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { display: block; } - /* line 107, ../sass/search/_search.scss */ + /* line 119, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { color: #33ccff; } - /* line 115, ../sass/search/_search.scss */ + /* line 127, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon { position: relative; } - /* line 117, ../sass/search/_search.scss */ + /* line 129, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 121, ../sass/search/_search.scss */ + /* line 133, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .title-label { font-style: italic; font-size: .9em; opacity: 0.5; margin-left: 26px; line-height: 24px; } - /* line 131, ../sass/search/_search.scss */ + /* line 143, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 136, ../sass/search/_search.scss */ + /* line 148, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 141, ../sass/search/_search.scss */ + /* line 153, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-more-button { margin-top: 5px; margin-bottom: 5px; diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index d97562d318..2575235ad5 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -33,8 +33,20 @@ .search { - .search-input { + .search-bar { width: 100%; + + .search-icon { + color: $colorItemTreeIcon; + float: left; + font-size: $iconWidth; + margin-right: 2px; + } + + .search-input { + width: 120px; + float: left; + } } .search-scroll { diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html index a2ac8e8ac9..a2a676ee43 100644 --- a/platform/search/res/templates/search.html +++ b/platform/search/res/templates/search.html @@ -23,15 +23,33 @@ ng-controller="SearchController as controller"> -
+ +
+
+ d +
+ +
From 03aba8bbf70f83083bc6a31d8da1a033d4aa65a2 Mon Sep 17 00:00:00 2001 From: Daniel Pacak Date: Fri, 7 Aug 2015 10:16:59 +0200 Subject: [PATCH 020/109] [Build] Start the WAR in an embedded Tomcat Servlet Container --- pom.xml | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/pom.xml b/pom.xml index 8ca3cd6edb..20bd31799f 100644 --- a/pom.xml +++ b/pom.xml @@ -176,6 +176,17 @@ + + + org.apache.tomcat.maven + tomcat7-maven-plugin + 2.2 + + 8080 + /mct + + + From 7b471e537936fd36a15dc5db694e56e31dd3f11b Mon Sep 17 00:00:00 2001 From: slhale Date: Tue, 11 Aug 2015 10:35:08 -0700 Subject: [PATCH 021/109] [Search] Search icon Moved the search icon to appear within the text input area, and dissapears when the input area is focused. --- platform/commonUI/general/res/css/tree.css | 61 +++++++++++-------- .../general/res/sass/search/_search.scss | 35 ++++++++--- platform/search/res/templates/search.html | 10 +-- 3 files changed, 67 insertions(+), 39 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 3cc9fb088a..dbc1c78dde 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -278,22 +278,31 @@ ul.tree { margin-top: 10px; } /* line 36, ../sass/search/_search.scss */ .search-holder .search .search-bar { - width: 100%; } - /* line 39, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-icon { - color: #0099cc; - float: left; - font-size: 20px; - margin-right: 2px; } - /* line 46, ../sass/search/_search.scss */ + width: 100%; + margin-top: 4px; } + /* line 43, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-input { - width: 120px; - float: left; } - /* line 52, ../sass/search/_search.scss */ + width: 100%; + float: left; + position: relative; + top: -4px; } + /* line 51, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-icon { + color: #737373; + font-size: 12px; + margin-left: 3px; + float: left; + width: 0; + height: 0; + margin-top: -19px; } + /* line 65, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-input:focus ~ div.search-icon { + display: none; } + /* line 71, ../sass/search/_search.scss */ .search-holder .search .search-scroll { top: 25px; overflow-y: auto; } - /* line 59, ../sass/search/_search.scss */ + /* line 78, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item { -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s; @@ -303,10 +312,10 @@ ul.tree { border-radius: 2px; padding-top: 4px; padding-bottom: 2px; } - /* line 73, ../sass/search/_search.scss */ + /* line 92, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 77, ../sass/search/_search.scss */ + /* line 96, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label .title-label { display: inline-block; position: absolute; @@ -318,47 +327,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 99, ../sass/search/_search.scss */ + /* line 118, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected { background: #005177; color: #fff; } - /* line 103, ../sass/search/_search.scss */ + /* line 122, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .view-control { color: #0099cc; } - /* line 106, ../sass/search/_search.scss */ + /* line 125, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { color: #fff; } - /* line 113, ../sass/search/_search.scss */ + /* line 132, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 116, ../sass/search/_search.scss */ + /* line 135, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { display: block; } - /* line 119, ../sass/search/_search.scss */ + /* line 138, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { color: #33ccff; } - /* line 127, ../sass/search/_search.scss */ + /* line 146, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon { position: relative; } - /* line 129, ../sass/search/_search.scss */ + /* line 148, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 133, ../sass/search/_search.scss */ + /* line 152, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .title-label { font-style: italic; font-size: .9em; opacity: 0.5; margin-left: 26px; line-height: 24px; } - /* line 143, ../sass/search/_search.scss */ + /* line 162, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 148, ../sass/search/_search.scss */ + /* line 167, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 153, ../sass/search/_search.scss */ + /* line 172, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-more-button { margin-top: 5px; margin-bottom: 5px; diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index 2575235ad5..e2bde017be 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -34,18 +34,37 @@ .search { .search-bar { - width: 100%; + $heightAdjust: 4px; + $textInputHeight: 19px; - .search-icon { - color: $colorItemTreeIcon; - float: left; - font-size: $iconWidth; - margin-right: 2px; - } + width: 100%; + margin-top: $heightAdjust; .search-input { - width: 120px; + width: 100%; float: left; + + position: relative; + top: -$heightAdjust; + } + + .search-icon { + color: $colorItemFg; + font-size: 12px;//$iconWidth; + + // Make the icon within the left edge of the input area + margin-left: 3px; + float: left; + width: 0; + height: 0; + + // Line up icon with text input vertically + margin-top: -$textInputHeight; + } + + .search-input:focus~div.search-icon { + // Make icon invisible when the text input is focused + display: none; } } diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html index a2a676ee43..3b9f7355c0 100644 --- a/platform/search/res/templates/search.html +++ b/platform/search/res/templates/search.html @@ -25,14 +25,14 @@
-
- d -
- + ng-keyup="controller.search()" + id="searchInput" /> +
+ M +
-
+
M
+ + x + +
+ +
M
- + x - -
From dd993c81a76b85f572736ea0def15711be064de7 Mon Sep 17 00:00:00 2001 From: slhale Date: Wed, 12 Aug 2015 12:46:01 -0700 Subject: [PATCH 032/109] [Search] Clear icon working Clicking on the clear icon now clears the input text in the search bar. --- platform/commonUI/general/res/css/tree.css | 235 +++++++++--------- .../general/res/sass/search/_search.scss | 25 +- platform/search/res/templates/search.html | 10 +- .../src/controllers/SearchController.js | 8 + 4 files changed, 154 insertions(+), 124 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index af3e1baa4f..2e9d6cc1ad 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -276,120 +276,129 @@ ul.tree { padding-right: 5px; top: 23px; margin-top: 10px; } - /* line 36, ../sass/search/_search.scss */ - .search-holder .search .search-bar { - width: 100%; - margin-top: 4px; } - /* line 43, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-input { - position: relative; - top: -4px; + /* line 34, ../sass/search/_search.scss */ + .search-holder .search { + position: relative; } + /* line 37, ../sass/search/_search.scss */ + .search-holder .search .search-bar { width: 100%; - padding-right: 16px; } - /* line 52, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-icon { - color: #737373; - font-size: 12px; - margin-left: 3px; - width: 0; - height: 0; - margin-top: -19px; - transition: visibility .15s, opacity .15s; } - /* line 67, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-icon.content { + margin-top: 4px; } + /* line 44, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-input { + position: relative; + top: -4px; + width: 100%; + padding-right: 16px; } + /* line 53, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-icon { + color: #737373; + font-size: 12px; + margin-left: 3px; + width: 0; + height: 0; + margin-top: -19px; + transition: visibility .15s, opacity .15s; } + /* line 68, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-icon.content { + visibility: hidden; + opacity: 0; } + /* line 75, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-input:focus + div.search-icon { visibility: hidden; opacity: 0; } - /* line 74, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-input:focus + div.search-icon { - visibility: hidden; - opacity: 0; } - /* line 80, ../sass/search/_search.scss */ - .search-holder .search .search-bar .clear-icon { - color: #737373; - font-size: 6px; - float: right; - margin-right: 2px; - margin-top: -2px; - padding: 4px; - cursor: crosshair; } - /* line 98, ../sass/search/_search.scss */ - .search-holder .search .search-scroll { - top: 25px; - overflow-y: auto; - padding-right: 5px; } - /* line 106, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item { - -moz-transition: background-color 0.25s; - -o-transition: background-color 0.25s; - -webkit-transition: background-color 0.25s; - transition: background-color 0.25s; - margin-bottom: 2px; - border-radius: 2px; - padding-top: 4px; - padding-bottom: 2px; } - /* line 120, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item .label { - margin-left: 6px; } - /* line 124, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item .label .title-label { - display: inline-block; - position: absolute; - left: 29px; - right: 5px; - font-size: .8em; - line-height: 17px; - width: auto; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } - /* line 146, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item.selected { - background: #005177; - color: #fff; } - /* line 150, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item.selected .view-control { - color: #0099cc; } - /* line 153, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { - color: #fff; } - /* line 160, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { - background: #404040; - color: #cccccc; } - /* line 163, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { - display: block; } - /* line 166, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { - color: #33ccff; } - /* line 174, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .load-icon { - position: relative; } - /* line 176, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .load-icon.loading { - pointer-events: none; - margin-left: 6px; } - /* line 180, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .load-icon.loading .title-label { - font-style: italic; - font-size: .9em; - opacity: 0.5; - margin-left: 26px; - line-height: 24px; } - /* line 190, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .load-icon.loading .wait-spinner { + /* line 81, ../sass/search/_search.scss */ + .search-holder .search .search-bar .clear-icon { + position: absolute; + display: block; + cursor: pointer; + color: #737373; + font-size: 6px; + padding: 4px; + right: 0px; + top: -1px; + margin-right: 2px; + visibility: hidden; } + /* line 99, ../sass/search/_search.scss */ + .search-holder .search .search-bar .clear-icon.content { + visibility: visible; } + /* line 105, ../sass/search/_search.scss */ + .search-holder .search .search-scroll { + top: 25px; + overflow-y: auto; + padding-right: 5px; } + /* line 113, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item { + -moz-transition: background-color 0.25s; + -o-transition: background-color 0.25s; + -webkit-transition: background-color 0.25s; + transition: background-color 0.25s; + margin-bottom: 2px; + border-radius: 2px; + padding-top: 4px; + padding-bottom: 2px; } + /* line 127, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 195, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .load-icon:not(.loading) { - cursor: pointer; } - /* line 200, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .load-more-button { - margin-top: 5px; - margin-bottom: 5px; - position: relative; - left: 25%; - width: 50%; - white-space: nowrap; - height: 20px; - line-height: 11px; - font-size: 0.7em; } + /* line 131, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item .label .title-label { + display: inline-block; + position: absolute; + left: 29px; + right: 5px; + font-size: .8em; + line-height: 17px; + width: auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + /* line 153, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item.selected { + background: #005177; + color: #fff; } + /* line 157, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item.selected .view-control { + color: #0099cc; } + /* line 160, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { + color: #fff; } + /* line 167, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { + background: #404040; + color: #cccccc; } + /* line 170, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { + display: block; } + /* line 173, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { + color: #33ccff; } + /* line 181, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .load-icon { + position: relative; } + /* line 183, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .load-icon.loading { + pointer-events: none; + margin-left: 6px; } + /* line 187, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .load-icon.loading .title-label { + font-style: italic; + font-size: .9em; + opacity: 0.5; + margin-left: 26px; + line-height: 24px; } + /* line 197, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .load-icon.loading .wait-spinner { + margin-left: 6px; } + /* line 202, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .load-icon:not(.loading) { + cursor: pointer; } + /* line 207, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .load-more-button { + margin-top: 5px; + margin-bottom: 5px; + position: relative; + left: 25%; + width: 50%; + white-space: nowrap; + height: 20px; + line-height: 11px; + font-size: 0.7em; } diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index fda9660b04..6a8a020a01 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -32,6 +32,7 @@ margin-top: 10px; .search { + position: relative; .search-bar { $heightAdjust: 4px; @@ -78,20 +79,26 @@ } .clear-icon { + + position: absolute; + display: block; + + cursor: pointer; + color: $colorItemFg; font-size: 6px; - - float: right; - margin-right: 2px; - margin-top: -2px; padding: 4px; - &.content { - // Make button visible only when there is text input - } + right: 0px; + top: -1px; + margin-right: 2px; - //temp - cursor: crosshair; + // Icon is visible only when there is text input + visibility: hidden; + + &.content { + visibility: visible; + } } } diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html index 9dc9afa9d2..b8d65a272f 100644 --- a/platform/search/res/templates/search.html +++ b/platform/search/res/templates/search.html @@ -24,23 +24,28 @@
+ +
M
- + + + ng-class="{content: controller.hasInput()}" + ng-click="controller.clear()"> x +
@@ -72,4 +77,5 @@
+
\ No newline at end of file diff --git a/platform/search/src/controllers/SearchController.js b/platform/search/src/controllers/SearchController.js index 0180844a98..96833ca088 100644 --- a/platform/search/src/controllers/SearchController.js +++ b/platform/search/src/controllers/SearchController.js @@ -118,6 +118,14 @@ define(function () { */ hasInput: function () { return !($scope.ngModel.input === "" || $scope.ngModel.input === undefined); + }, + + /** + * Clears the input text. + */ + clear: function () { + $scope.ngModel.input = ''; + $scope.ngModel.search = false; } }; } From 0218bad9e802a8da9ef90632bf7fcfc1fc7765e6 Mon Sep 17 00:00:00 2001 From: slhale Date: Wed, 12 Aug 2015 12:58:22 -0700 Subject: [PATCH 033/109] [Search] Clear icon padding and transition --- platform/commonUI/general/res/css/tree.css | 47 ++++++++++--------- .../general/res/sass/search/_search.scss | 11 +++-- 2 files changed, 32 insertions(+), 26 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 2e9d6cc1ad..2965840d32 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -313,20 +313,23 @@ ul.tree { cursor: pointer; color: #737373; font-size: 6px; - padding: 4px; + padding: 6px; + padding-left: 4px; right: 0px; - top: -1px; - margin-right: 2px; - visibility: hidden; } - /* line 99, ../sass/search/_search.scss */ + top: -3px; + visibility: hidden; + opacity: 0; + transition: visibility .15s, opacity .15s; } + /* line 101, ../sass/search/_search.scss */ .search-holder .search .search-bar .clear-icon.content { - visibility: visible; } - /* line 105, ../sass/search/_search.scss */ + visibility: visible; + opacity: 1; } + /* line 108, ../sass/search/_search.scss */ .search-holder .search .search-scroll { top: 25px; overflow-y: auto; padding-right: 5px; } - /* line 113, ../sass/search/_search.scss */ + /* line 116, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item { -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s; @@ -336,10 +339,10 @@ ul.tree { border-radius: 2px; padding-top: 4px; padding-bottom: 2px; } - /* line 127, ../sass/search/_search.scss */ + /* line 130, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 131, ../sass/search/_search.scss */ + /* line 134, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label .title-label { display: inline-block; position: absolute; @@ -351,47 +354,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 153, ../sass/search/_search.scss */ + /* line 156, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected { background: #005177; color: #fff; } - /* line 157, ../sass/search/_search.scss */ + /* line 160, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .view-control { color: #0099cc; } - /* line 160, ../sass/search/_search.scss */ + /* line 163, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { color: #fff; } - /* line 167, ../sass/search/_search.scss */ + /* line 170, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 170, ../sass/search/_search.scss */ + /* line 173, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { display: block; } - /* line 173, ../sass/search/_search.scss */ + /* line 176, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { color: #33ccff; } - /* line 181, ../sass/search/_search.scss */ + /* line 184, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon { position: relative; } - /* line 183, ../sass/search/_search.scss */ + /* line 186, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 187, ../sass/search/_search.scss */ + /* line 190, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .title-label { font-style: italic; font-size: .9em; opacity: 0.5; margin-left: 26px; line-height: 24px; } - /* line 197, ../sass/search/_search.scss */ + /* line 200, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 202, ../sass/search/_search.scss */ + /* line 205, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 207, ../sass/search/_search.scss */ + /* line 210, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-more-button { margin-top: 5px; margin-bottom: 5px; diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index 6a8a020a01..ab0c674b0d 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -79,7 +79,6 @@ } .clear-icon { - position: absolute; display: block; @@ -87,17 +86,21 @@ color: $colorItemFg; font-size: 6px; - padding: 4px; + padding: 6px; + padding-left: 4px; right: 0px; - top: -1px; - margin-right: 2px; + top: -3px; // Icon is visible only when there is text input visibility: hidden; + opacity: 0; + + transition: visibility .15s, opacity .15s; &.content { visibility: visible; + opacity: 1; } } } From eefc746567f01264d7b130b64b78f9f1e6e3d8b8 Mon Sep 17 00:00:00 2001 From: slhale Date: Wed, 12 Aug 2015 13:05:30 -0700 Subject: [PATCH 034/109] [Search] Fix results display Search results are now properly displayed again. --- platform/commonUI/general/res/css/tree.css | 245 +++++++++--------- .../general/res/sass/search/_search.scss | 6 +- 2 files changed, 126 insertions(+), 125 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 2965840d32..dc6b7fa667 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -276,132 +276,131 @@ ul.tree { padding-right: 5px; top: 23px; margin-top: 10px; } - /* line 34, ../sass/search/_search.scss */ - .search-holder .search { + /* line 36, ../sass/search/_search.scss */ + .search-holder .search .search-bar { + width: 100%; + margin-top: 4px; position: relative; } - /* line 37, ../sass/search/_search.scss */ - .search-holder .search .search-bar { + /* line 45, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-input { + position: relative; + top: -4px; width: 100%; - margin-top: 4px; } - /* line 44, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-input { - position: relative; - top: -4px; - width: 100%; - padding-right: 16px; } - /* line 53, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-icon { - color: #737373; - font-size: 12px; - margin-left: 3px; - width: 0; - height: 0; - margin-top: -19px; - transition: visibility .15s, opacity .15s; } - /* line 68, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-icon.content { - visibility: hidden; - opacity: 0; } - /* line 75, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-input:focus + div.search-icon { + height: 19px; + padding-right: 16px; } + /* line 55, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-icon { + color: #737373; + font-size: 12px; + margin-left: 3px; + width: 0; + height: 0; + margin-top: -19px; + transition: visibility .15s, opacity .15s; } + /* line 70, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-icon.content { visibility: hidden; opacity: 0; } - /* line 81, ../sass/search/_search.scss */ - .search-holder .search .search-bar .clear-icon { - position: absolute; - display: block; - cursor: pointer; - color: #737373; - font-size: 6px; - padding: 6px; - padding-left: 4px; - right: 0px; - top: -3px; - visibility: hidden; - opacity: 0; - transition: visibility .15s, opacity .15s; } - /* line 101, ../sass/search/_search.scss */ - .search-holder .search .search-bar .clear-icon.content { - visibility: visible; - opacity: 1; } - /* line 108, ../sass/search/_search.scss */ - .search-holder .search .search-scroll { - top: 25px; - overflow-y: auto; - padding-right: 5px; } - /* line 116, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item { - -moz-transition: background-color 0.25s; - -o-transition: background-color 0.25s; - -webkit-transition: background-color 0.25s; - transition: background-color 0.25s; - margin-bottom: 2px; - border-radius: 2px; - padding-top: 4px; - padding-bottom: 2px; } - /* line 130, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item .label { - margin-left: 6px; } - /* line 134, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item .label .title-label { - display: inline-block; - position: absolute; - left: 29px; - right: 5px; - font-size: .8em; - line-height: 17px; - width: auto; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } - /* line 156, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item.selected { - background: #005177; + /* line 77, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-input:focus + div.search-icon { + visibility: hidden; + opacity: 0; } + /* line 83, ../sass/search/_search.scss */ + .search-holder .search .search-bar .clear-icon { + position: absolute; + display: block; + cursor: pointer; + color: #737373; + font-size: 6px; + padding: 6px; + padding-left: 4px; + right: 0px; + top: -3px; + visibility: hidden; + opacity: 0; + transition: visibility .15s, opacity .15s; } + /* line 103, ../sass/search/_search.scss */ + .search-holder .search .search-bar .clear-icon.content { + visibility: visible; + opacity: 1; } + /* line 110, ../sass/search/_search.scss */ + .search-holder .search .search-scroll { + top: 25px; + overflow-y: auto; + padding-right: 5px; } + /* line 118, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item { + -moz-transition: background-color 0.25s; + -o-transition: background-color 0.25s; + -webkit-transition: background-color 0.25s; + transition: background-color 0.25s; + margin-bottom: 2px; + border-radius: 2px; + padding-top: 4px; + padding-bottom: 2px; } + /* line 132, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item .label { + margin-left: 6px; } + /* line 136, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item .label .title-label { + display: inline-block; + position: absolute; + left: 29px; + right: 5px; + font-size: .8em; + line-height: 17px; + width: auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + /* line 158, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item.selected { + background: #005177; + color: #fff; } + /* line 162, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item.selected .view-control { + color: #0099cc; } + /* line 165, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { color: #fff; } - /* line 160, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item.selected .view-control { - color: #0099cc; } - /* line 163, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { - color: #fff; } - /* line 170, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { - background: #404040; - color: #cccccc; } - /* line 173, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { - display: block; } - /* line 176, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { - color: #33ccff; } - /* line 184, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .load-icon { - position: relative; } - /* line 186, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .load-icon.loading { - pointer-events: none; + /* line 172, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { + background: #404040; + color: #cccccc; } + /* line 175, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { + display: block; } + /* line 178, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { + color: #33ccff; } + /* line 186, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .load-icon { + position: relative; } + /* line 188, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .load-icon.loading { + pointer-events: none; + margin-left: 6px; } + /* line 192, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .load-icon.loading .title-label { + font-style: italic; + font-size: .9em; + opacity: 0.5; + margin-left: 26px; + line-height: 24px; } + /* line 202, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 190, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .load-icon.loading .title-label { - font-style: italic; - font-size: .9em; - opacity: 0.5; - margin-left: 26px; - line-height: 24px; } - /* line 200, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .load-icon.loading .wait-spinner { - margin-left: 6px; } - /* line 205, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .load-icon:not(.loading) { - cursor: pointer; } - /* line 210, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .load-more-button { - margin-top: 5px; - margin-bottom: 5px; - position: relative; - left: 25%; - width: 50%; - white-space: nowrap; - height: 20px; - line-height: 11px; - font-size: 0.7em; } + /* line 207, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .load-icon:not(.loading) { + cursor: pointer; } + /* line 212, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .load-more-button { + margin-top: 5px; + margin-bottom: 5px; + position: relative; + left: 25%; + width: 50%; + white-space: nowrap; + height: 20px; + line-height: 11px; + font-size: 0.7em; } diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index ab0c674b0d..3b38c16ee3 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -32,19 +32,21 @@ margin-top: 10px; .search { - position: relative; .search-bar { $heightAdjust: 4px; - $textInputHeight: 19px; + $textInputHeight: 19px; // This is equal to the default value, 19px width: 100%; margin-top: $heightAdjust; + position: relative; + .search-input { position: relative; top: -$heightAdjust; width: 100%; + height: $textInputHeight; // For clear button padding-right: 16px; From 41ddb76385565c07594ecc49a9c6a401eb624c98 Mon Sep 17 00:00:00 2001 From: slhale Date: Wed, 12 Aug 2015 13:24:39 -0700 Subject: [PATCH 035/109] [Search] Remove unnecissary line --- platform/search/res/templates/search.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html index b8d65a272f..73c4519781 100644 --- a/platform/search/res/templates/search.html +++ b/platform/search/res/templates/search.html @@ -29,8 +29,7 @@ + ng-keyup="controller.search()" /> From edf52f32adeb494879b6ee1834354a8fc63f64d7 Mon Sep 17 00:00:00 2001 From: slhale Date: Wed, 12 Aug 2015 16:13:36 -0700 Subject: [PATCH 036/109] [Search] Search menu Creating a search menu which will allow for more specific search options. So far have started top-down with styling. In progress. --- platform/commonUI/general/res/css/tree.css | 104 ++++++++++++++---- .../general/res/sass/search/_search.scss | 75 +++++++++++++ platform/search/res/templates/search.html | 18 +++ .../src/controllers/SearchController.js | 11 +- 4 files changed, 183 insertions(+), 25 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index dc6b7fa667..4f72d60d30 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -280,15 +280,41 @@ ul.tree { .search-holder .search .search-bar { width: 100%; margin-top: 4px; - position: relative; } + position: relative; + /* + // Make bubble caret thing + .search-menu-holder:before { + position: absolute; + top: -7px; + left: 9px; + display: inline-block; + border-right: 7px solid transparent; + border-bottom: 7px solid #CCC; + border-left: 7px solid transparent; + border-bottom-color: rgba(0, 0, 0, 0.2); + content: ''; + } + + .search-menu-holder:after { + position: absolute; + top: -6px; + left: 10px; + display: inline-block; + border-right: 6px solid transparent; + border-bottom: 6px solid white; + border-left: 6px solid transparent; + content: ''; + } + */ } /* line 45, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-input { position: relative; top: -4px; width: 100%; height: 19px; - padding-right: 16px; } - /* line 55, ../sass/search/_search.scss */ + padding-right: 16px; + padding-right: 28px; } + /* line 58, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-icon { color: #737373; font-size: 12px; @@ -297,15 +323,15 @@ ul.tree { height: 0; margin-top: -19px; transition: visibility .15s, opacity .15s; } - /* line 70, ../sass/search/_search.scss */ + /* line 73, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-icon.content { visibility: hidden; opacity: 0; } - /* line 77, ../sass/search/_search.scss */ + /* line 80, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-input:focus + div.search-icon { visibility: hidden; opacity: 0; } - /* line 83, ../sass/search/_search.scss */ + /* line 86, ../sass/search/_search.scss */ .search-holder .search .search-bar .clear-icon { position: absolute; display: block; @@ -318,17 +344,47 @@ ul.tree { top: -3px; visibility: hidden; opacity: 0; - transition: visibility .15s, opacity .15s; } - /* line 103, ../sass/search/_search.scss */ + transition: visibility .15s, opacity .15s; + right: 16px; + padding-right: 2px; } + /* line 106, ../sass/search/_search.scss */ .search-holder .search .search-bar .clear-icon.content { visibility: visible; opacity: 1; } - /* line 110, ../sass/search/_search.scss */ + /* line 116, ../sass/search/_search.scss */ + .search-holder .search .search-bar .menu-icon { + position: absolute; + display: block; + cursor: pointer; + color: #737373; + font-size: 6px; + padding: 6px; + padding-left: 4px; + right: 0px; + top: -3px; } + /* line 131, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-menu-holder { + float: right; + margin-top: 12px; + left: -15px; } + /* line 140, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-menu-holder .search-menu ul li { + padding: 0; + padding-left: 6px; + padding-right: 6px; + font-size: 0.9em; } + /* line 177, ../sass/search/_search.scss */ + .search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder { + visibility: visible; } + /* line 180, ../sass/search/_search.scss */ + .search-holder .search .search-bar div.search-menu-holder:hover { + visibility: visible; } + /* line 185, ../sass/search/_search.scss */ .search-holder .search .search-scroll { top: 25px; overflow-y: auto; padding-right: 5px; } - /* line 118, ../sass/search/_search.scss */ + /* line 193, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item { -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s; @@ -338,10 +394,10 @@ ul.tree { border-radius: 2px; padding-top: 4px; padding-bottom: 2px; } - /* line 132, ../sass/search/_search.scss */ + /* line 207, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 136, ../sass/search/_search.scss */ + /* line 211, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label .title-label { display: inline-block; position: absolute; @@ -353,47 +409,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 158, ../sass/search/_search.scss */ + /* line 233, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected { background: #005177; color: #fff; } - /* line 162, ../sass/search/_search.scss */ + /* line 237, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .view-control { color: #0099cc; } - /* line 165, ../sass/search/_search.scss */ + /* line 240, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { color: #fff; } - /* line 172, ../sass/search/_search.scss */ + /* line 247, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 175, ../sass/search/_search.scss */ + /* line 250, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { display: block; } - /* line 178, ../sass/search/_search.scss */ + /* line 253, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { color: #33ccff; } - /* line 186, ../sass/search/_search.scss */ + /* line 261, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon { position: relative; } - /* line 188, ../sass/search/_search.scss */ + /* line 263, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 192, ../sass/search/_search.scss */ + /* line 267, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .title-label { font-style: italic; font-size: .9em; opacity: 0.5; margin-left: 26px; line-height: 24px; } - /* line 202, ../sass/search/_search.scss */ + /* line 277, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 207, ../sass/search/_search.scss */ + /* line 282, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 212, ../sass/search/_search.scss */ + /* line 287, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-more-button { margin-top: 5px; margin-bottom: 5px; diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index 3b38c16ee3..8b0eb471e9 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -50,6 +50,9 @@ // For clear button padding-right: 16px; + + // Modifications for existence of menu icon: + padding-right: 16px + 12px; } .search-icon { @@ -104,6 +107,78 @@ visibility: visible; opacity: 1; } + + // Modifications for existence of menu icon: + right: 16px; + padding-right: 2px; + } + + .menu-icon { + position: absolute; + display: block; + + cursor: pointer; + + color: $colorItemFg; + font-size: 6px; + padding: 6px; + padding-left: 4px; + + right: 0px; + top: -3px; + } + + .search-menu-holder { + //visibility: hidden; + + float: right; + margin-top: 12px;//$textInputHeight; + left: -15px; + + .search-menu { + + ul li { + padding: 0; + padding-left: 6px; + padding-right: 6px; + + font-size: 0.9em; + } + } + } + + /* + // Make bubble caret thing + .search-menu-holder:before { + position: absolute; + top: -7px; + left: 9px; + display: inline-block; + border-right: 7px solid transparent; + border-bottom: 7px solid #CCC; + border-left: 7px solid transparent; + border-bottom-color: rgba(0, 0, 0, 0.2); + content: ''; + } + + .search-menu-holder:after { + position: absolute; + top: -6px; + left: 10px; + display: inline-block; + border-right: 6px solid transparent; + border-bottom: 6px solid white; + border-left: 6px solid transparent; + content: ''; + } + */ + + // Hovering reveals menu + .menu-icon:hover + div.search-menu-holder { + visibility: visible; + } + div.search-menu-holder:hover { + visibility: visible; } } diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html index 73c4519781..e81b638726 100644 --- a/platform/search/res/templates/search.html +++ b/platform/search/res/templates/search.html @@ -45,6 +45,24 @@ x + + + + v + + + +
+
+
    +
  • Contents 1
    • +
  • Contents 2
    • +
  • Contents 3
    • +
+
+
+ diff --git a/platform/search/src/controllers/SearchController.js b/platform/search/src/controllers/SearchController.js index 96833ca088..4e129cd8f7 100644 --- a/platform/search/src/controllers/SearchController.js +++ b/platform/search/src/controllers/SearchController.js @@ -124,8 +124,17 @@ define(function () { * Clears the input text. */ clear: function () { + // Clear input field $scope.ngModel.input = ''; - $scope.ngModel.search = false; + // Call search to clear the results list too + search(); + }, + + /** + * Opens a menu for more search options. + */ + menu: function () { + console.log('open menu'); } }; } From a9c85d52418001bbc05a7b20adf6b73b32e387f4 Mon Sep 17 00:00:00 2001 From: slhale Date: Wed, 12 Aug 2015 16:38:38 -0700 Subject: [PATCH 037/109] [Search] Search menu style Added caret to top of menu. --- platform/commonUI/general/res/css/tree.css | 77 ++++++++----------- .../general/res/sass/search/_search.scss | 21 +---- 2 files changed, 35 insertions(+), 63 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 4f72d60d30..a057c3d53d 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -280,32 +280,7 @@ ul.tree { .search-holder .search .search-bar { width: 100%; margin-top: 4px; - position: relative; - /* - // Make bubble caret thing - .search-menu-holder:before { - position: absolute; - top: -7px; - left: 9px; - display: inline-block; - border-right: 7px solid transparent; - border-bottom: 7px solid #CCC; - border-left: 7px solid transparent; - border-bottom-color: rgba(0, 0, 0, 0.2); - content: ''; - } - - .search-menu-holder:after { - position: absolute; - top: -6px; - left: 10px; - display: inline-block; - border-right: 6px solid transparent; - border-bottom: 6px solid white; - border-left: 6px solid transparent; - content: ''; - } - */ } + position: relative; } /* line 45, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-input { position: relative; @@ -365,26 +340,36 @@ ul.tree { /* line 131, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder { float: right; - margin-top: 12px; - left: -15px; } + margin-top: 17px; + left: -25px; } /* line 140, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu ul li { padding: 0; padding-left: 6px; padding-right: 6px; font-size: 0.9em; } - /* line 177, ../sass/search/_search.scss */ + /* line 151, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-menu-holder:after { + position: absolute; + top: -6px; + left: 10px; + display: inline-block; + border-right: 6px solid transparent; + border-bottom: 6px solid #5e5e5e; + border-left: 6px solid transparent; + content: ''; } + /* line 164, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder { visibility: visible; } - /* line 180, ../sass/search/_search.scss */ + /* line 167, ../sass/search/_search.scss */ .search-holder .search .search-bar div.search-menu-holder:hover { visibility: visible; } - /* line 185, ../sass/search/_search.scss */ + /* line 172, ../sass/search/_search.scss */ .search-holder .search .search-scroll { top: 25px; overflow-y: auto; padding-right: 5px; } - /* line 193, ../sass/search/_search.scss */ + /* line 180, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item { -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s; @@ -394,10 +379,10 @@ ul.tree { border-radius: 2px; padding-top: 4px; padding-bottom: 2px; } - /* line 207, ../sass/search/_search.scss */ + /* line 194, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 211, ../sass/search/_search.scss */ + /* line 198, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label .title-label { display: inline-block; position: absolute; @@ -409,47 +394,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 233, ../sass/search/_search.scss */ + /* line 220, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected { background: #005177; color: #fff; } - /* line 237, ../sass/search/_search.scss */ + /* line 224, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .view-control { color: #0099cc; } - /* line 240, ../sass/search/_search.scss */ + /* line 227, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { color: #fff; } - /* line 247, ../sass/search/_search.scss */ + /* line 234, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 250, ../sass/search/_search.scss */ + /* line 237, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { display: block; } - /* line 253, ../sass/search/_search.scss */ + /* line 240, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { color: #33ccff; } - /* line 261, ../sass/search/_search.scss */ + /* line 248, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon { position: relative; } - /* line 263, ../sass/search/_search.scss */ + /* line 250, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 267, ../sass/search/_search.scss */ + /* line 254, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .title-label { font-style: italic; font-size: .9em; opacity: 0.5; margin-left: 26px; line-height: 24px; } - /* line 277, ../sass/search/_search.scss */ + /* line 264, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 282, ../sass/search/_search.scss */ + /* line 269, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 287, ../sass/search/_search.scss */ + /* line 274, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-more-button { margin-top: 5px; margin-bottom: 5px; diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index 8b0eb471e9..9b143a6f65 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -132,8 +132,8 @@ //visibility: hidden; float: right; - margin-top: 12px;//$textInputHeight; - left: -15px; + margin-top: $textInputHeight - 2px; + left: -25px; .search-menu { @@ -147,31 +147,18 @@ } } - /* // Make bubble caret thing - .search-menu-holder:before { - position: absolute; - top: -7px; - left: 9px; - display: inline-block; - border-right: 7px solid transparent; - border-bottom: 7px solid #CCC; - border-left: 7px solid transparent; - border-bottom-color: rgba(0, 0, 0, 0.2); - content: ''; - } - .search-menu-holder:after { position: absolute; top: -6px; left: 10px; display: inline-block; border-right: 6px solid transparent; - border-bottom: 6px solid white; + //border-bottom: 6px solid white; + border-bottom: 6px solid rgb(94, 94, 94); // Where does this color come from? border-left: 6px solid transparent; content: ''; } - */ // Hovering reveals menu .menu-icon:hover + div.search-menu-holder { From c51856522c58b6645b498696997bd84a6aba0696 Mon Sep 17 00:00:00 2001 From: slhale Date: Thu, 13 Aug 2015 10:59:12 -0700 Subject: [PATCH 038/109] [Search] Menu checkboxes and labels Added checkboxes with styling to the menu. Set up a types list for the menu. --- platform/commonUI/general/res/css/tree.css | 60 +++++++++++-------- .../general/res/sass/search/_search.scss | 24 ++++++-- platform/search/bundle.json | 2 +- platform/search/res/templates/search.html | 20 ++++++- .../src/controllers/SearchController.js | 29 ++++++++- 5 files changed, 100 insertions(+), 35 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index a057c3d53d..29855117aa 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -342,13 +342,23 @@ ul.tree { float: right; margin-top: 17px; left: -25px; } - /* line 140, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-menu-holder .search-menu ul li { - padding: 0; - padding-left: 6px; - padding-right: 6px; - font-size: 0.9em; } - /* line 151, ../sass/search/_search.scss */ + /* line 138, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-menu-holder .search-menu { + border-top: 0; } + /* line 141, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item { + padding: 0px 4px; + font-size: 0.8em; } + /* line 146, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-checkbox { + margin-top: 4px; + padding-left: 0; + margin-right: 0; } + /* line 156, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-icon { + color: white; + padding-left: 2px; } + /* line 165, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder:after { position: absolute; top: -6px; @@ -358,18 +368,18 @@ ul.tree { border-bottom: 6px solid #5e5e5e; border-left: 6px solid transparent; content: ''; } - /* line 164, ../sass/search/_search.scss */ + /* line 178, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder { visibility: visible; } - /* line 167, ../sass/search/_search.scss */ + /* line 181, ../sass/search/_search.scss */ .search-holder .search .search-bar div.search-menu-holder:hover { visibility: visible; } - /* line 172, ../sass/search/_search.scss */ + /* line 186, ../sass/search/_search.scss */ .search-holder .search .search-scroll { top: 25px; overflow-y: auto; padding-right: 5px; } - /* line 180, ../sass/search/_search.scss */ + /* line 194, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item { -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s; @@ -379,10 +389,10 @@ ul.tree { border-radius: 2px; padding-top: 4px; padding-bottom: 2px; } - /* line 194, ../sass/search/_search.scss */ + /* line 208, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 198, ../sass/search/_search.scss */ + /* line 212, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label .title-label { display: inline-block; position: absolute; @@ -394,47 +404,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 220, ../sass/search/_search.scss */ + /* line 234, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected { background: #005177; color: #fff; } - /* line 224, ../sass/search/_search.scss */ + /* line 238, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .view-control { color: #0099cc; } - /* line 227, ../sass/search/_search.scss */ + /* line 241, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { color: #fff; } - /* line 234, ../sass/search/_search.scss */ + /* line 248, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 237, ../sass/search/_search.scss */ + /* line 251, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { display: block; } - /* line 240, ../sass/search/_search.scss */ + /* line 254, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { color: #33ccff; } - /* line 248, ../sass/search/_search.scss */ + /* line 262, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon { position: relative; } - /* line 250, ../sass/search/_search.scss */ + /* line 264, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 254, ../sass/search/_search.scss */ + /* line 268, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .title-label { font-style: italic; font-size: .9em; opacity: 0.5; margin-left: 26px; line-height: 24px; } - /* line 264, ../sass/search/_search.scss */ + /* line 278, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 269, ../sass/search/_search.scss */ + /* line 283, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 274, ../sass/search/_search.scss */ + /* line 288, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-more-button { margin-top: 5px; margin-bottom: 5px; diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index 9b143a6f65..bf9cee8eb9 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -136,13 +136,27 @@ left: -25px; .search-menu { + border-top: 0; - ul li { - padding: 0; - padding-left: 6px; - padding-right: 6px; + .search-menu-item { + // Padding only on sides + padding: 0px 4px; + font-size: 0.8em; - font-size: 0.9em; + .search-menu-checkbox { + // Vertically center + margin-top: 4px; + + // Get rid of weird checkbox positioning + // from label.checkbox.custom + padding-left: 0; + margin-right: 0; + } + + .search-menu-icon { + color: white; + padding-left: 2px; + } } } } diff --git a/platform/search/bundle.json b/platform/search/bundle.json index c15bd25b61..7d87f0312d 100644 --- a/platform/search/bundle.json +++ b/platform/search/bundle.json @@ -13,7 +13,7 @@ { "key": "SearchController", "implementation": "controllers/SearchController.js", - "depends": [ "$scope", "searchService" ] + "depends": [ "$scope", "searchService", "types[]" ] }, { "key": "SearchItemController", diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html index e81b638726..cb879729d5 100644 --- a/platform/search/res/templates/search.html +++ b/platform/search/res/templates/search.html @@ -56,9 +56,23 @@
    -
  • Contents 1
    • -
  • Contents 2
    • -
  • Contents 3
    • +
  • + + + + + {{ type.glyph }} + + + {{ type.name }} + +
diff --git a/platform/search/src/controllers/SearchController.js b/platform/search/src/controllers/SearchController.js index 4e129cd8f7..9a34809b56 100644 --- a/platform/search/src/controllers/SearchController.js +++ b/platform/search/src/controllers/SearchController.js @@ -30,12 +30,14 @@ define(function () { var INITIAL_LOAD_NUMBER = 20, LOAD_INCREMENT = 20; - function SearchController($scope, searchService) { + function SearchController($scope, searchService, types) { // Starting amount of results to load. Will get increased. var numResults = INITIAL_LOAD_NUMBER, loading = false, fullResults = {hits: []}; + console.log('types', types); + function search(maxResults) { var inputText = $scope.ngModel.input; @@ -71,6 +73,31 @@ define(function () { }); } + function filter(types) { + var newResults = [], + i = 0; + + while (newResults.length < numResults && newResults.length < fullResults.hits.length) { + // If this is of an acceptable type, add it to the list + if (types.indexOf(fullResults.hits[i].getModel().type) !== -1) { + newResults.push(fullResults.hits[i]); + } + i += 1; + } + + $scope.results = newResults; + } + + $scope.types = []; + // On initialization, fill the scope's types with type keys + types.forEach(function (type) { + // We only want some types: the ones that have keys and + // descriptions are probably human user usable types + if (type.key && type.description) { + $scope.types.push(type); + } + }); + return { /** * Search the filetree. From b26aa3cab793b7872a1495549538cb44cdd15eef Mon Sep 17 00:00:00 2001 From: slhale Date: Thu, 13 Aug 2015 11:45:46 -0700 Subject: [PATCH 039/109] [Search] Filter search Filtering search using the search menu works. Load more does not work with this yet. --- platform/commonUI/general/res/css/tree.css | 53 ++++++++++--------- .../general/res/sass/search/_search.scss | 16 ++++-- platform/search/res/templates/search.html | 4 +- .../src/controllers/SearchController.js | 48 ++++++++++------- 4 files changed, 71 insertions(+), 50 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 29855117aa..25f1f23261 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -347,18 +347,21 @@ ul.tree { border-top: 0; } /* line 141, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item { - padding: 0px 4px; + padding-top: 0; + padding-bottom: 0; + padding-left: 4px; + padding-right: 6px; font-size: 0.8em; } - /* line 146, ../sass/search/_search.scss */ + /* line 150, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-checkbox { - margin-top: 4px; + margin-top: 0.3em; padding-left: 0; margin-right: 0; } - /* line 156, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-icon { + /* line 160, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-glyph { color: white; - padding-left: 2px; } - /* line 165, ../sass/search/_search.scss */ + padding-left: 3px; } + /* line 173, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder:after { position: absolute; top: -6px; @@ -368,18 +371,18 @@ ul.tree { border-bottom: 6px solid #5e5e5e; border-left: 6px solid transparent; content: ''; } - /* line 178, ../sass/search/_search.scss */ + /* line 186, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder { visibility: visible; } - /* line 181, ../sass/search/_search.scss */ + /* line 189, ../sass/search/_search.scss */ .search-holder .search .search-bar div.search-menu-holder:hover { visibility: visible; } - /* line 186, ../sass/search/_search.scss */ + /* line 194, ../sass/search/_search.scss */ .search-holder .search .search-scroll { top: 25px; overflow-y: auto; padding-right: 5px; } - /* line 194, ../sass/search/_search.scss */ + /* line 202, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item { -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s; @@ -389,10 +392,10 @@ ul.tree { border-radius: 2px; padding-top: 4px; padding-bottom: 2px; } - /* line 208, ../sass/search/_search.scss */ + /* line 216, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 212, ../sass/search/_search.scss */ + /* line 220, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label .title-label { display: inline-block; position: absolute; @@ -404,47 +407,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 234, ../sass/search/_search.scss */ + /* line 242, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected { background: #005177; color: #fff; } - /* line 238, ../sass/search/_search.scss */ + /* line 246, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .view-control { color: #0099cc; } - /* line 241, ../sass/search/_search.scss */ + /* line 249, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { color: #fff; } - /* line 248, ../sass/search/_search.scss */ + /* line 256, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 251, ../sass/search/_search.scss */ + /* line 259, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { display: block; } - /* line 254, ../sass/search/_search.scss */ + /* line 262, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { color: #33ccff; } - /* line 262, ../sass/search/_search.scss */ + /* line 270, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon { position: relative; } - /* line 264, ../sass/search/_search.scss */ + /* line 272, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 268, ../sass/search/_search.scss */ + /* line 276, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .title-label { font-style: italic; font-size: .9em; opacity: 0.5; margin-left: 26px; line-height: 24px; } - /* line 278, ../sass/search/_search.scss */ + /* line 286, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 283, ../sass/search/_search.scss */ + /* line 291, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 288, ../sass/search/_search.scss */ + /* line 296, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-more-button { margin-top: 5px; margin-bottom: 5px; diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index bf9cee8eb9..b77a4b78e5 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -140,12 +140,16 @@ .search-menu-item { // Padding only on sides - padding: 0px 4px; + padding-top: 0; + padding-bottom: 0; + padding-left: 4px; + padding-right: 6px; + font-size: 0.8em; .search-menu-checkbox { // Vertically center - margin-top: 4px; + margin-top: 0.3em; // Get rid of weird checkbox positioning // from label.checkbox.custom @@ -153,9 +157,13 @@ margin-right: 0; } - .search-menu-icon { + .search-menu-glyph { color: white; - padding-left: 2px; + padding-left: 3px; + } + + &:hover { + // Do nothing } } } diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html index cb879729d5..424c14185e 100644 --- a/platform/search/res/templates/search.html +++ b/platform/search/res/templates/search.html @@ -62,11 +62,11 @@ - + {{ type.glyph }} diff --git a/platform/search/src/controllers/SearchController.js b/platform/search/src/controllers/SearchController.js index 9a34809b56..abefccee41 100644 --- a/platform/search/src/controllers/SearchController.js +++ b/platform/search/src/controllers/SearchController.js @@ -36,7 +36,26 @@ define(function () { loading = false, fullResults = {hits: []}; - console.log('types', types); + // Scope variables are + // $scope.results, $scope.types + // $scope.ngModel.input, $scope.ngModel.search, $scope.ngModel.checked + $scope.types = []; + $scope.ngModel.checked = {}; + + function filter(hits) { + var newResults = [], + i = 0; + + while (newResults.length < numResults && i < hits.length) { + // If this is of an acceptable type, add it to the list + if ($scope.ngModel.checked[hits[i].object.getModel().type] === true) { + newResults.push(fullResults.hits[i]); + } + i += 1; + } + + return newResults; + } function search(maxResults) { var inputText = $scope.ngModel.input; @@ -60,7 +79,8 @@ define(function () { // Send the query searchService.query(inputText, maxResults).then(function (result) { fullResults = result; - $scope.results = result.hits.slice(0, numResults); + //$scope.results = result.hits.slice(0, numResults); + $scope.results = filter(result.hits); // Update whether the file tree should be displayed // Reveal tree only when finishing search @@ -73,31 +93,21 @@ define(function () { }); } - function filter(types) { - var newResults = [], - i = 0; - - while (newResults.length < numResults && newResults.length < fullResults.hits.length) { - // If this is of an acceptable type, add it to the list - if (types.indexOf(fullResults.hits[i].getModel().type) !== -1) { - newResults.push(fullResults.hits[i]); - } - i += 1; - } - - $scope.results = newResults; - } - - $scope.types = []; // On initialization, fill the scope's types with type keys types.forEach(function (type) { // We only want some types: the ones that have keys and - // descriptions are probably human user usable types + // descriptions are probably human user usable types if (type.key && type.description) { $scope.types.push(type); + $scope.ngModel.checked[type.key] = true; } }); + // Re-filter the results when the checked type options change + $scope.$watch("$scope.ngModel.checked", function () { + $scope.results = filter(fullResults.hits); + }); + return { /** * Search the filetree. From 2e767c94c41ef7be28254ccbf09c10e8d7dcc120 Mon Sep 17 00:00:00 2001 From: slhale Date: Thu, 13 Aug 2015 13:19:25 -0700 Subject: [PATCH 040/109] [Search] Update load-more, add check-all Make the 'Load more' button work with the new filtered results. Added 'ALL' to the top of the search menu which allows the user to toggle all of the filtering options easily. --- platform/commonUI/general/res/css/tree.css | 53 +++++++++++-------- .../general/res/sass/search/_search.scss | 13 ++++- platform/search/res/templates/search.html | 35 +++++++++--- .../src/controllers/SearchController.js | 49 ++++++++++++++--- 4 files changed, 112 insertions(+), 38 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 25f1f23261..359b933be8 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -356,12 +356,19 @@ ul.tree { .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-checkbox { margin-top: 0.3em; padding-left: 0; - margin-right: 0; } - /* line 160, ../sass/search/_search.scss */ + margin-right: 0; + padding-right: 3px; } + /* line 163, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-glyph { - color: white; - padding-left: 3px; } - /* line 173, ../sass/search/_search.scss */ + color: white; } + /* line 171, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special { + font-weight: bold; + background-color: gray; } + /* line 175, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special .search-menu-label { + font-size: 1.1em; } + /* line 184, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder:after { position: absolute; top: -6px; @@ -371,18 +378,18 @@ ul.tree { border-bottom: 6px solid #5e5e5e; border-left: 6px solid transparent; content: ''; } - /* line 186, ../sass/search/_search.scss */ + /* line 197, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder { visibility: visible; } - /* line 189, ../sass/search/_search.scss */ + /* line 200, ../sass/search/_search.scss */ .search-holder .search .search-bar div.search-menu-holder:hover { visibility: visible; } - /* line 194, ../sass/search/_search.scss */ + /* line 205, ../sass/search/_search.scss */ .search-holder .search .search-scroll { top: 25px; overflow-y: auto; padding-right: 5px; } - /* line 202, ../sass/search/_search.scss */ + /* line 213, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item { -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s; @@ -392,10 +399,10 @@ ul.tree { border-radius: 2px; padding-top: 4px; padding-bottom: 2px; } - /* line 216, ../sass/search/_search.scss */ + /* line 227, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 220, ../sass/search/_search.scss */ + /* line 231, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label .title-label { display: inline-block; position: absolute; @@ -407,47 +414,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 242, ../sass/search/_search.scss */ + /* line 253, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected { background: #005177; color: #fff; } - /* line 246, ../sass/search/_search.scss */ + /* line 257, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .view-control { color: #0099cc; } - /* line 249, ../sass/search/_search.scss */ + /* line 260, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { color: #fff; } - /* line 256, ../sass/search/_search.scss */ + /* line 267, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 259, ../sass/search/_search.scss */ + /* line 270, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { display: block; } - /* line 262, ../sass/search/_search.scss */ + /* line 273, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { color: #33ccff; } - /* line 270, ../sass/search/_search.scss */ + /* line 281, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon { position: relative; } - /* line 272, ../sass/search/_search.scss */ + /* line 283, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 276, ../sass/search/_search.scss */ + /* line 287, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .title-label { font-style: italic; font-size: .9em; opacity: 0.5; margin-left: 26px; line-height: 24px; } - /* line 286, ../sass/search/_search.scss */ + /* line 297, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 291, ../sass/search/_search.scss */ + /* line 302, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 296, ../sass/search/_search.scss */ + /* line 307, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-more-button { margin-top: 5px; margin-bottom: 5px; diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index b77a4b78e5..b0a58389ff 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -155,16 +155,27 @@ // from label.checkbox.custom padding-left: 0; margin-right: 0; + + // Spacing with labels + padding-right: 3px; } .search-menu-glyph { color: white; - padding-left: 3px; } &:hover { // Do nothing } + + &.special { + font-weight: bold; + background-color: lighten($colorBodyBg, 30%); + + .search-menu-label { + font-size: 1.1em; + } + } } } } diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html index 424c14185e..081331ccdd 100644 --- a/platform/search/res/templates/search.html +++ b/platform/search/res/templates/search.html @@ -46,23 +46,42 @@ - - + v - +
+
+
    + +
  • + + + + + ALL + + +
    • + +
  • @@ -70,11 +89,15 @@ {{ type.glyph }} - {{ type.name }} + + {{ type.name }} +
+
+
diff --git a/platform/search/src/controllers/SearchController.js b/platform/search/src/controllers/SearchController.js index abefccee41..b9fc098837 100644 --- a/platform/search/src/controllers/SearchController.js +++ b/platform/search/src/controllers/SearchController.js @@ -95,13 +95,13 @@ define(function () { // On initialization, fill the scope's types with type keys types.forEach(function (type) { - // We only want some types: the ones that have keys and - // descriptions are probably human user usable types - if (type.key && type.description) { + // We only want some types, the ones that are probably human readable + if (type.key && type.name) { $scope.types.push(type); $scope.ngModel.checked[type.key] = true; } }); + $scope.ngModel.checkAll = true; // Re-filter the results when the checked type options change $scope.$watch("$scope.ngModel.checked", function () { @@ -128,9 +128,21 @@ define(function () { }, /** - * Checks to see if there are more search results to display. + * Checks to see if there are more search results to display. If the answer + * is unclear, this function will err on there being more results. */ areMore: function () { + var i; + + // Check to see if any of the not displayed results are of an allowed type + for (i = numResults; i < fullResults.hits.length; i += 1) { + if ($scope.ngModel.checked[fullResults.hits[i].object.getModel().type.key]) { + return true; + } + } + + // If none of the ones at hand are correct, there still may be more if we + // re-search with a larger maxResults return numResults < fullResults.total; }, @@ -145,7 +157,7 @@ define(function () { // Resend the query if we are out of items to display, but there are more to get search(numResults); } else { - $scope.results = fullResults.hits.slice(0, numResults); + $scope.results = filter(fullResults.hits);//fullResults.hits.slice(0, numResults); } }, @@ -168,10 +180,31 @@ define(function () { }, /** - * Opens a menu for more search options. + * Re-filters the search restuls. Called when ngModel.checked changes. */ - menu: function () { - console.log('open menu'); + updateOptions: function () { + var type; + + // Update all-checked status + $scope.ngModel.checkAll = true; + for (type in $scope.ngModel.checked) { + if (!$scope.ngModel.checked[type]) { + $scope.ngModel.checkAll = false; + } + } + + // Re-filter results + $scope.results = filter(fullResults.hits); + }, + + /** + * Resets options. + */ + checkAll: function () { + var type; + for (type in $scope.ngModel.checked) { + $scope.ngModel.checked[type] = $scope.ngModel.checkAll; + } } }; } From c8694f182a620b7e934572c18918030dabc767f7 Mon Sep 17 00:00:00 2001 From: slhale Date: Thu, 13 Aug 2015 13:59:56 -0700 Subject: [PATCH 041/109] [Search] Menu opening Menu opens when icon is pressed. Closes when cliked away from, but not when clicked on. --- platform/commonUI/general/res/css/tree.css | 58 +++++----- .../general/res/sass/search/_search.scss | 8 +- platform/search/bundle.json | 5 + platform/search/res/templates/search.html | 12 ++- .../src/controllers/ClickAwayController.js | 101 ++++++++++++++++++ 5 files changed, 151 insertions(+), 33 deletions(-) create mode 100644 platform/search/src/controllers/ClickAwayController.js diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 359b933be8..7fff207df2 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -336,39 +336,43 @@ ul.tree { padding: 6px; padding-left: 4px; right: 0px; - top: -3px; } - /* line 131, ../sass/search/_search.scss */ + top: -3px; + transition: color .2s; } + /* line 132, ../sass/search/_search.scss */ + .search-holder .search .search-bar .menu-icon:hover { + color: #a6a6a6; } + /* line 137, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder { float: right; margin-top: 17px; left: -25px; } - /* line 138, ../sass/search/_search.scss */ + /* line 142, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu { border-top: 0; } - /* line 141, ../sass/search/_search.scss */ + /* line 145, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item { padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 6px; font-size: 0.8em; } - /* line 150, ../sass/search/_search.scss */ + /* line 154, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-checkbox { margin-top: 0.3em; padding-left: 0; margin-right: 0; padding-right: 3px; } - /* line 163, ../sass/search/_search.scss */ + /* line 167, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-glyph { color: white; } - /* line 171, ../sass/search/_search.scss */ + /* line 175, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special { font-weight: bold; background-color: gray; } - /* line 175, ../sass/search/_search.scss */ + /* line 179, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special .search-menu-label { font-size: 1.1em; } - /* line 184, ../sass/search/_search.scss */ + /* line 188, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder:after { position: absolute; top: -6px; @@ -378,18 +382,18 @@ ul.tree { border-bottom: 6px solid #5e5e5e; border-left: 6px solid transparent; content: ''; } - /* line 197, ../sass/search/_search.scss */ + /* line 201, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder { visibility: visible; } - /* line 200, ../sass/search/_search.scss */ + /* line 204, ../sass/search/_search.scss */ .search-holder .search .search-bar div.search-menu-holder:hover { visibility: visible; } - /* line 205, ../sass/search/_search.scss */ + /* line 209, ../sass/search/_search.scss */ .search-holder .search .search-scroll { top: 25px; overflow-y: auto; padding-right: 5px; } - /* line 213, ../sass/search/_search.scss */ + /* line 217, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item { -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s; @@ -399,10 +403,10 @@ ul.tree { border-radius: 2px; padding-top: 4px; padding-bottom: 2px; } - /* line 227, ../sass/search/_search.scss */ + /* line 231, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 231, ../sass/search/_search.scss */ + /* line 235, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label .title-label { display: inline-block; position: absolute; @@ -414,47 +418,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 253, ../sass/search/_search.scss */ + /* line 257, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected { background: #005177; color: #fff; } - /* line 257, ../sass/search/_search.scss */ + /* line 261, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .view-control { color: #0099cc; } - /* line 260, ../sass/search/_search.scss */ + /* line 264, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { color: #fff; } - /* line 267, ../sass/search/_search.scss */ + /* line 271, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 270, ../sass/search/_search.scss */ + /* line 274, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { display: block; } - /* line 273, ../sass/search/_search.scss */ + /* line 277, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { color: #33ccff; } - /* line 281, ../sass/search/_search.scss */ + /* line 285, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon { position: relative; } - /* line 283, ../sass/search/_search.scss */ + /* line 287, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 287, ../sass/search/_search.scss */ + /* line 291, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .title-label { font-style: italic; font-size: .9em; opacity: 0.5; margin-left: 26px; line-height: 24px; } - /* line 297, ../sass/search/_search.scss */ + /* line 301, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 302, ../sass/search/_search.scss */ + /* line 306, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 307, ../sass/search/_search.scss */ + /* line 311, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-more-button { margin-top: 5px; margin-bottom: 5px; diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index b0a58389ff..1f01f3a613 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -126,11 +126,15 @@ right: 0px; top: -3px; + + transition: color .2s; + + &:hover { + color: lighten($colorItemFg, 20%); + } } .search-menu-holder { - //visibility: hidden; - float: right; margin-top: $textInputHeight - 2px; left: -25px; diff --git a/platform/search/bundle.json b/platform/search/bundle.json index 7d87f0312d..236f7658f0 100644 --- a/platform/search/bundle.json +++ b/platform/search/bundle.json @@ -19,6 +19,11 @@ "key": "SearchItemController", "implementation": "controllers/SearchItemController.js", "depends": [ "$scope" ] + }, + { + "key": "ClickAwayController", + "implementation": "controllers/ClickAwayController.js", + "depends": [ "$scope", "$document" ] } ], "templates": [ diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html index 081331ccdd..26389e70be 100644 --- a/platform/search/res/templates/search.html +++ b/platform/search/res/templates/search.html @@ -23,7 +23,8 @@ ng-controller="SearchController as controller"> -
+
- + v -
+
@@ -63,7 +67,7 @@ + ng-change="controller.checkAll(); controller.updateOptions()" /> diff --git a/platform/search/src/controllers/ClickAwayController.js b/platform/search/src/controllers/ClickAwayController.js new file mode 100644 index 0000000000..75b1d985da --- /dev/null +++ b/platform/search/src/controllers/ClickAwayController.js @@ -0,0 +1,101 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +/*global define,Promise*/ + +define( + [], + function () { + "use strict"; + + /** + * A ClickAwayController is used to toggle things (such as context + * menus) where clicking elsewhere in the document while the toggle + * is in an active state is intended to dismiss the toggle. + * + * @constructor + * @param $scope the scope in which this controller is active + * @param $document the document element, injected by Angular + */ + function ClickAwayController($scope, $document) { + var state = false, + clickaway; + + // Track state, but also attach and detach a listener for + // mouseup events on the document. + function deactivate() { + state = false; + $document.off("mouseup", clickaway); + } + + function activate() { + state = true; + $document.on("mouseup", clickaway); + } + + function changeState() { + if (state) { + deactivate(); + } else { + activate(); + } + } + + // Callback used by the document listener. Deactivates; + // note also $scope.$apply is invoked to indicate that + // the state of this controller has changed. + clickaway = function () { + deactivate(); + $scope.$apply(); + return false; + }; + + return { + /** + * Get the current state of the toggle. + * @return {boolean} true if active + */ + isActive: function () { + return state; + }, + /** + * Set a new state for the toggle. + * @return {boolean} true to activate + */ + setState: function (newState) { + if (state !== newState) { + changeState(); + } + }, + /** + * Toggle the current state; activate if it is inactive, + * deactivate if it is active. + */ + toggle: function () { + changeState(); + } + }; + + } + + return ClickAwayController; + } +); \ No newline at end of file From 74cf4d73d581eb3ac5c2842a12444d5b9853d0bb Mon Sep 17 00:00:00 2001 From: slhale Date: Thu, 13 Aug 2015 14:22:07 -0700 Subject: [PATCH 042/109] [Search] Hover transitions --- platform/commonUI/general/res/css/tree.css | 67 ++++++++++--------- .../general/res/sass/search/_search.scss | 12 ++-- 2 files changed, 43 insertions(+), 36 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 7fff207df2..88a21665c2 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -297,8 +297,8 @@ ul.tree { width: 0; height: 0; margin-top: -19px; - transition: visibility .15s, opacity .15s; } - /* line 73, ../sass/search/_search.scss */ + transition: visibility .15s, opacity .15s, color .2s; } + /* line 72, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-icon.content { visibility: hidden; opacity: 0; } @@ -307,6 +307,9 @@ ul.tree { visibility: hidden; opacity: 0; } /* line 86, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-input:hover + div.search-icon { + color: #a6a6a6; } + /* line 90, ../sass/search/_search.scss */ .search-holder .search .search-bar .clear-icon { position: absolute; display: block; @@ -322,11 +325,11 @@ ul.tree { transition: visibility .15s, opacity .15s; right: 16px; padding-right: 2px; } - /* line 106, ../sass/search/_search.scss */ + /* line 110, ../sass/search/_search.scss */ .search-holder .search .search-bar .clear-icon.content { visibility: visible; opacity: 1; } - /* line 116, ../sass/search/_search.scss */ + /* line 120, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon { position: absolute; display: block; @@ -338,41 +341,41 @@ ul.tree { right: 0px; top: -3px; transition: color .2s; } - /* line 132, ../sass/search/_search.scss */ + /* line 136, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon:hover { color: #a6a6a6; } - /* line 137, ../sass/search/_search.scss */ + /* line 141, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder { float: right; margin-top: 17px; left: -25px; } - /* line 142, ../sass/search/_search.scss */ + /* line 146, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu { border-top: 0; } - /* line 145, ../sass/search/_search.scss */ + /* line 149, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item { padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 6px; font-size: 0.8em; } - /* line 154, ../sass/search/_search.scss */ + /* line 158, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-checkbox { margin-top: 0.3em; padding-left: 0; margin-right: 0; padding-right: 3px; } - /* line 167, ../sass/search/_search.scss */ + /* line 171, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-glyph { color: white; } - /* line 175, ../sass/search/_search.scss */ + /* line 179, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special { font-weight: bold; - background-color: gray; } - /* line 179, ../sass/search/_search.scss */ + background-color: #737373; } + /* line 183, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special .search-menu-label { font-size: 1.1em; } - /* line 188, ../sass/search/_search.scss */ + /* line 192, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder:after { position: absolute; top: -6px; @@ -382,18 +385,18 @@ ul.tree { border-bottom: 6px solid #5e5e5e; border-left: 6px solid transparent; content: ''; } - /* line 201, ../sass/search/_search.scss */ + /* line 205, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder { visibility: visible; } - /* line 204, ../sass/search/_search.scss */ + /* line 208, ../sass/search/_search.scss */ .search-holder .search .search-bar div.search-menu-holder:hover { visibility: visible; } - /* line 209, ../sass/search/_search.scss */ + /* line 213, ../sass/search/_search.scss */ .search-holder .search .search-scroll { top: 25px; overflow-y: auto; padding-right: 5px; } - /* line 217, ../sass/search/_search.scss */ + /* line 221, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item { -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s; @@ -403,10 +406,10 @@ ul.tree { border-radius: 2px; padding-top: 4px; padding-bottom: 2px; } - /* line 231, ../sass/search/_search.scss */ + /* line 235, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 235, ../sass/search/_search.scss */ + /* line 239, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label .title-label { display: inline-block; position: absolute; @@ -418,47 +421,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 257, ../sass/search/_search.scss */ + /* line 261, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected { background: #005177; color: #fff; } - /* line 261, ../sass/search/_search.scss */ + /* line 265, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .view-control { color: #0099cc; } - /* line 264, ../sass/search/_search.scss */ + /* line 268, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { color: #fff; } - /* line 271, ../sass/search/_search.scss */ + /* line 275, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 274, ../sass/search/_search.scss */ + /* line 278, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { display: block; } - /* line 277, ../sass/search/_search.scss */ + /* line 281, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { color: #33ccff; } - /* line 285, ../sass/search/_search.scss */ + /* line 289, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon { position: relative; } - /* line 287, ../sass/search/_search.scss */ + /* line 291, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 291, ../sass/search/_search.scss */ + /* line 295, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .title-label { font-style: italic; font-size: .9em; opacity: 0.5; margin-left: 26px; line-height: 24px; } - /* line 301, ../sass/search/_search.scss */ + /* line 305, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 306, ../sass/search/_search.scss */ + /* line 310, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 311, ../sass/search/_search.scss */ + /* line 315, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-more-button { margin-top: 5px; margin-bottom: 5px; diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index 1f01f3a613..8ba5f1f839 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -67,8 +67,7 @@ // Line up icon with text input vertically margin-top: -$textInputHeight; - // Text focus display transition - transition: visibility .15s, opacity .15s; + transition: visibility .15s, opacity .15s, color .2s; &.content { // Make icon invisible whenever there is text input @@ -77,12 +76,17 @@ } } + // Make icon invisible when the text input is focused .search-input:focus + div.search-icon { - // Make icon invisible when the text input is focused visibility: hidden; opacity: 0; } + // Make icon lighten when hovering over search bar + .search-input:hover + div.search-icon { + color: lighten($colorItemFg, 20%); + } + .clear-icon { position: absolute; display: block; @@ -174,7 +178,7 @@ &.special { font-weight: bold; - background-color: lighten($colorBodyBg, 30%); + background-color: lighten($colorBodyBg, 25%); .search-menu-label { font-size: 1.1em; From 5726dd0e0cab6ec9d261f80dd4164a20316300e7 Mon Sep 17 00:00:00 2001 From: slhale Date: Thu, 13 Aug 2015 15:11:17 -0700 Subject: [PATCH 043/109] [Search] Filter display Added display below the search bar of what search filters are currently active. Not yet correctly aligned wrt search results list. --- platform/commonUI/general/res/css/tree.css | 88 +++++++++++-------- .../general/res/sass/search/_search.scss | 27 ++++-- platform/search/res/templates/search.html | 15 +++- .../src/controllers/SearchController.js | 13 ++- 4 files changed, 98 insertions(+), 45 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 88a21665c2..011a07a6fe 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -279,9 +279,10 @@ ul.tree { /* line 36, ../sass/search/_search.scss */ .search-holder .search .search-bar { width: 100%; + height: 19px; margin-top: 4px; position: relative; } - /* line 45, ../sass/search/_search.scss */ + /* line 46, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-input { position: relative; top: -4px; @@ -289,7 +290,7 @@ ul.tree { height: 19px; padding-right: 16px; padding-right: 28px; } - /* line 58, ../sass/search/_search.scss */ + /* line 59, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-icon { color: #737373; font-size: 12px; @@ -298,18 +299,18 @@ ul.tree { height: 0; margin-top: -19px; transition: visibility .15s, opacity .15s, color .2s; } - /* line 72, ../sass/search/_search.scss */ + /* line 73, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-icon.content { visibility: hidden; opacity: 0; } - /* line 80, ../sass/search/_search.scss */ + /* line 81, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-input:focus + div.search-icon { visibility: hidden; opacity: 0; } - /* line 86, ../sass/search/_search.scss */ + /* line 87, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-input:hover + div.search-icon { color: #a6a6a6; } - /* line 90, ../sass/search/_search.scss */ + /* line 91, ../sass/search/_search.scss */ .search-holder .search .search-bar .clear-icon { position: absolute; display: block; @@ -325,11 +326,11 @@ ul.tree { transition: visibility .15s, opacity .15s; right: 16px; padding-right: 2px; } - /* line 110, ../sass/search/_search.scss */ + /* line 111, ../sass/search/_search.scss */ .search-holder .search .search-bar .clear-icon.content { visibility: visible; opacity: 1; } - /* line 120, ../sass/search/_search.scss */ + /* line 121, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon { position: absolute; display: block; @@ -341,41 +342,41 @@ ul.tree { right: 0px; top: -3px; transition: color .2s; } - /* line 136, ../sass/search/_search.scss */ + /* line 137, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon:hover { color: #a6a6a6; } - /* line 141, ../sass/search/_search.scss */ + /* line 142, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder { float: right; margin-top: 17px; left: -25px; } - /* line 146, ../sass/search/_search.scss */ + /* line 147, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu { border-top: 0; } - /* line 149, ../sass/search/_search.scss */ + /* line 150, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item { padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 6px; font-size: 0.8em; } - /* line 158, ../sass/search/_search.scss */ + /* line 159, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-checkbox { margin-top: 0.3em; padding-left: 0; margin-right: 0; padding-right: 3px; } - /* line 171, ../sass/search/_search.scss */ + /* line 172, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-glyph { color: white; } - /* line 179, ../sass/search/_search.scss */ + /* line 176, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special { font-weight: bold; - background-color: #737373; } - /* line 183, ../sass/search/_search.scss */ + background-color: gray; } + /* line 180, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special .search-menu-label { font-size: 1.1em; } - /* line 192, ../sass/search/_search.scss */ + /* line 189, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder:after { position: absolute; top: -6px; @@ -385,18 +386,33 @@ ul.tree { border-bottom: 6px solid #5e5e5e; border-left: 6px solid transparent; content: ''; } - /* line 205, ../sass/search/_search.scss */ + /* line 202, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder { visibility: visible; } - /* line 208, ../sass/search/_search.scss */ + /* line 205, ../sass/search/_search.scss */ .search-holder .search .search-bar div.search-menu-holder:hover { visibility: visible; } - /* line 213, ../sass/search/_search.scss */ + /* line 210, ../sass/search/_search.scss */ + .search-holder .search .active-filter-display { + font-size: .6em; + height: auto; } + /* line 214, ../sass/search/_search.scss */ + .search-holder .search .active-filter-display .clear-filters-icon { + position: absolute; + right: 0px; + padding-top: 2px; + padding-bottom: 2px; + padding-right: 9px; + padding-left: 4px; + cursor: pointer; + color: #737373; + font-size: 6px; } + /* line 230, ../sass/search/_search.scss */ .search-holder .search .search-scroll { top: 25px; overflow-y: auto; padding-right: 5px; } - /* line 221, ../sass/search/_search.scss */ + /* line 238, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item { -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s; @@ -406,10 +422,10 @@ ul.tree { border-radius: 2px; padding-top: 4px; padding-bottom: 2px; } - /* line 235, ../sass/search/_search.scss */ + /* line 252, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 239, ../sass/search/_search.scss */ + /* line 256, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label .title-label { display: inline-block; position: absolute; @@ -421,47 +437,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 261, ../sass/search/_search.scss */ + /* line 278, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected { background: #005177; color: #fff; } - /* line 265, ../sass/search/_search.scss */ + /* line 282, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .view-control { color: #0099cc; } - /* line 268, ../sass/search/_search.scss */ + /* line 285, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { color: #fff; } - /* line 275, ../sass/search/_search.scss */ + /* line 292, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 278, ../sass/search/_search.scss */ + /* line 295, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { display: block; } - /* line 281, ../sass/search/_search.scss */ + /* line 298, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { color: #33ccff; } - /* line 289, ../sass/search/_search.scss */ + /* line 306, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon { position: relative; } - /* line 291, ../sass/search/_search.scss */ + /* line 308, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 295, ../sass/search/_search.scss */ + /* line 312, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .title-label { font-style: italic; font-size: .9em; opacity: 0.5; margin-left: 26px; line-height: 24px; } - /* line 305, ../sass/search/_search.scss */ + /* line 322, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 310, ../sass/search/_search.scss */ + /* line 327, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 315, ../sass/search/_search.scss */ + /* line 332, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-more-button { margin-top: 5px; margin-bottom: 5px; diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index 8ba5f1f839..e2eeb4e54a 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -38,6 +38,7 @@ $textInputHeight: 19px; // This is equal to the default value, 19px width: 100%; + height: $textInputHeight; margin-top: $heightAdjust; position: relative; @@ -172,13 +173,9 @@ color: white; } - &:hover { - // Do nothing - } - &.special { font-weight: bold; - background-color: lighten($colorBodyBg, 25%); + background-color: lighten($colorBodyBg, 30%); .search-menu-label { font-size: 1.1em; @@ -210,6 +207,26 @@ } } + .active-filter-display { + font-size: .6em; + height: auto; + + .clear-filters-icon { + position: absolute; + right: 0px; + + padding-top: 2px; + padding-bottom: 2px; + padding-right: $rightPadding + 4px; + padding-left: 4px; + + cursor: pointer; + + color: $colorItemFg; + font-size: 6px; + } + } + .search-scroll { // Spacing away from the search input top: 25px; diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html index 26389e70be..754905dc59 100644 --- a/platform/search/res/templates/search.html +++ b/platform/search/res/templates/search.html @@ -61,7 +61,8 @@
    -
  • +
-
-
+ +
+ Filtered by: {{ filtersString }} + + x + +
+
diff --git a/platform/search/src/controllers/SearchController.js b/platform/search/src/controllers/SearchController.js index b9fc098837..e4a0170924 100644 --- a/platform/search/src/controllers/SearchController.js +++ b/platform/search/src/controllers/SearchController.js @@ -41,6 +41,7 @@ define(function () { // $scope.ngModel.input, $scope.ngModel.search, $scope.ngModel.checked $scope.types = []; $scope.ngModel.checked = {}; + $scope.filtersString = ""; function filter(hits) { var newResults = [], @@ -185,13 +186,23 @@ define(function () { updateOptions: function () { var type; - // Update all-checked status + // Update all-checked status and the filters string $scope.ngModel.checkAll = true; + $scope.filtersString = ''; for (type in $scope.ngModel.checked) { if (!$scope.ngModel.checked[type]) { $scope.ngModel.checkAll = false; + } else { + if ($scope.filtersString === '') { + $scope.filtersString += type; + } else { + $scope.filtersString += ', ' + type; + } } } + if ($scope.ngModel.checkAll === true) { + $scope.filtersString = ''; + } // Re-filter results $scope.results = filter(fullResults.hits); From c62e73f863718c0b73ab9cb5bc6a0560789726de Mon Sep 17 00:00:00 2001 From: slhale Date: Thu, 13 Aug 2015 16:06:10 -0700 Subject: [PATCH 044/109] [Search] Checkbox style Changed the checkboxes to be not blue. --- platform/commonUI/general/res/css/tree.css | 90 ++++++++++--------- .../general/res/sass/search/_search.scss | 18 +++- platform/search/res/templates/search.html | 3 +- 3 files changed, 67 insertions(+), 44 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 011a07a6fe..4098c5abce 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -276,13 +276,13 @@ ul.tree { padding-right: 5px; top: 23px; margin-top: 10px; } - /* line 36, ../sass/search/_search.scss */ + /* line 37, ../sass/search/_search.scss */ .search-holder .search .search-bar { width: 100%; height: 19px; margin-top: 4px; position: relative; } - /* line 46, ../sass/search/_search.scss */ + /* line 47, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-input { position: relative; top: -4px; @@ -290,7 +290,7 @@ ul.tree { height: 19px; padding-right: 16px; padding-right: 28px; } - /* line 59, ../sass/search/_search.scss */ + /* line 60, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-icon { color: #737373; font-size: 12px; @@ -299,18 +299,18 @@ ul.tree { height: 0; margin-top: -19px; transition: visibility .15s, opacity .15s, color .2s; } - /* line 73, ../sass/search/_search.scss */ + /* line 74, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-icon.content { visibility: hidden; opacity: 0; } - /* line 81, ../sass/search/_search.scss */ + /* line 82, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-input:focus + div.search-icon { visibility: hidden; opacity: 0; } - /* line 87, ../sass/search/_search.scss */ + /* line 88, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-input:hover + div.search-icon { color: #a6a6a6; } - /* line 91, ../sass/search/_search.scss */ + /* line 92, ../sass/search/_search.scss */ .search-holder .search .search-bar .clear-icon { position: absolute; display: block; @@ -326,11 +326,11 @@ ul.tree { transition: visibility .15s, opacity .15s; right: 16px; padding-right: 2px; } - /* line 111, ../sass/search/_search.scss */ + /* line 112, ../sass/search/_search.scss */ .search-holder .search .search-bar .clear-icon.content { visibility: visible; opacity: 1; } - /* line 121, ../sass/search/_search.scss */ + /* line 122, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon { position: absolute; display: block; @@ -342,41 +342,46 @@ ul.tree { right: 0px; top: -3px; transition: color .2s; } - /* line 137, ../sass/search/_search.scss */ + /* line 138, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon:hover { color: #a6a6a6; } - /* line 142, ../sass/search/_search.scss */ + /* line 143, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder { float: right; margin-top: 17px; left: -25px; } - /* line 147, ../sass/search/_search.scss */ + /* line 148, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu { border-top: 0; } - /* line 150, ../sass/search/_search.scss */ + /* line 151, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item { padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 6px; - font-size: 0.8em; } - /* line 159, ../sass/search/_search.scss */ + font-size: 0.8em; + color: #e6e6e6; } + /* line 161, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-checkbox { margin-top: 0.3em; padding-left: 0; margin-right: 0; padding-right: 3px; } - /* line 172, ../sass/search/_search.scss */ + /* line 174, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-checkbox em:before { + color: white; + background-color: grey; } + /* line 182, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-glyph { - color: white; } - /* line 176, ../sass/search/_search.scss */ + color: #3dcfff; } + /* line 186, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special { font-weight: bold; - background-color: gray; } - /* line 180, ../sass/search/_search.scss */ + background-color: #666666; } + /* line 190, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special .search-menu-label { font-size: 1.1em; } - /* line 189, ../sass/search/_search.scss */ + /* line 199, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder:after { position: absolute; top: -6px; @@ -386,17 +391,17 @@ ul.tree { border-bottom: 6px solid #5e5e5e; border-left: 6px solid transparent; content: ''; } - /* line 202, ../sass/search/_search.scss */ + /* line 212, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder { visibility: visible; } - /* line 205, ../sass/search/_search.scss */ + /* line 215, ../sass/search/_search.scss */ .search-holder .search .search-bar div.search-menu-holder:hover { visibility: visible; } - /* line 210, ../sass/search/_search.scss */ + /* line 220, ../sass/search/_search.scss */ .search-holder .search .active-filter-display { font-size: .6em; height: auto; } - /* line 214, ../sass/search/_search.scss */ + /* line 224, ../sass/search/_search.scss */ .search-holder .search .active-filter-display .clear-filters-icon { position: absolute; right: 0px; @@ -407,12 +412,15 @@ ul.tree { cursor: pointer; color: #737373; font-size: 6px; } - /* line 230, ../sass/search/_search.scss */ + /* line 240, ../sass/search/_search.scss */ + .search-holder .search .active-filter-display.on + .search-scroll { + top: 40px; } + /* line 244, ../sass/search/_search.scss */ .search-holder .search .search-scroll { top: 25px; overflow-y: auto; padding-right: 5px; } - /* line 238, ../sass/search/_search.scss */ + /* line 252, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item { -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s; @@ -422,10 +430,10 @@ ul.tree { border-radius: 2px; padding-top: 4px; padding-bottom: 2px; } - /* line 252, ../sass/search/_search.scss */ + /* line 266, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 256, ../sass/search/_search.scss */ + /* line 270, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label .title-label { display: inline-block; position: absolute; @@ -437,47 +445,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 278, ../sass/search/_search.scss */ + /* line 292, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected { background: #005177; color: #fff; } - /* line 282, ../sass/search/_search.scss */ + /* line 296, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .view-control { color: #0099cc; } - /* line 285, ../sass/search/_search.scss */ + /* line 299, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { color: #fff; } - /* line 292, ../sass/search/_search.scss */ + /* line 306, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 295, ../sass/search/_search.scss */ + /* line 309, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { display: block; } - /* line 298, ../sass/search/_search.scss */ + /* line 312, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { color: #33ccff; } - /* line 306, ../sass/search/_search.scss */ + /* line 320, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon { position: relative; } - /* line 308, ../sass/search/_search.scss */ + /* line 322, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 312, ../sass/search/_search.scss */ + /* line 326, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .title-label { font-style: italic; font-size: .9em; opacity: 0.5; margin-left: 26px; line-height: 24px; } - /* line 322, ../sass/search/_search.scss */ + /* line 336, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 327, ../sass/search/_search.scss */ + /* line 341, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 332, ../sass/search/_search.scss */ + /* line 346, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-more-button { margin-top: 5px; margin-bottom: 5px; diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index e2eeb4e54a..d894220fbd 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -32,6 +32,7 @@ margin-top: 10px; .search { + //display: block; .search-bar { $heightAdjust: 4px; @@ -155,6 +156,7 @@ padding-right: 6px; font-size: 0.8em; + color: lighten($colorBodyBg, 70%); .search-menu-checkbox { // Vertically center @@ -167,15 +169,23 @@ // Spacing with labels padding-right: 3px; + + // Change checkbox colors + em:before { + // check + color: white; + // box + background-color: grey; + } } .search-menu-glyph { - color: white; + color: lighten($colorMenuIc, 5%);//lighten($colorItemFg, 35%);//$colorMenuIc; } &.special { font-weight: bold; - background-color: lighten($colorBodyBg, 30%); + background-color: lighten($colorBodyBg, 20%); .search-menu-label { font-size: 1.1em; @@ -227,6 +237,10 @@ } } + .active-filter-display.on + .search-scroll { + top: 40px; + } + .search-scroll { // Spacing away from the search input top: 25px; diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html index 754905dc59..886473f0f6 100644 --- a/platform/search/res/templates/search.html +++ b/platform/search/res/templates/search.html @@ -107,7 +107,8 @@
+ ng-if="filtersString !== ''" + ng-class="{on: filterString !== ''}"> Filtered by: {{ filtersString }} From 371b690072216bd598f8c682d3667dee1a1f3edf Mon Sep 17 00:00:00 2001 From: slhale Date: Thu, 13 Aug 2015 16:23:13 -0700 Subject: [PATCH 045/109] [Search] Fix filter display names Changed form type keys to names --- .../src/controllers/SearchController.js | 22 +++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/platform/search/src/controllers/SearchController.js b/platform/search/src/controllers/SearchController.js index e4a0170924..d23fc69182 100644 --- a/platform/search/src/controllers/SearchController.js +++ b/platform/search/src/controllers/SearchController.js @@ -186,9 +186,8 @@ define(function () { updateOptions: function () { var type; - // Update all-checked status and the filters string + // Update all-checked status $scope.ngModel.checkAll = true; - $scope.filtersString = ''; for (type in $scope.ngModel.checked) { if (!$scope.ngModel.checked[type]) { $scope.ngModel.checkAll = false; @@ -200,8 +199,23 @@ define(function () { } } } - if ($scope.ngModel.checkAll === true) { - $scope.filtersString = ''; + + // Update the current filters string + $scope.filtersString = ''; + if ($scope.ngModel.checkAll !== true) { + var i; + + for (i = 0; i < types.length; i += 1) { + // If the type key corresponds to a checked option... + if ($scope.ngModel.checked[types[i].key]) { + // ... add it to the string list of current filter options + if ($scope.filtersString === '') { + $scope.filtersString += types[i].name; + } else { + $scope.filtersString += ', ' + types[i].name; + } + } + } } // Re-filter results From 2ca7a175bdedb31fc465167462fe233e6230e792 Mon Sep 17 00:00:00 2001 From: slhale Date: Thu, 13 Aug 2015 16:40:51 -0700 Subject: [PATCH 046/109] [Search] Relative positioning Search results list now displays below the filter options display dynamically. --- platform/commonUI/general/res/css/tree.css | 35 ++++++++++--------- .../general/res/sass/search/_search.scss | 6 ++++ 2 files changed, 25 insertions(+), 16 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 4098c5abce..2c7ffb025e 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -419,8 +419,11 @@ ul.tree { .search-holder .search .search-scroll { top: 25px; overflow-y: auto; - padding-right: 5px; } - /* line 252, ../sass/search/_search.scss */ + padding-right: 5px; + top: auto; + bottom: auto; + height: 90%; } + /* line 258, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item { -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s; @@ -430,10 +433,10 @@ ul.tree { border-radius: 2px; padding-top: 4px; padding-bottom: 2px; } - /* line 266, ../sass/search/_search.scss */ + /* line 272, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 270, ../sass/search/_search.scss */ + /* line 276, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label .title-label { display: inline-block; position: absolute; @@ -445,47 +448,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 292, ../sass/search/_search.scss */ + /* line 298, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected { background: #005177; color: #fff; } - /* line 296, ../sass/search/_search.scss */ + /* line 302, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .view-control { color: #0099cc; } - /* line 299, ../sass/search/_search.scss */ + /* line 305, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { color: #fff; } - /* line 306, ../sass/search/_search.scss */ + /* line 312, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 309, ../sass/search/_search.scss */ + /* line 315, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { display: block; } - /* line 312, ../sass/search/_search.scss */ + /* line 318, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { color: #33ccff; } - /* line 320, ../sass/search/_search.scss */ + /* line 326, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon { position: relative; } - /* line 322, ../sass/search/_search.scss */ + /* line 328, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 326, ../sass/search/_search.scss */ + /* line 332, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .title-label { font-style: italic; font-size: .9em; opacity: 0.5; margin-left: 26px; line-height: 24px; } - /* line 336, ../sass/search/_search.scss */ + /* line 342, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 341, ../sass/search/_search.scss */ + /* line 347, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 346, ../sass/search/_search.scss */ + /* line 352, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-more-button { margin-top: 5px; margin-bottom: 5px; diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index d894220fbd..81bb5cfd01 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -247,6 +247,12 @@ overflow-y: auto; padding-right: $rightPadding; + top: auto; + bottom: auto; + height: 90%; + // It overflows the bottom when active-display-filter + // if height is set to 100% + .results { .search-result-item { From c17ec19f97e5e4780f79022e667c46c2679a4be9 Mon Sep 17 00:00:00 2001 From: slhale Date: Thu, 13 Aug 2015 16:54:15 -0700 Subject: [PATCH 047/109] [Search] Filter options display styling --- platform/commonUI/general/res/css/tree.css | 48 +++++++++---------- .../general/res/sass/search/_search.scss | 19 ++++---- platform/search/res/templates/search.html | 9 ++-- 3 files changed, 37 insertions(+), 39 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 2c7ffb025e..f2e96f8adc 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -403,19 +403,17 @@ ul.tree { height: auto; } /* line 224, ../sass/search/_search.scss */ .search-holder .search .active-filter-display .clear-filters-icon { - position: absolute; - right: 0px; - padding-top: 2px; - padding-bottom: 2px; - padding-right: 9px; - padding-left: 4px; + padding: 4px; + margin-left: -4px; cursor: pointer; color: #737373; font-size: 6px; } - /* line 240, ../sass/search/_search.scss */ - .search-holder .search .active-filter-display.on + .search-scroll { - top: 40px; } - /* line 244, ../sass/search/_search.scss */ + /* line 234, ../sass/search/_search.scss */ + .search-holder .search .active-filter-display .filter-options { + position: relative; + margin-left: 10px; + top: -8px; } + /* line 241, ../sass/search/_search.scss */ .search-holder .search .search-scroll { top: 25px; overflow-y: auto; @@ -423,7 +421,7 @@ ul.tree { top: auto; bottom: auto; height: 90%; } - /* line 258, ../sass/search/_search.scss */ + /* line 255, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item { -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s; @@ -433,10 +431,10 @@ ul.tree { border-radius: 2px; padding-top: 4px; padding-bottom: 2px; } - /* line 272, ../sass/search/_search.scss */ + /* line 269, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 276, ../sass/search/_search.scss */ + /* line 273, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label .title-label { display: inline-block; position: absolute; @@ -448,47 +446,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 298, ../sass/search/_search.scss */ + /* line 295, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected { background: #005177; color: #fff; } - /* line 302, ../sass/search/_search.scss */ + /* line 299, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .view-control { color: #0099cc; } - /* line 305, ../sass/search/_search.scss */ + /* line 302, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { color: #fff; } - /* line 312, ../sass/search/_search.scss */ + /* line 309, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 315, ../sass/search/_search.scss */ + /* line 312, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { display: block; } - /* line 318, ../sass/search/_search.scss */ + /* line 315, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { color: #33ccff; } - /* line 326, ../sass/search/_search.scss */ + /* line 323, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon { position: relative; } - /* line 328, ../sass/search/_search.scss */ + /* line 325, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 332, ../sass/search/_search.scss */ + /* line 329, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .title-label { font-style: italic; font-size: .9em; opacity: 0.5; margin-left: 26px; line-height: 24px; } - /* line 342, ../sass/search/_search.scss */ + /* line 339, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 347, ../sass/search/_search.scss */ + /* line 344, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 352, ../sass/search/_search.scss */ + /* line 349, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-more-button { margin-top: 5px; margin-bottom: 5px; diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index 81bb5cfd01..5919984899 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -222,23 +222,20 @@ height: auto; .clear-filters-icon { - position: absolute; - right: 0px; - - padding-top: 2px; - padding-bottom: 2px; - padding-right: $rightPadding + 4px; - padding-left: 4px; + padding: 4px; + margin-left: -4px; cursor: pointer; color: $colorItemFg; font-size: 6px; } - } - - .active-filter-display.on + .search-scroll { - top: 40px; + + .filter-options { + position: relative; + margin-left: 10px; + top: -8px; + } } .search-scroll { diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html index 886473f0f6..2ad43a85c0 100644 --- a/platform/search/res/templates/search.html +++ b/platform/search/res/templates/search.html @@ -107,13 +107,16 @@
- Filtered by: {{ filtersString }} + ng-if="filtersString !== '' && ngModel.search"> + x + +
+ Filtered by: {{ filtersString }} +
From f38b89a582c6e066f2b6d354b7ca47684ed92e27 Mon Sep 17 00:00:00 2001 From: slhale Date: Thu, 13 Aug 2015 16:56:58 -0700 Subject: [PATCH 048/109] [Search] style --- platform/search/src/controllers/SearchController.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/platform/search/src/controllers/SearchController.js b/platform/search/src/controllers/SearchController.js index d23fc69182..17bc277f1e 100644 --- a/platform/search/src/controllers/SearchController.js +++ b/platform/search/src/controllers/SearchController.js @@ -184,7 +184,8 @@ define(function () { * Re-filters the search restuls. Called when ngModel.checked changes. */ updateOptions: function () { - var type; + var type, + i; // Update all-checked status $scope.ngModel.checkAll = true; @@ -203,8 +204,6 @@ define(function () { // Update the current filters string $scope.filtersString = ''; if ($scope.ngModel.checkAll !== true) { - var i; - for (i = 0; i < types.length; i += 1) { // If the type key corresponds to a checked option... if ($scope.ngModel.checked[types[i].key]) { From 26ab9af911415f6f7e1320d489dbe2c5042b072e Mon Sep 17 00:00:00 2001 From: slhale Date: Fri, 14 Aug 2015 10:19:13 -0700 Subject: [PATCH 049/109] [Search] Dynamic positioning and height The scroll bar for the search results changes height according to how many filter options are displayed above it, without dissapearing below the bottom of the page. --- platform/commonUI/general/res/css/tree.css | 436 +++++++++--------- .../general/res/sass/search/_search.scss | 24 +- 2 files changed, 240 insertions(+), 220 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index f2e96f8adc..cf7456fcb1 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -276,224 +276,234 @@ ul.tree { padding-right: 5px; top: 23px; margin-top: 10px; } - /* line 37, ../sass/search/_search.scss */ - .search-holder .search .search-bar { - width: 100%; - height: 19px; - margin-top: 4px; - position: relative; } - /* line 47, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-input { - position: relative; - top: -4px; + /* line 34, ../sass/search/_search.scss */ + .search-holder .search { + display: flex; + flex-direction: column; + height: 100%; } + /* line 39, ../sass/search/_search.scss */ + .search-holder .search .search-bar { width: 100%; height: 19px; - padding-right: 16px; - padding-right: 28px; } - /* line 60, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-icon { - color: #737373; - font-size: 12px; - margin-left: 3px; - width: 0; - height: 0; - margin-top: -19px; - transition: visibility .15s, opacity .15s, color .2s; } - /* line 74, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-icon.content { + margin-top: 4px; + position: relative; + order: 1; } + /* line 50, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-input { + position: relative; + top: -4px; + width: 100%; + height: 19px; + padding-right: 16px; + padding-right: 28px; } + /* line 63, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-icon { + color: #737373; + font-size: 12px; + margin-left: 3px; + width: 0; + height: 0; + margin-top: -19px; + transition: visibility .15s, opacity .15s, color .2s; } + /* line 77, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-icon.content { + visibility: hidden; + opacity: 0; } + /* line 85, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-input:focus + div.search-icon { visibility: hidden; opacity: 0; } - /* line 82, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-input:focus + div.search-icon { - visibility: hidden; - opacity: 0; } - /* line 88, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-input:hover + div.search-icon { - color: #a6a6a6; } - /* line 92, ../sass/search/_search.scss */ - .search-holder .search .search-bar .clear-icon { - position: absolute; - display: block; - cursor: pointer; - color: #737373; - font-size: 6px; - padding: 6px; - padding-left: 4px; - right: 0px; - top: -3px; - visibility: hidden; - opacity: 0; - transition: visibility .15s, opacity .15s; - right: 16px; - padding-right: 2px; } - /* line 112, ../sass/search/_search.scss */ - .search-holder .search .search-bar .clear-icon.content { - visibility: visible; - opacity: 1; } - /* line 122, ../sass/search/_search.scss */ - .search-holder .search .search-bar .menu-icon { - position: absolute; - display: block; - cursor: pointer; - color: #737373; - font-size: 6px; - padding: 6px; - padding-left: 4px; - right: 0px; - top: -3px; - transition: color .2s; } - /* line 138, ../sass/search/_search.scss */ - .search-holder .search .search-bar .menu-icon:hover { + /* line 91, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-input:hover + div.search-icon { color: #a6a6a6; } - /* line 143, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-menu-holder { - float: right; - margin-top: 17px; - left: -25px; } - /* line 148, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-menu-holder .search-menu { - border-top: 0; } + /* line 95, ../sass/search/_search.scss */ + .search-holder .search .search-bar .clear-icon { + position: absolute; + display: block; + cursor: pointer; + color: #737373; + font-size: 6px; + padding: 6px; + padding-left: 4px; + right: 0px; + top: -3px; + visibility: hidden; + opacity: 0; + transition: visibility .15s, opacity .15s; + right: 16px; + padding-right: 2px; } + /* line 115, ../sass/search/_search.scss */ + .search-holder .search .search-bar .clear-icon.content { + visibility: visible; + opacity: 1; } + /* line 125, ../sass/search/_search.scss */ + .search-holder .search .search-bar .menu-icon { + position: absolute; + display: block; + cursor: pointer; + color: #737373; + font-size: 6px; + padding: 6px; + padding-left: 4px; + right: 0px; + top: -3px; + transition: color .2s; } + /* line 141, ../sass/search/_search.scss */ + .search-holder .search .search-bar .menu-icon:hover { + color: #a6a6a6; } + /* line 146, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-menu-holder { + float: right; + margin-top: 17px; + left: -25px; } /* line 151, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item { - padding-top: 0; - padding-bottom: 0; - padding-left: 4px; - padding-right: 6px; - font-size: 0.8em; - color: #e6e6e6; } - /* line 161, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-checkbox { - margin-top: 0.3em; - padding-left: 0; - margin-right: 0; - padding-right: 3px; } - /* line 174, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-checkbox em:before { - color: white; - background-color: grey; } - /* line 182, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-glyph { - color: #3dcfff; } - /* line 186, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special { - font-weight: bold; - background-color: #666666; } - /* line 190, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special .search-menu-label { - font-size: 1.1em; } - /* line 199, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-menu-holder:after { - position: absolute; - top: -6px; - left: 10px; - display: inline-block; - border-right: 6px solid transparent; - border-bottom: 6px solid #5e5e5e; - border-left: 6px solid transparent; - content: ''; } - /* line 212, ../sass/search/_search.scss */ - .search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder { - visibility: visible; } - /* line 215, ../sass/search/_search.scss */ - .search-holder .search .search-bar div.search-menu-holder:hover { - visibility: visible; } - /* line 220, ../sass/search/_search.scss */ - .search-holder .search .active-filter-display { - font-size: .6em; - height: auto; } - /* line 224, ../sass/search/_search.scss */ - .search-holder .search .active-filter-display .clear-filters-icon { - padding: 4px; - margin-left: -4px; - cursor: pointer; - color: #737373; - font-size: 6px; } - /* line 234, ../sass/search/_search.scss */ - .search-holder .search .active-filter-display .filter-options { - position: relative; - margin-left: 10px; - top: -8px; } - /* line 241, ../sass/search/_search.scss */ - .search-holder .search .search-scroll { - top: 25px; - overflow-y: auto; - padding-right: 5px; - top: auto; - bottom: auto; - height: 90%; } - /* line 255, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item { - -moz-transition: background-color 0.25s; - -o-transition: background-color 0.25s; - -webkit-transition: background-color 0.25s; - transition: background-color 0.25s; - margin-bottom: 2px; - border-radius: 2px; - padding-top: 4px; - padding-bottom: 2px; } - /* line 269, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item .label { - margin-left: 6px; } - /* line 273, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item .label .title-label { - display: inline-block; - position: absolute; - left: 29px; - right: 5px; - font-size: .8em; - line-height: 17px; - width: auto; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } - /* line 295, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item.selected { - background: #005177; - color: #fff; } - /* line 299, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item.selected .view-control { - color: #0099cc; } - /* line 302, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { - color: #fff; } - /* line 309, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { - background: #404040; - color: #cccccc; } - /* line 312, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { - display: block; } - /* line 315, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { - color: #33ccff; } - /* line 323, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .load-icon { + .search-holder .search .search-bar .search-menu-holder .search-menu { + border-top: 0; } + /* line 154, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item { + padding-top: 0; + padding-bottom: 0; + padding-left: 4px; + padding-right: 6px; + font-size: 0.8em; + color: #e6e6e6; } + /* line 164, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-checkbox { + margin-top: 0.3em; + padding-left: 0; + margin-right: 0; + padding-right: 3px; } + /* line 177, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-checkbox em:before { + color: white; + background-color: grey; } + /* line 185, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-glyph { + color: #3dcfff; } + /* line 189, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special { + font-weight: bold; + background-color: #666666; } + /* line 193, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special .search-menu-label { + font-size: 1.1em; } + /* line 202, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-menu-holder:after { + position: absolute; + top: -6px; + left: 10px; + display: inline-block; + border-right: 6px solid transparent; + border-bottom: 6px solid #5e5e5e; + border-left: 6px solid transparent; + content: ''; } + /* line 215, ../sass/search/_search.scss */ + .search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder { + visibility: visible; } + /* line 218, ../sass/search/_search.scss */ + .search-holder .search .search-bar div.search-menu-holder:hover { + visibility: visible; } + /* line 223, ../sass/search/_search.scss */ + .search-holder .search .active-filter-display { + font-size: .6em; + margin-bottom: -3px; + order: 2; } + /* line 231, ../sass/search/_search.scss */ + .search-holder .search .active-filter-display .clear-filters-icon { + padding: 4px; + position: relative; + margin-left: -4px; + top: 0.2em; + cursor: pointer; + color: #737373; + font-size: 6px; } + /* line 244, ../sass/search/_search.scss */ + .search-holder .search .active-filter-display .filter-options { + position: relative; + margin-left: 10px; + top: -8px; } + /* line 251, ../sass/search/_search.scss */ + .search-holder .search .search-scroll { + overflow-y: auto; + padding-right: 5px; + top: auto; + height: auto; + max-height: 100%; + order: 3; position: relative; } - /* line 325, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .load-icon.loading { - pointer-events: none; - margin-left: 6px; } - /* line 329, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .load-icon.loading .title-label { - font-style: italic; - font-size: .9em; - opacity: 0.5; - margin-left: 26px; - line-height: 24px; } - /* line 339, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .load-icon.loading .wait-spinner { + /* line 265, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item { + -moz-transition: background-color 0.25s; + -o-transition: background-color 0.25s; + -webkit-transition: background-color 0.25s; + transition: background-color 0.25s; + margin-bottom: 2px; + border-radius: 2px; + padding-top: 4px; + padding-bottom: 2px; } + /* line 279, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 344, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .load-icon:not(.loading) { - cursor: pointer; } - /* line 349, ../sass/search/_search.scss */ - .search-holder .search .search-scroll .load-more-button { - margin-top: 5px; - margin-bottom: 5px; - position: relative; - left: 25%; - width: 50%; - white-space: nowrap; - height: 20px; - line-height: 11px; - font-size: 0.7em; } + /* line 283, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item .label .title-label { + display: inline-block; + position: absolute; + left: 29px; + right: 5px; + font-size: .8em; + line-height: 17px; + width: auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + /* line 305, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item.selected { + background: #005177; + color: #fff; } + /* line 309, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item.selected .view-control { + color: #0099cc; } + /* line 312, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { + color: #fff; } + /* line 319, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { + background: #404040; + color: #cccccc; } + /* line 322, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { + display: block; } + /* line 325, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { + color: #33ccff; } + /* line 333, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .load-icon { + position: relative; } + /* line 335, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .load-icon.loading { + pointer-events: none; + margin-left: 6px; } + /* line 339, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .load-icon.loading .title-label { + font-style: italic; + font-size: .9em; + opacity: 0.5; + margin-left: 26px; + line-height: 24px; } + /* line 349, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .load-icon.loading .wait-spinner { + margin-left: 6px; } + /* line 354, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .load-icon:not(.loading) { + cursor: pointer; } + /* line 359, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .load-more-button { + margin-top: 5px; + margin-bottom: 5px; + position: relative; + left: 25%; + width: 50%; + white-space: nowrap; + height: 20px; + line-height: 11px; + font-size: 0.7em; } diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index 5919984899..0c15c449c2 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -32,7 +32,9 @@ margin-top: 10px; .search { - //display: block; + display: flex;//block; + flex-direction: column; + height: 100%; .search-bar { $heightAdjust: 4px; @@ -43,6 +45,7 @@ margin-top: $heightAdjust; position: relative; + order: 1; .search-input { position: relative; @@ -219,11 +222,18 @@ .active-filter-display { font-size: .6em; - height: auto; + + // Align bottom correctly + margin-bottom: -3px; + + order: 2; .clear-filters-icon { padding: 4px; + + position: relative; margin-left: -4px; + top: 0.2em; cursor: pointer; @@ -240,15 +250,15 @@ .search-scroll { // Spacing away from the search input - top: 25px; + //top: 25px; overflow-y: auto; padding-right: $rightPadding; top: auto; - bottom: auto; - height: 90%; - // It overflows the bottom when active-display-filter - // if height is set to 100% + height: auto; + max-height: 100%; + order: 3; + position: relative; .results { From 94662cb904ee1a90a447f37f6ce9a38df2dee670 Mon Sep 17 00:00:00 2001 From: slhale Date: Fri, 14 Aug 2015 10:52:03 -0700 Subject: [PATCH 050/109] [Search] Search filter options display style Created a box around the options display. --- platform/commonUI/general/res/css/tree.css | 63 +++++++++++-------- .../general/res/sass/search/_search.scss | 38 ++++++----- 2 files changed, 60 insertions(+), 41 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index cf7456fcb1..a14ebb239c 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -283,11 +283,11 @@ ul.tree { height: 100%; } /* line 39, ../sass/search/_search.scss */ .search-holder .search .search-bar { + order: 1; + position: relative; width: 100%; height: 19px; - margin-top: 4px; - position: relative; - order: 1; } + margin-top: 4px; } /* line 50, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-input { position: relative; @@ -405,10 +405,16 @@ ul.tree { visibility: visible; } /* line 223, ../sass/search/_search.scss */ .search-holder .search .active-filter-display { + order: 2; font-size: .6em; - margin-bottom: -3px; - order: 2; } - /* line 231, ../sass/search/_search.scss */ + background-color: #4d4d4d; + border-radius: 2px; + border: 1px solid #404040; + padding-left: 4px; + padding-right: 4px; + overflow: hidden; + margin-top: 2px; } + /* line 236, ../sass/search/_search.scss */ .search-holder .search .active-filter-display .clear-filters-icon { padding: 4px; position: relative; @@ -417,21 +423,24 @@ ul.tree { cursor: pointer; color: #737373; font-size: 6px; } - /* line 244, ../sass/search/_search.scss */ + /* line 249, ../sass/search/_search.scss */ .search-holder .search .active-filter-display .filter-options { position: relative; - margin-left: 10px; - top: -8px; } - /* line 251, ../sass/search/_search.scss */ + top: -8px; + margin-bottom: -6px; + margin-left: 14px; + text-indent: -4px; } + /* line 260, ../sass/search/_search.scss */ .search-holder .search .search-scroll { - overflow-y: auto; + order: 3; padding-right: 5px; + margin-top: 4px; + overflow-y: auto; top: auto; height: auto; max-height: 100%; - order: 3; position: relative; } - /* line 265, ../sass/search/_search.scss */ + /* line 275, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item { -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s; @@ -441,10 +450,10 @@ ul.tree { border-radius: 2px; padding-top: 4px; padding-bottom: 2px; } - /* line 279, ../sass/search/_search.scss */ + /* line 289, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 283, ../sass/search/_search.scss */ + /* line 293, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label .title-label { display: inline-block; position: absolute; @@ -456,47 +465,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 305, ../sass/search/_search.scss */ + /* line 315, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected { background: #005177; color: #fff; } - /* line 309, ../sass/search/_search.scss */ + /* line 319, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .view-control { color: #0099cc; } - /* line 312, ../sass/search/_search.scss */ + /* line 322, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { color: #fff; } - /* line 319, ../sass/search/_search.scss */ + /* line 329, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 322, ../sass/search/_search.scss */ + /* line 332, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { display: block; } - /* line 325, ../sass/search/_search.scss */ + /* line 335, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { color: #33ccff; } - /* line 333, ../sass/search/_search.scss */ + /* line 343, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon { position: relative; } - /* line 335, ../sass/search/_search.scss */ + /* line 345, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 339, ../sass/search/_search.scss */ + /* line 349, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .title-label { font-style: italic; font-size: .9em; opacity: 0.5; margin-left: 26px; line-height: 24px; } - /* line 349, ../sass/search/_search.scss */ + /* line 359, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 354, ../sass/search/_search.scss */ + /* line 364, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 359, ../sass/search/_search.scss */ + /* line 369, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-more-button { margin-top: 5px; margin-bottom: 5px; diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index 0c15c449c2..885c3b36a0 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -40,13 +40,13 @@ $heightAdjust: 4px; $textInputHeight: 19px; // This is equal to the default value, 19px + order: 1; + + position: relative; width: 100%; height: $textInputHeight; margin-top: $heightAdjust; - position: relative; - order: 1; - .search-input { position: relative; top: -$heightAdjust; @@ -221,13 +221,18 @@ } .active-filter-display { - font-size: .6em; - - // Align bottom correctly - margin-bottom: -3px; - order: 2; + font-size: .6em; + background-color: lighten($colorBodyBg, 10%); + border-radius: 2px; + border: 1px solid lighten($colorBodyBg, 5%); + + padding-left: 4px; + padding-right: 4px; + overflow: hidden; + margin-top: 2px; + .clear-filters-icon { padding: 4px; @@ -243,21 +248,26 @@ .filter-options { position: relative; - margin-left: 10px; top: -8px; + margin-bottom: -6px; + + // Hanging indent + margin-left: 14px; + text-indent: -4px; } } .search-scroll { - // Spacing away from the search input - //top: 25px; - overflow-y: auto; - padding-right: $rightPadding; + order: 3; + padding-right: $rightPadding; + margin-top: 4px; + + // Adjustable scrolling size + overflow-y: auto; top: auto; height: auto; max-height: 100%; - order: 3; position: relative; .results { From bcea3832edd3708a76d9759957282e9cf41fcd53 Mon Sep 17 00:00:00 2001 From: slhale Date: Fri, 14 Aug 2015 11:06:40 -0700 Subject: [PATCH 051/109] [Search] Search menu & display tweaks Clicking on names of options in the search menu will now toggle the checkboxes. The filter options display now says when no filters are selected. Slightly moved the search menu to the left. --- platform/commonUI/general/res/css/tree.css | 4 +- .../general/res/sass/search/_search.scss | 4 +- platform/search/res/templates/search.html | 10 ++- .../src/controllers/SearchController.js | 83 ++++++++++--------- 4 files changed, 56 insertions(+), 45 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index a14ebb239c..de05422741 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -355,7 +355,7 @@ ul.tree { .search-holder .search .search-bar .search-menu-holder { float: right; margin-top: 17px; - left: -25px; } + left: -50px; } /* line 151, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu { border-top: 0; } @@ -391,7 +391,7 @@ ul.tree { .search-holder .search .search-bar .search-menu-holder:after { position: absolute; top: -6px; - left: 10px; + left: 35px; display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid #5e5e5e; diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index 885c3b36a0..eab64e190f 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -146,7 +146,7 @@ .search-menu-holder { float: right; margin-top: $textInputHeight - 2px; - left: -25px; + left: -50px; .search-menu { border-top: 0; @@ -202,7 +202,7 @@ .search-menu-holder:after { position: absolute; top: -6px; - left: 10px; + left: 35px; display: inline-block; border-right: 6px solid transparent; //border-bottom: 6px solid white; diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html index 2ad43a85c0..71b19d726f 100644 --- a/platform/search/res/templates/search.html +++ b/platform/search/res/templates/search.html @@ -62,13 +62,14 @@
  • + title="Select all filters." + ng-click="ngModel.checkAll = !ngModel.checkAll; controller.checkAll()"> @@ -80,7 +81,8 @@
  • + ng-repeat="type in types" + ng-click="ngModel.checked[type.key] = !ngModel.checked[type.key]; controller.updateOptions()">