fiddle with naming stuff

mcnuttandrew · Sep 27, 2024 · c2530ba · c2530ba
1 parent f6e2572
commit c2530ba
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 14 deletions.
diff --git a/apps/color-buddy/src/components/ContentEditable.svelte b/apps/color-buddy/src/components/ContentEditable.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   export let onChange: (str: string) => void;
   export let value: string;
-  export let limitWidth: boolean = false;
   export let useEditButton: boolean = false;
   export let onClick: () => void = () => {};
+  export let displayValue: string = value;
 
   let focused = false;
 </script>
@@ -12,6 +12,7 @@
   <input
     type="text"
     bind:value
+    class="border-2 border-gray-300 w-fit"
     on:blur={() => {
       onChange(value);
       focused = false;
@@ -32,19 +33,10 @@
         focused = true;
       }
     }}
-    class:wrap-title={limitWidth}
   >
-    {value}
+    {displayValue}
   </button>
 {/if}
-{#if useEditButton}
+{#if useEditButton && !focused}
   <button on:click={() => (focused = true)}>✎</button>
 {/if}
-
-<style>
-  .wrap-title {
-    max-width: 205px;
-    white-space: break-spaces;
-    line-break: anywhere;
-  }
-</style>
diff --git a/apps/color-buddy/src/content-modules/LeftPanel.svelte b/apps/color-buddy/src/content-modules/LeftPanel.svelte
@@ -84,6 +84,9 @@
       <ContentEditable
         onChange={(x) => colorStore.setCurrentPalName(x)}
         value={currentPal.name}
+        displayValue={`${currentPal.name.slice(0, 20)}${
+          currentPal.name.length > 20 ? "..." : ""
+        }`}
         useEditButton={true}
       />
     </div>
@@ -125,15 +128,15 @@
           </button>
           <div class="flex justify-between w-full px-2 items-center z-10">
             <span class="flex flex-col items-start">
-              <span>
+              <span class="flex max-w-5">
                 <ContentEditable
                   onChange={(x) => {
                     const updatedColors = [...colors];
                     updatedColors[idx] = Color.colorFromString(x, colorSpace);
                     colorStore.setCurrentPalColors(updatedColors);
                   }}
                   value={color.toHex()}
-                  useEditButton={false}
+                  useEditButton={true}
                 />
               </span>
               {#if colorNames[idx]}<span class="text-right text-xs">