Merge branch 'recipient-form' into 'master'

Styling for communication form

See merge request !182

src/Handler/Utils/Communication.hs

@@ -158,6 +158,7 @@ commR CommunicationRoute{..} =  do
             checkedIdentBase <- newIdent
             let checkedCategories = Set.mapMonotonic (unEnumPosition . fst) . Set.filter (\k' -> Map.foldrWithKey (\k (_, checkState) -> (||) $ k == k' && checkState /= FormSuccess False && (checkState /= FormMissing || maybe True snd (chosenRecipients' !? k))) False state) $ Map.keysSet state
                 checkedIdent c = checkedIdentBase <> "-" <> toPathPiece c
+                hasContent c = not (null $ categoryIndices c) || Map.member (1, (EnumPosition c, 0)) addWdgts
                 categoryIndices c = Set.filter ((== c) . unEnumPosition . fst) $ review liveCoords liveliness
             $(widgetFile "widgets/communication/recipientLayout")
           miDelete :: MapLiveliness (EnumLiveliness RecipientCategory) ListLength -> (EnumPosition RecipientCategory, ListPosition) -> MaybeT (MForm Handler) (Map (EnumPosition RecipientCategory, ListPosition) (EnumPosition RecipientCategory, ListPosition))

static/js/utils/form.js

@@ -146,7 +146,7 @@
 
   var INTERACTIVE_FIELDSET_UTIL_NAME = 'interactiveFieldset';
   var INTERACTIVE_FIELDSET_UTIL_SELECTOR = '[uw-interactive-fieldset]';
-  var INTERACTIVE_FIELDSET_UTIL_TARGET_SELECTOR = '.interactive-fieldset--target';
+  var INTERACTIVE_FIELDSET_UTIL_TARGET_SELECTOR = '.interactive-fieldset__target';
 
   var INTERACTIVE_FIELDSET_INITIALIZED_CLASS = 'interactive-fieldset--initialized';
   var INTERACTIVE_FIELDSET_CHILD_SELECTOR = 'input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled])';
@@ -182,15 +182,10 @@
       }
       conditionalValue = element.dataset.conditionalValue;
 
-      if (element.matches(INTERACTIVE_FIELDSET_UTIL_TARGET_SELECTOR)) {
+      target = element.closest(INTERACTIVE_FIELDSET_UTIL_TARGET_SELECTOR);
+      if (!target || element.matches(INTERACTIVE_FIELDSET_UTIL_TARGET_SELECTOR)) {
         target = element;
       }
-      if (!target) {
-        target = element.closest(INTERACTIVE_FIELDSET_UTIL_TARGET_SELECTOR);
-      }
-      if (!target) {
-        throw new Error('Interactive Fieldset needs to be a target or have a target-ancestor!');
-      }
 
       childInputs = Array.from(element.querySelectorAll(INTERACTIVE_FIELDSET_CHILD_SELECTOR));
 
@@ -216,7 +211,7 @@
 
     function updateVisibility() {
       var active = matchesConditionalValue() && !conditionalInput.disabled;
-      
+
       target.classList.toggle('hidden', !active);
 
       childInputs.forEach(function(el) {

templates/widgets/aform/aform.hamlet

@@ -11,7 +11,7 @@ $case formLayout
         <h3 .form-section-title>
           ^{fvLabel view}
       $else
-        <div .form-group .interactive-fieldset--target :fvRequired view:.form-group--required :not $ fvRequired view:.form-group--optional :isJust $ fvErrors view:.form-group--has-error>
+        <div .form-group .interactive-fieldset__target :fvRequired view:.form-group--required :not $ fvRequired view:.form-group--optional :isJust $ fvErrors view:.form-group--has-error>
           $if not (Blaze.null $ fvLabel view)
             <label .form-group-label for=#{fvId view}>
               <span .form-group-label__caption>

templates/widgets/communication/recipientAdd.hamlet

@@ -1,5 +1,5 @@
 $newline never
-<div .category__entry-add>
+<div .recipient-category__option-add>
   #{csrf}
   ^{fvInput addView}
   ^{fvInput submitView}

templates/widgets/communication/recipientEmail.hamlet

@@ -1,7 +1,6 @@
 $newline never
-<div .category__option>
+<div .recipient-category__option>
   #{csrf}
   ^{fvInput tickView}
-  <label for=#{fvId tickView}>
-    <span style="font-family: monospace">
-      #{email}
+  <label .recipient-category__option-label for=#{fvId tickView}>
+    #{email}

templates/widgets/communication/recipientLayout.hamlet

@@ -1,13 +1,14 @@
 $newline never
 $forall category <- activeCategories
-  <div .category>
+  <div .recipient-category>
     <input type=checkbox id=#{checkedIdent category} :elem category checkedCategories:checked>
-    <label for=#{checkedIdent category}>
+    <label .recipient-category__label for=#{checkedIdent category}>
       _{category}
 
-    <fieldset uw-interactive-fieldset data-conditional-input=#{checkedIdent category} .interactive-fieldset--target>
-      $forall optIx <- categoryIndices category
-        ^{cellWdgts ! optIx}
+    $if hasContent category
+      <fieldset .recipient-category__fieldset uw-interactive-fieldset .interactive-fieldset__target data-conditional-input=#{checkedIdent category}>
+        $forall optIx <- categoryIndices category
+          ^{cellWdgts ! optIx}
 
-      $maybe addWdgt <- addWdgts !? (1, (EnumPosition category, 0))
-        ^{addWdgt}
+        $maybe addWdgt <- addWdgts !? (1, (EnumPosition category, 0))
+          ^{addWdgt}

templates/widgets/communication/recipientLayout.lucius

@@ -0,0 +1,44 @@
+.recipient-category {
+  max-width: 400px;
+  padding: 3px 0;
+
+  &:not(:last-child) {
+    margin-bottom: 7px;
+  }
+
+  &:not(:first-child) {
+    margin-top: 7px;
+  }
+}
+
+.recipient-category__option {
+  display: flex;
+
+  &:not(:last-child) {
+    margin-bottom: 10px;
+  }
+}
+
+.recipient-category__label,
+.recipient-category__option-label {
+  margin-left: 15px;
+  vertical-align: top;
+}
+
+.recipient-category__fieldset {
+  margin: 7px 0 5px 9px;
+  padding: 5px 0 10px;
+  border-left: 1px solid #bcbcbc;
+  padding-left: 16px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.recipient-category__option-add {
+  display: flex;
+
+  .btn-mass-input-add {
+    margin-left: 10px;
+    padding: 10px 0;
+  }
+}

templates/widgets/communication/recipientName.hamlet

@@ -1,6 +1,6 @@
 $newline never
-<div .category__option>
+<div .recipient-category__option>
   #{csrf}
   ^{fvInput tickView}
-  <label for=#{fvId tickView}>
+  <label .recipient-category__option-label for=#{fvId tickView}>
     #{nameHtml userDisplayName userSurname}