UI tweaks, use B8G8R8A8_UNORM in wgui

dash-frontend/assets/gui/dashboard.xml

@@ -62,14 +62,18 @@
         overflow_x="scroll">
         <!-- CONTENT -->
         <rectangle
-          color2="#0d131acc"
-          color="#244179aa"
+          color2="#0d131aee"
+          color="#244179dd"
           gradient="vertical"
           round="8"
           flex_grow="1"
           width="100%"
           overflow_y="scroll"
         >
+          <!-- radial gradient -->
+          <rectangle
+            position="absolute" width="100%" height="100%"
+            gradient="radial" color="#44BBFF22" color2="#00000000" />
           <div
             id="content"
             overflow_x="scroll"

dash-frontend/assets/gui/tab/apps.xml

@@ -3,5 +3,19 @@
 
   <elements>
     <TabTitle translation="APPLICATIONS" icon="dashboard/apps.svg" />
+    <!-- placeholders for now -->
+    <div gap="4" align_items="center">
+      <Button width="48" height="38">
+        <sprite src="dashboard/alphabetical.svg" width="24" height="24" />
+      </Button>
+      <Button width="48" height="38">
+        <sprite src="dashboard/category_search.svg" width="24" height="24" />
+      </Button>
+      <sprite src="dashboard/search.svg" width="24" height="24" />
+      <!-- placeholder editbox -->
+      <rectangle flex_grow="1" height="100%" color="#1d2e51" border_color="#294774" border="2" round="4" align_items="center" padding_left="12">
+        <label text="Search" color="#FFFFFF88" weight="bold" />
+      </rectangle>
+    </div>
   </elements>
 </layout>

dash-frontend/src/lib.rs

