Skip to content

Commit 89558dd

Browse files
author
pipeline
committed
v20.3.47 is released
1 parent 6a77b4c commit 89558dd

File tree

245 files changed

+11685
-4981
lines changed

Some content is hidden

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

245 files changed

+11685
-4981
lines changed

‎config.json‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,18 @@
161161
"stock",
162162
"ohlc",
163163
"common",
164-
"RTL"
164+
"RTL",
165+
"gridData",
166+
"insert",
167+
"emoticons",
168+
"online",
169+
"editor",
170+
"dropdown-button",
171+
"floating-action-button",
172+
"appbar",
173+
"dropdown",
174+
"pdfviewer",
175+
"formdesigner",
176+
"workflow"
165177
]
166178
}

‎gulpfile.js‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ gulp.task('whole-bundle', function (done) {
5858

5959
gulp.task('build', function(done){
6060
var runSequence = require('run-sequence');
61-
runSequence('create-locale', 'combine-samplelists', 'scripts', 'whole-bundle', done);
61+
runSequence('create-locale', 'combine-samplelists', 'styles', 'scripts', 'skip-chunks', 'whole-bundle', done);
6262
})
6363
var jsoncombine = require('gulp-jsoncombine');
6464
var elasticlunr = require('elasticlunr');
@@ -74,7 +74,26 @@ gulp.task('styles', function() {
7474
for(var i=0; i < styleFiles.length; i++) {
7575
shelljs.cp('-R',styleFiles[i], './styles');
7676
}
77-
})
77+
});
78+
79+
gulp.task('skip-chunks', function () {
80+
var skipComp = [];
81+
var compPaths = glob.sync(`./src/*/`, {
82+
silent: true,
83+
ignore: [`./src/common/**/`, `./src`]
84+
});
85+
for (let compPath of compPaths) {
86+
if (!fs.existsSync(`${compPath}/common.js`)) {
87+
var componentName = compPath.replace('./src/', '').replace('/', '');
88+
skipComp.push(componentName);
89+
}
90+
}
91+
if (skipComp.length > 0) {
92+
var skipContent = fs.readFileSync(path.resolve('./src/skipChunk.js'), 'utf-8');
93+
skipContent = `${skipContent.split('[')[0]}${JSON.stringify(skipComp)}`;
94+
fs.writeFileSync(path.resolve('./src/skipChunk.js'), skipContent, 'utf-8');
95+
}
96+
});
7897

