[Yobi] 코드 리뷰 화면에서 코드 접기 기능 추가

[beanmilk]

요구사항

커밋에 수정된 내용이 많고 파일이 여러개면 코드 리뷰 화면에 너무 느리고 보기 힘든 불편함을 해결하기 위해, 코드 접기 기능을 추가

[umsukgod]

해보고싶습니다!

[umsukgod]

VMware ubuntu에서 yobi를 깔고 http:127.0.0.1:9000 으로 실행하여 sign up 까지 해보았습니다.
그런데 어떻게 시작해야할지를 잘 모르겟습니다ㅠ 당연하지만 수많은 코드들중에 어떤것을 살펴봐야할지 잘 감이 안오네요 ㅠ
이 프로젝트를 위해서는 어느 코드를 분석해봐야 하나요?

[doortts]

안녕하세요? 제 생각엔 다음과 같은 식으로 진행하시면 좋을 것 같습니다.

• 우선 play framework 의 기본 tutorial과 sample 을 봅니다.
• 이미 보셨다면, 아래 소스 코드들에서 시작하시면 좋을 것 같습니다.
  routes 파일의 다음 부분

GET            /:ownerName/:project/pullRequest/:id/changes                           controllers.PullRequestApp.pullRequestChanges(ownerName, project, id: Long)
GET            /:ownerName/:project/pullRequest/:id/changes/:commitId                 controllers.PullRequestApp.specificChange(ownerName, project, id: Long, commitId: String)

관련 View

views/git/viewChanges.scala.html

그리고 코드를 보시고 작업을 시작하시기 전에는 아래 문서를 한 번 보시면 도움이 되실겁니다.

docs/technical/common-coding-style-guide.md
docs/technical/java-coding-guidlines.md
docs/ko/technical/javascript-module-guide.md
docs/ko/technical/javascript-naming-convention.md
docs/ko/technical/views-naming-guide.md

그럼 보시거나 작업하시다가 궁금한 점이 있으시면 언제든 문의주세요.

[keesun]

@insanehong 덕홍님이 도와주시면 좋을거 같습니다.

[insanehong]

코드 접기 기능이라면 html , css, javascript 를 보시면 됩니다.

기능상으로 보면 코드영역 어딘가 적적한위치에 접기/펴기 토글 버튼이 있으면 될것이고

