mirror of
https://github.com/plankanban/planka.git
synced 2025-07-25 16:19:47 +02:00
Small UI improvements, update dependencies
This commit is contained in:
Maksim Eltyshev
parent
d770470371
commit
1f38c6073c
17 changed files with 99 additions and 103 deletions
|
|
@ -78,6 +78,7 @@ const EditStep = React.memo(({
|
|||
</Popup.Header>
|
||||
<Popup.Content>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<div className={styles.text}>{t('common.title')}</div>
|
||||
<Input
|
||||
fluid
|
||||
ref={nameField}
|
||||
|
|
|
|||
|
|
@ -8,3 +8,10 @@
|
|||
.field {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #444444;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -105,13 +105,7 @@ const CardModal = React.memo(
|
|||
const labelIds = labels.map((label) => label.id);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open
|
||||
closeIcon
|
||||
size="small"
|
||||
centered={false}
|
||||
onClose={onClose}
|
||||
>
|
||||
<Modal open closeIcon size="small" centered={false} onClose={onClose}>
|
||||
<Grid className={styles.grid}>
|
||||
<Grid.Row className={styles.headerPadding}>
|
||||
<Grid.Column width={16} className={styles.headerPadding}>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Icon, Menu } from 'semantic-ui-react';
|
||||
|
||||
|
|
@ -20,46 +19,40 @@ const Header = React.memo(
|
|||
onNotificationDelete,
|
||||
onUsers,
|
||||
onLogout,
|
||||
}) => {
|
||||
const [t] = useTranslation();
|
||||
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
<Link to={Paths.ROOT} className={styles.logo}>
|
||||
Planka
|
||||
</Link>
|
||||
<Menu inverted size="large" className={styles.menu}>
|
||||
}) => (
|
||||
<div className={styles.wrapper}>
|
||||
<Link to={Paths.ROOT} className={styles.logo}>
|
||||
Planka
|
||||
</Link>
|
||||
<Menu inverted size="large" className={styles.menu}>
|
||||
<Menu.Menu position="right">
|
||||
{isEditable && (
|
||||
<Menu.Item className={styles.item} onClick={onUsers}>
|
||||
{t('common.users', {
|
||||
context: 'title',
|
||||
})}
|
||||
<Icon fitted name="users" />
|
||||
</Menu.Item>
|
||||
)}
|
||||
<Menu.Menu position="right">
|
||||
<NotificationsPopup items={notifications} onDelete={onNotificationDelete}>
|
||||
<Menu.Item className={styles.item}>
|
||||
<Icon name="bell" className={styles.icon} />
|
||||
{notifications.length > 0 && (
|
||||
<span className={styles.notification}>{notifications.length}</span>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</NotificationsPopup>
|
||||
<UserPopup
|
||||
name={user.name}
|
||||
avatar={user.avatar}
|
||||
isAvatarUploading={user.isAvatarUploading}
|
||||
onUpdate={onUserUpdate}
|
||||
onAvatarUpload={onUserAvatarUpload}
|
||||
onLogout={onLogout}
|
||||
>
|
||||
<Menu.Item className={styles.item}>{user.name}</Menu.Item>
|
||||
</UserPopup>
|
||||
</Menu.Menu>
|
||||
</Menu>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
<NotificationsPopup items={notifications} onDelete={onNotificationDelete}>
|
||||
<Menu.Item className={styles.item}>
|
||||
<Icon fitted name="bell" />
|
||||
{notifications.length > 0 && (
|
||||
<span className={styles.notification}>{notifications.length}</span>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</NotificationsPopup>
|
||||
<UserPopup
|
||||
name={user.name}
|
||||
avatar={user.avatar}
|
||||
isAvatarUploading={user.isAvatarUploading}
|
||||
onUpdate={onUserUpdate}
|
||||
onAvatarUpload={onUserAvatarUpload}
|
||||
onLogout={onLogout}
|
||||
>
|
||||
<Menu.Item className={styles.item}>{user.name}</Menu.Item>
|
||||
</UserPopup>
|
||||
</Menu.Menu>
|
||||
</Menu>
|
||||
</div>
|
||||
),
|
||||
);
|
||||
|
||||
Header.propTypes = {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
.icon {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.item:before {
|
||||
background: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@ const EditNameStep = React.memo(({
|
|||
</Popup.Header>
|
||||
<Popup.Content>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<div className={styles.text}>{t('common.name')}</div>
|
||||
<Input
|
||||
fluid
|
||||
ref={field}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,10 @@
|
|||
.field {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #444444;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -78,6 +78,7 @@ const EditStep = React.memo(({
|
|||
</Popup.Header>
|
||||
<Popup.Content>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<div className={styles.text}>{t('common.title')}</div>
|
||||
<Input
|
||||
fluid
|
||||
ref={nameField}
|
||||
|
|
|
|||
|
|
@ -8,3 +8,10 @@
|
|||
.field {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #444444;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,15 +33,19 @@ const Project = React.memo(
|
|||
<Grid className={styles.header}>
|
||||
<Grid.Row>
|
||||
<Grid.Column>
|
||||
<EditPopup
|
||||
defaultData={{
|
||||
name,
|
||||
}}
|
||||
onUpdate={onUpdate}
|
||||
onDelete={onDelete}
|
||||
>
|
||||
<Button content={name} disabled={!isEditable} className={styles.name} />
|
||||
</EditPopup>
|
||||
{isEditable ? (
|
||||
<EditPopup
|
||||
defaultData={{
|
||||
name,
|
||||
}}
|
||||
onUpdate={onUpdate}
|
||||
onDelete={onDelete}
|
||||
>
|
||||
<Button content={name} disabled={!isEditable} className={styles.name} />
|
||||
</EditPopup>
|
||||
) : (
|
||||
<span className={styles.name}>{name}</span>
|
||||
)}
|
||||
<span className={styles.users}>
|
||||
{memberships.map((membership) => (
|
||||
<span key={membership.id} className={styles.user}>
|
||||
|
|
|
|||
|
|
@ -22,9 +22,11 @@
|
|||
.name {
|
||||
background: transparent !important;
|
||||
color: #fff !important;
|
||||
display: inline-block !important;
|
||||
font-size: 32px !important;
|
||||
font-weight: bold !important;
|
||||
line-height: 36px !important;
|
||||
margin-right: 8px !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,14 +2,12 @@ import React, { useCallback } from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Button, Header, Modal, Table,
|
||||
Button, Modal, Table,
|
||||
} from 'semantic-ui-react';
|
||||
|
||||
import AddUserPopupContainer from '../../containers/AddUserPopupContainer';
|
||||
import Item from './Item';
|
||||
|
||||
import styles from './UsersModal.module.css';
|
||||
|
||||
const UsersModal = React.memo(({
|
||||
items, onUpdate, onDelete, onClose,
|
||||
}) => {
|
||||
|
|
@ -30,13 +28,13 @@ const UsersModal = React.memo(({
|
|||
);
|
||||
|
||||
return (
|
||||
<Modal open closeIcon size="large" onClose={onClose}>
|
||||
<Modal open closeIcon size="large" centered={false} onClose={onClose}>
|
||||
<Modal.Header>
|
||||
{t('common.users', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Modal.Header>
|
||||
<Modal.Content>
|
||||
<Header size="huge" className={styles.title}>
|
||||
{t('common.users', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Header>
|
||||
<Table basic="very">
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
|
|
@ -58,17 +56,13 @@ const UsersModal = React.memo(({
|
|||
/>
|
||||
))}
|
||||
</Table.Body>
|
||||
<Table.Footer>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell colSpan="4">
|
||||
<AddUserPopupContainer>
|
||||
<Button positive content={t('action.addUser')} className={styles.button} />
|
||||
</AddUserPopupContainer>
|
||||
</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Footer>
|
||||
</Table>
|
||||
</Modal.Content>
|
||||
<Modal.Actions>
|
||||
<AddUserPopupContainer>
|
||||
<Button positive content={t('action.addUser')} />
|
||||
</AddUserPopupContainer>
|
||||
</Modal.Actions>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
.button {
|
||||
float: right;
|
||||
height: 32px;
|
||||
line-height: 20px;
|
||||
margin-top: -2px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue