Adding new help-modal dialog, use for explaining tag rule UI

app/assets/javascripts/admin/customers/directives/new_customer_dialog.js.coffee

@@ -1,4 +1,4 @@
-angular.module("admin.customers").directive 'newCustomerDialog', ($compile, $injector, $templateCache, $window, CurrentShop, Customers) ->
+angular.module("admin.customers").directive 'newCustomerDialog', ($compile, $injector, $templateCache, DialogDefaults, CurrentShop, Customers) ->
   restrict: 'A'
   scope: true
   link: (scope, element, attr) ->
@@ -27,16 +27,7 @@ angular.module("admin.customers").directive 'newCustomerDialog', ($compile, $inj
     template = $compile($templateCache.get('admin/new_customer_dialog.html'))(scope)
 
     # Set Dialog options
-    template.dialog
-      show: { effect: "fade", duration: 400 }
-      hide: { effect: "fade", duration: 300 }
-      autoOpen: false
-      resizable: false
-      width: $window.innerWidth * 0.4;
-      modal: true
-      open: (event, ui) ->
-        $('.ui-widget-overlay').bind 'click', ->
-          $(this).siblings('.ui-dialog').find('.ui-dialog-content').dialog('close')
+    template.dialog(DialogDefaults)
 
     # Link opening of dialog to click event on element
     element.bind 'click', (e) ->

app/assets/javascripts/admin/tag_rules/directives/new_rule_dialog.js.coffee

@@ -1,4 +1,4 @@
-angular.module("admin.tagRules").directive 'newTagRuleDialog', ($compile, $templateCache, $window) ->
+angular.module("admin.tagRules").directive 'newTagRuleDialog', ($compile, $templateCache, DialogDefaults) ->
   restrict: 'A'
   scope:
     tagGroup: '='
@@ -18,16 +18,7 @@ angular.module("admin.tagRules").directive 'newTagRuleDialog', ($compile, $templ
     scope.ruleType = scope.ruleTypes[0].id
 
     # Set Dialog options
-    template.dialog
-      show: { effect: "fade", duration: 400 }
-      hide: { effect: "fade", duration: 300 }
-      autoOpen: false
-      resizable: false
-      width: $window.innerWidth * 0.4;
-      modal: true
-      open: (event, ui) ->
-        $('.ui-widget-overlay').bind 'click', ->
-          $(this).siblings('.ui-dialog').find('.ui-dialog-content').dialog('close')
+    template.dialog(DialogDefaults)
 
     # Link opening of dialog to click event on element
     element.bind 'click', (e) ->

app/assets/javascripts/admin/utils/directives/help-modal.js.coffee

@@ -0,0 +1,17 @@
+angular.module("admin.utils").directive 'helpModal', ($compile, $templateCache, $window, DialogDefaults) ->
+  restrict: 'C'
+  scope:
+    template: '@'
+  link: (scope, element, attr) ->
+    # Compile modal template
+    template = $compile($templateCache.get(scope.template))(scope)
+
+    # Load Dialog Options
+    template.dialog(DialogDefaults)
+
+    # Link opening of dialog to click event on element
+    element.bind 'click', (e) -> template.dialog('open')
+
+    scope.close = ->
+      template.dialog('close')
+      return

app/assets/javascripts/admin/utils/services/dialog_defaults.js.coffee

@@ -0,0 +1,10 @@
+angular.module("admin.utils").factory "DialogDefaults", ($window) ->
+  show: { effect: "fade", duration: 400 }
+  hide: { effect: "fade", duration: 300 }
+  autoOpen: false
+  resizable: false
+  width: $window.innerWidth * 0.4;
+  modal: true
+  open: (event, ui) ->
+    $('.ui-widget-overlay').bind 'click', ->
+      $(this).siblings('.ui-dialog').find('.ui-dialog-content').dialog('close')

app/assets/javascripts/admin/utils/utils.js.coffee

@@ -1 +1 @@
-angular.module("admin.utils", ["ngSanitize"])
+angular.module("admin.utils", ["templates", "ngSanitize"])

app/assets/javascripts/templates/admin/modals/tag_rule_help.html.haml

@@ -0,0 +1,18 @@
+#tag-rule-help
+  .margin-bottom-30.text-center
+    .text-big Tag Rules
+
+  .margin-bottom-30
+    .text-normal Overview
+    %p Tag rules provide a way to describe which items are visible or otherwise to which customers. Items can be Shipping Methods, Payment Methods, Products and Order Cycles.
+
+  .margin-bottom-30
+    .text-normal 'By Default...' Rules
+    %p Default rules allow you to hide items so that they are not visible by default. This behaviour can then be overriden by non-default rules for customers with particular tags.
+
+  .margin-bottom-30
+    .text-normal 'Customers Tagged...' Rules
+    %p By creating rules related to a specific customer tag, you can override the default behaviour (whether it be to show or to hide items) for customers with the specified tag.
+
+  .text-center
+    %input.button.red.icon-plus{ type: 'button', value: 'Got it', ng: { click: 'close()' } }

app/assets/stylesheets/admin/dialog.css.scss

@@ -0,0 +1,5 @@
+.ui-dialog {
+  p {
+    line-height: 2;
+  }
+}

app/assets/stylesheets/admin/tag_rules.css.scss

@@ -35,6 +35,9 @@ tags-input {
       tr {
         td {
           border: none;
+          h5 {
+            display: inline-block;
+          }
         }
       }
     }

app/views/admin/enterprises/form/tag_rules/_default_rules.html.haml

@@ -6,7 +6,8 @@
       %tr
         %td
           %h5
-            By Default:
+            By Default
+          %i.text-big.icon-question-sign.help-modal{ template: 'admin/modals/tag_rule_help.html' }
   .no_rules{ ng: { show: "defaultTagGroup.rules.length == 0" } }
     No default rules apply yet
   .tag_rule{ ng: { repeat: "rule in defaultTagGroup.rules" } }