diff --git a/nimanyatta_v001/.DS_Store b/nimanyatta_v001/.DS_Store new file mode 100644 index 0000000..001d9ef Binary files /dev/null and b/nimanyatta_v001/.DS_Store differ diff --git a/nimanyatta_v001/.gitignore b/nimanyatta_v001/.gitignore index 48c3ca4..bdfee3e 100644 --- a/nimanyatta_v001/.gitignore +++ b/nimanyatta_v001/.gitignore @@ -1,3 +1,4 @@ /dist/ /target/ /Cargo.lock +extra.txt diff --git a/nimanyatta_v001/Cargo.toml b/nimanyatta_v001/Cargo.toml index 16a46d3..9580a97 100644 --- a/nimanyatta_v001/Cargo.toml +++ b/nimanyatta_v001/Cargo.toml @@ -3,5 +3,23 @@ name = "nimanyatta_v001" version = "0.1.0" edition = "2021" +[lib] +name = "nimanyatta_v001" +crate-type = ["staticlib", "cdylib", "rlib"] + [dependencies] -makepad-widgets = { git = "https://github.com/makepad/makepad", branch = "rik" } +# makepad-widgets = { git = "https://github.com/makepad/makepad", branch = "rik", version = "0.6.0"} +makepad-widgets = { path = "../makepad/widgets", version = "0.6.0" } +makepad-draw = { path = "../makepad/draw", version = "0.6.0" } +# makepad-derive-widget = { path = "../makepad/widgets/derive_widget", version = "0.4.0" } +# makepad-derive-widget = { version = "0.4.0" } +makepad-derive-widget = { path = "../makepad/widgets/derive_widget", version = "0.4.0" } +makepad-wasm-bridge = { path = "../makepad/libs/wasm_bridge", version = "0.4.0" } + +# makepad-widgets = { path = "../makepad/widgets" } +# makepad-widgets = { git = "https://github.com/makepad/makepad", branch = "rik" } + +# [dependencies.nimanyatta_v001] +# version = "0.1.0" +# default-features = false +# features = ["wasm32"] diff --git a/nimanyatta_v001/README.md b/nimanyatta_v001/README.md index e69de29..0f9fd26 100644 --- a/nimanyatta_v001/README.md +++ b/nimanyatta_v001/README.md @@ -0,0 +1,31 @@ +# Desktop in Debug Mode + +cargo run +MAKEPAD=lines sudo cargo +nightly run nimanyatta_v001 + +# Desktop in Release Mode + +cargo run --release + +# Desktop in small size + +cargo run --profile=small + +# Android + +cargo makepad android run --release +sudo cargo makepad android run -p nimanyatta_v001 --release + +You can also customize the package name and application label + +``` +cargo run -p cargo-makepad --release -- android --package-name=com.yourcompany.myapp --app-label="My Example App" run -p makepad-example-ironfish +``` + +# wasm + +sudo cargo makepad wasm run -p nimanyatta_v001 --release + +RUSTFLAGS="-C linker-plugin-lto -C embed-bitcode=yes -C +codegen-units=1 -C opt-level=z" sudo cargo +nightly build -p nimanyatta_v001 --target=wasm32-unknown-unknown --release +cargo +stable run -p wasm_strip --release -- target/wasm32-unknown-unknown/release/nimanyatta_v001.wasm diff --git a/nimanyatta_v001/resources/.DS_Store b/nimanyatta_v001/resources/.DS_Store new file mode 100644 index 0000000..56bd6e8 Binary files /dev/null and b/nimanyatta_v001/resources/.DS_Store differ diff --git a/nimanyatta_v001/resources/back.svg b/nimanyatta_v001/resources/back.svg new file mode 100644 index 0000000..7178c73 --- /dev/null +++ b/nimanyatta_v001/resources/back.svg @@ -0,0 +1,4 @@ + + + + diff --git a/nimanyatta_v001/resources/forward.svg b/nimanyatta_v001/resources/forward.svg new file mode 100644 index 0000000..490dae4 --- /dev/null +++ b/nimanyatta_v001/resources/forward.svg @@ -0,0 +1,4 @@ + + + + diff --git a/nimanyatta_v001/resources/icons/drawable-mdpi/icon.png b/nimanyatta_v001/resources/icons/drawable-mdpi/icon.png new file mode 100644 index 0000000..e88f371 Binary files /dev/null and b/nimanyatta_v001/resources/icons/drawable-mdpi/icon.png differ diff --git a/nimanyatta_v001/resources/me.svg b/nimanyatta_v001/resources/me.svg index f9508de..140674f 100644 --- a/nimanyatta_v001/resources/me.svg +++ b/nimanyatta_v001/resources/me.svg @@ -1,4 +1,4 @@ - \ No newline at end of file + diff --git a/nimanyatta_v001/resources/profile.svg b/nimanyatta_v001/resources/profile.svg new file mode 100644 index 0000000..3742f56 --- /dev/null +++ b/nimanyatta_v001/resources/profile.svg @@ -0,0 +1,4 @@ + + + + diff --git a/nimanyatta_v001/resources/status_info.svg b/nimanyatta_v001/resources/status_info.svg new file mode 100644 index 0000000..d243817 --- /dev/null +++ b/nimanyatta_v001/resources/status_info.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/nimanyatta_v001/resources/x.svg b/nimanyatta_v001/resources/x.svg new file mode 100644 index 0000000..490dae4 --- /dev/null +++ b/nimanyatta_v001/resources/x.svg @@ -0,0 +1,4 @@ + + + + diff --git a/nimanyatta_v001/src/app.rs b/nimanyatta_v001/src/app.rs index e08abca..d0332eb 100644 --- a/nimanyatta_v001/src/app.rs +++ b/nimanyatta_v001/src/app.rs @@ -1,4 +1,6 @@ +// use crate::shared::stack_view_action::StackViewAction; use makepad_widgets::*; +// use std::collections::HashMap; live_design! { @@ -7,12 +9,20 @@ live_design! { import makepad_widgets::theme_desktop_dark::*; import crate::home::home_screen::HomeScreen; - import crate::default_choice::default_choice_screen::DefaultChoiceScreen; + import crate::default_choice::default_choice_screen::DefaultChoice; + // import crate::default_choice::choose::Choose; import crate::two::two_screen::TwoScreen; import crate::three::three_screen::ThreeScreen; import crate::four::four_screen::FourScreen; import crate::five::five_screen::FiveScreen; import crate::shared::styles::*; + import crate::shared::steps::Choices; + import crate::shared::steps::ChoicesComponent; + import crate::shared::popup_menu::MenuItem; + // import crate::shared::header::DropDown; + + // import crate::shared::stack_navigation::*;ChoicesComponent + REGULAR_TEXT = { font_size: (12), @@ -21,7 +31,7 @@ live_design! { ICON_CHAT = dep("crate://self/resources/icons/chat.svg") PHONE_CHAT = dep("crate://self/resources/icons/chat.svg") - AppTab = { + AppTab2 = { width: Fit, height: Fill, flow: Right, @@ -31,8 +41,43 @@ live_design! { // color: #000 draw_radio: { radio_type: Tab, - color_active: #fff, - color_inactive: #fff, + + instance border_width: 0.0 + instance border_color: #0000 + instance inset: vec4(0.0, 0.0, 0.0, 0.0) + instance radius: 2.5 + + fn get_color(self) -> vec4 { + return mix( + mix( + (SIDEBAR_BG_COLOR), + (SIDEBAR_BG_COLOR_HOVER), + self.hover + ), + (SIDEBAR_BG_COLOR_SELECTED), + self.selected + ) + } + + fn get_border_color(self) -> vec4 { + return self.border_color + } + + fn pixel(self) -> vec4 { + let sdf = Sdf2d::viewport(self.pos * self.rect_size) + sdf.box( + self.inset.x + self.border_width, + self.inset.y + self.border_width, + self.rect_size.x - (self.inset.x + self.inset.z + self.border_width * 2.0), + self.rect_size.y - (self.inset.y + self.inset.w + self.border_width * 2.0), + max(1.0, self.radius) + ) + sdf.fill_keep(self.get_color()) + if self.border_width > 0.0 { + sdf.stroke(self.get_border_color(), self.border_width) + } + return sdf.result; + } } draw_text: { color_selected: #000, //#0b0, @@ -41,9 +86,114 @@ live_design! { text_style: {} } } + SIDEBAR_FONT_COLOR = #344054 + SIDEBAR_FONT_COLOR_HOVER = #344054 + SIDEBAR_FONT_COLOR_SELECTED = #127487 + + // SIDEBAR_BG_COLOR = #F8F8F8 + SIDEBAR_BG_COLOR = #f + SIDEBAR_BG_COLOR_HOVER = #E2F1F199 + SIDEBAR_BG_COLOR_SELECTED = #E2F1F199 + + AppTab = { + width: 80, + height: 70, + padding: 0, margin: 0, + flow: Down, spacing: 8.0, align: {x: 0.5, y: 0.5} + + icon_walk: {margin: 0, width: 30, height: 30} + label_walk: {margin: 0} + + draw_radio: { + radio_type: Tab, + + instance border_width: 0.0 + instance border_color: #0000 + instance inset: vec4(0.0, 0.0, 0.0, 0.0) + instance radius: 2.5 + + fn get_color(self) -> vec4 { + return mix( + mix( + (SIDEBAR_BG_COLOR), + (SIDEBAR_BG_COLOR_HOVER), + self.hover + ), + (SIDEBAR_BG_COLOR_SELECTED), + self.selected + ) + } + + fn get_border_color(self) -> vec4 { + return self.border_color + } + + fn pixel(self) -> vec4 { + let sdf = Sdf2d::viewport(self.pos * self.rect_size) + sdf.box( + self.inset.x + self.border_width, + self.inset.y + self.border_width, + self.rect_size.x - (self.inset.x + self.inset.z + self.border_width * 2.0), + self.rect_size.y - (self.inset.y + self.inset.w + self.border_width * 2.0), + max(1.0, self.radius) + ) + sdf.fill_keep(self.get_color()) + if self.border_width > 0.0 { + sdf.stroke(self.get_border_color(), self.border_width) + } + return sdf.result; + } + } + + draw_text: { + color_unselected: (SIDEBAR_FONT_COLOR) + color_unselected_hover: (SIDEBAR_FONT_COLOR_HOVER) + color_selected: (SIDEBAR_FONT_COLOR_SELECTED) + + fn get_color(self) -> vec4 { + return mix( + mix( + self.color_unselected, + self.color_unselected_hover, + self.hover + ), + self.color_selected, + self.selected + ) + } + } + + draw_icon: { + instance color_unselected: (SIDEBAR_FONT_COLOR) + instance color_unselected_hover: (SIDEBAR_FONT_COLOR_HOVER) + instance color_selected: (SIDEBAR_FONT_COLOR_SELECTED) + fn get_color(self) -> vec4 { + return mix( + mix( + self.color_unselected, + self.color_unselected_hover, + self.hover + ), + self.color_selected, + self.selected + ) + } + } + } App = {{App}} { ui: { - caption_bar = { margin: {left: -100}, visible: true, caption_label = {label = {text: "NiManyatta"}} }, + caption_bar = { + margin: { + left: -100 + }, + visible: true, + caption_label = { + label = { + text: "NiManyatta" + } + } + }, + window: {inner_size: vec2(1280, 1000)}, body = { show_bg: true @@ -80,31 +230,36 @@ live_design! { } mobile_modes = { - - home_tab = { - flow: Right, - align: {x: 0.0, y: 0.5} - animator: {selected = {default: on}} - label: "" - draw_icon: { - svg_file: (ICON_CHAT), - fn get_color(self) -> vec4 { - return mix( - #000, - #016def,//#0b0, - self.selected - ) + // spacing: 20 + { + // padding: { right: 60 } + home_tab = { + flow: Right, + align: {x: 0.0, y: 0.5} + animator: {selected = {default: on}} + text: "" + draw_icon: { + svg_file: (ICON_CHAT), + fn get_color(self) -> vec4 { + return mix( + #000, + #016def,//#0b0, + self.selected + ) + } } + width: 80.0, + icon_walk: {width: 20, height: 20} + flow: Right, spacing: 5.0, align: {x: 0.5, y: 0.5} } - width: Fill, - icon_walk: {width: 20, height: 20} - flow: Right, spacing: 5.0, align: {x: 0.2, y: 0.5} } + { + align: {x: 0.5} two_tab = { flow: Right, align: {x: 0.0, y: 0.5} - animator: {selected = {default: on}} - label: "2" + // animator: {selected = {default: on}} + text: "2" draw_icon: { svg_file: (ICON_CHAT), fn get_color(self) -> vec4 { @@ -115,15 +270,18 @@ live_design! { ) } } - width: Fill, + width: 80.0, icon_walk: {width: 20, height: 20} flow: Down, spacing: 5.0, align: {x: 0.5, y: 0.5} } + } + { + align: {x: 0.5} three_tab = { flow: Right, align: {x: 0.0, y: 0.5} - animator: {selected = {default: on}} - label: "3" + // animator: {selected = {default: on}} + text: "3" draw_icon: { svg_file: (ICON_CHAT), fn get_color(self) -> vec4 { @@ -134,15 +292,18 @@ live_design! { ) } } - width: Fill, + width: 80.0, icon_walk: {width: 20, height: 20} flow: Down, spacing: 5.0, align: {x: 0.5, y: 0.5} } + } + { + align: {x: 0.5} four_tab = { flow: Right, align: {x: 0.0, y: 0.5} - animator: {selected = {default: on}} - label: "4" + // animator: {selected = {default: on}} + text: "4" draw_icon: { svg_file: (ICON_CHAT), fn get_color(self) -> vec4 { @@ -153,28 +314,32 @@ live_design! { ) } } - width: Fill, + width: 80.0, icon_walk: {width: 20, height: 20} flow: Down, spacing: 5.0, align: {x: 0.5, y: 0.5} } + } + { + align: {x: 1.0} five_tab = { - flow: Right, - align: {x: 0.0, y: 0.5} - animator: {selected = {default: on}} - label: "" - draw_icon: { - svg_file: (PHONE_CHAT), - fn get_color(self) -> vec4 { - return mix( - #000, - #016def,//#0b0, - self.selected - ) + flow: Right, + align: {x: 0.0, y: 0.5} + // animator: {selected = {default: on}} + text: "" + draw_icon: { + svg_file: (PHONE_CHAT), + fn get_color(self) -> vec4 { + return mix( + #000, + #016def,//#0b0, + self.selected + ) + } } + width: 80.0, + icon_walk: {width: 20, height: 20} + flow: Right, spacing: 5.0, align: {x: 0.5, y: 0.5} } - width: Fill, - icon_walk: {width: 20, height: 20} - flow: Right, spacing: 5.0, align: {x: 0.8, y: 0.5} } } @@ -184,10 +349,10 @@ live_design! { padding: 0.0 home_frame = { visible: true } - kimanyatta_frame = {visible: false} - insurance_frame = {visible: false} - matatu_frame = {visible: false} - contactus_frame = {visible: false} + two_frame = {visible: false} + three_frame = {visible: false} + four_frame = {visible: false} + five_frame = {visible: false} } } @@ -197,12 +362,15 @@ live_design! { title_container = { title = { text: "Help Me Choose" + draw_text: { + color: #000 + } } } } } body = { - {} + {} } } } @@ -217,6 +385,8 @@ app_main!(App); pub struct App { #[live] ui: WidgetRef, + // #[rust] + // navigation_destinations: HashMap, } impl LiveRegister for App { @@ -224,6 +394,8 @@ impl LiveRegister for App { crate::makepad_widgets::live_design(cx); crate::home::home_screen::live_design(cx); crate::default_choice::default_choice_screen::live_design(cx); + crate::default_choice::choice::live_design(cx); + // crate::default_choice::choose::live_design(cx); crate::two::two_screen::live_design(cx); crate::three::three_screen::live_design(cx); crate::four::four_screen::live_design(cx); @@ -231,12 +403,20 @@ impl LiveRegister for App { crate::shared::styles::live_design(cx); crate::shared::custom_button::live_design(cx); + crate::shared::round_slider::live_design(cx); + crate::shared::steps::live_design(cx); + crate::shared::cho::live_design(cx); + crate::shared::popup_menu::live_design(cx); + crate::shared::header::live_design(cx); + crate::shared::helpers::live_design(cx); + + crate::shared::dropdown_menu::live_design(cx); } } impl LiveHook for App { // fn after_new_from_doc(&mut self, _cx: &mut Cx) { - // // self.init_navigation_destinations(); + // self.init_navigation_destinations(); // } fn after_new_from_doc(&mut self, _cx: &mut Cx) { println!("after_new_from_doc(): starting some kind of a loop"); @@ -287,6 +467,16 @@ impl MatchEvent for App { let mut navigation = self.ui.stack_navigation(id!(navigation)); navigation.handle_stack_view_actions(cx, &actions); + + for action in actions { + if let WindowAction::WindowGeomChange(ce) = action.as_widget_action().cast() { + let screen_width = ce.new_geom.inner_size.x * ce.new_geom.dpi_factor; + + log!("x ===> {}", ce.new_geom.inner_size.x); + log!("dpi_factor ===> {}", ce.new_geom.dpi_factor); + log!("SCREEN_WIDTH ===> {}", screen_width); + } + } } } @@ -296,3 +486,26 @@ impl AppMain for App { self.ui.handle_event(cx, event, &mut Scope::empty()); } } + +// impl Widget for App { +// fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep { +// // let label = self.view.label(id!(footer)); +// // let cap = self.ui.widget(id!(caption_bar)); + +// // cap.apply_value_instance(cx, apply, index, nodes) + +// DrawStep::done() +// } +// } + +impl App { + async fn _do_network_request(_cx: CxRef, _ui: WidgetRef, _url: &str) -> String { + "".to_string() + } + // fn handle_event(&mut self, cx: &mut Cx, event: &Event) { + // if let Event::Draw(event) = event { + // return self.ui.draw_widget_all(&mut Cx2d::new(cx, event)); + // } + // let actions = self.ui.handle_widget_event(cx, event); + // } +} diff --git a/nimanyatta_v001/src/default_choice/cho.rs b/nimanyatta_v001/src/default_choice/cho.rs new file mode 100644 index 0000000..2586797 --- /dev/null +++ b/nimanyatta_v001/src/default_choice/cho.rs @@ -0,0 +1,682 @@ +// use makepad_widgets::*; +use crate::makepad_widgets::*; +const CHOICE_MAX_OFFSET: f64 = 700.0; +const SELECT_MAX_OFFSET: f64 = 500.0; +// use crate::shared::custom_button::CustomButton; + +live_design! { + import makepad_draw::shader::std::*; + import makepad_widgets::base::*; + import makepad_widgets::theme_desktop_dark::*; + import crate::shared::styles::*; + import crate::shared::steps::StepNav; + import crate::shared::custom_button::CustomButton; + + Indicator = { + width: 100.0 + height: 8.0 + draw_bg: { + color: #f60, + radius: 2.5 + } + } + ButChoices = { + flow: Down, + show_bg: false + draw_bg: { + color: #000 + } + align: {x: 0.5, y: 0.5} + but = { + width: 300, height: 45, + text: "Option 1" + draw_bg: { + border_radius: 2. + } + } + } + SelectOptions = {{SelectOptions}} { + // page_titles: [] + width: Fit, height: Fit, + // indicator_titles: [] + flow: Down, + spacing: 10, + align: {x: 0.5, y: 0.5}, + select_choices_values: [] + selects_template: { + flow: Down, + } + choice_page_offset: 0.0 + animator: { + selectopt = { + default: restart, + restart = { + from: {all: Snap} + apply: {choice_page_offset: 500.0} + } + show = { + redraw: false, + from: {all: Forward {duration: 0}} + apply: {choice_page_offset: 0.0} + } + } + } + + } + OptionC = {{Indicators}} { + width: Fit, + height: Fit, + flow: Down, + spacing: 5, + align: {x: 0.5, y: 0.5}, + indicator_titles: [] + template: { + width: 100, height: Fit, + // margin: 0, padding: 0 + text: "Option 1" + draw_bg: { + border_radius: 2. + } + } + } + StepsScreen = { + // width: 300, + height: Fit, + flow: Down, + padding: 10.0 + align: {x: 0.5, y: 0.5} + padding: 20, + spacing: 20, + step_title =