User workflow for adding a new widget

[Máirín Duffy]

Hi,

pingou and I talked about how adding a new widget will work at a user 
interaction level in #fedora-hubs today. Here's a summary of the 
discussion:

- Meghan did some mockups for adding widgets to hubs. Her idea was that in 
the upper right corner of the hub, if you are an admin, a button is 
available that says "edit this hub." You click on it and you view the hub 
in an edit mode, where all the widgets are in a config mode instead of 
displaying their content, you can reorder the widgets, and there are 
buttons to add new widgets. That is viewable here:

https://raw.githubusercontent.com/fedoradesign/fedora-hubs/master/_mockup...

- pingou has already put some work into modal config dialogs, which are 
available whe you click the 'edit' button in the upper right corner of 
widgets. This pops up a modal that gives config options for that widget (if 
you have admin access to the widget.) (You can see a mockup of one of these 
here, but they look different right now and will for the first cut: 
https://pagure.io/fedora-hubs/issue/raw/files/2731a01112251c6f9ab86c9ab49...

- 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.)

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
- sortable (https://rubaxa.github.io/Sortable/) this looks quite nice, no 
jquery required

Okay, hope that is a decent summary and makes sense! What do you think?

~m

[Pierre-Yves Chibon]

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

[Máirín Duffy]

On Thursday, April 21, 2016 4:41:42 AM EDT, Pierre-Yves Chibon wrote:
>  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 ...
>
>  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. 
Ah, my misunderstanding! It works either way IMHO.

~m

[Pierre-Yves Chibon]

On Thu, Apr 21, 2016 at 08:11:18AM -0400, Máirín Duffy wrote:
>  On Thursday, April 21, 2016 4:41:42 AM EDT, Pierre-Yves Chibon
> wrote:
>  >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
>  >>...
>  >
>  >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.
>  
>  Ah, my misunderstanding! It works either way IMHO. 
No problem. I thought I would reply with my thoughts in case I was missing
something :)

Thanks,
Pierre