From 4b6f0e3a78b9ad52d415e0ae99848e175fce08a8 Mon Sep 17 00:00:00 2001
From: Novout <novout@hotmail.com>
Date: Sun, 25 Sep 2022 14:43:07 -0300
Subject: [PATCH] chore(preferences): bars list in configuration

---
 ...ojectPreferencesContainerConfiguration.vue | 179 ++++++++++++++----
 ...torProjectPreferencesContainerKeyboard.vue |   4 -
 ...ditorProjectPreferencesContainerStyles.vue |  97 ----------
 packages/better-write-app/windi.config.ts     |   4 +-
 4 files changed, 143 insertions(+), 141 deletions(-)

diff --git a/packages/better-write-app/src/components/page/editor/project/preferences/container/EditorProjectPreferencesContainerConfiguration.vue b/packages/better-write-app/src/components/page/editor/project/preferences/container/EditorProjectPreferencesContainerConfiguration.vue
index 5f11d95c8..c3a6bb349 100644
--- a/packages/better-write-app/src/components/page/editor/project/preferences/container/EditorProjectPreferencesContainerConfiguration.vue
+++ b/packages/better-write-app/src/components/page/editor/project/preferences/container/EditorProjectPreferencesContainerConfiguration.vue
@@ -1,6 +1,6 @@
 <template>
   <EditorProjectPreferencesContainerSlot>
-    <div class="flex flex-col gap-2">
+    <div class="flex flex-col gap-1">
       <PreferencesContainerTitle> Idioma </PreferencesContainerTitle>
       <div>
         <div
@@ -26,44 +26,147 @@
         </div>
       </div>
     </div>
-    <PreferencesContainerTitle>
-      {{ t('editor.aside.configuration.entity.title') }}
-    </PreferencesContainerTitle>
-    <div class="wb-configuration">
-      <p class="text-sm">{{ t('editor.aside.configuration.bars') }}</p>
-      <InputBoolean v-model="EDITOR.configuration.bars" :specific="true" />
-    </div>
-    <div class="wb-configuration">
-      <p class="text-sm">{{ t('editor.aside.configuration.bottomBar') }}</p>
-      <InputBoolean v-model="EDITOR.configuration.bottomBar" :specific="true" />
-    </div>
-    <div class="wb-configuration">
-      <p class="text-sm">{{ t('editor.aside.configuration.transition') }}</p>
-      <InputBoolean
-        v-model="EDITOR.configuration.transition"
-        :specific="true"
-      />
-    </div>
-    <div class="wb-configuration">
-      <p class="text-sm">{{ t('editor.aside.configuration.autosave') }}</p>
-      <InputBoolean v-model="EDITOR.configuration.autosave" :specific="true" />
-    </div>
-    <div class="wb-configuration">
-      <p class="text-sm">{{ t('editor.aside.configuration.blocked') }}</p>
-      <InputBoolean v-model="EDITOR.configuration.blocked" :specific="true" />
+    <div>
+      <PreferencesContainerTitle>
+        {{ t('editor.aside.configuration.entity.title') }}
+      </PreferencesContainerTitle>
+      <div class="wb-preferences">
+        <p class="text-sm">{{ t('editor.aside.configuration.bars') }}</p>
+        <InputBoolean v-model="EDITOR.configuration.bars" :specific="true" />
+      </div>
+      <div class="wb-preferences">
+        <p class="text-sm">{{ t('editor.aside.configuration.bottomBar') }}</p>
+        <InputBoolean
+          v-model="EDITOR.configuration.bottomBar"
+          :specific="true"
+        />
+      </div>
+      <div class="wb-preferences">
+        <p class="text-sm">{{ t('editor.aside.configuration.transition') }}</p>
+        <InputBoolean
+          v-model="EDITOR.configuration.transition"
+          :specific="true"
+        />
+      </div>
+      <div class="wb-preferences">
+        <p class="text-sm">{{ t('editor.aside.configuration.autosave') }}</p>
+        <InputBoolean
+          v-model="EDITOR.configuration.autosave"
+          :specific="true"
+        />
+      </div>
+      <div class="wb-preferences">
+        <p class="text-sm">{{ t('editor.aside.configuration.blocked') }}</p>
+        <InputBoolean v-model="EDITOR.configuration.blocked" :specific="true" />
+      </div>
+      <div class="wb-preferences">
+        <p class="text-sm">
+          {{
+            t(
+              'editor.aside.configuration.entity.insertEntityInParagraphBreakLine'
+            )
+          }}
+        </p>
+        <InputBoolean
+          v-model="EDITOR.configuration.entity.insertEntityInParagraphBreakLine"
+          :specific="true"
+        />
+      </div>
     </div>
