Merge pull request #109 from modos189/new-jsview

The add plugins page has been updated
IITC-CE · Feb 26, 2023 · 61b98c0 · 61b98c0
2 parents 9a901a0 + 2387aa8
commit 61b98c0
Show file tree

Hide file tree

Showing 9 changed files with 327 additions and 110 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "@highlightjs/vue-plugin": "^1.0.2",
     "core-js": "^3.6.5",
     "highlight.js": "^10.7.3",
-    "lib-iitc-manager": "^1.5.0",
+    "lib-iitc-manager": "^1.6.1",
     "scored-fuzzysearch": "^1.0.5",
     "vue": "^2.6.11"
   },

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
@@ -166,5 +166,23 @@
     },
     "searchBoxPlaceholder": {
         "message": "Search…"
+    },
+    "jsViewTitle": {
+        "message": "Installing script"
+    },
+    "jsViewDetailsNoDomains": {
+        "message": "This script did not ask for access rights to the sites. It seems to be an invalid plugin."
+    },
+    "jsViewDetailsAllDomains": {
+        "message": "This script requested access to all sites. Use it if you trust the author."
+    },
+    "jsViewDetailsDomainsLabel": {
+        "message": "The script will run on these sites:"
+    },
+    "jsViewDetailsShowDetails": {
+        "message": "Show details"
+    },
+    "jsViewDetailsHideDetails": {
+        "message": "Hide details"
     }
 }
diff --git a/public/assets/icons/favicon.ico b/public/assets/icons/favicon.ico
diff --git a/public/browser-extension.html b/public/browser-extension.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" type="image/x-icon" href="/assets/icons/favicon.ico">
   <title><%= htmlWebpackPlugin.options.title %></title>
 </head>
 <body>

diff --git a/src/jsview/App.vue b/src/jsview/App.vue
@@ -1,100 +1,50 @@
 <!-- @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3 -->
 <template>
-  <div>
-    <div class="addUserScript-wrapper">
-      <div id="addUserScript" class="row" v-bind:class="{ hide: !show_header }">
-        <div class="col">
-          <h3>{{ plugin_name }}</h3>
-          <span id="clickInstallPlugin">{{ _("clickInstallPlugin") }}</span>
-        </div>
-        <div id="install" class="btn" @click="install">{{ button_name }}</div>
-      </div>
-    </div>
+  <div class="page">
+    <Header ref="header" :meta="meta" :code="code"></Header>
     <Code :code="code" :status="status" />
   </div>
 </template>
 
 <script>
 import Code from "./Code";
-import { getUID, parseMeta } from "lib-iitc-manager";
 import { _ } from "@/i18n";
+import Header from "./Header";
+import { parseMeta } from "lib-iitc-manager";
 
 export default {
   name: "App",
   components: {
+    Header,
     Code
   },
   data() {
     return {
-      button_name: _("install"),
-      plugin_name: "",
       meta: {},
       code: "",
-      filename: "",
-      show_header: false,
       status: _("loading")
     };
   },
   methods: {
-    _: _,
-    install: async function() {
-      const script = [{ meta: this.meta, code: this.code }];
-      await browser.runtime.sendMessage({
-        type: "addUserScripts",
-        scripts: script
-      });
-      this.show_header = false;
-    },
-    checkIfInstalled: async function() {
-      await browser.runtime.sendMessage({
-        type: "getPluginInfo",
-        uid: getUID(this.meta)
-      });
-    },
-    setListeners: function() {
-      const self = this;
-      browser.runtime.onMessage.addListener(function(request) {
-        switch (request.type) {
-          case "resolveGetPluginInfo":
-            if (request.info) {
-              self.button_name = _("reinstall");
-            }
-            break;
-          case "resolveAddUserScripts":
-            Object.entries(request.scripts).map(([, script]) => {
-              const message =
-                _("addedUserScriptTo", [script["name"], script["category"]]) +
-                "\n";
-              alert(message);
-            });
-        }
-      });
-    }
+    _: _
   },
   async mounted() {
     const uniqId = new URL(window.location.href).searchParams.get("uniqId");
     const data = await browser.storage.local.get(uniqId);
     const { url, code } = data[uniqId];
     await browser.storage.local.remove(uniqId);
 
-    this.code = code;
-    this.show_header = true;
-
     const meta = parseMeta(code);
     if (meta["name"] === undefined) return;
+    document.title = `${meta["name"]} — ${_("jsViewTitle")} — IITC Button`;
 
     meta["filename"] = url.substr(url.lastIndexOf("/") + 1);
     this.meta = meta;
-    this.plugin_name = meta["name"];
-
-    this.setListeners();
-    await this.checkIfInstalled();
+    this.code = code;
   }
 };
 </script>
 
-<style src="../../public/assets/roboto/roboto-font.css"></style>
-
 <style>
 body {
   background: #f0f0f0;
@@ -103,52 +53,14 @@ body {
 </style>
 
 <style scoped>
-.row {
+.page {
   display: flex;
   flex-direction: row;
 }
 
-.col {
-  display: flex;
-  flex-direction: column;
-}
-
-h3 {
-  margin: 0 0 0.7em 0;
-}
-
-.addUserScript-wrapper {
-  background: #0e3d4e;
-  color: #fff;
-  border-bottom: 3px solid #316577;
-}
-#addUserScript {
-  padding: 1.8em;
-  margin: auto;
-  width: 640px;
-  height: 68px;
-  font-size: 18px;
-  transition: opacity 0.1s linear;
-}
-#addUserScript.hide {
-  opacity: 0;
-}
-#addUserScript .col {
-  padding-right: 10px;
-}
-
-.btn {
-  cursor: pointer;
-  padding: 10px 22px;
-  background: #fff;
-  color: #222;
-  border-radius: 3px;
-  display: inline-block;
-  height: 22px;
-  margin: auto;
-}
-
-.btn:hover {
-  background: #efefef;
+@media (max-width: 1600px) {
+  .page {
+    flex-direction: column;
+  }
 }
 </style>
diff --git a/src/jsview/Code.vue b/src/jsview/Code.vue
@@ -33,6 +33,8 @@ export default {
 <style>
 pre {
   margin: 0;
+  white-space: pre-wrap;
+  width: calc(100vw - 500px);
 }
 
 .hljs {
@@ -41,14 +43,29 @@ pre {
   font-size: 14px;
 }
 
+.hljs .line {
+  display: flex;
+}
+
 .hljs .line::before {
   content: attr(data-line-number);
   display: inline-block;
   width: 2.5rem;
+  min-width: 2.5rem;
   text-align: right;
   padding-right: 5px;
   color: #7f7f7f;
   border-right: 1px solid #555;
   margin-right: 20px;
 }
+
+.hljs .line div {
+  width: calc(100% - 2.5rem - 25px);
+}
+
+@media (max-width: 1600px) {
+  pre {
+    width: 100vw;
+  }
+}
 </style>