From cf69dd0370502fc9ce958d9a43d111bf72b77a06 Mon Sep 17 00:00:00 2001 From: Michael Kirk Date: Fri, 26 Feb 2021 15:38:39 -0800 Subject: [PATCH] slightly better approach to get the cut-scene looking better --- game/src/challenges/cutscene.rs | 19 +++++-------- widgetry/src/style/buttons.rs | 49 +++++++++++++++++++++++++++++++++ widgetry/src/style/mod.rs | 38 +++++++++++++++++-------- 3 files changed, 82 insertions(+), 24 deletions(-) diff --git a/game/src/challenges/cutscene.rs b/game/src/challenges/cutscene.rs index 28f6873d22..d7b0b75222 100644 --- a/game/src/challenges/cutscene.rs +++ b/game/src/challenges/cutscene.rs @@ -1,7 +1,7 @@ use map_gui::tools::grey_out_map; use widgetry::{ - hotkeys, Color, ControlState, DrawBaselayer, EventCtx, GeomBatch, GfxCtx, Image, Key, Line, - Outcome, Panel, State, StyledButtons, Text, Widget, + hotkeys, ButtonStyle, Color, ControlState, DrawBaselayer, EventCtx, GeomBatch, GfxCtx, Image, + Key, Line, Outcome, Panel, State, StyledButtons, Text, Widget, }; use crate::app::App; @@ -32,7 +32,7 @@ impl CutsceneBuilder { } fn fg_color() -> Color { - Color::hex("#4C4C4C") + ButtonStyle::outline_dark_fg().fg } pub fn player>(mut self, msg: I) -> CutsceneBuilder { @@ -145,11 +145,8 @@ fn make_panel( make_task: &Box Widget>, idx: usize, ) -> Panel { - let prev_builder = ctx - .style() - .btn_plain_icon("system/assets/tools/circled_prev.svg") - .image_color(CutsceneBuilder::fg_color(), ControlState::Default) - .bg_color(Color::grey(0.1), ControlState::Hovered) + let prev_builder = ButtonStyle::outline_dark_fg() + .plain_icon("system/assets/tools/circled_prev.svg") .image_dims(45.0) .hotkey(Key::LeftArrow) .bg_color(Color::CLEAR, ControlState::Disabled); @@ -226,10 +223,8 @@ fn make_panel( .margin_above(100), Widget::col(vec![ Widget::row(vec![prev.margin_right(40), next]).centered_horiz(), - ctx.style() - .btn_outline_text("Skip cutscene") - .outline(2.0, CutsceneBuilder::fg_color(), ControlState::Default) - .label_color(CutsceneBuilder::fg_color(), ControlState::Default) + ButtonStyle::outline_dark_fg() + .outline_text("Skip cutscene") .build_def(ctx) .centered_horiz(), ]) diff --git a/widgetry/src/style/buttons.rs b/widgetry/src/style/buttons.rs index 57423e8048..ad717b0a27 100644 --- a/widgetry/src/style/buttons.rs +++ b/widgetry/src/style/buttons.rs @@ -224,6 +224,55 @@ impl<'a> StyledButtons<'a> for Style { } } +impl<'a> ButtonStyle { + pub fn plain(&self) -> ButtonBuilder<'a> { + basic_button(self, None) + } + + pub fn outline(&self) -> ButtonBuilder<'a> { + self.plain() + .outline(self.outline_thickness, self.outline, ControlState::Default) + } + + pub fn plain_text(&self, text: &'a str) -> ButtonBuilder<'a> { + self.plain().label_text(text) + } + + pub fn plain_icon(&self, image_path: &'a str) -> ButtonBuilder<'a> { + icon_button(self.plain().image_path(image_path)) + } + + pub fn plain_icon_bytes(&self, labeled_bytes: (&'a str, &'a [u8])) -> ButtonBuilder<'a> { + icon_button(self.plain().image_bytes(labeled_bytes)) + } + + pub fn plain_icon_text(&self, image_path: &'a str, text: &'a str) -> ButtonBuilder<'a> { + self.plain() + .label_text(text) + .image_path(image_path) + .image_dims(ScreenDims::square(18.0)) + } + + pub fn outline_text(&self, text: &'a str) -> ButtonBuilder<'a> { + self.outline().label_text(text) + } + + pub fn outline_icon(&self, image_path: &'a str) -> ButtonBuilder<'a> { + icon_button(self.outline().image_path(image_path)) + } + + pub fn outline_icon_bytes(&self, labeled_bytes: (&'a str, &'a [u8])) -> ButtonBuilder<'a> { + icon_button(self.outline().image_bytes(labeled_bytes)) + } + + pub fn outline_icon_text(&self, image_path: &'a str, text: &'a str) -> ButtonBuilder<'a> { + self.outline() + .label_text(text) + .image_path(image_path) + .image_dims(ScreenDims::square(18.0)) + } +} + impl<'a> Style { pub fn btn_popup_icon_text(&self, icon_path: &'a str, text: &'a str) -> ButtonBuilder<'a> { let outline_style = &self.btn_outline; diff --git a/widgetry/src/style/mod.rs b/widgetry/src/style/mod.rs index 5a91f796e7..a6defcb652 100644 --- a/widgetry/src/style/mod.rs +++ b/widgetry/src/style/mod.rs @@ -32,10 +32,11 @@ pub struct ButtonStyle { pub bg: Color, pub bg_hover: Color, pub bg_disabled: Color, + pub outline_thickness: f64, } impl ButtonStyle { - pub fn btn_solid() -> Self { + pub fn solid_dark_fg() -> Self { ButtonStyle { fg: hex("#4C4C4C"), fg_disabled: hex("#4C4C4C").alpha(0.3), @@ -43,10 +44,11 @@ impl ButtonStyle { bg_hover: Color::WHITE, bg_disabled: Color::grey(0.6), outline: Color::WHITE.alpha(0.6), + outline_thickness: 2.0, } } - pub fn btn_outline_dark() -> Self { + pub fn outline_dark_fg() -> Self { ButtonStyle { fg: hex("#4C4C4C"), fg_disabled: hex("#4C4C4C").alpha(0.3), @@ -54,10 +56,11 @@ impl ButtonStyle { bg_hover: hex("#4C4C4C").alpha(0.1), bg_disabled: Color::grey(0.8), outline: hex("#4C4C4C"), + outline_thickness: 2.0, } } - pub fn btn_solid_floating() -> Self { + pub fn solid_light_fg() -> Self { ButtonStyle { fg: hex("#F2F2F2"), fg_disabled: hex("#F2F2F2").alpha(0.3), @@ -65,10 +68,11 @@ impl ButtonStyle { bg_hover: hex("#003046"), bg_disabled: Color::grey(0.1), outline: hex("#003046").alpha(0.6), + outline_thickness: 2.0, } } - pub fn btn_outline() -> Self { + pub fn outline_light_fg() -> Self { ButtonStyle { fg: hex("#F2F2F2"), fg_disabled: hex("#F2F2F2").alpha(0.3), @@ -76,6 +80,7 @@ impl ButtonStyle { bg_hover: hex("#F2F2F2").alpha(0.1), bg_disabled: Color::grey(0.5), outline: hex("#F2F2F2"), + outline_thickness: 2.0, } } } @@ -94,7 +99,7 @@ impl Style { text_hotkey_color: hex("#EE702E"), text_tooltip_color: Color::WHITE, text_destructive_color: hex("#FF5E5E"), - btn_outline: ButtonStyle::btn_outline_dark(), + btn_outline: ButtonStyle::outline_dark_fg(), btn_solid: ButtonStyle { fg: Color::WHITE, fg_disabled: Color::WHITE.alpha(0.3), @@ -102,8 +107,9 @@ impl Style { bg_hover: hex("#4C4C4C"), bg_disabled: Color::grey(0.6), outline: hex("#4C4C4C").alpha(0.6), + outline_thickness: 2.0, }, - btn_solid_floating: ButtonStyle::btn_solid(), + btn_solid_floating: ButtonStyle::solid_dark_fg(), btn_solid_destructive: ButtonStyle { fg: hex("#F2F2F2"), fg_disabled: hex("#F2F2F2").alpha(0.3), @@ -111,6 +117,7 @@ impl Style { bg_hover: hex("#FF5E5E"), bg_disabled: Color::grey(0.1), outline: hex("#FF5E5E").alpha(0.6), + outline_thickness: 2.0, }, btn_outline_destructive: ButtonStyle { fg: hex("#FF5E5E"), @@ -119,6 +126,7 @@ impl Style { bg_hover: hex("#FF5E5E").alpha(0.1), bg_disabled: Color::grey(0.1), outline: hex("#FF5E5E"), + outline_thickness: 2.0, }, btn_solid_primary: ButtonStyle { fg: hex("#F2F2F2"), @@ -127,6 +135,7 @@ impl Style { bg_hover: hex("#EE702E"), bg_disabled: hex("#EE702E").alpha(0.3), outline: hex("#EE702E").alpha(0.6), + outline_thickness: 2.0, }, btn_outline_primary: ButtonStyle { fg: hex("#EE702E"), @@ -135,6 +144,7 @@ impl Style { bg_hover: hex("#EE702E").alpha(0.1), bg_disabled: Color::grey(0.1), outline: hex("#EE702E"), + outline_thickness: 2.0, }, } } @@ -152,9 +162,9 @@ impl Style { text_hotkey_color: Color::GREEN, text_tooltip_color: Color::WHITE, text_destructive_color: hex("#EB3223"), - btn_outline: ButtonStyle::btn_outline(), - btn_solid: ButtonStyle::btn_solid(), - btn_solid_floating: ButtonStyle::btn_solid_floating(), + btn_outline: ButtonStyle::outline_light_fg(), + btn_solid: ButtonStyle::solid_dark_fg(), + btn_solid_floating: ButtonStyle::solid_light_fg(), btn_solid_destructive: ButtonStyle { fg: hex("#F2F2F2"), fg_disabled: hex("#F2F2F2").alpha(0.3), @@ -162,6 +172,7 @@ impl Style { bg_hover: hex("#FF5E5E"), bg_disabled: Color::grey(0.1), outline: hex("#FF5E5E").alpha(0.6), + outline_thickness: 2.0, }, btn_outline_destructive: ButtonStyle { fg: hex("#FF5E5E"), @@ -170,6 +181,7 @@ impl Style { bg_hover: hex("#FF5E5E").alpha(0.1), bg_disabled: Color::grey(0.1), outline: hex("#FF5E5E"), + outline_thickness: 2.0, }, btn_solid_primary: ButtonStyle { fg: hex("#F2F2F2"), @@ -178,6 +190,7 @@ impl Style { bg_hover: hex("#EE702E"), bg_disabled: hex("#EE702E").alpha(0.3), outline: hex("#EE702E").alpha(0.6), + outline_thickness: 2.0, }, btn_outline_primary: ButtonStyle { fg: hex("#EE702E"), @@ -186,6 +199,7 @@ impl Style { bg_hover: hex("#EE702E").alpha(0.1), bg_disabled: Color::grey(0.1), outline: hex("#EE702E"), + outline_thickness: 2.0, }, } } @@ -194,9 +208,9 @@ impl Style { let mut style = Self::light_bg(); style.panel_bg = hex("#003046").alpha(0.9); style.field_bg = style.panel_bg.shade(0.2); - style.btn_outline = ButtonStyle::btn_outline(); - style.btn_solid = ButtonStyle::btn_solid(); - style.btn_solid_floating = ButtonStyle::btn_solid_floating(); + style.btn_outline = ButtonStyle::outline_light_fg(); + style.btn_solid = ButtonStyle::solid_dark_fg(); + style.btn_solid_floating = ButtonStyle::solid_light_fg(); style.text_fg_color = Color::WHITE; style.icon_fg = Color::WHITE; style.text_hotkey_color = Color::GREEN;