Pretty UI mockups

Hello all! I recently came across this project and I think it’s incredibly awesome. I want to offer some assistance with prettying up the UI.

I have made some mockups using the Twitter Boostrap CSS along with the new icon posted in Jira.

Login screen:

Status page:

Please let me know what you think and the best way I can contribute. I can provide a zip file of the static HTML mockups if there’s a place for me to upload it.

(EDIT: Forum picture upload didn’t work, hosting screenshots on Imgur now)

Those look great!

I guess you could create a jira account and upload it threre. It should also work here in the forums.

If you want to apply the web interface canges to a running urbackup instance, you just have to modify the index.htm, urbackup.js and templates.js files. The template.js is generated from the template files here https://github.com/uroni/urbackup_backend/tree/next/urbackupserver/www/templates using node.js and the modified dust.js here https://github.com/uroni/dustjs (see compile_templates.bat).

With 1.4 I changed the JavaScript library from Prototype to jQuery + dust.js. So integrating something like boostrap.js would be possible. It is already using lightable.js, as you might have noticed.

Looks like the forum won’t let me upload an archive containing files with certain extensions, so here’s a link instead:

https://files.tacoisland.net/public.php?service=files&t=d9030b137f1263225e2599d4408d9c35

I’m not too familiar with dust.js but I’ll take a look around those GitHub links and see what I can figure out…

Hi Uroni and Mambojuice,

The new ui looks very good.
Any chance to integrate this in the next release?

STATUS UPDATE!

I’ve had a chance to get working on this in my spare time. Some of the pages are done, some still need work.

All work has been committed to my fork of UrBackup.

https://github.com/mambojuice/urbackup_backend/tree/pretty-ui

Here’s a gallery of all pages in full resolution:

http://imgur.com/a/WXFox

I’m still having some issues with a few pages. Any help would be appreciated.

Status:


Needs some work on the client list table. I’m not sure how that is being generated, I don’t see anything in urbackup.js or the templates. Perhaps I’m just missing something?

Settings:


This page still needs a lot of work. I can’t find where the different General sub-sections are located. Same goes for the main nav tabs across the top of the page.

Statistics:


What is generating these various charts and inserting them into the page?

Looks great!

You are the first to make a significant contribution to UrBackup (excluding me, that is). I have put some thought into this, and I hope you do not mind signing a Contributor License Agreement (see here).

The tables are generated from the tables in the templates via the Datatables JavaScript library. It seems to have boostrap intregration – see here Bootstrap 3 .

The main nav is generated in urbackup.js via the templates main_nav.htm and main_nav_sel.htm. The tab sections are generated via JavaScript from the divs of class “tabbertab”. For example: <div class="tabbertab" title="{tAdvanced}"> We may need to repace the “tabber” JavaScript Library with the boostrap tabs.

That is done by the loadGraph function in urbackup_functions.js. I could not find a boostrap theme at first glance, but then it already looks okay?

I’ve finished off the last few sections and I think it’s about time for some beta testing.

The full code for building can be found here:

To update an existing UrBackup installation with the new UI, replace the contents of /var/urbackup/www with the following:
https://files.tacoisland.net/public.php?service=files&t=e3e6c6e7d1effb56f93d4b51fa7ca56f

Please please please please don’t put this update in an environment hosting production/critical backups. You have been warned!

I’m pretty sure a few things will be broken, I don’t have a very robust environment so some of the features I don’t see in the UI. Specific things to check for should be:

  • Translations are still working
  • All buttons/links function
  • No missed elements (all controls should have the new theme)
  • Core functionality has not been removed or broken

Small bug: On the activities tab, all of the “Last Activities” are completely out of order with this update. So far, everything else seems to be functional though. Looks great. Thank you for your work.

Wow, this looks great guys. Well done, look forward to seeing it on my production box :slight_smile:

Really cool! I have merged it to the 1.5 dev branch and will apply the 1.5 changes to it.

A few things which are currently not working:

  • In the settings the clients cannot be selected
  • The table displaying the log entries is incorrectly rendered when one looks at a backup log
  • Adding archival items currently doesn’t work (Function addArchiveItemInt and template “settings_archive_row” )

Maybe needs improvements:

  • Visual cue, that backups and log entries can be clicked on. At least change the pointer to a hand maybe?
  • The status screen width does not increase if the number of table columns is increased (wasted screen estate).
  • Maybe a link to the about screen in the footer?
  • Maybe increase the width of the settings description column.
  • If I resize the screen the navigation elements disappear. I guess we need to put them into a hamburger menu then?

Again, really cool! Thanks!

Sorry for the delay in replying, work has been crazy lately. I’ll take a look at these issues hopefully this weekend.

I’ll upload the 1.5 dev version… (some things are already fixed there)

Okay. Uploaded here: UrBackup - Browse /WorkInProgress at SourceForge.net (or the ‘dev’ branch on github)

That is already fixed, but only the bottom save button is working.

I’m still here! Sorry for the lack of response lately, things have been busy for me.

I’ve addressed a lot of the issues above here:

Details below:

In the settings the clients cannot be selected

Looks like your fix is working nicely. For the Save button, they are all calling the same onClick function. Is the function expecting the button to have a specific ID?

The table displaying the log entries is incorrectly rendered when one looks at a backup log

Fixed. Looks like there was a few pages I forgot to theme.

Adding archival items currently doesn’t work (Function addArchiveItemInt and template “settings_archive_row”)

A little stumped on this one, will have to keep digging.

Visual cue, that backups and log entries can be clicked on. At least change the pointer to a hand maybe?

Fixed with style=“cursor: pointer”. I did this a few other places where it made sense as well.

The status screen width does not increase if the number of table columns is increased (wasted screen estate).

Yes and no. The Bootstrap “container” class limits elements within to a maximum width. It may waste some screen space if you have a very high-res display, but it works wonders for rendering nicely on tablets and other non-PC devices.

Maybe a link to the about screen in the footer?

Added. The link isn’t bound to any function or page (yet), not sure how you want to handle this.

Maybe increase the width of the settings description column.

Done!

If I resize the screen the navigation elements disappear. I guess we need to put them into a hamburger menu then?

Looks like Bootstrap will automatically hide the navbar when the width of your viewing area is less than 768px. It shouldn’t disappear, it should just switch to the mobile display (menu toggle icon in top-right). I think this is being hidden by the language drop-down. I’ve moved the language selector to the footer, looks like it’s working now. You can now see the button to toggle the menu when using a small viewing area.

Great Work! Also For Mobile Use… I’ll Like To Test As Soon Is ready For Distribution…
Keep Up!

I am watching this thread closely as im sure most user are

Any updates with this? Would love to be able to push this out to our clients but feel that the UI is not where it needs to be yet. Is this something that is actively being developed or worked on?

Yes. There are a few details missing, but should be ready soonish.

5 Likes

Hi,

this is all working fantastic on my side, i just want to know when this UI update will be completed?
Thanks for a fantastic product!

Hi,

I just discovered this piece of software and its just what I wanted. Nice work! :slight_smile: And ofcourse I wasnt really amazed by the ui. I was wondering is there still work that needs to be done? I’m a (web) developer as well (and also famliar with bootstrap), so If I can do anything to push this new ui to the release…

Best regards,

BHD

2 Likes