diff --git a/frontend/src/css/styles.css b/frontend/src/css/styles.css index 6e6d6ba2..5cff40fa 100644 --- a/frontend/src/css/styles.css +++ b/frontend/src/css/styles.css @@ -205,6 +205,34 @@ main .spinner .bounce2 { height: 100%; } +#previewer .preview .info { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 1.5em; + color: #fff; +} +#previewer .preview .info .title { + margin-bottom: 1em; +} +#previewer .preview .info .title i { + display: block; + margin-bottom: .1em; + font-size: 4em; +} +#previewer .preview .info .button { + display: inline-block; +} +#previewer .preview .info .button:hover { + background-color: rgba(255, 255, 255, 0.2) +} +#previewer .preview .info .button i { + display: block; + margin-bottom: 4px; + font-size: 1.3em; +} + #previewer .pdf { width: 100%; height: 100%; diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json index 7bced4cd..38e3a42e 100644 --- a/frontend/src/i18n/en.json +++ b/frontend/src/i18n/en.json @@ -63,7 +63,8 @@ "size": "Size", "sortByLastModified": "Sort by last modified", "sortByName": "Sort by name", - "sortBySize": "Sort by size" + "sortBySize": "Sort by size", + "noPreview": "Preview is not available for this file." }, "help": { "click": "select file or directory", diff --git a/frontend/src/views/files/Preview.vue b/frontend/src/views/files/Preview.vue index 3fb23a5b..013e526f 100644 --- a/frontend/src/views/files/Preview.vue +++ b/frontend/src/views/files/Preview.vue @@ -89,12 +89,31 @@ class="pdf" :data="raw" > - -

- {{ $t("buttons.download") }} - file_download -

-
+
+
+ feedback + {{ $t("files.noPreview") }} +
+
+ +
+ file_download{{ $t("buttons.download") }} +
+
+ +
+ open_in_new{{ $t("buttons.openFile") }} +
+
+
+