Skip to content

GitLab

T
tangled
Commit d0cbcbc8 authored by Omid Tourzan's avatar Omid Tourzan Committed by Commit Bot
Browse files
Options

[Files.app]: Add GM2 banners for files-ng. 

The drive long welcome banner is removed and the new GM2 looks applied
to drive welcome banner and drive and download warning banners.

Also Dismiss buttons changed from X to text buttons.

Modified cr-button is used for text buttons. cr-button provides most of
the text button styles, specially ripple (inkdrop) effect.

The changed css classes duplicated for existing UI and
files-ng with body:not(.files-ng) and body.files-ng prefixes
respectively.

The icon/logo changed to svg version.

rtl/ltr direction tested. It's supported in this CL by using flex
system and inline start/ends rules while the non-filesng uses dir
attribute and absolution positioning. It helps to reduce the complexity
by using one set of rules for both directions.

For files-ng clean up:
- js: can be caught where isFilesNG() method used
- css: body:not(.files-ng)
- Other: ToDos added in string resource files

Bug: 1002400
Change-Id: Icc04ff6193d164e677d6d39294152ec440c73e48

Patchset 10:
- Fix class of welcome banner in non-filesng mode.
- Update outline rule to comply percentage convention.

Change-Id: Icc04ff6193d164e677d6d39294152ec440c73e48
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2148917
Commit-Queue: Noel Gordon <noel@chromium.org>
Reviewed-by: default avatarNoel Gordon <noel@chromium.org>
Reviewed-by: default avatarAlex Danilo <adanilo@chromium.org>
Cr-Commit-Position: refs/heads/master@{#762016}
parent 9dd4a3d4
Hide whitespace changes
Inline Side-by-side
Showing with 347 additions and 75 deletions
chrome/browser/chromeos/file_manager/file_manager_string_util.cc
View file @ d0cbcbc8
......@@ -143,6 +143,8 @@ void AddStringsForDrive(base::DictionaryValue* dict) {
IDS_FILE_BROWSER_DRIVE_WELCOME_TEXT_LONG);
SET_STRING("DRIVE_WELCOME_TEXT_SHORT",
IDS_FILE_BROWSER_DRIVE_WELCOME_TEXT_SHORT);
SET_STRING("DRIVE_WELCOME_TEXT_SHORT_FILESNG",
IDS_FILE_BROWSER_DRIVE_WELCOME_TEXT_SHORT_FILESNG);
SET_STRING("DRIVE_WELCOME_TITLE", IDS_FILE_BROWSER_DRIVE_WELCOME_TITLE);
SET_STRING("SYNC_DELETE_WITHOUT_PERMISSION_ERROR",
IDS_FILE_BROWSER_SYNC_DELETE_WITHOUT_PERMISSION_ERROR);
......@@ -486,6 +488,8 @@ std::unique_ptr<base::DictionaryValue> GetFileManagerStrings() {
IDS_FILE_BROWSER_DOWNLOADS_DIRECTORY_LABEL);
SET_STRING("DOWNLOADS_DIRECTORY_WARNING",
IDS_FILE_BROWSER_DOWNLOADS_DIRECTORY_WARNING);
SET_STRING("DOWNLOADS_DIRECTORY_WARNING_FILESNG",
IDS_FILE_BROWSER_DOWNLOADS_DIRECTORY_WARNING_FILESNG);
SET_STRING("DRAGGING_MULTIPLE_ITEMS",
IDS_FILE_BROWSER_DRAGGING_MULTIPLE_ITEMS);
SET_STRING("DROP_TARGET_FOLDER_NO_MOVE_PERMISSION",
......
ui/chromeos/file_manager_strings.grdp
View file @ d0cbcbc8
......@@ -86,9 +86,13 @@
<message name="IDS_FILE_BROWSER_DOCPROVIDER_ROOT_LABEL_WITH_SUMMARY" desc="A label for a documents provider root, which has both title and summary.">
<ph name="ROOT_TITLE">$1<ex>MyCloudProvider</ex></ph> (<ph name="ROOT_SUMMARY">$2<ex>me@example.com</ex></ph>)
</message>
<!-- TODO (oto@): remove this msg as part of files-ng clean up process. -->
<message name="IDS_FILE_BROWSER_DOWNLOADS_DIRECTORY_WARNING" desc="Warning displayed to user when viewing downloads folder.">
<ph name="BEGIN_BOLD">&lt;strong&gt;</ph>Caution:<ph name="END_BOLD">&lt;/strong&gt;</ph> These files are temporary and may be automatically deleted to free up disk space. <ph name="BEGIN_LINK">&lt;a href="javascript://"&gt;</ph>Learn More<ph name="END_LINK">&lt;/a&gt;<ex>&lt;/a&gt;</ex></ph>
</message>
<message name="IDS_FILE_BROWSER_DOWNLOADS_DIRECTORY_WARNING_FILESNG" desc="Warning displayed to user when viewing downloads folder.">
Caution: These files are temporary and may be automatically deleted to free up disk space. <ph name="BEGIN_LINK">&lt;a href="javascript://"&gt;</ph>Learn More<ph name="END_LINK">&lt;/a&gt;<ex>&lt;/a&gt;</ex></ph>
</message>
<message name="IDS_FILE_BROWSER_NAME_COLUMN_LABEL" desc="Name column label.">
Name
</message>
......@@ -1137,9 +1141,13 @@
<message name="IDS_FILE_BROWSER_DRIVE_WELCOME_TITLE" desc="In the Welcome to Google Drive banner, title of banner.">
Welcome to Google Drive!
</message>
<!-- TODO (oto@): remove this msg as part of files-ng clean up process. -->
<message name="IDS_FILE_BROWSER_DRIVE_WELCOME_TEXT_SHORT" desc="In the Welcome to Google Drive banner, text of the welcome message, short version.">
All files saved in this folder are backed up online automatically
</message>
<message name="IDS_FILE_BROWSER_DRIVE_WELCOME_TEXT_SHORT_FILESNG" desc="In the Welcome to Google Drive banner, text of the welcome message, short version.">
All files saved in this folder are backed up online automatically.
</message>
<message name="IDS_FILE_BROWSER_DRIVE_WELCOME_TEXT_LONG" desc="In the Welcome to Google Drive banner, text of the welcome message, long version.">
<ph name="MARKUP_1">&lt;p&gt;&lt;strong&gt;<ex>&lt;strong&gt;</ex></ph>Access files from everywhere, even offline.<ph name="MARKUP_2">&lt;/strong&gt;<ex>&lt;/strong&gt;</ex></ph>
Files in Google Drive are up to date and available from any device.<ph name="MARKUP_3">&lt;/p&gt;<ex>&lt;/p&gt;</ex></ph>
......
ui/chromeos/file_manager_strings_grdp/IDS_FILE_BROWSER_DOWNLOADS_DIRECTORY_WARNING_FILESNG.png.sha1 0 → 100644
View file @ d0cbcbc8
16424e99169fadeaf4ca2d0afd5263b7da4e6c2a
\ No newline at end of file
ui/chromeos/file_manager_strings_grdp/IDS_FILE_BROWSER_DRIVE_WELCOME_TEXT_SHORT_FILESNG.png.sha1 0 → 100644
View file @ d0cbcbc8
b1c99a22573344ba6c7e30c99eca550daaf79117
\ No newline at end of file
ui/file_manager/file_manager/foreground/css/common.css
View file @ d0cbcbc8
......@@ -178,7 +178,7 @@ cr-menu.chrome-menu > [checked]::before {
.cr-dialog-buttons > button.cr-dialog-ok[disabled]:hover {
background-color:
var(--cros-default-button-background-color-primary-disabled);
color: var(--cros-default-button-label-color-primary-disabled`);
color: var(--cros-default-button-label-color-primary-disabled);
}
.cr-dialog-buttons > button.cr-dialog-cancel {
......@@ -393,3 +393,34 @@ html[dir='rtl'] .cr-dialog-close {
padding-top: 3px;
}
}
/* Common typography styles for ChromeOS. */
body.files-ng .headline2 {
color: var(--google-grey-900);
font-family: Roboto;
font-size: 15px;
font-weight: 500;
line-height: 22px;
}
body.files-ng .body2-primary {
color: var(--google-grey-900);
font-family: Roboto;
font-size: 13px;
line-height: 20px;
}
/* Modification to cr-button to comply with ChromeOS GM2 rules. */
body.files-ng cr-button.text-button {
color: var(--google-blue-600);
cursor: pointer;
font-family: Roboto;
font-size: 13px;
font-weight: 500;
line-height: 20px;
}
body.files-ng cr-button.text-button:focus {
outline-color: rgba(var(--google-blue-600-rgb), 40%);
outline-width: 2px;
}
\ No newline at end of file
ui/file_manager/file_manager/foreground/css/drive_welcome.css
View file @ d0cbcbc8
......@@ -4,13 +4,18 @@
/* Google Drive welcome banners.*/
.drive-welcome-icon {
body:not(.files-ng) .drive-welcome-icon {
background-image: -webkit-image-set(
url(../images/files/ui/drive_logo.png) 1x,
url(../images/files/ui/2x/drive_logo.png) 2x);
background-repeat: no-repeat;
}
body.files-ng .drive-welcome-icon {
background-image: url(../images/files/ui/drive_logo.svg);
background-repeat: no-repeat;
}
.drive-welcome-links {
flex: none;
margin: 6px 0;
......@@ -25,7 +30,7 @@
}
/* Header welcome banner. */
.drive-welcome.header {
body:not(.files-ng) .drive-welcome.header {
background-color: rgb(79, 129, 232);
flex: none;
height: 130px;
......@@ -35,12 +40,23 @@
transition: height 180ms ease, visibility 0ms linear 180ms;
}
body.files-ng .drive-welcome.header {
border-bottom: 1px solid var(--cr-separator-color, rgb(224, 224, 224));
box-sizing: border-box;
flex: none;
height: 72px;
overflow-x: hidden;
overflow-y: auto;
position: relative;
transition: height 180ms ease, visibility 0ms linear 180ms;
}
.dialog-container:not([drive-welcome='header']) .drive-welcome.header {
height: 0;
visibility: hidden;
}
.drive-welcome.header .drive-welcome-wrapper {
body:not(.files-ng) .drive-welcome.header .drive-welcome-wrapper {
color: white;
display: flex;
flex-direction: row;
......@@ -51,7 +67,14 @@
top: 0;
}
.drive-welcome.header .drive-welcome-icon {
body.files-ng .drive-welcome.header .drive-welcome-wrapper {
align-items: center;
display: flex;
flex-direction: row;
height: 71px;
}
body:not(.files-ng) .drive-welcome.header .drive-welcome-icon {
background-color: white;
background-position: center;
background-size: 64px 64px;
......@@ -64,23 +87,53 @@
width: 78px;
}
.drive-welcome.header .drive-welcome-message {
-webkit-margin-end: 50px;
-webkit-margin-start: 20px;
body.files-ng .drive-welcome.header .drive-welcome-icon {
background-position: center;
background-size: 32px 32px;
border-radius: 4px;
flex: none;
height: 32px;
margin-inline-end: 20px;
margin-inline-start: 16px;
width: 32px;
}
body:not(.files-ng) .drive-welcome.header .drive-welcome-message {
margin-inline-end: 50px;
margin-inline-start: 20px;
z-index: 1;
}
.drive-welcome.header .drive-welcome-title {
body.files-ng .drive-welcome.header .drive-welcome-message {
margin-inline-end: 50px;
z-index: 1;
}
body:not(.files-ng) .drive-welcome.header .drive-welcome-title {
font-size: 21px;
font-weight: 500;
margin-bottom: 4px;
}
.drive-welcome.header .drive-welcome-text {
body.files-ng .drive-welcome.header .drive-welcome-title {
margin-bottom: 2px;
}
body:not(.files-ng) .drive-welcome.header .drive-welcome-text {
font-size: 16px;
}
.drive-welcome.header .drive-welcome-links {
body.files-ng .drive-welcome.header .drive-welcome-text {
display: inline;
}
body:not(.files-ng) .drive-welcome.header .drive-welcome-links {
z-index: 1;
}
body.files-ng .drive-welcome.header .drive-welcome-links {
display: inline;
margin-inline-start: 4px;
z-index: 1;
}
......@@ -88,7 +141,7 @@
display: inline-block;
}
.drive-welcome.header .banner-close {
body:not(.files-ng) .drive-welcome.header .banner-close {
top: 0;
}
......@@ -119,12 +172,16 @@ html[dir='rtl'] .drive-welcome.header .banner-people {
transform: scaleY(-1);
}
.drive-welcome.header .plain-link {
body:not(.files-ng) .drive-welcome.header .plain-link {
color: white;
font-size: 16px;
text-decoration: underline;
}
body.files-ng .drive-welcome.header .plain-link {
color: var(--google-blue-600);
}
/* Full page welcome banner. */
.drive-welcome.page {
bottom: 0;
......@@ -173,8 +230,8 @@ html[dir='rtl'] .drive-welcome.header .banner-people {
}
.drive-welcome.page .drive-welcome-message {
margin-left: 10px;
margin-right: 10px;
margin-inline-end: 10px;
margin-inline-start: 10px;
max-width: 525px;
}
......
ui/file_manager/file_manager/foreground/css/file_manager.css
View file @ d0cbcbc8
......@@ -1628,7 +1628,7 @@ body.files-ng .list-view .loading-indicator {
top: 0;
}
.downloads-warning {
body:not(.files-ng) .downloads-warning {
align-items: center;
background-color: rgb(79, 129, 232);
color: white;
......@@ -1641,13 +1641,27 @@ body.files-ng .list-view .loading-indicator {
transition: height 70ms linear;
}
.downloads-warning a:link,
.volume-warning a:link {
body.files-ng .downloads-warning {
align-items: center;
border-bottom: 1px solid var(--cr-separator-color, rgb(224, 224, 224));
display: flex;
flex: none;
flex-direction: row;
height: 40px;
}
body:not(.files-ng) .downloads-warning a:link,
body:not(.files-ng) .volume-warning a:link {
color: white;
flex: none;
}
.downloads-warning .warning-icon {
body.files-ng .downloads-warning a:link,
body.files-ng .volume-warning a:link {
color: var(--google-blue-600);
}
body:not(.files-ng) .downloads-warning .warning-icon {
background-image: -webkit-image-set(
url(../images/files/ui/warning_white.png) 1x,
url(../images/files/ui/2x/warning_white.png) 2x);
......@@ -1658,11 +1672,22 @@ body.files-ng .list-view .loading-indicator {
width: 16px;
}
.downloads-warning .warning-message {
body.files-ng .downloads-warning .warning-icon {
-webkit-mask-image: url(../images/files/ui/warning.svg);
background-color: var(--google-grey-700);
background-size: 20px 20px;
flex: none;
height: 20px;
margin-inline-end: 12px;
margin-inline-start: 8px;
width: 20px;
}
body:not(.files-ng) .downloads-warning .warning-message {
margin-inline-end: 40px;
}
.downloads-warning[hidden] {
body:not(.files-ng) .downloads-warning[hidden] {
display: flex !important; /* Overrides [hidden] for animation. */
height: 0;
}
......@@ -1675,7 +1700,7 @@ body.files-ng .list-view .loading-indicator {
}
/* Drive space warning banner. */
.volume-warning {
body:not(.files-ng) .volume-warning {
align-items: center;
animation: heightAnimation 70ms linear;
background-color: rgb(79, 129, 232);
......@@ -1689,12 +1714,25 @@ body.files-ng .list-view .loading-indicator {
position: relative;
}
body.files-ng .volume-warning {
align-items: center;
border-bottom: 1px solid var(--cr-separator-color, rgb(224, 224, 224));
color: white;
display: flex;
flex: none;
flex-direction: row;
font-size: 13px;
height: 40px;
overflow: hidden;
position: relative;
}
.volume-warning[hidden] {
border-top-width: 0;
height: 0;
}
.volume-warning .drive-icon {
body:not(.files-ng) .volume-warning .drive-icon {
background: white -webkit-image-set(
url(../images/files/ui/drive_logo.png) 1x,
url(../images/files/ui/2x/drive_logo.png) 2x) no-repeat center;
......@@ -1706,13 +1744,33 @@ body.files-ng .list-view .loading-indicator {
width: 36px;
}
.volume-warning .drive-text {
body.files-ng .volume-warning .drive-icon {
background: white url(../images/files/ui/drive_logo.svg) no-repeat center;
background-size: 20px 20px;
flex: none;
height: 20px;
margin-inline-end: 12px;
margin-inline-start: 8px;
width: 20px;
}
body:not(.files-ng) .volume-warning .drive-text {
flex: none;
font-size: 16px;
margin-inline-end: 51px;
}
.volume-warning .imitate-paper-button {
body.files-ng .volume-warning .button-group {
display: flex;
flex-direction: row-reverse;
margin-inline-start: auto;
}
body.files-ng .volume-warning .button-group > a {
text-decoration-line: none;
}
body:not(.files-ng) .volume-warning .imitate-paper-button {
background-color: white;
border-radius: 2px;
color: rgb(79, 129, 232);
......@@ -1721,7 +1779,15 @@ body.files-ng .list-view .loading-indicator {
height: 2.5em;
}
.banner-close {
body.files-ng .volume-warning .banner-button {
border: 0;
height: 32px;
margin-inline-end: 8px;
padding-inline-end: 16px;
padding-inline-start: 16px;
}
body:not(.files-ng) .banner-close {
background: -webkit-image-set(
url(../images/files/ui/close_button_white.png) 1x,
url(../images/files/ui/2x/close_button_white.png) 2x) no-repeat center;
......@@ -1734,6 +1800,23 @@ body.files-ng .list-view .loading-indicator {
width: 40px;
}
body.files-ng .banner-close {
border: 0;
height: 32px;
margin-inline-end: 20px;
padding-inline-end: 16px;
padding-inline-start: 16px;
position: absolute;
}
body.files-ng .volume-warning .banner-close {
height: 32px;
margin-inline-end: 20px;
padding-inline-end: 16px;
padding-inline-start: 16px;
position: relative;
}
html[dir='ltr'] .banner-close {
right: 0;
}
......@@ -1742,7 +1825,7 @@ html[dir='rtl'] .banner-close {
left: 0;
}
.banner-cloud-bg {
body:not(.files-ng) .banner-cloud-bg {
background-image: -webkit-image-set(
url(../images/files/ui/drive_banner_clouds.png) 1x,
url(../images/files/ui/2x/drive_banner_clouds.png) 2x);
......
ui/file_manager/file_manager/foreground/images/files/ui/drive_logo.svg 0 → 100644
View file @ d0cbcbc8
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><defs><path id="reuse-0" fill="#FFCD40" d="M12.71 0H6.456l6.52 11.25h6.191z"/><path id="a" d="M12.71 0H6.456L0 11.25l3.052 5.417h13.063l3.052-5.417L12.71 0zM6.19 11.25l3.393-5.854 3.393 5.854H6.191z"/></defs><defs><use href="#a"/><use id="d" href="#a"/><use id="f" href="#a"/><use id="h" href="#a"/><use id="l" href="#a"/><path id="j" d="M.031 5.417h13.063L16.146 0H3.17z"/><path id="n" d="M6.456 0L0 11.25l3.052 5.417L9.583 5.396z"/><radialGradient id="p" cx="33.896%" cy="1.011%" r="114.534%" fx="33.896%" fy="1.011%" gradientTransform="matrix(.86957 0 0 1 .044 0)"><stop offset="0%" stop-color="#FFF" stop-opacity=".1"/><stop offset="100%" stop-color="#FFF" stop-opacity="0"/></radialGradient><linearGradient id="c" x1="25.311%" x2="100.67%" y1="50.149%" y2="85.425%"><stop offset="0%" stop-color="#1A237E" stop-opacity=".2"/><stop offset="100%" stop-color="#1A237E" stop-opacity=".02"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><g transform="translate(.417 1.667)"><mask id="b" fill="#fff"><use href="#a"/></mask><g fill-rule="nonzero" mask="url(#b)"><path fill="#4285F4" d="M3.051 11.25v5.417h13.063l3.052-5.417z"/><path fill="url(#c)" d="M3.17 0l3.139 5.417H.031z" transform="translate(3.02 11.25)"/><path fill="#FFF" fill-opacity=".2" d="M6.129 11.354h12.859l.178-.104H6.19z"/><path fill="#1A237E" fill-opacity=".2" d="M18.988 11.354l-2.935 5.209H3.112l-.061.104h13.063l3.052-5.417z"/><path fill="#1A237E" fill-opacity=".05" d="M6.25 11.354l-.06-.104-3.139 5.417h.12z"/></g></g><g transform="translate(.417 1.667)"><mask id="e" fill="#fff"><use href="#d"/></mask><g fill-rule="nonzero" mask="url(#e)"><path fill="#0F9D58" d="M6.456 0L0 11.25l3.052 5.417 7.364-12.708z"/><path fill="#263238" fill-opacity=".1" d="M6.456 0l.058.307 2.949 5.089-6.41 11.06L.12 11.25H0l3.052 5.417L9.583 5.396z"/><path fill="#FFF" fill-opacity=".2" d="M.12 11.25L6.517.104 6.456 0 0 11.25z"/></g></g><g transform="translate(.417 1.667)"><mask id="g" fill="#fff"><use href="#f"/></mask><g fill-rule="nonzero" mask="url(#g)"><use href="#reuse-0"/><path fill="#FFF" fill-opacity=".2" d="M12.71 0H6.456l.18.104h6.014l6.397 11.146h.12z"/><path fill="#BF360C" fill-opacity=".1" d="M13.035 11.146L6.636.104 6.456 0l6.52 11.25z"/></g></g><g transform="translate(.417 1.667)"><mask id="i" fill="#fff"><use href="#h"/></mask><g mask="url(#i)"><g transform="translate(3.02 11.25)"><mask id="k" fill="#fff"><use href="#j"/></mask><g mask="url(#k)"><path fill="#0F9D58" fill-rule="nonzero" d="M3.436-11.25L-3.021 0 .031 5.417 7.395-7.29z"/></g></g></g></g><g transform="translate(.417 1.667)"><mask id="m" fill="#fff"><use href="#l"/></mask><g mask="url(#m)"><mask id="o" fill="#fff"><use href="#n"/></mask><g mask="url(#o)"><use fill-rule="nonzero" href="#reuse-0"/></g></g></g><path fill="url(#p)" fill-rule="nonzero" d="M13.127 1.667H6.873L.417 12.917l3.052 5.416H16.53l3.052-5.416-6.456-11.25zm-6.52 11.25L10 7.063l3.393 5.854H6.607z"/><path d="M0 0h20v20H0z"/></g></svg>
\ No newline at end of file
ui/file_manager/file_manager/foreground/js/ui/banners.js
View file @ d0cbcbc8
......@@ -208,27 +208,47 @@ class Banners extends cr.EventTarget {
const wrapper = util.createChild(container, 'drive-welcome-wrapper');
util.createChild(wrapper, 'drive-welcome-icon');
if (type === 'header') {
if (type === 'header' && !util.isFilesNg()) {
util.createChild(wrapper, 'banner-cloud-bg');
util.createChild(wrapper, 'banner-people');
}
const close = util.createChild(wrapper, 'banner-close', 'button');
close.setAttribute('aria-label', str('DRIVE_WELCOME_DISMISS'));
close.id = 'welcome-dismiss';
close.tabIndex = 0;
close.addEventListener('click', this.closeWelcomeBanner_.bind(this));
let close, links;
if (util.isFilesNg()) {
close =
util.createChild(wrapper, 'banner-close text-button', 'cr-button');
close.innerHTML = str('DRIVE_WELCOME_DISMISS');
const message = util.createChild(wrapper, 'drive-welcome-message');
const message = util.createChild(wrapper, 'drive-welcome-message');
const title = util.createChild(message, 'drive-welcome-title headline2');
title.textContent = str('DRIVE_WELCOME_TITLE');
const title = util.createChild(message, 'drive-welcome-title');
const body = util.createChild(message, 'body2-primary');
const text = util.createChild(message, 'drive-welcome-text');
text.innerHTML = str(messageId);
const text = util.createChild(body, 'drive-welcome-text');
text.innerHTML = str(messageId);
const links = util.createChild(message, 'drive-welcome-links');
links = util.createChild(body, 'drive-welcome-links');
} else {
close = util.createChild(wrapper, 'banner-close', 'button');
const message = util.createChild(wrapper, 'drive-welcome-message');
const title = util.createChild(message, 'drive-welcome-title');
title.textContent = str('DRIVE_WELCOME_TITLE');
const text = util.createChild(message, 'drive-welcome-text');
text.innerHTML = str(messageId);
links = util.createChild(message, 'drive-welcome-links');
}
close.setAttribute('aria-label', str('DRIVE_WELCOME_DISMISS'));
close.id = 'welcome-dismiss';
close.tabIndex = 0;
close.addEventListener('click', this.closeWelcomeBanner_.bind(this));
title.textContent = str('DRIVE_WELCOME_TITLE');
const more = util.createChild(links, 'plain-link', 'a');
more.textContent = str('DRIVE_LEARN_MORE');
more.href = str('GOOGLE_DRIVE_OVERVIEW_URL');
......@@ -275,39 +295,81 @@ class Banners extends cr.EventTarget {
box.textContent = '';
if (show && opt_sizeStats) {
const icon = this.document_.createElement('div');
icon.className = 'drive-icon';
box.appendChild(icon);
const text = this.document_.createElement('div');
text.className = 'drive-text';
text.textContent = strf(
'DRIVE_SPACE_AVAILABLE_LONG',
util.bytesToString(opt_sizeStats.remainingSize));
box.appendChild(text);
const link = this.document_.createElement('a');
link.href = str('GOOGLE_DRIVE_BUY_STORAGE_URL');
link.target = '_blank';
const button = this.document_.createElement('button');
button.className = 'imitate-paper-button';
button.textContent = str('DRIVE_BUY_MORE_SPACE_LINK');
link.appendChild(button);
box.appendChild(link);
const close = this.document_.createElement('button');
close.setAttribute('aria-label', str('DRIVE_WELCOME_DISMISS'));
close.id = 'welcome-dismiss';
close.className = 'banner-close';
box.appendChild(close);
const totalSize = opt_sizeStats.totalSize;
close.addEventListener('click', () => {
const values = {};
values[DRIVE_WARNING_DISMISSED_KEY] = totalSize;
chrome.storage.local.set(values);
box.hidden = true;
this.requestRelayout_(100);
});
if (util.isFilesNg()) {
const icon = this.document_.createElement('div');
icon.className = 'drive-icon';
box.appendChild(icon);
const text = this.document_.createElement('div');
text.className = 'body2-primary';
text.textContent = strf(
'DRIVE_SPACE_AVAILABLE_LONG',
util.bytesToString(opt_sizeStats.remainingSize));
box.appendChild(text);
const buttonGroup = this.document_.createElement('div');
buttonGroup.className = 'button-group';
box.appendChild(buttonGroup);
const close = this.document_.createElement('cr-button');
close.setAttribute('aria-label', str('DRIVE_WELCOME_DISMISS'));
close.id = 'welcome-dismiss';
close.innerHTML = str('DRIVE_WELCOME_DISMISS');
close.className = 'banner-close text-button';
buttonGroup.appendChild(close);
const link = this.document_.createElement('a');
link.href = str('GOOGLE_DRIVE_BUY_STORAGE_URL');
link.target = '_blank';
const buyMore = this.document_.createElement('cr-button');
buyMore.className = 'banner-button text-button';
buyMore.textContent = str('DRIVE_BUY_MORE_SPACE_LINK');
link.appendChild(buyMore);
buttonGroup.appendChild(link);
const totalSize = opt_sizeStats.totalSize;
close.addEventListener('click', () => {
const values = {};
values[DRIVE_WARNING_DISMISSED_KEY] = totalSize;
chrome.storage.local.set(values);
box.hidden = true;
this.requestRelayout_(100);
});
} else {
const icon = this.document_.createElement('div');
icon.className = 'drive-icon';
box.appendChild(icon);
const text = this.document_.createElement('div');
text.className = 'drive-text';
text.textContent = strf(
'DRIVE_SPACE_AVAILABLE_LONG',
util.bytesToString(opt_sizeStats.remainingSize));
box.appendChild(text);
const link = this.document_.createElement('a');
link.href = str('GOOGLE_DRIVE_BUY_STORAGE_URL');
link.target = '_blank';
const button = this.document_.createElement('button');
button.className = 'imitate-paper-button';
button.textContent = str('DRIVE_BUY_MORE_SPACE_LINK');
link.appendChild(button);
box.appendChild(link);
const close = this.document_.createElement('button');
close.setAttribute('aria-label', str('DRIVE_WELCOME_DISMISS'));
close.id = 'welcome-dismiss';
close.className = 'banner-close';
box.appendChild(close);
const totalSize = opt_sizeStats.totalSize;
close.addEventListener('click', () => {
const values = {};
values[DRIVE_WARNING_DISMISSED_KEY] = totalSize;
chrome.storage.local.set(values);
box.hidden = true;
this.requestRelayout_(100);
});
}
}
if (box.hidden != !show) {
......@@ -360,7 +422,17 @@ class Banners extends cr.EventTarget {
*/
maybeShowWelcomeBanner_() {
this.ready_.then(() => {
if (this.directoryModel_.getFileList().length == 0 &&
if (util.isFilesNg()) {
// We do not want to increment the counter when the user navigates
// between different directories on Drive, but we increment the counter
// once anyway to prevent the full page banner from showing.
if (!this.previousDirWasOnDrive_ || this.welcomeHeaderCounter_ == 0) {
this.setWelcomeHeaderCounter_(this.welcomeHeaderCounter_ + 1);
this.prepareAndShowWelcomeBanner_(
'header', 'DRIVE_WELCOME_TEXT_SHORT_FILESNG');
}
} else if (
this.directoryModel_.getFileList().length == 0 &&
this.welcomeHeaderCounter_ == 0) {
// Only show the full page banner if the header banner was never shown.
// Do not increment the counter.
......@@ -595,7 +667,14 @@ class Banners extends cr.EventTarget {
icon.className = 'warning-icon';
const message = this.document_.createElement('div');
message.className = 'warning-message';
message.innerHTML = util.htmlUnescape(str('DOWNLOADS_DIRECTORY_WARNING'));
if (util.isFilesNg()) {
message.className += 'warning-message body2-primary';
message.innerHTML =
util.htmlUnescape(str('DOWNLOADS_DIRECTORY_WARNING_FILESNG'));
} else {
message.innerHTML =
util.htmlUnescape(str('DOWNLOADS_DIRECTORY_WARNING'));
}
box.appendChild(icon);
box.appendChild(message);
box.querySelector('a').addEventListener('click', e => {
......@@ -603,10 +682,15 @@ class Banners extends cr.EventTarget {
e.preventDefault();
});
const close = this.document_.createElement('button');
const closeType = util.isFilesNg() ? 'cr-button' : 'button';
const close = this.document_.createElement(closeType);
close.className = 'banner-close';
close.setAttribute('aria-label', str('DRIVE_WELCOME_DISMISS'));
close.id = 'welcome-dismiss';
if (util.isFilesNg()) {
close.innerHTML = str('DRIVE_WELCOME_DISMISS');
close.className = 'banner-close text-button';
}
box.appendChild(close);
close.addEventListener('click', () => {
const values = {};
......
ui/file_manager/file_manager_resources.grd
View file @ d0cbcbc8
......@@ -145,8 +145,10 @@
<!-- Resources used for non-flattened HTML files. -->
<include compress="gzip" name="IDR_FILE_MANAGER_DRIVE_WELCOME_STYLE" file="file_manager/foreground/css/drive_welcome.css" type="BINDATA" />
<include name="IDR_FILE_MANAGER_IMG_UI_CLOUDS" file="file_manager/foreground/images/files/ui/clouds.png" type="BINDATA" />
<!-- TODO (oto@): remove next 2 resources in the files-ng cleanup process -->
<include name="IDR_FILE_MANAGER_IMG_UI_DRIVE_WELCOME_LOGO" file="file_manager/foreground/images/files/ui/drive_logo.png" type="BINDATA" />
<include name="IDR_FILE_MANAGER_IMG_UI_2X_DRIVE_WELCOME_LOGO" file="file_manager/foreground/images/files/ui/2x/drive_logo.png" type="BINDATA" />
<include name="IDR_FILE_MANAGER_IMG_UI_DRIVE_LOGO" file="file_manager/foreground/images/files/ui/drive_logo.svg" type="BINDATA" />
<include name="IDR_FILE_MANAGER_IMG_UI_DRIVE_WELCOME_PEOPLE" file="file_manager/foreground/images/files/ui/drive_banner_people.png" type="BINDATA" />
<include name="IDR_FILE_MANAGER_IMG_UI_2X_DRIVE_WELCOME_PEOPLE" file="file_manager/foreground/images/files/ui/2x/drive_banner_people.png" type="BINDATA" />
......
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