Full Sail University에서 Final Project로 진행한 복분자막걸리(Raspberry Rice Wine, RRW) 개발 과정에서 작성한 글입니다.
This week, I've started to structure the whole application, starting from the layout UI components. Things mostly went well, and overall progress looks good.
First, I have worked on adding a header bar for the window with a customized design. Since the native Electron header bar looks surprisingly bad, I decided to do this right after scaffolding the project. I have removed the existing header bar by passing frame: false, titleBarStyle: 'hiddenInset' to the constructor of BrowserWindow then added a customized one by creating a header component using Vue. Placing window controls(close button, minimize/maximize buttons) was a tricky one. I should have handled it differently between Windows and macOS (didn't care about Linux(GTK/Qt) since I have no Linux distribution installed on any of my devices). In Windows, I have added customized window control buttons by myself, with custom styling. However, in macOS, I wanted to keep the well-known "traffic light" buttons. So I have added a platform check for macOS then made some UI adjustments, like hiding my window controls and moving the header contents to make space for native window controls.
Then I have started to implement the panel layout. I have planned to have a panel-based layout with dockable, tabbed, splittable panels, similar to UX that recent versions of Visual Studio have. Currently, the splitting feature is not complete, but others are all working. Panels are dockable inside the wrapper grid. The size of them is adjustable by dragging the edges and the corners. Tabs are inside of panels, can be moved inside the panel, or even across panels! I have extensively used the render() function and JSX to implement this. Panels sent dragging/dropping events to the wrapper, then the wrapper sent the drag information across the panels. However, this structure is subject to change since the splitting feature seems to need to make the wrapper to have more control over panel placement.
Nothing went wrong and everything went well, except that the splitting feature is still missing. However, I have a rough idea to implement it, so it shouldn't be a big problem. Next week's goal is implementing the splitting feature, then implementing actual features starting from the script editor.
