From 0e69002697b628cae0ac11af1612137f3e1f5612 Mon Sep 17 00:00:00 2001 From: Steve Sutton Date: Thu, 1 Aug 2019 12:54:14 -0400 Subject: [PATCH] Updates to ui elements Adding some of the ui elements that were setup for serverstats. Adding Date. --- views/ui/f6/LayoutNotes.txt | 30 ++++++++++ views/ui/f6/date.html | 57 +++++++++++++++++++ views/ui/f6/editor.html | 82 +++++++++++++++++----------- views/ui/f6/form-start.html | 7 ++- views/ui/f6/grid-start.html | 19 ++++++- views/ui/f6/miscContainer-end.html | 8 +++ views/ui/f6/miscContainer-start.html | 7 +++ views/ui/f6/section-end.html | 8 +++ views/ui/f6/section-start.html | 24 ++++++++ views/ui/f6/text-line.html | 15 +++++ 10 files changed, 221 insertions(+), 36 deletions(-) create mode 100644 views/ui/f6/LayoutNotes.txt create mode 100644 views/ui/f6/date.html create mode 100644 views/ui/f6/miscContainer-end.html create mode 100644 views/ui/f6/miscContainer-start.html create mode 100644 views/ui/f6/section-end.html create mode 100644 views/ui/f6/section-start.html create mode 100644 views/ui/f6/text-line.html diff --git a/views/ui/f6/LayoutNotes.txt b/views/ui/f6/LayoutNotes.txt new file mode 100644 index 00000000..c7de52e2 --- /dev/null +++ b/views/ui/f6/LayoutNotes.txt @@ -0,0 +1,30 @@ +Layout Notes for how ui components and Foundation classes all fit together. +Also includes standard classes for various divs. + + +grid-start.html
+ .
+ +something.html
+ . (some content) + .
+ +section-start.html
+ .
+ .
+ .

title

