search

dnnsoftware / Dnn.Platform

DNN (formerly DotNetNuke) is the leading open source web content management platform (CMS) in the Microsoft ecosystem.
https://dnncommunity.org/
MIT License
1.03k stars 749 forks source link

RFC: Module Actions Update #2433

Closed bdukes closed 4 years ago

bdukes commented 6 years ago

Description of problem

The module actions are (1) hard/impossible to navigate via keyboard (see https://github.com/dnnsoftware/Dnn.AdminExperience/issues/108) and (2) the UI can be problematic, especially if we want to add more actions, types of actions, or information (see discussion on https://github.com/dnnsoftware/Dnn.Platform/pull/2354)

Description of solution

I propose that the module actions menu be recreated with accessibility in mind, and designed to effectively display useful passive information (e.g. pane name, module name, IDs, etc).

Description of alternatives considered

Current layout as of v9.3.0.39 alpha

image

Affected version

Affected browser

ohine commented 6 years ago

I think we should combine all of the module actions back into a single icon. Make this icon larger and easier to interact with. Inside of that we'd display the info panel with additional info on that module. This would clean up the edit experience quite a bit and declutter the ui.

valadas commented 6 years ago

@ohine I like this idea, just one edge case comes to mind, some modules have settings in the action (pencil) menu, if this implementention is selected we need to test to make sure that:

  1. it supports having two items with the same name
  2. it separates the Dnn settings from the other settings in some visible way.

Same goes sometimes for import, export, delete, etc. So we need a way to clearly make a difference from deleting one item in the module and deleting the whole module for instance...

sleupold commented 6 years ago

IMO we need a good UI concept here, which can stay für some time and fulfils the needs of our target audience. The current icons are not accessible. The structure of items in first and second is not intuitive, but we don't provide an option for module developers to create sub menus. There are several necessary data missing. Module Settings are not implemented client side - which won't work, as long as settings is a server control. IMO we need a team designing this feature. @Timo-Breumelhof, what is your opinion?

OllyHodgson commented 6 years ago

In general I like the idea, although I share @valadas' concerns about merging it all into one "menu".

I've mentioned it elsewhere: This (and other parts of the UI) need to stop being completely reliant on hover for interaction. Lets make the menu(s) click-to-open. It's much easier to make that work on touchscreens, and with keyboard navigation.

mitchelsellers commented 6 years ago

I fully support the usage of an informational icon for exposing of information. I echo the concerns of @valadas and others with any combination of these actions into a single element.

The key driver here I believe will be validating that we can meet the following key requirements

But this will need a prototype before implementation.

david-poindexter commented 6 years ago

I agree with the general direction here and believe it is a move in the right direction. I also agree it should be something with more "staying power". It would be great to see some mockups first that flesh out these ideas into something visual.

valadas commented 6 years ago

What if we keep the current UI, but just a bit larger icons and accessible? As for the module settings, good documentation on moving from the current settings to QuickSettings could be a nice solution?

sleupold commented 6 years ago 
      What if we keep the current UI, but just a bit larger icons and accessible? As for the module settings, good documentation on moving from the current settings to QuickSettings could be a nice solution?

this wouldn't solve the problem, you often need to search both, first and second menu for the proper command.

valadas commented 6 years ago

Well, from some key points up here, the problems are:

So I think growing the icons and adding an information dropdown would solve most of what is discussed here. From there we just need to add some html and js to enable keyboard navigation, I was thinking TAB could get to the first icon (information), that icon would have an aria-label with at least the module name and title such as "HTML Module - Our History" or "Blog module - Our Blog", etc. Once that has the focus, we can then watch for left and right keys to switch to the module actions menu, settings, and position, just using the arrows should expand that root menu and then Up Down would enumerate the available actions (or read out the info pane dropdown) image

The only major issue I see in implementing this is that the html for those is at the end of the document instead of just before each module, I am not sure why it was implemented like that, but it makes it difficult for having a correct keyboard navigation flow...

Timo-Breumelhof commented 6 years ago

I think the HTML is at the end to avoid z-index issues, but the calculated position leads to issues with fixed headers. https://www.youtube.com/watch?v=SqWFcPnhgQ0

valadas commented 6 years ago

@Timo-Breumelhof I totally agree, they should be in the div above the module for all your reasons and for keyboard navigation too. We should also not need to hover to view them.

ohine commented 6 years ago

Here is a quick render of something along the lines of what I'm thinking.

module-actions-v1

mitchelsellers commented 6 years ago

@ohine I think this is a good concept, my only concern would be with moving modules at this point

Timo-Breumelhof commented 6 years ago

I like the info about the module. I'm not a fan of presenting this as an overlay though TBH, it feels less inline to me. I personally prefer multiple icons as there's currently no space issue and the directer one can access the functionality the better IMO.

sleupold commented 6 years ago

with the overlay, would it be possibel to list items of all 3 menus instead of requiring an additional click for move, settings, delete.

valadas commented 6 years ago

As for hover, the thing is not to get rid of hover, just not to be the only way to access the menu (or any other UI item. The root should be styled open or closed by a class instead of css :hover and a script should apply or remove the active class on hover or click, that way it is fast by mouse and usable by keyboard too. Then visually, each element should also have an active style that does not rely on hover, that way when you tab to it by keyboard it looks highlighted.

Honestly, I don't see what a popup (overlay) with the buttons inside of it adds other than an extra click, I would just improve what is there and replace the move icon with an info icon. Then the old move dropdown could be part of the module info panel, something like the QuickSettings where you can quickly change the module title, tags, container, the most common stuff...

Here is a quick mockup: image

valadas commented 6 years ago

We would also need a cancel or close button that I forgot to put in above mockup for quiting the dropdown by keyboard

Cambridgeport90 commented 5 years ago

I wouold agree with all of this. I'm going to be getting my test environment back soon, so I look forward to testing out what anyone has; the quicker this gets resolved, the happier everyone will be, I think. Biggest thing for me is not only having hover not be the only way to access the menu, but also having things being properly labeled, as well.

Cambridgeport90 commented 5 years ago

I took the time to review all of this again this morning. I see that four out of six tasks are completed, though I'm not able to see which ones. If you need a hand with testing anything, let me know. I'm looking forward to being a part of this.

valadas commented 5 years ago

@Cambridgeport90 the 4 out of 6 thing is just the checkboxes in the issue text (versions affected)

stale[bot] commented 5 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Cambridgeport90 commented 5 years ago

What is happening with this? Thanks.

From: stale[bot] notifications@github.com Sent: Saturday, October 26, 2019 1:01 AM To: dnnsoftware/Dnn.Platform Dnn.Platform@noreply.github.com Cc: Katherine Moss kat8989@outlook.com; Mention mention@noreply.github.com Subject: Re: [dnnsoftware/Dnn.Platform] RFC: Module Actions Update (#2433)

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://nam11.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fdnnsoftware%2FDnn.Platform%2Fissues%2F2433%3Femail_source%3Dnotifications%26email_token%3DADS4MADGEWDLFA3VUVKGOGTQQPFKTA5CNFSM4F755HR2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECJ72UA%23issuecomment-546569552&data=02%7C01%7C%7Cbe9b4265ca4f4828ef1808d759d1900a%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637076628900426849&sdata=%2B9xxVAwDjZuYs9FovfO17hH3LAPX7DmoVUumHc7GpPM%3D&reserved=0, or unsubscribehttps://nam11.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FADS4MAFPDNCAZOHE7P4G3O3QQPFKTANCNFSM4F755HRQ&data=02%7C01%7C%7Cbe9b4265ca4f4828ef1808d759d1900a%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637076628900436858&sdata=wcO70Y7kcEUJLPrsJ7Jguksy85v3%2FWkA79OOkzqXETI%3D&reserved=0.

valadas commented 5 years ago

@Cambridgeport90 , well there are a couple ideas here but no pull request came in yet, so it is still in the list.

Timo-Breumelhof commented 5 years ago

@valadas we got an email that stale bot is about to close the issue..

valadas commented 5 years ago

Yep, this is the purpose of Stablebot, it warns subscribers if an issue had no activity for a long time to keep the ball rolling. Any comment revives it and if no comments then it closes the issue I think a week later or some such.

stale[bot] commented 4 years ago

We have detected this issue has not had any activity during the last 90 days. That could mean this issue is no longer relevant and/or nobody has found the necessary time to address the issue. We are trying to keep the list of open issues limited to those issues that are relevant to the majority and to close the ones that have become 'stale' (inactive). If no further activity is detected within the next 14 days, the issue will be closed automatically. If new comments are are posted and/or a solution (pull request) is submitted for review that references this issue, the issue will not be closed. Closed issues can be reopened at any time in the future. Please remember those participating in this open source project are volunteers trying to help others and creating a better DNN Platform for all. Thank you for your continued involvement and contributions!

Timo-Breumelhof commented 4 years ago

no volunteers? :-)

Cambridgeport90 commented 4 years ago

I will see if I can find anyone interested. I am surprised there hasn’t been anyone, though.

From: Timo Breumelhof notifications@github.com Sent: Sunday, January 26, 2020 12:41 PM To: dnnsoftware/Dnn.Platform Dnn.Platform@noreply.github.com Cc: Katherine Moss kat8989@outlook.com; Mention mention@noreply.github.com Subject: Re: [dnnsoftware/Dnn.Platform] RFC: Module Actions Update (#2433)

no volunteers? :-)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://eur02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fdnnsoftware%2FDnn.Platform%2Fissues%2F2433%3Femail_source%3Dnotifications%26email_token%3DADS4MAHVO6DF63DWWZXEAUTQ7XDL7A5CNFSM4F755HR2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJ5ZPHI%23issuecomment-578525085&data=02%7C01%7C%7Ca2d423be46a34b14309608d7a286f490%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637156572814514958&sdata=xafE51nyxzqfpXZm5CR83rTeFF5XRJA8IOVFMhKxn%2FI%3D&reserved=0, or unsubscribehttps://eur02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FADS4MADYDT6TNT76YGAOXMDQ7XDL7ANCNFSM4F755HRQ&data=02%7C01%7C%7Ca2d423be46a34b14309608d7a286f490%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637156572814524969&sdata=XN7pjbAGP4VbR0Km7rWywyhd3I6D2wCrCHV3Co75AYA%3D&reserved=0.

mikesmeltzer commented 4 years ago

After speaking with @Cambridgeport90, I'm going to create a separate issue from this item to at least make the existing menus accessible. A rebuild of the action modules would be great, however, in the interim, if we can remove an accessibility roadblock so that we aren't preventing users from using the system we should.

Cambridgeport90 commented 4 years ago

Agreed a hundred percent. The fact the conversation is on Twitter … makes it even easier for folks to find. I will be following this one; there are so many places I would like to see the current system go, and accessibility is certainly the largest of them.

From: Mike Smeltzer notifications@github.com Sent: Monday, January 27, 2020 2:11 PM To: dnnsoftware/Dnn.Platform Dnn.Platform@noreply.github.com Cc: Katherine Moss kat8989@outlook.com; Mention mention@noreply.github.com Subject: Re: [dnnsoftware/Dnn.Platform] RFC: Module Actions Update (#2433)

After speaking with @Cambridgeport90https://eur05.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FCambridgeport90&data=02%7C01%7C%7Ceb556e0d33c4447bcd1308d7a35ca960%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637157490674300472&sdata=Io%2BvuvQh%2FHNy29CXHFH6BpmY5e3XUVInmRJDUll8BNk%3D&reserved=0, I'm going to create a separate issue from this item to at least make the existing menus accessible. A rebuild of the action modules would be great, however, in the interim, if we can remove an accessibility roadblock so that we aren't preventing users from using the system we should.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://eur05.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fdnnsoftware%2FDnn.Platform%2Fissues%2F2433%3Femail_source%3Dnotifications%26email_token%3DADS4MAE7FK27AFKK56P67ALQ74WUVA5CNFSM4F755HR2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKAWDGQ%23issuecomment-578904474&data=02%7C01%7C%7Ceb556e0d33c4447bcd1308d7a35ca960%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637157490674300472&sdata=A3SBBLAtsw3GhxPQmoiuUlTuYJNus0499rotWqPtlxE%3D&reserved=0, or unsubscribehttps://eur05.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FADS4MAHKL5UIVYDZWWI44XDQ74WUVANCNFSM4F755HRQ&data=02%7C01%7C%7Ceb556e0d33c4447bcd1308d7a35ca960%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637157490674310481&sdata=nCA4YCCaKfTF72pH%2FHBWyrBZeLfFh1Um%2BcArdjd7h3w%3D&reserved=0.

valadas commented 4 years ago

no volunteers? :-)

Well yes and no, I would definitely want to do this but lack of time...

stale[bot] commented 4 years ago

We have detected this issue has not had any activity during the last 90 days. That could mean this issue is no longer relevant and/or nobody has found the necessary time to address the issue. We are trying to keep the list of open issues limited to those issues that are relevant to the majority and to close the ones that have become 'stale' (inactive). If no further activity is detected within the next 14 days, the issue will be closed automatically. If new comments are are posted and/or a solution (pull request) is submitted for review that references this issue, the issue will not be closed. Closed issues can be reopened at any time in the future. Please remember those participating in this open source project are volunteers trying to help others and creating a better DNN Platform for all. Thank you for your continued involvement and contributions!

sleupold commented 4 years ago

still valid and looking for valunteers...

stale[bot] commented 4 years ago

We have detected this issue has not had any activity during the last 90 days. That could mean this issue is no longer relevant and/or nobody has found the necessary time to address the issue. We are trying to keep the list of open issues limited to those issues that are relevant to the majority and to close the ones that have become 'stale' (inactive). If no further activity is detected within the next 14 days, the issue will be closed automatically. If new comments are are posted and/or a solution (pull request) is submitted for review that references this issue, the issue will not be closed. Closed issues can be reopened at any time in the future. Please remember those participating in this open source project are volunteers trying to help others and creating a better DNN Platform for all. Thank you for your continued involvement and contributions!

stale[bot] commented 4 years ago

This issue has been closed automatically due to inactivity (as mentioned 14 days ago). Feel free to re-open the issue if you believe it is still relevant.