Add rows in page edit mode

[shanen]

Hi All,
I would like to pick up on a number of points with the process/tools for laying out pages.

Currently there are two ways to customize the layout in Mahara - layout form or directly on the page.

Layout form: many times I have created a layout - added content and then changed the layout in the form again, Sometimes I get an error, sometimes the layout doesn't change, and I have also seen pages refusing to load again after a layout change.

Layout in directly on page: this works well for columns, but there is no option for adding rows. Worse however, the in-page layout changes are not captured by the layout editor form, none of the options are selected or created based on what I do directly on the page. This means that once I begin making changes directly on the page the layout editor is of no use to me.

Both approaches have limitations/bugs, is it possible to have just one approach? I would opt for flexibly laying out directly the page.

In which case my wishlist is 1) that layout editing is consolidated with page editing with the ability to add-remove rows added, and 2) the "edit layout" page/system is hidden/removed/made redundant.

In addition I would also like the option to save any layout I make as a template layout (with a name I choose) so I can use it on other pages - like I can with a skin or theme. Maybe even share layouts with ratings and intended purpose attached!

This approach may save dev time having to maintain two ways of laying out a page.

Thanks,
Shane.

[Aaron Wells (u-aaronw)]

Hi Shane,

I don't think we're likely to get rid of the "Edit layout" tab any time soon. Although, I suppose this would be an interesting to do some user testing on, and find out which approach is less

[Aaron Wells (u-aaronw)]

Whoops, I hit the post button too early there! Just disregard that earlier comment.

You know, I'm not sure why we have the two different ways to edit a page layout. I took a look through the code history, and both systems have been present since Mahara 1.0. I think possibly the "edit layout" tab was originally meant to be a way for non-Javascript users to alter the layout. But prior to 1.0 the "add/remove columns" button was made into a user setting that is disabled by default, which made the "edit layout" tab the default way to edit a layout.

I can't really see us getting rid of the "edit layout" tab presently, but it would be interesting to submit this to some user testing and find out which approach is actually more intuitive for end users.

We certainly should make it possible to add rows with the "add/remove columns" buttons. That was kind of an oversight in Mahara 1.8, which we allowed to slide because this feature is thought to be relatively obscure. I'm not sure what the "add/remove rows" buttons should look like though. Do you have any ideas on that? A mock-up would be greatly appreciated.

Cheers,
Aaron

[shanen (shane-nuessler-canberra)]

Hi Aaron,
I can see the row controls looking like the mockup attached.
Cheers,
Shane.

[shanen (shane-nuessler-canberra)]

I started with 90 degree arrows but a colleague gave feedback suggesting the 45/135 degree arrows to maintain consistency.

[Aaron Wells (u-aaronw)]

Hi Shane,

Thanks for the mock-up. I can see how it works, you've basically taken the existing add/remove columns interface and turned it 90-degrees. It's a little intimidating at first glance, to have so many buttons. But the more I look at it, the more it makes sense. I think I might make these changes:

1. Move the "Delete row" button to the vertical middle of the row bar.

2. Make the row buttons more visually distinct from the column buttons. Perhaps change them from diagonal arrows to horizontal arrows for the column buttons and vertical arrows for the column buttons.

3. Rotate the row buttons 90 degrees so that their narrow dimension is horizontal.

Cheers,
Aaron

[shanen (shane-nuessler-canberra)]

Thanks Aaron, sounds good, and I look forward to seeing it on screen. Do you need people to test a prototype on a development server or something for wider feedback? Actually come to think of it, does the idea of Catalyst having a special mahara installation where people can login and test/give feedback on new features before they go into Master branch sound good? I'm thinking this might be useful especially for the big changes coming to mahara. Good for rapid prototyping on a global scale.

-------- Original message --------
From: Aaron Wells <email address hidden>
Date: 09/05/2014 1:45 PM (GMT+10:00)
To: "Shane.Nuessler" <email address hidden>
Subject: [Bug 1317320] Re: wishlist: ability to add rows in page edit mode

Hi Shane,

Thanks for the mock-up. I can see how it works, you've basically taken
the existing add/remove columns interface and turned it 90-degrees. It's
a little intimidating at first glance, to have so many buttons. But the
more I look at it, the more it makes sense. I think I might make these
changes:

1. Move the "Delete row" button to the vertical middle of the row bar.

2. Make the row buttons more visually distinct from the column buttons.
Perhaps change them from diagonal arrows to horizontal arrows for the
column buttons and vertical arrows for the column buttons.

3. Rotate the row buttons 90 degrees so that their narrow dimension is
horizontal.

Cheers,
Aaron

--
You received this bug notification because you are subscribed to the bug
report.
https://bugs.launchpad.net/bugs/1317320

Title:
  wishlist: ability to add rows in page edit mode

Status in Mahara ePortfolio:
  New

