Skip to content

Commit

Permalink
upgrade wip 1
Browse files Browse the repository at this point in the history
  • Loading branch information
@matejc
matejc committed Jul 28, 2015
1 parent ac934a2 commit e447361
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 58 deletions.
11 changes: 4 additions & 7 deletions bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,10 @@
"tests"
],
"dependencies": {
"polymer": "Polymer/polymer#0.5.1",
"core-elements": "Polymer/core-elements#0.5.1",
"core-signals": "Polymer/core-signals#0.5.1",
"paper-elements": "Polymer/paper-elements#0.5.1",
"core-animation": "Polymer/core-animation#0.5.1",
"underscore": "underscore#1.7.0",
"jQuery": "~2.1.1",
"d3": "~3.4.13"
"polymer": "Polymer/polymer#1.0.6",
"paper-elements": "PolymerElements/paper-elements#1.0.2",
"iron-elements": "PolymerElements/iron-elements#1.0.3",
"neon-elements": "PolymerElements/neon-elements#1.0.0"
}
}
67 changes: 35 additions & 32 deletions src/chooser.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@
<title>NixUI</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../bower_components/webcomponentsjs/webcomponents.min.js"></script>
<script src="../bower_components/underscore/underscore-min.js"></script>
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-ripple/paper-ripple.html">
<link rel="import" href="../bower_components/core-animation/core-animation.html">
<link rel="import" href="../bower_components/core-signals/core-signals.html">
<link rel="import" href="../bower_components/neon-animation/neon-animation.html">
<link rel="import" href="../bower_components/iron-signals/iron-signals.html">

<link rel="import" href="./data.html">

Expand All @@ -22,7 +23,7 @@
}
</style>

<polymer-element name="nixos-logo">
<dom-module name="nixos-logo">
<template>
<img id="logo" src="../static/nixos.png"></img>
<style>
Expand All @@ -38,19 +39,19 @@
<script>
(function() {
Polymer({
is: 'nixos-logo',
ready: function() {
var elem = this.$.logo;
var anim = new Animation(elem, [{opacity: 0, transform: "rotate(0deg)"}, {opacity: 0.75, transform: "rotate(360deg)"}], {fill: "forwards", duration: 750, iterations: 1, easing: "ease", delay: 500});
var player = document.timeline.play(anim);
elem.animate([{opacity: 0, transform: "rotate(0deg)"}, {opacity: 0.75, transform: "rotate(360deg)"}], {fill: "forwards", duration: 750, iterations: 1, easing: "ease", delay: 500});
}
});
})();
</script>
</polymer-element>
</dom-module>

<polymer-element name="nixui-chooser">
<dom-module name="nixui-chooser">
<template>
<core-signals on-core-signal-setconfiguration="{{setConfiguration}}"></core-signals>
<iron-signal on-iron-signal-setconfiguration="{{setConfiguration}}"></iron-signal>
<style>
#actionlist {
width: 200px;
Expand Down Expand Up @@ -122,30 +123,30 @@
<div id="wrapper" layout horizontal>
<div id="actionlist" center-justified layout vertical>
<div class="label">Select action:</div>
<template repeat="{{ a in actions }}">
<div class="item" on-click="{{selectaction}}" on-keyup="{{selectaction}}" data-url="{{a.url}}" data-id="{{a.id}}" tabindex="1">
<template is="dom-repeat" items="{{actions}}" as="a">
<div class="item" on-click="selectaction" on-keyup="selectaction" actionid="{{a.id}}" tabindex="1">
<span>{{a.label}}</span>
<paper-ripple fit/>
</div>
</template>
</div>
<div id="profilelist" center-justified layout vertical>
<div class="label">Select profile:</div>
<template repeat="{{ p in profiles }}">
<div class="item" on-click="{{selectprofile}}" on-keyup="{{selectprofile}}" data-id="{{p.id}}" tabindex="1">
<template is="dom-repeat" items="{{ profiles }}" as="p">
<div class="item" on-click="selectprofile" on-keyup="selectprofile" data-id="{{p.id}}" tabindex="1">
<span class="{{ {default: p.profile} | tokenList}}">{{p.name}}</span>
<paper-ripple fit/>
</div>
</template>
</div>
<div id="configlist" center-justified layout vertical>
<div class="label">Select configuration:</div>
<div class="item" on-click="{{selectconfig}}" on-keyup="{{selectconfig}}" data-id="-1" tabindex="1">
<div class="item" on-click="selectconfig" on-keyup="selectconfig" data-id="-1" tabindex="1">
<span>Empty</span>
<paper-ripple fit/>
</div>
<template repeat="{{ c in configurations }}">
<div class="item" on-click="{{selectconfig}}" on-keyup="{{selectconfig}}" data-id="{{c._id}}" tabindex="1">
<template is="dom-repeat" items="{{ configurations }}" as="c">
<div class="item" on-click="selectconfig" on-keyup="selectconfig" data-id="{{c._id}}" tabindex="1">
<span>{{c.path}}</span>
<paper-ripple fit/>
</div>
Expand All @@ -154,7 +155,7 @@
</div>
</div>
<div id="footer">
NIX_PATH: {{nixPath}}
NIX_PATH: <span>{{nixPath}}</span>
</div>

