Commit 1e255bf0 authored by Austin Tankiang's avatar Austin Tankiang Committed by Commit Bot

Make text in visual signals fill the remaining space

This text, contained in the .xf-panel-text element, can have two
different widths depending on the Files Transfer Details flag, so make
it flex to fill up the entire space in both cases.

Bug: 1137316
Change-Id: Ibea7905e7c764e0e5d1a0caf096fdba427cbb911
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2467498Reviewed-by: default avatarNoel Gordon <noel@chromium.org>
Commit-Queue: Austin Tankiang <austinct@chromium.org>
Cr-Commit-Position: refs/heads/master@{#816883}
parent d9680126
...@@ -66,7 +66,8 @@ class PanelItem extends HTMLElement { ...@@ -66,7 +66,8 @@ class PanelItem extends HTMLElement {
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
max-width: 400px; height: 68px;
width: 400px;
} }
.xf-button { .xf-button {
...@@ -75,9 +76,9 @@ class PanelItem extends HTMLElement { ...@@ -75,9 +76,9 @@ class PanelItem extends HTMLElement {
} }
.xf-panel-text { .xf-panel-text {
flex: 1;
font: 13px Roboto; font: 13px Roboto;
line-height: 20px; line-height: 20px;
max-width: 216px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
...@@ -87,10 +88,6 @@ class PanelItem extends HTMLElement { ...@@ -87,10 +88,6 @@ class PanelItem extends HTMLElement {
outline: none; outline: none;
} }
:host([panel-type='3']) .xf-panel-text {
width: 216px;
}
:host([panel-type='3']) .xf-panel-label-text { :host([panel-type='3']) .xf-panel-label-text {
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
...@@ -105,7 +102,6 @@ class PanelItem extends HTMLElement { ...@@ -105,7 +102,6 @@ class PanelItem extends HTMLElement {
.xf-panel-label-text { .xf-panel-label-text {
color: var(--google-grey-900); color: var(--google-grey-900);
max-width: 216px;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
...@@ -124,7 +120,6 @@ class PanelItem extends HTMLElement { ...@@ -124,7 +120,6 @@ class PanelItem extends HTMLElement {
} }
:host(:not([detailed-panel])) .xf-grow-padder { :host(:not([detailed-panel])) .xf-grow-padder {
flex-grow: 16;
width: 24px; width: 24px;
} }
...@@ -153,15 +148,6 @@ class PanelItem extends HTMLElement { ...@@ -153,15 +148,6 @@ class PanelItem extends HTMLElement {
padding-bottom: var(--progress-padding-bottom); padding-bottom: var(--progress-padding-bottom);
} }
:host(:not([panel-type='0'])) .xf-panel-item {
height: 68px;
}
:host([detailed-panel]) .xf-panel-item {
height: 68px;
width: 400px;
}
:host([detailed-panel]:not([detailed-summary])) .xf-panel-text { :host([detailed-panel]:not([detailed-summary])) .xf-panel-text {
margin-inline-end: 24px; margin-inline-end: 24px;
margin-inline-start: 24px; margin-inline-start: 24px;
...@@ -173,7 +159,6 @@ class PanelItem extends HTMLElement { ...@@ -173,7 +159,6 @@ class PanelItem extends HTMLElement {
:host([detailed-panel]:not([detailed-summary])) xf-button { :host([detailed-panel]:not([detailed-summary])) xf-button {
margin-inline-end: 12px; margin-inline-end: 12px;
margin-inline-start: auto;
} }
:host([detailed-panel]:not([detailed-summary])) #indicator { :host([detailed-panel]:not([detailed-summary])) #indicator {
......
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