Add modal mail preview
This commit is contained in:
parent
97a65dbbd4
commit
dee6dd8cd8
4 changed files with 159 additions and 20 deletions
73
frontend-js/dist/style.css
vendored
73
frontend-js/dist/style.css
vendored
|
|
@ -379,6 +379,7 @@ a.tree-node { display: block; color: inherit; text-decoration: none; }
|
|||
gap: 10px;
|
||||
}
|
||||
.read-head { border-bottom: 1px solid var(--ol-border); padding-bottom: 10px; margin-bottom: 12px; }
|
||||
.read-head.with-popout { position: relative; padding-right: 34px; }
|
||||
.read-subject { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
|
||||
.read-meta { color: var(--ol-muted); font-size: 12px; }
|
||||
.read-pre {
|
||||
|
|
@ -388,6 +389,78 @@ a.tree-node { display: block; color: inherit; text-decoration: none; }
|
|||
line-height: 1.45;
|
||||
margin: 0;
|
||||
}
|
||||
.preview-popout {
|
||||
justify-self: end;
|
||||
width: 26px;
|
||||
height: 24px;
|
||||
border: 1px solid var(--ol-border);
|
||||
background: #fff;
|
||||
color: var(--ol-blue-dark);
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
}
|
||||
.preview-popout:hover {
|
||||
background: #eef6fd;
|
||||
border-color: var(--ol-blue);
|
||||
}
|
||||
.preview-popout.inline {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.mail-modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 60;
|
||||
display: none;
|
||||
padding: 28px;
|
||||
background: rgba(0, 0, 0, .38);
|
||||
}
|
||||
.mail-modal.open { display: flex; }
|
||||
.mail-modalbox {
|
||||
width: min(1180px, 100%);
|
||||
height: min(860px, 100%);
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border: 1px solid var(--ol-border);
|
||||
box-shadow: 0 20px 70px rgba(0, 0, 0, .32);
|
||||
}
|
||||
.mail-modalhead {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid var(--ol-border);
|
||||
background: #eef3f8;
|
||||
}
|
||||
.mail-modalhead h2 {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 17px;
|
||||
}
|
||||
.mail-modalclose {
|
||||
width: 30px;
|
||||
height: 28px;
|
||||
border: 1px solid var(--ol-border);
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
.mail-modalbody {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
padding: 20px 24px;
|
||||
}
|
||||
.ef-empty { color: var(--ol-muted); padding: 24px; }
|
||||
.audit-note { padding: 10px 16px; border-bottom: 1px solid var(--ol-border); font-size: 12px; }
|
||||
.drop-zone {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue