pavel/pinkmine
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Разработка нового дизайна для wishlist-а

Browse source
This commit is contained in:
Pavel Gnedov 2023-07-03 07:51:33 +07:00
parent 1f20dd2006
commit 60704357ec
9 changed files with 178 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/public/images/anchor BLUE.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.58 63.52"><defs><style>.a{fill:none;stroke:#135fab;stroke-linecap:round;stroke-miterlimit:10;stroke-width:4px;}</style></defs><circle class="a" cx="27.79" cy="8.94" r="6.94"/><line class="a" x1="27.79" y1="15.89" x2="27.79" y2="61.52"/><line class="a" x1="27.79" y1="25.81" x2="41.68" y2="25.81"/><line class="a" x1="13.9" y1="25.81" x2="27.79" y2="25.81"/><path class="a" d="M76.08,41.4q-1.15,8.64-6,11.91c-4.52,3.07-9.11.76-13.89,4-3.66,2.46-5.21,6.66-6,9.92" transform="translate(-22.5 -5.68)"/><path class="a" d="M24.5,41.4Q25.66,50,30.45,53.31c4.52,3.07,9.11.76,13.89,4,3.66,2.46,5.21,6.66,5.95,9.92" transform="translate(-22.5 -5.68)"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 704 B

38
frontend/src/issues-list-board/issues-list-board.module.css
View file

@ -2,5 +2,41 @@
display: flex;
flex-direction: column;
width: 100%;
background-color: rgb(225, 225, 225);
}
.boardName {
display: flex;
flex-direction: row;
padding-left: 10px;
padding-right: 10px;
}
.anchorIcon {
width: 24px;
padding-left: 30px;
}
.boardName a {
display: flex;
}
.board {
line-height: 30px;
background-color: rgb(255, 255, 255);
margin: 0;
padding: 0;
color: rgba(0, 0, 0, 0.8);
font-size: 24px;
font-family: 'Inter', sans-serif;
font-style: normal;
line-height: 40px;
font-weight: 600;
font-size: 24px;
line-height: 30px;
}
.boardHeader {
color: #202020;
font-family: 'Source Code Pro';
}

11
frontend/src/issues-list-board/issues-list-board.tsx
View file

@ -21,11 +21,16 @@ export const IssuesListBoard = observer((props: Props): JSX.Element => {
title = <>{props.store.metainfo.title}</>;
}
return (
<>
<h1 id={props.store.metainfo.title}>{title} <a href={`#${props.store.metainfo.title}`}>#</a></h1>
<div className={Css.board}>
<div className={Css.boardName}>
<h2 className={Css.boardHeader} id={props.store.metainfo.title}>{title}</h2>
<a href={`#${props.store.metainfo.title}`}>
<img src="/images/anchor BLUE.svg" alt="anchor" className={Css.anchorIcon} />
</a>
</div>
<div className={Css.listContainer}>
{list}
</div>
</>
</div>
);
});

51
frontend/src/issues-list-board/issues-list-card.module.css
View file

@ -5,7 +5,56 @@
flex-direction: column;
}
.issueSubject {}
.relevanceColor {
width: 30px;
}
.todoBlock {
display: flex;
flex-direction: row;
padding-left: 10px;
padding-right: 10px;
}
.todoBlock:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.importantInformation {
width: 100%;
}
.timeBox {
color: #393838;
font-weight: 400;
font-size: 11px;
}
.positionInfo {
list-style-image: relative;
bottom: 3px;
right: 3px;
text-align: right;
float: right;
}
.priorityBox {
background-color: #FFFFFF;
border-radius: 2px;
padding: 2px 2px 3px 2px;
font-size: 10px;
line-height: 12px;
/* border: 0.5px solid #393838; */
color: #ffffff;
}
.issueSubject {
color: #202020;
text-decoration: none;
font-weight: 400;
font-size: 15px;
line-height: 18px;
}
.issueStatus {}

41
frontend/src/issues-list-board/issues-list-card.tsx
View file

