mirror of
https://github.com/wavetermdev/waveterm.git
synced 2024-12-22 16:48:23 +01:00
TOS Modal (#123)
* 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
GitHub
parent
c8485ad80c
commit
9ebd5bda8f
@ -22,7 +22,6 @@ import {
|
||||
LineSettingsModal,
|
||||
ClientSettingsModal,
|
||||
} from "./common/modals/settings";
|
||||
import { TosModal } from "./common/modals/modals";
|
||||
import { MainSideBar } from "./sidebar/sidebar";
|
||||
import { DisconnectedModal, ClientStopModal, ModalsProvider } from "./common/modals/modals";
|
||||
import { ErrorBoundary } from "./common/error/errorboundary";
|
||||
@ -121,9 +120,6 @@ class App extends React.Component<{}, {}> {
|
||||
<ConnectionsView model={remotesModel} />
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
<If condition={GlobalModel.needsTos()}>
|
||||
<TosModal />
|
||||
</If>
|
||||
<ModalsProvider />
|
||||
<If condition={screenSettingsModal != null}>
|
||||
<ScreenSettingsModal
|
||||
|
||||
@ -165,89 +165,101 @@
|
||||
}
|
||||
}
|
||||
|
||||
.modal.tos-modal {
|
||||
.modal-content.wave-modal-content {
|
||||
.tos-modal {
|
||||
width: 640px;
|
||||
|
||||
.wave-modal-content .wave-modal-body {
|
||||
padding: 32px 48px;
|
||||
gap: 8px;
|
||||
|
||||
header.tos-header {
|
||||
flex-direction: column;
|
||||
gap: var(--sizing-sm, 12px);
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
|
||||
.modal-title {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.modal-subtitle {
|
||||
color: @term-white;
|
||||
text-align: center;
|
||||
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.content.tos-content {
|
||||
.wave-modal-body-inner {
|
||||
gap: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 32px;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
|
||||
.item {
|
||||
header.tos-header {
|
||||
flex-direction: column;
|
||||
gap: var(--sizing-sm, 12px);
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
|
||||
.modal-title {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.modal-subtitle {
|
||||
color: @term-white;
|
||||
text-align: center;
|
||||
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.content.tos-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 32px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 0;
|
||||
|
||||
.item-inner {
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
flex: 1 0 0;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
.item-title {
|
||||
color: @term-bright-white;
|
||||
font-style: normal;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
color: @term-white;
|
||||
font-style: normal;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.item-field {
|
||||
.item-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
flex: 1 0 0;
|
||||
|
||||
.item-title {
|
||||
color: @term-bright-white;
|
||||
font-style: normal;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
color: @term-white;
|
||||
font-style: normal;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.item-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
.button-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
font-size: 12.5px !important;
|
||||
margin-top: 16px;
|
||||
footer {
|
||||
.item-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button.disabled-button {
|
||||
cursor: default;
|
||||
.button-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
font-size: 12.5px !important;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
button.disabled-button {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,6 +42,10 @@ class ModalsProvider extends React.Component {
|
||||
renderModals() {
|
||||
const modals = GlobalModel.modalsModel.activeModals;
|
||||
|
||||
if (GlobalModel.needsTos()) {
|
||||
return <TosModal />;
|
||||
}
|
||||
|
||||
return modals.map((ModalComponent, index) => <ModalComponent key={index} />);
|
||||
}
|
||||
|
||||
@ -231,6 +235,7 @@ class TosModal extends React.Component<{}, {}> {
|
||||
@boundMethod
|
||||
acceptTos(): void {
|
||||
GlobalCommandRunner.clientAcceptTos();
|
||||
GlobalModel.modalsModel.popModal();
|
||||
}
|
||||
|
||||
@boundMethod
|
||||
@ -246,10 +251,9 @@ class TosModal extends React.Component<{}, {}> {
|
||||
let cdata: ClientDataType = GlobalModel.clientData.get();
|
||||
|
||||
return (
|
||||
<div className={cn("modal tos-modal wave-modal is-active")}>
|
||||
<div className="modal-background wave-modal-background" />
|
||||
<div className="modal-content wave-modal-content tos-wave-modal-content">
|
||||
<div className="modal-content-inner wave-modal-content-inner tos-wave-modal-content-inner">
|
||||
<Modal className="tos-modal">
|
||||
<div className="wave-modal-body">
|
||||
<div className="wave-modal-body-inner">
|
||||
<header className="tos-header unselectable">
|
||||
<div className="modal-title">Welcome to Wave Terminal!</div>
|
||||
<div className="modal-subtitle">Lets set everything for you</div>
|
||||
@ -323,7 +327,7 @@ class TosModal extends React.Component<{}, {}> {
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user