webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-08-07 23:03:00 +03:00
Code Activity

Merge pull request #5584 from BookStackApp/content_comments

Browse Source 
Content Comments
This commit is contained in:
Dan Brown
2025-05-22 16:58:36 +01:00
committed by GitHub
parent cdd446ac73 32b29fcdfc
commit d29b14ebfd
40 changed files with 1743 additions and 520 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
resources/sass/_animations.scss
View File

@@ -67,4 +67,26 @@
animation-duration: 180ms;
animation-delay: 0s;
animation-timing-function: cubic-bezier(.62, .28, .23, .99);
}
@keyframes highlight {
0% {
background-color: var(--color-primary-light);
}
33% {
background-color: transparent;
}
66% {
background-color: var(--color-primary-light);
}
100% {
background-color: transparent;
}
}
.anim-highlight {
animation-name: highlight;
animation-duration: 2s;
animation-delay: 0s;
animation-timing-function: linear;
}

97
resources/sass/_components.scss
View File

@@ -569,6 +569,9 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
border-bottom: 0;
padding: 0 vars.$xs;
}
.tab-container [role="tabpanel"].no-outline:focus {
outline: none;
}
.image-picker .none {
display: none;
@@ -746,6 +749,52 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
height: calc(100% - vars.$m);
}
.comment-reference-indicator-wrap a {
float: left;
margin-top: vars.$xs;
font-size: 12px;
display: inline-block;
font-weight: bold;
position: relative;
border-radius: 4px;
overflow: hidden;
padding: 2px 6px 2px 0;
margin-inline-end: vars.$xs;
color: var(--color-link);
span {
display: none;
}
&.outdated span {
display: inline;
}
&.outdated.missing {
color: var(--color-warning);
pointer-events: none;
}
svg {
width: 24px;
margin-inline-end: 0;
}
&:after {
background-color: currentColor;
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0.15;
}
&[href="#"] {
color: #444;
pointer-events: none;
}
}
.comment-branch .comment-box {
margin-bottom: vars.$m;
}
.comment-branch .comment-branch .comment-branch .comment-branch .comment-thread-indicator {
display: none;
}
@@ -760,7 +809,15 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
display: block;
}
.comment-container .empty-state {
display: none;
}
.comment-container:not(:has([component="page-comment"])) .empty-state {
display: block;
}
.comment-container-compact .comment-box {
margin-bottom: vars.$xs;
.meta {
font-size: 0.8rem;
}
@@ -778,6 +835,29 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
width: vars.$m;
}
.comment-container-super-compact .comment-box {
.meta {
font-size: 12px;
}
.avatar {
width: 22px;
height: 22px;
margin-inline-end: 2px !important;
}
.content {
padding: vars.$xxs vars.$s;
line-height: 1.2;
}
.content p {
font-size: 12px;
}
}
.comment-container-super-compact .comment-thread-indicator {
width: (vars.$xs + 3px);
margin-inline-start: 3px;
}
#tag-manager .drag-card {
max-width: 500px;
}
@@ -1127,4 +1207,21 @@ input.scroll-box-search, .scroll-box-header-item {
}
.scroll-box > li.empty-state:last-child {
display: list-item;
}
details.section-expander summary {
border-top: 1px solid #DDD;
@include mixins.lightDark(border-color, #DDD, #000);
font-weight: bold;
font-size: 12px;
color: #888;
cursor: pointer;
padding-block: vars.$xs;
}
details.section-expander:open summary {
margin-bottom: vars.$s;
}
details.section-expander {
border-bottom: 1px solid #DDD;
@include mixins.lightDark(border-color, #DDD, #000);
}

1
resources/sass/_content.scss
View File

@@ -11,6 +11,7 @@
max-width: 840px;
margin: 0 auto;
overflow-wrap: break-word;
position: relative;
.align-left {
text-align: left;
}

110
resources/sass/_pages.scss
View File

@@ -158,11 +158,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
border-radius: 4px;
box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
@include mixins.lightDark(background-color, #fff, #333);
width: 275px;
&.is-page-editable {
width: 328px;
}
width: 328px;
&:before {
position: absolute;
@@ -183,7 +179,6 @@ body.tox-fullscreen, body.markdown-fullscreen {
}
input, button, a {
position: relative;
border-radius: 0;
height: 28px;
font-size: 12px;
vertical-align: top;
@@ -194,17 +189,21 @@ body.tox-fullscreen, body.markdown-fullscreen {
border: 1px solid #DDD;
@include mixins.lightDark(border-color, #ddd, #000);
color: #666;
width: 160px;
z-index: 40;
padding: 5px 10px;
width: auto;
flex: 1;
z-index: 58;
padding: 5px;
border-radius: 0;
}
.text-button {
@include mixins.lightDark(color, #444, #AAA);
}
.input-group .button {
line-height: 1;
margin: 0 0 0 -4px;
margin-inline-start: -1px;
margin-block: 0;
box-shadow: none;
border-radius: 0;
}
a.button {
margin: 0;
@@ -218,6 +217,97 @@ body.tox-fullscreen, body.markdown-fullscreen {
}
}
// Page inline comments
.content-comment-highlight {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
user-select: none;
pointer-events: none;
&:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: var(--color-primary);
opacity: 0.25;
}
}
.content-comment-window {
font-size: vars.$fs-m;
line-height: 1.4;
position: absolute;
top: calc(100% + 3px);
left: 0;
z-index: 92;
pointer-events: all;
min-width: min(340px, 80vw);
@include mixins.lightDark(background-color, #FFF, #222);
box-shadow: vars.$bs-hover;
border-radius: 4px;
overflow: hidden;
}
.content-comment-window-actions {
background-color: var(--color-primary);
color: #FFF;
display: flex;
align-items: center;
justify-content: end;
gap: vars.$xs;
button {
color: #FFF;
font-size: 12px;
padding: vars.$xs;
line-height: 1;
cursor: pointer;
}
button[data-action="jump"] {
text-decoration: underline;
}
svg {
fill: currentColor;
width: 12px;
}
}
.content-comment-window-content {
padding: vars.$xs vars.$s vars.$xs vars.$xs;
max-height: 200px;
overflow-y: scroll;
}
.content-comment-window-content .comment-reference-indicator-wrap {
display: none;
}
.content-comment-marker {
position: absolute;
right: -16px;
top: -16px;
pointer-events: all;
width: min(1.5em, 32px);
height: min(1.5em, 32px);
border-radius: min(calc(1.5em / 2), 32px);
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-primary);
box-shadow: vars.$bs-hover;
color: #FFF;
cursor: pointer;
z-index: 90;
transform: scale(1);
transition: transform ease-in-out 120ms;
svg {
fill: #FFF;
width: 80%;
}
}
.page-content [id^="bkmrk-"]:hover .content-comment-marker {
transform: scale(1.15);
}
// Page editor sidebar toolbox
.floating-toolbox {
@include mixins.lightDark(background-color, #FFF, #222);