style: disabled checkbox

make disabled checkbox as nextcloud
arawa · Aug 19, 2024 · e34c3b6 · e34c3b6
1 parent b099136
commit e34c3b6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 17 deletions.
diff --git 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
@@ -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>