+ .
+ .
+ .
+ +field-something.html
+ . (some field label, input, ...) + .
+ +section-end.html
+
+ .
+ .
+ +grid-end.html
+ .
\ No newline at end of file diff --git a/views/ui/f6/date.html b/views/ui/f6/date.html new file mode 100644 index 00000000..d78f12ed --- /dev/null +++ b/views/ui/f6/date.html @@ -0,0 +1,57 @@ +{* + Foundation 6 UI - Text Input Field + + Do not list parameters if they're false. (We're not checking for false). + + {$ui = [ + 'field' => string Required Name of field that holds the data or formData array, + 'value' => string Required Value of this text element + 'label' => string Required Label text for this field, + 'pattern' => string Pattern attribute ( number, etc. ) + 'placeholder' => string Placeholder string, + 'required' => boolean True if required, + 'maxWidth' => string Size of input field using standard style notation ('900px', '15rem', ...), + 'maxLength' => integer Maximum number of characters that may be entered, + 'helpText' => string Help text for this input, + 'errorText' => string Error text that appears when the field doesn't validate, + 'dataError' => string Error from data Abstract Class + 'tip' => string String to display when hover over question mark on right + 'class' => string Additional Classes for the main cell div + 'inputClass' => string Additional Classes for the input + ]} +*} +
+ {if (!isset($ui.value) && !isset($ui.field)) || !isset($ui.label)} + Field Error: Required field information not supplied! + {else} +
+
+ {if isset($ui.tip)} + ? + {/if} + +
+
+ +
+
+ {if !empty($ui.dataError)}{$ui.dataError}{/if} + {if !empty($ui.errorText)}{$ui.errorText}{/if} + {if !empty($ui.helpText)}{$ui.helpText}
{/if} +
+
+ {/if} +
diff --git a/views/ui/f6/editor.html b/views/ui/f6/editor.html index 4204c434..e8ad5b05 100644 --- a/views/ui/f6/editor.html +++ b/views/ui/f6/editor.html @@ -1,48 +1,64 @@ {* - Foundation 6 Editor - All parameters are required. - Do not list parameters if they're false. (We're not checking for false) - If supplying field data (formData) from the data abstract, supply a - name of that in the "field" parameter. Also then certain parameters like - "required" will be supplied by the abstract rather than in a parameter in - this array. + Foundation 6 UI - Text Editor {$ui = [ - 'value' => string Value of the element - 'field' => string Name of field that holds the data if not using data abstract, - 'label' => string Label text for this field, - 'height' => integer Height in px, - 'media' => boolean Enable Media Button, + 'field' => string Required Name of field that holds the data if not using data abstract, + 'value' => string Required Value of the element + 'label' => string Required Label text for this field, + 'height' => integer Required Height in px (overrides rows - don't use with rows), + 'rows' => integer Height in rows (don't ues height with this option), + 'media' => boolean Enable "Add Media" Button, + 'quicktags' => boolean Enable desired tag buttons that are available in "Text" edit mode, + For full list use: ['buttons' => 'link,strong,code,del,fullscreen,em,li,img,ol,block,ins,more,ul,spell,close'] + Default (false) dissables HTML/TEXT tabs, true enables all. + 'teeny' => boolean Use limited version of editor if true. 'required' => boolean True if required, 'helpText' => string Help text for this input, - 'errortext' => string Error text that appears when the field doesn't validate, + 'errorText' => string Error text that appears when the field doesn't validate, 'dataError' => string Error from data Abstract Class + 'tip' => string Tool Tip text ]} *} -
- - {if isset($ui.value) && $ui.value} - {$textAreaContent = $ui.value} +
+ {if isset($ui.tip)} + ? + {/if} + + {if !empty($ui.value)} + {$glm_ui_param_textAreaContent = $ui.value} {else} - {$textAreaContent = ''} + {$glm_ui_param_textAreaContent = ''} {/if} - {$textAreaName = $ui.field} - {if isset($ui.height)} {$height = $ui.height} {else} {$height = 250} {/if} - {if isset($ui.media)} {$media_buttons = $ui.media} {else} {$media_buttons = false} {/if} - {if isset($ui.quicktags)} {$quicktags = $ui.quicktags} {else} {$quicktags = false} {/if} - {$settings = [ - 'textarea_name' => $textAreaName, - 'editor_height' => $height, - 'media_buttons' => $media_buttons + {$glm_ui_param_textAreaName = $ui.field} + {$glm_ui_param_height = false} + {$glm_ui_param_rows = false} + {if !empty($ui.height)} + {$glm_ui_param_height = $ui.height} + {else} + {if !empty($ui.rows)} + {$glm_ui_param_rows = $ui.rows} + {/if} + {/if} + {if !empty($ui.media)} {$glm_ui_param_media_buttons = $ui.media} {else} {$glm_ui_param_media_buttons = false} {/if} + {if !empty($ui.quicktags)} {$glm_ui_param_quicktags = $ui.quicktags} {else} {$glm_ui_param_quicktags = false} {/if} + {if !empty($ui.teeny)} {$glm_ui_param_teeny = $ui.teeny} {else} {$glm_ui_param_teeny = false} {/if} + {$glm_ui_param_settings = [ + 'textarea_name' => $glm_ui_param_textAreaName, + 'editor_height' => $glm_ui_param_height, + 'textarea_rows' => $glm_ui_param_rows, + 'media_buttons' => $glm_ui_param_media_buttons, + 'quicktags' => $glm_ui_param_quicktags, + 'teeny' => $glm_ui_param_teeny ]} +
+ {if !empty($ui.dataError)}{$ui.dataError}{/if} + {if !empty($ui.helpText)}{$ui.helpText}{/if} + {if !empty($ui.errorText)}{$ui.errorText}{/if} +
{wp_editor( - $textAreaContent, - $textAreaName, - $settings + $glm_ui_param_textAreaContent, + $glm_ui_param_textAreaName, + $glm_ui_param_settings )} -
- {if $ui.dataError}{$ui.dataError}{/if} - {if isset($ui.helpText)}

{$ui.helpText}

{/if} - {if isset($ui.errorText)}{$ui.errorText}{/if}
diff --git a/views/ui/f6/form-start.html b/views/ui/f6/form-start.html index 72b07b5e..89b2559a 100644 --- a/views/ui/f6/form-start.html +++ b/views/ui/f6/form-start.html @@ -1,6 +1,12 @@ {* Foundation 6 UI - Form Start + WARNING: There may be a problem with using Form Start after Grid Start. Was seeing improper spacing. + + Found that using ".position().top -10" was better since it places the top of the window 10px above the + box containing the validate message while using ".offset()" caused it to position in the middle of the + validate message. + {$ui = [ 'action' => string Required URL 'method' => string Required Method "post" or "get" @@ -12,7 +18,6 @@ 'validateMessage' => string Message to show for a validation error, Defaults to "There are some errors in your form." ]} *} -
string True if no sections should wrap to the right, @@ -8,6 +8,7 @@ ]} *} + {$glm_f6_ui_wrapsize = 6 scope="global"} {if isset($ui.nowrap) && $ui.nowrap} {$glm_f6_ui_wrapsize = 12 scope="global"} @@ -42,6 +43,7 @@ margin-left: 0 !important; } .glm-f6-ui-field-label { + margin-top: 0 !important; } .glm-f6-ui-field-input { margin-bottom: 0 !important; @@ -52,13 +54,26 @@ .glm-f6-ui-field-input-number { margin-bottom: 0 !important; } + .glm-f6-ui-field-messages { + margin-top: 0rem !important; + margin-bottom: 0rem !important; + } .glm-f6-ui-field-data-error { + font-weight: normal !important; + font-size: .8rem !important; + margin-top: 0 !important; } .glm-f6-ui-field-help-text { - margin-bottom: 0 !important; + font-weight: normal !important; + font-size: .8rem !important; + margin-top: 0 !important; } .glm-f6-ui-field-error-text { + top: 0 !important; + font-weight: normal !importantl + font-size: .8rem !important; margin-top: 0 !important; + margin-bottom: 0 !important; } .glm-f6-ui-text-line { margin-bottom: 1rem !important; diff --git a/views/ui/f6/miscContainer-end.html b/views/ui/f6/miscContainer-end.html new file mode 100644 index 00000000..d474f2d7 --- /dev/null +++ b/views/ui/f6/miscContainer-end.html @@ -0,0 +1,8 @@ +{* + Foundation 6 - Misc Container End + + Used to end teh contain for other content in an form using UI F6. +*} + +
+ diff --git a/views/ui/f6/miscContainer-start.html b/views/ui/f6/miscContainer-start.html new file mode 100644 index 00000000..4677ec3a --- /dev/null +++ b/views/ui/f6/miscContainer-start.html @@ -0,0 +1,7 @@ +{* + Foundation 6 - Misc Container Start + + Used to contain other content in an form using UI F6. +*} + +
diff --git a/views/ui/f6/section-end.html b/views/ui/f6/section-end.html new file mode 100644 index 00000000..cd10d790 --- /dev/null +++ b/views/ui/f6/section-end.html @@ -0,0 +1,8 @@ +{* + Foundation 6 UI - Form Section End + No parameters are needed for Section-End +*} +
+ + + \ No newline at end of file diff --git a/views/ui/f6/section-start.html b/views/ui/f6/section-start.html new file mode 100644 index 00000000..7445ff85 --- /dev/null +++ b/views/ui/f6/section-start.html @@ -0,0 +1,24 @@ +{* + Foundation 6 UI - Form Section Start + + {$ui = [ + 'title' => string Section title text, + 'helpText' => string Additional text to describe this section, + 'tip' => String to display when hover over question mark on right + ]} +*} +
+
+ {if !isset($ui.title)} + Field Error: Required field information not supplied! + {else} +
+ {if isset($ui.tip)} + ? + {/if} +

{$ui.title}

+ {if isset($ui.helpText)}

{$ui.helpText}

{/if} +
+ {/if} +
+
diff --git a/views/ui/f6/text-line.html b/views/ui/f6/text-line.html new file mode 100644 index 00000000..e3624367 --- /dev/null +++ b/views/ui/f6/text-line.html @@ -0,0 +1,15 @@ +{* + Foundation 6 UI - Text Line (display only) + + {$ui = [ + 'text' => string Required Text to display, + 'underline' => boolean True to show line below text + ]} +*} + +
+ + {$ui.text} + +
+ -- 2.17.1