switch bootstrap icons with mdijs

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

View File

@ -29,6 +29,7 @@
"insta",
"letterboxed",
"manjaro",
"mdijs",
"minification",
"mitigations",
"nogrow",

22220
package-lock.json generated

File diff suppressed because it is too large Load Diff

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",

File diff suppressed because one or more lines are too long

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
@ -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 {

View File

@ -24,7 +24,8 @@
: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
@ -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 {

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() {

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

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);
}

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 {
@ -189,6 +191,7 @@ class UwUi {
try {
createApp(LoggerUi)
.use(this.vuexStore)
.use(mdiVue, {icons: mdijs})
.mount(`#${uwid}`);
// new Vue({

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});

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';

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});

View File

@ -93,9 +93,6 @@ 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.
// (TODO: check if this copy is even necessary — /icons has same content as /res/icons)