From 013a1b4f51cce7a38999a99a3eace279297d6924 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sat, 26 Dec 2015 23:07:04 +0900
Subject: [PATCH] cleanup style and class name of ArticleDetail

---
 browser/components/ModeSelect.js              |  40 +-
 browser/components/TagSelect.js               |  14 +-
 .../HomePage/ArticleDetail/ShareButton.js     |   2 +-
 browser/main/HomePage/ArticleDetail/index.js  | 248 ++-----
 .../components/ArticleDetail.styl             | 624 +++++++-----------
 5 files changed, 303 insertions(+), 625 deletions(-)

diff --git a/browser/components/ModeSelect.js b/browser/components/ModeSelect.js
index e8cfef79..d76234f8 100644
--- a/browser/components/ModeSelect.js
+++ b/browser/components/ModeSelect.js
@@ -37,27 +37,9 @@ export default class ModeSelect extends React.Component {
   }
 
   handleIdleSelectClick (e) {
-    this.setState({mode: EDIT_MODE})
-  }
-
-  componentDidUpdate (prevProps, prevState) {
-    if (prevState.mode !== this.state.mode && this.state.mode === EDIT_MODE) {
-      let searchElement = ReactDOM.findDOMNode(this.refs.search)
-      searchElement.focus()
-      if (this.searchKeyDownListener == null) {
-        this.searchKeyDownListener = e => this.handleSearchKeyDown
-      }
-      searchElement.addEventListener('keydown', this.searchKeyDownListener)
-    }
-  }
-
-  componentWillUpdate (nextProps, nextState) {
-    if (nextProps.mode !== this.state.mode && nextState.mode === IDLE_MODE) {
-      let searchElement = ReactDOM.findDOMNode(this.refs.search)
-      if (searchElement != null && this.searchKeyDownListener != null) {
-        searchElement.removeEventListener('keydown', this.searchKeyDownListener)
-      }
-    }
+    this.setState({mode: EDIT_MODE, search: this.props.value}, () => {
+      ReactDOM.findDOMNode(this.refs.search).select()
+    })
   }
 
   handleModeOptionClick (modeName) {
@@ -82,9 +64,9 @@ export default class ModeSelect extends React.Component {
       case 40:
         e.preventDefault()
         {
+          let search = _.escapeRegExp(this.state.search)
           let filteredModes = modes
             .filter(mode => {
-              let search = this.state.search
               let nameMatched = mode.name.match(search)
               let aliasMatched = _.some(mode.alias, alias => alias.match(search))
               return nameMatched || aliasMatched
@@ -97,9 +79,9 @@ export default class ModeSelect extends React.Component {
       case 13:
         e.preventDefault()
         {
+          let search = _.escapeRegExp(this.state.search)
           let filteredModes = modes
             .filter(mode => {
-              let search = this.state.search
               let nameMatched = mode.name.match(search)
               let aliasMatched = _.some(mode.alias, alias => alias.match(search))
               return nameMatched || aliasMatched
@@ -148,33 +130,31 @@ export default class ModeSelect extends React.Component {
     if (this.state.mode === IDLE_MODE) {
       let mode = _.findWhere(modes, {name: this.props.value})
       let modeName = mode != null ? mode.name : 'text'
-      let modeLabel = mode != null ? mode.label : 'Plain text'
 
       return (
         <div className={className + ' idle'} onClick={e => this.handleIdleSelectClick(e)}>
           <ModeIcon mode={modeName}/>
-          <span className='modeLabel'>{modeLabel}</span>
         </div>
       )
     }
 
+    let search = _.escapeRegExp(this.state.search)
     let filteredOptions = modes
       .filter(mode => {
-        let search = this.state.search
-        let nameMatched = mode.name.match(_.escapeRegExp(search))
-        let aliasMatched = _.some(mode.alias, alias => alias.match(_.escapeRegExp(search)))
+        let nameMatched = mode.name.match(search)
+        let aliasMatched = _.some(mode.alias, alias => alias.match(search))
         return nameMatched || aliasMatched
       })
       .map((mode, index) => {
         return (
-          <div key={mode.name} className={index === this.state.focusIndex ? 'option active' : 'option'} onClick={e => this.handleModeOptionClick(mode.name)(e)}><ModeIcon mode={mode.name}/>{mode.label}</div>
+          <div key={mode.name} className={index === this.state.focusIndex ? 'ModeSelect-options-item active' : 'ModeSelect-options-item'} onClick={e => this.handleModeOptionClick(mode.name)(e)}><ModeIcon mode={mode.name}/>{mode.label}</div>
           )
       })
 
     return (
       <div className={className + ' edit'}>
         <input onKeyDown={e => this.handleSearchKeyDown(e)} ref='search' onChange={e => this.handleSearchChange(e)} value={this.state.search} type='text'/>
-        <div ref='options' className='modeOptions hide'>
+        <div ref='options' className='ModeSelect-options hide'>
           {filteredOptions}
         </div>
       </div>
diff --git a/browser/components/TagSelect.js b/browser/components/TagSelect.js
index 20814063..dbbc456f 100644
--- a/browser/components/TagSelect.js
+++ b/browser/components/TagSelect.js
@@ -117,10 +117,10 @@ export default class TagSelect extends React.Component {
 
     let tagElements = _.isArray(tags)
       ? this.props.tags.map(tag => (
-        <span key={tag} className='tagItem'>
-          <button onClick={e => this.handleItemRemoveButton(tag)(e)} className='tagRemoveBtn'><i className='fa fa-fw fa-times'/></button>
-          <span className='tagLabel'>{tag}</span>
-        </span>))
+        <div key={tag} className='TagSelect-tags-item'>
+          <button onClick={e => this.handleItemRemoveButton(tag)(e)} className='TagSelect-tags-item-remove'><i className='fa fa-fw fa-times'/></button>
+          <div className='TagSelect-tags-item-label'>{tag}</div>
+        </div>))
       : null
 
     let suggestElements = this.shouldShowSuggest() ? suggestTags
@@ -134,7 +134,7 @@ export default class TagSelect extends React.Component {
 
     return (
       <div className='TagSelect' onClick={e => this.handleThisClick(e)}>
-        <div className='tags'>
+        <div className='TagSelect-tags'>
           {tagElements}
           <input
             type='text'
@@ -142,13 +142,13 @@ export default class TagSelect extends React.Component {
             ref='tagInput'
             valueLink={this.linkState('input')}
             placeholder='Click here to add tags'
-            className='tagInput'
+            className='TagSelect-input'
             onFocus={e => this.handleInputFocus(e)}
           />
         </div>
         {suggestElements != null && suggestElements.length > 0
           ? (
-            <div ref='suggestTags' className='suggestTags'>
+            <div ref='suggestTags' className='TagSelect-suggest'>
               {suggestElements}
             </div>
           )
diff --git a/browser/main/HomePage/ArticleDetail/ShareButton.js b/browser/main/HomePage/ArticleDetail/ShareButton.js
index 649475d8..d8f95c1c 100644
--- a/browser/main/HomePage/ArticleDetail/ShareButton.js
+++ b/browser/main/HomePage/ArticleDetail/ShareButton.js
@@ -111,7 +111,7 @@ export default class ShareButton extends React.Component {
             )
           }
         </button>
-        <div ref='dropdown' className={'share-dropdown' + (this.state.openDropdown ? '' : ' hide')}>
+        <div ref='dropdown' className={'ShareButton-dropdown' + (this.state.openDropdown ? '' : ' hide')}>
           {
             !hasPublicURL ? (
               <button
diff --git a/browser/main/HomePage/ArticleDetail/index.js b/browser/main/HomePage/ArticleDetail/index.js
index 9d805596..df75a360 100644
--- a/browser/main/HomePage/ArticleDetail/index.js
+++ b/browser/main/HomePage/ArticleDetail/index.js
@@ -174,119 +174,6 @@ export default class ArticleDetail extends React.Component {
     })
   }
 
-  handleEditButtonClick (e) {
-    let { dispatch } = this.props
-    dispatch(switchMode(EDIT_MODE))
-  }
-
-  handleDeleteButtonClick (e) {
-    this.setState({openDeleteConfirmMenu: true})
-  }
-
-  handleDeleteConfirmButtonClick (e) {
-    let { dispatch, activeArticle } = this.props
-
-    dispatch(destroyArticle(activeArticle.key))
-    activityRecord.emit('ARTICLE_DESTROY')
-    this.setState({openDeleteConfirmMenu: false})
-  }
-
-  handleDeleteCancelButtonClick (e) {
-    this.setState({openDeleteConfirmMenu: false})
-  }
-
-  renderIdle () {
-    let { status, activeArticle, folders, user } = this.props
-
-    let tags = activeArticle.tags != null ? activeArticle.tags.length > 0
-      ? activeArticle.tags.map(tag => {
-        return (<TagLink key={tag} tag={tag}/>)
-      })
-      : (
-        <span className='noTags'>Not tagged yet</span>
-      ) : null
-
-    let folder = _.findWhere(folders, {key: activeArticle.FolderKey})
-
-    let title = activeArticle.title.trim().length === 0
-      ? <small>(Untitled)</small>
-      : activeArticle.title
-
-    return (
-      <div className='ArticleDetail idle'>
-        {this.state.openDeleteConfirmMenu
-          ? (
-            <div className='deleteConfirm'>
-              <div className='right'>
-                Are you sure to delete this article?
-                <button onClick={e => this.handleDeleteConfirmButtonClick(e)} className='primary'>
-                  <i className='fa fa-fw fa-check'/> Sure
-                </button>
-                <button onClick={e => this.handleDeleteCancelButtonClick(e)}>
-                  <i className='fa fa-fw fa-times'/> Cancel
-                </button>
-              </div>
-            </div>
-          )
-          : (
-            <div className='detailInfo'>
-              <div className='left'>
-                <div className='info'>
-                  <FolderMark color={folder.color}/> <span className='folderName'>{folder.name}</span>&nbsp;
-                  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>
-              <div className='right'>
-                <ShareButton
-                  article={activeArticle}
-                  user={user}
-                  />
-
-                <button onClick={e => this.handleClipboardButtonClick(e)} className='editBtn'>
-                  <i className='fa fa-fw fa-clipboard'/><span className='tooltip'>Copy to clipboard</span>
-                </button>
-
-                <button onClick={e => this.handleEditButtonClick(e)} className='editBtn'>
-                  <i className='fa fa-fw fa-edit'/><span className='tooltip'>Edit (e)</span>
-                </button>
-                <button onClick={e => this.handleDeleteButtonClick(e)} className='deleteBtn'>
-                  <i className='fa fa-fw fa-trash'/><span className='tooltip'>Delete (d)</span>
-                </button>
-              </div>
-
-              {status.isTutorialOpen ? editDeleteTutorialElement : null}
-
-            </div>
-          )
-        }
-
-        <div className='detailBody'>
-          <div className='detailPanel'>
-            <div className='header'>
-              <ModeIcon className='mode' mode={activeArticle.mode}/>
-              <div className='title'>{title}</div>
-            </div>
-            {activeArticle.mode === 'markdown'
-              ? <MarkdownPreview content={activeArticle.content}/>
-              : <CodeEditor readOnly onChange={(e, value) => this.handleContentChange(e, value)} mode={activeArticle.mode} code={activeArticle.content}/>
-            }
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  handleCancelButtonClick (e) {
-    let { activeArticle, dispatch } = this.props
-
-    if (activeArticle.status === NEW) {
-      dispatch(switchArticle(null))
-    }
-    dispatch(switchMode(IDLE_MODE))
-  }
-
   handleSaveButtonClick (e) {
     let { dispatch, folders, status } = this.props
     let article = this.state.article
@@ -485,8 +372,8 @@ export default class ArticleDetail extends React.Component {
     }
   }
 
-  renderEdit () {
-    let { folders, status, tags } = this.props
+  render () {
+    let { folders, status, tags, activeArticle, user } = this.props
 
     let folderOptions = folders.map(folder => {
       return (
@@ -495,11 +382,11 @@ export default class ArticleDetail extends React.Component {
     })
 
     return (
-      <div className='ArticleDetail edit'>
-        <div className='detailInfo'>
-          <div className='left'>
+      <div className='ArticleDetail'>
+        <div className='ArticleDetail-info'>
+          <div className='ArticleDetail-info-row'>
             <select
-              className='folder'
+              className='ArticleDetail-info-folder'
               value={this.state.article.FolderKey}
               onChange={e => this.handleFolderKeyChange(e)}
             >
@@ -507,6 +394,26 @@ export default class ArticleDetail extends React.Component {
             </select>
             {this.state.isArticleEdited ? ' (edited)' : ''}
 
+            <div className='ArticleDetail-info-control'>
+              <ShareButton
+                article={activeArticle}
+                user={user}
+                />
+
+              <button onClick={e => this.handleClipboardButtonClick(e)}>
+                <i className='fa fa-fw fa-clipboard'/><span className='tooltip'>Copy to clipboard</span>
+              </button>
+
+              <button onClick={e => this.handleEditButtonClick(e)}>
+                <i className='fa fa-fw fa-edit'/><span className='tooltip'>Save (⌘ + s)</span>
+              </button>
+              <button onClick={e => this.handleDeleteButtonClick(e)}>
+                <i className='fa fa-fw fa-trash'/><span className='tooltip'>Delete</span>
+              </button>
+            </div>
+          </div>
+          {status.isTutorialOpen ? editDeleteTutorialElement : null}
+          <div>
             <TagSelect
               tags={this.state.article.tags}
               onChange={(tags, tag) => this.handleTagsChange(tags, tag)}
@@ -514,87 +421,46 @@ export default class ArticleDetail extends React.Component {
             />
 
             {status.isTutorialOpen ? tagSelectTutorialElement : null}
-
-          </div>
-
-          <div className='right'>
-            {
-              this.state.article.mode === 'markdown'
-                ? (<button className='preview' onClick={e => this.handleTogglePreviewButtonClick(e)}>
-                    {
-                      !this.state.previewMode
-                      ? 'Preview'
-                      : 'Edit'
-                    }
-                    <span className='tooltip'>{process.platform === 'darwin' ? '⌘' : '^'} + p</span>
-                  </button>)
-                : null
-            }
-            <button onClick={e => this.handleCancelButtonClick(e)} className='cancelBtn'>
-              Cancel
-              <span className='tooltip'>Esc</span>
-            </button>
-            <button onClick={e => this.handleSaveButtonClick(e)} className='saveBtn'>
-              Save
-              <span className='tooltip'>{process.platform === 'darwin' ? '⌘' : '^'} + s</span>
-            </button>
           </div>
         </div>
-        <div className='detailBody'>
-          <div className='detailPanel'>
-            <div className='header'>
-              <div className='title'>
-                <input
-                  onKeyDown={e => this.handleTitleKeyDown(e)}
-                  placeholder={this.state.article.createdAt == null
-                    ? `Created at ${moment().format('YYYY/MM/DD HH:mm')}`
-                    : 'Title'}
-                  ref='title'
-                  value={this.state.article.title}
-                  onChange={e => this.handleTitleChange(e)}
-                />
-              </div>
-              <ModeSelect
-                ref='mode'
-                onChange={e => this.handleModeChange(e)}
-                value={this.state.article.mode}
-                className='mode'
-                onBlur={() => this.handleModeSelectBlur()}
+
+        <div className='ArticleDetail-panel'>
+          <div className='ArticleDetail-panel-header'>
+            <ModeSelect
+              ref='mode'
+              onChange={e => this.handleModeChange(e)}
+              value={this.state.article.mode}
+              className='ArticleDetail-panel-header-mode'
+              onBlur={() => this.handleModeSelectBlur()}
+            />
+            <div className='ArticleDetail-panel-header-title'>
+              <input
+                onKeyDown={e => this.handleTitleKeyDown(e)}
+                placeholder={this.state.article.createdAt == null
+                  ? `Created at ${moment().format('YYYY/MM/DD HH:mm')}`
+                  : 'Title'}
+                ref='title'
+                value={this.state.article.title}
+                onChange={e => this.handleTitleChange(e)}
               />
-
-              {status.isTutorialOpen ? modeSelectTutorialElement : null}
             </div>
-
-            {this.state.previewMode
-              ? <MarkdownPreview ref='preview' content={this.state.article.content}/>
-              : (<CodeEditor
-                  ref='code'
-                  onChange={(e, value) => this.handleContentChange(e, value)}
-                  readOnly={false}
-                  mode={this.state.article.mode}
-                  code={this.state.article.content}
-                />)
-            }
           </div>
+          {status.isTutorialOpen ? modeSelectTutorialElement : null}
+
+          {this.state.previewMode
+            ? <MarkdownPreview ref='preview' content={this.state.article.content}/>
+            : (<CodeEditor
+                ref='code'
+                onChange={(e, value) => this.handleContentChange(e, value)}
+                readOnly={false}
+                mode={this.state.article.mode}
+                code={this.state.article.content}
+              />)
+          }
         </div>
       </div>
     )
   }
-
-  render () {
-    let { status, activeArticle } = this.props
-
-    if (activeArticle == null) return this.renderEmpty()
-
-    switch (status.mode) {
-      case EDIT_MODE:
-        return this.renderEdit()
-      case IDLE_MODE:
-      default:
-        return this.renderIdle()
-
-    }
-  }
 }
 
 ArticleDetail.propTypes = {
diff --git a/browser/styles/main/HomeContainer/components/ArticleDetail.styl b/browser/styles/main/HomeContainer/components/ArticleDetail.styl
index 6466ecdf..b4044dbf 100644
--- a/browser/styles/main/HomeContainer/components/ArticleDetail.styl
+++ b/browser/styles/main/HomeContainer/components/ArticleDetail.styl
@@ -1,6 +1,21 @@
 noTagsColor = #999
 iptFocusBorderColor = #369DCD
 
+infoButton()
+  display inline-block
+  border-radius 16.5px
+  cursor pointer
+  height 33px
+  width 33px
+  border none
+  margin-right 5px
+  font-size 18px
+  color inactiveTextColor
+  background-color white
+  padding 0
+  &:hover
+    color inherit
+
 .ArticleDetail
   absolute right bottom
   top 60px
@@ -10,414 +25,231 @@ iptFocusBorderColor = #369DCD
   border-top 1px solid borderColor
   border-left 1px solid borderColor
   *
-    -webkit-user-select all
-  .deleteConfirm
-    width 100%
-    height 70px
-    .right
-      float right
-      button
-        cursor pointer
-        height 33px
-        padding 0 10px
-        margin-left 5px
-        font-size 14px
-        color inactiveTextColor
-        background-color darken(white, 5%)
-        border solid 1px borderColor
-        border-radius 5px
-        &:hover
-          background-color white
-        &.primary
-          border none
-          background-color brandColor
-          color white
-          &:hover
-            color white
-            background-color lighten(brandColor, 10%)
-
-  .detailInfo
+    -webkit-user-select none
+  .ArticleDetail-info
     height 70px
     width 100%
     font-size 12px
-    position relative
-    .left
-      absolute top left bottom
-      right 120px
-      .folderName
+    &>.tutorial
+      position fixed
+      z-index 35
+    .ArticleDetail-info-folder
+      display inline-block
+      max-width 100px
+      overflow ellipsis
+      height 10px
+      width 150px
+      height 27px
+      outline none
+      background-color darken(white, 5%)
+      border 1px solid transparent
+      &:hover
+        background-color white
+      &:focus
+        border-color iptFocusBorderColor
+      &>.tutorial
+        position fixed
+        z-index 35
+    .ArticleDetail-info-control
+      float right
+      .ShareButton
         display inline-block
-        max-width 100px
-        overflow ellipsis
-        height 10px
-    .right
-      absolute top right
-  .detailBody
-    absolute left right bottom
+      &>button, .ShareButton-open-button
+        infoButton()
+        .tooltip
+          tooltip()
+          margin-top 30px
+        &:hover
+          .tooltip
+            opacity 1
+        &:nth-child(1) .tooltip
+          margin-left -40px
+        &:nth-child(2) .tooltip
+          margin-left -80px
+        &:nth-child(3) .tooltip
+          margin-left -60px
+        &:nth-child(4) .tooltip
+          margin-left -50px
+      .ShareButton-dropdown
+        position fixed
+        &.hide
+          display none
+
+    .TagSelect
+      margin-top 5px
+      .TagSelect-tags
+        white-space nowrap
+        overflow-x auto
+        position relative
+        noSelect()
+        z-index 30
+        background-color #E6E6E6
+        clearfix()
+        .TagSelect-tags-item
+          background-color transparent
+          color white
+          margin 0 2px
+          padding 0
+          height 17px
+          float left
+          button.TagSelect-tags-item-remove
+            display block
+            float left
+            background-color transparent
+            border none
+            font-size 8px
+            color white
+            width 15px
+            height 17px
+            text-align center
+            line-height 12px
+            padding 0
+            margin 0
+            border-top solid 1px darken(brandColor, 5%)
+            border-bottom solid 1px darken(brandColor, 5%)
+            border-left solid 1px darken(brandColor, 5%)
+            border-radius left 2px
+            background-color brandColor
+            &:hover
+              background-color lighten(brandColor, 10%)
+              border-color lighten(brandColor, 10%)
+          .TagSelect-tags-item-label
+            background-color brandColor
+            float left
+            font-size 12px
+            border-top solid 1px darken(brandColor, 5%)
+            border-bottom solid 1px darken(brandColor, 5%)
+            border-right solid 1px darken(brandColor, 5%)
+            line-height 15px
+            padding 0 5px
+            border-radius right 2px
+        input.TagSelect-input
+          background-color transparent
+          border none
+          outline none
+          margin 0 2px
+          transition 0.15s
+          height 18px
+          &:focus
+            font-size 13px
+      .TagSelect-suggest
+        position fixed
+        width 150px
+        max-height 150px
+        background-color white
+        z-index 5
+        border 1px solid borderColor
+        border-radius 5px
+        &>button
+          width 100%
+          display block
+          padding 0 15px
+          height 33px
+          line-height 33px
+          background-color transparent
+          border none
+          text-align left
+          font-size 14px
+          &:hover
+            background-color darken(white, 10%)
+  .ArticleDetail-panel
+    position absolute
     top 70px
+    left 10px
+    right 10px
+    bottom 10px
     overflow-x hidden
     overflow-y auto
-    .detailPanel
-      absolute top
-      left 10px
-      right 10px
-      bottom 10px
-      background-color white
-      border-radius 5px
-      border solid 1px borderColor
-      &>.header
-        absolute top left right
-        height 60px
-      .MarkdownPreview
-        absolute left right bottom
-        top 60px
-        marked()
-        box-sizing border-box
-        padding 5px 15px
-        border-top solid 1px borderColor
-        overflow-y auto
-      .CodeEditor
-        absolute left right bottom
-        top 60px
-        border-top solid 1px borderColor
-        min-height 300px
-        border-bottom-left-radius 5px
-        border-bottom-right-radius 5px
-  &.edit
-    .detailInfo
-      .left
-        &>.tutorial
-          position fixed
-          z-index 35
-          font-style italic
-        .folder
-          border none
-          width 150px
-          height 27px
-          outline none
-          background-color darken(white, 5%)
-          &:hover
-            background-color white
-        .TagSelect
-          .tags
-            white-space nowrap
-            overflow-x auto
-            position relative
-            max-width 350px
-            margin-top 5px
-            noSelect()
-            z-index 30
-            background-color #E6E6E6
-            .tagItem
-              background-color brandColor
-              border-radius 2px
-              color white
-              margin 0 2px
-              padding 0
-              border 1px solid darken(brandColor, 10%)
-              button.tagRemoveBtn
-                color white
-                border-radius 2px
-                border none
-                background-color transparent
-                padding 4px 2px
-                border-right 1px solid #E6E6E6
-                font-size 8px
-                line-height 12px
-                transition 0.1s
-                &:hover
-                  background-color lighten(brandColor, 10%)
-              .tagLabel
-                padding 4px 4px
-                font-size 12px
-                line-height 12px
-            input.tagInput
-              background-color transparent
-              outline none
-              margin 0 2px
-              border-radius 2px
-              border none
-              transition 0.1s
-              height 18px
-          .suggestTags
-            position fixed
-            width 150px
-            max-height 150px
-            background-color white
-            z-index 5
-            border 1px solid borderColor
-            border-radius 5px
-            button
-              width 100%
-              display block
-              padding 0 15px
-              height 33px
-              line-height 33px
-              background-color transparent
-              border none
-              text-align left
-              font-size 14px
-              &:hover
-                background-color darken(white, 10%)
-      .right
-        z-index 30
-        button
-          cursor pointer
-          height 33px
-          width 55px
-          margin-left 5px
-          font-size 14px
-          color inactiveTextColor
-          background-color darken(white, 5%)
-          border solid 1px borderColor
-          border-radius 5px
-          &>.tooltip
-            tooltip()
-            top 105px
-          &.preview
-            width inherit
-            .tooltip
-              margin-left -55px
-          &:hover
-            background-color white
-            .tooltip
-              opacity 1
-          &.cancelBtn
-            .tooltip
-              margin-left -25px
-          &.saveBtn
-            border none
-            background-color brandColor
-            color white
-            .tooltip
-              margin-left -45px
-            &:hover
-              color white
-              background-color lighten(brandColor, 10%)
-    .detailBody
-      .detailPanel
-        &>.header
-          &>.tutorial
-            fixed right
-            z-index 35
-            font-style italic
-          .mode
-            position relative
-            z-index 30
-            absolute top bottom right
-            display block
-            height 33px
-            margin-top 12px
-            width 150px
-            margin-right 15px
-            border-radius 5px
-            border solid 1px borderColor
-            transition 0.1s
-            &.idle
-              background-color darken(white, 5%)
-              cursor pointer
-              &:hover
-                background-color white
-              .ModeIcon
-                float left
-                width 25px
-                line-height 33px
-                text-align center
-              .modeLabel
-                line-height 30px
-            &.edit
-              background-color white
-              input
-                width 150px
-                line-height 30px
-                padding 0 10px
-                border none
-                outline none
-                background-color transparent
-                font-size 14px
-              .modeOptions
-                position fixed
-                width 150px
-                z-index 10
-                margin-top 5px
-                border 1px solid borderColor
-                border-radius 5px
-                background-color white
-                max-height 250px
-                overflow-y auto
-                .option
-                  height 33px
-                  line-height 33px
-                  cursor pointer
-                  &.active, &:hover.active
-                    background-color brandColor
-                    color white
-                  .ModeIcon
-                    width 30px
-                    text-align center
-                    display inline-block
-                  &:hover
-                    background-color darken(white, 10%)
-          .title
-            absolute left top bottom
-            right 150px
-            padding 0 15px
-            input
-              width 100%
-              border none
-              background-color transparent
-              line-height 60px
-              font-size 24px
-              outline none
-  &.idle
-    .detailInfo
+    background-color white
+    border-radius 5px
+    border solid 1px lighten(borderColor, 15%)
+    &>.ArticleDetail-panel-header
+      display block
+      height 60px
       &>.tutorial
-        fixed top right
+        fixed right
         z-index 35
         font-style italic
-      .left
-        right 99px
-        .info
-          padding 5px
-          overflow ellipsis
-        .tags
-          padding 10px 10px 5px
-          color articleItemColor
-          a
-            background-color brandColor
-            color white
-            border-radius 2px
-            padding 1.5px 5px
-            margin 2px
-            font-size 10px
-            opacity 0.8
-            cursor pointer
-            &:hover
-              opacity 1
-          span.noTags
-            color noTagsColor
-      .right
+      .ArticleDetail-panel-header-mode
         z-index 30
-        div.share-dropdown
-          position absolute
-          right 5px
-          top 30px
-          background-color transparentify(invBackgroundColor, 80%)
-          padding 5px 0
-          width 200px
-          &.hide
-            display none
-          &>button
-            width 200px
-            text-align left
-            display block
-            height 33px
-            background-color transparent
-            color white
-            font-size 14px
+        background-color white
+        absolute top bottom
+        left 10px
+        display block
+        height 33px
+        margin-top 14px
+        width 33px
+        margin-right 15px
+        border solid 1px transparent
+        border-radius 5px
+        transition width 0.15s
+        &.idle
+          cursor pointer
+          &:hover
+            background-color darken(white, 5%)
+            border-color borderColor
+          .ModeIcon
+            float left
+            width 100%
+            line-height 33px
+            text-align center
+        &.edit
+          width 150px
+          border-color iptFocusBorderColor
+          input
+            width 150px
+            line-height 31px
             padding 0 10px
             border none
-            &:hover
-              background-color transparentify(lighten(invBackgroundColor, 30%), 80%)
-          &>.ShareButton-url
-            clearfix()
-            input.ShareButton-url-input
-              width 155px
-              margin 0 0 0 5px
-              height 25px
-              outline none
-              border none
-              border-top-left-radius 5px
-              border-bottom-left-radius 5px
-              float left
-              padding 5px
-            button.ShareButton-url-button
-              width 35px
-              height 25px
-              border none
-              margin 0 5px 0 0
-              outline none
-              border-top-right-radius 5px
-              border-bottom-right-radius 5px
-              background-color darken(white, 5%)
-              color inactiveTextColor
-              float right
-              div.ShareButton-url-button-tooltip
-                tooltip()
-                right 10px
+            outline none
+            background-color transparent
+            font-size 14px
+          .ModeSelect-options
+            position fixed
+            width 150px
+            z-index 10
+            border 1px solid borderColor
+            border-radius 5px
+            background-color white
+            max-height 250px
+            overflow-y auto
+            margin-top 5px
+            .ModeSelect-options-item
+              height 33px
+              line-height 33px
+              cursor pointer
+              &.active, &:hover.active
+                background-color brandColor
+                color white
+              .ModeIcon
+                width 30px
+                text-align center
+                display inline-block
               &:hover
-                color textColor
-                div.ShareButton-url-button-tooltip
-                  opacity 1
-            div.ShareButton-url-alert
-              float left
-              height 25px
-              line-height 25px
-              padding 0 15px
-              color white
-
-        .ShareButton
-          display inline-block
-          button.ShareButton-open-button
-            border-radius 16.5px
-            cursor pointer
-            height 33px
-            width 33px
-            border none
-            margin-right 5px
-            font-size 18px
-            color inactiveTextColor
-            background-color darken(white, 5%)
-            padding 0
-            .tooltip
-              tooltip()
-              margin-top 25px
-              margin-left -40px
-            &:hover
-              color textColor
-              .tooltip
-                opacity 1
-
-        &>button
-          border-radius 16.5px
-          cursor pointer
-          height 33px
-          width 33px
+                background-color darken(white, 10%)
+      .ArticleDetail-panel-header-title
+        absolute left top right
+        left 33px
+        padding 0 15px
+        background-color transparent
+        input
           border none
-          margin-right 5px
-          font-size 18px
-          color inactiveTextColor
-          background-color darken(white, 5%)
-          padding 0
-          .tooltip
-            tooltip()
-          &.editBtn .tooltip
-            margin-top 25px
-            margin-left -45px
-          &.deleteBtn .tooltip
-            margin-top 25px
-            margin-left -73px
-          &:hover
-            color textColor
-            .tooltip
-              opacity 1
-    .detailBody
-      .detailPanel
-        &>.header
-          .mode
-            display block
-            line-height 60px
-            width 45px
-            height 60px
-            font-size 18px
-            text-align center
-          .title
-            absolute top bottom
-            left 45px
-            right 15px
-            font-size 24px
-            line-height 60px
-            white-space nowrap
-            overflow-x auto
-            overflow-y hidden
-            small
-              color #AAA
+          line-height 60px
+          width 100%
+          font-size 24px
+          outline none
+    .MarkdownPreview
+      absolute left right bottom
+      top 60px
+      marked()
+      box-sizing border-box
+      padding 5px 15px
+      border-top solid 1px borderColor
+      overflow-y auto
+    .CodeEditor
+      absolute left right bottom
+      top 60px
+      border-top solid 1px borderColor
+      min-height 300px
+      border-bottom-left-radius 5px
+      border-bottom-right-radius 5px