Skip to content
This repository was archived by the owner on Oct 7, 2024. It is now read-only.

Commit ad19d45

Browse files
DominikPieperDominikPieper
authored
Merge pull request #20 from paulmojicatech/main
Add Standalone Option for Ionic Angular For Tabs Template
2 parents 725b302 + d8f2a24 commit ad19d45

File tree

59 files changed

+1787
-19626
lines changed

Some content is hidden

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

59 files changed

+1787
-19626
lines changed

‎docs/docs/ionic-angular/generators.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,14 @@ Type: `boolean`
6868

6969
Skip formatting files.
7070

71+
#### standalone
72+
73+
Default: `false`
74+
75+
Type: `boolean`
76+
77+
Create a standalone application.
78+
7179
#### tags
7280

7381
Type: `string`

‎nx.json

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,5 +122,10 @@
122122
]
123123
},
124124
"nxCloudAccessToken": "NTlhMGE3ZTYtYjk5OC00Mzc5LWE2ZTAtNzE4ODEzNDY5MjlmfHJlYWQ=",
125-
"parallel": 1
125+
"parallel": 1,
126+
"pluginsConfig": {
127+
"@nx/js": {
128+
"analyzeSourceFiles": true
129+
}
130+
}
126131
}

‎packages/ionic-angular/src/generators/application/files/base-standalone/ionic.config.json.template

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"name": "<%= name %>",
3+
"integrations": {
4+
"capacitor": {}
5+
},
6+
"type": "angular"
7+
}

‎packages/ionic-angular/src/generators/application/files/base-standalone/src/app/app.component.spec.ts.template

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2+
import { TestBed } from '@angular/core/testing';
3+
4+
import { AppComponent } from './app.component';
5+
6+
describe('AppComponent', () => {
7+
8+
beforeEach(async () => {
9+
await TestBed.configureTestingModule({
10+
declarations: [AppComponent],
11+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
12+
}).compileComponents();
13+
});
14+
15+
it('should create the app', () => {
16+
const fixture = TestBed.createComponent(AppComponent);
17+
const app = fixture.componentInstance;
18+
expect(app).toBeTruthy();
19+
});
20+
21+
});

‎packages/ionic-angular/src/generators/application/files/base-standalone/src/app/app.component.ts.template

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Component } from '@angular/core';
2+
import {IonicModule} from '@ionic/angular';
3+
4+
@Component({
5+
selector: '<%= prefix %>-root',
6+
standalone: true,
7+
imports: [IonicModule],
8+
template: `
9+
<ion-app>
10+
<ion-router-outlet></ion-router-outlet>
11+
</ion-app>
12+
`,
13+
styles: `
14+
15+
`
16+
})
17+
export class AppComponent {
18+
constructor() {}
19+
}

‎packages/ionic-angular/src/generators/application/files/base-standalone/src/assets /icon/favicon.png

930 Bytes
Loading

‎packages/ionic-angular/src/generators/application/files/base-standalone/src/assets /shapes.svg

Lines changed: 1 addition & 0 deletions
Loading

‎packages/ionic-angular/src/generators/application/files/base-standalone/src/index.html.template

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>Ionic App</title>
7+
8+
<base href="/" />
9+
10+
<meta name="color-scheme" content="light dark" />
11+
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
12+
<meta name="format-detection" content="telephone=no" />
13+
<meta name="msapplication-tap-highlight" content="no" />
14+
15+
<link rel="icon" type="image/png" href="assets/icon/favicon.png" />
16+
17+
<!-- add to homescreen for ios -->
18+
<meta name="apple-mobile-web-app-capable" content="yes" />
19+
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
20+
</head>
21+
22+
<body>
23+
<<%= prefix %>-root></<%= prefix %>-root>
24+
</body>
25+
26+
</html>

‎packages/ionic-angular/src/generators/application/files/base-standalone/src/styles.scss.template

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/*
2+
* App Global CSS
3+
* ----------------------------------------------------------------------------
4+
* Put style rules here that you want to apply globally. These styles are for
5+
* the entire app and not just one component. Additionally, this file can be
6+
* used as an entry point to import other CSS/Sass files to be included in the
7+
* output CSS.
8+
* For more information on global stylesheets, visit the documentation:
9+
* https://ionicframework.com/docs/layout/global-stylesheets
10+
*/

