Adjust table elements for mobile view.

- we changed table structure of `toolbar-wrapper` with `div`
- so we also need to consider mobile view
- made some neccessary changes for mobileview because of structure change in cool.html.m4 ('toolbar-wrapper')
Signed-off-by: Darshan-upadhyay1110 <darshan.upadhyay@collabora.com>
Change-Id: I91cd2c3ffbb0d625a78852398f6773136e9a7f6b

browser/css/device-mobile.css

@@ -83,6 +83,8 @@ div#w2ui-overlay-actionbar.w2ui-overlay{
 	height: 36px;
 	position: relative;
 	z-index: 1002;
+	display: flex;
+	align-items: center; /* Align items vertically */
 }
 #toolbar-hamburger.menuwizard-opened {
 	width: 36px;
@@ -109,6 +111,12 @@ div#w2ui-overlay-actionbar.w2ui-overlay{
 	position: relative;
 	z-index: 1003;
 }
+#toolbar-mobile-center-space {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex: 1;
+}
 .editmode-off {
 	background: url('images/lc_closedocmobile.svg') no-repeat center !important;
 }
@@ -253,6 +261,7 @@ textarea.cool-annotation-textarea {
 #toolbar-wrapper.mobile{
 	border-top: none;
 	z-index: auto !important;
+	flex-direction: row;
 }
 
 .insertshape-grid {

browser/css/toolbar.css

@@ -69,7 +69,8 @@
 	padding: 4px;
 }
 #InsertMode.insert-mode-false,
-#PermissionMode.status-readonly-mode {
+#PermissionMode.status-readonly-mode,
+#MobilePermissionMode.status-readonly-mode {
 	background-color: var(--color-warning);
 	color: var(--color-primary-text);
 	border-radius: var(--border-radius);

browser/html/cool.html.m4

@@ -205,6 +205,9 @@ m4_ifelse(MOBILEAPP,[true],
      <div id="toolbar-wrapper">
        <div id="toolbar-logo"></div>
        <div id="toolbar-mobile-back" class="editmode-off"></div>
+       <div id="toolbar-mobile-center-space">
+        <div id="MobilePermissionMode" class="cool-font status-readonly-mode" style="padding: 3px 10px; display: none"> Read-only</div>
+       </div>
        <div id="toolbar-up"></div>
        <div id="toolbar-hamburger">
          <label class="main-menu-btn" for="main-menu-state">

browser/src/control/Control.MobileTopBar.js

@@ -205,9 +205,7 @@ L.Control.MobileTopBar = L.Control.extend({
 				toolbarDownButtons.forEach(function(id) {
 					toolbar.enable(id);
 				});
-				toolbar.hide('PermissionMode');
-				toolbar.hide('after-PermissionMode');
-				$('#tb_actionbar_item_before-PermissionMode').width('');
+				document.getElementById('MobilePermissionMode').style.display = 'none';
 			}
 		} else {
 			toolbar = w2ui['actionbar'];
@@ -217,10 +215,7 @@ L.Control.MobileTopBar = L.Control.extend({
 				});
 				toolbar.enable('comment_wizard');
 				if ($('#mobile-edit-button').is(':hidden')) {
-					toolbar.show('PermissionMode');
-					toolbar.show('after-PermissionMode');
-					$('#tb_actionbar_item_before-PermissionMode').width('50%');
-					$('#tb_actionbar_item_after-PermissionMode').width('50%');
+					document.getElementById('MobilePermissionMode').style.display = 'block';
 				}
 			}
 		}