Home Explore Help
Register Sign In
RoyLiu
/
pdf-reader-web
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

fix something bug on safari

RoyLiu 4 years ago
parent
938edfb638
commit
083970886b
16 changed files with 29 additions and 26 deletions
Split View Show Diff Stats
  1. 4 8
      components/Embed/index.tsx
  2. 1 0
      components/Embed/styled.ts
  3. 1 0
      components/FreeTextOption/index.tsx
  4. 4 1
      components/Head.tsx
  5. 1 0
      components/HighlightOption/index.tsx
  6. 1 0
      components/InkOption/index.tsx
  7. 1 0
      components/ShapeOption/index.tsx
  8. 0 1
      components/Tabs/styled.ts
  9. 1 1
      components/ThumbnailViewer/styled.ts
  10. 2 2
      components/WatermarkOption/index.tsx
  11. 1 1
      config/index.js
  12. 2 2
      containers/MarkupTools.tsx
  13. 2 2
      containers/PdfViewer.tsx
  14. 1 0
      global/otherStyled.ts
  15. 6 7
      global/sidebarStyled.ts
  16. 1 1
      global/toolStyled.ts

+ 4 - 8
components/Embed/index.tsx
View File 

@@ -1,7 +1,5 @@
 
 import React from 'react';
 
 
-import Portal from '../Portal';
 
-
 
 import { Wrapper, Bg, CloseImg } from './styled';
 
 
 const EmbedComp = () => {
 
@@ -15,12 +13,10 @@ const EmbedComp = () => {
 
   };
 
 
   return (
 
-    <Portal>
 
-      <Wrapper id="embed-wrapper">
 
-        <Bg />
 
-        <CloseImg src="/icons/button_close.svg" onClick={handleClose} />
 
-      </Wrapper>
 
-    </Portal>
 
+    <Wrapper id="embed-wrapper">
 
+      <Bg />
 
+      <CloseImg src="/icons/button_close.svg" onClick={handleClose} />
 
+    </Wrapper>
 
   );
 
 };

+ 1 - 0
components/Embed/styled.ts
View File 

@@ -21,4 +21,5 @@ export const CloseImg = styled.img`
 
   top: 50px;
 
   right: 50px;
 
   transform: scale(5.5);
 
+  cursor: pointer;
 
 `;

+ 1 - 0
components/FreeTextOption/index.tsx
View File 

