On Wed, Apr 20, 2016 at 05:04:36PM -0400, Máirín Duffy wrote:
- We also talked about one of the design elements Meghan and I came
up with
when making the mockups - that some widgets are right-hand column only, and
some are left. Whether or not a widget is one or the other depends on the
type and amount of info it has. The feed widget is the main left-hand side
one; there is also a 'welcome' / intro widget for hubs that has initial
rules / etc. that appears above the feed widget in many mockups. Most of the
widgets we have mocked up / have been working on are right-hand side
widgets.
Okay with that upfront, here's the flow we talked about:
1) You want to add a widget to a hub. You're an admin.
2) Go to the hub.
3) Click on the 'new widget' button that appears in the column you want to
go to.
4) A modal dialog pops up. It has a dropdown list where you can pick the hub
you'd like to add. There is a "Next" button in the lower right, and a
"cancel" button to the immediate left of the button. You click next.
5) A second screen for the modal appears with the config fields you need to
fill out to get a widget of the type you selected created. Fill it out,
press "add widget" (this reuses the same code as the edit button on
individual preexisting widgets uses.)
6) You'll be brought back to the hub, this time with the new hub appearing
at the bottom of the stack. (might be nice to have subtle / slick animation
to show you where it ended up after you added it.)
I actually thought this would all be on the edit mode, once you've added it, it
shows up at the top of the column rather than the bottom (otherwise you need to
scroll all the way down) and since you're still in edit, you can directly move
it to where you want it to be.
7) Want to adjust the position of the new widget? Go to the upper
right
corner of the hub and click "edit this hub." You'll enter 'edit
mode' for
the hub.
8) The contents of each widget fade to grey, and the name of each widget
fades in centered in the block of each widget. (The feeds widget just fades
out totally; it is not repositionable at this time.) The entire parent div
of the widget is a target for the click/drag action.
9) You can click and drag to reposition the widgets. You can move them up or
down within the column. They cannot be dragged between columns.
10) Once you're happy with your repositioning, you click 'save hub changes'
(a button that appears where the 'edit this hub' button was in the upper
right. The contents of the widgets fade back in as does the feed widget.
Some things we talked about to implement the drag and drop:
- jquery UI draggable/sortable
- interact.js
This one doesn't specifically say if it requires jquery or not.
Do note that we're already using jquery itself, just not jquery-ui.
- sortable (
https://rubaxa.github.io/Sortable/) this looks quite
nice, no
jquery required
This one looks indeed quite nice.
Pierre