Merge branch '7.0' of https://github.com/PDFTron/webviewer-ui into 7.0

i18n/translation-de.json

@@ -267,7 +267,8 @@
     },
     "shared": {
       "page": "Seite",
-      "precision": "Genauigkeit"
+      "precision": "Genauigkeit",
+      "enableSnapping": "Aktivieren Sie das Einrasten für Messwerkzeuge"
     },
     "watermark": {
       "size": "Größe",

i18n/translation-en.json

@@ -267,7 +267,8 @@
     },
     "shared": {
       "page": "Page",
-      "precision": "Precision"
+      "precision": "Precision",
+      "enableSnapping": "Enable snapping for measurement tools"
     },
     "watermark": {
       "size": "Size",

i18n/translation-es.json

@@ -267,7 +267,8 @@
     },
     "shared": {
       "page": "Página",
-      "precision": "Precisión"
+      "precision": "Precisión",
+      "enableSnapping": "Habilitar el ajuste para herramientas de medición"
     },
     "watermark": {
       "size": "Talla",

i18n/translation-fr.json

@@ -267,7 +267,8 @@
     },
     "shared": {
       "page": "Page",
-      "precision": "Précision"
+      "precision": "Précision",
+      "enableSnapping": "Activer la capture pour les outils de mesure"
     },
     "watermark": {
       "size": "Taille",

i18n/translation-it.json

@@ -267,7 +267,8 @@
     },
     "shared": {
       "page": "Pagina",
-      "precision": "Precisione"
+      "precision": "Precisione",
+      "enableSnapping": "Abilita snap per strumenti di misurazione"
     },
     "watermark": {
       "size": "Taglia",

i18n/translation-ja.json

@@ -267,7 +267,8 @@
     },
     "shared": {
       "page": "ページ",
-      "precision": "精度"
+      "precision": "精度",
+      "enableSnapping": "測定ツールのスナップを有効にする"
     },
     "watermark": {
       "size": "サイズ",

i18n/translation-ko.json

@@ -267,7 +267,8 @@
     },
     "shared": {
       "page": "페이지",
-      "precision": "정밀도"
+      "precision": "정밀도",
+      "enableSnapping": "측정 도구에 스냅 가능"
     },
     "watermark": {
       "size": "크기",

i18n/translation-nl.json

@@ -267,7 +267,8 @@
     },
     "shared": {
       "page": "Pagina",
-      "precision": "precisie"
+      "precision": "precisie",
+      "enableSnapping": "Schakel snappen in voor meetinstrumenten"
     },
     "watermark": {
       "size": "Grootte",

i18n/translation-pt_br.json

@@ -267,7 +267,8 @@
     },
     "shared": {
       "page": "Página",
-      "precision": "Precisão"
+      "precision": "Precisão",
+      "enableSnapping": "Ativar encaixe para ferramentas de medição"
     },
     "watermark": {
       "size": "Tamanho",

i18n/translation-ru.json

@@ -267,7 +267,8 @@
     },
     "shared": {
       "page": "Страница",
-      "precision": "Точность"
+      "precision": "Точность",
+      "enableSnapping": "Включить привязку для измерительных инструментов"
     },
     "watermark": {
       "size": "Размер",

i18n/translation-zh_cn.json

@@ -267,7 +267,8 @@
     },
     "shared": {
       "page": "页",
-      "precision": "精准度"
+      "precision": "精准度",
+      "enableSnapping": "启用测量工具的捕捉"
     },
     "watermark": {
       "size": "尺寸",

i18n/translation-zh_tw.json

@@ -267,7 +267,8 @@
     },
     "shared": {
       "page": "頁面",
-      "precision": "精確度"
+      "precision": "精確度",
+      "enableSnapping": "啟用測量工具的捕捉"
     },
     "watermark": {
       "size": "尺寸",

src/apis/setTheme.js

@@ -20,7 +20,8 @@ WebViewer(...)
  */
 
 export default store => {
-  let previousActiveTheme;
+  let previousActiveTheme = 'light'; // default
+  cssVars({});
   store.subscribe(() => {
     const activeTheme = selectors.getActiveTheme(store.getState());
     if (previousActiveTheme !== activeTheme) {

src/components/AnnotationPopup/AnnotationPopup.js

@@ -11,7 +11,7 @@ import core from 'core';
 import { getAnnotationPopupPositionBasedOn } from 'helpers/getPopupPosition';
 import getAnnotationStyles from 'helpers/getAnnotationStyles';
 import applyRedactions from 'helpers/applyRedactions';
-import { isMobile } from 'helpers/device';
+import { isMobile, isIE } from 'helpers/device';
 import useOnClickOutside from 'hooks/useOnClickOutside';
 import actions from 'actions';
 import selectors from 'selectors';
@@ -327,7 +327,7 @@ const AnnotationPopup = () => {
   </div>;
 
   return (
-    isMobile() ?
+    isIE || isMobile() ?
     annotationPopup
     :
     <Draggable cancel=".Button, .cell, .sliders-container svg">

src/components/AnnotationStylePopup/AnnotationStylePopup.js

@@ -58,7 +58,9 @@ class AnnotationStylePopup extends React.Component {
         data-element="annotationStylePopup"
         onClick={this.handleClick}
       >
+        {/* Do not show checkbox for ellipse as snap mode does not exist for it */}
         <StylePopup
+          hideSnapModeCheckbox={(annotation instanceof window.Annotations.EllipseAnnotation || !core.isFullPDFEnabled())}
           colorMapKey={colorMapKey}
           style={style}
           isFreeText={isFreeText}

src/components/Bookmark/EditingBookmark.scss

@@ -26,6 +26,7 @@
     align-items: center;
     color: var(--primary-button-text);
     padding: 6px 18px;
+    width: auto;
     width: fit-content;
     background: var(--primary-button);
     border-radius: 4px;

src/components/BookmarksPanel/BookmarksPanel.scss

@@ -24,6 +24,7 @@
       align-items: center;
       color: var(--primary-button-text);
       padding: 6px 18px;
+      width: auto;
       width: fit-content;
       background: var(--primary-button);
       border-radius: 4px;

src/components/Button/Button.js

@@ -63,7 +63,7 @@ const Button = props => {
   // if there is no file extension then assume that this is a glyph
   const isGlyph =
     img && !isBase64 && (!img.includes('.') || img.startsWith('<svg'));
-  const shouldRenderTooltip = title;
+  const shouldRenderTooltip = !!title && !disabled;
   const children = (
     <button
       className={classNames({

src/components/CalibrationModal/CalibrationModal.scss

@@ -114,6 +114,7 @@
         padding: 6px 18px;
         margin-top: 8px;
         margin-left: 5px;
+        width: auto;
         width: fit-content;
         background: var(--primary-button);
         border-radius: 4px;

src/components/DocumentContainer/DocumentContainer.js

@@ -197,6 +197,8 @@ class DocumentContainer extends React.PureComponent {
   }
 
   render() {
+    const { isToolsHeaderOpen, isMobile } = this.props;
+
     let className;
 
     if (isIE) {
@@ -226,9 +228,16 @@ class DocumentContainer extends React.PureComponent {
               <div className="document" ref={this.document}/>
             </div>
             <MeasurementOverlay />
-            <div className="footer">
-              <PageNavOverlay />
-              {this.props.isMobile && <ToolsOverlay />}
+            <div
+              className={classNames({
+                'footer-container': true,
+                'tools-header-open': isToolsHeaderOpen,
+              })}
+            >
+              <div className="footer">
+                <PageNavOverlay />
+                {isMobile && <ToolsOverlay />}
+              </div>
             </div>
           </div>
         )}
@@ -238,6 +247,7 @@ class DocumentContainer extends React.PureComponent {
 }
 
 const mapStateToProps = state => ({
+  isToolsHeaderOpen: selectors.isElementOpen(state, 'toolsHeader'),
   isLeftPanelOpen: selectors.isElementOpen(state, 'leftPanel'),
   isRightPanelOpen: selectors.isElementOpen(state, 'searchPanel') || selectors.isElementOpen(state, 'notesPanel'),
   isSearchOverlayOpen: selectors.isElementOpen(state, 'searchOverlay'),

src/components/DocumentContainer/DocumentContainer.scss

@@ -1,30 +1,53 @@
 @import '../../constants/styles';
 
+
+
 .measurement-container {
-  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   flex: 1;
   overflow: hidden;
   user-select: none;
 
-  .footer {
+  .footer-container {
     pointer-events: none;
     position: absolute;
-    bottom: 0;
-    left: 0;
-    z-index: 55;
+    // flex: 1;
     width: 100%;
+    // https://stackoverflow.com/questions/12070759/make-absolute-positioned-div-expand-parent-div-height
+    height: calc(100% - 37px); // minus the height of the top header;
 
-    * {
-      pointer-events: all;
+    @include tablet-and-mobile {
+      height: calc(100% - 53px); // minus the height of the top header;
+    }
+
+    &.tools-header-open {
+      height: calc(100% - 76px); // minus the height of both headers;
+
+      @include tablet-and-mobile {
+        height: calc(100% - 104px); // minus the height of both headers;
+      }
+    }
+
+    .footer {
+      pointer-events: none;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      z-index: 55;
+      width: 100%;
+
+      * {
+        pointer-events: all;
+      }
     }
   }
+
+
 }
 
 .DocumentContainer {
-  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;

src/components/Header/Header.js

@@ -17,7 +17,7 @@ class Header extends React.PureComponent {
   }
 
   render() {
-    const { isDisabled, activeHeaderItems, isOpen, isToolsHeaderOpen } = this.props;
+    const { isDisabled, activeHeaderItems, isOpen, isToolsHeaderOpen, currentToolbarGroup } = this.props;
 
     if (isDisabled || !isOpen) {
       return null;
@@ -33,13 +33,15 @@ class Header extends React.PureComponent {
         >
           <HeaderItems items={activeHeaderItems} />
         </div>
-        {!isToolsHeaderOpen && <div className="view-header-border" />}
+        {(!isToolsHeaderOpen || currentToolbarGroup === 'toolbarGroup-View')
+          && <div className="view-header-border" />}
       </React.Fragment>
     );
   }
 }
 
 const mapStateToProps = state => ({
+  currentToolbarGroup: selectors.getCurrentToolbarGroup(state),
   isToolsHeaderOpen: selectors.isElementOpen(state, 'toolsHeader'),
   isDisabled: selectors.isElementDisabled(state, 'header'),
   isOpen: selectors.isElementOpen(state, 'header'),

src/components/Header/ToolsHeader.js

@@ -12,6 +12,7 @@ import { motion, AnimatePresence } from "framer-motion";
 
 import './Header.scss';
 
+
 class ToolsHeader extends React.PureComponent {
   static propTypes = {
     isDisabled: PropTypes.bool,
@@ -20,9 +21,9 @@ class ToolsHeader extends React.PureComponent {
   }
 
   render() {
-    const { isTabletAndMobile, isDisabled, activeHeaderItems, isOpen, isToolsOverlayOpen, isToolsOverlayDisabled } = this.props;
+    const { isDisabled, activeHeaderItems, isOpen, currentToolbarGroup } = this.props;
 
-    const isVisible = !isDisabled && isOpen;
+    const isVisible = !isDisabled && isOpen && currentToolbarGroup !== 'toolbarGroup-View';
 
     return (
       <React.Fragment>
@@ -50,6 +51,7 @@ class ToolsHeader extends React.PureComponent {
 }
 
 const mapStateToProps = state => ({
+  currentToolbarGroup: selectors.getCurrentToolbarGroup(state),
   isDisabled: selectors.isElementDisabled(state, 'toolsHeader'),
   isOpen: selectors.isElementOpen(state, 'toolsHeader'),
   activeHeaderItems: selectors.getToolsHeaderItems(state),

src/components/LinkModal/LinkModal.scss

@@ -174,6 +174,7 @@
       padding: 6px 18px;
       margin-top: 8px;
       margin-left: 5px;
+      width: auto;
       width: fit-content;
       background: var(--primary-button);
       border-radius: 4px;