From b7a0a1db4c8feb7b87a3a3260194692da65f613d Mon Sep 17 00:00:00 2001
From: Steve Sutton <steve@gaslightmedia.com>
Date: Wed, 18 Sep 2019 12:21:58 -0400
Subject: [PATCH] Updating styles

Using UI elements for the form fields and using abide form script.
---
 classes/data/dataMessages.php |   2 +-
 models/admin/relay/index.php  |   5 ++
 views/admin/relay/edit.html   | 138 +++++++++++++++++++++-------------
 views/admin/relay/header.html |  16 ++--
 views/admin/relay/index.html  |   9 +--
 5 files changed, 105 insertions(+), 65 deletions(-)

diff --git a/classes/data/dataMessages.php b/classes/data/dataMessages.php
index 19de27e..85b2d39 100644
--- a/classes/data/dataMessages.php
+++ b/classes/data/dataMessages.php
@@ -136,7 +136,7 @@ class GlmDataMessages extends GlmDataAbstract
             'title' => array(
                 'field'    => 'title',
                 'type'     => 'text',
-                'required' => false,
+                'required' => true,
                 'use'      => 'a'
             ),
 
diff --git a/models/admin/relay/index.php b/models/admin/relay/index.php
index 30d6b06..55ca06a 100644
--- a/models/admin/relay/index.php
+++ b/models/admin/relay/index.php
@@ -87,6 +87,11 @@ class GlmMembersAdmin_relay_index extends GlmDataMessages
 
     public function modelAction($actionData = false)
     {
+
+        // Enqueue GLMA Foundation
+        wp_enqueue_style( 'Foundation6', GLM_MEMBERS_PLUGIN_URL . '/css/foundation-6.min.css' );
+        wp_enqueue_script( 'Foundation6', GLM_MEMBERS_PLUGIN_URL . '/js/foundation-6.min.js' );
+
         $view     = 'index.html';
         $messages = false;
         $message  = false;
diff --git a/views/admin/relay/edit.html b/views/admin/relay/edit.html
index b425696..af6d929 100644
--- a/views/admin/relay/edit.html
+++ b/views/admin/relay/edit.html
@@ -2,9 +2,26 @@
 
 <h3>Edit/Add Message</h3>
 
-{if $updated}<h2 class="glm-notice glm-flash-updated"> Message Updated! </h2>{/if}
+{if $updated}
+    <div class="callout success" data-closable>
+        Notification Updated!
+        <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
+            <span aria-hidden="true">&times;</span>
+        </button>
+    </div>
+{/if}
+
+{* Form Start *}
+{$ui = [
+    'id'               => 'edit-template',
+    'action'           => "{$thisUrl}?page={$thisPage}",
+    'method'           => 'post',
+    'file'             => false,
+    'validate'         => true,
+    'validateFocusMsg' => true
+]}
+{include file='ui/f6/form-start.html'}
 
-<form action="{$thisUrl}?page={$thisPage}" method="post">
     <input type="hidden" name="glm_action" value="index" />
 
     {if isset($message.fieldData.id) &&  $message.fieldData.id}
@@ -14,60 +31,77 @@
         <input type="hidden" name="option" value="insert" />
     {/if}
 
-    <table id="glm-table-message" class="glm-admin-table glm-event-table" style="width: 900px;">
-
-        <tr>
-            <th {if $message.fieldRequired.status} class="glm-required"}{/if}>Status</th>
-            <td {if $message.fieldFail.status}class="glm-form-bad-input" data-tabid="glm-status"{/if}>
-                <select name="status">
-                    <option value=""></option>
-                    {foreach $message.fieldData.status.list as $v}
-                        <option value="{$v.value}" {if $message.fieldData.status.value == $v.value} selected{/if}>{$v.name}</option>
-                    {/foreach}
-                </select>
-                {if $message.fieldFail.status}<p>{$message.fieldFail.status}</p>{/if}<br>
-            </td>
-        </tr>
-
-        <tr>
-            <th {if $message.fieldRequired.title} class="glm-required"}{/if}>Title</th>
-            <td {if $message.fieldFail.title}class="glm-form-bad-input" data-tabid="glm-title"{/if}>
-                <input type="text" name="title" value="{$message.fieldData.title|escape:'html'}" class="glm-form-text-input-medium">
-                {if $message.fieldFail.title}<p>{$message.fieldFail.title}</p>{/if}<br>
-            </td>
-        </tr>
-
-        <tr>
-            <th {if $message.fieldRequired.dashboard_message} class="glm-required"}{/if}>Dashboard Message</th>
-            <td {if $message.fieldFail.dashboard_message}class="glm-form-bad-input" data-tabid="glm-dashboard_message"{/if}>
-                {wp_editor( $message.fieldData.dashboard_message|escape:quotes, 'dashboard_message', [ 'wpautop' => false, 'textarea_name' => 'dashboard_message', 'editor_height' => 200, 'teeny' => true ])}
-                {if $message.fieldFail.dashboard_message}<p>{$message.fieldFail.dashboard_message}</p>{/if}<br>
-            </td>
-        </tr>
-
-        <tr>
-            <th {if $message.fieldRequired.message} class="glm-required"}{/if}>Message</th>
-            <td {if $message.fieldFail.message}class="glm-form-bad-input" data-tabid="glm-message"{/if}>
-                {wp_editor( $message.fieldData.message|escape:quotes, 'message', [ 'wpautop' => false, 'textarea_name' => 'message', 'editor_height' => 400, 'teeny' => true ])}
-                {if $message.fieldFail.message}<p>{$message.fieldFail.message}</p>{/if}<br>
-            </td>
-        </tr>
-
-        <tr>
-            <td colspan="2">
-                <input type="submit" class="button" value="Save" />
-            </td>
-        </tr>
-
-    </table>
+    {$data = $message}
+
+    <div class="grid-x grid-margin-x">
+
+        <fieldset class="fieldset cell small-12 medium-6">
+            <legend>Notification</legend>
+
+            {* Status *}
+            {$ui = [
+                'value'     => $data.fieldData.status.value,
+                'field'     => 'status',
+                'label'     => 'Status',
+                'list'      => $data.fieldData.status.list,
+                'l_label'   => 'name',
+                'l_value'   => 'value',
+                'l_blank'   => false,
+                'required'  => $data.fieldRequired.status,
+                'errorText' => 'Status is Required',
+                'dataError' => $data.fieldFail.status
+            ]}
+            {include file='ui/f6/select.html'}
+
+            {* Title *}
+            {$ui = [
+                'value'       => $data.fieldData.title,
+                'field'       => 'title',
+                'label'       => 'Title',
+                'required'    => $data.fieldRequired.title,
+                'errorText'   => 'Title is Required',
+                'dataError'   => $data.fieldFail.title
+            ]}
+            {include file='ui/f6/text.html'}
+
+            {* Dash Board Message *}
+            {$ui = [
+                'value'     => $data.fieldData.dashboard_message,
+                'field'     => 'dashboard_message',
+                'label'     => 'Dash Board Message',
+                'height'    => '200',
+                'teeny'     => true,
+                'required'  => $data.fieldRequired.dashboard_message,
+                'errorText' => 'Dash Board Message is Required',
+                'dataError' => $data.fieldFail.dashboard_message
+            ]}
+            {include file='ui/f6/editor.html'}
+
+            {* Message *}
+            {$ui = [
+                'value'     => $data.fieldData.message,
+                'field'     => 'message',
+                'label'     => 'Message',
+                'height'    => '400',
+                'teeny'     => true,
+                'required'  => $data.fieldRequired.message,
+                'errorText' => 'Message is Required',
+                'dataError' => $data.fieldFail.message
+            ]}
+            {include file='ui/f6/editor.html'}
+
+            <div class="cell small-12">
+                <input type="submit" class="button button-primary primary" value="Save" />
+            </div>
+
+        </fieldset>
+    </div>
+
 </form>
 
 <script>
  jQuery(document).ready(function($) {
-
- // Flash certain elements for a short time after display
- $(".glm-flash-updated").fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500);
-
+    $(document).foundation();
  });
 </script>
 
