Merge pull request #884 from nextcloud/design-issues

Design issues
nextcloud · Apr 5, 2020 · 043af45 · 043af45
2 parents a3c6b4d + 7532329
commit 043af45
Show file tree

Hide file tree

Showing 15 changed files with 162 additions and 231 deletions.
diff --git a/src/js/App.vue b/src/js/App.vue
@@ -84,6 +84,36 @@ export default {
 	margin: 8px 0;
 }
 
+.poll-item {
+	display: flex;
+	align-items: center;
+	padding-left: 8px;
+	padding-right: 8px;
+	line-height: 2em;
+	min-height: 4em;
+	overflow: visible;
+	white-space: nowrap;
+
+	&:active,
+	&:hover {
+		transition: var(--background-dark) 0.3s ease;
+		background-color: var(--color-background-dark);
+	}
+
+	> div {
+		display: flex;
+		flex: 1;
+		font-size: 1.2em;
+		opacity: 1;
+		white-space: normal;
+		padding-right: 4px;
+		&.avatar {
+			flex: 0;
+		}
+	}
+
+}
+
 .list-enter-active,
 .list-leave-active {
 	transition: all 0.5s ease;
@@ -160,4 +190,38 @@ export default {
 		}
 	}
 }
+
+.config-box {
+	display: flex;
+	flex-direction: column;
+	padding: 8px;
+	& > * {
+		padding-left: 21px;
+	}
+
+	& > input {
+		margin-left: 24px;
+		width: auto;
+
+	}
+
+	& > textarea {
+		margin-left: 24px;
+		width: auto;
+		padding: 7px 6px;
+	}
+
+	& > .title {
+		display: flex;
+		background-position: 0 2px;
+		padding-left: 24px;
+		opacity: 0.7;
+		font-weight: bold;
+		margin-bottom: 4px;
+		& > span {
+			padding-left: 4px;
+		}
+	}
+}
+
 </style>
diff --git a/src/js/components/Base/PollItemDate.vue b/src/js/components/Base/PollItemDate.vue
@@ -53,39 +53,3 @@ export default {
 	}
 }
 </script>
