Vue settings modal

[Pytal]

Settings are currently in an accordion and should be moved into a modal using https://github.com/nextcloud/nextcloud-vue components

[sofiaronnkvist]

Hi! I was asked to work on this issue, but am struggling to understand which Vue components are being mounted on the relevant PHP in the templates and how to work with the files in the js-folder. I'd appreciate it greatly if I could get some help with understanding the setup of the codebase better so I can work on this. @Pytal

[Pytal]

The current settings are in

activity/templates/stream.app.navigation.php

Lines 42 to 64 in e258138

	<div id="app-settings">
	<div id="app-settings-header">
	<button class="settings-button" aria-expanded="false" aria-controls="app-settings-content" aria-label="Activity settings" data-apps-slide-toggle="#app-settings-content">
	<?php p($l->t('Activity settings'));?>
	</button>
	</div>
	<div id="app-settings-content">
	<input type="checkbox"<?php if ($_['rssLink']): ?> checked="checked"<?php endif; ?> id="enable_rss" class="checkbox" />
	<label for="enable_rss"><?php p($l->t('Enable RSS feed'));?></label>
	<span id="rssurl"<?php if (!$_['rssLink']): ?> class="hidden"<?php endif; ?>>
	<label for="feed-link" class="hidden-visually"><?php p($l->t('RSS feed'));?></label>
	<input id="feed-link" class="feed-link" type="text" readonly="readonly" value="<?php p($_['rssLink']); ?>" />
	<button aria-label="<?php p($l->t('Copy RSS feed link')); ?>" class="icon-clippy" data-clipboard-target="#rssurl input"></button>
	</span>
	<div id="activity-personal-settings-link">
	<a href="<?php p($_['personalSettingsLink']); ?>">
	<span class="no-icon"><?php p($l->t('Personal notification settings')); ?></span>
	</a>
	</div>
	</div>
	</div>

, none in Vue yet

The markup above will have to be replaced with a mount point for the Vue component

You can mount your component by creating a new js file like https://github.com/nextcloud/activity/blob/e25813860dcb8f04f5d029d24cdf45bb10973aa9/src/settings-personal.js and adding an entry for it in https://github.com/nextcloud/activity/blob/e25813860dcb8f04f5d029d24cdf45bb10973aa9/webpack.js

Then you can install the dependencies compile the code with npm ci && npm run watch @sofiaronnkvist :)

[susnux]

@Pytal are you sure we need a modal for exactly one setting? The settings accordion button only contains the RSS link + a link to the settings app.

[Pytal]

Was the standard for app settings but feel free to move it elsewhere @susnux :)