Skip to content

GitLab

T
tangled
Commit 3bbabb5a authored by estade@chromium.org's avatar estade@chromium.org
Browse files
Options

convert options and bug reporter to chromey checkboxes 

BUG=103688
TEST=manual


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

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@110462 0039d316-1c4b-4281-b951-d872f2087c98
parent 2e1c3925
Hide whitespace changes
Inline Side-by-side
Showing with 58 additions and 85 deletions
chrome/browser/resources/bug_report.html
View file @ 3bbabb5a
......@@ -5,6 +5,7 @@
<title i18n-content="page-title"></title>
<!-- We want to keep our style in sync with the options page. -->
<link rel="stylesheet" href="chrome://resources/css/button.css">
<link rel="stylesheet" href="chrome://resources/css/checkbox.css">
<link rel="stylesheet" href="chrome://resources/css/select.css">
<link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
<link rel="stylesheet" href="bug_report.css">
......@@ -61,10 +62,12 @@
<table class="bug-report-table">
<tr>
<td class="bug-report-fieldlabel">
<input id="page-url-checkbox" type="checkbox"
value="pageurl" checked>
<span id="page-url-label" i18n-content="page-url">
</span>
<label>
<input id="page-url-checkbox" type="checkbox"
value="pageurl" checked>
<span id="page-url-label"
i18n-content="page-url"></span>
</label>
</td>
<td>
<input id="page-url-text" class="bug-report-field"
......@@ -81,10 +84,12 @@
<table id="user-email-table" class="bug-report-table">
<tr>
<td class="bug-report-fieldlabel">
<input id="user-email-checkbox" type="checkbox"
checked>
<span id="user-email-label"
i18n-content="user-email"></span>
<label>
<input id="user-email-checkbox" type="checkbox"
checked>
<span id="user-email-label"
i18n-content="user-email"></span>
</label>
</td>
<td>
<label id="user-email-text"
......@@ -100,12 +105,14 @@
<table class="bug-report-table">
<tr>
<td class="bug-report-fieldlabel">
<input id="sys-info-checkbox" type="checkbox"
checked>
<span id="sysinfo-label">
<a id="sysinfo-url" href="#"
i18n-content="sysinfo"></a>
</span>
<label>
<input id="sys-info-checkbox" type="checkbox"
checked>
<span id="sysinfo-label">
<a id="sysinfo-url" href="#"
i18n-content="sysinfo"></a>
</span>
</label>
</td>
</tr>
</table>
......@@ -118,10 +125,11 @@
<table class="bug-report-table">
<tr>
<td class="bug-report-fieldlabel">
<input id="screenshot-checkbox" type="checkbox">
<span id="screenshot-label-current"
i18n-content="current-screenshot">
</span>
<label>
<input id="screenshot-checkbox" type="checkbox">
<span id="screenshot-label-current"
i18n-content="current-screenshot"></span>
</label>
<if expr="pp_ifdef('chromeos')">
<span id="screenshot-label-saved"
style="display: none;"
......
chrome/browser/resources/options/advanced_options.css
View file @ 3bbabb5a
......@@ -27,10 +27,6 @@
min-width: 470px;
}
#promptForDownload {
margin-bottom: 10px;
}
#fontSettingsCustomizeFontsButton,
#privacyClearDataButton {
margin-left: 10px;
......
chrome/browser/resources/options/advanced_options.html
View file @ 3bbabb5a
......@@ -166,7 +166,7 @@
</div>
<div class="checkbox">
<label>
<input id="promptForDownload" type="checkbox"
<input type="checkbox"
pref="download.prompt_for_download"
metric="Options_AskForSaveLocation">
<span i18n-content="downloadLocationAskForSaveLocation"></span>
......
chrome/browser/resources/options/options.html
View file @ 3bbabb5a
......@@ -8,6 +8,7 @@
<link rel="icon" href="../../../app/theme/settings_favicon.png">
<link rel="stylesheet" href="chrome://resources/css/button.css">
<link rel="stylesheet" href="chrome://resources/css/checkbox.css">
<link rel="stylesheet" href="chrome://resources/css/list.css">
<link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
<link rel="stylesheet" href="chrome://resources/css/select.css">
......
chrome/browser/resources/options/options_page.css
View file @ 3bbabb5a
......@@ -540,7 +540,7 @@ html[os=mac] list[hasElementFocus] {
}
.suboption {
-webkit-margin-start: 16px;
-webkit-margin-start: 23px;
}
.informational-text {
......
chrome/browser/resources/shared/css/checkbox.css
View file @ 3bbabb5a
......@@ -8,7 +8,7 @@ input[type='checkbox'] {
0 1px 2px rgba(0, 0, 0, .2);
-webkit-appearance: none;
-webkit-margin-start: 0;
-webkit-margin-end: 5px;
-webkit-margin-end: 3px;
background: -webkit-linear-gradient(#fafafa, #dcdcdc);
border-radius: 3px;
border: 1px solid #a0a0a0;
......@@ -26,12 +26,12 @@ input[type='checkbox']:disabled {
opacity: .75;
}
input[type='checkbox']:not(:disabled):not(.disabled):not(:active):hover {
input[type='checkbox']:not(:disabled):not(:active):hover {
background: -webkit-linear-gradient(#fff, #e6e6e6);
text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
}
input[type='checkbox']:active {
input[type='checkbox']:not(:disabled):active {
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
background: -webkit-linear-gradient(#f0f0f0, #bebebe);
border: 1px solid #808080;
......@@ -55,7 +55,7 @@ input[type='radio'] {
0 1px 2px rgba(0, 0, 0, .2);
-webkit-appearance: none;
-webkit-margin-start: 0;
-webkit-margin-end: 5px;
-webkit-margin-end: 3px;
-webkit-transition: border 500ms;
background: -webkit-linear-gradient(#fafafa, #dcdcdc);
border-radius: 100%;
......@@ -64,7 +64,7 @@ input[type='radio'] {
height: 15px;
margin-top: 0;
position: relative;
top: 2px;
top: 3px;
vertical-align: baseline;
width: 15px;
}
......@@ -73,12 +73,12 @@ input[type='radio']:disabled {
opacity: .75;
}
input[type='radio']:not(:disabled):not(.disabled):not(:active):hover {
input[type='radio']:not(:disabled):not(:active):hover {
background: -webkit-linear-gradient(#fff, #e6e6e6);
text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
}
input[type='radio']:active {
input[type='radio']:not(:disabled):active {
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
background: -webkit-linear-gradient(#f0f0f0, #bebebe);
border: 1px solid #808080;
......@@ -124,3 +124,13 @@ input[type='radio']:not(.custom-appearance):focus {
border-color: #4080fa;
outline: none;
}
label:hover > input[type=checkbox]:disabled ~ span,
label:hover > input[type=radio]:disabled ~ span {
color: #888;
}
label:hover > input[type=checkbox]:not(:disabled) ~ span,
label:hover > input[type=radio]:not(:disabled) ~ span {
color: #222;
}
chrome/browser/resources/shared/css/chrome_shared.css
View file @ 3bbabb5a
......@@ -125,12 +125,6 @@ html.hide-menu #mainview {
padding: 0 24px;
}
div.checkbox,
div.radio {
margin: 5px 0;
color: #444;
}
div.disabled {
color: #888;
}
......@@ -146,57 +140,21 @@ input:not([type]) {
padding: 3px;
}
input[type='text']:disabled {
color: #888;
}
/* CHECKBOX, RADIO */
/* TODO(estade): all of this should be merged into checkbox.css and then we can
* remove the print-preview hack. */
html:not(#print-preview) input[type=checkbox],
html:not(#print-preview) input[type=radio] {
margin-left: 0;
margin-right: 0;
position: relative;
top: 1px;
}
/* Checkbox and radio buttons have different sizes on different platforms. The
* following rules have platform specific tweaks.
* TODO(arv): Test the vertical position on Linux and CrOS as well.
*/
html:not(#print-preview) label > input[type=checkbox],
html:not(#print-preview) label > input[type=radio] {
opacity: 0.7;
margin-top: 1px;
}
html[os=mac]:not(#print-preview) label > input[type=checkbox],
html[os=mac]:not(#print-preview) label > input[type=radio] {
margin-top: 2px;
}
html[os=chromeos]:not(#print-preview) label > input[type=checkbox],
html[os=chromeos]:not(#print-preview) label > input[type=radio] {
top: 2px;
}
/* Checkbox and radio hover visuals.
* Their appearance when checked is set to be the same.
*/
label:hover:not(#print-preview) > input[type=checkbox]:not([disabled]),
label:hover:not(#print-preview) > input[type=radio]:not([disabled]),
label:not(#print-preview) > input:not([disabled]):checked {
opacity: 1;
}
label:hover:not(#print-preview) > input[type=checkbox]:not([disabled]) ~ span,
label:hover:not(#print-preview) > input[type=radio]:not([disabled]) ~ span,
label:not(#print-preview) > input:not([disabled]):checked ~ span {
color: #222;
div.checkbox,
div.radio {
margin: 5px 0;
}
/* This will 'disable' the label associated with any input whose next sibling is
* the span containing the label (usually a checkbox or radio).
*/
label:not(#print-preview) > input[disabled] ~ span {
color: #888;
input[type=radio] ~ span,
input[type=checkbox] ~ span {
color: #444;
}
/* Elements that need to be LTR even in an RTL context, but should align
......@@ -212,8 +170,8 @@ html[dir='rtl'] .weakrtl {
* on some), the class needs to be on the enclosing div.
*/
html[dir='rtl'] div.weakrtl input {
direction: ltr;
text-align: right;
direction: ltr;
text-align: right;
}
html[dir='rtl'] .favicon-cell.weakrtl {
......
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