Skip to content

Commit

Permalink
Management WebUI: Apply card like style to each section
Browse files Browse the repository at this point in the history 
Each section of the chrome://management page should
look like each section of the settings page

Visual of management page: http://screen/CQ335FkdT5a
                 ChromeOS: http://screen/tZofcxLpJ6B
  Visual of settings page: http://screen/pYsjEZuRsVr

Bug: 938995
Change-Id: I50f150081b1ca24d02be9aea2b2ee668965f53fb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1506499
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Commit-Queue: Hector Carmona <hcarmona@chromium.org>
Commit-Queue: Yann Dago <ydago@chromium.org>
Cr-Commit-Position: refs/heads/master@{#638477}
  • Loading branch information
Yann Dago authored and Commit Bot committed Mar 7, 2019
1 parent 35ad74f commit 08377ef
Show file tree
Hide file tree
Showing 6 changed files with 100 additions and 108 deletions.
168 changes: 80 additions & 88 deletions chrome/browser/resources/management/management_ui.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,7 @@
}

h2 {
@apply --cr-title-text;
font-weight: 600;
@apply --cr-card-external-title;
}

.subtitle {
Expand All @@ -54,7 +53,7 @@

.sections-container {
@apply --cr-centered-card-container;
margin-top: var(--cr-centered-card-container-vertical-margin);
margin-top: var(--cr-section-vertical-margin);
}

.card {
Expand All @@ -80,10 +79,6 @@
justify-content: center;
}

.content-indented {
margin-inline-start: 20px;
}

.three-line {
min-height: var(--cr-section-three-line-min-height);
}
Expand Down Expand Up @@ -155,95 +150,92 @@
</cr-toolbar>
<main id="mainContent">
<div class="sections-container">
<div class="card">
<if expr="not chromeos">
<section class="three-line single-column">
<p inner-h-t-m-l="[[i18nAdvanced('browserManagementNotice')]]">
</p>
</section>
</if>
<if expr="not chromeos">
<section class="card three-line single-column">
<p inner-h-t-m-l="[[i18nAdvanced('browserManagementNotice')]]"></p>
</section>
</if>
<if expr="chromeos">
<template is="dom-if"
if="[[showDeviceReportingInfo_(deviceReportingInfo_)]]">
<section class="three-line single-column">
<h2>$i18n{deviceReporting}</h2>
<div class="content-indented subtitle">
$i18n{deviceConfiguration}
<template is="dom-if"
if="[[showDeviceReportingInfo_(deviceReportingInfo_)]]">
<h2>$i18n{deviceReporting}</h2>
<section class="card three-line single-column">
<div class="subtitle">
$i18n{deviceConfiguration}
</div>
<template is="dom-repeat" items="[[deviceReportingInfo_]]">
<div class="device-reporting">
<span>
<iron-icon icon="[[getIconForDeviceReportingType_(
item.reportingType)]]"></iron-icon>
[[i18n(item.messageId)]]
</span>
</div>
<template is="dom-repeat" items="[[deviceReportingInfo_]]">
<div class="content-indented device-reporting">
<span>
<iron-icon icon="[[getIconForDeviceReportingType_(
item.reportingType)]]"></iron-icon>
[[i18n(item.messageId)]]
</span>
</div>
</template>
</section>
</template>
</template>
</section>
</template>
</if>
<template is="dom-if"
if="[[showBrowserReportingInfo_(browserReportingInfo_)]]">
<section class="three-line single-column">
<h2>$i18n{browserReporting}</h2>
<div class="content-indented subtitle">
$i18n{browserReportingExplanation}
<template is="dom-if"
if="[[showBrowserReportingInfo_(browserReportingInfo_)]]">
<h2>$i18n{browserReporting}</h2>
<section class="card three-line single-column">
<div class="subtitle">
$i18n{browserReportingExplanation}
</div>
<template is="dom-repeat" items="[[browserReportingInfo_]]">
<div class="browser-report">
<iron-icon icon="[[item.icon]]"></iron-icon>
<ul>
<template is="dom-repeat" items="[[item.messageIds]]"
as="messageId">
<li inner-h-t-m-l="[[i18nAdvanced(messageId)]]"></li>
</template>
</ul>
</div>
<template is="dom-repeat" items="[[browserReportingInfo_]]">
<div class="content-indented browser-report">
<iron-icon icon="[[item.icon]]"></iron-icon>
<ul>
<template is="dom-repeat" items="[[item.messageIds]]"
as="messageId">
<li inner-h-t-m-l="[[i18nAdvanced(messageId)]]"></li>
</template>
</ul>
</template>
</section>
</template>
<template is="dom-if"
if="[[showExtensionReportingInfo_(extensions_)]]">
<h2>$i18n{extensionReporting}</h2>
<section class="card three-line single-column">
<div class="subtitle">
$i18n{extensionsInstalled}
</div>
<div class="extensions-list">
<div class="list-item header">
<div class="extension-name">$i18n{extensionName}</div>
<div class="extension-permissions">
$i18n{extensionPermissions}
</div>
</template>
</section>
</template>
<template is="dom-if"
if="[[showExtensionReportingInfo_(extensions_)]]">
<section class="three-line single-column">
<h2>$i18n{extensionReporting}</h2>
<div class="content-indented subtitle">
$i18n{extensionsInstalled}
</div>
<div class="extensions-list">
<div class="list-item header">
<div class="extension-name">$i18n{extensionName}</div>
<template is="dom-repeat" items="[[extensions_]]">
<div class="list-item">
<div class="extension-name">
<img src="[[item.icon]]"
aria-describedby="a11yAssociation">
<span>[[item.name]]</span>
</div>
<div class="extension-permissions">
$i18n{extensionPermissions}
<ul>
<template is="dom-repeat" items="[[item.permissions]]"
as="permission">
<li>[[permission]]</li>
</template>
</ul>
</div>
</div>
<template is="dom-repeat" items="[[extensions_]]">
<div class="list-item">
<div class="extension-name">
<img src="[[item.icon]]"
aria-describedby="a11yAssociation">
<span>[[item.name]]</span>
</div>
<div class="extension-permissions">
<ul>
<template is="dom-repeat" items="[[item.permissions]]"
as="permission">
<li>[[permission]]</li>
</template>
</ul>
</div>
</template>
</div>
</section>
</template>
<if expr="chromeos">
<template is="dom-if" if="[[localTrustRoots_]]">
<section class="three-line single-column">
<h2>$i18n{localTrustRoots}</h2>
<div id="trust-roots-configuration">[[localTrustRoots_]]</div>
</section>
</template>
</if>
</div>
</template>
</div>
</section>
</template>
<if expr="chromeos">
<template is="dom-if" if="[[localTrustRoots_]]">
<h2>$i18n{localTrustRoots}</h2>
<section class="card three-line single-column">
<div id="trust-roots-configuration">[[localTrustRoots_]]</div>
</section>
</template>
</if>
</div>
</main>
</template>
Expand Down
3 changes: 2 additions & 1 deletion chrome/browser/resources/settings/internet_page/internet_subpage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_network_list.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
Expand All @@ -12,7 +13,7 @@
<template>
<style include="settings-shared iron-flex">
#networkListDiv {
margin-top: var(--settings-page-vertical-margin);
margin-top: var(--cr-section-vertical-margin);
min-height: var(--settings-row-min-height);
}

