Merge branch 'trade-window-improvements' into 'master'

UI: Fixes and enhancements to the trading window

See merge request veloren/veloren!2738

assets/voxygen/i18n/en/hud/trade.ron

@@ -3,7 +3,7 @@
 /// Localization for "global" English
 (
     string_map: {
-        "hud.trade.trade_window": "Trade window",
+        "hud.trade.trade_window": "Trade",
         "hud.trade.phase1_description": "Drag the items you want to trade\n into the corresponding area.",
         "hud.trade.phase2_description": "The trade is now locked to give you\n time to review it.",
         /// Phase3 should only be visible for a few milliseconds if everything is working properly, but is included for completeness
@@ -21,6 +21,8 @@
         "hud.trade.coin": "coin(s)",
         "hud.trade.tooltip_hint_1": "<Shift-Click to Add/Remove from trade.>",
         "hud.trade.tooltip_hint_2": "<Ctrl-Click to Auto-Balance with this.>",
+        "hud.trade.your_offer": "Your offer",
+        "hud.trade.their_offer": "Their offer",
     },
 
 

voxygen/src/hud/bag.rs

@@ -56,7 +56,9 @@ widget_ids! {
         inventory_title,
         inventory_title_bg,
         scrollbar_bg,
+        second_phase_scrollbar_bg,
         scrollbar_slots,
+        left_scrollbar_slots,
     }
 }
 
