From 1a4af8903609224ad088f7f349a045f17716aaaf Mon Sep 17 00:00:00 2001 From: Pablo Rodriguez Date: Thu, 8 Aug 2019 10:14:18 -0600 Subject: [PATCH] Inline delete component and game item styling changes --- .../public/locales/en-US/translation.json | 3 + .../public/locales/en/translation.json | 3 + .../public/locales/es/translation.json | 3 + .../src/components/Utils/Labeled/index.js | 3 + .../Utils/Labeled/labeled.component.js | 27 +++++ .../templates/src/components/Utils/index.js | 4 +- .../children/GameItem/game-item.component.js | 100 +++++++++------- .../List/children/GameItem/game-item.style.js | 110 +++++++++++++----- 8 files changed, 179 insertions(+), 74 deletions(-) create mode 100644 generators/app/templates/src/components/Utils/Labeled/index.js create mode 100644 generators/app/templates/src/components/Utils/Labeled/labeled.component.js diff --git a/generators/app/templates/public/locales/en-US/translation.json b/generators/app/templates/public/locales/en-US/translation.json index 8ca41d79..a2b43628 100644 --- a/generators/app/templates/public/locales/en-US/translation.json +++ b/generators/app/templates/public/locales/en-US/translation.json @@ -141,6 +141,9 @@ "notYourTurn": "Not your turn, please wait for your opponent to play", "status": "Game Status:", "created": "Created", + "confirmDelete": "Confirm Delete", + "deleteLabel": "Delete", + "playLabel": "Play", "yourGames": "Your Games", "otherGames": "Other Games", "errorTitle": "Error", diff --git a/generators/app/templates/public/locales/en/translation.json b/generators/app/templates/public/locales/en/translation.json index 4e4bf6cd..f037865a 100644 --- a/generators/app/templates/public/locales/en/translation.json +++ b/generators/app/templates/public/locales/en/translation.json @@ -140,6 +140,9 @@ "notYourTurn": "Not your turn, please wait for your opponent to play", "status": "Game Status:", "created": "Created", + "confirmDelete": "Confirm Delete", + "deleteLabel": "Delete", + "playLabel": "Play", "yourGames": "Your Games", "otherGames": "Other Games", "errorTitle": "Error", diff --git a/generators/app/templates/public/locales/es/translation.json b/generators/app/templates/public/locales/es/translation.json index c26317c9..f36bc225 100644 --- a/generators/app/templates/public/locales/es/translation.json +++ b/generators/app/templates/public/locales/es/translation.json @@ -140,6 +140,9 @@ "notYourTurn": "No es tu turno, por favor espera a que tu rivla juegue", "status": "Estado del juego:", "created": "Creado:", + "confirmDelete": "Confirmar Eliminar", + "deleteLabel": "Eliminar", + "playLabel": "Jugar", "yourGames": "Tus juegos", "otherGames": "Otros juegos", "errorTitle": "Error", diff --git a/generators/app/templates/src/components/Utils/Labeled/index.js b/generators/app/templates/src/components/Utils/Labeled/index.js new file mode 100644 index 00000000..cf83aa9d --- /dev/null +++ b/generators/app/templates/src/components/Utils/Labeled/index.js @@ -0,0 +1,3 @@ +import Labeled from './labeled.component'; + +export default Labeled; diff --git a/generators/app/templates/src/components/Utils/Labeled/labeled.component.js b/generators/app/templates/src/components/Utils/Labeled/labeled.component.js new file mode 100644 index 00000000..1007b733 --- /dev/null +++ b/generators/app/templates/src/components/Utils/Labeled/labeled.component.js @@ -0,0 +1,27 @@ +import React, { useState } from 'react'; +import styled from 'styled-components'; + +const Labeled = ({ label, children, component: Component = 'button', ...rest }) => { + const [hover, setHover] = useState(false); + + const LComponent = styled(Component)` + position: relative; + & > span.label { + position: absolute; + font-size: 10px; + bottom: 2px; + left: 0; + width: 100%; + text-align: center; + } + `; + + return ( + setHover(true)} onMouseLeave={() => setHover(false)}> + {children} + {hover && label ? label : ''} + + ); +}; + +export default Labeled; diff --git a/generators/app/templates/src/components/Utils/index.js b/generators/app/templates/src/components/Utils/index.js index c95d565e..e26e9239 100644 --- a/generators/app/templates/src/components/Utils/index.js +++ b/generators/app/templates/src/components/Utils/index.js @@ -11,6 +11,7 @@ import LanguageDropdown from './LanguageDropdown'; import Toaster from './ToasterNotification/toaster.component'; import Select from './Select'; import ConfirmationDialog from './ConfirmationDialog'; +import Labeled from './Labeled'; export { GradientBackground, @@ -25,5 +26,6 @@ export { Input, LanguageDropdown, Toaster, - Select + Select, + Labeled }; diff --git a/generators/app/templates/src/containers/TicTacToe/GameListPage/children/List/children/GameItem/game-item.component.js b/generators/app/templates/src/containers/TicTacToe/GameListPage/children/List/children/GameItem/game-item.component.js index b84267d6..2ba86a3e 100644 --- a/generators/app/templates/src/containers/TicTacToe/GameListPage/children/List/children/GameItem/game-item.component.js +++ b/generators/app/templates/src/containers/TicTacToe/GameListPage/children/List/children/GameItem/game-item.component.js @@ -1,76 +1,94 @@ -import React, { Fragment, useState } from 'react'; +import React, { useState, useRef } from 'react'; import moment from 'moment'; import { Link } from 'react-router-dom'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { useTranslation } from 'react-i18next'; +import { useOnClickOutside } from '@hooks'; +import { Labeled } from '@util-components'; import { Item, ProfileName, - GameStatus, Actions, GameCard, ProfileImage, - ProfileItems, - DeleteAction + ProfileItems } from './game-item.style'; type Props = { game: Object, webId: String, deleteGame: Function }; const GameItem = ({ game, webId, deleteGame }: Props) => { - const { status, created, opponent, actor } = game; + const { status, created, opponent, actor, url } = game; + const { t } = useTranslation(); return ( - - {status} + - - {moment(created).fromNow()} + + + + ); }; -const ProfileDisplayItem = ({ player }: { player: String }) => ( - - {player && } - {player && {player.name}} - -); - -const GameActions = ({ game, deleteGame }: { game: Object, deleteGame: Function }) => { +const DeleteGame = ({ game, deleteGame }: { game: Object, deleteGame: Function }) => { + const ref = useRef(); const [deleteMode, setDeleteMode] = useState(false); - const { url } = game; const { t } = useTranslation(); + useOnClickOutside(ref, () => setDeleteMode(false)); + return ( -
- {!deleteMode ? ( - - - {!game.deleted && ( - - - - )} - +
+ {deleteMode ? ( + ) : ( - - {t('game.deleteConfirmation')} -
- - -
- + setDeleteMode(true)} + > + + )}
); }; +const ProfileDisplayItem = ({ + player, + status, + created +}: { + player: String, + status: String, + created: String +}) => ( + + {player && } +
+ {player && {player.name}} +
+ {status && {status}} + {created && {moment(created).fromNow()}} +
+
+ +); + export default GameItem; diff --git a/generators/app/templates/src/containers/TicTacToe/GameListPage/children/List/children/GameItem/game-item.style.js b/generators/app/templates/src/containers/TicTacToe/GameListPage/children/List/children/GameItem/game-item.style.js index 7c1eaeaa..fb542d7a 100644 --- a/generators/app/templates/src/containers/TicTacToe/GameListPage/children/List/children/GameItem/game-item.style.js +++ b/generators/app/templates/src/containers/TicTacToe/GameListPage/children/List/children/GameItem/game-item.style.js @@ -19,51 +19,89 @@ export const GameStatus = styled.span` flex: 1 1 0; `; -export const Info = styled.div` - display: flex; - flex-direction: column; - - & a { - text-decoration: none; - color: inherit; - font-weight: 700; - letter-spacing: 0.4px; - font-size: 1.2em; - } -`; - export const Actions = styled.div` display: flex; - flex-direction: column; - align-items: flex-end; + align-items: center; min-width: 120px; + font-size: 2rem; + justify-content: space-around; + align-items: center; - a { + & > a { color: inherit; + height: 50px; + width: 50px; + font-size: 1.4rem; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; + transition: all 300ms ease-in; + &:hover { + background: rgba(130, 131, 139, 0.1); + } } - svg { - display: inline-block; - margin: 10px; - } + & > div { + & > button { + &.deleteBtn{ + font-size: 1.4rem; + height: 50px; + width: 50px; + border: none; + padding: 0; + position: relative + color: rgba(237, 40, 40, 1); + transition: all 300ms ease-in; + &:hover { + background: rgba(237, 40, 40, 0.1); + } + } - & button { - border: none; - margin: 0; - padding: 0; + &.deleteMode{ + width: fit-content; + padding: .8em 1em; + font-size: 1rem; + color: #fff; + background: rgba(237, 40, 40, 1); + outline: none; + border: none; + transition: background 300ms ease-in; + border-radius: 2px; + display: flex; + align-items: center; + & > span { + padding-left: 0.8em; + font-size: 0.7rem; + } + &:hover{ + background: rgba(237, 40, 40, 0.9); + } + } + + &:hover{ + outline: none; + } + } } +} `; export const ProfileImage = styled.img` - width: 75px; + width: 50px; + height: 50px; + border-radius: 50%; display: inline-block; vertical-align: middle; + background-size: cover; + overflow: hidden; + visibility: visible; + margin: 0 12px; `; export const ProfileName = styled.a` display: inline-block; vertical-align: middle; - padding-left: 10px; text-decoration: none; color: inherit; font-weight: 700; @@ -74,14 +112,22 @@ export const ProfileName = styled.a` export const ProfileItems = styled.div` flex: 1 1 0; flex-wrap: nowrap; -`; - -export const DeleteAction = styled.div` display: flex; - flex-direction: column; + justify-content: flex-start; + align-items: center; + & > div { display: flex; - align-items: center; - justify-content: space-between; + flex-direction: column; + & > div { + display: flex; + align-items: center; + & > .createdDate { + padding-left: 1.5em; + color: #ccc; + font-weight: 100; + font-size: 0.9rem; + } + } } `;