small design improves

public/mix-manifest.json

@@ -74,5 +74,23 @@
     "/chunks/user-password.js": "/chunks/user-password.js",
     "/chunks/user-storage.js": "/chunks/user-storage.js",
     "/chunks/user-subscription.js": "/chunks/user-subscription.js",
-    "/chunks/users.js": "/chunks/users.js"
+    "/chunks/users.js": "/chunks/users.js",
+    "/js/main.1116b58ef850b0d7e6c1.hot-update.js": "/js/main.1116b58ef850b0d7e6c1.hot-update.js",
+    "/js/main.6946958f555d97fdde24.hot-update.js": "/js/main.6946958f555d97fdde24.hot-update.js",
+    "/js/main.11519e3f1f4b381460e1.hot-update.js": "/js/main.11519e3f1f4b381460e1.hot-update.js",
+    "/js/main.375c154fd9f9240050d6.hot-update.js": "/js/main.375c154fd9f9240050d6.hot-update.js",
+    "/js/main.e80c042abed521780289.hot-update.js": "/js/main.e80c042abed521780289.hot-update.js",
+    "/js/main.4039781b64165019af1e.hot-update.js": "/js/main.4039781b64165019af1e.hot-update.js",
+    "/js/main.2be99a0eec70df1695df.hot-update.js": "/js/main.2be99a0eec70df1695df.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.1c3d9a46902779640cb7.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.1c3d9a46902779640cb7.hot-update.js",
+    "/js/main.2b9ecac46338083d7de9.hot-update.js": "/js/main.2b9ecac46338083d7de9.hot-update.js",
+    "/chunks/shared-page.2b9ecac46338083d7de9.hot-update.js": "/chunks/shared-page.2b9ecac46338083d7de9.hot-update.js",
+    "/js/main.6dd00119b130336463df.hot-update.js": "/js/main.6dd00119b130336463df.hot-update.js",
+    "/js/main.5908348e9980052c4cfa.hot-update.js": "/js/main.5908348e9980052c4cfa.hot-update.js",
+    "/js/main.4185db090221550d85ee.hot-update.js": "/js/main.4185db090221550d85ee.hot-update.js",
+    "/js/main.4cbd8999f1f90f08165b.hot-update.js": "/js/main.4cbd8999f1f90f08165b.hot-update.js",
+    "/js/main.000fae35402f1a759d1f.hot-update.js": "/js/main.000fae35402f1a759d1f.hot-update.js",
+    "/js/main.288465b6020b308e9695.hot-update.js": "/js/main.288465b6020b308e9695.hot-update.js",
+    "/js/main.6153ba03604d8736903f.hot-update.js": "/js/main.6153ba03604d8736903f.hot-update.js",
+    "/js/main.9f2f4c380dd317be8da0.hot-update.js": "/js/main.9f2f4c380dd317be8da0.hot-update.js"
 }

resources/js/App.vue

@@ -5,6 +5,7 @@
         <Alert/>
 
         <div id="application-wrapper" v-if="! isGuestLayout">
+
             <!-- Full File Preview -->
             <FileFullPreview />
 

resources/js/components/FilesView/ContextMenu.vue

@@ -7,18 +7,9 @@
       :style="{ top: positionY + 'px', left: positionX + 'px' }"
     >
       <!-- ContextMenu for File Preview -->
-
       <div class="menu-options" id="menu-list">
           <ul class="menu-option-group">
-          <li class="menu-option" @click="renameItem" v-if="item">
+              <li class="menu-option" @click="moveItem">
-            <div class="icon">
-              <edit-2-icon size="17"></edit-2-icon>
-            </div>
-            <div class="text-label">
-              {{ $t("context_menu.rename") }}
-            </div>
-          </li>
-          <li class="menu-option" @click="moveItem" v-if="item">
                   <div class="icon">
                       <corner-down-right-icon size="17"></corner-down-right-icon>
                   </div>
@@ -26,7 +17,19 @@
                       {{ $t("context_menu.move") }}
                   </div>
               </li>
-          <li class="menu-option" @click="deleteItem" v-if="item">
+              <li class="menu-option" @click="shareItem">
+                  <div class="icon">
+                      <link-icon size="17"></link-icon>
+                  </div>
+                  <div class="text-label">
+                      {{
+                          item.shared
+                              ? $t("context_menu.share_edit")
+                              : $t("context_menu.share")
+                      }}
+                  </div>
+              </li>
+              <li class="menu-option" @click="deleteItem">
                   <div class="icon">
                       <trash-2-icon size="17"></trash-2-icon>
                   </div>
@@ -35,6 +38,16 @@
                   </div>
               </li>
           </ul>
