Skip to content

Commit

Permalink
layouts lmao
Browse files Browse the repository at this point in the history
  • Loading branch information
@choptop84
choptop84 committed Jan 3, 2024
1 parent 64de784 commit be1e6b8
Show file tree
Hide file tree
Showing 4 changed files with 203 additions and 2 deletions.
90 changes: 90 additions & 0 deletions editor/Layout.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -274,6 +274,96 @@ export class Layout {
}
}
`,
"AbyssBox Special": `\
/* long layout */
@media (min-width: 711px) {
#beepboxEditorContainer {
max-width: initial;
height: 100vh;
}
.beepboxEditor {
width: 100%;
height: 100vh;
grid-template-columns: minmax(0, 1fr) 390px; /* minmax(0, 1fr) min-content; Chrome 80 grid layout regression. https://bugs.chromium.org/p/chromium/issues/detail?id=1050307 */
grid-template-rows: minmax(481px, 1fr) minmax(0, min-content);
grid-template-areas: "pattern-area settings-area" "track-area track-area";
}
.beepboxEditor .pattern-area {
width: 100%;
height: 100%;
}
.beepboxEditor .track-area {
width: 100%;
display: flex;
flex-direction: column;
}
.beepboxEditor .trackAndMuteContainer {
width: 100%;
min-height: 0;
flex: 1;
overflow: auto;
max-height: 97.5vh;
}
.beepboxEditor .instrument-settings-area {
overflow-y: auto;
position: relative;
}
.beepboxEditor .instrument-settings-area > .editor-controls {
position: absolute;
width: 100%;
}
.beepboxEditor .song-settings-area {
overflow-y: auto;
}
.beepboxEditor .settings-area {
width: 390px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto auto auto minmax(0, 1fr);
grid-template-areas:
"instrument-settings-area version-area"
"instrument-settings-area play-pause-area"
"instrument-settings-area menu-area"
"instrument-settings-area song-settings-area";
}
.beepboxEditor .barScrollBar {
display: none;
}
.beepboxEditor.selectRow {
height: 2em;
}
.beepboxEditor .operatorRow {
heiht: 2em;
}
.beepboxEditor .trackAndMuteContainer {
max-height: 446px;
}
.beepboxEditor .trackContainer {
overflow: visible;
}
.beepboxEditor .trackAndMuteContainer {
scrollbar-width: auto;
scrollbar-color: ${ColorConfig.uiWidgetBackground} ${ColorConfig.editorBackground};
}
.beepboxEditor .trackAndMuteContainer::-webkit-scrollbar {
width: 20px;
height: 20px;
}
.beepboxEditor .trackAndMuteContainer::-webkit-scrollbar-track {
background: ${ColorConfig.editorBackground};
}
.beepboxEditor .trackAndMuteContainer::-webkit-scrollbar-thumb {
background-color: ${ColorConfig.uiWidgetBackground};
border: 3px solid ${ColorConfig.editorBackground};
}
.beepboxEditor .trackAndMuteContainer::-webkit-scrollbar-corner {
background-color: ${ColorConfig.editorBackground};
}
}
`,
}

private static readonly _styleElement: HTMLStyleElement = document.head.appendChild(HTML.style({type: "text/css"}));
Expand Down
13 changes: 13 additions & 0 deletions editor/LayoutPrompt.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,19 @@ export class LayoutPrompt implements Prompt {
`),
div("Wide (JB)"),
),
label({class: "layout-option"},
input({type: "radio", name: "layout", value: "AbyssBox Special"}),
SVG(`\
<svg viewBox="-1 -1 28 22">
<rect x="0" y="0" width="26" height="20" fill="none" stroke="currentColor" stroke-width="1"/>
<rect x="2" y="2" width="4" height="16" fill="currentColor"/>
<rect x="18" y="2" width="2.5" height="16" fill="currentColor"/>
<rect x="21.5" y="2" width="2.5" height="16" fill="currentColor"/>
<rect x="7" y="2" width="10" height="16" fill="currentColor"/>
</svg>
`),
div("AbyssBox (Sp)"),
),
);

public readonly container: HTMLDivElement = div({class: "prompt noSelection", style: "width: 300px;"},
Expand Down
100 changes: 99 additions & 1 deletion website/beepbox_editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29611,6 +29611,96 @@ You should be redirected to the song at:<br /><br />
}
}
`,
"AbyssBox Special": `\

