@hmcts/media-viewer 2.9.3 → 2.9.4-RC.7

package/assets/sass/comment-set-panel.scss

@@ -16,6 +16,7 @@
 }
 
 .comments-panel.expanded {
+  min-height: 100%;
   display: block;
 }
 

package/assets/sass/comment.scss

@@ -110,21 +110,19 @@ mv-anno-comment {
     color: $govuk-secondary-text-colour;
   }
 
-
   .aui-comment__footer {
     font-size: .1px;
 
     .govuk-button {
       margin-right: govuk-spacing(2);
     }
-
   }
 
   .mvTextHighlight {
     background-color: yellow;
   }
-}
-
-
-
 
+  .stylestoggle {
+    margin-top: 15em;
+  }
+}

package/assets/sass/image-viewer.scss

@@ -7,9 +7,10 @@ mv-image-viewer {
 
     .image-container {
       position: absolute;
+      height: 100%;
       width: 100%;
       overflow-x: auto;
-      overflow-y: hidden;
+      overflow-y: auto;
 
       &.annotations {
         width: 100%;

package/assets/sass/pdf-viewer.scss

@@ -104,4 +104,8 @@ mv-pdf-viewer {
     float: right;
   }
 
+  .splitToolbarButton.left {
+    float: left;
+  }
+
 }

package/assets/sass/toolbar/buttons.scss

@@ -168,6 +168,30 @@ html[dir='rtl'] .splitToolbarButtonSeparator {
   transition-timing-function: ease;
 }
 
+.bookmark__sort__custom {
+  background: url(/assets/images/icon-bookmarks-custom.png) center center no-repeat;
+  filter: invert(100%) sepia(2%) saturate(0%) hue-rotate(349deg) brightness(107%) contrast(101%);
+  border-radius: 0.2em;
+  border: 0.1em ridge #D3D3D3;
+  width: 1.5em;
+  height: 1.5em;
+  background-size: 1.5em 1.5em;
+  margin: 0.2em 0em 0em 0.5em;
+  padding: 0.2em;
+}
+
+.bookmark__sort__position {
+  background: url(/assets/images/icon-bookmarks-position.png) center center no-repeat;
+  filter: invert(100%) sepia(2%) saturate(0%) hue-rotate(349deg) brightness(107%) contrast(101%);
+  border-radius: 0.2em;
+  border: 0.1em ridge #D3D3D3;
+  width: 1.5em;
+  height: 1.5em;
+  background-size: 1.5em 1.5em;
+  margin: 0.2em 0em 0em 0.5em;
+  padding: 0.2em;
+}
+
 .toolbarButton,
 .dropdownToolbarButton,
 .secondaryToolbarButton,

package/assets/sass/toolbar/main-toolbar.scss

@@ -18,7 +18,6 @@
       display: block;
       clear: both;
     }
-
   }
 
   .mv-toolbar-main {
@@ -53,8 +52,6 @@
   }
 }
 
-
-
 .mv-toolbar__menu-button--index {
   width: 100px;
   &:after {
@@ -63,6 +60,14 @@
   }
 }
 
+.mv-toolbar__menu-button--bookmarks {
+  width: 140px;
+  &:after {
+    background-image: url(/assets/images/toolbarButton-bookmarkDark.png);
+    background-size: 18px 14px;
+  }
+}
+
 .mv-toolbar__menu-button--draw {
   width: 140px;
   &:after {
@@ -257,6 +262,13 @@
   }
 }
 
+.redaction-button--search {
+  width: 10%;
+  &:after {
+    background-image: url(/assets/images/search.svg);
+  }
+}
+
 .mv-toolbar__menu-button--present {
   width: 120px;
   &:after {
@@ -330,12 +342,13 @@
 
 /* remove up and down arrows from page number field as there are already up and down icons on the toolbar
 /* Chrome, Safari, Edge, Opera */
-#pageNumber ::-webkit-outer-spin-button, #pageNumber::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+#pageNumber ::-webkit-outer-spin-button,
+#pageNumber::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
 }
 /* Firefox */
-#pageNumber[type=number] {
+#pageNumber[type="number"] {
   -moz-appearance: textfield;
 }
 

