Skip to content

GitLab

T
tangled
Commit f4416f6a authored by Alex Danilo's avatar Alex Danilo Committed by Commit Bot
Browse files
Options

Create container for action bar search box 

Wraps the search button and input fields to allow them to be styled as a
single larger container.

Moves the #search-box styles out from main.html and moves them to
file_manager.css and makes the selector a bit more specific.

Bug: 992823
Change-Id: Ia2bfae92e3e51358d84b0aeb7c694bd564c0176a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2054630
Commit-Queue: Noel Gordon <noel@chromium.org>
Reviewed-by: default avatarNoel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#741380}
parent 39ae2942
Hide whitespace changes
Inline Side-by-side
Showing with 32 additions and 26 deletions
ui/file_manager/file_manager/foreground/css/file_manager.css
View file @ f4416f6a
...@@ -597,6 +597,24 @@ html[dir='rtl'] .dialog-header button.icon-button > files-toggle-ripple { ...@@ -597,6 +597,24 @@ html[dir='rtl'] .dialog-header button.icon-button > files-toggle-ripple {
background-image: none; background-image: none;
} }
.dialog-header #search-wrapper {
display: flex;
}
.dialog-header #search-box cr-input {
--cr-input-background-color: transparent;
--cr-input-border-bottom: 1px solid rgba(255, 255, 255, 0.5);
--cr-input-border-radius: 0;
--cr-input-error-display: none;
--cr-input-padding-end: 20px;
--cr-input-padding-start: 0;
--cr-input-placeholder-color: rgba(255, 255, 255, 0.5);
display: inline-block;
transition: width 200ms ease;
vertical-align: middle;
width: 0;
}
.dialog-header:not(.files-ng) #search-button > .icon { .dialog-header:not(.files-ng) #search-button > .icon {
background-image: -webkit-image-set( background-image: -webkit-image-set(
url(../images/files/ui/search_white.png) 1x, url(../images/files/ui/search_white.png) 1x,
......
ui/file_manager/file_manager/main.html
View file @ f4416f6a
...@@ -33,20 +33,6 @@ ...@@ -33,20 +33,6 @@
<body aria-label="$i18n{FILEMANAGER_APP_NAME}" tabindex="-1"> <body aria-label="$i18n{FILEMANAGER_APP_NAME}" tabindex="-1">
<custom-style> <custom-style>
<style> <style>
#search-box cr-input {
--cr-input-background-color: transparent;
--cr-input-border-bottom: 1px solid rgba(255, 255, 255, 0.5);
--cr-input-border-radius: 0;
--cr-input-error-display: none;
--cr-input-padding-end: 20px;
--cr-input-padding-start: 0;
--cr-input-placeholder-color: rgba(255, 255, 255, 0.5);
display: inline-block;
transition: width 200ms ease;
vertical-align: middle;
width: 0;
}
.dialog-footer cr-input { .dialog-footer cr-input {
--cr-input-border-bottom: 1px solid var(--paper-grey-800); --cr-input-border-bottom: 1px solid var(--paper-grey-800);
--cr-input-border-radius: 0; --cr-input-border-radius: 0;
...@@ -386,18 +372,20 @@ ...@@ -386,18 +372,20 @@
<files-ripple></files-ripple> <files-ripple></files-ripple>
<div class="icon"></div> <div class="icon"></div>
</cr-button> </cr-button>
<cr-button id="search-button" class="icon-button menu-button" tabindex="13" <div id="search-wrapper">
aria-label="$i18n{SEARCH_TEXT_LABEL}" <cr-button id="search-button" class="icon-button menu-button" tabindex="13"
has-tooltip> aria-label="$i18n{SEARCH_TEXT_LABEL}"
<files-toggle-ripple></files-toggle-ripple> has-tooltip>
<div class="icon"></div> <files-toggle-ripple></files-toggle-ripple>
</cr-button> <div class="icon"></div>
<div id="search-box"> </cr-button>
<cr-input type="search" tabindex="14" disabled <div id="search-box">
aria-label="$i18n{SEARCH_TEXT_LABEL}" placeholder="$i18n{SEARCH_TEXT_LABEL}"> <cr-input type="search" tabindex="14" disabled
<cr-button class="clear" slot="suffix" tabindex="14" aria-label="$i18n{SEARCH_TEXT_LABEL}" placeholder="$i18n{SEARCH_TEXT_LABEL}">
aria-label="$i18n{SEARCH_CLEAR_LABEL}" has-tooltip></cr-button> <cr-button class="clear" slot="suffix" tabindex="14"
</cr-input> aria-label="$i18n{SEARCH_CLEAR_LABEL}" has-tooltip></cr-button>
</cr-input>
</div>
</div> </div>
<cr-button id="refresh-button" class="icon-button menu-button" tabindex="15" hidden <cr-button id="refresh-button" class="icon-button menu-button" tabindex="15" hidden
aria-label="$i18n{REFRESH_BUTTON_LABEL}" aria-label="$i18n{REFRESH_BUTTON_LABEL}"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment