diff --git a/src/frameworks/tkinter/engine/code.js b/src/frameworks/tkinter/engine/code.js index 9abe2f3..3f6257c 100644 --- a/src/frameworks/tkinter/engine/code.js +++ b/src/frameworks/tkinter/engine/code.js @@ -138,8 +138,6 @@ async function generateTkinterCode(projectName, widgetList=[], widgetRefs=[], as } ] - // TODO: Zip asset files - if (requirements.length > 0){ createFileList.push({ fileData: requirements.join("\n"), diff --git a/src/frameworks/tkinter/plugins/analogTimepicker.js b/src/frameworks/tkinter/plugins/analogTimepicker.js index 7ecd96c..6ac87d9 100644 --- a/src/frameworks/tkinter/plugins/analogTimepicker.js +++ b/src/frameworks/tkinter/plugins/analogTimepicker.js @@ -1,16 +1,26 @@ import React from "react" -import { timePicker, timePickerInput } from 'analogue-time-picker' +import { timePicker } from 'analogue-time-picker' import Widget from "../../../canvas/widgets/base" import Tools from "../../../canvas/constants/tools" -import { removeKeyFromObject } from "../../../utils/common" +import { convertObjectToKeyValueString, removeKeyFromObject } from "../../../utils/common" +import { TkinterBase } from "../widgets/base" + +import "./styles/timepickerStyle.css" -class AnalogTimePicker extends Widget{ +class AnalogTimePicker extends TkinterBase{ static widgetType = "analogue_timepicker" + static requiredImports = [ + ...TkinterBase.requiredImports, + 'from tktimepicker import AnalogPicker, AnalogThemes' + ] + + static requirements = ["tkTimePicker"] + constructor(props) { super(props) @@ -28,27 +38,72 @@ class AnalogTimePicker extends Widget{ attrs: { ...newAttrs, styling: { + theme:{ + label: "Theme", + tool: Tools.SELECT_DROPDOWN, + toolProps: {placeholder: "select theme"}, + value: "", + options: ["Dracula", "Navy blue", "Purple"].map(val => ({value: val, label: val})), + onChange: (value) => this.handleThemeChange(value) + }, ...newAttrs.styling, - foregroundColor: { - label: "Foreground Color", + clockColor: { + label: "Clock Color", + tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string + value: "#EEEEEE", + onChange: (value) => { + this.setAttrValue("styling.clockColor", value) + } + }, + displayColor: { + label: "Display Color", tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string value: "#000", onChange: (value) => { - this.setWidgetInnerStyle("color", value) - this.setAttrValue("styling.foregroundColor", value) + this.setAttrValue("styling.displayColor", value) + } + }, + numberColor: { + label: "Numbers Color", + tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string + value: "#000", + onChange: (value) => { + this.setAttrValue("styling.numberColor", value) + } + }, + handleColor: { + label: "Handle Color", + tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string + value: "#000000c0", + onChange: (value) => { + this.setAttrValue("styling.handleColor", value) + } + }, + + }, + clockMode:{ + label: "Clock Mode", + tool: Tools.SELECT_DROPDOWN, + toolProps: {placeholder: "select mode", defaultValue: 12}, + value: 12, + options: [12, 24].map(val => ({value: val, label: val})), + onChange: (value) => { + this.setAttrValue("clockMode", value) + if (value === 24){ + // FIXME: the timepicker for 24 hrs also shows 12 hrs time + + this.timePicker.set24h() + + }else{ + this.timePicker.set12h() } } }, - buttonLabel: { - label: "Button Label", - tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string - toolProps: {placeholder: "Button label", maxLength: 100}, - value: "Button", - onChange: (value) => this.setAttrValue("buttonLabel", value) - } } } + + this.handleThemeChange = this.handleThemeChange.bind(this) } componentDidMount(){ @@ -61,6 +116,7 @@ class AnalogTimePicker extends Widget{ mode: "12" }) + // used to remove ok and cancel buttons const timePickerBtns = this.timePickerRef.current.getElementsByClassName("atp-clock-btn") for (let i = 0; i < timePickerBtns.length; i++) { timePickerBtns[i].remove() @@ -71,6 +127,51 @@ class AnalogTimePicker extends Widget{ this.timePicker.dispose() } + handleThemeChange(value){ + this.setAttrValue("styling.theme", value) + + if (value === "Navy blue"){ + this.setAttrValue("styling.handleColor", "#009688") + this.setAttrValue("styling.displayColor", "#009688") + this.setAttrValue("styling.backgroundColor", "#fff") + this.setAttrValue("styling.clockColor", "#EEEEEE") + this.setAttrValue("styling.numberColor", "#000") + }else if (value === "Dracula"){ + this.setAttrValue("styling.handleColor", "#863434") + this.setAttrValue("styling.displayColor", "#404040") + this.setAttrValue("styling.backgroundColor", "#404040") + this.setAttrValue("styling.clockColor", "#363636") + this.setAttrValue("styling.numberColor", "#fff") + }else if (value === "Purple"){ + this.setAttrValue("styling.handleColor", "#EE333D") + this.setAttrValue("styling.displayColor", "#71135C") + this.setAttrValue("styling.backgroundColor", "#4E0D3A") + this.setAttrValue("styling.clockColor", "#71135C") + this.setAttrValue("styling.numberColor", "#fff") + } + + } + + generateCode(variableName, parent){ + + const theme = this.getAttrValue("styling.theme") + + const mode = this.getAttrValue("clockMode") + const bgColor = this.getAttrValue("styling.backgroundColor") + const clockColor = this.getAttrValue("styling.clockColor") + const displayColor = this.getAttrValue("styling.displayColor") + const numColor = this.getAttrValue("styling.numberColor") + const handleColor = this.getAttrValue("styling.handleColor") + + const config = convertObjectToKeyValueString(this.getConfigCode()) + + return [ + `${variableName} = AnalogPicker(master=${parent})`, + `${variableName}.config(${config})`, + `${variableName}.${this.getLayoutCode()}` + ] + } + getToolbarAttrs(){ const toolBarAttrs = super.getToolbarAttrs() @@ -79,7 +180,6 @@ class AnalogTimePicker extends Widget{ return ({ id: this.__id, widgetName: toolBarAttrs.widgetName, - buttonLabel: this.state.attrs.buttonLabel, size: toolBarAttrs.size, ...this.state.attrs, @@ -87,12 +187,22 @@ class AnalogTimePicker extends Widget{ }) } + renderContent(){ + const timePickerStyling = { + '--bg': this.getAttrValue("styling.backgroundColor"), + '--clock-color': this.getAttrValue("styling.clockColor"), + '--number-color': this.getAttrValue("styling.numberColor"), + '--time-display': this.getAttrValue("styling.displayColor"), + '--main-handle-color': this.getAttrValue("styling.handleColor"), + } + return (
+ style={timePickerStyling} + ref={this.timePickerRef}>
diff --git a/src/frameworks/tkinter/plugins/styles/timepickerStyle.css b/src/frameworks/tkinter/plugins/styles/timepickerStyle.css new file mode 100644 index 0000000..977997a --- /dev/null +++ b/src/frameworks/tkinter/plugins/styles/timepickerStyle.css @@ -0,0 +1,28 @@ + +.atp-time { + background-color: var(--time-display, black) !important; + text-align: center !important; + font-size: 35px; +} + +.atp-clock-cnt { + background-color: var(--bg, white) !important; +} + +.atp-face-color { + background-color: var(--clock-color, #EEEEEE) !important; +} + +.atp-n { + color: var(--number-color, #000) !important; +} + +/* .atp-color--primary { + background-color: var(--main-handle-color, #000000c0) !important; +} */ + + +.atp-h-cnt-cnt .atp-h-ctn, .atp-h, .atp-b, .atp-h-dot{ + /* affects only the handle*/ + background-color: var(--main-handle-color, #000000c0) !important; +} \ No newline at end of file