Implemented splash screen

I’ve finally finished implementing the splash screen for Kadent. On the left side, there are two buttons for creating or opening a project. The right panel shows the recent projects.

Challenge

The biggest challenge in implementing the splash screen was to layout UI components. It was quite hard to center the logo and the buttons. I spent around 1hrs dealing with that problem.

Here’s how I solved it:

const BUTTON_WIDTH: f32 = 300.0;
const BUTTON_HEIGHT: f32 = 42.0;
const CONTENT_HEIGHT: f32 = 60.0 + 12.0 + 16.0 + 24.0 + 12.0 + BUTTON_HEIGHT * 2.0;

impl SplashUi {
    pub(super) fn splash_controls(&mut self, ui: &mut egui::Ui) -> Option<EditorTransition> {
        ui.vertical_centered(|ui| {
            // Add space to vertically center the UI parts
            ui.add_space(full_height / 2.0 - CONTENT_HEIGHT / 2.0);
            // UI Components
        })
        .inner
    }
}

Since centering both horizontally and vertically while calculating the height of the inner content is painful, I eventually hardcoded the height of the UI components in order to center the UI vertically.

Logo

I’ve also designed a logo for Kadent in the meantime. I tweaked the font called “Inter”, which is available on Google Fonts, for the logo.