Merge pull request #848 from nextcloud/buttonStyle

Button style
nextcloud · Feb 26, 2020 · 723a8ff · 723a8ff
2 parents 9eb8bd7 + c0f4b3b
commit 723a8ff
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 26 deletions.
diff --git a/src/js/components/Base/ButtonDiv.vue b/src/js/components/Base/ButtonDiv.vue
@@ -54,7 +54,7 @@ export default {
 
 <style lang="scss" scoped>
 	.button {
-		display: inline-flex;
+		display: inline-block;
 
 		&.withIcon {
 			padding-left: 34px;

diff --git a/src/js/components/Navigation/Navigation.vue b/src/js/components/Navigation/Navigation.vue
@@ -22,7 +22,7 @@
 
 <template lang="html">
 	<AppNavigation>
-		<AppNavigationNew :text="t('polls', 'Add new Poll')" @click="toggleCreateDlg" />
+		<AppNavigationNew button-class="icon-add" :text="t('polls', 'Add new Poll')" @click="toggleCreateDlg" />
 		<CreateDlg v-show="createDlg" ref="createDlg" @closeCreate="closeCreate()" />
 		<ul>
 			<AppNavigationItem :title="t('polls', 'All polls')" :allow-collapse="true"

diff --git a/src/js/components/SideBar/SideBarTabConfiguration.vue b/src/js/components/SideBar/SideBarTabConfiguration.vue
@@ -71,7 +71,8 @@
 			<label for="public" class="title">{{ t('polls', 'Visible to other users') }} </label>
 		</div>
 
-		<ButtonDiv :primary="true" :title="poll.deleted ? t('polls', 'Restore poll') : t('polls', 'Delete poll')" @click="switchDeleted()" />
+		<ButtonDiv icon="icon-delete" :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
@@ -48,7 +48,8 @@
 				</div>
 			</div>
 			<div>
-				<ButtonDiv primary="true" :title="t('polls', 'Shift')" @click="shiftDates(move)" />
+				<ButtonDiv icon="icon-history" :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
@@ -36,10 +36,14 @@
 					:display-name="shareDisplayName(share)"
 					:type="share.type"
 					:icon="true" />
-				<div class="options">
-					<a class="icon icon-clippy" @click="copyLink( { url: OC.generateUrl('apps/polls/s/') + share.token } )" />
-					<a class="icon icon-delete svg delete-poll" @click="removeShare(share)" />
-				</div>
+				<Actions>
+					<ActionButton icon="icon-clippy" @click="copyLink( { url: OC.generateUrl('apps/polls/s/') + share.token })">
+						{{ t('polls', 'Copy link to clipboard') }}
+					</ActionButton>
+					<ActionButton icon="icon-delete" @click="removeShare(share)">
+						{{ t('polls', 'Remove share') }}
+					</ActionButton>
+				</Actions>
 			</li>
 		</TransitionGroup>
 
@@ -76,24 +80,39 @@
 						{{ t('polls', 'Public link (' + share.token + ')') }}
 					</div>
 				</div>
-				<div class="options">
+				<Actions>
+					<ActionButton icon="icon-clippy" @click="copyLink( { url: OC.generateUrl('apps/polls/s/') + share.token })">
+						{{ t('polls', 'Copy link to clipboard') }}
+					</ActionButton>
+					<ActionButton icon="icon-delete" @click="removeShare(share)">
+						{{ t('polls', 'Remove share') }}
+					</ActionButton>
+				</Actions>
+				<!-- <div class="options">
 					<a class="icon icon-clippy" @click="copyLink( { url: OC.generateUrl('apps/polls/s/') + share.token } )" />
 					<a class="icon icon-delete" @click="removeShare(share)" />
-				</div>
+				</div> -->
 			</li>
 		</TransitionGroup>
-		<ButtonDiv icon="icon-add" :title="t('polls', 'Add a public link')" @click="addShare({type: 'public' })" />
+		<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>
 	</div>
 </template>
 
 <script>
-import { Multiselect } from '@nextcloud/vue'
+import { Actions, ActionButton, Multiselect } from '@nextcloud/vue'
 import { mapState, mapGetters } from 'vuex'
 
 export default {
 	name: 'SideBarTabShare',
 
 	components: {
+		Actions,
+		ActionButton,
 		Multiselect
 	},
 
@@ -211,10 +230,6 @@ export default {
 </script>
 
 <style lang="scss">
-	.add * {
-		cursor: pointer;
-	}
-
 	.shared-list {
 		display: flex;
 		flex-wrap: wrap;

diff --git a/src/js/components/VoteTable/VoteHeaderPublic.vue b/src/js/components/VoteTable/VoteHeaderPublic.vue
@@ -26,7 +26,7 @@
 			{{ t('polls', 'Your personal link to this poll: %n', 1, personalLink) }}
 			<a class="icon icon-clippy" @click="copyLink()" />
 		</div>
-		<Modal v-show="!isValidUser &!expired" class="modal"
+		<Modal v-show="!isValidUser &!expired & modal" class="modal"
 			:can-close="false">
 			<div class="modal__content">
 				<h2>{{ t('polls', 'Enter your name!') }}</h2>
@@ -41,8 +41,12 @@
 					<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>
-				<ButtonDiv :primary="true" :disabled="!isValidName || checkingUserName" :title="t('polls', 'OK')"
-					@click="writeUserName" />
+				<div class="modal__buttons">
+					<ButtonDiv :title="t('polls', 'Cancel')"
+						@click="closeModal" />
+					<ButtonDiv :primary="true" :disabled="!isValidName || checkingUserName" :title="t('polls', 'OK')"
+						@click="writeUserName" />
+				</div>
 			</div>
 		</Modal>
 	</div>
@@ -69,7 +73,7 @@ export default {
 			redirecting: false,
 			isValidName: false,
 			newName: '',
-			modal: false
+			modal: true
 		}
 	},
 
@@ -197,6 +201,14 @@ export default {
 			width: 100%;
 		}
 	}
+	.modal__buttons {
+		display: flex;
+		justify-content: end;
+		.button {
+			margin-left: 10px;
+			margin-right: 0;
+		}
+	}
 
 	.personal-link {
 		display: flex;

diff --git a/src/js/views/Vote.vue b/src/js/views/Vote.vue
@@ -24,11 +24,18 @@
 	<AppContent>
 		<div class="main-container">
 			<div class="header-actions">
-				<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()" />
+				<Actions>
+					<ActionButton :icon="tableMode ? 'icon-toggle-filelist' : 'icon-toggle-pictures'" @click="tableMode = !tableMode">
+						{{ t('polls', 'Switch view') }}
+					</ActionButton>
+				</Actions>
+				<Actions>
+					<ActionButton icon="icon-settings" @click="toggleSideBar()">
+						{{ t('polls', 'Toggle Sidebar') }}
+					</ActionButton>
+				</Actions>
 			</div>
-			<PollTitle />
+			<PollTitle class="poll-title" />
 			<PollInformation />
 			<VoteHeaderPublic v-if="!OC.currentUser" />
 			<PollDescription />
@@ -56,7 +63,7 @@
 </template>
 
 <script>
-import { AppContent } from '@nextcloud/vue'
+import { Actions, ActionButton, AppContent } from '@nextcloud/vue'
 import Subscription from '../components/Subscription/Subscription'
 import ParticipantsList from '../components/Base/ParticipantsList'
 import PollDescription from '../components/Base/PollDescription'
@@ -72,6 +79,8 @@ import { mapState } from 'vuex'
 export default {
 	name: 'Vote',
 	components: {
+		Actions,
+		ActionButton,
 		AppContent,
 		Subscription,
 		ParticipantsList,
@@ -189,6 +198,7 @@ export default {
 
 .header-actions {
 	right: 0;
+	top: 0;
 	position: absolute;
 	display: flex;
 }
@@ -198,5 +208,10 @@ export default {
 	width: 44px;
 	height: 44px;
 }
-
+@media (max-width: (1024px)) {
+	.poll-title {
+		padding-left: 14px;
+		padding-right: 90px;
+	}
+}
 </style>
-Original file line number
+Diff line change
@@ Expand Up / @@ -48,7 +48,8 @@ @@
     				</div>
     			</div>
     			<div>
-    				<ButtonDiv primary="true" :title="t('polls', 'Shift')" @click="shiftDates(move)" />
+    				<ButtonDiv icon="icon-history" :title="t('polls', 'Shift')"
+    					@click="shiftDates(move)" />
     			</div>
     		</div>
@@ Expand Down @@