Add loading effect and merge

README.md

@@ -45,12 +45,29 @@
  * GitHub
  * 其它(敬请期待)
 
+## 下载地址
+
+[http://pan.baidu.com/disk/home#list/path=%2Fviolet](http://pan.baidu.com/disk/home#list/path=%2Fviolet)
+
 ## 功能支持
 
 功能支持请前往：[violet需求调查](https://jinshuju.net/f/2yctZ5?x_field_1=github)
 
 产品论坛和意见反馈请前往：[violet客户支持服务平台](https://violet.kf5.com/hc/)
 
+## DEMO
+
+本文链接：
+
+- [知乎](https://zhuanlan.zhihu.com/p/21376171?refer=reduxis)
+- [简书](http://www.jianshu.com/p/d93ca8b61355)
+- [GitHub](https://github.com/simongfxu/simongfxu.github.com/issues/101)
+- [Medium](https://medium.com/@damngoto/violet-%E5%80%BC%E5%BE%97%E4%B8%80%E8%AF%95%E7%9A%84%E5%86%99%E4%BD%9C%E5%90%8C%E6%AD%A5%E5%B0%8F%E5%8A%A9%E6%89%8B-2fbd2799cea4)
+
+截图：
+
+![Linux](https://pic2.zhimg.com/153f8d8cda1d4b7b95e53e3375c26fc3_r.png)
+
 ## 名称来源
 
 我初生的女儿叫 **小紫**

app/components/BottomSettings.css

@@ -11,6 +11,7 @@
   width: var(--postListWidth);
   height: var(--bottomHeight);
   padding: var(--bottomPadding) 0;
+  border-top: var(--splitLine);
 }
 
 .bottomSettingsContainer a {

app/components/Form.css

@@ -14,6 +14,7 @@
   display: block;
   margin-bottom: 6px;
   color: var(--emTextColor);
+  opacity: 0.7;
 }
 
 .forms input {
@@ -32,43 +33,74 @@
   box-sizing: border-box;
 }
 
-button:hover {
-  background-color: #ededed;
-  color: rgba(0,0,0,0.6);
-  text-decoration: none;
+.btn, .btnBorderOpen:before, .btnBorderOpen:after{
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
 }
 
-.btn, button {
+.btn {
   display: inline-block;
-  vertical-align: top;
-  font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
-  font-size: 1.4rem;
-  font-weight: normal;
-  white-space: nowrap;
-  padding: 0 32px;
-  height: 40px;
-  line-height: 40px;
-  text-align: center;
-  text-decoration: none;
-  -webkit-appearance: none;
-  outline: none;
-  margin: 0;
-  border: none;
-  border-radius: 2px;
-  box-shadow: none;
+  line-height: 35px;
+  margin: 8px;
+  padding: 0 15px;
+  font-size: 15px;
+  position: relative;
+  opacity: .999;
+  border-radius: 3px;
   cursor: pointer;
-  color: #000000;
-  background: #e5e5e5;
-  width: auto;
-  overflow: visible;
+  min-width: 86px;
+  outline: none;
+}
+
+.btn[disabled] {
+  cursor: not-allowed;
+}
+
+.btnBorderOpen {
+  background-color: transparent;
+  border: 1px solid #AAA;
+  color: #696969;
+}
+
+.btnBorderOpen:before, .btnBorderOpen:after {
+  content: '';
+  border-style: solid;
+  position: absolute;
+  z-index: 5;
+  border-radius: 3px;
+  box-sizing: content-box;
+}
+
+.btnBorderOpen:before {
+  width: 0;
+  height: 100%;
+  border-width: 1px 0 1px 0;
+  top: -1px;
+  left: 0;
+  -webkit-transition-delay: 0.05s;
+  transition-delay: 0.05s;
+}
+
+.btnBorderOpen:after {
+  width: 100%;
+  height: 0;
+  border-width: 0 1px 0 1px;
+  top: 0;
+  left: -1px;
+}
+
+.btnBorderOpen:hover:before {
+  width: 100%;
+}
+
+.btnBorderOpen:hover:after {
+  height: 100%;
 }
 
-.primary {
-  color: rgba(255,255,255,0.9);
-  background: #2f77d1;
+.btnBorderOpen.btnPurple:before, .btnBorderOpen.btnPurple:after {
+  border-color: #9b59b6;
 }
 
-.primary:hover {
-  color: rgba(255,255,255,0.7);
-  background-color: #5992da;
+.btnBorderOpen.btnPurple:hover {
+  color: #9b59b6;
 }

app/components/Form.js

@@ -44,7 +44,10 @@ export default React.createClass({
       <form action="#" method="POST" className={styles.forms} onSubmit={this.handleSubmit}>
         {extra}
         <section>
-          <button type="submit" className={styles.primary} disabled={this.props.isLoading}>
+          <button type="submit"
+            disabled={this.props.isLoading}
+            className={`${styles.btn} ${styles.btnBorderOpen} ${styles.btnPurple}`}
+          >
             {this.props.isLoading ? '正在保存...' : '立即保存'}
           </button>
         </section>

app/components/LoginStatus.js

@@ -16,7 +16,12 @@ export default React.createClass({
         </section>
 
         <section>
-          <button onClick={this.props.onLogout}>注销</button>
+          <button
+            onClick={this.props.onLogout}
+            className={`${styles.btn} ${styles.btnBorderOpen} ${styles.btnPurple}`}
+          >
+            注销
+          </button>
         </section>
       </div>
     )

app/components/MarkdownArea.css

@@ -7,7 +7,7 @@
   left: var(--markdownMarginLeft);
   bottom: 0;
   box-sizing: border-box;
-  border-left: 1px solid #DDD;
+  border-left: var(--splitLine);
 }
 
 /* 加大权重，不然被默认样式覆盖 */

app/components/PostList.css

@@ -12,7 +12,7 @@
 
 .postContainer::-webkit-scrollbar-track
 {
-	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+	-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
 	border-radius: 10px;
 	background-color: #fff;
 }
@@ -26,7 +26,7 @@
 .postContainer::-webkit-scrollbar-thumb
 {
 	border-radius: 8px;
-	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+	-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.3);
 	background-color: #ddd;
 }
 

app/css/var.css

@@ -29,4 +29,5 @@
   --markdownMarginRight: markdownMarginRight;
   --bottomClientHeight: calc(var(--bottomHeight) + var(--bottomPadding) * 2);
   --notifierHeadHeight: notifierHeadHeight;
+  --splitLine: 1px solid #DDD;
 }

app/helpers/create_login/ApiLoginManager.js

@@ -50,11 +50,11 @@ export default React.createClass({
         platform: name,
         value: accountInfo
       })
-      this.setState({isLoading: true})
+      this.setState({isLoading: false})
     }).catch(err => {
       console.log(err)
       App.alert('身份验证失败', err.message)
-      this.setState({isLoading: true})
+      this.setState({isLoading: false})
     })
   },
 

app/helpers/create_login/CreateLogin.css

@@ -6,6 +6,7 @@
   left: var(--postListWidth);
   right: 0;
   bottom: 0;
+  border-left: var(--splitLine);
 }
 
 .formContainer {
@@ -16,6 +17,7 @@
   margin-bottom: 20px;
   border-bottom: 1px solid #ddd;
   padding-bottom: 10px;
+  opacity: 0.7;
 }
 
 .normal {

app/helpers/create_login/LoginManager.js

@@ -71,8 +71,7 @@ export default React.createClass({
       let webview = this.refs.webview
 
       let platform = SUPPORT_PLATFORM_MAP[this.props.platformName]
-      webview.addEventListener('did-get-response-details', (e) => {
-        webview.openDevTools()
+      webview.addEventListener('dom-ready', (e) => {
         let session = webview.getWebContents().session
         this.clearSession(session, platform.url, platform.cookieName)
       })
@@ -87,11 +86,10 @@ export default React.createClass({
     }
 
     webview.addEventListener('did-navigate', (e) => {
-      // 未开通专栏不会进入这个逻辑，直接跳到主页
-      let platformName = this.props.platformName
-      let platform = SUPPORT_PLATFORM_MAP[platformName]
-      let session = webview.getWebContents().session
       if (e.url === this.props.loggedInUrl) {
+        // 未开通专栏不会进入这个逻辑，直接跳到主页
+        let platformName = this.props.platformName
+        let session = webview.getWebContents().session
         let clientData
         parseWebviewCookiesByDomain(session, this.props.domain)
         .then(cookie => {
@@ -110,8 +108,6 @@ export default React.createClass({
           console.log(err)
           App.alert('登录出错', err.message)
         })
-      } else {
-        this.clearSession(session, platform.url, platform.cookieName)
       }
     })
   },

app/helpers/sync.js

@@ -26,8 +26,11 @@ function syncPostByAccount({account, post}) {
   }
 
   let args = {}
-  for (let key in account) {
-    args[key] = {title, content}
+  for (let field in account) {
+    args[field] = {
+      title, content,
+      key: post[`${field}_id`]
+    }
   }
 
   let platform = keys[0]

electron/ipc_render.js

@@ -11,10 +11,10 @@ function registerEvent(name, details) {
     console.log(`${details} :`, args)
 
     return new Promise(function(resolve, reject) {
-      ipcRenderer.on(`${name}-finish`, function(e, arg) {
+      ipcRenderer.once(`${name}-finish`, function(e, arg) {
         resolve(arg)
       })
-      ipcRenderer.on(`${name}-error`, function(e, arg) {
+      ipcRenderer.once(`${name}-error`, function(e, arg) {
         reject(arg)
       })
       ipcRenderer.send(`${name}-start`, args)