chore: merge branch 'dev'

Author: mydearxym

components/Modal/styles/index.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { theme, animate } from 'utils'
+import { theme, animate, cs } from 'utils'
 import Img from 'Img'
 
 // display: ${props => (props.show ? 'block' : 'none')};
@@ -11,7 +11,7 @@ export const Mask = styled.div`
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 1000;
+  z-index: ${cs.zIndex.modalOverlay};
   display: ${({ show }) => (show ? 'block' : 'none')};
 `
 

containers/Doraemon/styles/index.js

@@ -9,7 +9,7 @@ export const PageOverlay = styled.div`
   position: fixed;
   right: 0;
   top: 0;
-  z-index: 1001;
+  z-index: ${cs.zIndex.doraemonOverlay};
   display: ${({ visible }) => (visible ? 'block' : 'none')};
 `
 // flex-grow example: http://zhoon.github.io/css3/2014/08/23/flex.html
@@ -19,7 +19,7 @@ export const PanelContainer = styled.div`
   max-width: 550px;
   position: fixed;
   top: 12vh;
-  z-index: 1002;
+  z-index: ${cs.zIndex.doraemon};
   display: ${({ visible }) => (visible ? 'block' : 'none')};
   left: 50%;
   margin-left: -19vw;

containers/Doraemon/styles/results_list.js

@@ -25,7 +25,7 @@ export const PageOverlay = styled.div`
   position: fixed;
   right: 0;
   top: 0;
-  z-index: 1001;
+  z-index: ${cs.zIndex.doraemonOverlay};
   display: ${({ visible }) => (visible ? 'block' : 'none')};
 `
 // flex-grow example: http://zhoon.github.io/css3/2014/08/23/flex.html
@@ -35,7 +35,7 @@ export const PanelContainer = styled.div`
   max-width: 550px;
   position: fixed;
   top: 12vh;
-  z-index: 1002;
+  z-index: ${cs.zIndex.doraemon};
   display: ${({ visible }) => (visible ? 'block' : 'none')};
   left: 50%;
   margin-left: -19vw;

containers/Preview/styles/index.js

@@ -34,14 +34,10 @@ export const PreviewOverlay = styled.div`
   position: fixed;
   height: 100%;
   right: 0;
-  z-index: 998;
+  z-index: ${cs.zIndex.previewOverlay};
   top: 0;
   visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
 `
-// z-index: 1001;
-// z-index: ${props => (props.visible ? 1001 : -1)};
-// display: ${props => (props.visible ? 'block' : 'none')};
-// visibility: ${props => (props.visible ? 'visible' : 'hidden')};
 
 export const PreviewWrapper = styled.div`
   ${cs.flex()};
@@ -59,7 +55,7 @@ export const PreviewWrapper = styled.div`
   position: fixed;
   transform: ${({ visible }) => doTransform(visible)};
   top: 0px;
-  z-index: 1000;
+  z-index: ${cs.zIndex.preview};
 `
 export const PreviewContent = styled.div`
   width: 90%;

containers/Sidebar/Sidebar.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { theme } from 'utils'
+import { theme, cs } from 'utils'
 
 const SideBar = styled.div`
   border-right: 1px solid;
@@ -10,7 +10,7 @@ const SideBar = styled.div`
   width: ${({ open }) => (open ? '256px' : '56px')};
   background: ${theme('sidebar.bg')};
   border-color: ${theme('sidebar.border_color')};
-  z-index: 1000;
+  z-index: ${cs.zIndex.sidebar};
   overflow-y: scroll;
   overflow-x: hidden;
 

containers/Sidebar/styles/index.js

@@ -14,7 +14,7 @@ export const Container = styled.aside`
   box-shadow: ${({ pin }) => (pin ? '3px 0 20px rgba(0, 0, 0, 0.2); ' : '')};
   background: ${theme('sidebar.bg')};
   border-color: ${theme('sidebar.borderColor')};
-  z-index: 2000;
+  z-index: ${cs.zIndex.sidebar};
   overflow: hidden;
 
   transition: width 0.2s, opacity 0.8s, box-shadow 0.1s linear 0.1s,

containers/Sidebar/styles/menu_bar.js

@@ -6,7 +6,7 @@ import { Container } from './index'
 
 export const Wrapper = styled.div`
   display: block;
-  z-index: 2001;
+  z-index: ${cs.zIndex.sidebar + 1};
   &:hover {
     background: ${theme('sidebar.menuHover')};
   }

containers/ThemeWrapper/AntUIOverWrite.js

@@ -1,7 +1,7 @@
 import { createGlobalStyle } from 'styled-components'
 import { lighten } from 'polished'
 
-import { theme } from 'utils'
+import { theme, cs } from 'utils'
 
 // move ant style to seperate file
 const AntUIOverWrite = createGlobalStyle`
@@ -78,6 +78,9 @@ const AntUIOverWrite = createGlobalStyle`
 
   // ----
   // popover
+  .ant-popover {
+    z-index: ${cs.zIndex.popover};
+  }
   .ant-popover-inner-content {
     padding: 0;
   }

utils/common_styles.js

@@ -81,6 +81,18 @@ const flexColumnGrow = opt => `
   flex-grow: 1;
 `
 
+const zIndex = {
+  popover: 2100,
+  modalOverlay: 2500,
+  previewOverlay: 2000,
+  preview: 2001,
+  doraemonOverlay: 2600,
+  doraemon: 2601,
+
+  //
+  sidebar: 1999,
+}
+
 const cs = {
   truncate,
   circle,
@@ -89,6 +101,7 @@ const cs = {
   flexGrow,
   flexColumn,
   flexColumnGrow,
+  zIndex,
 }
 
 export default cs