Skip to content

Commit

Permalink
feat(pdf-viewer): add styles related to pdf annotations
Browse files Browse the repository at this point in the history
  • Loading branch information
@silviyaboteva
silviyaboteva committed Oct 2, 2024
1 parent dc64bfe commit b270b0b
Show file tree
Hide file tree
Showing 11 changed files with 501 additions and 52 deletions.
23 changes: 23 additions & 0 deletions packages/bootstrap/scss/pdf-viewer/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,3 +108,26 @@ $kendo-pdf-viewer-search-highlight-mark-bg: yellow !default;
/// The text color of the PDFViewer icon.
/// @group pdf-viewer
$kendo-pdf-viewer-icon-text: $kendo-dropzone-icon-text !default;

/// The vertical padding of the PDFViewer popup.
/// @group pdf-viewer
$kendo-pdf-viewer-popup-padding-x: k-spacing(2) !default;
/// The horizontal padding of the PDFViewer popup.
/// @group pdf-viewer
$kendo-pdf-viewer-popup-padding-y: $kendo-pdf-viewer-popup-padding-x !default;

/// The border color of the PDFViewer selected highlight annotation.
/// @group pdf-viewer
$kendo-pdf-viewer-highlight-annotation-border: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default;
/// The background color of the PDFViewer hover highlight annotation.
/// @group pdf-viewer
$kendo-pdf-viewer-highlight-annotation-hover-border: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) !default;
/// The border color of the PDFViewer selected free text annotation.
/// @group pdf-viewer
$kendo-pdf-viewer-free-text-annotation-border: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default;
/// The placeholder text color of the PDFViewer free text annotation.
/// @group pdf-viewer
$kendo-pdf-viewer-free-text-annotation-placeholder-text: rgba(124, 22, 27, 0.5) !default;
/// The text color of the PDFViewer free text annotation.
/// @group pdf-viewer
$kendo-pdf-viewer-free-text-annotation-text: rgba(124, 22, 27, 0.7) !default;
23 changes: 23 additions & 0 deletions packages/classic/scss/pdf-viewer/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,3 +108,26 @@ $kendo-pdf-viewer-search-highlight-mark-bg: yellow !default;
/// The text color of the PDFViewer icon.
/// @group pdf-viewer
$kendo-pdf-viewer-icon-text: $kendo-dropzone-icon-text !default;

/// The vertical padding of the PDFViewer popup.
/// @group pdf-viewer
$kendo-pdf-viewer-popup-padding-x: k-spacing(2) !default;
/// The horizontal padding of the PDFViewer popup.
/// @group pdf-viewer
$kendo-pdf-viewer-popup-padding-y: $kendo-pdf-viewer-popup-padding-x !default;

/// The border color of the PDFViewer selected highlight annotation.
/// @group pdf-viewer
$kendo-pdf-viewer-highlight-annotation-border: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default;
/// The background color of the PDFViewer hover highlight annotation.
/// @group pdf-viewer
$kendo-pdf-viewer-highlight-annotation-hover-border: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) !default;
/// The border color of the PDFViewer selected free text annotation.
/// @group pdf-viewer
$kendo-pdf-viewer-free-text-annotation-border: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default;
/// The placeholder text color of the PDFViewer free text annotation.
/// @group pdf-viewer
$kendo-pdf-viewer-free-text-annotation-placeholder-text: rgba(124, 22, 27, 0.5) !default;
/// The text color of the PDFViewer free text annotation.
/// @group pdf-viewer
$kendo-pdf-viewer-free-text-annotation-text: rgba(124, 22, 27, 0.7) !default;
209 changes: 185 additions & 24 deletions packages/default/scss/pdf-viewer/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,61 +33,201 @@
background: none;
overflow: visible;
}
}


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

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

