1580158
/
sd-webui-prompt-all-in-one
mirror of https://github.com/Physton/sd-webui-prompt-all-in-one
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

#231 [Feature] Optimized Pop-up for Extra Networks

pull/292/head
Physton 2023-09-11 18:07:42 +08:00
parent 63d683bc6a
commit acceae9729
4 changed files with 116 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/src/App.vue
View File

@ -773,6 +773,19 @@ export default {
// this.$refs.blacklist.open()
// this.$refs.hotkey.open()
// this.$refs.translateSetting.open(this.translateApi)
/*this.$refs.extraNetworksPopup.show({
getBoundingClientRect: () => {
return {
top: 0,
left: 0,
width: 0,
height: 0,
bottom: 0,
right: 0,
}
},
offsetHeight: 26,
}, 'FGOTiamatv2')*/
/*this.onShowFavorite('phystonPrompt_txt2img_prompt', {
clientY: 150,
clientX: 283,

30
src/src/components/extraNetworksPopup.vue
View File

@ -26,16 +26,22 @@
</div>
<div class="info-raw" v-if="data.trainedWords && data.trainedWords.length">
<div class="raw-name">{{ getLang('trained_words') }}</div>
<div class="raw-value" @click="copy(data.trainedWords.join(', '))">{{ data.trainedWords.join(', ') }}</div>
<div class="raw-value">
<div class="raw-words" v-for="(value) in data.trainedWords" :key="value" @click="onUseKeywordsClick(value)">{{ value }}</div>
</div>
</div>
<div class="info-raw" v-if="data.description">
<div class="raw-name">{{ getLang('description') }}</div>
<div class="raw-value description" v-tooltip="data.description" @click="copy(data.description)">{{ data.description }}</div>
<div class="raw-value" v-tooltip="data.description" @click="copy(data.description)"><div class="raw-description">{{ data.description }}</div></div>
</div>
<div class="info-btns">
<div class="info-raw" v-if="data.civitaiUrl">
<div class="raw-name">Civitai</div>
<div class="raw-value"><a :href="data.civitaiUrl" target="_blank" class="raw-link">{{ data.civitaiUrl }}</a></div>
</div>
<!--<div class="info-btns">
<div class="info-btn hover-scale-120" v-if="data.modelId" @click="onOpenCivitaiClick">{{ getLang('open_civitai') }}</div>
<div class="info-btn hover-scale-120" v-if="data.trainedWords && data.trainedWords.length" @click="onUseKeywordsClick">{{ getLang('use_keywords') }}</div>
</div>
</div>-->
</div>
</div>
</div>
@ -120,6 +126,7 @@ export default {
this.data.trainedWords = data.civitai_info && data.civitai_info.trainedWords ? data.civitai_info.trainedWords : []
this.data.preview = data.preview || (data.civitai_info && data.civitai_info.images && data.civitai_info.images.length ? data.civitai_info.images[0] : '')
this.data.modelId = data.civitai_info && data.civitai_info.modelId ? data.civitai_info.modelId : ''
this.data.civitaiUrl = this.data.modelId ? this.getCivitaiUrl(this.data.modelId) : ''
this.$nextTick(() => {
const eRect = e.getBoundingClientRect()
this.style.top = (eRect.top + e.offsetHeight + 4) + 'px'
@ -172,17 +179,28 @@ export default {
this.$toastr.error(this.getLang('failed'))
})
},
getCivitaiUrl(modelId) {
return globals.civitaiUrl + '/models/' + modelId
},
onOpenCivitaiClick() {
if (!this.data.modelId) return
let url = globals.civitaiUrl + '/models/' + this.data.modelId
let url = this.getCivitaiUrl(this.data.modelId)
window.open(url)
},
onUseKeywordsClick() {
/*onUseKeywordsClick() {
if (!this.data.trainedWords || !this.data.trainedWords.length) return
if (!this.useCallback) return
if (typeof this.useCallback !== 'function') return
this.useCallback(this.data.trainedWords)
this.$toastr.success(this.getLang('success'))
},*/
onUseKeywordsClick(value) {
if (!value) return
if (typeof this.useCallback !== 'function') return
let tags = common.splitTags(value)
console.log(tags)
this.useCallback(tags)
// this.$toastr.success(this.getLang('success'))
},
},
}

102
styles/main.less
View File

