mirror
/
wagtail
kopia lustrzana https://github.com/wagtail/wagtail
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Refactor comment styles to use new Sass module system and avoid duplication

pull/12895/head
Thibaud Colas 2025-02-18 16:45:46 +00:00 zatwierdzone przez Sage Abdullah
rodzic 21b5e3114f
commit aae7d85153
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: EB1A33CC51CC0217
4 zmienionych plików z 104 dodań i 239 usunięć
client/src/components/CommentApp
components
main.scss

88
client/src/components/CommentApp/components/Comment/style.scss
Wyświetl plik

@ -1,8 +1,19 @@
@use '../../../../../scss/tools' as *;
.comment {
@include box;
$color-box-background: theme('colors.surface-page');
$color-box-background-focused: theme('colors.surface-page');
$color-box-border: theme('colors.border-furniture');
$color-box-border-focused: theme('colors.border-field-hover');
$color-box-text: theme('colors.text-context');
$box-border-radius: 5px;
$box-padding: 20px;
.comment {
background-color: $color-box-background;
padding: $box-padding;
border-radius: $box-border-radius;
color: $color-box-text;
border: 1px solid $color-box-border;
width: 300px;
display: block;
transition:
@ -17,6 +28,53 @@
&--focused {
inset-inline-end: 25px;
background-color: $color-box-background-focused;
border: 1px solid $color-box-border-focused;
box-shadow: 3px 2px 3px -1px theme('colors.black-10');
}
textarea {
margin: 0;
padding: 12px;
width: 100%;
background-color: theme('colors.surface-field');
border: 1px solid theme('colors.border-field-default');
border-radius: 5px;
color: $color-box-text;
&::placeholder {
color: theme('colors.text-placeholder');
opacity: 1;
}
}
&__notice-placeholder {
position: relative;
padding-bottom: 40px;
}
&__notice {
background-color: theme('colors.warning.50');
color: theme('colors.grey.600');
position: absolute;
inset-inline-start: -$box-padding;
bottom: 0;
width: calc(100% + #{$box-padding} * 2);
padding: 5px 10px;
svg.icon {
color: theme('colors.warning.100');
width: 14px;
height: 14px;
margin-inline-end: 10px;
vertical-align: text-bottom;
}
}
& > &__notice-placeholder:last-child &__notice,
&__replies:last-child > :last-child &__notice {
border-end-start-radius: $box-border-radius;
border-end-end-radius: $box-border-radius;
}
&__text {
@ -29,14 +87,10 @@
padding-bottom: 10px;
word-break: break-all;
white-space: pre-wrap;
&--mode-deleting {
color: theme('colors.text-context');
}
}
form {
border-top: 1px solid $color-comment-separator;
border-top: 1px solid theme('colors.border-furniture');
}
&--mode-creating form {
@ -59,7 +113,25 @@
}
&__button {
@include button;
background-color: inherit;
border: 1px solid theme('colors.border-button-small-outline-default');
border-radius: 3px;
color: theme('colors.surface-button-default');
cursor: pointer;
font-weight: 700;
height: 30px;
padding-inline-start: 10px;
padding-inline-end: 10px;
&--primary {
color: theme('colors.text-button');
border: 1px solid theme('colors.surface-button-default');
background-color: theme('colors.surface-button-default');
}
&:disabled {
opacity: 0.3;
}
}
&__actions,

38
client/src/components/CommentApp/components/CommentReply/index.tsx
Wyświetl plik

@ -105,17 +105,17 @@ export default class CommentReplyComponent extends React.Component<CommentReplyP
value={reply.newText}
onChange={onChangeText}
/>
<div className="comment-reply__actions">
<div className="comment__actions">
<button
type="submit"
disabled={reply.newText.length === 0}
className="comment-reply__button comment-reply__button--primary"
className="comment__button comment__button--primary"
>
{gettext('Save')}
</button>
<button
type="button"
className="comment-reply__button"
className="comment__button"
onClick={onCancel}
>
{gettext('Cancel')}
@ -132,8 +132,8 @@ export default class CommentReplyComponent extends React.Component<CommentReplyP
return (
<>
<CommentHeader commentReply={reply} store={store} focused={isFocused} />
<p className="comment-reply__text">{reply.text}</p>
<div className="comment-reply__progress">{gettext('Saving...')}</div>
<p className="comment__text">{reply.text}</p>
<div className="comment__progress">{gettext('Saving...')}</div>
</>
);
}
@ -150,12 +150,12 @@ export default class CommentReplyComponent extends React.Component<CommentReplyP
return (
<>
<CommentHeader commentReply={reply} store={store} focused={isFocused} />
<p className="comment-reply__text">{reply.text}</p>
<div className="comment-reply__error">
<p className="comment__text">{reply.text}</p>
<div className="comment__error">
{gettext('Save error')}
<button
type="button"
className="comment-reply__button"
className="comment__button"
onClick={onClickRetry}
>
{gettext('Retry')}
@ -187,19 +187,19 @@ export default class CommentReplyComponent extends React.Component<CommentReplyP
return (
<>
<CommentHeader commentReply={reply} store={store} focused={isFocused} />
<p className="comment-reply__text">{reply.text}</p>
<div className="comment-reply__confirm-delete">
<p className="comment__text">{reply.text}</p>
<div className="comment__confirm-delete">
{gettext('Are you sure?')}
<button
type="button"
className="comment-reply__button"
className="comment__button"
onClick={onClickCancel}
>
{gettext('Cancel')}
</button>
<button
type="button"
className="comment-reply__button comment-reply__button--primary"
className="comment__button comment__button--primary"
onClick={onClickDelete}
>
{gettext('Delete')}
@ -215,8 +215,8 @@ export default class CommentReplyComponent extends React.Component<CommentReplyP
return (
<>
<CommentHeader commentReply={reply} store={store} focused={isFocused} />
<p className="comment-reply__text">{reply.text}</p>
<div className="comment-reply__progress">{gettext('Deleting')}</div>
<p className="comment__text">{reply.text}</p>
<div className="comment__progress">{gettext('Deleting')}</div>
</>
);
}
@ -243,19 +243,19 @@ export default class CommentReplyComponent extends React.Component<CommentReplyP
return (
<>
<CommentHeader commentReply={reply} store={store} focused={isFocused} />
<p className="comment-reply__text">{reply.text}</p>
<div className="comment-reply__error">
<p className="comment__text">{reply.text}</p>
<div className="comment__error">
{gettext('Delete error')}
<button
type="button"
className="comment-reply__button"
className="comment__button"
onClick={onClickCancel}
>
{gettext('Cancel')}
</button>
<button
type="button"
className="comment-reply__button"
className="comment__button"
onClick={onClickRetry}
>
{gettext('Retry')}
@ -308,7 +308,7 @@ export default class CommentReplyComponent extends React.Component<CommentReplyP
onDelete={onDelete}
focused={isFocused}
/>
<p className="comment-reply__text">{reply.text}</p>
<p className="comment__text">{reply.text}</p>
{notice && (
<div className="comment__notice-placeholder">
<div className="comment__notice" role="status">

102
client/src/components/CommentApp/components/CommentReply/style.scss
Wyświetl plik

@ -2,111 +2,13 @@
padding-top: 20px;
pointer-events: auto;
position: relative;
border-top: 1px solid $color-comment-separator;
border-top: 1px solid theme('colors.border-furniture');
&__text {
color: $color-box-text;
font-weight: 400;
font-size: 16px;
line-height: 150%;
margin-bottom: 0;
padding-top: 10px;
padding-bottom: 10px;
word-break: break-all;
white-space: pre-wrap;
&--mode-deleting {
color: theme('colors.text-context');
}
}
&--mode-deleting &__avatar {
opacity: 0.5;
}
&--mode-deleting &__text {
&--mode-deleting .comment__text {
color: theme('colors.text-meta');
}
form {
margin-top: 10px;
}
&__button {
@include button;
}
&__actions,
&__confirm-delete,
&__progress,
&__error {
&::after {
display: block;
content: '';
clear: both;
}
}
&__actions {
padding-bottom: 10px;
}
&__actions &__button {
margin-inline-end: 10px;
margin-top: 10px;
}
&__confirm-delete &__button {
margin-inline-start: 10px;
margin-bottom: 10px;
}
&__confirm-delete,
&__error {
color: $color-box-text;
font-weight: bold;
font-size: 13px;
margin-top: 10px;
button {
float: inline-end;
}
&::after {
display: block;
content: ' ';
clear: both;
}
}
&__error {
color: theme('colors.white.DEFAULT');
background-color: theme('colors.critical.200');
border-radius: 3px;
padding: 5px;
padding-inline-start: 10px;
height: 26px;
line-height: 26px;
vertical-align: middle;
button {
height: 26px;
float: inline-end;
margin-inline-start: 5px;
color: theme('colors.white.DEFAULT');
background-color: theme('colors.critical.200');
border-color: theme('colors.white.DEFAULT');
padding: 2px;
padding-inline-start: 10px;
padding-inline-end: 10px;
font-size: 0.65em;
font-weight: bold;
}
}
&__progress {
margin-top: 20px;
font-weight: bold;
font-size: 13px;
}
}

115
client/src/components/CommentApp/main.scss
Wyświetl plik

@ -1,110 +1,6 @@
@use '../../../scss/settings/variables' as *;
@use '../../../scss/tools' as *;
$color-comment-separator: theme('colors.border-furniture');
$color-box-background: theme('colors.surface-page');
$color-box-background-focused: theme('colors.surface-page');
$color-box-border: theme('colors.border-furniture');
$color-box-border-focused: theme('colors.border-field-hover');
$color-box-text: theme('colors.text-context');
$box-border-radius: 5px;
$box-padding: 20px;
@mixin box {
background-color: $color-box-background;
padding: $box-padding;
border-radius: $box-border-radius;
color: $color-box-text;
border: 1px solid $color-box-border;
&--focused {
background-color: $color-box-background-focused;
border: 1px solid $color-box-border-focused;
box-shadow: 3px 2px 3px -1px theme('colors.black-10');
}
textarea {
margin: 0;
padding: 12px;
width: 100%;
background-color: theme('colors.surface-field');
border: 1px solid theme('colors.border-field-default');
border-radius: 5px;
color: $color-box-text;
&::placeholder {
color: theme('colors.text-placeholder');
opacity: 1;
}
}
*:focus {
@include focus-outline;
}
&__notice-placeholder {
position: relative;
padding-bottom: 40px;
}
&__notice {
background-color: theme('colors.warning.50');
color: theme('colors.grey.600');
position: absolute;
inset-inline-start: -$box-padding;
bottom: 0;
width: calc(100% + #{$box-padding} * 2);
padding: 5px 10px;
svg.icon {
color: theme('colors.warning.100');
width: 14px;
height: 14px;
margin-inline-end: 10px;
vertical-align: text-bottom;
}
}
& > &__notice-placeholder:last-child &__notice,
&__replies:last-child > :last-child &__notice {
border-end-start-radius: $box-border-radius;
border-end-end-radius: $box-border-radius;
}
}
@mixin button {
background-color: inherit;
border: 1px solid theme('colors.border-button-small-outline-default');
border-radius: 3px;
color: theme('colors.surface-button-default');
cursor: pointer;
font-weight: 700;
height: 30px;
padding-inline-start: 10px;
padding-inline-end: 10px;
&--primary {
color: theme('colors.text-button');
border: 1px solid theme('colors.surface-button-default');
background-color: theme('colors.surface-button-default');
}
&--red {
color: theme('colors.text-button');
border: 1px solid theme('colors.critical.200');
background-color: theme('colors.critical.200');
}
&:disabled {
opacity: 0.3;
}
// Disable Firefox's focus styling because we add our own.
&::-moz-focus-inner {
border: 0;
}
}
@use 'components/CommentHeader/style' as CommentHeader;
@use 'components/Comment/style' as Comment;
@use 'components/CommentReply/style' as CommentReply;
.comments-list {
position: relative;
@ -112,8 +8,3 @@ $box-padding: 20px;
inset-inline-end: 20px;
z-index: calc(theme('zIndex.header') + 5);
}
// stylelint-disable no-invalid-position-at-import-rule
@import 'components/CommentHeader/style';
@import 'components/Comment/style';
@import 'components/CommentReply/style';