Skip to content

Commit

Permalink
test(tabstrip): update rendering
Browse files Browse the repository at this point in the history
  • Loading branch information
@JoomFX @joneff
JoomFX authored and joneff committed Aug 12, 2021
1 parent d1a9e4e commit de24660
Show file tree
Hide file tree
Showing 10 changed files with 625 additions and 472 deletions.
12 changes: 7 additions & 5 deletions tests/visual/src/misc/editor-angular.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -389,11 +389,13 @@
<div class="k-edit-form-container">
<div class="k-tabstrip-wrapper">
<kendo-tabstrip class="k-widget k-tabstrip k-floatwrap k-header k-tabstrip-top">
<ul class="k-reset k-tabstrip-items">
<li class="k-item k-state-active"><span class="k-link">Table</span></li>
<li class="k-item"><span class="k-link">Cell</span></li>
<li class="k-item"><span class="k-link">Accessibility</span></li>
</ul>
<div class="k-tabstrip-items-wrapper k-hstack">
<ul class="k-reset k-tabstrip-items">
<li class="k-item k-state-active"><span class="k-link">Table</span></li>
<li class="k-item"><span class="k-link">Cell</span></li>
<li class="k-item"><span class="k-link">Accessibility</span></li>
</ul>
</div>
<div class="k-content k-state-active"><p>foo 1</p></div>
<div class="k-content"><p>foo 2</p></div>
<div class="k-content"><p>foo 3</p></div>
Expand Down
54 changes: 29 additions & 25 deletions tests/visual/src/misc/editor-find-replace.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,16 @@
</div>
<div class="k-content k-window-content">
<div class="k-widget k-header k-floatwrap k-tabstrip k-tabstrip-top k-editor-find-replace">
<ul class="k-tabstrip-items k-reset">
<li class="k-item k-state-active k-tab-on-top">
<span class="k-link">Find</span>
</li>
<li class="k-item">
<span class="k-link">Replace</span>
</li>
</ul>
<div class="k-tabstrip-items-wrapper k-hstack">
<ul class="k-tabstrip-items k-reset">
<li class="k-item k-state-active k-tab-on-top">
<span class="k-link">Find</span>
</li>
<li class="k-item">
<span class="k-link">Replace</span>
</li>
</ul>
</div>
<div class="k-content k-state-active">
<div>
<div class="k-edit-form-container">
Expand Down Expand Up @@ -97,16 +99,18 @@
</div>
</div>
<div class="k-content k-window-content">
<div class="k-widget k-header k-floatwrap k-tabstrip k-tabstrip-top k-editor-find-replace">
<ul class="k-tabstrip-items k-reset">
<li class="k-item">
<span class="k-link">Find</span>
</li>
<li class="k-item k-state-active k-tab-on-top">
<span class="k-link">Replace</span>
</li>
</ul>
<div class="k-content k-state-active">
<div class="k-widget k-header k-floatwrap k-tabstrip k-tabstrip-top k-editor-find-replace">
<div class="k-tabstrip-items-wrapper k-hstack">
<ul class="k-tabstrip-items k-reset">
<li class="k-item">
<span class="k-link">Find</span>
</li>
<li class="k-item k-state-active k-tab-on-top">
<span class="k-link">Replace</span>
</li>
</ul>
</div>
<div class="k-content k-state-active">
<div>
<div class="k-edit-form-container">
<div class="k-edit-label">
Expand All @@ -121,7 +125,7 @@
<div class="k-edit-field">
<input class="k-textbox" value="grid"/>
</div>
</div>
</div>
<div class="k-action-buttons k-actions k-actions-end">
<button class="k-button">Replace</button>
<button class="k-button">Replace All</button>
Expand Down Expand Up @@ -156,10 +160,10 @@
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<span>Text Highlight</span>
<span></span>
Expand All @@ -184,15 +188,15 @@
</span>
</div>
<div class="k-editor-content" style="height: 320px;">
<div class="ProseMirror">
<div class="ProseMirror">
<p>The KendoReact Editor allows your users to edit <span class="k-text-selected">HTML</span> in a familiar, user-friendly way.<br>
The Editor provides the core <span class="k-text-highlighted">HTML</span> editing engine, which includes text formatting, hyperlinks, and lists.
The component <strong>outputs identical <span class="k-text-highlighted">HTML</span></strong> across all major browsers, follows accessibility standards,
and provides API for content manipulation.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>

Expand Down
12 changes: 7 additions & 5 deletions tests/visual/src/misc/editor-table-wizard-accessibility.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,13 @@
<div class="k-edit-form-container">
<div class="k-tabstrip-wrapper">
<div class="k-root-tabs k-widget k-header k-tabstrip k-floatwrap k-tabstrip-top">
<ul class="k-tabstrip-items k-reset">
<li class="k-item k-first"><span class="k-loading k-complete"></span><span class="k-link">Table</span></li>
<li class="k-item"><span class="k-loading k-complete"></span><span class="k-link">Cell</span></li>
<li class="k-item k-last k-tab-on-top k-state-active"><span class="k-loading k-complete"></span><span class="k-link">Accessibility</span></li>
</ul>
<div class="k-tabstrip-items-wrapper k-hstack">
<ul class="k-tabstrip-items k-reset">
<li class="k-item k-first"><span class="k-loading k-complete"></span><span class="k-link">Table</span></li>
<li class="k-item"><span class="k-loading k-complete"></span><span class="k-link">Cell</span></li>
<li class="k-item k-last k-tab-on-top k-state-active"><span class="k-loading k-complete"></span><span class="k-link">Accessibility</span></li>
</ul>
</div>
<div class="k-content k-state-active">
<div class="k-edit-label">
<label>Header Rows</label>
Expand Down
14 changes: 8 additions & 6 deletions tests/visual/src/misc/listview-loading.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,14 @@