javascript 를 이용해서 해당 block 에 대해 `display: block', 'display: hidden' 으로 토글 될수 있게 하시면 될거 같습니다.

[umsukgod]

우와 감사합니다 최대한 많이 봐보고 오늘 찾아뵙겟습니다!ㅎㅎ

[umsukgod]

pull request 의 page Source를 조사해보니

가

이런식으로 표현이 되어있엇습니다.
그래서 찾아본 결과
partial_filediff.scala.html
에서

과 같이 표현이 되어있더라고요
문제는 저기 가장 마지막줄
@html(renderLines(hunk.lines.toList, threads, eolMissingChecker(diff)))
이 어디서 나오는지 잘 찾아지지 않더라고요..
partial_diff_line.scala.html 의

과 같은부분 같은데 어떻게 연관이 지어지는건지 잘 모르겟습니다ㅠ

[doortts]

renderLines 는 TemplateHelper.scala.html 파일에 overloading 메소드들로 있습니다.
@npcode 님 @umsukgod 님을 조금 도와주시겠어요?

[umsukgod]

오오..감사합니다 찾아보겟습니다! 많은도움 부탁드립니다 ..ㅎㅎ

[umsukgod]

코드접기에 대해 의문점이 생겼습니다.
1.added된 +와 removed 된 -를 구분하지 않고 코드를 그냥 줄을 단위로 자르는 것
2.연속되는 + or -에서 예를 들어 + 가 100줄가량 통채로 생겼다고 생각하면 그때 코드접기 기능이 그 연속되는 +줄에 한에 생기는것.
어떤것으로 해야할까요?? 아니면 다른 더 좋은 방법이 있을까요?

[umsukgod]

조금더 생각을 해봤는데 이렇게 하는 건어떨까요

1. 빨간상자처럼 파일별로 코드를 접게 할수 있게 만드는것과
2. 파랑상자처럼 @@ -324,7 +324,11 @@ 부분들을 기준으로 그 구간만큼 접히도록 하는것 입니다.
   1,2번 모두 되도록 구현해도 좋을것 같기도 합니다!

[eungjun-yi]

우선은 1만 해도 될 것 같습니다. 파일별로 접히는 게 UI가 더 단순할 것 같네요.

[umsukgod]

넵 그렇게 해보겟습니다

[umsukgod]

링크입니다 https://github.com/umsukgod/oss_yobi_fold_Code.git

[umsukgod]

제가 assets/stylesheets/less/_page.less 부분을 보면서 건드리고있었는데 괜찮은 접근일까요?
1차적으로 해보려고 했던 UI는

의 인데 이것은 partial_filediff 파일에 있던"< table>"을 삭제한 모습입니다. 혹시 다른방식이 있을까요?

[insanehong]

접은 상태의 예제를 보여주기위해서 테이블을 삭제했다는 말이고

구현은 다른 방식으로 하시는거죠?

[umsukgod]

네 물론이죠 그런데 버튼으로 어떻게 숨겨야 하는지 계속 찾아보고있는데 잘 찾아지지가 않습니다ㅜ
Comment는 어떤 버튼을 누르면 yobicon-post2 모양이 뜨면서 댓글모양이 최소화가되고
다시 yobicon-post2를 누르면 댓글창이 뜨던데 제가 구현하려고 하는것과 비슷할 것 같아서 그 원리를 찾아보는중입니다. 혹시 힌트가 될만한 무언가가있을까요? css파일의 display:none 과 연관이 있는것이죠?

[umsukgod]

그리고 댓글에서 이런 오류가 있는것 같습니다.

comment를 아래줄에다 달고 그 윗줄에서 comment를 쓰려고 할때 그 yobicon-post2 가 위치가 바뀌지않고 위줄의 comment입력창에 오버랩되는 현상이 있습니다. 일시적인 오류인가요?

[beanmilk]

@umsukgod
계속 위와 같은 현상이 발생하나요?
yobi/issues 에서 관련 이슈가 있는 지 찾아보시고 없으면 새로운 이슈로 등록하시면 될 것 같습니다.
이슈로 등록할 때는 오류가 발생한 환경(사용버전, 상황 등등)에 대해 자세히 적어주셔야합니다.

[umsukgod]

우분투 12.04 버전 firefox에서 구동시킬때 이렇게 되더군요. 관련 이슈는 없는것 같습니다. 원래 이런것인지 이럴 때가 있는건지는 잘 모르겟습니다. 확인해보겟습니다.

[umsukgod]

현재 이런모양까지 해보았습니다.

저기 마이너스 버튼을 누르면 코드가 접히고 접힌상태에서 다시 버튼을 누르면 코드가 다시 열리게 됩니다. UI를 어떤식으로 해야할지 피드백 부탁드립니다!

[umsukgod]

• 모양의 yobicon옆에있는 의문의 빈상자를 제거하고 재대로 버튼을 누르면 접히게 만들었습니다.
  
  개선해야할점 말씀해주시면 감사하겟습니다!

[doortts]

한번 접은건 기억하나요?
아니면 매번 페이지 방문때마다 접어야 하나요?

[umsukgod]

아, 기억하는것은 생각못했습니다. 네, 새로고침하면 전부 다시풀리게되요ㅜ
어 기억하게하는게 더 좋은 방법인거같은데 기억하게 좀더 고쳐볼까요?

[umsukgod]

기억하도록 구현하였습니다 PR 넣어보겟습니다!

[umsukgod]

naver/yobi#935 로 pull request 넣었습니다.