grid

package.json

@@ -119,6 +119,7 @@
 		"jquery": "^3.2.1",
 		"ldapjs": "^1.0.1",
 		"mailparser-node4": "^2.0.2-2",
+		"masonry-layout": "^4.2.0",
 		"mime-db": "^1.31.0",
 		"mime-type": "^3.0.5",
 		"moment": "^2.19.3",

packages/rocketchat-google-vision/.npm/package/npm-shrinkwrap.json

@@ -253,11 +253,6 @@
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
       "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
     },
-    "fast-json-stable-stringify": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
-      "from": "fast-json-stable-stringify@>=2.0.0 <3.0.0"
-    },
     "forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@@ -358,9 +353,9 @@
       "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
     },
     "grpc": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/grpc/-/grpc-1.7.2.tgz",
-      "integrity": "sha512-GH6xziNGjW8LAtqQ3HmYI7Tx8BIlr46iaMRXHfh46kkaOP6PNWUx47ULNTUlXSYR3P00d0Pl8uzodTLwPk805w==",
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/grpc/-/grpc-1.7.3.tgz",
+      "integrity": "sha512-7zXQJlDXMr/ZaDqdaIchgclViyoWo8GQxZSmFUAxR8GwSr28b6/BTgF221WG+2W693jpp74XJ/+I9DcPXsgt9Q==",
       "dependencies": {
         "abbrev": {
           "version": "1.0.9",

packages/rocketchat-i18n/i18n/en.i18n.json

@@ -859,6 +859,7 @@
   "Install_FxOs_done": "Great! You can now use Rocket.Chat via the icon on your homescreen. Have fun with Rocket.Chat!",
   "Install_FxOs_error": "Sorry, that did not work as intended! The following error appeared:",
   "Install_FxOs_follow_instructions": "Please confirm the app installation on your device (press \"Install\" when prompted).",
+  "Install_package": "Install package",
   "Installation": "Installation",
   "Installed_at": "Installed at",
   "Instance_Record": "Instance Record",
@@ -2132,4 +2133,4 @@
   "your_message_optional": "your message (optional)",
   "Your_password_is_wrong": "Your password is wrong!",
   "Your_push_was_sent_to_s_devices": "Your push was sent to %s devices"
-}
+}

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

@@ -1,46 +1,63 @@
 <template name="rocketlets">
-	<section class="preferences-page">
+	<section class="preferences-page preferences-page--apps">
 		<header class="preferences-page__header">
 			{{> burger}}
 			<h2>{{_ "Manage_Rocketlets"}}</h2>
