switch bootstrap icons with mdijs
This commit is contained in:
parent
53fb3e8f46
commit
6c1d666fdf
1
.vscode/settings.json
vendored
1
.vscode/settings.json
vendored
@ -29,6 +29,7 @@
|
||||
"insta",
|
||||
"letterboxed",
|
||||
"manjaro",
|
||||
"mdijs",
|
||||
"minification",
|
||||
"mitigations",
|
||||
"nogrow",
|
||||
|
22220
package-lock.json
generated
22220
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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
@ -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> Paste config ...
|
||||
<!-- <Icon icon="clipboard-plus" style="font-size: 2em"></Icon> 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 {
|
||||
|
@ -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 {
|
||||
|
@ -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() {
|
||||
|
@ -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
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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({
|
||||
|
@ -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});
|
||||
|
@ -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';
|
||||
|
@ -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});
|
||||
|
@ -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)
|
||||
|
Loading…
Reference in New Issue
Block a user