@@ -107,6 +107,7 @@ const TextOption: React.SFC<OptionPropsType> = ({
 
           onClick={(selected: string): void => {
 
             setDataState({ color: selected });
 
           }}
 
+          throughPortal
 
         />
 
       </Wrapper>
 
       <Wrapper>

+ 4 - 1
components/Head.tsx
View File 

@@ -25,7 +25,10 @@ const Head: React.SFC<Props> = ({
 
       <meta charSet="UTF-8" />
 
       <title>{t(title)}</title>
 
       <meta name="description" content={t(description)} />
 
-      <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+      <meta
 
+        name="viewport"
 
+        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=NO"
 
+      />
 
       <link rel="icon" sizes="192x192" href="/static/touch-icon.png" />
 
       <link rel="apple-touch-icon" href="/static/touch-icon.png" />
 
       <link rel="mask-icon" href="/static/favicon-mask.svg" color="#49B882" />

+ 1 - 0
components/HighlightOption/index.tsx
View File 

@@ -50,6 +50,7 @@ const HighlightOption: React.SFC<OptionPropsType> = ({
 
           onClick={(selected: string): void => {
 
             setDataState({ color: selected });
 
           }}
 
+          throughPortal
 
         />
 
       </Wrapper>
 
       <Wrapper>

+ 1 - 0
components/InkOption/index.tsx
View File 

@@ -57,6 +57,7 @@ const FreehandOption: React.SFC<OptionPropsType> = ({
 
           onClick={(selected: string): void => {
 
             setDataState({ color: selected });
 
           }}
 
+          throughPortal
 
         />
 
       </Wrapper>
 
       <Wrapper>

+ 1 - 0
components/ShapeOption/index.tsx
View File 

@@ -55,6 +55,7 @@ const ShapeOption: React.SFC<OptionPropsType> = ({
 
           onClick={(selected: string): void => {
 
             setDataState({ color: selected });
 
           }}
 
+          throughPortal
 
         />
 
       </Wrapper>
 
       <Wrapper>

+ 0 - 1
components/Tabs/styled.ts
View File 

@@ -12,7 +12,6 @@ export const BtnGroup = styled.div`
 
   overflow: hidden;
 
   display: flex;
 
   justify-content: space-around;
 
-  border: 1.5px solid ${color.primary};
 
 `;
 
 
 export const Btn = styled('button')<{ isActive?: boolean }>`

+ 1 - 1
components/ThumbnailViewer/styled.ts
View File 

@@ -6,7 +6,7 @@ export const ThumbnailsWrapper = styled.div`
 
 `;
 
 
 export const Body = styled.div`
 
-  height: calc(100% - 30px);
 
+  height: calc(100% - 60px);
 
   overflow: scroll;
 
   padding: 8px;
 
   text-align: center;

+ 2 - 2
components/WatermarkOption/index.tsx
View File 

@@ -46,8 +46,8 @@ const WatermarkOption: React.SFC<Props> = ({
 
   return (
 
     <Container>
 
       <Head>
 
-        <IconWrapper>
 
-          <Icon glyph="left-back" onClick={onClick} />
 
+        <IconWrapper onClick={onClick}>
 
+          <Icon glyph="left-back" />
 
         </IconWrapper>
 
         <Typography light>{t('watermark')}</Typography>
 
       </Head>

+ 1 - 1
config/index.js
View File 

@@ -1,5 +1,5 @@
 
 let API_HOST = 'http://127.0.0.1:3000';
 
-// let API_HOST = 'http://192.168.172.3:3000';
 
+// let API_HOST = 'http://192.168.173.117:3000';
 
 
 switch (process.env.NODE_ENV) {
 
   case 'production':

+ 2 - 2
containers/MarkupTools.tsx
View File 

@@ -58,8 +58,8 @@ const MarkupTools: React.FC = () => {
 
   // );
 
 
   useEffect(() => {
 
-    if (router.query.tool === 'freehand') {
 
-      setSidebar('freehand');
 
+    if (router.query.tool === 'shape') {
 
+      setSidebar('shape');
 
     } else {
 
       setSidebar('highlight');
 
     }

+ 2 - 2
containers/PdfViewer.tsx
View File 

@@ -67,7 +67,7 @@ const PdfViewer: React.FC = () => {
 
       });
 
   };
 
 
-  const pdfGenerator = async (): Promise<any> => {
 
+  const pdfStarter = async (): Promise<any> => {
 
     const parsed = queryString.parse(window.location.search);
 
 
     if (parsed.token) {
 
@@ -131,7 +131,7 @@ const PdfViewer: React.FC = () => {
 
   };
 
 
   useEffect(() => {
 
-    pdfGenerator();
 
+    pdfStarter();
 
   }, []);
 
 
   useEffect(() => {

+ 1 - 0
global/otherStyled.ts
View File 

@@ -12,6 +12,7 @@ export const SidebarWrapper = styled('div')<{ isHidden: boolean }>`
 
   background-color: white;
 
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
 
   z-index: 1;
 
+  overflow: auto;
 
 
   transition: left 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;

+ 6 - 7
global/sidebarStyled.ts
View File 

@@ -4,7 +4,7 @@ export const Container = styled.div`
 
   margin-top: 60px;
 
   padding: 24px 8px;
 
   position: relative;
 
-  min-height: 724px;
 
+  min-height: 500px;
 
   height: calc(100% - 60px);
 
   background-color: white;
 
 `;
 
@@ -15,20 +15,19 @@ export const Head = styled.div`
 
 `;
 
 
 export const Body = styled.div`
 
-  overflow: scroll;
 
   padding: 8px;
 
   text-align: center;
 
   position: relative;
 
-  height: calc(100vh - 140px);
 
+  height: auto;
 
 `;
 
 
 export const Footer = styled.div`
 
-  position: absolute;
 
-  bottom: 10px;
 
-  right: 25px;
 
+  padding: 10px;
 
+  width: 100%;
 
+  height: 120px;
 
   display: inline-flex;
 
   flex-direction: column;
 
-  justify-content: center;
 
+  justify-content: flex-end;
 
   align-items: flex-end;
 
 `;

+ 1 - 1
global/toolStyled.ts
View File 

@@ -56,7 +56,7 @@ export const BtnWrapper = styled.div`
 
 
 export const PickerContainer = styled.div`
 
   position: fixed;
 
-  z-index: 10;
 
+  z-index: 20;
 
   top: 0;
 
   left: 0;
 
   right: 0;