UI restyling with Bootstrap

[daN4cat]

The current ospos is functional but looks "old days". The new login form follows newer web app design trends in line with Bootstrap and similar, but the rest of the application is not and would really benefit from a restyling.

[marteserede]

I agree with you. Unfortunately I am not into Web UI Design neither and I also think that there are more important things... although a redesign would probably include making ospos responsive which would make it much easier to use it on a tablet or even a phone if possible...

[jekkos]

Some first UI design improvements can be found in #226 (currently to be reviewed)

[angelscabrerag]

Hi, can i contribute to the project? i help with UI design by boostrap framework... and make it responsive and a better look

[daN4cat]

More than welcome and if you check #226 you can find already some work done to leverage bootstrap. If you build on top of that it would be probably quicker?

[jekkos]

There's still some open points to improve in that PR. Maybe you can look into those?

[angelscabrerag]

Hi, i'll chek https://github.com/jekkos/opensourcepos/pull/226 and make some test on it, i will keep you updated. Thanks!

[angelscabrerag]

Yes, I will review

[daN4cat]

@angelcabrera Just wondering if you had time to look into this. It would be nice to have a restyling in 2.4.

[daN4cat]

I have a branch called bootstrapUI which contains the bootstrap changes and it's based on Code Igniter 3.0.3 (branch ci3).

[odiea]

@daN4cat Have you found a css solution to prevent the top bar from printing on the receipt? I have Cerulean as my template but can't find a way to prevent that from printing.

[daN4cat]

Well, all this UI restyling needs more work.

[odiea]

Adding this to style.css will change the page font size. You can adjust as needed. I did not like the default font size.

• { font-size: 12px; line-height: 1.5; }

[odiea]

What I ended up doing was copying all ospos css to template css and made color changes there. I made new small and big buttons and it looks ok without changing the ospos look when I reverted back to the original look. I also changed the href in template /partial /header to point to this new location.

[odiea]

I lied. All I had to do was change style.css but I did add an images folder in templates for the new buttons.

[odiea]

After working with it more that noprint deleted the top bar.

[angelscabrerag]

@daN4cat Sorry for the delay, Yes i can, i'm playing around https://github.com/daN4cat/opensourcepos-new-ui version rigth now. I will notify any advance...

[daN4cat]

@angelcabrera sorry please don't use that git, it's obsolete. Please use https://github.com/daN4cat/opensourcepos and the branch bootstrapUI

thanks

[daN4cat]

OK, hopefully #120 is closed so the next step in 2.4 for me would be to upgrade to a new UI building on what was partially done by another submitter.

So I have a question here, do we prefer to make it configurable so people can change bootstrap theme or should we make the current example the default for the new OSPOS 2.4?

[jekkos]

I would set the new theme as the default, but keep the old one so that people can choose for themselves.

[daN4cat]

OK, so I leave the setup as it is but I would need to complete the changes because just some views are fine and the dialog boxes are not ok.

There is some work to do, I need to learn more on css stuff which is good to learn. However it might take a while to complete the job, but let see.

[daN4cat]

I will work on my branch until I get something sorted at general level, so I leave some time to settle in 2.4 CI3 change. Once both sides seems fine I'll submit the new UI to 2.4 branch.

[daN4cat]

@cpl2015 I see you cloned my git and branch boosttrapUI and you are advancing the UI upgrade to boostrap. I'll have a look into what you have added and I was wondering if I can count on you doing this upgrade and get a contribution back so I can focus on something else. That will be great in advancing OSPOS to the next level helping each other. So we can get to a 2.4 with CI3 and bootstrap in really soon.

[daN4cat]

@jekkos I checked and merged @cpl2015 changes (in my boostrapUI branch) that adjust the rest of the UI (e.g. sales, receivings) and if we are to maintain backward compatibility in terms of old UI without bootstrap that means a lot of work.

Currently cpl2015 branch added spacelab beside flatly, but it has changes to root views to add bootstrap css and button styles. If we don't allow that change at root level it will be a lot of work in duplicating changes in bootstrap templates, repeating always the same change causing a lot of issues in case we fix something at root level because we need to propagate the same fix across I don't know how many templates.

An example was my favicon fix, I needed to change header.php in templates/flatly in order to have it restored. I don't think this is a wise approach and it will become very expensive to maintain.

Therefore, how critical is to maintain the old UI style?

[daN4cat]

There is a batch of changes I submitted in my bootstrapUI branch:

• I moved flatly views to be the default theme but css that stays in templates/css. However I need to make the pointing to the template/css from the base view configurable. I aim to have it in the configuration panel so people can just add new templates/css and a menu entry and select it.
• I made all the buttons bootstrap ones and removed all the old css and images
• I took some of @odiea style.css and added to style.css, however I need to go through all the entries and remove things that are standard bootstrap. For instance we don't need to redefine buttons that are already standard (those were in odiea suggested style.css)
• I fixed the bottom container and assigned the jumbotron style
• Some fixes here and there
• Of course I merged from latest develop/2.4

The next steps are to make the popup dialogs bootstrap ones and also clean code from old css. I'm sure there are other things that were tweaked in the code and should be in a css, I'll see what can be done but that's at the end.

