Skip to content

GitLab

T
tangled
Commit cad2958c authored by Nnamdi Theodore Johnson-Kanu's avatar Nnamdi Theodore Johnson-Kanu Committed by Commit Bot
Browse files
Options

[CrOS cellular] Make cellular setup dialog responsive 

Requirements:
   - https://carbon.googleplex.com/cros-ux/pages/lte-setup/setup-dialog

Screenshots:
   - https://screenshot.googleplex.com/9k9jbPVMqpn6tTY.png
   - https://screenshot.googleplex.com/BV2mY4zuwCq2drM.png
   - https://screenshot.googleplex.com/8Nq4yFZXQNtEu6q.png
   - https://screenshot.googleplex.com/WLvorXWMMzqmE5K.png

Bug: Bug: 1093185
Change-Id: I16e7080d1e650a963910607164807292d5be4fb1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2430298
Commit-Queue: Nnamdi Theodore Johnson-kanu <tjohnsonkanu@google.com>
Reviewed-by: default avatarRegan Hsu <hsuregan@chromium.org>
Reviewed-by: default avatarKyle Horimoto <khorimoto@chromium.org>
Reviewed-by: default avatarAzeem Arshad <azeemarshad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#812405}
parent add7800c
Hide whitespace changes
Inline Side-by-side
Showing with 115 additions and 40 deletions
chrome/browser/resources/settings/chromeos/internet_page/cellular_setup_dialog.html
View file @ cad2958c
......@@ -11,6 +11,17 @@
<dom-module id="os-settings-cellular-setup-dialog">
<template>
<style include="settings-shared">
@media (min-width: 640px){
:host {
--cr-dialog-width: 512px;
}
}
@media (max-width: 640px){
:host {
--cr-dialog-width: 320px;
}
}
</style>
<!-- TODO(crbug/1093185): Change close logic when CellularSetup embedded -->
<cr-dialog id="dialog">
......
chrome/test/data/webui/cr_components/chromeos/cellular_setup/cellular_setup_test.js
View file @ cad2958c
......@@ -36,7 +36,7 @@ suite('CrComponentsCellularSetupTest', function() {
const selectionFlow = cellularSetupPage.$$('setup-selection-flow');
assertTrue(!!selectionFlow);
const psimBtn = selectionFlow.$$('#psim-flow-ui-btn');
const psimBtn = selectionFlow.$$('#psimFlowUiBtn');
assertTrue(!!psimBtn);
psimBtn.click();
......
chrome/test/data/webui/cr_components/chromeos/cellular_setup/esim_flow_ui_test.js
View file @ cad2958c
......@@ -24,14 +24,22 @@ suite('CrComponentsEsimFlowUiTest', function() {
});
test('Forward navigation goes to final page', function() {
const qrCodePage = eSimPage.$$('#qr-code-page');
const finalPage = eSimPage.$$('#final-page');
assertTrue(!!qrCodePage);
assertTrue(!!finalPage);
assertTrue(
eSimPage.selectedESimPageName_ === cellular_setup.ESimPageName.ESIM);
eSimPage.selectedESimPageName_ === cellular_setup.ESimPageName.ESIM &&
eSimPage.selectedESimPageName_ === qrCodePage.id);
eSimPage.navigateForward();
Polymer.dom.flush();
assertTrue(
eSimPage.selectedESimPageName_ === cellular_setup.ESimPageName.FINAL);
eSimPage.selectedESimPageName_ === cellular_setup.ESimPageName.FINAL &&
eSimPage.selectedESimPageName_ === finalPage.id);
});
......
ui/webui/resources/cr_components/chromeos/cellular_setup/setup_selection_flow.html
View file @ cad2958c
......@@ -13,26 +13,73 @@
--cr-card-radio-button-width: 224px
}
#setup-flow-select-radio {
@media (min-width: 640px){
/* At above 640px card radio buttons should be aligned in a row */
#setupFlowSelectRadio {
flex-direction: row;
}
.sim-icon-container {
height: 128px;
}
.sim-flow-ui-btn {
margin-bottom: 32px;
}
}
@media (max-width: 640px){
/* At below 640px card radio buttons should be aligned in a column */
#setupFlowSelectRadio {
flex-direction: column;
}
.sim-flow-ui-btn {
margin-inline-end: 0;
margin-inline-start: 0;
width: 278px;
}
#psimFlowUiBtn {
margin-bottom: 8px;
margin-top: 16px;
}
#esimFlowUiBtn {
margin-bottom: 32px;
margin-top: 8px;
}
.flex-container {
display: flex;
flex-direction: row;
}
.sim-icon-container {
height: 64px;
margin: auto;
width: 128px;
}
}
#setupFlowSelectRadio {
display: flex;
flex-direction: row;
justify-content: center;
}
.sim-icon-container {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 60px;
background-size: contain;
}
#psim-icon-container {
#psimIconContainer {
background-image: -webkit-image-set(
url(psim_1x.png) 1x,
url(psim_2x.png) 2x);
}
#esim-icon-container {
#esimIconContainer {
background-image: -webkit-image-set(
url(esim_1x.png) 1x,
url(esim_2x.png) 2x);
......@@ -43,51 +90,61 @@
}
.sim-btn-title {
font-weight: 600; /* semibold */
margin-top: 15px;
margin-top: 16px;
}
.sim-btn-description {
margin-top: 10px;
margin-top: 8px;
}
</style>
<cr-radio-group
name="setup-flow-selection"
id="setup-flow-select-radio"
id="setupFlowSelectRadio"
selected="{{setupFlowSelection_}}"
on-selected-changed="onSetupFlowRadioSelectedChange_">
<cr-card-radio-button
id="psim-flow-ui-btn"
id="psimFlowUiBtn"
name="psim-flow-ui"
aria-labeledby="psim-btn-title"
aria-describedby="psim-btn-descritpion">
<div id="psim-icon-container" class="sim-icon-container"></div>
<div id="psim-btn-title"
class="sim-btn-title sim-btn-text"
aria-hidden="true">
[[i18n('pSimFlowSetup')]]
</div>
<div id="psim-btn-descritpion"
class="sim-btn-description sim-btn-text"
aria-hidden="true">
[[i18n('pSimFlowSetupMessage')]]
class="sim-flow-ui-btn"
aria-labeledby="psimBtnTitle"
aria-describedby="psimBtnDescritpion">
<div class="flex-container">
<div id="psimIconContainer" class="sim-icon-container"></div>
<div>
<div id="psimBtnTitle"
class="sim-btn-title sim-btn-text"
aria-hidden="true">
[[i18n('pSimFlowSetup')]]
</div>
<div id="psimBtnDescritpion"
class="sim-btn-description sim-btn-text"
aria-hidden="true">
[[i18n('pSimFlowSetupMessage')]]
</div>
</div>
</div>
</cr-card-radio-button>
<cr-card-radio-button
id="esim-flow-ui-btn"
id="esimFlowUiBtn"
class="sim-flow-ui-btn"
name="esim-flow-ui"
aria-labeledby="esim-btn-title"
aria-describedby="esim-btn-descritpion">
<div id="esim-icon-container" class="sim-icon-container"></div>
<div id="esim-btn-title"
class="sim-btn-title sim-btn-text"
aria-hidden="true">
[[i18n('eSimFlowSetup')]]
</div>
<div id="esim-btn-descrition"
class="sim-btn-description sim-btn-text"
aria-hidden="true">
[[i18n('eSimFlowSetupMessage')]]
aria-labeledby="esimBtnTitle"
aria-describedby="esimBtnDescrition">
<div class="flex-container">
<div id="esimIconContainer" class="sim-icon-container"></div>
<div>
<div id="esimBtnTitle"
class="sim-btn-title sim-btn-text"
aria-hidden="true">
[[i18n('eSimFlowSetup')]]
</div>
<div id="esimBtnDescrition"
class="sim-btn-description sim-btn-text"
aria-hidden="true">
[[i18n('eSimFlowSetupMessage')]]
</div>
</div>
</div>
</cr-card-radio-button>
</cr-radio-group>
......
ui/webui/resources/cr_components/chromeos/cellular_setup/setup_selection_flow.js
View file @ cad2958c
......@@ -15,7 +15,6 @@ Polymer({
],
properties: {
/**
* Element name of the current selected sub-page.
* @private {!cellularSetup.CellularSetupPageName}
......
ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html
View file @ cad2958c
......@@ -22,7 +22,7 @@
overflow-y: hidden;
padding: 0;
top: 50%;
width: 512px;
width: var(--cr-dialog-width, 512px);
}
@media (prefers-color-scheme: dark) {
......
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