From e159b7a15d9629781ea9551e403ae97a173c1d33 Mon Sep 17 00:00:00 2001 From: slhale Date: Mon, 17 Aug 2015 11:47:35 -0700 Subject: [PATCH] [Search] mct-control textfield breaks focus Set up bundle.json so that the search bar could be a mct-control, but left the control itself commented out because then CSS styling would not work due to lack of access to parent elements. --- platform/commonUI/general/res/css/tree.css | 87 ++++++++++--------- .../general/res/sass/search/_search.scss | 5 ++ platform/search/bundle.json | 2 +- platform/search/res/templates/search.html | 5 ++ 4 files changed, 56 insertions(+), 43 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 0ed781ed6b..b29a174271 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -296,7 +296,10 @@ ul.tree { height: 19px; padding-right: 16px; padding-right: 28px; } - /* line 63, ../sass/search/_search.scss */ + /* line 63, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-input input { + width: 100%; } + /* line 68, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-icon { color: #737373; font-size: 12px; @@ -305,18 +308,18 @@ ul.tree { height: 0; margin-top: -19px; transition: visibility .15s, opacity .15s, color .2s; } - /* line 77, ../sass/search/_search.scss */ + /* line 82, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-icon.content { visibility: hidden; opacity: 0; } - /* line 85, ../sass/search/_search.scss */ + /* line 90, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-input:focus + div.search-icon { visibility: hidden; opacity: 0; } - /* line 91, ../sass/search/_search.scss */ + /* line 96, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-input:hover + div.search-icon { color: #a6a6a6; } - /* line 95, ../sass/search/_search.scss */ + /* line 100, ../sass/search/_search.scss */ .search-holder .search .search-bar .clear-icon { position: absolute; display: block; @@ -332,14 +335,14 @@ ul.tree { transition: visibility .15s, opacity .15s, color .2s; right: 15px; padding-right: 4px; } - /* line 115, ../sass/search/_search.scss */ + /* line 120, ../sass/search/_search.scss */ .search-holder .search .search-bar .clear-icon.content { visibility: visible; opacity: 1; } - /* line 120, ../sass/search/_search.scss */ + /* line 125, ../sass/search/_search.scss */ .search-holder .search .search-bar .clear-icon:hover { color: #a6a6a6; } - /* line 129, ../sass/search/_search.scss */ + /* line 134, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon { position: absolute; display: block; @@ -351,24 +354,24 @@ ul.tree { right: 0px; top: -3px; transition: color .2s; } - /* line 145, ../sass/search/_search.scss */ + /* line 150, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon:hover { color: #a6a6a6; } - /* line 150, ../sass/search/_search.scss */ + /* line 155, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder { float: right; margin-top: 17px; left: -50px; z-index: 9; transition: visibility .05s, opacity .05s; } - /* line 159, ../sass/search/_search.scss */ + /* line 164, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder.off { visibility: hidden; opacity: 0; } - /* line 164, ../sass/search/_search.scss */ + /* line 169, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu { border-top: 0; } - /* line 167, ../sass/search/_search.scss */ + /* line 172, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item { padding-top: 0; padding-bottom: 0; @@ -378,33 +381,33 @@ ul.tree { color: #e6e6e6; cursor: pointer; transition: background-color .13s; } - /* line 181, ../sass/search/_search.scss */ + /* line 186, ../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: 2px; } - /* line 194, ../sass/search/_search.scss */ + /* line 199, ../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; height: 12px; width: 12px; font-size: .7em; } - /* line 207, ../sass/search/_search.scss */ + /* line 212, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-glyph { color: #3dcfff; } - /* line 211, ../sass/search/_search.scss */ + /* line 216, ../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 215, ../sass/search/_search.scss */ + /* line 220, ../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 219, ../sass/search/_search.scss */ + /* line 224, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special:hover { background-color: gray; } - /* line 228, ../sass/search/_search.scss */ + /* line 233, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder:after { position: absolute; top: -6px; @@ -414,13 +417,13 @@ ul.tree { border-bottom: 6px solid #5e5e5e; border-left: 6px solid transparent; content: ''; } - /* line 241, ../sass/search/_search.scss */ + /* line 246, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder { visibility: visible; } - /* line 244, ../sass/search/_search.scss */ + /* line 249, ../sass/search/_search.scss */ .search-holder .search .search-bar div.search-menu-holder:hover { visibility: visible; } - /* line 249, ../sass/search/_search.scss */ + /* line 254, ../sass/search/_search.scss */ .search-holder .search .active-filter-display { order: 2; font-size: .6em; @@ -430,7 +433,7 @@ ul.tree { padding-left: 4px; padding-right: 4px; margin-top: 2px; } - /* line 262, ../sass/search/_search.scss */ + /* line 267, ../sass/search/_search.scss */ .search-holder .search .active-filter-display .clear-filters-icon { padding: 4px; position: relative; @@ -439,13 +442,13 @@ ul.tree { cursor: pointer; color: #737373; font-size: 6px; } - /* line 275, ../sass/search/_search.scss */ + /* line 280, ../sass/search/_search.scss */ .search-holder .search .active-filter-display .filter-options { position: relative; top: -0.5em; margin-left: 14px; text-indent: -4px; } - /* line 288, ../sass/search/_search.scss */ + /* line 293, ../sass/search/_search.scss */ .search-holder .search .active-filter-display.off { visibility: hidden; opacity: 0; @@ -453,7 +456,7 @@ ul.tree { margin: 0; padding: 0; border: 0; } - /* line 298, ../sass/search/_search.scss */ + /* line 303, ../sass/search/_search.scss */ .search-holder .search .search-scroll { order: 3; margin-top: 4px; @@ -462,7 +465,7 @@ ul.tree { height: auto; max-height: 100%; position: relative; } - /* line 313, ../sass/search/_search.scss */ + /* line 318, ../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; @@ -472,10 +475,10 @@ ul.tree { border-radius: 2px; padding-top: 4px; padding-bottom: 2px; } - /* line 327, ../sass/search/_search.scss */ + /* line 332, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 331, ../sass/search/_search.scss */ + /* line 336, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label .title-label { display: inline-block; position: absolute; @@ -487,47 +490,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 353, ../sass/search/_search.scss */ + /* line 358, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected { background: #005177; color: #fff; } - /* line 357, ../sass/search/_search.scss */ + /* line 362, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .view-control { color: #0099cc; } - /* line 360, ../sass/search/_search.scss */ + /* line 365, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { color: #fff; } - /* line 367, ../sass/search/_search.scss */ + /* line 372, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 370, ../sass/search/_search.scss */ + /* line 375, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { display: block; } - /* line 373, ../sass/search/_search.scss */ + /* line 378, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { color: #33ccff; } - /* line 381, ../sass/search/_search.scss */ + /* line 386, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon { position: relative; } - /* line 383, ../sass/search/_search.scss */ + /* line 388, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 387, ../sass/search/_search.scss */ + /* line 392, ../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 397, ../sass/search/_search.scss */ + /* line 402, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 402, ../sass/search/_search.scss */ + /* line 407, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 407, ../sass/search/_search.scss */ + /* line 412, ../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 7ab4e65423..a704d9fe30 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -58,6 +58,11 @@ // Modifications for existence of menu icon: padding-right: 16px + 12px; + + // Make work for mct-control textfield + input { + width: 100%; + } } .search-icon { diff --git a/platform/search/bundle.json b/platform/search/bundle.json index 236f7658f0..b5594bd6a1 100644 --- a/platform/search/bundle.json +++ b/platform/search/bundle.json @@ -30,7 +30,7 @@ { "key": "search", "templateUrl": "templates/search.html", - "uses": [ "controls", "forms" ] + "uses": [ "control" ] } ], "representations": [ diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html index 8d966603c9..d5600ff21c 100644 --- a/platform/search/res/templates/search.html +++ b/platform/search/res/templates/search.html @@ -31,6 +31,11 @@ type="text" ng-model="ngModel.input" ng-keyup="controller.search()" /> +