version 0.2.10

- Hotkeyの設定機能 - Stylus refactor
2025-12-15 18:56:22 +00:00 · 2015-09-02 01:02:04 +09:00
parent e317075815
commit c6307e4ad3
12 changed files with 219 additions and 65 deletions
--- a/browser/main/Components/AboutModal.jsx
+++ b/browser/main/Components/AboutModal.jsx
@@ -1,6 +1,3 @@
-var remote = require('remote')
-var version = remote.getGlobal('version')
-
 var React = require('react/addons')

 var ExternalLink = require('../Mixins/ExternalLink')
@@ -19,8 +16,9 @@ module.exports = React.createClass({
    }
  },
  render: function () {
+    var version = global.version
    return (
-      <div className='AboutModal modal'>
+      <div className='PreferencesModal sideNavModal modal'>
        <div className='about1'>
          <img className='logo' src='resources/favicon-230x230.png'/>
          <div className='appInfo'>Boost {version == null || version.length === 0 ? 'DEV version' : 'v' + version}</div>
--- a/browser/main/Components/EditProfileModal.jsx
+++ b/browser/main/Components/EditProfileModal.jsx
@@ -69,7 +69,6 @@ module.exports = React.createClass({
    this.setState({
      passwordSubmitStatus: 'sending'
    }, function () {
-      console.log(this.state.password)
      Hq.changePassword(this.state.password)
        .then(function (res) {
          this.setState({
@@ -103,9 +102,9 @@ module.exports = React.createClass({
    }

    return (
-      <div className='EditProfileModal modal tabModal'>
+      <div className='EditProfileModal sideNavModal modal'>
        <div className='leftPane'>
-          <div className='tabLabel'>Edit profile</div>
+          <div className='modalLabel'>Edit profile</div>
          <div className='tabList'>
            <button className={this.state.currentTab === 'userInfo' ? 'active' : ''} onClick={this.selectTab('userInfo')}><i className='fa fa-user fa-fw'/> User Info</button>
            <button className={this.state.currentTab === 'password' ? 'active' : ''} onClick={this.selectTab('password')}><i className='fa fa-lock fa-fw'/> Password</button>
@@ -119,7 +118,7 @@ module.exports = React.createClass({
  },
  renderUserInfoTab: function () {
    return (
-      <div className='userInfoTab'>
+      <div className='userInfoTab tab'>
        <div className='formField'>
          <label>Profile Name</label>
          <input valueLink={this.linkState('user.profileName')}/>
@@ -142,18 +141,18 @@ module.exports = React.createClass({
  },
  renderPasswordTab: function () {
    return (
-      <div className='passwordTab'>
+      <div className='passwordTab tab'>
        <div className='formField'>
          <label>Current password</label>
-          <input valueLink={this.linkState('password.currentPassword')}/>
+          <input type='password' valueLink={this.linkState('password.currentPassword')}/>
        </div>
        <div className='formField'>
          <label>New password</label>
-          <input valueLink={this.linkState('password.newPassword')}/>
+          <input type='password' valueLink={this.linkState('password.newPassword')}/>
        </div>
        <div className='formField'>
          <label>Confirmation</label>
-          <input valueLink={this.linkState('password.passwordConfirmation')}/>
+          <input type='password' valueLink={this.linkState('password.passwordConfirmation')}/>
        </div>

        <div className='formConfirm'>
--- a/browser/main/Components/HomeNavigator.jsx
+++ b/browser/main/Components/HomeNavigator.jsx
@@ -11,7 +11,7 @@ var Modal = require('../Mixins/Modal')

 var UserStore = require('../Stores/UserStore')

-var AboutModal = require('./AboutModal')
+var PreferencesModal = require('./PreferencesModal')
 var PlanetCreateModal = require('./PlanetCreateModal')
 var TeamCreateModal = require('./TeamCreateModal')
 var LogoutModal = require('./LogoutModal')
@@ -65,8 +65,8 @@ module.exports = React.createClass({
  openTeamCreateModal: function () {
    this.openModal(TeamCreateModal, {user: this.state.currentUser, transitionTo: this.transitionTo})
  },
-  openAboutModal: function () {
-    this.openModal(AboutModal)
+  openPreferencesModal: function () {
+    this.openModal(PreferencesModal)
  },
  openPlanetCreateModal: function () {
    this.openModal(PlanetCreateModal, {transitionTo: this.transitionTo})
@@ -168,7 +168,7 @@ module.exports = React.createClass({

        <ul className='controlGroup'>
          <li>
-            <button onClick={this.openAboutModal}><i className='fa fa-info-circle fa-fw'/> About this app</button>
+            <button onClick={this.openPreferencesModal}><i className='fa fa-gears fa-fw'/> Preferences</button>
          </li>
          <li>
            <button onClick={this.handleLogoutClick}><i className='fa fa-sign-out fa-fw'/> Log out</button>
--- a/browser/main/Components/PlanetSettingModal.jsx
+++ b/browser/main/Components/PlanetSettingModal.jsx
@@ -125,9 +125,9 @@ module.exports = React.createClass({
    content = this.state.currentTab === 'profile' ? this.renderPlanetProfileTab() : this.renderPlanetDeleteTab()

    return (
-      <div className='PlanetSettingModal modal tabModal'>
+      <div className='PlanetSettingModal sideNavModal modal'>
        <div className='leftPane'>
-          <h1 className='tabLabel'>Planet setting</h1>
+          <h1 className='modalLabel'>Planet setting</h1>
          <nav className='tabList'>
            <button onClick={this.activePlanetProfile} className={this.state.currentTab === 'profile' ? 'active' : ''}><i className='fa fa-globe fa-fw'/> Planet profile</button>
            <button onClick={this.activePlanetDelete} className={this.state.currentTab === 'delete' ? 'active' : ''}><i className='fa fa-trash fa-fw'/> Delete Planet</button>
@@ -142,7 +142,7 @@ module.exports = React.createClass({
  },
  renderPlanetProfileTab: function () {
    return (
-      <div className='planetProfileTab'>
+      <div className='planetProfileTab tab'>
        <div className='formField'>
          <label>Planet name </label>
          <input valueLink={this.linkState('planet.name')}/>
@@ -169,7 +169,7 @@ module.exports = React.createClass({
    var disabled = !this.state.deleteConfirmation.match(new RegExp('^' + this.props.planet.userName + '/' + this.props.planet.name + '$'))

    return (
-      <div className='planetDeleteTab'>
+      <div className='planetDeleteTab tab'>
        <p>Are you sure to destroy <strong>'{this.props.planet.userName + '/' + this.props.planet.name}'</strong>?</p>
        <p>If you are sure, write <strong>'{this.props.planet.userName + '/' + this.props.planet.name}'</strong> to input below and click <strong>'{this.state.randomDeleteText}'</strong> button.</p>
        <input valueLink={this.linkState('deleteConfirmation')} placeholder='userName/planetName'/>
--- a/browser/main/Components/PreferencesModal.jsx
+++ b/browser/main/Components/PreferencesModal.jsx
@@ -0,0 +1,112 @@
+var ipc = require('ipc')
+var remote = require('remote')
+
+var React = require('react/addons')
+
+var LinkedState = require('../Mixins/LinkedState')
+var ExternalLink = require('../Mixins/ExternalLink')
+var KeyCaster = require('../Mixins/KeyCaster')
+
+module.exports = React.createClass({
+  mixins: [LinkedState, ExternalLink, KeyCaster('aboutModal')],
+  propTypes: {
+    close: React.PropTypes.func
+  },
+  getInitialState: function () {
+    var keymap = remote.getGlobal('keymap')
+    console.log(keymap)
+    return {
+      currentTab: 'settings',
+      keymap: keymap
+    }
+  },
+  onKeyCast: function (e) {
+    switch (e.status) {
+      case 'closeModal':
+        this.props.close()
+        break
+    }
+  },
+  activeSettings: function () {
+    this.setState({currentTab: 'settings'})
+  },
+  activeAbout: function () {
+    this.setState({currentTab: 'about'})
+  },
+  saveKeymap: function () {
+    ipc.send('hotkeyUpdated', JSON.stringify(this.state.keymap))
+  },
+  render: function () {
+    var content = this.state.currentTab === 'settings' ? this.renderSettingsTab() : this.renderAboutTab()
+
+    return (
+      <div className='PreferencesModal sideNavModal modal'>
+        <div className='leftPane'>
+          <h1 className='modalLabel'>Preferences</h1>
+          <nav className='tabList'>
+            <button onClick={this.activeSettings} className={this.state.currentTab === 'settings' ? 'active' : ''}><i className='fa fa-gear fa-fw'/> Settings</button>
+            <button onClick={this.activeAbout} className={this.state.currentTab === 'about' ? 'active' : ''}><i className='fa fa-info-circle fa-fw'/> About this app</button>
+          </nav>
+        </div>
+        <div className='rightPane'>
+          {content}
+        </div>
+      </div>
+    )
+  },
+  renderSettingsTab: function () {
+    return (
+      <div className='settingsTab tab'>
+        <div className='categoryLabel'>Hotkey</div>
+        <div className='formField'>
+          <label>Toggle finder</label>
+          <input valueLink={this.linkState('keymap.toggleFinder')}/>
+        </div>
+        <div className='formConfirm'>
+          <button onClick={this.saveKeymap}>Save</button>
+        </div>
+        <div className='example'>
+          <h3>Example</h3>
+          <ul>
+            <li><code>0</code> to <code>9</code></li>
+            <li><code>A</code> to <code>Z</code></li>
+            <li><code>F1</code> to <code>F24</code></li>
+            <li>Punctuations like <code>~</code>, <code>!</code>, <code>@</code>, <code>#</code>, <code>$</code>, etc.</li>
+            <li><code>Plus</code></li>
+            <li><code>Space</code></li>
+            <li><code>Backspace</code></li>
+            <li><code>Delete</code></li>
+            <li><code>Insert</code></li>
+            <li><code>Return</code> (or <code>Enter</code> as alias)</li>
+            <li><code>Up</code>, <code>Down</code>, <code>Left</code> and <code>Right</code></li>
+            <li><code>Home</code> and <code>End</code></li>
+            <li><code>PageUp</code> and <code>PageDown</code></li>
+            <li><code>Escape</code> (or <code>Esc</code> for short)</li>
+            <li><code>VolumeUp</code>, <code>VolumeDown</code> and <code>VolumeMute</code></li>
+            <li><code>MediaNextTrack</code>, <code>MediaPreviousTrack</code>, <code>MediaStop</code> and <code>MediaPlayPause</code></li>
+          </ul>
+        </div>
+      </div>
+    )
+  },
+  renderAboutTab: function () {
+    var version = global.version
+    return (
+      <div className='aboutTab tab'>
+        <div className='about1'>
+          <img className='logo' src='resources/favicon-230x230.png'/>
+          <div className='appInfo'>Boost {version == null || version.length === 0 ? 'DEV version' : 'v' + version}</div>
+        </div>
+
+        <div className='about2'>
+          <div className='externalLabel'>External links</div>
+          <ul className='externalList'>
+            <li><a onClick={this.openExternal} href='http://b00st.io'>Boost Homepage <i className='fa fa-external-link'/></a></li>
+            <li><a onClick={this.openExternal} href='http://boostio.github.io/regulations.html'>Regulation <i className='fa fa-external-link'/></a></li>
+            <li><a onClick={this.openExternal} href='http://boostio.github.io/privacypolicies.html'>Private policy <i className='fa fa-external-link'/></a></li>
+          </ul>
+        </div>
+      </div>
+    )
+  }
+})
--- a/browser/main/Components/TeamSettingsModal.jsx
+++ b/browser/main/Components/TeamSettingsModal.jsx
@@ -176,9 +176,9 @@ module.exports = React.createClass({
    }

    return (
-      <div className='TeamSettingsModal modal tabModal'>
+      <div className='TeamSettingsModal sideNavModal modal'>
        <div className='leftPane'>
-          <div className='tabLabel'>Team settings</div>
+          <div className='modalLabel'>Team settings</div>
          <div className='tabList'>
            <button className={this.state.currentTab === 'teamInfo' ? 'active' : ''} onClick={this.selectTab('teamInfo')}><i className='fa fa-info-circle fa-fw'/> Team Info</button>
            <button className={this.state.currentTab === 'members' ? 'active' : ''} onClick={this.selectTab('members')}><i className='fa fa-users fa-fw'/> Members</button>
@@ -192,7 +192,7 @@ module.exports = React.createClass({
  },
  renderTeamInfoTab: function () {
    return (
-      <div className='userInfoTab'>
+      <div className='userInfoTab tab'>
        <div className='formField'>
          <label>Profile Name</label>
          <input valueLink={this.linkState('team.profileName')}/>
@@ -239,7 +239,7 @@ module.exports = React.createClass({
    var belowLimit = members.length < 5

    return (
-      <div className='membersTab'>
+      <div className='membersTab tab'>
        <table className='memberTable'>
          <thead>
            <tr>