Skip to content

Commit

Permalink
Merge pull request #1 from Mng-dev-ai/use-unique-classess-names-to-av…
Browse files Browse the repository at this point in the history 
…oid-conflicting-with-other-packages

refactor: Prefix class names with 'dma-' for package uniqueness
  • Loading branch information
@Mng-dev-ai
Mng-dev-ai authored Sep 3, 2024
2 parents 1618998 + dde22c8 commit 646cf0c
Show file tree
Hide file tree
Showing 5 changed files with 91 additions and 100 deletions.
2 changes: 1 addition & 1 deletion django_modal_actions/mixins.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ def get_modal_action_buttons(self, obj=None) -> str:
)
buttons.append(
format_html(
'<a class="historylink modal-action-button" href="{}">{}</a>',
'<a class="historylink dma-modal-action-button" href="{}">{}</a>',
url,
getattr(
func, "short_description", action.replace("_", " ").upper()
Expand Down
119 changes: 58 additions & 61 deletions django_modal_actions/static/django_modal_actions/css/modal_actions.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.modal {
.dma-modal {
display: none;
position: fixed;
z-index: 9999;
Expand All @@ -12,18 +12,18 @@
transition: opacity 0.3s ease;
}

.modal-content {
.dma-modal-content {
background-color: var(--body-bg);
color: var(--body-fg);
margin: 10% auto;
width: 90%;
max-width: 500px;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
animation: modal-appear 0.3s ease-out;
animation: dma-modal-appear 0.3s ease-out;
}

@keyframes modal-appear {
@keyframes dma-modal-appear {
from {
opacity: 0;
transform: translateY(-20px);
Expand All @@ -34,7 +34,7 @@
}
}

.modal-header {
.dma-modal-header {
background-color: var(--primary);
color: var(--header-link-color);
padding: 15px 20px;
Expand All @@ -45,13 +45,13 @@
border-top-right-radius: 8px;
}

.modal-header h2 {
.dma-modal-header h2 {
margin: 0;
font-size: 1.25rem;
font-weight: 500;
}

.modal-close {
.dma-modal-close {
color: var(--header-link-color);
background: none;
border: none;
Expand All @@ -63,29 +63,29 @@
transform 0.15s;
}

.modal-close:hover,
.modal-close:focus {
.dma-modal-close:hover,
.dma-modal-close:focus {
opacity: 1;
transform: scale(1.1);
}

.modal-body {
.dma-modal-body {
padding: 20px;
font-size: 0.9rem;
line-height: 1.6;
}

.modal-footer {
.dma-modal-footer {
background-color: var(--darkened-bg);
padding: 15px 20px;
text-align: right;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}

.button,
.modal-action-button,
.modal-footer .button {
.dma-button,
.dma-modal-action-button,
.dma-modal-footer .dma-button {
background-color: var(--button-bg);
color: var(--button-fg);
border: 1px solid var(--button-border);
Expand All @@ -99,58 +99,58 @@
transition: all 0.2s ease;
}

.button:hover,
.modal-action-button:hover,
.modal-footer .button:hover {
.dma-button:hover,
.dma-modal-action-button:hover,
.dma-modal-footer .dma-button:hover {
background-color: var(--button-hover-bg);
transform: translateY(-1px);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.button:active,
.modal-action-button:active,
.modal-footer .button:active {
.dma-button:active,
.dma-modal-action-button:active,
.dma-modal-footer .dma-button:active {
transform: translateY(0);
box-shadow: none;
}

.button.default,
.modal-action-button.default,
.modal-footer .button.default {
.dma-button.default,
.dma-modal-action-button.default,
.dma-modal-footer .dma-button.default {
background-color: var(--default-button-bg);
border-color: var(--default-button-border);
}

.button.default:hover,
.modal-action-button.default:hover,
.modal-footer .button.default:hover {
.dma-button.default:hover,
.dma-modal-action-button.default:hover,
.dma-modal-footer .dma-button.default:hover {
background-color: var(--default-button-hover-bg);
}

.modal-footer .button + .button {
.dma-modal-footer .dma-button + .dma-button {
margin-left: 10px;
}

.modal-action-button.historylink {
.dma-modal-action-button.historylink {
background-image: none;
padding-left: 15px;
}

#modal-action form p {
#dma-modal-action form p {
margin-bottom: 20px;
}

#modal-action form label {
#dma-modal-action form label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(--body-quiet-color);
}

#modal-action form input[type="text"],
#modal-action form input[type="email"],
#modal-action form select,
#modal-action form textarea {
#dma-modal-action form input[type="text"],
#dma-modal-action form input[type="email"],
#dma-modal-action form select,
#dma-modal-action form textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border-color);
Expand All @@ -162,89 +162,86 @@
box-shadow 0.2s;
}

#modal-action form input[type="text"]:focus,
#modal-action form input[type="email"]:focus,
#modal-action form select:focus,
#modal-action form textarea:focus {
#dma-modal-action form input[type="text"]:focus,
#dma-modal-action form input[type="email"]:focus,
#dma-modal-action form select:focus,
#dma-modal-action form textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.errorlist {
.dma-errorlist {
color: var(--error-fg);
background: var(--error-bg);
border: 1px solid var(--error-fg);
margin: 0 0 10px;
padding: 10px;
border-radius: 4px;
list-style-type: none;
}

.errorlist li {
.dma-errorlist li {
font-size: 0.85rem;
margin-bottom: 5px;
}

.errorlist li:last-child {
.dma-errorlist li:last-child {
margin-bottom: 0;
}

.alert {
.dma-alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}

.alert-danger {
.dma-alert-danger {
color: var(--error-fg);
background-color: var(--error-bg);
border-color: var(--error-fg);
}

.modal-close:focus-visible,
.button:focus-visible,
.modal-action-button:focus-visible {
.dma-modal-close:focus-visible,
.dma-button:focus-visible,
.dma-modal-action-button:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
.modal-content {
.dma-modal-content {
box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
}

#modal-action form input[type="text"],
#modal-action form input[type="email"],
#modal-action form select,
#modal-action form textarea {
#dma-modal-action form input[type="text"],
#dma-modal-action form input[type="email"],
#dma-modal-action form select,
#dma-modal-action form textarea {
background-color: var(--body-bg);
color: var(--body-fg);
}
}

@media (max-width: 767px) {
.modal-content {
.dma-modal-content {
width: 95%;
margin: 5% auto;
}

.modal-header h2 {
.dma-modal-header h2 {
font-size: 1.1rem;
}

.modal-body {
.dma-modal-body {
padding: 15px;
}

.modal-footer {
.dma-modal-footer {
padding: 12px 15px;
}

.button,
.modal-action-button,
.modal-footer .button {
.dma-button,
.dma-modal-action-button,
.dma-modal-footer .dma-button {
padding: 8px 12px;
font-size: 0.8rem;
}
Expand Down
24 changes: 12 additions & 12 deletions django_modal_actions/static/django_modal_actions/js/modal_actions.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
(function ($) {
$(document).ready(function () {
var $modal = $(
'<div id="modal-action" class="modal"><div class="modal-content"></div></div>',
'<div id="dma-modal-action" class="dma-modal"><div class="dma-modal-content"></div></div>',
).appendTo("body");
var $modalContent = $modal.find(".modal-content");
var $modalContent = $modal.find(".dma-modal-content");

$(document).on("click", ".modal-action-button", function (e) {
$(document).on("click", ".dma-modal-action-button", function (e) {
e.preventDefault();
var url = $(this).attr("href");
var isListAction = url.includes("list-modal-action");
Expand All @@ -25,26 +25,26 @@

$(document).on(
"click",
"#modal-action .cancel, #modal-action .modal-close",
"#dma-modal-action .cancel, #dma-modal-action .dma-modal-close",
function (e) {
e.preventDefault();
$modal.hide();
},
);

function displayErrors(errors) {
$(".errorlist, .alert-danger").remove();
$(".dma-errorlist, .dma-alert-danger").remove();

$.each(errors, function (field, messages) {
if (field === "__all__") {
var $generalError = $(
'<div class="alert alert-danger" role="alert"></div>',
'<div class="dma-alert dma-alert-danger" role="alert"></div>',
);
$generalError.text(messages.join(" "));
$("#modal-action form").prepend($generalError);
$("#dma-modal-action form").prepend($generalError);
} else {
var $field = $("#id_" + field);
var $errorList = $('<ul class="errorlist"></ul>');
var $errorList = $('<ul class="dma-errorlist"></ul>');
$.each(messages, function (index, message) {
$errorList.append($("<li></li>").text(message));
});
Expand All @@ -54,13 +54,13 @@

if (Object.keys(errors).length > 0 && !errors.hasOwnProperty("__all__")) {
var $generalError = $(
'<div class="alert alert-danger" role="alert">Please correct the errors below.</div>',
'<div class="dma-alert dma-alert-danger" role="alert">Please correct the errors below.</div>',
);
$("#modal-action form").prepend($generalError);
$("#dma-modal-action form").prepend($generalError);
}
}

$(document).on("submit", "#modal-action form", function (e) {
$(document).on("submit", "#dma-modal-action form", function (e) {
e.preventDefault();
var form = $(this);
var url = form.attr("action");
Expand Down Expand Up @@ -94,7 +94,7 @@
});

$(window).on("click", function (e) {
if ($(e.target).is(".modal")) {
if ($(e.target).is(".dma-modal")) {
$modal.hide();
}
});
Expand Down
Loading

0 comments on commit 646cf0c

Please sign in to comment.