-    <div class="wb-configuration">
-      <p class="text-sm">
-        {{
-          t(
-            'editor.aside.configuration.entity.insertEntityInParagraphBreakLine'
-          )
-        }}
-      </p>
-      <InputBoolean
-        v-model="EDITOR.configuration.entity.insertEntityInParagraphBreakLine"
-        :specific="true"
-      />
+    <div>
+      <PreferencesContainerTitle>
+        {{ t('editor.aside.graph.title') }}
+      </PreferencesContainerTitle>
+      <div class="wb-preferences">
+        <p class="text-sm">
+          {{ t('editor.aside.commands.contents[0].title') }}
+        </p>
+        <InputBoolean
+          v-model="EDITOR.configuration.commands.paragraph.active"
+          :specific="true"
+        />
+      </div>
+      <div class="wb-preferences">
+        <p class="text-sm">
+          {{ t('editor.aside.commands.contents[1].title') }}
+        </p>
+        <InputBoolean
+          v-model="EDITOR.configuration.commands.headingTwo.active"
+          :specific="true"
+        />
+      </div>
+      <div class="wb-preferences">
+        <p class="text-sm">
+          {{ t('editor.aside.commands.contents[2].title') }}
+        </p>
+        <InputBoolean
+          v-model="EDITOR.configuration.commands.headingThree.active"
+          :specific="true"
+        />
+      </div>
+      <div class="wb-preferences">
+        <p class="text-sm">
+          {{ t('editor.aside.commands.contents[3].title') }}
+        </p>
+        <InputBoolean
+          v-model="EDITOR.configuration.commands.pageBreak.active"
+          :specific="true"
+        />
+      </div>
+      <div class="wb-preferences">
+        <p class="text-sm">
+          {{ t('editor.aside.commands.contents[4].title') }}
+        </p>
+        <InputBoolean
+          v-model="EDITOR.configuration.commands.lineBreak.active"
+          :specific="true"
+        />
+      </div>
+      <div class="wb-preferences">
+        <p class="text-sm">
+          {{ t('editor.aside.commands.contents[5].title') }}
+        </p>
+        <InputBoolean
+          v-model="EDITOR.configuration.commands.image.active"
+          :specific="true"
+        />
+      </div>
+      <div class="wb-preferences">
+        <p class="text-sm">
+          {{ t('editor.aside.commands.contents[6].title') }}
+        </p>
+        <InputBoolean
+          v-model="EDITOR.configuration.commands.dialogue.active"
+          :specific="true"
+        />
+      </div>
+      <div class="wb-preferences">
+        <p class="text-sm">
+          {{ t('editor.aside.commands.contents[7].title') }}
+        </p>
+        <InputBoolean
+          v-model="EDITOR.configuration.commands.checkbox.active"
+          :specific="true"
+        />
+      </div>
+      <div class="wb-preferences">
+        <p class="text-sm">
+          {{ t('editor.aside.commands.contents[8].title') }}
+        </p>
+        <InputBoolean
+          v-model="EDITOR.configuration.commands.list.active"
+          :specific="true"
+        />
+      </div>
+      <div class="wb-preferences">
+        <p class="text-sm">
+          {{ t('editor.aside.commands.contents[9].title') }}
+        </p>
+        <InputBoolean
+          v-model="EDITOR.configuration.commands.drau.active"
+          :specific="true"
+        />
+      </div>
     </div>
   </EditorProjectPreferencesContainerSlot>
 </template>
diff --git a/packages/better-write-app/src/components/page/editor/project/preferences/container/EditorProjectPreferencesContainerKeyboard.vue b/packages/better-write-app/src/components/page/editor/project/preferences/container/EditorProjectPreferencesContainerKeyboard.vue
index dd936ed09..fd7d0b42c 100644
--- a/packages/better-write-app/src/components/page/editor/project/preferences/container/EditorProjectPreferencesContainerKeyboard.vue
+++ b/packages/better-write-app/src/components/page/editor/project/preferences/container/EditorProjectPreferencesContainerKeyboard.vue
@@ -77,11 +77,7 @@
 </template>
 
 <script setup lang="ts">
-  import { useProjectStore } from '@/store/project'
   import { useI18n } from 'vue-i18n'
-  import draggable from 'vuedraggable'
-
-  const PROJECT = useProjectStore()
 
   const { t } = useI18n()
 </script>
diff --git a/packages/better-write-app/src/components/page/editor/project/preferences/container/EditorProjectPreferencesContainerStyles.vue b/packages/better-write-app/src/components/page/editor/project/preferences/container/EditorProjectPreferencesContainerStyles.vue
index 50ab67b19..162701e07 100644
--- a/packages/better-write-app/src/components/page/editor/project/preferences/container/EditorProjectPreferencesContainerStyles.vue
+++ b/packages/better-write-app/src/components/page/editor/project/preferences/container/EditorProjectPreferencesContainerStyles.vue
@@ -21,107 +21,11 @@
         </div>
       </div>
     </div>
