Skip to content

Commit

Permalink
feat(pdf-viewer): update styles to match unified rendering
Browse files Browse the repository at this point in the history
  • Loading branch information
@Juveniel
Juveniel committed Sep 12, 2023
1 parent 741fef5 commit 7522c7e
Show file tree
Hide file tree
Showing 20 changed files with 69 additions and 154 deletions.
7 changes: 3 additions & 4 deletions packages/bootstrap/scss/pdf-viewer/_variables.scss
View file
Expand Up @@ -25,10 +25,9 @@ $kendo-pdf-viewer-page-text: $kendo-component-text !default;
$kendo-pdf-viewer-page-border: $kendo-component-border !default;
$kendo-pdf-viewer-page-shadow: 0 0 k-math-div( $kendo-pdf-viewer-page-spacing, 2 ) $kendo-pdf-viewer-page-border !default;

$kendo-pdf-viewer-search-dialog-padding-x: $kendo-toolbar-md-padding-x !default;
$kendo-pdf-viewer-search-dialog-padding-y: calc( #{$kendo-toolbar-md-padding-x} * 2 ) !default;
$kendo-pdf-viewer-search-dialog-spacing: $kendo-toolbar-md-spacing !default;

$kendo-pdf-viewer-search-panel-padding-x: $kendo-toolbar-md-padding-x !default;
$kendo-pdf-viewer-search-panel-padding-y: calc( #{$kendo-toolbar-md-padding-x} * 2 ) !default;
$kendo-pdf-viewer-search-panel-spacing: $kendo-toolbar-md-spacing !default;
$kendo-pdf-viewer-search-panel-border-width: 1px !default;
$kendo-pdf-viewer-search-panel-border-radius: k-map-get( $kendo-spacing, 1 ) !default;
$kendo-pdf-viewer-search-panel-bg: $kendo-component-bg !default;
Expand Down
7 changes: 3 additions & 4 deletions packages/classic/scss/pdf-viewer/_variables.scss
View file
Expand Up @@ -25,6 +25,9 @@ $kendo-pdf-viewer-page-text: $kendo-component-text !default;
$kendo-pdf-viewer-page-border: $kendo-component-border !default;
$kendo-pdf-viewer-page-shadow: 0 0 k-math-div( $kendo-pdf-viewer-page-spacing, 2 ) $kendo-pdf-viewer-page-border !default;

$kendo-pdf-viewer-search-panel-padding-x: $kendo-toolbar-md-padding-x !default;
$kendo-pdf-viewer-search-panel-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
$kendo-pdf-viewer-search-panel-spacing: $kendo-toolbar-md-spacing !default;
$kendo-pdf-viewer-search-panel-border-width: 1px !default;
$kendo-pdf-viewer-search-panel-border-radius: k-map-get( $kendo-spacing, 1 ) !default;
$kendo-pdf-viewer-search-panel-bg: $kendo-component-bg !default;
Expand All @@ -33,10 +36,6 @@ $kendo-pdf-viewer-search-panel-border: $kendo-component-border !default;
$kendo-pdf-viewer-search-panel-shadow: $kendo-window-shadow !default;
$kendo-pdf-viewer-search-panel-matches-spacing: $kendo-padding-sm-x !default;

$kendo-pdf-viewer-search-dialog-padding-x: $kendo-toolbar-md-padding-x !default;
$kendo-pdf-viewer-search-dialog-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
$kendo-pdf-viewer-search-dialog-spacing: $kendo-toolbar-md-spacing !default;

$kendo-pdf-viewer-selection-line-height: $kendo-line-height-sm !default;

$kendo-pdf-viewer-search-highlight-bg: $kendo-body-text !default;
Expand Down
48 changes: 15 additions & 33 deletions packages/default/scss/pdf-viewer/_layout.scss
View file
Expand Up @@ -42,19 +42,17 @@
flex: 1 1 auto;
outline: none;

.k-enable-text-select,
&.k-enable-text-select {
user-select: text;
cursor: text;
}

.k-enable-panning,
&.k-enable-panning {
cursor: grab;
}
.k-enable-panning span::selection,
&.k-enable-panning span::selection {
background-color: transparent;

span::selection {
background-color: transparent;
}
}
}

Expand Down Expand Up @@ -87,10 +85,6 @@
color: transparent;
}

mark {
color: transparent;
}

