editable name

src/components/emoji_input/emoji_input.vue

@@ -124,7 +124,7 @@
     margin: 0.2em 0.25em;
     font-size: 1.3em;
     cursor: pointer;
-    line-height: 24px;
+    line-height: 1.2em;
 
     &:hover i {
       color: var(--text);
@@ -134,7 +134,7 @@
   .emoji-picker-panel {
     position: absolute;
     z-index: 20;
-    margin-top: 2px;
+    margin-top: 0.2em;
 
     &.hide {
       display: none;
@@ -153,7 +153,7 @@
   }
 
   &.with-picker input {
-    padding-right: 30px;
+    padding-right: 2em;
   }
 
   .hidden-overlay {
@@ -216,8 +216,8 @@
       }
 
       .detailText {
-        font-size: 9px;
+        font-size: 0.6em;
-        line-height: 9px;
+        line-height: 0.6em;
       }
     }
   }

src/components/settings_modal/tabs/profile_tab.vue

@@ -7,21 +7,6 @@
         :switcher="false"
         rounded="top"
       />
-      <p>{{ $t('settings.name') }}</p>
-      <EmojiInput
-        v-model="newName"
-        enable-emoji-picker
-        :suggest="emojiSuggestor"
-      >
-        <template #default="inputProps">
-          <input
-            id="username"
-            v-model="newName"
-            class="input name-changer"
-            v-bind="propsToNative(inputProps)"
-          >
-        </template>
-      </EmojiInput>
       <p v-if="role === 'admin' || role === 'moderator'">
         <Checkbox v-model="showRole">
           <template v-if="role === 'admin'">

src/components/user_card/user_card.js

@@ -91,6 +91,7 @@ export default {
 
       // Editable stuff
       newName: user.name_unescaped,
+      editingName: true,
       newActorType: user.actor_type,
       newBio: unescape(user.description),
       editingBio: false,

src/components/user_card/user_card.scss

@@ -263,6 +263,31 @@
       --link: var(--text) !important;
     }
 
+    .name-wrapper {
+      display: flex;
+      align-items: baseline;
+
+      .edit-button {
+        width: 3em;
+        text-align: center;
+      }
+
+      .input,
+      .user-name {
+        flex: 1;
+        font-weight: 600;
+        line-height: 2;
+        margin-right: 1em;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+
+      .input {
+        margin: 0 -0.5em;
+        padding: 0 0.5em;
+      }
+    }
+
     .top-line {
       display: flex;
       flex-direction: column;
@@ -271,8 +296,6 @@
       // these two normalize position and height when custom emoji are used
       line-height: 2;
       margin-bottom: -0.2em;
-      font-weight: 600;
-      font-size: 110%;
       font-size: calc(max(110%, 4cqw));
     }
 
@@ -306,13 +329,6 @@
     }
   }
 
-  .user-name {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    margin-right: 1em;
-    font-size: 1.1em;
-  }
-
   .highlighter {
     margin: 5em;
     align-items: baseline;

src/components/user_card/user_card.vue

@@ -122,16 +122,45 @@
                   />
                 </button>
               </div>
-              <router-link
+              <div class="name-wrapper">
-                :to="userProfileLink(user)"
+                <router-link
-                class="user-name"
+                  v-if="!editable || !editingName"
-              >
+                  :to="userProfileLink(user)"
-                <RichContent
+                  class="user-name"
-                  :title="user.name"
+                >
-                  :html="user.name"
+                  <RichContent
-                  :emoji="editable ? emoji : user.emoji"
+                    :title="newName"
-                />
+                    :html="newName"
-              </router-link>
+                    :emoji="editable ? emoji : user.emoji"
+                  />
+                </router-link>
+                <EmojiInput
+                  v-else-if="editingName"
+                  v-model="newName"
+                  enable-emoji-picker
+                  :suggest="emojiSuggestor"
+                >
+                  <template #default="inputProps">
+                    <input
+                      id="username"
+                      v-model="newName"
+                      class="input name-changer"
+                      v-bind="propsToNative(inputProps)"
+                    >
+                  </template>
+                </EmojiInput>
+                <button
+                  v-if="editable"
+                  class="button-unstyled edit-button"
+                  @click="editingName = !editingName"
+                  :title="$t('settings.toggle_edit')"
+                >
+                  <FAIcon
+                    class="icon"
+                    icon="pencil"
+                  />
+                </button>
+              </div>
             </div>
             <div class="bottom-line">
               <user-link