Produce with Flow | Blog Home | Fractal Planner

Drag and Drop on the Master Plan

The Fractal Planner has received a face lift recently — and some new functionality.

I already talked about the new tagging feature in a previous post. Today I want to say something about the new styling, menu system and drag and drop.


In an effort to give the Fractal Planner a more professional look, I’ve decided to use the Twitter Bootstrap styling libraries.

I think the before-after comparison is striking:

[before image]
before image
[after image]
after design

Now, in that screenshot, you’ll notice something else. The menu system is different.

New Menu System

The new menu system makes the navigation more compact than before, which allows the Fractal Planner’s planning pages to be completely uncluttered. Before there were form elements below the main planning pad, and there were buttons on the pad that should have been outside the pad (such as the display filter).

Now, all there is on most pages are the menu and the plan — no extra buttons.

For instance, you can see that several buttons from the old menu are now under the plans/lists menu:

plans lists menu

And the “Display Filter” menu item, which used to be inside the plan is now more properly in the top menu bar:

display filter menu

In general all the main menu categories should be fairly intuitive. For instance, the “Motivation Tools” category contains the rhythm timer and clear mind wizard (and will contain the “new habit wizard” and “procrastination wizard” when those are ready).

The search bar is in the menu instead of being below the forms.

And in general the new system is just more streamlined.

Now, let’s talk drag and drop:

Drag and Drop

The new drag and drop feature is the biggest improvement the Fractal Planner has seen in a while, but it’s also the most apt to lead to some confusion for existing users (though it should be pretty intuitive for new users).

Previously, there were two drag and drop functions: 1) you could drag an item (and its children) to a new parent, and 2) you could rearrange items at the same level.

The new drag and drop now allows you to do both things on the main screen, without clicking any extra buttons, or using any additional popup pages.

And you’ll note that you can actually see the whole family being dragged with the parent as you drag it.

drag and drop

A couple things to note here:

1. The drag handle is to the left of the red vertical line. Just grab that, and you can drag an item and all its children to a new location in the plan.

2. If you drag an item over another item, you’ll see a large highlighted area to drop on. This will drop the item “inside” the other item (in other words, it will make it a child of the item you drag it on top of).

3. You can also drag an item “above” or “below” another item. In that case a narrow highlighted line will appear, above or below the item in the plan. This will place the dragged item at the same level as the item it’s dragged to, and before or after it in the plan, depending on where you drop it.

4. The new drag and drop scheme has required a little more whitespace around the item description, meaning you won’t be able to see quite as many items above the fold in your plan when you have a lot of items visible on the page. But the tradeoff seems worth it to me.

Anyway, those are the main recent changes. Enjoy!


P.S. If you haven’t started with the Fractal Planner yet, there’s no better time than today!

This entry was posted in fractal planning, The Fractal Planner and tagged . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>