feat(textarea-sync/lock-indicator): Add lock icon indicator

- Add a lock icon indicator on the textarea message sync switch to show when it is locked to chat widths - The lock icon dynamically appears based on the state of the textarea sync switch Changes summary: - Added a visual indicator for the textarea message sync switch: - A lock icon is displayed when the textarea width is locked to chat widths, providing a clear indication of the current synchronization state. - The lock icon dynamically appears or disappears based on the state of the textarea sync switch, offering users a straightforward way to understand the synchronization behavior.
itsmartashub · Jul 11, 2024 · fcb9b81 · fcb9b81
1 parent 7a08d29
commit fcb9b81
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 6 deletions.
diff --git a/src/js/app/components/icons.js b/src/js/app/components/icons.js
diff --git a/src/js/app/components/renderSwitch.js b/src/js/app/components/renderSwitch.js
@@ -1,3 +1,5 @@
+import { icon_lock } from './icons'
+
 function renderSwitchOption({ inputId, isChecked = false, icon, textTitle, textSubtitle }) {
 	return `
         <label class="gpth-switch" for="${inputId}">
@@ -26,9 +28,12 @@ function renderSmallCardOption({
 	min = 10,
 	max = 100,
 	unit = '%',
+	isLocked = false,
 }) {
+	const lockIcon = isLocked ? icon_lock : ''
+
 	return `
-        <div class="card card--range" data-gpth-err="${min}${unit} &hArr; ${max}${unit}">
+        <div class="card card--range ${isLocked ? 'is-locked' : ''}" data-gpth-err="${min}${unit} &hArr; ${max}${unit}">
             <label for="${inputId}" class="grid justify-center content-space-between p-2 gap-4 h-full w-full rounded-xl">
                 <div class="flex items-center gap-2 w-full">
                     <div class="card__output flex-none h-10 w-10 font-semibold rounded-full grid items-center justify-center" id="range-output-${inputId}">
@@ -43,7 +48,9 @@ function renderSmallCardOption({
                 </div>
 
                 <input type="${inputType}" id="${inputId}" value="${inputValue}" placeholder="${inputPlaceholder}" class="outline-none border-none" minlength="${min}" maxlength="${max}">
+
             </label>
+            ${lockIcon}
         </div>`
 }
 

diff --git a/src/js/app/mainAssetsUpgrade.js b/src/js/app/mainAssetsUpgrade.js
@@ -51,6 +51,7 @@ let assetsHtmlCode = `
 				min: 0,
 				max: 100,
 				unit: '%',
+				isLocked: true,
 			})}
         </div>
 
@@ -127,6 +128,8 @@ const loadSettings = async () => {
 
 const updateUI = (settings) => {
 	const isFullWidth = settings.w_chat_gpt === '100%'
+	const textareaWidthSlider = document.querySelector('#gpth-textarea-width-custom')
+	const textareaWidthCard = textareaWidthSlider?.closest('.card')
 
 	setElementProperty('.gpth-settings #gpth-full-width', 'checked', isFullWidth)
 	setElementProperty('.gpth-settings #gpth-full-width-custom', 'value', removePercentAndRem(settings.w_chat_gpt))
@@ -148,7 +151,14 @@ const updateUI = (settings) => {
 		removePercentAndRem(settings.w_prompt_textarea)
 	)
 
-	setElementProperty('.gpth-settings #gpth-textarea-width-custom', 'disabled', isSyncEnabled)
+	if (textareaWidthSlider) {
+		textareaWidthSlider.disabled = isSyncEnabled
+	}
+	if (textareaWidthCard) {
+		textareaWidthCard.classList.toggle('is-locked', isSyncEnabled)
+	}
+
+	// setElementProperty('.gpth-settings #gpth-textarea-width-custom', 'disabled', isSyncEnabled)
 
 	updateEditIconPosition(settings.w_chat_gpt)
 }

diff --git a/src/sass/gpthemes/theme-manager/components/_cards.scss b/src/sass/gpthemes/theme-manager/components/_cards.scss
@@ -309,6 +309,53 @@
             font-size: 0.8em;
             line-height: 1;
         }
+
+        &.is-locked {
+            position: relative;
+            cursor: not-allowed !important;
+
+            label {
+                pointer-events: none !important;
+                opacity: 0.6 !important;
+                filter: blur(0.5px);
+            }
+
+
+            // .icon-lock-wrapper {
+            //     display: block;
+            //     position: absolute;
+            //     top: 50%;
+            //     left: 50%;
+            //     transform: translate(-50%, -50%);
+            //     background-color: hsla(var(--accent-hsl) / 0.5);
+            //     width: 100%;
+            //     height: 100%;
+            //     display: grid;
+            //     place-items: center;
+            //     z-index: 10;
+            //     border-radius: inherit;
+
+            //     .icon-lock {
+            //         width: 1.5rem;
+            //         height: 1.5rem;
+            //         color: var(--c-accent);
+            //     }
+            // }
+
+            .icon-lock {
+                position: absolute;
+                top: 6%;
+                right: 7%;
+                // transform: translateY(-50%);
+                width: 1.5rem;
+                height: 1.5rem;
+                color: var(--c-accent);
+            }
+        }
+
+        &:not(.is-locked) .icon-lock {
+            display: none;
+        }
     }
 
 }
diff --git a/src/sass/gpthemes/theme-manager/components/_range.scss b/src/sass/gpthemes/theme-manager/components/_range.scss
@@ -21,9 +21,9 @@
 
         &:hover,
         &:focus {
-            --track-height: 0.8rem;
+            // --track-height: 0.8rem;
             --thumb-size-multiplier: 1.4;
-            --track-outline: 2px solid transparent;
+            --track-outline: 3px solid transparent;
         }
 
         &:focus {

diff --git a/src/sass/gpthemes/theme-manager/components/_switch.scss b/src/sass/gpthemes/theme-manager/components/_switch.scss
@@ -98,7 +98,7 @@
 
         input:checked + .slider {
             background-color: var(--c-accent);
-            border: transparent !important;
+            border-color: transparent !important;
 
             &::before {
                 transform: translateX(calc(var(--chb-w) - 145%));