Skip to content

Commit

Permalink
Simplify css naming
Browse files Browse the repository at this point in the history 
Signed-off-by: Ryan Wang <[email protected]>
  • Loading branch information
@ruibaby
ruibaby committed Mar 2, 2024
1 parent 15b223b commit e43c59a
Show file tree
Hide file tree
Showing 9 changed files with 103 additions and 103 deletions.
20 changes: 10 additions & 10 deletions packages/comment-widget/src/base-comment-item-action.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
}
`;
Expand Down
36 changes: 18 additions & 18 deletions packages/comment-widget/src/base-comment-item.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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;
}
Expand Down
70 changes: 35 additions & 35 deletions packages/comment-widget/src/base-form.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>`;
Expand All @@ -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"
Expand All @@ -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}
Expand All @@ -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"
Expand Down Expand Up @@ -267,31 +267,31 @@ 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;
align-items: center;
}
@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;
Expand All @@ -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;
}
Expand All @@ -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);
Expand All @@ -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;
Expand All @@ -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);
Expand All @@ -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;
}
Expand Down
4 changes: 2 additions & 2 deletions packages/comment-widget/src/comment-item.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}"
>
Expand Down Expand Up @@ -156,7 +156,7 @@ export class CommentItem extends LitElement {
varStyles,
baseStyles,
css`
.comment-item-action-upvote {
.item__action--upvote {
margin-left: -0.5rem;
}
`,
Expand Down
Loading

0 comments on commit e43c59a

Please sign in to comment.