改善 - PlanetArticleList, PlanetArticleDetail

2025-12-13 17:56:25 +00:00 · 2015-08-22 03:27:42 +09:00
parent 9500f9a8c9
commit 657ebc99df
6 changed files with 156 additions and 100 deletions
--- a/browser/main/Components/PlanetArticleDetail.jsx
+++ b/browser/main/Components/PlanetArticleDetail.jsx
@@ -1,13 +1,13 @@
 var React = require('react/addons')
 var moment = require('moment')

-var CodeViewer = require('../Components/CodeViewer')
-
-var CodeEditModal = require('../Components/CodeEditModal')
-var CodeDeleteModal = require('../Components/CodeDeleteModal')
-var NoteEditModal = require('../Components/NoteEditModal')
-var NoteDeleteModal = require('../Components/NoteDeleteModal')
-var MarkdownPreview = require('../Components/MarkdownPreview')
+var CodeViewer = require('./CodeViewer')
+var CodeEditModal = require('./CodeEditModal')
+var CodeDeleteModal = require('./CodeDeleteModal')
+var NoteEditModal = require('./NoteEditModal')
+var NoteDeleteModal = require('./NoteDeleteModal')
+var MarkdownPreview = require('./MarkdownPreview')
+var ProfileImage = require('./ProfileImage')

 var Modal = require('../Mixins/Modal')
 var ForceUpdate = require('../Mixins/ForceUpdate')
