refactor: Improve menu and ui

Author: dxlliv

runtime/assets/styles/index.scss

@@ -20,10 +20,10 @@
 
 :root {
   --owd-font-family: ms-sans-serif, 'sans-serif';
-  --p-font-size: 14px;
+  --p-font-size: 0.9rem;
 
   --owd-windov-nav-height: 26px;
-  --owd-system-bar-height: 40px;
+  --owd-system-bar-height: 38px;
 
   --owd-border-color:
     rgb(var(--owd-theme-color-white)) var(--owd-border-width)
@@ -88,3 +88,17 @@
     inset 0 -2px 0 0 rgb(var(--owd-theme-color-grey)),
     inset 2px 0 0 0 rgb(var(--owd-theme-color-black));
 }
+
+::selection {
+  background: rgb(var(--owd-elevation-active-background));
+  color: rgb(var(--owd-elevation-active-color));
+}
+
+.owd-desktop {
+  font-size: 0.9rem;
+  line-height: 1rem;
+}
+
+.text-sm {
+  padding: 2px;
+}

runtime/assets/styles/partials/contextmenu.scss

@@ -2,7 +2,7 @@
   --p-contextmenu-background: var(--p-surface-900);
   --p-contextmenu-submenu-background: var(--p-contextmenu-background);
   --p-contextmenu-shadow: var(--owd-border-color);
-  --p-contextmenu-item-padding: 8px 8px;
+  --p-contextmenu-item-padding: 6px 8px;
   --p-contextmenu-submenu-label-padding: 4px 8px;
   --p-contextmenu-submenu-label-font-weight: 600;
 }
@@ -11,16 +11,19 @@
   font-family: var(--owd-font-family);
   font-size: var(--p-font-size);
   border-width: 2px;
+  padding: var(--owd-border-width);
 
