nodes/zombieyang-sd-ppp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

move user-id input into collapse menu

Browse Source
This commit is contained in:
zombieyang
2024-05-16 09:43:57 +08:00
parent d977d59843
commit ffc4e7e1cd
6 changed files with 191 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
photoshop/dist/index.js
Vendored
+87 -6
View File
@@ -96,7 +96,9 @@ __webpack_require__.r(__webpack_exports__);
class Main extends react__WEBPACK_IMPORTED_MODULE_0__.Component {
state = {
comfyURL: '',
isConnected: false
isConnected: false,
userId: uxp__WEBPACK_IMPORTED_MODULE_2__.userInfo.userId().slice(0, 10),
ui_ExpandMore: false
};
componentDidMount() {
_system_ComfyConnection__WEBPACK_IMPORTED_MODULE_1__["default"].onConnectStateChange(() => {
@@ -131,6 +133,7 @@ class Main extends react__WEBPACK_IMPORTED_MODULE_0__.Component {
if (!_system_ComfyConnection__WEBPACK_IMPORTED_MODULE_1__["default"].instance?.isConnected) _system_ComfyConnection__WEBPACK_IMPORTED_MODULE_1__["default"].createInstance(this.state.comfyURL, this.state.userId);else _system_ComfyConnection__WEBPACK_IMPORTED_MODULE_1__["default"].instance.disconnect();
}
render() {
const expandMore = this.state.ui_ExpandMore;
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("sp-textfield", {
id: "url-bar",
label: "ComfyURL",
@@ -139,16 +142,39 @@ class Main extends react__WEBPACK_IMPORTED_MODULE_0__.Component {
},
value: this.state.comfyURL,
placeholder: "http://127.0.0.1:8188"
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("sp-textfield", {
id: "user-id-bar",
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("sp-divider", null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
id: "connection-more",
className: expandMore ? "expand-menu expand" : "expand-menu collapse"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
class: "expand-menu-title",
onClick: () => {
this.setState({
ui_ExpandMore: !expandMore
});
}
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("sp-label", {
class: "expand-menu-arrow"
}, expandMore ? "▼" : "▶️"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("sp-label", null, "more")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
class: "content"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
class: "input-row"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("sp-label", null, "user-id:"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
class: "input-label",
id: "user-id-bar"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("sp-label", null, this.state.userId), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("sp-textfield", {
label: "USER ID",
onInput: ev => {
this.state.userId = ev.currentTarget.value;
if (!this.state.userId) uxp__WEBPACK_IMPORTED_MODULE_2__.storage.secureStorage.removeItem('userId');else uxp__WEBPACK_IMPORTED_MODULE_2__.storage.secureStorage.setItem('userId', this.state.userId);
const userID = ev.currentTarget.value;
if (!userID) uxp__WEBPACK_IMPORTED_MODULE_2__.storage.secureStorage.removeItem('userId');else {
uxp__WEBPACK_IMPORTED_MODULE_2__.storage.secureStorage.setItem('userId', this.state.userId);
this.setState({
userId: userID
});
}
},
value: this.state.userId,
placeholder: "User Name: Change if sharing remote server"
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
}))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
className: "button-box"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("sp-button", {
id: "connect-btn",
@@ -5224,6 +5250,61 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.tabbar {
}
#connect-btn {
text-align: center;
}
.input-row {
display: flex;
flex-direction: row;
align-items: center;
height: 30px;
}
.input-label {
position: relative;
}
.input-label sp-label {
width: calc(100% - 15px);
height: 100%;
margin-left: 15px;
}
.input-label sp-textfield {
position: absolute;
width: 100%;
top: -5px;
left: 0;
visibility: hidden;
z-index: 5;
}
.input-label sp-textfield:focus {
visibility: visible;
}
.input-label:hover sp-textfield{
visibility: visible;
}
.expand-menu .expand-menu-title {
display: flex;
flex-direction: row;
align-items: center;
height: 20px;
padding: 5px;
background-color: rgba(0, 0, 0, 0.3);
}
.expand-menu .expand-menu-arrow {
font-weight: bold;
width: 15px;
}
.expand-menu .expand-menu-title sp-icon {
height: 15px;
width: 20px;
color: #ccc;
}
.expand-menu .content {
margin-left: 15px
}
.expand-menu.collapse .content {
display: none;
}
.expand-menu.expand .content {
display: flex;
}`, ""]);
// Exports
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
photoshop/dist/manifest.json
Vendored
+5 -4
View File
@@ -11,6 +11,7 @@
}
],
"requiredPermissions": {
"enableUserInfo": true,
"network": {
"domains": "all"
},
@@ -41,19 +42,19 @@
},
"minimumSize": {
"width": 300,
"height": 130
"height": 160
},
"maximumSize": {
"width": 400,
"height": 130
"height": 160
},
"preferredDockedSize": {
"width": 300,
"height": 130
"height": 160
},
"preferredFloatingSize": {
"width": 300,
"height": 130
"height": 160
},
"icons": [
{
photoshop/plugin/manifest.json
+5 -4
View File
@@ -11,6 +11,7 @@
}
],
"requiredPermissions": {
"enableUserInfo": true,
"network": {
"domains": "all"
},
@@ -41,19 +42,19 @@
},
"minimumSize": {
"width": 300,
"height": 130
"height": 160
},
"maximumSize": {
"width": 400,
"height": 130
"height": 160
},
"preferredDockedSize": {
"width": 300,
"height": 130
"height": 160
},
"preferredFloatingSize": {
"width": 300,
"height": 130
"height": 160
},
"icons": [
{
photoshop/src/index.jsx
+1 -1
View File
@@ -6,7 +6,7 @@ import Main from "./panels/Main.jsx";
import { entrypoints } from "uxp";
const demosController = new PanelController(() => <Main/>, {id: "comfy-connect", menuItems: [
const demosController = new PanelController(() => <Main/>, {id: "comfy-connect", menuItems: [
// { id: "reload1", label: "Reload Plugin", enabled: true, checked: false, oninvoke: () => location.reload() },
// { id: "dialog1", label: "About this Plugin", enabled: true, checked: false, oninvoke: () => aboutController.run() },
] });
photoshop/src/panels/Main.jsx
+38 -16
View File
@@ -1,11 +1,14 @@
import React from "react";
import ComfyConnection from "../system/ComfyConnection";
import { storage } from "uxp";
import { storage, userInfo } from "uxp";
export default class Main extends React.Component {
state = {
comfyURL: '',
isConnected: false
isConnected: false,
userId: userInfo.userId().slice(0, 10),
ui_ExpandMore: false,
}
componentDidMount() {
@@ -42,9 +45,9 @@ export default class Main extends React.Component {
}
render() {
const expandMore = this.state.ui_ExpandMore;
return (
<>
<sp-textfield
id="url-bar"
label="ComfyURL"
@@ -52,19 +55,38 @@ export default class Main extends React.Component {
value={this.state.comfyURL}
placeholder="http://127.0.0.1:8188"
></sp-textfield>
<sp-textfield
id="user-id-bar"
label="USER ID"
onInput={(ev) => {
this.state.userId = ev.currentTarget.value;
if (!this.state.userId)
storage.secureStorage.removeItem('userId');
else
storage.secureStorage.setItem('userId', this.state.userId);
}}
value={this.state.userId}
placeholder="User Name: Change if sharing remote server"
></sp-textfield>
<sp-divider />
<div id="connection-more" className={expandMore ? "expand-menu expand" : "expand-menu collapse"}>
<div class="expand-menu-title" onClick={() => { this.setState({ui_ExpandMore: !expandMore}) }}>
<sp-label class="expand-menu-arrow">{expandMore ? "▼" : "▶️"}</sp-label>
{/* <sp-icon size="s" name={expandMore ? "ui:ChevronDownSmall" : "ui:ChevronRightSmall"}></sp-icon> */}
<sp-label>more</sp-label>
</div>
<div class="content">
<div class="input-row">
<sp-label>user-id:</sp-label>
<div class="input-label" id="user-id-bar">
<sp-label>{this.state.userId}</sp-label>
<sp-textfield
label="USER ID"
onInput={(ev) => {
const userID = ev.currentTarget.value;
if (!userID)
storage.secureStorage.removeItem('userId');
else {
storage.secureStorage.setItem('userId', this.state.userId);
this.setState({
userId: userID
})
}
}}
value={this.state.userId}
placeholder="User Name: Change if sharing remote server"
></sp-textfield>
</div>
</div>
</div>
</div>
<div className="button-box">
<sp-button
id="connect-btn"
photoshop/src/styles.css
+55
View File
@@ -36,4 +36,59 @@
}
#connect-btn {
text-align: center;
}
.input-row {
display: flex;
flex-direction: row;
align-items: center;
height: 30px;
}
.input-label {
position: relative;
}
.input-label sp-label {
width: calc(100% - 15px);
height: 100%;
margin-left: 15px;
}
.input-label sp-textfield {
position: absolute;
width: 100%;
top: -5px;
left: 0;
visibility: hidden;
z-index: 5;
}
.input-label sp-textfield:focus {
visibility: visible;
}
.input-label:hover sp-textfield{
visibility: visible;
}
.expand-menu .expand-menu-title {
display: flex;
flex-direction: row;
align-items: center;
height: 20px;
padding: 5px;
background-color: rgba(0, 0, 0, 0.3);
}
.expand-menu .expand-menu-arrow {
font-weight: bold;
width: 15px;
}
.expand-menu .expand-menu-title sp-icon {
height: 15px;
width: 20px;
color: #ccc;
}
.expand-menu .content {
margin-left: 15px
}
.expand-menu.collapse .content {
display: none;
}
.expand-menu.expand .content {
display: flex;
}