improve file preview

frontend/views/partials/Preview.vue

@@ -1,37 +1,47 @@
 /* eslint-disable */
 <template>
-  <div class="modal-card">
+  <div>
-    <header class="modal-card-head">
+    <div class="modal-card">
-      <p class="modal-card-title">
+      <header class="modal-card-head">
-        {{ item.name }}
+        <p class="modal-card-title">
-      </p>
+          {{ item.name }}
-    </header>
+        </p>
-    <section class="modal-card-body preview">
+      </header>
-      <textarea v-if="isText(item.path)" v-model="content" class="textarea" name="content" rows="20" />
+      <section class="modal-card-body preview">
-      <div v-if="isImage(item.path)" class="image">
+        <template v-if="isText(item.path)">
-        <img :src="content">
+          <prism-editor v-model="content" :readonly="!can('write')" :line-numbers="lineNumbers" />
-      </div>
+        </template>
-    </section>
+        <div v-if="isImage(item.path)" class="image">
-    <footer class="modal-card-foot">
+          <img :src="content">
-      <button v-if="isText(item.path) && can(['write'])" class="button" type="button" @click="saveFile()">
+        </div>
-        {{ lang('Save') }}
+      </section>
-      </button>
+      <footer class="modal-card-foot">
-      <button class="button" type="button" @click="$parent.close()">
+        <button v-if="isText(item.path) && can('write')" class="button" type="button" @click="saveFile()">
-        {{ lang('Close') }}
+          {{ lang('Save') }}
-      </button>
+        </button>
-    </footer>
+        <button class="button" type="button" @click="$parent.close()">
+          {{ lang('Close') }}
+        </button>
+      </footer>
+    </div>
   </div>
 </template>
 
 <script>
 import api from '../../api/api'
+import 'prismjs'
+import 'prismjs/themes/prism.css'
+import 'vue-prism-editor/dist/VuePrismEditor.css'
+import PrismEditor from 'vue-prism-editor'
 
 export default {
   name: 'Preview',
+  components: { PrismEditor },
   props: [ 'item' ],
   data() {
     return {
       content: '',
+      lineNumbers: true,
     }
   },
   mounted() {
@@ -67,6 +77,13 @@ export default {
 </script>
 
 <style scoped>
+@media (min-width: 1100px) {
+  .modal-card {
+    width: 100%;
+    min-width: 640px;
+  }
+}
+
 .preview {
   min-height: 450px;
 }

package-lock.json

@@ -4928,7 +4928,6 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz",
       "integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==",
-      "dev": true,
       "requires": {
         "good-listener": "^1.2.2",
         "select": "^1.1.2",
@@ -5107,6 +5106,16 @@
       "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
       "dev": true
     },
+    "component-props": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/component-props/-/component-props-1.1.1.tgz",
+      "integrity": "sha1-+bffm5kntubZfJvScqqGdnDzSUQ="
+    },
+    "component-xor": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/component-xor/-/component-xor-0.0.4.tgz",
+      "integrity": "sha1-xV2DzMG5TNUImk6T+niRxyY+Wao="
+    },
     "compressible": {
       "version": "2.0.17",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.17.tgz",
@@ -6381,8 +6390,7 @@
     "delegate": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
-      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
-      "dev": true
     },
     "delegates": {
       "version": "1.0.0",
@@ -6490,6 +6498,15 @@
       "integrity": "sha512-2G2Vwi2zXTHBGqXHsJ4+ak/iP0N8Ar+G8a7LiD2oup5o4sQWytwqqrZu/O6hIMV0KMID2PL69OhpshLO0n7UJQ==",
       "dev": true
     },
+    "dom-iterator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/dom-iterator/-/dom-iterator-1.0.0.tgz",
+      "integrity": "sha512-7dsMOQI07EMU98gQM8NSB3GsAiIeBYIPKpnxR3c9xOvdvBjChAcOM0iJ222I3p5xyiZO9e5oggkNaCusuTdYig==",
+      "requires": {
+        "component-props": "1.1.1",
+        "component-xor": "0.0.4"
+      }
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -6787,8 +6804,7 @@
     "escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
-      "dev": true
     },
     "escape-string-regexp": {
       "version": "1.0.5",
@@ -8712,7 +8728,6 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
       "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
-      "dev": true,
       "requires": {
         "delegate": "^3.1.2"
       }
@@ -9515,8 +9530,7 @@
     "is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
-      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=",
+      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik="
-      "dev": true
     },
     "is-extglob": {
       "version": "2.1.1",
@@ -13370,6 +13384,14 @@
         "react-is": "^16.8.4"
       }
     },
+    "prismjs": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.19.0.tgz",
+      "integrity": "sha512-IVFtbW9mCWm9eOIaEkNyo2Vl4NnEifis2GQ7/MLRG5TQe6t+4Sj9J5QWI9i3v+SS43uZBlCAOn+zYTVYQcPXJw==",
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -14357,8 +14379,7 @@
     "select": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
-      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
-      "dev": true
     },
     "select-hose": {
       "version": "2.0.0",
@@ -15435,8 +15456,7 @@
     "tiny-emitter": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
-      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
-      "dev": true
     },
     "tmp": {
       "version": "0.0.33",
@@ -15706,6 +15726,24 @@
         }
       }
     },
+    "unescape": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/unescape/-/unescape-1.0.1.tgz",
+      "integrity": "sha512-O0+af1Gs50lyH1nUu3ZyYS1cRh01Q/kUKatTOkSs7jukXE6/NebucDVxyiDsA9AQ4JC1V1jUH9EO8JX2nMDgGQ==",
+      "requires": {
+        "extend-shallow": "^2.0.1"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        }
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -16070,6 +16108,16 @@
         "vue-style-loader": "^4.1.0"
       }
     },
+    "vue-prism-editor": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/vue-prism-editor/-/vue-prism-editor-0.5.1.tgz",
+      "integrity": "sha512-8RBDhfbjAaVXTmIbSwv215QdhAiXKEK6dyjf6HP0dnLnR/2jrsJCatX/ubHqHrvpfPzacUBU+w6Qms1Gf01YkA==",
+      "requires": {
+        "dom-iterator": "^1.0.0",
+        "escape-html": "^1.0.3",
+        "unescape": "^1.0.1"
+      }
+    },
     "vue-router": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.3.tgz",

package.json

@@ -12,7 +12,9 @@
   },
   "dependencies": {
     "core-js": "^3.4.4",
-    "js-base64": "^2.5.1"
+    "js-base64": "^2.5.1",
+    "prismjs": "^1.19.0",
+    "vue-prism-editor": "^0.5.1"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^5.12.0",