Skip to content

Commit

Permalink
feat(pdf-viewer): update component to match latest design
Browse files Browse the repository at this point in the history
  • Loading branch information
@epetrow @joneff
epetrow authored and joneff committed Aug 26, 2022
1 parent e46ed59 commit 8e25562
Show file tree
Hide file tree
Showing 10 changed files with 169 additions and 33 deletions.
3 changes: 3 additions & 0 deletions packages/bootstrap/scss/pdf-viewer/_index.scss
View file
Expand Up @@ -3,11 +3,14 @@

// Dependencies
@import "../common/_index.scss";
@import "../button/_variables.scss";
@import "../combobox/_index.scss";
@import "../toolbar/_index.scss";
@import "../dialog/_index.scss";
@import "../pager/_index.scss";
@import "../icons/_index.scss";
@import "../dropzone/_index.scss";
@import "../window/_index.scss";


// Component
Expand Down
15 changes: 14 additions & 1 deletion packages/bootstrap/scss/pdf-viewer/_variables.scss
View file
Expand Up @@ -24,9 +24,22 @@ $pdf-viewer-page-text: $component-text !default;
$pdf-viewer-page-border: $component-border !default;
$pdf-viewer-page-shadow: 0 0 ($pdf-viewer-page-spacing / 2) $pdf-viewer-page-border !default;

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

$pdf-viewer-search-panel-border-width: 1px !default;
$pdf-viewer-search-panel-border-radius: map-get( $spacing, 1 ) !default;
$pdf-viewer-search-panel-bg: $component-bg !default;
$pdf-viewer-search-panel-text: $component-text !default;
$pdf-viewer-search-panel-border: $component-border !default;
$pdf-viewer-search-panel-shadow: null !default;
$pdf-viewer-search-panel-matches-spacing: $padding-x-sm !default;

$pdf-viewer-selection-line-height: 1.2 !default;

$pdf-viewer-search-highlight-bg: $body-text !default;
$pdf-viewer-search-highlight-mark-bg: yellow !default;

$pdf-viewer-icon-text: $dropzone-icon-text !default;
$pdf-viewer-icon-size: calc( #{$icon-size} * 3 ) !default;
3 changes: 3 additions & 0 deletions packages/classic/scss/pdf-viewer/_index.scss
View file
Expand Up @@ -3,11 +3,14 @@

// Dependencies
@import "../common/_index.scss";
@import "../button/_variables.scss";
@import "../combobox/_index.scss";
@import "../toolbar/_index.scss";
@import "../dialog/_index.scss";
@import "../pager/_index.scss";
@import "../icons/_index.scss";
@import "../dropzone/_index.scss";
@import "../window/_index.scss";


// Component
Expand Down
15 changes: 14 additions & 1 deletion packages/classic/scss/pdf-viewer/_variables.scss
View file
Expand Up @@ -24,9 +24,22 @@ $pdf-viewer-page-text: $component-text !default;
$pdf-viewer-page-border: $component-border !default;
$pdf-viewer-page-shadow: 0 0 ($pdf-viewer-page-spacing / 2) $pdf-viewer-page-border !default;

$pdf-viewer-search-dialog-padding: $toolbar-padding-x !default;
$pdf-viewer-search-panel-border-width: 1px !default;
$pdf-viewer-search-panel-border-radius: map-get( $spacing, 1 ) !default;
$pdf-viewer-search-panel-bg: $component-bg !default;
$pdf-viewer-search-panel-text: $component-text !default;
$pdf-viewer-search-panel-border: $component-border !default;
$pdf-viewer-search-panel-shadow: $window-shadow !default;
$pdf-viewer-search-panel-matches-spacing: $padding-x-sm !default;

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

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

$pdf-viewer-search-highlight-bg: $body-text !default;
$pdf-viewer-search-highlight-mark-bg: yellow !default;

$pdf-viewer-icon-text: $dropzone-icon-text !default;
$pdf-viewer-icon-size: calc( #{$icon-size} * 3 ) !default;
3 changes: 3 additions & 0 deletions packages/default/scss/pdf-viewer/_index.scss
View file
Expand Up @@ -3,11 +3,14 @@

// Dependencies
@import "../common/_index.scss";
@import "../button/_variables.scss";
@import "../combobox/_index.scss";
@import "../toolbar/_index.scss";
@import "../dialog/_index.scss";
@import "../pager/_index.scss";
@import "../icons/_index.scss";
@import "../dropzone/_index.scss";
@import "../window/_index.scss";


// Component
Expand Down
108 changes: 80 additions & 28 deletions packages/default/scss/pdf-viewer/_layout.scss
View file
Expand Up @@ -4,6 +4,7 @@
border-width: $pdf-viewer-border-width;
border-style: solid;
box-sizing: border-box;
position: relative;
outline: 0;
font-family: $pdf-viewer-font-family;
font-size: $pdf-viewer-font-size;
Expand Down Expand Up @@ -34,28 +35,37 @@


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

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

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


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

.k-page {
position: relative;
margin: $pdf-viewer-page-spacing auto;
Expand All @@ -81,46 +91,88 @@
mark {
color: transparent;
}

.k-search-highlight-mark {
color: transparent;
}
}
}
}

