diff options
author | Stefan Giehl <stefan@piwik.org> | 2018-07-25 22:09:18 +0300 |
---|---|---|
committer | diosmosis <diosmosis@users.noreply.github.com> | 2018-07-25 22:09:18 +0300 |
commit | ef9c48cc48587776107b1500dc14eef3ffa19154 (patch) | |
tree | cbf32df66ecef4c6c30f0ce1a3ba91d1a272e6ad /plugins/Morpheus | |
parent | 7230b6d2173ee9f9f9237f71f3ca44c97be143c2 (diff) |
Make CORS domains configurable in UI (#13174)
* Make CORS domain configureable in UI
* Move trusted host settings to SystemSettings class
* Use unique id for pluginSettings
* Improve styling
* Improve help text
* improve code & naming
* Implements new UI field array type
* review adjustments
* reorganize form demo
* update UI files
* update system test files
* Improve handling of Config Settings
Diffstat (limited to 'plugins/Morpheus')
-rw-r--r-- | plugins/Morpheus/templates/demo.twig | 457 | ||||
-rw-r--r-- | plugins/Morpheus/tests/UI/expected-screenshots/Morpheus_load.png | 4 |
2 files changed, 170 insertions, 291 deletions
diff --git a/plugins/Morpheus/templates/demo.twig b/plugins/Morpheus/templates/demo.twig index dd630971fa..54af41cc7c 100644 --- a/plugins/Morpheus/templates/demo.twig +++ b/plugins/Morpheus/templates/demo.twig @@ -48,6 +48,12 @@ border: 1px solid #e3e3e3; border-radius: 4px; } + .demo .form-group > h3 { + margin-top: 0; + } + .demo-code + .demo { + margin: -16px 0; + } .icons h4 { padding-top: 15px; padding-bottom: 10px; @@ -266,301 +272,174 @@ <h3>Simple form</h3> +{% set inputElements%} +<div piwik-field uicontrol="text" name="username" + title="Username" + introduction="This is an introduction. It can be used to group form fields" + placeholder="Some text here"> +</div> + +<div piwik-field uicontrol="email" name="email" + title="Email" + inline-help="This is the inline help which provides more information."> +</div> + +<div piwik-field uicontrol="text" name="textWithoutPlaceholder" + title="This field has a title but no place holder"> +</div> + +<div piwik-field uicontrol="text" name="textWithoutTitle" + title="This field has a place holder but no title"> +</div> + +<div piwik-field uicontrol="text" name="textWithValue" + value="My value" + title="This field has already a value set"> +</div> + +<div piwik-field uicontrol="password" name="password" + title="Password" + placeholder="Enter your password here"> +</div> + +<div id="complexHelpText" class="inline-help-node"> + It is possible to use all kind of HTML in the help text, including <a href="javascript:;">links</a>. +</div> +<div piwik-field uicontrol="text" name="alias" + title="Disabeld text field" + disabled="true" + placeholder="This value cannot be changed" + inline-help="#complexHelpText"> +</div> + +<div piwik-field uicontrol="text" name="fullWidthText" + title="Form fields can be made full witdth" + full-width="true" + placeholder="Some text here..."> +</div> + +<div piwik-field uicontrol="url" name="urlText" title="URL" inline-help="URL field"> +</div> + +<div piwik-field uicontrol="textarea" name="description" + title="Description" + inline-help="This is a textarea. It automatically gets larger the more text is entered."> +</div> + +<div piwik-field uicontrol="select" name="language" + title="Language" + introduction="Select fields" + value="1" + inline-help="Single select" + options='{1: "English",2:"Spanish"}'> +</div> +<div piwik-field uicontrol="multiselect" name="phonenumbers" + title="Phone numbers" + value="1" + inline-help="Multi select" + options='{1: "0123456789",2:"9876543210",3:"5432109876"}'> +</div> +<div piwik-field uicontrol="expandable-select" name="selectexpand" + title="{{ "{{ view.selectedExpand ? view.selectedExpand : 'Select word' }}"|raw }}" + value="Select value" + inline-help="Expandable select" + ng-model="view.selectedExpand" + options='[{group: "Group 1",key:"1",value:"Hello"}, {group: "Group 1",key:"2",value:"How",tooltip: "Help text"}, {group: "Group 1",key:"3",value:"Are"}, {group: "Group 2",key:"4",value:"You"}]'> +</div> + +<div piwik-field uicontrol="multituple" name="multitupletext" + title="Multiple values" + value="[]" + inline-help="Multi Tuple text and text" + ui-control-attributes='{"field1":{"key":"index","title":"Index","uiControl":"text","availableValues":null},"field2":{"key":"value","title":"Value","uiControl":"text","availableValues":null}}'> +</div> + +<div piwik-field uicontrol="multituple" name="multitupletextvalue" + title="Multiple values with values" + value='[{"index": "test", "value":"myfoo"},{"index": "test 2", "value":"myfoo 2"}]' + inline-help="Multi Tuple again." + ui-control-attributes='{"field1":{"key":"index","title":"Index","uiControl":"text","availableValues":null},"field2":{"key":"value","title":"Value","uiControl":"text","availableValues":null}}'> +</div> + +<div piwik-field uicontrol="multituple" name="multitupleselect" + title="Multiple values with select" + value='[{"index": "test", "value": "myfoo"}]' + inline-help="Multi Tuple select and text" + ui-control-attributes='{"field1":{"key":"index","title":"Index","uiControl":"select","availableValues":{"test":"test"}},"field2":{"key":"value","title":"Value","uiControl":"text","availableValues":null}}'> +</div> + +<div piwik-field uicontrol="multituple" name="multituplesingleselect" + title="Multi One Select" + value='[{"index": "test", "value": "myfoo"}]' + inline-help="Multi values with one select" + ui-control-attributes='{"field1":{"key":"index","title":"Index","uiControl":"select","availableValues":{"test":"test"}}}'> +</div> + +<div piwik-field uicontrol="multituple" name="multituplesingletext" + title="Multi One Text" + value='[{"index": "test", "value": "myfoo"}]' + inline-help="Multi values with one text" + ui-control-attributes='{"field1":{"key":"index","title":"Index","uiControl":"text","availableValues":null}}'> +</div> + +<div piwik-field uicontrol="field-array" name="text-field-array" + title="Text field array" + value='["text one", "text two"]' + inline-help="Multiple text inputs" + ui-control-attributes='{"field":{"title":"Index","uiControl":"text"}}'> +</div> + +<div piwik-field uicontrol="field-array" name="select-field-array" + title="Select field array" + value='["one", "two"]' + inline-help="Multiple selects" + ui-control-attributes='{"field":{"title":"Index","uiControl":"select","availableValues":{"one":"text onw", "two":"text two", "three":"text three"}}}'> +</div> + +<div piwik-field uicontrol="checkbox" name="enableFeature" + title="Enable feature" + introduction="Radio and checkboxes" + inline-help="This is a single checkbox"> +</div> +<div piwik-field uicontrol="checkbox" name="enableFeature" + title="Enable feature" + var-type="array" + options='{today: "Today", yesterday: "Yesterday",week: "Previous 30 days (not including today)"}' + inline-help="This field shows multiple checkboxes as we declare we want to get an array of values."> +</div> +<div piwik-field uicontrol="radio" name="defaultReportDate" + title="Report to load by default" + options='{today: "Today", yesterday: "Yesterday",week: "Previous 30 days (not including today)"}' + inline-help="This is a help text that can be used to describe the field. This help text may extend over several lines."> +</div> + +<div piwik-field uicontrol="site" name="currentsite" + introduction="Matomo specific form fields" + title="Select a website"> +</div> +<div piwik-save-button></div> +<div piwik-save-button + onconfirm="myController.save()" + disabled="myController.isDisabled" + value="Changed button text" + saving="myController.isLoading"> +</div> +{% endset %} + + <div class="demo"> + <p>If you do not want to use one ouf our form fields we recommend to add the class <code>browser-default</code> to the input or select element.</p> + </div> + + {% for input in inputElements|split("\n\n") %} <div class="demo"> <div piwik-form> - <div piwik-field uicontrol="text" name="username" - title="Username" - introduction="This is an introduction. It can be used to group form fields" - placeholder="Some text here"> - </div> - - <div piwik-field uicontrol="email" name="email" - title="Email" - inline-help="This is the inline help which provides more information."> - </div> - - <div piwik-field uicontrol="text" name="textWithoutPlaceholder" - title="This field has a title but no place holder"> - </div> - - <div piwik-field uicontrol="text" name="textWithoutTitle" - title="This field has a place holder but no title"> - </div> - - <div piwik-field uicontrol="text" name="textWithValue" - value="My value" - title="This field has already a value set"> - </div> - - <div piwik-field uicontrol="password" name="password" - title="Password" - placeholder="Enter your password here"> - </div> - - <div id="complexHelpText" class="inline-help-node"> - It is possible to use all kind of HTML in the help text, including <a href="javascript:;">links</a>. - </div> - - <div piwik-field uicontrol="text" name="alias" - title="Disabeld text field" - disabled="true" - placeholder="This value cannot be changed" - inline-help="#complexHelpText"> - </div> - - <div piwik-field uicontrol="text" name="fullWidthText" - title="Form fields can be made full witdth" - full-width="true" - placeholder="Some text here..."> - </div> - - <div piwik-field uicontrol="url" name="urlText" title="URL" inline-help="URL field"> - </div> - - <div piwik-field uicontrol="textarea" name="description" - title="Description" - inline-help="This is a textarea. It automatically gets larger the more text is entered."> - </div> - - <div piwik-field uicontrol="select" name="language" - title="Language" - introduction="Select fields" - value="1" - inline-help="Single select" - options='{1: "English",2:"Spanish"}'> - </div> - - <div piwik-field uicontrol="multiselect" name="phonenumbers" - title="Phone numbers" - value="1" - inline-help="Multi select" - options='{1: "0123456789",2:"9876543210",3:"5432109876"}'> - </div> - - <div piwik-field uicontrol="expandable-select" name="selectexpand" - title="{{ "{{ view.selectedExpand ? view.selectedExpand : 'Select word' }}"|raw }}" - value="Select value" - inline-help="Expandable select" - ng-model="view.selectedExpand" - options='[{group: "Group 1",key:"1",value:"Hello"}, {group: "Group 1",key:"2",value:"How",tooltip: "Help text"}, {group: "Group 1",key:"3",value:"Are"}, {group: "Group 2",key:"4",value:"You"}]'> - </div> - - <div piwik-field uicontrol="multituple" name="multitupletext" - title="Multiple values" - value="[]" - inline-help="Multi Tuple text and text" - ui-control-attributes='{"field1":{"key":"index","title":"Index","uiControl":"text","availableValues":null},"field2":{"key":"value","title":"Value","uiControl":"text","availableValues":null}}'> - </div> - - <div piwik-field uicontrol="multituple" name="multitupletextvalue" - title="Multiple values with values" - value='[{"index": "test", "value":"myfoo"},{"index": "test 2", "value":"myfoo 2"}]' - inline-help="Multi Tuple again." - ui-control-attributes='{"field1":{"key":"index","title":"Index","uiControl":"text","availableValues":null},"field2":{"key":"value","title":"Value","uiControl":"text","availableValues":null}}'> - </div> - - <div piwik-field uicontrol="multituple" name="multitupleselect" - title="Multiple values with select" - value='[{"index": "test", "value": "myfoo"}]' - inline-help="Multi Tuple select and text" - ui-control-attributes='{"field1":{"key":"index","title":"Index","uiControl":"select","availableValues":{"test":"test"}},"field2":{"key":"value","title":"Value","uiControl":"text","availableValues":null}}'> - </div> - - <div piwik-field uicontrol="multituple" name="multituplesingleselect" - title="Multi One Select" - value='[{"index": "test", "value": "myfoo"}]' - inline-help="Multi values with one select" - ui-control-attributes='{"field1":{"key":"index","title":"Index","uiControl":"select","availableValues":{"test":"test"}}}'> - </div> - - <div piwik-field uicontrol="multituple" name="multituplesingletext" - title="Multi One Text" - value='[{"index": "test", "value": "myfoo"}]' - inline-help="Multi values with one text" - ui-control-attributes='{"field1":{"key":"index","title":"Index","uiControl":"text","availableValues":null}}'> - </div> - - <div piwik-field uicontrol="checkbox" name="enableFeature" - title="Enable feature" - introduction="Radio and checkboxes" - inline-help="This is a single checkbox"> - </div> - - <div piwik-field uicontrol="checkbox" name="enableFeature" - title="Enable feature" - var-type="array" - options='{today: "Today", yesterday: "Yesterday",week: "Previous 30 days (not including today)"}' - inline-help="This field shows multiple checkboxes as we declare we want to get an array of values."> - </div> - - <div piwik-field uicontrol="radio" name="defaultReportDate" - title="Report to load by default" - options='{today: "Today", yesterday: "Yesterday",week: "Previous 30 days (not including today)"}' - inline-help="This is a help text that can be used to describe the field. This help text may extend over several lines."> - </div> - - <div piwik-field uicontrol="site" name="currentsite" - introduction="Matomo specific form fields" - title="Select a website"> - </div> - - <div piwik-save-button></div> - <div piwik-save-button - onconfirm="myController.save()" - disabled="myController.isDisabled" - value="Changed button text" - saving="myController.isLoading"> - </div> + {{ input|raw }} </div> </div> <div class="demo-code"> - <pre><div piwik-form> - <div piwik-field uicontrol="text" name="username" - title="Username" - introduction="This is an introduction. It can be used to group form fields" - placeholder="Some text here"> - </div> - - <div piwik-field uicontrol="email" name="email" - title="Email" - inline-help="This is the inline help which provides more information."> - </div> - - <div piwik-field uicontrol="text" name="textWithoutPlaceholder" - title="This field has a title but no place holder"> - </div> - - <div piwik-field uicontrol="text" name="textWithoutTitle" - title="This field has a place holder but no title"> - </div> - - <div piwik-field uicontrol="text" name="textWithValue" - value="My value" - title="This field has already a value set"> - </div> - - <div piwik-field uicontrol="password" name="password" - title="Password" - placeholder="Enter your password here"> - </div> - - <div id="complexHelpText" class="inline-help-node"> - It is possible to use all kind of HTML in the help text, including <a href="javascript:;">links</a>. - </div> - - <div piwik-field uicontrol="text" name="alias" - title="Disabeld text field" - disabled="true" - placeholder="This value cannot be changed" - inline-help="#complexHelpText"> - </div> - - <div piwik-field uicontrol="text" name="fullWidthText" - title="Form fields can be made full witdth" - full-width="true" - placeholder="Some text here..."> - </div> - - <div piwik-field uicontrol="url" name="urlText" title="URL" inline-help="URL field"> - </div> - - <div piwik-field uicontrol="textarea" name="description" - title="Description" - inline-help="This is a textarea. It automatically gets larger the more text is entered."> - </div> - - <div piwik-field uicontrol="select" name="language" - title="Language" - introduction="Select fields" - value="1" - inline-help="Single select" - options='{1: "English",2:"Spanish"}'> - </div> - - <div piwik-field uicontrol="multiselect" name="phonenumbers" - title="Phone numbers" - value="1" - inline-help="Multi select" - options='{1: "0123456789",2:"9876543210",3:"5432109876"}'> - </div> - - <div piwik-field uicontrol="expandable-select" name="selectexpand" - title="{{ "{{ view.selectedExpand ? view.selectedExpand : 'Select word' }}"|raw }}" - value="Select value" - inline-help="Expandable select" - ng-model="view.selectedExpand" - options='[{group: "Group 1",key:"1",value:"Hello"}, {group: "Group 1",key:"2",value:"How",tooltip: "Help text"}, {group: "Group 1",key:"3",value:"Are"}, {group: "Group 2",key:"4",value:"You"}]'> - </div> - - <div piwik-field uicontrol="multituple" name="multitupletext" - title="Multiple values" - value="[]" - inline-help="Multi Pair text and text" - ui-control-attributes='{"field1":{"key":"index","title":"Index","uiControl":"text","availableValues":null},"field2":{"key":"value","title":"Value","uiControl":"text","availableValues":null}}'> - </div> - - <div piwik-field uicontrol="multituple" name="multitupletextvalue" - title="Multiple values with values" - value='[{"index": "test", "value":"myfoo"},{"index": "test 2", "value":"myfoo 2"}]' - inline-help="Multi Pair again." - ui-control-attributes='{"field1":{"key":"index","title":"Index","uiControl":"text","availableValues":null},"field2":{"key":"value","title":"Value","uiControl":"text","availableValues":null}}'> - </div> - - <div piwik-field uicontrol="multituple" name="multitupleselect" - title="Multiple values with select" - value='[{"index": "test", "value": "myfoo"}]' - inline-help="Multi Pair select and text" - ui-control-attributes='{"field1":{"key":"index","title":"Index","uiControl":"select","availableValues":{"test":"test"}},"field2":{"key":"value","title":"Value","uiControl":"text","availableValues":null}}'> - </div> - - <div piwik-field uicontrol="multituple" name="multituplesingleselect" - title="Multi One Select" - value='[{"index": "test", "value": "myfoo"}]' - inline-help="Multi values with one select" - ui-control-attributes='{"field1":{"key":"index","title":"Index","uiControl":"select","availableValues":{"test":"test"}}}'> - </div> - - <div piwik-field uicontrol="multituple" name="multituplesingletext" - title="Multi One Text" - value='[{"index": "test", "value": "myfoo"}]' - inline-help="Multi values with one text" - ui-control-attributes='{"field1":{"key":"index","title":"Index","uiControl":"text","availableValues":null}}'> - </div> - - <div piwik-field uicontrol="checkbox" name="enableFeature" - title="Enable feature" - introduction="Radio and checkboxes" - inline-help="This is a single checkbox"> - </div> - - <div piwik-field uicontrol="checkbox" name="enableFeature" - title="Enable feature" - var-type="array" - options='{today: "Today", yesterday: "Yesterday",week: "Previous 30 days (not including today)"}' - inline-help="This field shows multiple checkboxes as we declare we want to get an array of values."> - </div> - - <div piwik-field uicontrol="radio" name="defaultReportDate" - title="Report to load by default" - options='{today: "Today", yesterday: "Yesterday",week: "Previous 30 days (not including today)"}' - inline-help="This is a help text that can be used to describe the field. This help text may extend over several lines."> - </div> - - <div piwik-field uicontrol="site" name="currentsite" - introduction="Matomo specific form fields" - title="Select a website"> - </div> - - <div piwik-save-button></div> - <div piwik-save-button - onconfirm="myController.save()" - disabled="myController.isDisabled" - value="Changed button text" - saving="myController.isLoading"> - </div> -</div></pre> - <p>If you do not want to use one ouf our form fields we recommend to add the class <code>browser-default</code> to the input or select element.</p> + <pre>{{ input|e }}</pre> </div> + {% endfor %} <h2>Code</h2> diff --git a/plugins/Morpheus/tests/UI/expected-screenshots/Morpheus_load.png b/plugins/Morpheus/tests/UI/expected-screenshots/Morpheus_load.png index 02fb221fd9..e402a301c8 100644 --- a/plugins/Morpheus/tests/UI/expected-screenshots/Morpheus_load.png +++ b/plugins/Morpheus/tests/UI/expected-screenshots/Morpheus_load.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9de8b9c646356dce9f3cec1cf3341f6b672274af2692af24f352193fbfb2e276 -size 1433153 +oid sha256:4aec6eb5eea338388160bc9f66afc3e49db5b6176ac94245e6e9ec5ba7ce09a8 +size 1531583 |