diff --git a/views/admin/relay/header.html b/views/admin/relay/header.html
index 283e008..c122cec 100644
--- a/views/admin/relay/header.html
+++ b/views/admin/relay/header.html
@@ -1,10 +1,14 @@
 <div class="wrap">
-    <h2>All Messages</h2>
-    <h2 class="nav-tab-wrapper">
-        <a
-            href="{$thisUrl}?page={$thisPage}"
-            class="nav-tab{if $thisAction==index} nav-tab-active{/if}">Message List</a>
-    </h2>
+    <h2>GLM Notifications</h2>
+
+    <div class="top-bar">
+        <div class="top-bar-left">
+            <ul class="menu">
+                <li class="is-active"><a href="{$thisUrl}?page={$thisPage}">Notifications List</a></li>
+            </ul>
+        </div>
+    </div>
+
     <div id="glm-admin-content-container">
 
 
diff --git a/views/admin/relay/index.html b/views/admin/relay/index.html
index 46c9d69..d835254 100644
--- a/views/admin/relay/index.html
+++ b/views/admin/relay/index.html
@@ -1,14 +1,11 @@
 {include file="admin/relay/header.html"}
 
-<h2>GLM Info</h2>
-
-
-<div style="display: block; float: right;">
-    <a class="button" href="{$thisUrl}?page={$thisPage}&glm_action=index&option=add">Add Message</a>
+<div style="display: block;">
+    <a class="button button-primary" href="{$thisUrl}?page={$thisPage}&glm_action=index&option=add">Add Notification</a>
 </div>
 
 
-<table class="wp-list-table striped glm-admin-table" style="width: 800px;">
+<table class="hover">
     <thead>
         <th> Edit </th>
         <th> Status </th>
-- 
2.17.1