tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

switch bootstrap icons with mdijs

Browse Source
This commit is contained in:
Tamius Han 2021-10-22 00:30:36 +02:00
parent 53fb3e8f46
commit 6c1d666fdf
15 changed files with 80 additions and 22341 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored
View File

@ -29,6 +29,7 @@
"insta",
"letterboxed",
"manjaro",
"mdijs",
"minification",
"mitigations",
"nogrow",
@ -77,4 +78,4 @@
"undisable",
"vdid"
]
}
}

22220
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -24,6 +24,7 @@
},
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@mdi/js": "^6.3.95",
"@types/chrome": "0.0.129",
"@types/core-js": "^2.5.3",
"@types/es6-promise": "^3.3.0",
@ -32,13 +33,12 @@
"@vue/cli": "^4.5.9",
"@vue/cli-plugin-typescript": "^4.5.11",
"bootstrap": "^4.5.3",
"bootstrap-icons": "^1.1.0",
"bootstrap-icons-vue": "^0.3.0",
"bootstrap-vue": "^2.20.1",
"concurrently": "^5.2.0",
"fs-extra": "^7.0.1",
"json-cyclic": "0.0.3",
"lodash": "^4.17.21",
"mdi-vue": "^3.0.8",
"typescript": "^4.2.3",
"vue": "^3.0.0-beta.1",
"vuex": "^4.0.0-alpha.1",

96
src/common/components/Icon.vue
View File

File diff suppressed because one or more lines are too long

14
src/csui/LoggerUi.vue
View File

