improve InfoTooltip, remove color, show NcDialog on click

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>

Author: julien-nc

src/components/DaemonConfig/InfoTooltip.vue

@@ -3,25 +3,36 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcButton
-		:title="text"
-		variant="tertiary"
-		:aria-label="text">
-		<template #icon>
-			<component :is="iconComponent" :fill-color="iconColor" :size="20" />
-		</template>
-	</NcButton>
+	<div>
+		<NcButton
+			:title="text"
+			variant="tertiary"
+			@click="showDialog = true">
+			<template #icon>
+				<component :is="iconComponent" :size="20" />
+			</template>
+		</NcButton>
+		<NcDialog v-model:open="showDialog"
+			:name="t('app_api', 'More information')"
+			:message="text"
+			:close-on-click-outside="true"
+			:out-transition="false"
+			:container="null" />
+	</div>
 </template>
 
 <script>
-import NcButton from '@nextcloud/vue/components/NcButton'
 import Warning from 'vue-material-design-icons/AlertOutline.vue'
 import Information from 'vue-material-design-icons/InformationOutline.vue'
 
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
+
 export default {
 	name: 'InfoTooltip',
 	components: {
 		NcButton,
+		NcDialog,
 		Information,
 		Warning,
 	},
@@ -41,15 +52,13 @@ export default {
 	},
 	data() {
 		return {
+			showDialog: false,
 		}
 	},
 	computed: {
 		iconComponent() {
 			return this.type === 'warning' ? Warning : Information
 		},
-		iconColor() {
-			return this.type === 'warning' ? 'var(--color-warning)' : 'var(--color-primary)'
-		},
 	},
 }
 </script>

src/components/DaemonConfig/ManageDaemonConfigModal.vue

@@ -94,7 +94,10 @@
 							{{ t('app_api', 'Enable HTTPS') }}
 						</NcFormBoxSwitch>
 					</NcFormBox>
-					<NcButton :aria-label="t('app_api', 'Deploy options')" style="margin: 10px 0;" @click="deployConfigSettingsOpened = !deployConfigSettingsOpened">
+					<NcButton
+						:aria-label="t('app_api', 'Deploy options')"
+						style="margin: 10px 0; width: 100%;"
+						@click="deployConfigSettingsOpened = !deployConfigSettingsOpened">
 						{{ !deployConfigSettingsOpened ? t('app_api', 'Show deploy options') : t('app_api', 'Hide deploy options') }}
 						<template #icon>
 							<UnfoldLessHorizontal v-if="deployConfigSettingsOpened" :size="20" />