CRM-19723 - Allow rotation of icons

diff --git a/css/crm-i.css b/css/crm-i.css
index c8ec92a346b8b13915439920946eaeca8e7f3a51..ddf6dc54fe9044e119519aaf47328a691745da95 100644 (file)
--- a/css/crm-i.css
+++ b/css/crm-i.css
@@ -11,7 +11,6 @@ is loaded before font-awesome.css so that .fa-XXX classes can modify it. */
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  transform: translate(0, 0);
 }
 
 i.crm-i {

diff --git a/js/crm.admin.js b/js/crm.admin.js
index f555df2b36fa22b084ab4e1ef32a87b9151d0a4d..2884ae90f0e6cb92fc4e4a403c3a9f716a206e6a 100644 (file)
--- a/js/crm.admin.js
+++ b/js/crm.admin.js
@@ -10,6 +10,12 @@
         });
         // Hack to get the strings in this lazy-loaded file translated
         ts('None');
+        ts('Normal');
+        ts('Rotate right');
+        ts('Rotate left');
+        ts('Rotate 180');
+        ts('Flip horizontal');
+        ts('Flip vertical');
       });
-    })
+    });
 })(CRM.$);

diff --git a/js/jquery/jquery.crmIconPicker.js b/js/jquery/jquery.crmIconPicker.js
index 7e76f53881688032128e9736048cbf3964b99520..885d1b2b88c7143d00db04d28ce2968a52a7e2fe 100644 (file)
--- a/js/jquery/jquery.crmIconPicker.js
+++ b/js/jquery/jquery.crmIconPicker.js
@@ -25,25 +25,47 @@
       if ($(this).hasClass('iconpicker-widget')) {
         return;
       }
+
       var $input = $(this),
-        button = $('<a href="#" />').button({
-          label: $(this).val() || ts('None'),
-          icons: {primary: $(this).val()}
-        }).attr('title', $input.attr('title'));
-      $input.hide().addClass('iconpicker-widget').after(button).change(function() {
-        button.button('option', {
-          label: $(this).val() || ts('None'),
-          icons: {primary: $(this).val()}
+        $button = $('<a href="#" />').button().attr('title', $input.attr('title')),
+        $style = $('<select class="crm-form-select"></select>'),
+        options = [
+          {key: 'fa-rotate-90', value: ts('Rotate right')},
+          {key: 'fa-rotate-270', value: ts('Rotate left')},
+          {key: 'fa-rotate-180', value: ts('Rotate 180')},
+          {key: 'fa-flip-horizontal', value: ts('Flip horizontal')},
+          {key: 'fa-flip-vertical', value: ts('Flip vertical')}
+        ];
+
+      function formatButton() {
+        var split = $input.val().split(' ');
+        $button.button('option', {
+          label: split[0] || ts('None'),
+          icons: {primary: $input.val()}
         });
+        $style.toggle(!!split[0]).val(split[1] || '');
+      }
+
+      $input.hide().addClass('iconpicker-widget').after($style).after($button).change(formatButton);
+
+      CRM.utils.setOptions($style, options, ts('Normal'));
+
+      formatButton();
+
+      $style.change(function() {
+        if ($input.val()) {
+          var split = $input.val().split(' '),
+            style = $style.val();
+          $input.val(split[0] + (style ? ' ' + style : '')).change();
+        }
       });
 
-      button.click(function(e) {
+      $button.click(function(e) {
         var dialog;
 
         function displayIcons() {
           var term = $('input[name=search]', dialog).val().replace(/-/g, '').toLowerCase(),
-            $place = $('div.icons', dialog);
-          $place.html('');
+            $place = $('div.icons', dialog).html('');
           $.each(icons, function(i, icon) {
             if (!term.length || icon.replace(/-/g, '').indexOf(term) > -1) {
               var item = $('<a href="#" title="' + icon + '"/>').button({
@@ -69,8 +91,9 @@
         }
 
         function pickIcon(e) {
-          var newIcon = $(this).attr('title');
-          $input.val(newIcon).change();
+          var newIcon = $(this).attr('title'),
+            style = $style.val();
+          $input.val(newIcon + (style ? ' ' + style : '')).change();
           dialog.dialog('close');
           e.preventDefault();
         }
@@ -89,6 +112,7 @@
         loadIcons().done(displayDialog);
         e.preventDefault();
       });
+
     });
   };
 }(CRM.$, CRM._));