-
-<style lang="scss">
-	.poll-item {
-		display: flex;
-		align-items: center;
-		padding-left: 8px;
-		padding-right: 8px;
-		line-height: 2em;
-		min-height: 4em;
-		overflow: visible;
-		white-space: nowrap;
-
-		&:active,
-		&:hover {
-			transition: var(--background-dark) 0.3s ease;
-			background-color: var(--color-background-dark);
-		}
-
-		> div {
-			display: flex;
-			flex: 1;
-			// font-size: 1.2em;
-			opacity: 1;
-			white-space: normal;
-			padding-right: 4px;
-			&.avatar {
-				flex: 0;
-			}
-		}
-
-		.action {
-			justify-content: center;
-			flex: 0 0;
-		}
-	}
-</style>
diff --git a/src/js/components/Base/PollItemText.vue b/src/js/components/Base/PollItemText.vue
@@ -69,32 +69,12 @@ export default {
 </script>
 
 <style lang="scss">
-	.poll-item {
-		display: flex;
-		align-items: center;
-		padding-left: 8px;
-		padding-right: 8px;
-		line-height: 2em;
-		min-height: 4em;
-		overflow: visible;
-		white-space: nowrap;
-		&:active,
-		&:hover {
-			transition: var(--background-dark) 0.3s ease;
-			background-color: var(--color-background-dark);
-		}
 
-		> div {
-			display: flex;
-			flex: 1;
-			font-size: 1.2em;
-			opacity: 1;
-			white-space: normal;
-			padding-right: 4px;
-			&.avatar {
-				flex: 0;
-			}
-		}
+	.draggable .pollOption {
+		cursor: grab;
+	}
+
+	.poll-item {
 
 		.order {
 			flex: 0 0;
@@ -106,9 +86,5 @@ export default {
 			margin-right: 8px;
 		}
 
-		.action {
-			justify-content: center;
-			flex: 0 0;
-		}
 	}
 </style>
diff --git a/src/js/components/Base/UserDiv.vue b/src/js/components/Base/UserDiv.vue
@@ -22,9 +22,6 @@
 
 <template>
 	<div class="user-row" :class="type">
-		<div v-if="description" class="description">
-			{{ description }}
-		</div>
 		<Avatar :disable-menu="disableMenu" :menu-position="menuPosition" :user="userId"
 			:is-guest="!Boolean(OC.currentUser)"
 			:display-name="displayName"
@@ -74,10 +71,6 @@ export default {
 			type: String,
 			default: 'user'
 		},
-		description: {
-			type: String,
-			default: ''
-		},
 		icon: {
 			type: Boolean,
 			default: false
@@ -143,6 +136,7 @@ export default {
 	.user-name {
 		opacity: 0.5;
 		flex: 1;
+		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}

diff --git a/src/js/components/Comments/CommentAdd.vue b/src/js/components/Comments/CommentAdd.vue
@@ -22,7 +22,7 @@
 
 <template lang="html">
 	<div class="comment">
-		<UserDiv :user-id="acl.userId" :focus="true" :display-name="acl.DisplayName" />
+		<UserDiv :user-id="acl.userId" :focus="true" :display-name="acl.displayName" />
 		<InputDiv v-model="comment" class="addComment" :placeholder="t('polls', 'New comment …')"
 			@input="writeComment()" />
 	</div>

diff --git a/src/js/components/Navigation/Navigation.vue b/src/js/components/Navigation/Navigation.vue
@@ -29,8 +29,12 @@
 				:title="pollCategory.title" :allow-collapse="true" :pinned="pollCategory.pinned"
 				:icon="pollCategory.icon" :to="{ name: 'list', params: {type: pollCategory.id}}" :open="false">
 				<ul>
-					<PollNavigationItems v-for="(poll) in filteredPolls(pollCategory.id)" :key="poll.id" :poll="poll"
-						@switchDeleted="switchDeleted(poll.id)" @clonePoll="clonePoll(poll.id)"
+					<PollNavigationItems v-for="(poll) in filteredPolls(pollCategory.id)"
+						:key="poll.id"
+						:poll="poll"
+						:class="{ expired: (poll.expire > 0 && moment.unix(poll.expire).diff() < 0) }"
+						@switchDeleted="switchDeleted(poll.id)"
+						@clonePoll="clonePoll(poll.id)"
 						@deletePermanently="deletePermanently(poll.id)" />
 				</ul>
 			</AppNavigationItem>
@@ -170,3 +174,9 @@ export default {
 	}
 }
 </script>
+
+<style lang="scss" scoped>
+	.expired {
+		opacity: 0.3;
+	}
+</style>
diff --git a/src/js/components/SideBar/SideBar.vue b/src/js/components/SideBar/SideBar.vue
@@ -84,37 +84,23 @@ export default {
 
 </script>
 
-<style lang="scss">
-.config-box {
-	display: flex;
-	flex-direction: column;
-	padding: 8px;
-	& > * {
-		padding-left: 21px;
-	}
-
-	& > input {
-		margin-left: 24px;
-		width: auto;
-
-	}
-
-	& > textarea {
-		margin-left: 24px;
-		width: auto;
-		padding: 7px 6px;
+<style lang="scss" scoped>
+	.modal__content {
+		padding: 14px;
+		display: flex;
+		flex-direction: column;
+		color: var(--color-main-text);
+		input {
+			width: 100%;
+		}
 	}
 
-	& > .title {
+	.modal__buttons {
 		display: flex;
-		background-position: 0 2px;
-		padding-left: 24px;
-		opacity: 0.7;
-		font-weight: bold;
-		margin-bottom: 4px;
-		& > span {
-			padding-left: 4px;
+		justify-content: end;
+		.button {
+			margin-left: 10px;
+			margin-right: 0;
 		}
 	}
-}
 </style>