wip: more

bitfocus · Jul 3, 2024 · d611e7d · d611e7d
1 parent e342a4c
commit d611e7d
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 32 deletions.
diff --git a/webui/src/Buttons/ActionRecorder/RecorderSessionFinishModal.tsx b/webui/src/Buttons/ActionRecorder/RecorderSessionFinishModal.tsx
@@ -53,7 +53,6 @@ export function RecorderSessionFinishModal({ doClose, sessionId }: RecorderSessi
 						<h5>Select destination</h5>
 					</CModalHeader>
 					<CModalBody>
-						{/* <CTabs activeTab="buttons"> */}
 						<CNav variant="tabs">
 							<CNavItem>
 								<CNavLink active={activeTab === 'buttons'} onClick={() => setActiveTab('buttons')}>
@@ -78,7 +77,6 @@ export function RecorderSessionFinishModal({ doClose, sessionId }: RecorderSessi
 								</CRow>
 							</CTabPane>
 						</CTabContent>
-						{/* </CTabs> */}
 					</CModalBody>
 					<CModalFooter>
 						<CButton color="secondary" onClick={doClose}>

diff --git a/webui/src/ImportExport/Import/Full.tsx b/webui/src/ImportExport/Import/Full.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useContext, useMemo, useState } from 'react'
-import ClassNames from 'classnames'
 import { MyErrorBoundary, socketEmitPromise } from '../../util.js'
-import { CAlert, CButton, CFormCheck, CFormLabel, CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react'
+import { CAlert, CButton, CFormCheck, CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react'
 import { faCalendar, faClock, faDownload, faFileImport, faGlobe } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { ImportPageWizard } from './Page.js'
@@ -36,33 +35,42 @@ export function ImportFullWizard({ snapshot, instanceRemap, setInstanceRemap }:
 		[socket, notifier, setInstanceRemap]
 	)
 
+	const [activeTab, setActiveTab] = useState<'full' | 'buttons' | 'triggers'>('full')
+
 	return (
 		<>
-			{/* <CTabs activeTab="full"> */}
 			<CNav variant="tabs">
 				<CNavItem>
-					<CNavLink data-tab="full">
+					<CNavLink active={activeTab === 'full'} onClick={() => setActiveTab('full')}>
 						<FontAwesomeIcon icon={faGlobe} /> Full Import
 					</CNavLink>
 				</CNavItem>
 				<CNavItem>
-					<CNavLink data-tab="buttons" disabled={!snapshot.controls}>
+					<CNavLink
+						active={activeTab === 'buttons'}
+						onClick={() => setActiveTab('buttons')}
+						disabled={!snapshot.controls}
+					>
 						<FontAwesomeIcon icon={faCalendar} /> Buttons
 					</CNavLink>
 				</CNavItem>
 				<CNavItem>
-					<CNavLink data-tab="triggers" disabled={!snapshot.triggers}>
+					<CNavLink
+						active={activeTab === 'triggers'}
+						onClick={() => setActiveTab('triggers')}
+						disabled={!snapshot.triggers}
+					>
 						<FontAwesomeIcon icon={faClock} /> Triggers
 					</CNavLink>
 				</CNavItem>
 			</CNav>
 			<CTabContent className="no-height-limit">
-				<CTabPane data-tab="full">
+				<CTabPane visible={activeTab === 'full'}>
 					<MyErrorBoundary>
 						<FullImportTab snapshot={snapshot} />
 					</MyErrorBoundary>
 				</CTabPane>
-				<CTabPane data-tab="buttons">
+				<CTabPane visible={activeTab === 'buttons'}>
 					<MyErrorBoundary>
 						{snapshot.controls ? (
 							<ImportPageWizard
@@ -76,7 +84,7 @@ export function ImportFullWizard({ snapshot, instanceRemap, setInstanceRemap }:
 						)}
 					</MyErrorBoundary>
 				</CTabPane>
-				<CTabPane data-tab="triggers">
+				<CTabPane visible={activeTab === 'triggers'}>
 					<MyErrorBoundary>
 						{snapshot.triggers ? (
 							<ImportTriggersTab
@@ -90,7 +98,6 @@ export function ImportFullWizard({ snapshot, instanceRemap, setInstanceRemap }:
 					</MyErrorBoundary>
 				</CTabPane>
 			</CTabContent>
-			{/* </CTabs> */}
 		</>
 	)
 }
@@ -207,7 +214,7 @@ function FullImportTab({ snapshot }: FullImportTabProps) {
 				label="Settings"
 			/> */}
 
-			<CAlert color="info">
+			<CAlert color="info" className="margin-top">
 				All the connections will be imported, as they are required to be able to import any actions and feedbacks.
 			</CAlert>
 
@@ -236,22 +243,13 @@ function InputCheckbox({ config, allowKeys, keyName, setValue, label }: InputChe
 
 	return (
 		<div className="indent3">
-			<div className="form-check form-check-inline mr-1">
-				<CFormCheck
-					id={`check-${keyName}`}
-					checked={!disabled && !!config[keyName]}
-					onChange={setValue2}
-					disabled={disabled}
-				/>
-				<CFormLabel
-					htmlFor={`check-${keyName}`}
-					className={ClassNames({
-						disabled: disabled,
-					})}
-				>
-					{label}
-				</CFormLabel>
-			</div>
+			<CFormCheck
+				id={`check-${keyName}`}
+				label={label}
+				checked={!disabled && !!config[keyName]}
+				onChange={setValue2}
+				disabled={disabled}
+			/>
 		</div>
 	)
 }
diff --git a/webui/src/ImportExport/Import/Triggers.tsx b/webui/src/ImportExport/Import/Triggers.tsx
@@ -83,7 +83,7 @@ export function ImportTriggersTab({ snapshot, instanceRemap, setInstanceRemap }:
 				<tbody>
 					{Object.entries(snapshot.triggers || {}).map(([id, info]) => (
 						<tr key={id}>
-							<td>
+							<td className="compact">
 								<div className="form-check form-check-inline mr-1">
 									<CFormCheck data-id={id} checked={selectedTriggers.includes(id)} onChange={toggleTrigger} />
 								</div>

diff --git a/webui/src/Triggers/index.tsx b/webui/src/Triggers/index.tsx
@@ -113,7 +113,6 @@ export const Triggers = observer(function Triggers() {
 
 			<CCol xs={12} xl={6} className="secondary-panel">
 				<div className="secondary-panel-inner">
-					{/* <CTabs activeTab={activeTab} onActiveTabChange={doChangeTab}> */}
 					<CNav variant="tabs" role="tablist">
 						{!editItemId && (
 							<CNavItem>
@@ -144,7 +143,6 @@ export const Triggers = observer(function Triggers() {
 							</MyErrorBoundary>
 						</CTabPane>
 					</CTabContent>
-					{/* </CTabs> */}
 				</div>
 			</CCol>
 		</CRow>

diff --git a/webui/src/scss/_common.scss b/webui/src/scss/_common.scss
@@ -19,6 +19,12 @@ h4 {
 	}
 }
 
+.alert {
+	&.margin-top {
+		margin-top: 1rem;
+	}
+}
+
 .right {
 	float: right;
 }

diff --git a/webui/src/scss/_layout.scss b/webui/src/scss/_layout.scss
@@ -410,3 +410,7 @@ hr.slim {
 		grid-template-rows: auto 1fr;
 	}
 }
+
+.compact {
+	width: 0;
+}