diff --git a/editor.css b/editor.css index 6e7af56..82141f6 100644 --- a/editor.css +++ b/editor.css @@ -31,6 +31,16 @@ body { -webkit-backdrop-filter: blur(10px); } +#logo { + position: absolute; + left: 0; + top: 0; + height: 100%; + aspect-ratio: 1 / 1; + padding-left: 10px; + padding-right: 10px; +} + .menuitem { float: left; cursor: pointer; @@ -61,6 +71,10 @@ body { color: rgb(75, 151, 151); } +.menuitem:nth-child(2) { + margin-left: 60px; +} + .menuitem #search-container { @@ -68,6 +82,8 @@ body { top: 0px; bottom: 0px; width: 400px; + left: 50%; + transform: translateX(-200px); padding: 2 2 2 2; background-color: transparent; border-top: 4px solid transparent; @@ -139,6 +155,8 @@ body { #search-results { width: 400px; + left: 50%; + transform: translateX(-200px); overflow: hidden; padding-bottom: 20px; } @@ -670,4 +688,28 @@ label { .contenttype-darkmode svg { stroke: rgba(135, 135, 135, 0.6); -} \ No newline at end of file +} + +#footer { + font-family: 'Inter'; + font-size: .75em; + position: fixed; + left: 0; + right: 0; + bottom: 0; + display: flex; + box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.16), 0 0px 5px 0 rgba(0, 0, 0, 0.12); + padding: 5px 10px; + z-index: 11; + float: left; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); +} + +#footer.menu-darkmode svg { + stroke: white; +} + +#footer.menu-lightmode svg { + stroke: black; +} diff --git a/editor.html b/editor.html index 2fbe6de..288db87 100644 --- a/editor.html +++ b/editor.html @@ -8,6 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later Editor + @@ -15,6 +16,240 @@ SPDX-License-Identifier: AGPL-3.0-or-later
- - \ No newline at end of file diff --git a/editor.ts b/editor.ts index 9097b31..753bc24 100644 --- a/editor.ts +++ b/editor.ts @@ -11,7 +11,7 @@ var darkMode = false; export function toggleTheme() { darkMode = !darkMode; - var menus = [mainMenu, sidePanel, filePanel]; + var menus = [mainMenu, sidePanel, filePanel, footer]; Array.from(document.getElementsByClassName('menuitem')).forEach(item => item !== fileMenu && Array.from(item.getElementsByClassName('submenu')).forEach(subMenu => menus.push(subMenu)) @@ -67,6 +67,9 @@ Array.from(document.getElementsByClassName('submenu')) var lastSubMenu : HTMLElement | null = null; +const footer = document.getElementById('footer'); + + function positionSubmenuBackdrop() { if (!lastSubMenu || !submenuBackdrop) return; var smRect = lastSubMenu.getBoundingClientRect(); @@ -470,8 +473,9 @@ var stateAbbreviations: string[] = []; var newStateCoords = {'x': 0, 'y': 0}; //Initial coordinates of the next new state sidePanel.style.top = (mainMenu.offsetHeight + 15).toString(); -searchContainer.style.left = (mainMenu.offsetWidth / 2 - searchContainer.offsetWidth / 2).toString(); -searchResults.style.left = searchContainer.style.left; +sidePanel.style.bottom = (footer.offsetHeight + 15).toString(); +// searchContainer.style.left = (mainMenu.offsetWidth / 2 - searchContainer.offsetWidth / 2).toString(); +// searchResults.style.left = searchContainer.style.left; searchResults.style.maxHeight = (0.8 * window.innerHeight).toString(); //Event handlers diff --git a/images/attention.svg b/images/attention.svg new file mode 100644 index 0000000..5d7eb79 --- /dev/null +++ b/images/attention.svg @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + diff --git a/images/errors.svg b/images/errors.svg new file mode 100644 index 0000000..131f056 --- /dev/null +++ b/images/errors.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + diff --git a/images/favicon.png b/images/favicon.png new file mode 100644 index 0000000..511bfa4 Binary files /dev/null and b/images/favicon.png differ diff --git a/images/favicon.png.license b/images/favicon.png.license new file mode 100644 index 0000000..008f9f5 --- /dev/null +++ b/images/favicon.png.license @@ -0,0 +1,3 @@ +SPDX-FileCopyrightText: 2023 David Mosbach + +SPDX-License-Identifier: AGPL-3.0-or-later diff --git a/images/git.svg b/images/git.svg new file mode 100644 index 0000000..bd41b99 --- /dev/null +++ b/images/git.svg @@ -0,0 +1,97 @@ + + + + + + + + + + + + + + + + + + diff --git a/images/logo.svg b/images/logo.svg new file mode 100644 index 0000000..da28a6c --- /dev/null +++ b/images/logo.svg @@ -0,0 +1,239 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/nodes.svg b/images/nodes.svg new file mode 100644 index 0000000..b7d7771 --- /dev/null +++ b/images/nodes.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + diff --git a/images/stages.svg b/images/stages.svg new file mode 100644 index 0000000..4053ba0 --- /dev/null +++ b/images/stages.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + +