added main window and toplevel logo
This commit is contained in:
paul
11
src/App.js
11
src/App.js
@@ -46,8 +46,8 @@ function App() {
|
||||
|
||||
const [projectName, setProjectName] = useState('untitled project')
|
||||
const [UIFramework, setUIFramework] = useState(FrameWorks.TKINTER)
|
||||
|
||||
// const [notChromiumAlert, setShowNotChromiumAlert] = useState(false) // if the user isn't using a chromium based browser alerts the user
|
||||
|
||||
const [shownNotChromiumAlert, setShownNotChromiumAlert] = useState(false) // if the user isn't using a chromium based browser alerts the user
|
||||
|
||||
// const [uploadedAssets, setUploadedAssets] = useState([]) // a global storage for assets, since redux can't store files(serialize files)
|
||||
|
||||
@@ -61,6 +61,10 @@ function App() {
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (shownNotChromiumAlert){
|
||||
return
|
||||
}
|
||||
|
||||
isChromium().then((isChrome) => {
|
||||
|
||||
if (!isChrome){
|
||||
@@ -68,11 +72,12 @@ function App() {
|
||||
title: "Not Chromium browser",
|
||||
content: "We recommend using Chromium based browser such as Chrome, Brave, Edge etc."
|
||||
})
|
||||
setShownNotChromiumAlert(true)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
}, [])
|
||||
}, [shownNotChromiumAlert])
|
||||
|
||||
const sidebarTabs = [
|
||||
{
|
||||
|
||||
@@ -171,6 +171,7 @@ const CanvasToolBar = memo(({ isOpen, widgetType, }) => {
|
||||
placeholder="select content"
|
||||
showSearch
|
||||
className="tw-w-full"
|
||||
notFoundContent="Start uploading from uploads tab"
|
||||
value={val.value?.name || ""}
|
||||
onChange={(value) => {
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@ import Widget from "../../../canvas/widgets/base"
|
||||
import Tools from "../../../canvas/constants/tools"
|
||||
import { TkinterBase } from "./base"
|
||||
import { removeKeyFromObject } from "../../../utils/common"
|
||||
import { getPythonAssetPath } from "../../utils/pythonFilePath"
|
||||
|
||||
|
||||
class MainWindow extends TkinterBase{
|
||||
@@ -35,6 +36,13 @@ class MainWindow extends TkinterBase{
|
||||
toolProps: {placeholder: "Window title", maxLength: 40},
|
||||
value: "Main Window",
|
||||
onChange: (value) => this.setAttrValue("title", value)
|
||||
},
|
||||
logo: {
|
||||
label: "Window Logo",
|
||||
tool: Tools.UPLOADED_LIST,
|
||||
toolProps: {filterOptions: ["image/jpg", "image/jpeg", "image/png"]},
|
||||
value: "",
|
||||
onChange: (value) => this.setAttrValue("logo", value)
|
||||
}
|
||||
|
||||
}
|
||||
@@ -42,30 +50,58 @@ class MainWindow extends TkinterBase{
|
||||
|
||||
}
|
||||
|
||||
|
||||
// componentDidMount(){
|
||||
|
||||
// // this.setAttrValue("styling.backgroundColor", "#E4E2E2")
|
||||
// super.componentDidMount()
|
||||
|
||||
// //this.setAttrValue("styling", { backgroundColor: "#E4E2E2" }) refactor to something like this?
|
||||
// this.setAttrValue("styling.backgroundColor", "#E4E2E2")
|
||||
// console.log("mounted: ", this.state)
|
||||
// }
|
||||
|
||||
componentDidMount(){
|
||||
// this.setAttrValue("styling.backgroundColor", "#E4E2E2")
|
||||
super.componentDidMount()
|
||||
}
|
||||
|
||||
generateCode(variableName, parent){
|
||||
|
||||
const backgroundColor = this.getAttrValue("styling.backgroundColor")
|
||||
|
||||
return [
|
||||
`${variableName} = tk.Tk()`,
|
||||
`${variableName}.config(bg="${backgroundColor}")`,
|
||||
`${variableName}.title("${this.getAttrValue("title")}")`,
|
||||
...this.getGridLayoutConfigurationCode(variableName)
|
||||
]
|
||||
const logo = this.getAttrValue("logo")
|
||||
|
||||
const {width, height} = this.getSize()
|
||||
|
||||
const code = [
|
||||
`${variableName} = tk.Tk()`,
|
||||
`${variableName}.config(bg="${backgroundColor}")`,
|
||||
`${variableName}.title("${this.getAttrValue("title")}")`,
|
||||
`${variableName}.geometry("${width}x${height}")`,
|
||||
...this.getGridLayoutConfigurationCode(variableName)
|
||||
]
|
||||
|
||||
if (logo?.name){
|
||||
|
||||
// code.push(`\n`)
|
||||
code.push(`${variableName}_img = Image.open(${getPythonAssetPath(logo.name, "image")})`)
|
||||
code.push(`${variableName}_img = ImageTk.PhotoImage(${variableName}_img)`)
|
||||
code.push(`${variableName}.iconphoto(False, ${variableName}_img)`)
|
||||
// code.push("\n")
|
||||
}
|
||||
|
||||
|
||||
return code
|
||||
}
|
||||
|
||||
getImports(){
|
||||
const imports = super.getImports()
|
||||
|
||||
if (this.getAttrValue("logo"))
|
||||
imports.push("import os", "from PIL import Image, ImageTk", )
|
||||
|
||||
return imports
|
||||
}
|
||||
|
||||
getRequirements(){
|
||||
const requirements = super.getRequirements()
|
||||
|
||||
|
||||
if (this.getAttrValue("logo"))
|
||||
requirements.push("pillow")
|
||||
|
||||
return requirements
|
||||
}
|
||||
|
||||
getToolbarAttrs(){
|
||||
@@ -83,10 +119,20 @@ class MainWindow extends TkinterBase{
|
||||
}
|
||||
|
||||
renderContent(){
|
||||
|
||||
const logo = this.getAttrValue("logo")
|
||||
|
||||
return (
|
||||
<div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden">
|
||||
|
||||
<div className="tw-flex tw-w-full tw-h-[25px] tw-bg-[#c7c7c7] tw-p-1
|
||||
tw-overflow-hidden tw-shadow-xl tw-place-items-center">
|
||||
tw-overflow-hidden tw-shadow-xl tw-place-items-center tw-gap-1">
|
||||
{
|
||||
logo && (
|
||||
<img src={logo.previewUrl} alt={logo.name}
|
||||
className="tw-bg-contain tw-w-[15px] tw-h-[15px] tw-rounded-sm" />
|
||||
)
|
||||
}
|
||||
<div className="tw-text-sm">{this.getAttrValue("title")}</div>
|
||||
<div className="tw-ml-auto tw-flex tw-gap-1 tw-place-items-center">
|
||||
<div className="tw-bg-yellow-400 tw-rounded-full tw-w-[15px] tw-h-[15px]">
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import Widget from "../../../canvas/widgets/base"
|
||||
import Tools from "../../../canvas/constants/tools"
|
||||
import { getPythonAssetPath } from "../../utils/pythonFilePath"
|
||||
import { TkinterBase } from "./base"
|
||||
|
||||
|
||||
class TopLevel extends Widget{
|
||||
class TopLevel extends TkinterBase{
|
||||
|
||||
static widgetType = "toplevel"
|
||||
static displayName = "Top Level"
|
||||
@@ -28,6 +30,13 @@ class TopLevel extends Widget{
|
||||
toolProps: {placeholder: "Window title", maxLength: 40},
|
||||
value: "Top level",
|
||||
onChange: (value) => this.setAttrValue("title", value)
|
||||
},
|
||||
logo: {
|
||||
label: "Toplevel Logo",
|
||||
tool: Tools.UPLOADED_LIST,
|
||||
toolProps: {filterOptions: ["image/jpg", "image/jpeg", "image/png"]},
|
||||
value: "",
|
||||
onChange: (value) => this.setAttrValue("logo", value)
|
||||
}
|
||||
|
||||
}
|
||||
@@ -39,16 +48,54 @@ class TopLevel extends Widget{
|
||||
super.componentDidMount()
|
||||
}
|
||||
|
||||
|
||||
generateCode(variableName, parent){
|
||||
|
||||
const backgroundColor = this.getAttrValue("styling.backgroundColor")
|
||||
|
||||
return [
|
||||
`${variableName} = tk.Toplevel(master=${parent})`,
|
||||
`${variableName}.config(bg="${backgroundColor}")`,
|
||||
`${variableName}.title("${this.getAttrValue("title")}")`,
|
||||
...this.getGridLayoutConfigurationCode(variableName)
|
||||
]
|
||||
const logo = this.getAttrValue("logo")
|
||||
|
||||
const {width, height} = this.getSize()
|
||||
|
||||
const code = [
|
||||
`${variableName} = tk.Toplevel(master=${parent})`,
|
||||
`${variableName}.config(bg="${backgroundColor}")`,
|
||||
`${variableName}.title("${this.getAttrValue("title")}")`,
|
||||
`${variableName}.geometry("${width}x${height}")`,
|
||||
|
||||
...this.getGridLayoutConfigurationCode(variableName)
|
||||
]
|
||||
|
||||
if (logo?.name){
|
||||
|
||||
// code.push(`\n`)
|
||||
code.push(`${variableName}_img = Image.open(${getPythonAssetPath(logo.name, "image")})`)
|
||||
code.push(`${variableName}_img = ImageTk.PhotoImage(${variableName}_img)`)
|
||||
code.push(`${variableName}.iconphoto(False, ${variableName}_img)`)
|
||||
// code.push("\n")
|
||||
}
|
||||
|
||||
|
||||
return code
|
||||
}
|
||||
|
||||
getImports(){
|
||||
const imports = super.getImports()
|
||||
|
||||
if (this.getAttrValue("logo"))
|
||||
imports.push("import os", "from PIL import Image, ImageTk", )
|
||||
|
||||
return imports
|
||||
}
|
||||
|
||||
getRequirements(){
|
||||
const requirements = super.getRequirements()
|
||||
|
||||
|
||||
if (this.getAttrValue("logo"))
|
||||
requirements.push("pillow")
|
||||
|
||||
return requirements
|
||||
}
|
||||
|
||||
getToolbarAttrs(){
|
||||
@@ -65,10 +112,18 @@ class TopLevel extends Widget{
|
||||
}
|
||||
|
||||
renderContent(){
|
||||
const logo = this.getAttrValue("logo")
|
||||
|
||||
return (
|
||||
<div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden">
|
||||
<div className="tw-flex tw-w-full tw-h-[25px] tw-bg-[#c7c7c7] tw-p-1
|
||||
<div className="tw-flex tw-w-full tw-h-[25px] tw-bg-[#c7c7c7] tw-p-1 tw-gap-1
|
||||
tw-overflow-hidden tw-shadow-xl tw-place-items-center">
|
||||
{
|
||||
logo && (
|
||||
<img src={logo.previewUrl} alt={logo.name}
|
||||
className="tw-bg-contain tw-w-[15px] tw-h-[15px] tw-rounded-sm" />
|
||||
)
|
||||
}
|
||||
<div className="tw-text-sm">{this.getAttrValue("title")}</div>
|
||||
<div className="tw-ml-auto tw-flex tw-gap-1 tw-place-items-center">
|
||||
<div className="tw-bg-yellow-400 tw-rounded-full tw-w-[15px] tw-h-[15px]">
|
||||
|
||||
Reference in New Issue
Block a user