Bug description:
  Hi All,
  I would like to pick up on a number of points with the process/tools for laying out pages.

  Currently there are two ways to customize the layout in Mahara -
  layout form or directly on the page.

  Layout form: many times I have created a layout - added content and
  then changed the layout in the form again, Sometimes I get an error,
  sometimes the layout doesn't change, and I have also seen pages
  refusing to load again after a layout change.

  Layout in directly on page: this works well for columns, but there is
  no option for adding rows. Worse however, the in-page layout changes
  are not captured by the layout editor form, none of the options are
  selected or created based on what I do directly on the page. This
  means that once I begin making changes directly on the page the layout
  editor is of no use to me.

  Both approaches have limitations/bugs, is it possible to have just one
  approach? I would opt for flexibly laying out directly the page.

  In which case my wishlist is 1) that layout editing is consolidated
  with page editing with the ability to add-remove rows added, and 2)
  the "edit layout" page/system is hidden/removed/made redundant.

  In addition I would also like the option to save any layout I make as
  a template layout (with a name I choose) so I can use it on other
  pages - like I can with a skin or theme. Maybe even share layouts with
  ratings and intended purpose attached!

  This approach may save dev time having to maintain two ways of laying
  out a...

[shanen (shane-nuessler-canberra)]

Sounds great, thanks Aaron. I have mentioned these ideas to people during training over the last few months and they really like the ease of use the approach provides.
Cheers.

[Nigel Cunningham (nigelc-g)]

I wonder whether, rather than all the buttons, it might be better to indicate the addition of a new area based on where the position of the mouse when you're dragging and dropping.

In some software I already use, if I take a 'pane' and drag it down to the bottom quarter of the screen, the bottom quarter gets a semi-transparent overlay, indicating that if I drop there, I'll add a new row to the bottom of the layout. Perhaps something like that would make the UI cleaner.

[shanen (shane-nuessler-canberra)]

Love the idea, perfect!

Sent from Samsung Mobile

-------- Original message --------
From: Nigel Cunningham
Date:09/10/2014 12:25 PM (GMT+10:00)
To: "Shane.Nuessler"
Subject: [Bug 1317320] Re: wishlist: ability to add rows in page edit mode

I wonder whether, rather than all the buttons, it might be better to
indicate the addition of a new area based on where the position of the
mouse when you're dragging and dropping.

In some software I already use, if I take a 'pane' and drag it down to
the bottom quarter of the screen, the bottom quarter gets a semi-
transparent overlay, indicating that if I drop there, I'll add a new row
to the bottom of the layout. Perhaps something like that would make the
UI cleaner.

--
You received this bug notification because you are subscribed to the bug
report.
https://bugs.launchpad.net/bugs/1317320

Title:
  wishlist: ability to add rows in page edit mode

Status in Mahara ePortfolio:
  Triaged

Bug description:
  Hi All,
  I would like to pick up on a number of points with the process/tools for laying out pages.

  Currently there are two ways to customize the layout in Mahara -
  layout form or directly on the page.

  Layout form: many times I have created a layout - added content and
  then changed the layout in the form again, Sometimes I get an error,
  sometimes the layout doesn't change, and I have also seen pages
  refusing to load again after a layout change.

  Layout in directly on page: this works well for columns, but there is
  no option for adding rows. Worse however, the in-page layout changes
  are not captured by the layout editor form, none of the options are
  selected or created based on what I do directly on the page. This
  means that once I begin making changes directly on the page the layout
  editor is of no use to me.

  Both approaches have limitations/bugs, is it possible to have just one
  approach? I would opt for flexibly laying out directly the page.

  In which case my wishlist is 1) that layout editing is consolidated
  with page editing with the ability to add-remove rows added, and 2)
  the "edit layout" page/system is hidden/removed/made redundant.

  In addition I would also like the option to save any layout I make as
  a template layout (with a name I choose) so I can use it on other
  pages - like I can with a skin or theme. Maybe even share layouts with
  ratings and intended purpose attached!

  This approach may save dev time having to maintain two ways of laying
  out a page.

  Thanks,
  Shane.

To manage notifications about this bug go to:
https://bugs.launchpad.net/mahara/+bug/1317320/+subscriptions

[Aaron Wells (u-aaronw)]

The Eclipse IDE works kind of like that, for docking dialogs. If you drag a dialog on top of another one, it adds it as a tab to that dialog. But if you drag a dialog to the edge of another dialog, it instead adds it as another row/column alongside that one. Of course it can sometimes be a little tricky to figure out where the "hot zone" is.

But with Mahara's simplified row/column layout system I guess it wouldn't be too bad. Horizontal edge of a row adds a column to that row. Absolute bottom of the page, below the bottom row, adds another row.

I'm also considering a major redesign of the page builder and layout system for Mahara 1.11, but I'll keep this idea in mind as well.

[Kristina Hoeppner (kris-hoeppner)]

I would also be in favor of a "less in your face" version of the row / column buttons. They are quite overwhelming esp. when you have so many of them on a page potentially. I'd rather make them less intrusive. Maybe instead of keeping the system of being able to add block after block after block in a row without a row change to make it the default to always add a row instead. That way we could use our regular drop-zones and just tell the system to add a new row.

It gets more difficult though when you want to change the column layout for a row in between two other rows because you'd need to have some sort of indicator that you want to change the column layout. But again, I wouldn't use the current buttons as they just add so much additional information that you don't need most of the time. In the beginning of using Mahara, I always had them turned on because they were quite handy. However, recently, I don't because I choose my layout at the beginning of creating a page or at some point in the middle, but don't change it consistently. Maybe they could appear when you need them if it doesn't work with drop zones or other means.

As for rows, we need to keep in mind that we can only have 6 rows at the moment when creating a layout.

P.S. You can already repurpose layouts that you created in other pages that you create in your portfolio with the current layout chooser.