From 2715c2ce30d224f5c5eedc7aa9aa1791895bb198 Mon Sep 17 00:00:00 2001 From: Red J Adaya Date: Fri, 13 Sep 2024 14:10:18 +0800 Subject: [PATCH] shrink tos modal and make it scrollable when vertical space is not enough (#373) --- frontend/app/app.less | 4 + frontend/app/modals/modal.tsx | 138 +++++++++++++++++++--------------- frontend/app/modals/tos.less | 29 ++++--- frontend/app/modals/tos.tsx | 61 +++++++++++---- 4 files changed, 143 insertions(+), 89 deletions(-) diff --git a/frontend/app/app.less b/frontend/app/app.less index 58a5d19f6..d4ef24a77 100644 --- a/frontend/app/app.less +++ b/frontend/app/app.less @@ -18,6 +18,10 @@ body { transform: translateZ(0); } +a.plain-link { + color: var(--secondary-text-color); +} + *::-webkit-scrollbar { width: 4px; height: 4px; diff --git a/frontend/app/modals/modal.tsx b/frontend/app/modals/modal.tsx index 3b0c1852f..87d9d533c 100644 --- a/frontend/app/modals/modal.tsx +++ b/frontend/app/modals/modal.tsx @@ -3,10 +3,65 @@ import { Button } from "@/app/element/button"; import clsx from "clsx"; +import { forwardRef } from "react"; import ReactDOM from "react-dom"; import "./modal.less"; +interface ModalProps { + children?: React.ReactNode; + description?: string; + okLabel?: string; + cancelLabel?: string; + className?: string; + onClickBackdrop?: () => void; + onOk?: () => void; + onCancel?: () => void; + onClose?: () => void; +} + +const Modal = forwardRef( + ( + { + children, + className, + description, + cancelLabel, + okLabel, + onCancel, + onOk, + onClose, + onClickBackdrop, + }: ModalProps, + ref + ) => { + const renderBackdrop = (onClick) =>
; + + const renderFooter = () => { + return onOk || onCancel; + }; + + const renderModal = () => ( +
+ {renderBackdrop(onClickBackdrop)} +
+ +
+ {children} +
+ {renderFooter() && ( + + )} +
+
+ ); + + return ReactDOM.createPortal(renderModal(), document.getElementById("main")); + } +); + interface ModalContentProps { children: React.ReactNode; } @@ -39,75 +94,36 @@ const ModalFooter = ({ onCancel, onOk, cancelLabel = "Cancel", okLabel = "Ok" }: ); }; -interface ModalProps { - children?: React.ReactNode; - description?: string; - okLabel?: string; - cancelLabel?: string; - className?: string; - onClickBackdrop?: () => void; - onOk?: () => void; - onCancel?: () => void; - onClose?: () => void; -} - -const Modal = ({ - children, - className, - description, - cancelLabel, - okLabel, - onCancel, - onOk, - onClose, - onClickBackdrop, -}: ModalProps) => { - const renderBackdrop = (onClick) =>
; - - const renderFooter = () => { - return onOk || onCancel; - }; - - const renderModal = () => ( -
- {renderBackdrop(onClickBackdrop)} -
- -
- {children} -
- {renderFooter() && ( - - )} -
-
- ); - - return ReactDOM.createPortal(renderModal(), document.getElementById("main")); -}; - interface FlexiModalProps { children?: React.ReactNode; className?: string; onClickBackdrop?: () => void; } -const FlexiModal = ({ children, className, onClickBackdrop }: FlexiModalProps) => { - const renderBackdrop = (onClick) =>
; +interface FlexiModalComponent + extends React.ForwardRefExoticComponent> { + Content: typeof ModalContent; + Footer: typeof ModalFooter; +} - const renderModal = () => ( -
- {renderBackdrop(onClickBackdrop)} -
{children}
-
- ); +const FlexiModal = forwardRef( + ({ children, className, onClickBackdrop }: FlexiModalProps, ref) => { + const renderBackdrop = (onClick: () => void) =>
; - return ReactDOM.createPortal(renderModal(), document.getElementById("main")); -}; + const renderModal = () => ( +
+ {renderBackdrop(onClickBackdrop)} +
+ {children} +
+
+ ); -FlexiModal.Content = ModalContent; -FlexiModal.Footer = ModalFooter; + return ReactDOM.createPortal(renderModal(), document.getElementById("main")!); + } +); + +(FlexiModal as FlexiModalComponent).Content = ModalContent; +(FlexiModal as FlexiModalComponent).Footer = ModalFooter; export { FlexiModal, Modal }; diff --git a/frontend/app/modals/tos.less b/frontend/app/modals/tos.less index 3e6fbc589..f7a85ed00 100644 --- a/frontend/app/modals/tos.less +++ b/frontend/app/modals/tos.less @@ -2,21 +2,22 @@ // SPDX-License-Identifier: Apache-2.0 .tos-modal { - width: 640px; + width: 560px; border-radius: 10px; + padding: 0; .modal-inner { - padding: 40px 76px; - gap: 32px; display: flex; flex-direction: column; + overflow-y: auto; + padding: 30px; header.tos-header { flex-direction: column; - gap: var(--sizing-sm, 12px); + gap: 8px; border-bottom: none; padding: 0; - margin-bottom: 20px; + margin-bottom: 36px; .logo { margin-bottom: 10px; @@ -48,12 +49,17 @@ gap: 32px; width: 100%; margin-bottom: 0; + margin-bottom: 20px; + + .check-toggle-wrapper .toggle-label { + color: var(--secondary-text-color); + } .content-section { display: flex; width: 100%; align-items: center; - gap: 32px; + gap: 18px; .icon-wrapper { .icon { @@ -82,9 +88,13 @@ } .content-section-text { - color: rgba(255, 255, 255, 0.7); + color: var(--secondary-text-color); font-style: normal; line-height: 20px; + + b { + color: var(--main-text-color); + } } .content-section-field { @@ -102,10 +112,6 @@ } } } - - .toggle-label { - color: rgba(255, 255, 255, 0.7); - } } footer { @@ -123,7 +129,6 @@ button { font-size: 14px; - margin-bottom: 28px; } button.disabled-button { diff --git a/frontend/app/modals/tos.tsx b/frontend/app/modals/tos.tsx index 6d489a2eb..cd4420c89 100644 --- a/frontend/app/modals/tos.tsx +++ b/frontend/app/modals/tos.tsx @@ -6,19 +6,43 @@ import { Button } from "@/app/element/button"; import { Toggle } from "@/app/element/toggle"; import { WshServer } from "@/app/store/wshserver"; import * as services from "@/store/services"; -import { useEffect, useState } from "react"; +import { OverlayScrollbarsComponent } from "overlayscrollbars-react"; +import { useEffect, useRef, useState } from "react"; import { FlexiModal } from "./modal"; import "./tos.less"; const TosModal = () => { const [telemetryEnabled, setTelemetryEnabled] = useState(true); + const modalRef = useRef(null); + + const updateModalHeight = () => { + const windowHeight = window.innerHeight; + if (modalRef.current) { + const modalHeight = modalRef.current.offsetHeight; + const maxHeight = windowHeight * 0.9; + if (maxHeight < modalHeight) { + modalRef.current.style.height = `${maxHeight}px`; + } else { + modalRef.current.style.height = "auto"; + } + } + }; + + useEffect(() => { + updateModalHeight(); // Run on initial render + + window.addEventListener("resize", updateModalHeight); // Run on window resize + return () => { + window.removeEventListener("resize", updateModalHeight); + }; + }, []); const acceptTos = () => { services.ClientService.AgreeTos(); }; - function setTelemetry(value: boolean) { + const setTelemetry = (value: boolean) => { WshServer.SetConfigCommand({ "telemetry:enabled": value }) .then(() => { setTelemetryEnabled(value); @@ -26,7 +50,7 @@ const TosModal = () => { .catch((error) => { console.error("failed to set telemetry:", error); }); - } + }; useEffect(() => { services.FileService.GetFullConfig() @@ -42,16 +66,16 @@ const TosModal = () => { }); }, []); - const label = telemetryEnabled ? "Telemetry enabled" : "Telemetry disabled"; + const label = telemetryEnabled ? "Telemetry Enabled" : "Telemetry Disabled"; return ( - -
+ +
-
Welcome to Wave Terminal!
+
Welcome to Wave Terminal
@@ -73,7 +97,7 @@ const TosModal = () => {
@@ -96,15 +120,24 @@ const TosModal = () => {
Telemetry
- We collect minimal anonymous + We collect minimal anonymous{" "} -  telemetry data  + telemetry data + {" "} + to help us understand how people are using Wave ( + + Privacy Policy - to help us understand how people are using Wave. + ).
@@ -116,12 +149,8 @@ const TosModal = () => { Get Started
-
- By continuing, I accept the  - Terms of Service -
-
+ ); };