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

frontend/public/images/anchor BLUE.svg

@@ -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>

frontend/src/issues-list-board/issues-list-board.module.css

@@ -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';
 }

frontend/src/issues-list-board/issues-list-board.tsx

@@ -21,11 +21,16 @@ export const IssuesListBoard = observer((props: Props): JSX.Element => {
 		title = <>{props.store.metainfo.title}</>;
 	}
 	return (
-		<>
+		<div className={Css.board}>
-			<h1 id={props.store.metainfo.title}>{title} <a href={`#${props.store.metainfo.title}`}>#</a></h1>
+			<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>
 	);
 });

frontend/src/issues-list-board/issues-list-card.module.css

@@ -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 {}
 

frontend/src/issues-list-board/issues-list-card.tsx

@@ -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}/>
+			<IssueDetailsDialogNs.IssueDetailsDialog store={detailsStore} />
-			<div>
+			<div className={Css.relevanceColor}>
-				<UnreadedFlagNs.UnreadedFlag store={unreadedStore}/>
+				<TimePassedNs.TimePassed params={{ fromIssue: { issue: props.store, keyName: 'timePassedClass' } }} />
-				<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> </span>
-				<span className={Css.issueTime}>| {props.store.total_spent_hours} / {props.store.total_estimated_hours}</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 className={Css.tagsContainer}>
-				<TagsNs.Tags params={{ tags: props.store.styledTags }}/>
 			</div>
 		</div>
 	);

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

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

frontend/src/misc-components/issue-details-dialog.tsx

@@ -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>
 	);
 });
 

frontend/src/misc-components/tags.tsx

@@ -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}
+			{label}{tags}
-		</div>
+		</>
 	);
 }

frontend/src/utils/spent-hours-to-fixed.ts

@@ -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))}`;
+};