현재 툴박스의 모습

정말 못생겼다.

목표 디자인

현재 목표하는 디자인은 아래와 같다. 단, 태그, 스타일 탭을 제외하고 아래 부분에 있는 컨테이너, 텍스트 등 html 블록의 탭을 구현하는 것이다.

Codelab을 따라서 toolbox CategoryItem 커스텀하기

공식 문서를 찾아보니 blockly toolbox의 categoryItem을 커스텀하는 codelab을 제공한다. 해당 내용을 따라서 차근 차근 진행해 보기로 했다. 아래 내용은 codelab의 내용을 한글로 정리하며 진행한 내용이다.

overview

codelab에서 내가 배울 수 있는 것은 다음과 같다.

1. toolbox 카테고리에 배경색 넣는 법
2. 선택된 카테고리의 UI 바꾸는 법
3. toolbox 카테고리에 custom css 넣는 법
4. category HTML의 구조를 바꾸는 법
5. custom toolbox 아이템 넣는 법

<aside> 🤫

트러블 슈팅

svg 경로 설정

registername 정하는 것의 역할

블럭 커스텀

카테고리 구분

</aside>

탭으로 워크스페이스 이동하기

문제점 발생

탭을 모두 커스텀한 이후에 하려고 했던 것은 이 툴박스 자체에 border radius를 주고 디자인에 맞게 shadow를 주는 것이었다. 근데 blocklyFlyout(왼쪽 클래스명이 있는 부분)과 탭 부분이 하나의 div로 묶여있지 않아서 스타일을 줄 수 없었다. blockly는 단순히 blocklyFlyout를 svg로 만들어서 탭이 눌리면 display none 에서 display block으로 바꿈.