@@ -61,18 +61,24 @@ module.exports = React.createClass({
    if (article.type === 'code') {
      return (
        <div className='PlanetArticleDetail codeDetail'>
-          <div className='viewer-header'>
-            <i className='fa fa-code fa-fw'></i> {article.callSign} <small className='updatedAt'>{moment(article.updatedAt).fromNow()}</small>
-            <span className='control-group'>
+          <div className='detailHeader'>
+            <div className='itemLeft'>
+              <ProfileImage className='profileImage' size='25' email={article.User.email}/>
+              <i className='fa fa-file-text-o fa-fw'></i>
+            </div>
+
+            <div className='itemRight'>
+              <div className='itemInfo'>{moment(article.updatedAt).fromNow()} by <span className='userProfileName'>{article.User.profileName}</span></div>
+              <div className='description'>{article.description}</div>
+              <div className='tags'><i className='fa fa-tags'/>{tags}</div>
+            </div>
+
+            <span className='itemControl'>
              <button onClick={this.openEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
              <button onClick={this.openDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
            </span>
          </div>
-          <div className='viewer-body'>
-            <div className='viewer-detail'>
-              <div className='description'>{article.description}</div>
-              <div className='tags'><i className='fa fa-tags'/>{tags}</div>
-            </div>
+          <div className='detailBody'>
            <div className='content'>
              <CodeViewer code={article.content} mode={article.mode}/>
            </div>
@@ -82,15 +88,24 @@ module.exports = React.createClass({
    }
    return (
      <div className='PlanetArticleDetail noteDetail'>
-        <div className='viewer-header'>
-          <i className='fa fa-file-text-o fa-fw'></i> {article.title} <small className='updatedAt'>{moment(article.updatedAt).fromNow()}</small>
-          <span className='control-group'>
+        <div className='detailHeader'>
+          <div className='itemLeft'>
+            <ProfileImage className='profileImage' size='25' email={article.User.email}/>
+            <i className='fa fa-file-text-o fa-fw'></i>
+          </div>
+
+          <div className='itemRight'>
+            <div className='itemInfo'>{moment(article.updatedAt).fromNow()} by <span className='userProfileName'>{article.User.profileName}</span></div>
+            <div className='description'>{article.title}</div>
+            <div className='tags'><i className='fa fa-tags'/>{tags}</div>
+          </div>
+
+          <span className='itemControl'>
            <button onClick={this.openEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
            <button onClick={this.openDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
          </span>
        </div>
-        <div className='viewer-body'>
-          <div className='tags'><i className='fa fa-tags'/>{tags}</div>
+        <div className='detailBody'>
          <MarkdownPreview className='content' content={article.content}/>
        </div>
      </div>
--- a/browser/main/Components/PlanetArticleList.jsx
+++ b/browser/main/Components/PlanetArticleList.jsx
@@ -1,5 +1,6 @@
 var React = require('react/addons')
 var ReactRouter = require('react-router')
+var Link = ReactRouter.Link
 var moment = require('moment')

 var ForceUpdate = require('../Mixins/ForceUpdate')
@@ -13,6 +14,31 @@ module.exports = React.createClass({
    articles: React.PropTypes.array,
    showOnlyWithTag: React.PropTypes.func
  },
+  handleArticleClikck: function (article) {
+    if (article.type === 'code') {
+      return function () {
+        var params = this.getParams()
+
+        this.transitionTo('codes', {
+          userName: params.userName,
+          planetName: params.planetName,
+          localId: article.localId
+        })
+      }.bind(this)
+    }
+
+    if (article.type === 'note') {
+      return function () {
+        var params = this.getParams()
+
+        this.transitionTo('notes', {
+          userName: params.userName,
+          planetName: params.planetName,
+          localId: article.localId
+        })
+      }.bind(this)
+    }
+  },
  render: function () {
    var articles = this.props.articles.map(function (article) {
      var tags = article.Tags.length > 0 ? article.Tags.map(function (tag) {
@@ -28,24 +54,15 @@ module.exports = React.createClass({
      var handleClick

      if (article.type === 'code') {
-
-        handleClick = function () {
-          this.transitionTo('codes', {
-            userName: params.userName,
-            planetName: params.planetName,
-            localId: article.localId
-          })
-        }.bind(this)
-
        return (
-          <li onClick={handleClick} key={'code-' + article.id}>
+          <li onClick={this.handleArticleClikck(article)} key={'code-' + article.id}>
            <div className={'articleItem' + (isActive ? ' active' : '')}>
              <div className='itemLeft'>
                <ProfileImage className='profileImage' size='25' email={article.User.email}/>
                <i className='fa fa-code fa-fw'></i>
              </div>
              <div className='itemRight'>
-                <div className='updatedAt'>{moment(article.updatedAt).fromNow()}</div>
+                <div className='itemInfo'>{moment(article.updatedAt).fromNow()} by <span className='userProfileName'>{article.User.profileName}</span></div>
                <div className='description'>{article.description.length > 50 ? article.description.substring(0, 50) + ' …' : article.description}</div>
                <div className='tags'><i className='fa fa-tags'/>{tags}</div>
              </div>
@@ -55,16 +72,8 @@ module.exports = React.createClass({
        )
      }

-      handleClick = function () {
-        this.transitionTo('notes', {
-          userName: params.userName,
-          planetName: params.planetName,
-          localId: article.localId
-        })
-      }.bind(this)
-
      return (
-        <li onClick={handleClick} key={'note-' + article.id}>
+        <li onClick={this.handleArticleClikck(article)} key={'note-' + article.id}>
          <div className={'articleItem blueprintItem' + (isActive ? ' active' : '')}>
            <div className='itemLeft'>
              <ProfileImage className='profileImage' size='25' email={article.User.email}/>
@@ -72,7 +81,7 @@ module.exports = React.createClass({
            </div>

            <div className='itemRight'>
-              <div className='updatedAt'>{moment(article.updatedAt).fromNow()}</div>
+              <div className='itemInfo'>{moment(article.updatedAt).fromNow()} by <span className='userProfileName'>{article.User.profileName}</span></div>
              <div className='description'>{article.title}</div>
              <div className='tags'><i className='fa fa-tags'/>{tags}</div>
            </div>
--- a/browser/styles/main/containers/PlanetContainer.styl
+++ b/browser/styles/main/containers/PlanetContainer.styl
@@ -10,7 +10,7 @@ articleListWidth= 275px
      margin 0 2px
      text-decoration underline
      cursor pointer
-      font-size 0.9em
+      font-size 0.95em
      &.noTag
        color inactiveTextColor
        font-size 0.8em
@@ -178,15 +178,18 @@ articleListWidth= 275px
    overflow-y auto
    li
      .articleItem
-        user-select none
        border solid 2px transparent
-        padding 10px
+        position relative
+        height 94px
+        width 100%
        cursor pointer
        transition 0.1s
-        clearfix()
        .itemLeft
-          float left
-          width 25px
+          position absolute
+          top 4px
+          bottom 4px
+          width 38px
+          padding 3px 0 3px 3px
          text-align center
          .profileImage
            margin-bottom 5px
@@ -194,18 +197,31 @@ articleListWidth= 275px
          .fa
            line-height 25px
        .itemRight
-          float left
-          width 225px
+          position absolute
+          top 4px
+          bottom 4px
+          right 2px
+          left 40px
          overflow-x hidden
-          padding-left 10px
-          .updatedAt
-            margin-bottom 10px
+          padding 3px 10px 3px 3px
+          .itemInfo
+            margin 5px 0 13px
            color lighten(textColor, 25%)
            font-size 0.7em
+            .userProfileName
+              color brandColor
+              font-size 1.2em
          .description
            line-height 120%
-            margin-bottom 15px
+            margin-bottom 10px
            font-size 1em
+            overflow-x hidden
+            white-space nowrap
+            text-overflow ellipsis
+          .tags
+            position absolute
+            bottom 5px
+            font-size 0.9em
        &:hover, &.hover
          background-color hoverBackgroundColor
          &:active, &.active
@@ -219,57 +235,71 @@ articleListWidth= 275px
  absolute right bottom
  top 55px
  left navigationWidth + articleListWidth
-  &>.viewer-header
-    height 44px
-    line-height 44px
-    padding 0 15px
-    box-sizing border-box
-    font-size 1.2em
-    small
-      font-size 0.8em
+  .detailHeader
+    border solid 2px transparent
+    position relative
+    height 105px
+    width 100%
+    transition 0.1s
+    .itemLeft
+      position absolute
+      top 7px
+      bottom 4px
+      width 38px
+      padding 3px 0 3px 3px
+      text-align center
+      .profileImage
+        margin-bottom 5px
+        circle()
+      .fa
+        line-height 25px
+    .itemRight
+      position absolute
+      top 7px
+      bottom 4px
+      right 2px
+      left 40px
+      overflow-x hidden
+      padding 3px 10px 3px 3px
+      .itemInfo
+        margin 5px 0 13px
        color lighten(textColor, 25%)
-    .control-group
-      float right
-      button
-        margin 10px 3px
-  .viewer-body
-    absolute bottom right
-    left 1px
-    top 44px
-  &.codeDetail>.viewer-body
-    .viewer-detail
-      border-bottom solid 1px borderColor
-      height 150px
-      box-sizing border-box
-      padding 10px
+        font-size 0.7em
+        .userProfileName
+          color brandColor
+          font-size 1.2em
      .description
-        height 100px
-        line-height 1.4em
-        overflow-y auto
+        line-height 120%
+        margin-bottom 10px
+        font-size 1em
+        overflow-x auto
+        white-space nowrap
      .tags
        position absolute
-        left 15px
-        right 15px
-        top 120px
-    .content
-      .ace_editor
-        absolute left right
-        top 155px
        bottom 5px
-  &.noteDetail>.viewer-body
-    .tags
-      absolute top
-      left 15px
-      right 15px
-      height 24px
-      line-height 24px
-    .content
+        font-size 0.9em
+    .itemControl
+      position absolute
+      z-index 1
+      top 2px
+      right 2px
+  .detailBody
    absolute left right bottom
-      top 30px
+    top 105px
+    .content
      box-sizing border-box
      padding 5px
      border-top solid 1px borderColor
-      padding 10px
      overflow-x hidden
      overflow-y auto
+  &.noteDetail
+    .detailBody .content
      marked()
+  &.codeDetail
+    .detailBody .content
+      .ace_editor
+        position absolute
+        top 5px
+        bottom 5px
+        left 2px
+        right 2px
--- a/browser/styles/main/index.styl
+++ b/browser/styles/main/index.styl
@@ -105,14 +105,16 @@ textarea.block-input
    z-index 2000
    bottom 5px
    right 53px
-    btnDefault()
+    btnPrimary()
    padding 10px 15px
    border-radius 5px
+    background-color backgroundColor
  .contactButton
    position fixed
    z-index 2000
    bottom 5px
    right 5px
-    btnDefault()
+    btnPrimary()
    padding 10px 15px
    border-radius 5px
+    background-color backgroundColor
--- a/browser/styles/mixins/marked.styl
+++ b/browser/styles/mixins/marked.styl
@@ -64,7 +64,7 @@ marked()
    padding 5px
    border solid 1px borderColor
    border-radius 5px
-    margin 0.5em 0
+    margin-bottom 0.5em
    overflow-x auto
    &>code
      padding 0
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "boost",
-  "version": "0.2.1",
+  "version": "0.2.1.1",
  "description": "Boost App",
  "main": "main.js",
  "scripts": {