wip: misc fixes

bitfocus · Jul 3, 2024 · 7d4b922 · 7d4b922
1 parent a71eaf6
commit 7d4b922
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 22 deletions.
diff --git a/webui/src/Buttons/ButtonGridPanel.tsx b/webui/src/Buttons/ButtonGridPanel.tsx
@@ -4,6 +4,7 @@ import {
 	CCol,
 	CForm,
 	CFormInput,
+	CFormLabel,
 	CModal,
 	CModalBody,
 	CModalFooter,
@@ -292,8 +293,18 @@ const EditPagePropertiesModal = forwardRef<EditPagePropertiesModalRef, EditPageP
 				</CModalHeader>
 				<CModalBody>
 					<CForm onSubmit={doAction}>
-						<CFormInput type="text" label="Name" value={pageName || ''} onChange={onNameChange} />
-						<CAlert color="info">You can use resize the grid in the Settings tab</CAlert>
+						<CRow className="mb-3">
+							<CFormLabel htmlFor="colFormName" className="col-sm-3 col-form-label col-form-label-sm">
+								Name
+							</CFormLabel>
+							<CCol sm={9}>
+								<CFormInput name="colFormName" type="text" value={pageName || ''} onChange={onNameChange} />
+							</CCol>
+							<CCol sm={12}>
+								<br />
+								<CAlert color="info">You can use resize the grid in the Settings tab</CAlert>
+							</CCol>
+						</CRow>
 					</CForm>
 				</CModalBody>
 				<CModalFooter>

diff --git a/webui/src/Buttons/EditButton.tsx b/webui/src/Buttons/EditButton.tsx
@@ -506,11 +506,15 @@ function TabsSection({ style, controlId, location, steps, runtimeProps, rotaryAc
 								isActiveAndCurrent={
 									stepId.toString() === selectedIndex.toString() && runtimeProps.current_step_id === stepId
 								}
+								active={selectedStep === `step:${stepId}`}
+								onClick={() => clickSelectedStep(`step:${stepId}`)}
 							/>
 						))}
 
 						<CNavItem key="feedbacks" className="nav-steps-special">
