Triggers view

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
+
+
+   
+  
+
+
 

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() {
+  setTrigger() {
-    return Rules.find({});
+    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('rulesList');
+
+

client/components/rules/rules.styl

@@ -1,5 +1,7 @@
 .rules-list
+  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%);
+