prepare alpha.5 (remain work: MD preview, keybind)

2025-12-13 09:46:22 +00:00 · 2015-10-31 13:05:22 +09:00
parent d9442aa23c
commit 3d0b79f674
18 changed files with 427 additions and 403 deletions
--- a/browser/main/HomePage.js
+++ b/browser/main/HomePage.js
@@ -44,10 +44,8 @@ class HomePage extends React.Component {
 }

 function remap (state) {
-  let status = state.status
-  // Fetch articles
-  let data = JSON.parse(localStorage.getItem('local'))
-  let { folders, articles } = data
+  let { folders, articles, status } = state
+
  if (articles == null) articles = []
  articles.sort((a, b) => {
    return new Date(b.updatedAt) - new Date(a.updatedAt)
@@ -112,7 +110,13 @@ function remap (state) {
  // 1. team have one folder at least
  // or Change IDLE MODE
  if (status.mode === CREATE_MODE) {
-    var newArticle = _.findWhere(articles, {status: 'NEW'})
+    let newArticle = _.findWhere(articles, {status: 'NEW'})
+    let FolderKey = folders[0].key
+    if (folderFilters.length > 0) {
+      let targetFolder = _.findWhere(folders, {name: folderFilters[0].value})
+      if (targetFolder != null) FolderKey = targetFolder.key
+    }
+
    if (newArticle == null) {
      newArticle = {
        id: null,
@@ -121,7 +125,7 @@ function remap (state) {
        content: '',
        mode: 'markdown',
        tags: [],
-        FolderKey: folders[0].key,
+        FolderKey: FolderKey,
        status: NEW
      }
      articles.unshift(newArticle)
@@ -131,14 +135,12 @@ function remap (state) {
    status.mode = IDLE_MODE
  }

-  let props = {
+  return {
    folders,
    status,
    articles,
    activeArticle
  }
-
-  return props
 }

 HomePage.propTypes = {
--- a/browser/main/HomePage/ArticleDetail.js
+++ b/browser/main/HomePage/ArticleDetail.js
@@ -101,8 +101,8 @@ export default class ArticleDetail extends React.Component {
              <div className='left'>
                <div className='info'>
                  <FolderMark color={folder.color}/> {folder.name}&nbsp;
-                  Created {moment(activeArticle.createdAt).format('YYYY/MM/DD')}&nbsp;
-                  Updated {moment(activeArticle.updatedAt).format('YYYY/MM/DD')}
+                  Created : {moment(activeArticle.createdAt).format('YYYY/MM/DD')}&nbsp;
+                  Updated : {moment(activeArticle.updatedAt).format('YYYY/MM/DD')}
                </div>
                <div className='tags'><i className='fa fa-fw fa-tags'/>{tags}</div>
              </div>
@@ -183,7 +183,6 @@ export default class ArticleDetail extends React.Component {
        <option key={folder.key} value={folder.key}>{folder.name}</option>
      )
    })
-    console.log('edit rendered')

    return (
      <div className='ArticleDetail edit'>
--- a/browser/main/HomePage/ArticleNavigator.js
+++ b/browser/main/HomePage/ArticleNavigator.js
@@ -1,5 +1,4 @@
 import React, { PropTypes } from 'react'
-import ProfileImage from 'boost/components/ProfileImage'
 import { findWhere } from 'lodash'
 import { setSearchFilter, switchFolder, switchMode, CREATE_MODE } from 'boost/actions'
 import { openModal } from 'boost/modal'
@@ -7,6 +6,8 @@ import FolderMark from 'boost/components/FolderMark'
 import Preferences from 'boost/components/modal/Preferences'
 import CreateNewFolder from 'boost/components/modal/CreateNewFolder'

+import remote from 'remote'
+
 export default class ArticleNavigator extends React.Component {
  handlePreferencesButtonClick (e) {
    openModal(Preferences)
@@ -50,10 +51,12 @@ export default class ArticleNavigator extends React.Component {
      )
    })

+    let userName = remote.getGlobal('process').env.USER
+
    return (
      <div className='ArticleNavigator'>
        <div className='userInfo'>
-          <div className='userProfileName'>{process.env.USER}</div>
+          <div className='userProfileName'>{userName}</div>
          <div className='userName'>local</div>
          <button onClick={e => this.handlePreferencesButtonClick(e)} className='settingBtn'><i className='fa fa-fw fa-chevron-down'/></button>
        </div>
--- a/browser/main/HomePage/ArticleTopBar.js
+++ b/browser/main/HomePage/ArticleTopBar.js
@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react'
+import ReactDOM from 'react-dom'
 import ExternalLink from 'boost/components/ExternalLink'
 import { setSearchFilter } from 'boost/actions'

@@ -8,6 +9,12 @@ export default class ArticleTopBar extends React.Component {

    dispatch(setSearchFilter(e.target.value))
  }
+  handleSearchClearButton (e) {
+    let { dispatch } = this.props
+
+    dispatch(setSearchFilter(''))
+    ReactDOM.findDOMNode(this.refs.searchInput).focus()
+  }

  render () {
    return (
@@ -15,7 +22,12 @@ export default class ArticleTopBar extends React.Component {
        <div className='left'>
          <div className='search'>
            <i className='fa fa-search fa-fw' />
-            <input value={this.props.status.search} onChange={e => this.handleSearchChange(e)} placeholder='Search' type='text'/>
+            <input ref='searchInput' value={this.props.status.search} onChange={e => this.handleSearchChange(e)} placeholder='Search' type='text'/>
+            {
+              this.props.status.search != null && this.props.status.search.length > 0
+                ? <button onClick={e => this.handleSearchClearButton(e)} className='searchClearBtn'><i className='fa fa-times'/></button>
+                : null
+            }
          </div>
        </div>
        <div className='right'>
--- a/browser/main/index.js
+++ b/browser/main/index.js
@@ -6,15 +6,9 @@ import MainPage from './MainPage'
 import HomePage from './HomePage'
 // import auth from 'boost/auth'
 import store from 'boost/store'
-let ReactDOM = require('react-dom')
+import ReactDOM from 'react-dom'
 require('../styles/main/index.styl')

-function onlyUser (state, replaceState) {
-  // let currentUser = auth.user()
-  // if (currentUser == null) return replaceState('login', '/login')
-  // if (state.location.pathname === '/') return replaceState('user', '/users/' + currentUser.id)
-}
-
 let routes = (
  <Route path='/' component={MainPage}>
    <IndexRoute name='home' component={HomePage}/>
@@ -22,7 +16,6 @@ let routes = (
 )

 let el = document.getElementById('content')
-
 ReactDOM.render((
  <div>
    <Provider store={store}>
--- a/browser/styles/main/HomeContainer/components/ArticleDetail.styl
+++ b/browser/styles/main/HomeContainer/components/ArticleDetail.styl
@@ -100,6 +100,7 @@ iptFocusBorderColor = #369DCD
            color white
            margin 0 2px
            padding 0
+            border 1px solid darken(brandColor, 10%)
            button.tagRemoveBtn
              color white
              border-radius 2px
@@ -117,13 +118,13 @@ iptFocusBorderColor = #369DCD
              font-size 12px
              line-height 12px
          input.tagInput
-            background-color white
+            background-color transparent
            outline none
+            margin 0 2px
            border-radius 2px
-            border 1px solid borderColor
+            border none
            transition 0.1s
-            &:focus
-              border-color iptFocusBorderColor
+            height 18px


      .right
@@ -165,8 +166,7 @@ iptFocusBorderColor = #369DCD
              border none
              background-color transparent
              line-height 60px
-              font-size 32px
-              font-weight bold
+              font-size 24px
              outline none
  &.idle
    .detailInfo
@@ -217,9 +217,9 @@ iptFocusBorderColor = #369DCD
            absolute top bottom
            left 45px
            right 15px
-            font-size 32px
+            font-size 24px
            line-height 60px
-            font-weight bold
+
            white-space nowrap
            overflow-x auto
            overflow-y hidden
--- a/browser/styles/main/HomeContainer/components/ArticleNavigator.styl
+++ b/browser/styles/main/HomeContainer/components/ArticleNavigator.styl
@@ -39,6 +39,7 @@ articleNavBgColor = #353535
  .controlSection
    height 88px
    padding 22px 15px
+    margin-bottom 44px
    .newPostBtn
      border none
      background-color brandColor
@@ -80,6 +81,9 @@ articleNavBgColor = #353535
          border-color brandColor
  .folders
    margin-bottom 15px
+    .folderList
+      height 340px
+      overflow-y auto
    .folderList button
      height 33px
      width 199px
--- a/browser/styles/main/HomeContainer/components/ArticleTopBar.styl
+++ b/browser/styles/main/HomeContainer/components/ArticleTopBar.styl
@@ -2,8 +2,9 @@ bgColor = #E6E6E6
 inputBgColor = white
 iptFocusBorderColor = #369DCD

-refreshBtColor = #B3B3B3
-refreshBtnActiveColor = #3A3A3A
+topBarBtnColor = #B3B3B3
+topBarBtnBgColor = #B3B3B3
+topBarBtnBgActiveColor = #3A3A3A

 infoBtnColor = bgColor
 infoBtnBgColor = #B3B3B3
@@ -41,7 +42,7 @@ infoBtnActiveBgColor = #3A3A3A
        z-index 0
        &:focus
          border-color iptFocusBorderColor
-      i.fa
+      i.fa.fa-search
        position absolute
        display block
        top 0
@@ -49,6 +50,23 @@ infoBtnActiveBgColor = #3A3A3A
        line-height 33px
        z-index 1
        pointer-events none
+      .searchClearBtn
+        position absolute
+        top 6px
+        right 10px
+        width 20px
+        height 20px
+        border-radius 10px
+        border none
+        background-color transparent
+        color topBarBtnColor
+        transition 0.1s
+        line-height 20px
+        text-align center
+        padding 0
+        &:hover
+          color white
+          background-color topBarBtnBgColor
    &>.refreshBtn
      float left
      width 33px