Experiment with a click and Draggy interface for managing the UI

[jamieaa64]

There are three levels of editing the an individual party dashboard

• Editing a contact - This is when a normal member of staff edits a particular contact. I think we want to make it so that when you see a contact it is in "read-only" mode. You then click Edit and then it switches into the in-place ckeditor mode. We might make it so that a single edit button allows you to edit all fields or there is edit next to each one. Dunno which is best.

• Arranging Fruit (Profiles) - The next "level" is being able to how data is displayed on the screen. This uses a panels-in-place editor style thing to make it so that you can arrange the "things" (In this case whole profiles) on the page. You click "Manage the Contact View page" button and it takes you into the edit mode. Here you can see the outline of the regions you can handle. The new UI elements appear on the page in-line and so for example to add a new tab you click a "plus" sign to the right of the tabs. Each tab now has a little "Move" icon so you can drag and drop the ordering of the tabs. Inside a tab are the regions with "Plus" icons that when you click them something appears that allows you to select profiles. (For example it could be a menu bar to the right slides in, that allows you to drag profiles onto the page, or could be a drop down menu or a modal popup). Where you can add profiles, you can also create a new one. Eventually these "things" might include special blocks we've made or views, etc.

• Slicing Bananas (Editing a profile) - The final level of complexity is being able to chop and change a profile. This includes: Displaying a summary profile that only includes some fields, Making a block that includes only some fields from multiple profiles, actually permanenetly adding or removing fields from profiles etc. There are a bunch of ways we could do this. We could try and make them work "in-place editor" style. Where we click another button (Manage this profile) and then all the fields appear sliced up and we can change them. Or we might find this button takes us to the core drupal manage datasets page.

Things to do:

• Install Panapoly 8
• Create a branch for experimenting on things that shows contacts in a view mode
• Play with "wireframes"

[jamieaa64]

Couple of points:

• We could "slice bananas" by making it so that on the screen you can click an Icon that is "Select display mode" and pick from the display modes that exist. If you want a new one click "Add new display more" or "Manage display modes" which takes you to the core drupal place to do this.
• We don't have a concept of how we can manage all "Data sets" or other things such as views, and things provided by modules
• We currently don't have any way to create new "Contact Types"
• Currently if you put a field on a profile, it stays on that profile. We have no way of "moving them" from profile to profile. (We could do this but it would involve a complicated migration. Perhaps this is best on the edit profile page)
• We currently don't have any way of moving things between tabs. However we can remove a profile from a tab and add it easily enough. In a similar manner to github's "cards" and projects. This might be good enough.

[jamieaa64]

• Make it so that it isn't so easy to delete a data set

[jamieaa64]

Things the UI needs to do before manage mode:

• Button to click edit to change from viewing the data to editing it

Things the UI needs to do:

• Change "manage mode" from just using it
• Have bar where I can drag profiles in (Decide what information is needed here)
• Button on the bar to click to create a new profile from scratch (takes you to standard drupal)
• Ability to select "Display mode", maybe when you drag and drop the modal pops up, maybe it happens before like with panopoly.
• Button to change the display mode of a profile
• Button to go to the page where I manage to fields on a profile
• Button to remove a profile

Questions:

• Sorting out the ordering
• Make sure that if you don't have drag and drop it still works (like on github, clicking it just puts it somewhere)
• How does this work on mobiles?
• How does this work with Javascript disabled and no drag and drop/ screen readers?

Maybe advanced:

• Ability to change layouts?