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/_mockups_/...
- 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/2731a01112251c6f9ab86c9ab492ce...
- 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
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:
You want to add a widget to a hub. You're an admin.
Go to the hub.
Click on the 'new widget' button that appears in the column you want to
go to.
- 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.
- 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.)
- 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.
- 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.
- 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.
- 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.
- 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
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
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
hubs-devel@lists.fedoraproject.org
-
Máirín Duffy -
Pierre-Yves Chibon