Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-22 16:48:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

TOS Modal (#123)

Browse Source 
* register tos modal and fix its styles

* hard-code render TOS modal in ModalsProvider

* cleanup

* remove tos const
This commit is contained in:
Red J Adaya 2023-12-05 10:29:21 +08:00 committed by GitHub
parent c8485ad80c
commit 9ebd5bda8f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 86 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.tsx
View File

@ -22,7 +22,6 @@ import {
LineSettingsModal, LineSettingsModal,
ClientSettingsModal, ClientSettingsModal,
} from "./common/modals/settings"; } from "./common/modals/settings";
import { TosModal } from "./common/modals/modals";
import { MainSideBar } from "./sidebar/sidebar"; import { MainSideBar } from "./sidebar/sidebar";
import { DisconnectedModal, ClientStopModal, ModalsProvider } from "./common/modals/modals"; import { DisconnectedModal, ClientStopModal, ModalsProvider } from "./common/modals/modals";
import { ErrorBoundary } from "./common/error/errorboundary"; import { ErrorBoundary } from "./common/error/errorboundary";
@ -121,9 +120,6 @@ class App extends React.Component<{}, {}> {
<ConnectionsView model={remotesModel} /> <ConnectionsView model={remotesModel} />
</ErrorBoundary> </ErrorBoundary>
</div> </div>
<If condition={GlobalModel.needsTos()}>
<TosModal />
</If>
<ModalsProvider /> <ModalsProvider />
<If condition={screenSettingsModal != null}> <If condition={screenSettingsModal != null}>
<ScreenSettingsModal <ScreenSettingsModal

16
src/app/common/modals/modals.less
View File

@ -165,11 +165,18 @@
} }
} }
.modal.tos-modal { .tos-modal {
.modal-content.wave-modal-content { width: 640px;
.wave-modal-content .wave-modal-body {
padding: 32px 48px; padding: 32px 48px;
gap: 8px; gap: 8px;
.wave-modal-body-inner {
gap: 24px;
display: flex;
flex-direction: column;
header.tos-header { header.tos-header {
flex-direction: column; flex-direction: column;
gap: var(--sizing-sm, 12px); gap: var(--sizing-sm, 12px);
@ -235,6 +242,10 @@
} }
footer { footer {
.item-text {
text-align: center;
}
.button-wrapper { .button-wrapper {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -252,6 +263,7 @@
} }
} }
} }
}
} }
.about-modal { .about-modal {

14
src/app/common/modals/modals.tsx
View File

@ -42,6 +42,10 @@ class ModalsProvider extends React.Component {
renderModals() { renderModals() {
const modals = GlobalModel.modalsModel.activeModals; const modals = GlobalModel.modalsModel.activeModals;
if (GlobalModel.needsTos()) {
return <TosModal />;
}
return modals.map((ModalComponent, index) => <ModalComponent key={index} />); return modals.map((ModalComponent, index) => <ModalComponent key={index} />);
} }
@ -231,6 +235,7 @@ class TosModal extends React.Component<{}, {}> {
@boundMethod @boundMethod
acceptTos(): void { acceptTos(): void {
GlobalCommandRunner.clientAcceptTos(); GlobalCommandRunner.clientAcceptTos();
GlobalModel.modalsModel.popModal();
} }
@boundMethod @boundMethod
@ -246,10 +251,9 @@ class TosModal extends React.Component<{}, {}> {
let cdata: ClientDataType = GlobalModel.clientData.get(); let cdata: ClientDataType = GlobalModel.clientData.get();
return ( return (
<div className={cn("modal tos-modal wave-modal is-active")}> <Modal className="tos-modal">
<div className="modal-background wave-modal-background" /> <div className="wave-modal-body">
<div className="modal-content wave-modal-content tos-wave-modal-content"> <div className="wave-modal-body-inner">
<div className="modal-content-inner wave-modal-content-inner tos-wave-modal-content-inner">
<header className="tos-header unselectable"> <header className="tos-header unselectable">
<div className="modal-title">Welcome to Wave Terminal!</div> <div className="modal-title">Welcome to Wave Terminal!</div>
<div className="modal-subtitle">Lets set everything for you</div> <div className="modal-subtitle">Lets set everything for you</div>
@ -323,7 +327,7 @@ class TosModal extends React.Component<{}, {}> {
</footer> </footer>
</div> </div>
</div> </div>
</div> </Modal>
); );
} }
} }