added color wheel plugin closes #1288

CHANGELOG.md

@@ -14,6 +14,7 @@ All notable changes to this project will be documented in this file. This projec
 
 ### Added
 
+- [#1288](https://github.com/luyadev/luya/issues/1288) Added Color-Wheel NgRest Plugin and Angular Type.
 - [#1287](https://github.com/luyadev/luya/issues/1287) Sortable Plugin and Trait added.
 - [#1270](https://github.com/luyadev/luya/issues/1270) Module block set resolved query params into the request component if not strict mode.
 - [#1268](https://github.com/luyadev/luya/issues/1268) Module block strict render ability in order to strict render the given action and controller paths instead of parse them trough the request component.

modules/admin/src/base/TypesInterface.php

@@ -43,6 +43,11 @@ interface TypesInterface
  */
  const TYPE_LINK = 'zaa-link';
 
+ /**
+ * @var string Generates a Color-Wheel Input.
+ */
+ const TYPE_COLOR = 'zaa-color';
+
  /**
  * @var string
  */

modules/admin/src/ngrest/plugins/Color.php

@@ -2,35 +2,39 @@
 
 namespace luya\admin\ngrest\plugins;
 
-use luya\Exception;
 use luya\admin\ngrest\base\Plugin;
 
 /**
- * Render Colorized overview
+ * Color Wheel Plugin.
  *
  * @author Basil Suter <basil@nadar.io>
  */
 class Color extends Plugin
 {
+ /**
+ * @inheritdoc
+ */
  public function renderList($id, $ngModel)
  {
- return $this->createListTag($ngModel);
- /*
- $element = $doc->createElement('span', '&nbsp;');
- $element->setAttribute('style', 'font-size:14.5px; padding-left:30px; background-color : #{{item.'.$this->name.'}}');
- $doc->appendChild($element);
-
- return $doc;
- */
+ return [
+ $this->createTag('span', null, ['style' => 'background-color: {{' . $ngModel .' }}; margin-right:5px; border-radius: 60%; padding:0px 8px;']),
+ $this->createListTag($ngModel),
+ ];
  }
 
+ /**
+ * @inheritdoc
+ */
  public function renderCreate($id, $ngModel)
  {
-  throw new Exception('Error: there is no create implementation for ColorPlugin yet!');
+  return $this->createFormTag('zaa-color', $id, $ngModel);
  }
 
+ /**
+ * @inheritdoc
+ */
  public function renderUpdate($id, $ngModel)
  {
-  throw new Exception('Error: there is no update implementation for ColorPlugin yet!');
+  return $this->renderCreate($id, $ngModel);
  }
 }

modules/admin/src/resources/compileConfig.js

@@ -27,6 +27,7 @@ module.exports = {
  "vendor/twig.js/twig.min.js",
  "vendor/angular-filter/angular-filter.min.js",
  "vendor/angular-flow/ng-flow-standalone.min.js",
+ "vendor/ng-colorwheel.js",
  "js/zaa.js",
  "js/services.js",
  "js/directives.js",

modules/admin/src/resources/dist/css/admin.css

@@ -4121,7 +4121,6 @@ button.btn-floating {
 
 .materialboxed {
  display: block;
- cursor: -webkit-zoom-in;
  cursor: zoom-in;
  position: relative;
  -webkit-transition: opacity .4s;
@@ -4132,7 +4131,6 @@ button.btn-floating {
  opacity: .8; }
 
 .materialboxed.active {
- cursor: -webkit-zoom-out;
  cursor: zoom-out; }
 
 #materialbox-overlay {

modules/admin/src/resources/js/directives.js

@@ -321,6 +321,25 @@
  }
  });
 
+ zaa.directive("zaaColor", function() {
+ return {
+ restrict: "E",
+ scope: {
+ "model": "=",
+ "options": "=",
+ "label": "@label",
+ "i18n": "@i18n",
+ "id": "@fieldid",
+ "name": "@fieldname",
+ },
+ template: function() {
+ return '<div class="input input--text" ng-class="{\'input--hide-label\': i18n}"><label class="input__label" for="{{id}}">{{label}}</label><div class="input__field-wrapper">'+
+ '<div ng-colorwheel="{ size: 150, segments: 120 }" ng-model="model"></div><div><div style="width:20px;display:inline-block; margin-right:5px; height:20px; background-color:{{model}}; padding:5px;"></div><input type="text" ng-model="model" /></div>'+
+ '</div></div>';
+ }
+ }
+ });
+
  zaa.directive("zaaWysiwyg", function() {
  return {
  restrict: "E",

modules/admin/src/resources/js/zaa.js

@@ -1,4 +1,4 @@
-var zaa = angular.module("zaa", ["ui.router", "ngDragDrop", "angular-loading-bar", "ngFileUpload", "ngWig", "slugifier", "flow", "angular.filter", "720kb.datepicker", "localytics.directives"]);
+var zaa = angular.module("zaa", ["ui.router", "ngDragDrop", "angular-loading-bar", "ngFileUpload", "ngWig", "slugifier", "flow", "angular.filter", "720kb.datepicker", "localytics.directives", "directive.ngColorwheel"]);
 
 /**
  * guid creator