call screen & position selection style

build/app.js

@@ -24,6 +24,8 @@ const store = window.store = new Store({
 		/*{text: 'Office User Right', value: 'OfficeUserRight'},
 		{text: 'Office User Left', value: 'OfficseUserLeft'},*/
 	],
+
+  tableComponentHeadlineText: 'Choose your role and seat'
 });
 
 

build/main.css

@@ -70,6 +70,20 @@ body {
     margin-left: 16px;
     cursor: pointer;
 }
+
+.bottom-buttons {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: auto 0;
+    width: 100%;
+}
+
+.bottom-buttons .button {
+  margin: 0;
+  min-width: 160px;
+}
+
 .button.primary {
     background: #584DDA;
     color: #fff;
@@ -167,9 +181,21 @@ input[type="text"]:focus {
     width: 100%;
     max-width: 1124px;
 }
+
+.content-fullpage {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
 .block {
     margin-bottom: 40px;
 }
+
+.content > .block:first-child {
+  padding-top: 60px;
+}
+
 .header {
     font-size: 32px;
     margin-bottom: 8px;
@@ -257,9 +283,9 @@ input[type="text"]:focus {
     display: block;
 }
 .canvas-resizer {
-    float: right;
+    /*float: right;*/
     position: relative;
-    top: 66px;
+    /*top: 66px;*/
 }
 .description.gray {
     color: #5C5C5C;

build/view/CallScreen.js

@@ -107,7 +107,7 @@ Screen.Conference = function() {
 		store.set('guestPosition'+currentCameraID, false);
 		var cameras = ['Left', 'Center', 'Right']
 		var cameraCanvas, canvasResizerEl,
-			dom = D.div( { cls: 'block', style: { marginBottom: '80px' } },
+			dom = D.div( { cls: 'block camera-block', style: { marginBottom: '80px' } },
 				D.div( { cls: 'header' }, cameras[currentCameraID%3] + ' Camera' ),
 				canvasResizerEl = CanvasResizer(
 					cameraCanvas = D.h( 'canvas', {
@@ -267,6 +267,7 @@ Screen.Conference = function() {
 					}
 						if( video1.videoWidth > 10 && store.get( 'videoinput' + currentCameraID ) ){
 							try{
+							  return;
 								await selfieSegmentation.send( { image: video1 } );
 							}catch( e ){
 
@@ -291,7 +292,7 @@ Screen.Conference = function() {
         D.h('button', {cls: ['button primary', {hidden: isConnected}], onclick: ()=>store.set('connection', true)}, 'Ready to connect')
       )
     ),
-		content = D.div({cls: 'content'},
+		content = D.div({cls: 'content content-fullpage'},
 
 			D.div({cls: 'block'},
 				D.div({cls: 'description gray'}, 'You are the host of this session'),

build/view/PositionSelect.js

 Screen.PositionSelect = function() {
-	return D.div({cls: [{
+	return D.div({cls: ['position-select', {
 		hidden: store.val('callScreenCamerasTune')
 			}]},
 	D.div({cls: 'block'},

build/view/TableComponent.js

@@ -64,10 +64,14 @@ var TableComponent = function(cfg) {
 		);
 	};
 
+  var tableComponentHeadlineText = store.get('tableComponentHeadlineText');
+	var tableComponentHeadline = D.div({cls: 'table-component-headline'}, tableComponentHeadlineText);
+
 	var roles = store.get(cfg.roles);
 	var guestPositions = store.get(cfg.guestPositions);
 
 	var dom = D.div({cls: 'table-component'},
+      tableComponentHeadline,
 			RoleRow(roles[1], guestPositions, false),
 			D.div({cls: 'table-component--table'}),
 			RoleRow(roles[0], guestPositions, true)

build/view/canvasResizer.css

@@ -8,17 +8,18 @@
 }
 .canvas-resizer {
     display: none;
+  background-color: rgba(0, 0, 0, 0.1);
 }
 .canvas-resizer canvas {
     cursor: ew-resize;
 }
 .canvas-resizer--mover-left {
     left: 0;
-    width: 0px;
+    width: 0;
     border-right: 2px solid #594CD7;
 }
 .canvas-resizer--mover-right {
     right: 0;
-    width: 0px;
+    width: 0;
     border-left: 2px solid #594CD7;
 }

build/view/tableComponent.css

+.position-select {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.table-component {
+  display: flex;
+  flex-direction: column;
+}
+
+.table-component-headline {
+  margin: 40px 0 30px;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 1.33;
+}
+
 .table-component--table {
     position: relative;
     border-radius: 24px;
-    width: 264px;
-    height: 80px;
+    width: 262px;
+    height: 77px;
     border: 1px solid #5C5C5C;
 }
 
 .table-component--guest-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
     width: 264px;
-    height: 64px;
+    min-height: 60px;
     position: relative;
 }
 
@@ -23,9 +44,8 @@
 }
 
 .table-component--guest-row--guest {
-    position: absolute;
+    padding: 0 5px;
     text-align: center;
-    transform: translateX(-50%);
     cursor: pointer;
 }
 
@@ -36,10 +56,10 @@
 
 .table-component--guest-row--guest__user-icon {
     display: inline-block;
-    margin: 8px;
+    margin: 8px 8px 0;
     position: relative;
     width: 32px;
-    height: 38px;
+    height: 32px;
 }
 
 .table-component--guest-row--guest__user-icon--obod {
@@ -91,3 +111,34 @@
 .table-component--guest-row--guest__selected, .table-component--guest-row--guest__disabled {
     cursor: auto;
 }
+
+.users-block {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 25px;
+  padding-top: 75px;
+}
+
+.camera-block {
+  display: flex;
+  flex-direction: column;
+}
+
+.camera-block button.dropdown-field__toggler {
+  width: 100%;
+}
+
+.camera-block .header {
+  margin-bottom: 22px;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 1.33;
+}
+
+.camera-block .form-field {
+  margin-top: 25px;
+}
+
+.camera-block .form-field__label-text {
+  display: none;
+}