.k-search-highlight-mark {
color: transparent;
}
Expand Down Expand Up @@ -118,19 +112,22 @@
}

// Search
.k-pdf-viewer-search-dialog {
padding: 0 !important; // stylelint-disable-line declaration-no-important
}

.k-search-panel {
padding-block: $kendo-pdf-viewer-search-dialog-padding-y;
padding-inline: $kendo-pdf-viewer-search-dialog-padding-x;
.k-pdf-viewer-canvas > .k-search-panel {
width: max-content;
margin-top: calc( (#{$kendo-button-calc-size} + ( 2 * #{$kendo-pdf-viewer-search-panel-border-width} ) + ( 2 * #{$kendo-pdf-viewer-search-panel-padding-y} )) * -1 );
padding-block: $kendo-pdf-viewer-search-panel-padding-y;
padding-inline: $kendo-pdf-viewer-search-panel-padding-x;
border-width: $kendo-pdf-viewer-search-panel-border-width;
border-style: solid;
border-radius: $kendo-pdf-viewer-search-panel-border-radius;
display: flex;
gap: $kendo-pdf-viewer-search-dialog-spacing;
gap: $kendo-pdf-viewer-search-panel-spacing;
flex-flow: row nowrap;
flex: 0 0 auto;
justify-content: flex-start;
align-items: center;
z-index: 10;
cursor: default;

.k-search-dialog-draghandle {
cursor: move;
Expand All @@ -152,21 +149,6 @@
}
}

.k-pdf-viewer-canvas > .k-search-panel {
width: max-content;
margin-top: calc( (#{$kendo-button-calc-size} + ( 2 * #{$kendo-pdf-viewer-search-panel-border-width} ) + ( 2 * #{$kendo-pdf-viewer-search-dialog-padding-y} )) * -1 );
border-width: $kendo-pdf-viewer-search-panel-border-width;
border-style: solid;
border-radius: $kendo-pdf-viewer-search-panel-border-radius;
z-index: 10;
cursor: default;
}

// Alias
.k-search-container {
@extend .k-search-panel !optional;
}

}


Expand Down
4 changes: 0 additions & 4 deletions packages/default/scss/pdf-viewer/_theme.scss
View file
Expand Up @@ -66,10 +66,6 @@
@include box-shadow( $kendo-pdf-viewer-search-panel-shadow );
}

.k-search-container {
@extend .k-search-panel !optional;
}

}


Expand Down
7 changes: 3 additions & 4 deletions packages/default/scss/pdf-viewer/_variables.scss
View file
Expand Up @@ -25,10 +25,9 @@ $kendo-pdf-viewer-page-text: $kendo-component-text !default;
$kendo-pdf-viewer-page-border: $kendo-component-border !default;
$kendo-pdf-viewer-page-shadow: 0 0 k-math-div( $kendo-pdf-viewer-page-spacing, 2 ) $kendo-pdf-viewer-page-border !default;

$kendo-pdf-viewer-search-dialog-padding-x: $kendo-toolbar-md-padding-x !default;
$kendo-pdf-viewer-search-dialog-padding-y: calc( #{$kendo-toolbar-md-padding-x} * 2 ) !default;
$kendo-pdf-viewer-search-dialog-spacing: $kendo-toolbar-md-spacing !default;

$kendo-pdf-viewer-search-panel-padding-x: $kendo-toolbar-md-padding-x !default;
$kendo-pdf-viewer-search-panel-padding-y: calc( #{$kendo-toolbar-md-padding-x} * 2 ) !default;
$kendo-pdf-viewer-search-panel-spacing: $kendo-toolbar-md-spacing !default;
$kendo-pdf-viewer-search-panel-border-width: 1px !default;
$kendo-pdf-viewer-search-panel-border-radius: 0 !default;
$kendo-pdf-viewer-search-panel-bg: $kendo-component-bg !default;
Expand Down
81 changes: 31 additions & 50 deletions packages/fluent/scss/pdf-viewer/_layout.scss
View file
Expand Up @@ -34,36 +34,33 @@
background: none;
overflow: visible;
}
}

// Canvas
.k-pdf-viewer-canvas {
display: flex;
flex-direction: column;
flex: 1 1 auto;
outline: none;

// Canvas
.k-canvas {
display: flex;
flex-direction: column;
flex: 1 1 auto;
outline: none;

.k-enable-text-select,
&.k-enable-text-select {
user-select: text;
cursor: text;
}
&.k-enable-text-select {
user-select: text;
cursor: text;
}

.k-enable-panning,
&.k-enable-panning {
cursor: grab;
}
.k-enable-panning span::selection,
&.k-enable-panning span::selection {
&.k-enable-panning {
cursor: grab;

span::selection {
background-color: transparent;
}
}
}


// Pages
.k-pdf-viewer-pages {
flex: 1 1 auto;
}
// Pages
.k-pdf-viewer-pages {
flex: 1 1 auto;

.k-page {
position: relative;
Expand All @@ -88,10 +85,6 @@
color: transparent;
}

mark {
color: transparent;
}

.k-search-highlight-mark {
color: transparent;
}
Expand All @@ -115,23 +108,26 @@
background: none;
}
}

}

// Search
.k-pdf-viewer-search-dialog {
padding: 0 !important; // stylelint-disable-line declaration-no-important
}

.k-search-panel {
padding-block: var( --kendo-pdf-viewer-search-dialog-padding-y, #{$kendo-pdf-viewer-search-dialog-padding-y} );
padding-inline: var( --kendo-pdf-viewer-search-dialog-padding-x, #{$kendo-pdf-viewer-search-dialog-padding-x} );
// Search
.k-pdf-viewer-canvas > .k-search-panel {
width: max-content;
margin-block-start: var( --kendo-pdf-viewer-search-panel-margin-y, #{$kendo-pdf-viewer-search-panel-margin-y} );
padding-block: var( --kendo-pdf-viewer-search-panel-padding-y, #{$kendo-pdf-viewer-search-panel-padding-y} );
padding-inline: var( --kendo-pdf-viewer-search-panel-padding-x, #{$kendo-pdf-viewer-search-panel-padding-x} );
border-width: var( --kendo-pdf-viewer-search-panel-border-width, #{$kendo-pdf-viewer-search-panel-border-width} );
border-style: solid;
border-radius: var( --kendo-pdf-viewer-search-panel-border-radius, #{$kendo-pdf-viewer-search-panel-border-radius} );
display: flex;
gap: var( --kendo-pdf-viewer-search-dialog-spacing, #{$kendo-pdf-viewer-search-dialog-spacing} );
gap: var( --kendo-pdf-viewer-search-panel-spacing, #{$kendo-pdf-viewer-search-panel-spacing} );
flex-flow: row nowrap;
flex: 0 0 auto;
justify-content: flex-start;
align-items: center;
z-index: 10;
cursor: default;

.k-search-dialog-draghandle {
cursor: move;
Expand All @@ -153,19 +149,4 @@
}
}

.k-pdf-viewer-canvas > .k-search-panel {
width: max-content;
margin-block-start: var( --kendo-pdf-viewer-search-panel-margin-y, #{$kendo-pdf-viewer-search-panel-margin-y} );
border-width: var( --kendo-pdf-viewer-search-panel-border-width, #{$kendo-pdf-viewer-search-panel-border-width} );
border-style: solid;
border-radius: var( --kendo-pdf-viewer-search-panel-border-radius, #{$kendo-pdf-viewer-search-panel-border-radius} );
z-index: 10;
cursor: default;
}

// Alias
.k-search-container {
@extend .k-search-panel !optional;
}

}
4 changes: 0 additions & 4 deletions packages/fluent/scss/pdf-viewer/_theme.scss
View file
Expand Up @@ -67,8 +67,4 @@
);
}

.k-search-container {
@extend .k-search-panel !optional;
}

}
15 changes: 7 additions & 8 deletions packages/fluent/scss/pdf-viewer/_variables.scss
View file
Expand Up @@ -51,16 +51,15 @@ $kendo-pdf-viewer-page-border: var( --kendo-component-border, inherit ) !default
/// @group pdf-viewer
$kendo-pdf-viewer-page-shadow: var( --kendo-box-shadow-depth-1, none ) !default;

/// Horizontal padding of the PDF viewer search dialog.
/// Horizontal padding of the PDF viewer search panel.
/// @group pdf-viewer
$kendo-pdf-viewer-search-dialog-padding-x: map.get( $kendo-spacing, 3 ) !default;
/// Vertical padding of the PDF viewer search dialog.
$kendo-pdf-viewer-search-panel-padding-x: map.get( $kendo-spacing, 3 ) !default;
/// Vertical padding of the PDF viewer search panel.
/// @group pdf-viewer
$kendo-pdf-viewer-search-dialog-padding-y: $kendo-pdf-viewer-search-dialog-padding-x !default;
/// Spacing of the PDF viewer search dialog.
$kendo-pdf-viewer-search-panel-padding-y: $kendo-pdf-viewer-search-panel-padding-x !default;
/// Spacing of the PDF viewer search panel.
/// @group pdf-viewer
$kendo-pdf-viewer-search-dialog-spacing: map.get( $kendo-spacing, 2 ) !default;

$kendo-pdf-viewer-search-panel-spacing: map.get( $kendo-spacing, 2 ) !default;
/// Border width of the PDF viewer search panel.
/// @group pdf-viewer
$kendo-pdf-viewer-search-panel-border-width: 1px !default;
Expand All @@ -84,7 +83,7 @@ $kendo-pdf-viewer-search-panel-shadow: none !default;
$kendo-pdf-viewer-search-panel-matches-spacing: var( --kendo-icon-spacing, .5rem ) !default;
/// Vertical margin of the PDF viewer search panel.
/// @group pdf-viewer
$kendo-pdf-viewer-search-panel-margin-y: calc( ( #{$kendo-button-calc-size} + ( 2 * #{$kendo-pdf-viewer-search-panel-border-width} ) + ( 2 * #{$kendo-pdf-viewer-search-dialog-padding-y} ) ) * -1 ) !default;
$kendo-pdf-viewer-search-panel-margin-y: calc( ( #{$kendo-button-calc-size} + ( 2 * #{$kendo-pdf-viewer-search-panel-border-width} ) + ( 2 * #{$kendo-pdf-viewer-search-panel-padding-y} ) ) * -1 ) !default;

/// Line height of the PDF viewer selection.
/// @group pdf-viewer
Expand Down
2 changes: 1 addition & 1 deletion packages/html/src/pdf-viewer/tests/pdf-viewer-blank-page-blazor.tsx
View file
Expand Up @@ -24,7 +24,7 @@ export default () =>(
<Button fillMode="flat" icon="print"></Button>
<Button fillMode="flat" icon="fullscreen"></Button>
</Toolbar>
<div className="k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto">
<div className="k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto k-enable-text-select k-enable-panning">
<div className="k-pdf-viewer-pages">
<div className="k-page k-blank-page">
<Icon icon="folder-open" size="xxxlarge"></Icon>
Expand Down
2 changes: 1 addition & 1 deletion packages/html/src/pdf-viewer/tests/pdf-viewer-blank-page.tsx
View file
Expand Up @@ -27,7 +27,7 @@ export default () =>(
<Button fillMode="flat" icon="print"></Button>
<Button fillMode="flat" icon="fullscreen"></Button>
</Toolbar>
<div className="k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto">
<div className="k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto k-enable-text-select">
<div className="k-pdf-viewer-pages">
<div className="k-page k-blank-page">
<Dropzone note={false}/>
Expand Down
35 changes: 0 additions & 35 deletions packages/html/src/pdf-viewer/tests/pdf-viewer-search-panel-jquery.tsx
View file

This file was deleted.

2 changes: 1 addition & 1 deletion packages/html/src/pdf-viewer/tests/pdf-viewer-search-panel.tsx
View file
Expand Up @@ -23,7 +23,7 @@ export default () =>(
<Button fillMode="flat" icon="print"></Button>
<Button fillMode="flat" icon="fullscreen"></Button>
</Toolbar>
<div className="k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto">
<div className="k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto k-enable-text-select">
<div className="k-search-panel k-pos-sticky k-top-center">
<Button fillMode="flat" icon="handle-drag" className="k-search-dialog-draghandle"></Button>
<Textbox
Expand Down
2 changes: 1 addition & 1 deletion packages/html/src/pdf-viewer/tests/pdf-viewer.tsx
View file
Expand Up @@ -22,7 +22,7 @@ export default () =>(
<Button fillMode="flat" icon="print"></Button>
<Button fillMode="flat" icon="fullscreen"></Button>
</Toolbar>
<div className="k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto">
<div className="k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto k-enable-text-select">
<div className="k-pdf-viewer-pages">
<div className="k-page" style={{ width: "720px", height: "360px" }}></div>
<div className="k-page" style={{ width: "720px", height: "360px" }}></div>
Expand Down

0 comments on commit 7522c7e

Please sign in to comment.