update style, : )))) project beautifulllllllllllllll kakakakaa

ducga1998 · Dec 19, 2018 · 7bc1e13 · 7bc1e13
1 parent 3c4f9ec
commit 7bc1e13
Show file tree

Hide file tree

Showing 11 changed files with 185 additions and 106 deletions.
diff --git a/src/Components/UI/UIDropDown.tsx b/src/Components/UI/UIDropDown.tsx
@@ -1,22 +1,18 @@
-// @flow
 
 import * as  React from 'react';
-// $FlowFixMe
-import compose from 'recompose/compose';
-// $FlowFixMe
 import styled from 'styled-components';
-// import { } from '';
 import Card from '../styled/card';
 import { Shadow, FlexCol, hexa, Transition } from '../styled/base';
 import theme from '../../theme';
-import { AnyNaptrRecord } from 'dns';
 
 
 const StyledDropdown = styled(FlexCol)`
   background-color: transparent;
   position: absolute;
-  width: 400px;
-  top: 100%;
+  display : block;
+  width: auto;
+  top: 0px;
+  opacity : 0;
   right: 0px;
   z-index: 21323;
   padding-top: 8px;
@@ -40,16 +36,31 @@ interface IUIDropDown {
   children: any
 }
 export default class UIDropDown extends React.Component<IUIDropDown> {
-
+  refDropDown  : any  = React.createRef()
+  state  = {
+    open : false
+  }
+  handleViewDropDown= (event) => {
+    console.log('nguyen minh duc')
+      const domDropDown = this.refDropDown.current
+      this.setState({open : true})
+  }
   render() {
     const { trigger, children } = this.props
-    React.cloneElement(trigger, {
-      onMouseDown: () => {
-        console.log('test')
+    const Button =  React.cloneElement(trigger, {
+      onMouseDown: (event) => {
+
+        console.log('nguyen minh duc')
+        this.handleViewDropDown(event)
       }
     })
-    return <div>  <StyledDropdown>{children}</StyledDropdown></div>
+
+    return <><Wrapper> {Button}{this.state.open? <StyledDropdown >{children}</StyledDropdown> : null}</Wrapper></>
   }
 
 
-}
+}
+const Wrapper = styled.div`
+position : relative;
+
+`
diff --git a/src/Components/UI/UIPanel.tsx b/src/Components/UI/UIPanel.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 
 import styled from "styled-components";
 import UIWidget from "./UIWidget";
-export default class UIField extends React.Component<any, any> {
+export default class UIPanel extends React.Component<any, any> {
     render() {
         return <UIWidget>
 

diff --git a/src/Components/UI/UIPopUp.tsx b/src/Components/UI/UIPopUp.tsx
@@ -9,47 +9,95 @@ const {useEffect , useState  ,useRef} = React
 export default function UIPopUp({children , trigger }) {
     const [open , setOpen ] = useState(false)
     const refPopUp = useRef(null)
-    const refTrigger = useRef(null) as any
-    function updatePosition(){
-        setOpen(!open)
+    function updatePosition(event){
+        // event.preventDefault()
+
+        const domButton = event.target
+
+
         const domPopUp  = refPopUp.current as any
-        if(refTrigger && domPopUp) {
-            const {top ,left  , width , height} = refTrigger.current.getBoundingClientRect()
+        console.log('domPopUp',domPopUp)
+        if(domButton && domPopUp) {
+            let {top ,left  , width , height} = domButton.getBoundingClientRect()
+            top  = top + height
             const rectPopup = domPopUp.getBoundingClientRect()
-            console.log('top '  , top,left)
-            domPopUp.style.top = (top +height +10 ) + 'px';
-            domPopUp.style.left = left + 'px'
-             // 4 goc screen desktop 
+            setOpen(!open)
+
+
             const  {innerHeight , innerWidth} = window
-            if(left + width  > innerWidth){
+            domPopUp.style.width = (width - 10) + 'px'
+            //nomarl 
+
+            // domPopUp.style.top = top + 'px'
+            // domPopUp.style.left = left + 'px'
+
+            // bottom  +  left
+            if(top  +rectPopup.height > innerHeight  && left + width > innerWidth ){
+                console.log('TH1')
+                domPopUp.style.top = (top  - rectPopup.height -10) + 'px'
+                domPopUp.style.left = (left - rectPopup.width - 10) + 'px'
 
+            }
+            //  top - right
+            else if (left + rectPopup.width  > innerWidth){
+                console.log('TH2')
+                domPopUp.style.top = top + 'px'
                 domPopUp.style.left = (left - rectPopup.width - 10) + 'px'
+
+            }
+            // top - left
+            else if(left - rectPopup.width  < 0  ){
+                console.log('TH3')
+                domPopUp.style.top = top + 'px'
+                domPopUp.style.left = (left + rectPopup.width + 10 ) + 'px'
+
             }
+            //bottom + right
+            else if(top + rectPopup.height > innerHeight ){
+                console.log('TH4')
+                domPopUp.style.top = (top  - rectPopup.height -10) + 'px'
+                domPopUp.style.left = left + 'px'
+
+            }
+            else {
+                domPopUp.style.top = top  + 'px'
+                domPopUp.style.left = left + 'px'
+            }
+
+
         }
-
-            console.log('refTrigger',refTrigger ,'domPopUp',domPopUp )
+
     }
    const Button  =  React.cloneElement(trigger , {
-            onMouseDown : (event) => {
-                event.stopPropagation()
-                console.log(event.target)
-                updatePosition()
-            },
-            ref : refTrigger,            
+    onMouseDown :  updatePosition ,           
     })
     return <> {Button}  
-  {open ?  <UIWidget>
-        <Wrapper  onMouseDown={(event) => {  event.stopPropagation() }}> 
+    {  <UIWidget>
+        <Wrapper open={open} data-off="true" onMouseDown={(event) => {  event.stopPropagation() ; console.log(event.target); 
+            console.log(!!event.target.getAttribute('open'))
+
+    if(event.target && event.target.getAttribute('data-off')){
+            setOpen(false)
+        }
+           }} > 
             <Popup ref={refPopUp}>
                 {children}
             </Popup>
         </Wrapper>
 
-   </UIWidget> : null} }</>
+   </UIWidget> }</>
 }
-const Wrapper  = styled(OverLay)`
-background-color: transparent;
-display : flex;
+const Wrapper  = styled.div<any>`
+ 
+ visibility : ${props => props.open? 'visible' : 'hidden'};
+ 
+ position : absolute;
+ width : 100%;
+ height  :100%;
+ background-color : transparent;
+ top : 0px;
+ left : 0px;
+
 `
 const Popup = styled(FlexCol)`
     display : block;

diff --git a/src/Components/UI/UIReaction.tsx b/src/Components/UI/UIReaction.tsx
@@ -1,12 +1,9 @@
 import * as React from 'react';
 import styled from 'styled-components';
-
-
-import { Glyphicon } from 'react-bootstrap';
-
 import { Subscribe } from 'unstated-x';
 import allBookMarkContainer from '../../Container/bookMarkContainer';
 import UIWidget from './UIWidget';
+import { Glyph } from '../Icon';
 // const { useEffect, useState } = React
 interface IUIReaction {
     idUseOwnArticler?: string
@@ -23,34 +20,29 @@ export default function UIReaction({ idUseOwnArticler, idArticle }: IUIReaction)
     // lan sau if user vao lai dung bai viet do thi for tu mang save ay ra 
     // neu co thi view theo data
     useEffect(() => {
-
         allBookMarkContainer.isBookMark({ idArticle })
-
-        window.addEventListener('scroll', (a) => {
-            if (refReaction.current && window.scrollY < 40) {
-                refReaction.current.style.opacity = 0
-            }
-            else if (refReaction.current) {
-                refReaction.current.style.opacity = 0.7
-            }
-        })
-        return () => {
-            window.removeEventListener('scroll', () => {
-
-
-            })
-        }
+        // window.addEventListener('scroll', (a) => {
+
+        //     if (refReaction.current && window.scrollY < 40) {
+        //         refReaction.current.style.opacity = 0
+        //     }
+        //     else if (refReaction.current) {
+        //         refReaction.current.style.opacity = 0.7
+        //     }
+        // })
+        // return () => {
+        //     window.removeEventListener('scroll', () => {
+        //     })
+        // }
     })
     return <><UIWidget>
         <Subscribe to={[allBookMarkContainer]}>
             {
                 () => {
-
                     const bookMarkContainer = allBookMarkContainer.getContainerBookMark(idArticle)
                     if (!bookMarkContainer) {
                         return null
                     }
-
                     return <Subscribe to={[bookMarkContainer]}>
                         {
                             () => {
@@ -62,14 +54,12 @@ export default function UIReaction({ idUseOwnArticler, idArticle }: IUIReaction)
                                     else {
                                         allBookMarkContainer.bookMarkToClient({ idUseOwnArticler, idArticle })
                                     }
-
                                 }
-
                                 return <$Reaction ref={refReaction} height={screen.height / 4 + 'px'}>
                                     <$Button data-tooltip="2423">
                                         <svg className="svgIcon-use" width="25" height="25"><g fill-rule="evenodd"><path d="M11.738 0l.762 2.966L13.262 0z"></path><path d="M16.634 1.224l-1.432-.47-.408 3.022z"></path><path d="M9.79.754l-1.431.47 1.84 2.552z"></path><path d="M22.472 13.307l-3.023-5.32c-.287-.426-.689-.705-1.123-.776a1.16 1.16 0 0 0-.911.221c-.297.231-.474.515-.535.84.017.022.036.04.053.063l2.843 5.001c1.95 3.564 1.328 6.973-1.843 10.144a8.46 8.46 0 0 1-.549.501c1.205-.156 2.328-.737 3.351-1.76 3.268-3.268 3.041-6.749 1.737-8.914"></path><path d="M12.58 9.887c-.156-.83.096-1.569.692-2.142L10.78 5.252c-.5-.504-1.378-.504-1.879 0-.178.18-.273.4-.329.63l4.008 4.005z"></path><path d="M15.812 9.04c-.218-.323-.539-.55-.88-.606a.814.814 0 0 0-.644.153c-.176.137-.713.553-.24 1.566l1.43 3.025a.539.539 0 1 1-.868.612L7.2 6.378a.986.986 0 1 0-1.395 1.395l4.401 4.403a.538.538 0 1 1-.762.762L5.046 8.54 3.802 7.295a.99.99 0 0 0-1.396 0 .981.981 0 0 0 0 1.394L3.647 9.93l4.402 4.403a.537.537 0 0 1 0 .761.535.535 0 0 1-.762 0L2.89 10.696a.992.992 0 0 0-1.399-.003.983.983 0 0 0 0 1.395l1.855 1.854 2.763 2.765a.538.538 0 0 1-.76.761l-2.765-2.764a.982.982 0 0 0-1.395 0 .989.989 0 0 0 0 1.395l5.32 5.32c3.371 3.372 6.64 4.977 10.49 1.126C19.74 19.8 20.271 17 18.62 13.982L15.812 9.04z"></path></g></svg>
                                     </$Button>
-                                    <$Button active={isBookMark} onClick={handleBookMark} ><Glyphicon glyph="bookmark" /></$Button>
+                                    <$Button active={isBookMark} onClick={handleBookMark} ><Glyph glyph="flag" /></$Button>
                                 </$Reaction>
                             }
                         }
@@ -93,7 +83,7 @@ const $Reaction = styled.div<{ height: string }>`
     justify-content : center;
     box-shadow: 0px 3px 8px 2px #a5b1ba;
     border-radius: 10px;