// Search
.k-pdf-viewer-search-dialog {
padding: $pdf-viewer-search-dialog-padding;

.k-search-container {
.k-blank-page {
margin: 0;
display: flex;
gap: $pdf-viewer-search-dialog-spacing;
flex-flow: row nowrap;
flex: 0 0 auto;
justify-content: flex-start;
flex-flow: column nowrap;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
background-color: inherit !important; // sass-lint:disable-line no-important

.k-upload,
.k-dropzone,
.k-dropzone-inner {
border: 0;
background: none;
}

.k-search-dialog-draghandle {
cursor: move;
margin-left: 0;
> .k-icon {
font-size: $pdf-viewer-icon-size;
}
}

.k-textbox {
width: 10em;
flex: none;
}

.k-button {
border-width: 0;
}
}
// Search
.k-pdf-viewer-search-dialog {
padding: 0 !important; // sass-lint:disable-line no-important
}

.k-search-panel {
padding: $pdf-viewer-search-dialog-padding-y $pdf-viewer-search-dialog-padding-x;
display: flex;
gap: $pdf-viewer-search-dialog-spacing;
flex-flow: row nowrap;
flex: 0 0 auto;
justify-content: flex-start;
align-items: center;

.k-search-dialog-draghandle {
cursor: move;
margin-left: 0;
}

.k-textbox {
width: 10em;
flex: none;

.k-search-matches {
flex: 1 1 auto;
.k-button {
border-width: 0;
}
}

.k-search-matches {
display: inline-flex;
gap: $pdf-viewer-search-panel-matches-spacing;
}
}

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

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


// IE
.k-ie .k-pdf-viewer-search-dialog {

.k-search-container > * + * {
margin-left: $pdf-viewer-search-dialog-spacing;
}
Expand Down
21 changes: 21 additions & 0 deletions packages/default/scss/pdf-viewer/_theme.scss
View file
Expand Up @@ -40,12 +40,33 @@
@include box-shadow( $pdf-viewer-page-shadow );
}

.k-blank-page > .k-icon {
@include fill( $color: $pdf-viewer-icon-text );
}


// Search
.k-search-highlight {
background-color: $pdf-viewer-search-highlight-bg;
}

.k-search-highlight-mark {
@include fill( $bg: $pdf-viewer-search-highlight-mark-bg );
}

}

.k-pdf-viewer-canvas > .k-search-panel {
@include fill(
$pdf-viewer-search-panel-text,
$pdf-viewer-search-panel-bg,
$pdf-viewer-search-panel-border,
);
@include box-shadow( $pdf-viewer-search-panel-shadow );
}

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

}
15 changes: 14 additions & 1 deletion packages/default/scss/pdf-viewer/_variables.scss
View file
Expand Up @@ -24,9 +24,22 @@ $pdf-viewer-page-text: $component-text !default;
$pdf-viewer-page-border: $component-border !default;
$pdf-viewer-page-shadow: 0 0 ($pdf-viewer-page-spacing / 2) $pdf-viewer-page-border !default;

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

$pdf-viewer-search-panel-border-width: 1px !default;
$pdf-viewer-search-panel-border-radius: 0 !default;
$pdf-viewer-search-panel-bg: $component-bg !default;
$pdf-viewer-search-panel-text: $component-text !default;
$pdf-viewer-search-panel-border: $component-border !default;
$pdf-viewer-search-panel-shadow: $window-shadow !default;
$pdf-viewer-search-panel-matches-spacing: $padding-x-sm !default;

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

$pdf-viewer-search-highlight-bg: $body-text !default;
$pdf-viewer-search-highlight-mark-bg: yellow !default;

$pdf-viewer-icon-text: $dropzone-icon-text !default;
$pdf-viewer-icon-size: calc( #{$icon-size} * 3 ) !default;
4 changes: 3 additions & 1 deletion packages/material/scss/pdf-viewer/_index.scss
View file
Expand Up @@ -3,12 +3,14 @@

// Dependencies
@import "../common/_index.scss";
@import "../button/_variables.scss";
@import "../combobox/_index.scss";
@import "../toolbar/_index.scss";
@import "../dialog/_index.scss";
@import "../pager/_index.scss";
@import "../icons/_index.scss";

@import "../dropzone/_index.scss";
@import "../window/_index.scss";

// Component
@import "_variables.scss";
Expand Down
15 changes: 14 additions & 1 deletion packages/material/scss/pdf-viewer/_variables.scss
View file
Expand Up @@ -24,9 +24,22 @@ $pdf-viewer-page-text: $component-text !default;
$pdf-viewer-page-border: $component-border !default;
$pdf-viewer-page-shadow: 0 0 ($pdf-viewer-page-spacing / 2) $pdf-viewer-page-border !default;

$pdf-viewer-search-dialog-padding: $toolbar-padding-x !default;
$pdf-viewer-search-panel-border-width: 1px !default;
$pdf-viewer-search-panel-border-radius: map-get( $spacing, 1 ) !default;
$pdf-viewer-search-panel-bg: $component-bg !default;
$pdf-viewer-search-panel-text: $component-text !default;
$pdf-viewer-search-panel-border: $component-border !default;
$pdf-viewer-search-panel-shadow: $window-shadow !default;
$pdf-viewer-search-panel-matches-spacing: $padding-x-sm !default;

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

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

$pdf-viewer-search-highlight-bg: $body-text !default;
$pdf-viewer-search-highlight-mark-bg: yellow !default;

$pdf-viewer-icon-text: $dropzone-icon-text !default;
$pdf-viewer-icon-size: calc( #{$icon-size} * 3 ) !default;

0 comments on commit 8e25562

Please sign in to comment.