mirror of
https://github.com/discourse/discourse.git
synced 2024-12-02 08:33:41 +08:00
88ec2320dc
Previously we were using 'mouseup', which meant that if you started the click inside, and then dragged to outside the modal, it would still close. This kind of dragging action is common when selecting text, and having it close the modal can be very frustrating. Simply switching to a 'click' listener doesn't totally solve the problem, because when a click event involves dragging from one element to another, the browser will fire the event on "the most specific ancestor element that contained both elements". For modals, the most specific common ancestor was still the `modal-middle-container`, which would cause the modal to close. Therefore, this commit sets the modal containers to have `pointer-events: none`, and sets up the click listener on the `.modal-backdrop` element, which is **adjacent** to the modal in the DOM. That means that click events fired on any ancestors of the modal will not accidentally trigger closure.
793 lines
13 KiB
SCSS
793 lines
13 KiB
SCSS
// Modal wrappers
|
|
|
|
.fixed-modal:not(#discourse-modal) {
|
|
// new <DModal /> only, not <DModalLegacy />
|
|
pointer-events: none; // Allow clicks through wrappers so they hit the adjacent backdrop element
|
|
}
|
|
|
|
.modal-outer-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.modal-middle-container {
|
|
display: flex;
|
|
height: 100%;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal-inner-container {
|
|
pointer-events: auto;
|
|
--modal-max-width: 47em; // set in ems to scale with user font-size
|
|
box-sizing: border-box;
|
|
flex: 0 1 auto;
|
|
margin: 0 auto;
|
|
max-width: var(--modal-max-width);
|
|
background-color: var(--secondary);
|
|
box-shadow: var(--shadow-modal);
|
|
|
|
.select-kit {
|
|
width: 220px;
|
|
|
|
&.tag-chooser {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-open {
|
|
.popover {
|
|
z-index: z("modal", "popover");
|
|
}
|
|
.tooltip {
|
|
z-index: z("modal", "tooltip");
|
|
}
|
|
}
|
|
|
|
.bootbox.modal {
|
|
position: fixed;
|
|
z-index: z("modal", "content");
|
|
overflow: auto;
|
|
height: auto;
|
|
background-color: var(--secondary);
|
|
box-shadow: var(--shadow-card);
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.input-hint-text {
|
|
margin-left: 0.5em;
|
|
color: var(--secondary-high);
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
padding: 10px 15px;
|
|
border-bottom: 1px solid var(--primary-low);
|
|
align-items: center;
|
|
|
|
.title {
|
|
margin-right: 1em;
|
|
|
|
h3 {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.modal-close {
|
|
order: 2;
|
|
margin-left: auto;
|
|
align-self: start;
|
|
padding: 0.15em 0;
|
|
|
|
.close {
|
|
color: var(--primary-high);
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-backdrop {
|
|
user-select: none;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: z("modal", "overlay");
|
|
background-color: #111;
|
|
&.fade {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.modal-backdrop,
|
|
.modal-backdrop.fade.in {
|
|
animation: fade 0.3s;
|
|
@media (prefers-reduced-motion) {
|
|
animation-duration: 0s;
|
|
}
|
|
opacity: 0.9;
|
|
filter: alpha(opacity=90);
|
|
}
|
|
|
|
// fade in
|
|
@keyframes fade {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
.inline-modal {
|
|
.modal-inner-container {
|
|
border: 1px solid var(--secondary-medium);
|
|
}
|
|
}
|
|
|
|
.fixed-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: z("modal", "content");
|
|
overflow: auto;
|
|
|
|
html.keyboard-visible body.ios-safari-composer-hacks & {
|
|
height: calc(var(--composer-vh, 1vh) * 100);
|
|
.modal-inner-container {
|
|
max-height: 100%;
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
|
|
&:not(.bookmark-reminder-modal):not(.history-modal):not(
|
|
.sidebar__edit-navigation-menu__modal
|
|
) {
|
|
.modal-body:not(.reorder-categories):not(.poll-ui-builder):not(
|
|
.poll-breakdown
|
|
) {
|
|
max-height: 80vh !important;
|
|
@media screen and (max-height: 500px) {
|
|
max-height: 65vh !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-form {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
padding: 14px 15px 10px;
|
|
border-top: 1px solid var(--primary-low);
|
|
gap: 0.3em 0;
|
|
.btn {
|
|
margin: 0 0.75em 0 0;
|
|
&[href] {
|
|
min-height: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal {
|
|
.nav {
|
|
padding: 10px 30px 10px 15px;
|
|
background-color: var(--secondary);
|
|
li > a {
|
|
font-size: var(--font-0);
|
|
}
|
|
border-bottom: 1px solid var(--primary-low);
|
|
}
|
|
|
|
&.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.modal-body {
|
|
overflow-y: auto;
|
|
max-height: 400px;
|
|
padding: 1em;
|
|
|
|
&.full-height-modal {
|
|
max-height: calc(100vh - 150px);
|
|
}
|
|
|
|
&.insert-link {
|
|
overflow-y: visible;
|
|
input {
|
|
min-width: 300px;
|
|
}
|
|
|
|
.inputs {
|
|
position: relative;
|
|
.spinner {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: -15px;
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
.internal-link-results {
|
|
position: absolute;
|
|
top: 70%;
|
|
padding: 5px 10px;
|
|
box-shadow: var(--shadow-card);
|
|
z-index: 5;
|
|
background-color: var(--secondary);
|
|
max-height: 150px;
|
|
width: 90%;
|
|
overflow-y: auto;
|
|
> .search-link {
|
|
padding: 6px;
|
|
border-bottom: 1px solid var(--primary-low);
|
|
cursor: pointer;
|
|
display: block;
|
|
&:hover,
|
|
&:focus {
|
|
background-color: var(--highlight-bg);
|
|
}
|
|
.search-category {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.discourse-tags {
|
|
font-size: var(--font-down-1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
textarea {
|
|
width: 100%;
|
|
height: 80px;
|
|
box-sizing: border-box;
|
|
}
|
|
p {
|
|
font-size: var(--font-0);
|
|
}
|
|
.archetype-option {
|
|
margin-bottom: 20px;
|
|
}
|
|
.warning {
|
|
color: var(--danger) !important;
|
|
}
|
|
}
|
|
|
|
.password-confirmation {
|
|
display: none;
|
|
}
|
|
|
|
section.field {
|
|
padding: 0.25em 0;
|
|
margin-bottom: 5px;
|
|
&.with-items {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
.field-item {
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
// password reset modal
|
|
.modal-body.forgot-password-modal p {
|
|
font-size: var(--font-0);
|
|
}
|
|
|
|
pre code {
|
|
white-space: pre-wrap;
|
|
max-width: var(--modal-max-width);
|
|
}
|
|
}
|
|
|
|
.reply-where-modal {
|
|
.dialog-content {
|
|
width: 100%;
|
|
min-width: unset;
|
|
max-width: 30em;
|
|
}
|
|
|
|
.dialog-footer {
|
|
display: block;
|
|
}
|
|
|
|
.btn {
|
|
display: block;
|
|
text-align: left;
|
|
margin-bottom: 0.75em;
|
|
margin-right: 0;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
|
|
&.dialog-close {
|
|
display: none;
|
|
}
|
|
|
|
&.btn-reply-on-original {
|
|
--text-color: var(--secondary);
|
|
}
|
|
|
|
&.btn-reply-where__cancel {
|
|
padding-left: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
&.btn-reply-here {
|
|
--text-color: var(--primary);
|
|
.discourse-no-touch & {
|
|
&:hover {
|
|
--text-color: var(--secondary);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.btn-reply-where {
|
|
min-height: 3em; // for situations when there are no categories/tags
|
|
}
|
|
|
|
.fancy-title {
|
|
display: inline-block;
|
|
width: 100%;
|
|
|
|
@include ellipsis;
|
|
}
|
|
|
|
.topic-title__top-line {
|
|
display: flex;
|
|
align-items: baseline;
|
|
color: var(--text-color);
|
|
font-size: var(--font-up-1);
|
|
.d-icon {
|
|
color: var(--text-color);
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.topic-statuses {
|
|
display: flex;
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.topic-title__bottom-line {
|
|
margin-top: 0.15em;
|
|
display: flex;
|
|
align-items: baseline;
|
|
.discourse-tags {
|
|
font-size: var(--font-down-1);
|
|
}
|
|
.category-name,
|
|
.discourse-tag {
|
|
color: var(--text-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.delete-user-modal {
|
|
.modal-footer {
|
|
.btn {
|
|
line-height: var(--line-height-medium);
|
|
}
|
|
}
|
|
}
|
|
|
|
.admin-delete-user-posts-progress-modal {
|
|
.progress-bar {
|
|
height: 15px;
|
|
position: relative;
|
|
background: var(--primary-low-mid);
|
|
border-radius: 25px;
|
|
overflow: hidden;
|
|
margin: 30px 0 20px;
|
|
span {
|
|
display: block;
|
|
width: 0%;
|
|
height: 100%;
|
|
background-color: var(--tertiary);
|
|
position: relative;
|
|
transition: width 0.6s linear;
|
|
}
|
|
}
|
|
}
|
|
|
|
.incoming-email-modal {
|
|
max-height: 80vh;
|
|
|
|
.btn {
|
|
transition: none;
|
|
background-color: transparent;
|
|
margin-right: 5px;
|
|
&:hover,
|
|
&.active {
|
|
color: var(--primary);
|
|
}
|
|
&.active {
|
|
font-weight: bold;
|
|
}
|
|
&:focus {
|
|
outline: 2px solid var(--primary-low);
|
|
}
|
|
}
|
|
.incoming-email-tabs {
|
|
margin-bottom: 15px;
|
|
}
|
|
.incoming-email-content {
|
|
height: 300px;
|
|
max-width: 100%;
|
|
width: 90vw; // forcing textarea wider
|
|
textarea,
|
|
.incoming-email-html-part {
|
|
height: 95%;
|
|
border: none;
|
|
border-top: 1px solid var(--primary-low);
|
|
padding-top: 10px;
|
|
width: 100%;
|
|
}
|
|
textarea {
|
|
font-family: monospace;
|
|
resize: none;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
.incoming-email-html-part {
|
|
width: calc(100% - 36px);
|
|
padding: 10px 4px 4px 4px;
|
|
}
|
|
@media screen and (max-width: 760px) {
|
|
.incoming-email-html-part {
|
|
width: calc(100% - 10px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal .modal-body.change-timestamp {
|
|
#date-container {
|
|
.pika-single {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
|
|
.date-picker-wrapper,
|
|
input[type="time"] {
|
|
width: 50%;
|
|
}
|
|
|
|
.date-picker-wrapper {
|
|
display: flex;
|
|
flex: 1;
|
|
|
|
.date-picker {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
input.date-picker,
|
|
input[type="time"] {
|
|
text-align: left;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.change-timestamp {
|
|
width: 28em; // scales with user font-size
|
|
max-width: 90vw; // prevents overflow due to extra large user font-size
|
|
}
|
|
|
|
.change-timestamp {
|
|
#date-container {
|
|
.pika-single {
|
|
position: relative !important; // overriding another important
|
|
display: inline-block;
|
|
margin-top: 0.5em;
|
|
}
|
|
}
|
|
|
|
.date-picker-wrapper {
|
|
min-width: 130px;
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
input[type="time"] {
|
|
width: 130px;
|
|
}
|
|
|
|
form {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.flag-modal-body {
|
|
max-height: 450px;
|
|
.flag-action-type-details {
|
|
width: 100%;
|
|
max-width: 500px;
|
|
line-height: var(--line-height-large);
|
|
}
|
|
}
|
|
|
|
.flag-message {
|
|
margin: 0;
|
|
}
|
|
|
|
.custom-message-length {
|
|
color: var(--primary-medium);
|
|
font-size: var(--font-down-1);
|
|
}
|
|
|
|
.jump-to-post-modal {
|
|
.modal-inner-container {
|
|
max-width: 350px;
|
|
}
|
|
.modal-body {
|
|
overflow-y: visible;
|
|
#post-jump {
|
|
margin: 0;
|
|
width: 100px;
|
|
}
|
|
|
|
.date-picker {
|
|
margin: 0;
|
|
width: 180px;
|
|
}
|
|
|
|
.input-hint-text {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.jump-to-post-control .index {
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
.jump-to-date-control {
|
|
display: flex;
|
|
align-items: center;
|
|
.input-hint-text {
|
|
margin-left: 0;
|
|
margin-right: 0.5em;
|
|
}
|
|
}
|
|
|
|
.separator {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0.5em auto;
|
|
|
|
hr {
|
|
flex: 1 0 0px;
|
|
}
|
|
|
|
.text {
|
|
margin: 0 0.5em 0 0;
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// move-to topic modal
|
|
.choose-topic-modal {
|
|
#split-topic-name,
|
|
#choose-topic-title,
|
|
#choose-message-title {
|
|
width: 100%;
|
|
}
|
|
|
|
.category-chooser {
|
|
margin-bottom: 9px;
|
|
width: 100% !important;
|
|
.category-row {
|
|
max-width: 485px;
|
|
}
|
|
}
|
|
|
|
.controls.existing-topic {
|
|
margin-bottom: 0.75em;
|
|
}
|
|
|
|
// move to existing topic
|
|
.existing-topic {
|
|
.radio {
|
|
flex-wrap: wrap;
|
|
}
|
|
.topic-title {
|
|
max-width: 90%;
|
|
}
|
|
.topic-categories {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
#choosing-topic {
|
|
form {
|
|
hr {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.publish-page-modal {
|
|
.modal-body {
|
|
p.publish-description {
|
|
margin-top: 0;
|
|
}
|
|
input.publish-slug {
|
|
width: 100%;
|
|
}
|
|
|
|
.publish-url {
|
|
margin-bottom: 1em;
|
|
.example-url,
|
|
.invalid-slug {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.publish-slug:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.controls {
|
|
margin-bottom: 1em;
|
|
|
|
.description {
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
|
|
.close-publish-page {
|
|
margin-left: auto;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ignore-duration-with-username-modal {
|
|
.future-date-input {
|
|
margin-top: 1em;
|
|
}
|
|
}
|
|
|
|
.modal:not(.has-tabs) {
|
|
.modal-tab {
|
|
position: absolute;
|
|
width: 95%;
|
|
}
|
|
}
|
|
|
|
.modal {
|
|
&.has-tabs {
|
|
.modal-tabs {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
flex: 1 0 auto;
|
|
margin: 0;
|
|
|
|
.modal-tab {
|
|
list-style: none;
|
|
padding: 4px 8px;
|
|
margin-right: 4px;
|
|
cursor: pointer;
|
|
|
|
&.is-active {
|
|
color: var(--secondary);
|
|
background: var(--danger);
|
|
|
|
&.single-tab {
|
|
background: none;
|
|
color: var(--primary);
|
|
padding: 0;
|
|
font-size: var(--font-up-3);
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.topic-bulk-actions-modal {
|
|
.modal-inner-container {
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
p {
|
|
margin-top: 0;
|
|
}
|
|
.bulk-buttons {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
|
|
gap: 0.5em;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
.d-button-label {
|
|
@include ellipsis;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bulk-notification-list {
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
.notification-level-radio {
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
margin-bottom: 0.5em;
|
|
.description {
|
|
width: 100%;
|
|
margin-top: 0.25em;
|
|
}
|
|
}
|
|
|
|
.modal.edit-slow-mode-modal {
|
|
.slow-mode-label {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.alert.alert-info {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.input-small {
|
|
width: 10%;
|
|
}
|
|
}
|
|
|
|
.group-add-members-modal {
|
|
.input-group {
|
|
margin-bottom: 0.5em;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.user-chooser {
|
|
width: calc(100%);
|
|
}
|
|
}
|
|
|
|
.modal-body .codeblock-buttons {
|
|
margin: 0;
|
|
|
|
button {
|
|
top: 21px;
|
|
}
|
|
}
|
|
|
|
.json-editor-btn-delete {
|
|
@extend .btn-danger;
|
|
@extend .no-text;
|
|
}
|
|
|
|
.json-editor-btn-collapse {
|
|
@extend .no-text;
|
|
@extend .btn-flat;
|
|
@extend .btn-small;
|
|
}
|