Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[view] 툴팁 교체 및 폴더 구조 그래프 명시성 확보 #720

Merged
merged 4 commits into from
Sep 10, 2024
Merged

[view] 툴팁 교체 및 폴더 구조 그래프 명시성 확보 #720

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e199839
refator tooltips
pcwadarong Sep 10, 2024
29492b1
Merge branch 'githru:main' into main
pcwadarong Sep 10, 2024
8453bce
refator tooltip and update font weight
pcwadarong Sep 10, 2024
ab098b0
Merge branch 'main' of github.com:pcwadarong/githru-vscode-ext
pcwadarong Sep 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion packages/view/src/components/@common/Author/Author.tsx
View file
Open in desktop
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

자동 저장 수정에 의해 변경되었습니다

Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { Tooltip, Avatar } from "@mui/material";
import { GITHUB_URL } from "../../../constants/constants";

import type { AuthorInfo } from "types";

import { GITHUB_URL } from "../../../constants/constants";

const Author = ({ name, src }: AuthorInfo) => {
return (
<Tooltip
Expand Down
21 changes: 1 addition & 20 deletions packages/view/src/components/Detail/Detail.scss
View file
Open in desktop
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mui로 교체하였기에 삭제한 부분입니다.

Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@
}
}

.author-date {
.commit-date {
display: block;
position: relative;
white-space: nowrap;
Expand All @@ -121,15 +121,8 @@
}
&:hover {
color: var(--color-primary);
.commit-id__tooltip {
display: inline-block;
}
}
}

a:hover {
cursor: pointer;
}
}
}
}
Expand All @@ -147,15 +140,3 @@
}
}

.commit-id__tooltip {
display: none;
position: absolute;
background: $color-white;
padding: 8px 16px;
text-align: center;
font-size: $font-size-caption;
line-height: 1.5;
border-radius: 5px;
color: $color-dark-gray;
transform: translateY(20%) translateX(-120%);
}
13 changes: 9 additions & 4 deletions packages/view/src/components/Detail/Detail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,17 @@ import RemoveCircleRoundedIcon from "@mui/icons-material/RemoveCircleRounded";
import PersonRoundedIcon from "@mui/icons-material/PersonRounded";
import CommitRoundedIcon from "@mui/icons-material/CommitRounded";
import RestorePageRoundedIcon from "@mui/icons-material/RestorePageRounded";
import { Tooltip } from "@mui/material";

import { Author } from "components/@common/Author";
import { useGlobalData } from "hooks";

import { useCommitListHide } from "./Detail.hook";
import { getCommitListDetail } from "./Detail.util";
import { FIRST_SHOW_NUM } from "./Detail.const";
import type { DetailProps, DetailSummaryProps, DetailSummaryItem } from "./Detail.type";

import "./Detail.scss";
import { useGlobalData } from "hooks";

const DetailSummary = ({ commitNodeListInCluster }: DetailSummaryProps) => {
const { authorLength, fileLength, commitLength, insertions, deletions } = getCommitListDetail({
Expand Down Expand Up @@ -80,7 +81,7 @@ const Detail = ({ selectedData, clusterId, authSrcMap }: DetailProps) => {
<span className="message">{message}</span>
</div>
</div>
<span className="author-date">
<span className="commit-date">
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

해당 container가 commit을 다루고 있고, 실제 날짜도 author에 관련되어 있다기 보다 커밋한 일시 자체를 다루고 있기 때문에 더 알맞다고 생각하여 수정하였습니다.

{author.names[0]}, {dayjs(commitDate).format("YY. M. DD. a h:mm")}
</span>
</div>
Expand All @@ -91,8 +92,12 @@ const Detail = ({ selectedData, clusterId, authSrcMap }: DetailProps) => {
tabIndex={0}
onKeyDown={handleCommitIdCopy(id)}
>
{id.slice(0, 6)}
<span className="commit-id__tooltip">{id}</span>
<Tooltip
placement="right"
title={id}
>
<p>{`${id.slice(0, 6)}...`}</p>
</Tooltip>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

기존처럼 6개만 잘라 내용을 보여주고 툴팁에 전체를 담는 형식을 유지하되, 말 줄임 표시로 ... 을 넣었습니다.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

git 사용 시 보통 6a58676 요렇게 커밋 id를 6자리로 끊기도 해서 저는 원래대로 ... 없이 가는게 조금 더 깔끔한 것 같기도 한데 다른 분들 생각은 어떠신지 궁금하네요..!!!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

그렇네요. ... 없이 가는게 맞을 것 같습니다!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

앗 이제 봤네요!! 다음 pr 때 수정하겠습니다!

</a>
</div>
</li>
Expand Down
19 changes: 9 additions & 10 deletions packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@
display: flex;
flex-direction: column;
align-items: flex-start;
}

p {
font-size: $font-size-title;
font-weight: $font-weight-semibold;
}
.author-bar-chart__title {
font-size: $font-size-title;
font-weight: $font-weight-semibold;
}
Comment on lines -9 to 13
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

기존에 컨테이너 박스 안의 모든 p의 폰트 사이즈와 두께를 결정하고 있는 관계로, 아래에서 다시 .name 의 두께를 정해주어도 변경되지 않았습니다. 이전에 작성한 의도에 맞게 name만 진한 굵기로, 나머지는 보통 굵기로 나오도록 수정하기 위해 따로 class 명을 주었습니다.


.author-bar-chart__header {
Expand Down Expand Up @@ -39,7 +39,6 @@

.axis {
color: $color-white;
font-weight: $font-weight-semibold;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

그래프의 label에 해당하는 부분입니다. 상단 기간 그래프의 날짜 부분이 보통 굵기로 설정되어 있었기에 통일하였습니다.


&.x-axis {
.tick {
Expand Down Expand Up @@ -82,17 +81,17 @@
.author-bar-chart__tooltip {
display: none;
position: absolute;
background: $color-white;
padding: 8px 16px;
text-align: center;
border-radius: 5px;
font-size: $font-size-caption;
text-align: center;
line-height: 1.5;
border-radius: 5px;
color: $color-dark-gray;
background: $color-medium-gray;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

혹싱 요 툴팁이랑 commit-id의 툴팁이랑 색이 같은가요 ?.? 툴팁의 배경 색도 통일되면 좋을 것 같은데 사진 첨부해주신 건 뭔가 다른 것 싶어가지구 궁금합니다!!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수정하였습니다 의견 감사합니다 🥰😊

color: $color-white;

.selected {
color: var(--color-primary);
font-weight: $font-weight-semibold;
color: var(--color-primary);
}
.name {
font-weight: $font-weight-semibold;
Expand Down
2 changes: 1 addition & 1 deletion packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,7 @@ const AuthorBarChart = () => {

return (
<div className="author-bar-chart__container">
<p>Author Bar Chart</p>
<p className="author-bar-chart__title">Author Bar Chart</p>
<div className="author-bar-chart__header">
<FormControl
sx={{ m: 1, minWidth: 120 }}
Expand Down
Loading