Skip to content

Commit 14f87c7

Browse files
author
pipeline
committed
feature(EJ2-3037): Alignment Samples adding.
1 parent da8232c commit 14f87c7

14 files changed

+333
-94
lines changed

‎src/toolbar/alignment.component.css

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
@font-face {
2+
font-family: 'tbicons';
3+
src: url('src/toolbar/images/fonts/tbicons.ttf?gcjn6a') format('truetype'), url('src/toolbar/images/fonts/tbicons.woff?gcjn6a') format('woff'), url('src/toolbar/images/fonts/tbicons.svg?gcjn6a#tbicons') format('svg');
4+
font-weight: normal;
5+
font-style: normal;
6+
}
7+
8+
.tb-icons {
9+
font-family: 'tbicons';
10+
speak: none;
11+
font-size: 16px;
12+
font-style: normal;
13+
font-weight: normal;
14+
font-variant: normal;
15+
text-transform: none;
16+
}
17+
18+
.e-bigger .e-tbar-btn .tb-icons {
19+
font-size: 24px;
20+
}
21+
22+
.e-toolbar .e-toolbar-item.e-template {
23+
cursor: default;
24+
}
25+
26+
.e-tbar-btn .tb-icons {
27+
font-family: 'tbicons';
28+
speak: none;
29+
font-size: 16px;
30+
font-style: normal;
31+
font-weight: normal;
32+
font-variant: normal;
33+
text-transform: none;
34+
}
35+
36+
.e-toolbar .e-icons {
37+
font-size: 20px;
38+
}
39+
40+
.e-tbar-menu-icon:before {
41+
content: "\e61f";
42+
}
43+
44+
.e-tbar-search-icon:before {
45+
content: "\e620";
46+
}
47+
48+
.e-tbar-settings-icon:before {
49+
content: "\e621";
50+
}
51+
52+
.e-def-avator {
53+
margin: 8px;
54+
border-radius: 50%;
55+
width: 40px;
56+
font-size: 20px;
57+
border: 2px solid #666;
58+
}
59+
60+
.e-def-avator span {
61+
text-align: center;
62+
line-height: 40px;
63+
display: block;
64+
}
65+
66+
.e-mail-header,
67+
.e-mail-subject,
68+
.e-mail-description,
69+
.e-mail-id {
70+
white-space: nowrap;
71+
overflow: hidden;
72+
text-overflow: ellipsis;
73+
}
74+
75+
.e-folder {
76+
text-align: center;
77+
}
78+
79+
.e-mail-header,
80+
.e-mail-subject,
81+
.e-folder {
82+
font-weight: 500;
83+
font-style: normal;
84+
}
85+
86+
.e-mail-item {
87+
margin-top: 8px;
88+
border-bottom: 1px solid #d3d3d3;
89+
}
90+
91+
.e-mail-image {
92+
margin-right: 10px;
93+
float: left;
94+
height: 60px;
95+
}
96+
97+
@media only screen and (min-width: 1224px) {
98+
.e-sample-resize-container {
99+
width: 70%;
100+
}
101+
}
102+
103+
@media only screen and (min-width: 1824px) {
104+
.e-sample-resize-container {
105+
width: 50%;
106+
}
107+
}
108+
109+
.e-sample-resize-container {
110+
margin: auto;
111+
}

‎src/toolbar/alignment.component.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Component, ViewEncapsulation, Inject } from '@angular/core';
2+
3+
let ele: string = '<div class="e-folder" id="mailTemplate"><div class="e-folder-name">Inbox(33)</div>';
4+
ele = ele + '<div class="e-mail-id">[email protected]</div></div>';
5+
/**
6+
* Alignment Based Toolbar Component
7+
*/
8+
@Component({
9+
selector: 'control-content',
10+
templateUrl: 'alignment.html',
11+
styleUrls: ['alignment.component.css'],
12+
encapsulation: ViewEncapsulation.None
13+
})
14+
export class AlignToolbarComponent {
15+
templateEle: string = '<div class="e-folder" id="mailTemplate"><div class="e-folder-name">Inbox(33)</div>';
16+
template: string = this.templateEle + '<div class="e-mail-id">[email protected]</div></div>';
17+
constructor( @Inject('sourceFiles') private sourceFiles: any) {
18+
sourceFiles.files = ['alignment.component.css'];
19+
}
20+
}

