From 10b6e2872ae2dd5e575e9977f33e7bd46b04ecf0 Mon Sep 17 00:00:00 2001 From: paul Date: Mon, 30 Sep 2024 22:18:08 +0530 Subject: [PATCH] fixed code generation for custom tkinter --- docs/_coverpage.md | 2 +- docs/intro.md | 5 + landingpages/tailwind/tailwind-runtime.css | 796 +----------------- src/canvas/canvas.js | 2 +- .../assets/widgets/main/Toplevel2.png | Bin 0 -> 7130 bytes .../customtk/assets/widgets/main/button2.png | Bin 0 -> 11833 bytes src/frameworks/customtk/engine/code.js | 2 - src/frameworks/customtk/sidebarWidgets.js | 4 +- .../customtk/widgets/ checkButton.js | 18 +- src/frameworks/customtk/widgets/base.js | 5 +- src/frameworks/customtk/widgets/button.js | 5 +- src/frameworks/customtk/widgets/frame.js | 2 +- src/frameworks/customtk/widgets/input.js | 2 +- src/frameworks/customtk/widgets/label.js | 2 +- src/frameworks/customtk/widgets/mainWindow.js | 4 +- src/frameworks/customtk/widgets/optionMenu.js | 24 +- src/frameworks/customtk/widgets/slider.js | 22 +- src/frameworks/customtk/widgets/toplevel.js | 4 +- src/frameworks/tkinter/engine/code.js | 2 +- src/frameworks/tkinter/widgets/optionMenu.js | 9 +- src/frameworks/tkinter/widgets/slider.js | 3 +- 21 files changed, 80 insertions(+), 833 deletions(-) create mode 100644 src/frameworks/customtk/assets/widgets/main/Toplevel2.png create mode 100644 src/frameworks/customtk/assets/widgets/main/button2.png diff --git a/docs/_coverpage.md b/docs/_coverpage.md index 94efc95..0f2d3f1 100644 --- a/docs/_coverpage.md +++ b/docs/_coverpage.md @@ -6,7 +6,7 @@ - Simple and powerful - Do more with plugins -- Generate code in multiple frameworks +- Framework independent, Generate code in multiple frameworks [GitHub](https://github.com/PaulleDemon/PyUIBuilder) [Get Started](#pyuibuilder-documentation) diff --git a/docs/intro.md b/docs/intro.md index c3abc54..b0843ad 100644 --- a/docs/intro.md +++ b/docs/intro.md @@ -66,6 +66,11 @@ or right-click -> delete ![deleted widget](./assets/delete.gif) + +### Resizing widgets +You can resize the widgets by dragging the widgets. If the fit-width/fit-height is set to true, make sure to uncheck it before resizing. + + ### Variable names To modify variable name, change the widget name attributes, if there are duplicate names, diff --git a/landingpages/tailwind/tailwind-runtime.css b/landingpages/tailwind/tailwind-runtime.css index 1cd32b4..c61bd20 100644 --- a/landingpages/tailwind/tailwind-runtime.css +++ b/landingpages/tailwind/tailwind-runtime.css @@ -545,10 +545,6 @@ video { --tw-contain-style: ; } -.tw-fixed { - position: fixed; -} - .tw-absolute { position: absolute; } @@ -557,18 +553,6 @@ video { position: relative; } -.tw-bottom-10 { - bottom: 2.5rem; -} - -.tw-left-0 { - left: 0px; -} - -.tw-left-\[50\%\] { - left: 50%; -} - .tw-right-3 { right: 0.75rem; } @@ -577,26 +561,10 @@ video { top: 0px; } -.tw-top-20 { - top: 5rem; -} - .tw-top-3 { top: 0.75rem; } -.tw-top-\[50\%\] { - top: 50%; -} - -.tw-left-1\/2 { - left: 50%; -} - -.tw-z-10 { - z-index: 10; -} - .tw-z-20 { z-index: 20; } @@ -614,14 +582,6 @@ video { margin-left: auto; } -.tw-mt-10 { - margin-top: 2.5rem; -} - -.tw-mt-2 { - margin-top: 0.5rem; -} - .tw-mt-20 { margin-top: 5rem; } @@ -634,34 +594,14 @@ video { margin-top: 1.25rem; } -.tw-mt-6 { - margin-top: 1.5rem; -} - -.tw-mt-7 { - margin-top: 1.75rem; -} - .tw-mt-8 { margin-top: 2rem; } -.tw-mt-\[2\%\] { - margin-top: 2%; -} - -.tw-mt-\[5\%\] { - margin-top: 5%; -} - .tw-mt-auto { margin-top: auto; } -.tw-mt-4 { - margin-top: 1rem; -} - .tw-flex { display: flex; } @@ -670,22 +610,6 @@ video { display: none !important; } -.\!tw-h-\[450px\] { - height: 450px !important; -} - -.tw-h-\[250px\] { - height: 250px; -} - -.tw-h-\[30px\] { - height: 30px; -} - -.tw-h-\[400px\] { - height: 400px; -} - .tw-h-\[40px\] { height: 40px; } @@ -694,122 +618,26 @@ video { height: 50px; } -.tw-h-\[550px\] { - height: 550px; -} - .tw-h-\[60px\] { height: 60px; } -.tw-h-\[80px\] { - height: 80px; -} - -.tw-h-fit { - height: fit-content; -} - .tw-h-full { height: 100%; } -.tw-h-\[90vh\] { - height: 90vh; -} - -.tw-h-auto { - height: auto; -} - -.tw-max-h-\[100vh\] { - max-height: 100vh; -} - -.tw-max-h-\[350px\] { - max-height: 350px; -} - -.tw-max-h-\[550px\] { - max-height: 550px; -} - -.tw-max-h-\[650px\] { - max-height: 650px; -} - -.tw-max-h-\[800px\] { - max-height: 800px; -} - -.tw-max-h-\[90\%\] { - max-height: 90%; -} - -.tw-max-h-full { - max-height: 100%; -} - .tw-min-h-\[100vh\] { min-height: 100vh; } -.tw-min-h-\[20vh\] { - min-height: 20vh; -} - .tw-min-h-\[300px\] { min-height: 300px; } -.tw-min-h-\[30vh\] { - min-height: 30vh; -} - -.tw-min-h-\[550px\] { - min-height: 550px; -} - -.tw-min-h-\[60vh\] { - min-height: 60vh; -} - -.tw-min-h-\[80px\] { - min-height: 80px; -} - -.tw-min-h-\[80vh\] { - min-height: 80vh; -} - -.tw-min-h-full { - min-height: 100%; -} - -.tw-min-h-\[50vh\] { - min-height: 50vh; -} - -.tw-min-h-\[70vh\] { - min-height: 70vh; -} - -.tw-w-\[1000px\] { - width: 1000px; -} - -.tw-w-\[150px\] { - width: 150px; -} - .tw-w-\[250px\] { width: 250px; } -.tw-w-\[400px\] { - width: 400px; -} - .tw-w-\[40px\] { width: 40px; } @@ -818,10 +646,6 @@ video { width: 50px; } -.tw-w-\[80px\] { - width: 80px; -} - .tw-w-full { width: 100%; } @@ -830,26 +654,6 @@ video { width: max-content; } -.\!tw-w-full { - width: 100% !important; -} - -.tw-w-\[380px\] { - width: 380px; -} - -.tw-min-w-\[80px\] { - min-width: 80px; -} - -.tw-min-w-fit { - min-width: fit-content; -} - -.tw-min-w-full { - min-width: 100%; -} - .tw-max-w-\[100vw\] { max-width: 100vw; } @@ -858,69 +662,16 @@ video { max-width: 120px; } -.tw-max-w-\[150px\] { - max-width: 150px; -} - -.tw-max-w-\[30\%\] { - max-width: 30%; -} - -.tw-max-w-\[350px\] { - max-width: 350px; -} - .tw-max-w-\[450px\] { max-width: 450px; } -.tw-max-w-\[50\%\] { - max-width: 50%; -} - -.tw-max-w-\[60\%\] { - max-width: 60%; -} - -.tw-max-w-\[750px\] { - max-width: 750px; -} - -.tw-max-w-\[80\%\] { - max-width: 80%; -} - -.tw-max-w-\[850px\] { - max-width: 850px; -} - -.tw-max-w-\[80vw\] { - max-width: 80vw; -} - .tw-max-w-\[550px\] { max-width: 550px; } -.tw--translate-x-\[50\%\] { - --tw-translate-x: -50%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.tw--translate-y-\[50\%\] { - --tw-translate-y: -50%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.tw--translate-x-1\/2 { - --tw-translate-x: -50%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.tw-scale-0 { - --tw-scale-x: 0; - --tw-scale-y: 0; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +.tw-max-w-\[850px\] { + max-width: 850px; } .tw-select-none { @@ -932,46 +683,18 @@ video { flex-direction: column; } -.tw-flex-wrap { - flex-wrap: wrap; -} - .tw-place-content-center { place-content: center; } -.tw-place-content-end { - place-content: end; -} - .tw-place-content-around { place-content: space-around; } -.tw-place-items-start { - place-items: start; -} - .tw-place-items-center { place-items: center; } -.tw-items-center { - align-items: center; -} - -.tw-gap-1 { - gap: 0.25rem; -} - -.tw-gap-10 { - gap: 2.5rem; -} - -.tw-gap-2 { - gap: 0.5rem; -} - .tw-gap-3 { gap: 0.75rem; } @@ -988,129 +711,35 @@ video { gap: 1.5rem; } -.tw-gap-8 { - gap: 2rem; -} - .tw-gap-\[10\%\] { gap: 10%; } -.tw-gap-\[200px\] { - gap: 200px; -} - .tw-gap-\[20px\] { gap: 20px; } -.tw-space-y-8 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(2rem * var(--tw-space-y-reverse)); -} - .tw-overflow-hidden { overflow: hidden; } -.tw-overflow-clip { - overflow: clip; -} - -.\!tw-rounded-full { - border-radius: 9999px !important; -} - -.tw-rounded-lg { - border-radius: 0.5rem; -} - .tw-rounded-md { border-radius: 0.375rem; } -.tw-rounded-xl { - border-radius: 0.75rem; -} - -.tw-rounded-full { - border-radius: 9999px; -} - -.\!tw-border-\[1px\] { - border-width: 1px !important; -} - .tw-border-\[1px\] { border-width: 1px; } -.tw-border-2 { - border-width: 2px; -} - -.\!tw-border-solid { - border-style: solid !important; -} - .tw-border-solid { border-style: solid; } -.\!tw-border-black { - --tw-border-opacity: 1 !important; - border-color: rgb(0 0 0 / var(--tw-border-opacity)) !important; -} - -.\!tw-border-gray-600 { - --tw-border-opacity: 1 !important; - border-color: rgb(75 85 99 / var(--tw-border-opacity)) !important; -} - -.\!tw-border-gray-800 { - --tw-border-opacity: 1 !important; - border-color: rgb(31 41 55 / var(--tw-border-opacity)) !important; -} - .tw-border-black { --tw-border-opacity: 1; border-color: rgb(0 0 0 / var(--tw-border-opacity)); } -.tw-border-blue-500 { - --tw-border-opacity: 1; - border-color: rgb(59 130 246 / var(--tw-border-opacity)); -} - -.tw-border-gray-300 { - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); -} - -.\!tw-bg-black { - --tw-bg-opacity: 1 !important; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)) !important; -} - -.\!tw-bg-transparent { - background-color: transparent !important; -} - -.tw-bg-\[\#7e22ce85\] { - background-color: #7e22ce85; -} - -.tw-bg-black { - --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); -} - -.tw-bg-gray-100 { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); -} - .tw-bg-transparent { background-color: transparent; } @@ -1120,20 +749,6 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.tw-bg-\[\#000000af\] { - background-color: #000000af; -} - -.tw-bg-\[\#ffe27a\] { - --tw-bg-opacity: 1; - background-color: rgb(255 226 122 / var(--tw-bg-opacity)); -} - -.tw-bg-blue-500 { - --tw-bg-opacity: 1; - background-color: rgb(59 130 246 / var(--tw-bg-opacity)); -} - .tw-bg-opacity-0 { --tw-bg-opacity: 0; } @@ -1142,34 +757,10 @@ video { object-fit: contain; } -.tw-object-cover { - object-fit: cover; -} - .tw-p-2 { padding: 0.5rem; } -.tw-p-4 { - padding: 1rem; -} - -.tw-p-5 { - padding: 1.25rem; -} - -.tw-p-6 { - padding: 1.5rem; -} - -.tw-p-8 { - padding: 2rem; -} - -.tw-p-\[2\%\] { - padding: 2%; -} - .tw-p-\[4px\] { padding: 4px; } @@ -1178,10 +769,6 @@ video { padding: 5%; } -.tw-p-1 { - padding: 0.25rem; -} - .tw-px-3 { padding-left: 0.75rem; padding-right: 0.75rem; @@ -1202,10 +789,6 @@ video { padding-bottom: 0.5rem; } -.tw-text-center { - text-align: center; -} - .tw-text-2xl { font-size: 1.5rem; line-height: 2rem; @@ -1221,13 +804,8 @@ video { line-height: 2.5rem; } -.tw-text-5xl { - font-size: 3rem; - line-height: 1; -} - -.tw-text-6xl { - font-size: 3.75rem; +.tw-text-8xl { + font-size: 6rem; line-height: 1; } @@ -1246,11 +824,6 @@ video { line-height: 1.75rem; } -.tw-text-8xl { - font-size: 6rem; - line-height: 1; -} - .tw-font-medium { font-weight: 500; } @@ -1259,72 +832,11 @@ video { font-weight: 600; } -.tw-uppercase { - text-transform: uppercase; -} - -.tw-italic { - font-style: italic; -} - -.tw-leading-\[80px\] { - line-height: 80px; -} - -.tw-leading-relaxed { - line-height: 1.625; -} - -.\!tw-text-black { - --tw-text-opacity: 1 !important; - color: rgb(0 0 0 / var(--tw-text-opacity)) !important; -} - -.\!tw-text-gray-800 { - --tw-text-opacity: 1 !important; - color: rgb(31 41 55 / var(--tw-text-opacity)) !important; -} - .tw-text-black { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); } -.tw-text-gray-700 { - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -.tw-text-gray-800 { - --tw-text-opacity: 1; - color: rgb(31 41 55 / var(--tw-text-opacity)); -} - -.tw-text-white { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -.tw-text-gray-600 { - --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); -} - -.tw-text-green-600 { - --tw-text-opacity: 1; - color: rgb(22 163 74 / var(--tw-text-opacity)); -} - -.tw-text-red-600 { - --tw-text-opacity: 1; - color: rgb(220 38 38 / var(--tw-text-opacity)); -} - -.tw-text-yellow-400 { - --tw-text-opacity: 1; - color: rgb(250 204 21 / var(--tw-text-opacity)); -} - .tw-text-blue-400 { --tw-text-opacity: 1; color: rgb(96 165 250 / var(--tw-text-opacity)); @@ -1335,309 +847,61 @@ video { color: rgb(37 99 235 / var(--tw-text-opacity)); } +.tw-text-gray-800 { + --tw-text-opacity: 1; + color: rgb(31 41 55 / var(--tw-text-opacity)); +} + .tw-underline { text-decoration-line: underline; } -.tw-opacity-0 { - opacity: 0; -} - -.tw-shadow-lg { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.tw-shadow-md { - --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.tw-shadow-xl { - --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.tw-shadow-primary { - --tw-shadow-color: #fff; - --tw-shadow: var(--tw-shadow-colored); -} - -.tw-outline-none { - outline: 2px solid transparent; - outline-offset: 2px; -} - -.tw-grayscale { - --tw-grayscale: grayscale(100%); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - .tw-transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } -.tw-transition-transform { - transition-property: transform; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.tw-transition-opacity { - transition-property: opacity; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - .tw-duration-\[0\.3s\] { transition-duration: 0.3s; } -.tw-duration-300 { - transition-duration: 300ms; -} - -.tw-duration-500 { - transition-duration: 500ms; -} - -.hover\:tw-scale-105:hover { - --tw-scale-x: 1.05; - --tw-scale-y: 1.05; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.hover\:tw-scale-\[1\.04\]:hover { - --tw-scale-x: 1.04; - --tw-scale-y: 1.04; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.hover\:tw-scale-x-\[1\.03\]:hover { - --tw-scale-x: 1.03; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.hover\:tw-scale-x-\[1\.02\]:hover { - --tw-scale-x: 1.02; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.hover\:\!tw-bg-white:hover { - --tw-bg-opacity: 1 !important; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important; -} - .hover\:tw-bg-black:hover { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); } -.hover\:\!tw-text-black:hover { - --tw-text-opacity: 1 !important; - color: rgb(0 0 0 / var(--tw-text-opacity)) !important; -} - .hover\:tw-text-white:hover { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } -.hover\:tw-grayscale-0:hover { - --tw-grayscale: grayscale(0); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - -.dark\:tw-bg-\[\#16171A\]:is(.tw-dark *) { - --tw-bg-opacity: 1; - background-color: rgb(22 23 26 / var(--tw-bg-opacity)); -} - -.dark\:tw-bg-\[\#80808085\]:is(.tw-dark *) { - background-color: #80808085; -} - -@media not all and (min-width: 1280px) { - .max-xl\:tw-flex-col { - flex-direction: column; - } - - .max-xl\:tw-place-items-center { - place-items: center; - } -} - @media not all and (min-width: 1024px) { .max-lg\:tw-fixed { position: fixed; } - .max-lg\:\!tw-mt-10 { - margin-top: 2.5rem !important; - } - .max-lg\:tw-mt-\[30px\] { margin-top: 30px; } - .max-lg\:tw-mt-10 { - margin-top: 2.5rem; - } - - .max-lg\:tw-hidden { - display: none; - } - - .max-lg\:tw-h-\[60px\] { - height: 60px; - } - - .max-lg\:tw-h-auto { - height: auto; - } - - .max-lg\:tw-h-full { - height: 100%; - } - - .max-lg\:tw-h-\[80px\] { - height: 80px; - } - - .max-lg\:tw-max-h-\[260px\] { - max-height: 260px; - } - - .max-lg\:tw-max-h-fit { - max-height: fit-content; - } - - .max-lg\:tw-min-h-\[250px\] { - min-height: 250px; - } - - .max-lg\:tw-min-h-\[60px\] { - min-height: 60px; - } - - .max-lg\:tw-min-h-\[400px\] { - min-height: 400px; - } - - .max-lg\:tw-min-h-\[60vh\] { - min-height: 60vh; - } - - .max-lg\:tw-w-\[300px\] { - width: 300px; - } - - .max-lg\:tw-w-\[60px\] { - width: 60px; - } - - .max-lg\:tw-w-full { - width: 100%; - } - - .max-lg\:tw-w-\[340px\] { - width: 340px; - } - - .max-lg\:tw-w-\[80px\] { - width: 80px; - } - - .max-lg\:tw-min-w-\[320px\] { - min-width: 320px; - } - - .max-lg\:tw-min-w-\[60px\] { - min-width: 60px; - } - - .max-lg\:tw-max-w-\[300px\] { - max-width: 300px; - } - - .max-lg\:tw-max-w-\[320px\] { - max-width: 320px; - } - - .max-lg\:tw-max-w-full { - max-width: 100%; - } - .max-lg\:tw-flex-col { flex-direction: column; } - .max-lg\:tw-place-content-center { - place-content: center; - } - .max-lg\:tw-place-items-end { place-items: end; } - .max-lg\:tw-place-items-center { - place-items: center; - } - - .max-lg\:tw-gap-16 { - gap: 4rem; - } - .max-lg\:tw-gap-5 { gap: 1.25rem; } - .max-lg\:tw-p-3 { - padding: 0.75rem; - } - - .max-lg\:tw-p-4 { - padding: 1rem; - } - - .max-lg\:tw-p-2 { - padding: 0.5rem; - } - - .max-lg\:tw-px-4 { - padding-left: 1rem; - padding-right: 1rem; - } - - .max-lg\:tw-px-2 { - padding-left: 0.5rem; - padding-right: 0.5rem; - } - - .max-lg\:tw-text-2xl { - font-size: 1.5rem; - line-height: 2rem; - } - .max-lg\:tw-text-4xl { font-size: 2.25rem; line-height: 2.5rem; } - .max-lg\:tw-text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; - } - - .max-lg\:tw-font-normal { - font-weight: 400; - } - .max-lg\:tw-shadow-md { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); @@ -1646,10 +910,6 @@ video { } @media not all and (min-width: 768px) { - .max-md\:tw-mt-8 { - margin-top: 2rem; - } - .max-md\:tw-mt-\[50px\] { margin-top: 50px; } @@ -1658,14 +918,6 @@ video { width: 100%; } - .max-md\:tw-max-w-full { - max-width: 100%; - } - - .max-md\:tw-max-w-\[100vw\] { - max-width: 100vw; - } - .max-md\:tw-flex-col { flex-direction: column; } @@ -1674,25 +926,11 @@ video { place-content: center; } - .max-md\:tw-gap-2 { - gap: 0.5rem; - } - - .max-md\:tw-px-2 { - padding-left: 0.5rem; - padding-right: 0.5rem; - } - .max-md\:tw-text-2xl { font-size: 1.5rem; line-height: 2rem; } - .max-md\:tw-text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; - } - .max-md\:tw-text-lg { font-size: 1.125rem; line-height: 1.75rem; @@ -1708,24 +946,12 @@ video { line-height: 1.75rem; } - .max-md\:tw-leading-snug { - line-height: 1.375; - } - .max-md\:tw-opacity-0 { opacity: 0; } } @media (min-width: 1024px) { - .lg\:tw-sticky { - position: sticky; - } - - .lg\:tw-top-\[20\%\] { - top: 20%; - } - .lg\:tw-mx-auto { margin-left: auto; margin-right: auto; @@ -1742,10 +968,6 @@ video { .lg\:tw-justify-around { justify-content: space-around; } - - .lg\:tw-p-6 { - padding: 1.5rem; - } } \ No newline at end of file diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js index 40bb385..36d6a4c 100644 --- a/src/canvas/canvas.js +++ b/src/canvas/canvas.js @@ -779,7 +779,7 @@ class Canvas extends React.Component { */ handleAddWidgetChild = ({event, parentWidgetId, dragElementID, swap = false }) => { - console.log("event: ", event) + // console.log("event: ", event) // widgets data structure { id, widgetType: widgetComponentType, children: [], parent: "" } const dropWidgetObj = this.findWidgetFromListById(parentWidgetId) // Find the dragged widget object diff --git a/src/frameworks/customtk/assets/widgets/main/Toplevel2.png b/src/frameworks/customtk/assets/widgets/main/Toplevel2.png new file mode 100644 index 0000000000000000000000000000000000000000..99166512e749483a48fbedfde7835397f6892091 GIT binary patch literal 7130 zcmeHLXIPWjw%&ruC<=#B5fG7K&IqU>0@6aU5Wqr_9uX7>0fCSJNk|AyovT7^W&Bu_g;CPJS6K|d+oJX``&j)9kw)E zyIO8F0ATHb{b(BiL@>h7H!Go}((_UW{I|+~{}B=Z5>>*_vV`ptn*dnO^R~l~F&5@1 zEYVNR&4cKUQ=|F$Lu~*IXejvA4@Y)Wr1{|qBoxh1`K<;Deiw?7%0{ad-~Sl|dU&F2 z(5CNI;V(nw6J)YK3W=mrscKYBHDaI_Qe96^54lqVsiA>@8VFJ_f$T;@5J=xcOP`uT z<4D**Z-25kk)S9v?dDFTkPVfUKWM#k$piag8-Ge5{_Q3nSR@XQ^TQFyB&52U`X^p` zU{PdmG9LGt<9qSs&m?$n;Ym<aPPr~tT6>6^s=_AL5C$Yr^d?tYb5kByD3nby}g8gxZ$~HI>krIf-eOv|a4H^gH z+{ic&BaNLJyAV6|5Slv;ke@yJkVu2~4@_v}10F`Y8d^HKyKwFZ_nq3Fh+Xb(9td|G zJuQTXrmi+lM^{sCCsyx+t#?bluw?2E4QXj;X=rQdsqa#U%XR&~*b~BI z8EJg5{+H}8^?#A(Ps8=+Q9ljqe^a9UKk6)DmfyClFu(8t%&+Dr`GqpnUJCgHG0^BR ztX~76(w~CQ4)tFzK{zZvslN}N(cJvMs642QdRryLKszE4Z)EI72y#@w9`V&j!0_#j|%FKj045n2V>g z_n6+go|<>*g>$(@hu*xk@2lyyum)Zza|@MtwT5f^xS^pz3;^#ThY$cxGB=%C0e&)f zT?YQX4o>NZ%ca2{jjy8r6Op)own?EUB5Yw+eXFuE*2l-Ez-$?)47g>Znv|53nwjZW zV0Of{No2T}9UU+|)Fh*z5NDNQ#GaZW!y3uv=mHisONDVKJ3IdN?b`!`gHgukB-lMY zu4D=&b79Bic8pe{nhRsHzoBMe;Larx;D9zWGn3a3+Hv;mS%;Cw8&+jpP`0Y>t4-uW zo#R_x#t-37oQSl!yB>PLNX3jbf|KJdj~|&RJ66WW*)OEk;#v6YlhI zbHuz(r-^kHi?zp@86MW^iMhz4PYqbFS+l09y@<%9Wfv4^1&y>wUDoz{WF!q-Pd$A2 zP)1fZipS$2vj|$++SO;oH}=l*xP$$-#W*FT{@&+zZNRS|mVx3@SoLir)FP`OD zP*`Ys%O)x=F7Ai%ly5QZg?`bwxw%87B_(?E0s(fkt>93n9B^&zs0h*NDi5}GDay~U z8Wh5S<6H`IpM3wlCq)DpQ5FDN%rNF-7@eR^A4d;7+U{_`T~+1bdk z&N4?AYEY2r@#Ed8=avD?TIBJ{7%@o&yJkN>KOTH+GF~)r&QNmgT0~@eR+d`83J{tI z&+k4n*4Z>&RfU!}3Z*p)5JRguv$HfZl`2du8jWws`Hnx@UNrC>M1U)>Sgg8+hKT#pf^fHRwDKY>8T@d@sO$J)2R}6v2O9!)%LA+D#3?s}T~Ji{#PW z&z{QguvC|Y;*!XV)!hvXea&;lhT0pM3rUj=<45JbUwmWivM@#R%UcF&eQPfwcq6TO zLw}@-iHU6tEg4^$TMNL_(n#m-6TeVpSiJt%VtR2WSDUVh{Bhqcb@p|&lf;i zN3WESIR^s#eZ-V0s!w}8-jvx{OP!|pocp`0&EMRWk}f%)^Y6bETR9#QY>pi4*Q}`O z4w>nFEqGl{9k)+%Z5p1YO%K_l(efy=N}PhB6E9Hbl^|QJm;3Y3Dazd9LFdvUXZjo7 zA7Q*YuQ!b?xrFZk=0k1I;@=JH5)6^CIxZ4fGw2s8 ztdIJl$u0d1-_YrY?UDLNUK=huSx0&K;AcLsDc$i!&T6_tpHs^Esh z)ZFJ5G8D^fC-YozO^33$^#yG3gUPl&j?BQmg96%kSH%XTudj^45Wn2Vn%^*JAFV14 zrf!RhN#w_mca+!;U9r)p_an`>7|?QhagE*;?=`O0v*`ShBX>y$M+d~k#ierRH?UpG zf+zvr=<*PHlRIMtsPOjp->Kxlw3wZE@yGAeXUc;6r+i$m35a#mrBQ>P<<1%5#}dx{ zMU=FbvU^cw<_ahE&&@fLIZ8?j2DHOa zRXHUkg}7yA#xW%3H-|}XXWv2Fj6*XQv3!#f);7%wA9c3K$*!le7}!l`hQ+C`+3X^A zBVD2@s9*xsTb9!G3nSyWLUvU{e62cb8CaZ*Qz)K6_!#QPa}J znX$>LIXE`dkONEQzOcrn6817S%c-w(#9gss3za&D?OUuYwV3Qt4p#x6T53U2!P0O$(i2dA~GxH&Ar+lFZClKR$SL$oG^^ zc(#J-CN1>}9!oW3yA)_qpnDmt067-l>;NY{M8tvOuPhO;e`^i^=U06xvZtRHz{2P# z51ur35eE|z1x|jQ+`9Sp2;S9-siL{Lxrof*l!K=V^7Gf{<>e)G0noEljo1fmCv3&& zQ^#UD%cv1|e3yZN1JTjZkUk!vhuvby$;-!>-msoa1)%W$sZ$3ZzLfqB?9u)Tq5juE zC;_~CfRmb&E4*l6DMkz*7}>#CE)HC`LO`tfn+UkHN*b`tVOe>eUIBKlgQfK=#LJJr zs{DV6i^#iId5N!mryT2r&W};ms>|8m9aNHtJ#!kfN_tyrY=TPaPg~F2eY#rO9p|Nb zTE$6s{b@{O#OZHRlckj;0+yenx$nv=`U(HoeoQv>LPO|GuwqVNOUS7GV#|$xH?;oA z9Q!KzV#pt9W%&>YYSrD$h!hSa(+jcTglpB+)%V*I*JhYROK;#tMMcRa!sZQm)3FDE zK;Vjyn=la3GLz-ukY_`vs(viTb#Lov?MhB5WthQx@L+#zE$sXXQ!}$@-lK%=wS?o^ zIokM^!!hU1p7n8t17SqVz`!|1huGyDBw$=sx}rlohF&N}>uPH|aG%0ik(MIr3xPVW zC|e~5rLP~&gUo3<9ol4X6{JDv95mkL0#}OoLKMrMtxZH~sjUUBd|7$<9ST!N3w-QN z1a|8&hK7dhV!LfkIlI8g*1>*$E943$g6Cn`6QkD;UEC1`i4PiG1(EJHI$8?27KT8o z6CgRC=hcvUKWh$Q>ISW6Y$_e(Q#=f_RYIRS^Pp+S=sO9ka9CqX5XOdGh2i zgw?tb+$AO5LzUR^WHTZo;m*?B#l^+h`DtIRGEwkYF8erBts0V_ET8Us^{yspd`Gdm zf>Ef9loYAIJ{D3WN6H>}5#e&zj?v$cVunUzvD{y*`s`BgX=0?LbO;?PV{AD&IR)}j4Gn$Nn!Zli($3JV$qPasiOs0>%~>wn7sp3NVjz8U2=j*)>)@HAH>PJh zmuMWTpxaN&YprlVSH145jm~qNo}SJP8g09zPbDC1mw|;1LfT}Y*8<5U3~9{TP1<&b zR!xcDD0f0i1$S5KtuecnVi@wu_z7TTOp}~V(9Y$w+}p*B*&kU$0|Swlb%@e4*x0zZ zYDjwTRjyhCdQ$jsFV%pi_V!I?aq@SAE0d5?mZjlu=<>S$id)klHnq$+lD9SK^5rED zCvZ}h2Z{LX!W@Yg0k5gAK*SOMYJtmQ%xc{q8Xm^785rVIot5W=e#X>W!! z-7*=Kpb_B&Q({1yP%I>NA2Vo^;c+Dv_d^ z%F5^7T* zTlL_xw6wmKXVRDpkcRideq@H3IT#xo?{F^O`Ks>n#@N_c<^oJ3lFQ|)!wy^!CIU9G zko7-!@BrD~+|4ti$(hp*ulMTKv)(XWu_D~S6S;8q0bCH_DW>AD~U#Rp6*(OLUkPyYj| C!GsO~ literal 0 HcmV?d00001 diff --git a/src/frameworks/customtk/assets/widgets/main/button2.png b/src/frameworks/customtk/assets/widgets/main/button2.png new file mode 100644 index 0000000000000000000000000000000000000000..e433a2ec5b1cd20c47f50b8d71b11ef475576d4c GIT binary patch literal 11833 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 S@3r}JxBYpib7bqQzy1%rI8nd= literal 0 HcmV?d00001 diff --git a/src/frameworks/customtk/engine/code.js b/src/frameworks/customtk/engine/code.js index 6568b1d..62920f6 100644 --- a/src/frameworks/customtk/engine/code.js +++ b/src/frameworks/customtk/engine/code.js @@ -130,8 +130,6 @@ async function generateCustomTkCode(projectName, widgetList=[], widgetRefs=[], a message.info("starting zipping files, download will start in a few seconds") - return - const createFileList = [ { fileData: code.join(""), diff --git a/src/frameworks/customtk/sidebarWidgets.js b/src/frameworks/customtk/sidebarWidgets.js index dd0cd4a..1b73494 100644 --- a/src/frameworks/customtk/sidebarWidgets.js +++ b/src/frameworks/customtk/sidebarWidgets.js @@ -12,10 +12,10 @@ import { Input, Text } from "./widgets/input" import SpinBox from "./widgets/spinBox" import MainWindowImage from "./assets/widgets/main/mainwindow2.png" -import TopLevelImage from "./assets/widgets/main/Toplevel.png" +import TopLevelImage from "./assets/widgets/main/Toplevel2.png" import FrameImage from "./assets/widgets/main/frame2.png" import LabelImage from "./assets/widgets/main/label.png" -import ButtonImage from "./assets/widgets/main/button.png" +import ButtonImage from "./assets/widgets/main/button2.png" import InputImage from "./assets/widgets/main/input.png" import TextAreaImage from "./assets/widgets/main/textarea.png" import SliderImage from "./assets/widgets/main/slider.png" diff --git a/src/frameworks/customtk/widgets/ checkButton.js b/src/frameworks/customtk/widgets/ checkButton.js index b1d3eeb..d478a67 100644 --- a/src/frameworks/customtk/widgets/ checkButton.js +++ b/src/frameworks/customtk/widgets/ checkButton.js @@ -62,11 +62,11 @@ export class CheckBox extends CustomTkWidgetBase{ generateCode(variableName, parent){ const labelText = this.getAttrValue("checkLabel") - const config = convertObjectToKeyValueString(this.getConfigCode()) + const config = this.getConfigCode() const code = [ `${variableName} = ctk.CTkCheckBox(master=${parent}, text="${labelText}")`, - `${variableName}.configure(${config})`, + `${variableName}.configure(${convertObjectToKeyValueString(config)})`, ] if (this.getAttrValue("defaultChecked")){ @@ -158,20 +158,26 @@ export class RadioButton extends CustomTkWidgetBase{ generateCode(variableName, parent){ - const config = convertObjectToKeyValueString(this.getConfigCode()) + const {border_width, ...config} = this.getConfigCode() + + if (border_width){ + // there is no border width in RadioButton + config["border_width_checked"] = border_width + } const code = [ `${variableName}_var = ctk.IntVar()`, ] const radios = this.getAttrValue("radios") - + // FIXME: Error: ValueError: ['value'] are not supported arguments. Look at the documentation for supported arguments. + radios.inputs.forEach((radio_text, idx) => { const radioBtnVariable = `${variableName}_${idx}` code.push(`\n`) - code.push(`${radioBtnVariable} = ctk.CTkRadioButton(master=${parent}, variable=${variableName}_var, text="${radio_text}")`) - code.push(`${radioBtnVariable}.configure(${config}, value=${idx})`) + code.push(`${radioBtnVariable} = ctk.CTkRadioButton(master=${parent}, variable=${variableName}_var, text="${radio_text}", value=${idx})`) + code.push(`${radioBtnVariable}.configure(${convertObjectToKeyValueString(config)})`) code.push(`${radioBtnVariable}.${this.getLayoutCode()}`) }) diff --git a/src/frameworks/customtk/widgets/base.js b/src/frameworks/customtk/widgets/base.js index 5091543..f78c5a3 100644 --- a/src/frameworks/customtk/widgets/base.js +++ b/src/frameworks/customtk/widgets/base.js @@ -573,7 +573,10 @@ export class CustomTkWidgetBase extends CustomTkBase{ const config = { fg_color: `"${this.getAttrValue("styling.backgroundColor")}"`, - text_color: `"${this.getAttrValue("styling.foregroundColor")}"`, + } + + if (this.getAttrValue("styling.foregroundColor")){ + config["text_color"] = `"${this.getAttrValue("styling.foregroundColor")}"` } if (this.getAttrValue("styling.borderRadius")){ diff --git a/src/frameworks/customtk/widgets/button.js b/src/frameworks/customtk/widgets/button.js index 77f07dc..e85714b 100644 --- a/src/frameworks/customtk/widgets/button.js +++ b/src/frameworks/customtk/widgets/button.js @@ -31,7 +31,8 @@ class Button extends CustomTkWidgetBase{ componentDidMount(){ super.componentDidMount() - this.setAttrValue("styling.backgroundColor", "#E4E2E2") + this.setAttrValue("styling.backgroundColor", "#029CFF") + this.setAttrValue("styling.foregroundColor", "#fff") } generateCode(variableName, parent){ @@ -42,7 +43,7 @@ class Button extends CustomTkWidgetBase{ return [ `${variableName} = ctk.CTkButton(master=${parent}, text="${labelText}")`, - `${variableName}.config(${config})`, + `${variableName}.configure(${config})`, `${variableName}.${this.getLayoutCode()}` ] } diff --git a/src/frameworks/customtk/widgets/frame.js b/src/frameworks/customtk/widgets/frame.js index c0174bc..286ec70 100644 --- a/src/frameworks/customtk/widgets/frame.js +++ b/src/frameworks/customtk/widgets/frame.js @@ -32,7 +32,7 @@ class Frame extends CustomTkBase{ return [ `${variableName} = ctk.CTkFrame(master=${parent})`, - `${variableName}.configure(bg="${bg}")`, + `${variableName}.configure(fg_color="${bg}")`, `${variableName}.${this.getLayoutCode()}` ] } diff --git a/src/frameworks/customtk/widgets/input.js b/src/frameworks/customtk/widgets/input.js index f9ea82e..ee73d93 100644 --- a/src/frameworks/customtk/widgets/input.js +++ b/src/frameworks/customtk/widgets/input.js @@ -40,7 +40,7 @@ export class Input extends CustomTkWidgetBase{ const config = convertObjectToKeyValueString(this.getConfigCode()) return [ - `${variableName} = ctk.CTkEntry(master=${parent}, text="${placeHolderText}")`, + `${variableName} = ctk.CTkEntry(master=${parent}, placeholder_text="${placeHolderText}")`, `${variableName}.configure(${config})`, `${variableName}.${this.getLayoutCode()}` ] diff --git a/src/frameworks/customtk/widgets/label.js b/src/frameworks/customtk/widgets/label.js index 1a4ae9c..0e36b12 100644 --- a/src/frameworks/customtk/widgets/label.js +++ b/src/frameworks/customtk/widgets/label.js @@ -79,7 +79,7 @@ class Label extends CustomTkWidgetBase{ const {border_color, border_width, ...config} = this.getConfigCode() const image = this.getAttrValue("imageUpload") - console.log("Object: ", config) + // console.log("Object: ", config) let labelInitialization = `${variableName} = ctk.CTkLabel(master=${parent}, text="${labelText}")` diff --git a/src/frameworks/customtk/widgets/mainWindow.js b/src/frameworks/customtk/widgets/mainWindow.js index fa4ce86..82912a7 100644 --- a/src/frameworks/customtk/widgets/mainWindow.js +++ b/src/frameworks/customtk/widgets/mainWindow.js @@ -35,7 +35,7 @@ class MainWindow extends CustomTkBase{ componentDidMount(){ super.componentDidMount() - this.setAttrValue("styling.backgroundColor", "#E4E2E2") + this.setAttrValue("styling.backgroundColor", "#23272D") // this.setWidgetName("main") // Don't do this as this will cause conflicts while loading names } @@ -45,7 +45,7 @@ class MainWindow extends CustomTkBase{ return [ `${variableName} = ctk.CTk()`, - `${variableName}.configure(bg="${backgroundColor}")`, + `${variableName}.configure(fg_color="${backgroundColor}")`, `${variableName}.title("${this.getAttrValue("title")}")` ] } diff --git a/src/frameworks/customtk/widgets/optionMenu.js b/src/frameworks/customtk/widgets/optionMenu.js index b135903..b272023 100644 --- a/src/frameworks/customtk/widgets/optionMenu.js +++ b/src/frameworks/customtk/widgets/optionMenu.js @@ -1,7 +1,7 @@ import Tools from "../../../canvas/constants/tools" import { DownOutlined } from "@ant-design/icons" import { CustomTkWidgetBase} from "./base" -import { convertObjectToKeyValueString } from "../../../utils/common" +import { convertObjectToKeyValueString, removeKeyFromObject } from "../../../utils/common" class OptionMenu extends CustomTkWidgetBase{ @@ -14,14 +14,18 @@ class OptionMenu extends CustomTkWidgetBase{ // const {layout, ...newAttrs} = this.state.attrs // Removes the layout attribute this.minSize = {width: 50, height: 30} - + + let newAttrs = removeKeyFromObject("styling.borderColor", this.state.attrs) + newAttrs = removeKeyFromObject("styling.borderWidth", newAttrs) + this.state = { ...this.state, isDropDownOpen: false, widgetName: "Option menu", - size: { width: 120, height: 'fit' }, + size: { width: 120, height: 30 }, + fitContent: { width: true, height: true }, attrs: { - ...this.state.attrs, + ...newAttrs, defaultValue: { label: "Default Value", tool: Tools.INPUT, @@ -52,21 +56,21 @@ class OptionMenu extends CustomTkWidgetBase{ generateCode(variableName, parent){ - const config = convertObjectToKeyValueString(this.getConfigCode()) + const config = this.getConfigCode() const defaultValue = this.getAttrValue("defaultValue") - const options = JSON.stringify(this.getAttrValue("widgetOptions").inputs) + const options = this.getAttrValue("widgetOptions").inputs const code = [ - `${variableName}_options = ${options}`, - `${variableName}_var = ctk.StringVar(value="${defaultValue || options.at(1) || ""}")`, - `${variableName} = ctk.CTkOptionMenu(${parent}, ${variableName}_var, *${variableName}_options)` + `${variableName}_options = ${JSON.stringify(options)}`, + `${variableName}_var = ctk.StringVar(value="${options.at(1) || defaultValue || ''}")`, + `${variableName} = ctk.CTkOptionMenu(${parent}, variable=${variableName}_var, values=${variableName}_options)` ] return [ ...code, - `${variableName}.configure(${config})`, + `${variableName}.configure(${convertObjectToKeyValueString(config)})`, `${variableName}.${this.getLayoutCode()}` ] } diff --git a/src/frameworks/customtk/widgets/slider.js b/src/frameworks/customtk/widgets/slider.js index bb35870..8378978 100644 --- a/src/frameworks/customtk/widgets/slider.js +++ b/src/frameworks/customtk/widgets/slider.js @@ -11,22 +11,26 @@ class Slider extends CustomTkWidgetBase{ constructor(props) { super(props) + let newAttrs = removeKeyFromObject("styling.foregroundColor", this.state.attrs) + + this.state = { ...this.state, widgetName: "Scale", - size: { width: 'fit', height: 'fit' }, + size: { width: 120, height: 10 }, + fitContent: {width: true, height: true}, attrs: { - ...this.state.attrs, + ...newAttrs, styling: { - ...this.state.attrs.styling, + ...newAttrs.styling, // TODO: trough color - troughColor: { - label: "Trough Color", + progressColor: { + label: "Progress Color", tool: Tools.COLOR_PICKER, - value: "#fff", + value: "#029CFF", onChange: (value) => { // this.setWidgetInnerStyle("color", value) - this.setAttrValue("styling.troughColor", value) + this.setAttrValue("styling.progressColor", value) } } }, @@ -100,7 +104,9 @@ class Slider extends CustomTkWidgetBase{ config["from_"] = this.getAttrValue("scale.min") config["to"] = this.getAttrValue("scale.max") - config["resolution"] = this.getAttrValue("scale.step") + config["number_of_steps"] = this.getAttrValue("scale.step") + + config["progress_color"] = `"${this.getAttrValue("styling.progressColor")}"` if (this.getAttrValue("orientation")){ config["orientation"] = this.getAttrValue("orientation") diff --git a/src/frameworks/customtk/widgets/toplevel.js b/src/frameworks/customtk/widgets/toplevel.js index b0fa44f..86c547b 100644 --- a/src/frameworks/customtk/widgets/toplevel.js +++ b/src/frameworks/customtk/widgets/toplevel.js @@ -34,7 +34,7 @@ class TopLevel extends Widget{ componentDidMount(){ super.componentDidMount() - this.setAttrValue("styling.backgroundColor", "#E4E2E2") + this.setAttrValue("styling.backgroundColor", "#23272D") } generateCode(variableName, parent){ @@ -43,7 +43,7 @@ class TopLevel extends Widget{ return [ `${variableName} = ctk.CTkToplevel(master=${parent})`, - `${variableName}.configure(bg="${backgroundColor}")`, + `${variableName}.configure(fg_color="${backgroundColor}")`, `${variableName}.title("${this.getAttrValue("title")}")` ] } diff --git a/src/frameworks/tkinter/engine/code.js b/src/frameworks/tkinter/engine/code.js index a9644b1..ae63c92 100644 --- a/src/frameworks/tkinter/engine/code.js +++ b/src/frameworks/tkinter/engine/code.js @@ -85,7 +85,7 @@ function generateTkinterCodeList(widgetList = [], widgetRefs = [], parentVariabl async function generateTkinterCode(projectName, widgetList=[], widgetRefs=[], assetFiles){ - console.log("widgetList and refs", projectName, widgetList, widgetRefs, assetFiles) + // console.log("widgetList and refs", projectName, widgetList, widgetRefs, assetFiles) let mainWindowCount = 0 diff --git a/src/frameworks/tkinter/widgets/optionMenu.js b/src/frameworks/tkinter/widgets/optionMenu.js index 5bc0f1c..fe52196 100644 --- a/src/frameworks/tkinter/widgets/optionMenu.js +++ b/src/frameworks/tkinter/widgets/optionMenu.js @@ -19,7 +19,8 @@ class OptionMenu extends TkinterWidgetBase{ ...this.state, isDropDownOpen: false, widgetName: "Option menu", - size: { width: 120, height: 'fit' }, + size: { width: 120, height: 30 }, + fitContent: { width: true, height: true }, attrs: { ...this.state.attrs, defaultValue: { @@ -55,11 +56,11 @@ class OptionMenu extends TkinterWidgetBase{ const config = convertObjectToKeyValueString(this.getConfigCode()) const defaultValue = this.getAttrValue("defaultValue") - const options = JSON.stringify(this.getAttrValue("widgetOptions").inputs) + const options = this.getAttrValue("widgetOptions").inputs const code = [ - `${variableName}_options = ${options}`, - `${variableName}_var = tk.StringVar(value="${defaultValue || options.at(1) || ""}")`, + `${variableName}_options = ${JSON.stringify(options)}`, + `${variableName}_var = tk.StringVar(value="${options.at(1) || defaultValue || ''}")`, `${variableName} = tk.OptionMenu(${parent}, ${variableName}_var, *${variableName}_options)` ] diff --git a/src/frameworks/tkinter/widgets/slider.js b/src/frameworks/tkinter/widgets/slider.js index 3c9da59..c72763d 100644 --- a/src/frameworks/tkinter/widgets/slider.js +++ b/src/frameworks/tkinter/widgets/slider.js @@ -14,7 +14,8 @@ class Slider extends TkinterWidgetBase{ this.state = { ...this.state, widgetName: "Scale", - size: { width: 'fit', height: 'fit' }, + size: { width: 120, height: 10 }, + fitContent: {width: true, height: true}, attrs: { ...this.state.attrs, styling: {