Skip to content

Commit 440f999

Browse files
brandyscarneybrandyscarney
committed
test(vue): improve test app
1 parent d91edcf commit 440f999

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+187
-405
lines changed

‎packages/vue/test/base/index.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,17 @@
1414
<meta name="format-detection" content="telephone=no" />
1515
<meta name="msapplication-tap-highlight" content="no" />
1616

17-
<link rel="shortcut icon" type="image/png" href="/assets/icon/favicon.png" />
17+
<link rel="shortcut icon" type="image/png" href="/favicon.png" />
1818

1919
<!-- add to homescreen for ios -->
20-
<meta name="apple-mobile-web-app-capable" content="yes" />
20+
<meta name="mobile-web-app-capable" content="yes" />
2121
<meta name="apple-mobile-web-app-title" content="Ionic App" />
2222
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
23-
24-
<script type="module" src="/src/main.ts"></script>
2523
</head>
2624

2725
<body>
2826
<div id="app"></div>
27+
<script type="module" src="/src/main.ts"></script>
2928
</body>
3029

3130
</html>

‎packages/vue/test/base/public/favicon.png‎

930 Bytes
Loading

‎packages/vue/test/base/src/components/ModalContent.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<ion-page>
33
<ion-header>
44
<ion-toolbar>
5-
<ion-buttons>
5+
<ion-buttons slot="end">
66
<ion-button @click="dismiss" id="dismiss">Dismiss</ion-button>
77
</ion-buttons>
88
<ion-title>Modal</ion-title>

‎packages/vue/test/base/src/components/NavChild.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<ion-header>
33
<ion-toolbar>
4-
<ion-buttons>
4+
<ion-buttons slot="start">
55
<ion-back-button></ion-back-button>
66
</ion-buttons>
77
<ion-title>Nav - Child</ion-title>

‎packages/vue/test/base/src/components/NavRoot.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<ion-header>
33
<ion-toolbar>
4-
<ion-buttons>
4+
<ion-buttons slot="end">
55
<ion-button @click="dismiss">Dismiss</ion-button>
66
</ion-buttons>
77
<ion-title>Nav - Root</ion-title>

‎packages/vue/test/base/src/main.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,17 @@ import '@ionic/vue/css/text-transformation.css';
2020
import '@ionic/vue/css/flex-utils.css';
2121
import '@ionic/vue/css/display.css';
2222

23+
/**
24+
* Ionic Dark Mode
25+
* -----------------------------------------------------
26+
* For more info, please see:
27+
* https://ionicframework.com/docs/theming/dark-mode
28+
*/
29+
30+
/* @import '@ionic/vue/css/palettes/dark.always.css'; */
31+
/* @import '@ionic/vue/css/palettes/dark.class.css'; */
32+
import '@ionic/vue/css/palettes/dark.system.css';
33+
2334
/* Theme variables */
2435
import './theme/variables.css';
2536

