Merge pull request #2 from desko27/feature/add-menu

Feature/add menu

README.md

@@ -0,0 +1,45 @@
+# Media Portal
+
+Media Portal es una aplicación para ordenador gratuita y de código abierto, que funciona tanto en sistemas Windows como en Mac. [Puedes descargarlo aquí](https://github.com/desko27/mediaportal/releases).
+
+Si necesitas exponer diferentes imágenes o vídeos durante una videoconferencia y utilizas la función de compartir pantalla, Media Portal te ayuda a preparar una lista de archivos desde la cual mandarás contenido en un solo click.
+
+## Manual de uso
+
+Al ejecutar Media Portal se abren dos ventanas: una es la ventana de gestión de la lista de archivos, la otra es el portal donde veremos el contenido.
+
+![Boot Media Portal](https://user-images.githubusercontent.com/4168389/80213526-95a38180-8639-11ea-8dc2-2598467f5fe8.png)
+
+A continuación, solo tenemos que seleccionar y arrastrar nuestra lista de archivos de imagen o vídeo hacia la ventana de gestión.
+
+![Dragging Media Files](https://user-images.githubusercontent.com/4168389/80216235-0a78ba80-863e-11ea-82cc-273ff7473a0c.png)
+
+Entonces, hacemos click en cualquiera de ellos e inmediatamente veremos el contenido en el portal.
+
+Se trate de una imagen...
+
+![Sending Content Image](https://user-images.githubusercontent.com/4168389/80216240-0b115100-863e-11ea-818d-d5c536058919.png)
+
+... o de vídeo
+
+![Sending Content Video](https://user-images.githubusercontent.com/4168389/80216242-0ba9e780-863e-11ea-99f5-9e8f3d0f1985.png)
+
+
+Es así de sencillo, ¡ya puedes empezar a usar Media Portal!
+
+## Preguntas frecuentes
+
+### ¿Puedo usarlo con varias pantallas?
+Si tienes dos o más pantallas, puedes mover el portal a cualquiera de ellas, e incluso ampliarlo a pantalla completa haciendo doble click sobre él. Esto te puede venir bien si deseas compartir directamente una de tus pantallas secundarias en tu aplicación de videoconferencias.
+
+### ¿Qué son los checks verdes de la izquierda?
+Para llevar control de lo que ya has compartido durante la reunión, Media Portal marcará automáticamente cada archivo al seleccionarlo; de este modo siempre sabrás cuál es el siguiente. También puedes añadir o retirar estas marcas manualmente haciendo click sobre ellas.
+
+### ¿Hay atajos de teclado?
+Efectivamente, para los más exigentes, Media Portal ofrece la posibilidad de controlar el envío de contenido mediante atajos de teclado, algo muy conveniente considerando que lo normal es que estemos más pendientes de la aplicación de videoconferencias y que quizá no haya tanto tiempo para ir cambiando entre ventanas.
+
+| Atajo de teclado | Acción |
+| --- | --- |
+| <kbd>SHIFT</kbd> + <kbd>ALT</kbd> + <kbd>A</kbd> | Envía el contenido siguiente |
+| <kbd>SHIFT</kbd> + <kbd>ALT</kbd> + <kbd>0</kbd> | Deja de enviar el contenido actual |
+| <kbd>SHIFT</kbd> + <kbd>ALT</kbd> + <kbd>[1-9]</kbd> | Envía el contenido de la posición deseada |

package.json

@@ -2,7 +2,7 @@
   "name": "mediaportal",
   "description": "Portal for media",
   "author": "desko27",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "private": true,
   "scripts": {
     "react-start": "react-scripts start",

src/components/FileList/index.module.css

@@ -1,5 +1,6 @@
 .wrapper {
   background-color: var(--c-white);
+  overflow-y: auto;
 }
 
 .wrapper.draggingPlaceholder {

src/components/Header/index.js

@@ -2,35 +2,43 @@ import React from 'react'
 import cx from 'classnames'
 
 import { ReactComponent as XCircleIcon } from './icons/x-circle.svg'
+import { ReactComponent as MenuIcon } from './icons/menu.svg'
 
 import styles from './index.module.css'
 
+const FLEX_SPACER = <div style={{ flexGrow: 1 }} />
+
 const Header = ({
   checkedFiles,
   className,
   filesNumber,
+  onMenuClick,
   onRemoveChecksClick,
   onRemoveChecksHover
 }) => {
-  const progressRatioStr = `${checkedFiles.length}/${filesNumber}`
   const progressRatio = filesNumber && (checkedFiles.length / filesNumber)
 
   return (
     <div className={cx(styles.wrapper, className)}>
-      <div>
-        <button
-          className={styles.removeChecksButton}
-          onClick={onRemoveChecksClick}
-          onMouseEnter={() => onRemoveChecksHover(true)}
-          onMouseLeave={() => onRemoveChecksHover(false)}
-        >
-          <XCircleIcon />
-        </button>
-      </div>
-      <span>
+      <button
+        className={cx(styles.headerIconButton, styles.removeChecksButton)}
+        onClick={onRemoveChecksClick}
+        onMouseEnter={() => onRemoveChecksHover(true)}
+        onMouseLeave={() => onRemoveChecksHover(false)}
+      >
+        <XCircleIcon />
+      </button>
+      <span className={styles.filesInfo}>
         {!!filesNumber && `${Math.round(progressRatio * 100)}% | `}
-        {filesNumber ? progressRatioStr : '--'} files
+        {filesNumber || '--'} files
       </span>
+      {FLEX_SPACER}
+      <button
+        className={styles.headerIconButton}
+        onClick={onMenuClick}
+      >
+        <MenuIcon />
+      </button>
     </div>
   )
 }

src/components/Header/index.module.css

@@ -10,7 +10,7 @@
   font-weight: 700;
 }
 
-.removeChecksButton {
+.headerIconButton {
   color: var(--c-gray-semi-dark);
   padding: 7px;
   border: none;
@@ -20,6 +20,14 @@
   justify-content: center;
   align-items: center;
 }
+.headerIconButton:hover {
+  color: var(--c-white);
+}
+
 .removeChecksButton:hover {
   color: var(--c-error);
 }
+
+.filesInfo {
+  margin-left: 7px;
+}

src/components/Menu/MenuItem/index.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import cx from 'classnames'
+
+import styles from './index.module.css'
+
+const MenuItem = ({ children, isDisabled, onClick = () => {} }) => {
+  return (
+    <button
+      className={cx(styles.wrapper, isDisabled && styles.isDisabled)}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  )
+}
+
+export default MenuItem

src/components/Menu/MenuItem/index.module.css

@@ -0,0 +1,22 @@
+.wrapper {
+  background-color: transparent;
+  border: none;
+  font-size: 16px;
+  color: var(--c-gray-dark);
+
+  text-decoration: none;
+  font-family: monospace;
+  font-weight: 700;
+}
+.wrapper:hover {
+  text-decoration: underline;
+}
+.wrapper + .wrapper {
+  margin-top: 15px;
+}
+
+.wrapper.isDisabled {
+  text-decoration: none;
+  cursor: auto;
+  color: #677985;
+}

src/components/Menu/index.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import cx from 'classnames'
+
+import { version } from '../../../package.json'
+import MenuItem from './MenuItem'
+import styles from './index.module.css'
+
+const electron = window.require('electron')
+const openUrl = url => electron.shell.openExternal(url)
+
+const FLEX_SPACER = <div style={{ flexGrow: 1, minHeight: 15 }} />
+const LINKS = {
+  USER_MANUAL: 'https://github.com/desko27/mediaportal/blob/master/README.md',
+  SOURCE_CODE: 'https://github.com/desko27/mediaportal',
+  REPORT_ISSUE: 'https://github.com/desko27/mediaportal/issues/new',
+  SEND_COMMENTS: 'mailto:[email protected]'
+}
+
+const Menu = ({ isOpen, setIsOpen }) => {
+  return (
+    <div className={cx(styles.wrapper, isOpen && styles.isOpen)}>
+      <div className={styles.overlay} onClick={() => setIsOpen(false)} />
+      <div className={styles.menu}>
+        {/* <MenuItem>Download update</MenuItem> */}
+        <MenuItem onClick={() => openUrl(LINKS.USER_MANUAL)}>See user manual </MenuItem>
+        <MenuItem onClick={() => openUrl(LINKS.SOURCE_CODE)}>Source code</MenuItem>
+        <MenuItem onClick={() => openUrl(LINKS.REPORT_ISSUE)}>Report an issue</MenuItem>
+        <MenuItem onClick={() => openUrl(LINKS.SEND_COMMENTS)}>Send comments</MenuItem>
+        {FLEX_SPACER}
+        <MenuItem isDisabled>v{version}</MenuItem>
+      </div>
+    </div>
+  )
+}
+
+export default Menu

src/components/Menu/index.module.css

@@ -0,0 +1,45 @@
+.wrapper {
+  --bxsh-width: 5px;
+  --h-menu-spacing: 36px;
+  --transition-tail: 200ms ease-out;
+
+  z-index: 1;
+}
+
+.menu {
+  overflow-y: auto;
+  position: fixed;
+  top: var(--h-menu-spacing);
+  bottom: 0;
+  right: 0;
+  width: 200px;
+  background-color: var(--c-gray);
+  box-shadow: calc(-1 * var(--bxsh-width)) 0px 0px 0px rgba(var(--c-black-rgb), 0.15);
+  transform: translateX(calc(100% + var(--bxsh-width)));
+  transition: transform var(--transition-tail);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 18px 10px;
+}
+.isOpen .menu {
+  transform: translateX(0);
+}
+
+.overlay {
+  pointer-events: none;
+  position: fixed;
+  top: var(--h-menu-spacing);
+  bottom: 0;
+  right: 0;
+  left: 0;
+
+  background-color: rgba(var(--c-black-rgb), 0.5);
+  opacity: 0;
+  transition: opacity var(--transition-tail);
+}
+.isOpen .overlay {
+  pointer-events: all;
+  opacity: 1;
+}

src/routes/MainRoute/index.js

@@ -2,6 +2,7 @@
 import React, { useCallback, useEffect, useLayoutEffect, useState } from 'react'
 
 import Header from '../../components/Header'
+import Menu from '../../components/Menu'
 import FileList from '../../components/FileList'
 import MediaControls from '../../components/MediaControls'
 
@@ -15,6 +16,7 @@ const MainRoute = () => {
   const [currentFile, setCurrentFile] = useState()
   const [portalState, setPortalState] = useState({})
   const [willRemoveChecks, setWillRemoveChecks] = useState()
+  const [isMenuOpen, setIsMenuOpen] = useState()
 
   useLayoutEffect(() => {
     // show window when mounted
@@ -130,6 +132,11 @@ const MainRoute = () => {
         filesNumber={fileList.length}
         onRemoveChecksClick={handleRemoveChecksClick}
         onRemoveChecksHover={handleRemoveChecksHover}
+        onMenuClick={() => setIsMenuOpen(prev => !prev)}
+      />
+      <Menu
+        isOpen={isMenuOpen}
+        setIsOpen={setIsMenuOpen}
       />
       <FileList
         checkedFiles={checkedFiles}

src/routes/MainRoute/index.module.css

@@ -13,7 +13,6 @@
 
 .fileList {
   flex-grow: 1;
-  overflow-y: auto;
 }
 
 .mediaControls {

src/vars.css

@@ -5,9 +5,12 @@
   --c-secondary: #355691;
   --c-white: #ececec;
   --c-black: #222831;
+  --c-black-rgb: 34, 40, 49;
   --c-gray: #a1adb5;
   --c-gray-semi-dark: #9ea3b0;
+  --c-gray-dark: #465160;
   --c-success: #5da271;
+  --c-success-semi-dark: #4C875D;
   --c-error: #c16969;
   --c-accent: #ffd166;
 }