Add "first time" and "updated" pages templates.
This commit is contained in:
parent
66169ddeb1
commit
4c0aca48fd
214
src/install/first-time/App.vue
Normal file
214
src/install/first-time/App.vue
Normal file
@ -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>
|
||||||
18
src/install/first-time/first-time.html
Normal file
18
src/install/first-time/first-time.html
Normal file
@ -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>
|
||||||
11
src/install/first-time/first-time.js
Normal file
11
src/install/first-time/first-time.js
Normal file
@ -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)
|
||||||
|
})
|
||||||
215
src/install/updated/App.vue
Normal file
215
src/install/updated/App.vue
Normal file
@ -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>
|
||||||
18
src/install/updated/first-time.html
Normal file
18
src/install/updated/first-time.html
Normal file
@ -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>
|
||||||
11
src/install/updated/first-time.js
Normal file
11
src/install/updated/first-time.js
Normal file
@ -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)
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user