Blockly의 처음 인상은 굉장히 단순해 보인다. 몇가지만 수정하면 좀더 이쁘게 보일수 있을 것 같은데, 일단은 코드 상에서 해결해야 하는 제목에서 보이는 두 내용을 적용하도록 수정해본다.
소스 파일의 내용 기준은 현재 가장 최신버전인 blockly-3.20191014.4를 기준으로 한다. 추후 업데이트 되더라도 큰 차이는 없을테니 잘 찾아서 적용하면 될듯.
Scrollbar Thickness
blockly-3.20191014.4/core/scrollbar.js [301:305]
Blockly.Scrollbar.scrollbarThickness = 15;
if (Blockly.Touch.TOUCH_ENABLED) {
Blockly.Scrollbar.scrollbarThickness = 25;
}위 두 값 (15, 25)를 원하는 값으로 수정. 대략 4, 8 정도면 적당한 듯.
Category Title Color
blockly-3.20191014.4/core/toolbox.js [259:275]
Blockly.Toolbox.prototype.handleBeforeTreeSelected_ = function(node) {
if (node == this.tree_) {
return false;
}
if (this.lastCategory_) {
this.lastCategory_.getRowElement().style.backgroundColor = '';
this.addColour_(); // add
}
if (node) {
var hexColour = node.hexColour || '#57e';
node.getRowElement().style.backgroundColor = hexColour;
node.getRowElement().getElementsByTagName('span')[1].style.color = '#fff'; // add
// Add colours to child nodes which may have been collapsed and thus
// not rendered.
this.addColour_(node);
}
return true;
};blockly-3.20191014.4/core/toolbox.js [605:627]
Blockly.Toolbox.prototype.addColour_ = function(opt_tree) {
var tree = opt_tree || this.tree_;
var children = tree.getChildren(false);
for (var i = 0, child; child = children[i]; i++) {
var element = child.getRowElement();
if (element) {
if (this.hasColours_) {
var border = '8px solid ' + (child.hexColour || '#ddd');
var colour = child.hexColour || '#000'; // add
} else {
var border = 'none';
var colour = '#000'; // add
}
element.getElementsByTagName('span')[1].style.color = colour; // add
if (this.workspace_.RTL) {
element.style.borderRight = border;
} else {
element.style.borderLeft = border;
}
}
this.addColour_(child);
}
};위와 같이 // add 라고 되어 있는 줄을 함수 내에 추가하고, blockly 디렉토리 내에서 빌드를 해보면,
$ ./build.py압축된 javascript 파일이 생성된다. 이를 이용하여 데모페이지를 보게 되면,
정해진 카테고리의 테마 색상에 따라, 카테고리의 타이틀 색상과 스크롤바의 크기 역시 세련되게 변경 됨을 볼 수 있다.