<div class="k-tabstrip-wrapper">
<div class="k-widget k-header k-tabstrip k-floatwrap k-tabstrip-top">
<ul class="k-tabstrip-items k-reset">
<li class="k-state-active k-item k-tab-on-top k-first">
<span class="k-loading k-complete"></span>
<span class="k-link">Child listview with loading</span>
</li>
</ul>
<div class="k-tabstrip-items-wrapper k-hstack">
<ul class="k-tabstrip-items k-reset">
<li class="k-state-active k-item k-tab-on-top k-first">
<span class="k-loading k-complete"></span>
<span class="k-link">Child listview with loading</span>
</li>
</ul>
</div>
<div class="k-content k-state-active" style="display: block;" id="tabstrip-1">
<div class="k-widget k-listview k-d-flex">
<div class="k-listview-content">
Expand Down
72 changes: 38 additions & 34 deletions tests/visual/src/misc/spreadsheet.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,20 +27,22 @@
<a class="k-button k-button-icon"><span class="k-icon k-i-redo"></span></a>
</div>
<div class="k-widget k-header k-tabstrip k-floatwrap k-tabstrip-top k-spreadsheet-tabstrip">
<ul class="k-tabstrip-items k-reset" style="padding-left: 76px;">
<li class="k-item k-first k-tab-on-top k-state-active">
<span class="k-loading k-complete"></span>
<span class="k-link">Home</span>
</li>
<li class="k-item">
<span class="k-loading k-complete"></span>
<span class="k-link">Insert</span>
</li>
<li class="k-item k-last">
<span class="k-loading k-complete"></span>
<span class="k-link">Data</span>
</li>
</ul>
<div class="k-tabstrip-items-wrapper k-hstack">
<ul class="k-tabstrip-items k-reset" style="padding-left: 76px;">
<li class="k-item k-first k-tab-on-top k-state-active">
<span class="k-loading k-complete"></span>
<span class="k-link">Home</span>
</li>
<li class="k-item">
<span class="k-loading k-complete"></span>
<span class="k-link">Insert</span>
</li>
<li class="k-item k-last">
<span class="k-loading k-complete"></span>
<span class="k-link">Data</span>
</li>
</ul>
</div>
<div class="k-content k-state-active" style="display: block;">
<div class="k-toolbar k-widget k-toolbar-resizable k-spreadsheet-toolbar">
<div class="k-button k-upload-button k-button-icon k-toolbar-first-visible">
Expand Down Expand Up @@ -601,26 +603,28 @@
<span class="k-icon k-icon k-i-plus"></span>
</a>
<div class="k-spreadsheet-sheets-items k-tabstrip-scrollable k-tabstrip k-floatwrap k-tabstrip-bottom">
<ul class="k-reset k-tabstrip-items" style="margin-left: 36px;">
<li class="k-item k-state-active k-state-tab-on-top k-spreadsheet-sheets-bar-active">
<span class="k-link">Food Order</span>
<span class="k-link k-spreadsheet-sheets-remove">
<span class="k-icon k-icon k-i-close"></span>
</span>
</li>
<li class="k-item k-spreadsheet-sheets-bar-inactive">
<span class="k-link">Balance Sheet</span>
<span class="k-link k-spreadsheet-sheets-remove">
<span class="k-icon k-icon k-i-close"></span>
</span>
</li>
</ul>
<span class="k-button k-button-icon k-flat k-tabstrip-prev" style="left: 36px; display: none;">
<span class="k-icon k-i-arrow-60-left"></span>
</span>
<span class="k-button k-button-icon k-flat k-tabstrip-next" style="display: none;">
<span class="k-icon k-i-arrow-60-right"></span>
</span>
<div class="k-tabstrip-items-wrapper k-hstack">
<span class="k-button k-button-icon k-flat k-tabstrip-prev" style="left: 36px; display: none;">
<span class="k-icon k-i-arrow-60-left"></span>
</span>
<ul class="k-reset k-tabstrip-items" style="margin-left: 36px;">
<li class="k-item k-state-active k-state-tab-on-top k-spreadsheet-sheets-bar-active">
<span class="k-link">Food Order</span>
<span class="k-spreadsheet-sheets-remove k-remove-tab k-button k-icon-button k-flat">
<span class="k-icon k-icon k-i-close"></span>
</span>
</li>
<li class="k-item k-spreadsheet-sheets-bar-inactive">
<span class="k-link">Balance Sheet</span>
<span class="k-spreadsheet-sheets-remove k-remove-tab k-button k-icon-button k-flat">
<span class="k-icon k-icon k-i-close"></span>
</span>
</li>
</ul>
<span class="k-button k-button-icon k-flat k-tabstrip-next" style="display: none;">
<span class="k-icon k-i-arrow-60-right"></span>
</span>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit de24660

Please sign in to comment.