share map responsive

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

@@ -1,37 +1,41 @@
-
 .rc-modal {
 	min-width: 400px;
-  background: white;
 
-  boder-radius: 15px;
 	animation: dropdown-show 0.3s cubic-bezier(0.45, 0.05, 0.55, 0.95);
 
+	background: white;
+
 	box-shadow: 0 0 2px 0 rgba(47, 52, 61, 0.08), 0 0 12px 0 rgba(47, 52, 61, 0.12);
 
 	&-wrapper {
-		padding: 10px;
-		z-index: 10;
-    display: flex;
 		position: fixed;
+		z-index: 10;
 		top: 0;
-    left: 0;
 		right: 0;
 		bottom: 0;
+		left: 0;
+
+		display: flex;
+
+		padding: 10px;
+
 		background: rgba(47, 52, 61, 0.8);
 		align-items: center;
 		justify-content: center;
 	}
 
 	&__title {
-		text-align: left;
 		flex: 1 1 auto;
+
 		font-size: 16px;
 	}
 
 	&__close {
 		cursor: pointer;
 		transform: rotate(45deg);
+
 		font-size: 20px;
+
 		&:hover {
 			color: var(--color-link-active);
 		}
@@ -40,41 +44,51 @@
 	&__header {
 		display: flex;
 		flex-direction: row;
+
+		margin-bottom: -16px;
 		padding: 16px;
 
 		font-size: 21px;
 		justify-content: flex-end;
 	}
+
 	&__content {
-    padding: 16px;
 		display: flex;
 
 		flex-direction: column;
 
+		padding: 16px;
+
 		animation: dropdown-show 0.1s cubic-bezier(0.45, 0.05, 0.55, 0.95);
 
 		white-space: nowrap;
 
 		background-color: var(--modal-background);
 	}
+
 	&__footer {
-    padding: 16px;
-    background: #F7F8FA;
 		display: flex;
+
+		padding: 16px;
+
+		background: #f7f8fa;
 		justify-content: space-between;
+
 		& > .rc-button {
 			margin: 0;
 		}
 	}
 }
+
 @media (width <= 400px) {
 	.rc-modal {
 		top: initial !important;
 		bottom: 0;
 		left: 0 !important;
+
+		width: 100%;
 		min-width: 100%;
 		max-width: 100%;
-		width: 100%;
 		margin: 0 16px;
 
 		animation: dropup-show 0.3s cubic-bezier(0.45, 0.05, 0.55, 0.95);

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

@@ -104,8 +104,6 @@
 }
 
 .upload-preview {
-	padding: 1rem;
-
 	& .upload-preview-file {
 		height: 200px;
 

packages/rocketchat-ui-message/startup/messageBoxActions.js

@@ -1,4 +1,4 @@
-/* globals fileUpload chatMessages AudioRecorder device popover */
+/* globals fileUpload chatMessages AudioRecorder device popover modal */
 
 import mime from 'mime-type/with-db';
 import {VRecDialog} from 'meteor/rocketchat:ui-vrecord';
@@ -90,7 +90,7 @@ RocketChat.messageBox.actions.add('Share', 'My_location', {
 		const position = RocketChat.Geolocation.get();
 		const latitude = position.coords.latitude;
 		const longitude = position.coords.longitude;
-		const text = `<img style="height: 250px; width: 500px;" src="https://maps.googleapis.com/maps/api/staticmap?zoom=14&size=250x500&markers=color:gray%7Clabel:%7C${ latitude },${ longitude }&key=${ RocketChat.settings.get('MapView_GMapsAPIKey') }" />`;
+		const text = `<div class="upload-preview"><div class="upload-preview-file" style="background-size: cover; box-shadow: 0 0 0px 1px #dfdfdf; border-radius: 2px; height: 250px; width:100%; max-width: 500px; background-image:url(https://maps.googleapis.com/maps/api/staticmap?zoom=14&size=500x250&markers=color:gray%7Clabel:%7C${ latitude },${ longitude }&key=${ RocketChat.settings.get('MapView_GMapsAPIKey') })" ></div></div>`;
 
 		modal.open({
 			title: t('Share_Location_Title'),

packages/rocketchat-ui/client/lib/fileUpload.js

@@ -1,4 +1,4 @@
-/* globals fileUploadHandler, Handlebars, fileUpload */
+/* globals fileUploadHandler, Handlebars, fileUpload, modal */
 /* exported fileUpload */
 import _ from 'underscore';
 import s from 'underscore.string';

packages/rocketchat-ui/client/views/app/modal.html

@@ -27,9 +27,8 @@
 				</main>
 				<div class="rc-modal__footer">
 					{{# if showCancelButton}}
-					<input class="rc-button rc-button--nude js-close" type="submit" data-button="cancel" value="Cancel">
+						<input class="rc-button rc-button--nude js-close" type="submit" data-button="cancel" value="{{cancelButtonText}}">
 					{{/if}}
-
 					<input style="background-color:{{confirmButtonColor}}" class="rc-button rc-button--primary js-confirm" type="submit" data-button="create" value="{{confirmButtonText}}">
 
 				</div>

packages/rocketchat-ui/client/views/app/modal.js

@@ -2,10 +2,10 @@
 
 this.modal = {
 	renderedModal: null,
-	open(config = {
+	open(config = {}, fn) {
-		confirmButtonText: t('ok'),
+		config.confirmButtonText = config.confirmButtonText || t('Send');
-		cancelButtonText: t('Cancel')
+		config.cancelButtonText = config.cancelButtonText || t('Cancel');
-	}, fn) {
+
 		this.close();
 		this.renderedModal = Blaze.renderWithData(Template.rc_modal, config, document.body);
 		this.fn = fn;