From 4c0aca48fd9515f6923c4ce073b30e6baa461356 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Wed, 26 Feb 2020 00:42:41 +0100
Subject: [PATCH] Add "first time" and "updated" pages templates.

---
 src/install/first-time/App.vue         | 214 ++++++++++++++++++++++++
 src/install/first-time/first-time.html |  18 +++
 src/install/first-time/first-time.js   |  11 ++
 src/install/updated/App.vue            | 215 +++++++++++++++++++++++++
 src/install/updated/first-time.html    |  18 +++
 src/install/updated/first-time.js      |  11 ++
 6 files changed, 487 insertions(+)
 create mode 100644 src/install/first-time/App.vue
 create mode 100644 src/install/first-time/first-time.html
 create mode 100644 src/install/first-time/first-time.js
 create mode 100644 src/install/updated/App.vue
 create mode 100644 src/install/updated/first-time.html
 create mode 100644 src/install/updated/first-time.js

diff --git a/src/install/first-time/App.vue b/src/install/first-time/App.vue
new file mode 100644
index 0000000..68cf9cf
--- /dev/null
+++ b/src/install/first-time/App.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="flex flex-column h100">
+    <div class="header flex-nogrow flex-noshrink">
+      Ultrawidify has been updated.
+    </div>
+    <div class="body flex-grow">
+      <h1>Where do you want to use Ultrawidify?</h1>
+      <div class="flex flex-row">
+        <div class=""
+             @click="() => {}"
+        >
+          All sites<br/>
+          <small>(Some sites are disabled by default. Requires access to all sites)</small>
+        </div>
+        <div>
+          Default sites and sites I explicitly allow
+        </div>
+        <div>
+          Only the sites I explicitly allow
+        </div>
+      </div>
+
+      <h1>Try to automatically detect aspect ratio?</h1>
+      <div class="flex flex-row">
+        <div class="">
+          Yes
+        </div>
+        <div>
+          Only on sites I allow
+        </div>
+        <div class="">
+          Never
+        </div>
+      </div>
+      
+      <h1>Do you want to see update notes when extension receives updates?</h1>
+      <p>Update notes will open a new tab, just like this one.</p>
+      <div class="flex flex-row">
+        <div class="">
+          Yes, even for the tiniest changes
+        </div>
+        <div class="">
+          Yes, but only for the big/important ones
+        </div>
+        <div class="">
+          No, never.
+        </div>
+      </div>
+    </div>
+    <div class="footer flex-nogrow flex-noshrink">
+    </div>
+  </div>
+</template>
+
+<script>
+import Debug from '../../ext/conf/Debug';
+import BrowserDetect from '../../ext/conf/BrowserDetect';
+import Logger from '../../ext/lib/Logger';
+
+export default {
+  data () {
+    return {
+      selectedTab: 'video',
+      selectedFrame: '__all',
+      selectedSite: '',
+      activeFrames: [],
+      activeSites: [],
+      port: BrowserDetect.firefox ? browser.runtime.connect({name: 'popup-port'}) : chrome.runtime.connect({name: 'popup-port'}),
+      comms: new Comms(),
+      frameStore: {},
+      frameStoreCount: 0,
+      performance: {},
+      site: null,
+      currentZoom: 1,
+      execAction: new ExecAction(),
+      settings: {},
+      settingsInitialized: false,
+      logger: {},
+      siteTabDisabled: false,
+      videoTabDisabled: false,
+      canShowVideoTab: {canShow: true, warning: true},
+      showWhatsNew: false,
+    }
+  },
+  async created() {
+    this.logger = new Logger();
+    await this.logger.init({
+        allowLogging: true,
+    });
+
+    this.settings = new Settings({updateCallback: () => this.updateConfig(), logger: this.logger});
+    await this.settings.init();
+    this.settingsInitialized = true;
+  },
+  components: {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style src="../../res/css/font/overpass.css"></style>
+<style src="../../res/css/font/overpass-mono.css"></style>
+<style src="../../res/css/flex.css"></style>
+<style src="../../res/css/common.scss"></style>
+
+<style lang="scss" scoped>
+html, body {
+  width: 800px !important;
+  max-width: 800px !important;
+  padding: 0px;
+  margin: 0px;
+}
+
+#tablist {
+  min-width: 275px;
+}
+
+.header {
+  overflow: hidden;
+  background-color: #7f1416;
+  color: #fff;
+  margin: 0px;
+  margin-top: 0px;
+  padding-top: 8px;
+  padding-left: 15px;
+  padding-bottom: 1px;
+  font-size: 2.7em;
+}
+
+
+.menu-item-inline-desc{
+  font-size: 0.60em;
+  font-weight: 300;
+  font-variant: normal;
+}
+
+.menu-item {
+  flex-grow: 0;
+  padding-left: 15px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  font-variant: small-caps;
+  border-left: transparent 5px solid;
+  cursor: pointer;
+  user-select: none;
+}
+
+.menu-item-darker {
+  color: #999;
+}
+
+.suboption {
+  display: block;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-top: 5px;
+  padding-bottom: 20px;
+  min-height: 250px;
+}
+
+
+#no-videos-display {
+  height: 100%;
+  padding-top: 50px;
+/*       text-align: center; */
+}
+
+.tabitem-container {
+  padding-top: 0.5em;
+}
+
+.selected-tab {
+  background-color: initial;
+  border-left: #f18810 5px solid;
+}
+
+.tabitem {
+  font-variant: normal;
+  // font-size: 0.69em;
+  // margin-left: 16px;
+  border-left: transparent 3px solid;
+  padding-left: 12px;
+  margin-left: -10px;
+}
+
+.site-list {
+  max-height: 200px;
+}
+
+.tabitem-selected {
+  color: #fff !important;
+  background-color: initial;
+  border-left: #f0c089 3px solid !important;
+}
+.tabitem-selected::before {
+  padding-right: 8px;
+}
+
+.tabitem-disabled {
+  color: #cc3b0f !important;
+}
+
+.tabitem-iframe::after {
+  content: "</>";
+  padding-left: 0.33em;
+}
+
+.popup {
+  // max-width: 780px;
+  // width: 800px;
+  height: 600px;
+}
+</style>
diff --git a/src/install/first-time/first-time.html b/src/install/first-time/first-time.html
new file mode 100644
index 0000000..c66736c
--- /dev/null
+++ b/src/install/first-time/first-time.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <link rel="stylesheet" href="popup.css">
+
+  <% if (NODE_ENV === 'development') { %>
+  <!-- Load some resources only in development environment -->
+  <% } %>
+</head>
+<body style="width: 800px; height: 600px; overflow: hidden !important">
+  <div id="app">
+
+  </div>
+  <script src="first-time.js"></script>
+</body>
+</html>
diff --git a/src/install/first-time/first-time.js b/src/install/first-time/first-time.js
new file mode 100644
index 0000000..b3688db
--- /dev/null
+++ b/src/install/first-time/first-time.js
@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import App from './App'
+
+// global.browser = require('webextension-polyfill')
+// Vue.prototype.$browser = global.browser
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  render: h => h(App)
+})
diff --git a/src/install/updated/App.vue b/src/install/updated/App.vue
new file mode 100644
index 0000000..fc71851
--- /dev/null
+++ b/src/install/updated/App.vue
@@ -0,0 +1,215 @@
+<template>
+  <div class="flex flex-column h100">
+    <div class="header flex-nogrow flex-noshrink">
+      Thank you for installing Ultrawidify.
+    </div>
+    <div class="body flex-grow">
+      <p>Before we're ready to go, there are three quick questions. You will be able to change these later.</p>
+      <h1>Where do you want to use Ultrawidify?</h1>
+      <div class="flex flex-row">
+        <div class=""
+             @click="() => {}"
+        >
+          All sites<br/>
+          <small>(Some sites are disabled by default. Requires access to all sites)</small>
+        </div>
+        <div>
+          Default sites and sites I explicitly allow
+        </div>
+        <div>
+          Only the sites I explicitly allow
+        </div>
+      </div>
+
+      <h1>Should Ultrawidify automatically detect aspect ratio where possible?</h1>
+      <div class="flex flex-row">
+        <div class="">
+          Yes
+        </div>
+        <div>
+          Only on sites I allow
+        </div>
+        <div class="">
+          Never
+        </div>
+      </div>
+      
+      <h1>Do you want to see update notes when extension receives updates?</h1>
+      <p>Update notes will open a new tab, just like this one.</p>
+      <div class="flex flex-row">
+        <div class="">
+          Yes, even for the tiniest changes
+        </div>
+        <div class="">
+          Yes, but only for the big/important ones
+        </div>
+        <div class="">
+          No, never.
+        </div>
+      </div>
+    </div>
+    <div class="footer flex-nogrow flex-noshrink">
+    </div>
+  </div>
+</template>
+
+<script>
+import Debug from '../../ext/conf/Debug';
+import BrowserDetect from '../../ext/conf/BrowserDetect';
+import Logger from '../../ext/lib/Logger';
+
+export default {
+  data () {
+    return {
+      selectedTab: 'video',
+      selectedFrame: '__all',
+      selectedSite: '',
+      activeFrames: [],
+      activeSites: [],
+      port: BrowserDetect.firefox ? browser.runtime.connect({name: 'popup-port'}) : chrome.runtime.connect({name: 'popup-port'}),
+      comms: new Comms(),
+      frameStore: {},
+      frameStoreCount: 0,
+      performance: {},
+      site: null,
+      currentZoom: 1,
+      execAction: new ExecAction(),
+      settings: {},
+      settingsInitialized: false,
+      logger: {},
+      siteTabDisabled: false,
+      videoTabDisabled: false,
+      canShowVideoTab: {canShow: true, warning: true},
+      showWhatsNew: false,
+    }
+  },
+  async created() {
+    this.logger = new Logger();
+    await this.logger.init({
+        allowLogging: true,
+    });
+
+    this.settings = new Settings({updateCallback: () => this.updateConfig(), logger: this.logger});
+    await this.settings.init();
+    this.settingsInitialized = true;
+  },
+  components: {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style src="../../res/css/font/overpass.css"></style>
+<style src="../../res/css/font/overpass-mono.css"></style>
+<style src="../../res/css/flex.css"></style>
+<style src="../../res/css/common.scss"></style>
+
+<style lang="scss" scoped>
+html, body {
+  width: 800px !important;
+  max-width: 800px !important;
+  padding: 0px;
+  margin: 0px;
+}
+
+#tablist {
+  min-width: 275px;
+}
+
+.header {
+  overflow: hidden;
+  background-color: #7f1416;
+  color: #fff;
+  margin: 0px;
+  margin-top: 0px;
+  padding-top: 8px;
+  padding-left: 15px;
+  padding-bottom: 1px;
+  font-size: 2.7em;
+}
+
+
+.menu-item-inline-desc{
+  font-size: 0.60em;
+  font-weight: 300;
+  font-variant: normal;
+}
+
+.menu-item {
+  flex-grow: 0;
+  padding-left: 15px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  font-variant: small-caps;
+  border-left: transparent 5px solid;
+  cursor: pointer;
+  user-select: none;
+}
+
+.menu-item-darker {
+  color: #999;
+}
+
+.suboption {
+  display: block;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-top: 5px;
+  padding-bottom: 20px;
+  min-height: 250px;
+}
+
+
+#no-videos-display {
+  height: 100%;
+  padding-top: 50px;
+/*       text-align: center; */
+}
+
+.tabitem-container {
+  padding-top: 0.5em;
+}
+
+.selected-tab {
+  background-color: initial;
+  border-left: #f18810 5px solid;
+}
+
+.tabitem {
+  font-variant: normal;
+  // font-size: 0.69em;
+  // margin-left: 16px;
+  border-left: transparent 3px solid;
+  padding-left: 12px;
+  margin-left: -10px;
+}
+
+.site-list {
+  max-height: 200px;
+}
+
+.tabitem-selected {
+  color: #fff !important;
+  background-color: initial;
+  border-left: #f0c089 3px solid !important;
+}
+.tabitem-selected::before {
+  padding-right: 8px;
+}
+
+.tabitem-disabled {
+  color: #cc3b0f !important;
+}
+
+.tabitem-iframe::after {
+  content: "</>";
+  padding-left: 0.33em;
+}
+
+.popup {
+  // max-width: 780px;
+  // width: 800px;
+  height: 600px;
+}
+</style>
diff --git a/src/install/updated/first-time.html b/src/install/updated/first-time.html
new file mode 100644
index 0000000..c66736c
--- /dev/null
+++ b/src/install/updated/first-time.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <link rel="stylesheet" href="popup.css">
+
+  <% if (NODE_ENV === 'development') { %>
+  <!-- Load some resources only in development environment -->
+  <% } %>
+</head>
+<body style="width: 800px; height: 600px; overflow: hidden !important">
+  <div id="app">
+
+  </div>
+  <script src="first-time.js"></script>
+</body>
+</html>
diff --git a/src/install/updated/first-time.js b/src/install/updated/first-time.js
new file mode 100644
index 0000000..b3688db
--- /dev/null
+++ b/src/install/updated/first-time.js
@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import App from './App'
+
+// global.browser = require('webextension-polyfill')
+// Vue.prototype.$browser = global.browser
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  render: h => h(App)
+})