‎packages/vue/test/base/src/router/index.ts‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -92,76 +92,76 @@ const routes: Array<RouteRecordRaw> = [
9292
},
9393
{
9494
path: '/nested',
95-
component: () => import('@/views/RouterOutlet.vue'),
95+
component: () => import('@/views/nested/RouterOutlet.vue'),
9696
children: [
9797
{
9898
path: '',
99-
component: () => import('@/views/NestedChild.vue')
99+
component: () => import('@/views/nested/NestedChild.vue')
100100
},
101101
{
102102
path: 'two',
103-
component: () => import('@/views/NestedChildTwo.vue')
103+
component: () => import('@/views/nested/NestedChildTwo.vue')
104104
},
105105
{
106106
path: ':id',
107-
component: () => import('@/views/Folder.vue'),
107+
component: () => import('@/views/nested/Folder.vue'),
108108
props: true
109109
}
110110
]
111111
},
112112
{
113113
path: '/tabs/',
114-
component: () => import('@/views/Tabs.vue'),
114+
component: () => import('@/views/tabs/Tabs.vue'),
115115
children: [
116116
{
117117
path: '',
118118
redirect: '/tabs/tab1'
119119
},
120120
{
121121
path: 'tab1',
122-
component: () => import('@/views/Tab1.vue'),
122+
component: () => import('@/views/tabs/Tab1.vue'),
123123
},
124124
{
125125
path: 'tab1/:id',
126-
component: () => import('@/views/Tab1Parameter.vue'),
126+
component: () => import('@/views/tabs/Tab1Parameter.vue'),
127127
props: true
128128
},
129129
{
130130
path: 'tab2',
131-
component: () => import('@/views/Tab2.vue')
131+
component: () => import('@/views/tabs/Tab2.vue')
132132
},
133133
{
134134
path: 'tab3',
135135
beforeEnter: (to, from, next) => {
136136
next({ path: '/tabs/tab1' });
137137
},
138-
component: () => import('@/views/Tab3.vue')
138+
component: () => import('@/views/tabs/Tab3.vue')
139139
},
140140
{
141141
path: 'tab4',
142-
component: () => import('@/views/Tab4.vue')
142+
component: () => import('@/views/tabs/Tab4.vue')
143143
}
144144
]
145145
},
146146
{
147147
path: '/tabs-secondary/',
148-
component: () => import('@/views/TabsSecondary.vue'),
148+
component: () => import('@/views/tabs-secondary/TabsSecondary.vue'),
149149
children: [
150150
{
151151
path: '',
152152
redirect: '/tabs-secondary/tab1'
153153
},
154154
{
155155
path: 'tab1',
156-
component: () => import('@/views/Tab1Secondary.vue')
156+
component: () => import('@/views/tabs-secondary/Tab1Secondary.vue')
157157
},
158158
{
159159
path: 'tab2',
160-
component: () => import('@/views/Tab2Secondary.vue')
160+
component: () => import('@/views/tabs-secondary/Tab2Secondary.vue')
161161
},
162162
{
163163
path: 'tab3',
164-
component: () => import('@/views/Tab3Secondary.vue')
164+
component: () => import('@/views/tabs-secondary/Tab3Secondary.vue')
165165
}
166166
]
167167
},

‎packages/vue/test/base/src/theme/variables.css‎

Lines changed: 5 additions & 227 deletions
Original file line numberDiff line numberDiff line change
@@ -1,232 +1,10 @@
1-
/* Ionic Variables and Theming. For more info, please see:
1+
/* For information on how to create your own theme, please see:
22
http://ionicframework.com/docs/theming/ */
33

