From 6cbd045231bc13b60374af7615ec9dd51aa885cd Mon Sep 17 00:00:00 2001 From: Pfauenauge90 <44173739+Pfauenauge90@users.noreply.github.com> Date: Sat, 4 May 2019 19:29:19 +0200 Subject: [PATCH] positioning Former-commit-id: 90b626c2900e6bf4924dc290764c2860a5bade98 --- voxygen/src/hud/character_window.rs | 19 +- voxygen/src/hud/esc_menu.rs | 30 +-- voxygen/src/hud/img_ids.rs | 227 +++++++++-------- voxygen/src/hud/map.rs | 73 +++--- voxygen/src/hud/mod.rs | 72 ++++-- voxygen/src/hud/settings_window.rs | 371 +++++++++++++++++++++------- voxygen/src/hud/small_window.rs | 1 + 7 files changed, 516 insertions(+), 277 deletions(-) diff --git a/voxygen/src/hud/character_window.rs b/voxygen/src/hud/character_window.rs index 6b5100b4e1..d709b49793 100644 --- a/voxygen/src/hud/character_window.rs +++ b/voxygen/src/hud/character_window.rs @@ -85,18 +85,9 @@ impl<'a> Widget for CharacterWindow<'a> { // Frame Image::new(self.imgs.window_frame) .middle_of(id) - .set(state.charwindow_frame, ui); - - // BG - Image::new(self.imgs.window_bg) - .w_h(348.0, 404.0) - .mid_top_with_margin_on(state.charwindow_frame, 48.0) - .set(state.charwindow_bg, ui); - - // Overlay - Image::new(self.imgs.charwindow) - .middle_of(state.charwindow_bg) - .set(state.charwindow, ui); + .top_left_with_margins_on(ui.window, 200.0, 215.0) + .w_h(1648.0 / 4.0, 1952.0 / 4.0) + .set(state.charwindow_frame, ui); // Icon //Image::new(self.imgs.charwindow_icon) @@ -106,10 +97,10 @@ impl<'a> Widget for CharacterWindow<'a> { // X-Button if Button::image(self.imgs.close_button) - .w_h(244.0 * 0.22 / 4.0, 244.0 * 0.22 / 4.0) + .w_h(28.0, 28.0) .hover_image(self.imgs.close_button_hover) .press_image(self.imgs.close_button_press) - .top_right_with_margins_on(state.charwindow_frame, 4.0, 4.0) + .top_right_with_margins_on(state.charwindow_frame, 12.0, 4.0) .set(state.charwindow_close, ui) .was_clicked() { return Some(Event::Close); diff --git a/voxygen/src/hud/esc_menu.rs b/voxygen/src/hud/esc_menu.rs index 3a847d5706..9656210011 100644 --- a/voxygen/src/hud/esc_menu.rs +++ b/voxygen/src/hud/esc_menu.rs @@ -91,11 +91,11 @@ impl<'a> Widget for EscMenu<'a> { .set(state.ids.fireplace, ui); // Settings - if Button::image(self.imgs.button_dark) + if Button::image(self.imgs.button) .mid_top_with_margin_on(state.ids.esc_bg, 115.0) .w_h(170.0, 50.0) - .hover_image(self.imgs.button_dark_hover) - .press_image(self.imgs.button_dark_press) + .hover_image(self.imgs.button_hover) + .press_image(self.imgs.button_press) .label("Settings") .label_y(conrod_core::position::Relative::Scalar(2.0)) .label_color(TEXT_COLOR) @@ -106,11 +106,11 @@ impl<'a> Widget for EscMenu<'a> { return Some(Event::OpenSettings); }; // Controls - if Button::image(self.imgs.button_dark) + if Button::image(self.imgs.button) .mid_top_with_margin_on(state.ids.esc_bg, 175.0) .w_h(170.0, 50.0) - .hover_image(self.imgs.button_dark_hover) - .press_image(self.imgs.button_dark_press) + .hover_image(self.imgs.button_hover) + .press_image(self.imgs.button_press) .label("Controls") .label_y(conrod_core::position::Relative::Scalar(2.0)) .label_color(TEXT_COLOR) @@ -121,11 +121,11 @@ impl<'a> Widget for EscMenu<'a> { //self.menu_open = false; }; // Servers - if Button::image(self.imgs.button_dark) + if Button::image(self.imgs.button) .mid_top_with_margin_on(state.ids.esc_bg, 235.0) .w_h(170.0, 50.0) - .hover_image(self.imgs.button_dark_hover) - .press_image(self.imgs.button_dark_press) + .hover_image(self.imgs.button_hover) + .press_image(self.imgs.button_press) .label("Servers") .label_y(conrod_core::position::Relative::Scalar(2.0)) .label_color(TEXT_COLOR) @@ -136,11 +136,11 @@ impl<'a> Widget for EscMenu<'a> { //self.menu_open = false; }; // Logout - if Button::image(self.imgs.button_dark) + if Button::image(self.imgs.button) .mid_top_with_margin_on(state.ids.esc_bg, 295.0) .w_h(170.0, 50.0) - .hover_image(self.imgs.button_dark_hover) - .press_image(self.imgs.button_dark_press) + .hover_image(self.imgs.button_hover) + .press_image(self.imgs.button_press) .label("Logout") .label_y(conrod_core::position::Relative::Scalar(2.0)) .label_color(TEXT_COLOR) @@ -151,11 +151,11 @@ impl<'a> Widget for EscMenu<'a> { return Some(Event::Logout); }; // Quit - if Button::image(self.imgs.button_dark) + if Button::image(self.imgs.button) .mid_top_with_margin_on(state.ids.esc_bg, 355.0) .w_h(170.0, 50.0) - .hover_image(self.imgs.button_dark_hover) - .press_image(self.imgs.button_dark_press) + .hover_image(self.imgs.button_hover) + .press_image(self.imgs.button_press) .label("Quit") .label_y(conrod_core::position::Relative::Scalar(2.0)) .label_color(TEXT_COLOR) diff --git a/voxygen/src/hud/img_ids.rs b/voxygen/src/hud/img_ids.rs index 9847bd6688..14e7b3bad6 100644 --- a/voxygen/src/hud/img_ids.rs +++ b/voxygen/src/hud/img_ids.rs @@ -3,132 +3,153 @@ use crate::ui::{ImageGraphic, VoxelGraphic, BlankGraphic}; image_ids! { pub struct Imgs { - // Bag - bag_contents: "/voxygen/element/frames/bag.vox", - inv_grid: "/voxygen/element/frames/inv_grid.vox", - inv_slot: "/voxygen/element/buttons/inv_slot.vox", + // Bag + bag_contents: "/voxygen/element/frames/bag.vox", + inv_grid: "/voxygen/element/frames/inv_grid.vox", + inv_slot: "/voxygen/element/buttons/inv_slot.vox", - // Buttons - settings: "/voxygen/element/buttons/settings.vox", - settings_hover: "/voxygen/element/buttons/settings_hover.vox", - settings_press: "/voxygen/element/buttons/settings_press.vox", + // Buttons + mmap_closed: "/voxygen/element/buttons/button_mmap_closed.vox", + mmap_closed_hover: "/voxygen/element/buttons/button_mmap_closed_hover.vox", + mmap_closed_press: "/voxygen/element/buttons/button_mmap_closed_press.vox", + mmap_open: "/voxygen/element/buttons/button_mmap_open.vox", + mmap_open_hover: "/voxygen/element/buttons/button_mmap_open_hover.vox", + mmap_open_press: "/voxygen/element/buttons/button_mmap_open_press.vox", - social_button: "/voxygen/element/buttons/social.vox", - social_hover: "/voxygen/element/buttons/social_hover.vox", - social_press: "/voxygen/element/buttons/social_press.vox", + settings: "/voxygen/element/buttons/settings.vox", + settings_hover: "/voxygen/element/buttons/settings_hover.vox", + settings_press: "/voxygen/element/buttons/settings_press.vox", - map_button: "/voxygen/element/buttons/map.vox", - map_hover: "/voxygen/element/buttons/map_hover.vox", - map_press: "/voxygen/element/buttons/map_press.vox", + social_button: "/voxygen/element/buttons/social.vox", + social_hover: "/voxygen/element/buttons/social_hover.vox", + social_press: "/voxygen/element/buttons/social_press.vox", - spellbook_button: "/voxygen/element/buttons/spellbook.vox", - spellbook_hover: "/voxygen/element/buttons/spellbook_hover.vox", - spellbook_press: "/voxygen/element/buttons/spellbook_press.vox", + map_button: "/voxygen/element/buttons/map.vox", + map_hover: "/voxygen/element/buttons/map_hover.vox", + map_press: "/voxygen/element/buttons/map_press.vox", - character_button: "/voxygen/element/buttons/character.vox", - character_hover: "/voxygen/element/buttons/character_hover.vox", - character_press: "/voxygen/element/buttons/character_press.vox", + spellbook_button: "/voxygen/element/buttons/spellbook.vox", + spellbook_hover: "/voxygen/element/buttons/spellbook_hover.vox", + spellbook_press: "/voxygen/element/buttons/spellbook_press.vox", - qlog_button: "/voxygen/element/buttons/qlog.vox", - qlog_hover: "/voxygen/element/buttons/qlog_hover.vox", - qlog_press: "/voxygen/element/buttons/qlog_press.vox", + character_button: "/voxygen/element/buttons/character.vox", + character_hover: "/voxygen/element/buttons/character_hover.vox", + character_press: "/voxygen/element/buttons/character_press.vox", - close_button: "/voxygen/element/buttons/x.vox", - close_button_hover: "/voxygen/element/buttons/x_hover.vox", - close_button_press: "/voxygen/element/buttons/x_press.vox", + qlog_button: "/voxygen/element/buttons/qlog.vox", + qlog_hover: "/voxygen/element/buttons/qlog_hover.vox", + qlog_press: "/voxygen/element/buttons/qlog_press.vox", + - // Esc menu - fireplace: "/voxygen/element/misc_bg/fireplace.vox", - button_dark: "/voxygen/element/buttons/button_dark.vox", + // Close button + close_button: "/voxygen/element/buttons/x.vox", + close_button_hover: "/voxygen/element/buttons/x_hover.vox", + close_button_press: "/voxygen/element/buttons/x_press.vox", - // Minimap - mmap_frame: "/voxygen/element/frames/mmap.vox", - window_frame: "/voxygen/element/frames/window2.vox", - map_frame_l: "/voxygen/element/frames/map_l.vox", - map_frame_r: "/voxygen/element/frames/map_r.vox", + // Esc-Menu + fireplace: "/voxygen/element/misc_bg/fireplace.vox", + button: "/voxygen/element/buttons/button.vox", + button_hover: "/voxygen/element/buttons/button_hover.vox", + button_press: "/voxygen/element/buttons/button_press.vox", - - // Bag - bag: "/voxygen/element/buttons/bag/closed.png", - bag_hover: "/voxygen/element/buttons/bag/closed_hover.png", - bag_press: "/voxygen/element/buttons/bag/closed_press.png", - bag_open: "/voxygen/element/buttons/bag/open.png", - bag_open_hover: "/voxygen/element/buttons/bag/open_hover.png", - bag_open_press: "/voxygen/element/buttons/bag/open_press.png", + // MiniMap + mmap_frame: "/voxygen/element/frames/mmap.vox", + mmap_frame_closed: "/voxygen/element/frames/mmap_closed.vox", + - // Buttons - mmap_button: "/voxygen/element/buttons/border.png", - mmap_button_hover: "/voxygen/element/buttons/border_mo.png", - mmap_button_press: "/voxygen/element/buttons/border_press.png", - mmap_button_open: "/voxygen/element/buttons/border_pressed.png", + // Missing: Buff Frame Animation .gif ?! we could do animation in ui.maintain, or in shader? + window_frame: "/voxygen/element/frames/window2.vox", - // Esc-Menu - esc_bg: "/voxygen/element/frames/menu.png", - button_dark_hover: "/voxygen/element/buttons/button_dark_hover.png", - button_dark_press: "/voxygen/element/buttons/button_dark_press.png", + // Settings Window + settings_frame_r: "/voxygen/element/frames/settings_r.vox", + settings_frame_l: "/voxygen/element/frames/settings_l.vox", + settings_button: "/voxygen/element/buttons/settings_button.vox", + settings_button_pressed: "/voxygen/element/buttons/settings_button_pressed.vox", + settings_button_hover: "/voxygen/element/buttons/settings_button_hover.vox", + settings_button_press: "/voxygen/element/buttons/settings_button_press.vox", + check: "/voxygen/element/buttons/check/no.vox", + check_mo: "/voxygen/element/buttons/check/no_mo.vox", + check_press: "/voxygen/element/buttons/check/press.vox", + check_checked: "/voxygen/element/buttons/check/yes.vox", + check_checked_mo: "/voxygen/element/buttons/check/yes_mo.vox", + slider: "/voxygen/element/slider/track.vox", + slider_indicator: "/voxygen/element/slider/indicator.vox", + - // MiniMap - mmap_frame_bg: "/voxygen/element/misc_bg/mmap_bg.png", + // Map Window + map_frame_l: "/voxygen/element/frames/map_l.vox", + map_frame_r: "/voxygen/element/frames/map_r.vox", + map_frame_bl: "/voxygen/element/frames/map_bl.vox", + map_frame_br: "/voxygen/element/frames/map_br.vox", - // Skillbar Module - sb_grid: "/voxygen/element/skill_bar/sbar_grid.png", - sb_grid_bg: "/voxygen/element/skill_bar/sbar_grid_bg.png", - l_click: "/voxygen/element/skill_bar/l.png", - r_click: "/voxygen/element/skill_bar/r.png", - mana_bar: "/voxygen/element/skill_bar/mana_bar.png", - health_bar: "/voxygen/element/skill_bar/health_bar.png", - xp_bar: "/voxygen/element/skill_bar/xp_bar.png", + + // Chat-Arrows + chat_arrow: "/voxygen/element/buttons/arrow_down.vox", + chat_arrow_mo: "/voxygen/element/buttons/arrow_down_hover.vox", + chat_arrow_press: "/voxygen/element/buttons/arrow_down_press.vox", - // Missing: Buff Frame Animation (.gif ?!) (we could do animation in ui.maintain(), or in shader?) - window_frame_2: "/voxygen/element/frames/window_2.png", + - // Settings Window - settings_bg: "/voxygen/element/frames/settings.png", - settings_icon: "/voxygen/element/icons/settings.png", - settings_button_mo: "/voxygen/element/buttons/blue_mo.png", - check: "/voxygen/element/buttons/check/no.png", - check_mo: "/voxygen/element/buttons/check/no_mo.png", - check_press: "/voxygen/element/buttons/check/press.png", - check_checked: "/voxygen/element/buttons/check/yes.png", - check_checked_mo: "/voxygen/element/buttons/check/yes_mo.png", - slider: "/voxygen/element/slider/track.png", - slider_indicator: "/voxygen/element/slider/indicator.png", - //button_blank: ui.new_graphic(ui::Graphic::Blank), - button_blue_mo: "/voxygen/element/buttons/blue_mo.png", - button_blue_press: "/voxygen/element/buttons/blue_press.png", + // Spell Book Window + spellbook_bg: "/voxygen/element/misc_bg/small_bg.png", + spellbook_icon: "/voxygen/element/icons/spellbook.png", - // Window BG - window_bg: "/voxygen/element/misc_bg/window_bg.png", + // Bag + bag: "/voxygen/element/buttons/bag/closed.png", + bag_hover: "/voxygen/element/buttons/bag/closed_hover.png", + bag_press: "/voxygen/element/buttons/bag/closed_press.png", + bag_open: "/voxygen/element/buttons/bag/open.png", + bag_open_hover: "/voxygen/element/buttons/bag/open_hover.png", + bag_open_press: "/voxygen/element/buttons/bag/open_press.png", - // Social Window - social_bg: "/voxygen/element/misc_bg/small_bg.png", - social_icon: "/voxygen/element/icons/social.png", + map_bg: "/voxygen/element/misc_bg/small_bg.png", + map_icon: "/voxygen/element/icons/map.png", - // Map Window - map_bg: "/voxygen/element/misc_bg/small_bg.png", - map_icon: "/voxygen/element/icons/map.png", + grid_button: "/voxygen/element/buttons/border.png", + grid_button_hover: "/voxygen/element/buttons/border_mo.png", + grid_button_press: "/voxygen/element/buttons/border_press.png", + grid_button_open: "/voxygen/element/buttons/border_pressed.png", - // Spell Book Window - spellbook_bg: "/voxygen/element/misc_bg/small_bg.png", - spellbook_icon: "/voxygen/element/icons/spellbook.png", + // Skillbar Module + sb_grid: "/voxygen/element/skill_bar/sbar_grid.png", + sb_grid_bg: "/voxygen/element/skill_bar/sbar_grid_bg.png", + l_click: "/voxygen/element/skill_bar/l.png", + r_click: "/voxygen/element/skill_bar/r.png", + mana_bar: "/voxygen/element/skill_bar/mana_bar.png", + health_bar: "/voxygen/element/skill_bar/health_bar.png", + xp_bar: "/voxygen/element/skill_bar/xp_bar.png", - // Char Window - charwindow: "/voxygen/element/misc_bg/charwindow.png", - charwindow_icon: "/voxygen/element/icons/charwindow.png", - charwindow_tab_bg: "/voxygen/element/frames/tab.png", - charwindow_tab: "/voxygen/element/buttons/tab.png", - charwindow_expbar: "/voxygen/element/misc_bg/small_bg.png", - progress_frame: "/voxygen/element/frames/progress_bar.png", - progress: "/voxygen/element/misc_bg/progress.png", + esc_bg: "/voxygen/element/frames/menu.png", - // Quest-Log Window - questlog_bg: "/voxygen/element/misc_bg/small_bg.png", - questlog_icon: "/voxygen/element/icons/questlog.png", + window_frame_2: "/voxygen/element/frames/window_2.png", + + settings_bg: "/voxygen/element/frames/settings.png", + settings_icon: "/voxygen/element/icons/settings.png", + settings_button_mo: "/voxygen/element/buttons/blue_mo.png", + + // Char Window + charwindow: "/voxygen/element/misc_bg/charwindow.png", + charwindow_icon: "/voxygen/element/icons/charwindow.png", + charwindow_tab_bg: "/voxygen/element/frames/tab.png", + charwindow_tab: "/voxygen/element/buttons/tab.png", + charwindow_expbar: "/voxygen/element/misc_bg/small_bg.png", + progress_frame: "/voxygen/element/frames/progress_bar.png", + progress: "/voxygen/element/misc_bg/progress.png", + + // Quest-Log Window + questlog_bg: "/voxygen/element/misc_bg/small_bg.png", + questlog_icon: "/voxygen/element/icons/questlog.png", + + button_blue_mo: "/voxygen/element/buttons/blue_mo.png", + button_blue_press: "/voxygen/element/buttons/blue_press.png", + + // Window BG + window_bg: "/voxygen/element/misc_bg/window_bg.png", + + // Social Window + social_bg: "/voxygen/element/misc_bg/small_bg.png", + social_icon: "/voxygen/element/icons/social.png", - // Chat-Arrows - chat_arrow: "/voxygen/element/buttons/arrow/chat_arrow.png", - chat_arrow_mo: "/voxygen/element/buttons/arrow/chat_arrow_mo.png", - chat_arrow_press: "/voxygen/element/buttons/arrow/chat_arrow_press.png", blank: (), diff --git a/voxygen/src/hud/map.rs b/voxygen/src/hud/map.rs index ec2faf7fc9..dd3b3eacf3 100644 --- a/voxygen/src/hud/map.rs +++ b/voxygen/src/hud/map.rs @@ -13,13 +13,15 @@ use super::{ widget_ids! { struct Ids { - map_bg, - map_close, map_frame, + map_bg, + map_icon, + map_close, + map_title, map_frame_l, map_frame_r, - map_icon, - map_title, + map_frame_bl, + map_frame_br, } } @@ -77,21 +79,35 @@ impl<'a> Widget for Map<'a> { } = args; // BG - Image::new(self.imgs.map_bg) - .w_h(824.0, 488.0) - .middle_of(ui.window) - .set(state.ids.map_bg, ui); + Rectangle::fill_with([824.0, 976.0], color::TRANSPARENT) + .mid_top_with_margin_on(ui.window, 15.0) + .scroll_kids() + .scroll_kids_vertically() + .set(state.ids.map_bg, ui); + // Frame + Image::new(self.imgs.map_frame_l) + .top_left_with_margins_on(state.ids.map_bg, 0.0, 0.0) + .w_h(412.0, 488.0) + .set(state.ids.map_frame_l, ui); + Image::new(self.imgs.map_frame_r) + .right_from(state.ids.map_frame_l, 0.0) + .w_h(412.0, 488.0) + .set(state.ids.map_frame_r, ui); + Image::new(self.imgs.map_frame_br) + .down_from(state.ids.map_frame_r, 0.0) + .w_h(412.0, 488.0) + .set(state.ids.map_frame_br, ui); + Image::new(self.imgs.map_frame_bl) + .down_from(state.ids.map_frame_l, 0.0) + .w_h(412.0, 488.0) + .set(state.ids.map_frame_bl, ui); - // Frame - Image::new(self.imgs.map_frame_l) - .top_left_with_margins_on(state.ids.map_bg, 0.0, 0.0) - .w_h(412.0, 488.0) - .set(state.ids.map_frame_l, ui); + // Icon + Image::new(self.imgs.map_icon) + .w_h(224.0 / 3.0, 224.0 / 3.0) + .top_left_with_margins_on(state.ids.map_frame, -10.0, -10.0) + .set(state.ids.map_icon, ui); - Image::new(self.imgs.map_frame_r) - .top_right_with_margins_on(state.ids.map_bg, 0.0, 0.0) - .w_h(1648.0 / 4.0, 1952.0 / 4.0) - .set(state.ids.map_frame_r, ui); // Icon Image::new(self.imgs.map_icon) @@ -100,23 +116,16 @@ impl<'a> Widget for Map<'a> { .set(state.ids.map_icon, ui); // X-Button - if Button::image(self.imgs.close_button) - .w_h(4.0*2.0, 4.0*2.0) - .hover_image(self.imgs.close_button_hover) - .press_image(self.imgs.close_button_press) - .top_right_with_margins_on(state.ids.map_frame_r, 1.0, 1.0) - .set(state.ids.map_close, ui) - .was_clicked() + if Button::image(self.imgs.close_button) + .w_h(28.0, 28.0) + .hover_image(self.imgs.close_button_hover) + .press_image(self.imgs.close_button_press) + .top_right_with_margins_on(state.ids.map_frame_r, 0.0, 0.0) + .set(state.ids.map_close, ui) + .was_clicked() { return Some(Event::Close); - } - - // Title - Text::new("Map") - .mid_top_with_margin_on(state.ids.map_bg, -7.0) - .font_size(50) - .color(TEXT_COLOR) - .set(state.ids.map_title, ui); + } None } diff --git a/voxygen/src/hud/mod.rs b/voxygen/src/hud/mod.rs index a56041449a..197c43b27a 100644 --- a/voxygen/src/hud/mod.rs +++ b/voxygen/src/hud/mod.rs @@ -62,6 +62,9 @@ widget_ids! { mmap_frame, mmap_frame_bg, mmap_location, + mmap_button, + + // Window Frames window_frame_0, @@ -118,6 +121,7 @@ pub struct Hud { mmap_open: bool, show_map: bool, show_ui: bool, + mmap_open: bool, inventory_space: u32, inventorytest_button: bool, } @@ -140,13 +144,14 @@ impl Hud { fonts, ids, new_messages: VecDeque::new(), - show_help: true, - show_debug: false, + show_help: false, + show_debug: true, show_bag: false, esc_menu_open: false, open_windows: Windows::None, show_map: false, show_ui: true, + mmap_open: false, inventorytest_button: false, inventory_space: 0, } @@ -168,7 +173,7 @@ impl Hud { Text::new(version) .top_left_with_margins_on(ui_widgets.window, 5.0, 5.0) .font_size(14) - .font_id(self.font_opensans) + .font_id(self.fonts.opensans) .color(TEXT_COLOR) .set(self.ids.version, ui_widgets); Text::new(&format!("FPS: {:.1}", tps)) @@ -178,7 +183,6 @@ impl Hud { .font_size(14) .set(self.ids.fps_counter, ui_widgets); } - // Add Bag-Space Button if self.inventorytest_button { if Button::image(self.imgs.grid_button) @@ -193,15 +197,7 @@ impl Hud { { self.inventory_space += 1; }; - } - - // Alpha Version - Text::new(version) - .top_left_with_margins_on(ui_widgets.window, 5.0, 5.0) - .font_size(14) - .color(TEXT_COLOR) - .set(self.ids.v_logo, ui_widgets); - + } // Help Text if self.show_help { Image::new(self.imgs.window_frame_2) @@ -240,14 +236,48 @@ impl Hud { } // Minimap - Image::new(self.imgs.mmap_frame_bg) - .w_h(1750.0 / 8.0, 1650.0 / 8.0) - .top_right_with_margins_on(ui_widgets.window, 5.0, 5.0) - .set(self.ids.mmap_frame_bg, ui_widgets); - Image::new(self.imgs.mmap_frame) - .w_h(1750.0 / 8.0, 1650.0 / 8.0) - .top_right_with_margins_on(ui_widgets.window, 5.0, 5.0) - .set(self.ids.mmap_frame, ui_widgets); + + if self.mmap_open { + Image::new(self.imgs.mmap_frame) + .w_h(100.0 * 2.0, 100.0 * 2.0) + .top_right_with_margins_on(ui_widgets.window, 5.0, 5.0) + .set(self.ids.mmap_frame, ui_widgets); + + Rectangle::fill_with([92.0 * 2.0, 82.0 * 2.0], color::TRANSPARENT) + .mid_top_with_margin_on(self.ids.mmap_frame, 13.0 * 2.0 + 2.0) + .set(self.ids.mmap_frame_bg, ui_widgets); + } else { + Image::new(self.imgs.mmap_frame_closed) + .w_h(100.0 * 2.0, 11.0 * 2.0) + .top_right_with_margins_on(ui_widgets.window, 5.0, 5.0) + .set(self.ids.mmap_frame, ui_widgets); + }; + + if Button::image(if self.mmap_open { + self.imgs.mmap_open + } else { + self.imgs.mmap_closed + }) + .w_h(100.0 * 0.2, 100.0 * 0.2) + .hover_image(if self.mmap_open { + self.imgs.mmap_open_hover + } else { + self.imgs.mmap_closed_hover + }) + .press_image(if self.mmap_open { + self.imgs.mmap_open_press + } else { + self.imgs.mmap_closed_press + }) + .top_right_with_margins_on(self.ids.mmap_frame, 0.0, 0.0) + .set(self.ids.mmap_button, ui_widgets) + .was_clicked() + { + self.mmap_open = !self.mmap_open; + }; + + // Title + // Make it display the actual location Text::new("Uncanny Valley") .mid_top_with_margin_on(self.ids.mmap_frame, 3.0) .font_size(14) diff --git a/voxygen/src/hud/settings_window.rs b/voxygen/src/hud/settings_window.rs index 7859b97a20..0619356c7b 100644 --- a/voxygen/src/hud/settings_window.rs +++ b/voxygen/src/hud/settings_window.rs @@ -1,7 +1,7 @@ use conrod_core::{ builder_methods, color, text::font, - widget::{self, Button, Image, Rectangle, Text}, + widget::{self, Button, Image, Rectangle, Scrollbar, Text}, widget_ids, Color, Colorable, Labelable, Positionable, Sizeable, Widget, WidgetCommon, }; use super::{ @@ -13,20 +13,29 @@ use crate::ui::ToggleButton; widget_ids! { struct Ids { + + settings_content, + settings_icon, + settings_button_mo, + settings_close, + settings_title, + settings_r, + settings_l, + settings_scrollbar, + controls_text, + controls_controls, button_help, - controls, - debug_button, - debug_button_label, + button_help2, + show_help_label, gameplay, + controls, + rectangle, + debug_button, + debug_button_label, interface, inventorytest_button, - inventorytest_button_label, - rectangle, - settings_bg, - settings_close, - settings_icon, - settings_title, - show_help_label, + inventorytest_button_label, + settings_bg, sound, test, video, @@ -103,53 +112,69 @@ impl<'a> Widget for SettingsWindow<'a> { .. } = args; - // BG - Image::new(self.imgs.settings_bg) - .middle_of(ui.window) - .w_h(1648.0 / 2.5, 1952.0 / 2.5) - .set(state.ids.settings_bg, ui); - - // X-Button - if Button::image(self.imgs.close_button) - .w_h(244.0 * 0.22 / 2.5, 244.0 * 0.22 / 2.5) - .hover_image(self.imgs.close_button_hover) - .press_image(self.imgs.close_button_press) - .top_right_with_margins_on(state.ids.settings_bg, 4.0, 4.0) - .set(state.ids.settings_close, ui) - .was_clicked() + // Frame Alignment + Rectangle::fill_with([824.0, 488.0], color::TRANSPARENT) + .middle_of(ui.window) + .set(state.ids.settings_bg, ui); + // Frame + Image::new(self.imgs.settings_frame_l) + .top_left_with_margins_on(state.ids.settings_bg, 0.0, 0.0) + .w_h(412.0, 488.0) + .set(state.ids.settings_l, ui); + Image::new(self.imgs.settings_frame_r) + .right_from(state.ids.settings_l, 0.0) + .parent(state.ids.settings_bg) + .w_h(412.0, 488.0) + .set(state.ids.settings_r, ui); + // Content Alignment + Rectangle::fill_with([198.0 * 4.0, 97.0 * 4.0], color::TRANSPARENT) + .top_right_with_margins_on(state.ids.settings_r, 21.0 * 4.0, 4.0 * 4.0) + .scroll_kids() + .scroll_kids_vertically() + .set(state.ids.settings_content, ui); + Scrollbar::y_axis(state.ids.settings_content) + .thickness(5.0) + .rgba(0.33, 0.33, 0.33, 1.0) + .set(state.ids.settings_scrollbar, ui); + // X-Button + if Button::image(self.imgs.close_button) + .w_h(28.0, 28.0) + .hover_image(self.imgs.close_button_hover) + .press_image(self.imgs.close_button_press) + .top_right_with_margins_on(state.ids.settings_r, 0.0, 0.0) + .set(state.ids.settings_close, ui) + .was_clicked() { return Some(Event::Close); } // Title - Text::new("Settings") - .mid_top_with_margin_on(state.ids.settings_bg, 10.0) - .font_size(30) - .color(TEXT_COLOR) - .set(state.ids.settings_title, ui); - - // Icon - Image::new(self.imgs.settings_icon) - .w_h(224.0 / 3.0, 224.0 / 3.0) - .top_left_with_margins_on(state.ids.settings_bg, -10.0, -10.0) - .set(state.ids.settings_icon, ui); - - // TODO: Find out if we can remove this - // Alignment Rectangle - Rectangle::fill_with([1008.0 / 2.5, 1616.0 / 2.5], color::TRANSPARENT) - .top_left_with_margins_on(state.ids.settings_bg, 77.0, 205.0) - .set(state.ids.rectangle, ui); + Text::new("Settings") + .mid_top_with_margin_on(state.ids.settings_bg, 5.0) + .font_size(14) + .color(TEXT_COLOR) + .set(state.ids.settings_title, ui); + + // Interface - if Button::image(if let SettingsTab::Interface = state.settings_tab { - self.imgs.button_blue_mo - } else { - self.imgs.blank - }) - .w_h(304.0 / 2.5, 80.0 / 2.5) - .hover_image(self.imgs.button_blue_mo) - .press_image(self.imgs.button_blue_press) - .top_left_with_margins_on(state.ids.settings_bg, 78.0, 50.0) + if Button::image(if let SettingsTab::Interface = state.settings_tab { + self.imgs.settings_button_pressed + } else { + self.imgs.settings_button + }) + .w_h(31.0 * 4.0, 12.0 * 4.0) + .hover_image(if let SettingsTab::Interface = state.settings_tab { + self.imgs.settings_button_pressed + } else { + self.imgs.settings_button_hover + }) + .press_image(if let SettingsTab::Interface = state.settings_tab { + self.imgs.settings_button_pressed + } else { + self.imgs.settings_button_press + }) + .top_left_with_margins_on(state.ids.settings_l, 8.0 * 4.0, 2.0 * 4.0) .label("Interface") .label_font_size(14) .label_color(TEXT_COLOR) @@ -164,7 +189,7 @@ impl<'a> Widget for SettingsWindow<'a> { let show_debug = ToggleButton::new(state.show_help, self.imgs.check, self.imgs.check_checked) .w_h(288.0 / 24.0, 288.0 / 24.0) - .top_left_with_margins_on(state.ids.rectangle, 15.0, 15.0) + .top_left_with_margins_on(state.ids.settings_content, 5.0, 5.0) .hover_images(self.imgs.check_checked_mo, self.imgs.check_mo) .press_images(self.imgs.check_press, self.imgs.check_press) .set(state.ids.button_help, ui); @@ -185,7 +210,7 @@ impl<'a> Widget for SettingsWindow<'a> { self.imgs.check_checked, ) .w_h(288.0 / 24.0, 288.0 / 24.0) - .top_left_with_margins_on(state.ids.rectangle, 40.0, 15.0) + .down_from(state.ids.button_help, 7.0) .hover_images(self.imgs.check_checked_mo, self.imgs.check_mo) .press_images(self.imgs.check_press, self.imgs.check_press) .set(state.ids.inventorytest_button, ui); @@ -194,7 +219,7 @@ impl<'a> Widget for SettingsWindow<'a> { Text::new("Show Inventory Test Button") .right_from(state.ids.inventorytest_button, 10.0) - .font_size(12) + .font_size(14) .font_id(self.fonts.opensans) .graphics_for(state.ids.inventorytest_button) .color(TEXT_COLOR) @@ -206,7 +231,7 @@ impl<'a> Widget for SettingsWindow<'a> { self.imgs.check_checked ) .w_h(288.0 / 24.0, 288.0 / 24.0) - .top_left_with_margins_on(state.ids.rectangle, 65.0, 15.0) + .down_from(state.ids.inventorytest_button, 7.0) .hover_images(self.imgs.check_checked_mo, self.imgs.check_mo) .press_images(self.imgs.check_press, self.imgs.check_press) .set(state.ids.debug_button, ui); @@ -215,7 +240,7 @@ impl<'a> Widget for SettingsWindow<'a> { Text::new("Show Debug Window") .right_from(state.ids.debug_button, 10.0) - .font_size(12) + .font_size(14) .font_id(self.fonts.opensans) .graphics_for(state.ids.debug_button) .color(TEXT_COLOR) @@ -224,16 +249,23 @@ impl<'a> Widget for SettingsWindow<'a> { } // 2 Gameplay//////////////// - if Button::image(if let SettingsTab::Gameplay = state.settings_tab { - self.imgs.button_blue_mo + if Button::image(if let SettingsTab::Gameplay = state.settings_tab { + self.imgs.settings_button_pressed } else { - self.imgs.blank - } - ) - .w_h(304.0 / 2.5, 80.0 / 2.5) - .hover_image(self.imgs.button_blue_mo) - .press_image(self.imgs.button_blue_press) - .down_from(state.ids.interface, 1.0) + self.imgs.settings_button + }) + .w_h(31.0 * 4.0, 12.0 * 4.0) + .hover_image(if let SettingsTab::Gameplay = state.settings_tab { + self.imgs.settings_button_pressed + } else { + self.imgs.settings_button_hover + }) + .press_image(if let SettingsTab::Gameplay = state.settings_tab { + self.imgs.settings_button_pressed + } else { + self.imgs.settings_button_press + }) + .right_from(state.ids.interface, 0.0) .label("Gameplay") .label_font_size(14) .label_color(TEXT_COLOR) @@ -245,15 +277,22 @@ impl<'a> Widget for SettingsWindow<'a> { // 3 Controls///////////////////// if Button::image(if let SettingsTab::Controls = state.settings_tab { - self.imgs.button_blue_mo + self.imgs.settings_button_pressed } else { - self.imgs.blank - } - ) - .w_h(304.0 / 2.5, 80.0 / 2.5) - .hover_image(self.imgs.button_blue_mo) - .press_image(self.imgs.button_blue_press) - .down_from(state.ids.gameplay, 1.0) + self.imgs.settings_button + }) + .w_h(31.0 * 4.0, 12.0 * 4.0) + .hover_image(if let SettingsTab::Controls = state.settings_tab { + self.imgs.settings_button_pressed + } else { + self.imgs.settings_button_hover + }) + .press_image(if let SettingsTab::Controls = state.settings_tab { + self.imgs.settings_button_pressed + } else { + self.imgs.settings_button_press + }) + .right_from(state.ids.gameplay, 0.0) .label("Controls") .label_font_size(14) .label_color(TEXT_COLOR) @@ -262,19 +301,159 @@ impl<'a> Widget for SettingsWindow<'a> { { state.update(|s| s.settings_tab = SettingsTab::Controls); } - - // 4 Video//////////////////////////////// - if Button::image(if let SettingsTab::Video = state.settings_tab { - self.imgs.button_blue_mo - } else { - self.imgs.blank + if let SettingsTab::Controls = state.settings_tab { + Text::new( + "Free Cursor\n\ + Toggle Help Window\n\ + Toggle Interface\n\ + Toggle FPS and Debug Info\n\ + \n\ + \n\ + Move Forward\n\ + Move Left\n\ + Move Right\n\ + Move Backwards\n\ + \n\ + Jump\n\ + \n\ + Dodge\n\ + \n\ + Auto Walk\n\ + \n\ + Sheathe/Draw Weapons\n\ + \n\ + Put on/Remove Helmet\n\ + \n\ + \n\ + Basic Attack\n\ + Secondary Attack/Block/Aim\n\ + \n\ + \n\ + Skillbar Slot 1\n\ + Skillbar Slot 2\n\ + Skillbar Slot 3\n\ + Skillbar Slot 4\n\ + Skillbar Slot 5\n\ + Skillbar Slot 6\n\ + Skillbar Slot 7\n\ + Skillbar Slot 8\n\ + Skillbar Slot 9\n\ + Skillbar Slot 10\n\ + \n\ + \n\ + Pause Menu\n\ + Settings\n\ + Social\n\ + Map\n\ + Spellbook\n\ + Character\n\ + Questlog\n\ + Bag\n\ + \n\ + \n\ + \n\ + Send Chat Message\n\ + Scroll Chat\n\ + \n\ + \n\ + Chat commands: \n\ + \n\ + /alias [Name] - Change your Chat Name \n\ + /tp [Name] - Teleports you to another player + ", + ) + .color(TEXT_COLOR) + .top_left_with_margins_on(state.ids.settings_content, 5.0, 5.0) + .font_id(self.fonts.opensans) + .font_size(18) + .set(state.ids.controls_text, ui); + // TODO: Replace with buttons that show the actual keybind and allow the user to change it. + Text::new( + "TAB\n\ + F1\n\ + F2\n\ + F3\n\ + \n\ + \n\ + W\n\ + A\n\ + S\n\ + D\n\ + \n\ + SPACE\n\ + \n\ + ??\n\ + \n\ + ??\n\ + \n\ + ??\n\ + \n\ + ??\n\ + \n\ + \n\ + L-Click\n\ + R-Click\n\ + \n\ + \n\ + 1\n\ + 2\n\ + 3\n\ + 4\n\ + 5\n\ + 6\n\ + 7\n\ + 8\n\ + 9\n\ + 0\n\ + \n\ + \n\ + ESC\n\ + N\n\ + O\n\ + M\n\ + P\n\ + C\n\ + L\n\ + B\n\ + \n\ + \n\ + \n\ + ENTER\n\ + Mousewheel\n\ + \n\ + \n\ + \n\ + \n\ + \n\ + \n\ + ", + ) + .color(TEXT_COLOR) + .right_from(state.ids.controls_text, 0.0) + .font_id(self.fonts.opensans) + .font_size(18) + .set(state.ids.controls_controls, ui); } - ) - .w_h(304.0 / 2.5, 80.0 / 2.5) - .hover_image(self.imgs.button_blue_mo) - .press_image(self.imgs.button_blue_press) - .down_from(state.ids.controls, 1.0) + // 4 Video//////////////////////////////// + if Button::image(if let SettingsTab::Video = state.settings_tab { + self.imgs.settings_button_pressed + } else { + self.imgs.settings_button + }) + .w_h(31.0 * 4.0, 12.0 * 4.0) + .hover_image(if let SettingsTab::Video = state.settings_tab { + self.imgs.settings_button_pressed + } else { + self.imgs.settings_button_hover + }) + .press_image(if let SettingsTab::Video = state.settings_tab { + self.imgs.settings_button_pressed + } else { + self.imgs.settings_button_press + }) + .right_from(state.ids.controls, 0.0) .label("Video") + .parent(state.ids.settings_r) .label_font_size(14) .label_color(TEXT_COLOR) .set(state.ids.video, ui) @@ -285,15 +464,23 @@ impl<'a> Widget for SettingsWindow<'a> { // 5 Sound/////////////////////////////// if Button::image(if let SettingsTab::Sound = state.settings_tab { - self.imgs.button_blue_mo + self.imgs.settings_button_pressed } else { - self.imgs.blank - } - ) - .w_h(304.0 / 2.5, 80.0 / 2.5) - .hover_image(self.imgs.button_blue_mo) - .press_image(self.imgs.button_blue_press) - .down_from(state.ids.video, 1.0) + self.imgs.settings_button + }) + .w_h(31.0 * 4.0, 12.0 * 4.0) + .hover_image(if let SettingsTab::Sound = state.settings_tab { + self.imgs.settings_button_pressed + } else { + self.imgs.settings_button_hover + }) + .press_image(if let SettingsTab::Sound = state.settings_tab { + self.imgs.settings_button_pressed + } else { + self.imgs.settings_button_press + }) + .right_from(state.ids.video, 0.0) + .parent(state.ids.settings_r) .label("Sound") .label_font_size(14) .label_color(TEXT_COLOR) diff --git a/voxygen/src/hud/small_window.rs b/voxygen/src/hud/small_window.rs index 5180fa4488..58ca98b1d1 100644 --- a/voxygen/src/hud/small_window.rs +++ b/voxygen/src/hud/small_window.rs @@ -96,6 +96,7 @@ impl<'a> Widget for SmallWindow<'a> { Image::new(self.imgs.window_frame) // TODO: Position // .right_from(state.ids.character_window, 20.0) + .top_left_with_margins_on(ui.window, 200.0, 10.0) .w_h(107.0*4.0, 125.0*4.0) .set(state.ids.frame, ui); } else {