From b4327ebac1130aa8875547e459377e94ffe47a0b Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Tue, 25 Jun 2024 10:50:13 -0300
Subject: [PATCH 1/2] Views: Configuration-Dev: Refactor component to new UI

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/views/ConfigurationDevelopmentView.vue | 76 +++++++++++++++-------
 1 file changed, 52 insertions(+), 24 deletions(-)

diff --git a/src/views/ConfigurationDevelopmentView.vue b/src/views/ConfigurationDevelopmentView.vue
index bd9f00a58..96bd9b6ca 100644
--- a/src/views/ConfigurationDevelopmentView.vue
+++ b/src/views/ConfigurationDevelopmentView.vue
@@ -2,29 +2,48 @@
   <BaseConfigurationView>
     <template #title>Development configuration</template>
     <template #content>
-      <v-switch v-model="devStore.developmentMode" label="Development mode" class="ma-2" color="rgb(0, 20, 80)" />
-      <v-switch
-        v-model="devStore.enableSystemLogging"
-        label="Enable system logging"
-        class="m-2"
-        color="rgb(0, 20, 80)"
-        @update:model-value="reloadCockpit"
-      />
-      <v-slider
-        v-model="devStore.widgetDevInfoBlurLevel"
-        label="Dev info blur level"
-        min="0"
-        max="10"
-        class="ma-2 w-25"
-        color="rgb(0, 20, 80)"
-        step="1"
-        thumb-label="always"
-      />
-      <v-data-table :items="systemLogsData" :headers="headers" class="max-w-[80%] max-h-[60%]">
-        <template #item.actions="{ item }">
-          <div class="text-center cursor-pointer icon-btn mdi mdi-download" @click="downloadLog(item.name)" />
-        </template>
-      </v-data-table>
+      <div class="max-w-[87vw] max-h-[80vh] overflow-y-auto">
+        <div
+          class="flex flex-col justify-between items-center w-full"
+          :class="interfaceStore.isOnPhoneScreen ? 'scale-[80%] mt-0 -mb-3' : 'scale-100 mt-4'"
+        >
+          <div class="flex flex-row gap-x-[50px]">
+            <v-switch v-model="devStore.developmentMode" label="Development mode" color="white" />
+            <v-switch
+              v-model="devStore.enableSystemLogging"
+              label="Enable system logging"
+              color="white"
+              @update:model-value="reloadCockpit"
+            />
+          </div>
+          <v-slider
+            v-model="devStore.widgetDevInfoBlurLevel"
+            label="Dev info blur level"
+            min="0"
+            max="10"
+            class="w-[350px]"
+            color="white"
+            step="1"
+            thumb-label="hover"
+          />
+        </div>
+        <ExpansiblePanel no-bottom-divider :is-expanded="!interfaceStore.isOnPhoneScreen">
+          <template #title>System logs</template>
+          <template #content>
+            <v-data-table
+              :items="systemLogsData"
+              density="compact"
+              theme="dark"
+              :headers="headers"
+              class="w-full max-h-[60%] rounded-md bg-[#FFFFFF11]"
+            >
+              <template #item.actions="{ item }">
+                <div class="text-center cursor-pointer icon-btn mdi mdi-download" @click="downloadLog(item.name)" />
+              </template>
+            </v-data-table>
+          </template>
+        </ExpansiblePanel>
+      </div>
     </template>
   </BaseConfigurationView>
 </template>
@@ -37,11 +56,14 @@ import { saveAs } from 'file-saver'
 import { onBeforeMount } from 'vue'
 import { ref } from 'vue'
 
+import ExpansiblePanel from '@/components/ExpansiblePanel.vue'
 import { type SystemLog, cockpitSytemLogsDB } from '@/libs/system-logging'
+import { useAppInterfaceStore } from '@/stores/appInterface'
 import { useDevelopmentStore } from '@/stores/development'
 
 import BaseConfigurationView from './BaseConfigurationView.vue'
 const devStore = useDevelopmentStore()
+const interfaceStore = useAppInterfaceStore()
 
 /* eslint-disable jsdoc/require-jsdoc */
 interface SystemLogsData {
@@ -58,7 +80,7 @@ const headers = [
   { title: 'Name', value: 'name' },
   { title: 'Time (initial)', value: 'initialTime' },
   { title: 'Date (initial)', value: 'initialDate' },
-  { title: 'N. events', value: 'nEvents' },
+  { title: 'events', value: 'nEvents' },
   { title: 'Download', value: 'actions' },
 ]
 
@@ -82,3 +104,9 @@ const downloadLog = async (logName: string): Promise<void> => {
 
 const reloadCockpit = (): void => location.reload()
 </script>
+<style scoped>
+.custom-header {
+  background-color: #333 !important;
+  color: #fff;
+}
+</style>

From 0340a70ab331912bc44cb1b7a83f68d9bfe9cf79 Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Tue, 25 Jun 2024 10:51:38 -0300
Subject: [PATCH 2/2] Components: Glass-modal: Adjust small screen
 responsiveness

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/components/GlassModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/GlassModal.vue b/src/components/GlassModal.vue
index 88de32a50..60f53110f 100644
--- a/src/components/GlassModal.vue
+++ b/src/components/GlassModal.vue
@@ -51,7 +51,7 @@ const modalPositionStyle = computed(() => {
       return {
         top: '50%',
         left: interfaceStore.isOnSmallScreen
-          ? `${interfaceStore.mainMenuWidth - 20}px`
+          ? `${interfaceStore.mainMenuWidth - 30}px`
           : `${interfaceStore.mainMenuWidth + 30}px`,
         transform: 'translateY(-50%)',
       }