Skip to content

GitLab

T
tangled
Commit e2008834 authored by jhawkins@chromium.org's avatar jhawkins@chromium.org
Browse files
Options

DOMUI: Refactor the new overlay style and apply it to all overlays. 

BUG=none
TEST=none

Review URL: http://codereview.chromium.org//6372010

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@72356 0039d316-1c4b-4281-b951-d872f2087c98
parent 8f221361
Hide whitespace changes
Inline Side-by-side
Showing with 228 additions and 237 deletions
chrome/browser/resources/options/add_startup_page_overlay.html
View file @ e2008834
<div class="page hidden" id="addStartupPageOverlay"> <div class="page hidden" id="addStartupPageOverlay">
<h1 i18n-content="addStartupPageTitle"></h1> <h1 i18n-content="addStartupPageTitle"></h1>
<form id="addStartupPageForm"> <form id="addStartupPageForm">
<label id="addURLBlock"><span <div class="content-area">
i18n-content="addStartupPageURLLabel"></span> <label id="addURLBlock"><span
<input id="addStartupPageURL"></label> i18n-content="addStartupPageURLLabel"></span>
<input type="url" id="addStartupPageURL"></label>
<list id="addStartupRecentPageList"></list> <list id="addStartupRecentPageList"></list>
</div>
<div class="action-area button-strip"> <div class="action-area">
<button type="reset" <div class="button-strip">
i18n-content="addStartupPageCancelButton"></button> <button type="reset"
<button type="submit" id="addStartupPageAddButton" disabled i18n-content="addStartupPageCancelButton"></button>
i18n-content="addStartupPageAddButton"></button> <button type="submit" id="addStartupPageAddButton" disabled
i18n-content="addStartupPageAddButton"></button>
</div>
</div> </div>
</form> </form>
</div> </div>
chrome/browser/resources/options/autofill_edit_address_overlay.html
View file @ e2008834
<div class="page hidden" id="autoFillEditAddressOverlay"> <div class="page hidden" id="autoFillEditAddressOverlay">
<h1 id="autoFillAddressTitle"></h1> <h1 id="autoFillAddressTitle"></h1>
<div class="content-area">
<div class="input"> <div class="input">
<label id="fullNameLabel"> <label id="fullNameLabel">
<div><span i18n-content="fullNameLabel"></span></div> <div><span i18n-content="fullNameLabel"></span></div>
<input type="text" class="form" class="form" id="fullName"> <input type="text" class="form" class="form" id="fullName">
</label> </label>
</div>
<div class="input">
<label id="companyNameLabel">
<div><span i18n-content="companyNameLabel"></span></div>
<input type="text" class="form" class="form" id="companyName">
</label>
</div>
<div class="input">
<label id="addrLine1Label">
<div><span i18n-content="addrLine1Label"></span></div>
<input type="text" class="form" class="form" id="addrLine1">
</label>
</div>
<div class="input">
<label id="addrLine2Label">
<div><span i18n-content="addrLine2Label"></span></div>
<input type="text" class="form" class="form" id="addrLine2">
</label>
</div>
<div class="table">
<div class="row">
<div class="input cell">
<label id="cityLabel" for="city">
<span i18n-content="cityLabel"></span>
</label>
</div>
<div class="input cell">
<label id="stateLabel" for="state">
<span i18n-content="stateLabel"></span>
</label>
</div>
<div class="input cell">
<label id="zipCodeLabel" for="zipCode">
<span i18n-content="zipCodeLabel"></span>
</label>
</div>
</div> </div>
<div class="row"> <div class="input">
<div class="input cell"> <label id="companyNameLabel">
<input type="text" class="form" id="city"> <div><span i18n-content="companyNameLabel"></span></div>
</div> <input type="text" class="form" class="form" id="companyName">
<div class="input cell"> </label>
<input type="text" class="form" id="state">
</div>
<div class="input cell">
<input type="text" class="form" id="zipCode">
</div>
</div> </div>
</div> <div class="input">
<label id="addrLine1Label">
<div class="input"> <div><span i18n-content="addrLine1Label"></span></div>
<label id="countryLabel"> <input type="text" class="form" class="form" id="addrLine1">
<div><span i18n-content="countryLabel"></span></div> </label>
<input type="text" class="form" class="form" id="country"> </div>
</label> <div class="input">
</div> <label id="addrLine2Label">
<div><span i18n-content="addrLine2Label"></span></div>
<div class="table"> <input type="text" class="form" class="form" id="addrLine2">
<div class="row"> </label>
<div class="input cell"> </div>
<label id="phoneLabel" for="phone"> <div class="table">
<span i18n-content="phoneLabel"></span> <div class="row">
</label> <div class="input cell">
<label id="cityLabel" for="city">
<span i18n-content="cityLabel"></span>
</label>
</div>
<div class="input cell">
<label id="stateLabel" for="state">
<span i18n-content="stateLabel"></span>
</label>
</div>
<div class="input cell">
<label id="zipCodeLabel" for="zipCode">
<span i18n-content="zipCodeLabel"></span>
</label>
</div>
</div> </div>
<div class="input cell"> <div class="row">
<label id="faxLabel" for="fax"> <div class="input cell">
<span i18n-content="faxLabel"></span> <input type="text" class="form" id="city">
</label> </div>
<div class="input cell">
<input type="text" class="form" id="state">
</div>
<div class="input cell">
<input type="text" class="form" id="zipCode">
</div>
</div> </div>
</div> </div>
<div class="row"> <div class="input">
<div class="input cell"> <label id="countryLabel">
<input type="text" class="form" class="form" id="phone"> <div><span i18n-content="countryLabel"></span></div>
<input type="text" class="form" class="form" id="country">
</label>
</div>
<div class="table">
<div class="row">
<div class="input cell">
<label id="phoneLabel" for="phone">
<span i18n-content="phoneLabel"></span>
</label>
</div>
<div class="input cell">
<label id="faxLabel" for="fax">
<span i18n-content="faxLabel"></span>
</label>
</div>
</div> </div>
<div class="input cell"> <div class="row">
<input type="text" class="form" class="form" id="fax"> <div class="input cell">
<input type="text" class="form" class="form" id="phone">
</div>
<div class="input cell">
<input type="text" class="form" class="form" id="fax">
</div>
</div> </div>
</div> </div>
<div class="input">
<label id="emailLabel">
<div><span i18n-content="emailLabel"></span></div>
<input type="text" class="form" class="form" id="email">
</label>
</div>
</div> </div>
<div class="action-area">
<div class="input"> <div class="button-strip">
<label id="emailLabel"> <button type="reset" id="autoFillEditAddressCancelButton"
<div><span i18n-content="emailLabel"></span></div> i18n-content="cancel"></button>
<input type="text" class="form" class="form" id="email"> <button type="submit" id="autoFillEditAddressApplyButton" disabled
</label> i18n-content="ok"></button>
</div> </div>
<div class="action-area button-strip">
<button type="reset" id="autoFillEditAddressCancelButton"
i18n-content="cancel"></button>
<button type="submit" id="autoFillEditAddressApplyButton" disabled
i18n-content="ok"></button>
</div> </div>
</div> </div>
chrome/browser/resources/options/autofill_edit_creditcard_overlay.html
View file @ e2008834
<div class="page hidden" id="autoFillEditCreditCardOverlay"> <div class="page hidden" id="autoFillEditCreditCardOverlay">
<h1 id="autoFillCreditCardTitle"></h1> <h1 id="autoFillCreditCardTitle"></h1>
<div class="content-area">
<div> <div>
<label id="nameOnCardLabel"> <label id="nameOnCardLabel">
<span i18n-content="nameOnCardLabel"></span><br> <span i18n-content="nameOnCardLabel"></span><br>
<input type="text" id="nameOnCard"> <input type="text" id="nameOnCard">
</label> </label>
</div>
<div>
<label id="creditCardNumberLabel">
<span i18n-content="creditCardNumberLabel"></span><br>
<input type="text" id="creditCardNumber">
</label>
</div>
<div>
<label id="creditCardExpirationDateLabel">
<span i18n-content="creditCardExpirationDateLabel"></span><br>
<select id="expirationMonth"></select>
<select id="expirationYear"></select>
</label>
</div>
</div> </div>
<div class="action-area">
<div> <div class="button-strip">
<label id="creditCardNumberLabel"> <button type="reset" id="autoFillEditCreditCardCancelButton"
<span i18n-content="creditCardNumberLabel"></span><br> i18n-content="cancel"></button>
<input type="text" id="creditCardNumber"> <button type="submit" id="autoFillEditCreditCardApplyButton" disabled
</label> i18n-content="ok"></button>
</div> </div>
<div>
<label id="creditCardExpirationDateLabel">
<span i18n-content="creditCardExpirationDateLabel"></span><br>
<select id="expirationMonth"></select>
<select id="expirationYear"></select>
</label>
</div>
<div class="action-area button-strip">
<button type="reset" id="autoFillEditCreditCardCancelButton"
i18n-content="cancel"></button>
<button type="submit" id="autoFillEditCreditCardApplyButton" disabled
i18n-content="ok"></button>
</div> </div>
</div> </div>
chrome/browser/resources/options/certificate_edit_ca_trust_overlay.html
View file @ e2008834
<div class="page hidden" id="certificateEditCaTrustOverlay"> <div class="page hidden" id="certificateEditCaTrustOverlay">
<p> <div class="content-area">
<span id="certificateEditCaTrustDescription"></span> <p>
</p> <span id="certificateEditCaTrustDescription"></span>
</p>
<p> <p>
<span i18n-content="certificateEditTrustLabel"></span> <span i18n-content="certificateEditTrustLabel"></span>
<br> <br>
<label id="certificateCaTrustSSLLabel"> <label id="certificateCaTrustSSLLabel">
<input type="checkbox" id="certificateCaTrustSSLCheckbox"> <input type="checkbox" id="certificateCaTrustSSLCheckbox">
<span i18n-content="certificateCaTrustSSLLabel"></span> <span i18n-content="certificateCaTrustSSLLabel"></span>
</label> </label>
<br> <br>
<label id="certificateCaTrustEmailLabel"> <label id="certificateCaTrustEmailLabel">
<input type="checkbox" id="certificateCaTrustEmailCheckbox"> <input type="checkbox" id="certificateCaTrustEmailCheckbox">
<span i18n-content="certificateCaTrustEmailLabel"></span> <span i18n-content="certificateCaTrustEmailLabel"></span>
</label> </label>
<br> <br>
<label id="certificateCaTrustObjSignLabel"> <label id="certificateCaTrustObjSignLabel">
<input type="checkbox" id="certificateCaTrustObjSignCheckbox"> <input type="checkbox" id="certificateCaTrustObjSignCheckbox">
<span i18n-content="certificateCaTrustObjSignLabel"></span> <span i18n-content="certificateCaTrustObjSignLabel"></span>
</label> </label>
</p> </p>
</div>
<div class="action-area button-strip"> <div class="action-area">
<button type="reset" id="certificateEditCaTrustCancelButton" <div class="button-strip">
i18n-content="cancel"></button> <button type="reset" id="certificateEditCaTrustCancelButton"
<button type="submit" id="certificateEditCaTrustOkButton" i18n-content="cancel"></button>
i18n-content="ok"></button> <button type="submit" id="certificateEditCaTrustOkButton"
i18n-content="ok"></button>
</div>
</div> </div>
</div> </div>
chrome/browser/resources/options/clear_browser_data_overlay.css
View file @ e2008834
...@@ -4,33 +4,11 @@ Use of this source code is governed by a BSD-style license that can be ...@@ -4,33 +4,11 @@ Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. found in the LICENSE file.
*/ */
/* TODO(estade): these rules override some more general style rules. We
* should unify these rules instead of overriding them, but first we need
* to update existing overlays. Since a lot of the overlays are going away,
* I'm making these rules specific to this overlay for now. */
#clearBrowserDataOverlay { #clearBrowserDataOverlay {
-webkit-box-shadow: 0px 0px 40px -5px #888;
border: 1px solid rgb(188, 193, 208);
border-radius: 2px;
min-width: 500px; min-width: 500px;
padding: 0;
}
#cbdTitle {
background: -webkit-linear-gradient(white, #F8F8F8);
border-bottom: 1px solid rgba(188, 193, 208, .5);
display: block;
font-size: 105%;
font-weight: bold;
padding: 10px 15px 8px 15px;
} }
#cbdContentArea { #clearBrowserDataOverlay > .content-area label {
padding: 10px 15px 5px 15px;
}
#cbdContentArea label {
margin: 5px 0; margin: 5px 0;
} }
...@@ -42,11 +20,3 @@ found in the LICENSE file. ...@@ -42,11 +20,3 @@ found in the LICENSE file.
visibility: hidden; visibility: hidden;
width: 16px; width: 16px;
} }
#cbdActionArea {
-webkit-box-align: center;
-webkit-box-orient: horizontal;
border-top: 1px solid rgba(188, 193, 208, .5);
display: -webkit-box;
padding: 12px;
}
chrome/browser/resources/options/clear_browser_data_overlay.html
View file @ e2008834
<div id="clearBrowserDataOverlay" class="page hidden"> <div id="clearBrowserDataOverlay" class="page hidden">
<span i18n-content="clearBrowserDataTitle" id="cbdTitle"></span> <h1 i18n-content="clearBrowserDataTitle"></h1>
<div id="cbdContentArea"> <div class="content-area">
<span i18n-content="clearBrowserDataLabel"></span> <span i18n-content="clearBrowserDataLabel"></span>
<select id="clearBrowserDataTimePeriod" <select id="clearBrowserDataTimePeriod"
i18n-options="clearBrowserDataTimeList" i18n-options="clearBrowserDataTimeList"
...@@ -38,15 +38,19 @@ ...@@ -38,15 +38,19 @@
<span i18n-content="deleteFormDataCheckbox"></span> <span i18n-content="deleteFormDataCheckbox"></span>
</label> </label>
</div> </div>
<div id="cbdActionArea"> <div class="action-area">
<a target="_blank" i18n-content="flash_storage_settings" <div>
i18n-values="href:flash_storage_url"></a> <a target="_blank" i18n-content="flash_storage_settings"
<div id="cbdThrobber" class="throbber"></div> i18n-values="href:flash_storage_url"></a>
<div class="button-strip"> </div>
<button id="clearBrowserDataDismiss" i18n-content="cancel"></button> <div class="action-area-right">
<button id="clearBrowserDataCommit" <div id="cbdThrobber" class="throbber"></div>
i18n-content="clearBrowserDataCommit"> <div class="button-strip">
</button> <button id="clearBrowserDataDismiss" i18n-content="cancel"></button>
<button id="clearBrowserDataCommit"
i18n-content="clearBrowserDataCommit">
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
chrome/browser/resources/options/import_data_overlay.css
View file @ e2008834
#import-from-div { #import-from-div {
margin-top: 10px;
margin-bottom: 20px; margin-bottom: 20px;
} }
......
chrome/browser/resources/options/import_data_overlay.html
View file @ e2008834
<div id="import-data-overlay" class="page hidden"> <div id="import-data-overlay" class="page hidden">
<h1 i18n-content="importDataTitle"></h1> <h1 i18n-content="importDataTitle"></h1>
<div id="import-from-div"> <div class="content-area">
<span i18n-content="importFromLabel"></span> <div id="import-from-div">
<select id="import-browsers"> <span i18n-content="importFromLabel"></span>
<option i18n-content="importLoading"></option> <select id="import-browsers">
</select> <option i18n-content="importLoading"></option>
</div> </select>
<div id="import-checkboxes">
<div i18n-content="importDescription"></div>
<div>
<input id="import-history" type="checkbox">
<label for="import-history" i18n-content="importHistory"></label>
</div>
<div>
<input id="import-favorites" type="checkbox">
<label for="import-favorites" i18n-content="importFavorites"></label>
</div>
<div>
<input id="import-passwords" type="checkbox">
<label for="import-passwords" i18n-content="importPasswords"></label>
</div> </div>
<div> <div id="import-checkboxes">
<input id="import-search" type="checkbox"> <div i18n-content="importDescription"></div>
<label for="import-search" i18n-content="importSearch"></label> <div>
<input id="import-history" type="checkbox">
<label for="import-history" i18n-content="importHistory"></label>
</div>
<div>
<input id="import-favorites" type="checkbox">
<label for="import-favorites" i18n-content="importFavorites"></label>
</div>
<div>
<input id="import-passwords" type="checkbox">
<label for="import-passwords" i18n-content="importPasswords"></label>
</div>
<div>
<input id="import-search" type="checkbox">
<label for="import-search" i18n-content="importSearch"></label>
</div>
</div> </div>
</div> </div>
<div class="action-area"> <div class="action-area">
<div id="import-throbber" class="throbber"></div> <div class="action-area-right">
<div class="button-strip"> <div id="import-throbber" class="throbber"></div>
<button id="import-data-cancel" i18n-content="cancel"></button> <div class="button-strip">
<button id="import-data-commit" i18n-content="importCommit"></button> <button id="import-data-cancel" i18n-content="cancel"></button>
<button id="import-data-commit" i18n-content="importCommit"></button>
</div>
</div> </div>
</div> </div>
</div> </div>
chrome/browser/resources/options/language_add_language_overlay.html
View file @ e2008834
...@@ -7,10 +7,12 @@ ...@@ -7,10 +7,12 @@
</if> </if>
<if expr="not pp_ifdef('chromeos')"> <if expr="not pp_ifdef('chromeos')">
<h1 i18n-content="add_language_title"></h1> <h1 i18n-content="add_language_title"></h1>
<label> <div class="content-area">
<span i18n-content="add_language_select_label"></span> <label>
<select id="add-language-overlay-language-list"></select> <span i18n-content="add_language_select_label"></span>
</label> <select id="add-language-overlay-language-list"></select>
</label>
</div>
<div class="action-area"> <div class="action-area">
<div class="button-strip"> <div class="button-strip">
<button id="add-language-overlay-cancel-button" i18n-content="cancel"> <button id="add-language-overlay-cancel-button" i18n-content="cancel">
......
chrome/browser/resources/options/language_options.css
View file @ e2008834
...@@ -167,3 +167,7 @@ ...@@ -167,3 +167,7 @@
width: 100px; width: 100px;
height: 30%; height: 30%;
} }
#add-language-overlay-page .content-area {
padding-bottom: 10px;
}
chrome/browser/resources/options/options_page.css
View file @ e2008834
...@@ -84,20 +84,27 @@ html[hide-menu=true] .close-subpage { ...@@ -84,20 +84,27 @@ html[hide-menu=true] .close-subpage {
display: none display: none
} }
.content-area {
padding: 10px 15px 5px 15px;
}
.action-area { .action-area {
-webkit-box-align: center; -webkit-box-align: center;
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
bottom: 0; -webkit-box-pack: end;
border-top: 1px solid rgba(188, 193, 208, .5);
display: -webkit-box; display: -webkit-box;
padding: 12px; padding: 12px;
position: absolute;
right: 0;
} }
html[dir='rtl'] .action-area { html[dir='rtl'] .action-area {
left: 0; left: 0;
} }
.action-area-right {
display: -webkit-box;
}
.button-strip { .button-strip {
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
display: -webkit-box; display: -webkit-box;
...@@ -113,12 +120,12 @@ html[toolkit=views] .button-strip { ...@@ -113,12 +120,12 @@ html[toolkit=views] .button-strip {
} }
.overlay .page { .overlay .page {
-webkit-box-shadow: 3px 3px 3px #666; -webkit-box-shadow: 0px 0px 40px -5px #888;
background: white; background: white;
border: 1px solid #666; border: 1px solid rgb(188, 193, 208);
border-radius: 5px; border-radius: 2px;
min-width: 400px; min-width: 400px;
padding: 0 15px 50px 15px; padding: 0;
position: relative; position: relative;
} }
......
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