+			<button class="rc-button rc-button--primary" data-button="install">{{_ "Install_package"}}</button>
 		</header>
 		<div class="preferences-page__content">
 			{{#requiresPermission 'manage-rocketlets'}}
 				<div class="rc-discovery">
 					<div class="rc-discovery-wrap">
-						<div class="rc-discovery__item">
-							<div class="rc-discovery__item__image-wrap">
-								<div class="rc-discovery__item__image"></div>
-							</div>
-							<div class="rc-discovery__item__footer">
-								<div class="rc-discovery__container">
-									<div class="discovery__item__footer__title">Add New</div>
-									<div class="rc-discovery__item__footer__description">Install or import a new Rocketlet.</div>
-								</div>
-								<button class="rc-button rc-button--square rc-tooltip install" aria-label="Install">
-									{{> icon icon="plus"}}
-								</button>
-							</div>
-						</div>
-					</div>
-					{{#each rocketlets}}
-						<div class="rc-discovery-wrap">
+						{{#each rocketlets}}
 							<div class="rc-discovery__item">
-								<div class="rc-discovery__item__image-wrap">
-									<div class="rc-discovery__item__image" style="background-image: url({{ iconFileContent }})"></div>
+								<div class="rc-discovery__item-image-wrap">
+									<div class="rc-discovery__item-image" style="background-image: url({{ iconFileContent }})"></div>
 								</div>
-								<div class="rc-discovery__item__footer">
+								<div class="rc-discovery__item-footer">
 									<div class="rc-discovery__container">
-										<div class="discovery__item__footer__title">{{name}}</div>
-										<div class="rc-discovery__item__footer__description">{{description}}</div>
+										<div class="discovery__item-footer-title">{{name}}</div>
+										<div class="rc-discovery__item-footer-description">{{description}}</div>
 									</div>
 									<button class="rc-button rc-button--square rc-tooltip manage" aria-label="{{_ "Manage_the_Rocketlet"}}">
 										{{> icon icon="cog"}}
 									</button>
 								</div>
 							</div>
+						{{/each}}
+						{{#each rocketlets}}
+						<div class="rc-discovery__item">
+							<div class="rc-discovery__item-image-wrap">
+								<div class="rc-discovery__item-image" style="background-image: url({{ iconFileContent }})"></div>
+							</div>
+							<div class="rc-discovery__item-footer">
+								<div class="rc-discovery__container">
+									<div class="discovery__item-footer-title">{{name}}</div>
+									<div class="rc-discovery__item-footer-description">{{description}}</div>
+								</div>
+								<button class="rc-button rc-button--square rc-tooltip manage" aria-label="{{_ "Manage_the_Rocketlet"}}">
+									{{> icon icon="cog"}}
+								</button>
+							</div>
 						</div>
 					{{/each}}
+					{{#each rocketlets}}
+					<div class="rc-discovery__item">
+						<div class="rc-discovery__item-image-wrap">
+							<div class="rc-discovery__item-image" style="background-image: url({{ iconFileContent }})"></div>
+						</div>
+						<div class="rc-discovery__item-footer">
+							<div class="rc-discovery__container">
+								<div class="discovery__item-footer-title">{{name}}</div>
+								<div class="rc-discovery__item-footer-description">{{description}}</div>
+							</div>
+							<button class="rc-button rc-button--square rc-tooltip manage" aria-label="{{_ "Manage_the_Rocketlet"}}">
+								{{> icon icon="cog"}}
+							</button>
+						</div>
+					</div>
+				{{/each}}
+					</div>
 				</div>
 			{{/requiresPermission}}
 		</div>

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

@@ -1,3 +1,5 @@
+import Masonry from 'masonry-layout';
+
 Template.rocketlets.onCreated(function() {
 	const instance = this;
 	this.ready = new ReactiveVar(false);
@@ -5,6 +7,17 @@ Template.rocketlets.onCreated(function() {
 
 	RocketChat.API.get('rocketlets').then((result) => {
 		instance.rocketlets.set(result.rocketlets);
+		instance.ready.set(true);
+	});
+
+	Tracker.autorun(() => {
+		if (this.ready.get() === true) {
+			console.log('render');
+			const grid = new Masonry('.rc-discovery-wrap', {
+				itemSelector: '.rc-discovery__item',
+				columnWidth: 350
+			});
+		}
 	});
 });
 

packages/rocketchat-theme/client/imports/components/discovery.css

@@ -10,11 +10,7 @@
 	}
 
 	&-wrap {
-		display: flex;
-
 		margin: 0 -12px;
-		flex-wrap: wrap;
-		justify-content: flex-start;
 	}
 
 	&__container {
@@ -22,24 +18,33 @@
 	}
 
 	&__item {
-		min-width: 304px;
+		width: 350px;
+		height: 200px;
 		margin: 12px;
 		padding: 10px;
 
 		border-radius: 2px;
 		background: #f7f8fa;
 
-		&:hover &__image {
+		&--small {
+			width: 350px;
+		}
+
+		&--big {
+			width: 600px;
+		}
+
+		&:hover &-image {
 			transform: scale(1.1);
 		}
 
-		&__image-wrap {
+		&-image-wrap {
 			overflow: hidden;
 
 			height: 128px;
 		}
 
-		&__image {
+		&-image {
 			height: 128px;
 
 			transition: all 0.3s;
@@ -50,10 +55,10 @@
 			background: url(http://www.clickgratis.com.br/fotos-imagens/gatinho/aHR0cDovL3d3dy5jb21vZmF6ZXIub3JnL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDEyLzA3L2dhdGluaG8tcGVyc2EuanBn.jpg);
 			background-repeat: no-repeat;
 			background-position: 50%;
-			background-size: cover;
+			background-size: contain;
 		}
 
-		&__footer {
+		&-footer {
 			display: flex;
 
 			padding: 10px 10px 0;
@@ -62,13 +67,13 @@
 			line-height: 20px;
 			align-items: center;
 
-			&__title {
+			&-title {
 				margin-bottom: 4px;
 
 				font-size: 18px;
 			}
 
-			&__description {
+			&-description {
 				color: #9ea2a8;
 
 				font-size: 14px;

packages/rocketchat-theme/client/imports/general/forms.css

@@ -233,6 +233,10 @@
 		width: 100%;
 		padding: 25px;
 	}
+
+	&--apps .preferences-page__header {
+		justify-content: space-between;
+	}
 }
 
 @media (width < 780px) {