summaryrefslogtreecommitdiffstats
path: root/client/components/rules
diff options
context:
space:
mode:
Diffstat (limited to 'client/components/rules')
-rw-r--r--client/components/rules/rules.jade40
-rw-r--r--client/components/rules/rules.js34
-rw-r--r--client/components/rules/rules.styl106
3 files changed, 170 insertions, 10 deletions
diff --git a/client/components/rules/rules.jade b/client/components/rules/rules.jade
index 6b49b5a7..46c69a8d 100644
--- a/client/components/rules/rules.jade
+++ b/client/components/rules/rules.jade
@@ -1,10 +1,16 @@
template(name="rules")
+ if rulesListVar.get
+ +rulesList
+ else if rulesTriggerVar.get
+ +rulesTrigger
+
+template(name="rulesList")
.rules
h2
i.fa.fa-cutlery
| Project rules
- ul.rules-lists
+ ul.rules-list
each rules
li.rules-lists-item
p
@@ -24,4 +30,36 @@ template(name="rules")
| Add rule
input(type=text,placeholder="New rule name",id="ruleTitle")
+template(name="rulesTrigger")
+ h2
+ i.fa.fa-cutlery
+ | Rule "#{ruleName.get}"" - Add triggers
+ .triggers-content
+ .triggers-body
+ .triggers-side-menu
+ ul
+ li.active
+ i.fa.fa-columns
+ li
+ i.fa.fa-sticky-note
+ li
+ i.fa.fa-check
+ .triggers-main-body
+ +boardTriggers
+
+template(name="boardTriggers")
+ div.trigger-item
+ div.trigger-content
+ div.trigger-text
+ | When a card is
+ div.trigger-dropdown
+ select
+ div.trigger-button
+ i.fa.fa-plus
+
+
+
+
+
+
diff --git a/client/components/rules/rules.js b/client/components/rules/rules.js
index ed781f9a..9bca3460 100644
--- a/client/components/rules/rules.js
+++ b/client/components/rules/rules.js
@@ -1,12 +1,15 @@
-
BlazeComponent.extendComponent({
onCreated() {
- this.subscribe('allRules');
+ this.rulesListVar = new ReactiveVar(true);
+ this.rulesTriggerVar = new ReactiveVar(false);
+ this.ruleName = new ReactiveVar("");
},
- rules() {
- return Rules.find({});
+ setTrigger() {
+ this.rulesListVar.set(false);
+ this.rulesTriggerVar.set(true);
},
+
events() {
return [{'click .js-delete-rule'(event) {
const rule = this.currentData();
@@ -19,7 +22,26 @@ BlazeComponent.extendComponent({
const ruleTitle = this.find('#ruleTitle').value;
Rules.insert({title: ruleTitle});
this.find('#ruleTitle').value = "";
-
+ this.ruleName.set(ruleTitle)
+ this.setTrigger();
+
}}];
+ },
+
+}).register('rules');
+
+
+BlazeComponent.extendComponent({
+ onCreated() {
+ this.subscribe('allRules');
+ },
+
+ rules() {
+ return Rules.find({});
+ },
+ events() {
+ return [{}];
},
- }).register('rules');
+}).register('rulesList');
+
+
diff --git a/client/components/rules/rules.styl b/client/components/rules/rules.styl
index 2aab1b40..48a175a5 100644
--- a/client/components/rules/rules.styl
+++ b/client/components/rules/rules.styl
@@ -1,5 +1,7 @@
.rules-list
- overflow-y: scroll
+ overflow:hidden
+ overflow-y:scroll
+ max-height: 400px
.rules-lists-item
display: block
position: relative
@@ -19,7 +21,7 @@
.rules-add
display: block
overflow: auto
- margin-top: 25px
+ margin-top: 15px
margin-bottom: 5px
input
display: inline-block
@@ -30,5 +32,103 @@
display: inline-block
float: right
margin: auto
+.flex
+ display: -webkit-box
+ display: -moz-box
+ display: -webkit-flex
+ display: -moz-flex
+ display: -ms-flexbox
+ display: flex
+
+.triggers-content
+ color: #727479
+ background: #dedede
+ .triggers-body
+ display flex
+ padding-top 15px
+ height 100%
+
+ .triggers-side-menu
+ background-color: #f7f7f7;
+ border: 1px solid #f0f0f0;
+ border-radius: 4px;
+ box-shadow: inset -1px -1px 3px rgba(0,0,0,.05);
+
+ ul
+
+ li
+ margin: 0.1rem 0.2rem;
+ width:50px
+ height:50px
+ text-align:center
+ font-size: 25px
+ position: relative
+
+ i
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ box-shadow: none
+ transform: translate(-50%,-50%);
+
+
+ &.active
+ background #fff
+ box-shadow 0 1px 2px rgba(0,0,0,0.15);
+
+ &:hover
+ background #fff
+ box-shadow 0 1px 2px rgba(0,0,0,0.15);
+ a
+ @extends .flex
+ padding: 1rem 0 1rem 1rem
+ width: 100% - 5rem
+
+
+ span
+ font-size: 13px
+ .triggers-main-body
+ padding: 0.1em 1em
+ width:100%
+ .trigger-item
+ overflow:auto
+ padding:10px
+ height:30px
+ border-radius: 3px
+ position: relative
+ background-color: white
+ .trigger-content
+ position:absolute
+ top:50%
+ transform: translateY(-50%)
+ left:10px
+ .trigger-text
+ font-size: 16px
+ display:inline-block
+ .trigger-dropdown
+ display:inline-block
+ select
+ width:100px
+ height:30px
+ margin:0px
+ .trigger-button
+ position:absolute
+ top:50%
+ transform: translateY(-50%)
+ width:30px
+ height:30px
+ border: 1px solid #eee;
+ border-radius: 4px;
+ box-shadow: inset -1px -1px 3px rgba(0,0,0,.05);
+ text-align:center
+ font-size: 20px
+ right:10px
+ i
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ box-shadow: none
+ transform: translate(-50%,-50%);
+
+
- \ No newline at end of file