Skip to content

Commit 935f4c7

Browse files
bmarkovbmarkov
committed
up
1 parent acf7a56 commit 935f4c7

File tree

2 files changed

+71
-69
lines changed

2 files changed

+71
-69
lines changed

‎ribbon/defaultfunctionality/src/app/app.component.html

Lines changed: 67 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
1-
<jqxRibbon [theme]="'fluent'" #ribbonReference
2-
[width]="'100%'" [height]="131" [animationType]="'none'"
1+
<jqxRibbon #ribbonReference
2+
[width]="getWidth()" [height]="131" [animationType]="'none'"
33
[selectionMode]="'click'" [position]="'top'" [mode]="'default'"
44
[theme]="'demoTheme'" [selectedIndex]="1">
55
<ul>
66
<li id="fileItem">
7-
<jqxDropDownButton [theme]="'fluent'" id='fileItemButton' #fileItemButton
7+
<jqxDropDownButton id='fileItemButton' #fileItemButton
88
[width]="50" [height]="26" [arrowSize]="0"
99
[dropDownWidth]="120" [theme]="'demoTheme'">
1010
<div style="height:110px;">
1111
<ul style="list-style-type: none; margin:0px; padding: 3px;">
1212
<li>
13-
<jqxButton [theme]="'fluent'" class='button' [theme]="'demoTheme'">
13+
<jqxButton class='button' [theme]="'demoTheme'">
1414
<div class="icon SaveImage"></div> Save
1515
</jqxButton>
1616
</li>
1717
<li>
18-
<jqxButton [theme]="'fluent'" class='button' [theme]="'demoTheme'">
18+
<jqxButton class='button' [theme]="'demoTheme'">
1919
<div class="icon SaveSelectionImage"></div> Save As
2020
</jqxButton>
2121
</li>
2222
<li>
23-
<jqxButton [theme]="'fluent'" class='button' [theme]="'demoTheme'">
23+
<jqxButton class='button' [theme]="'demoTheme'">
2424
<div class="icon folder"></div> Open
2525
</jqxButton>
2626
</li>
2727
<li>
28-
<jqxButton [theme]="'fluent'" class='button' [theme]="'demoTheme'">
28+
<jqxButton class='button' [theme]="'demoTheme'">
2929
<div class="icon close"></div> Close
3030
</jqxButton>
3131
</li>
@@ -44,20 +44,20 @@
4444
<tr>
4545
<td rowspan="3" style="text-align: center; height: 70px; font-size: 10px">
4646
<div id="paste" style="width: 50px;">
47-
<jqxButton [theme]="'fluent'" #pasteButton (onClick)='onPasteButtonClick($event)' (mousedown)='onMouseDownPasteButton($event)'
47+
<jqxButton #pasteButton (onClick)='onPasteButtonClick($event)' (mousedown)='onMouseDownPasteButton($event)'
4848
[width]="35" [height]="56" [theme]="'demoTheme'">
4949
<span class="icon page_paste" style="zoom: 1.5"></span><span class="pasteText">Paste</span>
5050
</jqxButton>
51-
<jqxDropDownList [theme]="'fluent'" (onSelect)='onPasteDropDownSelect($event)'
51+
<jqxDropDownList (onSelect)='onPasteDropDownSelect($event)'
5252
[width]="22" [height]="10" [autoDropDownHeight]="true" [animationType]="'none'"
5353
[theme]="" [selectedIndex]="0" [source]="pasteData" [dropDownWidth]="110"
5454
[renderer]="pasteRenderer" [selectionRenderer]="pasteRelectionRenderer">
5555
</jqxDropDownList>
5656
</div>
5757
</td>
5858
<td class="firstrow" rowspan="1">
59-
<jqxTooltip [theme]="'fluent'" [position]="'mouse'" [theme]="'demoTheme'" [content]="'Cut (Ctrl + X)'">
60-
<jqxButton [theme]="'fluent'" id='cutButton' #cutButton [theme]="'demoTheme'">
59+
<jqxTooltip [position]="'mouse'" [theme]="'demoTheme'" [content]="'Cut (Ctrl + X)'">
60+
<jqxButton id='cutButton' #cutButton [theme]="'demoTheme'">
6161
<div class="icon cut_red"></div>
6262
<span class="cutText">Cut</span>
6363
</jqxButton>
@@ -66,8 +66,8 @@
6666
</tr>
6767
<tr>
6868
<td class="secondrow">
69-
<jqxTooltip [theme]="'fluent'" [position]="'mouse'" [theme]="'demoTheme'" [content]="'Copy (Ctrl + C)'">
70-
<jqxButton [theme]="'fluent'" id='copyButton' #copyButton>
69+
<jqxTooltip [position]="'mouse'" [theme]="'demoTheme'" [content]="'Copy (Ctrl + C)'">
70+
<jqxButton id='copyButton' #copyButton>
7171
<div class="icon page_copy"></div>
7272
<span class="copyText">Copy</span>
7373
</jqxButton>
@@ -76,8 +76,8 @@
7676
</tr>
7777
<tr>
7878
<td class="thirdrow">
79-
<jqxTooltip [theme]="'fluent'" [position]="'mouse'" [theme]="'demoTheme'" [content]="'Format Painter'">
80-
<jqxButton [theme]="'fluent'" id='formatPainter' #formatPainter [theme]="'demoTheme'">
79+
<jqxTooltip [position]="'mouse'" [theme]="'demoTheme'" [content]="'Format Painter'">
80+
<jqxButton id='formatPainter' #formatPainter [theme]="'demoTheme'">
8181
<div class="icon FormatPainterImage"></div>
8282
<span class="formatPainter">Format Painter</span>
8383
</jqxButton>
@@ -95,33 +95,33 @@
9595
<table class="buttonHolderTable" style="float: left;">
9696
<tr>
9797
<td colspan="4">
98-
<jqxDropDownList [theme]="'fluent'" [width]="120" [height]="21" [autoDropDownHeight]="true"
98+
<jqxDropDownList [width]="120" [height]="21" [autoDropDownHeight]="true"
9999
[theme]="'demoTheme'" [selectedIndex]="1" [source]="fontListSource">
100100
</jqxDropDownList>
101101
</td>
102102
<td>
103-
<jqxDropDownList [theme]="'fluent'" [width]="70" [height]="21" [autoDropDownHeight]="true" [renderer]="fontSizeListRenderer"
103+
<jqxDropDownList [width]="70" [height]="21" [autoDropDownHeight]="true" [renderer]="fontSizeListRenderer"
104104
[theme]="'demoTheme'" [selectedIndex]="2" [source]="fontSizeListSource">
105105
</jqxDropDownList>
106106
</td>
107107
<td>
108-
<jqxButton [theme]="'fluent'" [theme]="'demoTheme'"><div class="icon fontsizeincrease16"></div></jqxButton>
108+
<jqxButton [theme]="'demoTheme'"><div class="icon fontsizeincrease16"></div></jqxButton>
109109
</td>
110110
<td>
111-
<jqxButton [theme]="'fluent'" [theme]="'demoTheme'"><div class="icon fontsizedecrease16"></div></jqxButton>
111+
<jqxButton [theme]="'demoTheme'"><div class="icon fontsizedecrease16"></div></jqxButton>
112112
</td>
113113
<td>
114-
<jqxButton [theme]="'fluent'" [theme]="'demoTheme'"><div class="icon ClearFormattingImage"></div></jqxButton>
114+
<jqxButton [theme]="'demoTheme'"><div class="icon ClearFormattingImage"></div></jqxButton>
115115
</td>
116116
<td>
117-
<jqxDropDownList [theme]="'fluent'" [width]="40" [selectionRenderer]="changeCaseListSelectionRenderer" [autoDropDownHeight]="true"
117+
<jqxDropDownList [width]="40" [selectionRenderer]="changeCaseListSelectionRenderer" [autoDropDownHeight]="true"
118118
[theme]="'demoTheme'" [selectedIndex]="0" [source]="changeCaseListSource" [dropDownWidth]="150">
119119
</jqxDropDownList>
120120
</td>
121121
</tr>
122122
<tr class="secondrow">
123123
<td colspan="8">
124-
<jqxDropDownButton [theme]="'fluent'" #fontColor
124+
<jqxDropDownButton #fontColor
125125
[width]="130" [height]="21"
126126
[dropDownWidth]="180" [theme]="'demoTheme'">
127127
<div style="padding: 3px;">
@@ -132,7 +132,7 @@
132132
</div>
133133
</jqxDropDownButton>
134134
<div class="separator"></div>
135-
<jqxDropDownButton [theme]="'fluent'" #highlightColor
135+
<jqxDropDownButton #highlightColor
136136
[width]="130" [height]="21"
137137
[dropDownWidth]="180" [theme]="'demoTheme'">
138138
<div style="padding: 3px;">
@@ -146,34 +146,34 @@
146146
</tr>
147147
<tr class="thirdrow">
148148
<td colspan="8" style="padding: 0;">
149-
<jqxTooltip [theme]="'fluent'" [position]="'mouse'" [theme]="'demoTheme'" [content]="'Superscript'" [height]="20">
150-
<jqxToggleButton [theme]="'fluent'" #superscript (onClick)='onSuperScriptClick()' [theme]="'demoTheme'">
149+
<jqxTooltip [position]="'mouse'" [theme]="'demoTheme'" [content]="'Superscript'" [height]="20">
150+
<jqxToggleButton #superscript (onClick)='onSuperScriptClick()' [theme]="'demoTheme'">
151151
<div class="icon text_superscript"></div>
152152
</jqxToggleButton>
153153
</jqxTooltip>
154-
<jqxTooltip [theme]="'fluent'" [position]="'mouse'" [theme]="'demoTheme'" [content]="'Subscript'" [height]="20">
155-
<jqxToggleButton [theme]="'fluent'" #subscript (onClick)='onSubScriptClick()' [theme]="'demoTheme'">
154+
<jqxTooltip [position]="'mouse'" [theme]="'demoTheme'" [content]="'Subscript'" [height]="20">
155+
<jqxToggleButton #subscript (onClick)='onSubScriptClick()' [theme]="'demoTheme'">
156156
<div class="icon text_subscript"></div>
157157
</jqxToggleButton>
158158
</jqxTooltip>
159159
<div class="separator" style="top: 3px;"></div>
160-
<jqxTooltip [theme]="'fluent'" [position]="'mouse'" [theme]="'demoTheme'" [content]="'Bold (Ctrl + B)'" [height]="20">
161-
<jqxToggleButton [theme]="'fluent'" [theme]="'demoTheme'">
160+
<jqxTooltip [position]="'mouse'" [theme]="'demoTheme'" [content]="'Bold (Ctrl + B)'" [height]="20">
161+
<jqxToggleButton [theme]="'demoTheme'">
162162
<div class="icon text_bold"></div>
163163
</jqxToggleButton>
164164
</jqxTooltip>
165-
<jqxTooltip [theme]="'fluent'" [position]="'mouse'" [theme]="'demoTheme'" [content]="'Italic (Ctrl + I)'" [height]="20">
166-
<jqxToggleButton [theme]="'fluent'" [theme]="'demoTheme'">
165+
<jqxTooltip [position]="'mouse'" [theme]="'demoTheme'" [content]="'Italic (Ctrl + I)'" [height]="20">
166+
<jqxToggleButton [theme]="'demoTheme'">
167167
<div class="icon text_italic"></div>
168168
</jqxToggleButton>
169169
</jqxTooltip>
170-
<jqxTooltip [theme]="'fluent'" [position]="'mouse'" [theme]="'demoTheme'" [content]="'Underline (Ctrl + U)'" [height]="20">
171-
<jqxToggleButton [theme]="'fluent'" [theme]="'demoTheme'">
170+
<jqxTooltip [position]="'mouse'" [theme]="'demoTheme'" [content]="'Underline (Ctrl + U)'" [height]="20">
171+
<jqxToggleButton [theme]="'demoTheme'">
172172
<div class="icon text_underline"></div>
173173
</jqxToggleButton>
174174
</jqxTooltip>
175-
<jqxTooltip [theme]="'fluent'" [position]="'mouse'" [theme]="'demoTheme'" [content]="'Strikethrough'" [height]="20">
176-
<jqxToggleButton [theme]="'fluent'" [theme]="'demoTheme'">
175+
<jqxTooltip [position]="'mouse'" [theme]="'demoTheme'" [content]="'Strikethrough'" [height]="20">
176+
<jqxToggleButton [theme]="'demoTheme'">
177177
<div class="icon text_strikethrough"></div>
178178
</jqxToggleButton>
179179
</jqxTooltip>
@@ -190,33 +190,33 @@
190190
<table class="buttonHolderTable" style="float: left; margin-top: -4px">
191191
<tr class="firstrow">
192192
<td colspan="8">
193-
<jqxTooltip [theme]="'fluent'" [position]="'mouse'" [theme]="'demoTheme'" [content]="'Bulleted List'">
194-
<jqxButton [theme]="'fluent'" [theme]="'demoTheme'">
193+
<jqxTooltip [position]="'mouse'" [theme]="'demoTheme'" [content]="'Bulleted List'">
194+
<jqxButton [theme]="'demoTheme'">
195195
<div class="icon text_list_bullets"></div>
196196
</jqxButton>
197197
</jqxTooltip>
198-
<jqxTooltip [theme]="'fluent'" [position]="'mouse'" [theme]="'demoTheme'" [content]="'Numbered List'">
199-
<jqxButton [theme]="'fluent'" [theme]="'demoTheme'">
198+
<jqxTooltip [position]="'mouse'" [theme]="'demoTheme'" [content]="'Numbered List'">
199+
<jqxButton [theme]="'demoTheme'">
200200
<div class="icon text_list_numbers"></div>
201201
</jqxButton>
202202
</jqxTooltip>
203-
<jqxTooltip [theme]="'fluent'" [position]="'mouse'" [theme]="'demoTheme'" [content]="'Decrease Indent'">
204-
<jqxButton [theme]="'fluent'" [theme]="'demoTheme'">
203+
<jqxTooltip [position]="'mouse'" [theme]="'demoTheme'" [content]="'Decrease Indent'">
204+
<jqxButton [theme]="'demoTheme'">
205205
<div class="icon text_indent"></div>
206206
</jqxButton>
207207
</jqxTooltip>
208-
<jqxTooltip [theme]="'fluent'" [position]="'mouse'" [theme]="'demoTheme'" [content]="'Increase Indent'">
209-
<jqxButton [theme]="'fluent'" [theme]="'demoTheme'">
208+
<jqxTooltip [position]="'mouse'" [theme]="'demoTheme'" [content]="'Increase Indent'">
209+
<jqxButton [theme]="'demoTheme'">
210210
<div class="icon text_indent_remove"></div>
211211
</jqxButton>
212212
</jqxTooltip>
213-
<jqxTooltip [theme]="'fluent'" [position]="'mouse'" [theme]="'demoTheme'" [content]="'Sort Direction'">
214-
<jqxButton [theme]="'fluent'" [theme]="'demoTheme'">
213+
<jqxTooltip [position]="'mouse'" [theme]="'demoTheme'" [content]="'Sort Direction'">
214+
<jqxButton [theme]="'demoTheme'">
215215
<div class="icon SortHS"></div>
216216
</jqxButton>
217217
</jqxTooltip>
218-
<jqxTooltip [theme]="'fluent'" [position]="'mouse'" [theme]="'demoTheme'" [content]="'Fill Style'">
219-
<jqxDropDownButton [theme]="'fluent'" #bucketColor
218+
<jqxTooltip [position]="'mouse'" [theme]="'demoTheme'" [content]="'Fill Style'">
219+
<jqxDropDownButton #bucketColor
220220
[width]="42" [height]="19"
221221
[dropDownWidth]="180" [theme]="'demoTheme'">
222222
<div style="padding: 3px;">
@@ -231,34 +231,34 @@
231231
</tr>
232232
<tr class="secondrow">
233233
<td colspan="8">
234-
<jqxTooltip [theme]="'fluent'" [position]="'mouse'" [theme]="'demoTheme'" [content]="'Align Text Left (Ctrl + L)'">
235-
<jqxButton [theme]="'fluent'" [theme]="'demoTheme'">
234+
<jqxTooltip [position]="'mouse'" [theme]="'demoTheme'" [content]="'Align Text Left (Ctrl + L)'">
235+
<jqxButton [theme]="'demoTheme'">
236236
<div class="icon text_align_left"></div>
237237
</jqxButton>
238238
</jqxTooltip>
239-
<jqxTooltip [theme]="'fluent'" [position]="'mouse'" [theme]="'demoTheme'" [content]="'Center (Ctrl + E)'">
240-
<jqxButton [theme]="'fluent'" [theme]="'demoTheme'">
239+
<jqxTooltip [position]="'mouse'" [theme]="'demoTheme'" [content]="'Center (Ctrl + E)'">
240+
<jqxButton [theme]="'demoTheme'">
241241
<div class="icon text_align_center"></div>
242242
</jqxButton>
243243
</jqxTooltip>
244-
<jqxTooltip [theme]="'fluent'" [position]="'mouse'" [theme]="'demoTheme'" [content]="'Align Text Right (Ctrl + R)'">
245-
<jqxButton [theme]="'fluent'" [theme]="'demoTheme'">
244+
<jqxTooltip [position]="'mouse'" [theme]="'demoTheme'" [content]="'Align Text Right (Ctrl + R)'">
245+
<jqxButton [theme]="'demoTheme'">
246246
<div class="icon text_align_right"></div>
247247
</jqxButton>
248248
</jqxTooltip>
249-
<jqxTooltip [theme]="'fluent'" [position]="'mouse'" [theme]="'demoTheme'" [content]="'Justify (Ctrl + J)'">
250-
<jqxButton [theme]="'fluent'" [theme]="'demoTheme'">
249+
<jqxTooltip [position]="'mouse'" [theme]="'demoTheme'" [content]="'Justify (Ctrl + J)'">
250+
<jqxButton [theme]="'demoTheme'">
251251
<div class="icon text_align_justify"></div>
252252
</jqxButton>
253253
</jqxTooltip>
254254
<div class="separator" style="top:5px; height: 15px;"></div>
255-
<jqxTooltip [theme]="'fluent'" [position]="'mouse'" [theme]="'demoTheme'" [content]="'Line and Paragraph Spacing'">
256-
<jqxButton [theme]="'fluent'" [theme]="'demoTheme'">
255+
<jqxTooltip [position]="'mouse'" [theme]="'demoTheme'" [content]="'Line and Paragraph Spacing'">
256+
<jqxButton [theme]="'demoTheme'">
257257
<div class="icon text_linespacing"></div>
258258
</jqxButton>
259259
</jqxTooltip>
260-
<jqxTooltip [theme]="'fluent'" [position]="'mouse'" [theme]="'demoTheme'" [content]="'Show/Hide special characters'">
261-
<jqxButton [theme]="'fluent'" [theme]="'demoTheme'">
260+
<jqxTooltip [position]="'mouse'" [theme]="'demoTheme'" [content]="'Show/Hide special characters'">
261+
<jqxButton [theme]="'demoTheme'">
262262
<div class="icon ShowParagraphMarksImage"></div>
263263
</jqxButton>
264264
</jqxTooltip>
@@ -277,20 +277,20 @@
277277
<table class="buttonHolderTable" style="height: 100%;">
278278
<tr>
279279
<td class="bigTd">
280-
<jqxButton [theme]="'fluent'" class='button left' [theme]="'demoTheme'" [width]="36" [height]="36">
281-
<img class="img" src="https://www.jqwidgets.com/angular/images/help-26.png" />
280+
<jqxButton class='button left' [theme]="'demoTheme'" [width]="36" [height]="36">
281+
<img class="img" src="./../../../../images/help-26.png" />
282282
</jqxButton>
283283
Help
284284
</td>
285285
<td class="bigTd">
286-
<jqxButton [theme]="'fluent'" class='button left' [theme]="'demoTheme'" [width]="36" [height]="36">
287-
<img class="img" src="https://www.jqwidgets.com/angular/images/about-26.png" />
286+
<jqxButton class='button left' [theme]="'demoTheme'" [width]="36" [height]="36">
287+
<img class="img" src="./../../../../images/about-26.png" />
288288
</jqxButton>
289289
About
290290
</td>
291291
<td class="bigTd">
292-
<jqxButton [theme]="'fluent'" class="button left" [theme]="'demoTheme'" [width]="36" [height]="36">
293-
<img class="img" src="https://www.jqwidgets.com/angular/images/downloading_updates-26.png" />
292+
<jqxButton class="button left" [theme]="'demoTheme'" [width]="36" [height]="36">
293+
<img class="img" src="./../../../../images/downloading_updates-26.png" />
294294
</jqxButton>
295295
Update
296296
</td>
@@ -299,6 +299,6 @@
299299
</div>
300300
</div>
301301
</jqxRibbon>
302-
<jqxRibbon [theme]="'fluent'" [width]="800" [source]="gridData.source" [theme]="'demoTheme'" [editable]="true"
302+
<jqxGrid [width]="800" [source]="gridData.source" [theme]="'demoTheme'" [editable]="true"
303303
[columnsresize]="true" [selectionmode]='"multiplecellsadvanced"' [columns]="gridData.columns">
304-
</jqxRibbon>
304+
</jqxGrid>

