1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-18 12:49:43 +02:00

feat: Add edit icon to project name (#457)

This commit is contained in:
[object Object] 2023-07-09 11:49:08 -04:00 committed by GitHub
parent a8ea31c9d5
commit 1bd0c2b2c1
2 changed files with 30 additions and 9 deletions

View file

@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Link } from 'react-router-dom';
import { Icon, Menu } from 'semantic-ui-react';
import { Button, Icon, Menu } from 'semantic-ui-react';
import { usePopup } from '../../lib/popup';
import Paths from '../../constants/Paths';
@ -55,15 +55,16 @@ const Header = React.memo(
>
<Icon fitted name="arrow left" />
</Menu.Item>
<Menu.Item
className={classNames(
styles.item,
canEditProject && styles.itemHoverable,
styles.title,
)}
onClick={handleProjectSettingsClick}
>
<Menu.Item className={classNames(styles.item, styles.title)}>
{project.name}
{canEditProject && (
<Button
className={classNames(styles.editButton, styles.target)}
onClick={handleProjectSettingsClick}
>
<Icon fitted name="pencil" size="small" />
</Button>
)}
</Menu.Item>
</Menu.Menu>
)}

View file

@ -1,4 +1,20 @@
:global(#app) {
.editButton {
background: transparent;
box-shadow: none;
color: #fff;
font-size: 15px;
line-height: 34px;
margin-left: 8px;
opacity: 0;
padding: 0;
width: 34px;
&:hover {
background: rgba(255, 255, 255, 0.08);
}
}
.item {
cursor: auto;
user-select: auto;
@ -11,6 +27,10 @@
&:hover {
background: transparent;
color: rgba(255, 255, 255, 0.9);
.target {
opacity: 1;
}
}
}