From e34c3b6e9e6f2146d06f207dba563693752a58b4 Mon Sep 17 00:00:00 2001
From: Sebastien Marinier <seb@smarinier.net>
Date: Mon, 19 Aug 2024 12:20:37 +0200
Subject: [PATCH] style: disabled checkbox

make disabled checkbox as nextcloud
---
 ts/Manager/App.scss    | 17 ++++++++++++++++-
 ts/Manager/RoomRow.tsx | 17 +----------------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/ts/Manager/App.scss b/ts/Manager/App.scss
index 96ff82d..e1f19ce 100644
--- a/ts/Manager/App.scss
+++ b/ts/Manager/App.scss
@@ -161,8 +161,23 @@ pre {
   .bbb-shrink {
     width: 44px;
     white-space: nowrap;
-  }
 
+	input[type="checkbox"]{
+
+		&+label:before {
+		border-radius: 3px;
+		border-width: 2px;
+		}
+
+		&:disabled+label:before {
+			opacity: .5;
+		}
+
+		&:not(input:checked):disabled+label:before {
+			background-color: transparent !important;
+		}
+	}
+  }
 
   th {
     padding: 14px 6px;
diff --git a/ts/Manager/RoomRow.tsx b/ts/Manager/RoomRow.tsx
index 721a7f4..5b3aa36 100644
--- a/ts/Manager/RoomRow.tsx
+++ b/ts/Manager/RoomRow.tsx
@@ -194,15 +194,7 @@ const RoomRow: React.FC<Props> = (props) => {
 		return <span></span>;
 	}
 
-<<<<<<< HEAD
-<<<<<<< HEAD
-	function edit(field: string, type: 'text' | 'number' = 'text', canEdit = true, options?) {
-=======
 	function edit(field: string, type: 'text' | 'number' = 'text', canEdit: boolean = true, options?) {
->>>>>>> 63daf83 (feat: manage view of rooms for moderators and users)
-=======
-	function edit(field: string, type: 'text' | 'number' = 'text', canEdit = true, options?) {
->>>>>>> 82951e9 (feat: sharing rooms with moderators and users)
 		return canEdit ?
 			<EditableValue field={field} value={room[field]} setValue={updateRoom} type={type} options={options} />
 			:
@@ -261,17 +253,10 @@ const RoomRow: React.FC<Props> = (props) => {
 				<td className="max-participants bbb-shrink">
 					{edit('maxParticipants', 'number', adminRoom, {min: minParticipantsLimit, max: maxParticipantsLimit < 0 ? undefined : maxParticipantsLimit})}
 				</td>
-				{adminRoom &&
 				<td className="record bbb-shrink">
-					<input id={'bbb-record-' + room.id} type="checkbox" className="checkbox" disabled={!props.restriction?.allowRecording} checked={room.record} onChange={(event) => updateRoom('record', event.target.checked)} />
+					<input id={'bbb-record-' + room.id} type="checkbox" className="checkbox" disabled={!adminRoom || !props.restriction?.allowRecording} checked={room.record} onChange={(event) => updateRoom('record', event.target.checked)} />
 					<label htmlFor={'bbb-record-' + room.id}></label>
 				</td>
-				}
-				{!adminRoom &&
-				<td className="record bbb-shrink">
-					<span className={'icon '+(room.record ? 'icon-checkmark' : 'icon-close')+' icon-visible'}></span>
-				</td>
-				}
 				<td className="bbb-shrink">
 					{<RecordingsNumber recordings={recordings} showRecordings={showRecordings} setShowRecordings={setShowRecordings} />}
 				</td>