Skip to content

Commit

Permalink
Nicer presentation of plugin buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
matthiask committed May 31, 2024
1 parent a2b7c54 commit 57cfc42
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 14 deletions.
19 changes: 15 additions & 4 deletions content_editor/static/content_editor/content_editor.css
Original file line number Diff line number Diff line change
Expand Up @@ -187,20 +187,27 @@ h3[draggable] {
z-index: 1982;
top: 0;
left: 0;
right: 10vw;
box-shadow: 0 0 3px 0 rgba(0, 0, 50, 0.3);

padding: 10px 20px 10px 10px;

column-width: 180px;
--_v: 8;
display: grid;
column-gap: 10px;
column-fill: balance;
grid-auto-flow: column;
grid-template-rows: repeat(var(--_v), minmax(0, 1fr));

opacity: 0;
visibility: none;
pointer-events: none;
}

@media screen and (max-width: 767px) {
.plugin-buttons {
display: block;
}
}

.plugin-buttons-visible .plugin-buttons {
opacity: 1;
visibility: visible;
Expand Down Expand Up @@ -271,7 +278,7 @@ h3[draggable] {
border: none;
}

.content-editor-hidden {
.content-editor-invisible {
/* We can't simply use display: none. Some admin widgets need to know
* their dimensions, so we can't have that -- use an alternative way
* to hide the modules. */
Expand All @@ -282,6 +289,10 @@ h3[draggable] {
margin: 0 !important;
}

.content-editor-hide {
display: none !important;
}

/* Used when dragging */
.placeholder {
height: 34px;
Expand Down
16 changes: 11 additions & 5 deletions content_editor/static/content_editor/content_editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@ django.jQuery(($) => {
addPluginIconsToInlines()

const orderMachineWrapper = $(".order-machine-wrapper")
const pluginButtons = qs(".plugin-buttons")
const orderMachine = $(".order-machine")
const machineEmptyMessage = $('<p class="hidden machine-message"/>')
.text(ContentEditor.messages.empty)
Expand Down Expand Up @@ -288,12 +289,17 @@ django.jQuery(($) => {
const isVisible =
pluginInCurrentRegion(plugin) &&
!/^_unknown_/.test(ContentEditor.currentRegion)
button.classList.toggle("content-editor-hidden", !isVisible)
button.classList.toggle("content-editor-hide", !isVisible)
visible += isVisible ? 1 : 0
})

if (visible) {
noPluginsMessage.hide()

pluginButtons.style.setProperty(
"--_v",
Math.max(7, Math.ceil(visible / 3)),
)
} else {
if (ContentEditor.currentRegion) {
noPluginsMessage.show()
Expand Down Expand Up @@ -421,13 +427,13 @@ django.jQuery(($) => {

function hideInlinesFromOtherRegions() {
const inlines = orderMachine.find(".inline-related:not(.empty-form)")
inlines.addClass("content-editor-hidden")
inlines.addClass("content-editor-invisible")
const shown = inlines.filter(
`[data-region="${ContentEditor.currentRegion}"]`,
)
machineEmptyMessage.addClass("hidden")
if (shown.length) {
shown.removeClass("content-editor-hidden")
shown.removeClass("content-editor-invisible")
} else {
machineEmptyMessage.removeClass("hidden")
}
Expand Down Expand Up @@ -605,10 +611,10 @@ django.jQuery(($) => {

$(document)
.on("content-editor:deactivate", (event, row) => {
row.find("fieldset").addClass("content-editor-hidden")
row.find("fieldset").addClass("content-editor-invisible")
})
.on("content-editor:activate", (event, row) => {
row.find("fieldset").removeClass("content-editor-hidden")
row.find("fieldset").removeClass("content-editor-invisible")
})

// Hide fieldsets of to-be-deleted inlines.
Expand Down
10 changes: 5 additions & 5 deletions content_editor/static/content_editor/tabbed_fieldsets.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* global django */
django.jQuery(function ($) {
django.jQuery(($) => {
var tabbed = $(".tabbed")
if (tabbed.length >= 1) {
var anchor = tabbed.eq(0)
Expand Down Expand Up @@ -35,7 +35,7 @@ django.jQuery(function ($) {
$title.addClass("tab")
$tabs.append($title)

$old.addClass("content-editor-hidden")
$old.addClass("content-editor-invisible")

$modules.append($old)
})
Expand All @@ -44,15 +44,15 @@ django.jQuery(function ($) {
var $tab = $(this)
if ($tab.hasClass("active")) {
$tab.removeClass("active")
$modules.children().addClass("content-editor-hidden")
$modules.children().addClass("content-editor-invisible")
} else {
$tabs.find(".active").removeClass("active")
$tab.addClass("active")
$modules
.children()
.addClass("content-editor-hidden")
.addClass("content-editor-invisible")
.eq($tab.data("index"))
.removeClass("content-editor-hidden")
.removeClass("content-editor-invisible")
}
})

Expand Down

0 comments on commit 57cfc42

Please sign in to comment.