set icon for button closes #17 👨‍🎨

README.md

@@ -15,6 +15,7 @@ Press `ctrl-alt-o` to toggle touchbar
 - Color picker
 - Emoji Picker
 - Edit Touchbar
+- Set icons
 
 ![touchbar screenshot](touch_screenshot.png)
 
@@ -35,5 +36,5 @@ Go to `Settings -> Packages -> touchbar` and update the `Elements` input. This i
 Example:
 
 ```js
-[{"type":"label","name":"Config 1524399902796","label":"Atom Touchbar","color":"#e0fcf0"},{"name":"comment-button","type":"button","label":"//","command":"editor:toggle-line-comments","color":"#5712d6"},{"name":"color-picker","type":"color-picker"},{"name":"spacer","type":"button","size":"small","label":"Tree","command":"tree-view:toggle","color":"#00716c"},{"name":"toggle-command-palette","type":"button","label":"🎨","command":"command-palette:toggle"},{"type":"popover","label":"😄","elements":[{"name":"emoji-scrubber","type":"scrubber","label":"😄","items":"emojis"}],"command":""},{"name":"toggle-github","type":"button","label":"GitHub","color":"#919191","command":"github:toggle-github-tab"},{"name":"edit-touchbar","type":"button","label":"Touchbar","command":"touchbar:edit","color":"#6b2f4f"}]
+[{"type":"label","name":"Config 1524399902796","label":"Atom Touchbar","color":"#e0fcf0"},{"name":"comment-button","type":"button","label":"//","command":"editor:toggle-line-comments","color":"#5712d6","icon":"","iconColor":"default"},{"name":"color-picker","type":"color-picker"},{"name":"spacer","type":"button","size":"small","label":"","command":"tree-view:toggle","color":"#00716c","icon":"NSTouchBarSidebarTemplate","iconColor":"white"},{"name":"toggle-command-palette","type":"button","label":"🎨","command":"command-palette:toggle"},{"type":"popover","label":"😄","elements":[{"name":"emoji-scrubber","type":"scrubber","label":"😄","items":"emojis"}],"command":"","icon":""},{"name":"toggle-github","type":"button","label":"GitHub","color":"#919191","command":"github:toggle-github-tab"},{"name":"edit-touchbar","type":"button","label":"Touchbar","command":"touchbar:edit","color":"#6b2f4f"}]
 ```

lib/touchbar-edit-view.js

@@ -3,7 +3,7 @@
 
 import {Disposable} from 'atom'
 import etch from 'etch'
-const {app, BrowserWindow, TouchBar} = require('remote')
+const {app, BrowserWindow, TouchBar, nativeImage} = require('remote')
 const {TouchBarLabel, TouchBarButton, TouchBarSpacer, TouchBarSlider} = TouchBar
 
 import TouchBarItem from './touchbar-item'
@@ -36,6 +36,34 @@ export default class TouchBarEditView {
     atom.config.set('touchbar.buttons', JSON.stringify(oldConfig))
   }
 
+  iconChanged(newIcon, obj) {
+      let oldConfig = JSON.parse(atom.config.get('touchbar.buttons'))
+      let newElementIndex = 0
+      Object.values(oldConfig).map((e, i) => {
+        if(e.name == obj.name) {
+          newElementIndex = i
+        }
+      })
+      let newElement = obj
+      newElement.icon = newIcon
+      oldConfig[newElementIndex] = newElement
+      atom.config.set('touchbar.buttons', JSON.stringify(oldConfig))
+  }
+
+  iconColorChanged(newIconColor, obj) {
+      let oldConfig = JSON.parse(atom.config.get('touchbar.buttons'))
+      let newElementIndex = 0
+      Object.values(oldConfig).map((e, i) => {
+        if(e.name == obj.name) {
+          newElementIndex = i
+        }
+      })
+      let newElement = obj
+      newElement.iconColor = newIconColor
+      oldConfig[newElementIndex] = newElement
+      atom.config.set('touchbar.buttons', JSON.stringify(oldConfig))
+  }
+
   commandChanged(newCommand, obj) {
       let oldConfig = JSON.parse(atom.config.get('touchbar.buttons'))
       let newElementIndex = 0
@@ -60,6 +88,9 @@ export default class TouchBarEditView {
       })
       let newElement = obj
       newElement.type = newType