@ -2056,12 +2056,13 @@
--ppenp-top: 0;
--ppenp-left: 0;
--ppenp-z-index: 999;
--ppenp-background: rgba(0, 0, 0, 0.8);
--ppenp-background: rgba(0, 0, 0, 0.95);
--ppenp-border-radius: 6px;
--ppenp-color: #fff;
--ppenp-overflow: hidden;
--ppenp-box-shadow: 0 0 3px 0 @common-blue;
--ppenp-box-shadow: 0 0 4px 1px #ffffffa6;
--ppenp-box-sizing: border-box;
--ppenp-border: 1px solid #ccc;
// .physton-prompt-extra-networks-popup .popup-main
--ppenp-popupMain-display: flex;
@ -2073,35 +2074,60 @@
--ppenp-pm-infoPreview-height: 0;
--ppenp-pm-infoPreview-display: block;
// .physton-prompt-extra-networks-popup .popup-main .info-raws
--ppenp-pm-infoRaws-display: table;
// .physton-prompt-extra-networks-popup .popup-main .info-raws .info-raw
--ppenp-pm-ir-infoRaw-display: flex;
--ppenp-pm-ir-infoRaw-justify-content: space-between;
--ppenp-pm-ir-infoRaw-align-items: flex-start;
--ppenp-pm-ir-infoRaw-padding: 2px 5px;
--ppenp-pm-ir-infoRaw-border-bottom: 1px dashed rgba(186, 186, 186, .2);
--ppenp-pm-ir-infoRaw-display: table-row;
// .physton-prompt-extra-networks-popup .popup-main .info-raws .info-raw .raw-name, .raw-value
--ppenp-pm-ir-ir-rawNameRawValue-margin: 2px;
--ppenp-pm-ir-ir-rawNameRawValue-padding: 2px;
--ppenp-pm-ir-ir-rawNameRawValue-display: table-cell;
--ppenp-pm-ir-ir-rawNameRawValue-border-bottom: 1px dashed rgba(186, 186, 186, .2);
// .physton-prompt-extra-networks-popup .popup-main .info-raws .info-raw .raw-name
--ppenp-pm-ir-ir-rawName-color: #fff;
--ppenp-pm-ir-ir-rawName-white-space: nowrap;
--ppenp-pm-ir-ir-rawName-margin-right: 20px;
--ppenp-pm-ir-ir-rawName-padding-right: 10px;
--ppenp-pm-ir-ir-rawName-font-size: 12px;
--ppenp-pm-ir-ir-rawName-line-height: 16px;
--ppenp-pm-ir-ir-rawName-background: #25262b;
// .physton-prompt-extra-networks-popup .popup-main .info-raws .info-raw .raw-value
--ppenp-pm-ir-ir-rawValue-flex: 1;
--ppenp-pm-ir-ir-rawValue-color: #fff;
--ppenp-pm-ir-ir-rawValue-white-space: break-spaces;
--ppenp-pm-ir-ir-rawValue-word-break: break-all;
--ppenp-pm-ir-ir-rawValue-width: 250px;
--ppenp-pm-ir-ir-rawValue-text-align: right;
--ppenp-pm-ir-ir-rawValue-text-align: left;
--ppenp-pm-ir-ir-rawValue-font-size: 12px;
--ppenp-pm-ir-ir-rawValue-line-height: 16px;
--ppenp-pm-ir-ir-rawValue-cursor: pointer;
// .physton-prompt-extra-networks-popup .popup-main .info-raws .info-raw .description
--ppenp-pm-ir-ir-description-max-height: 32px;
--ppenp-pm-ir-ir-description-overflow: hidden;
--ppenp-pm-ir-ir-description-text-overflow: ellipsis;
// .physton-prompt-extra-networks-popup .popup-main .info-raws .info-raw .raw-description
--ppenp-pm-ir-ir-rawDescription-display: -webkit-box;
--ppenp-pm-ir-ir-rawDescription--webkit-box-orient: vertical;
--ppenp-pm-ir-ir-rawDescription--webkit-line-clamp: 2;
--ppenp-pm-ir-ir-rawDescription-max-height: 32px;
--ppenp-pm-ir-ir-rawDescription-overflow: hidden;
--ppenp-pm-ir-ir-rawDescription-text-overflow: ellipsis;
// .physton-prompt-extra-networks-popup .popup-main .info-raws .info-raw .raw-words
--ppenp-pm-ir-ir-rawWords-background: #0c4a68;
--ppenp-pm-ir-ir-rawWords-display: inline-block;
--ppenp-pm-ir-ir-rawWords-padding: 2px 6px;
--ppenp-pm-ir-ir-rawWords-border-radius: 4px;
--ppenp-pm-ir-ir-rawWords-margin: 2px;
--ppenp-pm-ir-ir-rawWords-font-size: 12px;
--ppenp-pm-ir-ir-rawWords-line-height: 14px;
// .physton-prompt-extra-networks-popup .popup-main .info-raws .info-raw .raw-words:hover
--ppenp-pm-ir-ir-rawWordsLastChild-background: #146f9b;
// .physton-prompt-extra-networks-popup .popup-main .info-raws .info-raw .raw-link
--ppenp-pm-ir-ir-rawLink-font-size: 12px;
--ppenp-pm-ir-ir-rawLink-color: #06a7f4;
--ppenp-pm-ir-ir-rawLink-text-decoration: underline;
// .physton-prompt-extra-networks-popup .popup-main .info-btns
--ppenp-pm-infoBtns-display: flex;
@ -4755,6 +4781,7 @@
overflow: var(--ppenp-overflow);
box-shadow: var(--ppenp-box-shadow);
box-sizing: var(--ppenp-box-sizing);
border: var(--ppenp-border);
.popup-main {
display: var(--ppenp-popupMain-display);
@ -4768,24 +4795,28 @@
}
.info-raws {
display: var(--ppenp-pm-infoRaws-display);
.info-raw {
display: var(--ppenp-pm-ir-infoRaw-display);
justify-content: var(--ppenp-pm-ir-infoRaw-justify-content);
align-items: var(--ppenp-pm-ir-infoRaw-align-items);
padding: var(--ppenp-pm-ir-infoRaw-padding);
border-bottom: var(--ppenp-pm-ir-infoRaw-border-bottom);
.raw-name, .raw-value {
margin: var(--ppenp-pm-ir-ir-rawNameRawValue-margin);
padding: var(--ppenp-pm-ir-ir-rawNameRawValue-padding);
display: var(--ppenp-pm-ir-ir-rawNameRawValue-display);
border-bottom: var(--ppenp-pm-ir-ir-rawNameRawValue-border-bottom);
}
.raw-name {
color: var(--ppenp-pm-ir-ir-rawName-color);
white-space: var(--ppenp-pm-ir-ir-rawName-white-space);
margin-right: var(--ppenp-pm-ir-ir-rawName-margin-right);
padding-right: var(--ppenp-pm-ir-ir-rawName-padding-right);
font-size: var(--ppenp-pm-ir-ir-rawName-font-size);
line-height: var(--ppenp-pm-ir-ir-rawName-line-height);
background: var(--ppenp-pm-ir-ir-rawName-background);
}
.raw-value {
flex: var(--ppenp-pm-ir-ir-rawValue-flex);
color: var(--ppenp-pm-ir-ir-rawValue-color);
white-space: var(--ppenp-pm-ir-ir-rawValue-white-space);
word-break: var(--ppenp-pm-ir-ir-rawValue-word-break);
@ -4800,10 +4831,33 @@
user-select: none;
}
.description {
max-height: var(--ppenp-pm-ir-ir-description-max-height);
overflow: var(--ppenp-pm-ir-ir-description-overflow);
text-overflow: var(--ppenp-pm-ir-ir-description-text-overflow);
.raw-description {
display: var(--ppenp-pm-ir-ir-rawDescription-display);
-webkit-box-orient: var(--ppenp-pm-ir-ir-rawDescription--webkit-box-orient);
-webkit-line-clamp: var(--ppenp-pm-ir-ir-rawDescription--webkit-line-clamp);
max-height: var(--ppenp-pm-ir-ir-rawDescription-max-height);
overflow: var(--ppenp-pm-ir-ir-rawDescription-overflow);
text-overflow: var(--ppenp-pm-ir-ir-rawDescription-text-overflow);
}
.raw-words {
background: var(--ppenp-pm-ir-ir-rawWords-background);
display: var(--ppenp-pm-ir-ir-rawWords-display);
padding: var(--ppenp-pm-ir-ir-rawWords-padding);
border-radius: var(--ppenp-pm-ir-ir-rawWords-border-radius);
margin: var(--ppenp-pm-ir-ir-rawWords-margin);
font-size: var(--ppenp-pm-ir-ir-rawWords-font-size);
line-height: var(--ppenp-pm-ir-ir-rawWords-line-height);
&:hover {
background: var(--ppenp-pm-ir-ir-rawWordsLastChild-background);
}
}
.raw-link {
font-size: var(--ppenp-pm-ir-ir-rawLink-font-size);
color: var(--ppenp-pm-ir-ir-rawLink-color);
text-decoration: var(--ppenp-pm-ir-ir-rawLink-text-decoration);
}
}
}

2
styles/main.min.css vendored
View File

File diff suppressed because one or more lines are too long