From 18238432f2bf90f053005998d7db7bfc0e0c6f14 Mon Sep 17 00:00:00 2001 From: "bryner%netscape.com" Date: Thu, 21 Mar 2002 09:16:17 +0000 Subject: [PATCH] Implement HTML radio button in XBL (bug 112715). r=pavlov, sr=ben, a=brendan. --- layout/forms/resources/content/radio.xml | 53 +++++++++++++ layout/forms/resources/content/xbl-forms.css | 14 +++- layout/forms/resources/jar.mn | 4 + .../forms/resources/skin/radio-check-dis.gif | Bin 0 -> 46 bytes layout/forms/resources/skin/radio-check.gif | Bin 0 -> 46 bytes layout/forms/resources/skin/radio.css | 75 ++++++++++++++++++ layout/html/forms/resources/content/radio.xml | 53 +++++++++++++ .../forms/resources/content/xbl-forms.css | 14 +++- layout/html/forms/resources/jar.mn | 4 + .../forms/resources/skin/radio-check-dis.gif | 0 .../html/forms/resources/skin/radio-check.gif | 0 layout/html/forms/resources/skin/radio.css | 75 ++++++++++++++++++ 12 files changed, 286 insertions(+), 6 deletions(-) create mode 100644 layout/forms/resources/content/radio.xml create mode 100644 layout/forms/resources/skin/radio-check-dis.gif create mode 100644 layout/forms/resources/skin/radio-check.gif create mode 100644 layout/forms/resources/skin/radio.css create mode 100644 layout/html/forms/resources/content/radio.xml create mode 100644 layout/html/forms/resources/skin/radio-check-dis.gif create mode 100644 layout/html/forms/resources/skin/radio-check.gif create mode 100644 layout/html/forms/resources/skin/radio.css diff --git a/layout/forms/resources/content/radio.xml b/layout/forms/resources/content/radio.xml new file mode 100644 index 0000000000000..5106f4c2f06b0 --- /dev/null +++ b/layout/forms/resources/content/radio.xml @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + diff --git a/layout/forms/resources/content/xbl-forms.css b/layout/forms/resources/content/xbl-forms.css index 5f35bba4ee8a0..6f7c14d4c52ae 100644 --- a/layout/forms/resources/content/xbl-forms.css +++ b/layout/forms/resources/content/xbl-forms.css @@ -84,9 +84,9 @@ xul|*.select-menupopup { display:-moz-popup!important; } -input[type="checkbox"] { - -moz-binding: url("chrome://forms/content/checkbox.xml#checkbox"); - display: -moz-box; +input[type="checkbox"], +input[type="radio"] { + display: -moz-inline-box; margin: 3px 3px 3px 4px; /* override these values from the input rule */ @@ -101,6 +101,14 @@ input[type="checkbox"] { -moz-box-sizing: border-box; } +input[type="checkbox"] { + -moz-binding: url("chrome://forms/content/checkbox.xml#checkbox"); +} + +input[type="radio"] { + -moz-binding: url("chrome://forms/content/radio.xml#radio"); +} + button { -moz-binding: url("chrome://forms/content/button.xml#button"); -moz-box-sizing: border-box; diff --git a/layout/forms/resources/jar.mn b/layout/forms/resources/jar.mn index b3912c2a5e6ae..162f7d586f320 100644 --- a/layout/forms/resources/jar.mn +++ b/layout/forms/resources/jar.mn @@ -4,16 +4,20 @@ forms.jar: content/forms/select.xml (content/select.xml) content/forms/checkbox.xml (content/checkbox.xml) content/forms/button.xml (content/button.xml) + content/forms/radio.xml (content/radio.xml) skin/classic/forms/button.css (skin/button.css) skin/classic/forms/checkbox.css (skin/checkbox.css) skin/classic/forms/contents.rdf (skin/contents.rdf) skin/classic/forms/forms.css (skin/forms.css) + skin/classic/forms/radio.css (skin/radio.css) skin/classic/forms/select.css (skin/select.css) skin/classic/forms/select-dropdown.css (skin/select-dropdown.css) skin/classic/forms/arrow-dn-dis.gif (skin/arrow-dn-dis.gif) skin/classic/forms/arrow-dn.gif (skin/arrow-dn.gif) skin/classic/forms/cbox-check-dis.gif (skin/cbox-check-dis.gif) skin/classic/forms/cbox-check.gif (skin/cbox-check.gif) + skin/classic/forms/radio-check-dis.gif (skin/radio-check-dis.gif) + skin/classic/forms/radio-check.gif (skin/radio-check.gif) en-US.jar: locale/en-US/forms/contents.rdf (locale/en-US/contents.rdf) diff --git a/layout/forms/resources/skin/radio-check-dis.gif b/layout/forms/resources/skin/radio-check-dis.gif new file mode 100644 index 0000000000000000000000000000000000000000..5e9a1cb01431f2c37ce8a759fc34b2e284c1c7ff GIT binary patch literal 46 ycmZ?wbhEHbWMN=oXkcJyXlVHV|G(l-7DfgJMg|=QAOOiQFtPF^ET108U=08ar3ya) literal 0 HcmV?d00001 diff --git a/layout/forms/resources/skin/radio-check.gif b/layout/forms/resources/skin/radio-check.gif new file mode 100644 index 0000000000000000000000000000000000000000..26aa14026a6d6b4ba0f54196940f341c596a0e76 GIT binary patch literal 46 vcmZ?wbhEHbWMN=oXkY+=|Ns9h{$ycfU|?j>0r5dH3{0#%3CpJkGFSru+?EKx literal 0 HcmV?d00001 diff --git a/layout/forms/resources/skin/radio.css b/layout/forms/resources/skin/radio.css new file mode 100644 index 0000000000000..c3dde5bdbc71e --- /dev/null +++ b/layout/forms/resources/skin/radio.css @@ -0,0 +1,75 @@ +/* + * The contents of this file are subject to the Netscape Public + * License Version 1.1 (the "License"); you may not use this file + * except in compliance with the License. You may obtain a copy of + * the License at http://www.mozilla.org/NPL/ + * + * Software distributed under the License is distributed on an "AS + * IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or + * implied. See the License for the specific language governing + * rights and limitations under the License. + * + * The Original Code is Mozilla Communicator client code, released + * March 31, 1998. + * + * The Initial Developer of the Original Code is Netscape + * Communications Corporation. Portions created by Netscape are + * Copyright (C) 1998-1999 Netscape Communications Corporation. All + * Rights Reserved. + * + * Contributor(s): + * + */ + +/* ===== radio.css =================================================== + == Styles used by the XUL radio element. + ======================================================================= */ + +@namespace url(http://www.w3.org/1999/xhtml); + +/* ..... disabled state ..... */ + +input[type="radio"][disabled="true"] { + background-color: -moz-Dialog; +} + +/* ::::: checkmark image ::::: */ + +input[type="radio"] { +/* -moz-appearance: radio; */ + margin: 1px 0px; + border-top: 1px solid ThreeDShadow; + border-right: 1px solid ThreeDHighlight; + border-bottom: 1px solid ThreeDHighlight; + border-left: 1px solid ThreeDShadow; + -moz-border-radius: 50%; + width: 12px; + height: 12px; + background-color: -moz-Field; +} + +.input-radio-check-box2 { + border-top: 1px solid ThreeDDarkShadow; + border-right: 1px solid ThreeDLightShadow; + border-bottom: 1px solid ThreeDLightShadow; + border-left: 1px solid ThreeDDarkShadow; + -moz-border-radius: 50%; + padding: 2px; + width: 4px; + height: 4px; + list-style-image: none; +} + +input[type="radio"]:hover:active { + background-color: -moz-Dialog; +} + +/* ..... selected state ..... */ + +input[type="radio"]:checked > .input-radio-check-box2 { + list-style-image: url("chrome://forms/skin/radio-check.gif"); +} + +input[type="radio"][disabled="true"]:checked { + list-style-image: url("chrome://forms/skin/radio-check-dis.gif") !important +} diff --git a/layout/html/forms/resources/content/radio.xml b/layout/html/forms/resources/content/radio.xml new file mode 100644 index 0000000000000..5106f4c2f06b0 --- /dev/null +++ b/layout/html/forms/resources/content/radio.xml @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + diff --git a/layout/html/forms/resources/content/xbl-forms.css b/layout/html/forms/resources/content/xbl-forms.css index 5f35bba4ee8a0..6f7c14d4c52ae 100644 --- a/layout/html/forms/resources/content/xbl-forms.css +++ b/layout/html/forms/resources/content/xbl-forms.css @@ -84,9 +84,9 @@ xul|*.select-menupopup { display:-moz-popup!important; } -input[type="checkbox"] { - -moz-binding: url("chrome://forms/content/checkbox.xml#checkbox"); - display: -moz-box; +input[type="checkbox"], +input[type="radio"] { + display: -moz-inline-box; margin: 3px 3px 3px 4px; /* override these values from the input rule */ @@ -101,6 +101,14 @@ input[type="checkbox"] { -moz-box-sizing: border-box; } +input[type="checkbox"] { + -moz-binding: url("chrome://forms/content/checkbox.xml#checkbox"); +} + +input[type="radio"] { + -moz-binding: url("chrome://forms/content/radio.xml#radio"); +} + button { -moz-binding: url("chrome://forms/content/button.xml#button"); -moz-box-sizing: border-box; diff --git a/layout/html/forms/resources/jar.mn b/layout/html/forms/resources/jar.mn index b3912c2a5e6ae..162f7d586f320 100644 --- a/layout/html/forms/resources/jar.mn +++ b/layout/html/forms/resources/jar.mn @@ -4,16 +4,20 @@ forms.jar: content/forms/select.xml (content/select.xml) content/forms/checkbox.xml (content/checkbox.xml) content/forms/button.xml (content/button.xml) + content/forms/radio.xml (content/radio.xml) skin/classic/forms/button.css (skin/button.css) skin/classic/forms/checkbox.css (skin/checkbox.css) skin/classic/forms/contents.rdf (skin/contents.rdf) skin/classic/forms/forms.css (skin/forms.css) + skin/classic/forms/radio.css (skin/radio.css) skin/classic/forms/select.css (skin/select.css) skin/classic/forms/select-dropdown.css (skin/select-dropdown.css) skin/classic/forms/arrow-dn-dis.gif (skin/arrow-dn-dis.gif) skin/classic/forms/arrow-dn.gif (skin/arrow-dn.gif) skin/classic/forms/cbox-check-dis.gif (skin/cbox-check-dis.gif) skin/classic/forms/cbox-check.gif (skin/cbox-check.gif) + skin/classic/forms/radio-check-dis.gif (skin/radio-check-dis.gif) + skin/classic/forms/radio-check.gif (skin/radio-check.gif) en-US.jar: locale/en-US/forms/contents.rdf (locale/en-US/contents.rdf) diff --git a/layout/html/forms/resources/skin/radio-check-dis.gif b/layout/html/forms/resources/skin/radio-check-dis.gif new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/layout/html/forms/resources/skin/radio-check.gif b/layout/html/forms/resources/skin/radio-check.gif new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/layout/html/forms/resources/skin/radio.css b/layout/html/forms/resources/skin/radio.css new file mode 100644 index 0000000000000..c3dde5bdbc71e --- /dev/null +++ b/layout/html/forms/resources/skin/radio.css @@ -0,0 +1,75 @@ +/* + * The contents of this file are subject to the Netscape Public + * License Version 1.1 (the "License"); you may not use this file + * except in compliance with the License. You may obtain a copy of + * the License at http://www.mozilla.org/NPL/ + * + * Software distributed under the License is distributed on an "AS + * IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or + * implied. See the License for the specific language governing + * rights and limitations under the License. + * + * The Original Code is Mozilla Communicator client code, released + * March 31, 1998. + * + * The Initial Developer of the Original Code is Netscape + * Communications Corporation. Portions created by Netscape are + * Copyright (C) 1998-1999 Netscape Communications Corporation. All + * Rights Reserved. + * + * Contributor(s): + * + */ + +/* ===== radio.css =================================================== + == Styles used by the XUL radio element. + ======================================================================= */ + +@namespace url(http://www.w3.org/1999/xhtml); + +/* ..... disabled state ..... */ + +input[type="radio"][disabled="true"] { + background-color: -moz-Dialog; +} + +/* ::::: checkmark image ::::: */ + +input[type="radio"] { +/* -moz-appearance: radio; */ + margin: 1px 0px; + border-top: 1px solid ThreeDShadow; + border-right: 1px solid ThreeDHighlight; + border-bottom: 1px solid ThreeDHighlight; + border-left: 1px solid ThreeDShadow; + -moz-border-radius: 50%; + width: 12px; + height: 12px; + background-color: -moz-Field; +} + +.input-radio-check-box2 { + border-top: 1px solid ThreeDDarkShadow; + border-right: 1px solid ThreeDLightShadow; + border-bottom: 1px solid ThreeDLightShadow; + border-left: 1px solid ThreeDDarkShadow; + -moz-border-radius: 50%; + padding: 2px; + width: 4px; + height: 4px; + list-style-image: none; +} + +input[type="radio"]:hover:active { + background-color: -moz-Dialog; +} + +/* ..... selected state ..... */ + +input[type="radio"]:checked > .input-radio-check-box2 { + list-style-image: url("chrome://forms/skin/radio-check.gif"); +} + +input[type="radio"][disabled="true"]:checked { + list-style-image: url("chrome://forms/skin/radio-check-dis.gif") !important +}