Working on a new theme....

[Guido1982]

I've started work on a new theme. Now I'd also like to incorporate some autocomplete functionality. Now I'd like some advice on how to do this as best as we can so that this can be integrated into the app. At first I tried just copying the standard 'softed' theme and modifting CSS. This works fine, but ir won't allow you to set new scripts in the head. So now I'm thinking about creating the theme as a module, which will allow me to register new head links. The third option is, I create commits on my github fork that can be implemented in the app no matter which theme is chosen, so that the functionality will always be available. The question is, which do you prefer?

[joebordes]

Hi,

This is good news, it is something many people ask about. Let me try to give you my point of view.

Autocomplete functionality has nothing to with the template, it should work on all templates. That means that it is a feature of the uitype not the theme. I understand that there are only a few uitypes that need this functionality (10 and a few custom capture uitypes). So I think you should be looking at enhancing the uitypes indenpendently of the template.

Now, before going about that we have a few show stoppers.

The current way that I want to take the application is using native javascript as much as possible and jquery second. I leave advanced angularjs, react and other frameworks for external satellite apps.

So to get the autocomplete working you should find a jquery autocomplete library and add that functionality to the uitype. When you do that you will run into the need of updating the jquery version, which will take you to eliminating prototype. This is why it hasn't been done yet.

We have a whole branch with this done already (kindly created by Edlira on her spare time!!). What I need to move all the code over and start working with that version is to validate it. For that I would like to create some tests and start the unit test project and validate the extensions, specially PDFMaker.

saidmsl is already working on this branch and has reported success.

As to the theme itself, keep it independent of coding, just do images and CSS

So, in short:
- autocomplete: direct uitype enhancement, better done on the jquery branch
- theme: CSS and images as much as possible

[Guido1982]

I completely agree about a theme not being about adding autocomplete. I was thinking in the direction of adding an extension module, that included the installation of a theme. But maybe this is not the way to go. One thing I want for the theme is to use a better font. I've been experimenting with the Ubuntu open sans font, since I think the currently used fonts are just too hard on the eyes considering this is an application people use all day long. For this, I'm reluctant to use @font-face, since it's blocking. Sure, only untill it is browser-cached, when you setup htaccess correctly but still I prefer a pure javascript solution that appends the font inclusion script after the window is loaded. There's a small gap (the font-flicker), but in this case I tend to prefer speed over esthetics. Anyway, because I'd like to use some javascript, I was thinking about writing an extension, but again: maybe this is not the way to go.

I also agree on relying on native javascript. I'm a lot better at jQuery, but in general, every jQuery functionality is slower and the current javascript specs are showing good promise of becoming less verbose. But frankly, I don't see why we couldn't write our own javascript autocomplete. After all, it is a jQuery plugin, and jQuery is nothing more than a javascript library. So it should be possible. I will investigate this, but yes, it should be separated from the theme.

I will report as soon as I have some work done that is worth testing.

[Guido1982]

As I'm working on the theme, I see a lot of possibilities to improve UX in general, just by moving some buttons and modifying some TPL files. I think I will first create the theme as-is (which will only require my 'updateCSS' and 'updateJS' branches, which are backwards compatible). As soon as it is tested by some people and the main problems are out, I'd like to start a new branch to start some UX tweaking.

[joebordes]

Looking forward to seeing !!
Have a nice weekend

[Guido1982]

Just so everyone knows, I've been extremely busy, but whenever I can I still make some progress on this: it's not abandoned.

[joebordes]

I think we all fully understand and it is good to know you are busy :-D

[Guido1982]

Okay, I have the theme as far as an early BETA stage. I'd like for you to take a look and let me know what you think. In order to do this I need some help, since I'm still no GIT hero (a bit better, not quite there).

I have a fork that's up to date with the master branch from tsolucio. That fork has two branches called updateCSS and updateJS. They are needed to make the theme work. They basically add some classes and id's mostly, while the updateJS branch updates some JS to better place pop-ups independant of the theme in stead of hardcoding positions. Now I have to create a pull request from each branch, but they're not up to date with the tsolucio master (or my forks master) yet. Will I need to update these branches from my master? I'm afraid of doing this since I don't want my changes to be overwritten.

The theme itself can be found here, but don't try it without the CSS and JS changes (especially the CSS ones), since it will not work properly (or at all).

[joebordes]

Hi,

Sorry for the delay on this one. I accepted the PR for these two branches but I had to manually merge the changes. I tried to explain the process on the github PR and also asked you a question about the label attribute on select boxes.

Keep asking whatever you need.

Now we should be ready to test the theme. There is just one change, coreBOS master branch has already added an ID on the action column in the detail view because we added the possibility to hide/show that column using a button and also as a default option per module and user using a global variable. You will have to change that in your theme's CSS.

[joebordes]

I tried the theme and I really like what I see. It looks clean, elegant and a little more modern. I like some of the border effects a lot.

I created some issues on your github project so you can attend when you have some time.

Thanks for the effort !!