‎ribbon/defaultfunctionality/src/app/app.component.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@ import { jqxButtonComponent, jqxButtonModule } from 'jqwidgets-ng/jqxbuttons';
44
import { jqxTooltipComponent, jqxTooltipModule } from 'jqwidgets-ng/jqxtooltip';
55
import { jqxDropDownButtonComponent, jqxDropDownButtonModule } from 'jqwidgets-ng/jqxdropdownbutton';
66
import { jqxColorPickerComponent, jqxColorPickerModule } from 'jqwidgets-ng/jqxcolorpicker';
7-
import { jqxDropDownListComponent, jqxDropDownListmodule } from 'jqwidgets-ng/jqxdropdownlist';
7+
import { jqxDropDownListComponent, jqxDropDownListModule } from 'jqwidgets-ng/jqxdropdownlist';
88
import { jqxToggleButtonComponent, jqxToggleButtonModule } from 'jqwidgets-ng/jqxtogglebutton';
99

1010
import { jqxRibbonModule, jqxRibbonComponent } from 'jqwidgets-ng/jqxribbon';
11+
import { jqxGridModule, jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
12+
1113
@Component({
1214
selector: 'app-root',
13-
imports: [jqxRibbonModule, jqxButtonModule, jqxTooltipModule, jqxDropDownButtonModule, jqxColorPickerModule, jqxToggleButtonModule, jqxDropDownListmodule],
15+
imports: [jqxRibbonModule, jqxGridModule, jqxButtonModule, jqxTooltipModule, jqxDropDownButtonModule, jqxColorPickerModule, jqxToggleButtonModule, jqxDropDownListModule],
1416
standalone: true,
1517
styleUrls: ['./app.component.css'],
1618
templateUrl: './app.component.html',

0 commit comments

Comments
 (0)