Initial commit

js/components/app-configure/app-configure.html

@@ -0,0 +1,35 @@
+<div class="fn-left">
+  <a @click="appConfigure('save', configure)" title="添加项目" class="ui-project-add" href="javascript:;">
+    <i class="icon-plus"></i>
+    <i class="icon-expand"></i>
+  </a>
+  <a @click="appConfigure('import')" class="ui-import-configure" title="导入配置" href="javascript:;">
+    <i class="icon-import"></i>
+  </a>
+  <a @click="appConfigure('export')" class="ui-export-configure" title="导出配置" href="javascript:;">
+    <i class="icon-export"></i>
+  </a>
+</div>
+<div class="ui-popup fn-hide">
+  <div class="ui-popup-arrow">
+    <em></em>
+    <span></span>
+  </div>
+  <div class="ui-popup-content">
+    <form>
+      <ul>
+        <li>
+          <label>项目名称：</label>
+          <input type="text" placeholder="项目名称"/>
+        </li>
+        <li id="popup-open-dir">
+          <directory label="项目路径"></directory>
+        </li>
+        <li class="ui-popup-control">
+          <input type="submit" class="ui-button" value="确定"/>
+          <input type="button" class="ui-button ui-button-orange" value="取消"/>
+        </li>
+      </ul>
+    </form>
+  </div>
+</div>

js/components/app-configure/index.js

@@ -0,0 +1,26 @@
+/**
+ * Created by nuintun on 2015/11/19.
+ */
+
+'use strict';
+
+var fs = require('fs');
+var path = require('path');
+var ipc = require('ipc-renderer');
+var Vue = require('../../vue/vue');
+
+module.exports = Vue.component('app-configure', {
+  template: fs.readFileSync(path.join(__dirname, 'app-configure.html')).toString(),
+  props: {
+    configure: {
+      type: Object,
+      twoWay: true,
+      required: true
+    }
+  },
+  methods: {
+    appConfigure: function (command, configure){
+      ipc.send('app-configure', command, configure);
+    }
+  }
+});

js/components/app-main/index.js

@@ -0,0 +1,3 @@
+/**
+ * Created by nuintun on 2015/11/20.
+ */

js/components/app-nav/app-nav.html

@@ -0,0 +1,7 @@
+<ul>
+  <li v-for="(index, project) in configure.projects">
+    <a href="javascript:;" :class="{ active: activeIndex === index }" :title="project.name" @click="select(index)">
+      <i class="icon-folder"></i>{{ project.name }}
+    </a>
+  </li>
+</ul>

js/components/app-nav/index.js

@@ -0,0 +1,30 @@
+/**
+ * Created by nuintun on 2015/11/20.
+ */
+
+'use strict';
+
+var fs = require('fs');
+var path = require('path');
+var Vue = require('../../vue/vue');
+
+module.exports = Vue.component('app-nav', {
+  template: fs.readFileSync(path.join(__dirname, 'app-nav.html')).toString(),
+  props: {
+    activeIndex: {
+      type: Number,
+      twoWay: true,
+      required: true
+    },
+    configure: {
+      type: Object,
+      twoWay: true,
+      required: true
+    }
+  },
+  methods: {
+    select: function (index){
+      this.activeIndex = index;
+    }
+  }
+});

js/components/directory/directory.html

@@ -0,0 +1,3 @@
+<label>{{label}}：</label>
+<input type="text" :title="path" :placeholder="label" v-model="path" lazy/>&nbsp;
+<a title="选择项目" href="javascript:;" class="icon-ellipsis" @click="open"></a>

js/components/directory/index.js

@@ -0,0 +1,39 @@
+/**
+ * Created by nuintun on 2015/11/17.
+ */
+
+'use strict';
+
+var fs = require('fs');
+var path = require('path');
+var ipc = require('ipc-renderer');
+var Vue = require('../../vue/vue');
+
+module.exports = Vue.component('directory', {
+  // camelCase in JavaScript
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    path: {
+      type: String,
+      default: ''
+    }
+  },
+  template: fs.readFileSync(path.join(__dirname, 'directory.html')).toString(),
+  methods: {
+    open: function (){
+      ipc.send('open-directory', this.path, this._uid);
+    }
+  },
+  created: function (){
+    var context = this;
+
+    ipc.on('select-directory', function (event, paths, uid){
+      if (context._uid === uid) {
+        context.path = paths[0];
+      }
+    });
+  }
+});

js/components/dynamic-item/dynamic-item.html

