chore: update visual previews

telerik · Aug 26, 2022 · a9f4367 · a9f4367
1 parent c57be38
commit a9f4367
Show file tree

Hide file tree

Showing 33 changed files with 281 additions and 3 deletions.
diff --git a/tests/_output/bootstrap/pdf-viewer/pdf-viewer-blank-page-blazor.png b/tests/_output/bootstrap/pdf-viewer/pdf-viewer-blank-page-blazor.png
diff --git a/tests/_output/bootstrap/pdf-viewer/pdf-viewer-blank-page.png b/tests/_output/bootstrap/pdf-viewer/pdf-viewer-blank-page.png
diff --git a/tests/_output/bootstrap/pdf-viewer/pdf-viewer-search-panel-jquery.png b/tests/_output/bootstrap/pdf-viewer/pdf-viewer-search-panel-jquery.png
diff --git a/tests/_output/bootstrap/pdf-viewer/pdf-viewer-search-panel.png b/tests/_output/bootstrap/pdf-viewer/pdf-viewer-search-panel.png
diff --git a/tests/_output/bootstrap/pdf-viewer/pdf-viewer.png b/tests/_output/bootstrap/pdf-viewer/pdf-viewer.png
diff --git a/tests/_output/classic/pdf-viewer/pdf-viewer-blank-page-blazor.png b/tests/_output/classic/pdf-viewer/pdf-viewer-blank-page-blazor.png
diff --git a/tests/_output/classic/pdf-viewer/pdf-viewer-blank-page.png b/tests/_output/classic/pdf-viewer/pdf-viewer-blank-page.png
diff --git a/tests/_output/classic/pdf-viewer/pdf-viewer-search-panel-jquery.png b/tests/_output/classic/pdf-viewer/pdf-viewer-search-panel-jquery.png
diff --git a/tests/_output/classic/pdf-viewer/pdf-viewer-search-panel.png b/tests/_output/classic/pdf-viewer/pdf-viewer-search-panel.png
diff --git a/tests/_output/classic/pdf-viewer/pdf-viewer.png b/tests/_output/classic/pdf-viewer/pdf-viewer.png
diff --git a/tests/_output/default/pdf-viewer/pdf-viewer-blank-page-blazor.png b/tests/_output/default/pdf-viewer/pdf-viewer-blank-page-blazor.png
diff --git a/tests/_output/default/pdf-viewer/pdf-viewer-blank-page.png b/tests/_output/default/pdf-viewer/pdf-viewer-blank-page.png
diff --git a/tests/_output/default/pdf-viewer/pdf-viewer-search-panel-jquery.png b/tests/_output/default/pdf-viewer/pdf-viewer-search-panel-jquery.png
diff --git a/tests/_output/default/pdf-viewer/pdf-viewer-search-panel.png b/tests/_output/default/pdf-viewer/pdf-viewer-search-panel.png
diff --git a/tests/_output/default/pdf-viewer/pdf-viewer.png b/tests/_output/default/pdf-viewer/pdf-viewer.png
diff --git a/tests/_output/fluent/pdf-viewer/pdf-viewer-blank-page-blazor.png b/tests/_output/fluent/pdf-viewer/pdf-viewer-blank-page-blazor.png
diff --git a/tests/_output/fluent/pdf-viewer/pdf-viewer-blank-page.png b/tests/_output/fluent/pdf-viewer/pdf-viewer-blank-page.png
diff --git a/tests/_output/fluent/pdf-viewer/pdf-viewer-search-panel-jquery.png b/tests/_output/fluent/pdf-viewer/pdf-viewer-search-panel-jquery.png
diff --git a/tests/_output/fluent/pdf-viewer/pdf-viewer-search-panel.png b/tests/_output/fluent/pdf-viewer/pdf-viewer-search-panel.png
diff --git a/tests/_output/material/pdf-viewer/pdf-viewer-blank-page-blazor.png b/tests/_output/material/pdf-viewer/pdf-viewer-blank-page-blazor.png
diff --git a/tests/_output/material/pdf-viewer/pdf-viewer-blank-page.png b/tests/_output/material/pdf-viewer/pdf-viewer-blank-page.png
diff --git a/tests/_output/material/pdf-viewer/pdf-viewer-search-panel-jquery.png b/tests/_output/material/pdf-viewer/pdf-viewer-search-panel-jquery.png
diff --git a/tests/_output/material/pdf-viewer/pdf-viewer-search-panel.png b/tests/_output/material/pdf-viewer/pdf-viewer-search-panel.png
diff --git a/tests/_output/material/pdf-viewer/pdf-viewer.png b/tests/_output/material/pdf-viewer/pdf-viewer.png
diff --git a/tests/_output/nouvelle/pdf-viewer/pdf-viewer-blank-page-blazor.png b/tests/_output/nouvelle/pdf-viewer/pdf-viewer-blank-page-blazor.png
diff --git a/tests/_output/nouvelle/pdf-viewer/pdf-viewer-blank-page.png b/tests/_output/nouvelle/pdf-viewer/pdf-viewer-blank-page.png
diff --git a/tests/_output/nouvelle/pdf-viewer/pdf-viewer-search-panel-jquery.png b/tests/_output/nouvelle/pdf-viewer/pdf-viewer-search-panel-jquery.png
diff --git a/tests/_output/nouvelle/pdf-viewer/pdf-viewer-search-panel.png b/tests/_output/nouvelle/pdf-viewer/pdf-viewer-search-panel.png
diff --git a/tests/pdf-viewer/pdf-viewer-blank-page-blazor.html b/tests/pdf-viewer/pdf-viewer-blank-page-blazor.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en" class="k-no-animations" style="--kendo-scrollbar-width:15px;">
+<head>
+    <title>PDF Viewer Blank Page - Blazor</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css">
+    <link rel="stylesheet" href="/packages/html/assets/styles.css">
+    <script src="/packages/html/assets/scripts.js"></script>
+</head>
+<body id="app" class="k-body">
+    <style>
+        #test-area .k-pdf-viewer {
+            height: 600px;
+        }
+
+    </style>
+    <div id="test-area" class="k-d-grid k-grid-cols-1">
+        <div class="k-widget k-pdf-viewer">
+            <div class="k-toolbar k-widget k-toolbar-resizable">
+                <div class="k-pager">
+                    <button class="k-pager-nav k-pager-first k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-i-arrow-end-left"></span>
+                    </button>
+                    <button class="k-pager-nav k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-i-arrow-60-left"></span>
+                    </button>
+                    <span class="k-pager-input k-label">
+                        <span class="k-textbox k-input k-input-md k-input-solid k-rounded-md">
+                            <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="">
+                        </span>of 4 pages
+                    </span>
+                    <button class="k-pager-nav k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-i-arrow-60-right"></span>
+                    </button>
+                    <button class="k-pager-nav k-pager-last k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-i-arrow-end-right"></span>
+                    </button>
+                </div>
+                <span class="k-spacer"></span>
+                <button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                    <span class="k-button-icon k-icon k-i-file-pdf"></span>
+                </button>
+                <button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                    <span class="k-button-icon k-icon k-i-print"></span>
+                </button>
+                <button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                    <span class="k-button-icon k-icon k-i-fullscreen"></span>
+                </button>
+            </div>
+            <div class="k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto">
+                <div class="k-pdf-viewer-pages">
+                    <div class="k-page k-blank-page">
+                        <span class="k-icon k-i-folder-open"></span>
+                        <div class="k-upload">
+                            <div class="k-dropzone">
+                                <button class="k-upload-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                                    <span class="k-button-text">Select files...</span>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/tests/pdf-viewer/pdf-viewer-blank-page.html b/tests/pdf-viewer/pdf-viewer-blank-page.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en" class="k-no-animations" style="--kendo-scrollbar-width:15px;">
+<head>
+    <title>PDF Viewer Blank Page</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css">
+    <link rel="stylesheet" href="/packages/html/assets/styles.css">
+    <script src="/packages/html/assets/scripts.js"></script>
+</head>
+<body id="app" class="k-body">
+    <style>
+        #test-area .k-pdf-viewer {
+            height: 600px;
+        }
+        .k-dropzone {
+            gap: 8px;
+        }
+
+    </style>
+    <div id="test-area" class="k-d-grid k-grid-cols-1">
+        <div class="k-widget k-pdf-viewer">
+            <div class="k-toolbar k-widget k-toolbar-resizable">
+                <div class="k-pager">
+                    <button class="k-pager-nav k-pager-first k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-i-arrow-end-left"></span>
+                    </button>
+                    <button class="k-pager-nav k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-i-arrow-60-left"></span>
+                    </button>
+                    <span class="k-pager-input k-label">
+                        <span class="k-textbox k-input k-input-md k-input-solid k-rounded-md">
+                            <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="">
+                        </span>of 4 pages
+                    </span>
+                    <button class="k-pager-nav k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-i-arrow-60-right"></span>
+                    </button>
+                    <button class="k-pager-nav k-pager-last k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-i-arrow-end-right"></span>
+                    </button>
+                </div>
+                <span class="k-spacer"></span>
+                <button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                    <span class="k-button-icon k-icon k-i-file-pdf"></span>
+                </button>
+                <button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                    <span class="k-button-icon k-icon k-i-print"></span>
+                </button>
+                <button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                    <span class="k-button-icon k-icon k-i-fullscreen"></span>
+                </button>
+            </div>
+            <div class="k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto">
+                <div class="k-pdf-viewer-pages">
+                    <div class="k-page k-blank-page">
+                        <div class="k-external-dropzone">
+                            <div class="k-dropzone-inner">
+                                <span class="k-icon k-i-upload"></span>
+                                <span class="k-dropzone-hint">Drag and drop files here to upload</span>
+                            </div>
+                        </div>
+                        <div class="k-upload">
+                            <div class="k-dropzone">
+                                <button class="k-upload-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                                    <span class="k-button-text">Select files...</span>
+                                </button>
+                                <em class="k-dropzone-hint">Drop files here to upload</em>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/tests/pdf-viewer/pdf-viewer-search-panel-jquery.html b/tests/pdf-viewer/pdf-viewer-search-panel-jquery.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en" class="k-no-animations" style="--kendo-scrollbar-width:15px;">
+<head>
+    <title>PDF Viewer Search Panel</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css">
+    <link rel="stylesheet" href="/packages/html/assets/styles.css">
+    <script src="/packages/html/assets/scripts.js"></script>
+</head>
+<body id="app" class="k-body">
+    <style>
+        #test-area .k-pdf-viewer {
+            height: 600px;
+        }
+
+    </style>
+    <div id="test-area" class="k-d-grid k-grid-cols-1">
+        <div class="k-widget k-window k-window-titleless" style="position: relative; display: flex; align-self: flex-start; width: 430px;">
+            <div class="k-pdf-viewer-search-dialog k-window-content">
+                <div class="k-search-container">
+                    <button class="k-search-dialog-draghandle k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-i-handler-drag"></span>
+                    </button>
+                    <span class="k-textbox k-input k-input-md k-input-solid k-rounded-md">
+                        <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="">
+                        <span class="k-input-suffix">
+                            <button class="k-match-case-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                                <span class="k-button-icon k-icon k-i-convert-lowercase"></span>
+                            </button>
+                        </span>
+                    </span>
+                    <span class="k-search-matches">
+                        <span>0</span> of <span>1</span>
+                    </span>
+                    <button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-i-arrow-up"></span>
+                    </button>
+                    <button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-i-arrow-down"></span>
+                    </button>
+                    <button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-i-close"></span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/tests/pdf-viewer/pdf-viewer-search-panel.html b/tests/pdf-viewer/pdf-viewer-search-panel.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<html lang="en" class="k-no-animations" style="--kendo-scrollbar-width:15px;">
+<head>
+    <title>PDF Viewer With Search Panel</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css">
+    <link rel="stylesheet" href="/packages/html/assets/styles.css">
+    <script src="/packages/html/assets/scripts.js"></script>
+</head>
+<body id="app" class="k-body">
+    <style>
+        #test-area .k-pdf-viewer {
+            height: 600px;
+        }
+
+    </style>
+    <div id="test-area" class="k-d-grid k-grid-cols-1">
+        <div class="k-widget k-pdf-viewer">
+            <div class="k-toolbar k-widget k-toolbar-resizable">
+                <div class="k-pager">
+                    <button class="k-pager-nav k-pager-first k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-i-arrow-end-left"></span>
+                    </button>
+                    <button class="k-pager-nav k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-i-arrow-60-left"></span>
+                    </button>
+                    <span class="k-pager-input k-label">
+                        <span class="k-textbox k-input k-input-md k-input-solid k-rounded-md">
+                            <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="">
+                        </span>of 4 pages
+                    </span>
+                    <button class="k-pager-nav k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-i-arrow-60-right"></span>
+                    </button>
+                    <button class="k-pager-nav k-pager-last k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-i-arrow-end-right"></span>
+                    </button>
+                </div>
+                <span class="k-spacer"></span>
+                <button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                    <span class="k-button-icon k-icon k-i-file-pdf"></span>
+                </button>
+                <button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                    <span class="k-button-icon k-icon k-i-print"></span>
+                </button>
+                <button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                    <span class="k-button-icon k-icon k-i-fullscreen"></span>
+                </button>
+            </div>
+            <div class="k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto">
+                <div class="k-search-panel k-pos-sticky k-top-center">
+                    <button class="k-search-dialog-draghandle k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-i-handler-drag"></span>
+                    </button>
+                    <span class="k-textbox k-input k-input-md k-input-solid k-rounded-md">
+                        <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="">
+                        <span class="k-input-suffix">
+                            <button class="k-match-case-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                                <span class="k-button-icon k-icon k-i-convert-lowercase"></span>
+                            </button>
+                        </span>
+                    </span>
+                    <span class="k-search-matches">
+                        <span>0</span> of <span>1</span>
+                    </span>
+                    <button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-i-arrow-up"></span>
+                    </button>
+                    <button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-i-arrow-down"></span>
+                    </button>
+                    <button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-i-close"></span>
+                    </button>
+                </div>
+                <div class="k-pdf-viewer-pages">
+                    <div class="k-page" style="width: 720px; height: 360px;"></div>
+                    <div class="k-page" style="width: 720px; height: 360px;"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/tests/pdf-viewer/pdf-viewer.html b/tests/pdf-viewer/pdf-viewer.html
@@ -47,9 +47,11 @@
                     <span class="k-button-icon k-icon k-i-fullscreen"></span>
                 </button>
             </div>
-            <div class="k-canvas k-list-scroller">
-                <div class="k-page" style="width: 720px; height: 360px;"></div>
-                <div class="k-page" style="width: 720px; height: 360px;"></div>
+            <div class="k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto">
+                <div class="k-pdf-viewer-pages">
+                    <div class="k-page" style="width: 720px; height: 360px;"></div>
+                    <div class="k-page" style="width: 720px; height: 360px;"></div>
+                </div>
             </div>
         </div>
     </div>