ui: Improve login info banner gradient, smallify things, put login menu quit button at the bottom

This commit is contained in:
Imbris 2020-11-08 18:49:54 -05:00
parent 61c0780872
commit 865482d768
5 changed files with 35 additions and 24 deletions

BIN
assets/voxygen/element/frames/banner_gradient_bottom.png (Stored with Git LFS) Normal file

Binary file not shown.

View File

@ -45,6 +45,8 @@ const FILL_FRAC_TWO: f32 = 0.60;
const TOOLTIP_HOVER_DUR: std::time::Duration = std::time::Duration::from_millis(150);
const TOOLTIP_FADE_DUR: std::time::Duration = std::time::Duration::from_millis(350);
const BANNER_ALPHA: u8 = 210;
// Buttons in the bottom corners
const SMALL_BUTTON_HEIGHT: u16 = 31;
const STARTER_HAMMER: &str = "common.items.weapons.hammer.starter_hammer";
const STARTER_BOW: &str = "common.items.weapons.bow.starter_bow";
@ -361,6 +363,8 @@ impl Controls {
Text::new(&client.server_info.name)
.size(fonts.cyri.scale(25))
.into(),
// TODO: show additional server info here
Space::new(Length::Fill, Length::Units(25)).into(),
])
.spacing(5)
.align_items(Align::Center),
@ -499,7 +503,7 @@ impl Controls {
Container::new(
Scrollable::new(characters_scroll)
.push(Column::with_children(characters).spacing(4))
.padding(5)
.padding(6)
.scrollbar_width(5)
.scroller_width(5)
.width(Length::Fill)
@ -512,13 +516,13 @@ impl Controls {
0,
BANNER_ALPHA,
)))
.width(Length::Units(320))
.width(Length::Units(322))
.height(Length::Fill)
.center_x()
.into(),
Image::new(imgs.frame_bottom)
.height(Length::Units(40))
.width(Length::Units(320))
.width(Length::Units(322))
.color(Rgba::from_translucent(0, BANNER_ALPHA))
.into(),
])
@ -526,7 +530,7 @@ impl Controls {
let right_column = Column::with_children(vec![server.into(), characters.into()])
.spacing(10)
.width(Length::Units(320)) // TODO: see if we can get iced to work with settings below
.width(Length::Units(322)) // TODO: see if we can get iced to work with settings below
//.max_width(360)
//.width(Length::Fill)
.height(Length::Fill);
@ -558,11 +562,11 @@ impl Controls {
let bottom = Row::with_children(vec![
Container::new(logout)
.width(Length::Fill)
.height(Length::Units(40))
.height(Length::Units(SMALL_BUTTON_HEIGHT))
.into(),
Container::new(enter_world)
.width(Length::Fill)
.height(Length::Units(60))
.height(Length::Units(52))
.center_x()
.into(),
Space::new(Length::Fill, Length::Shrink).into(),
@ -571,6 +575,7 @@ impl Controls {
let content = Column::with_children(vec![top.into(), bottom.into()])
.width(Length::Fill)
.padding(5)
.height(Length::Fill);
// Overlay delete prompt
@ -1135,7 +1140,7 @@ impl Controls {
let bottom = Row::with_children(vec![
Container::new(back)
.width(Length::Fill)
.height(Length::Units(40))
.height(Length::Units(SMALL_BUTTON_HEIGHT))
.into(),
Container::new(bottom_center)
.width(Length::Fill)
@ -1143,7 +1148,7 @@ impl Controls {
.into(),
Container::new(create)
.width(Length::Fill)
.height(Length::Units(40))
.height(Length::Units(SMALL_BUTTON_HEIGHT))
.align_x(Align::End)
.into(),
])
@ -1152,6 +1157,7 @@ impl Controls {
Column::with_children(vec![top.into(), bottom.into()])
.width(Length::Fill)
.height(Length::Fill)
.padding(5)
.into()
},
};

View File

@ -71,7 +71,7 @@ impl Screen {
Some(Message::CancelConnect),
))
.width(Length::Fill)
.height(Length::Units(fonts.cyri.scale(40)))
.height(Length::Units(fonts.cyri.scale(30)))
.center_x()
.padding(3);
@ -110,7 +110,7 @@ impl Screen {
bottom_content.into(),
right_art.into(),
]))
.height(Length::Units(100))
.height(Length::Units(85))
.style(style::container::Style::image(imgs.loading_art));
vec![

View File

@ -20,8 +20,8 @@ use iced::{
};
use vek::*;
const INPUT_WIDTH: u16 = 280;
const INPUT_TEXT_SIZE: u16 = 24;
const INPUT_WIDTH: u16 = 230;
const INPUT_TEXT_SIZE: u16 = 20;
/// Login screen for the main menu
pub struct Screen {
@ -80,13 +80,6 @@ impl Screen {
button_style,
None,
),
neat_button(
&mut self.quit_button,
i18n.get("common.quit"),
FILL_FRAC_ONE,
button_style,
Some(Message::Quit),
),
neat_button(
&mut self.language_select_button,
i18n.get("common.languages"),
@ -94,9 +87,16 @@ impl Screen {
button_style,
Some(Message::OpenLanguageMenu),
),
neat_button(
&mut self.quit_button,
i18n.get("common.quit"),
FILL_FRAC_ONE,
button_style,
Some(Message::Quit),
),
])
.width(Length::Fill)
.max_width(160)
.max_width(100)
.spacing(5);
let buttons = Container::new(buttons)
@ -112,12 +112,13 @@ impl Screen {
// Note: a way to tell it to keep the height of this one piece constant and
// unstreched would be nice, I suppose we could just break this out into a
// column and use Length::Units
Graphic::gradient(Rgba::new(0, 0, 0, 240), Rgba::zero(), [500, 50], [0, 300]),
Graphic::image(imgs.banner_gradient_bottom, [500, 50], [0, 300])
.color(Rgba::new(0, 0, 0, 240)),
])
.height(Length::Shrink),
Text::new(intro_text).size(fonts.cyri.scale(21)),
Text::new(intro_text).size(fonts.cyri.scale(18)),
)
.max_width(450)
.max_width(360)
.padding(Padding::new().horizontal(20).top(10).bottom(60));
let left_column = Column::with_children(vec![info_window.into(), buttons.into()])
@ -417,7 +418,7 @@ impl LoginBanner {
Some(Message::Singleplayer),
),
])
.max_width(200)
.max_width(170)
.height(Length::Units(200))
.spacing(8)
.into(),

View File

@ -41,6 +41,7 @@ image_ids_ice! {
<ImageGraphic>
bg: "voxygen.background.bg_main",
banner_top: "voxygen.element.frames.banner_top",
banner_gradient_bottom: "voxygen.element.frames.banner_gradient_bottom",
button: "voxygen.element.buttons.button",
button_hover: "voxygen.element.buttons.button_hover",
button_press: "voxygen.element.buttons.button_press",