-    opacity : 0;
+    opacity : 1;
     flex-direction: column;
 `
 const $Button = styled.div<any>`

diff --git a/src/Components/UI/UIWidget.tsx b/src/Components/UI/UIWidget.tsx
@@ -2,7 +2,10 @@
 import * as React from 'react'
 import * as  ReactDOM from 'react-dom'
 export default class UIWidget extends React.Component<any> {
+    componentDidUpdate() {
+    const dom =  ReactDOM.findDOMNode(this)
 
+    }
     render() {
         return ReactDOM.createPortal(this.props.children, document.body)
 

diff --git a/src/Components/styled/card.tsx b/src/Components/styled/card.tsx
@@ -22,10 +22,10 @@ export const StyledCard = styled(FlexCol) <any>`
   max-width: 100%;
   background-clip: padding-box;
   overflow: visible;
+  border-bottom : 2px solid ${props => props.theme.bg.hairline};
   flex: none;
   + div,
   + span {
-    margin-top: 16px;
 
     @media (max-width: 768px) {
       margin-top: 2px;
@@ -36,6 +36,9 @@ export const StyledCard = styled(FlexCol) <any>`
     border-radius: 0;
     box-shadow: none;
   }
+  &:focus {
+    background-color : ${props => props.theme.bg.hairline}
+  } 
 `
 
 

diff --git a/src/Components/styled/nav.ts b/src/Components/styled/nav.ts
@@ -1,15 +1,13 @@
+// import { theme } from './../../theme/index';
 import { Link } from 'react-router-dom';
 // @flow
 import styled, { css } from 'styled-components';
-import { FlexRow, hexa } from './base';
+import { FlexRow, hexa, fontStack, Transition } from './base';
  //  have
 
 export const Nav = styled(FlexRow)`
   width: 100%;
-  background: ${({ theme }) =>
-        process.env.NODE_ENV === 'production'
-            ? theme.text.default
-            : theme.warn.alt};
+  background: ${({ theme }) =>theme.text.default };
   display: flex;
   align-items: stretch;
   color: ${({ theme }) => theme.text.reverse};
@@ -67,6 +65,7 @@ export const Logo = styled.img`
 `;
 
 export const IconLink = styled(Link)`
+  ${fontStack}
   display: flex;
   flex: auto;
   flex-direction: row;
@@ -78,9 +77,12 @@ export const IconLink = styled(Link)`
   opacity: 0.8;
   position: relative;
   width: 100%;
-
+  color : ${props => props.theme.text.reverse};
+  transition : ${Transition.hover.off};
   &:hover {
     opacity: 1;
+    box-shadow: inset 0 -4px 0 ${({ theme }) => theme.bg.default};
+    transition : ${Transition.hover.on};
   }
 
   ${/* handles unseen notification counts for both DMs and Notifications */ ''} ${(props: any) =>
@@ -94,18 +96,12 @@ export const IconLink = styled(Link)`
           font-size: 20px;
           font-weight: 600;
           background: ${({ theme }) => theme.bg.default};
-          color: ${({ theme }) =>
-                process.env.NODE_ENV === 'production'
-                    ? theme.text.default
-                    : theme.warn.alt};
+          color: ${({ theme }) =>theme.text.default}
+             
           border-radius: 8px;
           padding: 2px 4px;
-          border: 2px solid
-            ${({ theme }) =>
-                process.env.NODE_ENV === 'production'
-                    ? theme.text.default
-                    : theme.warn.alt};
-        }
+          border: 2px solid ${({ theme }) =>theme.text.default}
+               
       `} &[data-active~='true'] {
     box-shadow: inset 0 -4px 0 ${({ theme }) => theme.bg.default};
     opacity: 1;

diff --git a/src/Views/Author/index.tsx b/src/Views/Author/index.tsx
@@ -13,7 +13,7 @@ interface IAuthor {
     idUser: string
 }
 const Author = ({ name, totalFollow, totalArticle, avatarLink, idUser }: IAuthor) => {
-    const src = avatarLink ? avatarLink : "http://graph.facebook.com/1898075403817841/picture"
+    const src = avatarLink ? avatarLink : "./default.jpg"
     return <Subscribe to={[userContainer]}>
         {
             container => {