Overhauled the UI/UX of the webdav file picker

RocketChat · Jul 19, 2019 · 4153e26 · 4153e26
1 parent 4747c39
commit 4153e26
Show file tree

Hide file tree

Showing 11 changed files with 606 additions and 136 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
@@ -257,10 +257,6 @@ button {
 	animation-delay: -0.16s;
 }
 
-.file-picker-loading .loading-animation > .bounce {
-	background-color: #444444;
-}
-
 @keyframes loading-bouncedelay {
 	0%,
 	80%,

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,