4-
/** Ionic CSS Variables **/
5-
:root {
6-
/** primary **/
7-
--ion-color-primary: #3880ff;
8-
--ion-color-primary-rgb: 56, 128, 255;
9-
--ion-color-primary-contrast: #ffffff;
10-
--ion-color-primary-contrast-rgb: 255, 255, 255;
11-
--ion-color-primary-shade: #3171e0;
12-
--ion-color-primary-tint: #4c8dff;
13-
14-
/** secondary **/
15-
--ion-color-secondary: #3dc2ff;
16-
--ion-color-secondary-rgb: 61, 194, 255;
17-
--ion-color-secondary-contrast: #ffffff;
18-
--ion-color-secondary-contrast-rgb: 255, 255, 255;
19-
--ion-color-secondary-shade: #36abe0;
20-
--ion-color-secondary-tint: #50c8ff;
21-
22-
/** tertiary **/
23-
--ion-color-tertiary: #5260ff;
24-
--ion-color-tertiary-rgb: 82, 96, 255;
25-
--ion-color-tertiary-contrast: #ffffff;
26-
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
27-
--ion-color-tertiary-shade: #4854e0;
28-
--ion-color-tertiary-tint: #6370ff;
29-
30-
/** success **/
31-
--ion-color-success: #2dd36f;
32-
--ion-color-success-rgb: 45, 211, 111;
33-
--ion-color-success-contrast: #ffffff;
34-
--ion-color-success-contrast-rgb: 255, 255, 255;
35-
--ion-color-success-shade: #28ba62;
36-
--ion-color-success-tint: #42d77d;
37-
38-
/** warning **/
39-
--ion-color-warning: #ffc409;
40-
--ion-color-warning-rgb: 255, 196, 9;
41-
--ion-color-warning-contrast: #000000;
42-
--ion-color-warning-contrast-rgb: 0, 0, 0;
43-
--ion-color-warning-shade: #e0ac08;
44-
--ion-color-warning-tint: #ffca22;
45-
46-
/** danger **/
47-
--ion-color-danger: #eb445a;
48-
--ion-color-danger-rgb: 235, 68, 90;
49-
--ion-color-danger-contrast: #ffffff;
50-
--ion-color-danger-contrast-rgb: 255, 255, 255;
51-
--ion-color-danger-shade: #cf3c4f;
52-
--ion-color-danger-tint: #ed576b;
53-
54-
/** dark **/
55-
--ion-color-dark: #222428;
56-
--ion-color-dark-rgb: 34, 36, 40;
57-
--ion-color-dark-contrast: #ffffff;
58-
--ion-color-dark-contrast-rgb: 255, 255, 255;
59-
--ion-color-dark-shade: #1e2023;
60-
--ion-color-dark-tint: #383a3e;
61-
62-
/** medium **/
63-
--ion-color-medium: #92949c;
64-
--ion-color-medium-rgb: 146, 148, 156;
65-
--ion-color-medium-contrast: #ffffff;
66-
--ion-color-medium-contrast-rgb: 255, 255, 255;
67-
--ion-color-medium-shade: #808289;
68-
--ion-color-medium-tint: #9d9fa6;
69-
70-
/** light **/
71-
--ion-color-light: #f4f5f8;
72-
--ion-color-light-rgb: 244, 245, 248;
73-
--ion-color-light-contrast: #000000;
74-
--ion-color-light-contrast-rgb: 0, 0, 0;
75-
--ion-color-light-shade: #d7d8da;
76-
--ion-color-light-tint: #f5f6f9;
4+
.list-md {
5+
background: transparent;
776
}
787

79-
@media (prefers-color-scheme: dark) {
80-
/*
81-
* Dark Colors
82-
* -------------------------------------------
83-
*/
84-
85-
body {
86-
--ion-color-primary: #428cff;
87-
--ion-color-primary-rgb: 66,140,255;
88-
--ion-color-primary-contrast: #ffffff;
89-
--ion-color-primary-contrast-rgb: 255,255,255;
90-
--ion-color-primary-shade: #3a7be0;
91-
--ion-color-primary-tint: #5598ff;
92-
93-
--ion-color-secondary: #50c8ff;
94-
--ion-color-secondary-rgb: 80,200,255;
95-
--ion-color-secondary-contrast: #ffffff;
96-
--ion-color-secondary-contrast-rgb: 255,255,255;
97-
--ion-color-secondary-shade: #46b0e0;
98-
--ion-color-secondary-tint: #62ceff;
99-
100-
--ion-color-tertiary: #6a64ff;
101-
--ion-color-tertiary-rgb: 106,100,255;
102-
--ion-color-tertiary-contrast: #ffffff;
103-
--ion-color-tertiary-contrast-rgb: 255,255,255;
104-
--ion-color-tertiary-shade: #5d58e0;
105-
--ion-color-tertiary-tint: #7974ff;
106-
107-
--ion-color-success: #2fdf75;
108-
--ion-color-success-rgb: 47,223,117;
109-
--ion-color-success-contrast: #000000;
110-
--ion-color-success-contrast-rgb: 0,0,0;
111-
--ion-color-success-shade: #29c467;
112-
--ion-color-success-tint: #44e283;
113-
114-
--ion-color-warning: #ffd534;
115-
--ion-color-warning-rgb: 255,213,52;
116-
--ion-color-warning-contrast: #000000;
117-
--ion-color-warning-contrast-rgb: 0,0,0;
118-
--ion-color-warning-shade: #e0bb2e;
119-
--ion-color-warning-tint: #ffd948;
120-
121-
--ion-color-danger: #ff4961;
122-
--ion-color-danger-rgb: 255,73,97;
123-
--ion-color-danger-contrast: #ffffff;
124-
--ion-color-danger-contrast-rgb: 255,255,255;
125-
--ion-color-danger-shade: #e04055;
126-
--ion-color-danger-tint: #ff5b71;
127-
128-
--ion-color-dark: #f4f5f8;
129-
--ion-color-dark-rgb: 244,245,248;
130-
--ion-color-dark-contrast: #000000;
131-
--ion-color-dark-contrast-rgb: 0,0,0;
132-
--ion-color-dark-shade: #d7d8da;
133-
--ion-color-dark-tint: #f5f6f9;
134-
135-
--ion-color-medium: #989aa2;
136-
--ion-color-medium-rgb: 152,154,162;
137-
--ion-color-medium-contrast: #000000;
138-
--ion-color-medium-contrast-rgb: 0,0,0;
139-
--ion-color-medium-shade: #86888f;
140-
--ion-color-medium-tint: #a2a4ab;
141-
142-
--ion-color-light: #222428;
143-
--ion-color-light-rgb: 34,36,40;
144-
--ion-color-light-contrast: #ffffff;
145-
--ion-color-light-contrast-rgb: 255,255,255;
146-
--ion-color-light-shade: #1e2023;
147-
--ion-color-light-tint: #383a3e;
148-
}
149-
150-
/*
151-
* iOS Dark Theme
152-
* -------------------------------------------
153-
*/
154-
155-
.ios body {
156-
--ion-background-color: #000000;
157-
--ion-background-color-rgb: 0,0,0;
158-
159-
--ion-text-color: #ffffff;
160-
--ion-text-color-rgb: 255,255,255;
161-
162-
--ion-color-step-50: #0d0d0d;
163-
--ion-color-step-100: #1a1a1a;
164-
--ion-color-step-150: #262626;
165-
--ion-color-step-200: #333333;
166-
--ion-color-step-250: #404040;
167-
--ion-color-step-300: #4d4d4d;
168-
--ion-color-step-350: #595959;
169-
--ion-color-step-400: #666666;
170-
--ion-color-step-450: #737373;
171-
--ion-color-step-500: #808080;
172-
--ion-color-step-550: #8c8c8c;
173-
--ion-color-step-600: #999999;
174-
--ion-color-step-650: #a6a6a6;
175-
--ion-color-step-700: #b3b3b3;
176-
--ion-color-step-750: #bfbfbf;
177-
--ion-color-step-800: #cccccc;
178-
--ion-color-step-850: #d9d9d9;
179-
--ion-color-step-900: #e6e6e6;
180-
--ion-color-step-950: #f2f2f2;
181-
182-
--ion-toolbar-background: #0d0d0d;
183-
184-
--ion-item-background: #000000;
185-
186-
--ion-card-background: #1c1c1d;
187-
}
188-
189-
190-
/*
191-
* Material Design Dark Theme
192-
* -------------------------------------------
193-
*/
194-
195-
.md body {
196-
--ion-background-color: #121212;
197-
--ion-background-color-rgb: 18,18,18;
198-
199-
--ion-text-color: #ffffff;
200-
--ion-text-color-rgb: 255,255,255;
201-
202-
--ion-border-color: #222222;
203-
204-
--ion-color-step-50: #1e1e1e;
205-
--ion-color-step-100: #2a2a2a;
206-
--ion-color-step-150: #363636;
207-
--ion-color-step-200: #414141;
208-
--ion-color-step-250: #4d4d4d;
209-
--ion-color-step-300: #595959;
210-
--ion-color-step-350: #656565;
211-
--ion-color-step-400: #717171;
212-
--ion-color-step-450: #7d7d7d;
213-
--ion-color-step-500: #898989;
214-
--ion-color-step-550: #949494;
215-
--ion-color-step-600: #a0a0a0;
216-
--ion-color-step-650: #acacac;
217-
--ion-color-step-700: #b8b8b8;
218-
--ion-color-step-750: #c4c4c4;
219-
--ion-color-step-800: #d0d0d0;
220-
--ion-color-step-850: #dbdbdb;
221-
--ion-color-step-900: #e7e7e7;
222-
--ion-color-step-950: #f3f3f3;
223-
224-
--ion-item-background: #1e1e1e;
225-
226-
--ion-toolbar-background: #1f1f1f;
227-
228-
--ion-tab-bar-background: #1f1f1f;
229-
230-
--ion-card-background: #1e1e1e;
231-
}
8+
.list-ios ion-item {
9+
--ion-item-background: #1c1c1e;
23210
}

0 commit comments

Comments
 (0)