added "disabled" and transparent background for buttons elements

backend/src/db/api/ui_elements.js

@@ -55,6 +55,7 @@ class Ui_elementsDBApi extends GenericDBApi {
           label: 'Navigation: Forward',
           navLabel: 'Forward',
           navType: 'forward',
+          navDisabled: false,
           transitionReverseMode: 'auto_reverse',
           transitionDurationSec: 0.7,
           appearDelaySec: 0,
@@ -69,6 +70,7 @@ class Ui_elementsDBApi extends GenericDBApi {
           label: 'Navigation: Back',
           navLabel: 'Back',
           navType: 'back',
+          navDisabled: false,
           transitionReverseMode: 'auto_reverse',
           transitionDurationSec: 0.7,
           appearDelaySec: 0,

frontend/src/pages/constructor.tsx

@@ -128,6 +128,7 @@ type CanvasElement = {
   descriptionBackgroundColor?: string;
   navLabel?: string;
   navType?: NavigationButtonKind;
+  navDisabled?: boolean;
   targetPageId?: string;
   transitionVideoUrl?: string;
   transitionReverseMode?: 'auto_reverse' | 'separate_video';
@@ -505,6 +506,7 @@ const createDefaultElement = (
       ...base,
       navLabel: getNavigationButtonLabel(type),
       navType: getNavigationButtonKind(type),
+      navDisabled: false,
       iconUrl: '',
       transitionReverseMode: 'auto_reverse',
     };
@@ -1955,6 +1957,9 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
   const onCanvasElementClick = (element: CanvasElement) => {
     if (!isConstructorEditMode) {
       if (isNavigationElementType(element.type)) {
+        if (element.navDisabled) {
+          return;
+        }
         const direction =
           element.navType === 'back' || element.type === 'navigation_prev'
             ? 'back'
@@ -2859,10 +2864,17 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
                 (element.type === 'navigation_next' ||
                   element.type === 'navigation_prev');
               const hasTransparentBackground =
-                element.type === 'description' &&
-                !element.iconUrl &&
-                (!element.descriptionBackgroundColor ||
-                  element.descriptionBackgroundColor === 'transparent');
+                (element.type === 'description' &&
+                  !element.iconUrl &&
+                  (!element.descriptionBackgroundColor ||
+                    element.descriptionBackgroundColor === 'transparent')) ||
+                element.type === 'navigation_next' ||
+                element.type === 'navigation_prev' ||
+                element.type === 'tooltip' ||
+                element.type === 'gallery' ||
+                element.type === 'carousel';
+              const isNavDisabled =
+                isNavigationElementType(element.type) && element.navDisabled;
 
               return (
                 <button
@@ -2876,7 +2888,11 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
                   } ${
                     isNavigationIconElement ? 'flex items-center justify-center' : ''
                   } ${
-                    isConstructorEditMode ? 'cursor-move' : 'cursor-pointer'
+                    isConstructorEditMode
+                      ? 'cursor-move'
+                      : isNavDisabled
+                        ? 'cursor-not-allowed opacity-50'
+                        : 'cursor-pointer'
                   } ${
                     selectedElementId === element.id
                       ? 'border-blue-500 bg-blue-50 border shadow'
@@ -3198,6 +3214,20 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
                           }
                         />
                       </div>
+                      <div>
+                        <label className='flex items-center gap-2 text-[11px] font-semibold text-gray-600'>
+                          <input
+                            type='checkbox'
+                            checked={selectedElement.navDisabled || false}
+                            onChange={(event) =>
+                              updateSelectedElement({
+                                navDisabled: event.target.checked,
+                              })
+                            }
+                          />
+                          Disabled
+                        </label>
+                      </div>
                       <div>
                         <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
                           Icon

frontend/src/pages/page_elements/page_elements-project-edit.tsx

@@ -74,6 +74,7 @@ type ConstructorElement = {
   iconUrl?: string;
   navLabel?: string;
   navType?: 'forward' | 'back';
+  navDisabled?: boolean;
   targetPageId?: string;
   transitionVideoUrl?: string;
   transitionReverseMode?: 'auto_reverse' | 'separate_video';
@@ -222,6 +223,7 @@ const PageElementsProjectEditPage = () => {
   const [iconUrl, setIconUrl] = useState('');
   const [navLabel, setNavLabel] = useState('');
   const [navType, setNavType] = useState<'forward' | 'back'>('forward');
+  const [navDisabled, setNavDisabled] = useState(false);
   const [targetPageId, setTargetPageId] = useState('');
   const [transitionVideoUrl, setTransitionVideoUrl] = useState('');
   const [transitionReverseMode, setTransitionReverseMode] = useState<'auto_reverse' | 'separate_video'>('auto_reverse');
@@ -278,6 +280,7 @@ const PageElementsProjectEditPage = () => {
     setIconUrl(String(item.iconUrl || ''));
     setNavLabel(String(item.navLabel || ''));
     setNavType(item.navType === 'back' ? 'back' : 'forward');
+    setNavDisabled(Boolean(item.navDisabled));
     setTargetPageId(String(item.targetPageId || ''));
     setTransitionVideoUrl(String(item.transitionVideoUrl || ''));
     setTransitionReverseMode(item.transitionReverseMode === 'separate_video' ? 'separate_video' : 'auto_reverse');
@@ -488,6 +491,7 @@ const PageElementsProjectEditPage = () => {
         nextElement.iconUrl = iconUrl.trim();
         nextElement.navLabel = navLabel.trim();
         nextElement.navType = navType;
+        nextElement.navDisabled = navDisabled;
         nextElement.targetPageId = targetPageId.trim();
         nextElement.transitionVideoUrl = transitionVideoUrl.trim();
         nextElement.transitionReverseMode = transitionReverseMode;
@@ -792,6 +796,17 @@ const PageElementsProjectEditPage = () => {
                       <option value='back'>Back</option>
                     </select>
                   </FormField>
+                  <FormField label='Disabled'>
+                    <label className='flex items-center gap-2 text-sm pt-2'>
+                      <input
+                        type='checkbox'
+                        checked={navDisabled}
+                        onChange={(event) => setNavDisabled(event.target.checked)}
+                        disabled={!hasUpdatePermission}
+                      />
+                      Button is disabled (not clickable)
+                    </label>
+                  </FormField>
                   <FormField label='Target page'>
                     <select
                       value={targetPageId}

frontend/src/pages/ui-elements/[id].tsx

@@ -153,6 +153,7 @@ const UiElementDetailsPage = () => {
   const [iconUrl, setIconUrl] = useState('');
   const [navLabel, setNavLabel] = useState('');
   const [navType, setNavType] = useState<'forward' | 'back'>('forward');
+  const [navDisabled, setNavDisabled] = useState(false);
   const [targetPageId, setTargetPageId] = useState('');
   const [transitionVideoUrl, setTransitionVideoUrl] = useState('');
   const [transitionReverseMode, setTransitionReverseMode] = useState<'auto_reverse' | 'separate_video'>('auto_reverse');
@@ -216,6 +217,7 @@ const UiElementDetailsPage = () => {
     setIconUrl(String(settings.iconUrl || ''));
     setNavLabel(String(settings.navLabel || ''));
     setNavType(settings.navType === 'back' ? 'back' : 'forward');
+    setNavDisabled(Boolean(settings.navDisabled));
     setTargetPageId(String(settings.targetPageId || ''));
     setTransitionVideoUrl(String(settings.transitionVideoUrl || ''));
     setTransitionReverseMode(settings.transitionReverseMode === 'separate_video' ? 'separate_video' : 'auto_reverse');
@@ -413,6 +415,7 @@ const UiElementDetailsPage = () => {
       defaultSettings.iconUrl = iconUrl.trim();
       defaultSettings.navLabel = navLabel.trim();
       defaultSettings.navType = navType;
+      defaultSettings.navDisabled = navDisabled;
       defaultSettings.targetPageId = targetPageId.trim();
       defaultSettings.transitionVideoUrl = transitionVideoUrl.trim();
       defaultSettings.transitionReverseMode = transitionReverseMode;
@@ -540,6 +543,7 @@ const UiElementDetailsPage = () => {
     minHeight,
     minWidth,
     name,
+    navDisabled,
     navLabel,
     navType,
     opacity,
@@ -747,6 +751,16 @@ const UiElementDetailsPage = () => {
                       <option value='back'>Back</option>
                     </select>
                   </FormField>
+                  <FormField label='Disabled'>
+                    <label className='inline-flex items-center gap-2 text-sm'>
+                      <input
+                        type='checkbox'
+                        checked={navDisabled}
+                        onChange={(event) => setNavDisabled(event.target.checked)}
+                      />
+                      Button is disabled (not clickable)
+                    </label>
+                  </FormField>
                   <FormField label='Target page ID (optional)'>
                     <input value={targetPageId} onChange={(event) => setTargetPageId(event.target.value)} />
                   </FormField>