Public link cursor and Autofocus name field in public vote

src/js/components/Base/ButtonDiv.vue

@@ -0,0 +1,66 @@
+<!--
+  - @copyright Copyright (c) 2018 René Gieling <[email protected]>
+  -
+  - @author René Gieling <[email protected]>
+  -
+  - @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, { withIcon: withIcon, primary: primary } ]" @click="$emit('click')">
+		{{ title }}
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ButtonDiv',
+	props: {
+		title: {
+			type: String,
+			default: ''
+		},
+		icon: {
+			type: String,
+			default: ''
+		},
+		primary: {
+			type: Boolean,
+			default: false
+		}
+	},
+
+	computed: {
+		withIcon() {
+			return Boolean(this.icon)
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.button {
+		display: inline-flex;
+
+		&.withIcon {
+			padding-left: 34px;
+			background-position: 12px center;
+		}
+
+	}
+
+</style>

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>
 

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>
 

src/js/components/SideBar/SideBarTabShare.vue

@@ -82,12 +82,7 @@
 				</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>
 
@@ -216,6 +211,10 @@ export default {
 </script>
 
 <style lang="scss">
+	.add * {
+		cursor: pointer;
+	}
+
 	.shared-list {
 		display: flex;
 		flex-wrap: wrap;

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>
@@ -113,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: {

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)
 

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>