Merge pull request #3087 from nextcloud/enh/flex-settings

move template for settings into base component

src/js/components/Base/index.js

@@ -1,6 +1,7 @@
 export { default as BadgeDiv } from './modules/BadgeDiv.vue'
 export { default as CardDiv } from './modules/CardDiv.vue'
 export { default as ConfigBox } from './modules/ConfigBox.vue'
+export { default as FlexSettings } from './modules/FlexSettings.vue'
 export { default as FlexSpacer } from './modules/FlexSpacer.vue'
 export { default as HeaderBar } from './modules/HeaderBar.vue'
 export { default as InputDiv } from './modules/InputDiv.vue'

src/js/components/Base/modules/FlexSettings.vue

@@ -0,0 +1,70 @@
+<!--
+  - @copyright Copyright (c) 2018 René Gieling <github@dartcafe.de>
+  -
+  - @author René Gieling <github@dartcafe.de>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div class="flex_settings">
+		<slot name="default" />
+	</div>
+</template>
+
+<script>
+
+export default {
+	name: 'FlexSettings',
+}
+</script>
+
+<style lang="scss">
+.flex_settings {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: stretch;
+
+	.settings-section {
+		flex: 1 0 480px;
+		margin-bottom: 0;
+		border-bottom: 1px solid var(--color-border);
+	}
+}
+
+.settings-description {
+	margin-top: -.2em;
+	margin-bottom: 1em;
+	opacity: .7;
+}
+
+.user_settings {
+	padding-top: 16px;
+
+	textarea {
+		width: 99%;
+		resize: vertical;
+		height: 230px;
+	}
+}
+
+.settings_details {
+	padding-bottom: 16px;
+	margin-left: 36px;
+}
+
+</style>

src/js/views/AdminSettingsPage.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div class="polls_admin_settings">
+	<FlexSettings>
 		<NcSettingsSection :title="t('polls', 'Share restrictions')"
 			:description="t('polls', 'Restrict the share actions globally or on a group base')">
 			<AdminShareSettings />
@@ -54,7 +54,7 @@
 			:description="t('polls', 'If you are experiencing connection problems, change how auto updates are retrieved.')">
 			<AdminPerformance />
 		</NcSettingsSection>
-	</div>
+	</FlexSettings>
 </template>
 
 <script>
@@ -67,6 +67,7 @@ import AdminPollCreation from '../components/Settings/AdminSettings/AdminPollCre
 import AdminPollDownload from '../components/Settings/AdminSettings/AdminPollDownload.vue'
 import AdminShareSettings from '../components/Settings/AdminSettings/AdminShareSettings.vue'
 import AdminHideMailAddresses from '../components/Settings/AdminSettings/AdminHideMailAddresses.vue'
+import { FlexSettings } from '../components/Base/index.js'
 import { NcSettingsSection } from '@nextcloud/vue'
 import '../assets/scss/markdown.scss'
 
@@ -84,6 +85,7 @@ export default {
 		AdminShareSettings,
 		AdminHideMailAddresses,
 		NcSettingsSection,
+		FlexSettings,
 	},
 
 	created() {
@@ -91,38 +93,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss">
-.polls_admin_settings {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: stretch;
-
-	.settings-section {
-		flex: 1 0 480px;
-		margin-bottom: 0;
-		border-bottom: 1px solid var(--color-border);
-	}
-}
-
-.settings-description {
-	margin-top: -.2em;
-	margin-bottom: 1em;
-	opacity: .7;
-}
-
-.user_settings {
-	padding-top: 16px;
-
-	textarea {
-		width: 99%;
-		resize: vertical;
-		height: 230px;
-	}
-}
-
-.settings_details {
-	padding-bottom: 16px;
-	margin-left: 36px;
-}
-</style>

src/js/views/UserSettingsPage.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div class="polls_user_settings">
+	<FlexSettings>
 		<NcSettingsSection :title="t('polls', 'Calendar check')"
 			:description="t('polls', 'Search for conflicting calendar entries')">
 			<CalendarSettings />
@@ -40,17 +40,20 @@
 			:description="t('polls', 'Some visual styling options.')">
 			<StyleSettings />
 		</NcSettingsSection>
-	</div>
+	</FlexSettings>
 </template>
 
 <script>
 
 import { NcSettingsSection } from '@nextcloud/vue'
+import { FlexSettings } from '../components/Base/index.js'
+
 export default {
 	name: 'UserSettingsPage',
 
 	components: {
 		NcSettingsSection,
+		FlexSettings,
 		CalendarSettings: () => import('../components/Settings/UserSettings/CalendarSettings.vue'),
 		FeatureSettings: () => import('../components/Settings/UserSettings/FeatureSettings.vue'),
 		StyleSettings: () => import('../components/Settings/UserSettings/StyleSettings.vue'),
@@ -63,33 +66,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss">
-.polls_user_settings {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: stretch;
-
-	.settings-section {
-		flex: 1 0 480px;
-		margin-bottom: 0;
-		border-bottom: 1px solid var(--color-border);
-	}
-}
-
-.user_settings {
-	padding-top: 16px;
-
-	textarea {
-		width: 99%;
-		resize: vertical;
-		height: 230px;
-	}
-}
-
-.settings_details {
-	padding-bottom: 16px;
-	margin-left: 36px;
-}
-
-</style>