How to extend user drop down view?

[Niveshkrishna]

Is your feature request related to a problem? Please describe.

currently it is not possible to extend drop down view of user. This adds limited functionality for plugin developers to add new features to drop down menu

Describe the solution you'd like

Something similar like addSettingsViewModel would be interesting to have for drop down

Describe alternatives you've considered

Overwrite snappymail/v/0.0.0/app/templates/Views/User/SystemDropDown.html with custom changes

Additional context
Add any other context or screenshots about the feature request here.

[the-djmaze]

Try something like this in JavaScript

addEventListener('rl-view-model.create', e => {
	if ('SystemDropDown' === e.detail.viewModelTemplateID) {
		let view = e.detail;
		view.customClick = () => {
			alert('customClick');
		};
		document
			.getElementById('SystemDropDown')
			.content
			.querySelector('menu')
			.append(Element.fromHTML(`<li role="presentation">
				<a href="#" tabindex="-1" data-bind="click: customClick" data-icon="⏻" data-i18n="GLOBAL/TEST"></a>
			</li>`));
	}
});

This code modifies the original <template> that is used to build the menu HTML.
It is very powerful, so watch what you are doing.

I'm also using this method for other extensions like the Avatars extension.
https://github.com/the-djmaze/snappymail/blob/master/plugins/avatars/avatars.js
It is most useful here because the messages list is constantly modified with new messages, removed messages or complete change (like with selecting other folder).

Different approach is the Nextcloud plugin that add features to the messages list, message view and the composer dialog for integrations with Nextcloud.
https://github.com/the-djmaze/snappymail/blob/master/plugins/nextcloud/js/message.js
https://github.com/the-djmaze/snappymail/blob/master/plugins/nextcloud/js/messagelist.js
https://github.com/the-djmaze/snappymail/blob/master/plugins/nextcloud/js/composer.js

[Niveshkrishna]

@the-djmaze Amazing 🎉 . This works as expected.

[Niveshkrishna]

It would also be interesting to allow ordering of items in the drop down

[Niveshkrishna]

I was able to achieve required positioning with this

document.getElementById('SystemDropDown')
	.content
	.querySelector('menu')
	.children[4]
	.insertAdjacentElement("afterEnd", Element.fromHTML(`<li role="presentation">
	     <a href="#" tabindex="-1" data-icon="⏻" data-i18n="GLOBAL/TEST"></a>
      </li>`));

[the-djmaze]

.children[4] is risky because you can have multiple accounts and then .children[4] might be between the accounts.

Better to find menu .dividerbar to put above/below first divider
Better to find menu .dividerbar:nth-child(2) to put above/below second divider

Or even more advanced:

querySelector(`menu .dividerbar + li`).after( Element.fromHTML() );

[MI-KY]

Hi @the-djmaze added this to the developer documentation inside the wiki: https://github.com/the-djmaze/snappymail/wiki/Developer-Documentation#modify-the-ui-of-snappymail-at-runtime .
Don't know if with the "documentation" label you intend to mark all the information that has to be added to the wiki 🙂 ?

[the-djmaze]

Don't know if with the "documentation" label you intend to mark all the information that has to be added to the wiki 🙂

Well, that would be the best :)

[MI-KY]

👍 . Would you like that I make a comment on the issues that have been ported to the documentation to remove the "documentation" flag or do we leave everything as it is?