diff options
| author | crupest <crupest@outlook.com> | 2021-06-30 18:36:47 +0800 |
|---|---|---|
| committer | crupest <crupest@outlook.com> | 2021-06-30 18:36:47 +0800 |
| commit | 839daa0eac6fdbe84f45e8572e5ab07126b7d67c (patch) | |
| tree | 08b68e8bfd6da2f8b4f51c4aaefbbd33c747e8d6 /FrontEnd/src/views/common | |
| parent | 979ad8556be3576b09e318c9e85ae0138ecf11ec (diff) | |
| download | timeline-839daa0eac6fdbe84f45e8572e5ab07126b7d67c.tar.gz timeline-839daa0eac6fdbe84f45e8572e5ab07126b7d67c.tar.bz2 timeline-839daa0eac6fdbe84f45e8572e5ab07126b7d67c.zip | |
...
Diffstat (limited to 'FrontEnd/src/views/common')
| -rw-r--r-- | FrontEnd/src/views/common/dailog/FullPageDialog.css | 26 | ||||
| -rw-r--r-- | FrontEnd/src/views/common/dailog/FullPageDialog.tsx | 9 | ||||
| -rw-r--r-- | FrontEnd/src/views/common/index.css | 47 |
3 files changed, 49 insertions, 33 deletions
diff --git a/FrontEnd/src/views/common/dailog/FullPageDialog.css b/FrontEnd/src/views/common/dailog/FullPageDialog.css new file mode 100644 index 00000000..65f16041 --- /dev/null +++ b/FrontEnd/src/views/common/dailog/FullPageDialog.css @@ -0,0 +1,26 @@ +.cru-full-page {
+ position: fixed;
+ z-index: 1030;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ background-color: white;
+ padding-top: 56px;
+}
+
+.cru-full-page-top-bar {
+ height: 56px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 1;
+ background-color: var(--cru-primary-color);
+ display: flex;
+ align-items: center;
+}
+
+.cru-full-page-content-container {
+ overflow: scroll;
+}
diff --git a/FrontEnd/src/views/common/dailog/FullPageDialog.tsx b/FrontEnd/src/views/common/dailog/FullPageDialog.tsx index 88c90bbc..72c9b269 100644 --- a/FrontEnd/src/views/common/dailog/FullPageDialog.tsx +++ b/FrontEnd/src/views/common/dailog/FullPageDialog.tsx @@ -1,6 +1,9 @@ import React from "react"; +import { createPortal } from "react-dom"; import classnames from "classnames"; +import "./FullPageDialog.css"; + export interface FullPageDialogProps { show: boolean; onBack: () => void; @@ -13,7 +16,7 @@ const FullPageDialog: React.FC<FullPageDialogProps> = ({ children, contentContainerClassName, }) => { - return ( + return createPortal( <div className="cru-full-page" style={{ display: show ? undefined : "none" }} @@ -32,7 +35,9 @@ const FullPageDialog: React.FC<FullPageDialogProps> = ({ > {children} </div> - </div> + </div>, + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + document.getElementById("portal")! ); }; diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css index cb1cccd4..d7501f98 100644 --- a/FrontEnd/src/views/common/index.css +++ b/FrontEnd/src/views/common/index.css @@ -120,22 +120,34 @@ --cru-success-r3-color: rgb(0, 243, 0);
}
-.tl-color-primary {
+.cru-color-primary {
color: var(--cru-primary-color);
}
-.tl-color-secondary {
+.cru-color-secondary {
color: var(--cru-secondary-color);
}
-.tl-color-success {
+.cru-color-success {
color: var(--cru-success-color);
}
-.tl-color-danger {
+.cru-color-danger {
color: var(--cru-danger-color);
}
+.cru-text-end {
+ text-align: end;
+}
+
+.cru-float-right {
+ float: right;
+}
+
+.cru-clearfix::after {
+ clear: both;
+}
+
.icon-button {
font-size: 1.4rem;
cursor: pointer;
@@ -182,33 +194,6 @@ width: 50%;
}
-.cru-full-page {
- position: fixed;
- z-index: 1031;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- background-color: white;
- padding-top: 56px;
-}
-
-.cru-full-page-top-bar {
- height: 56px;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- z-index: 1;
- background-color: var(--cru-primary-color);
- display: flex;
- align-items: center;
-}
-
-.cru-full-page-content-container {
- overflow: scroll;
-}
-
.cru-tab-pages-action-area {
display: flex;
align-items: center;
|