added mail ui

src/client/ui/templates/mail/mail.js

@@ -0,0 +1,102 @@
+define([
+	'js/system/events',
+	'js/system/client',
+	'html!ui/templates/mail/template',
+	'css!ui/templates/mail/styles'
+], function(
+	events,
+	client,
+	template,
+	styles
+) {
+	return {
+		tpl: template,
+
+		centered: true,
+
+		modal: true,
+
+		item: null,
+
+		postRender: function() {
+			this.onEvent('onSetMailItem', this.onSetItem.bind(this));
+
+			this.find('.btnSend').on('click', this.onSendClick.bind(this));
+		},
+
+		onSendClick: function() {
+			if (!this.item)
+				return;
+
+			var recipient = this.find('.txtRecipient').val();
+			if (recipient.length == 0)
+				return;
+
+			client.request({
+				cpn: 'player',
+				method: 'performAction',
+				data: {
+					cpn: 'inventory',
+					method: 'mailItem',
+					data: {
+						itemId: this.item.id,
+						recipient: recipient
+					}
+				},
+				callback: this.onSend.bind(this)
+			});
+		},
+		onSend: function(res) {
+			if (res.length > 0) {
+				events.emit('onGetAnnouncement', {
+					msg: res,
+					type: 'failure'
+				});
+
+				return;
+			}
+
+			this.hide();
+		},
+
+		onSetItem: function(msg) {
+			this.toggle();
+			this.item = msg.item;
+
+			var item = msg.item;
+
+			var imgX = -item.sprite[0] * 64;
+			var imgY = -item.sprite[1] * 64;
+
+			var spritesheet = item.spritesheet || '../../../images/items.png';
+			if (item.material)
+				spritesheet = '../../../images/materials.png';
+			else if (item.quest)
+				spritesheet = '../../../images/questItems.png';
+
+			var el = this.find('.item');
+
+			el
+				.data('item', item)
+				/*.on('mousemove', this.onHover.bind(this, el, item))
+				.on('mouseleave', this.hideTooltip.bind(this, el, item))*/
+				.find('.icon')
+				.css('background', 'url(' + spritesheet + ') ' + imgX + 'px ' + imgY + 'px');
+
+
+			if (item.quantity) {
+				var quantityText = item.quantity;
+				el.find('.quantity').html(item.quantity);
+			}
+		},
+
+		toggle: function() {
+			this.shown = !this.el.is(':visible');
+
+			if (this.shown) {
+				this.show();
+			} else
+				this.hide();
+		}
+	}
+});

src/client/ui/templates/mail/styles.less

@@ -0,0 +1,113 @@
+@import "../../../css/ui.less";
+
+.uiMail {
+	display: none;
+
+	background-color: @blackB;
+	border: 5px solid #c0c3cf;
+	padding: 10px;
+
+	.top {
+		margin-bottom: 10px;
+
+		.heading {
+			color: @orange;
+			text-align: center;
+		}
+	}
+
+	.bottom {
+		.col {
+			float: left;
+			width: 80px;
+			height: 80px;
+
+			&:nth-child(2) {
+				width: 200px;
+				padding-top: 4px;
+
+				> * {
+					width: 100%;
+					height: 31px;
+				}
+
+				.btnSend {
+					height: 35px;
+					background-color: @blueB;
+					text-align: center;
+					padding-top: 12px;
+					color: @white;
+				}
+
+				input, input:-webkit-autofill {
+					box-shadow: 0 0 0px 1000px darken(@blackB, 15%) inset;
+					color: @white;
+					-webkit-text-fill-color: @white;
+					margin-bottom: 5px;
+					text-align: center;
+				}
+
+				/* We duplicate this for firefox which doesn't like the webkit selector */
+				input {
+				    box-shadow: 0 0 0px 1000px darken(@blackB, 15%) inset;
+					color: @white;
+					-webkit-text-fill-color: @white;
+					margin-bottom: 5px;
+					text-align: center;
+				}
+			}
+
+			.item {
+				width: 100%;
+				height: 100%;
+				float: left;
+				position: relative;
+				cursor: pointer;
+				box-sizing: border-box;
+
+				.quantity {
+					left: 6px;
+					bottom: 3px;
+					position: absolute;
+					color: @white;
+					filter:
+						drop-shadow(0px -2px 0px @blackD) 
+						drop-shadow(0px 2px 0px @blackD)
+						drop-shadow(2px 0px 0px @blackD) 
+						drop-shadow(-2px 0px 0px @blackD);
+
+					-moz-filter:
+						drop-shadow(0px -2px 0px @blackD) 
+						drop-shadow(0px 2px 0px @blackD)
+						drop-shadow(2px 0px 0px @blackD) 
+						drop-shadow(-2px 0px 0px @blackD);
+
+					&.red {
+						color: @red;
+					}
+				}
+
+				.icon {
+					width: 64px;
+					height: 64px;
+					position: absolute;
+					left: 8px;
+					top: 8px;
+					filter: 
+						brightness(100%)
+						drop-shadow(0px -4px 0px @blackD) 
+						drop-shadow(0px 4px 0px @blackD)
+						drop-shadow(4px 0px 0px @blackD) 
+						drop-shadow(-4px 0px 0px @blackD);
+
+					-moz-filter: 
+						brightness(100%)
+						drop-shadow(0px -4px 0px @blackD) 
+						drop-shadow(0px 4px 0px @blackD)
+						drop-shadow(4px 0px 0px @blackD) 
+						drop-shadow(-4px 0px 0px @blackD);
+				}
+			}
+		}
+	}
+}

src/client/ui/templates/mail/template.html

@@ -0,0 +1,17 @@
+<div class="uiMail">
+	<div class="top">
+		<div class="heading">mail item</div>
+	</div>
+	<div class="bottom">
+		<div class="col">
+			<div class="item">
+				<div class="icon"></div>
+				<div class="quantity"></div>
+			</div>
+		</div>
+		<div class="col">
+			<input class="txtRecipient textbox" type="text" placeholder="recipient">
+			<div class="btnSend">send</div>
+		</div>
+	</div>
+</div>