-    <div>
-      <PreferencesContainerTitle>
-        {{ t('editor.aside.graph.title') }}
-      </PreferencesContainerTitle>
-      <div class="wb-preferences">
-        <p class="text-sm">
-          {{ t('editor.aside.commands.contents[0].title') }}
-        </p>
-        <InputBoolean
-          v-model="EDITOR.configuration.commands.paragraph.active"
-          :specific="true"
-        />
-      </div>
-      <div class="wb-preferences">
-        <p class="text-sm">
-          {{ t('editor.aside.commands.contents[1].title') }}
-        </p>
-        <InputBoolean
-          v-model="EDITOR.configuration.commands.headingTwo.active"
-          :specific="true"
-        />
-      </div>
-      <div class="wb-preferences">
-        <p class="text-sm">
-          {{ t('editor.aside.commands.contents[2].title') }}
-        </p>
-        <InputBoolean
-          v-model="EDITOR.configuration.commands.headingThree.active"
-          :specific="true"
-        />
-      </div>
-      <div class="wb-preferences">
-        <p class="text-sm">
-          {{ t('editor.aside.commands.contents[3].title') }}
-        </p>
-        <InputBoolean
-          v-model="EDITOR.configuration.commands.pageBreak.active"
-          :specific="true"
-        />
-      </div>
-      <div class="wb-preferences">
-        <p class="text-sm">
-          {{ t('editor.aside.commands.contents[4].title') }}
-        </p>
-        <InputBoolean
-          v-model="EDITOR.configuration.commands.lineBreak.active"
-          :specific="true"
-        />
-      </div>
-      <div class="wb-preferences">
-        <p class="text-sm">
-          {{ t('editor.aside.commands.contents[5].title') }}
-        </p>
-        <InputBoolean
-          v-model="EDITOR.configuration.commands.image.active"
-          :specific="true"
-        />
-      </div>
-      <div class="wb-preferences">
-        <p class="text-sm">
-          {{ t('editor.aside.commands.contents[6].title') }}
-        </p>
-        <InputBoolean
-          v-model="EDITOR.configuration.commands.dialogue.active"
-          :specific="true"
-        />
-      </div>
-      <div class="wb-preferences">
-        <p class="text-sm">
-          {{ t('editor.aside.commands.contents[7].title') }}
-        </p>
-        <InputBoolean
-          v-model="EDITOR.configuration.commands.checkbox.active"
-          :specific="true"
-        />
-      </div>
-      <div class="wb-preferences">
-        <p class="text-sm">
-          {{ t('editor.aside.commands.contents[8].title') }}
-        </p>
-        <InputBoolean
-          v-model="EDITOR.configuration.commands.list.active"
-          :specific="true"
-        />
-      </div>
-      <div class="wb-preferences">
-        <p class="text-sm">
-          {{ t('editor.aside.commands.contents[9].title') }}
-        </p>
-        <InputBoolean
-          v-model="EDITOR.configuration.commands.drau.active"
-          :specific="true"
-        />
-      </div>
-    </div>
   </EditorProjectPreferencesContainerSlot>
 </template>
 
 <script setup lang="ts">
   import { Themes } from 'better-write-plugin-theme'
-  import { useI18n } from 'vue-i18n'
   import { BetterWriteThemes } from 'better-write-types'
   import { useEditorStore } from '@/store/editor'
   import { nextTick } from 'vue'
@@ -131,7 +35,6 @@
 
   const EDITOR = useEditorStore()
 
-  const { t } = useI18n()
   const { isLoading } = useNProgress()
   const plugin = usePlugin()
   const storage = useStorage()
diff --git a/packages/better-write-app/windi.config.ts b/packages/better-write-app/windi.config.ts
index 401510251..3fb533393 100644
--- a/packages/better-write-app/windi.config.ts
+++ b/packages/better-write-app/windi.config.ts
@@ -23,10 +23,10 @@ export default defineConfig({
     'wb-pdf-container': 'flex flex-row gap-5 flex-wrap justify-between items-center my-3 overflow-x-hidden',
     'wb-disabled': 'opacity-50 pointer-events-none',
     'wb-configuration-absolute': 'absolute top-0 left-0 bg-theme-background-1 flex flex-col h-screen w-full z-max px-2 py-5 md:px-20 overflow-y-auto overflow-x-hidden wb-scroll',
-    'wb-configuration': 'flex gap-5 font-bold text-base text-theme-text-2 justify-between items-center w-full px-2 py-2',
+    'wb-configuration': 'flex gap-2 font-bold text-base text-theme-text-2 justify-between items-center w-full px-2 py-2',
     'wb-configuration-reserve': 'flex flex-row-reverse md:flex-row gap-5 font-bold text-base text-theme-text-2 justify-between items-center w-full px-2 py-2',
     'wb-configuration-input-text': 'bg-theme-editor-material-background px-2 shadow-lg w-full md:w-60',
-    'wb-preferences': 'flex gap-5 font-bold text-base text-theme-text-2 justify-between items-center w-full px-2 py-2',
+    'wb-preferences': 'flex gap-2 font-bold text-base text-theme-text-2 justify-between items-center w-full px-2 py-2',
     'wb-indent': 'indent-8',
     'wb-header-button': 'wb-text mx-0.5 md:mx-2',
     'wb-drau-icon': 'wb-icon w-8 h-8 md:(w-6 h-6)',