From 0b5a473d0a63b067f96e42884b17845c4b1fa9ee Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Sat, 25 Apr 2020 01:20:22 +0200
Subject: [PATCH] Fix settings sidebar design

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 src/components/shareDiv.vue |  10 +-
 src/views/Sidebar.vue       | 202 ++++++++++++++++++------------------
 2 files changed, 109 insertions(+), 103 deletions(-)

diff --git a/src/components/shareDiv.vue b/src/components/shareDiv.vue
index 5c67d65..7578e9c 100644
--- a/src/components/shareDiv.vue
+++ b/src/components/shareDiv.vue
@@ -21,9 +21,7 @@
   -->
 
 <template>
-	<div>
-		<h2> {{ t('forms', 'Share with') }}</h2>
-
+	<div class="sharing">
 		<Multiselect id="ajax"
 			v-model="shares"
 			:options="users"
@@ -151,7 +149,11 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+	.sharing {
+		margin: 8px 8px 8px 36px;
+	}
+
 	.shared-list {
 		display: flex;
 		flex-wrap: wrap;
diff --git a/src/views/Sidebar.vue b/src/views/Sidebar.vue
index 8f32e5e..7c27e0b 100644
--- a/src/views/Sidebar.vue
+++ b/src/views/Sidebar.vue
@@ -22,92 +22,94 @@
 
 <template>
 	<AppSidebar v-show="opened" :title="form.title" @close="onClose">
-		<div class="configBox ">
-			<label class="title icon-settings">
-				{{ t('forms', 'Form configurations') }}
-			</label>
+		<h3>{{ t('forms', 'Settings') }}</h3>
+		<ul>
+			<li>
+				<input id="isAnonymous"
+					v-model="form.isAnonymous"
 
-			<input id="isAnonymous"
-				v-model="form.isAnonymous"
+					type="checkbox"
+					class="checkbox"
+					@change="onAnonChange">
+				<label for="isAnonymous">
+					{{ t('forms', 'Anonymous responses') }}
+				</label>
+			</li>
+			<li>
+				<input id="submitOnce"
+					v-model="form.submitOnce"
+					:disabled="form.access.type === 'public' || form.isAnonymous"
+					type="checkbox"
+					class="checkbox"
+					@change="onSubmOnceChange">
+				<label for="submitOnce">
+					{{ t('forms', 'Only allow one response per user') }}
+				</label>
+			</li>
+			<li>
+				<input id="expires"
+					v-model="formExpires"
+					type="checkbox"
+					class="checkbox">
+				<label for="expires">
+					{{ t('forms', 'Set expiration date') }}
+				</label>
+				<DatetimePicker v-show="formExpires"
+					id="expiresDatetimePicker"
+					v-model="form.expires"
+					v-bind="expirationDatePicker"
+					@change="onExpiresChange" />
+			</li>
+		</ul>
 
-				type="checkbox"
-				class="checkbox"
-				@change="onAnonChange">
-			<label for="isAnonymous" class="title">
-				{{ t('forms', 'Anonymous form') }}
-			</label>
-
-			<input id="submitOnce"
-				v-model="form.submitOnce"
-				:disabled="form.access.type === 'public' || form.isAnonymous"
-				type="checkbox"
-				class="checkbox"
-				@change="onSubmOnceChange">
-			<label for="submitOnce" class="title">
-				<span>{{ t('forms', 'Only allow one submission per user') }}</span>
-			</label>
-
-			<input id="expires"
-				v-model="formExpires"
-
-				type="checkbox"
-				class="checkbox">
-			<label class="title" for="expires">
-				{{ t('forms', 'Expires') }}
-			</label>
-
-			<DatetimePicker v-show="formExpires"
-				id="expiresDatetimePicker"
-				v-model="form.expires"
-				v-bind="expirationDatePicker"
-				@change="onExpiresChange" />
-		</div>
-
-		<div class="configBox">
-			<label class="title icon-user">
-				{{ t('forms', 'Access') }}
-			</label>
-
-			<input id="registered"
-				v-model="form.access.type"
-				type="radio"
-				value="registered"
-				class="radio"
-				@change="onAccessChange">
-			<label for="registered" class="title">
-				<div class="title icon-group" />
-				<span>{{ t('forms', 'Registered users only') }}</span>
-			</label>
-
-			<input id="public"
-				v-model="form.access.type"
-				type="radio"
-				value="public"
-				class="radio"
-				@change="onAccessChange">
-			<label for="public" class="title">
-				<div class="title icon-link" />
-				<span>{{ t('forms', 'Public access') }}</span>
-			</label>
-
-			<input id="selected"
-				v-model="form.access.type"
-				type="radio"
-				value="selected"
-				class="radio"
-				@change="onAccessChange">
-			<label for="selected" class="title">
-				<div class="title icon-shared" />
-				<span>{{ t('forms', 'Only shared') }}</span>
-			</label>
-		</div>
-
-		<ShareDiv v-show="form.access.type === 'selected'"
-			:active-shares="form.shares"
-			:placeholder="t('forms', 'Name of user or group')"
-			:hide-names="true"
-			@update-shares="updateShares"
-			@remove-share="removeShare" />
+		<h3>{{ t('forms', 'Sharing') }}</h3>
+		<ul>
+			<li>
+				<input id="registered"
+					v-model="form.access.type"
+					type="radio"
+					value="registered"
+					class="radio"
+					@change="onAccessChange">
+				<label for="registered">
+					<span class="icon-group">
+						{{ t('forms', 'Show to all users of this instance') }}
+					</span>
+				</label>
+			</li>
+			<li>
+				<input id="public"
+					v-model="form.access.type"
+					type="radio"
+					value="public"
+					class="radio"
+					@change="onAccessChange">
+				<label for="public">
+					<span class="icon-link">
+						{{ t('forms', 'Share link') }}
+					</span>
+				</label>
+			</li>
+			<li>
+				<input id="selected"
+					v-model="form.access.type"
+					type="radio"
+					value="selected"
+					class="radio"
+					@change="onAccessChange">
+				<label for="selected">
+					<span class="icon-shared">
+						{{ t('forms', 'Choose users to share with') }}
+					</span>
+				</label>
+				<ShareDiv v-show="form.access.type === 'selected'"
+					:active-shares="form.shares"
+					:placeholder="t('forms', 'Name of user or group')"
+					:hide-names="true"
+					@update-shares="updateShares"
+					@remove-share="removeShare" />
+			</li>
+		</ul>
 	</AppSidebar>
 </template>
 
@@ -247,21 +249,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+h3 {
+	margin-left: 8px;
+	margin-bottom: 8px;
+}
 
-.configBox {
-	display: flex;
-	flex-direction: column;
-	padding: 8px;
-	& > * {
-		padding-left: 21px;
-	}
-	& > .title {
-		display: flex;
-		background-position: 0 2px;
-		padding-left: 24px;
-		margin-bottom: 4px;
-		& > span {
-			padding-left: 4px;
+ul {
+	margin-bottom: 24px;
+
+	label {
+		padding: 8px;
+		display: block;
+
+		span[class^="icon-"],
+		span[class*=" icon-"] {
+			background-position: 4px;
+			padding-left: 24px;
 		}
 	}
 }
@@ -275,6 +278,7 @@ textarea {
 }
 
 #expiresDatetimePicker {
-	width: 170px;
+	left: 36px;
+	width: calc(100% - 44px);
 }
 </style>