@ -7,6 +7,7 @@ import * as TagsNs from '../misc-components/tags';
import * as IssueHrefNs from '../misc-components/issue-href';
import * as IssueDetailsDialogNs from '../misc-components/issue-details-dialog';
import * as UnreadedFlagNs from '../misc-components/unreaded-flag';
import { SpentHoursToFixed } from '../utils/spent-hours-to-fixed';
export type Props = {
store: IIssueStore
@ -19,12 +20,35 @@ export const IssuesListCard = observer((props: Props): JSX.Element => {
visible: false,
unreadedFlagStore: unreadedStore
});
// return (
// <div className={Css.listItem} onClick={(e) => {e.stopPropagation(); detailsStore.show();}}>
// <IssueDetailsDialogNs.IssueDetailsDialog store={detailsStore}/>
// <div>
// <UnreadedFlagNs.UnreadedFlag store={unreadedStore}/>
// <TimePassedNs.TimePassed params={{ fromIssue: { issue: props.store, keyName: 'timePassedClass' } }}/>
// <span className={Css.issueSubject}>
// <IssueHrefNs.IssueHref
// url={props.store.url?.url || ''}
// subject={props.store.subject}
// tracker={props.store.tracker?.name || ''}
// id={props.store.id}
// />
// </span>
// <span className={Css.issueStatus}>| {props.store.status.name}</span>
// <span className={Css.issueTime}>| {props.store.total_spent_hours} / {props.store.total_estimated_hours}</span>
// </div>
// <div className={Css.tagsContainer}>
// <TagsNs.Tags params={{ tags: props.store.styledTags }}/>
// </div>
// </div>
// );
return (
<div className={Css.listItem} onClick={(e) => {e.stopPropagation(); detailsStore.show();}}>
<div className={Css.todoBlock} onClick={(e) => { e.stopPropagation(); detailsStore.show(); }}>
<IssueDetailsDialogNs.IssueDetailsDialog store={detailsStore} />
<div>
<UnreadedFlagNs.UnreadedFlag store={unreadedStore}/>
<div className={Css.relevanceColor}>
<TimePassedNs.TimePassed params={{ fromIssue: { issue: props.store, keyName: 'timePassedClass' } }} />
</div>
<div className={Css.importantInformation}>
<span className={Css.issueSubject}>
<IssueHrefNs.IssueHref
url={props.store.url?.url || ''}
@ -33,11 +57,14 @@ export const IssuesListCard = observer((props: Props): JSX.Element => {
id={props.store.id}
/>
</span>
<span className={Css.issueStatus}>| {props.store.status.name}</span>
<span className={Css.issueTime}>| {props.store.total_spent_hours} / {props.store.total_estimated_hours}</span>
</div>
<div className={Css.tagsContainer}>
<span> </span>
<span className={Css.timeBox}>{SpentHoursToFixed(props.store.total_spent_hours)} / {SpentHoursToFixed(props.store.total_estimated_hours)}</span>
{(props.store.styledTags && props.store.styledTags.hasOwnProperties()) ? <br/> : null}
<TagsNs.Tags params={{ tags: props.store.styledTags }} />
<div className={Css.positionInfo}>
<span className={Css.timeBox}>{props.store.status.name}</span>
<span className={Css.priorityBox}>{props.store.priority.name}</span>
</div>
</div>
</div>
);

4
frontend/src/misc-components/issue-details-dialog.module.css
View file

@ -1,3 +1,7 @@
.reset {
all: initial;
}
.modal {
z-index: 1000;
position: fixed;

2
frontend/src/misc-components/issue-details-dialog.tsx
View file

@ -52,6 +52,7 @@ export const IssueDetailsDialog = observer((props: Props): JSX.Element => {
props.store.hide();
};
return (
<div className={Css.reset}>
<div className={Css.modal} style={props.store.displayStyle} onClick={onCloseClick}>
<div className={Css.modalContent}>
<h1>
@ -78,6 +79,7 @@ export const IssueDetailsDialog = observer((props: Props): JSX.Element => {
</div>
</div>
</div>
</div>
);
});

9
frontend/src/misc-components/tags.tsx
View file

@ -14,13 +14,14 @@ export const Tags = (props: Props): JSX.Element => {
if (!props.params.tags) {
return (<></>);
}
const label = props.params.label || 'Tags';
let label = props.params.label || '';
if (label) label = `${label}: `;
const tags = props.params.tags.map((tag) => {
return <TagNs.Tag tag={tag.tag} style={tag.style} key={tag.tag}/>;
}) || [];
return (
<div>
{label}: {tags}
</div>
<>
{label}{tags}
</>
);
}

11
frontend/src/utils/spent-hours-to-fixed.ts Normal file
View file

@ -0,0 +1,11 @@
/**
* Форматирование чисел для вывода трудозатрат
* @param a
* @returns
*/
export const SpentHoursToFixed = (a: number|string|null|undefined): string => {
if (a === null || typeof a === 'undefined') return '-';
const res = (typeof a === 'number') ? a : Number(a);
if (!Number.isFinite(res)) return '-';
return `${parseFloat(res.toFixed(1))}`;
};