+      if(newType === 'popover') {
+        newElement.elements = []
+      }
       oldConfig[newElementIndex] = newElement
       atom.config.set('touchbar.buttons', JSON.stringify(oldConfig))
   }
@@ -115,16 +146,22 @@ export default class TouchBarEditView {
       return (
         <div class="edit-panel">
           <h1>Current objects in Touchbar:</h1>
+          <p><b>Info about icons:</b> Please take icon names from here: <a href="http://hetima.github.io/fucking_nsimage_syntax/">http://hetima.github.io/fucking_nsimage_syntax/</a>. TouchBar Icons (beginning at the second third of the page) look best!</p>
           <span class="edit-add icon icon-plus" onClick={() => this.addNewConfig()} value="Add new Object"/>
           {
             Object.values(JSON.parse(atom.config.get('touchbar.buttons'))).map((obj, i) => {
               return <TouchBarItem
                 name = {obj.name}
                 type = {obj.type}
                 label = {obj.label}
+                icon = {obj.icon}
+                iconColor = {obj.iconColor}
                 command = {obj.command}
                 color = {obj.color}
+                items = {obj.elements}
                 onLabelChanged = {(newLabel) => this.labelChanged(newLabel, obj)}
+                onIconChanged = {(newIcon) => this.iconChanged(newIcon, obj)}
+                onIconColorChanged = {(newIconColor) => this.iconColorChanged(newIconColor, obj)}
                 onCommandChanged = {(newCommand) => this.commandChanged(newCommand, obj)}
                 onTypeChanged = {(newType) => this.typeChanged(newType, obj)}
                 onColorChanged = {(newColor) => this.colorChanged(newColor, obj)}

lib/touchbar-item.js

@@ -39,18 +39,27 @@ export default class TouchBarItem {
   constructor(props) {
     this.props = props
     etch.initialize(this)
+
+    console.log(this.props.items === undefined)
   }
 
   update(props) {
     this.props = props
     return etch.update(this)
   }
 
-
   onLabelChanged() {
     this.props.onLabelChanged(document.getElementById(`${this.props.name}input_label`).value)
   }
 
+  onIconChanged() {
+    this.props.onIconChanged(document.getElementById(`${this.props.name}input_icon`).value)
+  }
+
+  onIconColorChanged() {
+    this.props.onIconColorChanged(document.getElementById(`${this.props.name}_select_icon_color`).value)
+  }
+
   onTypeChanged() {
     this.props.onTypeChanged(document.getElementById(`${this.props.name}_select_type`).value)
   }
@@ -91,6 +100,12 @@ export default class TouchBarItem {
             })}
           </select>
           <input type="text" class="input-text inline-block label" id={`${this.props.name}input_label`} value={ this.props.label || "" } placeholder="No label" onKeyUp={this.onLabelChanged}></input>
+          <input type="text" class="input-text inline-block icon-input" id={`${this.props.name}input_icon`} value={ this.props.icon || "" } placeholder="No icon" onKeyUp={this.onIconChanged}></input>
+          <select id={`${this.props.name}_select_icon_color`} class="input-select inline-block" onchange={() => this.onIconColorChanged()}>
+            <option value="default" selected>Default</option>
+            <option value="white">White</option>
+            <option value="black">Black</option>
+          </select>
           <input type="text" class="input-text inline-block command" id={`${this.props.name}input_command`} value={ this.props.command || "" } placeholder="No command" onKeyUp={this.onCommandChanged}></input>
           <input type="color" class="input-color inline-block" id={`${this.props.name}input_color`} value={ this.props.color || "" } onchange={() => this.onColorChanged()}></input>
           <span class="remove icon icon-trashcan inline-block" onClick={() => this.onRemove()} value="Remove"/>

lib/touchbar.js

@@ -3,7 +3,7 @@
 import TouchbarEditView from './touchbar-edit-view';
 import {CompositeDisposable} from 'atom';
 
-const {app, BrowserWindow, TouchBar, Point, Range} = require('remote')
+const {app, BrowserWindow, TouchBar, Point, Range, nativeImage} = require('remote')
 
 const {
   TouchBarButton,
@@ -38,7 +38,7 @@ export default {
       title: 'Elements',
       description: 'Configure your toutchbar elements here',
       type: 'string',
-      default: '[{ "name": "my-new-label", "type": "label", "label": "my 🔥 label", "color": "#FF9300" }, { "name": "spacer", "type": "spacer", "size": "small" }, { "name": "comment-button", "type": "button", "label": "//", "command": "editor:toggle-line-comments", "color": "#5712d6" }, { "name": "beautify-button", "type": "button", "label": "💅", "command": "atom-beautify:beautify-editor", "color": "#83FF8F" }, { "name": "color-picker", "type": "color-picker" }, { "type": "popover", "label": "😄", "elements": [{ "name": "emoji-scrubber", "type": "scrubber", "label": "😄", "items": "emojis" } ] }, { "name": "toggle-command-palette", "type": "button", "label": "🎨", "command": "command-palette:toggle" }, {"name":"edit-touchbar","type":"button","label":"Edit Touchbar","command":"touchbar:edit","color":"#83FF8F"}, {"name":"toggle-github","type":"button","label":"GitHub","color":"#0033cc","command":"github:toggle-github-tab"}]'
+      default: '[{"type":"label","name":"Config 1524399902796","label":"Atom Touchbar","color":"#e0fcf0"},{"name":"comment-button","type":"button","label":"//","command":"editor:toggle-line-comments","color":"#5712d6","icon":"","iconColor":"default"},{"name":"color-picker","type":"color-picker"},{"name":"spacer","type":"button","size":"small","label":"","command":"tree-view:toggle","color":"#00716c","icon":"NSTouchBarSidebarTemplate","iconColor":"white"},{"name":"toggle-command-palette","type":"button","label":"🎨","command":"command-palette:toggle"},{"type":"popover","label":"😄","elements":[{"name":"emoji-scrubber","type":"scrubber","label":"😄","items":"emojis"}],"command":"","icon":""},{"name":"toggle-github","type":"button","label":"GitHub","color":"#919191","command":"github:toggle-github-tab"},{"name":"edit-touchbar","type":"button","label":"Touchbar","command":"touchbar:edit","color":"#6b2f4f"}]'
     }
   },
 
@@ -100,9 +100,17 @@ export default {
     elements.map((e, i) => {
       switch (e.type) {
         case "button":
+          let iconColor = null
+          if(e.iconColor === 'white' ) {
+            iconColor = [-1, 0, 1]
+          }
+          if(e.iconColor === 'black' ) {
+            iconColor = [-1, 1, 0]
+          }
           // creating new button
           myTouchBarElements.push(new TouchBarButton({
             label: e.label,
+            icon: e.icon ? nativeImage.createFromNamedImage(e.icon, iconColor) : null,
             click: () => {
               var activeElement = (document.activeElement === document.body) ? atom.views.getView(atom.workspace) : document.activeElement
               atom.commands.dispatch(activeElement, e.command);
@@ -154,16 +162,25 @@ export default {
           break;
 
         case "popover":
+          let popIconColor = null
+          if(e.iconColor === 'white' ) {
+            iconColor = [-1, 0, 1]
+          }
+          if(e.iconColor === 'black' ) {
+            iconColor = [-1, 1, 0]
+          }
+
           myTouchBarElements.push(new TouchBarPopover({
             label: e.label,
+            icon: e.icon ? nativeImage.createFromNamedImage(e.icon, popIconColor) : null,
             items: this.arrayToTouchBarElements(e.elements)
           }))
           break;
 
         case "scrubber":
           myTouchBarElements.push(new TouchBarScrubber({
             items: emojis,
-            highlight: (i) => {
+            select: (i) => {
               atom.workspace.getActiveTextEditor().insertText(emojis[i].label)
             },
             selectedStyle: "outline",

styles/touchbar.less

@@ -41,6 +41,10 @@
   flex-grow: 1;
 }
 
+.icon-input {
+  flex-grow: 2;
+}
+
 .command {
   flex-grow: 4;
 }