Fixed a bug that circle name change is not reflected in the list

jesseplusplus · Sep 5, 2020 · e020072 · e020072
1 parent 735bc41
commit e020072
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 20 deletions.
diff --git a/app/javascript/mastodon/features/circles/components/circle.js b/app/javascript/mastodon/features/circles/components/circle.js
@@ -45,15 +45,13 @@ class Circle extends React.PureComponent {
     const { text, intl } = this.props;
 
     return (
-      <article>
-        <span className='circle-link'>
-          <button onClick={this.handleEditClick}>
-            <Icon id='circle-o' className='column-link__icon' fixedWidth />
-            {text}
-          </button>
-          <IconButton icon='trash' size={16} title={intl.formatMessage(messages.deleteTitle)} onClick={this.handleDeleteClick} />
-        </span>
-      </article>
+      <button className='circle-link' onClick={this.handleEditClick}>
+        <div>
+          <Icon id='circle-o' className='column-link__icon' fixedWidth />
+          {text}
+        </div>
+        <IconButton icon='trash' size={16} title={intl.formatMessage(messages.deleteTitle)} onClick={this.handleDeleteClick} />
+      </button>
     );
   }
 

diff --git a/app/javascript/mastodon/features/circles/index.js b/app/javascript/mastodon/features/circles/index.js
@@ -74,7 +74,7 @@ class Circles extends ImmutablePureComponent {
           bindToDocument={!multiColumn}
         >
           {circles.map(circle =>
-            <Circle key={circle.get('id')} id={circle.get('id')} text={circle.get('title')} />,
+            <Circle key={`${circle.get('id')}-${circle.get('title')}`} id={circle.get('id')} text={circle.get('title')} />,
           )}
         </ScrollableList>
       </Column>

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
@@ -6327,13 +6327,17 @@ noscript {
   }
 }
 
-.circle-link {
+button.circle-link {
   background: lighten($ui-base-color, 8%);
   color: $primary-text-color;
   display: flex;
   font-size: 16px;
   padding: 15px;
+  border: 0;
+  width: 100%;
+  text-align: left;
   text-decoration: none;
+  cursor: pointer;
 
   &:hover,
   &:focus,
@@ -6345,15 +6349,7 @@ noscript {
     outline: 0;
   }
 
-  button {
-    background: transparent;
-    color: $primary-text-color;
-    display: block;
-    font-size: 16px;
-    text-align: left;
-    padding: 0;
-    border: 0;
-    cursor: pointer;
+  div {
     flex: 1 1 auto;
   }