From cdb3b5cf3731b524de31297ae22e12059fb8ebeb Mon Sep 17 00:00:00 2001
From: dartcafe <github@dartcafe.de>
Date: Tue, 18 Feb 2020 19:01:46 +0100
Subject: [PATCH 1/4] Add custom button component

---
 src/js/components/Base/ButtonDiv.vue          | 55 +++++++++++++++++++
 src/js/components/SideBar/SideBarTabShare.vue | 13 +++--
 2 files changed, 62 insertions(+), 6 deletions(-)
 create mode 100644 src/js/components/Base/ButtonDiv.vue

diff --git a/src/js/components/Base/ButtonDiv.vue b/src/js/components/Base/ButtonDiv.vue
new file mode 100644
index 000000000..c347528a0
--- /dev/null
+++ b/src/js/components/Base/ButtonDiv.vue
@@ -0,0 +1,55 @@
+<!--
+  - @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 lang="html">
+	<div :class="['button', icon, { primary: primary } ]" @click="$emit('click')">
+		<span>{{ title }}</span>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ButtonDiv',
+	props: {
+		title: {
+			type: String,
+			default: ''
+		},
+		icon: {
+			type: String,
+			default: ''
+		},
+		primary: {
+			type: Boolean,
+			default: false
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.button {
+		padding: 10px;
+		padding-left: 34px;
+		background-position: 12px center;
+	}
+</style>
diff --git a/src/js/components/SideBar/SideBarTabShare.vue b/src/js/components/SideBar/SideBarTabShare.vue
index a97ce6ac1..783360849 100644
--- a/src/js/components/SideBar/SideBarTabShare.vue
+++ b/src/js/components/SideBar/SideBarTabShare.vue
@@ -82,23 +82,20 @@
 				</div>
 			</li>
 		</TransitionGroup>
-		<div class="user-row user" @click="addShare({type: 'public', user: '', emailAddress: ''})">
-			<div class="avatar icon-add" />
-			<div class="user-name">
-				{{ t('polls', 'Add a public link') }}
-			</div>
-		</div>
+		<ButtonDiv icon="icon-add" :title="t('polls', 'Add a public link')" @click="addShare({type: 'public' })" />
 	</div>
 </template>
 
 <script>
 import { Multiselect } from '@nextcloud/vue'
 import { mapState, mapGetters } from 'vuex'
+import ButtonDiv from '../Base/ButtonDiv'
 
 export default {
 	name: 'SideBarTabShare',
 
 	components: {
+		ButtonDiv,
 		Multiselect
 	},
 
@@ -216,6 +213,10 @@ export default {
 </script>
 
 <style lang="scss">
+	.add * {
+		cursor: pointer;
+	}
+
 	.shared-list {
 		display: flex;
 		flex-wrap: wrap;

From 11c24c2e9e8c36b6de5740e270830b4368db0d48 Mon Sep 17 00:00:00 2001
From: dartcafe <github@dartcafe.de>
Date: Tue, 18 Feb 2020 19:27:05 +0100
Subject: [PATCH 2/4] less html and design

---
 src/js/components/Base/ButtonDiv.vue | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/js/components/Base/ButtonDiv.vue b/src/js/components/Base/ButtonDiv.vue
index c347528a0..c4c40ac04 100644
--- a/src/js/components/Base/ButtonDiv.vue
+++ b/src/js/components/Base/ButtonDiv.vue
@@ -21,8 +21,8 @@
   -->
 
 <template lang="html">
-	<div :class="['button', icon, { primary: primary } ]" @click="$emit('click')">
-		<span>{{ title }}</span>
+	<div :class="['button', icon, { withIcon: withIcon, primary: primary } ]" @click="$emit('click')">
+		{{ title }}
 	</div>
 </template>
 
@@ -42,14 +42,25 @@ export default {
 			type: Boolean,
 			default: false
 		}
+	},
+
+	computed: {
+		withIcon() {
+			return Boolean(this.icon)
+		}
 	}
 }
 </script>
 
 <style lang="scss" scoped>
 	.button {
-		padding: 10px;
-		padding-left: 34px;
-		background-position: 12px center;
+		display: inline-flex;
+
+		&.withIcon {
+			padding-left: 34px;
+			background-position: 12px center;
+		}
+
 	}
+
 </style>

From a66c8718d2ee951c1aa839cbe44709ddf0634682 Mon Sep 17 00:00:00 2001
From: dartcafe <github@dartcafe.de>
Date: Tue, 18 Feb 2020 19:27:36 +0100
Subject: [PATCH 3/4] Replace button divs with ButtonDiv

---
 src/js/components/SideBar/SideBarTabConfiguration.vue | 5 +----
 src/js/components/SideBar/SideBarTabOptionsDate.vue   | 4 +---
 src/js/components/SideBar/SideBarTabShare.vue         | 2 --
 src/js/components/VoteTable/VoteHeaderPublic.vue      | 5 ++---
 src/js/main.js                                        | 2 ++
 src/js/views/Vote.vue                                 | 4 +---
 6 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/src/js/components/SideBar/SideBarTabConfiguration.vue b/src/js/components/SideBar/SideBarTabConfiguration.vue
index 62315ee07..7740b6e12 100644
--- a/src/js/components/SideBar/SideBarTabConfiguration.vue
+++ b/src/js/components/SideBar/SideBarTabConfiguration.vue
@@ -75,10 +75,7 @@
 			<label for="public" class="title">{{ t('polls', 'Visible to other users') }} </label>
 		</div>
 
-		<button class="button btn primary" @click="switchDeleted()">
-			<span v-if="poll.deleted">{{ t('polls', 'Restore poll') }}</span>
-			<span v-else>{{ t('polls', 'Delete poll') }}</span>
-		</button>
+		<ButtonDiv :primary="true" :title="poll.deleted ? t('polls', 'Restore poll') : t('polls', 'Delete poll')" @click="switchDeleted()" />
 	</div>
 </template>
 
diff --git a/src/js/components/SideBar/SideBarTabOptionsDate.vue b/src/js/components/SideBar/SideBarTabOptionsDate.vue
index 5661ce0d9..b8c5594b8 100644
--- a/src/js/components/SideBar/SideBarTabOptionsDate.vue
+++ b/src/js/components/SideBar/SideBarTabOptionsDate.vue
@@ -48,9 +48,7 @@
 				</div>
 			</div>
 			<div>
-				<button class="button btn primary" @click="shiftDates(move)">
-					<span>{{ t('polls', 'Shift') }}</span>
-				</button>
+				<ButtonDiv primary="true" :title="t('polls', 'Shift')" @click="shiftDates(move)" />
 			</div>
 		</div>
 
diff --git a/src/js/components/SideBar/SideBarTabShare.vue b/src/js/components/SideBar/SideBarTabShare.vue
index 783360849..a3928aa9d 100644
--- a/src/js/components/SideBar/SideBarTabShare.vue
+++ b/src/js/components/SideBar/SideBarTabShare.vue
@@ -89,13 +89,11 @@
 <script>
 import { Multiselect } from '@nextcloud/vue'
 import { mapState, mapGetters } from 'vuex'
-import ButtonDiv from '../Base/ButtonDiv'
 
 export default {
 	name: 'SideBarTabShare',
 
 	components: {
-		ButtonDiv,
 		Multiselect
 	},
 
diff --git a/src/js/components/VoteTable/VoteHeaderPublic.vue b/src/js/components/VoteTable/VoteHeaderPublic.vue
index 234517cf6..c438ba1db 100644
--- a/src/js/components/VoteTable/VoteHeaderPublic.vue
+++ b/src/js/components/VoteTable/VoteHeaderPublic.vue
@@ -41,9 +41,8 @@
 					<span v-show="!checkingUserName && userName.length < 3">{{ t('polls', 'Username is not valid. Please enter at least 3 characters.') }}</span>
 					<span v-show="!checkingUserName && userName.length > 2 && !isValidName">{{ t('polls', 'This username is not valid, i.e. because it is already in use.') }}</span>
 				</div>
-				<button class="button btn primary" :disabled="!isValidName || checkingUserName" @click="writeUserName">
-					<span>{{ t('polls', 'OK') }}</span>
-				</button>
+				<ButtonDiv :primary="true" :disabled="!isValidName || checkingUserName" :title="t('polls', 'OK')"
+					@click="writeUserName" />
 			</div>
 		</Modal>
 	</div>
diff --git a/src/js/main.js b/src/js/main.js
index 6dfb0fed7..427071048 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -35,6 +35,7 @@ import moment from 'moment'
 import { Tooltip } from '@nextcloud/vue'
 
 import UserDiv from './components/Base/UserDiv'
+import ButtonDiv from './components/Base/ButtonDiv'
 import LoadingOverlay from './components/Base/LoadingOverlay'
 
 /* eslint-disable-next-line camelcase, no-undef */
@@ -55,6 +56,7 @@ Vue.prototype.OC = OC
 Vue.prototype.OCA = OCA
 
 Vue.component('UserDiv', UserDiv)
+Vue.component('ButtonDiv', ButtonDiv)
 Vue.component('LoadingOverlay', LoadingOverlay)
 Vue.directive('tooltip', Tooltip)
 
diff --git a/src/js/views/Vote.vue b/src/js/views/Vote.vue
index 2a1996f69..3f2ac24cf 100644
--- a/src/js/views/Vote.vue
+++ b/src/js/views/Vote.vue
@@ -24,9 +24,7 @@
 	<AppContent>
 		<div class="main-container">
 			<div class="header-actions">
-				<button class="button btn primary" @click="tableMode = !tableMode">
-					<span>{{ t('polls', 'Switch view') }}</span>
-				</button>
+				<ButtonDiv :primary="true" :title="t('polls', 'Switch view')" @click="tableMode = !tableMode" />
 				<a href="#" class="icon icon-settings active"
 					:title="t('polls', 'Open Sidebar')" @click="toggleSideBar()" />
 			</div>

From 167100257b844368ac0c9bab30434f589c5f4c9b Mon Sep 17 00:00:00 2001
From: dartcafe <github@dartcafe.de>
Date: Sat, 22 Feb 2020 07:09:57 +0100
Subject: [PATCH 4/4] autoFocus name field via watch

---
 src/js/components/VoteTable/VoteHeaderPublic.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/js/components/VoteTable/VoteHeaderPublic.vue b/src/js/components/VoteTable/VoteHeaderPublic.vue
index c438ba1db..ea4d4a04c 100644
--- a/src/js/components/VoteTable/VoteHeaderPublic.vue
+++ b/src/js/components/VoteTable/VoteHeaderPublic.vue
@@ -112,11 +112,11 @@ export default {
 				this.invalidUserNameMessage = t('polls', 'Please use at least 3 characters for your username!')
 				this.checkingUserName = false
 			}
-		}
-	},
+		},
 
-	mounted() {
-		this.setFocus()
+		'poll.id': function(newValue) {
+			this.setFocus()
+		}
 	},
 
 	methods: {