migration column in file_manager_files renamed from meta_data to metadata

context menu feractoring
Editor.php typo changes
FileInfoPanel.vue small changes when to show metadata info
Added new exif information and reordering existing in ImageMetaData.vue
Added new translation strings to i18n files

resources/js/components/FilesView/FileInfoPanel.vue

@@ -57,13 +57,9 @@
                 </div>
             </ListInfoItem>
 
-            <div  @click="this.showMetaData">
-                <ListInfoItem   v-if="fileInfoDetail.meta_data"            
-                                :title="$t('file_detail_meta.meta_data')"
-                                class="meta-data">    
-                    <ImageMetaData v-if="this.metaDataShow" />
-                </ListInfoItem>
-            </div>
+            <ListInfoItem v-if="canShowMetaData" :title="$t('file_detail_meta.meta_data')">
+                <ImageMetaData />
+            </ListInfoItem>
         </ListInfo>
     </div>
 </template>
@@ -98,26 +94,11 @@
             ...mapGetters(['fileInfoDetail', 'permissionOptions']),
             fileType() {
                 return this.fileInfoDetail.type
-                /*                switch () {
-                                    case 'folder':
-                                        return 'folder'
-                                    break;
-                                    case 'file':
-                                        return 'file'
-                                    break;
-                                    case 'image':
-                                        return 'file-image'
-                                    break;
-                                    case 'video':
-                                        return 'file-video'
-                                    break;
-                                    case 'file':
-                                        return 'file-audio'
-                                    break;
-                                }*/
+            },
+            canShowMetaData() {
+                return this.fileInfoDetail.metadata && this.fileInfoDetail.metadata.ExifImageWidth
             },
             sharedInfo() {
-
                 // Get permission title
                 let title = this.permissionOptions.find(option => {
                     return option.value === this.fileInfoDetail.shared.permission
@@ -141,15 +122,7 @@
                 return this.fileInfoDetail.shared.protected
             }
         },
-        data() {
-            return {
-                metaDataShow: false
-            }
-        },
         methods: {
-            showMetaData() {
-                this.metaDataShow = !this.metaDataShow
-            },
             shareItemOptions() {
                 // Open share item popup
                 events.$emit('popup:open', {name: 'share-edit', item: this.fileInfoDetail})
@@ -230,9 +203,6 @@
             width: 100%;
         }
     }
-    .meta-data{
-        cursor: pointer;
-    }
 
     @media (prefers-color-scheme: dark) {
 

resources/js/components/FilesView/ImageMetaData.vue

@@ -1,75 +1,115 @@
 <template>
     <div>
         <ul class="meta-data-list">
-                    <li v-if="fileInfoDetail.meta_data.Artist"> {{$t('file_detail_meta.author')}}
-                         <p> {{fileInfoDetail.meta_data.Artist}} </p> </li>
+            <li v-if="fileInfoDetail.metadata.DateTimeOriginal">
+                <span>{{ $t('file_detail_meta.time_data') }}</span>
+                <b>{{ fileInfoDetail.metadata.DateTimeOriginal }}</b>
+            </li>
 
-                    <li v-if="fileInfoDetail.meta_data.DateTimeOriginal">{{$t('file_detail_meta.time_data')}}
-                         <p> {{fileInfoDetail.meta_data.DateTimeOriginal}} </p> </li>     
+            <li v-if="fileInfoDetail.metadata.Artist">
+                <span>{{ $t('file_detail_meta.author') }}</span>
+                <b>{{ fileInfoDetail.metadata.Artist }}</b>
+            </li>
 
-                    <li v-if="fileInfoDetail.meta_data.Make">{{$t('file_detail_meta.make')}} 
-                        <p> {{fileInfoDetail.meta_data.Make}} </p> </li>
+            <li v-if="fileInfoDetail.metadata.ExifImageWidth && fileInfoDetail.metadata.ExifImageLength">
+                <span>{{ $t('file_detail_meta.dimension') }}</span>
+                <b>{{ fileInfoDetail.metadata.ExifImageWidth }}x{{ fileInfoDetail.metadata.ExifImageLength }}</b>
+            </li>
 
-                    <li v-if="fileInfoDetail.meta_data.Model">{{$t('file_detail_meta.model')}}
-                        <p> {{fileInfoDetail.meta_data.Model}} </p> </li>
+            <li v-if="fileInfoDetail.metadata.XResolution && fileInfoDetail.metadata.YResolution">
+                <span>{{ $t('file_detail_meta.resolution') }}Resolution</span>
+                <b>{{ fileInfoDetail.metadata.XResolution }}x{{ fileInfoDetail.metadata.YResolution }}</b>
+            </li>
 
-                    <li v-if="fileInfoDetail.meta_data.COMPUTED.CCDWidth">{{$t('file_detail_meta.camera_lens')}} 
-                        <p> {{fileInfoDetail.meta_data.COMPUTED.CCDWidth}} </p> </li>
+            <!--TODO: Colour space:RGB-->
+            <!--TODO: Colour profile:sRGB IEC61966-2.1-->
 
-                    <li v-if="fileInfoDetail.meta_data.COMPUTED.ApertureFNumber">{{$t('file_detail_meta.aperature')}} 
-                        <p> {{fileInfoDetail.meta_data.COMPUTED.ApertureFNumber}} </p> </li>
+            <li v-if="fileInfoDetail.metadata.Make">
+                <span>{{ $t('file_detail_meta.make') }}</span>
+                <b>{{ fileInfoDetail.metadata.Make }}</b>
+            </li>
 
-                    <li v-if="fileInfoDetail.meta_data.ISOSpeedRatings">{{$t('file_detail_meta.iso')}}
-                        <p> {{fileInfoDetail.meta_data.ISOSpeedRatings}} </p> </li>
+            <li v-if="fileInfoDetail.metadata.Model">
+                <span>{{ $t('file_detail_meta.model') }}</span>
+                <b>{{ fileInfoDetail.metadata.Model }}</b>
+            </li>
 
-                    <li v-if="fileInfoDetail.meta_data.FocalLength">{{$t('file_detail_meta.focal')}} 
-                        <p> {{fileInfoDetail.meta_data.FocalLength}} </p> </li>
+            <li v-if="fileInfoDetail.metadata.ApertureValue">
+                <span>{{ $t('file_detail_meta.aperture_value') }}</span>
+                <b v-html="parseInt(fileInfoDetail.metadata.ApertureValue) / 100"></b>
+            </li>
 
-                    <li v-if="fileInfoDetail.meta_data.ExposureTime">{{$t('file_detail_meta.exposure')}} 
-                        <p> {{fileInfoDetail.meta_data.ExposureTime}} </p> </li>
+            <li v-if="fileInfoDetail.metadata.ExposureTime">
+                <span>{{ $t('file_detail_meta.exposure') }}</span>
+                <b>{{ fileInfoDetail.metadata.ExposureTime }}</b>
+            </li>
 
-                    <li v-else>{{$t('file_detail_meta.not_avaible')}} </li> 
+            <li v-if="fileInfoDetail.metadata.FocalLength">
+                <span>{{ $t('file_detail_meta.focal') }}</span>
+                <b>{{ fileInfoDetail.metadata.FocalLength }}</b>
+            </li>
 
-                </ul>
+            <li v-if="fileInfoDetail.metadata.ISOSpeedRatings">
+                <span>{{ $t('file_detail_meta.iso') }}</span>
+                <b>{{ fileInfoDetail.metadata.ISOSpeedRatings }}</b>
+            </li>
+
+            <li v-if="fileInfoDetail.metadata.COMPUTED.ApertureFNumber">
+                <span>{{ $t('file_detail_meta.aperature') }}</span>
+                <b>{{ fileInfoDetail.metadata.COMPUTED.ApertureFNumber }}</b>
+            </li>
+
+            <li v-if="fileInfoDetail.metadata.COMPUTED.CCDWidth">
+                <span>{{ $t('file_detail_meta.camera_lens') }}</span>
+                <b>{{ fileInfoDetail.metadata.COMPUTED.CCDWidth }}</b>
+            </li>
+
+            <!--TODO: Longitude: 20° 50' 24,432" E-->
+            <!--TODO: Latitude: 47° 23' 14,49" N-->
+        </ul>
     </div>
 </template>
 
 <script>
-    import {mapGetters} from 'vuex'
+import { mapGetters } from 'vuex'
 
-    export default {
-        name: 'ImageMetaData',
-        computed: {
-            ...mapGetters(['fileInfoDetail']),
-        },
+export default {
+    name: 'ImageMetaData',
+    computed: {
+        ...mapGetters(['fileInfoDetail'])
     }
+}
 </script>
 
 <style lang="scss" scoped>
 @import '@assets/vue-file-manager/_variables';
 @import '@assets/vue-file-manager/_mixins';
 
- .meta-data-list {
-            list-style: none;
-            padding: 0px;
-            margin: 0px;
-          li {
-            margin-top:10px;
+.meta-data-list {
+    list-style: none;
+    padding: 0px;
+    margin: 0px;
+
+    li {
+        display: flex;
+        justify-content: space-between;
+        padding: 9px 0;
+        border-bottom: 1px solid $light_mode_border;
+
+        b, span {
             @include font-size(14);
-            font-weight: bold;
             color: $text;
-            p {
-            @include font-size(13);
-            color: $text;
-            }
-           }
         }
- @media (prefers-color-scheme: dark) {
-     li {
-         color:$dark_mode_text_primary !important;
-         p {
-             color: $dark_mode_text_primary !important;
-         }
-     }
- }
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    li {
+        color: $dark_mode_text_primary !important;
+
+        p {
+            color: $dark_mode_text_primary !important;
+        }
+    }
+}
 </style>

resources/js/i18n/lang/cn.json

@@ -210,7 +210,7 @@
 		"others": {
 			"mimetypes_blacklist": "Mimetypes Blacklist",
 			"mimetypes_blacklist_plac":"Add mimetypes to Blacklist" ,
-			"mimetypes_blacklist_help" :"If you want ban some type of files to upload just add them to blacklist like this: x-php,mp3,jpeg <br/> Use a comma between each mime type. Don't use a dot before mimetypes." ,
+			"mimetypes_blacklist_help" :"If you want to prevent upload some type of files, just add them to blacklist like this: x-php,mp3,jpeg <br/> Use a comma between each mimetype. Don't use a dot before mimetypes." ,
 			"section_cache": "Application Cache",
 			"cache_disclaimer": "Did you change anything in your .env file or change your stripe credentials? Then clear your cache.",
 			"cache_clear": "Clear Cache",
@@ -299,17 +299,19 @@
 		"where": "地址"
 	},
 	"file_detail_meta": {
+		"dimension": "Dimensions",
+		"resolution": "Resolution",
+		"aperture_value": "Aperture Value",
 		"meta_data": "Metadata",
 		"author": "Author",
-		"time_data": "Original time data",
+		"time_data": "Content Created",
 		"make": "Camera",
 		"model": "Model",
 		"camera_lens": "Camera lens",
-		"aperature": "Aperture F Number",
+		"aperature": "F Number",
 		"iso": "ISO",
 		"focal": "Focal length",
-		"exposure": "Exposure time",
-		"not_avaible": "Metadata not avaible"
+		"exposure": "Exposure time"
 	},
 	"folder": {
 		"empty": "空的",

resources/js/i18n/lang/en.json

@@ -212,7 +212,7 @@
 		"others": {
 			"mimetypes_blacklist": "Mimetypes Blacklist",
 			"mimetypes_blacklist_plac":"Add mimetypes to Blacklist" ,
-			"mimetypes_blacklist_help" :"If you want ban some type of files to upload just add them to blacklist like this: x-php,mp3,jpeg <br/> Use a comma between each mime type. Don't use a dot before mimetypes." ,
+			"mimetypes_blacklist_help" :"If you want to prevent upload some type of files, just add them to blacklist like this: x-php,mp3,jpeg <br/> Use a comma between each mimetype. Don't use a dot before mimetypes." ,
 			"section_cache": "Application Cache",
 			"cache_disclaimer": "Did you change anything in your .env file or change your Stripe credentials? Then clear your cache.",
 			"cache_clear": "Clear Cache",
@@ -301,17 +301,19 @@
 		"where": "Where"
 	},
 	"file_detail_meta": {
+		"dimension": "Dimensions",
+		"resolution": "Resolution",
+		"aperture_value": "Aperture Value",
 		"meta_data": "Metadata",
 		"author": "Author",
-		"time_data": "Original time data",
+		"time_data": "Content Created",
 		"make": "Camera",
 		"model": "Model",
 		"camera_lens": "Camera lens",
-		"aperature": "Aperture F Number",
+		"aperature": "F Number",
 		"iso": "ISO",
 		"focal": "Focal length",
-		"exposure": "Exposure time",
-		"not_avaible": "Metadata not avaible"
+		"exposure": "Exposure time"
 	},
 	"folder": {
 		"empty": "Empty",

resources/js/i18n/lang/sk.json

@@ -301,17 +301,19 @@
 		"where": "Umiestnenie"
 	},
 	"file_detail_meta": {
+		"dimension": "Dimenzie",
+		"resolution": "Rozlíšenie",
+		"aperture_value": "Hodnota clony",
 		"meta_data": "Metadata",
 		"author": "Autor",
-		"time_data": "Pôvodných časový údaj",
+		"time_data": "Obsah vytvorený",
 		"make": "Fotoaparát",
 		"model": "Model",
 		"camera_lens": "Objektív fotoaparátu",
 		"aperature": "Clona",
 		"iso": "ISO",
 		"focal": "Ohnisková vzdialenosť",
-		"exposure": "Doba expozície",
-		"not_avaible": "Metadáta nie sú k dispozícii"
+		"exposure": "Doba expozície"
 	},
 	"folder": {
 		"empty": "Prázdne",