FEATURE: allow copying of color schemes to clipboard

app/assets/javascripts/admin/controllers/admin-customize-colors-show.js.es6

@@ -20,6 +20,31 @@ export default Ember.Controller.extend({
       color.undo();
     },
 
+    copyToClipboard() {
+      $(".table.colors").hide();
+      let area = $("<textarea id='copy-range'></textarea>");
+      $(".table.colors").after(area);
+      area.text(this.get("model").schemeJson());
+      let range = document.createRange();
+      range.selectNode(area[0]);
+      window.getSelection().addRange(range);
+      let successful = document.execCommand('copy');
+      if (successful) {
+        this.set("model.savingStatus", I18n.t("admin.customize.copied_to_clipboard"));
+      } else {
+        this.set("model.savingStatus", I18n.t("admin.customize.copy_to_clipboard_error"));
+      }
+
+      setTimeout(()=>{
+        this.set("model.savingStatus", null);
+      }, 2000);
+
+      window.getSelection().removeAllRanges();
+
+      $(".table.colors").show();
+      $(area).remove();
+    },
+
     copy() {
       var newColorScheme = Em.copy(this.get('model'), true);
       newColorScheme.set('name', I18n.t('admin.customize.colors.copy_name_prefix') + ' ' + this.get('model.name'));

app/assets/javascripts/admin/models/color-scheme.js.es6

@@ -18,6 +18,15 @@ const ColorScheme = Discourse.Model.extend(Ember.Copyable, {
     });
   },
 
+  schemeJson(){
+    let buffer = [];
+    _.each(this.get('colors'), (c) => {
+      buffer.push(`  "${c.get('name')}": "${c.get('hex')}"`);
+    });
+
+    return [`"${this.get("name")}": {`, buffer.join(",\n"), "}"].join("\n");
+  },
+
   copy: function() {
     var newScheme = ColorScheme.create({name: this.get('name'), can_edit: true, colors: Em.A()});
     _.each(this.get('colors'), function(c){

app/assets/javascripts/admin/templates/customize-colors-show.hbs

@@ -6,6 +6,7 @@
       <button {{action "save"}} disabled={{model.disableSave}} class='btn'>{{i18n 'admin.customize.save'}}</button>
       {{/unless}}
       <button {{action "copy" model}} class='btn'><i class="fa fa-copy"></i> {{i18n 'admin.customize.copy'}}</button>
+      <button {{action "copyToClipboard" model}} class='btn'><i class="fa fa-clipboard"></i> {{i18n 'admin.customize.copy_to_clipboard'}}</button>
       {{#if model.theme_id}}
       {{i18n "admin.customize.theme_owner"}}
       {{#link-to "adminCustomizeThemes.show" model.theme_id}}{{model.theme_name}}{{/link-to}}

config/locales/client.en.yml

@@ -2796,6 +2796,9 @@ en:
         color: "Color"
         opacity: "Opacity"
         copy: "Copy"
+        copy_to_clipboard: "Copy to Clipboard"
+        copied_to_clipboard: "Copied to Clipboard"
+        copy_to_clipboard_error: "Error copying data to Clipboard"
         theme_owner: "Not editable, owned by:"
         email_templates:
           title: "Email Templates"