From 133cf46df6e0eac0590386a0db580c7f312eb496 Mon Sep 17 00:00:00 2001 From: Farbod Zamani Date: Wed, 14 Jun 2023 08:43:35 +0000 Subject: CW: Enhanced DocumentBlock PDF viewer Closes #2018 Merge request studip/studip!1321 --- package.json | 1 + public/assets/images/icons/black/hand.svg | 1 + public/assets/images/icons/blue/hand.svg | 1 + public/assets/images/icons/green/hand.svg | 1 + public/assets/images/icons/grey/hand.svg | 1 + public/assets/images/icons/red/hand.svg | 1 + public/assets/images/icons/white/hand.svg | 1 + public/assets/images/icons/yellow/hand.svg | 1 + resources/assets/stylesheets/scss/courseware.scss | 202 ++++-- .../courseware/CoursewareDocumentBlock.vue | 681 ++++++++++++++++++--- .../courseware/CoursewarePDFTableOfContent.vue | 30 + 11 files changed, 777 insertions(+), 144 deletions(-) create mode 100644 public/assets/images/icons/black/hand.svg create mode 100644 public/assets/images/icons/blue/hand.svg create mode 100644 public/assets/images/icons/green/hand.svg create mode 100644 public/assets/images/icons/grey/hand.svg create mode 100644 public/assets/images/icons/red/hand.svg create mode 100644 public/assets/images/icons/white/hand.svg create mode 100644 public/assets/images/icons/yellow/hand.svg create mode 100644 resources/vue/components/courseware/CoursewarePDFTableOfContent.vue diff --git a/package.json b/package.json index 3b376af..d0f89c8 100644 --- a/package.json +++ b/package.json @@ -122,6 +122,7 @@ "typescript": "^5.0.2", "vrp-vue-resizable": "1.2.7", "vue": "^2.6.12", + "vue-dragscroll": "^3.0.1", "vue-gettext": "^2.1.12", "vue-loader": "^15.9.8", "vue-router": "^3.5.1", diff --git a/public/assets/images/icons/black/hand.svg b/public/assets/images/icons/black/hand.svg new file mode 100644 index 0000000..56988eb --- /dev/null +++ b/public/assets/images/icons/black/hand.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/icons/blue/hand.svg b/public/assets/images/icons/blue/hand.svg new file mode 100644 index 0000000..fccdf6a --- /dev/null +++ b/public/assets/images/icons/blue/hand.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/icons/green/hand.svg b/public/assets/images/icons/green/hand.svg new file mode 100644 index 0000000..5a9d851 --- /dev/null +++ b/public/assets/images/icons/green/hand.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/icons/grey/hand.svg b/public/assets/images/icons/grey/hand.svg new file mode 100644 index 0000000..bcc47b0 --- /dev/null +++ b/public/assets/images/icons/grey/hand.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/icons/red/hand.svg b/public/assets/images/icons/red/hand.svg new file mode 100644 index 0000000..30443fb --- /dev/null +++ b/public/assets/images/icons/red/hand.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/icons/white/hand.svg b/public/assets/images/icons/white/hand.svg new file mode 100644 index 0000000..7be6a27 --- /dev/null +++ b/public/assets/images/icons/white/hand.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/icons/yellow/hand.svg b/public/assets/images/icons/yellow/hand.svg new file mode 100644 index 0000000..f7c9d48 --- /dev/null +++ b/public/assets/images/icons/yellow/hand.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss index f1a71ff..a2c1b35 100644 --- a/resources/assets/stylesheets/scss/courseware.scss +++ b/resources/assets/stylesheets/scss/courseware.scss @@ -3218,77 +3218,169 @@ c a n v a s b l o c k e n d d o c u m e n t b l o c k * * * * * * * * * * * * */ .cw-block-document { - .cw-pdf-header { + .cw-pdf-main-container { + width: calc(100% - 2px); + border: solid thin var(--content-color-40); + .cw-block-title { + border: none; + border-bottom: solid thin var(--content-color-40); + } + } + .cw-pdf-toolbar { position: relative; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: baseline; + align-content: space-around; + background-color: var(--content-color-20); + padding: 4px 8px; - .cw-pdf-button-prev, - .cw-pdf-button-next { - position: absolute; - border: none; - background-repeat: no-repeat; - background-color: transparent; - height: 24px; - width: 24px; - margin: 2px 12px; - cursor: pointer; + button { + height: 100%; + margin: 0 2px 0 0; + padding: 4px; + + &.active { + background-color: var(--base-color); + } } - .cw-pdf-button-prev { - left: 0; - @include background-icon(arr_1left, clickable, 18); - &.inactive { - @include background-icon(arr_1left, inactive, 18); + .cw-pdf-toolbar-left { + position: relative; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: baseline; + align-content: space-between; + width: 33%; + } + .cw-pdf-toolbar-middle { + position: relative; + display: flex; + justify-content: center; + width: 34%; + + .cw-pdf-zoom-buttons { + margin-right: 8px; + + button { + margin: 0; + padding: 4px 0; + } } } + .cw-pdf-toolbar-right { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: baseline; + align-content: space-between; + position: relative; + width: 33%; + margin-right: 4px; + + } + .cw-pdf-page-nav { + margin: 0 4px; - .cw-pdf-button-next { - right: 0; - @include background-icon(arr_1right, clickable, 18); - &.inactive { - @include background-icon(arr_1right, inactive, 18); + button { + margin: 0; + padding: 4px 0; + } + .cw-pdf-page-num { + text-align: right; + width: 2em; } } - .cw-pdf-download { - display: inline-block; - width: 18px; - height: 18px; - margin: 0 0.25em; - border: none; - cursor: pointer; - vertical-align: sub; + .cw-pdf-search-box { + position: absolute; + top: 33px; + left: 22px; + width: auto; + background-color: var(--content-color-20); + border-top: none; + padding: 6px; + z-index: 2; + line-height: normal; - background: no-repeat scroll 0 0; - @include background-icon(download, clickable, 18); + .cw-pdf-search-num { + margin: 4px 0 0 0; + display: block; + } + .cw-pdf-search-navs { + display: inline-block; + button { + margin: 0; + padding: 0; + } + } } } - .cw-pdf-canvas { - border: solid thin $content-color-40; - width: calc(100% - 2px); - } - .cw-pdf-downloadbox { - border: solid thin $content-color-40; - padding: 0.5em 1em; + .cw-pdf-outer-container { + position: relative; + width: 100%; - .cw-pdf-file-info { - @include background-icon(file, clickable, 24); - display: inline-block; - background-repeat: no-repeat; - padding-left: 26px; - margin: 1em; - line-height: 24px; - color: $base-color; - &.cw-pdf-fileicon-pdf { - @include background-icon(file-pdf, clickable, 24); + .cw-pdf-content { + display: flex; + flex-direction: row; + + .cw-pdf-sidebar { + width: 25%; + min-width: 270px;; + align-self: stretch; + background-color: var(--white); + border-right: solid 1px var(--content-color-40); + + ul.cw-pdf-toc-list, ul.cw-pdf-toc-sub-list { + padding: 0; + list-style: none; + + li { + padding: 0.5em 1em; + } + } + ul.cw-pdf-toc-list { + margin-top: 1em; + } } + + .cw-pdf-viewer-container { + width: 100%; + height: 100%; + overflow: hidden; + cursor: text; + + &.hand-cursor-grab { + cursor: grab; + &.grabbing { + cursor: grabbing; + } + } + &.has-error { + display: none; + } + .page { + position: relative; + margin: 0 auto; + } + } + } - .cw-pdf-download-icon { - float: right; - @include background-icon(download, clickable, 24); - height: 24px; - width: 24px; - background-repeat: no-repeat; - margin: 1em; + + + .cw-pdf-viewer-fake-container { + position: absolute; + } + + + .cw-pdf-error-page { + overflow: hidden; + width: calc(100% - 16px); + height: 100%; + padding: 8px; + display:table; } } } diff --git a/resources/vue/components/courseware/CoursewareDocumentBlock.vue b/resources/vue/components/courseware/CoursewareDocumentBlock.vue index 00a5136..58b0af7 100644 --- a/resources/vue/components/courseware/CoursewareDocumentBlock.vue +++ b/resources/vue/components/courseware/CoursewareDocumentBlock.vue @@ -10,35 +10,183 @@ @closeEdit="initCurrentData" > diff --git a/resources/vue/components/courseware/CoursewarePDFTableOfContent.vue b/resources/vue/components/courseware/CoursewarePDFTableOfContent.vue new file mode 100644 index 0000000..989e2ed --- /dev/null +++ b/resources/vue/components/courseware/CoursewarePDFTableOfContent.vue @@ -0,0 +1,30 @@ + + + -- cgit v1.0