Pretty UI mockups

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

At this point it is a lot JavaScript stuff additionaly to the html templates and css stylesheets.

Unrelated to the redesign there is also a lot of stuff to do:

  • Logout button and information about current user similar to e.g. WordPress
  • Deep links to the missing configuration (e.g. if the backup storage folder is not set)
  • The DataTable <=> Bootstrap interaction isn’t working as intented all the time. E.g. it adds horizontal scroll bars even if there is theoretically enough horizontal space to show all columns without scrolling
  • Get the back and refresh button working using the pushState API
  • Still haven’t gotten around to repairing the archiving with the new layout, I think
  • Some stuff could be put into multiple columns
  • If we want to be cool, we could add a Dashboard as start page with configurable panels

Give me a heads up via PM/email/here with information about your dev platform and I’ll give you a (compiled) dev version to work on.

Glad to see this thread is resurrected! I’m still here too. I have a new job so I don’t have the same amount of free time that I used to, but I can certainly help answer any questions.

Im quit busy as well, but I will give it a try :smile:

@uroni: I can’t find the pm button. I normally develop in windows visual studio (asp.net), but that’s problably not what you mean. What techniques do you use? Do you use version control (git, svn?)
I shall start with the layout issues and do small iterations, so see some progress.

Edit:

Ok I found your github project and forked it. I see you are using c++ and visual studio. I’m gonna try to build it and see I have I can start the server locally on my windows machine. As far as I checked your code you have created a the webserver and use html templates.

BHD

You don’t really need to compile the server for that. I’ll send you an installer.

And the “dev” branch was seriously outdated on github. Pushed all the commits to github just now.

I forked the next branch, it seemed to be the most up to date branch. So switching to the dev branch?

Ok, also possible. But than I have to copy the source files to the install folder, so see my changes in action right? Otherwhise I can just compile run and see my changes directly.

If you need to make backend changes (C++) that would be the way to go.

If you only need to change the web interface you can just change the files in C:\Program Files\UrBackupServer\urbackup\www and, once a change is done, copy it into urbackupserver/www in the git repo and commit.

Yes, the changes in this thread go into dev currently (you don’t want to start over I hope).

Yeah you’re right. I have it running now. I was wondering thought: are you using a web framework or did you write the http server your self. Mainly asking that tot know if there any conventions, template/master/include support so that i can Reuse HTML. I Also found the templates.js but Every function is a single line, is there a reason for that?

Edit: got your message, I will look into that :slight_smile:

The HTTP-server is indeed custom. It has a server-side template system but it’s currently not in use. The JavaScript-front-end does HTTP RPC calls getting JSON back, so all the UI stuff is done in the browser (see Single-page application - Wikipedia ). Nowadays one would use Angular/React/Backbone etc. for that.

I send you a summary on how to build the templates.js via PM – please take a loko at that. This you have to do using the git checkout.