зеркало из https://github.com/nextcloud/spreed.git
Merge pull request #2709 from nextcloud/fix-autocompletion-issues
Fix autocompletion issues
This commit is contained in:
Joas Schilling
GitHub
Коммит
53b2583480
|
|
@ -0,0 +1,159 @@
|
|||
// Copied from vue-at (https://github.com/fritx/vue-at/blob/d16d5eefdae8987c0bffe2d9c3867b7da12c808f/src/At.scss)
|
||||
// and wrapped to affect only the panel for candidate mentions.
|
||||
|
||||
.talk.candidate-mentions {
|
||||
|
||||
// atwho.css https://github.com/ichord/At.js
|
||||
.atwho-view {
|
||||
// position:absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// display: none;
|
||||
// margin-top: 18px;
|
||||
// background: white;
|
||||
color: black;
|
||||
// border: 1px solid #DDD;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 5px rgba(0,0,0,0.1);
|
||||
min-width: 120px;
|
||||
z-index: 11110 !important;
|
||||
}
|
||||
.atwho-ul {
|
||||
/* width: 100px; */
|
||||
list-style:none;
|
||||
// padding:0;
|
||||
// margin:auto;
|
||||
// max-height: 200px;
|
||||
// overflow-y: auto;
|
||||
}
|
||||
.atwho-li {
|
||||
display: block;
|
||||
// padding: 5px 10px;
|
||||
// border-bottom: 1px solid #DDD;
|
||||
// cursor: pointer;
|
||||
/* border-top: 1px solid #C8C8C8; */
|
||||
}
|
||||
|
||||
////// added 1
|
||||
.atwho-view {
|
||||
// font-size: 14px;
|
||||
// min-width: 140px;
|
||||
// max-width: 180px;
|
||||
border-radius: 6px;
|
||||
// overflow: hidden;
|
||||
box-shadow: 0 0 10px 0 rgba(101, 111, 122, .5);
|
||||
}
|
||||
.atwho-ul {
|
||||
max-height: 135px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.atwho-li {
|
||||
box-sizing: border-box;
|
||||
height: 27px;
|
||||
padding: 0 12px;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.atwho-cur {
|
||||
// background: #44a8f2;
|
||||
background: #5BB8FF;
|
||||
color: white;
|
||||
}
|
||||
|
||||
////// added 2
|
||||
.atwho-wrap {
|
||||
position: relative;
|
||||
}
|
||||
&.atwho-panel {
|
||||
position: absolute;
|
||||
}
|
||||
.atwho-inner {
|
||||
position: relative;
|
||||
}
|
||||
.atwho-view {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -0.8em; // 抵消左边距
|
||||
cursor: default;
|
||||
background-color: rgba(255,255,255,.94);
|
||||
min-width: 140px;
|
||||
max-width: 180px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
// background-color: rgba(127, 127, 127, .1);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
min-height: 36px;
|
||||
border: 2px solid transparent;
|
||||
border-top: 3px solid transparent;
|
||||
border-bottom: 3px solid transparent;
|
||||
background-clip: padding-box;
|
||||
border-radius: 7px;
|
||||
// background-color: rgba(0, 0, 0, 0.2);
|
||||
background-color: #C4C4C4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.talk.candidate-mentions {
|
||||
// Override "max-width: 180px", as that makes the autocompletion panel too
|
||||
// narrow.
|
||||
.atwho-view {
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
// Override autocompletion panel items height, as they are too short
|
||||
// for the avatars and also need some padding.
|
||||
.atwho-li {
|
||||
height: unset;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
// Although the height of its wrapper is 32px the height of the icon
|
||||
// is the default 16px. This is a temporary fix until it is fixed
|
||||
// in the avatar component.
|
||||
.atwho-li .icon-group-forced-white {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
// Override all colors with our theming and dark mode
|
||||
.atwho-view {
|
||||
background: var(--color-main-background);
|
||||
color: var(--color-main-text);
|
||||
box-shadow: 0 0 5px var(--color-box-shadow);
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: var(--color-background-dark);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-background-darker);
|
||||
}
|
||||
|
||||
.atwho-cur {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-primary-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Override conflicting rules from the comments tab.
|
||||
.talk.candidate-mentions {
|
||||
.atwho-view {
|
||||
top: unset;
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
|
|
@ -70,20 +70,10 @@
|
|||
|
||||
// The atwho panel is a direct child of the body, so it is not affected by
|
||||
// .app-Talk rules above.
|
||||
.atwho-panel {
|
||||
.talk.candidate-mentions.atwho-panel {
|
||||
// "forced-white" needs to be included in the class name as the Avatar does
|
||||
// not accept several classes.
|
||||
.icon-group-forced-white {
|
||||
background-image: url(icon-color-path('group', 'actions', 'fff', 1, true));
|
||||
}
|
||||
|
||||
.atwho-view {
|
||||
background: var(--color-main-background);
|
||||
color: var(--color-main-text);
|
||||
}
|
||||
|
||||
.atwho-cur {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-primary-text);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
@import 'At.scss';
|
||||
@import 'icons.scss';
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
@import 'icons.scss';
|
||||
@import 'At.scss';
|
||||
@import 'icons.scss';
|
||||
|
|
|
|||
|
|
@ -73,6 +73,33 @@ import { searchPossibleMentions } from '../../../services/mentionsService'
|
|||
import Avatar from '@nextcloud/vue/dist/Components/Avatar'
|
||||
import Mention from '../../MessagesList/MessagesGroup/Message/MessagePart/Mention'
|
||||
|
||||
/**
|
||||
* Removes the default atwho style sheet added by the vue-at component.
|
||||
*
|
||||
* The rules in that style sheet are too broad and affect other elements
|
||||
* besides those from the vue-at panel.
|
||||
*/
|
||||
function removeDefaultAtWhoStyleSheet() {
|
||||
const styleElements = document.querySelectorAll('style')
|
||||
for (let i = 0; i < styleElements.length; i++) {
|
||||
const sheet = styleElements[i].sheet
|
||||
|
||||
if (sheet.cssRules.length !== 15) {
|
||||
continue
|
||||
}
|
||||
|
||||
for (const cssRule of sheet.cssRules) {
|
||||
if (cssRule.cssText === '.atwho-view { color: rgb(0, 0, 0); border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px; min-width: 120px; z-index: 11110 !important; }') {
|
||||
styleElements[i].remove()
|
||||
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
removeDefaultAtWhoStyleSheet()
|
||||
|
||||
export default {
|
||||
name: 'AdvancedInput',
|
||||
components: {
|
||||
|
|
@ -146,7 +173,7 @@ export default {
|
|||
*/
|
||||
EventBus.$on('routeChange', this.focusInput)
|
||||
|
||||
this.addCustomAtWhoStyleSheet()
|
||||
this.atWhoPanelExtraClasses = 'talk candidate-mentions'
|
||||
},
|
||||
beforeDestroy() {
|
||||
EventBus.$off('routeChange', this.focusInput)
|
||||
|
|
@ -260,39 +287,6 @@ export default {
|
|||
type: type,
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Adds a special style sheet to customize atwho elements.
|
||||
*
|
||||
* The <style> section has no effect on the atwho elements, as the atwho
|
||||
* panel is reparented to the body, and the rules added there are rooted
|
||||
* on the AdvancedInput.
|
||||
*/
|
||||
addCustomAtWhoStyleSheet() {
|
||||
for (let i = 0; i < document.styleSheets.length; i++) {
|
||||
const sheet = document.styleSheets[i]
|
||||
if (sheet.title === 'at-who-custom') {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const style = document.createElement('style')
|
||||
style.setAttribute('title', 'at-who-custom')
|
||||
|
||||
document.head.appendChild(style)
|
||||
|
||||
// Override "width: 180px", as that makes the autocompletion panel
|
||||
// too narrow.
|
||||
style.sheet.insertRule('.atwho-view { width: unset; }', 0)
|
||||
// Override autocompletion panel items height, as they are too short
|
||||
// for the avatars and also need some padding.
|
||||
style.sheet.insertRule('.atwho-li { height: unset; padding-top: 6px; padding-bottom: 6px; }', 0)
|
||||
|
||||
// Although the height of its wrapper is 32px the height of the icon
|
||||
// is the default 16px. This is a temporary fix until it is fixed
|
||||
// in the avatar component.
|
||||
style.sheet.insertRule('.atwho-li .icon-group-forced-white { width: 32px; height: 32px; }', 0)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -39,9 +39,13 @@ export default {
|
|||
data: function() {
|
||||
return {
|
||||
/**
|
||||
* The selector for the HTML element to reparent the vue-at panel to.
|
||||
*/
|
||||
* The selector for the HTML element to reparent the vue-at panel to.
|
||||
*/
|
||||
atWhoPanelParentSelector: 'body',
|
||||
/**
|
||||
* Extra CSS classes to be set in the vue-at panel.
|
||||
*/
|
||||
atWhoPanelExtraClasses: '',
|
||||
at: null,
|
||||
atWhoPanelElement: null,
|
||||
originalWrapElement: null,
|
||||
|
|
@ -64,6 +68,16 @@ export default {
|
|||
|
||||
return this.at.atwho
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns a list of CSS clases from the space separated string
|
||||
* "atWhoPanelExtraClasses".
|
||||
*
|
||||
* @returns {Array} the list of CSS classes
|
||||
*/
|
||||
atWhoPanelExtraClassesList() {
|
||||
return this.atWhoPanelExtraClasses.split(' ').filter(cssClass => cssClass !== '')
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
|
@ -93,6 +107,10 @@ export default {
|
|||
Vue.nextTick(function() {
|
||||
this.atWhoPanelElement = this.at.$refs.wrap.querySelector('.atwho-panel')
|
||||
|
||||
if (this.atWhoPanelExtraClassesList.length > 0) {
|
||||
this.atWhoPanelElement.classList.add(...this.atWhoPanelExtraClassesList)
|
||||
}
|
||||
|
||||
this.originalWrapElement = this.at.$refs.wrap
|
||||
this.at.$refs.wrap = window.document.querySelector(this.atWhoPanelParentSelector)
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче