Overhauled the UI/UX of the webdav file picker

RocketChat · Jul 19, 2019 · b3f2081 · b3f2081
1 parent 422669f
commit b3f2081
Show file tree

Hide file tree

Showing 11 changed files with 655 additions and 132 deletions.
diff --git a/app/theme/client/imports/components/contextual-bar.css b/app/theme/client/imports/components/contextual-bar.css
@@ -163,123 +163,125 @@
 	}
 }
 
-.attachments {
-	&__item {
-		position: relative;
+.flex-tab__result {
+	.attachments {
+		&__item {
+			position: relative;
 
-		margin-bottom: 10px;
+			margin-bottom: 10px;
 
-		transition: background-color 300ms linear;
+			transition: background-color 300ms linear;
 
-		&.active,
-		&:hover {
-			cursor: pointer;
+			&.active,
+			&:hover {
+				cursor: pointer;
 
-			background-color: #f7f8fa;
+				background-color: #f7f8fa;
 
-			.attachments-menu {
-				display: inline-block;
+				.attachments-menu {
+					display: inline-block;
+				}
 			}
-		}
 
-		&-link {
-			display: flex;
-			flex-direction: row;
+			&-link {
+				display: flex;
+				flex-direction: row;
 
-			padding: 8px 0;
-			align-items: center;
+				padding: 8px 0;
+				align-items: center;
+			}
 		}
-	}
 
-	&__file,
-	&__thumb {
-		display: inline-block;
-		display: flex;
-		flex-direction: column;
-		flex: 0 0 auto;
+		&__file,
+		&__thumb {
+			display: inline-block;
+			display: flex;
+			flex-direction: column;
+			flex: 0 0 auto;
 
-		width: 50px;
+			width: 50px;
 
-		height: 50px;
-		margin: 0 8px;
+			height: 50px;
+			margin: 0 8px;
 
-		border-radius: 2px;
+			border-radius: 2px;
 
-		background: radial-gradient(ellipse at center, rgba(155, 169, 186, 1) 0%, rgba(131, 143, 158, 1) 100%);
-		background-size: cover;
+			background: radial-gradient(ellipse at center, rgba(155, 169, 186, 1) 0%, rgba(131, 143, 158, 1) 100%);
+			background-size: cover;
 
-		font-size: 24px;
+			font-size: 24px;
 
-		align-items: center;
-		justify-content: center;
-	}
-
-	&__file {
-		&--pdf {
-			background: radial-gradient(ellipse at center, rgba(250, 97, 97, 1) 0%, rgba(251, 19, 19, 1) 100%);
+			align-items: center;
+			justify-content: center;
 		}
 
-		&--sheets {
-			background: radial-gradient(ellipse at center, rgba(0, 163, 82, 1) 0%, rgba(2, 114, 59, 1) 100%);
-		}
+		&__file {
+			&--pdf {
+				background: radial-gradient(ellipse at center, rgba(250, 97, 97, 1) 0%, rgba(251, 19, 19, 1) 100%);
+			}
 
-		&--ppt {
-			background: radial-gradient(ellipse at center, rgba(250, 109, 77, 1) 0%, rgba(208, 71, 40, 1) 100%);
+			&--sheets {
+				background: radial-gradient(ellipse at center, rgba(0, 163, 82, 1) 0%, rgba(2, 114, 59, 1) 100%);
+			}
+
+			&--ppt {
+				background: radial-gradient(ellipse at center, rgba(250, 109, 77, 1) 0%, rgba(208, 71, 40, 1) 100%);
+			}
 		}
-	}
 
-	&__type {
-		overflow: hidden;
-		flex: 0 0 auto;
+		&__type {
+			overflow: hidden;
+			flex: 0 0 auto;
 
-		max-width: 100%;
-		padding: 0 10px;
+			max-width: 100%;
+			padding: 0 10px;
 
-		text-overflow: ellipsis;
+			text-overflow: ellipsis;
 
-		color: white;
+			color: white;
 
-		font-size: 10px;
-	}
+			font-size: 10px;
+		}
 
-	&__name {
+		&__name {
 
-		overflow: hidden;
+			overflow: hidden;
 
-		min-width: 0;
-		margin: 0 8px;
+			min-width: 0;
+			margin: 0 8px;
 
-		white-space: nowrap;
-		text-overflow: ellipsis;
+			white-space: nowrap;
+			text-overflow: ellipsis;
 
-		color: #2f343d;
+			color: #2f343d;
 
-		font-size: 14px;
-		line-height: 1.5;
-	}
+			font-size: 14px;
+			line-height: 1.5;
+		}
 
-	&__details {
-		margin: 0 8px 2px;
+		&__details {
+			margin: 0 8px 2px;
 
-		white-space: nowrap;
-		text-overflow: ellipsis;
+			white-space: nowrap;
+			text-overflow: ellipsis;
 
-		font-size: 12px;
-	}
+			font-size: 12px;
+		}
 
-	&__bold {
-		font-weight: 600;
-	}
+		&__bold {
+			font-weight: 600;
+		}
 
-	&__content {
-		display: flex;
+		&__content {
+			display: flex;
 
-		overflow: hidden;
-		flex-direction: column;
+			overflow: hidden;
+			flex-direction: column;
 
-		flex: 1 1 100%;
+			flex: 1 1 100%;
 
-		color: #9ea2a8;
+			color: #9ea2a8;
+		}
 	}
 }
 

diff --git a/app/theme/client/imports/general/base.css b/app/theme/client/imports/general/base.css
@@ -219,3 +219,52 @@ button {
 .hidden {
 	display: none;
 }
+
+.loading-animation {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+
+	display: flex;
+
+	text-align: center;
+	align-items: center;
+	justify-content: center;
+}
+
+.loading-animation > .bounce {
+	display: inline-block;
+
+	width: 10px;
+	height: 10px;
+	margin: 2px;
+
+	animation: loading-bouncedelay 1.4s infinite ease-in-out both;
+
+	border-radius: 100%;
+	background-color: rgba(255, 255, 255, 0.6);
+}
+
+.loading-animation .bounce1 {
+	-webkit-animation-delay: -0.32s;
+	animation-delay: -0.32s;
+}
+
+.loading-animation .bounce2 {
+	-webkit-animation-delay: -0.16s;
+	animation-delay: -0.16s;
+}
+
+@keyframes loading-bouncedelay {
+	0%,
+	80%,
+	100% {
+		transform: scale(0);
+	}
+
+	40% {
+		transform: scale(1);
+	}
+}
diff --git a/app/webdav/client/index.js b/app/webdav/client/index.js
@@ -2,6 +2,7 @@ import './actionButton';
 import './addWebdavAccount.html';
 import './addWebdavAccount';
 import './webdavFilePicker.html';
+import './webdavFilePicker.css';
 import './webdavFilePicker';
 import './selectWebdavAccount.html';
 import './selectWebdavAccount';

diff --git a/app/webdav/client/startup/messageBoxActions.js b/app/webdav/client/startup/messageBoxActions.js
@@ -49,8 +49,9 @@ Meteor.startup(function() {
 							accountId: account._id,
 						},
 						title,
+						modifier: 'modal',
 						content: 'webdavFilePicker',
-						showCancelButton: true,
+						showCancelButton: false,
 						showFooter: false,
 						showConfirmButton: false,
 						closeOnCancel: true,