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 | |
| 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')
17 files changed, 453 insertions, 455 deletions
diff --git a/plugins/CoreAdminHome/SystemSettings.php b/plugins/CoreAdminHome/SystemSettings.php new file mode 100644 index 0000000000..0adc00ada6 --- /dev/null +++ b/plugins/CoreAdminHome/SystemSettings.php @@ -0,0 +1,63 @@ +<?php +/** + * Piwik - free/libre analytics platform + * + * @link http://piwik.org + * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later + */ + +namespace Piwik\Plugins\CoreAdminHome; + +use Piwik\Piwik; +use Piwik\Plugins\CoreAdminHome\Controller as CoreAdminController; +use Piwik\Settings\Setting; +use Piwik\Settings\FieldConfig; + +class SystemSettings extends \Piwik\Settings\Plugin\SystemSettings +{ + /** @var Setting */ + public $corsDomains; + + /** @var Setting */ + public $trustedHostnames; + + protected function init() + { + $this->title = ' '; // intentionally left blank as it's hidden with css + + $isWritable = Piwik::hasUserSuperUserAccess() && CoreAdminController::isGeneralSettingsAdminEnabled(); + $this->trustedHostnames = $this->createTrustedHostnames(); + $this->trustedHostnames->setIsWritableByCurrentUser($isWritable); + $this->corsDomains = $this->createCorsDomains(); + $this->corsDomains->setIsWritableByCurrentUser($isWritable); + } + + + private function createCorsDomains() + { + return $this->makeSettingManagedInConfigOnly('General', 'cors_domains', $default = [], FieldConfig::TYPE_ARRAY, function (FieldConfig $field) { + $field->introduction = Piwik::translate('CoreAdminHome_CorsDomains'); + $field->uiControl = FieldConfig::UI_CONTROL_FIELD_ARRAY; + $arrayField = new FieldConfig\ArrayField(Piwik::translate('Overlay_Domain'), FieldConfig::UI_CONTROL_TEXT); + $field->uiControlAttributes['field'] = $arrayField->toArray(); + $field->inlineHelp = Piwik::translate('CoreAdminHome_CorsDomainsHelp'); + $field->transform = function($values) { + return array_filter($values); + }; + }); + } + + private function createTrustedHostnames() + { + return $this->makeSettingManagedInConfigOnly('General', 'trusted_hosts', $default = [], FieldConfig::TYPE_ARRAY, function (FieldConfig $field) { + $field->introduction = Piwik::translate('CoreAdminHome_TrustedHostSettings'); + $field->uiControl = FieldConfig::UI_CONTROL_FIELD_ARRAY; + $arrayField = new FieldConfig\ArrayField(Piwik::translate('CoreAdminHome_ValidPiwikHostname'), FieldConfig::UI_CONTROL_TEXT); + $field->uiControlAttributes['field'] = $arrayField->toArray(); + $field->transform = function($values) { + return array_filter($values); + }; + }); + } + +} diff --git a/plugins/CoreAdminHome/angularjs/trustedhosts/trustedhosts.controller.js b/plugins/CoreAdminHome/angularjs/trustedhosts/trustedhosts.controller.js deleted file mode 100644 index adcaf69e29..0000000000 --- a/plugins/CoreAdminHome/angularjs/trustedhosts/trustedhosts.controller.js +++ /dev/null @@ -1,61 +0,0 @@ -/*! - * Piwik - free/libre analytics platform - * - * @link http://piwik.org - * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later - */ - -/** - * Controller to save archiving settings - */ -(function () { - angular.module('piwikApp').controller('TrustedHostsController', TrustedHostsController); - - TrustedHostsController.$inject = ['$scope', 'piwikApi', '$timeout']; - - function TrustedHostsController($scope, piwikApi, $timeout) { - - var self = this; - this.isLoading = false; - - this.addTrustedHost = function () { - this.hosts.push({host: ''}); - - $timeout(function () { - $('#trustedHostSettings').find('li:last input').val('').focus(); - }); - }; - - this.removeTrustedHost = function (index) { - this.hosts.splice(index,1); - }; - - this.save = function () { - var hosts = []; - angular.forEach(self.hosts, function (host) { - hosts.push(host.host); - }); - - var doSubmit = function () { - self.isLoading = true; - - piwikApi.post({module: 'API', method: 'CoreAdminHome.setTrustedHosts'}, { - trustedHosts: hosts - }).then(function (success) { - self.isLoading = false; - - var UI = require('piwik/UI'); - var notification = new UI.Notification(); - notification.show(_pk_translate('CoreAdminHome_SettingsSaveSuccess'), { - id: 'generalSettings', context: 'success' - }); - notification.scrollToNotification(); - }, function () { - self.isLoading = false; - }); - }; - - piwikHelper.modalConfirm('#confirmTrustedHostChange', {yes: doSubmit}); - }; - } -})();
\ No newline at end of file diff --git a/plugins/CoreAdminHome/angularjs/trustedhosts/trustedhosts.directive.js b/plugins/CoreAdminHome/angularjs/trustedhosts/trustedhosts.directive.js deleted file mode 100644 index 10485b8a1d..0000000000 --- a/plugins/CoreAdminHome/angularjs/trustedhosts/trustedhosts.directive.js +++ /dev/null @@ -1,36 +0,0 @@ -/*! - * Piwik - free/libre analytics platform - * - * @link http://piwik.org - * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later - */ - -/** - * Usage: - * <div piwik-trusted-hosts-setting> - */ -(function () { - angular.module('piwikApp').directive('piwikTrustedHostsSetting', piwikTrustedHostsSetting); - - piwikTrustedHostsSetting.$inject = ['piwik']; - - function piwikTrustedHostsSetting(piwik){ - - return { - restrict: 'A', - transclude: true, - template: '<div ng-transclude></div>', - controller: 'TrustedHostsController', - controllerAs: 'trustedHosts', - compile: function (element, attrs) { - - return function (scope, element, attrs, controller) { - controller.hosts = []; - angular.forEach(JSON.parse(attrs.piwikTrustedHostsSetting), function (host) { - controller.hosts.push({host: host}); - }); - }; - } - }; - } -})();
\ No newline at end of file diff --git a/plugins/CoreAdminHome/lang/en.json b/plugins/CoreAdminHome/lang/en.json index 2f5a0f26b0..349a838f3d 100644 --- a/plugins/CoreAdminHome/lang/en.json +++ b/plugins/CoreAdminHome/lang/en.json @@ -7,6 +7,8 @@ "ReleaseChannel": "Release channel", "ClickHereToOptIn": "Click here to opt in.", "ClickHereToOptOut": "Click here to opt out.", + "CorsDomains": "Cross-Origin Resource Sharing (CORS) domains", + "CorsDomainsHelp": "You can define domains or subdomains like http://example.com or http://stats.example.com. Or to allow cross domain requests for all domains simply add a *", "CustomLogoFeedbackInfo": "If you customize the Matomo logo, you might also be interested to hide the %1$s link in the top menu. To do so, you can disable the Feedback plugin in the %2$sManage Plugins%3$s page.", "CustomLogoHelpText": "You can customize the Matomo logo which will be displayed in the user interface and email reports.", "DevelopmentProcess": "While our %1$sdevelopment process%2$s includes thousands of automated tests, Beta Testers play a key role in achieving the \"No bug policy\" in Matomo.", diff --git a/plugins/CoreAdminHome/stylesheets/generalSettings.less b/plugins/CoreAdminHome/stylesheets/generalSettings.less index 9a45fa2b16..bedda0f80c 100644 --- a/plugins/CoreAdminHome/stylesheets/generalSettings.less +++ b/plugins/CoreAdminHome/stylesheets/generalSettings.less @@ -39,16 +39,17 @@ padding-bottom: 10px; } -/* trusted host styles */ -#trustedHostSettings input:not(.btn) { - width: 238px; -} - -#trustedHostSettings li { - padding-bottom: 6px; -} +#CoreAdminHomePluginSettings { + h2 { + display: none; + } + h3 { + margin: 0; + font-size: 24px; + padding: 0; + } -#trustedHostSettings .add-trusted-host-container, -#corsSettings .add-cors-host-container { - padding: 12px 24px; -} + .fieldArray { + margin-top: 0!important; + } +}
\ No newline at end of file diff --git a/plugins/CoreAdminHome/templates/generalSettings.twig b/plugins/CoreAdminHome/templates/generalSettings.twig index f23a80678c..45dfaca9f1 100644 --- a/plugins/CoreAdminHome/templates/generalSettings.twig +++ b/plugins/CoreAdminHome/templates/generalSettings.twig @@ -215,48 +215,6 @@ </div> </div> -<div piwik-content-block content-title="{{ 'CoreAdminHome_TrustedHostSettings'|translate|e('html_attr') }}"> - <a name="trustedHostsSection"></a> - <div class="ui-confirm" id="confirmTrustedHostChange"> - <h2>{{ 'CoreAdminHome_TrustedHostConfirm'|translate }}</h2> - <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/> - <input role="no" type="button" value="{{ 'General_No'|translate }}"/> - </div> - <div id='trustedHostSettings' piwik-trusted-hosts-setting='{{ trustedHosts|json_encode }}'> - - {% include "@CoreHome/_warningInvalidHost.twig" %} - - {% if not isGeneralSettingsAdminEnabled %} - {{ 'CoreAdminHome_PiwikIsInstalledAt'|translate }}: {{ trustedHosts|join(", ") }} - {% else %} - <div class="form-group row"> - <label>{{ 'CoreAdminHome_ValidPiwikHostname'|translate }}</label> - </div> - <ul> - <li ng-repeat="trustedHost in trustedHosts.hosts"> - <input ng-model="trustedHost.host" type="text"/> - <a href="javascript:;" ng-click="trustedHosts.removeTrustedHost($index);" - class="remove-trusted-host btn-flat btn-large" title="{{ 'General_Delete'|translate }}"> - <span class="icon-minus"></span> - </a> - </li> - </ul> - - <div class="add-trusted-host"> - <input type="text" ng-click="trustedHosts.addTrustedHost();" - placeholder="{{ 'CoreAdminHome_AddNewTrustedHost'|translate|e('html_attr') }}" readonly/> - - <a href="#" ng-click="trustedHosts.addTrustedHost();" - class="btn-flat btn-large" title="{{ 'General_Add'|translate }}"> - <span class="icon-add"></span> - </a> - </div> - - <div onconfirm="trustedHosts.save()" saving="trustedHosts.isLoading" piwik-save-button></div> - {% endif %} - </div> - -</div> {% if isDataPurgeSettingsEnabled %} <div piwik-content-block content-title="{{ 'PrivacyManager_DeleteDataSettings'|translate|e('html_attr') }}"> <p>{{ 'PrivacyManager_DeleteDataDescription'|translate }} {{ 'PrivacyManager_DeleteDataDescription2'|translate }}</p> diff --git a/plugins/CoreHome/CoreHome.php b/plugins/CoreHome/CoreHome.php index d42f798694..b1a29135d4 100644 --- a/plugins/CoreHome/CoreHome.php +++ b/plugins/CoreHome/CoreHome.php @@ -117,6 +117,7 @@ class CoreHome extends \Piwik\Plugin $stylesheets[] = "plugins/CoreHome/angularjs/period-date-picker/period-date-picker.component.less"; $stylesheets[] = "plugins/CoreHome/angularjs/period-selector/period-selector.directive.less"; $stylesheets[] = "plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.less"; + $stylesheets[] = "plugins/CoreHome/angularjs/field-array/field-array.directive.less"; } public function getJsFiles(&$jsFiles) @@ -259,6 +260,9 @@ class CoreHome extends \Piwik\Plugin $jsFiles[] = "plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.js"; $jsFiles[] = "plugins/CoreHome/angularjs/multipairfield/multipairfield.controller.js"; + $jsFiles[] = "plugins/CoreHome/angularjs/field-array/field-array.directive.js"; + $jsFiles[] = "plugins/CoreHome/angularjs/field-array/field-array.controller.js"; + // we have to load these CoreAdminHome files here. If we loaded them in CoreAdminHome, // there would be JS errors as CoreAdminHome is loaded first. Meaning it is loaded before // any angular JS file is loaded etc. @@ -267,8 +271,6 @@ class CoreHome extends \Piwik\Plugin $jsFiles[] = "plugins/CoreAdminHome/angularjs/trackingcode/jstrackingcode.controller.js"; $jsFiles[] = "plugins/CoreAdminHome/angularjs/trackingcode/imagetrackingcode.controller.js"; $jsFiles[] = "plugins/CoreAdminHome/angularjs/archiving/archiving.controller.js"; - $jsFiles[] = "plugins/CoreAdminHome/angularjs/trustedhosts/trustedhosts.directive.js"; - $jsFiles[] = "plugins/CoreAdminHome/angularjs/trustedhosts/trustedhosts.controller.js"; // we have to load these CorePluginsAdmin files here. If we loaded them in CorePluginsAdmin, diff --git a/plugins/CoreHome/angularjs/field-array/field-array.controller.js b/plugins/CoreHome/angularjs/field-array/field-array.controller.js new file mode 100644 index 0000000000..40f3f3ca74 --- /dev/null +++ b/plugins/CoreHome/angularjs/field-array/field-array.controller.js @@ -0,0 +1,71 @@ +/*! + * Piwik - free/libre analytics platform + * + * @link http://piwik.org + * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later + */ +(function () { + angular.module('piwikApp').controller('FieldArrayController', FieldArrayController); + + FieldArrayController.$inject = ['$scope']; + + function FieldArrayController($scope){ + + function getTemplate(field) { + var control = field.uiControl; + if (control === 'password' || control === 'url' || control === 'search' || control === 'email') { + control = 'text'; // we use same template for text and password both + } + + var file = 'field-' + control; + var fieldsSupportingArrays = ['textarea', 'checkbox', 'text']; + if (field.type === 'array' && fieldsSupportingArrays.indexOf(control) !== -1) { + file += '-array'; + } + + return 'plugins/CorePluginsAdmin/angularjs/form-field/' + file + '.html?cb=' + piwik.cacheBuster; + } + + if ($scope.field && !$scope.field.templateFile) { + $scope.field.templateFile = getTemplate($scope.field); + } + + var self = this; + $scope.$watch('formValue', function () { + if (!$scope.formValue || !$scope.formValue.length) { + self.addEntry(); + } else { + self.onEntryChange(); + } + }, true); + + this.onEntryChange = function () { + var hasAny = true; + angular.forEach($scope.formValue, function (entry) { + if (!entry) { + hasAny = false; + } + }); + if (hasAny) { + this.addEntry(); + } + }; + + this.addEntry = function () { + if (angular.isArray($scope.formValue)) { + $scope.formValue.push(''); + } + }; + + this.removeEntry = function (index) { + if (index > -1) { + $scope.formValue.splice(index, 1); + } + }; + + if (!$scope.formValue || !$scope.formValue.length) { + this.addEntry(); + } + } + +})(); diff --git a/plugins/CoreHome/angularjs/field-array/field-array.directive.html b/plugins/CoreHome/angularjs/field-array/field-array.directive.html new file mode 100644 index 0000000000..7f5948b231 --- /dev/null +++ b/plugins/CoreHome/angularjs/field-array/field-array.directive.html @@ -0,0 +1,22 @@ +<div class="fieldArray form-group"> + <div ng-repeat="item in formValue track by $index" + class="fieldArrayTable fieldArrayTable{{ $index }} multiple valign-wrapper"> + + <div piwik-field uicontrol="{{ field.uiControl }}" + title="{{ field.title }}" + full-width="true" + ng-if="field.templateFile" + template-file="{{ field.templateFile }}" + class="fieldUiControl" + ng-model="formValue[$index]" + options="field.availableValues" + ng-change="fieldArray.onEntryChange()" + placeholder=" "> + </div> + + <span ng-click="fieldArray.removeEntry($index)" + title="{{ 'General_Remove'|translate }}" + ng-hide="($index + 1) == (formValue|length)" + class="icon-minus valign"></span> + </div> +</div>
\ No newline at end of file diff --git a/plugins/CoreHome/angularjs/field-array/field-array.directive.js b/plugins/CoreHome/angularjs/field-array/field-array.directive.js new file mode 100644 index 0000000000..5c87a205aa --- /dev/null +++ b/plugins/CoreHome/angularjs/field-array/field-array.directive.js @@ -0,0 +1,60 @@ +/*! + * Matomo - free/libre analytics platform + * + * @link https://matomo.org + * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later + */ + +/** + * Usage: + * <div matomo-field-array field=".." ng-model="..."> + */ +(function () { + angular.module('piwikApp').directive('matomoFieldArray', matomoFieldArray); + + matomoFieldArray.$inject = ['$document', 'piwik', '$filter']; + + function matomoFieldArray($document, piwik, $filter){ + return { + restrict: 'A', + scope: { + field: '=' + }, + require: "?ngModel", + templateUrl: 'plugins/CoreHome/angularjs/field-array/field-array.directive.html?cb=' + piwik.cacheBuster, + controller: 'FieldArrayController', + controllerAs: 'fieldArray', + compile: function (element, attrs) { + + return function (scope, element, attrs, ngModel) { + + if (ngModel) { + ngModel.$setViewValue(scope.formValue); + } + + scope.$watch('formValue', function (newValue, oldValue) { + if (newValue != oldValue) { + element.trigger('change', newValue); + } + }, true); + + if (ngModel) { + ngModel.$render = function() { + if (angular.isString(ngModel.$viewValue)) { + scope.formValue = JSON.parse(ngModel.$viewValue); + } else { + scope.formValue = ngModel.$viewValue; + } + }; + } + + scope.$watch('formValue', function (newValue, oldValue) { + if (ngModel) { + ngModel.$setViewValue(newValue); + } + }, true); + }; + } + }; + } +})();
\ No newline at end of file diff --git a/plugins/CoreHome/angularjs/field-array/field-array.directive.less b/plugins/CoreHome/angularjs/field-array/field-array.directive.less new file mode 100644 index 0000000000..29f63392d7 --- /dev/null +++ b/plugins/CoreHome/angularjs/field-array/field-array.directive.less @@ -0,0 +1,17 @@ +.fieldArray { + margin-top: 40px !important; + + .form-group.row { + margin-top: 2px; + margin-bottom: 2px; + } + + .fieldUiControl { + width: ~"calc(100% - 60px)"; + padding-right: 0.75rem; + } + + .icon-minus { + cursor: pointer; + } +}
\ No newline at end of file diff --git a/plugins/CorePluginsAdmin/angularjs/form-field/field-field-array.html b/plugins/CorePluginsAdmin/angularjs/form-field/field-field-array.html new file mode 100644 index 0000000000..ba0b58ad10 --- /dev/null +++ b/plugins/CorePluginsAdmin/angularjs/form-field/field-field-array.html @@ -0,0 +1,8 @@ +<div> + <div matomo-field-array + name="{{ formField.name }}" + ng-model="formField.value" + field="formField.uiControlAttributes.field"> + </div> + <label for="{{ formField.name }}" ng-bind-html="formField.title"></label> +</div>
\ No newline at end of file diff --git a/plugins/CorePluginsAdmin/angularjs/plugin-settings/plugin-settings.directive.html b/plugins/CorePluginsAdmin/angularjs/plugin-settings/plugin-settings.directive.html index 087426566f..6f77711ecc 100644 --- a/plugins/CorePluginsAdmin/angularjs/plugin-settings/plugin-settings.directive.html +++ b/plugins/CorePluginsAdmin/angularjs/plugin-settings/plugin-settings.directive.html @@ -2,7 +2,7 @@ <div ng-repeat="settings in pluginSettings.settingsPerPlugin" class="card" - id="pluginSettings"> + id="{{ settings.pluginName }}PluginSettings"> <div class="card-content"> <h2 id="{{ settings.pluginName }}" class="card-title">{{ settings.title }}</h2> diff --git a/plugins/Diagnostics/ConfigReader.php b/plugins/Diagnostics/ConfigReader.php index d1f57be422..3750184497 100644 --- a/plugins/Diagnostics/ConfigReader.php +++ b/plugins/Diagnostics/ConfigReader.php @@ -148,10 +148,24 @@ class ConfigReader continue; } - $configs[$pluginName] = array(); + if (!array_key_exists($pluginName, $configValues)) { + $configValues[$pluginName] = array(); + } foreach ($pluginSetting->getSettingsWritableByCurrentUser() as $setting) { + $name = $setting->getName(); + + $configSection = $pluginName; + + if ($setting instanceof PiwikSettings\Plugin\SystemConfigSetting) { + $configSection = $setting->getConfigSectionName(); + + if ($this->shouldSkipCategory($configSection)) { + continue; + } + } + $config = $setting->configureField(); $description = ''; @@ -163,16 +177,16 @@ class ConfigReader $description .= $config->inlineHelp; } - if (isset($configValues[$pluginName][$name])) { - $configValues[$pluginName][$name]['defaultValue'] = $setting->getDefaultValue(); - $configValues[$pluginName][$name]['description'] = trim($description); + if (isset($configValues[$configSection][$name])) { + $configValues[$configSection][$name]['defaultValue'] = $setting->getDefaultValue(); + $configValues[$configSection][$name]['description'] = trim($description); if ($config->uiControl === PiwikSettings\FieldConfig::UI_CONTROL_PASSWORD) { - $configValues[$pluginName][$name]['value'] = $this->getMaskedPassword(); + $configValues[$configSection][$name]['value'] = $this->getMaskedPassword(); } } else { $defaultValue = $setting->getValue(); - $configValues[$pluginName][$name] = array( + $configValues[$configSection][$name] = array( 'value' => null, 'description' => trim($description), 'isCustomValue' => false, diff --git a/plugins/Diagnostics/tests/Integration/ConfigReaderTest.php b/plugins/Diagnostics/tests/Integration/ConfigReaderTest.php index 30f4e58b38..9bc90dd5e1 100644 --- a/plugins/Diagnostics/tests/Integration/ConfigReaderTest.php +++ b/plugins/Diagnostics/tests/Integration/ConfigReaderTest.php @@ -18,9 +18,9 @@ use Piwik\Tests\Framework\Mock\FakeAccess; use Piwik\Tests\Framework\TestCase\IntegrationTestCase; /** - * TODO: This could be a unit test if we could inject the ArchiveTableDao in the command * @group Diagnostics * @group Plugins + * @group ConfigReader */ class ConfigReaderTest extends IntegrationTestCase { @@ -269,6 +269,4 @@ Another line', { return PIWIK_INCLUDE_PATH . '/tests/resources/Config/' . $file; } -} - -AnalyzeArchiveTableTest::$fixture = new OneVisitorTwoVisits();
\ No newline at end of file +}
\ No newline at end of file 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 |
