Skip to content

Commit 4b7a08d

Browse files
NathanWalkerNathanWalker
authored
feat(keyboard-toolbar): eddy community contribution (#532)
1 parent 9d39749 commit 4b7a08d

29 files changed

+1305
-28
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
- [@nativescript/imagepicker](packages/imagepicker/README.md)
2323
- [@nativescript/ios-security](packages/ios-security/README.md)
2424
- [@nativescript/iqkeyboardmanager](packages/iqkeyboardmanager/README.md)
25+
- [@nativescript/keyboard-toolbar](packages/keyboard-toolbar/README.md)
2526
- [@nativescript/local-notifications](packages/local-notifications/README.md)
2627
- [@nativescript/localize](packages/localize/README.md)
2728
- [@nativescript/pdf](packages/pdf/README.md)

‎apps/demo-angular/package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"main": "./src/main.ts",
33
"dependencies": {
44
"@nativescript/core": "file:../../node_modules/@nativescript/core",
5+
"@nativescript/keyboard-toolbar": "file:../../dist/packages/keyboard-toolbar",
56
"@nativescript/animated-circle": "file:../../dist/packages/animated-circle",
67
"@nativescript/appavailability": "file:../../dist/packages/appavailability",
78
"@nativescript/apple-sign-in": "file:../../dist/packages/apple-sign-in",
@@ -30,12 +31,12 @@
3031
"@nativescript/localize": "file:../../dist/packages/localize",
3132
"@nativescript/pdf": "file:../../dist/packages/pdf",
3233
"@nativescript/picker": "file:../../dist/packages/picker",
34+
"@nativescript/secure-storage": "file:../../dist/packages/secure-storage",
3335
"@nativescript/shared-notification-delegate": "file:../../dist/packages/shared-notification-delegate",
3436
"@nativescript/social-share": "file:../../dist/packages/social-share",
3537
"@nativescript/theme-switcher": "file:../../dist/packages/theme-switcher",
3638
"@nativescript/twitter": "file:../../dist/packages/twitter",
37-
"@nativescript/zip": "file:../../dist/packages/zip",
38-
"@nativescript/secure-storage": "file:../../dist/packages/secure-storage"
39+
"@nativescript/zip": "file:../../dist/packages/zip"
3940
},
4041
"devDependencies": {
4142
"@nativescript/android": "~8.5.0",

‎apps/demo-angular/src/app-routing.module.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const routes: Routes = [
3131
{ path: 'imagepicker', loadChildren: () => import('./plugin-demos/imagepicker.module').then((m) => m.ImagepickerModule) },
3232
{ path: 'ios-security', loadChildren: () => import('./plugin-demos/ios-security.module').then((m) => m.IosSecurityModule) },
3333
{ path: 'iqkeyboardmanager', loadChildren: () => import('./plugin-demos/iqkeyboardmanager.module').then((m) => m.IqkeyboardmanagerModule) },
34+
{ path: 'keyboard-toolbar', loadChildren: () => import('./plugin-demos/keyboard-toolbar.module').then((m) => m.KeyboardToolbarModule) },
3435
{ path: 'local-notifications', loadChildren: () => import('./plugin-demos/local-notifications.module').then((m) => m.LocalNotificationsModule) },
3536
{ path: 'localize', loadChildren: () => import('./plugin-demos/localize.module').then((m) => m.LocalizeModule) },
3637
{ path: 'pdf', loadChildren: () => import('./plugin-demos/pdf.module').then((m) => m.PdfModule) },

‎apps/demo-angular/src/home.component.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,9 @@ export class HomeComponent {
7878
{
7979
name: 'iqkeyboardmanager',
8080
},
81+
{
82+
name: 'keyboard-toolbar',
83+
},
8184
{
8285
name: 'local-notifications',
8386
},

‎apps/demo-angular/src/plugin-demos/keyboard-toolbar.component.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<ActionBar title="keyboard-toolbar" class="action-bar"> </ActionBar>
2+
<StackLayout class="p-20">
3+
<ScrollView class="h-full">
4+
<StackLayout>
5+
<Button text="Test keyboard-toolbar" (tap)="demoShared.testIt()" class="btn btn-primary"></Button>
6+
</StackLayout>
7+
</ScrollView>
8+
</StackLayout>

‎apps/demo-angular/src/plugin-demos/keyboard-toolbar.component.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Component, NgZone } from '@angular/core';
2+
import { DemoSharedKeyboardToolbar } from '@demo/shared';
3+
import {} from '@nativescript/keyboard-toolbar';
4+
5+
@Component({
6+
selector: 'demo-keyboard-toolbar',
7+
templateUrl: 'keyboard-toolbar.component.html',
8+
})
9+
export class KeyboardToolbarComponent {
10+
demoShared: DemoSharedKeyboardToolbar;
11+
12+
constructor(private _ngZone: NgZone) {}
13+
14+
ngOnInit() {
15+
this.demoShared = new DemoSharedKeyboardToolbar();
16+
}
17+
}

‎apps/demo-angular/src/plugin-demos/keyboard-toolbar.module.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
2+
import { NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular';
3+
import { KeyboardToolbarComponent } from './keyboard-toolbar.component';
4+
5+
@NgModule({
6+
imports: [NativeScriptCommonModule, NativeScriptRouterModule.forChild([{ path: '', component: KeyboardToolbarComponent }])],
7+
declarations: [KeyboardToolbarComponent],
8+
schemas: [NO_ERRORS_SCHEMA],
9+
})
10+
export class KeyboardToolbarModule {}

‎apps/demo/package.json

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"repository": "<fill-your-repository-here>",
66
"dependencies": {
77
"@nativescript/core": "file:../../node_modules/@nativescript/core",
8+
"@nativescript/keyboard-toolbar": "file:../../packages/keyboard-toolbar",
89
"@nativescript/animated-circle": "file:../../packages/animated-circle",
910
"@nativescript/appavailability": "file:../../packages/appavailability",
1011
"@nativescript/apple-sign-in": "file:../../packages/apple-sign-in",
@@ -30,15 +31,15 @@
3031
"@nativescript/ios-security": "file:../../packages/ios-security",
3132
"@nativescript/iqkeyboardmanager": "file:../../packages/iqkeyboardmanager",
3233
"@nativescript/local-notifications": "file:../../packages/local-notifications",
33-
"@nativescript/localize": "file:../../dist/packages/localize",
34+
"@nativescript/localize": "file:../../packages/localize",
3435
"@nativescript/pdf": "file:../../packages/pdf",
3536
"@nativescript/picker": "file:../../packages/picker",
37+
"@nativescript/secure-storage": "file:../../packages/secure-storage",
3638
"@nativescript/shared-notification-delegate": "file:../../packages/shared-notification-delegate",
3739
"@nativescript/social-share": "file:../../packages/social-share",
3840
"@nativescript/theme-switcher": "file:../../packages/theme-switcher",
3941
"@nativescript/twitter": "file:../../packages/twitter",
40-
"@nativescript/zip": "file:../../packages/zip",
41-
"@nativescript/secure-storage": "file:../../packages/secure-storage"
42+
"@nativescript/zip": "file:../../packages/zip"
4243
},
4344
"devDependencies": {
4445
"@nativescript/android": "~8.5.0",

‎apps/demo/src/app.scss

Lines changed: 108 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,116 @@
22
@import 'nativescript-theme-core/scss/index';
33

44
Button {
5-
text-transform: none;
6-
height: 54;
7-
android-elevation: 0;
8-
android-dynamic-elevation-offset: 0;
9-
padding: 0;
10-
margin: 0;
11-
12-
&.btn {
13-
padding: 0;
14-
margin: 2 0 2 0;
15-
16-
&.btn-primary {
17-
background-color: rgb(95, 185, 249);
18-
}
19-
}
5+
text-transform: none;
6+
height: 54;
7+
android-elevation: 0;
8+
android-dynamic-elevation-offset: 0;
9+
padding: 0;
10+
margin: 0;
11+
12+
&.btn {
13+
padding: 0;
14+
margin: 2 0 2 0;
15+
16+
&.btn-primary {
17+
background-color: rgb(95, 185, 249);
18+
}
19+
}
2020
}
2121
TextField {
2222
border-bottom-width: 1;
2323
border-bottom-color: transparent;
24-
font-size: 17;
25-
placeholder-color: rgb(201, 201, 201);
26-
padding-top: 0;
27-
padding-bottom: 0;
28-
margin-top: 0;
29-
margin-bottom: 0;
30-
height: 29;
24+
font-size: 17;
25+
placeholder-color: rgb(201, 201, 201);
26+
padding-top: 0;
27+
padding-bottom: 0;
28+
margin-top: 0;
29+
margin-bottom: 0;
30+
height: 29;
31+
}
32+
33+
TextView {
34+
font-size: 13;
35+
padding: 6 0;
36+
}
37+
38+
// TextField {
39+
// font-size: 13;
40+
// padding: 6;
41+
// }
42+
43+
Label.scroll-text {
44+
font-size: 13;
45+
color: #777;
46+
margin: 12 0;
47+
}
48+
49+
.toolbar {
50+
background-color: #f6f6f6;
51+
border-color: #c6c6c6;
52+
border-top-width: 1px;
53+
}
54+
55+
.toolbar.toolbar-twitter {
56+
background-color: #eaf4fa;
57+
border-color: #cbe3f5;
58+
}
59+
60+
.toolbar Label {
61+
color: #777;
62+
padding: 5 13;
63+
text-align: center;
64+
vertical-align: center;
65+
}
66+
67+
.toolbar.toolbar-twitter Label {
68+
color: #4594da;
69+
}
70+
71+
.toolbar Button {
72+
border-radius: 1;
73+
}
74+
75+
.toolbar Label.email-valid {
76+
color: green;
77+
}
78+
79+
.toolbar Label.email-invalid {
80+
color: red;
81+
}
82+
83+
.toolbar Label.price-picker {
84+
color: #327bf6;
85+
font-size: 13;
86+
border-radius: 50%;
87+
border-width: 1;
88+
border-color: #c9c9c9;
89+
padding: 4 6;
90+
margin: 0 6;
91+
}
92+
93+
.toolbar Slider {
94+
margin-bottom: 10;
95+
}
96+
97+
.toolbar Label.slider-label {
98+
font-size: 11;
99+
font-weight: bold;
100+
color: #327bf6;
101+
}
102+
103+
.toolbar Label.slider-min-max {
104+
font-size: 13;
105+
padding-bottom: 10;
106+
}
107+
108+
.icon {
109+
font-family: 'Linearicons-Free';
110+
font-size: 24;
111+
padding: 0 10;
112+
}
113+
114+
Label.icon-trash {
115+
font-size: 20;
116+
color: red;
31117
}

‎apps/demo/src/fonts/Linearicons-Free.ttf

79.7 KB
Binary file not shown.

‎apps/demo/src/main-page.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
<Button text="imagepicker" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
3030
<Button text="ios-security" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
3131
<Button text="iqkeyboardmanager" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
32+
<Button text="keyboard-toolbar" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
3233
<Button text="local-notifications" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
3334
<Button text="localize" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
3435
<Button text="pdf" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>

‎apps/demo/src/plugin-demos/keyboard-toolbar.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Observable, EventData, Page } from '@nativescript/core';
2+
import { DemoSharedKeyboardToolbar } from '@demo/shared';
3+
import {} from '@nativescript/keyboard-toolbar';
4+
5+
export function navigatingTo(args: EventData) {
6+
const page = <Page>args.object;
7+
page.bindingContext = new DemoModel(page);
8+
}
9+
10+
export class DemoModel extends DemoSharedKeyboardToolbar {}

‎apps/demo/src/plugin-demos/keyboard-toolbar.xml

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page" xmlns:kt="@nativescript/keyboard-toolbar">
2+
<Page.actionBar>
3+
<ActionBar title="keyboard-toolbar" icon="" class="action-bar">
4+
</ActionBar>
5+
</Page.actionBar>
6+
<!-- This GridLayout wrapper is required; it wraps your layout and the Toolbar layouts-->
7+
<GridLayout>
8+
<ScrollView>
9+
<StackLayout class="p-x-20">
10+
<TextField id="tf1" hint="Enter the price" keyboardType="number" borderColor="#eee" borderWidth="1" class="m-t-15"/>
11+
<TextField id="tf2" text="{{ getSliderValue() }}" keyboardType="number" borderColor="#eee" borderWidth="1" class="m-t-15"/>
12+
<TextField id="tf3" text="{{ email }}" hint="email@domain.com" keyboardType="email" borderColor="#eee" borderWidth="1" class="m-t-15"/>
13+
<TextView id="tv1" text="" hint="Tell us about yourself.." borderColor="#eee" borderWidth="1" height="60" class="m-t-15" android:paddingLeft="6"/>
14+
<TextView id="tv2" text="Say it with emoji!" borderColor="#eee" borderWidth="1" height="60" class="m-t-15" android:paddingLeft="6"/>
15+
<TextView id="tv3" hint="Don't @ me! " keyboardType="email" borderColor="#eee" borderWidth="1" height="60" class="m-t-15 m-b-20" android:paddingLeft="6"/>
16+
17+
<Label text="Added some text to make the page scroll.." class="scroll-text"/>
18+
<Label text="Added some text to make the page scroll.." class="scroll-text"/>
19+
<Label text="Added some text to make the page scroll.." class="scroll-text"/>
20+
<Label text="Added some text to make the page scroll.." class="scroll-text"/>
21+
<Label text="Added some text to make the page scroll.." class="scroll-text"/>
22+
<Label text="Added some text to make the page scroll.." class="scroll-text"/>
23+
<Label text="Added some text to make the page scroll.." class="scroll-text"/>
24+
<Label text="Added some text to make the page scroll.." class="scroll-text"/>
25+
<Label text="Added some text to make the page scroll.." class="scroll-text"/>
26+
<Label text="Added some text to make the page scroll.." class="scroll-text"/>
27+
<Label text="Added some text to make the page scroll.." class="scroll-text"/>
28+
<Label text="Added some text to make the page scroll.." class="scroll-text"/>
29+
</StackLayout>
30+
</ScrollView>
31+
32+
<kt:Toolbar forId="tf1" height="44" showWhenKeyboardHidden="false" showAtBottomWhenKeyboardHidden="false">
33+
<ScrollView orientation="horizontal">
34+
<StackLayout orientation="horizontal" class="toolbar">
35+
<Label text="Quick pick:" color="#444444" verticalAlignment="center" horizontalAlignment="center"/>
36+
<Label text="{{ iconPriceTag + ' ' + 5 }}" class="icon price-picker" value="5.00" verticalAlignment="center" horizontalAlignment="center" tap="{{ setAmountInTextField }}"/>
37+
<Label text="{{ iconPriceTag + ' ' + 10 }}" class="icon price-picker" value="10.00" verticalAlignment="center" horizontalAlignment="center" tap="{{ setAmountInTextField }}"/>
38+
<Label text="{{ iconPriceTag + ' ' + 50 }}" class="icon price-picker" value="50.00" verticalAlignment="center" horizontalAlignment="center" tap="{{ setAmountInTextField }}"/>
39+
<Label text="{{ iconPriceTag + ' ' + 100 }}" class="icon price-picker" value="100.00" verticalAlignment="center" horizontalAlignment="center" tap="{{ setAmountInTextField }}"/>
40+
<Label text="{{ iconPriceTag + ' ' + 250 }}" class="icon price-picker" value="250.00" verticalAlignment="center" horizontalAlignment="center" tap="{{ setAmountInTextField }}"/>
41+
<Label text="{{ iconPriceTag + ' ' + 500 }}" class="icon price-picker" value="500.00" verticalAlignment="center" horizontalAlignment="center" tap="{{ setAmountInTextField }}"/>
42+
<Label text="{{ iconPriceTag + ' ' + 1000 }}" class="icon price-picker" value="1000.00" verticalAlignment="center" horizontalAlignment="center" tap="{{ setAmountInTextField }}"/>
43+
</StackLayout>
44+
</ScrollView>
45+
</kt:Toolbar>
46+
47+
<kt:Toolbar forId="tf2" height="60">
48+
<GridLayout rows="auto, *" columns="auto, *, auto" class="toolbar">
49+
<Label colSpan="3" text="{{ getSliderValue() }}" class="slider-label slider-label-{{ getSliderValue() < 0 || getSliderValue() > 100 ? 'in' : '' }}valid" verticalAlignment="bottom" horizontalAlignment="center"/>
50+
<Label row="1" col="0" text="0" class="slider-min-max" verticalAlignment="bottom" horizontalAlignment="center"/>
51+
<Slider row="1" col="1" value="{{ sliderValue }}" width="100%" minValue="0" maxValue="100" verticalAlignment="bottom" horizontalAlignment="center"/>
52+
<Label row="1" col="2" text="100" class="slider-min-max" verticalAlignment="bottom" horizontalAlignment="center"/>
53+
</GridLayout>
54+
</kt:Toolbar>
55+
56+
<kt:Toolbar forId="tf3" height="44">
57+
<GridLayout columns="auto, auto, *" class="toolbar">
58+
<Label col="0" text="{{ iconValid }}" class="icon m-l-10 email-valid" verticalAlignment="center" horizontalAlignment="center" visibility="{{ emailOK() ? 'visible' : 'collapse' }}"/>
59+
<Label col="0" text="{{ iconInvalid }}" class="icon m-l-10 email-invalid" verticalAlignment="center" horizontalAlignment="center" visibility="{{ !emailOK() ? 'visible' : 'collapse' }}"/>
60+
<Label col="1" text="{{ emailOK() ? 'looks good! 🍻' : 'email not OK yet..' }}" verticalAlignment="center" horizontalAlignment="center"/>
61+
<Button col="2" text="close" verticalAlignment="center" horizontalAlignment="right" class="m-r-10" tap="{{ hideKeyboardTf3 }}"/>
62+
</GridLayout>
63+
</kt:Toolbar>
64+
65+
<kt:Toolbar forId="tv1" height="44" showWhenKeyboardHidden="false" showAtBottomWhenKeyboardHidden="false">
66+
<GridLayout columns="auto, auto, auto, auto, auto, auto, *, auto" class="toolbar">
67+
<Label col="0" text="{{ iconDown }}" class="icon m-l-10" verticalAlignment="center" horizontalAlignment="center" tap="{{ goToTv2 }}"/>
68+
<Label col="1" text="{{ iconPaperclip }}" class="icon" verticalAlignment="center" horizontalAlignment="center" tap="{{ onTapTv1Camera }}"/>
69+
<Label col="2" text="{{ iconCamera }}" class="icon" verticalAlignment="center" horizontalAlignment="center" tap="{{ onTapTv1Camera }}"/>
70+
<Label col="3" text="{{ iconExpand }}" class="icon" verticalAlignment="center" horizontalAlignment="center" tap="{{ onTapTv1Expand }}"/>
71+
<Label col="4" text="{{ iconContract }}" class="icon" verticalAlignment="center" horizontalAlignment="center" tap="{{ onTapTv1Contract }}"/>
72+
<Label col="5" text="{{ iconTrash }}" class="icon icon-trash" verticalAlignment="center" horizontalAlignment="center" tap="{{ onTapTv1Trash }}"/>
73+
<!--<Button col="6" text="{{ iconMicrophone }}" class="icon" verticalAlignment="center" horizontalAlignment="right"/>-->
74+
<Button col="6" text="close" verticalAlignment="center" horizontalAlignment="right" class="m-r-10" tap="{{ hideKeyboardTv1 }}"/>
75+
</GridLayout>
76+
</kt:Toolbar>
77+
78+
<kt:Toolbar forId="tv2" height="44" showWhenKeyboardHidden="false" showAtBottomWhenKeyboardHidden="false">
79+
<GridLayout columns="*, *, *, *, *, *" class="toolbar">
80+
<Label col="0" text="👍" tap="{{ appendToTextView2 }}"/>
81+
<Label col="1" text="👎" tap="{{ appendToTextView2 }}"/>
82+
<Label col="2" text="😄" tap="{{ appendToTextView2 }}"/>
83+
<Label col="3" text="🎉" tap="{{ appendToTextView2 }}"/>
84+
<Label col="4" text="😕" tap="{{ appendToTextView2 }}"/>
85+
<Label col="5" text="❤️" tap="{{ appendToTextView2 }}"/>
86+
</GridLayout>
87+
</kt:Toolbar>
88+
89+
<kt:Toolbar forId="tv3" height="44">
90+
<ScrollView orientation="horizontal" class="toolbar toolbar-twitter">
91+
<StackLayout orientation="horizontal">
92+
<Label text="Type an @ to search for a Twitter handle" visibility="{{ showEddy || showRob || showTrumpsTies ? 'collapse' : 'visible' }}" verticalAlignment="center" horizontalAlignment="center"/>
93+
<Label text="@eddyverbruggen" visibility="{{ showEddy ? 'visible' : 'collapse' }}" verticalAlignment="center" horizontalAlignment="center" tap="{{ appendToTextView3 }}"/>
94+
<Label text="@roblauer" visibility="{{ showRob ? 'visible' : 'collapse' }}" verticalAlignment="center" horizontalAlignment="center" tap="{{ appendToTextView3 }}"/>
95+
<Label text="@trumpsties" visibility="{{ showTrumpsTies ? 'visible' : 'collapse' }}" verticalAlignment="center" horizontalAlignment="center" tap="{{ appendToTextView3 }}"/>
96+
</StackLayout>
97+
</ScrollView>
98+
</kt:Toolbar>
99+
100+
</GridLayout>
101+
</Page>

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
"@ngtools/webpack": "^15.0.0",
3636
"@types/mkdirp": "^1.0.1",
3737
"@types/sprintf-js": "^1.1.0",
38+
"email-validator": "^2.0.4",
3839
"husky": "^8.0.0",
3940
"mkdirp": "^1.0.4",
4041
"nativescript-permissions": "1.3.11",

0 commit comments

Comments
 (0)