On Thu, Apr 15, 2010 at 6:09 PM, Adi Roiban <email address hidden> wrote:
> On Wed, 2010-04-14 at 07:38 +0000, Michael Nelson wrote:
> [snip]
>> Thanks Paul and Adi. And thanks Adi for the detailed MP with demo
>> steps :)
>>
>> Adi, when I click on the help text, it never finishes loading (as in
>> the spinner never disappears). Not sure why, but it certainly
>> disappears when I click on help text in other pages.
>
> I have no idea why the spinner is still there.
> Is there any documentation about how should I use the help popup?
>
> I only added "help" class to the link. Is there anything else I need to
> do?

I'm not certain, but it could be because of the css links you've got
in your help htmt... they seem slighly different from the other pages
I've checked? (The two templates I checked both used:
href="/+icing/yui/cssreset/reset.css" rather than
"/+icing/yui/current/build/cssreset/reset.css" in your template?).

>
>> The simple functionality works really well! Thanks for ensuring that
>> it works not just on page load, but also when the translation is
>> deleted and re-started.
>>
>> I've just got one small suggested behaviour change: I noticed that
>> you've added the js-action to the template itself... it may be that
>> this has been done elsewhere too, but if it's not a big change, it
>> would be great instead to progressively enhance the page to this
>> feature... that is:
>>
>> 1) If js is not switched on, then the template itself simply renders
>> the span with the default text "You are in blah mode" (and it won't be
>> a link etc.)
> I was not sure if LP interface is supposed to be used on browsers
> without JS.
> Done :)

Great, thanks. We certainly try to use progressive enhancement
wherever possible, so that the UI makes sense and functions with or
without JS.

>
>> 2) When the js on the page loads, it will add the "sprite edit
>> js-action" classes to the node (which changes the way it is
>> displayed), and as it does now, link the on click event, and update
>> the content to say "Enter ...". (BTW: is there any reason for the
>> widget-hd class you've got there currently? it's usually used for
>> widgets with header+body, like the slideout stuff).
> Done.

Excellent.

>
> I would like to removed the widget-hd class... but js-action class will
> not set the proper style.
> I looked in the CSS file and the css selector for js-action was
> ".widget-hd.js-action".
> This is why I added the widget-hd class.
>
> Without the widget-hd class, I will have to add some more code to the
> CSS file.
>
> This is the current style.css
>
> /* The js-action class is also used for non-links, for example, with
>  * expand/collapse sections. */
> .widget-hd.js-action {color: #093; cursor:pointer}
> .widget-hd.js-action:hover {text-decoration: underline;}

OK, at first I thought the CSS should be changed to generalise these
rules, but then noticed that the styling is defined for a.js-action
(and the pointer is default of course for a link), which made me think
a bit more. I think the best solution would be to ensure that you
replace the WORKING_MODE_SWITCH_ID node with an anchor (semantically,
that's correct as it's clickable), and then adding the .js-action
class on its own will style it correctly?

Give that a try, if it works I think it's the best solution for the
moment (although it may be also that we should generalise the css
rules, but we need to do that carefully).

Thanks Adi!


> === modified file 'lib/lp/translations/templates/translations-macros.pt'
> --- lib/lp/translations/templates/translations-macros.pt        2010-04-13
> 17:54:56 +0000
> +++ lib/lp/translations/templates/translations-macros.pt        2010-04-15
> 16:00:49 +0000
> @@ -127,13 +127,10 @@
>             tal:condition="link/enabled"
>             tal:content="structure link/render"></li>
>         <li tal:condition="view/user_is_official_translator">
> -          <span id="translation-switch-working-mode"
> -                class="sprite edit js-action widget-hd">
> -            Enter translator mode
> +          <span id="translation-switch-working-mode">
> +            You are in revier mode.

As Danilo pointed out ^^^.