-							<CNavLink data-tab="feedbacks">Feedbacks</CNavLink>
+							<CNavLink active={selectedStep === 'feedbacks'} onClick={() => clickSelectedStep('feedbacks')}>
+								Feedbacks
+							</CNavLink>
 						</CNavItem>
 						{keys.length === 1 && (
 							<CNavItem key="add-step" className="nav-steps-special">
@@ -672,6 +676,8 @@ interface ActionSetTabProps {
 	isCurrent: boolean
 	// both selected and the current step
 	isActiveAndCurrent: boolean
+	active: boolean
+	onClick: () => void
 }
 function ActionSetTab({
 	controlId,
@@ -681,6 +687,8 @@ function ActionSetTab({
 	moreThanOneStep,
 	isCurrent,
 	isActiveAndCurrent,
+	active,
+	onClick,
 }: Readonly<ActionSetTabProps>) {
 	const socket = useContext(SocketContext)
 
@@ -730,7 +738,7 @@ function ActionSetTab({
 					></input>
 				</CNavLink>
 			) : (
-				<CNavLink onDoubleClick={showField} data-tab={`step:${stepId}`} className={linkClassname}>
+				<CNavLink onDoubleClick={showField} active={active} onClick={onClick} className={linkClassname}>
 					{displayText}
 				</CNavLink>
 			)}

diff --git a/webui/src/Buttons/index.tsx b/webui/src/Buttons/index.tsx
@@ -231,36 +231,35 @@ export const ButtonsPage = observer(function ButtonsPage({ hotPress }: ButtonsPa
 
 			<CCol xs={12} xl={6} className="secondary-panel">
 				<div className="secondary-panel-inner">
-					{/* <CTabs activeTab={activeTab} onActiveTabChange={doChangeTab}> */}
 					<CNav variant="tabs">
 						<CNavItem
 							className={classNames({
 								hidden: !selectedButton,
 							})}
 						>
-							<CNavLink data-tab="edit">
+							<CNavLink active={activeTab === 'edit'} onClick={() => doChangeTab('edit')}>
 								<FontAwesomeIcon icon={faCalculator} /> Edit Button{' '}
 								{selectedButton ? `${formatLocation(selectedButton)}` : '?'}
 							</CNavLink>
 						</CNavItem>
 						<CNavItem>
-							<CNavLink data-tab="presets">
+							<CNavLink active={activeTab === 'presets'} onClick={() => doChangeTab('presets')}>
 								<FontAwesomeIcon icon={faGift} /> Presets
 							</CNavLink>
 						</CNavItem>
 						<CNavItem>
-							<CNavLink data-tab="variables">
+							<CNavLink active={activeTab === 'variables'} onClick={() => doChangeTab('variables')}>
 								<FontAwesomeIcon icon={faDollarSign} /> Variables
 							</CNavLink>
 						</CNavItem>
 						<CNavItem>
-							<CNavLink data-tab="action-recorder">
+							<CNavLink active={activeTab === 'action-recorder'} onClick={() => doChangeTab('action-recorder')}>
 								<FontAwesomeIcon icon={faVideoCamera} /> Recorder
 							</CNavLink>
 						</CNavItem>
 					</CNav>
 					<CTabContent>
-						<CTabPane data-tab="edit">
+						<CTabPane visible={activeTab === 'edit'}>
 							<MyErrorBoundary>
 								{selectedButton && (
 									<EditButton
@@ -271,23 +270,22 @@ export const ButtonsPage = observer(function ButtonsPage({ hotPress }: ButtonsPa
 								)}
 							</MyErrorBoundary>
 						</CTabPane>
-						<CTabPane data-tab="presets">
+						<CTabPane visible={activeTab === 'presets'}>
 							<MyErrorBoundary>
 								<InstancePresets resetToken={tabResetToken} />
 							</MyErrorBoundary>
 						</CTabPane>
-						<CTabPane data-tab="variables">
+						<CTabPane visible={activeTab === 'variables'}>
 							<MyErrorBoundary>
 								<ConnectionVariables resetToken={tabResetToken} />
 							</MyErrorBoundary>
 						</CTabPane>
-						<CTabPane data-tab="action-recorder">
+						<CTabPane visible={activeTab === 'action-recorder'}>
 							<MyErrorBoundary>
 								<ActionRecorder key={tabResetToken} />
 							</MyErrorBoundary>
 						</CTabPane>
 					</CTabContent>
-					{/* </CTabs> */}
 				</div>
 			</CCol>
 		</CRow>

diff --git a/webui/src/Components/ButtonPreview.tsx b/webui/src/Components/ButtonPreview.tsx
@@ -58,7 +58,7 @@ export const ButtonPreview = React.memo(function ButtonPreview(props: ButtonPrev
 				}}
 				title={props.title}
 			>
-				{!props.preview && props.placeholder && <div className="placeholder">{props.placeholder}</div>}
+				{!props.preview && props.placeholder && <div className="button-placeholder">{props.placeholder}</div>}
 			</div>
 		</div>
 	)
@@ -126,7 +126,7 @@ export const ButtonPreviewBase = React.memo(function ButtonPreview(props: Button
 				}}
 				title={props.title}
 			>
-				{!props.preview && props.placeholder && <div className="placeholder">{props.placeholder}</div>}
+				{!props.preview && props.placeholder && <div className="button-placeholder">{props.placeholder}</div>}
 			</div>
 		</div>
 	)

diff --git a/webui/src/scss/_button-control.scss b/webui/src/scss/_button-control.scss
@@ -52,7 +52,7 @@
 		background-position: center;
 		background-repeat: no-repeat;
 
-		.placeholder {
+		.button-placeholder {
 			position: absolute;
 			top: 0;
 			left: 0;

diff --git a/webui/src/scss/_button-grid.scss b/webui/src/scss/_button-grid.scss
@@ -16,6 +16,10 @@
 		grid-template-columns: minmax(0, 1fr);
 	}
 
+	.right-buttons {
+		align-content: center;
+	}
+
 	.right-buttons .btn {
 		margin-top: 0;
 	}
@@ -65,6 +69,8 @@
 	flex-flow: row wrap;
 	justify-content: center;
 
+	margin-top: 1rem;
+
 	& > div {
 		white-space: nowrap;
 		margin-bottom: 1rem;
@@ -194,7 +200,7 @@
 				width: calc(var(--tile-inner-size) * 1px);
 				height: calc(var(--tile-inner-size) * 1px);
 
-				.placeholder {
+				.button-placeholder {
 					// shrink text with scaling
 					font-size: calc(var(--grid-scale) * 1.5rem);
 				}

diff --git a/webui/src/scss/_cloud.scss b/webui/src/scss/_cloud.scss
@@ -19,13 +19,9 @@
 	}
 
 	.form-label {
-		font-weight: bold;
 		margin-bottom: 0.1em;
 		padding-left: 0.3em;
 	}
-	.form-check-label {
-		font-weight: bold;
-	}
 
 	.callout {
 		margin-top: 0;

diff --git a/webui/src/scss/_common.scss b/webui/src/scss/_common.scss
@@ -124,6 +124,16 @@ code {
 .modal {
 	max-height: 94vh;
 	margin-top: 6vh;
+
+	.modal-header {
+		h1,
+		h2,
+		h3,
+		h4,
+		h5 {
+			margin: 0;
+		}
+	}
 }
 
 .btn-secondary {
@@ -149,6 +159,12 @@ code {
 	padding: 30px !important;
 }
 
+.form-check-label,
+.form-label {
+	font-weight: bold;
+	align-content: center;
+}
+
 .flex {
 	display: flex;
 }

diff --git a/webui/src/scss/_variables.scss b/webui/src/scss/_variables.scss
@@ -15,6 +15,7 @@ $form-switch-checked-color: #fff;
 $form-switch-focus-color: #fff;
 
 $btn-font-size-sm: 12px;
+$btn-font-size: 0.9rem;
 
 $modal-content-bg: #fff;
 $table-bg: #fff;