-  &-item-content {
-    &:hover {
-      background: rgb(var(--owd-elevation-active-background)) !important;
-      color: rgb(var(--owd-elevation-active-color)) !important;
+  &-item {
+    &-content {
+      &:hover {
+        background: rgb(var(--owd-elevation-active-background)) !important;
+        color: rgb(var(--owd-elevation-active-color)) !important;
+      }
     }
   }
 
   &-separator {
-    margin: 2px;
+    margin: 4px 2px;
     height: 2px;
     border-width: 1px;
     border-style: solid;

runtime/assets/styles/partials/input.scss

@@ -18,4 +18,6 @@
   border-width: 2px;
   border-style: solid;
   border-color: var(--p-inputtext-border-color);
+  padding: 4px;
+  font-size: var(--p-font-size);
 }

runtime/assets/styles/partials/menu.scss

@@ -2,11 +2,11 @@
   --p-menu-background: var(--p-surface-900);
   --p-menubar-submenu-background: var(--p-menu-background);
   --p-menu-shadow: var(--owd-border-color);
-  --p-menu-item-padding: 8px 8px;
+  --p-menu-item-padding: 6px 8px;
   --p-menu-submenu-label-padding: 4px 8px;
   --p-menu-submenu-label-font-weight: 600;
 
-  --p-menubar-item-padding: 8px 8px;
+  --p-menubar-item-padding: 6px 8px;
   --p-menubar-base-item-padding: 6px 12px;
 }
 
@@ -37,7 +37,7 @@
     }
 
     &-separator {
-      margin: 2px -2px;
+      margin: 4px -2px;
       height: 2px;
       border-width: 1px;
       border-style: solid;

runtime/components/FileSystem/FileSystemFile.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { fs } from '@zenfs/core'
 import { ref, onMounted } from 'vue'
-import { isImageFile } from '@owdproject/module-fs/runtime/utils/utilFileSystemImage'
 import FileSystemFileContextMenu from './FileSystemFileContextMenu.vue'
 import FileSystemFileIcon from './FileSystemFileIcon.vue'
 
@@ -11,12 +10,12 @@ const props = defineProps<{
   layout: string
   selected?: boolean
   cutted?: boolean
+  window: IWindowController
 }>()
 
 const emit = defineEmits([
   'openDirectory',
   'openFile',
-  'delete',
   'rename',
 ])
 
@@ -26,7 +25,7 @@ const isDirectory = ref<boolean>(false)
 const isFile = ref<boolean>()
 const fileContent = ref<string | null>(null)
 
-const contextMenuRef = ref() // riferimento al menu interno
+const contextMenuRef = ref()
 
 async function fetchStatsAndContent(currentPath: string) {
   fs.stat(currentPath, (err, stats) => {
@@ -63,9 +62,9 @@ async function fetchStatsAndContent(currentPath: string) {
 
 function onFileOpen() {
   if (isDirectory.value) {
-    emit('openDirectory', props.fileName)
+    props.window.fsExplorer.openDirectory(props.fileName)
   } else {
-    emit('openFile', props.fileName)
+    props.window.fsExplorer.openFile(props.fileName)
   }
 }
 
@@ -139,14 +138,14 @@ const classes = computed(() => {
       <span
         v-if="!isRenaming"
         @dblclick.stop="renameStart"
-        class="text-sm text-gray-800 truncate"
+        class="text-sm truncate"
         v-text="fileName"
       />
 
       <input
         v-else
         v-model="editableName"
-        class="text-sm text-gray-800 truncate border border-gray-300 rounded-sm px-1"
+        class="text-sm truncate border border-gray-300 rounded-sm px-1"
         @blur="renameCommit"
         @keyup.enter="renameCommit"
         @keyup.esc="renameCancel"
@@ -159,10 +158,9 @@ const classes = computed(() => {
     <FileSystemFileContextMenu
       ref="contextMenuRef"
       :file-name="fileName"
-      :base-path="basePath"
+      :window="window"
       @open="onFileOpen"
       @rename="renameStart"
-      @delete="$emit('delete', fileName)"
     />
 
   </div>
@@ -180,6 +178,8 @@ const classes = computed(() => {
     input {
       border: 0;
       text-align: center;
+      background: rgb(var(--owd-elevation-active-background));
+      color: rgb(var(--owd-elevation-active-color)) !important;
     }
   }
 
@@ -195,14 +195,17 @@ const classes = computed(() => {
 
   &--selected {
     .owd-file__name {
+      background: rgb(var(--owd-elevation-active-background));
+      color: rgb(var(--owd-elevation-active-color)) !important;
+
       &:after {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         content: '';
-        border: 1px dotted black;
+        border: 1px dotted rgb(var(--owd-theme-color-white));
       }
     }
   }

runtime/components/FileSystem/FileSystemFileContextMenu.vue

@@ -6,10 +6,10 @@ const { t } = useI18n()
 
 const props = defineProps<{
   fileName: string
-  basePath: string
+  window: IWindowController
 }>()
 
-const emit = defineEmits(['open', 'delete', 'rename'])
+const emit = defineEmits(['open', 'rename'])
 
 const menu = ref<Menu | null>(null)
 const items = ref<MenuItem[]>([
@@ -29,27 +29,29 @@ const items = ref<MenuItem[]>([
   {
     label: t('fs.contextMenu.cut'),
     command: () => {
-      window.alert('To be implemented')
+      props.window.fsExplorer.selectFiles([
+        props.fileName,
+      ])
+      props.window.fsExplorer.cutSelectedFiles()
     },
   },
   {
     label: t('fs.contextMenu.copy'),
     command: () => {
-      window.alert('To be implemented')
-    },
-  },
-  { separator: true },
-  {
-    label: t('fs.contextMenu.delete'),
-    command: () => {
-      emit('delete', props.fileName)
+      props.window.fsExplorer.selectFiles([
+        props.fileName,
+      ])
+      props.window.fsExplorer.copySelectedFiles()
     },
   },
   { separator: true },
   {
     label: t('fs.contextMenu.delete'),
     command: () => {
-      emit('delete', props.fileName)
+      props.window.fsExplorer.selectFiles([
+        `${props.window.fsExplorer.basePath.value}/${props.fileName}`,
+      ])
+      props.window.fsExplorer.fsController.deleteSelectedFiles()
     },
   },
   {

runtime/components/Window/Directory/WindowDirectoryAddress.vue

@@ -21,6 +21,7 @@ watch(() => props.address, (address) => {
       <div class="flex-col w-full">
         <InputText
           v-model="addressInput" style="width: inherit"
+          spellcheck="false"
           @keydown.enter="$emit('update:modelValue', addressInput)"
         />
       </div>

runtime/components/Window/Directory/WindowDirectoryToolbar.vue

@@ -112,7 +112,7 @@ defineEmits(['back', 'forward', 'up', 'cut', 'copy', 'paste', 'undo', 'delete',
   vertical-align: top;
   min-width: 50px;
   height: 50px;
-  margin-bottom: 5px;
+  margin-bottom: 4px;
   filter: grayscale(1);
 
   &-image {

runtime/components/Window/WindowDirectory.vue

@@ -77,8 +77,7 @@ props.window.fsExplorer.initialize()
               :layout="fsExplorer.layout.value"
               :selected="fsExplorer.selectedFiles.value.includes(`${fsExplorer.basePath.value}/${fileName}`)"
               :cutted="fsExplorer.fsClipboard.clipboardFiles.value.includes(`${fsExplorer.basePath.value}/${fileName}`) && fsExplorer.fsClipboard.clipboardType.value === 'cut'"
-              @openDirectory="window.fsExplorer.openDirectory"
-              @openFile="fsExplorer.openFile"
+              :window="window"
             />
           </SelectableArea>
           <iframe