UI: Fixes and enhancements to trading window

voxygen/src/hud/bag.rs

@@ -133,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, if self.show_bag_inv { 548.0 } else { 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, 70.0, 5.0);
         } else {
             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, if self.show_bag_inv { 548.0 } else { 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);
@@ -205,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)
@@ -222,7 +251,7 @@ impl<'a> InventoryScroller<'a> {
         };
 
         // This is just for the offeror inventory scrollbar
-        if space_max >= 108 && self.show_bag_inv {
+        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)
@@ -238,18 +267,27 @@ impl<'a> InventoryScroller<'a> {
                 .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 { 440.0 } else { 200.0 }],
-            color::TRANSPARENT,
-        )
-        .bottom_left_with_margins_on(
-            self.bg_ids.bg_frame,
-            29.0,
-            if self.show_bag_inv { 28.0 } else { 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

@@ -441,6 +441,8 @@ 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",

voxygen/src/hud/trade.rs

@@ -108,12 +108,12 @@ 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_middle_bg_bag)
-            .w_h(424.0, 500.0)
+            .w_h(424.0, 482.0)
             .color(Some(UI_MAIN))
-            .mid_bottom_with_margin_on(ui.window, 281.0)
+            .mid_bottom_with_margin_on(ui.window, 295.0)
             .set(state.ids.bg, ui);
         Image::new(self.imgs.inv_middle_frame)
-            .w_h(424.0, 500.0)
+            .w_h(424.0, 482.0)
             .middle_of(state.ids.bg)
             .color(Some(UI_HIGHLIGHT_0))
             .set(state.ids.bg_frame, ui);
@@ -483,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, 110.0, 47.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)