Skip to content

Commit

Permalink
Update to Ionic 5, remove Vue-specific parts
Browse files Browse the repository at this point in the history
  • Loading branch information
@lights0123
lights0123 committed Mar 26, 2020
1 parent ef67243 commit 5fc13ed
Show file tree
Hide file tree
Showing 10 changed files with 277 additions and 230 deletions.
13 changes: 4 additions & 9 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,18 +23,13 @@
"@capacitor/core": "^2.0.0-beta.1",
"@capacitor/ios": "^2.0.0-beta.1",
"@fortawesome/fontawesome-free": "^5.13.0",
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-regular-svg-icons": "^5.13.0",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@fortawesome/vue-fontawesome": "^0.1.9",
"@ionic-native/core": "^5.23.0",
"@ionic-native/http": "^5.23.0",
"@ionic-native/keyboard": "^5.23.0",
"@ionic/core": "^4.11.10",
"@modus/ionic-vue": "1.3.4",
"@ionic/core": "^5.0.7",
"@types/cordova": "^0.0.34",
"@types/cordova-ionic": "^0.0.29",
"@vue/web-component-wrapper": "latest",
"@vue/web-component-wrapper": "^1.2.0",
"array-to-sentence": "^2.0.0",
"axios": "0.19.2",
"cordova-launch-review": "^3.1.1",
Expand All @@ -57,7 +52,7 @@
"vue-async-computed": "^3.8.2",
"vue-class-component": "^7.0.2",
"vue-custom-element": "^3.2.13",
"vue-fragment": "latest",
"vue-fragment": "^1.5.1",
"vue-property-decorator": "^8.4.1",
"vue-router": "^3.0.1",
"vue-shave": "^1.0.3",
Expand Down Expand Up @@ -89,5 +84,5 @@
"typescript": "3.8.3",
"vue-template-compiler": "^2.6.11"
},
"license": "MIT"
"license": "Apache-2.0"
}
30 changes: 11 additions & 19 deletions src/Main.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
- file, You can obtain one at https://mozilla.org/MPL/2.0/. -->
<template>
<ion-app>
<ion-tabs>
<ion-tabs ref="tabs">
<ion-tab tab="news">
<ion-nav root="app-news" />
</ion-tab>
Expand All @@ -18,17 +18,17 @@

<ion-tab-bar slot="bottom" ref="tabBar">
<ion-tab-button tab="news" @click="click('news')">
<ion-icon name="paper" />
<ion-icon name="newspaper" />
<ion-label>News</ion-label>
</ion-tab-button>

<ion-tab-button tab="saved" @click="click('saved')">
<ion-icon :src="bookmarkURL" class="bookmark-icon" />
<ion-icon name="bookmark" />
<ion-label>Saved</ion-label>
</ion-tab-button>

<ion-tab-button tab="settings" @click="click('settings')">
<ion-icon name="settings" />
<ion-icon ios="cog" md="settings-sharp" />
<ion-label>Settings</ion-label>
</ion-tab-button>
</ion-tab-bar>
Expand All @@ -48,24 +48,17 @@ import '@/views/About.vue';
import '@/views/Copyright.vue';
import { getNav } from './helpers';
import { KeyboardInfo, Plugins, StatusBarStyle } from '@capacitor/core';
import VueRouter from '@/router';
import openLink from '@/helpers/link';
import Actions from '@/store/actions';

