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 0000000..9916651 Binary files /dev/null and b/src/frameworks/customtk/assets/widgets/main/Toplevel2.png differ 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 0000000..e433a2e Binary files /dev/null and b/src/frameworks/customtk/assets/widgets/main/button2.png differ 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: {