&.k-enable-panning {
cursor: grab;
&.k-enable-panning {
cursor: grab;

span::selection {
background-color: transparent;
}
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;
margin-block: $kendo-pdf-viewer-page-spacing;
margin-inline: auto;
z-index: 1;

// Canvas
.k-canvas-wrapper {
overflow: hidden;
width: 100%;
height: 100%;

canvas {
direction: ltr;
}

svg {
transform: none;
}

.k-highlight {
position: absolute;
mix-blend-mode: multiply;
fill-opacity: 1;

canvas {
direction: ltr;
}
.k-highlight-outline {
position: absolute;
fill: none;
stroke-width: 2px;
stroke-dasharray: 2;
}
}


.k-text-layer {
position: absolute;
top: 0;
left: 0;
opacity: .2;
overflow: hidden;

> span {
.k-marked-content > span,
> span, br {
position: absolute;
line-height: $kendo-pdf-viewer-selection-line-height;
transform-origin: 0% 0%;
color: transparent;
white-space: pre;
cursor: text;
}

.k-marked-content {
top: 0;
height: 0;
}

.k-end-of-content {
display: block;
position: absolute;
inset: 100% 0 0;
z-index: 0;
cursor: default;
user-select: none;
}

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

.k-highlighting {
touch-action: none;
}
}

.k-annotation-layer {
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0;
pointer-events: none;

section {
position: absolute;
}

.k-annotation-text-content {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
color: transparent;
user-select: none;
pointer-events: none;
}
}

.k-annotation-editor-layer {
background: transparent;
position: absolute;
inset: 0;
transform-origin: 0 0;
cursor: auto;

.k-selected {
z-index: 100000 !important; // stylelint-disable-line declaration-no-important
}

.k-highlight-editor {
position: absolute;
background: transparent;
z-index: 1;
cursor: auto;
max-width: 100%;
max-height: 100%;
border: none;
outline: none;
pointer-events: none;
transform-origin: 0 0;

.k-internal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: auto;
}
}

.k-free-text-editor {
position: absolute;
background: transparent;
z-index: 1;
transform-origin: 0 0;
cursor: text;
caret-color: $kendo-pdf-viewer-free-text-annotation-text;
max-width: 100%;
max-height: 100%;
border: solid 2px transparent;

&.k-selected.k-draggable {
cursor: move;;
}

&.k-selected .k-internal {
border-radius: 0px;
outline: 2px dashed $kendo-pdf-viewer-free-text-annotation-border;
}

.k-internal {
background: transparent;
border: none;
inset: 0;
overflow: visible;
white-space: nowrap;
user-select: none;
}

.k-internal:empty::before {
content: attr(default-content);
}
}
}

.k-annotation-editor-layer-disabled {
pointer-events: none;
}
}

Expand All @@ -108,7 +248,6 @@
background: none;
}
}

}

// Search
Expand Down Expand Up @@ -149,6 +288,28 @@
}
}

// Annotation Toolbar
.k-pdf-viewer-annotation-editor-toolbar > .k-toolbar {
width: min-content;
border-bottom-width: 0;
}


// Annotation Editor
.k-pdf-viewer-annotation-editor {
padding-block: $kendo-pdf-viewer-popup-padding-y;
padding-inline: $kendo-pdf-viewer-popup-padding-x;

.k-column-menu-group-header {
padding-inline: 0;
}

.k-form-field {
margin-top: 0;
}

}

}


Expand Down
20 changes: 19 additions & 1 deletion packages/default/scss/pdf-viewer/_theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@


// Canvas
.k-canvas {
.k-pdf-viewer-canvas {
@include fill(
$kendo-pdf-viewer-canvas-text,
$kendo-pdf-viewer-canvas-bg,
Expand All @@ -44,6 +44,16 @@
@include fill( $color: $kendo-pdf-viewer-icon-text );
}

.k-canvas-wrapper .k-highlight-outline {
&.k-hover,
&:hover {
stroke: $kendo-pdf-viewer-highlight-annotation-hover-border;
}

&.k-selected {
stroke: $kendo-pdf-viewer-highlight-annotation-border;
}
}

// Search
.k-search-highlight {
Expand All @@ -54,6 +64,14 @@
@include fill( $bg: $kendo-pdf-viewer-search-highlight-mark-bg );
}

.k-annotation-editor-layer .k-free-text-editor .k-internal {
color: $kendo-pdf-viewer-free-text-annotation-text;

&:empty::before {
color: $kendo-pdf-viewer-free-text-annotation-placeholder-text;
}
}

}

.k-pdf-viewer-canvas > .k-search-panel {
Expand Down
26 changes: 26 additions & 0 deletions packages/default/scss/pdf-viewer/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,3 +108,29 @@ $kendo-pdf-viewer-search-highlight-mark-bg: yellow !default;
/// The text color of the PDFViewer icon.
/// @group pdf-viewer
$kendo-pdf-viewer-icon-text: $kendo-dropzone-icon-text !default;

/// The vertical padding of the PDFViewer popup.
/// @group pdf-viewer
$kendo-pdf-viewer-popup-padding-x: k-spacing(2) !default;
/// The horizontal padding of the PDFViewer popup.
/// @group pdf-viewer
$kendo-pdf-viewer-popup-padding-y: $kendo-pdf-viewer-popup-padding-x !default;

/// The border color of the PDFViewer selected highlight annotation.
/// @group pdf-viewer
$kendo-pdf-viewer-highlight-annotation-border: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default;
/// The background color of the PDFViewer hover highlight annotation.
/// @group pdf-viewer
$kendo-pdf-viewer-highlight-annotation-hover-border: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) !default;
/// The border color of the PDFViewer selected free text annotation.
/// @group pdf-viewer
$kendo-pdf-viewer-free-text-annotation-border: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default;
/// The placeholder text color of the PDFViewer free text annotation.
/// @group pdf-viewer
$kendo-pdf-viewer-free-text-annotation-placeholder-text: rgba(124, 22, 27, 0.5) !default;
/// The text color of the PDFViewer free text annotation.
/// @group pdf-viewer
$kendo-pdf-viewer-free-text-annotation-text: rgba(124, 22, 27, 0.5) !default;
/// The text color of the PDFViewer free text annotation.
/// @group pdf-viewer
$kendo-pdf-viewer-free-text-annotation-text: rgba(124, 22, 27, 0.7) !default;
Loading

0 comments on commit b270b0b

Please sign in to comment.