Expand Down
9 changes: 5 additions & 4 deletions chrome/browser/resources/settings/internet_page/tether_connection_dialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_network_icon.html">
<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
Expand All @@ -21,7 +22,7 @@
}

[slot=body] > * {
margin-left: 5px;
margin-inline-start: 5px;
}

iron-icon {
Expand All @@ -31,7 +32,7 @@
#host-device-text-container {
display: flex;
flex-direction: column;
margin-left: 18px;
margin-inline-start: 18px;
}

#availability-title {
Expand All @@ -50,15 +51,15 @@
#tether-explanation,
#tether-carrier-warning,
#tether-description-title {
margin-top: var(--settings-page-vertical-margin);
margin-top: var(--cr-section-vertical-margin);
}

#tether-carrier-warning {
font-weight: 600;
}

#tether-description-list {
padding-left: 16px;
padding-inline-start: 16px;
}

#host-device-lost-container {
Expand Down
13 changes: 1 addition & 12 deletions chrome/browser/resources/settings/settings_page/settings_section.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,8 @@
position: relative;
}

#header {
margin-bottom: 12px;
}

#header .title {
color: var(--cr-primary-text-color);
font-size: 108%;
font-weight: 400;
letter-spacing: .25px;
margin-bottom: 0;
margin-top: var(--settings-page-vertical-margin);
padding-bottom: 4px;
padding-top: 8px;
@apply --cr-card-external-title;
}

:host(:not(.expanded)) #card {
Expand Down
2 changes: 0 additions & 2 deletions chrome/browser/resources/settings/settings_vars_css.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,6 @@
/* No --settings-nav-icon-color needed in light mode. */
--settings-nav-item-color: var(--google-grey-refresh-700);

--settings-page-vertical-margin: 21px;

--settings-row-min-height: var(--cr-section-min-height);
--settings-row-two-line-min-height: var(--cr-section-two-line-min-height);
--settings-row-three-line-min-height:
Expand Down
13 changes: 12 additions & 1 deletion ui/webui/resources/cr_elements/shared_vars_css.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@
padding: 0 var(--cr-section-padding);
}

--cr-centered-card-container-vertical-margin: 21px;
--cr-section-vertical-margin: 21px;

--cr-centered-card-max-width: 680px;
--cr-centered-card-container: {
Expand All @@ -195,6 +195,17 @@
width: 96%;
}

--cr-card-external-title: {
color: var(--cr-primary-text-color);
font-size: 108%;
font-weight: 400;
letter-spacing: .25px;
margin-bottom: 12px;
margin-top: var(--cr-section-vertical-margin);
padding-bottom: 4px;
padding-top: 8px;
}

--cr-text-elide: {
overflow: hidden;
text-overflow: ellipsis;
Expand Down

0 comments on commit 08377ef

Please sign in to comment.