実装 - PlanetArticleListへのAuto scroll追加

Author: Rokt33r

browser/main/Components/PlanetArticleDetail.jsx

@@ -76,7 +76,7 @@ module.exports = React.createClass({
             </div>
 
             <span className='itemControl'>
-              <button onClick={this.openEditModal} className='editButton'>
+              <button id='articleEditButton' onClick={this.openEditModal} className='editButton'>
                 <i className='fa fa-edit fa-fw'></i>
                 <div className='tooltip'>Edit</div>
               </button>
@@ -107,7 +107,7 @@ module.exports = React.createClass({
           </div>
 
           <span className='itemControl'>
-            <button onClick={this.openEditModal} className='editButton'>
+            <button id='articleEditButton' onClick={this.openEditModal} className='editButton'>
               <i className='fa fa-edit fa-fw'></i>
               <div className='tooltip'>Edit</div>
             </button>

browser/main/Components/PlanetArticleList.jsx

@@ -15,9 +15,10 @@ module.exports = React.createClass({
   },
   handleArticleClikck: function (article) {
     if (article.type === 'code') {
-      return function () {
+      return function (e) {
         var params = this.getParams()
 
+        document.getElementById('articleEditButton').focus()
         this.transitionTo('codes', {
           userName: params.userName,
           planetName: params.planetName,
@@ -27,9 +28,10 @@ module.exports = React.createClass({
     }
 
     if (article.type === 'note') {
-      return function () {
+      return function (e) {
         var params = this.getParams()
 
+        document.getElementById('articleEditButton').focus()
         this.transitionTo('notes', {
           userName: params.userName,
           planetName: params.planetName,
@@ -91,7 +93,7 @@ module.exports = React.createClass({
 
     return (
       <div className='PlanetArticleList'>
-        <ul>
+        <ul ref='articles'>
           {articles}
         </ul>
       </div>

browser/main/Containers/PlanetContainer.jsx

@@ -230,6 +230,18 @@ module.exports = React.createClass({
       return
     }
 
+    var listElement = this.refs.list.refs.articles.getDOMNode()
+    var articleElement = listElement.querySelectorAll('li')[index]
+
+    var overflowBelow = listElement.clientHeight + listElement.scrollTop < articleElement.offsetTop + articleElement.clientHeight
+    if (overflowBelow) {
+      listElement.scrollTop = articleElement.offsetTop + articleElement.clientHeight - listElement.clientHeight
+    }
+    var overflowAbove = listElement.scrollTop > articleElement.offsetTop
+    if (overflowAbove) {
+      listElement.scrollTop = articleElement.offsetTop
+    }
+
     if (article.type === 'code') {
       params.localId = article.localId
       this.transitionTo('codes', params)

browser/main/Containers/UserContainer.jsx

@@ -190,7 +190,6 @@ module.exports = React.createClass({
         return this.renderUserHome(currentUser)
       }
     } else if (this.isActive('planet') && user != null && user.userType === 'team') {
-      console.log(user.Members)
       var members = user.Members.map(function (member) {
         return (
           <li key={'user-' + member.id}><Link to='userHome' params={{userName: member.name}}>

browser/styles/main/containers/PlanetContainer.styl

@@ -186,6 +186,7 @@ articleListWidth= 275px
     overflow-y auto
     li
       .articleItem
+        noSelect()
         border solid 2px transparent
         position relative
         height 94px

browser/styles/main/containers/UserContainer.styl

@@ -1,5 +1,6 @@
 .HomeContainer
   .HomeNavigator
+    noSelect()
     background-color planetNavBgColor
     absolute left top bottom
     width 55px

browser/styles/shared/modal.styl

@@ -341,6 +341,7 @@
           padding 0 15px
           border-radius 5px
           margin-left 5px
+          font-size 1em
         button.sendButton
           btnPrimary()
     .confirmation

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boost",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Boost App",
   "main": "main.js",
   "scripts": {