Commit 7b354f76 authored by Roman Aleksandrov's avatar Roman Aleksandrov Committed by Chromium LUCI CQ

oobe: New layout login webdialog support.

Move size calculation of oobe-adaptive-dialog to C++ which enables
better fit for on-login OOBE dialog and unifying sizes between
fullscreen and on-login screen versions.

Recalculate all of the needed CSS vars based on dialog size.
Since the dialog is centered no need to provide paddings around dialog
for fullscreen OOBE.

Bug: 1151292
Change-Id: Icd6fad02255abf105c940ad610caad5b578c06ad
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2567008Reviewed-by: default avatarDenis Kuznetsov [CET] <antrim@chromium.org>
Reviewed-by: default avatarRoman Sorokin [CET] <rsorokin@chromium.org>
Commit-Queue: Roman Aleksandrov <raleksandrov@google.com>
Cr-Commit-Position: refs/heads/master@{#837100}
parent 2b716a94
......@@ -796,10 +796,8 @@ void LoginDisplayHostWebUI::OnDisplayMetricsChanged(
}
if (GetOobeUI()) {
const gfx::Size& size = primary_display.size();
GetOobeUI()->GetCoreOobeView()->SetClientAreaSize(size.width(),
size.height());
GetOobeUI()->GetCoreOobeView()->UpdateClientAreaSize(
primary_display.size());
if (changed_metrics & DISPLAY_METRIC_PRIMARY)
GetOobeUI()->OnDisplayConfigurationChanged();
}
......
......@@ -7,22 +7,33 @@
namespace chromeos {
constexpr gfx::Size kMaxDialogSize{768, 768};
// Min height should match --oobe-dialog-min-height;
constexpr gfx::Size kMinDialogSize{464, 384};
constexpr gfx::Insets kMinMargins{48, 48};
namespace {
constexpr int kDialogHeightForWidePadding = 640;
constexpr double kEightPrecent = 0.08;
} // namespace
void CalculateOobeDialogBounds(const gfx::Rect& host_bounds,
constexpr gfx::Size kMaxDialogSize{768, 768};
// Min height should match --oobe-dialog-min-height;
constexpr gfx::Size kMinDialogSize{464, 384};
constexpr gfx::Insets kMinMargins{48, 48};
// Sizes come from specs except min widths which are taken as maximal zoomed
// display widths of smallest device ChromeTab (960x600).
constexpr gfx::Size kMaxLandscapeDialogSize{1040, 680};
constexpr gfx::Size kMinLandscapeDialogSize{738, 504};
constexpr gfx::Size kMaxPortraitDialogSize{680, 1040};
constexpr gfx::Size kMinPortraitDialogSize{461, 704};
gfx::Size CalculateOobeDialogSizeForWebDialog(const gfx::Rect& host_bounds,
int shelf_height,
gfx::Rect* result,
OobeDialogPaddingMode* result_padding) {
// Area to position dialog.
bool is_horizontal,
bool is_new_oobe_layout_enabled) {
if (is_new_oobe_layout_enabled) {
return CalculateOobeDialogSize(host_bounds.size(), shelf_height,
is_horizontal);
}
gfx::Rect available_area = host_bounds;
available_area.Inset(0, 0, 0, shelf_height);
......@@ -37,9 +48,40 @@ void CalculateOobeDialogBounds(const gfx::Rect& host_bounds,
// Still, dialog should fit into available area.
dialog_size.SetToMin(available_area.size());
return dialog_size;
}
gfx::Size CalculateOobeDialogSize(const gfx::Size& host_size,
int shelf_height,
bool is_horizontal) {
gfx::Size margin = ScaleToCeiledSize(host_size, kEightPrecent);
gfx::Size margins = margin + margin;
margins.SetToMax(kMinMargins.size());
margins.Enlarge(0, shelf_height);
gfx::Size result = host_size - margins;
if (is_horizontal) {
result.SetToMin(kMaxLandscapeDialogSize);
result.SetToMax(kMinLandscapeDialogSize);
} else {
result.SetToMin(kMaxPortraitDialogSize);
result.SetToMax(kMinPortraitDialogSize);
}
return result;
}
void CalculateOobeDialogBounds(const gfx::Rect& host_bounds,
int shelf_height,
bool is_horizontal,
bool is_new_oobe_layout_enabled,
gfx::Rect* result,
OobeDialogPaddingMode* result_padding) {
// Area to position dialog.
*result = host_bounds;
result->Inset(0, 0, 0, shelf_height);
// Center dialog within an available area.
*result = available_area;
result->ClampToCenteredSize(dialog_size);
result->ClampToCenteredSize(CalculateOobeDialogSizeForWebDialog(
host_bounds, shelf_height, is_horizontal, is_new_oobe_layout_enabled));
if (!result_padding)
return;
if ((result->width() >= kMaxDialogSize.width()) &&
......
......@@ -26,12 +26,25 @@ enum class OobeDialogPaddingMode {
extern const gfx::Size kMaxDialogSize;
extern const gfx::Size kMinDialogSize;
extern const gfx::Insets kMinMargins;
extern const gfx::Size kMaxLandscapeDialogSize;
extern const gfx::Size kMinLandscapeDialogSize;
extern const gfx::Size kMaxPortraitDialogSize;
extern const gfx::Size kMinPortraitDialogSize;
// Calculated the size of OOBE dialog for particular host_size. It is expected
// that `host_size` is the hosting display size for fullscreen OOBE dialog and
// available remainig size for on-login OOBE.
gfx::Size CalculateOobeDialogSize(const gfx::Size& host_size,
int shelf_height,
bool is_horizontal);
// Position OOBE dialog according to specs inside `host_bounds` excluding shelf.
// `host_bounds` is in coordinates of oobe dialog widget. `result` is
// in the same coordinates of `host_bounds`.
void CalculateOobeDialogBounds(const gfx::Rect& host_bounds,
int shelf_height,
bool is_horizontal,
bool is_new_oobe_layout_enabled,
gfx::Rect* result,
OobeDialogPaddingMode* result_padding);
......
......@@ -7,6 +7,8 @@
#include <stddef.h>
#include "base/macros.h"
#include "base/test/scoped_feature_list.h"
#include "chromeos/constants/chromeos_features.h"
#include "testing/gtest/include/gtest/gtest.h"
#include "ui/gfx/geometry/insets.h"
#include "ui/gfx/geometry/rect.h"
......@@ -76,7 +78,9 @@ TEST_F(OobeDialogSizeUtilsTest, Chromebook) {
gfx::Rect dialog;
OobeDialogPaddingMode padding;
CalculateOobeDialogBounds(usual_device, kShelfHeight, &dialog, &padding);
CalculateOobeDialogBounds(
usual_device, kShelfHeight, /* is_horizontal = */ false,
/* is_new_oobe_layout_enabled = */ false, &dialog, &padding);
ValidateDialog(SizeWithoutShelf(usual_device), dialog);
EXPECT_EQ(padding, OobeDialogPaddingMode::PADDING_WIDE);
}
......@@ -87,7 +91,9 @@ TEST_F(OobeDialogSizeUtilsTest, ChromebookVirtualKeyboard) {
gfx::Rect dialog;
OobeDialogPaddingMode padding;
CalculateOobeDialogBounds(usual_device_with_keyboard, 0, &dialog, &padding);
CalculateOobeDialogBounds(
usual_device_with_keyboard, 0, /* is_horizontal = */ false,
/* is_new_oobe_layout_enabled = */ false, &dialog, &padding);
ValidateDialog(usual_device_with_keyboard, dialog);
EXPECT_EQ(padding, OobeDialogPaddingMode::PADDING_NARROW);
}
......@@ -98,7 +104,9 @@ TEST_F(OobeDialogSizeUtilsTest, TabletHorizontal) {
gfx::Rect dialog;
OobeDialogPaddingMode padding;
CalculateOobeDialogBounds(tablet_device, kShelfHeight, &dialog, &padding);
CalculateOobeDialogBounds(
tablet_device, kShelfHeight, /* is_horizontal = */ false,
/* is_new_oobe_layout_enabled = */ false, &dialog, &padding);
ValidateDialog(SizeWithoutShelf(tablet_device), dialog);
EXPECT_EQ(padding, OobeDialogPaddingMode::PADDING_NARROW);
}
......@@ -110,7 +118,9 @@ TEST_F(OobeDialogSizeUtilsTest, TabletHorizontalVirtualKeyboard) {
gfx::Rect dialog;
OobeDialogPaddingMode padding;
CalculateOobeDialogBounds(tablet_device, 0, &dialog, &padding);
CalculateOobeDialogBounds(tablet_device, 0, /* is_horizontal = */ false,
/* is_new_oobe_layout_enabled = */ false, &dialog,
&padding);
ValidateDialog(tablet_device, dialog);
EXPECT_EQ(padding, OobeDialogPaddingMode::PADDING_NARROW);
}
......@@ -122,7 +132,9 @@ TEST_F(OobeDialogSizeUtilsTest, TabletHorizontalDockedMagnifier) {
gfx::Rect dialog;
OobeDialogPaddingMode padding;
CalculateOobeDialogBounds(tablet_device, 0, &dialog, &padding);
CalculateOobeDialogBounds(tablet_device, 0, /* is_horizontal = */ false,
/* is_new_oobe_layout_enabled = */ false, &dialog,
&padding);
ValidateDialog(tablet_device, dialog);
EXPECT_EQ(padding, OobeDialogPaddingMode::PADDING_NARROW);
}
......@@ -136,7 +148,9 @@ TEST_F(OobeDialogSizeUtilsTest, TabletHorizontalVirtualKeyboardMagnifier) {
gfx::Rect dialog;
OobeDialogPaddingMode padding;
CalculateOobeDialogBounds(tablet_device, 0, &dialog, &padding);
CalculateOobeDialogBounds(tablet_device, 0, /* is_horizontal = */ false,
/* is_new_oobe_layout_enabled = */ false, &dialog,
&padding);
ValidateDialog(tablet_device, dialog);
EXPECT_EQ(padding, OobeDialogPaddingMode::PADDING_NARROW);
}
......@@ -147,9 +161,198 @@ TEST_F(OobeDialogSizeUtilsTest, TabletVertical) {
gfx::Rect dialog;
OobeDialogPaddingMode padding;
CalculateOobeDialogBounds(tablet_device, kShelfHeight, &dialog, &padding);
CalculateOobeDialogBounds(
tablet_device, kShelfHeight, /* is_horizontal = */ false,
/* is_new_oobe_layout_enabled = */ false, &dialog, &padding);
ValidateDialog(SizeWithoutShelf(tablet_device), dialog);
EXPECT_EQ(padding, OobeDialogPaddingMode::PADDING_NARROW);
}
class OobeDialogSizeUtilsTestNewLayout : public testing::Test {
public:
OobeDialogSizeUtilsTestNewLayout() = default;
~OobeDialogSizeUtilsTestNewLayout() override = default;
void ValidateDialog(const gfx::Rect& display,
const gfx::Rect& area,
const gfx::Rect& dialog) {
// Dialog should fully fit into the area.
EXPECT_TRUE(area.Contains(dialog));
// Dialog is centered in area.
EXPECT_EQ(area.CenterPoint(), dialog.CenterPoint());
const gfx::Size min_dialog_size = GetMinDialogSize(display);
const gfx::Size max_dialog_size = GetMaxDialogSize(display);
EXPECT_LE(dialog.width(), max_dialog_size.width());
EXPECT_LE(dialog.height(), max_dialog_size.height());
// If there is at least some space, we should have margins.
const gfx::Size margins = ExpectedMargins(display.size());
if (dialog.width() > min_dialog_size.width()) {
EXPECT_EQ(dialog.x() + (area.right() - dialog.right()), margins.width());
}
if (dialog.height() > min_dialog_size.height()) {
EXPECT_EQ(dialog.y() + (area.bottom() - dialog.bottom()),
margins.height());
}
// If dialog size is lesser than minimum size, there should be no margins
if (dialog.width() < min_dialog_size.width()) {
EXPECT_EQ(dialog.x(), area.x());
EXPECT_EQ(dialog.right(), area.right());
}
if (dialog.height() < min_dialog_size.height()) {
EXPECT_EQ(dialog.y(), area.y());
EXPECT_EQ(dialog.bottom(), area.bottom());
}
}
gfx::Size GetMinDialogSize(const gfx::Rect& display) {
if (IsHorizontal(display)) {
return kMinLandscapeDialogSize;
}
return kMinPortraitDialogSize;
}
gfx::Size GetMaxDialogSize(const gfx::Rect& display) {
if (IsHorizontal(display)) {
return kMaxLandscapeDialogSize;
}
return kMaxPortraitDialogSize;
}
gfx::Size ExpectedMargins(const gfx::Size& display_size) {
gfx::Size margin = ScaleToCeiledSize(display_size, 0.08);
gfx::Size margins = margin + margin;
margins.SetToMax(kMinMargins.size());
return margins;
}
gfx::Rect SizeWithoutShelf(const gfx::Rect& area) const {
return gfx::Rect(area.width(), area.height() - kShelfHeight);
}
gfx::Rect SizeWithoutKeyboard(const gfx::Rect& area) const {
return gfx::Rect(area.width(), area.height() - kVirtualKeyboardHeight);
}
gfx::Rect SizeWithoutDockedMagnifier(const gfx::Rect& area) const {
return gfx::Rect(area.width(), area.height() - kDockedMagnifierHeight);
}
bool IsHorizontal(const gfx::Rect& area) const {
return area.width() > area.height();
}
private:
base::test::ScopedFeatureList feature_list_;
DISALLOW_COPY_AND_ASSIGN(OobeDialogSizeUtilsTestNewLayout);
};
// We have plenty of space on the screen.
TEST_F(OobeDialogSizeUtilsTestNewLayout, Chromebook) {
gfx::Rect usual_device(1200, 800);
gfx::Rect dialog;
OobeDialogPaddingMode padding;
CalculateOobeDialogBounds(
usual_device, kShelfHeight, IsHorizontal(usual_device),
/* is_new_oobe_layout_enabled = */ true, &dialog, &padding);
ValidateDialog(usual_device, SizeWithoutShelf(usual_device), dialog);
}
// We have plenty of space on the screen, but virtual keyboard takes some space.
TEST_F(OobeDialogSizeUtilsTestNewLayout, ChromebookVirtualKeyboard) {
gfx::Rect usual_device(1200, 800);
gfx::Rect dialog;
OobeDialogPaddingMode padding;
CalculateOobeDialogBounds(
SizeWithoutKeyboard(usual_device), 0, IsHorizontal(usual_device),
/* is_new_oobe_layout_enabled = */ true, &dialog, &padding);
ValidateDialog(usual_device, SizeWithoutKeyboard(usual_device), dialog);
}
// Tablet device can have smaller screen size.
TEST_F(OobeDialogSizeUtilsTestNewLayout, TabletHorizontal) {
gfx::Rect tablet_device(1080, 675);
gfx::Rect dialog;
OobeDialogPaddingMode padding;
CalculateOobeDialogBounds(
tablet_device, kShelfHeight, IsHorizontal(tablet_device),
/* is_new_oobe_layout_enabled = */ true, &dialog, &padding);
ValidateDialog(tablet_device, SizeWithoutShelf(tablet_device), dialog);
}
// Tablet device in horizontal mode with virtual keyboard have restricted
// vertical space.
TEST_F(OobeDialogSizeUtilsTestNewLayout, TabletHorizontalVirtualKeyboard) {
gfx::Rect tablet_device(1080, 675);
gfx::Rect dialog;
OobeDialogPaddingMode padding;
CalculateOobeDialogBounds(
SizeWithoutKeyboard(tablet_device), 0, IsHorizontal(tablet_device),
/* is_new_oobe_layout_enabled = */ true, &dialog, &padding);
ValidateDialog(tablet_device, SizeWithoutKeyboard(tablet_device), dialog);
}
// Tablet device in horizontal mode with docked magnifier have restricted
// vertical space.
TEST_F(OobeDialogSizeUtilsTestNewLayout, TabletHorizontalDockedMagnifier) {
gfx::Rect tablet_device(1080, 675);
gfx::Rect dialog;
OobeDialogPaddingMode padding;
CalculateOobeDialogBounds(
SizeWithoutDockedMagnifier(tablet_device), 0, IsHorizontal(tablet_device),
/* is_new_oobe_layout_enabled = */ true, &dialog, &padding);
ValidateDialog(tablet_device, SizeWithoutDockedMagnifier(tablet_device),
dialog);
}
// Tablet device in horizontal mode with virtual keyboard and docked
// magnifier results in very few vertical space.
TEST_F(OobeDialogSizeUtilsTestNewLayout,
TabletHorizontalVirtualKeyboardMagnifier) {
gfx::Rect tablet_device(1080, 675);
gfx::Rect dialog;
OobeDialogPaddingMode padding;
CalculateOobeDialogBounds(
SizeWithoutDockedMagnifier(SizeWithoutKeyboard(tablet_device)), 0,
IsHorizontal(tablet_device), /* is_new_oobe_layout_enabled = */ true,
&dialog, &padding);
ValidateDialog(tablet_device,
SizeWithoutDockedMagnifier(SizeWithoutKeyboard(tablet_device)),
dialog);
}
// Tablet in vertical mode puts some strain on dialog width.
TEST_F(OobeDialogSizeUtilsTestNewLayout, ChromeTabVertical) {
gfx::Rect tablet_device(461, 738);
gfx::Rect dialog;
OobeDialogPaddingMode padding;
CalculateOobeDialogBounds(
tablet_device, kShelfHeight, IsHorizontal(tablet_device),
/* is_new_oobe_layout_enabled = */ true, &dialog, &padding);
ValidateDialog(tablet_device, SizeWithoutShelf(tablet_device), dialog);
}
// Tablet in horziontal mode puts some strain on dialog width.
TEST_F(OobeDialogSizeUtilsTestNewLayout, ChromeTabHorizontal) {
gfx::Rect tablet_device(738, 461);
gfx::Rect dialog;
OobeDialogPaddingMode padding;
CalculateOobeDialogBounds(
tablet_device, kShelfHeight, IsHorizontal(tablet_device),
/* is_new_oobe_layout_enabled = */ true, &dialog, &padding);
ValidateDialog(tablet_device, SizeWithoutShelf(tablet_device), dialog);
}
} // namespace chromeos
......@@ -24,6 +24,7 @@
#include "chrome/browser/ui/webui/chromeos/login/core_oobe_handler.h"
#include "chrome/browser/ui/webui/chromeos/login/gaia_screen_handler.h"
#include "chrome/browser/ui/webui/chromeos/login/oobe_ui.h"
#include "chromeos/constants/chromeos_features.h"
#include "components/web_modal/web_contents_modal_dialog_manager.h"
#include "content/public/browser/web_contents.h"
#include "ui/aura/window.h"
......@@ -154,7 +155,11 @@ class LayoutWidgetDelegateView : public views::WidgetDelegateView {
gfx::Rect bounds;
const int shelf_height =
has_shelf_ ? ash::ShelfConfig::Get()->shelf_size() : 0;
CalculateOobeDialogBounds(GetContentsBounds(), shelf_height, &bounds,
const gfx::Size display_size =
display::Screen::GetScreen()->GetPrimaryDisplay().size();
const bool is_horizontal = display_size.width() > display_size.height();
CalculateOobeDialogBounds(GetContentsBounds(), shelf_height, is_horizontal,
features::IsNewOobeLayoutEnabled(), &bounds,
&padding_);
for (views::View* child : children()) {
......@@ -505,6 +510,8 @@ void OobeUIDialogDelegate::OnViewBoundsChanged(views::View* observed_view) {
return;
GetOobeUI()->GetCoreOobeView()->SetDialogPaddingMode(
ConvertDialogPaddingMode(layout_view_->padding()));
GetOobeUI()->GetCoreOobeView()->UpdateClientAreaSize(
layout_view_->GetContentsBounds().size());
}
void OobeUIDialogDelegate::OnKeyboardVisibilityChanged(bool visible) {
......
......@@ -390,6 +390,15 @@ cr.define('cr.ui', function() {
Oobe.getInstance().setOrientation(isHorizontal);
};
/**
* Sets the required size of the oobe dialog.
* @param {number} width oobe dialog width
* @param {number} height oobe dialog height
*/
Oobe.setDialogSize = function(width, height) {
Oobe.getInstance().setDialogSize(width, height);
};
/**
* Sets the hint for calculating OOBE dialog margins.
* @param {OobeTypes.DialogPaddingMode} mode.
......
......@@ -19,8 +19,6 @@
html[new-layout] #outer-container {
height: 100%;
margin-inline-end: var(--oobe-dialog-side-margin);
margin-inline-start: var(--oobe-dialog-side-margin);
z-index: 1;
}
......
......@@ -26,6 +26,7 @@
#include "chrome/browser/chromeos/login/lock/screen_locker.h"
#include "chrome/browser/chromeos/login/screens/reset_screen.h"
#include "chrome/browser/chromeos/login/ui/login_display_host.h"
#include "chrome/browser/chromeos/login/ui/oobe_dialog_size_utils.h"
#include "chrome/browser/chromeos/login/wizard_controller.h"
#include "chrome/browser/chromeos/system/input_device_settings.h"
#include "chrome/browser/ui/ash/ash_util.h"
......@@ -124,7 +125,8 @@ void CoreOobeHandler::Initialize() {
version_info_updater_.StartUpdate(false);
#endif
UpdateKeyboardState();
UpdateClientAreaSize();
UpdateClientAreaSize(
display::Screen::GetScreen()->GetPrimaryDisplay().size());
}
void CoreOobeHandler::GetAdditionalParameters(base::DictionaryValue* dict) {
......@@ -219,6 +221,10 @@ void CoreOobeHandler::SetOrientation(bool is_horizontal) {
CallJS("cr.ui.Oobe.setOrientation", is_horizontal);
}
void CoreOobeHandler::SetDialogSize(int width, int height) {
CallJS("cr.ui.Oobe.setDialogSize", width, height);
}
void CoreOobeHandler::HandleInitialized() {
VLOG(3) << "CoreOobeHandler::HandleInitialized";
GetOobeUI()->InitializeHandlers();
......@@ -353,13 +359,18 @@ void CoreOobeHandler::OnTabletModeEnded() {
CallJS("cr.ui.Oobe.setTabletModeState", false);
}
void CoreOobeHandler::UpdateClientAreaSize() {
const gfx::Size size =
display::Screen::GetScreen()->GetPrimaryDisplay().size();
void CoreOobeHandler::UpdateClientAreaSize(const gfx::Size& size) {
SetClientAreaSize(size.width(), size.height());
SetShelfHeight(ash::ShelfConfig::Get()->shelf_size());
if (features::IsNewOobeLayoutEnabled())
SetOrientation(/*is_horizontal= */ size.width() > size.height());
if (features::IsNewOobeLayoutEnabled()) {
const gfx::Size display_size =
display::Screen::GetScreen()->GetPrimaryDisplay().size();
const bool is_horizontal = display_size.width() > display_size.height();
SetOrientation(is_horizontal);
const gfx::Size dialog_size = CalculateOobeDialogSize(
size, ash::ShelfConfig::Get()->shelf_size(), is_horizontal);
SetDialogSize(dialog_size.width(), dialog_size.height());
}
}
void CoreOobeHandler::SetDialogPaddingMode(
......
......@@ -68,6 +68,8 @@ class CoreOobeView {
virtual void UpdateKeyboardState() = 0;
virtual void FocusReturned(bool reverse) = 0;
virtual void SetOrientation(bool is_horizontal) = 0;
virtual void SetDialogSize(int width, int height) = 0;
virtual void UpdateClientAreaSize(const gfx::Size& size) = 0;
};
// The core handler for Javascript messages related to the "oobe" view.
......@@ -140,6 +142,9 @@ class CoreOobeHandler : public BaseWebUIHandler,
void ShowDeviceResetScreen() override;
void FocusReturned(bool reverse) override;
void SetOrientation(bool is_horizontal) override;
void SetDialogSize(int width, int height) override;
// Updates client area size based on the primary screen size.
void UpdateClientAreaSize(const gfx::Size& size) override;
void UpdateKeyboardState() override;
......@@ -184,9 +189,6 @@ class CoreOobeHandler : public BaseWebUIHandler,
// Updates label with specified id with specified text.
void UpdateLabel(const std::string& id, const std::string& text);
// Updates client area size based on the primary screen size.
void UpdateClientAreaSize();
// True if we should show OOBE instead of login.
bool show_oobe_ui_ = false;
......
......@@ -294,6 +294,13 @@ cr.define('cr.ui.login', function() {
}
},
setDialogSize: function(width, height) {
document.documentElement.style.setProperty(
'--oobe-oobe-dialog-height-base', height + 'px');
document.documentElement.style.setProperty(
'--oobe-oobe-dialog-width-base', width + 'px');
},
/**
* Sets the hint for calculating OOBE dialog inner padding.
* @param {OobeTypes.DialogPaddingMode} mode.
......
......@@ -9,6 +9,8 @@
:root {
--google-grey-700: rgb(95, 99, 104);
--shelf-area-height-base: 57px;
--oobe-oobe-dialog-height-base: 504px;
--oobe-oobe-dialog-width-base: 461px;
}
html,
......@@ -45,86 +47,35 @@ html[screen=oobe] body {
}
/* New default paddings and constants */
html[orientation=horizontal] {
--oobe-adaptive-dialog-content-direction: row;
--oobe-adaptive-dialog-width: 808px;
--oobe-adaptive-dialog-height: 508px;
--oobe-adaptive-dialog-header-width: 302px;
--oobe-adaptive-dialog-item-alignment: unset;
html {
--oobe-adaptive-dialog-width: var(--oobe-oobe-dialog-width-base);
--oobe-adaptive-dialog-height: var(--oobe-oobe-dialog-height-base);
--oobe-adaptive-dialog-content-padding: 40px;
--oobe-subtitle-text-alignment: start;
}
@media screen and (min-width: 1080px) and (min-height: 675px) {
html[orientation=horizontal] {
--oobe-adaptive-dialog-width: 908px;
--oobe-adaptive-dialog-height: 547px;
--oobe-adaptive-dialog-header-width: 302px;
}
}
@media screen and (min-width: 1200px) and (min-height: 800px) {
html[orientation=horizontal] {
--oobe-adaptive-dialog-width: 1008px;
--oobe-adaptive-dialog-height: 656px;
--oobe-adaptive-dialog-header-width: 340px;
}
}
@media screen and (min-width: 1333px) and (min-height: 888px) {
html[orientation=horizontal] {
--oobe-adaptive-dialog-width: 1040px;
--oobe-adaptive-dialog-height: 680px;
--oobe-adaptive-dialog-header-width: 346px;
}
}
html[orientation=vertical] {
--oobe-adaptive-dialog-content-direction: column;
--oobe-adaptive-dialog-width: 504px;
--oobe-adaptive-dialog-height: 796px;
--oobe-adaptive-dialog-header-width: 302px;
--oobe-adaptive-dialog-item-alignment: center;
--oobe-adaptive-dialog-content-padding: 40px;
--oobe-subtitle-text-alignment: center;
}
@media screen and (min-width: 675px) and (min-height: 1080px) {
html[orientation=vertical] {
--oobe-adaptive-dialog-width: 567px;
--oobe-adaptive-dialog-height: 902px;
--oobe-adaptive-dialog-header-width: 302px;
}
}
@media screen and (min-width: 800px) and (min-height: 1200px) {
html[orientation=vertical] {
--oobe-adaptive-dialog-width: 672px;
--oobe-adaptive-dialog-height: 1008px;
--oobe-adaptive-dialog-header-width: 336px;
}
}
@media screen and (min-width: 888px) and (min-height: 1333px) {
html[orientation=vertical] {
--oobe-adaptive-dialog-width: 746px;
--oobe-adaptive-dialog-height: 1040px;
--oobe-adaptive-dialog-header-width: 347px;
}
}
html[orientation=horizontal] {
--oobe-adaptive-dialog-content-direction: row;
--oobe-adaptive-dialog-item-alignment: unset;
--oobe-subtitle-text-alignment: start;
--oobe-adaptive-dialog-content-width: calc(
var(--oobe-adaptive-dialog-width) -
4 * var(--oobe-adaptive-dialog-content-padding) -
var(--oobe-adaptive-dialog-header-width));
/* Header width takes 40% of the width remaining after applying padding */
--oobe-adaptive-dialog-header-width: clamp(302px,
calc(0.4 * (var(--oobe-adaptive-dialog-width) -
4 * var(--oobe-adaptive-dialog-content-padding))) , 346px);
}
html[orientation=vertical] {
--oobe-adaptive-dialog-content-width: calc(
var(--oobe-adaptive-dialog-width) -
2 * var(--oobe-adaptive-dialog-content-padding));
--oobe-adaptive-dialog-content-direction: column;
--oobe-adaptive-dialog-item-alignment: center;
--oobe-subtitle-text-alignment: center;
--oobe-adaptive-dialog-content-width: 100%;
/* Header width takes 40% of the width remaining after applying padding */
--oobe-adaptive-dialog-header-width: clamp(302px,
calc(0.4 * (var(--oobe-adaptive-dialog-width) -
2 * var(--oobe-adaptive-dialog-content-padding))) , 346px);
}
/* Padding defaults */
......
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