diff options
3 files changed, 149 insertions, 73 deletions
diff --git a/chrome/browser/resources/file_manager/css/file_manager.css b/chrome/browser/resources/file_manager/css/file_manager.css index f4799bf..fa65943 100644 --- a/chrome/browser/resources/file_manager/css/file_manager.css +++ b/chrome/browser/resources/file_manager/css/file_manager.css @@ -517,21 +517,20 @@ body[new-ui] .dialog-header { } body[new-ui] .search-box-wrapper { + -webkit-align-items: center; -webkit-box-flex: 1; - display: -webkit-box; + display: -webkit-flex; height: 100%; } body[new-ui] .dialog-header #search-box, body[new-ui] .dialog-header #autocomplete-list, +body[new-ui] .dialog-header #search-icon, +body[new-ui] .dialog-header #search-clear-button, body[new-ui] .dialog-header .buttonbar button { -webkit-app-region: no-drag; } -body[new-ui] .dialog-header #autocomplete-list { - max-width: 240px; -} - body[new-ui] .dialog-header #gear-button { background-image: -webkit-image-set( url('../images/files/ui/new-ui/topbar_button_settings.png') 1x, @@ -810,44 +809,41 @@ body[new-ui] .dialog-header button:active { body[new-ui] #search-box { -webkit-margin-end: 0; - -webkit-padding-after: 0; - -webkit-padding-before: 0; - -webkit-padding-end: 52px; - -webkit-padding-start: 46px; - background: -webkit-image-set( - url('../images/files/ui/new-ui/search_icon_inactive.png') 1x, - url('../images/files/ui/new-ui/2x/search_icon_inactive.png') 2x); - background-position: 13px center; - background-repeat: no-repeat; + background-image: none; border-style: none; display: block; height: 48px; line-height: 1em; - max-width: none; + max-width: 100%; + outline: none; + padding: 0; + pointer-events: none; position: relative; transition: width 0; - width: 58px; + width: 0; /* Overrided by script */ +} + +body[new-ui] #search-box:focus, +body[new-ui] #search-box:active, +body[new-ui] .has-text #search-box { + pointer-events: auto; } body #search-box[hidden] { display: none; /* Required, since overriden by #search-box. */ } -html[dir='rtl'] #search-box { +html[dir='rtl'] body:not([new-ui]) #search-box { background-position: right 4px top 5.5px; } -html[dir='rtl'] body[new-ui] #search-box { - background-position: right 13px center; -} - -#search-box:hover { +body:not([new-ui]) #search-box:hover { border: 1px solid #b9b9b9; border-top: 1px solid #a0a0a0; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); } -#search-box:focus { +body:not([new-ui]) #search-box:focus { border: 1px solid rgb(77, 144, 254); box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); max-width: 240px; @@ -855,32 +851,8 @@ html[dir='rtl'] body[new-ui] #search-box { width: 100%; } -body[new-ui] #search-box.has-text, -body[new-ui] #search-box:focus { - max-width: none; - width: 100%; -} - -body[new-ui] #search-box:hover, -body[new-ui] #search-box:focus { - background: -webkit-image-set( - url('../images/files/ui/new-ui/search_icon_active.png') 1x, - url('../images/files/ui/new-ui/2x/search_icon_active.png') 2x); - background-position: 13px center; - background-repeat: no-repeat; - border-style: none; - box-shadow: none; -} - #search-box::-webkit-search-cancel-button { -webkit-appearance: none; - background-image: -webkit-image-set( - url('../images/files/ui/new-ui/search_clear.png') 1x, - url('../images/files/ui/new-ui/2x/search_clear.png') 2x); - height: 12px; - position: absolute; - top: 18px; - width: 12px; } body:not([new-ui]) #search-box::-webkit-search-cancel-button { @@ -888,49 +860,82 @@ body:not([new-ui]) #search-box::-webkit-search-cancel-button { url('../images/files/ui/search_clear.png') 1x, url('../images/files/ui/2x/search_clear.png') 2x); height: 16px; + position: absolute; top: 6px; width: 16px; } -html:not([dir='rtl']) #search-box::-webkit-search-cancel-button { - right: 30px; -} - -html[dir='rtl'] #search-box::-webkit-search-cancel-button { - left: 30px; +html:not([dir='rtl']) body:not([new-ui]) +#search-box::-webkit-search-cancel-button { + right: 2px; } html[dir='rtl'] body:not([new-ui]) #search-box::-webkit-search-cancel-button { left: 2px; } -html:not([dir='rtl']) body:not([new-ui]) -#search-box::-webkit-search-cancel-button { - right: 2px; +body:not([new-ui]) #search-box::-webkit-search-cancel-button:hover { + background-image: -webkit-image-set( + url('../images/files/ui/search_clear_hover.png') 1x, + url('../images/files/ui/2x/search_clear_hover.png') 2x); } -#search-box::-webkit-search-cancel-button:hover { +body:not([new-ui]) #search-box::-webkit-search-cancel-button:active { background-image: -webkit-image-set( - url('../images/files/ui/new-ui/search_clear_hover.png') 1x, - url('../images/files/ui/new-ui/2x/search_clear_hover.png') 2x); + url('../images/files/ui/search_clear_pressed.png') 1x, + url('../images/files/ui/2x/search_clear_pressed.png') 2x); } -body:not([new-ui]) #search-box::-webkit-search-cancel-button:hover { +body[new-ui] #search-icon { + -webkit-flex-shrink: 0; + -webkit-margin-end: 3px; + -webkit-margin-start: 10px; + -webkit-order: -1; background-image: -webkit-image-set( - url('../images/files/ui/search_clear_hover.png') 1x, - url('../images/files/ui/2x/search_clear_hover.png') 2x); + url('../images/files/ui/new-ui/search_icon_inactive.png') 1x, + url('../images/files/ui/new-ui/2x/search_icon_inactive.png') 2x); + background-position: center; + background-repeat: no-repeat; + height: 32px; + width: 32px; } -#search-box::-webkit-search-cancel-button:active { +body[new-ui] #search-icon:hover, +body[new-ui] #search-box:active + #search-icon, +body[new-ui] #search-box:focus + #search-icon, +body[new-ui] .has-text #search-icon { + background: -webkit-image-set( + url('../images/files/ui/new-ui/search_icon_active.png') 1x, + url('../images/files/ui/new-ui/2x/search_icon_active.png') 2x); +} + +body[new-ui] #search-clear-button { + -webkit-margin-end: 30px; + -webkit-margin-start: 10px; background-image: -webkit-image-set( - url('../images/files/ui/new-ui/search_clear_pressed.png') 1x, - url('../images/files/ui/new-ui/2x/search_clear_pressed.png') 2x); + url('../images/files/ui/new-ui/search_clear.png') 1x, + url('../images/files/ui/new-ui/2x/search_clear.png') 2x); + background-position: center; + background-repeat: no-repeat; + display: none; + height: 12px; + width: 12px; } -body:not([new-ui]) #search-box::-webkit-search-cancel-button:active { +body[new-ui] .search-box-wrapper.has-text + #search-clear-button { + display: block; +} + +body[new-ui] #search-clear-button:hover { background-image: -webkit-image-set( - url('../images/files/ui/search_clear_pressed.png') 1x, - url('../images/files/ui/2x/search_clear_pressed.png') 2x); + url('../images/files/ui/new-ui/search_clear_hover.png') 1x, + url('../images/files/ui/new-ui/2x/search_clear_hover.png') 2x); +} + +body[new-ui] #search-clear-button:active { + background-image: -webkit-image-set( + url('../images/files/ui/new-ui/search_clear_pressed.png') 1x, + url('../images/files/ui/new-ui/2x/search_clear_pressed.png') 2x); } body:not([new-ui]) button#detail-view::before { @@ -2253,7 +2258,8 @@ body:not([new-ui]) list.autocomplete-suggestions { } body[new-ui] list.autocomplete-suggestions { - -webkit-margin-start: 10px; + -webkit-margin-before: -7px; + -webkit-margin-start: -38px; background-color: rgb(250, 250, 250); border: 1px solid rgb(255, 255, 255); border-radius: 3px; @@ -2263,6 +2269,7 @@ body[new-ui] list.autocomplete-suggestions { overflow: hidden; padding: 5px 0; position: fixed; + width: 300px !important; /* This overrides the value specified by script. */ z-index: 3; } diff --git a/chrome/browser/resources/file_manager/js/file_manager.js b/chrome/browser/resources/file_manager/js/file_manager.js index 0b5ec67..8ae8d9d 100644 --- a/chrome/browser/resources/file_manager/js/file_manager.js +++ b/chrome/browser/resources/file_manager/js/file_manager.js @@ -78,6 +78,50 @@ var DialogType = { }; /** + * TextMeasure constructor. + * + * TextMeasure is a measure for text that returns the width of text. This + * class has a dummy span element. When measuring the width of text, it sets + * the text to the element and obtains the element's size by + * getBoundingClientRect. + * + * @constructor + * @param {HTMLElement} element Element that has styles of measured text. The + * width of text is mesures like as it is rendered in this element. + */ +var TextMeasure = function(element) { + var doc = element.ownerDocument; + this.dummySpan_ = doc.createElement('span'); + this.dummySpan_ = doc.getElementsByTagName('body')[0]. + appendChild(this.dummySpan_); + this.dummySpan_.style.position = 'absolute'; + this.dummySpan_.style.visibility = 'hidden'; + var styles = window.getComputedStyle(element, ''); + var stylesToBeCopied = [ + 'fontSize', + 'fontStyle', + 'fontWeight', + 'fontFamily', + 'letterSpacing' + ]; + for (var i = 0; i < stylesToBeCopied.length; i++) { + this.dummySpan_.style[stylesToBeCopied[i]] = styles[stylesToBeCopied[i]]; + } +}; + +/** + * Measures the widht of text. + * + * @param {string} text Text that is measured the width. + * @return {number} Width of the specified text. + */ +TextMeasure.prototype.getWidth = function(text) { + this.dummySpan_.innerText = text; + var rect = this.dummySpan_.getBoundingClientRect(); + return rect ? rect.width : 0; +}; + +/** * @param {string} type Dialog type. * @return {boolean} Whether the type is modal. */ @@ -1005,6 +1049,21 @@ DialogType.isModal = function(type) { this.searchBox_ = this.dialogDom_.querySelector('#search-box'); this.searchBox_.addEventListener( 'input', this.onSearchBoxUpdate_.bind(this)); + this.searchTextMeasure_ = new TextMeasure(this.searchBox_); + if (util.platform.newUI()) { + this.searchIcon_ = this.dialogDom_.querySelector('#search-icon'); + this.searchIcon_.addEventListener( + 'click', + function() { this.searchBox_.focus(); }.bind(this)); + this.searchClearButton_ = + this.dialogDom_.querySelector('#search-clear-button'); + this.searchClearButton_.addEventListener( + 'click', + function() { + this.searchBox_.value = ''; + this.onSearchBoxUpdate_(); + }.bind(this)); + } this.lastSearchQuery_ = ''; var autocompleteList = new cr.ui.AutocompleteList(); @@ -2369,7 +2428,7 @@ DialogType.isModal = function(type) { FileManager.prototype.updateSearchBoxOnDirChange_ = function() { if (!this.searchBox_.disabled) { this.searchBox_.value = ''; - this.updateSearchBoxClass_(); + this.updateSearchBoxStyles_(); } }; @@ -3445,7 +3504,7 @@ DialogType.isModal = function(type) { FileManager.prototype.onSearchBoxUpdate_ = function(event) { var searchString = this.searchBox_.value; - this.updateSearchBoxClass_(); + this.updateSearchBoxStyles_(); if (this.isOnDrive()) { // When the search text is changed, finishes the search and showes back // the last directory by passing an empty string to @@ -3469,8 +3528,15 @@ DialogType.isModal = function(type) { * * @private */ - FileManager.prototype.updateSearchBoxClass_ = function() { - this.searchBox_.classList.toggle('has-text', !!this.searchBox_.value); + FileManager.prototype.updateSearchBoxStyles_ = function() { + if (!util.platform.newUI()) + return; + var TEXT_BOX_PADDING = 16; // in px. + this.searchBoxWrapper_.classList.toggle('has-text', + !!this.searchBox_.value); + var width = this.searchTextMeasure_.getWidth(this.searchBox_.value) + + TEXT_BOX_PADDING; + this.searchBox_.style.width = width + 'px'; }; /** diff --git a/chrome/browser/resources/file_manager/main_new_ui.html b/chrome/browser/resources/file_manager/main_new_ui.html index 9eacfea..6976b21 100644 --- a/chrome/browser/resources/file_manager/main_new_ui.html +++ b/chrome/browser/resources/file_manager/main_new_ui.html @@ -258,7 +258,10 @@ <div class="search-box-wrapper"> <input id="search-box" type="search" tabindex="9" i18n-values="aria-label:SEARCH_TEXT_LABEL"> + <!-- This is placed at the head of search-box --> + <div id="search-icon"></div> </div> + <div id="search-clear-button"></div> <div class="buttonbar"> <button class="menubutton" id="gear-button" tabindex="10" menu="#gear-menu"> |