Hi Tony and list,<div><br></div><div>I'm using your TFLogin package and must say it's a very useful piece of work. Every app I coded needed most features yor package provides, and it's really convenient to have them ready made.</div>
<div><br></div><div>However, it is almost impossible to style its components because of inconsistencies in CSS classes and IDs, some components even have styles hardcoded in the rendering methods, which makes the styling process very tiresome for a designer. In some cases there's no other solution but to change the Smalltalk code or to use really ugly CSS/JS hacks. I really like your package, but I think a good refactoring focusing on breaking huge methods into smaller ones and structuring elements into divs and spans with their IDs and classes where needed would make it much easily pluggable.</div>
<div><br></div><div>An example:</div><div><br></div><div><i>TLRegisterComponent >> renderContentOn:</i></div><div><i><br></i></div><div><i>(...)</i></div><div><div><i>self useRecaptchaInRegistrationForm ifTrue: [</i></div>
<div><i><span class="Apple-tab-span" style="white-space:pre"> </span>html tableRow: [</i></div><div><i><span class="Apple-tab-span" style="white-space:pre"> </span>html tableData </i></div><div><i><span class="Apple-tab-span" style="white-space:pre"> </span>colSpan: 2;</i></div>
<div><i><span class="Apple-tab-span" style="white-space:pre"> </span>style: 'padding: 10px;'; <b>"This should be the designer's choice, not the programmer's"</b></i></div><div><i><span class="Apple-tab-span" style="white-space:pre"> </span>id: 'registercaptcha';</i></div>
<div><i><span class="Apple-tab-span" style="white-space:pre"> </span>with: captchaComponent]].</i></div><i>(...)</i></div><div><br></div><div>Another example:</div><div><br></div><div><i>TFForgotPasswordComponent >> renderContentOn:</i></div>
<div><i><br></i></div><div><div><i><span class="Apple-tab-span" style="white-space:pre"> </span>html form</i></div><div><i><span class="Apple-tab-span" style="white-space:pre"> </span>class: 'forgotpasswordform';</i></div>
<div><i><span class="Apple-tab-span" style="white-space:pre"> </span>with: [ </i></div><div><i><span class="Apple-tab-span" style="white-space:pre"> </span>html text: 'Enter your username below and we will send an email message to you that will allow you to set a new password.'; break. <b> "It is impossible for a designer to add a vertical space between these two lines, as there are no divs or spans defined and the br element doesn't allow almost any styling. Even using a paragraph would work better"</b></i></div>
<div><i><span class="Apple-tab-span" style="white-space:pre"> </span>html text: 'Username '.</i></div><div><i><span class="Apple-tab-span" style="white-space:pre"> </span>html textInput</i></div><div><i><span class="Apple-tab-span" style="white-space:pre"> </span>id: 'forgotpasswordusername';</i></div>
<div><i><span class="Apple-tab-span" style="white-space:pre"> </span>callback: [ :v |</i></div><div><i><span class="Apple-tab-span" style="white-space:pre"> </span>self sendEmail: v ].</i></div><div><i><span class="Apple-tab-span" style="white-space:pre"> </span>html break. </i></div>
<div><i><span class="Apple-tab-span" style="white-space:pre"> </span>html button</i></div><div><i><span class="Apple-tab-span" style="white-space:pre"> </span>id: 'forgotpasswordokbtn';</i></div><div><i><span class="Apple-tab-span" style="white-space:pre"> </span>callback: [</i></div>
<div><i><span class="Apple-tab-span" style="white-space:pre"> </span>self answer ];</i></div><div><i><span class="Apple-tab-span" style="white-space:pre"> </span>with: 'Ok']</i></div></div><div><br></div><div>
I hope you consider these suggestions as constructive criticism, if you need help refactoring or deciding what the CSS structure should look like please do not hesitate contacting me, I'll be glad to help :)</div><div>
<br></div><div>Cheers,</div><div><br></div><div>Bernat Romagosa.</div>