+          <ul class="menu-option-group">
+              <li class="menu-option" @click="downloadItem" v-if="!isFolder">
+                  <div class="icon">
+                      <download-cloud-icon size="17"></download-cloud-icon>
+                  </div>
+                  <div class="text-label">
+                      {{ $t("context_menu.download") }}
+                  </div>
+              </li>
+          </ul>
       </div>
     </div>
 

resources/js/components/FilesView/FileFullPreview.vue

@@ -70,6 +70,8 @@ export default {
 		})
 		events.$on('fileFullPreview:hide', () => {
 			this.showFullPreview = false
+
+            events.$emit('hide:mobile-navigation')
         })
 	}
 }

resources/js/components/FilesView/FilePreviewNavigationPanel.vue

@@ -133,14 +133,17 @@ export default {
 	height: 22px;
 	display: flex;
 	position: relative;
-	// align-items: center;
+	align-items: center;
 	flex-grow: 1;
 	align-self: center;
 	white-space: nowrap;
+
 	.name-count-wrapper {
+        margin-left: 6px;
+        margin-right: 6px;
+
         .file-count {
 			@include font-size(15);
-			margin-left: 6px;
 			line-height: 1;
 			font-weight: 700;
 			overflow: hidden;
@@ -173,7 +176,6 @@ export default {
 		border-radius: 6px;
 		vertical-align: middle;
 		cursor: pointer;
-		margin-right: 6px;
 		color: $text;
 		align-self: center;
 		@include transition(150ms);
@@ -227,32 +229,19 @@ export default {
 	}
 }
 
-@media (min-width: 420px) and (max-width: 985px) {
-	.name-wrapper {
-		width: 67%;
-	}
-}
-@media (max-width: 570px) {
-	.name-wrapper {
-		width: 100%;
-		justify-content: space-between;
-	}
-}
 .created-at-wrapper {
 	width: 33%;
-	// height: 100%;
 	display: flex;
 	text-align: center;
 	justify-content: center;
+
 	p {
 		display: flex;
 		align-items: center;
 		@include font-size(11);
 	}
-	@media (max-width: 985px) {
-		display: none;
-	}
 }
+
 .navigation-icons {
 	width: 33%;
 	text-align: right;
@@ -262,21 +251,15 @@ export default {
 		display: inline-block;
 		vertical-align: middle;
 	}
-	@media (max-width: 960px) {
+
-		.mobile-hide {
-			display: none;
-		}
-	}
 	.button {
 		margin-left: 5px;
 		&:hover {
 			background: $light_background;
 		}
 	}
-	@media (max-width: 570px) {
-		display: none;
-	}
 }
+
 .navigation-panel {
 	height: 63px;
 	width: 100%;
@@ -287,33 +270,61 @@ export default {
 	align-items: center;
 	background-color: white;
 	color: $text;
-	@media (max-width: 960px) {
+}
-		& {
+
+@media (max-width: 960px) {
+
+    .context-menu {
+
+        .name-wrapper {
+            width: 67%;
+        }
+    }
+
+    .navigation-icons {
+        display: none;
+    }
+
+    .navigation-panel {
         height: 53px;
         padding: 15px;
     }
+
+    .created-at-wrapper {
+        display: none;
+    }
+
+    .name-wrapper {
+        justify-content: space-between;
+        flex-direction: row-reverse;
+        width: 100%;
     }
 }
+
 @media (prefers-color-scheme: dark) {
 	.navigation-panel {
-		background-color: $dark_mode_foreground;
+		background-color: $dark_mode_background;
 		color: $dark_mode_text_primary;
+
 		.icon-close {
 			color: $dark_mode_text_primary;
 			&:hover {
 				background-color: $dark_mode_background;
 			}
 		}
+
 		.fast-menu-icon:hover {
 			background: $dark_mode_background;
 		}
 	}
+
 	.name-wrapper {
 		.title,
 		.file-count {
 			color: $dark_mode_text_primary !important;
 		}
 	}
+
 	.navigation-icons {
 		.button:hover {
 			background: $dark_mode_background;

resources/js/components/FilesView/MediaFullPreview.vue

@@ -166,23 +166,32 @@ export default {
 	justify-content: center;
 	align-items: center;
 	background-color: white;
+
 	.file-wrapper {
 		width: 100%;
 		height: 100%;
 		display: flex;
 		justify-content: center;
 		align-items: center;
+
 		.file-shadow {
-			box-shadow: 0 8px 40px rgba(17, 26, 52, 0.1);
+			box-shadow: 0 8px 40px rgba(17, 26, 52, 0.15);
 		}
+
 		.file {
 			max-width: 100%;
 			max-height: 100%;
 			align-self: center;
 		}
+
 		.audio {
 			border-radius: 28px;
 		}
+
+        img {
+            border-radius: 4px;
+        }
+
 		.video-wrapper {
 			max-width: 1080px;
 			max-height: 100%;