[FIX] record popup on small screens (#11349)

RocketChat · Jul 17, 2018 · 831f757 · 831f757
1 parent e7d43d7
commit 831f757
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 52 deletions.
diff --git a/packages/rocketchat-ui-vrecord/client/VRecDialog.js b/packages/rocketchat-ui-vrecord/client/VRecDialog.js
@@ -1,9 +1,11 @@
+import _ from 'underscore';
+
 export const VRecDialog = new class {
 	constructor() {
 		this.opened = false;
 		this.initiated = false;
 		this.width = 400;
-		this.height = 280;
+		this.height = 290;
 	}
 
 	init() {
@@ -32,31 +34,40 @@ export const VRecDialog = new class {
 	close() {
 		$('.vrec-dialog').removeClass('show');
 		this.opened = false;
-
+		$(window).off('resize', this.remove);
 		if (this.video != null) {
 			return VideoRecorder.stop();
 		}
 	}
 
 	setPosition(dialog, source, anchor = 'left') {
-		const sourcePos = $(source).offset();
-		let top = sourcePos.top - this.height - 0;
-		if (top < 0) {
-			top = 10;
-		}
-		if (anchor === 'left') {
-			let right = window.innerWidth - (sourcePos.left + source.offsetWidth - 25);
-			if (right < 0) {
-				right = 10;
+
+		const _set = () => {
+			const sourcePos = $(source).offset();
+			let top = sourcePos.top - this.height - 5;
+
+			if (top < 0) {
+				top = 10;
 			}
-			return dialog.css({ top: `${ top }px`, right: `${ right }px` });
-		} else {
-			let left = (sourcePos.left - this.width) + 100;
-			if (left < 0) {
-				left = 10;
+			if (anchor === 'left') {
+				let right = window.innerWidth - (sourcePos.left + source.offsetWidth - 25);
+				if (right < 0) {
+					right = 10;
+				}
+				return dialog.css({ top: `${ top }px`, right: `${ right }px` });
+			} else {
+				let left = (sourcePos.left - this.width) + 100;
+				if (left < 0) {
+					left = 10;
+				}
+				return dialog.css({ top: `${ top }px`, left: `${ left }px` });
 			}
-			return dialog.css({ top: `${ top }px`, left: `${ left }px` });
-		}
+		};
+
+		const set = _.debounce(_set, 2000);
+		_set();
+		this.remove = set;
+		$(window).on('resize', set);
 
 	}
 

diff --git a/packages/rocketchat-ui-vrecord/client/vrecord.css b/packages/rocketchat-ui-vrecord/client/vrecord.css
@@ -1,10 +1,24 @@
+@media (width <= 500px) {
+	.vrec-dialog {
+		left: 0 !important;
+		right: 0 !important;
+		margin: 10px;
+
+		& > .video-container > video {
+			width: 100%;
+			height: 100%;
+			background: #000;
+		}
+	}
+}
+
 .vrec-dialog {
 	position: absolute;
 
 	visibility: hidden;
-
 	opacity: 0;
 	border-radius: 5px;
+	padding: 5px;
 	box-shadow:
 		0 1px 1px 0 rgba(0, 0, 0, 0.2),
 		0 2px 10px 0 rgba(0, 0, 0, 0.16);
@@ -17,39 +31,30 @@
 	}
 
 	& .buttons {
+		display: flex;
+		justify-content: space-between;
+
 		& .disabled {
 			background-color: desaturate(#02acec, 80%);
 		}
 
-		& > ul {
-			display: table;
-
-			width: 100%;
-
-			& > li {
-				display: table-cell;
-
-				margin: 0 2px;
-				padding: 6px 0;
-
-				border-bottom-width: 2px;
-
-				&.right-aligned {
-					text-align: right;
-				}
+		& .rc-button  {
+			min-width: 40px;
+			margin: 0;
+		}
 
-				&.left-aligned {
-					text-align: left;
-				}
-			}
+		&__wrapper {
+			display: flex;
 		}
 	}
 
 	& .video-container {
-		padding: 5px;
-
 		transform: scaleX(-1);
 		filter: FlipH;
+		border-radius: 5px;
+		overflow: hidden;
+		margin-bottom: 5px;
+		height: 240px;
 	}
 }
 

diff --git a/packages/rocketchat-ui-vrecord/client/vrecord.html b/packages/rocketchat-ui-vrecord/client/vrecord.html
@@ -4,17 +4,13 @@
 			<video width="320" height="240" src=""></video>
 		</div>
 		<div class="buttons">
-			<ul>
-				<li class="left-aligned border-secondary-background-color">
-					<button class="button primary record {{recordDisabled}}" {{recordDisabled}}>
-						<i class="{{recordIcon}}"></i>
-					</button>
-				</li>
-				<li class="right-aligned border-secondary-background-color">
-					<button class="button cancel">{{_ "Cancel"}}</button>
-					<button class="button primary ok {{okDisabled}}" {{okDisabled}}>{{_ "Ok"}}</button>
-				</li>
-			</ul>
+			<button class="rc-button rc-button--primary record rc-button--small {{recordDisabled}}" {{recordDisabled}}>
+				<i class="{{recordIcon}}"></i>
+			</button>
+			<span class="buttons__wrapper">
+				<button class="rc-button rc-button--nude rc-button--small cancel">{{_ "Cancel"}}</button>
+				<button class="rc-button rc-button--primary record rc-button--small ok {{okDisabled}}" {{okDisabled}}>{{_ "Ok"}}</button>
+			</span>
 		</div>
 	</div>
 </template>