Skip to content

Commit

Permalink
Added moving item dialog, that can't actually be triggered
Browse files Browse the repository at this point in the history
  • Loading branch information
ThaumRystra committed Jun 17, 2015
1 parent 314ce85 commit 248ab9b
Show file tree
Hide file tree
Showing 9 changed files with 145 additions and 18 deletions.
14 changes: 14 additions & 0 deletions rpg-docs/client/views/character/inventory/inventory.js
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,20 @@ Template.inventory.events({
heroId: itemId,
});
},
"hold .inventoryItem": function(event, instance) {
var itemId = this._id;
var charId = Template.parentData()._id;
var containerId = this.parent.id;
GlobalUI.showDialog({
template: "moveItemDialog",
data: {
charId: charId,
itemId: itemId,
containerId: containerId,
},
heading: "Move " + this.pluralName(),
});
},
"tap .incrementButtons": function(event) {
event.stopPropagation();
},
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
html /deep/ .moveItemDialog paper-tabs::shadow #selectionBar {
background-color: #D50000;
}

html /deep/ .moveItemDialog paper-tab::shadow #ink {
color: #D50000;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<template name="moveItemDialog">
<div class="moveItemDialog">
<paper-tabs selected="{{selectedTab}}">
<paper-tab name="containers"
class="clickable">
Containers
</paper-tab>
<paper-tab name="characters"
class="clickable">
Characters
</paper-tab>
</paper-tabs>
<core-animated-pages selected="{{selectedTab}}"
transitions="slide-from-right"
style="width: 250px;
height: 200px;
overflow-y: auto;
overflow-x: hidden;">
<section name="containers">
<core-menu id="containerMenu" style="margin: 0;">
{{#each containers}}
<paper-item name={{_id}}
layout horizontal center>
<core-icon icon="image:brightness-1"
style="color: {{hexColor color}};
margin-right: 16px;">
</core-icon>
<div>{{name}}</div>
</paper-item>
{{/each}}
</core-menu>
</section>
<section name="characters">
<core-menu id="characterMenu" style="margin: 0;">
{{#each characters}}
<paper-item name={{_id}}
layout horizontal center>
<div class="item small">
{{name}}
</div>
</paper-item>
{{/each}}
</core-menu>
</section>
</core-animated-pages>
</div>
<paper-button id="cancelButton" affirmative> Cancel </paper-button>
<paper-button id="moveButton" affirmative> Move </paper-button>
</template>
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
Template.moveItemDialog.onCreated(function() {
Session.setDefault("moveItemDialogTab", "containers");
});

Template.moveItemDialog.helpers({
selectedTab: function() {
return Session.get("moveItemDialogTab");
},
characters: function() {
var userId = Meteor.userId();
return Characters.find(
{
$or: [
{readers: userId},
{writers: userId},
{owner: userId},
],
_id: {$ne: this.charId},
},
{fields: {name: 1}}
);
},
containers: function(){
return Containers.find(
{
charId: this.charId,
_id: {$ne: this.containerId},
},
{
fields: {color: 1, name: 1},
sort: {color: 1, name: 1},
}
);
},
});

Template.moveItemDialog.events({
"tap paper-tab": function(event) {
Session.set("moveItemDialogTab", event.currentTarget.getAttribute("name"));
},
"tap #moveButton": function(event, instance) {
var tab = Session.get("moveItemDialogTab");
if (tab === "containers"){
var containerId = instance.find("#containerMenu").selected;
if (!containerId) throw "no menu selection";
Meteor.call("moveItemToContainer", this.itemId, containerId);
} else if (tab === "characters"){
var characterId = instance.find("#characterMenu").selected;
if (!characterId) throw "no menu selection";
Meteor.call("moveItemToCharacter", this.itemId, characterId);
} else {
throw "Move item dialog tab is not set to containers or character," +
" it is set to " + tab;
}
},
});
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.healthCard paper-slider{
.healthCard paper-diff-slider{
width: 100%;
margin-right: 8px;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,24 @@
</div>
<div class="right" flex layout vertical center-justified style="min-width: 180px;">
<div layout horizontal>
<paper-slider id="hitPointSlider"
<paper-diff-slider id="hitPointSlider"
value={{attributeValue "hitPoints"}}
max={{attributeBase "hitPoints"}}
editable pin
role="slider"
></paper-slider>
></paper-diff-slider>
</div>
{{#each tempHitPoints}}
<div>
{{name}}
<div layout horizontal>
<paper-slider class="tempHitPointSlider"
<paper-diff-slider class="tempHitPointSlider"
value={{left}}
max={{maximum}}
editable pin
role="slider"
flex
></paper-slider>
></paper-diff-slider>
{{#unless left}}{{#unless deleteOnZero}}
<paper-icon-button class="deleteTHP" icon="delete"></paper-icon-button>
{{/unless}}{{/unless}}
Expand Down
3 changes: 2 additions & 1 deletion rpg-docs/client/views/layout/imports.html
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,12 @@
<link rel="import" href="/components/paper-radio-group/paper-radio-group.html">
<link rel="import" href="/components/paper-shadow/paper-shadow.html">
<link rel="import" href="/components/paper-spinner/paper-spinner.html">
<link rel="import" href="/components/paper-slider/paper-slider.html">
<link rel="import" href="/components/paper-tabs/paper-tabs.html">
<link rel="import" href="/components/paper-toast/paper-toast.html">
<link rel="import" href="/components/paper-toggle-button/paper-toggle-button.html">

<!--custom components-->
<link rel="import" href="/custom_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="/custom_components/paper-slider-diff/paper-slider.html">
<link rel="import" href="/custom_components/paper-diff-slider/paper-diff-slider.html">
<link rel="import" href="/custom_components/swipe-detect/swipe-detect.html">
Original file line number Diff line number Diff line change
Expand Up @@ -8,55 +8,55 @@
-->

<!--
`paper-slider` allows user to select a value from a range of values by
`paper-diff-slider` allows user to select a value from a range of values by
moving the slider thumb. The interactive nature of the slider makes it a
great choice for settings that reflect intensity levels, such as volume,
brightness, or color saturation.
Example:
<paper-slider></paper-slider>
<paper-diff-slider></paper-diff-slider>
Use `min` and `max` to specify the slider range. Default is 0 to 100.
Example:
<paper-slider min="10" max="200" value="110"></paper-slider>
<paper-diff-slider min="10" max="200" value="110"></paper-diff-slider>
Styling slider:
To change the slider progress bar color:
paper-slider::shadow #sliderBar::shadow #activeProgress {
paper-diff-slider::shadow #sliderBar::shadow #activeProgress {
background-color: #0f9d58;
}
To change the slider knob color:
paper-slider::shadow #sliderKnobInner {
paper-diff-slider::shadow #sliderKnobInner {
background-color: #0f9d58;
}
To change the slider pin color:
paper-slider::shadow #sliderKnobInner::before {
paper-diff-slider::shadow #sliderKnobInner::before {
background-color: #0f9d58;
}
To change the slider pin's font color:
paper-slider::shadow #sliderKnob > #sliderKnobInner::after {
paper-diff-slider::shadow #sliderKnob > #sliderKnobInner::after {
color: #0f9d58
}
To change the slider secondary progress bar color:
paper-slider::shadow #sliderBar::shadow #secondaryProgress {
paper-diff-slider::shadow #sliderBar::shadow #secondaryProgress {
background-color: #0f9d58;
}
@group Paper Elements
@element paper-slider
@element paper-diff-slider
@extends core-range
@homepage github.io
-->
Expand All @@ -65,10 +65,10 @@
<link rel="import" href="../../components/paper-progress/paper-progress.html">
<link rel="import" href="../../components/paper-input/paper-input.html">

<polymer-element name="paper-slider" extends="core-range" attributes="snaps pin disabled secondaryProgress editable immediateValue" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100">
<polymer-element name="paper-diff-slider" extends="core-range" attributes="snaps pin disabled secondaryProgress editable immediateValue" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100">
<template>

<link rel="stylesheet" href="paper-slider.css">
<link rel="stylesheet" href="paper-diff-slider.css">

<template if="{{!disabled}}">
<core-a11y-keys target="{{}}" keys="left down pagedown home" on-keys-pressed="{{decrementKey}}"></core-a11y-keys>
Expand Down Expand Up @@ -109,7 +109,7 @@
</template>
<script>

Polymer('paper-slider', {
Polymer('paper-diff-slider', {

/**
* Fired when the slider's value changes.
Expand Down

0 comments on commit 248ab9b

Please sign in to comment.