‎packages/ionic-angular/src/generators/application/files/base-standalone/src/theme/variables.scss.template

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,236 @@
1+
// Ionic Variables and Theming. For more info, please see:
2+
// http://ionicframework.com/docs/theming/
3+
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;
77+
}
78+
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-item-background: #000000;
183+
184+
--ion-card-background: #1c1c1d;
185+
}
186+
187+
.ios ion-modal {
188+
--ion-background-color: var(--ion-color-step-100);
189+
--ion-toolbar-background: var(--ion-color-step-150);
190+
--ion-toolbar-border-color: var(--ion-color-step-250);
191+
}
192+
193+
194+
/*
195+
* Material Design Dark Theme
196+
* -------------------------------------------
197+
*/
198+
199+
.md body {
200+
--ion-background-color: #121212;
201+
--ion-background-color-rgb: 18,18,18;
202+
203+
--ion-text-color: #ffffff;
204+
--ion-text-color-rgb: 255,255,255;
205+
206+
--ion-border-color: #222222;
207+
208+
--ion-color-step-50: #1e1e1e;
209+
--ion-color-step-100: #2a2a2a;
210+
--ion-color-step-150: #363636;
211+
--ion-color-step-200: #414141;
212+
--ion-color-step-250: #4d4d4d;
213+
--ion-color-step-300: #595959;
214+
--ion-color-step-350: #656565;
215+
--ion-color-step-400: #717171;
216+
--ion-color-step-450: #7d7d7d;
217+
--ion-color-step-500: #898989;
218+
--ion-color-step-550: #949494;
219+
--ion-color-step-600: #a0a0a0;
220+
--ion-color-step-650: #acacac;
221+
--ion-color-step-700: #b8b8b8;
222+
--ion-color-step-750: #c4c4c4;
223+
--ion-color-step-800: #d0d0d0;
224+
--ion-color-step-850: #dbdbdb;
225+
--ion-color-step-900: #e7e7e7;
226+
--ion-color-step-950: #f3f3f3;
227+
228+
--ion-item-background: #1e1e1e;
229+
230+
--ion-toolbar-background: #1f1f1f;
231+
232+
--ion-tab-bar-background: #1f1f1f;
233+
234+
--ion-card-background: #1e1e1e;
235+
}
236+
}

‎packages/ionic-angular/src/generators/application/files/base/src/styles.scss.template

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,3 @@
88
* For more information on global stylesheets, visit the documentation:
99
* https://ionicframework.com/docs/layout/global-stylesheets
1010
*/
11-
12-
/* Core CSS required for Ionic components to work properly */
13-
@import "@ionic/angular/css/core.css";
14-
15-
/* Basic CSS for apps built with Ionic */
16-
@import "@ionic/angular/css/normalize.css";
17-
@import "@ionic/angular/css/structure.css";
18-
@import "@ionic/angular/css/typography.css";
19-
@import '@ionic/angular/css/display.css';
20-
21-
/* Optional CSS utils that can be commented out */
22-
@import "@ionic/angular/css/padding.css";
23-
@import "@ionic/angular/css/float-elements.css";
24-
@import "@ionic/angular/css/text-alignment.css";
25-
@import "@ionic/angular/css/text-transformation.css";
26-
@import "@ionic/angular/css/flex-utils.css";

‎packages/ionic-angular/src/generators/application/files/blank-standalone/src/app/app.component.ts.template

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {Component} from '@angular/core';
2+
import {CommonModule} from '@angular/common';
3+
import {IonicModule} from '@ionic/angular';
4+
5+
@Component({
6+
selector: '<%= prefix %>-root',
7+
standalone: true,
8+
imports: [CommonModule, IonicModule],
9+
template: `
10+
<ion-app>
11+
<ion-router-outlet></ion-router-outlet>
12+
</ion-app>
13+
`,
14+
styles: ``
15+
})
16+
17+
export class AppComponent {}

0 commit comments

Comments
 (0)