‎src/toolbar/alignment.html

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<div class="control-section">
2+
<div class="e-sample-resize-container">
3+
<ej-toolbar>
4+
<e-items>
5+
<e-item prefixIcon='e-tbar-menu-icon tb-icons' tooltipText='Menu'></e-item>
6+
<e-item [template]='template' align='center'></e-item>
7+
<e-item prefixIcon='e-tbar-search-icon tb-icons' tooltipText='Search' align='right'></e-item>
8+
<e-item prefixIcon='e-tbar-settings-icon tb-icons' tooltipText='Popup' align='right'></e-item>
9+
</e-items>
10+
</ej-toolbar>
11+
<div class='e-mail-items'>
12+
<div class='e-mail-item'>
13+
<div class='e-mail-image'>
14+
<div class="e-def-avator"><span>MA</span></div>
15+
</div>
16+
<div class='e-mail-content'><span class="e-mail-header">Maria Anders</span><span class="e-mail-time" style="float: right">11:27AM</span>
17+
<div class="e-mail-subject"> Sales Representative </div>
18+
<div class="e-mail-description"> Can we schedule Meeting Appointment for today? </div>
19+
</div>
20+
</div>
21+
<div class='e-mail-item'>
22+
<div class='e-mail-image'>
23+
<div class="e-def-avator"><span>VA</span></div>
24+
</div>
25+
<div class='e-mail-content'><span class="e-mail-header">Victoria Ashworth</span><span class="e-mail-time" style="float: right">Fri 7:50AM</span>
26+
<div class="e-mail-subject"> Sales Representative </div>
27+
<div class="e-mail-description"> Yes we are available for meeting tomorrow </div>
28+
</div>
29+
</div>
30+
<div class='e-mail-item'>
31+
<div class='e-mail-image'>
32+
<div class="e-def-avator"><span>TH</span></div>
33+
</div>
34+
<div class='e-mail-content'><span class="e-mail-header">Thomas Hardey</span><span class="e-mail-time" style="float: right">Fri 7:50AM</span>
35+
<div class="e-mail-subject"> Sales Representative </div>
36+
<div class="e-mail-description"> Customer has accepted our proposal. Would it be possible for arrange meeting tomorrow? </div>
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
</div>
42+
<div id="description">
43+
<p>
44+
<strong>Toolbar</strong> commands can be aligned in left , right and center positions. By default, all the commands
45+
are left aligned. User can customize the alignment of each toolbar item using <code><a target="_blank" class="code"
46+
href="http://ej2.syncfusion.com/documentation/toolbar/api-item.html#align-string"> align</a></code> property. Possible
47+
values are as follows.
48+
</p>
49+
<br>
50+
<table style="width:100%">
51+
<tr>
52+
<th><strong>Alignment Option</strong></th>
53+
<th><strong>Description</strong></th>
54+
</tr>
55+
<tr>
56+
<td><code>Left (default)</code> </td>
57+
<td>To align commands to the left side of the toolbar.</td>
58+
</tr>
59+
<tr>
60+
<td><code>Center</code> </td>
61+
<td>To align commands to the center of the toolbar.</td>
62+
</tr>
63+
<tr>
64+
<td><code>Right</code></td>
65+
<td>To align commands to the right side of the toolbar.</td>
66+
</tr>
67+
</table>
68+
</div>

‎src/toolbar/default.component.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import { Component,ViewEncapsulation, Inject } from '@angular/core';
1+
import { Component, ViewEncapsulation, Inject } from '@angular/core';
22

33
/**
44
* Default Toolbar Component
55
*/
66
@Component({
77
selector: 'control-content',
88
templateUrl: 'default.html',
9-
styleUrls:['toolbar.component.css'],
9+
styleUrls: ['toolbar.component.css'],
1010
encapsulation: ViewEncapsulation.None
1111
})
1212
export class DefaultToolbarComponent {
13-
constructor(@Inject('sourceFiles') private sourceFiles:any) {
14-
sourceFiles.files = ['toolbar.component.css'];
13+
constructor( @Inject('sourceFiles') private sourceFiles: any) {
14+
sourceFiles.files = ['toolbar.component.css'];
1515
}
1616
}

‎src/toolbar/default.html

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -44,16 +44,16 @@
4444
<br>
4545
<p>
4646
You can use left / right navigation icon or touch swipe to see the hidden commands of the toolbar.
47-
</p>
48-
<ul>
49-
<li>
50-
Initially toolbar rendered with the <code>right navigation</code> icon and you can see hidden commands by <code>moving in right</code> direction.
51-
</li>
52-
<li>
53-
When you reach <code>right end of toolbar</code>, navigation will be switched to <code>left direction</code> and you can see hidden commands by moving in <code>left direction</code>.
54-
</li>
55-
<li>
56-
You can continuously scroll over the toolbar content by holding on the navigation icon.
57-
</li>
58-
</ul>
47+
</p>
48+
<ul>
49+
<li>
50+
Initially toolbar rendered with the <code>right navigation</code> icon and you can see hidden commands by <code>moving in right</code> direction.
51+
</li>
52+
<li>
53+
When you reach <code>right end of toolbar</code>, navigation will be switched to <code>left direction</code> and you can see hidden commands by moving in <code>left direction</code>.
54+
</li>
55+
<li>
56+
You can continuously scroll over the toolbar content by holding on the navigation icon.
57+
</li>
58+
</ul>
5959
</div>

‎src/toolbar/images/fonts/tbicons.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/toolbar/images/fonts/tbicons.ttf

476 Bytes
Binary file not shown.

‎src/toolbar/images/fonts/tbicons.woff

476 Bytes
Binary file not shown.

‎src/toolbar/popup.component.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import { Component,ViewEncapsulation, Inject } from '@angular/core';
1+
import { Component, ViewEncapsulation, Inject } from '@angular/core';
22

33
/**
44
* Popup Toolbar Component
55
*/
66
@Component({
77
selector: 'control-content',
88
templateUrl: 'popup.html',
9-
styleUrls:['toolbar.component.css'],
9+
styleUrls: ['toolbar.component.css'],
1010
encapsulation: ViewEncapsulation.None
1111
})
1212
export class PopupToolbarComponent {
13-
constructor(@Inject('sourceFiles') private sourceFiles:any) {
14-
sourceFiles.files = ['toolbar.component.css'];
13+
constructor( @Inject('sourceFiles') private sourceFiles: any) {
14+
sourceFiles.files = ['toolbar.component.css'];
1515
}
1616
}

0 commit comments

Comments
 (0)