Allowed tags color to be changed

This commit is contained in:
Alejandro Celaya 2018-08-19 20:08:02 +02:00
parent 71ead150a2
commit 5d2de11615
5 changed files with 46 additions and 38 deletions

View file

@ -49,7 +49,7 @@ export default function AsideMenu({ selectedServer, className, showOnMobile }) {
<NavLink <NavLink
className="aside-menu__item" className="aside-menu__item"
activeClassName="aside-menu__item--selected" activeClassName="aside-menu__item--selected"
to={`/server/${serverId}/tags`} to={`/server/${serverId}/manage-tags`}
> >
<FontAwesomeIcon icon={tagsIcon} /> <FontAwesomeIcon icon={tagsIcon} />
<span className="aside-menu__item-text">Manage tags</span> <span className="aside-menu__item-text">Manage tags</span>

View file

@ -81,7 +81,7 @@ export class MenuLayout extends React.Component {
/> />
<Route <Route
exact exact
path="/server/:serverId/tags" path="/server/:serverId/manage-tags"
component={TagsList} component={TagsList}
/> />
</Switch> </Switch>

View file

@ -5,6 +5,8 @@ import { pick } from 'ramda';
import { editTag, tagEdited } from '../reducers/tagEdit'; import { editTag, tagEdited } from '../reducers/tagEdit';
import { ChromePicker } from 'react-color'; import { ChromePicker } from 'react-color';
import ColorGenerator from '../../utils/ColorGenerator'; import ColorGenerator from '../../utils/ColorGenerator';
import colorIcon from '@fortawesome/fontawesome-free-solid/faPalette'
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import './EditTagModal.scss'; import './EditTagModal.scss';
const defaultProps = { const defaultProps = {
@ -13,14 +15,12 @@ const defaultProps = {
export class EditTagModal extends React.Component { export class EditTagModal extends React.Component {
state = { showColorPicker: false };
saveTag = e => { saveTag = e => {
e.preventDefault(); e.preventDefault();
const { tag: oldName, editTag, toggle } = this.props; const { tag: oldName, editTag, toggle } = this.props;
const { tag: newName } = this.state; const { tag: newName, color } = this.state;
editTag(oldName, newName) editTag(oldName, newName, color)
.then(() => { .then(() => {
this.tagWasEdited = true; this.tagWasEdited = true;
toggle(); toggle();
@ -33,8 +33,8 @@ export class EditTagModal extends React.Component {
} }
const { tag: oldName, tagEdited } = this.props; const { tag: oldName, tagEdited } = this.props;
const { tag: newName } = this.state; const { tag: newName, color } = this.state;
tagEdited(oldName, newName); tagEdited(oldName, newName, color);
}; };
constructor(props) { constructor(props) {
@ -42,6 +42,7 @@ export class EditTagModal extends React.Component {
const { colorGenerator, tag } = props; const { colorGenerator, tag } = props;
this.state = { this.state = {
showColorPicker: false,
tag, tag,
color: colorGenerator.getColorForKey(tag) color: colorGenerator.getColorForKey(tag)
} }
@ -62,15 +63,6 @@ export class EditTagModal extends React.Component {
<form onSubmit={this.saveTag}> <form onSubmit={this.saveTag}>
<ModalHeader toggle={toggle}>Edit tag</ModalHeader> <ModalHeader toggle={toggle}>Edit tag</ModalHeader>
<ModalBody> <ModalBody>
<Popover
isOpen={this.state.showColorPicker}
toggle={toggleColorPicker}
target="colorPickerBtn"
placement="right"
>
<ChromePicker color={color} />
</Popover>
<div className="input-group"> <div className="input-group">
<div <div
className="input-group-prepend" className="input-group-prepend"
@ -79,11 +71,26 @@ export class EditTagModal extends React.Component {
> >
<div <div
className="input-group-text edit-tag-modal__color-picker-toggle" className="input-group-text edit-tag-modal__color-picker-toggle"
style={{backgroundColor: color}} style={{
backgroundColor: color,
borderColor: color,
}}
> >
&nbsp;&nbsp; <FontAwesomeIcon icon={colorIcon} className="edit-tag-modal__color-icon" />
</div> </div>
</div> </div>
<Popover
isOpen={this.state.showColorPicker}
toggle={toggleColorPicker}
target="colorPickerBtn"
placement="right"
>
<ChromePicker
color={color}
onChange={color => this.setState({ color: color.hex })}
disableAlpha
/>
</Popover>
<input <input
type="text" type="text"
value={tag} value={tag}

View file

@ -1,3 +1,7 @@
.edit-tag-modal__color-picker-toggle { .edit-tag-modal__color-picker-toggle {
cursor: pointer; cursor: pointer;
} }
.edit-tag-modal__color-icon {
color: #fff;
}

View file

@ -1,6 +1,6 @@
import ShlinkApiClient from '../../api/ShlinkApiClient'; import ShlinkApiClient from '../../api/ShlinkApiClient';
import ColorGenerator from '../../utils/ColorGenerator'; import ColorGenerator from '../../utils/ColorGenerator';
import { curry } from 'ramda'; import { curry, pick } from 'ramda';
const EDIT_TAG_START = 'shlink/editTag/EDIT_TAG_START'; const EDIT_TAG_START = 'shlink/editTag/EDIT_TAG_START';
const EDIT_TAG_ERROR = 'shlink/editTag/EDIT_TAG_ERROR'; const EDIT_TAG_ERROR = 'shlink/editTag/EDIT_TAG_ERROR';
@ -30,8 +30,7 @@ export default function reducer(state = defaultState, action) {
}; };
case EDIT_TAG: case EDIT_TAG:
return { return {
oldName: action.oldName, ...pick(['oldName', 'newName'], action),
newName: action.newName,
editing: false, editing: false,
error: false, error: false,
}; };
@ -40,16 +39,13 @@ export default function reducer(state = defaultState, action) {
} }
} }
export const _editTag = (ShlinkApiClient, ColorGenerator, oldName, newName) => async dispatch => { export const _editTag = (ShlinkApiClient, ColorGenerator, oldName, newName, color) =>
async dispatch => {
dispatch({ type: EDIT_TAG_START }); dispatch({ type: EDIT_TAG_START });
try { try {
await ShlinkApiClient.editTag(oldName, newName); await ShlinkApiClient.editTag(oldName, newName);
// Make new tag name use the same color as the old one
const color = ColorGenerator.getColorForKey(oldName);
ColorGenerator.setColorForKey(newName, color); ColorGenerator.setColorForKey(newName, color);
dispatch({ type: EDIT_TAG, oldName, newName }); dispatch({ type: EDIT_TAG, oldName, newName });
} catch (e) { } catch (e) {
dispatch({ type: EDIT_TAG_ERROR }); dispatch({ type: EDIT_TAG_ERROR });
@ -58,8 +54,9 @@ export const _editTag = (ShlinkApiClient, ColorGenerator, oldName, newName) => a
}; };
export const editTag = curry(_editTag)(ShlinkApiClient, ColorGenerator); export const editTag = curry(_editTag)(ShlinkApiClient, ColorGenerator);
export const tagEdited = (oldName, newName) => ({ export const tagEdited = (oldName, newName, color) => ({
type: TAG_EDITED, type: TAG_EDITED,
oldName, oldName,
newName, newName,
color,
}); });