From ade6f5d2c3af9fa92d819f37a5dd5e9f5d5bb863 Mon Sep 17 00:00:00 2001 From: He4eT Date: Mon, 12 Jun 2023 22:30:27 +0300 Subject: [PATCH] Player: replace player.css with scss modules --- src/App.jsx | 9 +- src/components/Player/InputBox/InputBox.jsx | 6 +- .../Player/InputBox/InputBox.module.scss | 31 ++++++ .../Player/MenuOverlay/MenuOverlay.css | 41 ------- .../Player/MenuOverlay/MenuOverlay.jsx | 8 +- .../MenuOverlay/MenuOverlay.module.scss | 41 +++++++ .../OutputBox/{ => GridBuffer}/GridBuffer.jsx | 7 +- .../OutputBox/{ => TextBuffer}/TextBuffer.jsx | 16 +-- .../Player/OutputBox/TextMessage.jsx | 14 --- .../OutputBox/TextMessage/TextMessage.jsx | 21 ++++ .../TextMessage/TextMessage.module.scss | 11 ++ src/components/Player/Player.jsx | 16 +-- src/components/Player/Player.module.scss | 49 +++++++++ src/components/Player/player.css | 100 ------------------ 14 files changed, 189 insertions(+), 181 deletions(-) create mode 100644 src/components/Player/InputBox/InputBox.module.scss delete mode 100644 src/components/Player/MenuOverlay/MenuOverlay.css create mode 100644 src/components/Player/MenuOverlay/MenuOverlay.module.scss rename src/components/Player/OutputBox/{ => GridBuffer}/GridBuffer.jsx (91%) rename src/components/Player/OutputBox/{ => TextBuffer}/TextBuffer.jsx (88%) delete mode 100644 src/components/Player/OutputBox/TextMessage.jsx create mode 100644 src/components/Player/OutputBox/TextMessage/TextMessage.jsx create mode 100644 src/components/Player/OutputBox/TextMessage/TextMessage.module.scss create mode 100644 src/components/Player/Player.module.scss delete mode 100644 src/components/Player/player.css diff --git a/src/App.jsx b/src/App.jsx index e60af69..ccc9b32 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -14,7 +14,7 @@ import ThemesView from '~/src/views/ThemesView/ThemesView' import PlayerView from '~/src/views/PlayerView/PlayerView' import NotFoundView from '~/src/views/NotFoundView/NotFoundView' -import * as style from './style/App.module.scss' +import * as s from './style/App.module.scss' export default function App () { const themeEngine = useThemeEngine() @@ -32,9 +32,10 @@ export default function App () { return (
+ s.app, + s[extractView(currentLocation)], + themeEngine.currentTheme, + ].join(' ')}> diff --git a/src/components/Player/InputBox/InputBox.jsx b/src/components/Player/InputBox/InputBox.jsx index d82c400..e3cf160 100644 --- a/src/components/Player/InputBox/InputBox.jsx +++ b/src/components/Player/InputBox/InputBox.jsx @@ -2,6 +2,8 @@ import { useEffect, useRef, useState } from 'preact/hooks' import MenuButton from './MenuButton/MenuButton' +import * as s from './InputBox.module.scss' + /* eslint-disable */ const keyCodes = { KEY_BACKSPACE: 8, @@ -147,9 +149,9 @@ export default function InputBox ({ } return ( -
+
section { - margin: 32px auto 40px; - gap: 32px; - max-width: 270px; - display: flex; - flex-direction: column; -} - -.menu .navigation { - color: var(--accent-color); -} - -.menu .appearance { - display: flex; - flex-direction: column; - gap: 8px; -} - -.menu select, -.menu button { - width: 100%; -} diff --git a/src/components/Player/MenuOverlay/MenuOverlay.jsx b/src/components/Player/MenuOverlay/MenuOverlay.jsx index a6aac6f..8e7166b 100644 --- a/src/components/Player/MenuOverlay/MenuOverlay.jsx +++ b/src/components/Player/MenuOverlay/MenuOverlay.jsx @@ -4,7 +4,7 @@ import { Link } from 'wouter-preact' import ThemeSelector from '~/src/components/ThemeSelector/ThemeSelector' -import './MenuOverlay.css' +import * as s from './MenuOverlay.module.scss' export default function MenuOverlay ({ themeEngine, onFullscreenRequest, menuOpen, setMenuOpen, @@ -35,7 +35,7 @@ export default function MenuOverlay ({ return ( - +
-
+
-
+
ElseIfPlayer diff --git a/src/components/Player/MenuOverlay/MenuOverlay.module.scss b/src/components/Player/MenuOverlay/MenuOverlay.module.scss new file mode 100644 index 0000000..ce76561 --- /dev/null +++ b/src/components/Player/MenuOverlay/MenuOverlay.module.scss @@ -0,0 +1,41 @@ +.menu { + width: 100%; + + border-left: none; + border-right: none; + text-align: center; + padding-top: 0; + padding-bottom: 0; + + background-color: var(--bg-color); + border-color: var(--main-color); + color: var(--main-color); + + &::backdrop { + background: none; + backdrop-filter: blur(2px); + } + + & > section { + margin: 32px auto 40px; + gap: 32px; + max-width: 270px; + display: flex; + flex-direction: column; + } + + .navigation { + color: var(--accent-color); + } + + .appearance { + display: flex; + flex-direction: column; + gap: 8px; + } + + select, + button { + width: 100%; + } +} diff --git a/src/components/Player/OutputBox/GridBuffer.jsx b/src/components/Player/OutputBox/GridBuffer/GridBuffer.jsx similarity index 91% rename from src/components/Player/OutputBox/GridBuffer.jsx rename to src/components/Player/OutputBox/GridBuffer/GridBuffer.jsx index a67c883..3ed26c6 100644 --- a/src/components/Player/OutputBox/GridBuffer.jsx +++ b/src/components/Player/OutputBox/GridBuffer/GridBuffer.jsx @@ -1,6 +1,8 @@ import { useEffect, useState } from 'preact/hooks' -import TextMessage from './TextMessage' +import TextMessage from '../TextMessage/TextMessage' + +import * as s from '../../Player.module.scss' export default function GridBuffer ({ inbox, currentWindow }) { const [prevMessages, setPrevMessages] = useState([]) @@ -70,8 +72,7 @@ export default function GridBuffer ({ inbox, currentWindow }) { }, [inbox, currentWindow, prevMessages]) return ( -
+
{messages.map(TextMessage)}
) diff --git a/src/components/Player/OutputBox/TextBuffer.jsx b/src/components/Player/OutputBox/TextBuffer/TextBuffer.jsx similarity index 88% rename from src/components/Player/OutputBox/TextBuffer.jsx rename to src/components/Player/OutputBox/TextBuffer/TextBuffer.jsx index 7a06806..e460376 100644 --- a/src/components/Player/OutputBox/TextBuffer.jsx +++ b/src/components/Player/OutputBox/TextBuffer/TextBuffer.jsx @@ -1,6 +1,8 @@ import { useEffect, useRef, useState } from 'preact/hooks' -import TextMessage from './TextMessage' +import TextMessage from '../TextMessage/TextMessage' + +import * as s from '../../Player.module.scss' const isFakeStatus = (w) => w.height < 5 @@ -75,17 +77,19 @@ export default function TextBuffer ({ inbox, currentWindow }) { }, 0) }, [currentWindow, inbox]) - const classes = [ + const classes = () => [ + s.buffer, isFakeStatus(currentWindow) - ? 'gridBuffer' - : 'textBuffer', - 'buffer'].join(' ') + ? s.gridBuffer + : s.textBuffer, + ].join(' ') return (
+ className={classes()} + > {messages.map(TextMessage)}
) diff --git a/src/components/Player/OutputBox/TextMessage.jsx b/src/components/Player/OutputBox/TextMessage.jsx deleted file mode 100644 index caba6b2..0000000 --- a/src/components/Player/OutputBox/TextMessage.jsx +++ /dev/null @@ -1,14 +0,0 @@ -export default function TextMessage ({ style, text }) { - const defaultContent = ( - - {text} - ) - - return ({ - grid: (text?.length > 0 ?
{text}
:
), - input: (> {text}), - subheader: ({text}), - emphasized: ({text}), - endOfLine: (
), - })[style] || defaultContent -} diff --git a/src/components/Player/OutputBox/TextMessage/TextMessage.jsx b/src/components/Player/OutputBox/TextMessage/TextMessage.jsx new file mode 100644 index 0000000..fea76fe --- /dev/null +++ b/src/components/Player/OutputBox/TextMessage/TextMessage.jsx @@ -0,0 +1,21 @@ +import * as s from './TextMessage.module.scss' + +export default function TextMessage ({ style, text }) { + const defaultContent = ( + + {text} + ) + + return ({ + grid: + (text?.length > 0 ?
{text}
:
), + input: + (> {text}), + subheader: + ({text}), + emphasized: + ({text}), + endOfLine: + (
), + })[style] || defaultContent +} diff --git a/src/components/Player/OutputBox/TextMessage/TextMessage.module.scss b/src/components/Player/OutputBox/TextMessage/TextMessage.module.scss new file mode 100644 index 0000000..b0b2ed0 --- /dev/null +++ b/src/components/Player/OutputBox/TextMessage/TextMessage.module.scss @@ -0,0 +1,11 @@ +.message { + &.input { + scroll-margin-top: var(--inner-padding); + color: var(--input-color); + } + + &.emphasized, + &.subheader { + color: var(--accent-color); + } +} diff --git a/src/components/Player/Player.jsx b/src/components/Player/Player.jsx index 7b66344..46fc293 100644 --- a/src/components/Player/Player.jsx +++ b/src/components/Player/Player.jsx @@ -2,8 +2,8 @@ import { useState, useEffect } from 'preact/hooks' import CheapGlkOte from 'cheap-glkote' -import TextBuffer from './OutputBox/TextBuffer' -import GridBuffer from './OutputBox/GridBuffer' +import TextBuffer from './OutputBox/TextBuffer/TextBuffer' +import GridBuffer from './OutputBox/GridBuffer/GridBuffer' import InputBox from './InputBox/InputBox' import Status from './Status/Status' @@ -13,7 +13,7 @@ import { unhandledRejectionHandler, } from './common/playerHandlers' -import './player.css' +import * as s from './Player.module.scss' const INITIAL_STATUS = { stage: 'loading', @@ -104,14 +104,16 @@ export default function Player ({ return status.stage !== 'ready' ? () - : (
-
{ - windows + : (
+
+ { + windows .sort(byTop) .filter(singleWindow ? ({ id }) => id === currentWindowId : () => true) - .map(textWindow(inbox))} + .map(textWindow(inbox)) + }
br:first-child, + & > br:last-child, + & > br + br + br { + display: none; + } + + &.gridBuffer { + flex-shrink: 0; + max-height: 100%; + border-bottom: var(--separator-width) solid var(--main-color); + } + + &.textBuffer { + flex: 2 1; + outline: none; + scroll-behavior: smooth; + } + } + } +} diff --git a/src/components/Player/player.css b/src/components/Player/player.css deleted file mode 100644 index 20e2446..0000000 --- a/src/components/Player/player.css +++ /dev/null @@ -1,100 +0,0 @@ -.ifplayer { - height: 100%; - display: flex; - flex-direction: column; - box-sizing: border-box; - - background-color: var(--bg-color); - color: var(--main-color); - padding: var(--outer-padding); -} - -.ifplayer .inputControls { - position: relative; - margin-top: var(--input-box-margin); -} - -.ifplayer .inputControls .menuButton { - position: absolute; - right: 0; - height: 100%; -} - -.ifplayer .inputBox { - font: inherit; - color: inherit; - outline: 0; - - background-color: var(--bg-color); - border: var(--border-width) solid var(--main-color); - border-top: var(--separator-width) solid var(--main-color); - padding: var(--inner-padding); - padding-right: calc(4 * var(--inner-padding)); - margin: 0; - width: 100%; -} - -.ifplayer .inputBox::placeholder { - color: var(--main-color); - opacity: 1; -} - -.ifplayer .inputBox:focus::placeholder { - opacity: 0.5; -} - -.ifplayer .inputBox::-webkit-search-cancel-button { - display: none; -} - -.ifplayer .output { - display: flex; - flex-grow: 2; - flex-direction: column; - overflow-y: hidden; - overflow-wrap: break-word; - - border: var(--border-width) solid var(--main-color); -} - -.ifplayer .output .buffer { - overflow-y: scroll; - box-sizing: border-box; - - padding: var(--inner-padding); -} - -.ifplayer .output .buffer:empty { - display: none; -} - -.ifplayer .output .gridBuffer { - flex-shrink: 0; - max-height: 100%; - border-bottom: var(--separator-width) solid var(--main-color); -} - -.ifplayer .output .textBuffer { - flex: 2 1; - outline: none; - scroll-behavior: smooth; -} - -.ifplayer .output .textBuffer > br:first-child, -.ifplayer .output .gridBuffer > br:first-child, -.ifplayer .output .textBuffer > br:last-child, -.ifplayer .output .gridBuffer > br:last-child, -.ifplayer .output .textBuffer > br + br + br, -.ifplayer .output .gridBuffer > br + br + br { - display: none; -} - -.ifplayer .output .textBuffer .message.input { - scroll-margin-top: var(--inner-padding); - color: var(--input-color); -} - -.ifplayer .output .textBuffer .message.emphasized, -.ifplayer .output .textBuffer .message.subheader { - color: var(--accent-color); -}