[Cosmo-dev] Re: [commits-cosmo] (mde) [2934]
Fixed dueling-stylesheets
issue in login page, removed old Cosmo Ui boilerplating.
Matthew Eernisse
mde at osafoundation.org
Wed Nov 29 15:13:43 PST 2006
Travis,
After the merge of the Scooby code into Cosmo, the login page was
actually a mishmosh of layout from both the Cosmo and Scooby login pages.
The 'dueling stylesheets' issue was the fact that because the Scooby
login code was embedded in a Cosmo standard-layout page, it had both the
old static 'cosmo.css' stylesheet in the standard.jsp boilerplate on top
of the DOM-generated stylesheet from the Scooby UI code. (Actually
because the dynamic CSS code assumed it was the first stylesheet on the
page, it was inserting its rules into the cosmo.css stylesheet, which
made stuff even weirder.)
It has been on my plate since the merge to clean up this problem on the
login page, to have it properly use graphics from the default skin
images directory -- like it did before the merge into Cosmo, and to
return the login to looking like it goes with the rest of the Web UI
(i.e., to the original design we arrived at with input from Priss and Mimi).
The only difference now between the current login layout and the one
from the original Web UI in Scooby is that I've centered the Cosmo logo
because it looked really odd left-aligned, now that the tagline after
the logo is missing. Priscilla or Mimi may have better ideas for how to
deal with that.
As you rightly point out, we don't have a coherent plan for merging the
disparate UI boilerplate stuff between the two codebases, and it's
something we need to figure out -- because basically we're going to have
a number of single-page Ajaxey mini-apps with varying amounts of code
overlap.
Do you have any ideas for how we might want to deal with that?
Matthew
Travis Vachon wrote:
> Hi again
>
> Just realized the reason we're not using <cosmo:standardLayout> is that
> that page is no longer laid out in the stardard way. Was that a PPD
> influenced decision?
>
> If so, I'm totally on board with it, though it might be nice to separate
> some of the dojo related boilerplate into some common spot.
>
> If not, should we be making a change from the standard layout without
> PPD involvement?
>
> Thanks!
>
> -Travis
>
> On Nov 29, 2006, at 1:45 PM, Travis Vachon wrote:
>
>> Matthew-
>>
>> Could you go a little more in depth on the "dueling-stylesheets" issue
>> so it can be avoided in the future as well?
>>
>> Also, why isn't login.jsp using the <cosmo:standardLayout> any more?
>>
>> -Travis
>>
>>> Fixed dueling-stylesheets issue in login page, removed old Cosmo Ui
>>> boilerplating. Fixed logo graphic so it's properly pulled from the
>>> skin image directory. Made dialog box proper modal dialog. Various
>>> minor formatting fixes to widget templates and JS code.
>>> --- cosmo/trunk/src/webapp/WEB-INF/jsp/login.jsp 2006-11-29 04:09:47 UTC (rev 2933)
>>> +++ cosmo/trunk/src/webapp/WEB-INF/jsp/login.jsp 2006-11-29 04:20:25 UTC (rev 2934)
>>> @@ -2,73 +2,77 @@
>>>
>>> <%--
>>> /*
>>> - * Copyright 2006 Open Source Applications Foundation
>>> - *
>>> + * Copyright 2005-2006 Open Source Applications Foundation
>>> + *
>>> * Licensed under the Apache License, Version 2.0 (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.apache.org/licenses/LICENSE-2.0
>>> - *
>>> + *
>>> * Unless required by applicable law or agreed to in writing, software
>>> * distributed under the License is distributed on an "AS IS" BASIS,
>>> * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
>>> * See the License for the specific language governing permissions and
>>> * limitations under the License.
>>> -*/
>>> + */
>>> --%>
>>> +
>>> <%@ include file="/WEB-INF/jsp/taglibs.jsp" %>
>>> <%@ include file="/WEB-INF/jsp/tagfiles.jsp" %>
>>>
>>> -<cosmo:standardLayout prefix="Login." showNav="false">
>>> -<%@ include file="/WEB-INF/jsp/pim/dojo.jsp" %>
>>> +<!DOCTYPE html
>>> + PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
>>> + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
>>>
>>> -
>>> -<cosmo:staticbaseurl var="staticBaseUrl"/>
>>> -<!-- Login page recognition string: login-page-2ksw083judrmru58
>>> - This is an ugly hack to allow the AJAX handler to recognize
>>> - this page. In previous versions of Cosmo, this was done by
>>> - detecting the name of the login.js file, so I'd actually
>>> - call this an improvment.
>>> -
>>> - Authentication in general should be rethought soon.>
>>> -<script type="text/javascript" src="${staticBaseUrl}/i18n.js"></script-->
>>> -<script type="text/javascript" src="${staticBaseUrl}/js/cosmo/ui/ui.conf.js"></script>
>>> -<script type="text/javascript" src="${staticBaseUrl}/js/cosmo/ui/styler.js"></script>
>>> -<script type="text/javascript" src="${staticBaseUrl}/js/cosmo/util/cookie.js"></script>
>>> -<script type="text/javascript" src="${staticBaseUrl}/js/cosmo/util/log.js"></script>
>>> -<script type="text/javascript" src="${staticBaseUrl}/js/cosmo/util/popup.js"></script>
>>> -
>>> -<fmt:setBundle basename="PimMessageResources"/>
>>> -
>>> -<script type="text/javascript" src="${staticBaseUrl}/js/cosmo/ui/global.css.js"></script>
>>> -
>>> -<script type="text/javascript">
>>> -
>>> -dojo.require("cosmo.ui.widget.LoginDialog");
>>> -dojo.require("cosmo.ui.widget.ModalDialog");
>>> -dojo.require("cosmo.account.create");
>>> -
>>> -</script>
>>> -
>>> -<div>
>>> - <div dojoType="cosmo:LoginDialog" widgetId="loginDialog"
>>> - authProc="${staticBaseUrl}/j_acegi_security_check"></div>
>>> -
>>> +<html xmlns="http://www.w3.org/1999/xhtml">
>>> + <head>
>>> + <title>
>>> + <fmt:message key="Login.HeadTitle">
>>> + <c:forEach var="p" items="${TitleParam}">
>>> + <fmt:param value="${p}"/>
>>> + </c:forEach>
>>> + </fmt:message>
>>> + </title>
>>> + <%@ include file="/WEB-INF/jsp/pim/dojo.jsp" %>
>>> + <cosmo:staticbaseurl var="staticBaseUrl"/>
>>> + <!-- Login page recognition string: login-page-2ksw083judrmru58
>>> + This is an ugly hack to allow the AJAX handler to recognize
>>> + this page. In previous versions of Cosmo, this was done by
>>> + detecting the name of the login.js file, so I'd actually
>>> + call this an improvment.
>>> + Authentication in general should be rethought soon. -->
>>> + <script type="text/javascript" src="${staticBaseUrl}/js/cosmo/ui/ui.conf.js"></script>
>>> + <script type="text/javascript" src="${staticBaseUrl}/js/cosmo/ui/styler.js"></script>
>>> + <script type="text/javascript" src="${staticBaseUrl}/js/cosmo/util/cookie.js"></script>
>>> + <script type="text/javascript" src="${staticBaseUrl}/js/cosmo/util/log.js"></script>
>>> + <script type="text/javascript" src="${staticBaseUrl}/js/cosmo/util/popup.js"></script>
>>> + <fmt:setBundle basename="PimMessageResources"/>
>>> + <script type="text/javascript" src="${staticBaseUrl}/js/cosmo/ui/global.css.js"></script>
>>> + <script type="text/javascript">
>>> + dojo.require("cosmo.ui.widget.LoginDialog");
>>> + dojo.require("cosmo.ui.widget.ModalDialog");
>>> + dojo.require("cosmo.account.create");
>>> + </script>
>>> + </head>
>>> + <body>
>>> + <div>
>>> + <div dojoType="cosmo:LoginDialog" widgetId="loginDialog"
>>> + authProc="${staticBaseUrl}/j_acegi_security_check">
>>> + </div>
>>> <div style="padding-top:24px; text-align:center">
>>> - <fmt:message key="Login.NoAccount"/>
>>> + <fmt:message key="Login.NoAccount"/>
>>> </div>
>>> <div style="padding-top:4px; text-align:center">
>>> - <a href="javascript:cosmo.account.create.showForm();">
>>> - <fmt:message key="Login.CreateAccount"/>
>>> - </a>
>>> + <a href="javascript:cosmo.account.create.showForm();">
>>> + <fmt:message key="Login.CreateAccount"/>
>>> + </a>
>>> </div>
>>> <div style="padding-top:36px; text-align:center;">
>>> <a href="javascript:Popup.open('${staticBaseUrl}/help/about', 340, 280);">
>>> <fmt:message key="Login.About"/>
>>> </a>
>>> </div>
>>> -
>>> - </div>
>>> -
>>> -</cosmo:standardLayout>
>>> + </div>
>>> + </body>
>>> +</html>
>>>
>>>
>>> Modified: cosmo/trunk/src/webapp/js/cosmo/account/create.js
>>> (2933 => 2934)
>>>
>>> --- cosmo/trunk/src/webapp/js/cosmo/account/create.js 2006-11-29 04:09:47 UTC (rev 2933)
>>> +++ cosmo/trunk/src/webapp/js/cosmo/account/create.js 2006-11-29 04:20:25 UTC (rev 2934)
>>> @@ -37,11 +37,11 @@
>>> fieldList.push(f);
>>>
>>> f = new Field(_('Signup.Form.FirstName'), 'firstName');
>>> - f.validators = function(elem) { return validateRequired(elem) };
>>> + f.validators = function (elem) { return validateRequired(elem) };
>>> fieldList.push(f);
>>>
>>> f = new Field(_('Signup.Form.LastName'), 'lastName');
>>> - f.validators = function(elem) { return validateRequired(elem) };
>>> + f.validators = function (elem) { return validateRequired(elem) };
>>> fieldList.push(f);
>>>
>>> f = new Field(_('Signup.Form.EMailAddress'), 'email');
>>> @@ -55,7 +55,7 @@
>>> fieldList.push(f);
>>>
>>> f = new Field(_('Signup.Form.ConfirmPassword'), 'confirm', 'password');
>>> - f.validators = function(elem1, elem2) { return (validateRequired(elem1) ||
>>> + f.validators = function (elem1, elem2) { return (validateRequired(elem1) ||
>>> validateConfirmPass(elem1, elem2)) };
>>> fieldList.push(f);
>>>
>>> @@ -100,7 +100,7 @@
>>>
>>> form = createElem('form');
>>> form.id = 'accountSignupForm';
>>> - form.onsubmit = function() { return false; };
>>> + form.onsubmit = function () { return false; };
>>>
>>> table = createElem('table');
>>> body = createElem('tbody');
>>> @@ -131,7 +131,7 @@
>>> elem.id = f.elemName;
>>> elem.maxlength = type == 'text' ? 32 : 16;
>>> elem.size = type == 'text' ? 32 : 16;
>>> - elem.className = 'textInput';
>>> + elem.className = 'inputText';
>>> td.appendChild(elem);
>>>
>>> tr.appendChild(td);
>>> @@ -399,8 +399,16 @@
>>> o.btnsRight = [dojo.widget.createWidget("cosmo:Button",
>>> { text:_('App.Button.Submit'), width:74,
>>> handleOnClick: function () { self.submitCreate(); } })];
>>> - self.dialog = dojo.widget.createWidget('ModalDialog', o,
>>> - document.body, 'last');
>>> +
>>> + // Create the modal dialog widget if needed
>>> + if (!self.dialog) {
>>> + self.dialog = dojo.widget.createWidget('ModalDialog', o,
>>> + document.body, 'last');
>>> + }
>>> + // Or just re-set the props on it
>>> + else {
>>> + for (var p in o) { self.dialog[p] = o[p]; }
>>> + }
>>> self.dialog.show();
>>> };
>>> /**
>> _______________________________________________
>> cosmo-dev mailing list
>> cosmo-dev at lists.osafoundation.org
>> <mailto:cosmo-dev at lists.osafoundation.org>
>> http://lists.osafoundation.org/mailman/listinfo/cosmo-dev
>
>
> ------------------------------------------------------------------------
>
> _______________________________________________
> cosmo-dev mailing list
> cosmo-dev at lists.osafoundation.org
> http://lists.osafoundation.org/mailman/listinfo/cosmo-dev
More information about the cosmo-dev
mailing list