@ -37,7 +37,7 @@
Default config
</div>
<div v-if="!showTextMode" class="button" @click="showTextMode = true">
<Icon icon="clipboard-plus" style="font-size: 2em"></Icon>&nbsp; Paste config ...
<!-- <Icon icon="clipboard-plus" style="font-size: 2em"></Icon>&nbsp; Paste config ... -->
</div>
<div v-else class="button" @click="showTextMode = false">
Back
@ -57,8 +57,8 @@
</div>
</template>
<template v-else>
<JsonObject label="logger-settings"
:value="currentSettings"
<JsonObject label="logger-settings"
:value="currentSettings"
:ignoreKeys="{'allowLogging': false}"
@change="updateSettingsUi"
></JsonObject>
@ -172,12 +172,12 @@ import Logger, { baseLoggingOptions } from '../ext/lib/Logger';
import Comms from '../ext/lib/comms/Comms';
import IO from '../common/js/IO';
import JsonObject from '../common/components/JsonEditor/JsonObject';
import Icon from '../common/components/Icon';
// import Icon from '../common/components/Icon';
export default {
components: {
JsonObject,
Icon,
// Icon,
},
data() {
return {
@ -273,7 +273,7 @@ export default {
this.lastSettings = val;
this.currentSettings = JSON.parse(JSON.stringify(this.lastSettings));
} catch (e) {
}
},
saveLoggerSettings() {
@ -319,7 +319,7 @@ export default {
}
</script>
<style lang="scss" src="../res/css/flex.scss" scoped></style>
<style lang="scss" src="../res/css/flex.scss" scoped></style>
<style lang="scss" scoped>
@import '../res/css/colors.scss';

27
src/csui/NotificationUi.vue
View File

@ -14,30 +14,31 @@
v-html="notificationText"
>
</div>
<div
<div
v-if="notificationActions"
class="action-buttons flex flex-row"
>
<div
<div
v-for="action of notificationActions"
class="action-button"
:key="action"
@click="action.command"
>
<Icon v-if="action.icon" :icon="action.icon"></Icon>{{action.label}}
<!-- <Icon v-if="action.icon" :icon="action.icon"></Icon> -->
{{action.label}}
</div>
</div>
<div
<div
v-if="hideActions"
class="hide-actions"
>
Never show again:<wbr>&nbsp;
<template
<template
v-for="action of hideActions"
:key="action"
>
<i @click="closeNotification">
<a
<a
class="hide-action-button"
@click="action.command"
>
@ -52,11 +53,11 @@
class="notification-icon action-button"
@click="closeNotification()"
>
<Icon
<!-- <Icon
class="flex-nogrow flex-noshrink"
icon="x"
>
</Icon>
</Icon> -->
</div>
</div>
</div>
@ -64,11 +65,11 @@
<script>
import { mapState } from 'vuex';
import Icon from '../common/components/Icon';
// import Icon from '../common/components/Icon';
export default {
components: {
Icon,
// Icon,
},
data() {
return {
@ -88,7 +89,7 @@ export default {
watch: {
/**
* Sets new notification config. Currently, we can only show one notification at a time.
*
*
* We expect a config object like this:
* {
* timeout: number — how long we'll be displaying the notification. If empty, 10s. -1: until user dismisses it
@ -184,7 +185,7 @@ export default {
padding-left: 0.5em;
padding-right: 0.25em;
}
.notification-icon {
font-size: 3em;
line-height: 0.5;
@ -213,4 +214,4 @@ export default {
cursor: pointer;
}
}
</style>
</style>

4
src/csui/PlayerUiComponent.vue
View File

@ -34,7 +34,7 @@
<script>
import VideoSettings from './PlayerUiPanels/VideoSettings.vue'
import { mapState } from 'vuex';
import Icon from '../common/components/Icon';
// import Icon from '../common/components/Icon';
import ResizerDebugPanel from './PlayerUiPanels/ResizerDebugPanelComponent';
import BrowserDetect from '../ext/conf/BrowserDetect';
import ExecAction from './ui-libs/ExecAction';
@ -43,7 +43,7 @@ import Settings from '../ext/lib/Settings';
export default {
components: {
Icon,
// Icon,
ResizerDebugPanel, VideoSettings
},
data() {

10
src/csui/PlayerUiPanels/ResizerDebugPanelComponent.vue
View File

@ -11,7 +11,9 @@
<small>(Inner size)</small>
</div>
<div class="data">{{windowWidth}} x {{windowHeight}}</div>
<div class="button" @click="refreshWindowSize()"><Icon icon="arrow-clockwise"></Icon> Refresh</div>
<div class="button" @click="refreshWindowSize()">
<!-- <Icon icon="arrow-clockwise"></Icon> -->
Refresh</div>
</div>
<div class="data-item">
<div class="data-title">Player dimensions:</div>
@ -94,11 +96,11 @@
</template>
<script>
import Icon from '../../common/components/Icon';
// import Icon from '../../common/components/Icon';
export default {
components: {
Icon,
// Icon,
},
props: {
debugData: Object
@ -156,4 +158,4 @@ export default {
}
}
</style>
</style>

6
src/ext/lib/uwui/UI.js
View File

@ -1,5 +1,7 @@
import { createApp } from 'vue';
import { createStore } from 'vuex';
import mdiVue from 'mdi-vue/v3';
import * as mdijs from '@mdi/js';
if (process.env.CHANNEL !== 'stable'){
console.info("Loading: UI");
@ -56,7 +58,7 @@ class UI {
this.element = rootDiv;
const app = createApp(this.uiConfig.component);
const app = createApp(this.uiConfig.component).use(mdiVue, {icons: mdijs});
if (this.vuexStore) {
app.use(this.vuexStore);
}
@ -65,7 +67,7 @@ class UI {
/**
* Replaces ui config and re-inits the UI
* @param {*} newUiConfig
* @param {*} newUiConfig
*/
replace(newUiConfig) {
this.element?.remove();

9
src/ext/uw-ui.js
View File

@ -9,6 +9,8 @@ import Logger from './lib/Logger';
import Settings from './lib/Settings';
import CommsClient from './lib/comms/CommsClient';
import Comms from './lib/comms/Comms';
import mdiVue from 'mdi-vue/v3';
import * as mdijs from '@mdi/js';
class UwUi {
@ -185,10 +187,11 @@ class UwUi {
rootDiv.classList.add('uw-ultrawidify-container-root');
document.body.appendChild(rootDiv);
try {
createApp(LoggerUi)
.use(this.vuexStore)
.use(mdiVue, {icons: mdijs})
.mount(`#${uwid}`);
// new Vue({
@ -214,7 +217,7 @@ class UwUi {
await this.initLoggerUi();
}
try {
console.log("will show logger")
this.vuexStore.dispatch('uw-show-logger');
@ -243,7 +246,7 @@ class UwUi {
// leave a mark, so this script won't get executed more than once on a given page
const markerId = 'ultrawidify-marker-5aeaf521-7afe-447f-9a17-3428f62d0970';
// if this script has already been executed, don't execute it again.
// if this script has already been executed, don't execute it again.
if (! document.getElementById(markerId)) {
const markerDiv = document.createElement('div');
markerDiv.setAttribute("style", "display: none");

4
src/options/options.js
View File

@ -1,4 +1,6 @@
import { createApp } from 'vue';
import App from './App';
import mdiVue from 'mdi-vue/v3';
import * as mdijs from '@mdi/js';
createApp(App).mount('#app');
createApp(App).mount('#app').use(mdiVue, {icons: mdijs});

5
src/popup/App.vue
View File

@ -25,8 +25,8 @@
class="w100 show-more flex flex-row flex-center flex-cross-center menu-button"
@click="toggleSideMenu()"
>
<Icon v-if="!sideMenuVisible" icon="list" />
<Icon v-else icon="x" />
<!-- <Icon v-if="!sideMenuVisible" icon="list" /> -->
<!-- <Icon v-else icon="x" /> -->
<div>Menu</div>
</div>
<div class="flex flex-row body no-overflow flex-grow">
@ -195,7 +195,6 @@
</template>
<script>
import Icon from '../common/components/Icon.vue'
import WhatsNewPanel from './panels/WhatsNewPanel.vue';
import SiteDetailsPanel from './panels/SiteDetailsPanel.vue';
import Donate from '../common/misc/Donate.vue';

4
src/popup/popup.js
View File

@ -1,4 +1,6 @@
import { createApp } from 'vue'
import App from './App';
import mdiVue from 'mdi-vue/v3';
import * as mdijs from '@mdi/js';
createApp(App).mount('#app');
createApp(App).mount('#app').use(mdiVue, {icons: mdijs});

2
tsconfig.json
View File

@ -14,4 +14,4 @@
],
},
"include": [ "./src/**/*" ],
}
}

13
webpack.config.js
View File

@ -34,7 +34,7 @@ const config = {
},
module: {
rules: [
{
{
test: /\.ts$/,
loader: 'ts-loader',
exclude: /node_modules/
@ -93,11 +93,8 @@ const config = {
// we need to get webextension-polyfill and put it in common/lib
{ from: '../node_modules/webextension-polyfill/dist/browser-polyfill.js', to: 'common/lib/browser-polyfill.js'},
// This is a hack to get bootstrap icons svg file in /res/icons
{ from: '../node_modules/bootstrap-icons/bootstrap-icons.svg', to: 'res/icons/bootstrap-icons.svg'},
// This is extension icon, as used on extension lists and/or extension's action button
// This folder does not contain any GUI icons — these are in /res/icons.
// This folder does not contain any GUI icons — these are in /res/icons.
// (TODO: check if this copy is even necessary — /icons has same content as /res/icons)
{ from: 'icons', to: 'icons', ignore: ['icon.xcf'] },
{ from: 'popup/popup.html', to: 'popup/popup.html', transform: transformHtml },
@ -127,7 +124,7 @@ const config = {
.replace('-', '.') // YYMM-DD -> YYMM.DD
}.${process.env.BUILD_NUMBER === undefined ? 0 : process.env.BUILD_NUMBER}`;
jsonContent.browser_action.default_title = "Ultrawidify Nightly";
// because we don't want web-ext to submit this as proper release
delete jsonContent.applications;
} else if (process.env.CHANNEL === 'testing') {
@ -143,7 +140,7 @@ const config = {
.replace('-', '.') // YYMM-DD -> YYMM.DD
}.${process.env.BUILD_NUMBER === undefined ? 0 : process.env.BUILD_NUMBER}`;
jsonContent.browser_action.default_title = "Ultrawidify Testing";
// because we don't want web-ext to submit this as proper release
delete jsonContent.applications;
}
@ -184,7 +181,7 @@ if (config.mode === 'production') {
new webpack.DefinePlugin({
'__VUE_OPTIONS_API__': true,
'__VUE_PROD_DEVTOOLS__': false,
'process.env': {
NODE_ENV: '"production"',
},