const { App, StatusBar, Keyboard } = Plugins;
@Component({
router: new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes: [{ path: '/', redirect: '/news' }],
}),
})
@Component
export default class Main extends Vue {
bookmarkURL = require('@fortawesome/fontawesome-free/svgs/solid/bookmark.svg');
activeTab = 'news';
isSystemDark = false;

@Ref() readonly tabBar!: HTMLIonTabBarElement;
@Ref() readonly tabs!: HTMLIonTabsElement;

get isDarkTheme() {
if (this.$store.state.theme === 'default') return this.isSystemDark;
Expand All @@ -76,10 +69,10 @@ export default class Main extends Vue {
changeTheme(dark: boolean) {
if (dark) document.body.classList.add('dark');
else document.body.classList.remove('dark');
StatusBar.setBackgroundColor({ color: dark ? '#000000' : '#ffffff' }).catch(console.error);
StatusBar.setStyle({ style: dark ? StatusBarStyle.Dark : StatusBarStyle.Light }).catch(
console.error
);
StatusBar.setBackgroundColor({ color: dark ? '#000000' : '#ffffff' }).catch(() => {});
StatusBar.setStyle({
style: dark ? StatusBarStyle.Dark : StatusBarStyle.Light,
}).catch(() => {});
if (dark && this.$store.state.font.bg === '#fff') {
this.$store.dispatch(Actions.SET_COLOR_FG, '#fff');
this.$store.dispatch(Actions.SET_COLOR_BG, '#000');
Expand Down Expand Up @@ -149,11 +142,10 @@ export default class Main extends Vue {
return;
}
this.activeTab = e;
this.$router.replace(e);
}

async openUrl(url: string) {
if (this.$route.path !== '/news') await this.$router.replace('/news');
if ((await this.tabs.getSelected()) !== 'news') await this.tabs.select('news');
await this.$helpers.setImmediate();
openLink(url);
}
Expand Down
174 changes: 85 additions & 89 deletions src/components/FontPopover.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
</ion-col>
</ion-row>
<ion-row class="row-dots">
<ion-col @click="selectedColor = dot" v-for="dot in dots" :key="dot.fg + dot.bg">
<ion-col v-for="dot in dots" :key="dot.fg + dot.bg" @click="selectedColor = dot">
<div
:class="{
selected: selectedColor.fg === dot.fg && selectedColor.bg === dot.bg,
Expand All @@ -44,25 +44,22 @@
</ion-list>
</template>

<script>
<script lang="ts">
import Actions from '@/store/actions';

export default {
name: 'FontPopover',
data() {
return {
dots: [
{ bg: '#fff', fg: '#000' },
{ bg: '#f9f1e4', fg: '#000' },
{ bg: '#4c4b50', fg: '#fff' },
{ bg: '#000', fg: '#fff' },
],
};
},
computed: {
fonts() {
if (this.$isIOS) {
return [
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class FontPopover extends Vue {
dots = [
{ bg: '#fff', fg: '#000' },
{ bg: '#f9f1e4', fg: '#000' },
{ bg: '#4c4b50', fg: '#fff' },
{ bg: '#000', fg: '#fff' },
];

get fonts() {
return this.$isIOS
? [
{ displayName: 'Athelas', name: 'Athelas' },
{ displayName: 'Charter', name: 'Charter' },
{ displayName: 'Georgia', name: 'Georgia' },
Expand All @@ -76,74 +73,73 @@ export default {
{ displayName: 'Roboto', name: 'Roboto' },
{ displayName: 'Open Sans', name: 'Open Sans' },
{ displayName: 'Open Sans Light', name: 'Open Sans', weight: 300 },
];
}
return [
{ displayName: 'Sans Serif', name: 'sans-serif' },
{ displayName: 'Serif', name: 'serif' },
{ displayName: 'Zilla Slab', name: 'Zilla Slab' },
{ displayName: 'Zilla Slab Light', name: 'Zilla Slab', weight: 300 },
{ displayName: 'Roboto', name: 'Roboto' },
{ displayName: 'Open Sans', name: 'Open Sans' },
{ displayName: 'Open Sans Light', name: 'Open Sans', weight: 300 },
];
},
selectedFont: {
get() {
const { font } = this.$store.state;
try {
return this.fonts.find(
({ name, weight }) => font.family === name && font.weight === weight
).displayName;
} catch (e) {
return undefined;
}
},
set(name) {
const font = this.fonts.find(({ displayName }) => displayName === name);
this.$store.dispatch(Actions.SET_FONT_NAME, font.name);
this.$store.dispatch(Actions.SET_FONT_WEIGHT, font.weight);
},
},
fontWeight: {
get() {
return this.$store.state.font.weight;
},
set(weight) {
this.$store.dispatch(Actions.SET_FONT_WEIGHT, weight);
},
},
fontSize: {
get() {
return this.$store.state.font.size;
},
set(size) {
this.$store.dispatch(Actions.SET_FONT_SIZE, size);
},
},
selectedColor: {
get() {
return { fg: this.$store.state.font.fg, bg: this.$store.state.font.bg };
},
set({ fg, bg }) {
this.$store.dispatch(Actions.SET_COLOR_FG, fg);
this.$store.dispatch(Actions.SET_COLOR_BG, bg);
},
},
},
methods: {
decreaseFont() {
let newSize = this.fontSize - 2;
if (newSize < 10) newSize = 10;
this.fontSize = newSize;
},
increaseFont() {
let newSize = this.fontSize + 2;
if (newSize > 30) newSize = 30;
this.fontSize = newSize;
},
},
};
]
: [
{ displayName: 'Sans Serif', name: 'sans-serif' },
{ displayName: 'Serif', name: 'serif' },
{ displayName: 'Zilla Slab', name: 'Zilla Slab' },
{ displayName: 'Zilla Slab Light', name: 'Zilla Slab', weight: 300 },
{ displayName: 'Roboto', name: 'Roboto' },
{ displayName: 'Open Sans', name: 'Open Sans' },
{ displayName: 'Open Sans Light', name: 'Open Sans', weight: 300 },
];
}

get selectedFont() {
const { font } = this.$store.state;
try {
return this.fonts.find(
({ name, weight }) => font.family === name && font.weight === weight
)?.displayName;
} catch (e) {
return undefined;
}
}

set selectedFont(name) {
const font = this.fonts.find(({ displayName }) => displayName === name);
if (!font) return;
this.$store.dispatch(Actions.SET_FONT_NAME, font.name);
this.$store.dispatch(Actions.SET_FONT_WEIGHT, font.weight);
}

get fontWeight() {
return this.$store.state.font.weight;
}

set fontWeight(weight) {
this.$store.dispatch(Actions.SET_FONT_WEIGHT, weight);
}

get fontSize() {
return this.$store.state.font.size;
}

set fontSize(size) {
this.$store.dispatch(Actions.SET_FONT_SIZE, size);
}

get selectedColor() {
return { fg: this.$store.state.font.fg, bg: this.$store.state.font.bg };
}

set selectedColor({ fg, bg }) {
this.$store.dispatch(Actions.SET_COLOR_FG, fg);
this.$store.dispatch(Actions.SET_COLOR_BG, bg);
}

decreaseFont() {
let newSize = this.fontSize - 2;
if (newSize < 10) newSize = 10;
this.fontSize = newSize;
}

increaseFont() {
let newSize = this.fontSize + 2;
if (newSize > 30) newSize = 30;
this.fontSize = newSize;
}
}
</script>

<style scoped>
Expand Down Expand Up @@ -205,11 +201,11 @@ ion-grid {

.row-dots {
border-bottom: 1px solid
rgba(var(--ion-item-md-border-color-rgb, var(--ion-item-border-color-rgb, 0, 0, 0)), 0.13);
rgba(var(--ion-item-md-border-color-rgb, var(--ion-item-border-color-rgb, 0)), 0.13);
}

.dot {
border: 1px solid
rgba(var(--ion-item-md-border-color-rgb, var(--ion-item-border-color-rgb, 0, 0, 0)), 0.13);
rgba(var(--ion-item-md-border-color-rgb, var(--ion-item-border-color-rgb, 0)), 0.13);
}
</style>
10 changes: 10 additions & 0 deletions src/helpers/icons.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { addIcons } from 'ionicons';
import * as allIcons from 'ionicons/icons';
const currentIcons = Object.keys(allIcons).map((i) => {
const key = i.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
return {
[key]: allIcons[i],
};
});
const iconsObject = Object.assign({}, ...currentIcons);
addIcons(iconsObject);
Loading

0 comments on commit 5fc13ed

Please sign in to comment.