<div id="version">{{nixuiVersion}}</div>
Expand All @@ -166,7 +167,8 @@
</template>
<script>
(function() {
Polymer('nixui-chooser', {
Polymer({
is: 'nixui-chooser',
ready: function() {
this.nixPath = process.env.NIX_PATH;
this.nixuiVersion = this.$.meta.all().package.version;
Expand All @@ -184,25 +186,25 @@
this.configurations = cfgs;
}.bind(this));
},
selectaction: function(e, detail, sender) {
selectaction: function(e) {
if (e.keyCode == 13 || e.keyCode == 0) {

if (this.animating === true) {
return;
}

var item = sender;
var item = e.target.parentNode;

if (item) {
items = this.shadowRoot.querySelectorAll(".item");
items = Polymer.dom(this.root).querySelectorAll(".item");
for (var i in items) {
items[i].className = item.className.replace( /(?:^|\s)item_selected(?!\S)/g , '' )
items[i].className = items[i].className.replace( /(?:^|\s)item_selected(?!\S)/g , '' )
}
item.className += " item_selected";
this.currentActionURL = item.getAttribute("data-url");
this.currentActionId = item.getAttribute("data-id");
var action = _.findWhere(this.actions, {id: item.actionid});
this.currentActionURL = action.url;

switch (this.currentActionId) {
switch (action.id) {
case '0':
this.listAnimationShow(this.$.profilelist);
break;
Expand Down Expand Up @@ -235,9 +237,9 @@
generateListAnimation: function(elem, show) {
var anim;
if (show) {
anim = new Animation(elem, [{opacity: "0", 'margin-left': '400px', display: 'none'}, {opacity: "1", 'margin-left': '100px', display: 'flex'}], {fill: "forwards", duration: 200, easing: "ease"});
anim = new KeyframeEffect(elem, [{opacity: "0", 'margin-left': '400px', display: 'none'}, {opacity: "1", 'margin-left': '100px', display: 'flex'}], {fill: "forwards", duration: 200, easing: "ease"});
} else {
anim = new Animation(elem, [{opacity: "1", 'margin-left': '100px', display: 'flex'}, {opacity: "0", 'margin-left': '400px', display: 'none'}], {fill: "forwards", duration: 200, easing: "ease"});
anim = new KeyframeEffect(elem, [{opacity: "1", 'margin-left': '100px', display: 'flex'}, {opacity: "0", 'margin-left': '400px', display: 'none'}], {fill: "forwards", duration: 200, easing: "ease"});
}
return anim;
},
Expand All @@ -255,7 +257,7 @@

sequence.push(this.generateListAnimation(elem, true));

var anim = new AnimationSequence(sequence);
var anim = new SequenceEffect(sequence);

var player = document.timeline.play(anim);
player.onfinish = function() {
Expand All @@ -272,9 +274,9 @@
});
})();
</script>
</polymer-element>
</dom-module>

<polymer-element name="configurations-input">
<dom-module name="configurations-input">
<template>
<style type="text/css">
#configurationsfield {
Expand All @@ -295,13 +297,14 @@
</template>
<script>
(function() {
Polymer('configurations-input', {
Polymer({
is: 'configurations-input',
ready: function() {
this.value = "";
},
keyUpHandler: function(event, detail, sender) {
if (event.keyCode == 13) {
this.fire('core-signal', {
this.fire('iron-signal', {
name: "setconfiguration",
data: this.value
});
Expand All @@ -310,7 +313,7 @@
});
})();
</script>
</polymer-element>
</dom-module>

</head>
<body>
Expand Down
45 changes: 26 additions & 19 deletions src/data.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<polymer-element name="nixui-profiles">
<dom-module name="nixui-profiles">
<template>
</template>
<script>
(function() {
Polymer('nixui-profiles', {
Polymer({
is: 'nixui-profiles',
ready: function() {
this.profiles = require("./data.js").profiles;
},
Expand All @@ -22,14 +23,15 @@
});
})();
</script>
</polymer-element>
</dom-module>

<polymer-element name="nixui-configurations">
<dom-module name="nixui-configurations">
<template>
</template>
<script>
(function() {
Polymer('nixui-configurations', {
Polymer({
is: 'nixui-configurations',
ready: function() {
this.configurations = require("./data.js").configurations;
},
Expand All @@ -51,14 +53,15 @@
});
})();
</script>
</polymer-element>
</dom-module>

<polymer-element name="nixui-configs">
<dom-module name="nixui-configs">
<template>
</template>
<script>
(function() {
Polymer('nixui-configs', {
Polymer({
is: 'nixui-configs',
ready: function() {
this.configs = require("./data.js").configs;
},
Expand All @@ -83,14 +86,15 @@
});
})();
</script>
</polymer-element>
</dom-module>

<polymer-element name="nixui-packages">
<dom-module name="nixui-packages">
<template>
</template>
<script>
(function() {
Polymer('nixui-packages', {
Polymer({
is: 'nixui-packages',
ready: function() {
this.packages = require("./data.js").packages;
// this.init();
Expand Down Expand Up @@ -122,14 +126,15 @@
});
})();
</script>
</polymer-element>
</dom-module>

<polymer-element name="nixui-markeds">
<dom-module name="nixui-markeds">
<template>
</template>
<script>
(function() {
Polymer('nixui-markeds', {
Polymer({
is: 'nixui-markeds',
ready: function() {
this.markeds = require("./data.js").markeds;
this.init();
Expand Down Expand Up @@ -167,14 +172,15 @@
});
})();
</script>
</polymer-element>
</dom-module>

<polymer-element name="nixui-actions">
<dom-module name="nixui-actions">
<template>
</template>
<script>
(function() {
Polymer({
is: 'nixui-actions',
ready: function() {
this.actions = require("./data.js").actions;
this.actions();
Expand All @@ -188,14 +194,15 @@
});
})();
</script>
</polymer-element>
</dom-module>

<polymer-element name="nixui-meta">
<dom-module name="nixui-meta">
<template>
</template>
<script>
(function() {
Polymer({
is: 'nixui-meta',
ready: function() {
this.meta = require("./data.js").meta;
this.meta();
Expand All @@ -206,4 +213,4 @@
});
})();
</script>
</polymer-element>
</dom-module>

0 comments on commit e447361

Please sign in to comment.