Complete welcome_page and add language_page

src/build_ui.rs

@@ -10,11 +10,7 @@ use gdk::Display;
 use gtk::subclass::layout_child;
 use crate::save_window_size;
 use crate::welcome_page;
-
+use crate::language_page;
-use std::thread;
-use std::time::*;
-use fragile::*;
-
 
 // build ui function linked to app startup above
 pub fn build_ui(app: &adw::Application) {
@@ -45,6 +41,7 @@ pub fn build_ui(app: &adw::Application) {
     let content_stack = gtk::Stack::builder()
         .hexpand(true)
         .vexpand(true)
+        .transition_type(StackTransitionType::SlideLeftRight)
         .build();
     
     /// Add a Visual Stack Switcher for content_stack
@@ -59,6 +56,7 @@ pub fn build_ui(app: &adw::Application) {
     // create the bottom box for next and back buttons
     let bottom_box = gtk::Box::builder()
         .orientation(Orientation::Horizontal)
+        .visible(false)
         .build();
     
     // Next and back button
@@ -101,12 +99,15 @@ pub fn build_ui(app: &adw::Application) {
 
     // Add welcome_page.rs as a page for content_stack
     welcome_page(&content_stack);
-    bottom_box.set_visible(false);
+    // if content_stack visible child becomes NOT content_stack, show the buttom box 
     content_stack.connect_visible_child_notify(clone!(@weak bottom_box => move |content_stack| {
         let state = content_stack.visible_child_name().as_deref() != Some("welcome_page");
         bottom_box.set_visible(state);
       }));
 
+    // Add language_page.rs as a page for content_stack
+    language_page(&content_stack);
+
     // create the main Application window
     let window = adw::ApplicationWindow::builder()
         // The text on the titlebar

src/language_page.rs

@@ -0,0 +1,84 @@
+// Use libraries
+/// Use all gtk4 libraries (gtk4 -> gtk because cargo)
+/// Use all libadwaita libraries (libadwaita -> adw because cargo)
+use gtk::prelude::*;
+use gtk::*;
+use adw::prelude::*;
+use adw::*;
+use glib::*;
+use gdk::Display;
+use gtk::subclass::layout_child;
+
+pub fn language_page(content_stack: &gtk::Stack) {
+   // the header box for the language page
+   let language_main_box = gtk::Box::builder()
+       .orientation(Orientation::Vertical)
+       .build();
+
+   // the header box for the language page
+   let language_header_box = gtk::Box::builder()
+       .orientation(Orientation::Horizontal)
+       .build();
+
+   // the header text for the language page
+   let language_header_text = gtk::Label::builder()
+       .label("language to PikaOS")
+       .halign(gtk::Align::End)
+       .hexpand(true)
+       .margin_top(15)
+       .margin_bottom(15)
+       .margin_start(15)
+       .margin_end(5)
+       .build();
+    language_header_text.add_css_class("header_sized_text");
+
+   // the header icon for the language icon
+   let language_header_icon = gtk::Image::builder()
+       .icon_name("debian-swirl")
+       .halign(gtk::Align::Start)
+       .hexpand(true)
+       .pixel_size(78)
+       .margin_top(15)
+       .margin_bottom(15)
+       .margin_start(0)
+       .margin_end(15)
+       .build();
+
+   // make language selection box for choosing installation or live media 
+   let language_selection_box = gtk::Box::builder()
+       .orientation(Orientation::Horizontal)
+       .spacing(200)
+       .build();
+
+    // / language_header_box appends
+    //// Add the language page header text and icon
+    language_header_box.append(&language_header_text);
+    language_header_box.append(&language_header_icon);
+    
+    // / language_main_box appends
+    //// Add the language header to language main box
+    language_main_box.append(&language_header_box);
+    //// Add the language selection/page content box to language main box
+    language_main_box.append(&language_selection_box);
+
+
+    // / language_selection_box appends
+    //// add live and install media button to language page selections
+//    language_selection_box.append(&live_media_button);
+//    language_selection_box.append(&install_media_button);
+    
+    // / language_header_box appends
+    //// Add the language page header text and icon
+    language_header_box.append(&language_header_text);
+    language_header_box.append(&language_header_icon);
+    
+    // / language_main_box appends
+    //// Add the language header to language main box
+    language_main_box.append(&language_header_box);
+    //// Add the language selection/page content box to language main box
+    language_main_box.append(&language_selection_box);
+    
+    // / Content stack appends
+    //// Add the language_main_box as page: language_page, Give it nice title
+    content_stack.add_titled(&language_main_box, Some("language_page"), "Language");
+}

src/main.rs

@@ -13,8 +13,10 @@ mod build_ui;
 use crate::build_ui::build_ui;
 mod save_window_size;
 mod welcome_page;
+mod language_page;
 use crate::save_window_size::save_window_size;
 use crate::welcome_page::welcome_page;
+use crate::language_page::language_page;
 
 
 /// main function

src/style.css

@@ -6,3 +6,7 @@
 .header_sized_text {
     font-size: 32px;
 }
+
+.medium_sized_text {
+    font-size: 18px;
+}

src/welcome_page.rs

@@ -30,6 +30,7 @@ pub fn welcome_page(content_stack: &gtk::Stack) {
        .margin_start(15)
        .margin_end(5)
        .build();
+    welcome_header_text.add_css_class("header_sized_text");
 
    // the header icon for the welcome icon
    let welcome_header_icon = gtk::Image::builder()
@@ -46,7 +47,7 @@ pub fn welcome_page(content_stack: &gtk::Stack) {
    // make welcome selection box for choosing installation or live media 
    let welcome_selection_box = gtk::Box::builder()
        .orientation(Orientation::Horizontal)
-       .spacing(360)
+       .spacing(200)
        .build();
 
    let live_media_button_content_box = gtk::Box::builder()
@@ -57,11 +58,42 @@ pub fn welcome_page(content_stack: &gtk::Stack) {
        .icon_name("drive-optical")
        .pixel_size(128)
        .margin_top(15)
-       .margin_bottom(0)
+       .margin_bottom(15)
        .margin_start(15)
        .margin_end(15)
        .build();
 
+   let live_media_button_content_text = gtk::Label::builder()
+       .label("Use PikaOS in Live media")
+       .margin_top(0)
+       .margin_bottom(15)
+       .margin_start(15)
+       .margin_end(15)
+       .build();
+    live_media_button_content_text.add_css_class("medium_sized_text");
+
+   let install_media_button_content_box = gtk::Box::builder()
+       .orientation(Orientation::Vertical)
+       .build();
+
+   let install_media_button_content_image = gtk::Image::builder()
+       .icon_name("drive-harddisk")
+       .pixel_size(128)
+       .margin_top(15)
+       .margin_bottom(15)
+       .margin_start(15)
+       .margin_end(15)
+       .build();
+
+   let install_media_button_content_text = gtk::Label::builder()
+       .label("Install Distro to System")
+       .margin_top(0)
+       .margin_bottom(15)
+       .margin_start(15)
+       .margin_end(15)
+       .build();
+    install_media_button_content_text.add_css_class("medium_sized_text");
+
    let live_media_button = gtk::Button::builder()
        .child(&live_media_button_content_box)
        .vexpand(true)
@@ -72,17 +104,22 @@ pub fn welcome_page(content_stack: &gtk::Stack) {
 
 
    let install_media_button = gtk::Button::builder()
+       .child(&install_media_button_content_box)
        .vexpand(true)
        .hexpand(true)
        .halign(gtk::Align::Start)
        .valign(gtk::Align::Center)
        .build();
 
-    welcome_header_text.add_css_class("header_sized_text");
-
     // / live_media_button_content_box appends
     //// add image and text to the live_media_button
     live_media_button_content_box.append(&live_media_button_content_image);
+    live_media_button_content_box.append(&live_media_button_content_text);
+
+    // / install_media_button_content_box appends
+    //// add image and text to the install_media_button
+    install_media_button_content_box.append(&install_media_button_content_image);
+    install_media_button_content_box.append(&install_media_button_content_text);
 
     // / welcome_selection_box appends
     //// add live and install media button to welcome page selections
@@ -100,8 +137,6 @@ pub fn welcome_page(content_stack: &gtk::Stack) {
     //// Add the welcome selection/page content box to welcome main box
     welcome_main_box.append(&welcome_selection_box);
     
-    welcome_header_text.add_css_class("header_sized_text");
-    
     // Start Appending widgets to boxes
 
     // / live_media_button_content_box appends
@@ -128,10 +163,7 @@ pub fn welcome_page(content_stack: &gtk::Stack) {
     // / Content stack appends
     //// Add the welcome_main_box as page: welcome_page, Give it nice title
     content_stack.add_titled(&welcome_main_box, Some("welcome_page"), "Welcome");
+    let content_stack_clone = content_stack.clone();
+    install_media_button.connect_clicked(move |_| content_stack_clone.set_visible_child_name("language_page"));
 
-    let hahaha = gtk::Button::builder()
-        .label("Rot")
-        .build();
-
-    content_stack.add_titled(&hahaha, Some("shit_page"), "SHit");
 }