7998
function combineSampleList(platform, done) {
8099
var filename = platform === 'javascript' ? 'samplelist.js' : 'sampleList.ts';

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@syncfusion/ej2-samples",
3-
"version": "20.2.43",
3+
"version": "20.3.47",
44
"description": "Samples for Syncfusion Essential JS 2",
55
"author": "Syncfusion Inc.",
66
"license": "SEE LICENSE IN license",

‎sampleOrder.json‎

Lines changed: 68 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,13 @@
77
"icon": "Icons"
88
}
99
},
10+
"appbar": {
11+
"ControlName": "AppBar",
12+
"Samples": {
13+
"default": "Default Functionalities",
14+
"color": "Color"
15+
}
16+
},
1017
"auto-complete": {
1118
"ControlName": "AutoComplete",
1219
"Samples": {
@@ -393,7 +400,6 @@
393400
"ControlName": "Dialog",
394401
"Samples": {
395402
"default": "Default Functionalities",
396-
"custom-dialog": "Custom Dialogs",
397403
"modal-dialog": "Modal",
398404
"template": "Template",
399405
"dialog-contents-via-ajax": "Ajax Content",
@@ -428,6 +434,13 @@
428434
"comments": "Comments"
429435
}
430436
},
437+
"image-editor": {
438+
"ControlName": "Image Editor",
439+
"Samples": {
440+
"default": "Default Functionalities",
441+
"profile-picture": "Profile Picture"
442+
}
443+
},
431444
"drop-down-list": {
432445
"ControlName": "Dropdown List",
433446
"Samples": {
@@ -468,6 +481,15 @@
468481
"ibm-cos-node-file-provider": "IBM Cloud File Provider"
469482
}
470483
},
484+
"floating-action-button": {
485+
"ControlName": "Floating Action Button",
486+
"Samples": {
487+
"overview": "Overview",
488+
"default": "Default Functionalities",
489+
"position": "Position",
490+
"appearance": "Appearance"
491+
}
492+
},
471493
"form-validator": {
472494
"ControlName": "Form Validation",
473495
"Samples": {
@@ -712,6 +734,16 @@
712734
"formats": "Formats"
713735
}
714736
},
737+
"message": {
738+
"ControlName": "Message",
739+
"Samples": {
740+
"default": "Default Functionalities",
741+
"variants": "Variants",
742+
"icons": "Icons",
743+
"customization": "Customization",
744+
"template": "Template"
745+
}
746+
},
715747
"menu": {
716748
"ControlName": "Menu Bar",
717749
"Samples": {
@@ -724,6 +756,14 @@
724756
"toolbar-integration": "Toolbar Integration"
725757
}
726758
},
759+
"mention": {
760+
"ControlName": "Mention",
761+
"Samples": {
762+
"default": "Default Functionalities",
763+
"multiple-list": "Multiple List",
764+
"template": "Template"
765+
}
766+
},
727767
"multi-select": {
728768
"ControlName": "MultiSelect Dropdown",
729769
"Samples": {
@@ -793,6 +833,14 @@
793833
"exporting": "Export"
794834
}
795835
},
836+
"predefined-dialogs": {
837+
"ControlName": "Predefined Dialogs",
838+
"Samples": {
839+
"default": "Default functionality",
840+
"customization": "Customization",
841+
"animation": "Animation"
842+
}
843+
},
796844
"progress-bar": {
797845
"ControlName": "Progress Bar",
798846
"Samples": {
@@ -841,6 +889,7 @@
841889
"image": "Image",
842890
"inline": "Inline",
843891
"paste-cleanup": "Paste from MS Word",
892+
"mention-integration": "Mention Integration",
844893
"iframe": "IFrame",
845894
"print": "Print",
846895
"ajax-load": "Ajax Content",
@@ -856,7 +905,6 @@
856905
"markdown-editor": "Overview",
857906
"markdown-editor-preview": "Preview",
858907
"markdown-editor-custom-format": "Custom Format",
859-
"tribute": "Tribute JS",
860908
"online-html-editor": "Online Html Editor"
861909
}
862910
},
@@ -937,6 +985,13 @@
937985
"keyboard-navigation": "Keyboard Navigation"
938986
}
939987
},
988+
"skeleton": {
989+
"ControlName": "Skeleton",
990+
"Samples": {
991+
"default": "Default Functionalities",
992+
"animation": "Animation"
993+
}
994+
},
940995
"slider": {
941996
"ControlName": "Range Slider",
942997
"Samples": {
@@ -999,6 +1054,17 @@
9991054
"cell-template": "Cell Template"
10001055
}
10011056
},
1057+
"speed-dial": {
1058+
"ControlName": "SpeedDial",
1059+
"Samples": {
1060+
"default":"Default Functionalities",
1061+
"linear": "Position(linear)",
1062+
"radial": "Radial Menu",
1063+
"appearance": "Appearance",
1064+
"template": "Template",
1065+
"modal": "Modal"
1066+
}
1067+
},
10021068
"stock-chart": {
10031069
"ControlName": "Stock Chart",
10041070
"Samples": {

‎src/appbar/color.html‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
<div class="col-lg-12 control-section color-appbar-section">
2+
<div class="color-appbar-container">
3+
<div class="row">
4+
<div class="col-md-12">
5+
<h5>Light</h5>
6+
</div>
7+
</div>
8+
<div class="row">
9+
<div class="col-md-12">
10+
<header id="lightAppBar">
11+
<button id="lightButtonMenu"></button>
12+
<button id="lightButtonHome"></button>
13+
<button id="lightProductDropDownButton">Products</button>
14+
<button id="lightCompanyDropDownButton">Company</button>
15+
<div class="e-appbar-spacer"></div>
16+
<div style="width: 200px; margin-right:10px">
17+
<span class="e-input-group e-control-wrapper e-inherit">
18+
<input type="text" class="e-searchinput e-input" placeholder="Search">
19+
<span class="e-icons e-search e-input-group-icon"></span>
20+
</span>
21+
</div>
22+
<div class="e-appbar-separator"></div>
23+
<button id="lightButtonLogin"></button>
24+
<ul id="lightVerticalMenu"></ul>
25+
</header>
26+
</div>
27+
</div>
28+
<br />
29+
<div class="row">
30+
<div class="col-md-12">
31+
<h5>Dark</h5>
32+
</div>
33+
</div>
34+
<div class="row">
35+
<div class="col-md-12">
36+
<header id="darkAppBar">
37+
<button id="darkButtonMenu"></button>
38+
<button id="darkButtonHome"></button>
39+
<button id="darkProductDropDownButton">Products</button>
40+
<button id="darkCompanyDropDownButton">Company</button>
41+
<div class="e-appbar-spacer"></div>
42+
<div style="width: 200px; margin-right:10px">
43+
<span class="e-input-group e-control-wrapper e-inherit">
44+
<input type="text" class="e-searchinput e-input" placeholder="Search">
45+
<span class="e-icons e-search e-input-group-icon"></span>
46+
</span>
47+
</div>
48+
<div class="e-appbar-separator"></div>
49+
<button id="darkButtonLogin"></button>
50+
<ul id="darkVerticalMenu"></ul>
51+
</header>
52+
</div>
53+
</div>
54+
<br />
55+
<div class="row">
56+
<div class="col-md-12">
57+
<h5>Primary</h5>
58+
</div>
59+
</div>
60+
<div class="row">
61+
<div class="col-md-12">
62+
<header id="primaryAppBar">
63+
<button id="primaryButtonMenu"></button>
64+
<button id="primaryButtonHome"></button>
65+
<button id="primaryProductDropDownButton">Products</button>
66+
<button id="primaryCompanyDropDownButton">Company</button>
67+
<div class="e-appbar-spacer"></div>
68+
<div style="width: 200px; margin-right:10px">
69+
<span class="e-input-group e-control-wrapper e-inherit">
70+
<input type="text" class="e-searchinput e-input" placeholder="Search">
71+
<span class="e-icons e-search e-input-group-icon"></span>
72+
</span>
73+
</div>
74+
<div class="e-appbar-separator"></div>
75+
<button id="primaryButtonLogin"></button>
76+
<ul id="primaryVerticalMenu"></ul>
77+
</header>
78+
</div>
79+
</div>
80+
<br />
81+
<div class="row">
82+
<div class="col-md-12">
83+
<h5>Inherit</h5>
84+
</div>
85+
</div>
86+
<div class="row">
87+
<div class="col-md-12">
88+
<header id="inheritAppBar">
89+
<button id="inheritButtonMenu"></button>
90+
<button id="inheritButtonHome"></button>
91+
<button id="inheritProductDropDownButton">Products</button>
92+
<button id="inheritCompanyDropDownButton">Company</button>
93+
<div class="e-appbar-spacer"></div>
94+
<div style="width: 200px; margin-right:10px">
95+
<span class="e-input-group e-control-wrapper e-inherit">
96+
<input type="text" class="e-searchinput e-input" placeholder="Search">
97+
<span class="e-icons e-search e-input-group-icon"></span>
98+
</span>
99+
</div>
100+
<div class="e-appbar-separator"></div>
101+
<button id="inheritButtonLogin"></button>
102+
<ul id="inheritVerticalMenu"></ul>
103+
</header>
104+
</div>
105+
</div>
106+
<br />
107+
</div>
108+
</div>
109+
<style>
110+
.color-appbar-section .e-dropdown-btn.e-inherit,
111+
.color-appbar-section .e-btn.e-inherit.home {
112+
margin: 0 5px;
113+
}
114+
115+
.color-appbar-section .e-appbar-icon-menu {
116+
display: none;
117+
}
118+
119+
.color-appbar-section .e-appbar .e-appbar-separator {
120+
margin: 0 10px;
121+
}
122+
123+
@media screen and (max-width: 480px) {
124+
125+
.color-appbar-section .e-appbar-icon-menu{
126+
display: block;
127+
}
128+
129+
.color-appbar-section .login,
130+
.color-appbar-section .e-appbar-separator,
131+
.color-appbar-section .e-dropdown-btn.e-inherit.e-appbar-menu,
132+
.color-appbar-section .e-menu-wrapper.e-inherit.e-appbar-menu,
133+
.color-appbar-section .e-menu-wrapper.e-inherit.e-appbar-icon-menu .e-menu .e-menu-item .e-caret,
134+
.color-appbar-section .e-btn.e-inherit.e-appbar-menu {
135+
display: none;
136+
}
137+
138+
.color-appbar-section .e-menu-wrapper.e-inherit.e-appbar-icon-menu ul .e-menu-item.e-menu-caret-icon {
139+
padding: 0 8px;
140+
}
141+
142+
.color-appbar-section .e-menu-wrapper.e-inherit ul .e-menu-item .e-menu-icon {
143+
margin-right: 0;
144+
}
145+
146+
.color-appbar-section .e-menu-wrapper.e-inherit {
147+
margin: 0 10px;
148+
}
149+
150+
.fabric .color-appbar-section .e-menu-wrapper.e-inherit ul.e-menu:not(.e-vertical),
151+
.fabric-dark .color-appbar-section .e-menu-wrapper.e-inherit ul.e-menu:not(.e-vertical) {
152+
padding: 0;
153+
}
154+
155+
.color-appbar-section .e-input-group.e-control-wrapper.e-inherit {
156+
margin-left: 10px;
157+
}
158+
159+
.color-appbar-section .menu {
160+
margin-bottom: 3px;
161+
}
162+
}
163+
</style>
164+
<div id="action-description">
165+
<p>This sample demonstrates the available types of color in the <strong>JavaScript AppBar</strong>. </p>
166+
</div>
167+
<div id="description">
168+
<p>In this demo, the available types of background color for <strong>JavaScript AppBar</strong> are showcased. The background and font colors can be set using the <strong>ColorMode</strong> property. The different types are <code>light</code>, <code>dark</code>, <code>primary</code>, and <code>inherit</code>.</p>
169+
<p><code>Light</code> - The AppBar can be displayed with a light background.</p>
170+
<p><code>Dark</code> - The AppBar can be displayed with a dark background.</p>
171+
<p><code>Primary</code> - The AppBar can be displayed with primary colors.</p>
172+
<p><code>Inherit</code> - The AppBar inherits the color from its parent element.</p> <br />
173+
<p> On <code>mobile devices</code>, media query is used to display the AppBar in adaptive views. You can click the menu to see the hidden AppBar content.</p>
174+
</div>

0 commit comments

Comments
 (0)