tags-input:

* add a "copy" button
* fix some css class (adding a prefix to avoid side effects)
* other minor fixes
This commit is contained in:
John Livingston
2024-06-13 11:55:02 +02:00
parent 591e0ad3fd
commit 618dc6aeae
6 changed files with 257 additions and 48 deletions

View File

@ -88,7 +88,8 @@ livechat-help-button {
input[type="reset"],
button[type="submit"],
button[type="reset"],
.peertube-plugin-livechat-configuration-actions button {
.peertube-plugin-livechat-configuration-actions button,
.peertube-plugin-livechat-tags-input-copy {
// Peertube rounded-line-height-1-5 mixins
line-height: $button-calc-line-height;
@ -104,7 +105,8 @@ livechat-help-button {
input[type="submit"],
button[type="submit"],
.peertube-plugin-livechat-configuration-actions button {
.peertube-plugin-livechat-configuration-actions button,
.peertube-plugin-livechat-tags-input-copy {
// Peertube orange-button mixin
&,
&:active,
@ -331,6 +333,13 @@ livechat-tags-input {
flex-wrap: wrap;
max-width: 320px;
.livechat-tags-container {
align-items: center;
display: flex;
flex-flow: row;
justify-content: space-between;
}
// stylelint trying to rearrange unrelated root blocks because of smaller blocks in them
/* stylelint-disable-next-line no-descending-specificity */
input {
@ -347,46 +356,50 @@ livechat-tags-input {
}
}
#tags,
#tags-searched {
.livechat-tags,
.livechat-tags-searched {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: var(--tag-padding-vertical) 0;
max-height: 150px;
overflow-y: auto;
border-bottom: 1px dashed var(--greyForegroundColor);
transition-property: height, margin;
transition-duration: 0.3s;
&.empty {
height: 0;
margin: 0;
border: none;
}
@supports (scrollbar-width: auto) {
scrollbar-color: var(--greyForegroundColor) transparent;
scrollbar-width: thin;
}
}
#tags-searched {
.livechat-tags-container,
.livechat-tags-searched {
border-bottom: 1px dashed var(--greyForegroundColor);
&.livechat-empty {
height: 0;
margin: 0;
border: none;
}
}
.livechat-tags-searched {
&::after {
content: "\1F50D";
flex-grow: 1;
text-align: right;
}
&.empty {
&.livechat-empty {
&::after {
display: none;
}
}
}
.tag,
.tag-searched {
.livechat-tag,
.livechat-tag-searched {
width: auto;
height: 24px;
display: flex;
@ -400,7 +413,7 @@ livechat-tags-input {
margin: 0 3px 3px 0;
transition: 0.3s filter;
.tag-close {
.livechat-tag-close {
display: block;
width: 12px;
height: 12px;
@ -424,7 +437,7 @@ livechat-tags-input {
color: #fff;
background-color: var(--mainColor);
.tag-close {
.livechat-tag-close {
color: var(--mainColor);
}
}
@ -433,7 +446,7 @@ livechat-tags-input {
color: #fff;
background-color: var(--mainHoverColor);
.tag-close {
.livechat-tag-close {
color: var(--mainHoverColor);
}
}
@ -444,12 +457,12 @@ livechat-tags-input {
color: #fff;
background-color: var(--inputBorderColor);
.tag-close {
.livechat-tag-close {
color: var(--inputBorderColor);
}
}
.tag-name {
.livechat-tag-name {
margin-top: 3px;
text-overflow: ellipsis;
overflow: hidden;
@ -458,7 +471,7 @@ livechat-tags-input {
}
}
#tags.unfocused .tag {
.livechat-tags.livechat-unfocused .livechat-tag {
filter: opacity(50%) grayscale(80%);
}
}