Skip to content

GitLab

T
tangled
Commit 5029da2e authored by Monica Basta's avatar Monica Basta Committed by Commit Bot
Browse files
Options

[ProfilePicker]: Add 'Add Space' button. 

This CL does the following:
1- Adds 'cr-view-manager' to the profile picker.
2- Starts the implementation of the main profile picker screen.
3- Adds the 'Add Space' icon, which will be the entry point for the
profile creation flow.

Bug: 1063856
Change-Id: I626b3ecbc22129e0ad1478c2258812286efe5588
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2249781
Commit-Queue: Monica Basta <msalama@chromium.org>
Reviewed-by: default avatarSamuel Huang <huangs@chromium.org>
Reviewed-by: default avatarEsmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#779968}
parent e2fd4f2d
Hide whitespace changes
Inline Side-by-side
Showing with 180 additions and 1 deletion
chrome/browser/resources/BUILD.gn
View file @ 5029da2e
...@@ -360,6 +360,7 @@ if (!is_android && !is_chromeos) { ...@@ -360,6 +360,7 @@ if (!is_android && !is_chromeos) {
grit("profile_picker_resources") { grit("profile_picker_resources") {
source = "signin/profile_picker/profile_picker_resources.grd" source = "signin/profile_picker/profile_picker_resources.grd"
deps = [ "//chrome/browser/resources/signin/profile_picker:web_components" ]
grit_flags = [ grit_flags = [
"-E", "-E",
"root_gen_dir=" + rebase_path(root_gen_dir, root_build_dir), "root_gen_dir=" + rebase_path(root_gen_dir, root_build_dir),
......
chrome/browser/resources/signin/BUILD.gn
View file @ 5029da2e
...@@ -8,6 +8,7 @@ group("closure_compile") { ...@@ -8,6 +8,7 @@ group("closure_compile") {
deps = [ "sync_confirmation:closure_compile" ] deps = [ "sync_confirmation:closure_compile" ]
if (!is_chromeos) { if (!is_chromeos) {
deps += [ deps += [
"profile_picker:closure_compile",
"signin_email_confirmation:closure_compile", "signin_email_confirmation:closure_compile",
"signin_error:closure_compile", "signin_error:closure_compile",
"signin_reauth:closure_compile", "signin_reauth:closure_compile",
......
chrome/browser/resources/signin/profile_picker/BUILD.gn 0 → 100644
View file @ 5029da2e
# Copyright 2020 The Chromium Authors. All rights reserved.
# Use of this source code is governed by a BSD-style license that can be
# found in the LICENSE file.
import("//third_party/closure_compiler/compile_js.gni")
import("//tools/polymer/html_to_js.gni")
js_type_check("closure_compile") {
is_polymer3 = true
deps = [
":profile_picker_app",
":profile_picker_main_view",
]
}
js_library("profile_picker_main_view") {
deps = [
"//third_party/polymer/v3_0/components-chromium/iron-icon",
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
"//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button.m",
]
}
js_library("profile_picker_app") {
deps = [
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
"//ui/webui/resources/cr_elements/cr_view_manager:cr_view_manager.m",
]
}
html_to_js("web_components") {
js_files = [
"profile_picker_app.js",
"profile_picker_main_view.js",
]
}
chrome/browser/resources/signin/profile_picker/icons.js 0 → 100644
View file @ 5029da2e
import 'chrome://resources/polymer/v3_0/iron-iconset-svg/iron-iconset-svg.js';
const element = document.createElement('iron-iconset-svg');
element.name = 'profiles';
element.size = 74;
element.innerHTML = `
<svg>
<defs>
<g id="add" viewBox="0 0 74 74">
<circle cx="37" cy="37" r="37" stroke="none"/>
<path d="M36.9999 46.4349C36.1315 46.4349 35.4274 45.7309 35.4274 44.8624V38.5724H29.1374C28.269 38.5724 27.5649 37.8684 27.5649 36.9999C27.5649 36.1315 28.269 35.4274 29.1374 35.4274H35.4274V29.1374C35.4274 28.269 36.1315 27.5649 36.9999 27.5649C37.8684 27.5649 38.5724 28.269 38.5724 29.1374V35.4274H44.8624C45.7309 35.4274 46.4349 36.1315 46.4349 36.9999C46.4349 37.8684 45.7309 38.5724 44.8624 38.5724H38.5724V44.8624C38.5724 45.7309 37.8684 46.4349 36.9999 46.4349Z" fill="var(--iron-icon-stroke-color)"/>
</g>
</defs>
</svg>`;
document.head.appendChild(element);
chrome/browser/resources/signin/profile_picker/profile_picker.html
View file @ 5029da2e
...@@ -2,7 +2,18 @@ ...@@ -2,7 +2,18 @@
<html dir="$i18n{textdirection}" lang="$i18n{language}"> <html dir="$i18n{textdirection}" lang="$i18n{language}">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="chrome://resources/css/md_colors.css">
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
</head> </head>
<body> <body>
<style>
@media (prefers-color-scheme: dark) {
html {
background: var(--md-background-color);
}
}
</style>
<profile-picker-app></profile-picker-app>
<script type="module" src="profile_picker_app.js"></script>
</body> </body>
</html> </html>
chrome/browser/resources/signin/profile_picker/profile_picker_app.html 0 → 100644
View file @ 5029da2e
<style>
cr-view-manager {
display: flex;
font-size: 100%;
margin: 0;
min-height: 100vh;
}
</style>
<cr-view-manager>
<profile-picker-main-view slot="view" class="active">
</profile-picker-main-view>
</cr-view-manager>
chrome/browser/resources/signin/profile_picker/profile_picker_app.js 0 → 100644
View file @ 5029da2e
// Copyright 2020 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'chrome://resources/cr_elements/cr_view_manager/cr_view_manager.m.js';
import './profile_picker_main_view.js';
import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
Polymer({
is: 'profile-picker-app',
_template: html`{__html_template__}`,
});
chrome/browser/resources/signin/profile_picker/profile_picker_main_view.html 0 → 100644
View file @ 5029da2e
<style>
.profiles-container {
--grid-gutter: 12px;
--max-columns: 4;
--profile-item-height:178px;
--profile-item-width: 162px;
align-items: center;
display: grid;
height: 80%;
grid-column-gap: var(--grid-gutter);
grid-row-gap: var(--grid-gutter);
grid-template-columns: repeat(auto-fit, var(--profile-item-width));
justify-content: center;
margin: auto;
max-width: calc(var(--profile-item-width) * var(--max-columns) +
var(--grid-gutter) * var(--max-columns));
}
.profile-item {
align-items: center;
display: flex;
flex-direction: column;
height: var(--profile-item-height);
justify-content: center;
width: var(--profile-item-width);
}
#addProfile {
border: 1px dashed;
border-color: var(--google-grey-400);
border-radius: 12px;
}
cr-icon-button[iron-icon='profiles:add'] {
--cr-icon-button-icon-size: 74px;
--cr-icon-button-size: 84px;
--cr-icon-button-fill-color: var(--google-grey-refresh-100);
--cr-icon-button-margin-end: 0px;
--cr-icon-button-margin-start: 0px;
--cr-icon-button-stroke-color: var(--google-grey-refresh-700);
}
@media (prefers-color-scheme: dark) {
/* TODO(msalama): Dark mode mocks not ready yet.*/
}
</style>
<div class="profiles-container">
<div id="addProfile" class="profile-item">
<!-- TODO(msalama): Add title, aria-label once strings are ready-->
<cr-icon-button iron-icon="profiles:add"
on-click="onAddProfileClick_">
</cr-icon-button>
</div>
</div>
chrome/browser/resources/signin/profile_picker/profile_picker_main_view.js 0 → 100644
View file @ 5029da2e
// Copyright 2020 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
import 'chrome://resources/cr_elements/shared_vars_css.m.js';
import './icons.js';
import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
Polymer({
is: 'profile-picker-main-view',
_template: html`{__html_template__}`,
/** @private */
onAddProfileClick_() {
// TODO(msalama): do something.
},
});
chrome/browser/resources/signin/profile_picker/profile_picker_resources.grd
View file @ 5029da2e
...@@ -11,12 +11,26 @@ ...@@ -11,12 +11,26 @@
<output filename="profile_picker_resources.pak" type="data_package" /> <output filename="profile_picker_resources.pak" type="data_package" />
</outputs> </outputs>
<release seq="1"> <release seq="1">
<includes>
<!-- Generated Polymer 3 elements -->
<include name="IDR_PROFILE_PICKER_PROFILE_PICKER_MAIN_VIEW_JS"
file="${root_gen_dir}/chrome/browser/resources/signin/profile_picker/profile_picker_main_view.js"
use_base_dir="false" type="BINDATA" preprocess="true"/>
<include name="IDR_PROFILE_PICKER_PROFILE_PICKER_APP_JS"
file="${root_gen_dir}/chrome/browser/resources/signin/profile_picker/profile_picker_app.js"
use_base_dir="false" type="BINDATA" preprocess="true"/>
</includes>
<structures> <structures>
<structure <structure
name="IDR_PROFILE_PICKER_PROFILE_PICKER_HTML" name="IDR_PROFILE_PICKER_PROFILE_PICKER_HTML"
file="profile_picker.html" file="profile_picker.html"
type="chrome_html" type="chrome_html"
compress="false"/> compress="false"/>
<structure
name="IDR_PROFILE_PICKER_ICONS_JS"
file="icons.js"
type="chrome_html"
compress="false"/>
</structures> </structures>
</release> </release>
</grit> </grit>
tools/gritsettings/resource_ids.spec
View file @ 5029da2e
...@@ -174,7 +174,8 @@ ...@@ -174,7 +174,8 @@
"structures": [1820], "structures": [1820],
}, },
"chrome/browser/resources/signin/profile_picker/profile_picker_resources.grd": { "chrome/browser/resources/signin/profile_picker/profile_picker_resources.grd": {
"structures": [1840], "includes": [1840],
"structures": [1850],
}, },
"chrome/browser/resources/tab_strip/tab_strip_resources.grd": { "chrome/browser/resources/tab_strip/tab_strip_resources.grd": {
"structures": [1860], "structures": [1860],
......
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