item show: details+notes: move click event to the whole header element

inventaire · Jul 16, 2024 · 5cc707c · 5cc707c
1 parent 02126d4
commit 5cc707c
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 31 deletions.
diff --git a/app/modules/inventory/components/item_details.svelte b/app/modules/inventory/components/item_details.svelte
@@ -37,24 +37,19 @@
 </script>
 
 <div class="item-details">
-  <div class="header">
-    <span class="section-label">{I18n('details')}</span>
-    {#if !restricted}
-      <span class="indicator" title={i18n('this is visible by anyone who can see this item')}>
-        {#if visibilitySummaryIconName}
-          {@html icon(visibilitySummaryIconName)}
-        {/if}
-      </span>
-      <button
-        title={i18n('edit')}
-        on:click={() => editMode = true}
-      >
-        {@html icon('pencil')}
-      </button>
-    {/if}
-  </div>
   {#if editMode}
+    <div class="header">
+      <span class="section-label">{I18n('details')}</span>
+      {#if !restricted}
+        <span class="indicator" title={i18n('this is visible by anyone who can see this item')}>
+          {#if visibilitySummaryIconName}
+            {@html icon(visibilitySummaryIconName)}
+          {/if}
+        </span>
+      {/if}
+    </div>
     <textarea
+      class="details"
       placeholder={`(${i18n('details_placeholder')})`}
       bind:value={details}
       use:autofocus
@@ -76,6 +71,26 @@
       </button>
     </div>
   {:else}
+    <button
+      class="header"
+      title={i18n('edit')}
+      on:click={() => editMode = true}
+    >
+      <span class="section-label">{I18n('details')}</span>
+      {#if !restricted}
+        <span>
+          <span class="indicator" title={i18n('this is visible by anyone who can see this item')}>
+            {#if visibilitySummaryIconName}
+              {@html icon(visibilitySummaryIconName)}
+            {/if}
+          </span>
+          <button>
+            {@html icon('pencil')}
+          </button>
+        </span>
+      {/if}
+    </button>
+
     <div class="text">
       {#if restricted}
         <p>{@html userContent(details)}</p>
@@ -110,9 +125,10 @@
     line-height: inherit;
   }
   .header{
-    @include display-flex(row, center);
+    @include display-flex(row, center, space-between);
+    width: 100%;
   }
-  .indicator{
-    margin-inline-start: auto;
+  .details{
+    margin-block-start: 0.5em;
   }
 </style>
diff --git a/app/modules/inventory/components/item_notes.svelte b/app/modules/inventory/components/item_notes.svelte
@@ -36,20 +36,18 @@
 </script>
 
 <div class="item-notes">
-  <div class="header">
-    <span class="section-label">{I18n('private notes')}</span>
-    <span class="indicator" title={i18n('this is visible by anyone who can see this item')}>
-      {@html icon('lock')}
-    </span>
-    <button
+  {#if editMode}
+    <div
+      class="header"
       title={i18n('edit')}
-      on:click={() => editMode = true}
     >
-      {@html icon('pencil')}
-    </button>
-  </div>
-  {#if editMode}
+      <span class="section-label">{I18n('private notes')}</span>
+      <span class="indicator" title={i18n('this is visible by anyone who can see this item')}>
+        {@html icon('lock')}
+      </span>
+    </div>
     <textarea
+      class="notes"
       placeholder={`(${i18n('notes_placeholder')})`}
       bind:value={notes}
       use:autofocus
@@ -71,6 +69,21 @@
       </button>
     </div>
   {:else}
+    <button
+      class="header"
+      title={i18n('edit')}
+      on:click={() => editMode = true}
+    >
+      <span class="section-label">{I18n('private notes')}</span>
+      <span>
+        <span class="indicator" title={i18n('this is visible by anyone who can see this item')}>
+          {@html icon('lock')}
+        </span>
+        <span>
+          {@html icon('pencil')}
+        </span>
+      </span>
+    </button>
     <div class="text">
       <button
         on:click={() => editMode = true}
@@ -109,7 +122,11 @@
     line-height: inherit;
   }
   .header{
-    @include display-flex(row, center);
+    @include display-flex(row, center, space-between);
+    width: 100%;
+  }
+  .notes{
+    margin-block-start: 0.5em;
   }
   .indicator{
     margin-inline-start: auto;