From e43c59aae0f743be5da682266b11e53001911b59 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Sat, 2 Mar 2024 22:02:31 +0800
Subject: [PATCH] Simplify css naming

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 .../src/base-comment-item-action.ts           | 20 +++---
 .../comment-widget/src/base-comment-item.ts   | 36 +++++-----
 packages/comment-widget/src/base-form.ts      | 70 +++++++++----------
 packages/comment-widget/src/comment-item.ts   |  4 +-
 .../comment-widget/src/comment-pagination.ts  | 26 +++----
 .../comment-widget/src/comment-replies.ts     |  8 +--
 packages/comment-widget/src/comment-widget.ts | 10 +--
 packages/comment-widget/src/reply-item.ts     | 14 ++--
 packages/comment-widget/src/user-avatar.ts    | 18 ++---
 9 files changed, 103 insertions(+), 103 deletions(-)

diff --git a/packages/comment-widget/src/base-comment-item-action.ts b/packages/comment-widget/src/base-comment-item-action.ts
index 0200ba0..219a7c3 100644
--- a/packages/comment-widget/src/base-comment-item-action.ts
+++ b/packages/comment-widget/src/base-comment-item-action.ts
@@ -8,24 +8,24 @@ export class BaseCommentItemAction extends LitElement {
 
   override render() {
     return html`
-      <div slot="action" class="base-comment-item-action">
-        <div class="base-comment-item-action-icon">
+      <div slot="action" class="item-action">
+        <div class="item-action__icon">
           <slot name="icon"></slot>
         </div>
-        <span class="base-comment-item-action-text"> ${this.text} </span>
+        <span class="item-action__text"> ${this.text} </span>
       </div>
     `;
   }
 
   static override styles = css`
-    .base-comment-item-action {
+    .item-action {
       display: inline-flex;
       align-items: center;
       cursor: pointer;
       margin-right: 0.5rem;
     }
 
-    .base-comment-item-action-icon {
+    .item-action__icon {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -36,26 +36,26 @@ export class BaseCommentItemAction extends LitElement {
       padding: 0.45rem;
     }
 
-    .base-comment-item-action-icon ::slotted(svg) {
+    .item-action__icon ::slotted(svg) {
       color: var(--component-comment-item-action-color);
       width: 1rem;
       height: 1rem;
     }
 
-    .base-comment-item-action-text {
+    .item-action__text {
       color: var(--component-comment-item-action-color);
       user-select: none;
     }
 
-    .base-comment-item-action:hover .base-comment-item-action-icon {
+    .item-action:hover .item-action__icon {
       background-color: var(--component-comment-item-action-bg-color-hover);
     }
 
-    .base-comment-item-action:hover .base-comment-item-action-text {
+    .item-action:hover .item-action__text {
       color: var(--component-comment-item-action-color-hover);
     }
 
-    .base-comment-item-action:hover .base-comment-item-action-icon ::slotted(svg) {
+    .item-action:hover .item-action__icon ::slotted(svg) {
       color: var(--component-comment-item-action-color-hover);
     }
   `;
diff --git a/packages/comment-widget/src/base-comment-item.ts b/packages/comment-widget/src/base-comment-item.ts
index 269d818..4b09714 100644
--- a/packages/comment-widget/src/base-comment-item.ts
+++ b/packages/comment-widget/src/base-comment-item.ts
@@ -26,25 +26,25 @@ export class BaseCommentItem extends LitElement {
   content = '';
 
   override render() {
-    return html`<div class="base-comment-item ${this.breath ? 'animate-breath' : ''}">
-      <div class="base-comment-item-avatar">
+    return html`<div class="item ${this.breath ? 'item--animate-breath' : ''}">
+      <div class="item__avatar">
         <user-avatar
           src="${this.userAvatar || ''}"
           alt="${this.userDisplayName || ''}"
         ></user-avatar>
       </div>
-      <div class="base-comment-item-main">
-        <div class="base-comment-item-meta">
-          <div class="base-comment-item-author">${this.userDisplayName}</div>
-          <div class="base-comment-item-meta-info">${timeAgo(this.creationTime)}</div>
-          ${!this.approved ? html`<div class="base-comment-item-meta-info">审核中</div>` : ''}
+      <div class="item__main">
+        <div class="item__meta">
+          <div class="item__author">${this.userDisplayName}</div>
+          <div class="item__meta-info">${timeAgo(this.creationTime)}</div>
+          ${!this.approved ? html`<div class="item__meta-info">审核中</div>` : ''}
         </div>
 
-        <div class="base-comment-item-content">
+        <div class="item__content">
           <pre><slot name="pre-content"></slot>${this.content}</pre>
         </div>
 
-        <div class="base-comment-item-actions">
+        <div class="item__actions">
           <slot name="action"></slot>
         </div>
 
@@ -57,48 +57,48 @@ export class BaseCommentItem extends LitElement {
     varStyles,
     baseStyles,
     css`
-      .base-comment-item {
+      .item {
         display: flex;
         gap: 0.75rem;
         padding: 1rem 0;
       }
 
-      .base-comment-item-main {
+      .item__main {
         flex: 1;
       }
 
-      .base-comment-item-meta {
+      .item__meta {
         display: flex;
         align-items: center;
         gap: 0.75rem;
       }
 
-      .base-comment-item-author {
+      .item__author {
         font-weight: 500;
       }
 
-      .base-comment-item-meta-info {
+      .item__meta-info {
         color: darkcyan;
         font-size: 0.75rem;
         line-height: 1rem;
       }
 
-      .base-comment-item-content {
+      .item__content {
         margin-top: 0.5rem;
       }
 
-      .base-comment-item-content pre {
+      .item__content pre {
         white-space: pre-wrap;
         overflow-wrap: break-word;
       }
 
-      .base-comment-item-actions {
+      .item__actions {
         margin-top: 0.5rem;
         display: flex;
         align-items: center;
       }
 
-      .animate-breath {
+      .item--animate-breath {
         animation: breath 1s ease-in-out infinite;
       }
 
diff --git a/packages/comment-widget/src/base-form.ts b/packages/comment-widget/src/base-form.ts
index d7e10d1..ed46158 100644
--- a/packages/comment-widget/src/base-form.ts
+++ b/packages/comment-widget/src/base-form.ts
@@ -132,10 +132,10 @@ export class BaseForm extends LitElement {
   }
 
   renderAccountInfo() {
-    return html`<div class="base-form-account-info">
+    return html`<div class="form__account-info">
       ${this.currentUser?.spec.avatar ? html`<img src=${this.currentUser.spec.avatar} />` : ''}
       <span> ${this.currentUser?.spec.displayName || this.currentUser?.metadata.name} </span>
-      <button @click=${this.handleLogout} type="button" class="base-form-account-btn-logout">
+      <button @click=${this.handleLogout} type="button" class="form__button--logout">
         退出登录
       </button>
     </div>`;
@@ -150,9 +150,9 @@ export class BaseForm extends LitElement {
 
   override render() {
     return html`
-      <form class="base-form" @submit="${this.onSubmit}">
+      <form class="form" @submit="${this.onSubmit}">
         <textarea
-          class="base-form-editor"
+          class="form__editor"
           ${ref(this.textareaRef)}
           placeholder="编写评论"
           rows="4"
@@ -162,7 +162,7 @@ export class BaseForm extends LitElement {
         ></textarea>
 
         ${!this.currentUser && this.allowAnonymousComments
-          ? html`<div class="base-form-anonymous-inputs">
+          ? html`<div class="form__anonymous-inputs">
               <input
                 name="displayName"
                 value=${this.customAccount.displayName}
@@ -187,32 +187,32 @@ export class BaseForm extends LitElement {
             </div>`
           : ''}
 
-        <div class="base-form-footer">
-          <div class="base-form-account">
+        <div class="form__footer">
+          <div class="form-account">
             ${this.currentUser ? this.renderAccountInfo() : ''}
             ${!this.currentUser && !this.allowAnonymousComments
               ? html`<button
                   @click=${this.handleOpenLoginPage}
-                  class="base-form-account-btn-login"
+                  class="form__button--login"
                   type="button"
                 >
                   登录
                 </button> `
               : ''}
           </div>
-          <div class="base-form-actions">
-            <button class="base-form-btn-emoji" type="button">
+          <div class="form__actions">
+            <button class="form__button--emoji" type="button">
               ${this.emojiLoading
                 ? html`<icon-loading></icon-loading>`
                 : html`<icon-emoji @click=${this.handleOpenEmojiPicker}></icon-emoji>`}
 
               <div
-                class="base-form-emoji-panel"
+                class="form__emoji-panel"
                 style="display: ${this.emojiPickerVisible ? 'block' : 'none'}"
                 ${ref(this.emojiPickerWrapperRef)}
               ></div>
             </button>
-            <button type="submit" class="base-form-btn-submit">
+            <button type="submit" class="form__button--submit">
               <svg viewBox="0 0 24 24" width="1.2em" height="1.2em" class="h-full w-full">
                 <path
                   fill="currentColor"
@@ -267,18 +267,18 @@ export class BaseForm extends LitElement {
         --color-border-over: var(--component-emoji-picker-color-border-over);
       }
 
-      .base-form {
+      .form {
         width: 100%;
         display: flex;
         flex-direction: column;
         gap: 1rem;
       }
 
-      .base-form-editor {
+      .form__editor {
         height: auto;
       }
 
-      .base-form-anonymous-inputs {
+      .form__anonymous-inputs {
         display: grid;
         grid-template-columns: repeat(4, minmax(0, 1fr));
         gap: 0.5rem;
@@ -286,12 +286,12 @@ export class BaseForm extends LitElement {
       }
 
       @media (max-width: 640px) {
-        .base-form-anonymous-inputs {
+        .form__anonymous-inputs {
           grid-template-columns: 1fr;
         }
       }
 
-      .base-form-anonymous-inputs a {
+      .form__anonymous-inputs a {
         font-size: 0.75rem;
         line-height: 1rem;
         color: darkcyan;
@@ -301,7 +301,7 @@ export class BaseForm extends LitElement {
         user-select: none;
       }
 
-      .base-form-anonymous-inputs a:hover {
+      .form__anonymous-inputs a:hover {
         color: inherit;
       }
 
@@ -326,24 +326,24 @@ export class BaseForm extends LitElement {
         box-shadow: var(--component-form-input-box-shadow-focus);
       }
 
-      .base-form-account-info {
+      .form__account-info {
         display: flex;
         align-items: center;
         gap: 0.75rem;
       }
 
-      .base-form-account-info img {
+      .form__account-info img {
         height: 2rem;
         width: 2rem;
         border-radius: 9999px;
       }
 
-      .base-form-account-info span {
+      .form__account-info span {
         font-weight: 500;
       }
 
-      .base-form-account-btn-logout,
-      .base-form-account-btn-login {
+      .form__button--logout,
+      .form__button--login {
         border-radius: var(--base-border-radius);
         background: var(--component-form-button-login-bg-color);
         border: 1px solid var(--component-form-button-login-border-color);
@@ -354,34 +354,34 @@ export class BaseForm extends LitElement {
         user-select: none;
       }
 
-      .base-form-account-btn-logout:hover,
-      .base-form-account-btn-login:hover {
+      .form__button--logout:hover,
+      .form__button--login:hover {
         background: var(--component-form-button-login-bg-color-hover);
       }
 
-      .base-form-footer {
+      .form__footer {
         display: flex;
         align-items: center;
         justify-content: space-between;
       }
 
-      .base-form-actions {
+      .form__actions {
         display: flex;
         align-items: center;
         gap: 0.75rem;
       }
 
-      .base-form-btn-emoji {
+      .form__button--emoji {
         color: var(--component-form-button-emoji-color);
         display: inline-flex;
         position: relative;
       }
 
-      .base-form-btn-emoji:hover {
+      .form__button--emoji:hover {
         color: inherit;
       }
 
-      .base-form-emoji-panel {
+      .form__emoji-panel {
         position: absolute;
         top: 2rem;
         right: 0;
@@ -391,12 +391,12 @@ export class BaseForm extends LitElement {
       }
 
       @media (max-width: 640px) {
-        .base-form-emoji-panel {
+        .form__emoji-panel {
           right: -7.8rem;
         }
       }
 
-      .base-form-btn-submit {
+      .form__button--submit {
         border-radius: var(--base-border-radius);
         background-color: var(--component-form-button-submit-bg-color);
         color: var(--component-form-button-submit-color);
@@ -419,16 +419,16 @@ export class BaseForm extends LitElement {
         gap: 0.5rem;
       }
 
-      .base-form-btn-submit:hover {
+      .form__button--submit:hover {
         opacity: 0.8;
         border-color: var(--component-form-button-submit-border-color-hover);
       }
 
-      .base-form-btn-submit:active {
+      .form__button--submit:active {
         opacity: 0.7;
       }
 
-      .base-form-btn-submit:disabled {
+      .form__button--submit:disabled {
         cursor: not-allowed;
         opacity: 0.5;
       }
diff --git a/packages/comment-widget/src/comment-item.ts b/packages/comment-widget/src/comment-item.ts
index b6694e0..d25df46 100644
--- a/packages/comment-widget/src/comment-item.ts
+++ b/packages/comment-widget/src/comment-item.ts
@@ -83,7 +83,7 @@ export class CommentItem extends LitElement {
     >
       <base-comment-item-action
         slot="action"
-        class="comment-item-action-upvote"
+        class="item__action--upvote"
         .text="${this.upvoteCount + ''}"
         @click="${this.handleUpvote}"
       >
@@ -156,7 +156,7 @@ export class CommentItem extends LitElement {
     varStyles,
     baseStyles,
     css`
-      .comment-item-action-upvote {
+      .item__action--upvote {
         margin-left: -0.5rem;
       }
     `,
diff --git a/packages/comment-widget/src/comment-pagination.ts b/packages/comment-widget/src/comment-pagination.ts
index 79e82d1..b11cf97 100644
--- a/packages/comment-widget/src/comment-pagination.ts
+++ b/packages/comment-widget/src/comment-pagination.ts
@@ -54,7 +54,7 @@ export class CommentPagination extends LitElement {
 
     return pageNumbers.map((number) => {
       if (number === '...') {
-        return html`<li class="pagination-dot">
+        return html`<li class="pagination__dot">
           <svg
             width="15"
             height="15"
@@ -72,7 +72,7 @@ export class CommentPagination extends LitElement {
           </svg>
         </li>`;
       } else {
-        return html`<li class="pagination-number ${this.page === number ? 'active' : ''}">
+        return html`<li class="pagination__number ${this.page === number ? 'active' : ''}">
           <button @click=${() => this.gotoPage(number)} ?disabled=${number === this.page}>
             ${number}
           </button>
@@ -96,7 +96,7 @@ export class CommentPagination extends LitElement {
   override render() {
     return html`
       <ul class="pagination">
-        <li class="pagination-button">
+        <li class="pagination__button">
           <button @click=${() => this.gotoPage(this.page - 1)} ?disabled=${this.page === 1}>
             <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24">
               <path
@@ -112,7 +112,7 @@ export class CommentPagination extends LitElement {
           </button>
         </li>
         ${this.renderPageNumbers()}
-        <li class="pagination-button">
+        <li class="pagination__button">
           <button
             @click=${() => this.gotoPage(this.page + 1)}
             ?disabled=${this.page === this.totalPages}
@@ -156,8 +156,8 @@ export class CommentPagination extends LitElement {
         user-select: none;
       }
 
-      .pagination-button button,
-      .pagination-number button {
+      .pagination__button button,
+      .pagination__number button {
         border-radius: var(--base-border-radius);
         display: inline-flex;
         align-items: center;
@@ -169,30 +169,30 @@ export class CommentPagination extends LitElement {
         border: 1px solid transparent;
       }
 
-      .pagination-button button {
+      .pagination__button button {
         gap: 0.5rem;
       }
 
-      .pagination-number button {
+      .pagination__number button {
         font-weight: normal;
       }
 
-      .pagination-button button:disabled {
+      .pagination__button button:disabled {
         cursor: not-allowed;
         opacity: 0.5;
       }
 
-      .pagination-button button:hover,
-      .pagination-number button:hover {
+      .pagination__button button:hover,
+      .pagination__number button:hover {
         background-color: var(--component-pagination-button-bg-color-hover);
       }
 
-      .pagination-number.active button {
+      .pagination__number.active button {
         background-color: var(--component-pagination-button-bg-color-active);
         border: 1px solid var(--component-pagination-button-border-color-active);
       }
 
-      .pagination-dot {
+      .pagination__dot {
         padding: 0.4rem 0.875rem;
       }
     `,
diff --git a/packages/comment-widget/src/comment-replies.ts b/packages/comment-widget/src/comment-replies.ts
index 06e1832..6f2363e 100644
--- a/packages/comment-widget/src/comment-replies.ts
+++ b/packages/comment-widget/src/comment-replies.ts
@@ -29,12 +29,12 @@ export class CommentReplies extends LitElement {
   activeQuoteReply: ReplyVo | undefined = undefined;
 
   override render() {
-    return html`<div class="comment-replies-wrapper">
+    return html`<div class="replies__wrapper">
       <reply-form @reload=${this.fetchReplies} .comment=${this.comment}></reply-form>
       ${this.loading
         ? html`<loading-block></loading-block>`
         : html`
-            <div class="comment-replies">
+            <div class="replies__list">
               ${repeat(
                 this.replies,
                 (item) => item.metadata.name,
@@ -78,11 +78,11 @@ export class CommentReplies extends LitElement {
     varStyles,
     baseStyles,
     css`
-      .comment-replies-wrapper {
+      .replies__wrapper {
         margin-top: 0.5rem;
       }
 
-      .comment-replies {
+      .replies__list {
         margin-top: 0.875rem;
       }
     `,
diff --git a/packages/comment-widget/src/comment-widget.ts b/packages/comment-widget/src/comment-widget.ts
index 200afd0..5282bba 100644
--- a/packages/comment-widget/src/comment-widget.ts
+++ b/packages/comment-widget/src/comment-widget.ts
@@ -84,12 +84,12 @@ export class CommentWidget extends LitElement {
       ${this.loading
         ? html`<loading-block></loading-block>`
         : html`
-            <div class="comments-wrapper">
-              <div class="comment-stats">
+            <div class="comment-widget__wrapper">
+              <div class="comment-widget__stats">
                 <span>${this.comments.total} 条评论</span>
               </div>
 
-              <div class="comments">
+              <div class="comment-widget__list">
                 ${repeat(
                   this.comments.items,
                   (item) => item.metadata.name,
@@ -183,11 +183,11 @@ export class CommentWidget extends LitElement {
         width: 100%;
       }
 
-      .comments-wrapper {
+      .comment-widget__wrapper {
         margin-top: 1.2rem;
       }
 
-      .comment-stats {
+      .comment-widget__stats {
         margin: 0.875rem 0;
         font-weight: 500;
       }
diff --git a/packages/comment-widget/src/reply-item.ts b/packages/comment-widget/src/reply-item.ts
index bfc42e4..11def91 100644
--- a/packages/comment-widget/src/reply-item.ts
+++ b/packages/comment-widget/src/reply-item.ts
@@ -116,7 +116,7 @@ export class ReplyItem extends LitElement {
       >
         <base-comment-item-action
           slot="action"
-          class="reply-item-action-upvote"
+          class="item-action__upvote"
           .text="${this.upvoteCount + ''}"
           @click="${this.handleUpvote}"
         >
@@ -178,7 +178,7 @@ export class ReplyItem extends LitElement {
 
         ${this.showReplyForm
           ? html`
-              <div class="reply-form-wrapper" slot="footer">
+              <div class="form__wrapper" slot="footer">
                 <reply-form
                   .comment=${this.comment}
                   .quoteReply=${this.reply}
@@ -192,7 +192,7 @@ export class ReplyItem extends LitElement {
                 slot="pre-content"
                 @mouseenter=${() => this.handleSetActiveQuoteReply(this.quoteReply)}
                 @mouseleave=${() => this.handleSetActiveQuoteReply()}
-                class="reply-quote-badge"
+                class="item__quote-badge"
                 ><svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="1em"
@@ -215,15 +215,15 @@ export class ReplyItem extends LitElement {
     varStyles,
     baseStyles,
     css`
-      .reply-item-action-upvote {
+      .item-action__upvote {
         margin-left: -0.5rem;
       }
 
-      .reply-form-wrapper {
+      .form__wrapper {
         margin-top: 0.5rem;
       }
 
-      .reply-quote-badge {
+      .item__quote-badge {
         display: inline-flex;
         flex-direction: row;
         align-items: center;
@@ -241,7 +241,7 @@ export class ReplyItem extends LitElement {
         cursor: pointer;
       }
 
-      .reply-quote-badge:hover {
+      .item__quote-badge:hover {
         text-decoration: underline;
         color: #3b82f6;
       }
diff --git a/packages/comment-widget/src/user-avatar.ts b/packages/comment-widget/src/user-avatar.ts
index 5e047be..d232a58 100644
--- a/packages/comment-widget/src/user-avatar.ts
+++ b/packages/comment-widget/src/user-avatar.ts
@@ -65,13 +65,13 @@ export class UserAvatar extends LitElement {
   override render() {
     if (this.src) {
       if (this.loading) {
-        return html`<div class="avatar-wrapper avatar-loading">
+        return html`<div class="avatar avatar--loading">
           <icon-loading></icon-loading>
         </div>`;
       }
 
       if (this.error) {
-        return html`<div class="avatar-wrapper avatar-error">
+        return html`<div class="avatar avatar--error">
           <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
             <path
               fill="currentColor"
@@ -81,13 +81,13 @@ export class UserAvatar extends LitElement {
         </div>`;
       }
 
-      return html`<div class="avatar-wrapper">
+      return html`<div class="avatar">
         <img src="${this.src}" alt="${this.alt || ''}" loading="lazy" />
       </div>`;
     }
 
-    return html`<div class="avatar-wrapper">
-      <span class="avatar-placeholder">${this.getPlaceholderText()}</span>
+    return html`<div class="avatar">
+      <span class="avatar__placeholder">${this.getPlaceholderText()}</span>
     </div>`;
   }
 
@@ -95,7 +95,7 @@ export class UserAvatar extends LitElement {
     varStyles,
     baseStyles,
     css`
-      .avatar-wrapper {
+      .avatar {
         border-radius: var(--component-avatar-rounded);
         height: var(--component-avatar-size);
         width: var(--component-avatar-size);
@@ -106,19 +106,19 @@ export class UserAvatar extends LitElement {
         background-color: rgb(243 244 246);
       }
 
-      .avatar-wrapper img {
+      .avatar img {
         width: 100%;
         height: 100%;
         object-fit: cover;
       }
 
-      .avatar-error svg {
+      .avatar--error svg {
         height: 1.15rem;
         width: 1.15rem;
         color: rgb(255 59 48);
       }
 
-      .avatar-placeholder {
+      .avatar__placeholder {
         font-weight: 500;
         color: rgb(31 41 55);
         font-size: 0.75rem;