add animation

browser/main/HomePage/ArticleDetail/index.js

@@ -34,7 +34,6 @@ othersMenu.append(new MenuItem({
   }
 }))
 
-const OSX = global.process.platform === 'darwin'
 const BRAND_COLOR = '#18AF90'
 
 const editDeleteTutorialElement = (
@@ -312,14 +311,21 @@ export default class ArticleDetail extends React.Component {
             />
 
             <div className='ArticleDetail-info-control'>
+              <div className={'ArticleDetail-info-control-save' + (!isUnsaved ? ' hide' : '')}>
+                <button
+                  onClick={e => this.handleSaveButtonClick(e)}
+                  className='ArticleDetail-info-control-save-button'
+                  disabled={!isUnsaved}
+                  >
+                  <i className='fa fa-fw fa-save'/>&nbsp;Save
+                </button>
+              </div>
+
               <ShareButton
                 article={activeArticle}
                 user={user}
                 />
 
-              <button onClick={e => this.handleSaveButtonClick(e)}>
-                <i className='fa fa-fw fa-save'/><span className='tooltip'>Save ({OSX ? '⌘ + s' : '^ + s'})</span>
-              </button>
               <button onClick={e => this.handleOthersButtonClick(e)}>
                 <i className='fa fa-fw fa-angle-down'/>
               </button>

browser/main/HomePage/ArticleNavigator.js

@@ -144,6 +144,7 @@ export default class ArticleNavigator extends React.Component {
         </div>
       )
     }).filter(modifiedArticle => modifiedArticle).sort((a, b) => a.updatedAt - b.updatedAt)
+    let hasModified = modifiedElements.length > 0
 
     let folderElememts = folders.map((folder, index) => {
       let isActive = findWhere(targetFolders, {key: folder.key})
@@ -170,22 +171,17 @@ export default class ArticleNavigator extends React.Component {
 
         </div>
 
-        <div className='ArticleNavigator-unsaved'>
+        <div className={'ArticleNavigator-unsaved' + (hasModified ? '' : ' hide')}>
           <div className='ArticleNavigator-unsaved-header'>Work in progress</div>
           <div className='ArticleNavigator-unsaved-list'>
-            {modifiedElements.length > 0
+            {modifiedElements}
-              ? modifiedElements
-              : (
-                <div className='ArticleNavigator-unsaved-list-empty'>Empty list</div>
-              )
-            }
           </div>
           <div className='ArticleNavigator-unsaved-control'>
             <button onClick={e => this.handleSaveAllClick()} className='ArticleNavigator-unsaved-control-save-all-button' disabled={modifiedElements.length === 0}>Save all</button>
           </div>
         </div>
 
-        <div className='ArticleNavigator-folders'>
+        <div className={'ArticleNavigator-folders' + (hasModified ? '' : ' expand')}>
           <div className='ArticleNavigator-folders-header'>
             <div className='title'>Folders</div>
             <button onClick={e => this.handleNewFolderButton(e)} className='addBtn'>

browser/styles/main/ArticleDetail.styl

@@ -6,6 +6,7 @@ infoButton()
   cursor pointer
   height 33px
   width 33px
+  line-height 33px
   margin-right 5px
   font-size 18px
   color inactiveTextColor
@@ -67,8 +68,10 @@ infoButton()
         color brandColor
     .ArticleDetail-info-control
       float right
+      clearfix
       .ShareButton
-        display inline-block
+        display block
+        float left
       &>button, .ShareButton-open-button
         infoButton()
         .tooltip
@@ -78,8 +81,35 @@ infoButton()
           .tooltip
             opacity 1
       &>button
-        &:nth-child(2) .tooltip
+        float left
+        &:nth-child(1) .tooltip
           margin-left -65px
+      .ArticleDetail-info-control-save
+        float left
+        width 80px
+        margin-right 5px
+        overflow hidden
+        transition width 0.15s ease-in-out
+        border-radius 16.5px
+        &.hide
+          width 0px
+          opacity 0.2
+      .ArticleDetail-info-control-save-button
+        infoButton()
+        background-color brandColor
+        color white
+        font-size 12px
+        width 100%
+        border 1px solid brandBorderColor
+        white-space nowrap
+        .fa
+          font-size 18px
+        &:hover
+          color white
+          background-color lighten(brandColor, 15%)
+        &:focus
+          color white
+          background-color lighten(brandColor, 15%)
       .ShareButton-open-button .tooltip
         margin-left -40px
       .ShareButton-dropdown

browser/styles/main/ArticleNavigator.styl

@@ -61,12 +61,14 @@ articleCount = #999
     top 100px
     width 100%
     height 225px
+    transition opacity 0.2s ease-in-out
+    &.hide
+      opacity 0.2
     .ArticleNavigator-unsaved-header
       border-bottom 1px solid alpha(borderColor, 0.5)
       padding-bottom 5px
       clearfix()
       position relative
-      z-index 30
       padding-left 10px
       font-size 18px
       line-height 22px
@@ -140,6 +142,10 @@ articleCount = #999
     absolute bottom
     top 365px
     width 100%
+    transition top 0.15s ease-in-out
+    background-color articleNavBgColor
+    &.expand
+      top 100px
     .ArticleNavigator-folders-header
       border-bottom 1px solid alpha(borderColor, 0.5)
       padding-bottom 5px