Merge pull request #60 from Cristian006/develop

v2.1.3
Cristian006 · Apr 17, 2020 · 4e3e67d · 4e3e67d
2 parents 697f76b + 0355943
commit 4e3e67d
Show file tree

Hide file tree

Showing 26 changed files with 661 additions and 241 deletions.
diff --git a/README.md b/README.md
@@ -69,13 +69,46 @@ const Example = () => {
         onMaximize={() => currentWindow.maximize()}
         // when the titlebar is double clicked
         onDoubleClick={() => currentWindow.maximize()}
-      />
+      >
+        {/* custom titlebar items */}
+      </TitleBar>
     </div>
   )
 }
 ```
 
-> Example of all of the overridable theme properties can be found in the example folder [here](./example/THEME.md)
+> Example of all of the overridable theme properties can be found in the example folder [here](./example/README.md)
+
+Use titlebar theme in children
+
+```jsx
+import { useContext } from 'react';
+import { TitlebarThemeContext } from 'frameless-titlebar';
+
+const CustomItem = () => {
+  // access all of the current theme properties in this
+  // child component
+  const theme = useContext(TitlebarThemeContext);
+  return (
+    <div style={{ height: theme.bar.height }}>
+      {/* ... */}
+    </div>
+  )
+}
+
+const App = () => {
+  return (
+    <div>
+      <TitleBar>
+        <CustomItem>
+      </TitleBar>
+    </div>
+  )
+}
+
+```
+
+> Example of a custom TitleBarButton can be seen [here](./example/src/components.js)
 
 ## Supported Menu Item Properties
 

diff --git a/example/README.md b/example/README.md
@@ -26,13 +26,20 @@ npm start
     "borderBottom": "",
     "inActiveOpacity": 0.6,
     "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif",
+    "icon": {
+      "color": "#0372ef",
+      "width": 18,
+      "height": 18
+    },
     "title": {
       "color": "inherit",
       "align": "center",
       "fontFamily": "inherit",
       "fontWeight": "normal"
     },
     "button": {
+      "maxWidth": 100,
+      "disabledOpacity": 0.3,
       "active": {
         "color": "#fff",
         "background": "#303030"

diff --git a/example/src/App.js b/example/src/App.js
@@ -25,6 +25,7 @@ import { withTheme } from '@material-ui/core/styles'
 import TitleBar from 'frameless-titlebar'
 import { useMenu } from './menu'
 import { useSnackbar } from 'notistack'
+import Notification from './components/notification';
 
 const homepage = 'https://github.com/Cristian006/frameless-titlebar'
 const selections = [
@@ -43,12 +44,31 @@ const selections = [
     label: 'Title Align',
     options: ['center', 'left', 'right']
   },
+  {
+    type: 'divider',
+  },
+  {
+    option: 'showTitle',
+    label: 'Show Title',
+    type: 'toggle'
+  },
+  {
+    option: 'showIcon',
+    label: 'Show Logo Icon',
+    type: 'toggle'
+  },
   {
     option: 'subLabels',
     label: 'Show Sub Menu Labels',
     type: 'toggle'
-  }
+  },
+  {
+    option: 'showCustom',
+    label: 'Show Custom Titlebar Button',
+    type: 'toggle'
+  },
 ]
+
 const useStyles = makeStyles((theme) => ({
   formControl: {
     marginTop: '12px',
@@ -68,6 +88,9 @@ const App = ({ theme, setPalette }) => {
     menuStyle: 'default',
     align: 'center',
     subLabels: true,
+    showIcon: true,
+    showTitle: true,
+    showCustom: true
   })
 
   const currentTheme = {
@@ -90,6 +113,10 @@ const App = ({ theme, setPalette }) => {
       palette: 'dark',
       background: theme.palette.primary.dark,
       borderBottom: '',
+      icon: {
+        width: 18,
+        height: 18
+      },
       button: {
         active: {
           color: theme.palette.type === 'dark' ? '#fff' : '#000',
@@ -102,19 +129,19 @@ const App = ({ theme, setPalette }) => {
     }
   }
 
+
   const classes = useStyles()
-  const handleChange = (type) => (event, checked) => {
-    let { value } = event.target
-    let newState = {}
-    if (type === 'menuStyle') {
-      newState['platform'] = 'win32'
-      if (value === 'stacked') {
-        newState['align'] = 'left'
-      }
-    } else if (type === 'subLabels') {
-      value = checked;
+  const handleChange = (option, type) => (event) => {
+    let value;
+    switch (type) {
+      case 'toggle':
+        value = !state[option];
+        break;
+      default:
+        value = event.target.value;
+        break;
     }
-    setState({ ...state, ...newState, [type]: value })
+    setState({ ...state, [option]: value })
   }
 
   const togglePalette = () => {
@@ -129,18 +156,39 @@ const App = ({ theme, setPalette }) => {
       <TitleBar
         menu={defaultMenu}
         theme={{ ...currentTheme }}
+        icon={state.showIcon && (
+          <div style={{
+            borderRadius: '50%',
+            background: theme.palette.secondary.light,
+            height: '100%',
+            color: theme.palette.primary.dark,
+            fontWeight: 'bolder',
+            display: 'flex',
+            justifyContent: 'center',
+            alignContent: 'center',
+            alignItems: 'center',
+            fontSize: 10
+          }}>
+            FT
+          </div>
+        )}
         platform={state.platform}
-        title='frameless-titlebar'
+        title={state.showTitle && 'example-app'}
         onClose={() => { enqueueSnackbar('close clicked', { variant: 'error' }) }}
         onMinimize={() => { enqueueSnackbar('minimized clicked', { variant: 'success' }) }}
         onMaximize={() => { enqueueSnackbar('maximized clicked', { variant: 'success' }) }}
-      />
+        onDoubleClick={() => { enqueueSnackbar('double clicked', { variant: 'success' }) }}
+      >
+        {state.showCustom && (
+          <Notification onNotificationClick={(idx) => enqueueSnackbar(`Notification Item ${idx} Clicked!`, { variant: 'info' })} />
+        )}
+      </TitleBar>
       <AppBar position='static'>
         <Toolbar className={classes.appBar} >
           <Typography variant='h6' className={classes.title}>
             Frameless Titlebar
             <Typography style={{ marginLeft: 12, fontWeight: 'bolder' }} component='span' variant='h6' color='secondary'>
-              v2.0.0 <span role='img'>🥳</span>
+              v2.1.3 <span role='img'>🥳</span>
             </Typography>
           </Typography>
           <Tooltip title='Toggle Dark/Light Mode' >
@@ -164,39 +212,47 @@ const App = ({ theme, setPalette }) => {
                 Just a few of the styling options for the titlebar.
               </Typography>
               {selections.map((item) => {
-                if (!item.type) {
-                  return (
-                    <FormControl key={`${item.option}-key`} className={classes.formControl}>
-                      <InputLabel color='secondary' id={`${item.option}-label`}>{item.label}</InputLabel>
-                      <Select
-                        labelId={`${item.option}-label`}
-                        id={item.option}
-                        value={state[item.option]}
-                        onChange={handleChange(item.option)}
-                        variant='outlined'
-                        color='secondary'
-                      >
-                        {
-                          item.options.map((opt) => <MenuItem key={opt} value={opt}>{opt}</MenuItem>)
-                        }
-                      </Select>
-                    </FormControl>
-                  )
+
+                switch (item.type) {
+                  case 'toggle': {
+                    return (
+                      <FormControl key={`${item.option}-key`} style={{ display: 'block' }}>
+                        <FormControlLabel
+                          style={{ padding: 0, margin: 0 }}
+                          control={<Switch
+                            checked={state[item.option]}
+                            onChange={handleChange(item.option, item.type)}
+                            color="secondary"
+                          />}
+                          label={item.label}
+                          labelPlacement="start"
+                        />
+                      </FormControl>
+                    )
+                  }
+                  case 'divider': {
+                    return <Divider style={{ margin: '24px 0px 12px 0px' }} />
+                  }
+                  default: {
+                    return (
+                      <FormControl key={`${item.option}-key`} className={classes.formControl}>
+                        <InputLabel color='secondary' id={`${item.option}-label`}>{item.label}</InputLabel>
+                        <Select
+                          labelId={`${item.option}-label`}
+                          id={item.option}
+                          value={state[item.option]}
+                          onChange={handleChange(item.option, item.type)}
+                          variant='outlined'
+                          color='secondary'
+                        >
+                          {
+                            item.options.map((opt) => <MenuItem key={opt} value={opt}>{opt}</MenuItem>)
+                          }
+                        </Select>
+                      </FormControl>
+                    )
+                  }
                 }
-                return (
-                  <FormControl style={{ margin: '5px 0px 0px 0px' }}>
-                    <FormControlLabel
-                      style={{ padding: 0, margin: 0 }}
-                      control={<Switch
-                        checked={state[item.option]}
-                        onChange={handleChange(item.option)}
-                        color="secondary"
-                      />}
-                      label={item.label}
-                      labelPlacement="start"
-                    />
-                  </FormControl>
-                )
               })}
             </CardContent>
           </Card>

diff --git a/example/src/components/notification.js b/example/src/components/notification.js
@@ -0,0 +1,62 @@
+import React, { useContext, useState } from 'react';
+import { Typography } from '@material-ui/core';
+import { NotificationImportant } from '@material-ui/icons';
+import { TitleBarThemeContext, TitleBarButton } from 'frameless-titlebar';
+
+const Item = ({ idx, onClick }) => {
+  return (
+    <div style={{ padding: 12 }} onClick={onClick}>
+      <Typography color="inherit">Notification {idx}</Typography>
+      <Typography variant="body1" color="inherit">This is a custom button and pop up making use of frameless-titlebar's theme context</Typography>
+    </div>
+  )
+}
+
+const MAX_HEIGHT = 300;
+const MAX_WIDTH = 300;
+const BUTTON_WIDTH = 48;
+
+const Notification = ({ onNotificationClick }) => {
+  const theme = useContext(TitleBarThemeContext);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <TitleBarButton
+      label={<NotificationImportant style={{ width: theme.bar.icon.width, height: theme.bar.icon.height }} />}
+      open={open}
+      theme={{ ...theme.bar.button }}
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!open) {
+          setOpen(true)
+        }
+      }}
+      onOverlayClick={() => setOpen(false)}
+      hideOverlay={theme.menu.style === 'stacked'}
+    >
+      <div
+        className="NotificationPopOut"
+        style={{
+          width: MAX_WIDTH,
+          maxHeight: MAX_HEIGHT,
+          position: 'absolute',
+          top: '100%',
+          left: Math.ceil(BUTTON_WIDTH / 2) - Math.ceil(MAX_WIDTH / 2),
+          zIndex: theme.menu.list.zIndex,
+          background: theme.menu.list.background,
+          boxShadow: theme.menu.list.boxShadow,
+          overflowX: 'hidden',
+          overflowY: 'auto',
+          color: theme.menu.item.default.color
+        }}
+      >
+        <Item key="one" idx={1} onClick={() => onNotificationClick(1)} />
+        <Item key="two" idx={2} onClick={() => onNotificationClick(2)} />
+        <Item key="three" idx={3} onClick={() => onNotificationClick(3)} />
+      </div>
+    </TitleBarButton>
+  )
+}
+
+export default Notification;
diff --git a/example/src/index.css b/example/src/index.css
@@ -78,3 +78,27 @@ code {
   border-radius: 4px;
   padding: 0px 8px;
 }
+
+
+
+.NotificationPopOut::-webkit-scrollbar {
+  background: rgba(0,0,0,0.1);
+}
+
+.NotificationPopOut::-webkit-scrollbar-thumb {
+  background: rgba(0,0,0,0.4);
+}
+
+.NotificationPopOut > .Header {
+  position: fixed;
+  height: 32px;
+  display: flex;
+  top: 0;
+  left: 0;
+  right: 0;
+  flex-direction: row;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+  background: black;
+}
diff --git a/example/src/menu.js b/example/src/menu.js
@@ -119,7 +119,7 @@ const createMenu = (queueSnack) => {
       ]
     },
     {
-      label: 'View',
+      label: 'View Long Label Truncation',
       submenu: [
         {
           label: 'Toggle Full Screen',