@@ -0,0 +1,16 @@
+<ul>
+  <li v-for="(index, item) in items">
+    <span :title="item.name">{{ item.name }}</span>&nbsp;
+    <span :title="item.value">{{ item.value }}</span>
+    <i @click="remove(index)" title="删除" class="icon-trash"></i>
+  </li>
+  <li class="ui-action-bar">
+    <input type="text" :placeholder="nameLabel" v-model="name" lazy @focus="focus('nameError')"/>&nbsp;
+    <input type="text" :placeholder="valueLabel" v-model="value" lazy @focus="focus('valueError')"/>&nbsp;
+    <input type="button" class="ui-button" @click="add" value="添加"/>
+  </li>
+  <li v-show="nameError || valueError" class="ui-item-error">
+    <span :class="nameError ? '' : 'fn-invisible'"><i class="icon-expand"></i>{{ nameLabel }}{{ nameError }}</span>&nbsp;
+    <span :class="valueError ? '' : 'fn-invisible'"><i class="icon-expand"></i>{{ valueLabel }}{{ valueError }}</span>
+  </li>
+</ul>

js/components/dynamic-item/index.js

@@ -0,0 +1,90 @@
+/**
+ * Created by nuintun on 2015/11/17.
+ */
+
+'use strict';
+
+var fs = require('fs');
+var path = require('path');
+var Vue = require('../../vue/vue');
+
+module.exports = Vue.component('dynamic-item', {
+  // camelCase in JavaScript
+  props: {
+    nameLabel: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    valueLabel: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    items: {
+      type: Array,
+      default: function (){
+        return [];
+      }
+    }
+  },
+  template: fs.readFileSync(path.join(__dirname, 'dynamic-item.html')).toString(),
+  data: function (){
+    return {
+      name: '',
+      value: '',
+      _cached: {},
+      nameError: '',
+      valueError: ''
+    };
+  },
+  methods: {
+    add: function (){
+      // trim value
+      this.name = this.name.trim();
+      this.value = this.value.trim();
+
+      // name error
+      if (!this.name) {
+        this.nameError = '不能为空';
+      } else if (this.$data._cached[this.name]) {
+        this.nameError = ' ' + this.name + ' 已存在';
+      } else {
+        this.nameError = '';
+      }
+
+      // value error
+      if (!this.value) {
+        this.valueError = '不能为空';
+      } else {
+        this.valueError = '';
+      }
+
+      // add item
+      if (this.name && this.value && !this.$data._cached[this.name]) {
+        // cache name
+        this.$data._cached[this.name] = true;
+        // add item
+        this.items.push({ name: this.name, value: this.value });
+
+        // clean input
+        this.name = '';
+        this.value = '';
+      }
+    },
+    focus: function (key){
+      this[key] = '';
+    },
+    remove: function (index){
+      var item = this.items[index];
+
+      this.items.splice(index, 1);
+      delete this.$data._cached[item.name];
+    }
+  },
+  created: function (){
+    this.items.forEach(function (item){
+      this.$data._cached[item.name] = true;
+    }, this);
+  }
+});

js/components/project-configure/index.js

@@ -0,0 +1,3 @@
+/**
+ * Created by nuintun on 2015/11/20.
+ */

js/components/window-control/index.js

@@ -0,0 +1,39 @@
+/**
+ * Created by nuintun on 2015/11/19.
+ */
+
+'use strict';
+
+var fs = require('fs');
+var path = require('path');
+var ipc = require('ipc-renderer');
+var Vue = require('../../vue/vue');
+
+module.exports = Vue.component('window-control', {
+  data: function (){
+    return {
+      isMaximized: false
+    }
+  },
+  template: fs.readFileSync(path.join(__dirname, 'window-control.html')).toString(),
+  methods: {
+    tray: function (){
+      ipc.send('window', 'tray');
+    },
+    close: function (){
+      ipc.send('window', 'close');
+    },
+    maximize: function (){
+      ipc.send('window', this.isMaximized ? 'unmaximize' : 'maximize');
+    }
+  },
+  created: function (){
+    var context = this;
+
+    ipc.on('is-maximized', function (event, maximized){
+      context.isMaximized = maximized;
+    });
+
+    ipc.send('window', 'is-maximized');
+  }
+});

js/components/window-control/window-control.html

@@ -0,0 +1,11 @@
+<div class="ui-window-control fn-right">
+  <a @click="tray" title="缩小到托盘区" href="javascript:;">
+    <i class="icon-minimize-tray"></i>
+  </a>
+  <a @click="maximize" :title="isMaximized?'还原':'最大化'" href="javascript:;">
+    <i :class="{ 'icon-maximize' : !isMaximized, 'icon-unmaximize' : isMaximized }"></i>
+  </a>
+  <a @click="close" title="关闭" href="javascript:;">
+    <i class="icon-cross"></i>
+  </a>
+</div>