extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2024-11-23 00:33:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #779 from patriceac/Fix-card-names-and-toggling

Browse Source 
Fix card names and toggling
This commit is contained in:
cmdr2 2023-02-09 19:43:57 +05:30 committed by GitHub
commit 4f3d2bd120
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui/media/js/image-modifiers.js
View File

@ -16,7 +16,7 @@ const modifierThumbnailPath = 'media/modifier-thumbnails'
const activeCardClass = 'modifier-card-active' const activeCardClass = 'modifier-card-active'
const CUSTOM_MODIFIERS_KEY = "customModifiers" const CUSTOM_MODIFIERS_KEY = "customModifiers"
function createModifierCard(name, previews) { function createModifierCard(name, previews, removeBy) {
const modifierCard = document.createElement('div') const modifierCard = document.createElement('div')
modifierCard.className = 'modifier-card' modifierCard.className = 'modifier-card'
modifierCard.innerHTML = ` modifierCard.innerHTML = `
@ -44,10 +44,11 @@ function createModifierCard(name, previews) {
} }
const maxLabelLength = 30 const maxLabelLength = 30
const nameWithoutBy = name.replace('by ', '') const cardLabel = removeBy ? name.replace('by ', '') : name
if(nameWithoutBy.length <= maxLabelLength) { if(cardLabel.length <= maxLabelLength) {
label.querySelector('p').innerText = nameWithoutBy label.querySelector('p').innerText = cardLabel
label.querySelector('p').dataset.fullName = name // preserve the full name
} else { } else {
const tooltipText = document.createElement('span') const tooltipText = document.createElement('span')
tooltipText.className = 'tooltip-text' tooltipText.className = 'tooltip-text'
@ -56,13 +57,13 @@ function createModifierCard(name, previews) {
label.classList.add('tooltip') label.classList.add('tooltip')
label.appendChild(tooltipText) label.appendChild(tooltipText)
label.querySelector('p').innerText = nameWithoutBy.substring(0, maxLabelLength) + '...' label.querySelector('p').innerText = cardLabel.substring(0, maxLabelLength) + '...'
} }
return modifierCard return modifierCard
} }
function createModifierGroup(modifierGroup, initiallyExpanded) { function createModifierGroup(modifierGroup, initiallyExpanded, removeBy) {
const title = modifierGroup.category const title = modifierGroup.category
const modifiers = modifierGroup.modifiers const modifiers = modifierGroup.modifiers
@ -81,7 +82,7 @@ function createModifierGroup(modifierGroup, initiallyExpanded) {
const modifierName = modObj.modifier const modifierName = modObj.modifier
const modifierPreviews = modObj?.previews?.map(preview => `${modifierThumbnailPath}/${preview.path}`) const modifierPreviews = modObj?.previews?.map(preview => `${modifierThumbnailPath}/${preview.path}`)
const modifierCard = createModifierCard(modifierName, modifierPreviews) const modifierCard = createModifierCard(modifierName, modifierPreviews, removeBy)
if(typeof modifierCard == 'object') { if(typeof modifierCard == 'object') {
modifiersEl.appendChild(modifierCard) modifiersEl.appendChild(modifierCard)
@ -137,7 +138,7 @@ async function loadModifiers() {
res.reverse() res.reverse()
res.forEach((modifierGroup, idx) => { res.forEach((modifierGroup, idx) => {
createModifierGroup(modifierGroup, idx === res.length - 1) createModifierGroup(modifierGroup, idx === res.length - 1, modifierGroup === 'Artist' ? true : false) // only remove "By " for artists
}) })
createCollapsibles(editorModifierEntries) createCollapsibles(editorModifierEntries)
@ -181,7 +182,7 @@ function refreshModifiersState(newTags) {
} }
}) })
if (found == false) { // custom tag went missing, create one here if (found == false) { // custom tag went missing, create one here
let modifierCard = createModifierCard(tag, undefined) // create a modifier card for the missing tag, no image let modifierCard = createModifierCard(tag, undefined, false) // create a modifier card for the missing tag, no image
modifierCard.addEventListener('click', () => { modifierCard.addEventListener('click', () => {
if (activeTags.map(x => x.name).includes(tag)) { if (activeTags.map(x => x.name).includes(tag)) {

2
ui/plugins/ui/modifiers-toggle.plugin.js
View File

@ -38,7 +38,7 @@
i.parentElement.classList.add('modifier-toggle-inactive') i.parentElement.classList.add('modifier-toggle-inactive')
} }
// refresh activeTags // refresh activeTags
let modifierName = i.parentElement.getElementsByClassName('modifier-card-label')[0].getElementsByTagName("p")[0].innerText let modifierName = i.parentElement.getElementsByClassName('modifier-card-label')[0].getElementsByTagName("p")[0].dataset.fullName
activeTags = activeTags.map(obj => { activeTags = activeTags.map(obj => {
if (obj.name === modifierName) { if (obj.name === modifierName) {
return {...obj, inactive: (obj.element.classList.contains('modifier-toggle-inactive'))}; return {...obj, inactive: (obj.element.classList.contains('modifier-toggle-inactive'))};