[IMPROVE] new icons

packages/rocketchat-apps/assets/stylesheets/apps.css

@@ -146,23 +146,20 @@
 		margin: 0 7px;
 	}
 
-	.installer {
-		position: relative;
-
-		overflow: hidden;
-
-		width: 20px;
-		height: 20px;
+	&__wrap-actions {
+		& > .rc-icon--loading {
+			display: none;
+		}
 
-		&--marketplace-installer {
-			position: absolute;
-			top: 0;
+		&.loading {
+			& > .rc-icon--loading {
+				display: block;
 
-			width: 818px;
-			height: 20px;
+				animation: spin 1s linear infinite;
+			}
 
-			&.play {
-				animation: play90 steps(40) 4s forwards;
+			& > .apps-installer {
+				display: none;
 			}
 		}
 	}

packages/rocketchat-apps/client/admin/apps.html

@@ -66,14 +66,17 @@
 									{{/if}}
 								</td>
 								<td>
-									<!-- {{> icon icon="app-installed"}} -->
+
 									{{#if $eq latest._installed true}}
-										{{> icon icon="app-installed"}}
+										{{> icon icon="checkmark-circled" block="rc-icon--default-size"}}
 									{{/if}}
 									{{#if renderDownloadButton latest}}
-										<button class="js-install installer" data-app="{{appId}}">
-											{{> icon block="installer" icon="marketplace-installer"}}
-										</button>
+										<div class="rc-apps-marketplace__wrap-actions">
+											{{> icon block="rc-icon--default-size rc-icon" icon="loading"}}
+											<button class="js-install apps-installer" data-app="{{appId}}">
+												{{> icon block="installer rc-icon--default-size" icon="circled-arrow-down"}}
+											</button>
+										</div>
 									{{/if}}
 								</td>
 							</tr>

packages/rocketchat-apps/client/admin/apps.js

@@ -253,14 +253,15 @@ Template.apps.events({
 
 		const url = `${ HOST }/v1/apps/${ this.latest.id }/download/${ this.latest.version }`;
 
-		RocketChat.API.post('apps/', { url }).then(() => {
-			getInstalledApps(template);
-		}).catch((e) => {
-			toastr.error((e.xhr.responseJSON && e.xhr.responseJSON.error) || e.message);
-		});
-
 		// play animation
-		$(e.currentTarget).find('.rc-icon').addClass('play');
+		e.currentTarget.parentElement.classList.add('loading');
+
+		RocketChat.API.post('apps/', { url })
+			.then(() => {
+				getApps(template);
+				getInstalledApps(template);
+			})
+			.catch((e) => toastr.error((e.xhr.responseJSON && e.xhr.responseJSON.error) || e.message));
 	},
 	'keyup .js-search'(e, t) {
 		t.searchText.set(e.currentTarget.value);

packages/rocketchat-channel-settings-mail-messages/client/views/mailMessagesInstructions.html

@@ -3,7 +3,7 @@
 		{{#if selectedMessages}}
 			<div class="mail-messages__instructions mail-messages__instructions--selected">
 				<div class="mail-messages__instructions-wrapper">
-					{{> icon block="mail-messages__instructions-icon" icon="modal-success"}}
+					{{> icon block="mail-messages__instructions-icon rc-icon--default-size" icon="checkmark-circled"}}
 					<div class="mail-messages__instructions-text">
 							<span class="mail-messages__instructions-text-selected">{{selectedMessages.length}} Messages selected</span>
 							<span>Click here to clear the selection</span>
@@ -13,7 +13,7 @@
 		{{else}}
 			<div class="mail-messages__instructions">
 				<div class="mail-messages__instructions-wrapper">
-					{{> icon block="mail-messages__instructions-icon" icon="hand-pointer"}}
+					{{> icon block="mail-messages__instructions-icon rc-icon--default-size" icon="hand-pointer"}}
 					<div class="mail-messages__instructions-text">
 							{{_ "Click_the_messages_you_would_like_to_send_by_email"}}
 					</div>
@@ -25,7 +25,7 @@
 				<div class="rc-input__title">{{_ "To_users"}}</div>
 				<div class="rc-input__wrapper">
 					<div class="rc-input__icon">
-						{{> icon block="rc-input__icon-svg" icon="at"}}
+						{{> icon block="rc-input__icon-svg rc-icon--default-size" icon="at"}}
 					</div>
 					<div class="rc-tags">
 						{{#each user in selectedUsers}}
@@ -48,7 +48,7 @@
 				<div class="rc-input__title">{{_ "To_additional_emails"}}</div>
 				<div class="rc-input__wrapper">
 					<div class="rc-input__icon">
-						{{> icon block="rc-input__icon-svg" icon="mail"}}
+						{{> icon block="rc-input__icon-svg rc-icon--default-size" icon="mail"}}
 					</div>
 					<div class="rc-tags">
 						{{#each selectedEmails}}
@@ -64,7 +64,7 @@
 				<div class="rc-input__title">{{_ "Subject"}}</div>
 				<div class="rc-input__wrapper">
 					<div class="rc-input__icon">
-						{{> icon block="rc-input__icon-svg" icon="edit"}}
+						{{> icon block="rc-input__icon-svg rc-icon--default-size" icon="edit"}}
 					</div>
 					<input type="text" class="rc-input__element" value="{{_ "Mail_Messages_Subject" roomName}}" name="subject" autocomplete="off"/>
 				</div>

packages/rocketchat-message-attachments/client/messageAttachment.html

@@ -52,7 +52,7 @@
 					{{#if title_link}}
 						<a href="{{fixCordova title_link}}" target="_blank" rel="noopener noreferrer">{{#if isFile}} {{_ "Attachment_File_Uploaded"}}: {{/if}}{{title}}</a>
 						{{#if title_link_download}}
-							<a class="icon-download attachment-download-icon" href="{{fixCordova title_link}}" target="_blank" download="" rel="noopener noreferrer"></a>
+							<a class="attachment-download-icon" href="{{fixCordova title_link}}" target="_blank" download="" rel="noopener noreferrer">{{> icon icon="download"}}</a>
 						{{/if}}
 					{{else}}
 						{{title}}

packages/rocketchat-message-attachments/client/stylesheets/messageAttachments.css

@@ -65,13 +65,12 @@ html.rtl .attachment {
 	}
 
 	& .attachment-title {
+
+		color: #13679a;
+
 		font-size: 1.02rem;
 		font-weight: 500;
 		line-height: 1.5rem;
-
-		& > a {
-			font-weight: 500;
-		}
 	}
 
 	& .attachment-text {
@@ -138,11 +137,7 @@ html.rtl .attachment {
 	}
 
 	& .attachment-download-icon {
-		margin-left: 5px;
-		padding: 2px 5px;
-
-		border-width: 1px;
-		border-radius: 5px;
+		padding: 0 5px;
 	}
 
 	& .attachment-canvas {

packages/rocketchat-retention-policy/server/cronPruneMessages.js

@@ -27,10 +27,13 @@ function job() {
 
 		RocketChat.models.Rooms.find({
 			t: type,
-			_updatedAt: { $gte: lastPrune },
-			$or: [{ 'retention.enabled': { $eq: true } }, { 'retention.enabled': { $exists: false } }],
+			_updatedAt: { $gte: latest },
+			$or: [
+				{ 'retention.enabled': { $eq: true } },
+				{ 'retention.enabled': { $exists: false } },
+			],
 			'retention.overrideGlobal': { $ne: true },
-		}).forEach(({ _id: rid }) => {
+		}, { fields : { _id: 1 } }).forEach(({ _id: rid }) => {
 			RocketChat.cleanRoomHistory({ rid, latest, oldest, filesOnly, excludePinned });
 		});
 	});

packages/rocketchat-ui-account/client/accountProfile.html

@@ -118,7 +118,7 @@
 										<input name="email" type="text" class="rc-input__element" placeholder="{{_ "Email_Placeholder" }}" value="{{email}}" autocomplete="false" {{ifThenElse canChange '' 'disabled'}}>
 										{{#unless emailVerified}}
 											<div class="rc-input__icon rc-input__icon--right">
-												{{> icon block="rc-input__icon-svg" icon="cross-circled"}}
+												{{> icon block="rc-input__icon-svg" icon="circle-cross"}}
 											</div>
 										{{else}}
 											<div class="rc-input__icon rc-input__icon--right">

packages/rocketchat-ui-clean-history/client/lib/startup.js

@@ -8,7 +8,7 @@ Meteor.startup(() => {
 		id: 'clean-history',
 		anonymous: true,
 		i18nTitle: 'Prune_Messages',
-		icon: 'trash',
+		icon: 'eraser',
 		template: 'cleanHistory',
 		order: 250,
 		condition: () => RocketChat.authz.hasAllPermission('clean-channel-history', Session.get('openedRoom')),

packages/rocketchat-ui-clean-history/client/views/cleanHistory.html

@@ -107,7 +107,7 @@
 				{{/unless}}
 			</p>
 			<div class="pruning-wrapper">
-				{{> icon icon="loading-thin"}}
+				{{> icon icon="loading" block="rc-icon"}}
 				<div class="pruning__text">
 					{{prunedCount}}
 				</div>
@@ -124,7 +124,7 @@
 		<main class="rc-user-info__pruning">
 			<p class="pruning__header">{{_ "Prune_finished"}}</p>
 			<div class="pruning-wrapper prune__finished">
-				{{> icon icon="loading-thin-done"}}
+				{{> icon icon="check" block="rc-icon"}}
 				<div class="pruning__text">
 					{{prunedCount}}
 				</div>

packages/rocketchat-ui-clean-history/client/views/stylesheets/cleanHistory.css

@@ -33,12 +33,16 @@
 		color: #12c212;
 	}
 
-	& svg {
+	& .rc-icon--loading {
 		width: 16rem;
 		height: 16rem;
 		margin: 1rem 0;
 
-		animation: pruningSpin 2s linear infinite;
+		animation: spin 2s linear infinite;
+	}
+
+	& .rc-icon--check {
+		font-size: 1rem;
 	}
 
 	& .pruning__text {
@@ -53,13 +57,3 @@
 		margin-top: calc(-8rem + 1.5em);
 	}
 }
-
-@keyframes pruningSpin {
-	0% {
-		transform: rotate(0deg);
-	}
-
-	100% {
-		transform: rotate(360deg);
-	}
-}

packages/rocketchat-ui-flextab/client/tabs/uploadedFilesList.js

@@ -87,7 +87,7 @@ Template.uploadedFilesList.helpers({
 		}
 
 		return {
-			id: 'file-generic',
+			id: 'clip',
 			type: 'generic',
 			extension,
 		};
@@ -132,7 +132,7 @@ Template.uploadedFilesList.events({
 						{
 							items: [
 								{
-									icon: 'import',
+									icon: 'download',
 									name: t('Download'),
 									action: () => {
 										const a = document.createElement('a');

packages/rocketchat-ui-master/public/README.md

@@ -0,0 +1,13 @@
+HOW INSERT A NEW ICON
+
+paste your icon on `./icons` folder
+
+run
+
+````
+node generateSprite.js
+node generateHTML.js
+
+git add icon.html icons icons.svg
+....
+```

packages/rocketchat-ui-master/public/generateHTML.js

@@ -0,0 +1,79 @@
+const fs = require('fs');
+
+const sort = function(a, b) {
+	if (a.toLocaleLowerCase() < b.toLocaleLowerCase()) {
+		return -1;
+	}
+	if (a.toLocaleLowerCase() > b.toLocaleLowerCase()) {
+		return 1;
+	}
+	return 0;
+};
+
+const iconHTML = (name) => `<div class="icon" title="${ name }"><svg><use href="#icon-${ name }"/></svg></div>`;
+
+const header = `<html><body><style>
+	* {
+		box-sizing: border-box;
+	}
+	.grid {
+		display: grid;
+		grid-auto-flow: dense;
+		max-width: 380px;
+		margin: 0 auto;
+		border: 5px solid #ccc;
+		grid-template-columns: repeat(auto-fill, 20px);
+		grid-gap: 5px;
+		background: #ccc;
+
+	}
+	.icon {
+		background: white;
+	}
+	svg {
+		display: inline-block;
+		width: 20px;
+		height: 20px;
+		color: blue;
+}
+</style><div class="grid">`;
+
+const start = async() => {
+	const html = fs.createWriteStream('icons.html', { flags: 'w' });
+	html.write(header);
+	try {
+		await new Promise((resolve) => {
+			fs.readdir('./icons', async(err, files) => {
+				files
+					.sort(sort)
+					.filter((file) => {
+						if (!/\.svg/.test(file)) {
+							console.log(`invalid extension ${ file }`);
+							return false;
+						}
+						return true;
+					}).forEach(async(file) => {
+						const name = file.replace('.svg', '').toLocaleLowerCase();
+						console.log(name);
+						html.write(iconHTML(name));
+					});
+				resolve();
+			});
+
+		});
+
+	} catch (error) {
+		console.error(error);
+	} finally {
+		html.write(fs.readFileSync('./icons.svg'));
+		html.write('</div></body></html>');
+		html.end();
+	}
+};
+
+try {
+	start();
+
+} catch (error) {
+	console.error(error);
+}