From 53d359748f4886f6daa0a8e177bd054bf9306b15 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sat, 18 Aug 2018 01:23:02 +0900
Subject: [PATCH] refs #507 Change location of follow/unfollow and more info
 button in account profile

---
 .../Contents/SideBar/AccountProfile.vue       | 62 ++++++++++---------
 1 file changed, 33 insertions(+), 29 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
index e42f42bd..446e5011 100644
--- a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
@@ -11,19 +11,9 @@
           <span class="status" v-if="relationship.followed_by">{{ $t('side_bar.account_profile.follows_you') }}</span>
           <span class="status" v-else>{{ $t('side_bar.account_profile.doesnt_follow_you') }}</span>
         </div>
-        <div class="follow-status">
-          <div v-if="relationship.following" class="unfollow" @click="unfollow(account)">
-            <icon name="user-times" scale="1.5"></icon>
-          </div>
-          <div v-else-if="relationship.requested">
-            <icon name="hourglass" scale="1.5"></icon>
-          </div>
-          <div v-else class="follow" @click="follow(account)">
-            <icon name="user-plus" scale="1.5"></icon>
-          </div>
-        </div>
-        <div class="clearfix"></div>
-        <div class="more">
+      </div>
+      <div class="user-info">
+        <div class="more" v-if="relationship !== null && relationship !== '' && account.username!==user.username">
           <popper trigger="click" :options="{placement: 'bottom'}" ref="popper">
             <div class="popper">
               <ul class="menu-list">
@@ -37,13 +27,24 @@
             </div>
 
             <el-button slot="reference" type="text">
-              <icon name="ellipsis-h"></icon>
+              <icon name="cog" scale="1.4"></icon>
             </el-button>
           </popper>
         </div>
-      </div>
-      <div class="icon">
-        <img :src="account.avatar" />
+        <div class="icon">
+          <img :src="account.avatar" />
+        </div>
+        <div class="follow-status" v-if="relationship !== null && relationship !== '' && account.username!==user.username">
+          <div v-if="relationship.following" class="unfollow" @click="unfollow(account)">
+            <icon name="user-times" scale="1.5"></icon>
+          </div>
+          <div v-else-if="relationship.requested">
+            <icon name="hourglass" scale="1.5"></icon>
+          </div>
+          <div v-else class="follow" @click="follow(account)">
+            <icon name="user-plus" scale="1.5"></icon>
+          </div>
+        </div>
       </div>
       <div class="username">
         {{ username(account) }}
@@ -201,18 +202,23 @@ function findLink (target) {
     font-size: var(--base-font-size);
 
     .follow-follower {
-      .follower-status {
-        float: left;
+      text-align: left;
 
+      .follower-status {
         .status {
           border-radius: 4px;
           background-color: rgba(0, 0, 0, 0.3);
           padding: 4px 8px;
         }
       }
-      .follow-status {
-        float: right;
+    }
 
+    .user-info {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .follow-status {
         .follow {
           cursor: pointer;
         }
@@ -224,8 +230,6 @@ function findLink (target) {
       }
 
       .more {
-        float: right;
-
         .menu-list {
           padding: 0;
           font-size: calc(var(--base-font-size) * 0.8);
@@ -246,14 +250,14 @@ function findLink (target) {
           }
         }
       }
-    }
 
-    .icon {
-      padding: 12px;
+      .icon {
+        padding: 12px;
 
-      img {
-        width: 72px;
-        border-radius: 8px;
+        img {
+          width: 72px;
+          border-radius: 8px;
+        }
       }
     }