[daN4cat]

@jekkos if we make the current develop/2.4 with CI3.0.4 be master, next I will push bootstrapUI changes to develop/2.4 branch.

Let me know when 2.3.4. is out.

[jekkos]

Sounds like you've been working quite a bit. I'll tag that version later today.

[odiea]

span class="navbar-brand" id="company_title" style="font-size:14pt"><?php echo $this->config->item('company'); ?></span. @daN4cat Here is what I use to bring back the company name

[daN4cat]

ok, let me check. I missed that.

[odiea]

ok and if you change this in partial header from right to left the icons lineup correctly.ul class="nav navbar-nav navbar-left"

[daN4cat]

See what I committed. Many changes:

• made sure all the buttons are now bootstrap based
• made notification bars bootstrap ones
• changed some button colours
• move style.css to ospos.css
• tidied up style sheets related to legacy UI (e.g. old notification bars style)
• fixed the print issue with top bar being shown
• moved the feedback bar to footer since it's an area used in different instances so it's part of the overall ospos layout
• added company name to top_bar right
• used in consistent way php form_close instead of to match the php form_open
• fixed various indentation so it will be easier later to make all the forms bootstrap based
• various bit and pieces

I merged in latest master & develop/2.4.

The change of all the forms to be bootstrap based will be quite some work. I also have in mind to change the pagination to be bootstrap style, but not sure how easy is to change that. We'll see.

And of course the config page should use bootstrap tabs.... still a lot to do.

[daN4cat]

Anyone has a set of icons or pointer to a valid set to consider so we change even those? I would really like to give it a fresh and simpler look with this change.

[daN4cat]

Made an extra change since I didn't like the warning bar for the "no items in cart". Better an alert info.

[daN4cat]

BTW, is it better to display all the notifications now in the feedback bar at the bottom, I mean even the register ones?

[daN4cat]

Maybe add payment button in register should be green, so the normal sequence is always a series of green buttons. Thoughts?

[odiea]

I think the bootstrap buttons are fine. If you replace the new button back into style.css it gives a nicer radius button to match the other buttons. I would change the icons or just remove them. Maybe replace them with buttons Ha Ha. It appears you brought the button back with your last update. Ya suspended buttons are matching so Payment buttons could also match.

[daN4cat]

What about the notifaction bars? Should I move all at the bottom? I also noticed that if you edit a sale in takings and submit it reports an error. Is it only me or do you get the same?

[jekkos]

Would it be a lot of work to keep them in their original positions for sales and receivings? If we move these then we'll have to adapt controller code as well.

[daN4cat]

They are in the original place at the moment, just bootstrap style. Changing to bottom just means to wrap in a feedback_bar div. Anyway I leave as it is and we can change it later. There is more work to do with all the forms....

[jekkos]

I've fetched your github repo. Indeed there's something wrong in the detailed sales report edit. If you want I can have a look.

[jekkos]

And indeed a new set of icons would be nice as well. We could go all fancy and find some that scale well on retina displays eg. I'll try to see if I can find something.

Maybe we might split up this issue in smaller parts so we can keep track of improvements more easily?

[daN4cat]

Let me move code to a new branch and then split things indeed. I'll try to make more commits to reduce delta between changes.

Icon change is trivial.

[jekkos]

I have pushed bootstrapified config module in bootstrapUI branch on my repo now. This branch contains all your changes as well.

[daN4cat]

Ok, so we keep two branches + master. Gets a bit complicated.

Not sure why the js in config, the idea of the bootstrap themes we use is no js (as much as possible) but I'm sure there is a reason.

[daN4cat]

Btw, I'm expecting some of the test automation to break because of button ids use.

[odiea]

@jekkos will I be able to do a git pull from this branch. It does not show as a git I can pull?

[jekkos]

Ok I changed the name to be more consistent with other feature branches. Now it is feature/bootstrapUI.

I didn't find a working tab example with bootstrap in the first place so that's why I wrote my own 3 lines. Now I looked into omitting it but ran into the following

• To enable tab content you need to include bootstrap.js
• After adding this js file I saw it didn't work because it depended on jquery v1.9+
• I upgraded jquery to latest 1.12.1. Did a couple of quick tests and found nothing obviously broken
• Now it seems to be working only when using ?debug=true as query string (and not with the minified version). Not sure why, will look further tomorrow.
• Did an update of the grunt cache breaker paths. If we want to use overrides of header.php then we"ll need to adapt the grunt build to cope with that as well (otherwise we'll need to maintain js includes manually)

[jekkos]

Regarding the confirmation bar, might be cooler to use a native bootstrap alert, that pops in below the header bar?

http://www.w3schools.com/bootstrap/bootstrap_alerts.asp

[daN4cat]

That's what it is at the moment, just the feedback_bar styling drops it at the bottom.

Not sure I can follow what else you might mean

[odiea]

I just downloaded and tried this new branch and config store is not working. It loads but when you try a new tab it just goes back to home.

[jekkos]

Yeah indeed add ?debug=true to the url and I suppose it will work.