Add config lang switch button to modal, minor ToC style changes

ramp4-pcar4 · Dec 9, 2024 · 6a01513 · 6a01513
1 parent 5fc3460
commit 6a01513
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 13 deletions.
diff --git a/src/components/editor.vue b/src/components/editor.vue
@@ -189,7 +189,7 @@
                 <div class="flex items-center justify-center border-b p-2">
                     <!-- Edit metadata button -->
                     <!-- Opens the edit metadata modal -->
-                    <button class="toc-popup-button" @click.stop="$vfm.open('metadata-edit-modal')">
+                    <button class="toc-popup-button border-gray-400" @click.stop="$vfm.open('metadata-edit-modal')">
                         <span class="align-middle inline-block pr-1"
                             ><svg
                                 clip-rule="evenodd"
@@ -637,7 +637,6 @@ window.addEventListener('resize', () => {
 
 .editor-button {
     padding: 5px 12px;
-    margin: 0px 10px;
     font-weight: 600;
     transition-duration: 0.2s;
 }

diff --git a/src/components/helpers/toc-options.vue b/src/components/helpers/toc-options.vue
@@ -34,21 +34,21 @@
             </template>
             <a
                 href="javascript:;"
-                class="flex items-center space-x-2 leading-snug text-left w-auto"
+                class="flex items-center leading-tight text-left w-auto"
                 :class="{
                     'disabled click-events-none cursor-not-allowed opacity-60': !copyAllowed
                 }"
                 @click="copyAllowed && copySlide()"
                 role="button"
                 aria-label="copy-contents"
             >
-                <span class="flex items-center gap-1">
+                <span class="flex items-center gap-0.5">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
                         height="17"
                         width="17"
                         viewBox="0 0 24 24"
-                        class="flex-shrink-0 mx-2 my-1"
+                        class="flex-shrink-0 mr-2"
                     >
                         <path
                             d="M5 22q-.825 0-1.413-.587Q3 20.825 3 20V6h2v14h11v2Zm4-4q-.825 0-1.412-.587Q7 16.825 7 16V4q0-.825.588-1.413Q8.175 2 9 2h9q.825 0 1.413.587Q20 3.175 20 4v12q0 .825-.587 1.413Q18.825 18 18 18Zm0-2h9V4H9v12Zm0 0V4v12Z"
@@ -59,21 +59,21 @@
             </a>
             <a
                 href="javascript:;"
-                class="flex leading-snug items-center text-left w-auto"
+                class="flex leading-tight items-center text-left w-auto"
                 :class="{
                     'disabled click-events-none cursor-not-allowed opacity-60': !deleteAllowed
                 }"
                 @click="deleteAllowed && clearSlide()"
                 role="button"
                 aria-label="DELETE"
             >
-                <span class="flex items-center gap-1.5">
+                <span class="flex items-center gap-1">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 110.61 122.88"
                         width="15"
                         height="15"
-                        class="mx-2 my-1"
+                        class="mr-2"
                     >
                         <path
                             d="M39.27,58.64a4.74,4.74,0,1,1,9.47,0V93.72a4.74,4.74,0,1,1-9.47,0V58.64Zm63.6-19.86L98,103a22.29,22.29,0,0,1-6.33,14.1,19.41,19.41,0,0,1-13.88,5.78h-45a19.4,19.4,0,0,1-13.86-5.78l0,0A22.31,22.31,0,0,1,12.59,103L7.74,38.78H0V25c0-3.32,1.63-4.58,4.84-4.58H27.58V10.79A10.82,10.82,0,0,1,38.37,0H72.24A10.82,10.82,0,0,1,83,10.79v9.62h23.35a6.19,6.19,0,0,1,1,.06A3.86,3.86,0,0,1,110.59,24c0,.2,0,.38,0,.57V38.78Zm-9.5.17H17.24L22,102.3a12.82,12.82,0,0,0,3.57,8.1l0,0a10,10,0,0,0,7.19,3h45a10.06,10.06,0,0,0,7.19-3,12.8,12.8,0,0,0,3.59-8.1L93.37,39ZM71,20.41V12.05H39.64v8.36ZM61.87,58.64a4.74,4.74,0,1,1,9.47,0V93.72a4.74,4.74,0,1,1-9.47,0V58.64Z"

diff --git a/src/components/metadata-editor.vue b/src/components/metadata-editor.vue
@@ -100,7 +100,7 @@
                                 />
                                 <button
                                     @click="renameProduct"
-                                    class="editor-button editor-forms-button bg-black text-white mr-0"
+                                    class="editor-button editor-forms-button bg-black text-white mr-0 ml-2"
                                     :class="{ 'input-error': error }"
                                     :disabled="changeUuid.length === 0 || checkingUuid || warning === 'rename'"
                                 >
@@ -185,7 +185,7 @@
                                                 generateRemoteConfig().then(fetchHistory);
                                             }
                                         "
-                                        class="editor-button editor-forms-button bg-black text-white mr-0"
+                                        class="editor-button editor-forms-button bg-black text-white mr-0 ml-2"
                                         :class="{ 'input-error': error }"
                                         :disabled="loadStatus === 'loading'"
                                         v-if="editExisting"
@@ -526,7 +526,17 @@
                         class="flex justify-center items-center"
                     >
                         <div @click.stop class="flex flex-col space-y-2">
-                            <h2 slot="header" class="text-2xl font-bold mb-3">{{ $t('editor.editMetadata') }}</h2>
+                            <h2 slot="header" class="text-2xl font-bold">{{ $t('editor.editMetadata') }}</h2>
+                            <!-- ENG/FR config toggle -->
+                            <div class="mb-3">
+                                <button
+                                    class="editor-button editor-forms-button border border-gray-300"
+                                    @click="swapLang()"
+                                    tabindex="0"
+                                >
+                                    {{ configLang === 'en' ? $t('editor.frenchConfig') : $t('editor.englishConfig') }}
+                                </button>
+                            </div>
                             <metadata-content
                                 :metadata="metadata"
                                 @metadata-changed="updateMetadata"
@@ -1814,11 +1824,14 @@ $font-list: 'Segoe UI', system-ui, ui-sans-serif, Tahoma, Geneva, Verdana, sans-
     .vfm__content button {
         border-radius: 3px;
         padding: 5px 12px;
-        margin: 0px 10px;
         font-weight: 600;
         transition-duration: 0.2s;
     }
 
+    .vfm__content button:focus {
+        transition-duration: 0.075s;
+    }
+
     .vfm__content button:hover:enabled {
         background-color: #dbdbdb;
         color: black;

diff --git a/src/components/slide-toc.vue b/src/components/slide-toc.vue
@@ -8,7 +8,7 @@
             <p class="ml-auto"></p>
             <!-- Add new slide button -->
             <!-- New slide will have a blank ENG and FR config, with some exceptions -->
-            <button class="mx-auto toc-popup-button py-0 px-2" @click="addNewSlide">
+            <button class="mx-auto toc-popup-button py-0 px-2 border-gray-300 font-semibold" @click="addNewSlide">
                 <span class="inline-block pr-1"
                     ><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24">
                         <path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z" />