Redesigning Layout / Git setup - Day 5(ish) of coding

Back after a minute hiatus, I had some time today to really sit down and work on the friend manager app.

I decided last time I want to try something new with the layout resembling a computer desktop, with icons that can be moved around and a status bar of some sort.

Accomplished:

• Set the project up on git
• Created new branch for the desktop view changes
• Moved around the friends list to be the full width
  • Still trying to figure out how I can use z-index to layer the windows on top of the desktop.
• Created new status/toolbar component fixed at the bottom with save button and search bar
  • Want to animate these more in the future and make them more compact.

Getting a little bit closer to what I want.

For next time, I want to:

• Figure out layering of the windows on top of the desktop
• Create bounds for the draggable windows - so they can't be dragged onto the status bar
• Style the status bar better - possibly with a clock & icon
• Get context menus working

Comments

[Zoppatorsk]

Here is a neat trick you can use for the layering. Just base it of time, that way the last one will always be on top.

Something like below.

    function bringToFront(event) {
        let node = event.target.parentNode;
        node.style.zIndex = Math.floor(new Date().getTime() / 1000);
    }

[Aida El Kouri]

oh woah this is a great idea!! will try it today! thank you :D