From 3db666eb9e77dbd152ef2c49d70d0e459009acce Mon Sep 17 00:00:00 2001 From: Michael Hibbs Date: Tue, 10 Oct 2017 17:18:50 +0100 Subject: [PATCH] Show error message in empty market inventory drawer (#9041) * client/tasks/user: (create dropdown) change icon color on menuitem hover Previously the color was only changing when you hovered over the text or icon. This change changes the icon color when you hover anywhere over the `menuitem` * client/shops/market: fix search field in market * Hide drawer sliders if number of items for type is empty * Move drawer-help-text icon down to line up vertically with text * Add TODO for error thrown when trying to sell special item types * client/tasks/taskModal: display all selected tags for task * i18n/groups: religous to religious * client/shops/market: Add error message to empty drawer slider * Create new locale file to hold inventory locales * client/tasks/user: Revert change to create dropdown * Revert tag changes This will be picked up in a separate PR. * Fix missing space before function paren --- .../client/components/shops/market/index.vue | 20 +++++++++++++++++++ website/client/components/ui/drawer.vue | 2 ++ website/common/locales/en/groups.json | 2 +- website/common/locales/en/inventory.json | 7 +++++++ website/common/script/ops/sell.js | 1 + 5 files changed, 31 insertions(+), 1 deletion(-) create mode 100644 website/common/locales/en/inventory.json diff --git a/website/client/components/shops/market/index.vue b/website/client/components/shops/market/index.vue index c29afd7904..7f125ff934 100644 --- a/website/client/components/shops/market/index.vue +++ b/website/client/components/shops/market/index.vue @@ -169,8 +169,10 @@ div.fill-height + //- @TODO: Create new InventoryDrawer component and re-use in 'inventory/stable' component. drawer( :title="$t('quickInventory')" + :errorMessage="inventoryDrawerErrorMessage(selectedDrawerItemType)" ) div(slot="drawer-header") drawer-header-tabs( @@ -188,6 +190,7 @@ .popover-content-text(v-html="$t('petLikeToEatText')", v-once) drawer-slider( + v-if="hasOwnedItemsForType(selectedDrawerItemType)" :items="ownedItems(selectedDrawerItemType) || []", slot="drawer-slider", :itemWidth=94, @@ -232,6 +235,14 @@ @import '~client/assets/scss/colors.scss'; @import '~client/assets/scss/variables.scss'; + .market .drawer-slider { + min-height: 60px; + + .message { + top: 10px; + } + } + .fill-height { height: 38px; // button + margin + padding } @@ -611,6 +622,15 @@ export default { return mappedItems; } }, + hasOwnedItemsForType (type) { + return this.ownedItems(type).length > 0; + }, + inventoryDrawerErrorMessage (type) { + if (!this.hasOwnedItemsForType(type)) { + // @TODO: Change any places using similar locales from `pets.json` and use these new locales from 'inventory.json' + return this.$t('noItemsAvailableForType', { type: this.$t(`${type}ItemType`) }); + } + }, getItemClass (type, itemKey) { switch (type) { case 'food': diff --git a/website/client/components/ui/drawer.vue b/website/client/components/ui/drawer.vue index f2aa4c00bd..3388d2ed96 100644 --- a/website/client/components/ui/drawer.vue +++ b/website/client/components/ui/drawer.vue @@ -96,6 +96,8 @@ float: right; .svg-icon { + position: relative; + top: 4px; margin-left: 8px; } } diff --git a/website/common/locales/en/groups.json b/website/common/locales/en/groups.json index 40403b430e..79c390ba2e 100644 --- a/website/common/locales/en/groups.json +++ b/website/common/locales/en/groups.json @@ -141,7 +141,7 @@ "report": "Report", "abuseFlag": "Report violation of Community Guidelines", "abuseFlagModalHeading": "Report <%= name %> for violation?", - "abuseFlagModalBody": "Are you sure you want to report this post? You should ONLY report a post that violates the <%= firstLinkStart %>Community Guidelines<%= linkEnd %> and/or <%= secondLinkStart %>Terms of Service<%= linkEnd %>. Inappropriately reporting a post is a violation of the Community Guidelines and may give you an infraction. Appropriate reasons to flag a post include but are not limited to:

", + "abuseFlagModalBody": "Are you sure you want to report this post? You should ONLY report a post that violates the <%= firstLinkStart %>Community Guidelines<%= linkEnd %> and/or <%= secondLinkStart %>Terms of Service<%= linkEnd %>. Inappropriately reporting a post is a violation of the Community Guidelines and may give you an infraction. Appropriate reasons to flag a post include but are not limited to:

", "abuseFlagModalButton": "Report Violation", "abuseReported": "Thank you for reporting this violation. The moderators have been notified.", "abuseAlreadyReported": "You have already reported this message.", diff --git a/website/common/locales/en/inventory.json b/website/common/locales/en/inventory.json new file mode 100644 index 0000000000..687a3bc180 --- /dev/null +++ b/website/common/locales/en/inventory.json @@ -0,0 +1,7 @@ +{ + "noItemsAvailableForType": "You have no <%= type %>.", + "foodItemType": "Food", + "eggsItemType": "Eggs", + "hatchingPotionsItemType": "Hatching Potions", + "specialItemType": "Special items" +} diff --git a/website/common/script/ops/sell.js b/website/common/script/ops/sell.js index 5c754cd521..226bb3f114 100644 --- a/website/common/script/ops/sell.js +++ b/website/common/script/ops/sell.js @@ -9,6 +9,7 @@ import { BadRequest, } from '../libs/errors'; +// @TODO: 'special' type throws NotAuthorized error const ACCEPTEDTYPES = ['eggs', 'hatchingPotions', 'food']; module.exports = function sell (user, req = {}) {