@@ -4,7 +4,6 @@ use chrono::Timelike;
 use glam::Vec2;
 use wgui::{
 	components::button::ComponentButton,
-	drawing,
 	event::{CallbackDataCommon, EventAlterables, EventListenerCollection},
 	globals::WguiGlobals,
 	i18n::Translation,
@@ -50,13 +49,7 @@ pub struct FrontendParams<'a> {
 
 impl Frontend {
 	pub fn new(params: FrontendParams) -> anyhow::Result<(RcFrontend, RcLayout)> {
-		let globals = WguiGlobals::new(
-			Box::new(assets::Asset {}),
-			wgui::globals::Defaults {
-				dark_mode: true,
-				text_color: drawing::Color::new(1.0, 1.0, 1.0, 1.0),
-			},
-		)?;
+		let globals = WguiGlobals::new(Box::new(assets::Asset {}), wgui::globals::Defaults::default())?;
 
 		let (layout, state) = wgui::parser::new_layout_from_assets(
 			params.listeners,

uidev/src/testbed/testbed_any.rs

@@ -23,10 +23,7 @@ impl TestbedAny {
 
 		let globals = WguiGlobals::new(
 			Box::new(assets::Asset {}),
-			wgui::globals::Defaults {
-				dark_mode: true,
-				text_color: wgui::drawing::Color::new(1.0, 1.0, 1.0, 1.0),
-			},
+			wgui::globals::Defaults::default(),
 		)?;
 
 		let (layout, state) = wgui::parser::new_layout_from_assets(

uidev/src/testbed/testbed_generic.rs

@@ -61,10 +61,7 @@ impl TestbedGeneric {
 
 		let globals = WguiGlobals::new(
 			Box::new(assets::Asset {}),
-			wgui::globals::Defaults {
-				text_color: wgui::drawing::Color::new(1.0, 1.0, 1.0, 1.0),
-				dark_mode: true,
-			},
+			wgui::globals::Defaults::default(),
 		)?;
 
 		let extra = ParseDocumentExtra {

uidev/src/vulkan.rs

@@ -5,7 +5,6 @@ use vulkano::{
 		physical::{PhysicalDevice, PhysicalDeviceType},
 	},
 	instance::{Instance, InstanceCreateInfo},
-	swapchain::SurfaceInfo,
 };
 use wgui::gfx::WGfx;
 
@@ -85,12 +84,6 @@ pub fn init_window() -> anyhow::Result<(
 		log::info!("img_filter_cubic!");
 	}
 
-	let surface_format = physical_device
-		.surface_formats(&surface, SurfaceInfo::default())
-		.unwrap()[0] // want panic
-		.0;
-	log::info!("Using surface format: {surface_format:?}");
-
 	let (device, queues) = Device::new(
 		physical_device,
 		DeviceCreateInfo {
@@ -113,7 +106,13 @@ pub fn init_window() -> anyhow::Result<(
 
 	let (queue_gfx, queue_xfer, _) = unwrap_queues(queues.collect());
 
-	let me = WGfx::new_from_raw(instance, device, queue_gfx, queue_xfer, surface_format);
+	let me = WGfx::new_from_raw(
+		instance,
+		device,
+		queue_gfx,
+		queue_xfer,
+		vulkano::format::Format::B8G8R8A8_UNORM,
+	);
 	Ok((me, event_loop, window, surface))
 }
 

wgui/src/components/button.rs

@@ -6,6 +6,7 @@ use crate::{
 	components::{Component, ComponentBase, ComponentTrait, InitData},
 	drawing::{self, Color},
 	event::{CallbackDataCommon, EventListenerCollection, EventListenerKind, ListenerHandleVec},
+	globals::Globals,
 	i18n::Translation,
 	layout::{Layout, WidgetID},
 	renderer_vk::text::{FontWeight, TextStyle},
@@ -18,10 +19,10 @@ use crate::{
 
 pub struct Params {
 	pub text: Translation,
-	pub color: drawing::Color,
-	pub border_color: drawing::Color,
-	pub hover_border_color: drawing::Color,
-	pub hover_color: drawing::Color,
+	pub color: Option<drawing::Color>,
+	pub border_color: Option<drawing::Color>,
+	pub hover_border_color: Option<drawing::Color>,
+	pub hover_color: Option<drawing::Color>,
 	pub round: WLength,
 	pub style: taffy::Style,
 	pub text_style: TextStyle,
@@ -31,10 +32,10 @@ impl Default for Params {
 	fn default() -> Self {
 		Self {
 			text: Translation::from_raw_text(""),
-			color: drawing::Color::new(0.7, 0.7, 0.7, 1.0),
-			hover_color: drawing::Color::new(1.0, 1.0, 1.0, 1.0),
-			border_color: drawing::Color::new(0.0, 0.0, 0.0, 1.0),
-			hover_border_color: drawing::Color::new(0.25, 0.25, 0.25, 1.0),
+			color: None,
+			hover_color: None,
+			border_color: None,
+			hover_border_color: None,
 			round: WLength::Units(4.0),
 			style: Default::default(),
 			text_style: TextStyle::default(),
@@ -93,7 +94,7 @@ fn get_color2(color: &drawing::Color) -> drawing::Color {
 }
 
 fn anim_hover(rect: &mut WidgetRectangle, data: &Data, pos: f32, pressed: bool) {
-	let mult = pos * if pressed { 1.25 } else { 1.0 };
+	let mult = pos * if pressed { 1.5 } else { 1.0 };
 	let bgcolor = data.initial_color.lerp(&data.initial_hover_color, mult);
 
 	rect.params.color = bgcolor;
@@ -220,6 +221,7 @@ fn register_event_mouse_release<U1, U2>(
 }
 
 pub fn construct<U1, U2>(
+	globals: &mut Globals,
 	layout: &mut Layout,
 	listeners: &mut EventListenerCollection<U1, U2>,
 	parent: WidgetID,
@@ -232,28 +234,51 @@ pub fn construct<U1, U2>(
 	style.justify_content = Some(JustifyContent::Center);
 	style.padding = length(1.0);
 
-	let globals = layout.state.globals.clone();
+	// update colors to default ones if they are not specified
+	let color = if let Some(color) = params.color {
+		color
+	} else {
+		globals.defaults.button_color
+	};
+
+	let border_color = if let Some(border_color) = params.border_color {
+		border_color
+	} else {
+		Color::new(color.r, color.g, color.b, color.a + 0.4)
+	};
+
+	let hover_color = if let Some(hover_color) = params.hover_color {
+		hover_color
+	} else {
+		Color::new(color.r + 0.25, color.g + 0.25, color.g + 0.25, color.a + 0.25)
+	};
+
+	let hover_border_color = if let Some(hover_border_color) = params.hover_border_color {
+		hover_border_color
+	} else {
+		Color::new(color.r + 0.5, color.g + 0.5, color.g + 0.5, color.a + 0.5)
+	};
 
 	let (id_root, _) = layout.add_child(
 		parent,
 		WidgetRectangle::create(WidgetRectangleParams {
-			color: params.color,
-			color2: get_color2(&params.color),
+			color,
+			color2: get_color2(&color),
 			gradient: drawing::GradientMode::Vertical,
 			round: params.round,
-			border_color: params.border_color,
+			border_color,
 			border: 2.0,
 		}),
 		style,
 	)?;
 	let id_rect = id_root;
 
-	let light_text = (params.color.r + params.color.g + params.color.b) < 1.5;
+	let light_text = (color.r + color.g + color.b) < 1.5;
 
 	let (id_label, _node_label) = layout.add_child(
 		id_rect,
 		WidgetLabel::create(
-			&mut globals.get(),
+			globals,
 			WidgetLabelParams {
 				content: params.text,
 				style: TextStyle {
@@ -273,10 +298,10 @@ pub fn construct<U1, U2>(
 	let data = Rc::new(Data {
 		id_label,
 		id_rect,
-		initial_color: params.color,
-		initial_border_color: params.border_color,
-		initial_hover_color: params.hover_color,
-		initial_hover_border_color: params.hover_border_color,
+		initial_color: color,
+		initial_border_color: border_color,
+		initial_hover_color: hover_color,
+		initial_hover_border_color: hover_border_color,
 	});
 
 	let state = Rc::new(RefCell::new(State {

wgui/src/gfx/mod.rs

@@ -13,19 +13,14 @@ use vulkano::{
 		AutoCommandBufferBuilder, CommandBufferUsage,
 		allocator::{StandardCommandBufferAllocator, StandardCommandBufferAllocatorCreateInfo},
 	},
-	descriptor_set::allocator::{
-		StandardDescriptorSetAllocator, StandardDescriptorSetAllocatorCreateInfo,
-	},
+	descriptor_set::allocator::{StandardDescriptorSetAllocator, StandardDescriptorSetAllocatorCreateInfo},
 	device::{Device, Queue},
 	format::Format,
 	image::{Image, ImageCreateInfo, ImageType, ImageUsage, sampler::Filter},
 	instance::Instance,
 	memory::{
 		MemoryPropertyFlags,
-		allocator::{
-			AllocationCreateInfo, GenericMemoryAllocatorCreateInfo, MemoryTypeFilter,
-			StandardMemoryAllocator,
-		},
+		allocator::{AllocationCreateInfo, GenericMemoryAllocatorCreateInfo, MemoryTypeFilter, StandardMemoryAllocator},
 	},
 	pipeline::graphics::{
 		color_blend::{AttachmentBlend, BlendFactor, BlendOp},
@@ -128,19 +123,14 @@ impl WGfx {
 				..Default::default()
 			},
 			AllocationCreateInfo {
-				memory_type_filter: MemoryTypeFilter::PREFER_DEVICE
-					| MemoryTypeFilter::HOST_SEQUENTIAL_WRITE,
+				memory_type_filter: MemoryTypeFilter::PREFER_DEVICE | MemoryTypeFilter::HOST_SEQUENTIAL_WRITE,
 				..Default::default()
 			},
 			capacity,
 		)?)
 	}
 
-	pub fn new_buffer<T>(
-		&self,
-		usage: BufferUsage,
-		contents: Iter<'_, T>,
-	) -> anyhow::Result<Subbuffer<[T]>>
+	pub fn new_buffer<T>(&self, usage: BufferUsage, contents: Iter<'_, T>) -> anyhow::Result<Subbuffer<[T]>>
 	where
 		T: BufferContents + Clone,
 	{
@@ -151,21 +141,14 @@ impl WGfx {
 				..Default::default()
 			},
 			AllocationCreateInfo {
-				memory_type_filter: MemoryTypeFilter::PREFER_DEVICE
-					| MemoryTypeFilter::HOST_SEQUENTIAL_WRITE,
+				memory_type_filter: MemoryTypeFilter::PREFER_DEVICE | MemoryTypeFilter::HOST_SEQUENTIAL_WRITE,
 				..Default::default()
 			},
 			contents.cloned(),
 		)?)
 	}
 
-	pub fn new_image(
-		&self,
-		width: u32,
-		height: u32,
-		format: Format,
-		usage: ImageUsage,
-	) -> anyhow::Result<Arc<Image>> {
+	pub fn new_image(&self, width: u32, height: u32, format: Format, usage: ImageUsage) -> anyhow::Result<Arc<Image>> {
 		Ok(Image::new(
 			self.memory_allocator.clone(),
 			ImageCreateInfo {
@@ -202,10 +185,7 @@ impl WGfx {
 		)?))
 	}
 
-	pub fn create_gfx_command_buffer(
-		self: &Arc<Self>,
-		usage: CommandBufferUsage,
-	) -> anyhow::Result<GfxCommandBuffer> {
+	pub fn create_gfx_command_buffer(self: &Arc<Self>, usage: CommandBufferUsage) -> anyhow::Result<GfxCommandBuffer> {
 		self.create_gfx_command_buffer_with_queue(self.queue_gfx.clone(), usage)
 	}
 
@@ -214,11 +194,8 @@ impl WGfx {
 		queue: Arc<Queue>,
 		usage: CommandBufferUsage,
 	) -> anyhow::Result<GfxCommandBuffer> {
-		let command_buffer = AutoCommandBufferBuilder::primary(
-			self.command_buffer_allocator.clone(),
-			queue.queue_family_index(),
-			usage,
-		)?;
+		let command_buffer =
+			AutoCommandBufferBuilder::primary(self.command_buffer_allocator.clone(), queue.queue_family_index(), usage)?;
 		Ok(GfxCommandBuffer {
 			graphics: self.clone(),
 			queue,
@@ -227,10 +204,7 @@ impl WGfx {
 		})
 	}
 
-	pub fn create_xfer_command_buffer(
-		self: &Arc<Self>,
-		usage: CommandBufferUsage,
-	) -> anyhow::Result<XferCommandBuffer> {
+	pub fn create_xfer_command_buffer(self: &Arc<Self>, usage: CommandBufferUsage) -> anyhow::Result<XferCommandBuffer> {
 		self.create_xfer_command_buffer_with_queue(self.queue_gfx.clone(), usage)
 	}
 
@@ -239,11 +213,8 @@ impl WGfx {
 		queue: Arc<Queue>,
 		usage: CommandBufferUsage,
 	) -> anyhow::Result<XferCommandBuffer> {
-		let command_buffer = AutoCommandBufferBuilder::primary(
-			self.command_buffer_allocator.clone(),
-			queue.queue_family_index(),
-			usage,
-		)?;
+		let command_buffer =
+			AutoCommandBufferBuilder::primary(self.command_buffer_allocator.clone(), queue.queue_family_index(), usage)?;
 		Ok(XferCommandBuffer {
 			graphics: self.clone(),
 			queue,

wgui/src/globals.rs

@@ -8,13 +8,15 @@ use crate::{assets::AssetProvider, drawing, i18n::I18n};
 pub struct Defaults {
 	pub dark_mode: bool,
 	pub text_color: drawing::Color,
+	pub button_color: drawing::Color,
 }
 
 impl Default for Defaults {
 	fn default() -> Self {
 		Self {
 			dark_mode: true,
-			text_color: drawing::Color::new(0.0, 0.0, 0.0, 1.0),
+			text_color: drawing::Color::new(1.0, 1.0, 1.0, 1.0),
+			button_color: drawing::Color::new(1.0, 1.0, 1.0, 0.05),
 		}
 	}
 }

wgui/src/parser/component_button.rs

@@ -5,7 +5,7 @@ use crate::{
 	layout::WidgetID,
 	parser::{
 		ParserContext, ParserFile, iter_attribs, parse_children, process_component,
-		style::{parse_color, parse_color_opt, parse_round, parse_style, parse_text_style},
+		style::{parse_color_opt, parse_round, parse_style, parse_text_style},
 	},
 	widget::util::WLength,
 };
@@ -16,7 +16,7 @@ pub fn parse_component_button<'a, U1, U2>(
 	node: roxmltree::Node<'a, 'a>,
 	parent_id: WidgetID,
 ) -> anyhow::Result<WidgetID> {
-	let mut color = Color::new(1.0, 1.0, 1.0, 1.0);
+	let mut color: Option<Color> = None;
 	let mut border_color: Option<Color> = None;
 	let mut hover_color: Option<Color> = None;
 	let mut hover_border_color: Option<Color> = None;
@@ -39,7 +39,7 @@ pub fn parse_component_button<'a, U1, U2>(
 				parse_round(&value, &mut round);
 			}
 			"color" => {
-				parse_color(&value, &mut color);
+				parse_color_opt(&value, &mut color);
 			}
 			"border_color" => {
 				parse_color_opt(&value, &mut border_color);
@@ -54,28 +54,18 @@ pub fn parse_component_button<'a, U1, U2>(
 		}
 	}
 
-	// slight border outlines by default
-	if border_color.is_none() {
-		border_color = Some(Color::lerp(&color, &Color::new(0.0, 0.0, 0.0, color.a), 0.3));
-	}
-
-	if hover_color.is_none() {
-		hover_color = Some(color.add_rgb(0.5));
-	}
-
-	if hover_border_color.is_none() {
-		hover_border_color = Some(border_color.unwrap().add_rgb(0.75));
-	}
+	let globals = ctx.layout.state.globals.clone();
 
 	let (new_id, component) = button::construct(
+		&mut globals.get(),
 		ctx.layout,
 		ctx.listeners,
 		parent_id,
 		button::Params {
 			color,
-			border_color: border_color.unwrap(),
-			hover_border_color: hover_border_color.unwrap(),
-			hover_color: hover_color.unwrap(),
+			border_color,
+			hover_border_color,
+			hover_color,
 			text: translation,
 			style,
 			text_style,