/* long layout */
@media (min-width: 711px) {
#beepboxEditorContainer {
max-width: initial;
height: 100vh;
}
.beepboxEditor {
width: 100%;
height: 100vh;
grid-template-columns: minmax(0, 1fr) 390px; /* minmax(0, 1fr) min-content; Chrome 80 grid layout regression. https://bugs.chromium.org/p/chromium/issues/detail?id=1050307 */
grid-template-rows: minmax(481px, 1fr) minmax(0, min-content);
grid-template-areas: "pattern-area settings-area" "track-area track-area";
}
.beepboxEditor .pattern-area {
width: 100%;
height: 100%;
}
.beepboxEditor .track-area {
width: 100%;
display: flex;
flex-direction: column;
}
.beepboxEditor .trackAndMuteContainer {
width: 100%;
min-height: 0;
flex: 1;
overflow: auto;
max-height: 97.5vh;
}
.beepboxEditor .instrument-settings-area {
overflow-y: auto;
position: relative;
}
.beepboxEditor .instrument-settings-area > .editor-controls {
position: absolute;
width: 100%;
}
.beepboxEditor .song-settings-area {
overflow-y: auto;
}

.beepboxEditor .settings-area {
width: 390px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto auto auto minmax(0, 1fr);
grid-template-areas:
"instrument-settings-area version-area"
"instrument-settings-area play-pause-area"
"instrument-settings-area menu-area"
"instrument-settings-area song-settings-area";
}

.beepboxEditor .barScrollBar {
display: none;
}
.beepboxEditor.selectRow {
height: 2em;
}
.beepboxEditor .operatorRow {
heiht: 2em;
}
.beepboxEditor .trackAndMuteContainer {
max-height: 446px;
}

.beepboxEditor .trackContainer {
overflow: visible;
}
.beepboxEditor .trackAndMuteContainer {
scrollbar-width: auto;
scrollbar-color: ${ColorConfig.uiWidgetBackground} ${ColorConfig.editorBackground};
}
.beepboxEditor .trackAndMuteContainer::-webkit-scrollbar {
width: 20px;
height: 20px;
}
.beepboxEditor .trackAndMuteContainer::-webkit-scrollbar-track {
background: ${ColorConfig.editorBackground};
}
.beepboxEditor .trackAndMuteContainer::-webkit-scrollbar-thumb {
background-color: ${ColorConfig.uiWidgetBackground};
border: 3px solid ${ColorConfig.editorBackground};
}
.beepboxEditor .trackAndMuteContainer::-webkit-scrollbar-corner {
background-color: ${ColorConfig.editorBackground};
}
}
`,
};
Layout._styleElement = document.head.appendChild(HTML.style({ type: "text/css" }));

Expand Down Expand Up @@ -30745,7 +30835,15 @@ You should be redirected to the song at:<br /><br />
<rect x="21.5" y="2" width="2.5" height="16" fill="currentColor"/>
<rect x="7" y="2" width="10" height="16" fill="currentColor"/>
</svg>
`), div$d("Wide (JB)")));
`), div$d("Wide (JB)")), label$1({ class: "layout-option" }, input$a({ type: "radio", name: "layout", value: "AbyssBox Special" }), SVG(`\
<svg viewBox="-1 -1 28 22">
<rect x="0" y="0" width="26" height="20" fill="none" stroke="currentColor" stroke-width="1"/>
<rect x="2" y="2" width="4" height="16" fill="currentColor"/>
<rect x="18" y="2" width="2.5" height="16" fill="currentColor"/>
<rect x="21.5" y="2" width="2.5" height="16" fill="currentColor"/>
<rect x="7" y="2" width="10" height="16" fill="currentColor"/>
</svg>
`), div$d("AbyssBox (Sp)")));
this.container = div$d({ class: "prompt noSelection", style: "width: 300px;" }, h2$c("Layout"), this._form, div$d({ style: "display: flex; flex-direction: row-reverse; justify-content: space-between;" }, this._okayButton), this._cancelButton);
this._close = () => {
this._doc.undo();
Expand Down
2 changes: 1 addition & 1 deletion website/beepbox_editor.min.js
View file

Large diffs are not rendered by default.

0 comments on commit be1e6b8

Please sign in to comment.