package/assets/sass/toolbar/side-bar.scss

@@ -5,7 +5,7 @@ $--sidebar-width: 20%;
   }
   .icp-mode & {
     top: 91px;
-    height: 100%
+    height: 100%;
   }
   position: absolute;
   top: 43px;
@@ -18,14 +18,14 @@ $--sidebar-width: 20%;
 
   transition-duration: 600ms;
   transition-timing-function: ease;
- 
+  padding-bottom: 3.2rem;
 }
 #sidebarContainer {
   transition-property: left;
   left: -200px;
   left: calc(-1 * var($--sidebar-width));
 }
-html[dir='rtl'] #sidebarContainer {
+html[dir="rtl"] #sidebarContainer {
   transition-property: right;
   right: -200px;
   right: calc(-1 * var($--sidebar-width));
@@ -52,7 +52,7 @@ html[dir='rtl'] #sidebarContainer {
 #outerContainer.sidebarOpen #sidebarContainer {
   left: 0px;
 }
-html[dir='rtl'] #outerContainer.sidebarOpen #sidebarContainer {
+html[dir="rtl"] #outerContainer.sidebarOpen #sidebarContainer {
   right: 0px;
 }
 
@@ -66,11 +66,11 @@ html[dir='rtl'] #outerContainer.sidebarOpen #sidebarContainer {
 }
 #sidebarContent {
   left: 0;
-  box-shadow: inset -1px 0 0 hsla(0,0%,0%,.25);
+  box-shadow: inset -1px 0 0 hsla(0, 0%, 0%, 0.25);
 }
-html[dir='rtl'] #sidebarContent {
+html[dir="rtl"] #sidebarContent {
   right: 0;
-  box-shadow: inset 1px 0 0 hsla(0,0%,0%,.25);
+  box-shadow: inset 1px 0 0 hsla(0, 0%, 0%, 0.25);
 }
 
 #outerContainer.sidebarResizing #viewerContainer {
@@ -83,7 +83,9 @@ html[dir='rtl'] #sidebarContent {
   left: 200px;
   left: var($--sidebar-width);
 }
-html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
+html[dir="rtl"]
+  #outerContainer.sidebarOpen
+  #viewerContainer:not(.pdfPresentationMode) {
   transition-property: right;
   right: 200px;
   right: var($--sidebar-width);
@@ -94,19 +96,17 @@ html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentatio
   height: 32px;
   background-color: #424242; /* fallback */
   background-image: url(/assets/images/texture.png),
-  linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95));
+    linear-gradient(hsla(0, 0%, 30%, 0.99), hsla(0, 0%, 25%, 0.95));
 }
 #toolbarSidebar {
   box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25),
-  inset 0 -1px 0 hsla(0,0%,100%,.05),
-  0 1px 0 hsla(0,0%,0%,.15),
-  0 0 1px hsla(0,0%,0%,.1);
+    inset 0 -1px 0 hsla(0, 0%, 100%, 0.05), 0 1px 0 hsla(0, 0%, 0%, 0.15),
+    0 0 1px hsla(0, 0%, 0%, 0.1);
 }
-html[dir='rtl'] #toolbarSidebar {
+html[dir="rtl"] #toolbarSidebar {
   box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25),
-  inset 0 1px 0 hsla(0,0%,100%,.05),
-  0 1px 0 hsla(0,0%,0%,.15),
-  0 0 1px hsla(0,0%,0%,.1);
+    inset 0 1px 0 hsla(0, 0%, 100%, 0.05), 0 1px 0 hsla(0, 0%, 0%, 0.15),
+    0 0 1px hsla(0, 0%, 0%, 0.1);
 }
 
 #sidebarResizer {
@@ -120,6 +120,6 @@ html[dir='rtl'] #toolbarSidebar {
 #sidebarResizer {
   right: -6px;
 }
-html[dir='rtl'] #sidebarResizer {
+html[dir="rtl"] #sidebarResizer {
   left: -6px;
 }