added Edit icon and messages. Next Step Edit Functions. WIP

priscilawebdev · Jan 13, 2018 · 838de39 · 838de39
1 parent 3865ab0
commit 838de39
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 24 deletions.
diff --git a/src/components/Icon/img/edit.svg b/src/components/Icon/img/edit.svg
diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js
@@ -9,7 +9,8 @@ const iconNames = [
 	'heart-empty',
 	'add',
 	'loading',
-	'image'
+	'image',
+	'edit'
 ]
 
 export const icons = iconNames.reduce((acc, curr) => ({

diff --git a/src/containers/Preferences/Content.js b/src/containers/Preferences/Content.js
@@ -13,7 +13,7 @@ import Img from 'components/Img'
 import EmptyState from 'components/EmptyState'
 import { grey400 } from 'material-ui/styles/colors'
 import messages from './messages'
-import { LItem, PrimaryText } from './ContentStyles'
+import { LItem, PrimaryText, BGItem } from './ContentStyles'
 
 const iconButtonElement = (
 	<IconButton
@@ -25,14 +25,6 @@ const iconButtonElement = (
 	</IconButton>
 )
 
-const rightIconMenu = func => (
-	<IconMenu iconButtonElement={iconButtonElement}>
-		<MenuItem onClick={func}>
-			<FormattedMessage {...messages['randomQuotes.containers.preferences.delete']} />
-		</MenuItem>
-	</IconMenu>
-)
-
 const getExtractQuoteContent = (onRemove, content) => (
 	content.length > 0 ? (
 		<GridList cols={1} cellHeight='auto'>
@@ -51,7 +43,16 @@ const getExtractQuoteContent = (onRemove, content) => (
 										/>
 									</PrimaryText>
 								}
-								rightIconButton={rightIconMenu(() => onRemove(quote.id))}
+								rightIconButton={
+									<IconMenu iconButtonElement={iconButtonElement}>
+										<MenuItem onClick={() => onRemove(quote.id)}>
+											<FormattedMessage {...messages['randomQuotes.containers.preferences.edit']} />
+										</MenuItem>
+										<MenuItem onClick={() => onRemove(quote.id)}>
+											<FormattedMessage {...messages['randomQuotes.containers.preferences.delete']} />
+										</MenuItem>
+									</IconMenu>
+								}
 							/>
 							<Divider />
 						</div>
@@ -72,7 +73,7 @@ const getExtractBackgroundContent = (onRemove, content) => (
 	content.length > 0 ? (
 		<GridList cols={2} cellHeight={130}>
 			{content.map(background => (
-				<GridTile
+				<BGItem
 					key={background.id}
 					title={background.name}
 					subtitle={
@@ -82,19 +83,30 @@ const getExtractBackgroundContent = (onRemove, content) => (
 						/>
 					}
 					actionIcon={
-						<IconButton onClick={() => onRemove(background.id)} className='btn'>
-							<span className='btn'>
-								<Icon
-									name='garbage'
-									cursor='pointer'
-									sm
-								/>
-							</span>
-						</IconButton>
+						<div>
+							<IconButton onClick={() => onRemove(background.id)} className='btn'>
+								<span className='btn'>
+									<Icon
+										name='edit'
+										cursor='pointer'
+										sm
+									/>
+								</span>
+							</IconButton>
+							<IconButton onClick={() => onRemove(background.id)} className='btn'>
+								<span className='btn'>
+									<Icon
+										name='garbage'
+										cursor='pointer'
+										sm
+									/>
+								</span>
+							</IconButton>
+						</div>
 					}
 				>
 					<Img url={background.url} />
-				</GridTile>
+				</BGItem>
 			))}
 		</GridList>
 	) : (

diff --git a/src/containers/Preferences/ContentStyles.js b/src/containers/Preferences/ContentStyles.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import glamorous from 'glamorous'
 import { ListItem } from 'material-ui/List'
+import { GridTile } from 'material-ui/GridList'
 import { white, grey400 } from 'material-ui/styles/colors'
 
 const LItem = glamorous(props => (
@@ -20,8 +21,16 @@ const PrimaryText = glamorous.div({
 	}
 })
 
+const BGItem = glamorous(props => (
+	<GridTile
+		titleStyle={{ width: 100 }}
+		subtitleStyle={{ width: 100 }}
+		{...props}
+	/>
+))()
 
 export {
 	LItem,
-	PrimaryText
+	PrimaryText,
+	BGItem
 }
diff --git a/src/containers/Preferences/Header.js b/src/containers/Preferences/Header.js
@@ -23,7 +23,7 @@ const Header = ({
 }) => (
 	category === 'general' ? (
 		<Account cols={6} cellHeight='auto'>
-			<GridItem cols={5} align='middle' justify='left'>
+			<GridItem cols={3} align='middle' justify='left'>
 				<User>
 					<Avatar src={user.photoURL} />
 					<Info>
@@ -32,6 +32,11 @@ const Header = ({
 					</Info>
 				</User>
 			</GridItem>
+			<GridItem cols={2} align='middle' justify='center'>
+				<Action onClick={onLogout} className='btn'>
+					{intl.formatMessage(messages['randomQuotes.containers.preferences.editAccount'])}
+				</Action>
+			</GridItem>
 			<GridItem cols={1} align='middle' justify='center'>
 				<Action onClick={onLogout} className='btn'>
 					{intl.formatMessage(messages['randomQuotes.containers.preferences.logout'])}

diff --git a/src/containers/Preferences/messages.js b/src/containers/Preferences/messages.js
@@ -17,6 +17,14 @@ export default defineMessages({
 		id: 'randomQuotes.containers.preferences.delete',
 		defaultMessage: 'Delete'
 	},
+	'randomQuotes.containers.preferences.edit': {
+		id: 'randomQuotes.containers.preferences.edit',
+		defaultMessage: 'Edit'
+	},
+	'randomQuotes.containers.preferences.editAccount': {
+		id: 'randomQuotes.containers.preferences.editAccount',
+		defaultMessage: 'Edit account'
+	},
 	'randomQuotes.containers.preferences.logout': {
 		id: 'randomQuotes.containers.preferences.logout',
 		defaultMessage: 'Logout'