Publish 5.0.0 release 🚀

Sketch-Icons.sketchplugin/Contents/Sketch/manifest.json

@@ -1,7 +1,7 @@
 {
   "compatibleVersion": 47,
   "bundleVersion": 1,
-  "version": "4.0.6",
+  "version": "5.0.0",
   "name": "Sketch-Icons",
   "identifier": "com.amoreaux.sketch-icons",
   "description": "Import your icons, apply a color mask and create a dynamic icons library.",
@@ -31,26 +31,26 @@
       "script": "commands.js",
       "handler": "addMaskOnSelectedArtboards",
       "shortcut": "command shift m",
-      "name": "Apply color mask...",
+      "name": "Apply color...",
       "identifier": "mask.selected.artboard",
       "icon": "icons/icon-square-1.jpg",
-      "description": "Apply mask on selected artboards"
+      "description": "Apply color on selected artboards"
     },
     {
       "script": "commands.js",
       "handler": "addMaskOnSelectedArtboards",
-      "name": "Replace color mask...",
+      "name": "Replace color...",
       "identifier": "update.mask.selected.artboard",
       "icon": "icons/icon-square-1.jpg",
-      "description": "Replace mask on selected artboard"
+      "description": "Replace color on selected artboard"
     },
     {
       "script": "commands.js",
       "handler": "removeMaskOnSelectedArtboards",
-      "name": "Remove color mask",
+      "name": "Remove color",
       "identifier": "remove.mask.selected.artboard",
       "icon": "icons/icon-square-1.jpg",
-      "description": "Remove mask on selected artboard"
+      "description": "Remove color on selected artboard"
     },
     {
       "script": "commands.js",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Sketch-Icons",
-  "version": "4.0.6",
+  "version": "5.0.0",
   "identifier": "sketch.icons.plugin",
   "description": "Import your icons, apply a color mask and create a dynamic icons library.",
   "license": "MIT",

src/commands.js

@@ -21,7 +21,7 @@ export function importIcons(context) {
   params.listIcon = files.selectIconsFiles()
   if (!params.listIcon.length) return
   const importedIcons = artboardProvider.initImport(context, params, artboardProvider.initImportIcons)
-  const label = (params.withMask) ? 'import-mask' : 'import';
+  const label = (params.withColor) ? 'import-mask' : 'import';
   analytics.action(context, 'icons', 'import', label, importedIcons)
 }
 
@@ -55,7 +55,7 @@ export function organizeIcons(context) {
   params.listIcon = selectedLayers
   artboardProvider.initImport(context, params, artboardProvider.initOrganizeIcons)
   params.listIcon.forEach(icon => icon.removeFromParent())
-  const label = (params.withMask) ? 'organize-mask' : 'organize';
+  const label = (params.withColor) ? 'organize-mask' : 'organize';
   analytics.action(context, 'icons', 'organize', label, params.listIcon.length)
 }
 
@@ -83,7 +83,7 @@ export function removeMaskOnSelectedArtboards(context) {
   const selectedArtboardsAndSymbols = utils.getSelectedArtboardsAndSymbols(context);
   if (selectedArtboardsAndSymbols.length === 0) return modals.newErrorModal('No artboards selected', 'Please select one or more artboards to add a mask.')
   selectedArtboardsAndSymbols.forEach((rootElement) => {
-    maskProvider.removeMask(context, rootElement.object)
+    maskProvider.removeColor(context, rootElement.object)
   })
   analytics.action(context, 'icons', 'remove mask', 'remove mask', selectedArtboardsAndSymbols.length)
 }

src/manifest.json

@@ -1,7 +1,7 @@
 {
-  "compatibleVersion": 47,
+  "compatibleVersion": 52,
   "bundleVersion": 1,
-  "version": "4.0.6",
+  "version": "5.0.0",
   "name": "Sketch-Icons",
   "identifier": "com.amoreaux.sketch-icons",
   "description": "Import your icons, apply a color mask and create a dynamic icons library.",
@@ -31,26 +31,26 @@
       "script": "./commands.js",
       "handler": "addMaskOnSelectedArtboards",
       "shortcut": "command shift m",
-      "name": "Apply color mask...",
+      "name": "Apply color...",
       "identifier": "mask.selected.artboard",
       "icon": "icons/icon-square-1.jpg",
-      "description" : "Apply mask on selected artboards"
+      "description" : "Apply color on selected artboards"
     },
     {
       "script": "./commands.js",
       "handler": "addMaskOnSelectedArtboards",
-      "name": "Replace color mask...",
+      "name": "Replace color...",
       "identifier": "update.mask.selected.artboard",
       "icon": "icons/icon-square-1.jpg",
-      "description" : "Replace mask on selected artboard"
+      "description" : "Replace color on selected artboard"
     },
     {
       "script": "./commands.js",
       "handler": "removeMaskOnSelectedArtboards",
-      "name": "Remove color mask",
+      "name": "Remove color",
       "identifier": "remove.mask.selected.artboard",
       "icon": "icons/icon-square-1.jpg",
-      "description" : "Remove mask on selected artboard"
+      "description" : "Remove color on selected artboard"
     },
     {
       "script": "./commands.js",

src/modals/modals.js

@@ -15,18 +15,18 @@ function maskModal(context) {
   this.modalParams = {
     messageText: 'Configure your color mask',
     informativeText: 'Select your library and choose a color to apply as mask. Your layers will all be combined.',
-    height: 160,
+    height: 190,
     width: 300,
     lineHeight: 35
   };
 
   this.coeffCurrentHeight = 0;
   this.isLibrarySource = true;
   this.adjustHeight = 0;
+  this.colorSource = 'sharedStyle';
 
   constructBase.call(this, 'Continue');
-
-  makeMaskRadioButtonParams.call(this);
+  makeMaskRadioButtonParams.call(this, context);
   makeMaskLibraryParams.call(this, context);
   makeMaskColorPickerParams.call(this, context);
 
@@ -40,6 +40,8 @@ function maskModal(context) {
 
     let colorLib = this.colorLibsMenuParams.selectedItem();
     result.colorLib = (colorLib) ? this.colorLibsMenuParams.representedObject() : null;
+
+    result.colorSource = this.colorSource;
   } else {
     result.colorPicker = this.colorPickerColor
   }
@@ -48,7 +50,6 @@ function maskModal(context) {
 }
 
 function importModal(context) {
-  let usePresets;
   this.settingsValues = settingsProvider.getSettings(context, 'default');
 
   this.modalParams = {
@@ -58,21 +59,15 @@ function importModal(context) {
     lineHeight: 35
   };
 
-  if (settingsProvider.hasValue(this.settingsValues.presets)) {
-    this.modalParams.height = 300 + this.settingsValues.presets.data.split(',').length * 30
-    usePresets = true
-  } else {
-    this.modalParams.height = 300;
-    usePresets = false
-  }
-
-  this.modalParams.height = settingsProvider.hasValue(this.settingsValues.presets) ? 300 + this.settingsValues.presets.data.split(',').length * 30 : 300
+  const usePresets = settingsProvider.hasValue(this.settingsValues.presets)
+  this.modalParams.height = settingsProvider.hasValue(this.settingsValues.presets) ? 330 + this.settingsValues.presets.data.split(',').length * 30 : 330
 
   this.coeffCurrentHeight = 0;
   this.isLibrarySource = true;
   this.adjustHeight = 0;
+  this.colorSource = 'sharedStyle';
 
-  constructBase.call(this, 'Continue')
+  constructBase.call(this, 'Continue');
   if (usePresets) {
     makePresetsParams.call(this)
   } else {
@@ -96,7 +91,7 @@ function importModal(context) {
   const result = {
     button: this.modal.runModal(),
     convertSymbol: this.symbolParams.state(),
-    withMask: !!this.checkboxMaskParams.state()
+    withColor: !!this.checkboxMaskParams.state()
   }
 
   if (usePresets) {
@@ -114,15 +109,16 @@ function importModal(context) {
     result.iconPadding = parseInt(this.artboardPadding.stringValue())
   }
 
-  if (result.withMask && this.isLibrarySource) {
+  if (result.withColor && this.isLibrarySource) {
     let colorMenu = this.colorsMenuParams.selectedItem()
     result.color = (colorMenu) ? this.colorsMenuParams.representedObject() : null
 
     let colorLib = this.colorLibsMenuParams.selectedItem()
     result.colorLib = (colorLib) ? this.colorLibsMenuParams.representedObject() : null
 
-    if (!result.color) result.withMask = false
-  } else if (result.withMask) {
+    if (!result.color) result.withColor = false
+    result.colorSource = this.colorSource;
+  } else if (result.withColor) {
     result.colorPicker = this.colorPickerColor || MSColor.blackColor()
   }
   return result
@@ -197,7 +193,7 @@ function makeArtboardParams() {
 
   this.coeffCurrentHeight++
 
-  const textBoxLabel = utils.createLabel('Artboard size', 0, this.modalParams.height - this.modalParams.lineHeight, 150, 20)
+  const textBoxLabel = utils.createLabel('Artboard Size', 0, this.modalParams.height - this.modalParams.lineHeight, 150, 20)
   this.view.addSubview(textBoxLabel)
   const textBox = NSTextField.alloc().initWithFrame(NSMakeRect(150, this.modalParams.height - this.modalParams.lineHeight, 50, 20));
   textBox.setStringValue(24);
@@ -210,7 +206,7 @@ function makeArtboardParams() {
   const paddingBoxLabel = utils.createLabel('Artboard Padding', 0, this.modalParams.height - this.modalParams.lineHeight * this.coeffCurrentHeight, 150, 20)
   this.view.addSubview(paddingBoxLabel)
   const paddingBox = NSTextField.alloc().initWithFrame(NSMakeRect(150, this.modalParams.height - this.modalParams.lineHeight * this.coeffCurrentHeight, 50, 20));
-  paddingBox.setStringValue(4);
+  paddingBox.setStringValue(0);
   this.view.addSubview(paddingBox)
   const paddingBoxUnit = utils.createLabel('px', 205, this.modalParams.height - this.modalParams.lineHeight * this.coeffCurrentHeight, 50, 20)
   this.view.addSubview(paddingBoxUnit)
@@ -267,46 +263,49 @@ function makeMaskCheckboxParams() {
 
   this.coeffCurrentHeight++
 
-  const maskCheckboxLabel = utils.createLabel('Mask', 0, this.modalParams.height - this.modalParams.lineHeight * this.coeffCurrentHeight - this.adjustHeight, 150, 20)
+  const maskCheckboxLabel = utils.createLabel('Color', 0, this.modalParams.height - this.modalParams.lineHeight * this.coeffCurrentHeight - this.adjustHeight, 150, 20)
   this.view.addSubview(maskCheckboxLabel)
 
   const maskCheckBox = NSButton.alloc().initWithFrame(NSMakeRect(150, this.modalParams.height - this.modalParams.lineHeight * this.coeffCurrentHeight - this.adjustHeight, 200, 20));
   maskCheckBox.setButtonType(NSSwitchButton);
   maskCheckBox.setState(false);
   maskCheckBox.setFont(NSFont.systemFontOfSize_(13));
-  maskCheckBox.setTitle('Add color mask')
+  maskCheckBox.setTitle('Apply color')
   this.view.addSubview(maskCheckBox);
 
   this.checkboxMaskParams = maskCheckBox
 }
 
-function makeMaskRadioButtonParams() {
+function makeMaskRadioButtonParams(context) {
 
   this.coeffCurrentHeight++;
   this.coeffCurrentHeight++;
+  this.coeffCurrentHeight++;
 
   const radioButtonLabel = utils.createLabel('Color Source', 0, this.modalParams.height - this.modalParams.lineHeight * this.coeffCurrentHeight - this.adjustHeight + 40, 150, 20)
   this.view.addSubview(radioButtonLabel)
 
   const buttonFormat = NSButtonCell.alloc().init();
   buttonFormat.setButtonType(NSRadioButton);
   const matrixFormat = NSMatrix.alloc().initWithFrame_mode_prototype_numberOfRows_numberOfColumns(
-    NSMakeRect(150, this.modalParams.height - this.modalParams.lineHeight * this.coeffCurrentHeight - this.adjustHeight, 300, 60),
+    NSMakeRect(150, this.modalParams.height - this.modalParams.lineHeight * this.coeffCurrentHeight - this.adjustHeight, 300, 90),
     NSRadioModeMatrix,
     buttonFormat,
-    2,
+    3,
     1
   );
   matrixFormat.setCellSize(CGSizeMake(300, 25));
   const cells = matrixFormat.cells();
-  cells[0].setTitle("From Symbols");
+  cells[0].setTitle("From Shared Style");
   cells[0].setFont(NSFont.systemFontOfSize_(13));
-  cells[1].setTitle("From Color picker");
+  cells[1].setTitle("From Symbol");
   cells[1].setFont(NSFont.systemFontOfSize_(13));
+  cells[2].setTitle("From Color picker");
+  cells[2].setFont(NSFont.systemFontOfSize_(13));
 
   this.view.addSubview(matrixFormat);
 
-  setListenerRadioButon.call(this, cells)
+  setListenerRadioButon.call(this, cells, context)
 
   this.radioParams = matrixFormat
   this.radioButtonLabel = radioButtonLabel
@@ -322,7 +321,7 @@ function makeMaskLibraryParams(context) {
 
   this.coeffCurrentHeight++
 
-  const colorMenuLabel = utils.createLabel('Color', 0, this.modalParams.height - this.modalParams.lineHeight * this.coeffCurrentHeight - this.adjustHeight, 150, 25)
+  const colorMenuLabel = utils.createLabel('Select Color', 0, this.modalParams.height - this.modalParams.lineHeight * this.coeffCurrentHeight - this.adjustHeight, 150, 25)
   this.view.addSubview(colorMenuLabel)
   const colorMenu = NSPopUpButton.alloc().initWithFrame(NSMakeRect(150, this.modalParams.height - this.modalParams.lineHeight * this.coeffCurrentHeight - this.adjustHeight, 130, 30));
 
@@ -390,25 +389,37 @@ function addListenerOnMaskCheckbox() {
       removePickerButton.call(this)
       this.radioParams.cells()[0].state = true
       this.radioParams.cells()[1].state = false
+      this.radioParams.cells()[2].state = false
     }
   });
 }
 
-function setListenerRadioButon(cells) {
+function setListenerRadioButon(cells, context) {
   function setState(item) {
-    if (String(item.selectedCells()[0].title()) === 'From Symbols') {
+    const title = String(item.selectedCells()[0].title());
+    if (title === 'From Symbol') {
       addLibraryColorsFields.call(this)
       removePickerButton.call(this)
       this.isLibrarySource = true
-    } else {
+      this.colorSource = 'symbol';
+      libraries.updateColorMenu.call(this, this.colorLibsMenuParams.selectedItem(), this.colorsMenuParams)
+    } else if (title === 'From Color picker') {
       removeLibraryColorsFields.call(this)
       addPickerButton.call(this)
       this.isLibrarySource = false
+    } else {
+      this.isLibrarySource = true
+      addLibraryColorsFields.call(this)
+      removePickerButton.call(this)
+      this.colorSource = 'sharedStyle';
+      libraries.updateColorMenu.call(this, this.colorLibsMenuParams.selectedItem(), this.colorsMenuParams)
     }
   }
 
+  this.context = context;
   cells[0].setCOSJSTargetFunction(setState.bind(this));
   cells[1].setCOSJSTargetFunction(setState.bind(this));
+  cells[2].setCOSJSTargetFunction(setState.bind(this));
 }
 
 function setEnabledColorLibraryMenu(enabled) {

src/modals/settings.js

@@ -87,7 +87,7 @@ function convertStrokeToFillParams() {
   this.view.addSubview(convertStrokeCheckBox);
 
   this.coeffCurrentHeight++;
-  addDescription.call(this, 'this will allow you to add a dynamic color mask ', this.lineOne + 30)
+  addDescription.call(this, 'This will allow you to add a dynamic color ', this.lineOne + 30)
   addDescription.call(this, 'over your outlined icons.', this.lineTwo + 30)
 
   this.convertStroke = convertStrokeCheckBox;

src/providers/artboard.js

@@ -140,6 +140,7 @@ function initOrganizeIcons(context, params) {
       const svgData = NSString.alloc().initWithData_encoding(exporter.data(), NSUTF8StringEncoding);
       // await processSVG(context, newRootObject, params, String(svgData));
       importerProvider.addSVGNew(context, newRootObject, params, svgData, true);
+      if (params.withColor) maskProvider.addColor(context, newRootObject, params);
       workingRootObject.push(newRootObject)
     } catch (e) {
       logger.error(e);
@@ -214,7 +215,7 @@ function setArtboardsSize(params, preset) {
  */
 function processSVG(context, rootObject, params, svgData) {
   importerProvider.addSVG(context, rootObject, params, svgData, true);
-  if (params.withMask) maskProvider.addColor(context, rootObject, params);
+  if (params.withColor) maskProvider.addColor(context, rootObject, params);
   return context.command.setValue_forKey_onLayer(params.iconPadding, 'padding', rootObject);
 }