@@ -131,26 +133,55 @@ impl<'a> InventoryScroller<'a> {
     }
 
     fn background(&mut self, ui: &mut UiCell<'_>) {
+        let bg_id = if !self.on_right {
+            self.imgs.inv_bg_bag
+        } else {
+            self.imgs.player_inv_bg_bag
+        };
+
+        let img_id = if !self.on_right {
+            self.imgs.inv_frame_bag
+        } else {
+            self.imgs.player_inv_frame_bag
+        };
+
         let mut bg = Image::new(if self.show_stats {
             self.imgs.inv_bg_stats
         } else if self.show_bag_inv {
-            self.imgs.inv_bg_bag
+            bg_id
         } else {
             self.imgs.inv_bg_armor
         })
-        .w_h(424.0, 708.0);
+        .w_h(
+            424.0,
+            if self.show_bag_inv && !self.on_right {
+                548.0
+            } else {
+                708.0
+            },
+        );
+
         if self.on_right {
-            bg = bg.bottom_right_with_margins_on(ui.window, 60.0, 5.0);
+            bg = bg.bottom_right_with_margins_on(ui.window, 70.0, 5.0);
         } else {
-            bg = bg.bottom_left_with_margins_on(ui.window, 60.0, 5.0);
+            bg = bg.bottom_left_with_margins_on(ui.window, 230.0, 5.0);
         }
+
         bg.color(Some(UI_MAIN)).set(self.bg_ids.bg, ui);
+
         Image::new(if self.show_bag_inv {
-            self.imgs.inv_frame_bag
+            img_id
         } else {
             self.imgs.inv_frame
         })
-        .w_h(424.0, 708.0)
+        .w_h(
+            424.0,
+            if self.show_bag_inv && !self.on_right {
+                548.0
+            } else {
+                708.0
+            },
+        )
         .middle_of(self.bg_ids.bg)
         .color(Some(UI_HIGHLIGHT_0))
         .set(self.bg_ids.bg_frame, ui);
@@ -187,6 +218,7 @@ impl<'a> InventoryScroller<'a> {
         ui: &mut UiCell<'_>,
     ) {
         let space_max = self.inventory.slots().count();
+
         // Slots Scrollbar
         if space_max > 45 && !self.show_bag_inv {
             // Scrollbar-BG
@@ -202,7 +234,7 @@ impl<'a> InventoryScroller<'a> {
                 .color(UI_MAIN)
                 .middle_of(state.ids.scrollbar_bg)
                 .set(state.ids.scrollbar_slots, ui);
-        } else if space_max > 135 {
+        } else if space_max > 135 && self.on_right {
             // Scrollbar-BG
             Image::new(self.imgs.scrollbar_bg_big)
                 .w_h(9.0, 592.0)
@@ -217,14 +249,45 @@ impl<'a> InventoryScroller<'a> {
                 .middle_of(state.ids.scrollbar_bg)
                 .set(state.ids.scrollbar_slots, ui);
         };
+
+        // This is just for the offeror inventory scrollbar
+        if space_max >= 108 && !self.on_right && self.show_bag_inv {
+            // Left bag scrollbar background
+            Image::new(self.imgs.second_phase_scrollbar_bg)
+                .w_h(9.0, 434.0)
+                .bottom_right_with_margins_on(self.bg_ids.bg_frame, 42.0, 3.0)
+                .color(Some(UI_HIGHLIGHT_0))
+                .set(state.ids.second_phase_scrollbar_bg, ui);
+            // Left bag scrollbar
+            Scrollbar::y_axis(state.ids.inv_alignment)
+                .thickness(5.0)
+                .h(384.0)
+                .color(UI_MAIN)
+                .middle_of(state.ids.second_phase_scrollbar_bg)
+                .set(state.ids.left_scrollbar_slots, ui);
+        }
+
+        let grid_width = if self.show_bag_inv && !self.on_right {
+            440.0 // This for the left bag
+        } else if self.show_bag_inv && self.on_right {
+            600.0 // This for the expanded right bag
+        } else {
+            200.0
+        };
+
         // Alignment for Grid
-        Rectangle::fill_with(
-            [362.0, if self.show_bag_inv { 600.0 } else { 200.0 }],
-            color::TRANSPARENT,
-        )
-        .bottom_left_with_margins_on(self.bg_ids.bg_frame, 29.0, 46.5)
-        .scroll_kids_vertically()
-        .set(state.ids.inv_alignment, ui);
+        Rectangle::fill_with([362.0, grid_width], color::TRANSPARENT)
+            .bottom_left_with_margins_on(
+                self.bg_ids.bg_frame,
+                29.0,
+                if self.show_bag_inv && !self.on_right {
+                    28.0
+                } else {
+                    46.5
+                },
+            )
+            .scroll_kids_vertically()
+            .set(state.ids.inv_alignment, ui);
 
         // Bag Slots
         // Create available inventory slot widgets

voxygen/src/hud/img_ids.rs

@@ -442,6 +442,10 @@ image_ids! {
         inv_frame: "voxygen.element.ui.bag.inv_frame",
         inv_frame_bag: "voxygen.element.ui.bag.inv_frame_bag",
         inv_bg_bag: "voxygen.element.ui.bag.inv_bg_bag",
+        player_inv_frame_bag: "voxygen.element.ui.bag.player_inv_frame_bag",
+        player_inv_bg_bag: "voxygen.element.ui.bag.player_inv_bg_bag",
+        inv_middle_bg_bag: "voxygen.element.ui.bag.inv_middle_bg_bag",
+        inv_middle_frame: "voxygen.element.ui.bag.inv_middle_frame",
         char_art: "voxygen.element.ui.bag.icons.character",
         inv_slot: "voxygen.element.ui.bag.buttons.inv_slot",
         inv_slot_grey: "voxygen.element.ui.bag.buttons.inv_slot_grey",
@@ -454,6 +458,7 @@ image_ids! {
         inv_slot_sel: "voxygen.element.ui.bag.buttons.inv_slot_sel",
         scrollbar_bg: "voxygen.element.ui.generic.slider.scrollbar",
         scrollbar_bg_big: "voxygen.element.ui.generic.slider.scrollbar_1",
+        second_phase_scrollbar_bg: "voxygen.element.ui.bag.second_phase_scrollbar_bg",
         inv_tab_active: "voxygen.element.ui.bag.buttons.inv_tab_active",
         inv_tab_inactive: "voxygen.element.ui.bag.buttons.inv_tab_inactive",
         inv_tab_inactive_hover: "voxygen.element.ui.bag.buttons.inv_tab_inactive",

voxygen/src/hud/trade.rs

@@ -1,17 +1,12 @@
-use super::{
-    img_ids::{Imgs, ImgsRot},
-    item_imgs::ItemImgs,
-    slots::{SlotManager, TradeSlot},
-    TEXT_COLOR, UI_HIGHLIGHT_0, UI_MAIN,
-};
-use crate::{
-    hud::bag::{BackgroundIds, InventoryScroller},
-    ui::{
-        fonts::Fonts,
-        slot::{ContentSize, SlotMaker},
-        ImageFrame, ItemTooltip, ItemTooltipManager, ItemTooltipable,
-    },
+use conrod_core::{
+    color,
+    position::Relative,
+    widget::{self, Button, Image, Rectangle, State as ConrodState, Text},
+    widget_ids, Color, Colorable, Labelable, Positionable, Sizeable, UiCell, Widget, WidgetCommon,
 };
+use specs::Entity as EcsEntity;
+use vek::*;
+
 use client::Client;
 use common::{
     comp::{
@@ -21,15 +16,23 @@ use common::{
     trade::{PendingTrade, SitePrices, TradeAction, TradePhase},
 };
 use common_net::sync::WorldSyncExt;
-use conrod_core::{
-    color,
-    position::Relative,
-    widget::{self, Button, Image, Rectangle, State as ConrodState, Text},
-    widget_ids, Color, Colorable, Labelable, Positionable, Sizeable, UiCell, Widget, WidgetCommon,
-};
 use i18n::Localization;
-use specs::Entity as EcsEntity;
-use vek::*;
+
+use crate::{
+    hud::bag::{BackgroundIds, InventoryScroller},
+    ui::{
+        fonts::Fonts,
+        slot::{ContentSize, SlotMaker},
+        ImageFrame, ItemTooltip, ItemTooltipManager, ItemTooltipable,
+    },
+};
+
+use super::{
+    img_ids::{Imgs, ImgsRot},
+    item_imgs::ItemImgs,
+    slots::{SlotManager, TradeSlot},
+    TEXT_COLOR, UI_HIGHLIGHT_0, UI_MAIN,
+};
 
 pub struct State {
     ids: Ids,
@@ -99,17 +102,18 @@ impl<'a> Trade<'a> {
         }
     }
 }
+
 const MAX_TRADE_SLOTS: usize = 16;
 
 impl<'a> Trade<'a> {
     fn background(&mut self, state: &mut ConrodState<'_, State>, ui: &mut UiCell<'_>) {
-        Image::new(self.imgs.inv_bg_bag)
-            .w_h(424.0, 708.0)
-            .middle()
+        Image::new(self.imgs.inv_middle_bg_bag)
+            .w_h(424.0, 482.0)
             .color(Some(UI_MAIN))
+            .mid_bottom_with_margin_on(ui.window, 295.0)
             .set(state.ids.bg, ui);
-        Image::new(self.imgs.inv_frame_bag)
-            .w_h(424.0, 708.0)
+        Image::new(self.imgs.inv_middle_frame)
+            .w_h(424.0, 482.0)
             .middle_of(state.ids.bg)
             .color(Some(UI_HIGHLIGHT_0))
             .set(state.ids.bg_frame, ui);
@@ -173,9 +177,9 @@ impl<'a> Trade<'a> {
         let inventory = inventories.get(entity)?;
 
         // Alignment for Grid
-        let mut alignment = Rectangle::fill_with([200.0, 340.0], color::TRANSPARENT);
+        let mut alignment = Rectangle::fill_with([200.0, 180.0], color::TRANSPARENT);
         if !ours {
-            alignment = alignment.top_left_with_margins_on(state.ids.bg, 180.0, 46.5);
+            alignment = alignment.top_left_with_margins_on(state.ids.bg, 180.0, 32.5);
         } else {
             alignment = alignment.right_from(state.ids.inv_alignment[1 - who], 0.0);
         }
@@ -198,9 +202,27 @@ impl<'a> Trade<'a> {
             .unwrap_or_else(|| format!("Player {}", who));
 
         let offer_header = self
-            .localized_strings
-            .get("hud.trade.persons_offer")
-            .replace("{playername}", &name);
+            .client
+            .player_list()
+            .get(&uid)
+            .map(|_| {
+                self.localized_strings
+                    .get("hud.trade.your_offer")
+                    .to_owned()
+            })
+            .or_else(|| {
+                self.client
+                    .state()
+                    .read_storage::<Stats>()
+                    .get(entity)
+                    .map(|_| {
+                        self.localized_strings
+                            .get("hud.trade.their_offer")
+                            .to_owned()
+                    })
+            })
+            .unwrap_or_else(|| format!("Player {}", who));
+
         Text::new(&offer_header)
             .up_from(state.ids.inv_alignment[who], 20.0)
             .font_id(self.fonts.cyri.conrod_id)
@@ -214,7 +236,7 @@ impl<'a> Trade<'a> {
             .get("hud.trade.has_accepted")
             .replace("{playername}", &name);
         Text::new(&accept_indicator)
-            .down_from(state.ids.inv_alignment[who], 20.0)
+            .down_from(state.ids.inv_alignment[who], 50.0)
             .font_id(self.fonts.cyri.conrod_id)
             .font_size(self.fonts.cyri.scale(20))
             .color(Color::Rgba(
@@ -461,7 +483,7 @@ impl<'a> Trade<'a> {
             .w_h(31.0 * 5.0, 12.0 * 2.0)
             .hover_image(self.imgs.button_hover)
             .press_image(self.imgs.button_press)
-            .bottom_left_with_margins_on(state.ids.bg, 80.0, 60.0)
+            .bottom_left_with_margins_on(state.ids.bg, 90.0, 47.0)
             .label(self.localized_strings.get("hud.trade.accept"))
             .label_font_size(self.fonts.cyri.scale(14))
             .label_color(TEXT_COLOR)